Change the save button disabled logic

fix the generation problem

---------

Co-authored-by: Michael Chung <michaelchung@michaels-mbp-2.home>

crates/desktop/artcraft/src/commands/app_preferences/get_app_preferences_command.rs

@@ -17,7 +17,15 @@ pub struct AppPreferencesPayload {
   
   /// Play sounds on events.
   pub play_sounds: bool,
-  
+
+  /// Key pointing to file; defined in the frontend code.
+  /// Defined for enqueue since image enqueue can be async
+  pub enqueue_success_sound: Option<String>,
+
+  /// Key pointing to file; defined in the frontend code.
+  /// Defined for enqueue since image enqueue can be async
+  pub enqueue_failure_sound: Option<String>,
+
   /// Key pointing to file; defined in the frontend code.
   pub generation_success_sound: Option<String>,
 
@@ -25,6 +33,7 @@ pub struct AppPreferencesPayload {
   pub generation_failure_sound: Option<String>,
 
   /// Key pointing to file; defined in the frontend code.
+  #[deprecated]
   pub generation_enqueue_sound: Option<String>,
 }
 
@@ -52,6 +61,8 @@ async fn get_prefs(app_prefs: &AppPreferencesManager) -> AnyhowResult<AppPrefere
   Ok(AppPreferencesPayload {
     preferred_download_directory: prefs.preferred_download_directory,
     play_sounds: prefs.play_sounds,
+    enqueue_success_sound: prefs.enqueue_success_sound,
+    enqueue_failure_sound: prefs.enqueue_failure_sound,
     generation_success_sound: prefs.generation_success_sound,
     generation_failure_sound: prefs.generation_failure_sound,
     generation_enqueue_sound: prefs.generation_enqueue_sound,

crates/desktop/artcraft/src/commands/app_preferences/update_app_preference_command.rs

@@ -29,9 +29,10 @@ pub enum ValueType {
 pub enum PreferenceName {
   PreferredDownloadDirectory,
   PlaySounds,
+  EnqueueSuccessSound,
+  EnqueueFailureSound,
   GenerationSuccessSound,
   GenerationFailureSound,
-  GenerationEnqueueSound,
 }
 
 #[derive(Serialize)]
@@ -85,6 +86,16 @@ async fn update_prefs(
           return Err(anyhow!("Invalid value: {:?}", request.value)),
       }
     }
+    PreferenceName::EnqueueSuccessSound => {
+      prefs.enqueue_success_sound = request.value
+          .map(|val| string_value(&val))
+          .transpose()?;
+    }
+    PreferenceName::EnqueueFailureSound => {
+      prefs.enqueue_failure_sound = request.value
+          .map(|val| string_value(&val))
+          .transpose()?;
+    }
     PreferenceName::GenerationSuccessSound => {
       prefs.generation_success_sound = request.value
           .map(|val| string_value(&val))
@@ -95,11 +106,6 @@ async fn update_prefs(
           .map(|val| string_value(&val))
           .transpose()?;
     }
-    PreferenceName::GenerationEnqueueSound => {
-      prefs.generation_enqueue_sound = request.value
-          .map(|val| string_value(&val))
-          .transpose()?;
-    }
   }
   
   app_prefs.set_clone(&prefs)?;

crates/desktop/artcraft/src/commands/command_response_wrapper.rs

@@ -0,0 +1,132 @@
+use serde::Serialize;
+use std::error::Error;
+use std::str::FromStr;
+
+/// Easy to use Result<T, E> type.
+pub type CommandResult<SuccessPayload, ErrType, ErrPayload> = 
+  Result<CommandSuccessResponseWrapper<SuccessPayload>, CommandErrorResponseWrapper<ErrType, ErrPayload>>;
+
+/// No inner payloads for this type. Just strings as messages.
+pub type SimpleCommandResult = CommandResult<(), (), ()>;
+
+/// Statuses for successful commands.
+#[derive(Serialize, Clone, Debug)]
+#[serde(rename_all = "snake_case")]
+pub enum CommandSuccessStatus {
+  Success, // 200
+}
+
+/// Statuses for errorful commands.
+#[derive(Serialize, Clone, Debug)]
+#[serde(rename_all = "snake_case")]
+pub enum CommandErrorStatus {
+  BadRequest, // 400
+  Unauthorized, // 401
+  TooManyRequests, // 429
+  ServerError, // 500
+}
+
+#[derive(Serialize, Debug)]
+pub struct CommandSuccessResponseWrapper<T: Serialize> {
+  /// Both "success" and "error" types have a `status` field for the frontend.
+  pub status: CommandSuccessStatus,
+
+  #[serde(skip_serializing_if = "Option::is_none")]
+  pub success_message: Option<String>,
+  
+  #[serde(skip_serializing_if = "Option::is_none")]
+  pub payload: Option<T>,
+}
+
+#[derive(Serialize, Debug)]
+pub struct CommandErrorResponseWrapper<ErrType: Serialize, ErrPayload: Serialize> {
+  /// Both "success" and "error" types have a `status` field for the frontend.
+  pub status: CommandErrorStatus,
+
+  #[serde(skip_serializing_if = "Option::is_none")]
+  pub error_message: Option<String>,
+  
+  /// Represents a "type" of error, preferably an enum without payloads.
+  /// Preferably this serializes to a string.
+  #[serde(skip_serializing_if = "Option::is_none")]
+  pub error_type: Option<ErrType>,
+  
+  /// Represents a full error details object or payload.
+  /// This could be a structure, message, or whatever.
+  #[serde(skip_serializing_if = "Option::is_none")]
+  pub error_details: Option<ErrPayload>,
+}
+
+
+impl CommandSuccessResponseWrapper<()> {
+  pub fn empty() -> Self {
+    CommandSuccessResponseWrapper {
+      status: CommandSuccessStatus::Success,
+      success_message: None,
+      payload: None,
+    }
+  }
+}
+
+/// NB: This is a hack because of `()` (a.k.a. the "unit" type) and `Serialize` trait coherence and overlap.
+/// We cannot currently implement a trait for `()` and generic `Serialize` because `()` itself implements 
+/// `Serialize`. Rust's `"specialization"`, which would let us account for this, is an unstable, nightly-only
+/// feature. So instead we manually mark all types other than `()` with `SerializeMarker` as a hack to 
+/// distinguish the two.
+trait SerializeMarker : Serialize {}
+
+// NB: () is Serialize! So we can't broadly implement just `T: Serialize`.
+impl From<()> for CommandSuccessResponseWrapper<()> {
+  fn from(_: ()) -> Self {
+    CommandSuccessResponseWrapper {
+      status: CommandSuccessStatus::Success,
+      success_message: None,
+      payload: None,
+    }
+  }
+}
+
+/// NB: Note the `"+ SerializeMarker"` bound here. This is a hack to distinguish between `()` and other types
+/// for which we will manually mark as `SerializeMarker`.
+impl <T> From<T> for CommandSuccessResponseWrapper<T> where T: Serialize + SerializeMarker {
+  fn from(val: T) -> Self {
+    CommandSuccessResponseWrapper {
+      status: CommandSuccessStatus::Success,
+      success_message: None,
+      payload: Some(val),
+    }
+  }
+}
+
+impl From<&str> for CommandSuccessResponseWrapper<String> {
+  fn from(msg: &str) -> Self {
+    CommandSuccessResponseWrapper {
+      status: CommandSuccessStatus::Success,
+      success_message: Some(msg.to_string()),
+      payload: None,
+    }
+  }
+}
+
+impl From<&str> for CommandErrorResponseWrapper<(), ()> {
+  fn from(value: &str) -> Self {
+    CommandErrorResponseWrapper {
+      status: CommandErrorStatus::BadRequest, // NB: Default to 500 error.
+      error_message: Some(value.to_string()),
+      error_type: None,
+      error_details: None,
+    }
+  }
+}
+
+#[cfg(test)]
+mod tests {
+  
+  #[test]
+  fn test_empty_tuple_serialize() {
+    let response = super::CommandSuccessResponseWrapper::<()>::from(());
+    let serialized = serde_json::to_string(&response).unwrap();
+    // NB: This tests that the blanket "Serialize" impl doesn't produce a "null payload" field.
+    assert_eq!(serialized, r#"{"status":"success"}"#);
+  }
+}

crates/desktop/artcraft/src/commands/mod.rs

@@ -1,4 +1,5 @@
 pub mod app_preferences;
+pub mod command_response_wrapper;
 pub mod flip_image;
 pub mod platform_info_command;
 pub mod sora;

crates/desktop/artcraft/src/commands/sora/check_sora_session_command.rs

@@ -1,3 +1,5 @@
+use std::ops::Add;
+use chrono::{DateTime, TimeDelta, Utc};
 use crate::commands::app_preferences::get_app_preferences_command::AppPreferencesPayload;
 use crate::state::app_preferences::app_preferences_manager::AppPreferencesManager;
 use crate::state::data_dir::app_data_root::AppDataRoot;
@@ -12,6 +14,8 @@ use openai_sora_client::requests::list_media::list_media::list_media;
 use serde_derive::Serialize;
 use tauri::{AppHandle, State};
 
+const CACHE_PERIOD : TimeDelta = TimeDelta::milliseconds(1000 * 60 * 5); // 5 minutes
+
 #[derive(Serialize)]
 #[serde(rename_all = "snake_case")]
 pub struct CheckSoraSessionCommand {
@@ -63,10 +67,35 @@ async fn do_check(
       });
     }
   };
+
+  let mut needs_upgrade_or_check = false;
   
-  let upgraded = maybe_upgrade_or_renew_session(&mut creds).await?;
+  let stats = sora_creds_manager.get_credential_stats()?;
+
+  match stats.last_consecutive_credential_success {
+    None => {
+      info!("Session never checked, needs upgrade or status checking.");
+      needs_upgrade_or_check= true;
+    }
+    Some(last_success) => {
+      let now = chrono::Utc::now();
+      let expires = last_success.add(CACHE_PERIOD);
+      if now.gt(&expires) {
+        info!("Session success expired, needs upgrade or status checking.");
+        needs_upgrade_or_check = true;
+      }
+    }
+  }
   
-  list_media(&creds).await?;
+  let mut upgraded = false;
+  
+  if needs_upgrade_or_check {
+    info!("Attempting to upgrade session...");
+    upgraded = maybe_upgrade_or_renew_session(&mut creds).await?;
+    info!("Attempting to check session...");
+    list_media(&creds).await?;
+    sora_creds_manager.record_credential_success()?;
+  }
 
   if upgraded {
     info!("Saving upgraded session to manager and disk...");

crates/desktop/artcraft/src/commands/sora/mod.rs

@@ -2,3 +2,4 @@ pub mod check_sora_session_command;
 pub mod open_sora_login_command;
 pub mod sora_image_generation_command;
 pub mod sora_image_remix_command;
+pub mod sora_logout_command;

crates/desktop/artcraft/src/commands/sora/sora_image_generation_command.rs

@@ -14,8 +14,13 @@ use openai_sora_client::requests::image_gen::sora_image_gen_remix::{sora_image_g
 use openai_sora_client::requests::upload::upload_media_from_bytes::sora_media_upload_from_bytes;
 use std::fs::read_to_string;
 use std::io::Cursor;
+use std::time::Duration;
 use tauri::{AppHandle, Manager, State};
 
+const SORA_IMAGE_UPLOAD_TIMEOUT: Duration = Duration::from_millis(1000 * 30); // 30 seconds
+
+const SORA_IMAGE_REMIX_TIMEOUT: Duration = Duration::from_millis(1000 * 30); // 30 seconds
+
 #[tauri::command]
 pub async fn sora_image_generation_command(
   prompt: &str,
@@ -55,8 +60,13 @@ pub async fn generate_image(
     let image_bytes = BASE64_STANDARD.decode(image)?;
 
     let filename = "image.png".to_string();
+    
 
-    let response = sora_media_upload_from_bytes(image_bytes, filename, CredentialMigrationRef::New(&creds))
+    let response = sora_media_upload_from_bytes(
+      image_bytes, 
+      filename, 
+      CredentialMigrationRef::New(&creds), 
+      Some(SORA_IMAGE_UPLOAD_TIMEOUT))
         .await
         .map_err(|err| {
           error!("Failed to upload image to Sora: {:?}", err);
@@ -72,6 +82,7 @@ pub async fn generate_image(
     image_size: ImageSize::Square,
     sora_media_tokens: sora_media_tokens.clone(),
     credentials: CredentialMigrationRef::New(&creds),
+    request_timeout: Some(SORA_IMAGE_REMIX_TIMEOUT),
   }).await
       .map_err(|err| {
         error!("Failed to call Sora image generation: {:?}", err);

crates/desktop/artcraft/src/commands/sora/sora_image_remix_command.rs

@@ -1,3 +1,4 @@
+use crate::commands::command_response_wrapper::{CommandErrorResponseWrapper, CommandErrorStatus, CommandResult};
 use crate::events::sendable_event_trait::SendableEvent;
 use crate::events::sora::sora_image_enqueue_failure_event::SoraImageEnqueueFailureEvent;
 use crate::events::sora::sora_image_enqueue_success_event::SoraImageEnqueueSuccessEvent;
@@ -11,7 +12,7 @@ use crate::utils::get_url_file_extension::get_url_file_extension;
 use crate::utils::simple_http_download::simple_http_download;
 use base64::prelude::BASE64_STANDARD;
 use base64::Engine;
-use errors::AnyhowResult;
+use errors::{AnyhowError, AnyhowResult};
 use image::codecs::png::{CompressionType, FilterType, PngEncoder};
 use image::{DynamicImage, ImageReader};
 use log::{debug, error, info};
@@ -24,14 +25,22 @@ use openai_sora_client::requests::image_gen::common::{ImageSize, NumImages};
 use openai_sora_client::requests::image_gen::sora_image_gen_remix::{sora_image_gen_remix, SoraImageGenRemixRequest};
 use openai_sora_client::requests::upload::upload_media_from_bytes::sora_media_upload_from_bytes;
 use openai_sora_client::requests::upload::upload_media_from_file::sora_media_upload_from_file;
+use openai_sora_client::sora_error::SoraError;
 use serde_derive::{Deserialize, Serialize};
 use std::fs::read_to_string;
 use std::io::Cursor;
+use std::time::Duration;
+use storyteller_client::api_error::ApiError;
+use storyteller_client::api_error::ApiError::InternalServerError;
 use storyteller_client::media_files::get_media_file::get_media_file;
 use storyteller_client::utils::api_host::ApiHost;
 use tauri::{AppHandle, Emitter, Manager, State};
 use tokens::tokens::media_files::MediaFileToken;
 
+const SORA_IMAGE_UPLOAD_TIMEOUT: Duration = Duration::from_millis(1000 * 30); // 30 seconds
+
+const SORA_IMAGE_REMIX_TIMEOUT: Duration = Duration::from_millis(1000 * 30); // 30 seconds
+
 #[derive(Deserialize)]
 pub struct SoraImageRemixCommand {
   /// Image media file; the engine or canvas snapshot (screenshot).
@@ -49,6 +58,20 @@ pub struct SoraImageRemixCommand {
   pub maybe_number_of_samples: Option<u32>,
 }
 
+#[derive(Serialize, Debug)]
+#[serde(rename_all = "snake_case")]
+pub enum SoraImageRemixErrorType {
+  /// Generic server error
+  ServerError,
+  /// The user is sending too many requests
+  TooManyConcurrentTasks,
+  /// The user needs to create a Sora account
+  SoraUsernameNotYetCreated,
+  /// The Sora service is having problems. Try again soon.
+  SoraIsHavingProblems,
+}
+
+
 #[tauri::command]
 pub async fn sora_image_remix_command(
   app: AppHandle,
@@ -56,7 +79,7 @@ pub async fn sora_image_remix_command(
   app_data_root: State<'_, AppDataRoot>,
   sora_creds_manager: State<'_, SoraCredentialManager>,
   sora_task_queue: State<'_, SoraTaskQueue>,
-) -> Result<String, String> {
+) -> CommandResult<(), SoraImageRemixErrorType, ()> {
   
   info!("image_generation_command called; scene media token: {:?}, additional images: {:?}", 
     request.snapshot_media_token, request.maybe_additional_images);
@@ -65,27 +88,83 @@ pub async fn sora_image_remix_command(
 
   let result = generate_image(request, &app_data_root, &sora_creds_manager, &sora_task_queue).await;
   
-  if let Err(err) = result {
-    error!("error: {:?}", err);
+  match result {
+    Err(err) => {
+      error!("error: {:?}", err);
 
-    let event = SoraImageEnqueueFailureEvent {};
-    let result = event.send(&app);
+      let event = SoraImageEnqueueFailureEvent {};
+      let result = event.send(&app);
 
-    if let Err(err) = result {
-      error!("Failed to emit event: {:?}", err);
+      if let Err(err) = result {
+        error!("Failed to emit event: {:?}", err);
+      }
+      
+      let mut status = CommandErrorStatus::ServerError;
+      let mut error_type = SoraImageRemixErrorType::ServerError;
+      let mut error_message = "A server error occurred. Please try again. If it continues, please tell our staff about the problem.";
+      
+      match (err) {
+        InnerError::SoraError(SoraError::TooManyConcurrentTasks) => {
+          error_type = SoraImageRemixErrorType::TooManyConcurrentTasks;
+          status = CommandErrorStatus::ServerError;
+          error_message = "You already have work in progress. Please wait for it to finish.";
+        },
+        InnerError::SoraError(SoraError::SoraUsernameNotYetCreated) => {
+          error_type = SoraImageRemixErrorType::SoraUsernameNotYetCreated;
+          status = CommandErrorStatus::BadRequest;
+          error_message = "You need to create a username on Sora.com to continue.";
+        },
+        InnerError::SoraError(SoraError::BadGateway(_) | SoraError::CloudFlareTimeout(_)) => {
+          error_type = SoraImageRemixErrorType::SoraIsHavingProblems;
+          status = CommandErrorStatus::ServerError;
+          error_message = "Sora is having problems. Please wait a moment and then retry.";
+        }
+        _ => {},
+      }
+
+      Err(CommandErrorResponseWrapper {
+        status,
+        error_message: Some(error_message.to_string()),
+        error_type: Some(error_type),
+        error_details: None,
+      })
+    }
+    Ok(_) => {
+      let event = SoraImageEnqueueSuccessEvent {};
+      let result = event.send(&app);
+
+      if let Err(err) = result {
+        error!("Failed to emit event: {:?}", err);
+      }
+
+      Ok(().into())
     }
-    
-    return Err("there was an error".to_string());
   }
+}
 
-  let event = SoraImageEnqueueSuccessEvent {};
-  let result = event.send(&app);
+#[derive(Debug)]
+enum InnerError {
+  SoraError(SoraError),
+  AnyhowError(AnyhowError),
+  StorytellerApiError(ApiError),
+}
 
-  if let Err(err) = result {
-    error!("Failed to emit event: {:?}", err);
+impl From<AnyhowError> for InnerError {
+  fn from(value: AnyhowError) -> Self {
+    Self::AnyhowError(value)
   }
+}
 
-  Ok("success".to_string())
+impl From<SoraError> for InnerError {
+  fn from(value: SoraError) -> Self {
+    Self::SoraError(value)
+  }
+}
+
+impl From<ApiError> for InnerError {
+  fn from(value: ApiError) -> Self {
+    Self::StorytellerApiError(value)
+  }
 }
 
 pub async fn generate_image(
@@ -93,7 +172,7 @@ pub async fn generate_image(
   app_data_root: &AppDataRoot,
   sora_creds_manager: &SoraCredentialManager,
   sora_task_queue: &SoraTaskQueue,
-) -> AnyhowResult<()> {
+) -> Result<(), InnerError> {
 
   let response = get_media_file(&ApiHost::Storyteller, &request.snapshot_media_token).await?;
 
@@ -132,6 +211,7 @@ pub async fn generate_image(
         image_upload_from_file_with_session_auto_renew(ImageUploadFromFileAutoRenewRequest {
           file_path,
           credentials: &creds,
+          request_timeout: Some(SORA_IMAGE_UPLOAD_TIMEOUT),
         }).await?;
 
     if let Some(new_creds) = maybe_new_credentials {
@@ -156,6 +236,7 @@ pub async fn generate_image(
         image_size: ImageSize::Square,
         sora_media_tokens: sora_media_tokens.clone(),
         credentials: &creds,
+        request_timeout: Some(SORA_IMAGE_REMIX_TIMEOUT),
       }).await?;
 
   if let Some(new_creds) = maybe_new_creds {

crates/desktop/artcraft/src/commands/sora/sora_logout_command.rs

@@ -0,0 +1,39 @@
+use crate::commands::app_preferences::get_app_preferences_command::AppPreferencesPayload;
+use crate::commands::command_response_wrapper::{CommandResult, CommandSuccessResponseWrapper, SimpleCommandResult};
+use crate::state::app_preferences::app_preferences_manager::AppPreferencesManager;
+use crate::state::data_dir::app_data_root::AppDataRoot;
+use crate::state::sora::sora_credential_manager::SoraCredentialManager;
+use crate::windows::sora_login_window::open_sora_login_window::open_sora_login_window;
+use errors::{AnyhowError, AnyhowResult};
+use log::{error, info};
+use once_cell::sync::Lazy;
+use openai_sora_client::creds::sora_credential_set::SoraCredentialSet;
+use openai_sora_client::recipes::maybe_upgrade_or_renew_session::maybe_upgrade_or_renew_session;
+use openai_sora_client::requests::list_media::list_media::list_media;
+use serde_derive::Serialize;
+use std::fmt::format;
+use tauri::{AppHandle, State};
+
+#[tauri::command]
+pub async fn sora_logout_command(
+  sora_creds_manager: State<'_, SoraCredentialManager>,
+) -> SimpleCommandResult {
+  info!("sora_logout_command called");
+
+  if let Err(err) = sora_creds_manager.purge_credentials_from_disk() {
+    error!("Error purging credentials from disk: {:?}", err);
+    return Err("error purging credentials from disk".into());
+  }
+  
+  if let Err(err) = sora_creds_manager.clear_credentials() {
+    error!("Error clearing credentials from memory: {:?}", err);
+    return Err("error clearing credentials from memory".into());
+  }
+  
+  if let Err(err) = sora_creds_manager.reset_credential_stats() {
+    error!("Error resetting credential stats: {:?}", err);
+    return Err("error resetting credential stats".into());
+  }
+  
+  Ok(().into())
+}

crates/desktop/artcraft/src/lib.rs

@@ -15,8 +15,10 @@ use crate::commands::sora::check_sora_session_command::check_sora_session_comman
 use crate::commands::sora::open_sora_login_command::open_sora_login_command;
 use crate::commands::sora::sora_image_generation_command::sora_image_generation_command;
 use crate::commands::sora::sora_image_remix_command::sora_image_remix_command;
+use crate::commands::sora::sora_logout_command::sora_logout_command;
 use crate::state::app_preferences::app_preferences_manager::load_app_preferences_or_default;
 use crate::state::data_dir::app_data_root::AppDataRoot;
+use crate::state::main_window_position::MainWindowPosition;
 use crate::state::main_window_size::MainWindowSize;
 use crate::state::sora::sora_credential_manager::SoraCredentialManager;
 use crate::state::sora::sora_task_queue::SoraTaskQueue;
@@ -109,6 +111,20 @@ pub fn run() {
         }
       }
 
+      match MainWindowPosition::from_filesystem_configs(&app_data_root_3) {
+        Ok(None) => {}
+        Ok(Some(pos)) => {
+          println!("Moving window to: {:?}", pos);
+          let result = pos.apply_to_main_window(&app);
+          if let Err(err) = result {
+            eprintln!("Could not set window position: {:?}", err);
+          }
+        }
+        Err(err) => {
+          eprintln!("Failed to read window position from disk: {:?}", err);
+        }
+      }
+
       tauri::async_runtime::spawn(main_window_thread(app_3, app_data_root_3, storyteller_creds_manager_2));
       tauri::async_runtime::spawn(sora_task_polling_thread(app_4, app_data_root_4, sora_creds_manager_3, storyteller_creds_manager_3, sora_task_queue_2));
       tauri::async_runtime::spawn(discord_presence_thread());
@@ -127,6 +143,7 @@ pub fn run() {
       platform_info_command,
       sora_image_generation_command,
       sora_image_remix_command,
+      sora_logout_command,
       update_app_preferences_command,
     ])
     .run(tauri::generate_context!("tauri.conf.json"))

crates/desktop/artcraft/src/state/app_preferences/app_preferences.rs

@@ -9,6 +9,14 @@ pub struct AppPreferences {
 
   /// Play sounds on events.
   pub play_sounds: bool,
+
+  /// Key pointing to file; defined in the frontend code.
+  /// Defined for enqueue since image enqueue can be async
+  pub enqueue_success_sound: Option<String>,
+
+  /// Key pointing to file; defined in the frontend code.
+  /// Defined for enqueue since image enqueue can be async
+  pub enqueue_failure_sound: Option<String>,
   
   /// Key pointing to file; defined in the frontend code.
   pub generation_success_sound: Option<String>,
@@ -17,6 +25,7 @@ pub struct AppPreferences {
   pub generation_failure_sound: Option<String>,
   
   /// Key pointing to file; defined in the frontend code.
+  #[deprecated]
   pub generation_enqueue_sound: Option<String>,
 }
 
@@ -26,7 +35,9 @@ impl Default for AppPreferences {
       preferred_download_directory: PreferredDownloadDirectory::System(SystemDownloadDirectory::Downloads),
       play_sounds: true,
       // NB: These are defined in the frontend.
-      generation_success_sound: Some("flower".to_string()),
+      enqueue_success_sound: Some("done".to_string()),
+      enqueue_failure_sound: Some("spike_throw".to_string()),
+      generation_success_sound: Some("special_flower".to_string()),
       generation_failure_sound: Some("crumble".to_string()),
       generation_enqueue_sound: Some("done".to_string()),
     }

crates/desktop/artcraft/src/state/data_dir/app_data_root.rs

@@ -136,6 +136,10 @@ impl AppDataRoot {
   pub fn get_window_size_config_file(&self) -> PathBuf {
     self.path.join("window_size.json")
   }
+  
+  pub fn get_window_position_config_file(&self) -> PathBuf {
+    self.path.join("window_position.json")
+  }
 }
 
 // eg. /home/bob/artcraft, /Users/bob/artcraft, or C:\Users\Alice\artcraft

crates/desktop/artcraft/src/state/main_window_position.rs

@@ -0,0 +1,73 @@
+use crate::state::data_dir::app_data_root::AppDataRoot;
+use crate::windows::main_window::constants::MAIN_WINDOW_NAME;
+use errors::AnyhowResult;
+use serde_derive::{Deserialize, Serialize};
+use std::fs::OpenOptions;
+use std::io::Write;
+use tauri::{AppHandle, Manager, PhysicalPosition, Window};
+
+#[derive(Serialize, Deserialize, Clone, Debug, Eq, PartialEq)]
+pub struct MainWindowPosition {
+  pub x: i32,
+  pub y: i32,
+}
+
+impl MainWindowPosition {
+  pub fn new(x: i32, y: i32) -> Self {
+    Self { x, y }
+  }
+
+  pub fn from_main_window(app: &AppHandle) -> AnyhowResult<Self> {
+    let windows = app.windows();
+    windows.get(MAIN_WINDOW_NAME)
+        .map(|window| Self::from_window(window))
+        .unwrap_or_else(|| Err(anyhow::anyhow!("Main window not found")))
+  }
+
+  pub fn from_window(window: &Window) -> AnyhowResult<Self> {
+    let position = window.outer_position()?;
+    Ok(Self {
+      x: position.x,
+      y: position.y,
+    })
+  }
+
+  pub fn from_filesystem_configs(app_data_root: &AppDataRoot) -> AnyhowResult<Option<Self>> {
+    let filename = app_data_root.get_window_position_config_file();
+    if !filename.exists() {
+      return Ok(None);
+    }
+    let contents = std::fs::read_to_string(filename)?;
+    let pos : MainWindowPosition = serde_json::from_str(&contents)?;
+    Ok(Some(pos))
+  }
+
+  pub fn apply_to_main_window(&self, app: &AppHandle) -> AnyhowResult<()> {
+    let windows = app.windows();
+    let window = windows.get(MAIN_WINDOW_NAME)
+        .ok_or_else(|| anyhow::anyhow!("Main window not found"))?;
+    window.set_position(PhysicalPosition::new(self.x, self.y))?;
+    Ok(())
+  }
+
+  pub fn persist_to_filesystem(&self, app_data_root: &AppDataRoot) -> AnyhowResult<()> {
+    let filename = app_data_root.get_window_position_config_file();
+    let json = serde_json::to_string(self)?;
+    let mut file = OpenOptions::new()
+        .create(true)
+        .write(true)
+        .truncate(true)
+        .open(filename)?;
+    file.write_all(json.as_bytes())?;
+    file.flush()?;
+    Ok(())
+  }
+
+  pub fn to_physical_position(&self) -> PhysicalPosition<i32> {
+    PhysicalPosition::new(self.x, self.y)
+  }
+
+  pub fn matches_physical_position(&self, pos: &PhysicalPosition<i32>) -> bool {
+    self.x == pos.x && self.y == pos.y
+  }
+}

crates/desktop/artcraft/src/state/main_window_size.rs

@@ -1,12 +1,12 @@
 use crate::state::data_dir::app_data_root::AppDataRoot;
+use crate::utils::best_window_size_heuristic::best_window_size_heuristic;
+use crate::windows::main_window::constants::MAIN_WINDOW_NAME;
 use errors::AnyhowResult;
 use serde_derive::{Deserialize, Serialize};
 use std::fs::OpenOptions;
 use std::io::Write;
 use tauri::{AppHandle, Manager, PhysicalSize, Window};
 
-const MAIN_WINDOW_NAME: &str = "main";
-
 #[derive(Serialize, Deserialize, Clone, Debug, Eq, PartialEq)]
 pub struct MainWindowSize {
   pub width: u32,
@@ -26,7 +26,7 @@ impl MainWindowSize {
   }
 
   pub fn from_window(window: &Window) -> AnyhowResult<Self> {
-    let size = window.inner_size()?;
+    let size = best_window_size_heuristic(window)?;
     Ok(Self {
       width: size.width,
       height: size.height,

crates/desktop/artcraft/src/state/mod.rs

@@ -2,6 +2,7 @@ pub mod app_preferences;
 pub mod app_startup_time;
 pub mod data_dir;
 pub mod expanduser;
+pub mod main_window_position;
 pub mod main_window_size;
 pub mod os_platform;
 pub mod sora;

crates/desktop/artcraft/src/state/sora/mod.rs

@@ -2,4 +2,5 @@ pub mod read_sora_credentials_from_disk;
 pub mod read_sora_credentials_from_disk_with_upgrade;
 pub mod sora_credential_holder;
 pub mod sora_credential_manager;
+pub mod sora_credential_stats;
 pub mod sora_task_queue;

crates/desktop/artcraft/src/state/sora/sora_credential_manager.rs

@@ -1,21 +1,29 @@
 use crate::state::data_dir::app_data_root::AppDataRoot;
 use crate::state::sora::read_sora_credentials_from_disk::read_sora_credentials_from_disk;
 use crate::state::sora::sora_credential_holder::SoraCredentialHolder;
+use crate::state::sora::sora_credential_stats::SoraCredentialStats;
 use anyhow::anyhow;
 use errors::AnyhowResult;
 use log::{error, info, warn};
+use memory_store::clone_cell::CloneCell;
+use openai_sora_client::creds::sora_cookies::SoraCookies;
 use openai_sora_client::creds::sora_credential_set::SoraCredentialSet;
+use openai_sora_client::creds::sora_jwt_bearer_token::SoraJwtBearerToken;
 use openai_sora_client::creds::sora_sentinel::SoraSentinel;
 use openai_sora_client::requests::sentinel_refresh::generate::token::generate_token;
 use std::fs::OpenOptions;
 use std::io::Write;
-use openai_sora_client::creds::sora_cookies::SoraCookies;
-use openai_sora_client::creds::sora_jwt_bearer_token::SoraJwtBearerToken;
+use std::path::Path;
+use std::{fs, io};
 
 #[derive(Clone)]
 pub struct SoraCredentialManager {
   holder: SoraCredentialHolder,
   app_data_root: AppDataRoot,
+  
+  /// This is meant to help debug credential issues, keep credentials cached, fresh, etc.
+  // TODO: Put this into the same structure as the credentials and also persist to disk.
+  stats: CloneCell<SoraCredentialStats>,
 }
 
 impl SoraCredentialManager {
@@ -33,9 +41,36 @@ impl SoraCredentialManager {
     Self {
       holder,
       app_data_root: app_data_root.clone(),
+      stats: CloneCell::with_owned(SoraCredentialStats::new()),
     }
   }
 
+  pub fn record_credential_success(&self) -> AnyhowResult<()> {
+    let mut stats = self.stats.get_clone()?;
+    stats.record_credential_success();
+    self.stats.set_owned(stats)?;
+    Ok(())
+  }
+
+  pub fn record_credential_failure(&self) -> AnyhowResult<()> {
+    let mut stats = self.stats.get_clone()?;
+    stats.record_credential_failure();
+    self.stats.set_owned(stats)?;
+    Ok(())
+  }
+  
+  pub fn reset_credential_stats(&self) -> AnyhowResult<()> {
+    self.stats.set_owned(SoraCredentialStats::new())
+  }
+  
+  pub fn get_credential_stats(&self) -> AnyhowResult<SoraCredentialStats> {
+    self.stats.get_clone()
+  }
+
+  pub fn set_credential_stats(&self, stats: SoraCredentialStats) -> AnyhowResult<()> {
+    self.stats.set_owned(stats)
+  }
+
   pub fn set_credentials(&self, creds: &SoraCredentialSet) -> AnyhowResult<()> {
     self.holder.set_credentials(creds)
   }
@@ -45,6 +80,31 @@ impl SoraCredentialManager {
     Ok(())
   }
 
+  /// This is meant to be infallible.
+  pub fn purge_credentials_from_disk(&self) -> Result<(), io::Error> {
+    let creds_dir = self.app_data_root.credentials_dir();
+
+    remove_file_if_exists(creds_dir.get_sora_cookie_file_path())?;
+    remove_file_if_exists(creds_dir.get_sora_bearer_token_file_path())?;
+    remove_file_if_exists(creds_dir.get_sora_sentinel_file_path())?;
+    
+    Ok(())
+  }
+  
+  /// This is meant to be infallible.
+  pub fn try_purge_credentials_from_disk(&self) {
+    let creds_dir = self.app_data_root.credentials_dir();
+    if let Err(err) = fs::remove_file(creds_dir.get_sora_cookie_file_path()) {
+      error!("Failed to remove cookie file: {:?}", err);
+    }
+    if let Err(err) = fs::remove_file(creds_dir.get_sora_bearer_token_file_path()) {
+      error!("Failed to remove bearer token file: {:?}", err);
+    }
+    if let Err(err) = fs::remove_file(creds_dir.get_sora_sentinel_file_path()) {
+      error!("Failed to remove sentinel file: {:?}", err);
+    }
+  }
+
   pub fn get_credentials(&self) -> AnyhowResult<Option<SoraCredentialSet>> {
     self.holder.get_credentials()
   }
@@ -155,3 +215,11 @@ fn persist_sentinel_to_disk(sentinel: &SoraSentinel, app_data_root: &AppDataRoot
 
   Ok(())
 }
+
+fn remove_file_if_exists<P: AsRef<Path>>(path: P) -> Result<(), io::Error> {
+  let p = path.as_ref();
+  if p.exists() && p.is_file() {
+    fs::remove_file(p)?;
+  }
+  Ok(())
+}

crates/desktop/artcraft/src/state/sora/sora_credential_stats.rs

@@ -0,0 +1,47 @@
+
+/// This is meant to track 401s and other credential failures, not 500s.
+#[derive(Clone)]
+pub struct SoraCredentialStats {
+  pub last_credential_failure: Option<chrono::DateTime<chrono::Utc>>,
+  pub last_credential_success: Option<chrono::DateTime<chrono::Utc>>,
+  pub credential_success_count: u32,
+  pub credential_failure_count: u32,
+  /// This resets on each failure
+  pub last_consecutive_credential_success: Option<chrono::DateTime<chrono::Utc>>,
+  /// This resets on each failure
+  pub consecutive_credential_success_count: u32,
+  /// This resets on each success
+  pub consecutive_credential_failure_count: u32,
+}
+
+impl SoraCredentialStats {
+  pub fn new() -> Self {
+    Self {
+      last_credential_failure: None,
+      last_credential_success: None,
+      last_consecutive_credential_success: None,
+      credential_success_count: 0,
+      credential_failure_count: 0,
+      consecutive_credential_success_count: 0,
+      consecutive_credential_failure_count: 0,
+    }
+  }
+  
+  pub fn record_credential_success(&mut self) {
+    let now = chrono::Utc::now();
+    self.last_credential_success = Some(now);
+    self.last_consecutive_credential_success = Some(now);
+    self.credential_success_count += 1;
+    self.consecutive_credential_success_count += 1;
+    self.consecutive_credential_failure_count = 0;
+  }
+
+  pub fn record_credential_failure(&mut self) {
+    let now = chrono::Utc::now();
+    self.last_credential_failure = Some(now);
+    self.last_consecutive_credential_success = None;
+    self.credential_failure_count += 1;
+    self.consecutive_credential_failure_count += 1;
+    self.consecutive_credential_success_count = 0;
+  }
+}

crates/desktop/artcraft/src/threads/main_window_thread/main_window_thread.rs

@@ -1,13 +1,15 @@
+use crate::state::app_startup_time::AppStartupTime;
 use crate::state::data_dir::app_data_root::AppDataRoot;
+use crate::state::main_window_position::MainWindowPosition;
 use crate::state::main_window_size::MainWindowSize;
 use crate::state::storyteller::storyteller_credential_manager::StorytellerCredentialManager;
 use crate::threads::main_window_thread::persist_storyteller_cookies_task::persist_storyteller_cookies_task;
+use crate::threads::main_window_thread::persist_window_position_task::persist_window_position_task;
 use crate::threads::main_window_thread::persist_window_resize_task::persist_window_resize_task;
 use errors::AnyhowResult;
 use log::{error, info};
 use memory_store::clone_slot::CloneSlot;
 use tauri::{AppHandle, Manager, Webview, Window};
-use crate::state::app_startup_time::AppStartupTime;
 
 const MAIN_WINDOW_NAME : &str = "main";
 
@@ -18,6 +20,7 @@ pub async fn main_window_thread(
 ) -> ! {
   // TODO: Move these into some kind of dependency injection framework
   let window_size_slot: CloneSlot<MainWindowSize> = CloneSlot::empty();
+  let window_pos_slot: CloneSlot<MainWindowPosition> = CloneSlot::empty();
   let app_startup_time = AppStartupTime::new();
 
   loop {
@@ -29,6 +32,7 @@ pub async fn main_window_thread(
           &app_data_root,
           &storyteller_creds_manager,
           &window_size_slot,
+          &window_pos_slot,
           &app_startup_time,
         ).await;
         if let Err(err) = result {
@@ -46,10 +50,12 @@ pub async fn handle_main_window(
   app_data_root: &AppDataRoot,
   storyteller_creds_manager: &StorytellerCredentialManager,
   window_size_slot: &CloneSlot<MainWindowSize>,
+  window_pos_slot: &CloneSlot<MainWindowPosition>,
   app_startup_time: &AppStartupTime,
 ) -> AnyhowResult<()> {
   loop {
     log_errors(persist_window_resize_task(window, app_data_root, window_size_slot).await);
+    log_errors(persist_window_position_task(window, app_data_root, window_pos_slot).await);
     log_errors(persist_storyteller_cookies_task(app, storyteller_creds_manager, app_startup_time).await);
     tokio::time::sleep(std::time::Duration::from_millis(1_000)).await;
   }

crates/desktop/artcraft/src/threads/main_window_thread/mod.rs

@@ -1,3 +1,4 @@
 pub mod main_window_thread;
 pub mod persist_storyteller_cookies_task;
+pub mod persist_window_position_task;
 pub mod persist_window_resize_task;

crates/desktop/artcraft/src/threads/main_window_thread/persist_window_position_task.rs

@@ -0,0 +1,34 @@
+use crate::state::data_dir::app_data_root::AppDataRoot;
+use crate::state::main_window_position::MainWindowPosition;
+use crate::state::main_window_size::MainWindowSize;
+use crate::utils::best_window_size_heuristic::best_window_size_heuristic;
+use errors::AnyhowResult;
+use log::info;
+use memory_store::clone_slot::CloneSlot;
+use tauri::Window;
+
+pub async fn persist_window_position_task(
+  window: &Window,
+  app_data_root: &AppDataRoot,
+  window_pos_slot: &CloneSlot<MainWindowPosition>,
+) -> AnyhowResult<()> {
+
+  let current_window_position = MainWindowPosition::from_window(window)?;
+  let current_physical_pos = window.outer_position()?;
+
+  let mut save_size_to_disk = true;
+
+  if let Ok(Some(old_size)) = window_pos_slot.get_clone() {
+    if old_size.matches_physical_position(&current_physical_pos) {
+      save_size_to_disk = false;
+    }
+  }
+
+  if save_size_to_disk {
+    info!("Saving window position configs to disk...");
+    current_window_position.persist_to_filesystem(app_data_root)?;
+    window_pos_slot.set_clone(&current_window_position)?;
+  }
+
+  Ok(())
+}

crates/desktop/artcraft/src/threads/main_window_thread/persist_window_resize_task.rs

@@ -1,5 +1,6 @@
 use crate::state::data_dir::app_data_root::AppDataRoot;
 use crate::state::main_window_size::MainWindowSize;
+use crate::utils::best_window_size_heuristic::best_window_size_heuristic;
 use errors::AnyhowResult;
 use log::info;
 use memory_store::clone_slot::CloneSlot;
@@ -12,7 +13,7 @@ pub async fn persist_window_resize_task(
 ) -> AnyhowResult<()> {
 
   let current_window_size = MainWindowSize::from_window(window)?;
-  let current_physical_size = window.inner_size()?;
+  let current_physical_size = best_window_size_heuristic(window)?;
 
   let mut save_size_to_disk = true;
   

crates/desktop/artcraft/src/utils/best_window_size_heuristic.rs

@@ -0,0 +1,25 @@
+use tauri::{PhysicalSize, Window};
+use errors::AnyhowResult;
+
+// A typical height difference when dev tools are open:
+//   Window inner size = PhysicalSize { width: 3704, height: 732 }
+//   Window outer size = PhysicalSize { width: 3704, height: 1476 }
+const HEIGHT_DIFFERENCE_THRESHOLD: u32 = 300;
+
+/// Get the best window size
+pub fn best_window_size_heuristic(window: &Window) -> AnyhowResult<PhysicalSize<u32>> {
+  // NB: Ordinarily we'd use inner size, as the outer size includes the window decorations.
+  // However, dev tools contract the inner size, and in the event they're open, we should 
+  // prefer the outer size.
+  let inner = window.inner_size()?;
+  let outer = window.outer_size()?;
+  
+  let height_delta = outer.height.saturating_sub(inner.height);
+  if height_delta > HEIGHT_DIFFERENCE_THRESHOLD {
+    // Dev tools are open, use the outer size
+    Ok(outer)
+  } else {
+    // Dev tools are not open, use the inner size
+    Ok(inner)
+  }
+}

crates/desktop/artcraft/src/utils/mod.rs

@@ -1,3 +1,4 @@
+pub mod best_window_size_heuristic;
 pub mod clear_all_webview_cookies;
 pub mod get_url_file_extension;
 pub mod image;
@@ -5,4 +6,4 @@ pub mod large_file_transfer;
 pub mod object_store;
 pub mod simple_http_download;
 pub mod sora;
-pub mod webview_unsafe;
+pub mod webview_unsafe;

crates/desktop/artcraft/src/windows/main_window/constants.rs

@@ -0,0 +1,4 @@
+
+/// The name of the main application window.
+/// This is the Artcraft application UX itself.
+pub const MAIN_WINDOW_NAME : &str = "main";

crates/desktop/artcraft/src/windows/main_window/mod.rs

@@ -0,0 +1 @@
+pub mod constants;

crates/desktop/artcraft/src/windows/mod.rs

@@ -1 +1,2 @@
-pub mod sora_login_window;
+pub mod sora_login_window;
+pub mod main_window;

crates/desktop/artcraft/src/windows/sora_login_window/sora_login_thread.rs

@@ -132,12 +132,7 @@ async fn check_login_window(
   // TODO(bt): Race conditions ahead.
 
   sora_credential_manager.clear_credentials()?;
-
-  let creds_dir = app_data_root.credentials_dir();
-  
-  let _r = fs::remove_file(creds_dir.get_sora_cookie_file_path());
-  let _r = fs::remove_file(creds_dir.get_sora_bearer_token_file_path());
-  let _r = fs::remove_file(creds_dir.get_sora_sentinel_file_path());
+  sora_credential_manager.try_purge_credentials_from_disk();
 
   sora_credential_manager.set_credentials(&new_credentials)?;
   sora_credential_manager.persist_all_to_disk()?;

crates/desktop/artcraft/tauri.conf.json

@@ -21,11 +21,45 @@
     ],
     "security": {
       "csp": {
-        "default-src": "*",
-        "connect-src": "*",
+        "default-src": [
+          "'self'",
+          "'unsafe-eval'",
+          "'unsafe-inline'",
+          "blob:",
+          "data:",
+          "https://*.fakeyou.com",
+          "https://*.storyteller.ai",
+          "https://www.googletagmanager.com",
+          "ipc://localhost",
+          "tauri://localhost"
+        ], 
+        "connect-src": [
+          "'self'",
+          "'unsafe-eval'",
+          "'unsafe-inline'",
+          "blob:",
+          "data:",
+          "https://*.fakeyou.com",
+          "https://*.storyteller.ai",
+          "https://unpkg.com/detect-gpu@5.0.70/",
+          "https://www.googletagmanager.com",
+          "ipc://localhost",
+          "tauri://localhost"
+        ],
         "font-src": "*",
         "img-src": "* data: blob: 'unsafe-inline'",
-        "style-src": "*"
+        "style-src": [
+          "'self'",
+          "'unsafe-eval'",
+          "'unsafe-inline'",
+          "blob:",
+          "data:",
+          "https://*.fakeyou.com",
+          "https://*.storyteller.ai",
+          "https://fonts.googleapis.com",
+          "ipc://localhost",
+          "tauri://localhost"
+        ]
       }
     }
   },

crates/desktop/tauri-artcraft/gen/schemas/capabilities.json

@@ -0,0 +1 @@
+{"default":{"identifier":"default","description":"enables the default permissions","local":true,"windows":["main"],"permissions":["core:default","log:default","upload:allow-download","upload:default",{"identifier":"http:default","allow":[{"url":"https://*.storyteller.ai"},{"url":"https://*.fakeyou.com"}],"deny":[{"url":"https://private.tauri.app"}]}]}}

crates/lib/api_clients/openai_sora_client/src/recipes/image_remix_with_session_auto_renew.rs

@@ -1,3 +1,4 @@
+use std::time::Duration;
 use anyhow::anyhow;
 use log::{info, warn};
 use errors::AnyhowResult;
@@ -7,7 +8,7 @@ use crate::creds::sora_jwt_bearer_token::SoraJwtBearerToken;
 use crate::creds::sora_sentinel::SoraSentinel;
 use crate::requests::bearer::generate::generate_bearer_with_cookie;
 use crate::requests::image_gen::common::{ImageSize, NumImages, SoraImageGenResponse};
-use crate::requests::image_gen::image_gen_http_request;
+use crate::requests::image_gen::{image_gen_http_request, SoraImageGenError};
 use crate::requests::image_gen::sora_image_gen_remix::{sora_image_gen_remix, SoraImageGenRemixRequest};
 use crate::requests::sentinel_refresh::generate::token::generate_token;
 use crate::sora_error::SoraError;
@@ -18,6 +19,8 @@ pub struct ImageRemixAutoRenewRequest<'a> {
   pub image_size: ImageSize,
   pub sora_media_tokens: Vec<String>,
   pub credentials: &'a SoraCredentialSet,
+  /// This function can try several different requests. This is the timeout for *individual* requests.
+  pub request_timeout: Option<Duration>,
 }
 
 /// Image request with retry and session auto-renewal.
@@ -29,6 +32,7 @@ pub async fn image_remix_with_session_auto_renew(request: ImageRemixAutoRenewReq
     image_size: request.image_size,
     sora_media_tokens: request.sora_media_tokens.clone(), // NB: Clone because used again
     credentials: CredentialMigrationRef::New(request.credentials),
+    request_timeout: request.request_timeout,
   }).await;
 
   let err = match result {
@@ -43,29 +47,32 @@ pub async fn image_remix_with_session_auto_renew(request: ImageRemixAutoRenewReq
 
   match err {
     // We'll fail these requests...
-    image_gen_http_request::SoraError::TooManyConcurrentTasks(_) => {
+    SoraImageGenError::TooManyConcurrentTasks(_) => {
       return Err(SoraError::TooManyConcurrentTasks);
     }
-    image_gen_http_request::SoraError::GenericError(err) => {
+    SoraImageGenError::GenericError(err) => {
       return Err(SoraError::OtherBadStatus(anyhow!("image remix failed with GenericError: {:?}", err)))
     }
-    image_gen_http_request::SoraError::NetworkError(err) => {
+    SoraImageGenError::NetworkError(err) => {
       // TODO: The underlying type should be a reqwest::Error.
       return Err(SoraError::OtherBadStatus(anyhow!("network error: {:?}", err)))
     }
+    SoraImageGenError::UsernameRequired(_err) => {
+      return Err(SoraError::SoraUsernameNotYetCreated)
+    }
 
     // We'll retry these requests...
 
-    image_gen_http_request::SoraError::SentinelBlock(err) => {
+    SoraImageGenError::SentinelBlock(err) => {
       warn!("Image generation failed due to sentinel block error: {:?}", err);
       refresh_sentinel = true;
     }
-    image_gen_http_request::SoraError::TokenExpired(err) => {
+    SoraImageGenError::TokenExpired(err) => {
       warn!("Image generation failed due to token expired error: {:?}", err);
       refresh_sentinel = true; // TODO: Not sure what this error is, actually.
       refresh_jwt = true;
     }
-    image_gen_http_request::SoraError::InvalidJwt(err) => {
+    SoraImageGenError::InvalidJwt(err) => {
       warn!("Image generation failed due to invalid jwt error: {:?}", err);
       refresh_jwt = true;
     }
@@ -123,12 +130,13 @@ pub async fn image_remix_with_session_auto_renew(request: ImageRemixAutoRenewReq
     image_size: request.image_size,
     sora_media_tokens: request.sora_media_tokens,
     credentials: CredentialMigrationRef::New(&new_creds),
+    request_timeout: request.request_timeout,
   }).await;
 
   match result {
     Ok(response) => Ok((response, Some(new_creds))),
     Err(err) => match err {
-      image_gen_http_request::SoraError::TooManyConcurrentTasks(err) => {
+      image_gen_http_request::SoraImageGenError::TooManyConcurrentTasks(err) => {
         Err(SoraError::TooManyConcurrentTasks)
       }
       _ => {

crates/lib/api_clients/openai_sora_client/src/recipes/image_upload_from_bytes_with_session_auto_renew.rs

@@ -14,12 +14,16 @@ use crate::sora_error::SoraError;
 use anyhow::anyhow;
 use errors::AnyhowResult;
 use log::{error, info, warn};
+use std::time::Duration;
 
 pub struct ImageUploadFromBytesAutoRenewRequest<'a> {
   pub file_bytes: Vec<u8>,
   pub filename: String,
   pub mime_type: &'a str,
   pub credentials: &'a SoraCredentialSet,
+  
+  /// This function can try to upload several times. This is the timeout for *individual* requests.
+  pub request_timeout: Option<Duration>,
 }
 
 /// Image upload with retry and session auto-renewal.
@@ -32,6 +36,7 @@ pub async fn image_upload_from_bytes_with_session_auto_renew(
     request.file_bytes.clone(), // FIXME(bt): This is horrible, but the client needs to take ownership. :(
     request.filename.clone(), // FIXME: Same
     CredentialMigrationRef::New(request.credentials),
+    request.request_timeout,
   ).await;
 
   let err = match result {
@@ -51,6 +56,7 @@ pub async fn image_upload_from_bytes_with_session_auto_renew(
     request.file_bytes,
     request.filename,
     CredentialMigrationRef::New(&new_creds),
+    request.request_timeout,
   ).await?;
 
   Ok((result, Some(new_creds)))

crates/lib/api_clients/openai_sora_client/src/recipes/image_upload_from_file_with_session_auto_renew.rs

@@ -6,10 +6,14 @@ use crate::requests::upload::upload_media_http_request::{upload_media_http_reque
 use crate::sora_error::SoraError;
 use log::{info, warn};
 use std::path::Path;
+use std::time::Duration;
 
 pub struct ImageUploadFromFileAutoRenewRequest<'a, P: AsRef<Path>> {
   pub file_path: P,
   pub credentials: &'a SoraCredentialSet,
+  
+  /// This function can try to upload several times. This is the timeout for *individual* requests.
+  pub request_timeout: Option<Duration>,
 }
 
 /// Image upload with retry and session auto-renewal.
@@ -21,10 +25,15 @@ pub async fn image_upload_from_file_with_session_auto_renew<P: AsRef<Path>>(
   let result = sora_media_upload_from_file(
     request.file_path.as_ref().clone(), // FIXME(bt): This is horrible, but the client needs to take ownership. :(
     CredentialMigrationRef::New(request.credentials),
+    /// This function can try to upload several times. This is the timeout for *individual* requests.
+    request.request_timeout,
   ).await;
 
   let err = match result {
     Ok(response) => return Ok((response, None)),
+    // We can't retry some errors.
+    Err(err @ SoraError::SoraUsernameNotYetCreated) => return Err(err),
+    // Retry all other errors.
     Err(err) => err,
   };
 
@@ -37,6 +46,7 @@ pub async fn image_upload_from_file_with_session_auto_renew<P: AsRef<Path>>(
   let result = sora_media_upload_from_file(
     request.file_path,
     CredentialMigrationRef::New(&new_creds),
+    request.request_timeout,
   ).await?;
 
   Ok((result, Some(new_creds)))

crates/lib/api_clients/openai_sora_client/src/recipes/list_sora_task_status_with_session_auto_renew.rs

@@ -39,11 +39,10 @@ pub async fn list_sora_task_status_with_session_auto_renew(
     new_creds = Some(updated_creds);
   }
 
-  let legacy_creds = new_creds.as_ref()
-      .unwrap_or_else(|| &args.credentials)
-      .to_legacy_credentials()?;
+  let upgraded_creds = new_creds.as_ref()
+      .unwrap_or_else(|| &args.credentials);
 
-  let result = get_image_gen_status(&request, &legacy_creds).await;
+  let result = get_image_gen_status(&request, &upgraded_creds).await;
 
   let err = match result {
     Ok(response) => return Ok((response, new_creds)),
@@ -56,7 +55,7 @@ pub async fn list_sora_task_status_with_session_auto_renew(
 
   info!("Retrying image upload with new credentials...");
 
-  let result = get_image_gen_status(&request, &legacy_creds).await?;
+  let result = get_image_gen_status(&request, &upgraded_creds).await?;
 
   Ok((result, Some(new_creds)))
 }

crates/lib/api_clients/openai_sora_client/src/recipes/wait_for_image_gen_status.rs

@@ -2,6 +2,7 @@ use crate::credentials::SoraCredentials;
 use crate::requests::image_gen::image_gen_status::TaskStatus;
 use crate::requests::image_gen::image_gen_status::{get_image_gen_status, StatusRequest, TaskResponse, VideoGenStatusResponse};
 use errors::AnyhowResult;
+use crate::creds::sora_credential_set::SoraCredentialSet;
 
 pub async fn wait_for_image_gen_status(task_id: &String, credentials: &SoraCredentials, retry_limit: Option<u32>) -> AnyhowResult<TaskResponse> {
   let status_request = StatusRequest {
@@ -10,11 +11,13 @@ pub async fn wait_for_image_gen_status(task_id: &String, credentials: &SoraCrede
     // before: Some(task_id.clone()),
   };
   let retry_limit = retry_limit.unwrap_or(10);
+  
+  let new_creds = SoraCredentialSet::from_legacy_credentials(&credentials)?;
 
   for _ in 0..retry_limit {
     tokio::time::sleep(std::time::Duration::from_secs(10)).await;
 
-    let status_response = get_image_gen_status(&status_request, credentials).await?;
+    let status_response = get_image_gen_status(&status_request, &new_creds).await?;
 
     match find_task_response_by_id(&status_response, task_id.clone()) {
       Some(task_response) => match TaskStatus::from_str(&task_response.status) {

crates/lib/api_clients/openai_sora_client/src/requests/image_gen/image_gen_http_request.rs

@@ -1,7 +1,9 @@
 use crate::creds::credential_migration::CredentialMigrationRef;
-use serde_derive::{Deserialize, Serialize};
-use thiserror::Error;
 use crate::requests::image_gen::image_gen_status::TaskId;
+use log::warn;
+use serde_derive::{Deserialize, Serialize};
+use std::time::Duration;
+use thiserror::Error;
 
 const SORA_IMAGE_GEN_URL: &str = "https://sora.com/backend/video_gen";
 
@@ -9,7 +11,7 @@ const SORA_IMAGE_GEN_URL: &str = "https://sora.com/backend/video_gen";
 const USER_AGENT : &str = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36";
 
 #[derive(Error, Debug)]
-pub enum SoraError {
+pub enum SoraImageGenError {
   #[error("Sora token expired: {0}")]
   TokenExpired(String),
 
@@ -27,6 +29,9 @@ pub enum SoraError {
 
   #[error("Network error: {0}")]
   NetworkError(String),
+
+  #[error("Sora username required: {0}")]
+  UsernameRequired(String),
 }
 
 #[derive(Serialize, Debug)]
@@ -127,6 +132,7 @@ pub enum SoraErrorCode {
   InvalidJwt,
   TokenExpired,
   TooManyConcurrentTasks,
+  UsernameRequired,
   Unknown(String),
 }
 
@@ -147,7 +153,11 @@ impl std::fmt::Display for RawSoraErrorInner {
 }
 
 /// Don't expose the internal request implementation as there are only a few "correct" ways to call the API.
-pub (crate) async fn image_gen_http_request(sora_request: RawSoraImageGenRequest, credentials: CredentialMigrationRef<'_>) -> Result<RawSoraResponse, SoraError> {
+pub (crate) async fn image_gen_http_request(
+  sora_request: RawSoraImageGenRequest, 
+  credentials: CredentialMigrationRef<'_>, 
+  request_timeout: Option<Duration>,
+) -> Result<RawSoraResponse, SoraImageGenError> {
   let client = reqwest::Client::new();
 
   let mut cookie;
@@ -161,78 +171,88 @@ pub (crate) async fn image_gen_http_request(sora_request: RawSoraImageGenRequest
       // TODO(bt,2025-04-23): We're using a Sora payload error in place of application state error. Surface this differently.
       sentinel = creds.sentinel.as_ref()
           .map(|sentinel| sentinel.to_string())
-          .ok_or(SoraError::SentinelBlock("Sentinel is required for image generation.".to_string()))?;
+          .ok_or(SoraImageGenError::SentinelBlock("Sentinel is required for image generation.".to_string()))?;
     }
     CredentialMigrationRef::New(creds) => {
       cookie = creds.cookies.to_string();
       // TODO(bt,2025-04-23): We're using a Sora payload error in place of application state error. Surface this differently.
       authorization_header = creds.jwt_bearer_token.as_ref()
-          .ok_or(SoraError::InvalidJwt("JWT bearer is required for image generation".to_string()))?
+          .ok_or(SoraImageGenError::InvalidJwt("JWT bearer is required for image generation".to_string()))?
           .to_authorization_header_value();
       // TODO(bt,2025-04-23): We're using a Sora payload error in place of application state error. Surface this differently.
       sentinel = creds.sora_sentinel.as_ref()
           .map(|sentinel| sentinel.get_sentinel().to_string())
-          .ok_or(SoraError::SentinelBlock("Sentinel is required for image generation.".to_string()))?;
+          .ok_or(SoraImageGenError::SentinelBlock("Sentinel is required for image generation.".to_string()))?;
     }
   }
 
-  let http_request = client.post(SORA_IMAGE_GEN_URL)
+  let mut http_request = client.post(SORA_IMAGE_GEN_URL)
       .header("User-Agent", USER_AGENT)
       .header("Cookie", &cookie)
       .header("Authorization", &authorization_header)
       .header("Content-Type", "application/json")
       .header("OpenAI-Sentinel-Token", &sentinel);
+  
+  
+  if let Some(timeout) = request_timeout {
+    http_request = http_request.timeout(timeout);
+  }
 
   let http_request = http_request.json(&sora_request).build()
-      .map_err(|e| SoraError::NetworkError(e.to_string()))?;
+      .map_err(|e| SoraImageGenError::NetworkError(e.to_string()))?;
 
   let response = client.execute(http_request)
       .await
-      .map_err(|e| SoraError::NetworkError(e.to_string()))?;
+      .map_err(|e| SoraImageGenError::NetworkError(e.to_string()))?;
 
   let status = response.status();
 
   let response_body = &response.text().await
-      .map_err(|e| SoraError::NetworkError(e.to_string()))?;
+      .map_err(|e| SoraImageGenError::NetworkError(e.to_string()))?;
 
   if status != reqwest::StatusCode::OK {
+    warn!("Sora image generation failure. Raw response: {:?}", response_body);
+    
     let error_response: RawSoraErrorResponse = serde_json::from_str(response_body)
-        .map_err(|e| SoraError::GenericError(format!("Failed to parse error response: {}", e)))?;
+        .map_err(|e| SoraImageGenError::GenericError(format!("Failed to parse error response: {}", e)))?;
 
     // Check for specific error codes
     if let Some(code) = &error_response.error.code {
       match code {
         SoraErrorCode::TokenExpired => {
-          return Err(SoraError::TokenExpired(error_response.error.message));
+          return Err(SoraImageGenError::TokenExpired(error_response.error.message));
         }
         SoraErrorCode::SentinelBlock => {
-          return Err(SoraError::SentinelBlock(error_response.error.message));
+          return Err(SoraImageGenError::SentinelBlock(error_response.error.message));
         }
         SoraErrorCode::TooManyConcurrentTasks => {
-          return Err(SoraError::TooManyConcurrentTasks(error_response.error.message));
+          return Err(SoraImageGenError::TooManyConcurrentTasks(error_response.error.message));
         }
         SoraErrorCode::Unknown(_) => {
-          return Err(SoraError::GenericError(error_response.error.message));
+          return Err(SoraImageGenError::GenericError(error_response.error.message));
         }
         SoraErrorCode::InvalidJwt => {
-          return Err(SoraError::InvalidJwt(error_response.error.message));
+          return Err(SoraImageGenError::InvalidJwt(error_response.error.message));
+        }
+        SoraErrorCode::UsernameRequired => {
+          return Err(SoraImageGenError::UsernameRequired(error_response.error.message));
         }
       }
     }
 
-    return Err(SoraError::GenericError(error_response.error.message));
+    return Err(SoraImageGenError::GenericError(error_response.error.message));
   }
 
   let response = serde_json::from_str(response_body)
-      .map_err(|e| SoraError::GenericError(format!("Failed to parse success response: {}", e)))?;
+      .map_err(|e| SoraImageGenError::GenericError(format!("Failed to parse success response: {}", e)))?;
 
   Ok(response)
 }
 
 #[cfg(test)]
 mod tests {
-  use errors::AnyhowResult;
   use crate::requests::image_gen::image_gen_http_request::RawSoraResponse;
+  use errors::AnyhowResult;
 
   #[test]
   fn deserialize_task_id() -> AnyhowResult<()> {

crates/lib/api_clients/openai_sora_client/src/requests/image_gen/image_gen_status.rs

@@ -6,7 +6,9 @@ use reqwest::Url;
 use serde_derive::{Deserialize, Serialize};
 use std::fmt::{Debug, Display};
 use std::{fs::File, io::Write, path::Path};
-use log::debug;
+use log::{debug, warn};
+use crate::creds::sora_credential_set::SoraCredentialSet;
+use crate::creds::sora_jwt_bearer_token::SoraJwtBearerToken;
 
 const SORA_STATUS_URL: &str = "https://sora.com/backend/video_gen";
 
@@ -171,7 +173,7 @@ pub struct InpaintItem {
   pub r#type: String,
   pub preset_id: Option<String>,
   pub generation_id: Option<String>,
-  pub upload_media_id: String,
+  pub upload_media_id: Option<String>,
   pub frame_index: i32,
   pub source_start_frame: i32,
 }
@@ -199,7 +201,16 @@ impl StatusRequest {
 }
 
 /// Gets the status of image generation tasks from Sora API
-pub async fn get_image_gen_status(status_request: &StatusRequest, credentials: &SoraCredentials) -> Result<VideoGenStatusResponse, SoraError> {
+pub async fn get_image_gen_status(status_request: &StatusRequest, credentials: &SoraCredentialSet) -> Result<VideoGenStatusResponse, SoraError> {
+
+  let bearer_header = match credentials.jwt_bearer_token.as_ref()  {
+    Some(bearer) => bearer.to_authorization_header_value(),
+    None => {
+      warn!("No JWT bearer for getting image gen status!");
+      return Err(SoraError::NoBearerTokenAvailable)
+    },
+  };
+
   let client = reqwest::Client::new();
 
   let mut url = reqwest::Url::parse(SORA_STATUS_URL)
@@ -216,8 +227,8 @@ pub async fn get_image_gen_status(status_request: &StatusRequest, credentials: &
 
   let http_request = client.get(url)
       .header("User-Agent", USER_AGENT)
-      .header("Cookie", &credentials.cookie)
-      .header("Authorization", credentials.authorization_header_value())
+      .header("Cookie", credentials.cookies.as_str())
+      .header("Authorization", bearer_header)
       .header("Content-Type", "application/json");
 
   let http_request = http_request.build()?;
@@ -235,9 +246,15 @@ pub async fn get_image_gen_status(status_request: &StatusRequest, credentials: &
     return Err(SoraError::AnyhowError(anyhow::anyhow!("The status request failed; status = {:?}, message = {:?}", status, response_body)));
   }
 
-  let response: VideoGenStatusResponse = serde_json::from_str(response_body)?;
+  let maybe_response = serde_json::from_str::<VideoGenStatusResponse>(response_body);
 
-  Ok(response)
+  match maybe_response {
+    Ok(response) => Ok(response),
+    Err(err) => {
+      warn!("Failed to parse status response: {:?}", err);
+      Err(SoraError::JsonErrorWithBody(err, response_body.to_string()))
+    }
+  }
 }
 
 pub async fn save_generations_to_dir(generations: &[Generation], dir: &str) -> AnyhowResult<()> {
@@ -275,6 +292,7 @@ mod tests {
   use errors::AnyhowResult;
   use std::fs::read_to_string;
   use testing::test_file_path::test_file_path;
+  use crate::creds::sora_credential_set::SoraCredentialSet;
 
   #[ignore]
   #[tokio::test]
@@ -297,10 +315,12 @@ mod tests {
     let bearer = bearer.trim().to_string();
 
     let creds = SoraCredentials { bearer_token: bearer, cookie, sentinel: Some(sentinel) };
+    let new_creds = SoraCredentialSet::from_legacy_credentials(&creds)?;
+
     // Get the task status for a specific task
     // let response = get_image_gen_status(&StatusRequest::new(None, Some("task_01jr9yvpfyetx9r7qvvx38scna".to_string())), &creds).await?;
 
-    let response = get_image_gen_status(&StatusRequest::new(Some(50), None), &creds).await?;
+    let response = get_image_gen_status(&StatusRequest::new(Some(50), None), &new_creds).await?;
     println!("task_id: {}", response.task_responses[0].id);
 
     let task_id = response.task_responses[0].id.clone();

crates/lib/api_clients/openai_sora_client/src/requests/image_gen/mod.rs

@@ -1,5 +1,5 @@
 pub (crate) mod image_gen_http_request;
-pub use image_gen_http_request::SoraError;
+pub use image_gen_http_request::SoraImageGenError;
 pub mod common;
 pub mod sora_image_gen_remix;
 pub mod sora_image_gen_simple;

crates/lib/api_clients/openai_sora_client/src/requests/image_gen/sora_image_gen_remix.rs

@@ -1,7 +1,8 @@
-use log::info;
 use crate::creds::credential_migration::CredentialMigrationRef;
 use crate::requests::image_gen::common::{ImageSize, NumImages, SoraImageGenResponse};
-use crate::requests::image_gen::image_gen_http_request::{image_gen_http_request, InpaintItem, InpaintItemType, OperationType, RawSoraImageGenRequest, SoraError, VideoGenType};
+use crate::requests::image_gen::image_gen_http_request::{image_gen_http_request, InpaintItem, InpaintItemType, OperationType, RawSoraImageGenRequest, SoraImageGenError, VideoGenType};
+use log::info;
+use std::time::Duration;
 
 pub struct SoraImageGenRemixRequest<'a> {
   pub prompt: String,
@@ -9,11 +10,12 @@ pub struct SoraImageGenRemixRequest<'a> {
   pub image_size: ImageSize,
   pub sora_media_tokens: Vec<String>,
   pub credentials: CredentialMigrationRef<'a>,
+  pub request_timeout: Option<Duration>,
 }
 
 /// The "remix" commands let you supply additional images as context.
 /// Sora "media tokens" of previously uploaded images must be supplied.
-pub async fn sora_image_gen_remix(request: SoraImageGenRemixRequest<'_>) -> Result<SoraImageGenResponse, SoraError> {
+pub async fn sora_image_gen_remix(request: SoraImageGenRemixRequest<'_>) -> Result<SoraImageGenResponse, SoraImageGenError> {
   let args = RawSoraImageGenRequest {
     r#type: VideoGenType::ImageGen,
     operation: OperationType::Remix,
@@ -39,7 +41,7 @@ pub async fn sora_image_gen_remix(request: SoraImageGenRemixRequest<'_>) -> Resu
   // TODO: Replace this with debug level logging in the future.
   info!("Sending remix request: {:?}", args);
 
-  let result = image_gen_http_request(args, request.credentials).await?;
+  let result = image_gen_http_request(args, request.credentials, request.request_timeout).await?;
 
   Ok(SoraImageGenResponse {
     task_id: result.id,
@@ -80,6 +82,7 @@ mod tests {
       image_size: ImageSize::Square,
       sora_media_tokens: vec!["media_01jqyhrz4detyvtzwp2p4j63ad".to_string()],
       credentials: CredentialMigrationRef::Legacy(&creds),
+      request_timeout: None,
     }).await?;
 
     println!("task_id: {}", response.task_id);

crates/lib/api_clients/openai_sora_client/src/requests/image_gen/sora_image_gen_simple.rs

@@ -1,14 +1,15 @@
-use crate::credentials::SoraCredentials;
+use crate::creds::credential_migration::CredentialMigrationRef;
 use crate::requests::image_gen::common::{ImageSize, NumImages, SoraImageGenResponse};
 use crate::requests::image_gen::image_gen_http_request::{image_gen_http_request, OperationType, RawSoraImageGenRequest, VideoGenType};
 use errors::AnyhowResult;
-use crate::creds::credential_migration::CredentialMigrationRef;
+use std::time::Duration;
 
 pub struct SoraImageGenSimpleRequest<'a> {
   pub prompt: String,
   pub num_images: NumImages,
   pub image_size: ImageSize,
   pub credentials: CredentialMigrationRef<'a>,
+  pub request_timeout: Option<Duration>,
 }
 
 pub async fn sora_image_gen_simple(args: SoraImageGenSimpleRequest<'_>) -> AnyhowResult<SoraImageGenResponse> {
@@ -24,7 +25,7 @@ pub async fn sora_image_gen_simple(args: SoraImageGenSimpleRequest<'_>) -> Anyho
   };
 
   // TODO: Error handling.
-  let result = image_gen_http_request(sora_request, args.credentials).await?;
+  let result = image_gen_http_request(sora_request, args.credentials, args.request_timeout).await?;
 
   Ok(SoraImageGenResponse {
     task_id: result.id,
@@ -34,12 +35,12 @@ pub async fn sora_image_gen_simple(args: SoraImageGenSimpleRequest<'_>) -> Anyho
 #[cfg(test)]
 mod tests {
   use crate::credentials::SoraCredentials;
+  use crate::creds::credential_migration::CredentialMigrationRef;
   use crate::requests::image_gen::common::{ImageSize, NumImages};
   use crate::requests::image_gen::sora_image_gen_simple::{sora_image_gen_simple, SoraImageGenSimpleRequest};
   use errors::AnyhowResult;
   use std::fs::read_to_string;
   use testing::test_file_path::test_file_path;
-  use crate::creds::credential_migration::CredentialMigrationRef;
 
   #[ignore] // You can manually run "ignore" tests in the IDE, but they won't run in CI.
   #[tokio::test]
@@ -64,6 +65,7 @@ mod tests {
       num_images: NumImages::One,
       image_size: ImageSize::Square,
       credentials: CredentialMigrationRef::Legacy(&creds),
+      request_timeout: None,
     }).await?;
 
     println!("task_id: {}", response.task_id);

crates/lib/api_clients/openai_sora_client/src/requests/upload/upload_media_from_bytes.rs

@@ -2,10 +2,16 @@ use crate::creds::credential_migration::CredentialMigrationRef;
 use crate::requests::upload::upload_media_http_request::{upload_media_http_request, SoraMediaUploadResponse};
 use crate::sora_error::SoraError;
 use std::path::PathBuf;
+use std::time::Duration;
 
 /// Upload bytes.
 /// The underlying reqwest lib needs to own the bytes, so we can't pass as a reference.
-pub async fn sora_media_upload_from_bytes(bytes: Vec<u8>, file_name: String, creds: CredentialMigrationRef<'_>) -> Result<SoraMediaUploadResponse, SoraError> {
+pub async fn sora_media_upload_from_bytes(
+  bytes: Vec<u8>, 
+  file_name: String, 
+  creds: CredentialMigrationRef<'_>,
+  maybe_timeout: Option<Duration>,
+) -> Result<SoraMediaUploadResponse, SoraError> {
   let file_path = PathBuf::from(&file_name);
 
   // TODO: Read file magic bytes first, then fall back to this.
@@ -20,5 +26,5 @@ pub async fn sora_media_upload_from_bytes(bytes: Vec<u8>, file_name: String, cre
     _ => "application/octet-stream",
   };
 
-  Ok(upload_media_http_request(bytes, file_name, mime_type, creds).await?)
+  Ok(upload_media_http_request(bytes, file_name, mime_type, creds, maybe_timeout).await?)
 }

crates/lib/api_clients/openai_sora_client/src/requests/upload/upload_media_from_file.rs

@@ -2,6 +2,7 @@ use crate::creds::credential_migration::CredentialMigrationRef;
 use crate::requests::upload::upload_media_http_request::{upload_media_http_request, SoraMediaUploadResponse};
 use crate::sora_error::SoraError;
 use std::path::Path;
+use std::time::Duration;
 use tokio::fs::File;
 use tokio::io::AsyncReadExt;
 
@@ -9,7 +10,11 @@ use tokio::io::AsyncReadExt;
 /// There's a better way to implement this.
 const INITIAL_BUFFER_SIZE : usize = 1024*1024;
 
-pub async fn sora_media_upload_from_file<P: AsRef<Path>>(file_path: P, creds: CredentialMigrationRef<'_>) -> Result<SoraMediaUploadResponse, SoraError> {
+pub async fn sora_media_upload_from_file<P: AsRef<Path>>(
+  file_path: P, 
+  creds: CredentialMigrationRef<'_>,
+  maybe_timeout: Option<Duration>,
+) -> Result<SoraMediaUploadResponse, SoraError> {
   let mut file = File::open(&file_path).await?;
   let mut buffer = Vec::with_capacity(INITIAL_BUFFER_SIZE);
   file.read_to_end(&mut buffer).await?;
@@ -31,7 +36,7 @@ pub async fn sora_media_upload_from_file<P: AsRef<Path>>(file_path: P, creds: Cr
     _ => "application/octet-stream",
   };
 
-  Ok(upload_media_http_request(buffer, filename, mime_type, creds).await?)
+  Ok(upload_media_http_request(buffer, filename, mime_type, creds, maybe_timeout).await?)
 }
 
 #[cfg(test)]
@@ -63,6 +68,7 @@ mod tests {
     let response = sora_media_upload_from_file(
       image_path,
       CredentialMigrationRef::Legacy(&creds),
+      None,
     ).await?;
 
     println!("media: {:?}", response);

crates/lib/api_clients/openai_sora_client/src/requests/upload/upload_media_http_request.rs

@@ -1,3 +1,4 @@
+use std::time::Duration;
 use crate::credentials::{SoraCredentials, USER_AGENT};
 use crate::creds::credential_migration::CredentialMigrationRef;
 use crate::sora_error::SoraError;
@@ -69,6 +70,7 @@ pub (crate) async fn upload_media_http_request(
   filename: String,
   mime_type: &str,
   credentials: CredentialMigrationRef<'_>,
+  maybe_timeout: Option<Duration>,
 ) -> Result<SoraMediaUploadResponse, SoraError> {
 
   // Create multipart form
@@ -97,11 +99,15 @@ pub (crate) async fn upload_media_http_request(
 
   // Make API request
   let client = Client::new();
-  let request_builder = client.post(SORA_UPLOAD_MEDIA_URL)
+  let mut request_builder = client.post(SORA_UPLOAD_MEDIA_URL)
       .multipart(form)
       .header("User-Agent", USER_AGENT)
       .header("Cookie", &cookie)
       .header("Authorization", &auth_header);
+  
+  if let Some(timeout) = maybe_timeout {
+    request_builder = request_builder.timeout(timeout);
+  }
 
   let response = request_builder.send().await?;
 

crates/lib/api_clients/openai_sora_client/src/sora_error.rs

@@ -29,6 +29,10 @@ pub enum SoraError {
   /// Failed to generate a bearer token despite the `200 OK` response.
   /// This has been generated by sending old/expired session cookies or empty cookies.
   FailedToGenerateBearer,
+  
+  /// Sora requires users to set up an account username before they can generate images.
+  /// This requires the user to set up that username.
+  SoraUsernameNotYetCreated,
 
   /// Something is wrong with the JWT bearer token.
   /// This error originates on our end as we try to parse the JWT.
@@ -58,6 +62,10 @@ pub enum SoraError {
 
   /// serde_json::Error, likely from JSON deserialization schema mismatch.
   JsonError(serde_json::Error),
+
+  /// serde_json::Error, likely from JSON deserialization schema mismatch.
+  /// Includes the original body.
+  JsonErrorWithBody(serde_json::Error, String),
 }
 
 impl Error for SoraError {}
@@ -71,6 +79,9 @@ impl Display for SoraError {
       Self::FailedToGenerateBearer => {
         write!(f, "Failed to generate bearer. Probably invalid session.")
       }
+      Self::SoraUsernameNotYetCreated => {
+        write!(f, "Sora username not created. Please set up a username.")
+      }
       Self::LocalJwtClaimsParseError(message) => {
         write!(f, "Local JWT claims parse error: {}", message)
       }
@@ -101,6 +112,9 @@ impl Display for SoraError {
       Self::JsonError(err) => {
         write!(f, "serde_json error: {}", err)
       }
+      Self::JsonErrorWithBody(err, message) => {
+        write!(f, "serde_json error: {:?} body: {:?}", err, message)
+      }
     }
   }
 }

crates/lib/api_clients/openai_sora_client/src/utils/classify_general_http_error.rs

@@ -40,7 +40,15 @@ Message: {
           || message.contains("token_expired");
 
   if cookie_expired {
-    return SoraError::UnauthorizedCookieOrBearerExpired
+    return SoraError::UnauthorizedCookieOrBearerExpired;
+  }
+  
+  let needs_onboarding = 
+      message.contains("You must onboard before using this service") 
+          || message.contains("onboarding_required");
+
+  if needs_onboarding {
+    return SoraError::SoraUsernameNotYetCreated;
   }
 
   let status_code = status.as_u16();

crates/service/web/storyteller_web/src/http_server/endpoints/image_studio/prompt/enqueue_studio_image_generation_handler.rs

@@ -15,7 +15,7 @@ use log::warn;
 use log::{debug, error};
 use mysql_queries::queries::media_files::get::get_media_file::get_media_file;
 use openai_sora_client::credentials::SoraCredentials;
-use openai_sora_client::requests::image_gen::SoraError;
+use openai_sora_client::requests::image_gen::SoraImageGenError;
 use openai_sora_client::requests::sentinel_refresh::generate::token::generate_token;
 use serde::Deserialize;
 use serde::Serialize;
@@ -326,7 +326,7 @@ pub async fn enqueue_studio_image_generation_handler(http_request: HttpRequest,
 
   debug!("Sora image gen response: {:?}", response);
 
-  if let Err(SoraError::SentinelBlock(msg)) = &response {
+  if let Err(SoraImageGenError::SentinelBlock(msg)) = &response {
     error!("Sora sentinel block, attempting refresh: {}", msg);
 
     match generate_token().await {
@@ -382,16 +382,16 @@ pub async fn enqueue_studio_image_generation_handler(http_request: HttpRequest,
 
   let response = response.map_err(|err| {
     match err {
-      SoraError::TokenExpired(msg) => {
+      SoraImageGenError::TokenExpired(msg) => {
         error!("Sora token expired, needs refresh: {}", msg);
         // TODO: Implement token refresh logic here
         EnqueueImageGenRequestError::ServerError
       },
-      SoraError::SentinelBlock(msg) => {
+      SoraImageGenError::SentinelBlock(msg) => {
         error!("Sora sentinel block still occurring after refresh: {}", msg);
         EnqueueImageGenRequestError::ServerError
       },
-      SoraError::TooManyConcurrentTasks(msg) => {
+      SoraImageGenError::TooManyConcurrentTasks(msg) => {
         error!("Sora too many concurrent tasks: {}", msg);
         EnqueueImageGenRequestError::TooManyConcurrentTasks
       },

frontend/apps/editor2d/src/components/PromptBox.tsx

@@ -320,7 +320,7 @@ export const PromptBox = () => {
     if (!prompt.trim()) return;
     try {
       console.log(
-        "Enqueuing with prompt:",
+        "(3) Enqueuing with prompt:",
         prompt,
         "and reference images:",
         referenceImages,

frontend/apps/editor3d/app/index.html

@@ -1,11 +1,20 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <title>ArtCraft</title>
     <meta charset="utf-8" />
-    <title>ArtCraft 3D</title>
-    <base href="/" />
-
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-Y4Y8KMLPQ7"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-Y4Y8KMLPQ7');
+    </script>
+
+    <base href="/" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

frontend/apps/editor3d/app/src/components/signaled/TopBar/AuthButtons.tsx

@@ -1,8 +1,6 @@
 import { useSignals } from "@preact/signals-react/runtime";
-
 import { AUTH_STATUS } from "~/enums";
 import { authentication } from "~/signals";
-
 import { ButtonLink } from "~/components";
 import ProfileDropdown from "./ProfileDropdown";
 

frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import {
   faChevronLeft,
   faGear,
@@ -17,15 +17,20 @@ import { downloadFileFromUrl } from "@storyteller/api";
 import { TabSelector, TabItem } from "@storyteller/ui-tab-selector";
 import { Signal } from "@preact/signals-react";
 import { useSignals } from "@preact/signals-react/runtime";
+import { setLogoutStates } from "~/signals/authentication/utilities";
+import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext";
+
 function isEditorPath(path: string) {
   if (path === "/") return true;
   if (path === "/idealenigma/") return true;
   return false;
 }
+
 interface Props {
   pageName: string;
   appTabIdSignal: Signal<string>;
   setAppTabId: (id: string) => void;
+  is3DInitSignal: Signal<boolean>;
 }
 
 const appTabs: TabItem[] = [
@@ -33,7 +38,7 @@ const appTabs: TabItem[] = [
   { id: "2D", label: "2D" },
 ];
 
-export const TopBar = ({ pageName, appTabIdSignal, setAppTabId }: Props) => {
+export const TopBar = ({ pageName, appTabIdSignal, setAppTabId, is3DInitSignal }: Props) => {
   useSignals();
 
   const currentLocation = getCurrentLocationWithoutParams(
@@ -44,6 +49,22 @@ export const TopBar = ({ pageName, appTabIdSignal, setAppTabId }: Props) => {
   const [activeLibraryTab, setActiveLibraryTab] = useState("my-media");
   const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
 
+  const engine3D = useContext(EngineContext);
+  const handleTabChange = (tabId: string) => {
+    if (appTabIdSignal.peek() == "3D") {
+      engine3D?.unmountEngine();
+    }
+    setAppTabId(tabId);
+  }
+
+  const currentAppTabId = appTabIdSignal.value;
+  const is3DInit = is3DInitSignal.value;
+  useEffect(() => {
+    if (currentAppTabId == "3D" && is3DInit) {
+      engine3D?.remountEngine();
+    }
+  }, [currentAppTabId, engine3D, is3DInit]);
+
   return (
     <>
       <header className="fixed left-0 top-0 z-[60] w-full border-b border-white/5 bg-ui-background">
@@ -69,19 +90,9 @@ export const TopBar = ({ pageName, appTabIdSignal, setAppTabId }: Props) => {
               tabs={appTabs}
               activeTab={appTabIdSignal.value}
               disabled={false}
-              onTabChange={(tabId: string) => setAppTabId(tabId)}
+              onTabChange={handleTabChange}
               className="w-fit"
             />
-            {/* <Button
-              variant="secondary"
-              icon={faChevronRight}
-              iconClassName="text-xs"
-              iconFlip={true}
-              onClick={handleClick}
-              className="bg-transparent p-0 text-sm text-white/80 hover:bg-transparent hover:text-white hover:underline hover:underline-offset-2"
-            >
-              Go to 2D Canvas
-            </Button> */}
           </div>
 
           <div className="flex items-center justify-center gap-2 font-medium">
@@ -118,6 +129,7 @@ export const TopBar = ({ pageName, appTabIdSignal, setAppTabId }: Props) => {
       <SettingsModal
         isOpen={isSettingsModalOpen}
         onClose={() => setIsSettingsModalOpen(false)}
+        globalAccountLogoutCallback={() => setLogoutStates()}
       />
 
       <GalleryModal

frontend/apps/editor3d/app/src/flags/DevConsoleFlags.ts

@@ -0,0 +1,36 @@
+
+// This is used to do things such as disable job polling in the dev console.
+
+export const SetDevFlag = (flagName: string, value: any) => {
+  if (!!!(window as any)._dev_flags) {
+    (window as any)._dev_flags = {};
+  }
+  (window as any)._dev_flags[flagName] = value;
+}
+
+export const GetDevFlag = (flagName: string) => {
+  if (!!(window as any)._dev_flags && flagName in (window as any)._dev_flags) {
+    return (window as any)._dev_flags[flagName];
+  }
+  return null;
+}
+
+export const DisableJobPolling = () => {
+  SetDevFlag("disable_job_polling", true);
+}
+
+export const EnableJobPolling = () => {
+  SetDevFlag("disable_job_polling", false);
+}
+
+export const IsJobPollingDisabled = () : boolean => {
+  return GetDevFlag("disable_job_polling") === true;
+}
+
+(window as any).setDevFlag = SetDevFlag;
+(window as any).getDevFlag = GetDevFlag;
+
+(window as any).disableJobPolling = DisableJobPolling;
+(window as any).enableJobPolling = EnableJobPolling;
+
+

frontend/apps/editor3d/app/src/hooks/useActiveJobs/utilities.ts

@@ -1,9 +1,15 @@
 import { ToastTypes } from "~/enums";
 import { addToast, setJobs } from "~/signals";
 import { JobsApi } from "~/Classes/ApiManager/JobsApi";
+import { IsJobPollingDisabled } from "~/flags/DevConsoleFlags";
+
 export async function PollRecentJobs() {
   const jobsApi = new JobsApi();
 
+  if (IsJobPollingDisabled()) {
+    return;
+  }
+
   const response = await jobsApi.ListRecentJobs();
   if (response.success && response.data) {
     setJobs(response.data);

frontend/apps/editor3d/app/src/pages/Page2d/ContextualToolbarNode.tsx

@@ -0,0 +1,97 @@
+import { MouseEventHandler, useState, useEffect } from "react";
+import { Transition } from "@headlessui/react";
+import { twMerge } from "tailwind-merge";
+
+import { uiAccess } from "./signals/uiAccess";
+import { dispatchUiEvents } from "./signals/uiEvents";
+
+import { ToolbarNode } from "./components/features/ToolbarNode";
+import { ToolbarNodeButtonNames } from "./components/features/ToolbarNode/enums";
+import { transitionTimingStyles } from "./components/styles";
+import { useSignals } from "@preact/signals-react/runtime";
+
+export const ContextualToolbarNode = () => {
+  const [winSize, setWinSize] = useState<{ width: number; height: number }>({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+  const { isShowing, position, ...rest } = uiAccess.toolbarNode.signal.value;
+  const buttonsProps = Object.values(ToolbarNodeButtonNames).reduce(
+    (acc, buttonName) => {
+      acc[buttonName] = {
+        onClick: dispatchUiEvents.toolbarNode[buttonName],
+        disabled:
+          uiAccess.toolbarNode.signal.value.buttonStates[buttonName].disabled,
+        hidden:
+          uiAccess.toolbarNode.signal.value.buttonStates[buttonName].hidden,
+        active:
+          uiAccess.toolbarNode.signal.value.buttonStates[buttonName].active,
+      };
+      return acc;
+    },
+    {} as {
+      [key in ToolbarNodeButtonNames]: {
+        onClick: MouseEventHandler<HTMLButtonElement>;
+        disabled: boolean;
+        hidden: boolean;
+        active: boolean;
+      };
+    },
+  );
+  useEffect(() => {
+    function resizeHandler() {
+      setWinSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+    window.addEventListener("resize", resizeHandler);
+    return () => {
+      window.removeEventListener("resize", resizeHandler);
+    };
+  }, []);
+
+  const handleColorChange = (color: string) => {
+    // Don't do anything if no node is known to be bound
+    if (uiAccess.toolbarNode.signal.value.knodeIds.length < 1) {
+      return;
+    }
+
+    // Update the UI component
+    uiAccess.toolbarNode.setColor(color);
+
+    // Signal the engine with the node ID (just grab the first -and expected only- node)
+    const nodeID = uiAccess.toolbarNode.signal.value.knodeIds[0];
+    dispatchUiEvents.toolbarNode.setSelectedColor({ kNodeId: nodeID, color });
+  }
+
+  useSignals();
+  const color = uiAccess.toolbarNode.signal.value.color;
+
+  const boundedTopPosition = Math.min(position.y, winSize.height - 164);
+  return (
+    <Transition
+      as="div"
+      show={isShowing}
+      className={twMerge(
+        transitionTimingStyles,
+        "fixed -translate-x-1/2 translate-y-5 data-[closed]:opacity-0",
+      )}
+      style={{
+        top: boundedTopPosition,
+        left: position.x,
+      }}
+    >
+      <ToolbarNode
+        {...rest}
+        buttonsProps={buttonsProps}
+        locked={uiAccess.toolbarNode.signal.value.locked}
+        onLockClicked={(e) => {
+          dispatchUiEvents.toolbarNode.lock(e);
+        }}
+        color={color}
+        onColorChange={handleColorChange}
+      />
+    </Transition>
+  );
+};

frontend/apps/editor3d/app/src/pages/Page2d/Engine.ts

@@ -0,0 +1,738 @@
+import Konva from "konva";
+
+import { uiAccess, uiEvents } from "./signals";
+import { ImageNode, ShapeNode, ShapeType, TextNode, PaintNode, PreviewCopyNode } from "./KonvaApp/Nodes";
+import { UndoStackManager } from "./KonvaApp/UndoRedo";
+import { CommandManager, MatteBox, SceneManager } from "./KonvaApp/EngineUtitlities";
+import {
+  NodeIsolator,
+  NodesManager,
+  NodesTranslationEventDetails,
+  NodeTransformationEventDetails,
+  NodeTransformer,
+  SelectionManager,
+  SelectionManagerEvents,
+  SelectorSquare,
+} from "./KonvaApp/NodesManagers";
+import { EngineOptions, TextNodeData, VideoNodeData } from "./KonvaApp/types";
+
+import { AppModes, VideoResolutions } from "./KonvaApp/constants";
+import { ToolbarMainButtonNames } from "./components/features/ToolbarMain/enum";
+
+import { ToolbarNodeButtonNames } from "./components/features/ToolbarNode/enums";
+import { NavigateFunction } from "react-router-dom";
+
+import { RealTimeDrawEngine } from "./KonvaApp/RenderingPrimitives/RealTimeDrawEngine";
+import { NodeColor } from "./signals/uiEvents/toolbarNode";
+import { invoke } from "@tauri-apps/api/core";
+
+import { DecodeBase64ToImage } from "./utilities/DecodeBase64ToImage";
+import { EncodeImageBitmapToBase64 } from "./utilities/EncodeImageBitmapToBase64";
+
+
+
+export interface RenderingOptions {
+  artstyle: string;
+  positivePrompt: string;
+  negativePrompt: string;
+  cinematic: boolean;
+  enginePreProcessing: boolean;
+  faceDetail: boolean;
+  lipSync: boolean;
+  upscale: boolean;
+  styleStrength: number;
+}
+
+export class Engine {
+  private navigateRef: NavigateFunction;
+  private appMode: AppModes = AppModes.INIT;
+  private boardCanvasRef: HTMLDivElement;
+  private stage: Konva.Stage;
+  private bgLayer: Konva.Layer;
+  private mediaLayer: Konva.Layer;
+  private nodeIsolationLayer: Konva.Layer;
+  private uiLayer: Konva.Layer;
+  private previewLayer: Konva.Layer;
+  private offScreenCanvas: OffscreenCanvas;
+  public realTimeDrawEngine: RealTimeDrawEngine;
+  private nodesManager: NodesManager;
+  private nodeIsolator: NodeIsolator;
+  private nodeTransformer: NodeTransformer;
+  private selectionManager: SelectionManager;
+  private selectorSquare: SelectorSquare;
+  private loadingVideosProvider: LoadingVideosProvider;
+  private matteBox: MatteBox;
+  private backgroundNode: ShapeNode | null = null;
+
+  private sceneManager: SceneManager;
+  public undoStackManager: UndoStackManager;
+  public commandManager: CommandManager;
+
+  public segmentationButtonCanBePressed: boolean = true;
+  // signal reference
+  constructor(boardCanvasRef: HTMLDivElement, options: EngineOptions) {
+    if (import.meta.env.DEV) {
+      console.log("Engine Created");
+    }
+    this.navigateRef = options.navigate;
+    this.appMode = AppModes.SELECT;
+
+    this.boardCanvasRef = boardCanvasRef;
+    this.stage = new Konva.Stage({
+      container: this.boardCanvasRef,
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+    this.bgLayer = new Konva.Layer();
+
+    this.mediaLayer = new Konva.Layer();
+    this.previewLayer = new Konva.Layer();
+
+    this.nodeIsolationLayer = new Konva.Layer();
+    this.uiLayer = new Konva.Layer();
+
+    this.stage.add(this.bgLayer);
+    this.stage.add(this.previewLayer);
+    this.stage.add(this.mediaLayer);
+    this.stage.add(this.nodeIsolationLayer);
+    this.stage.add(this.uiLayer);
+
+    // Konva Transformer
+    this.nodeTransformer = new NodeTransformer();
+    this.uiLayer.add(this.nodeTransformer.getKonvaNode());
+    // Loading Placeholders
+   
+    // Node Isolator
+    this.nodeIsolator = new NodeIsolator({
+      mediaLayerRef: this.mediaLayer,
+      nodeIsolationLayerRef: this.nodeIsolationLayer,
+    });
+
+    // core layer for all the work done.
+    this.offScreenCanvas = new OffscreenCanvas(0, 0);
+
+    // Collection of all Nodes
+    this.nodesManager = new NodesManager();
+    // Partial Collection of selected Nodes
+    this.selectionManager = new SelectionManager({
+      nodeTransformerRef: this.nodeTransformer,
+      mediaLayerRef: this.mediaLayer,
+    });
+
+    this.realTimeDrawEngine = new RealTimeDrawEngine({
+      width: VideoResolutions.SQUARE_1024.width,
+      height: VideoResolutions.SQUARE_1024.height,
+      mediaLayerRef: this.mediaLayer,
+      offScreenCanvas: this.offScreenCanvas,
+      onDraw: async (canvas, lineBounds) => {
+        await this.addPaintNode(canvas, lineBounds);
+      },
+      onPreviewCopy: async (image) => {
+        await this.addPreviewCopy(image);
+      },
+    });
+
+    // Selector Square to select Nodes
+    this.selectorSquare = new SelectorSquare({
+      captureCanvasRef: this.realTimeDrawEngine.captureCanvas,
+      mediaLayerRef: this.mediaLayer,
+      nodesManagerRef: this.nodesManager,
+      selectionManagerRef: this.selectionManager,
+      stageRef: this.stage,
+    });
+    this.uiLayer.add(this.selectorSquare.getKonvaNode());
+
+    //Collection of commands for undo-redo
+    this.undoStackManager = new UndoStackManager(() => {
+      //this.realTimeDrawEngine.render();
+    });
+    this.commandManager = new CommandManager({
+      mediaLayerRef: this.mediaLayer,
+      nodesManagerRef: this.nodesManager,
+      nodeTransformerRef: this.nodeTransformer,
+      selectionManagerRef: this.selectionManager,
+      renderEngineRef: this.realTimeDrawEngine,
+      undoStackManagerRef: this.undoStackManager,
+    });
+
+    // set up secene manager
+    this.sceneManager = new SceneManager({
+      navigateRef: this.navigateRef,
+      loadingVideosProviderRef: this.loadingVideosProvider,
+      mediaLayerRef: this.mediaLayer,
+      nodesManagerRef: this.nodesManager,
+      selectionManagerRef: this.selectionManager,
+      renderEngineRef: this.realTimeDrawEngine,
+    });
+    
+    this.matteBox = new MatteBox({
+      boardCanvasSize: {
+        width: this.boardCanvasRef.clientWidth,
+        height: this.boardCanvasRef.clientHeight,
+      },
+      captureCanvasSize: this.realTimeDrawEngine.captureCanvas.getSize(),
+      uiLayerRef: this.uiLayer,
+    });
+
+    // some of the managers has events
+    // hence, lastly, setup these events
+    this.setupEventSystem();
+    this.setAppMode(this.appMode);
+  }
+
+  private setAppMode(newAppMode: AppModes) {
+    this.appMode = newAppMode;
+    switch (this.appMode) {
+      case AppModes.PAINT: {
+        console.log("APPMODE: PAINT");
+        this.selectorSquare.disable(); // this breaks the paint if you use it in the wrong spot
+        this.selectionManager.disable(); // this prevents selection.
+        this.realTimeDrawEngine.enablePaintMode();
+
+        uiAccess.toolbarMain.enable();
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
+          active: false,
+        });
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.PAINT, {
+          active: true,
+        });
+        this.matteBox.disable();
+        return;
+      }
+      case AppModes.SELECT: {
+        console.log("APPMODE: SELECT");
+        this.realTimeDrawEngine.disablePaintMode();
+
+        this.selectorSquare.enable();
+        this.selectionManager.enable();
+        uiAccess.toolbarMain.enable();
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
+          active: true,
+        });
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.PAINT, {
+          active: false,
+        });
+        this.matteBox.disable();
+        document.body.style.cursor = "default";
+        return;
+      }
+      case AppModes.PREVIEW: {
+        console.log("APPMODE: RENDER");
+        this.selectorSquare.disable();
+        this.selectionManager.disable();
+        uiAccess.toolbarMain.disable();
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
+          active: false,
+        });
+        this.matteBox.enable();
+        document.body.style.cursor = "not-allowed";
+        return;
+      }
+      case AppModes.RENDERING: {
+        console.log("APPMODE: RENDER");
+        this.selectorSquare.disable();
+        this.selectionManager.disable();
+        uiAccess.toolbarMain.disable();
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
+          active: false,
+        });
+        this.matteBox.enable(true);
+        document.body.style.cursor = "wait";
+        return;
+      }
+      case AppModes.INIT:
+      default: {
+        console.log("APPMODE: INIT");
+        this.selectorSquare.disable();
+        uiAccess.toolbarMain.disable();
+        this.selectionManager.disable();
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
+          active: false,
+        });
+        document.body.style.cursor = "wait";
+        this.matteBox.disable();
+      }
+    }
+  }
+  private setupEventSystem() {
+    // Listen to changes in container size
+    const resizeObserver = new ResizeObserver(() => {
+      this.onBoardCanvasResize();
+    });
+    resizeObserver.observe(this.boardCanvasRef);
+    this.onBoardCanvasResize();
+
+    // Listen to Nodes
+    this.selectionManager.eventTarget.addEventListener(
+      SelectionManagerEvents.NODES_TRANSLATIONS,
+      ((event: CustomEvent<NodesTranslationEventDetails>) => {
+        //console.log("Event: SelectionManager -> Engine", event);
+        this.commandManager.translateNodes(event.detail);
+      }) as EventListener,
+    );
+    this.selectionManager.eventTarget.addEventListener(
+      SelectionManagerEvents.NODES_TRANSFORMATION,
+      ((event: CustomEvent<NodeTransformationEventDetails>) => {
+        //console.log("Event: SelectionManager -> Engine", event);
+        this.commandManager.transformNodes(event.detail);
+      }) as EventListener,
+    );
+
+    // Listen to Tooolbar Node
+    uiEvents.toolbarNode.lock.onClick(() => {
+      this.commandManager.toggleLockNodes();
+    });
+    uiEvents.toolbarNode.DOWNLOAD.onClick(() => {
+      const nodes = this.selectionManager.getSelectedNodes();
+      if (nodes.size > 1) {
+        uiAccess.dialogError.show({
+          title: "Error: Download Node Content",
+          message:
+            "Please do not select more than 1 item for the Download Node Content feature, you can only download 1 item at a time",
+        });
+        return;
+      }
+      const node = nodes.values().next().value;
+      try {
+        if (node instanceof VideoNode && node.currentUrl) {
+          downloadURI(node.currentUrl, `Download Video Node-${node.kNode.id}`);
+        } else {
+          throw new Error();
+        }
+      } catch {
+        uiAccess.dialogError.show({
+          title: "Error: Download Node Content",
+          message: "This item does not have content for download.",
+        });
+      }
+    });
+
+    uiEvents.toolbarNode.DELETE.onClick(() =>
+      this.commandManager.deleteNodes(),
+    );
+    uiEvents.toolbarNode.MOVE_LAYER_DOWN.onClick(() =>
+      this.commandManager.moveNodesDown(),
+    );
+    uiEvents.toolbarNode.MOVE_LAYER_UP.onClick(() =>
+      this.commandManager.moveNodesUp(),
+    );
+    uiEvents.toolbarNode.REMOVE_BACKGROUND.onClick(() =>
+      this.removeBackground(),
+    );
+
+    // Listen to Toolbar Main
+    uiEvents.toolbarMain.UNDO.onClick(() => {
+      this.undoStackManager.undo();
+    });
+    uiEvents.toolbarMain.REDO.onClick(() => {
+      this.undoStackManager.redo();
+      //this.realTimeDrawEngine.render();
+    });
+
+    uiEvents.toolbarMain.SAVE.onClick(async (/*event*/) => {
+      //await this.realTimeDrawEngine.saveOutput(); // This works.
+      await invoke("open_login_command");
+    });
+
+    uiEvents.toolbarMain.GENERATE.onClick(async (/*event*/) => {
+      console.log("generate clicked");
+      await this.realTimeDrawEngine.generateImage();
+    });
+
+    uiEvents.toolbarMain.SELECT.onClick(() => {
+      console.log("Toolbar Main >> Select");
+      this.setAppMode(AppModes.SELECT);
+    });
+
+    uiEvents.toolbarMain.PAINT.onClick(() => {
+      console.log("Toolbar Main >> Paint");
+      this.setAppMode(AppModes.PAINT);
+    });
+
+    uiEvents.toolbarMain.ERASER.onClick(() => {
+      console.log("Toolbar Main >> Eraser");
+    });
+
+    uiEvents.toolbarMain.PREVIEW.onClick(async () => {
+      console.log("Toolbar Main >> Preview");
+      this.setAppMode(AppModes.PREVIEW);
+      await this.handlePreview();
+      this.setAppMode(AppModes.SELECT);
+    });
+    uiEvents.toolbarMain.DOWNLOAD.onClick(async () => {
+      console.log("Toolbar Main >> Render Download");
+      try {
+        this.setAppMode(AppModes.RENDERING);
+      } catch (error) {
+        // throw error to retry
+        uiAccess.dialogError.show({
+          title: "Generation Error",
+          message: error?.toString() || "Unknown Error",
+        });
+        this.setAppMode(AppModes.SELECT);
+      }
+    });
+    // Listen to other toolbars
+    // VideoExtraction Toolbar
+  
+
+    // Listen to other requests coming from the UI
+    uiEvents.onGetStagedImage((image) => {
+      this.addImage(image);
+    });
+
+    uiEvents.onAddTextToEngine((textdata) => {
+      this.addText(textdata);
+    });
+
+    let renderTimeout: NodeJS.Timeout;
+
+    uiEvents.promptEvents.onPromptStrengthChanged(async (strength) => {
+      this.realTimeDrawEngine.currentStrength = strength / 100.0;
+      clearTimeout(renderTimeout);
+      renderTimeout = setTimeout(async () => {
+        //await this.realTimeDrawEngine.render();
+      }, 1000);
+    });
+
+    uiEvents.promptEvents.onPromptTextChanged(async (prompt) => {
+      this.realTimeDrawEngine.currentPrompt = prompt;
+      clearTimeout(renderTimeout);
+      renderTimeout = setTimeout(async () => {
+        //await this.realTimeDrawEngine.render();
+      }, 1000);
+    });
+
+    uiEvents.onAddShapeToEngine((shapeData) => {
+      switch (shapeData.shape) {
+        case "circle":
+          this.addShape(ShapeType.CIRCLE, 100);
+          break;
+        case "square":
+          this.addShape(ShapeType.SQUARE, 100);
+          break;
+        case "triangle":
+          this.addShape(ShapeType.TRIANGLE, 100);
+          break;
+      }
+    });
+
+    uiEvents.toolbarMain.onBgColorChanged((data) => {
+      this.realTimeDrawEngine.updateBackground(data);
+    });
+
+    uiEvents.toolbarNode.color.onConfirmChanged((nodeColor) => {
+      console.log("Color change event triggered with:", nodeColor);
+      if (!nodeColor) {
+        console.warn("nodeColor is undefined or null");
+        return;
+      }
+      if (!nodeColor.kNodeId) {
+        console.warn("nodeColor.kNodeId is undefined or null");
+        return;
+      }
+      this.changeNodeColor(nodeColor);
+    });
+    uiEvents.toolbarMain.onPaintColorChanged((color) => {
+      this.realTimeDrawEngine.paintColor = color;
+    });
+
+    uiEvents.toolbarMain.onEraseBrushSizeChanged((size: number) => {
+      this.realTimeDrawEngine.paintBrushSize = size;
+    });
+  }
+
+  removeBackground() {
+    const selectedNodeSet = this.selectionManager.getSelectedNodes();
+
+    if (selectedNodeSet.size !== 1) {
+      return; // Can only remove background from a single image at a time.
+    }
+
+    const [selectedNode] = selectedNodeSet;
+
+    const removeBgInvocation = async (
+      selectedNode: ImageNode,
+      callback: (
+        existingImageNode: ImageNode,
+        createdImage: ImageBitmap,
+      ) => void,
+    ) => {
+      const image: HTMLImageElement = selectedNode.kNode.image();
+      const base64Bitmap = await EncodeImageBitmapToBase64(image);
+      const base64BitmapResponse = await invoke("remove_background", {
+        image: base64Bitmap,
+      });
+
+      const createdImage = await DecodeBase64ToImage(
+        base64BitmapResponse as string,
+      );
+
+      callback(selectedNode, createdImage);
+    };
+
+    const _promise = removeBgInvocation(
+      selectedNode,
+      (selectedNode: ImageNode, createdImage: ImageBitmap) => {
+        if (!this.nodesManager.hasNode(selectedNode)) {
+          return;
+        }
+        this.commandManager.deleteSpecificNodes([selectedNode]);
+        this.addImageFromImageBitmap(createdImage);
+      },
+    );
+  }
+
+  disableAllButtons() {
+    const buttonNames = Object.values(ToolbarNodeButtonNames);
+    for (const name of buttonNames) {
+      uiAccess.toolbarNode.changeButtonState(name, { disabled: true });
+    }
+  }
+
+  async enableAllButtons() {
+    const buttonNames = Object.values(ToolbarNodeButtonNames);
+    for (const name of buttonNames) {
+      await uiAccess.toolbarNode.changeButtonState(name, { disabled: false });
+    }
+  }
+
+  sleep(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  private onBoardCanvasResize() {
+    console.log("onBoardCanvasResize Event called");
+    // Print window dimensions for debugging
+    console.log("Window dimensions:", {
+      innerWidth: window.innerWidth,
+      innerHeight: window.innerHeight,
+      outerWidth: window.outerWidth,
+      outerHeight: window.outerHeight,
+    });
+
+    this.realTimeDrawEngine.updateCaptureCanvas(
+      window.innerWidth,
+      window.innerHeight,
+    );
+
+    this.matteBox.updateSize({
+      boardCanvasSize: {
+        width: this.boardCanvasRef.offsetWidth,
+        height: this.boardCanvasRef.offsetHeight,
+      },
+    });
+    this.uiLayer.draw();
+    this.stage.width(this.boardCanvasRef.offsetWidth);
+    this.stage.height(this.boardCanvasRef.offsetHeight);
+    this.stage.draw(); // Redraw the canvas
+  }
+
+  // Sandbox is quickly a way to test your idea.
+  public async sandbox() {}
+
+  public onMessage(event: MessageEvent) {
+    console.log("Message From Shared Worker");
+    console.log(event);
+  }
+
+  public initializeStage(sceneToken?: string) {
+    // load canvas that was originaly saved TODO Save manager for resharing.
+    uiAccess.toolbarNode.hide();
+    uiAccess.loadingBar.hide();
+    // load the scene if there's a scenetoken
+    if (sceneToken) {
+      this.sceneManager.loadScene(sceneToken);
+    }
+    this.setupStage();
+    // this.populateWithDebugItems();
+  }
+  public isInitialized() {
+    return this.stage !== null;
+  }
+
+  public async setupStage() {
+    // Frame rate inicator
+    // const textNode = new Konva.Text({
+    //   x: 10,
+    //   y: 80,
+    //   text: "",
+    //   fontSize: 18,
+    //   fontFamily: "Source Sans 3",
+    //   fill: "white",
+    // });
+    // const anim = new Konva.Animation((frame) => {
+    //   if (frame && import.meta.env.DEV) {
+    //     const timeDiff = frame.timeDiff;
+    //     const frameRate = frame.frameRate;
+    //     textNode.setText(
+    //       `FrameTime: ${timeDiff.toFixed(0)} ms\nFrameRate: ${frameRate.toFixed(0)} fps`,
+    //     );
+    //   }
+    // }, this.mediaLayer);
+
+    // anim.start();
+    //this.uiLayer.add(textNode);
+    this.addKeyboardShortcuts();
+  }
+
+  private changeNodeColor(nodeColor: NodeColor) {
+    console.log("Changing node color:", nodeColor);
+    // Find the node that is selected with the id
+    const idSelector = "#" + nodeColor.kNodeId;
+    const selectedNode = this.mediaLayer.findOne(idSelector);
+    console.log("Selected node:", selectedNode);
+    console.log("ID selector:", idSelector);
+    console.log("Media layer:", this.mediaLayer);
+    // TODO: Change the color of the node
+    // Turns out shapes are image nodes... how do we change the image's fill??
+    if (selectedNode) {
+      // Get the shape node from the real time drawing engine's image nodes
+      const shapeNode = this.realTimeDrawEngine.findImageNodeById(
+        nodeColor.kNodeId,
+      );
+      if (shapeNode && shapeNode instanceof ShapeNode) {
+        // Create new shape node with updated color
+        const newShapeNode = new ShapeNode({
+          canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
+          canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
+          shapeType: shapeNode.shapeType,
+          size: shapeNode.kNode.size(),
+          color: nodeColor.color,
+          mediaLayerRef: this.mediaLayer,
+          selectionManagerRef: this.selectionManager,
+          loaded: async () => {
+            //this.realTimeDrawEngine.render();
+          },
+        });
+        newShapeNode.kNode.position(shapeNode.kNode.position());
+        newShapeNode.kNode.zIndex(shapeNode.kNode.zIndex());
+
+        // Remove old node and add new one
+        shapeNode.kNode.destroy();
+        this.commandManager.createNode(newShapeNode);
+      }
+    }
+  }
+
+  public addText(textNodeData: TextNodeData) {
+    const textNode = new TextNode({
+      textNodeData: textNodeData,
+      mediaLayerRef: this.mediaLayer,
+      selectionManagerRef: this.selectionManager,
+      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
+      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
+    });
+    this.commandManager.createNode(textNode);
+  }
+
+  public addShape(type: ShapeType, size: number, color?: string) {
+    const shapeNode = new ShapeNode({
+      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
+      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
+      shapeType: type,
+      size: { width: size, height: size },
+      color: color,
+      mediaLayerRef: this.mediaLayer,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        //await this.realTimeDrawEngine.render();
+        this.setAppMode(AppModes.SELECT);
+      },
+    });
+
+    this.commandManager.createNode(shapeNode);
+  }
+  public addPreviewCopy(image: Image.Konva) {
+    // Start of Selection
+    const copyNode = new PreviewCopyNode({
+      image: image,
+      mediaLayerRef: this.mediaLayer,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        //this.realTimeDrawEngine.render();
+        this.setAppMode(AppModes.SELECT);
+      },
+    });
+    this.commandManager.createNode(copyNode);
+  }
+  public addImage(imageFile: File) {
+    const imageNode = new ImageNode({
+      mediaLayerRef: this.mediaLayer,
+      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
+      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
+      imageFile: imageFile,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        //await this.realTimeDrawEngine.render();
+        this.setAppMode(AppModes.SELECT);
+      },
+    });
+
+    this.commandManager.createNode(imageNode);
+  }
+
+  public addImageFromImageBitmap(imageBitmap: ImageBitmap) {
+    const imageNode = new ImageNode({
+      mediaLayerRef: this.mediaLayer,
+      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
+      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
+      imageBitmap: imageBitmap,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        //await this.realTimeDrawEngine.render();
+        this.setAppMode(AppModes.SELECT);
+      },
+    });
+
+    this.commandManager.createNode(imageNode);
+  }
+
+  public addPaintNode(
+    canvas: HTMLCanvasElement,
+    lineBounds: {
+      width: number;
+      height: number;
+      x: number;
+      y: number;
+    },
+  ) {
+    const node = new PaintNode({
+      canvasElement: canvas,
+      lineBounds: lineBounds,
+      mediaLayerRef: this.mediaLayer,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        //await this.realTimeDrawEngine.render();
+      },
+    });
+    this.commandManager.createNode(node);
+  }
+
+  // Events for Undo and Redo
+  private addKeyboardShortcuts() {
+    window.addEventListener("keydown", (event) => {
+      if (event.ctrlKey && event.key === "z") {
+        this.undoStackManager.undo();
+      } else if (
+        (event.ctrlKey && event.key === "y") ||
+        (event.ctrlKey && event.shiftKey && event.key === "Z")
+      ) {
+        this.undoStackManager.redo();
+      } else if (event.key === "Delete") {
+        this.commandManager.deleteNodes();
+      }
+    });
+  }   
+}
+
+// TODO: Move to utilities?
+function downloadURI(uri: string, name: string) {
+  const link = document.createElement("a");
+  link.download = name;
+  link.target = "_blank";
+  link.href = uri;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}

frontend/apps/editor3d/app/src/pages/Page2d/JobContext.tsx

@@ -0,0 +1,37 @@
+import React, { createContext, useContext, useState } from "react";
+import { JobContextType } from "@storyteller/common";
+const JobContext = createContext<JobContextType | undefined>(undefined);
+
+export const JobProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [jobTokens, setJobTokens] = useState<string[]>([]);
+
+  const addJobToken = (token: string) => {
+    setJobTokens((prevTokens) => [...prevTokens, token]);
+  };
+
+  const removeJobToken = (token: string) => {
+    setJobTokens((prevTokens) => prevTokens.filter((t) => t !== token));
+  };
+
+  const clearJobTokens = () => {
+    setJobTokens([]);
+  };
+
+  return (
+    <JobContext.Provider
+      value={{ jobTokens, addJobToken, removeJobToken, clearJobTokens }}
+    >
+      {children}
+    </JobContext.Provider>
+  );
+};
+
+export const useJobContext = () => {
+  const context = useContext(JobContext);
+  if (context === undefined) {
+    throw new Error("useJobContext must be used within a JobProvider");
+  }
+  return context;
+};

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/EditEngine.ts

@@ -0,0 +1,371 @@
+import Konva from "konva";
+
+import { uiAccess } from "../signals";
+import { CommandManager, MatteBox } from "./EngineUtitlities";
+import { ImageNode } from "./Nodes";
+import { PaintNode } from "./Nodes/PaintNode";
+import {
+  NodesManager,
+  NodesTranslationEventDetails,
+  NodeTransformationEventDetails,
+  NodeTransformer,
+  SelectionManager,
+  SelectionManagerEvents,
+  SelectorSquare,
+} from "./NodesManagers";
+import { UndoStackManager } from "./UndoRedo";
+
+import { ToolbarMainButtonNames } from "../components/features/ToolbarMain/enum";
+import { EditModes, VideoResolutions } from "./constants";
+
+import { ToolbarNodeButtonNames } from "../components/features/ToolbarNode/enums";
+
+
+export interface RenderingOptions {
+  artstyle: string;
+  positivePrompt: string;
+  negativePrompt: string;
+  cinematic: boolean;
+  enginePreProcessing: boolean;
+  faceDetail: boolean;
+  lipSync: boolean;
+  upscale: boolean;
+  styleStrength: number;
+}
+
+export class EditEngine {
+  private editMode: EditModes = EditModes.SELECT;
+  private boardCanvasRef: HTMLDivElement;
+  private stage: Konva.Stage;
+
+  private mediaLayer: Konva.Layer;
+  private nodeIsolationLayer: Konva.Layer;
+  private uiLayer: Konva.Layer;
+  private offScreenCanvas: OffscreenCanvas;
+  private realTimeDrawEngine: RealTimeDrawEngine;
+  private nodesManager: NodesManager;
+  private nodeTransformer: NodeTransformer;
+  private selectionManager: SelectionManager;
+  private selectorSquare: SelectorSquare;
+  private matteBox: MatteBox;
+
+  private undoStackManager: UndoStackManager;
+  private commandManager: CommandManager;
+
+  public segmentationButtonCanBePressed: boolean = true;
+  // signal reference
+  constructor(boardCanvasRef: HTMLDivElement) {
+    if (import.meta.env.DEV) {
+      console.log("Engine Created");
+    }
+    this.editMode = EditModes.SELECT;
+
+    this.boardCanvasRef = boardCanvasRef;
+
+    this.stage = new Konva.Stage({
+      container: this.boardCanvasRef,
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+    //this.bgLayer = new Konva.Layer();
+
+    this.mediaLayer = new Konva.Layer();
+
+    this.nodeIsolationLayer = new Konva.Layer();
+    this.uiLayer = new Konva.Layer();
+
+    //this.stage.add(this.bgLayer);
+    this.stage.add(this.mediaLayer);
+    this.stage.add(this.nodeIsolationLayer);
+    this.stage.add(this.uiLayer);
+
+    // Konva Transformer
+    this.nodeTransformer = new NodeTransformer();
+    this.uiLayer.add(this.nodeTransformer.getKonvaNode());
+
+    // core layer for all the work done.
+    this.offScreenCanvas = new OffscreenCanvas(0, 0);
+
+    // Collection of all Nodes
+    this.nodesManager = new NodesManager();
+    // Partial Collection of selected Nodes
+    this.selectionManager = new SelectionManager({
+      nodeTransformerRef: this.nodeTransformer,
+      mediaLayerRef: this.mediaLayer,
+    });
+
+    this.realTimeDrawEngine = new RealTimeDrawEngine({
+      width: VideoResolutions.SQUARE_1024.width,
+      height: VideoResolutions.SQUARE_1024.height,
+      mediaLayerRef: this.mediaLayer,
+      offScreenCanvas: this.offScreenCanvas,
+      onDraw: async (canvas, lineBounds) => {
+        await this.addPaintNode(canvas, lineBounds);
+      },
+    });
+
+    // Selector Square to select Nodes
+    this.selectorSquare = new SelectorSquare({
+      captureCanvasRef: this.realTimeDrawEngine.captureCanvas,
+      mediaLayerRef: this.mediaLayer,
+      nodesManagerRef: this.nodesManager,
+      selectionManagerRef: this.selectionManager,
+      stageRef: this.stage,
+    });
+    this.uiLayer.add(this.selectorSquare.getKonvaNode());
+
+    //Collection of commands for undo-redo
+    this.undoStackManager = new UndoStackManager(() => {
+      this.realTimeDrawEngine.render();
+    });
+    this.commandManager = new CommandManager({
+      mediaLayerRef: this.mediaLayer,
+      nodesManagerRef: this.nodesManager,
+      nodeTransformerRef: this.nodeTransformer,
+      selectionManagerRef: this.selectionManager,
+      renderEngineRef: this.realTimeDrawEngine,
+      undoStackManagerRef: this.undoStackManager,
+    });
+
+    this.matteBox = new MatteBox({
+      boardCanvasSize: {
+        width: this.boardCanvasRef.clientWidth,
+        height: this.boardCanvasRef.clientHeight,
+      },
+      captureCanvasSize: this.realTimeDrawEngine.captureCanvas.getSize(),
+      uiLayerRef: this.uiLayer,
+    });
+
+    // some of the managers has events
+    // hence, lastly, setup these events
+    this.setupEventSystem();
+    this.setEditMode(this.editMode);
+  }
+
+  private setEditMode(newEditMode: EditModes) {
+    this.editMode = newEditMode;
+    switch (this.editMode) {
+      case EditModes.SELECT:
+      default: {
+        console.log("EDITMODE: SELECT");
+        this.realTimeDrawEngine.disablePaintMode();
+
+        this.selectorSquare.enable();
+        this.selectionManager.enable();
+        uiAccess.toolbarMain.enable();
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
+          active: true,
+        });
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.PAINT, {
+          active: false,
+        });
+        this.matteBox.disable();
+        document.body.style.cursor = "default";
+        return;
+      }
+      case EditModes.EDIT: {
+        console.log("EDITMODE: EDIT");
+        this.realTimeDrawEngine.enablePaintMode();
+        this.selectorSquare.disable();
+        this.selectionManager.disable();
+      }
+    }
+  }
+  private setupEventSystem() {
+    // Listen to changes in container size
+    const resizeObserver = new ResizeObserver(() => {
+      this.onBoardCanvasResize();
+    });
+    resizeObserver.observe(this.boardCanvasRef);
+    this.onBoardCanvasResize();
+
+    // Listen to Nodes
+    this.selectionManager.eventTarget.addEventListener(
+      SelectionManagerEvents.NODES_TRANSLATIONS,
+      ((event: CustomEvent<NodesTranslationEventDetails>) => {
+        //console.log("Event: SelectionManager -> Engine", event);
+        this.commandManager.translateNodes(event.detail);
+      }) as EventListener,
+    );
+    this.selectionManager.eventTarget.addEventListener(
+      SelectionManagerEvents.NODES_TRANSFORMATION,
+      ((event: CustomEvent<NodeTransformationEventDetails>) => {
+        //console.log("Event: SelectionManager -> Engine", event);
+        this.commandManager.transformNodes(event.detail);
+      }) as EventListener,
+    );
+
+    // Listen to Toolbar Main
+    // uiEvents.toolbarMain.UNDO.onClick(() => {
+    //   this.undoStackManager.undo();
+    // });
+    // uiEvents.toolbarMain.REDO.onClick(() => {
+    //   this.undoStackManager.redo();
+    //   this.realTimeDrawEngine.render();
+    // });
+
+    // uiEvents.toolbarMain.SAVE.onClick(async (/*event*/) => {
+    //   await this.realTimeDrawEngine.saveOutput();
+    // });
+
+    // uiEvents.toolbarMain.SELECT.onClick(() => {
+    //   console.log("Toolbar Main >> Select");
+    //   this.setAppMode(AppModes.SELECT);
+    // });
+
+    // uiEvents.toolbarMain.PAINT.onClick(() => {
+    //   console.log("Toolbar Main >> Paint");
+    //   this.setAppMode(AppModes.PAINT);
+    // });
+  }
+
+  disableAllButtons() {
+    const buttonNames = Object.values(ToolbarNodeButtonNames);
+    for (const name of buttonNames) {
+      uiAccess.toolbarNode.changeButtonState(name, { disabled: true });
+    }
+  }
+
+  async enableAllButtons() {
+    const buttonNames = Object.values(ToolbarNodeButtonNames);
+    for (const name of buttonNames) {
+      await uiAccess.toolbarNode.changeButtonState(name, { disabled: false });
+    }
+  }
+
+  sleep(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  private onBoardCanvasResize() {
+    this.realTimeDrawEngine.updateCaptureCanvas(0, 0);
+    console.log("onBoardCanvasResize Event called");
+    console.log("Board Canvas values below");
+    console.log(this.boardCanvasRef.offsetWidth);
+    console.log(this.boardCanvasRef.offsetHeight);
+
+    this.matteBox.updateSize({
+      boardCanvasSize: {
+        width: this.boardCanvasRef.offsetWidth,
+        height: this.boardCanvasRef.offsetHeight,
+      },
+    });
+
+    this.uiLayer.draw();
+    this.stage.width(this.boardCanvasRef.offsetWidth);
+    this.stage.height(this.boardCanvasRef.offsetHeight);
+    this.stage.draw(); // Redraw the canvas
+  }
+
+  // Sandbox is quickly a way to test your idea.
+  public async sandbox() {}
+
+  public onMessage(event: MessageEvent) {
+    console.log("Message From Shared Worker");
+    console.log(event);
+  }
+
+  public initializeStage() {
+    // load canvas that was originaly saved TODO Save manager for resharing.
+    uiAccess.toolbarNode.hide();
+    uiAccess.loadingBar.hide();
+    this.setupStage();
+  }
+
+  public isInitialized() {
+    return this.stage !== null;
+  }
+
+  public async setupStage() {
+    // Frame rate inicator
+    // const textNode = new Konva.Text({
+    //   x: 10,
+    //   y: 80,
+    //   text: "",
+    //   fontSize: 18,
+    //   fontFamily: "Source Sans 3",
+    //   fill: "white",
+    // });
+    // const anim = new Konva.Animation((frame) => {
+    //   if (frame && import.meta.env.DEV) {
+    //     const timeDiff = frame.timeDiff;
+    //     const frameRate = frame.frameRate;
+    //     textNode.setText(
+    //       `FrameTime: ${timeDiff.toFixed(0)} ms\nFrameRate: ${frameRate.toFixed(0)} fps`,
+    //     );
+    //   }
+    // }, this.mediaLayer);
+
+    // anim.start();
+    // this.uiLayer.add(textNode);
+    this.addKeyboardShortcuts();
+  }
+
+  public addImage(imageFile: File) {
+    const imageNode = new ImageNode({
+      mediaLayerRef: this.mediaLayer,
+      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
+      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
+      imageFile: imageFile,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        await this.realTimeDrawEngine.render();
+        this.setEditMode(EditModes.SELECT);
+      },
+    });
+
+    this.commandManager.createNode(imageNode);
+  }
+
+  public addImageFromImageBitmap(imageBitmap: ImageBitmap) {
+    const imageNode = new ImageNode({
+      mediaLayerRef: this.mediaLayer,
+      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
+      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
+      imageBitmap: imageBitmap,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        await this.realTimeDrawEngine.render();
+        this.setEditMode(EditModes.SELECT);
+      },
+    });
+
+    this.commandManager.createNode(imageNode);
+  }
+
+  public addPaintNode(
+    canvas: HTMLCanvasElement,
+    lineBounds: {
+      width: number;
+      height: number;
+      x: number;
+      y: number;
+    },
+  ) {
+    var node = new PaintNode({
+      canvasElement: canvas,
+      lineBounds: lineBounds,
+      mediaLayerRef: this.mediaLayer,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        await this.realTimeDrawEngine.render();
+      },
+    });
+    this.commandManager.createNode(node);
+  }
+  // Events for Undo and Redo
+  private addKeyboardShortcuts() {
+    window.addEventListener("keydown", (event) => {
+      if (event.ctrlKey && event.key === "z") {
+        this.undoStackManager.undo();
+      } else if (
+        (event.ctrlKey && event.key === "y") ||
+        (event.ctrlKey && event.shiftKey && event.key === "Z")
+      ) {
+        this.undoStackManager.redo();
+      } else if (event.key === "Delete") {
+        this.commandManager.deleteNodes();
+      }
+    });
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/EngineUtitlities/Base64Helpers.ts

@@ -0,0 +1,7 @@
+const ensureBase64Prefix = (base64String: string) => {
+    return base64String.startsWith("data:")
+      ? base64String
+      : `data:image/png;base64,${base64String}`;
+}
+
+export { ensureBase64Prefix };

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/EngineUtitlities/CommandManager.ts

@@ -0,0 +1,157 @@
+import Konva from "konva";
+
+import { MediaNode, Position, RGBColor, Transformation } from "../types";
+import {
+  
+  CreateCommand,
+  DeleteCommand,
+  LockNodesCommand,
+  MoveLayerDown,
+  MoveLayerUp,
+  
+  TransformCommand,
+  TranslateCommand,
+  UndoStackManager,
+  UnlockNodesCommand,
+  
+} from "../UndoRedo";
+import {
+  NodesManager,
+  NodeTransformer,
+  SelectionManager,
+} from "../NodesManagers";
+import { RealTimeDrawEngine } from "../RenderingPrimitives/RealTimeDrawEngine";
+
+interface EngineReferences {
+  mediaLayerRef: Konva.Layer;
+  nodesManagerRef: NodesManager;
+  nodeTransformerRef: NodeTransformer;
+  selectionManagerRef: SelectionManager;
+  renderEngineRef: RealTimeDrawEngine;
+  undoStackManagerRef: UndoStackManager;
+}
+
+export class CommandManager {
+  private mediaLayerRef: Konva.Layer;
+  private nodesManagerRef: NodesManager;
+  private nodeTransformerRef: NodeTransformer;
+  private selectionManagerRef: SelectionManager;
+  private renderEngineRef: RealTimeDrawEngine;
+  private undoStackManagerRef: UndoStackManager;
+
+  constructor(engineRefs: EngineReferences) {
+    this.mediaLayerRef = engineRefs.mediaLayerRef;
+    this.nodesManagerRef = engineRefs.nodesManagerRef;
+    this.nodeTransformerRef = engineRefs.nodeTransformerRef;
+    this.selectionManagerRef = engineRefs.selectionManagerRef;
+    this.renderEngineRef = engineRefs.renderEngineRef;
+    this.undoStackManagerRef = engineRefs.undoStackManagerRef;
+  }
+
+  createNode(node: MediaNode) {
+    const command = new CreateCommand({
+      nodes: new Set<MediaNode>([node]),
+      mediaLayerRef: this.mediaLayerRef,
+      nodesManagerRef: this.nodesManagerRef,
+      nodeTransformerRef: this.nodeTransformerRef,
+      selectionManagerRef: this.selectionManagerRef,
+      renderEngineRef: this.renderEngineRef,
+    });
+    this.undoStackManagerRef.executeCommand(command);
+
+    // Set the kNode's manual id to same as kNode's internal _id
+    // This helps identify the kNode in the Konva layer with find
+    node.kNode.id(node.kNode._id.toString());
+    //this.renderEngineRef.render();
+  }
+  deleteNodes() {
+    const nodes = this.selectionManagerRef.getSelectedNodes();
+    const command = new DeleteCommand({
+      nodes: nodes,
+      mediaLayerRef: this.mediaLayerRef,
+      nodesManagerRef: this.nodesManagerRef,
+      nodeTransformerRef: this.nodeTransformerRef,
+      selectionManagerRef: this.selectionManagerRef,
+      renderEngineRef: this.renderEngineRef,
+    });
+    this.undoStackManagerRef.executeCommand(command);
+    //this.renderEngineRef.render();
+  }
+
+  deleteSpecificNodes(nodes: MediaNode[]) {
+    const command = new DeleteCommand({
+      nodes: nodes,
+      mediaLayerRef: this.mediaLayerRef,
+      nodesManagerRef: this.nodesManagerRef,
+      nodeTransformerRef: this.nodeTransformerRef,
+      selectionManagerRef: this.selectionManagerRef,
+      renderEngineRef: this.renderEngineRef,
+    });
+    this.undoStackManagerRef.executeCommand(command);
+    //this.renderEngineRef.render();
+  }
+
+  toggleLockNodes() {
+    const nodes = this.selectionManagerRef.getSelectedNodes();
+    const node = nodes.values().next().value;
+    if (!node) {
+      console.log("Node Not Found for Locking");
+      return;
+    }
+    if (node.isLocked()) {
+      const command = new UnlockNodesCommand({
+        nodes: this.selectionManagerRef.getSelectedNodes(),
+      });
+      this.undoStackManagerRef.executeCommand(command);
+    } else {
+      const command = new LockNodesCommand({
+        nodes: this.selectionManagerRef.getSelectedNodes(),
+      });
+      this.undoStackManagerRef.executeCommand(command);
+    }
+  }
+  moveNodesUp() {
+    const command = new MoveLayerUp({
+      nodes: this.selectionManagerRef.getSelectedNodes(),
+      nodesManagerRef: this.nodesManagerRef,
+      mediaLayerRef: this.mediaLayerRef,
+    });
+    this.undoStackManagerRef.executeCommand(command);
+    //this.renderEngineRef.render();
+  }
+  moveNodesDown() {
+    const command = new MoveLayerDown({
+      nodes: this.selectionManagerRef.getSelectedNodes(),
+      nodesManagerRef: this.nodesManagerRef,
+      mediaLayerRef: this.mediaLayerRef,
+    });
+    this.undoStackManagerRef.executeCommand(command);
+    //this.renderEngineRef.render();
+  }
+  translateNodes(props: {
+    nodes: Set<MediaNode>;
+    initialPositions: Map<MediaNode, Position>;
+    finalPositions: Map<MediaNode, Position>;
+  }) {
+    const command = new TranslateCommand({
+      ...props,
+      layerRef: this.mediaLayerRef,
+    });
+    this.undoStackManagerRef.pushCommand(command);
+    //this.renderEngineRef.render();
+  }
+  transformNodes(props: {
+    nodes: Set<MediaNode>;
+    initialTransformations: Map<MediaNode, Transformation[]>;
+    finalTransformations: Map<MediaNode, Transformation[]>;
+  }) {
+    const command = new TransformCommand({
+      ...props,
+      layerRef: this.mediaLayerRef,
+    });
+    this.undoStackManagerRef.pushCommand(command);
+    //this.renderEngineRef.render();
+  }
+  
+ 
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/EngineUtitlities/MatteBox.ts

@@ -0,0 +1,134 @@
+import Konva from "konva";
+import { Size } from "../types";
+import { Colors } from "../constants";
+import { uiAccess } from "../../signals/uiAccess";
+
+export class MatteBox {
+  private matteBoxPoly: Konva.Line;
+  private lightBoxRect: Konva.Rect;
+  private uiLayerRef: Konva.Layer;
+  private boardCanvasSize: Size;
+  private captureCanvasSize: Size;
+
+  constructor({
+    boardCanvasSize,
+    captureCanvasSize,
+    uiLayerRef,
+  }: {
+    boardCanvasSize: Size;
+    captureCanvasSize: Size;
+    uiLayerRef: Konva.Layer;
+  }) {
+    this.uiLayerRef = uiLayerRef;
+    this.boardCanvasSize = boardCanvasSize;
+    this.captureCanvasSize = captureCanvasSize;
+    this.matteBoxPoly = new Konva.Line({
+      points: getMatteBoxPolygonPoints({
+        boardCanvasSize: this.boardCanvasSize,
+        captureCanvasSize: this.captureCanvasSize,
+      }),
+      fill: Colors.translucentBlack,
+      closed: true,
+    });
+    this.lightBoxRect = new Konva.Rect({
+      size: captureCanvasSize,
+      position: {
+        x: (boardCanvasSize.width - captureCanvasSize.width) / 2,
+        y: (boardCanvasSize.height - captureCanvasSize.height) / 2,
+      },
+      fill: Colors.transparent,
+      // fill: "rgba(100,0,0,0.3)",
+    });
+  }
+  public enable(showMagicBox?: boolean) {
+    this.uiLayerRef.add(this.matteBoxPoly);
+    this.uiLayerRef.add(this.lightBoxRect);
+    if (showMagicBox) {
+      uiAccess.magicBox.show();
+    }
+  }
+  public disable() {
+    this.matteBoxPoly.remove();
+    this.lightBoxRect.remove();
+    if (uiAccess.magicBox.isShowing()) {
+      uiAccess.magicBox.hide();
+    }
+  }
+  public updateSize({
+    boardCanvasSize,
+    captureCanvasSize,
+  }: {
+    boardCanvasSize?: Size;
+    captureCanvasSize?: Size;
+  }) {
+    if (boardCanvasSize) {
+      this.boardCanvasSize = boardCanvasSize;
+    }
+    if (captureCanvasSize) {
+      this.captureCanvasSize = captureCanvasSize;
+    }
+    this.matteBoxPoly.points(
+      getMatteBoxPolygonPoints({
+        boardCanvasSize: this.boardCanvasSize,
+        captureCanvasSize: this.captureCanvasSize,
+      }),
+    );
+    this.lightBoxRect.setAttrs({
+      size: this.captureCanvasSize,
+      position: {
+        x: (this.boardCanvasSize.width - this.captureCanvasSize.width) / 2,
+        y: (this.boardCanvasSize.height - this.captureCanvasSize.height) / 2,
+      },
+    });
+  }
+}
+
+function getMatteBoxPolygonPoints({
+  boardCanvasSize: board,
+  captureCanvasSize: capture,
+}: {
+  boardCanvasSize: Size;
+  captureCanvasSize: Size;
+}) {
+  return [
+    //top left
+    0,
+    0,
+    // top right
+    board.width,
+    0,
+    //bottom right
+    board.width,
+    board.height,
+    //bottom middle
+    board.width / 2,
+    board.height,
+    //canvas bottom middle,
+    board.width / 2,
+    (board.height - capture.height) / 2 + capture.height,
+    //canvas bottom right,
+    (board.width - capture.width) / 2 + capture.width,
+    (board.height - capture.height) / 2 + capture.height,
+    //canvas top right,
+    (board.width - capture.width) / 2 + capture.width,
+    (board.height - capture.height) / 2,
+    //canvas top left,
+    (board.width - capture.width) / 2,
+    (board.height - capture.height) / 2,
+    //canvas bottom left,
+    (board.width - capture.width) / 2,
+    (board.height - capture.height) / 2 + capture.height,
+    //canvas bottom middle,
+    board.width / 2,
+    (board.height - capture.height) / 2 + capture.height,
+    //bottom middle
+    board.width / 2,
+    board.height,
+    //bottom left
+    0,
+    board.height,
+    //back to top left
+    0,
+    0,
+  ];
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/EngineUtitlities/SceneManager.ts

@@ -0,0 +1,230 @@
+import Konva from "konva";
+import { v4 as uuidv4 } from "uuid";
+// TODO: USE API STORTELLE
+import { MediaFilesApi, MediaUploadApi } from "~/Classes/ApiManager";
+import { NodesManager, SelectionManager } from "../NodesManagers";
+import {
+  ImageNodeData,
+  NodeData,
+  TextNodeData,
+  TransformationData,
+  VideoNodeData,
+} from "../types";
+import { uiAccess } from "../../signals/uiAccess";
+import { NavigateFunction } from "react-router-dom";
+import { NodeType } from "../Nodes/constants";
+import { ImageNode, TextNode } from "../Nodes";
+import { RealTimeDrawEngine as RenderEngine } from "../RenderingPrimitives/RealTimeDrawEngine";
+
+
+export class SceneManager {
+  private navigateRef: NavigateFunction;
+
+
+  private mediaLayerRef: Konva.Layer;
+  private nodesManagerRef: NodesManager;
+  private selectionManagerRef: SelectionManager;
+  private renderEngineRef: RenderEngine;
+  private currentSceneToken: string | undefined;
+
+  constructor({
+    navigateRef,
+  
+    mediaLayerRef,
+    nodesManagerRef,
+    selectionManagerRef,
+    renderEngineRef,
+  }: {
+    navigateRef: NavigateFunction;
+
+    mediaLayerRef: Konva.Layer;
+    nodesManagerRef: NodesManager;
+    selectionManagerRef: SelectionManager;
+    renderEngineRef: RenderEngine;
+  }) {
+    this.navigateRef = navigateRef;
+
+    this.mediaLayerRef = mediaLayerRef;
+    this.nodesManagerRef = nodesManagerRef;
+    this.selectionManagerRef = selectionManagerRef;
+    this.renderEngineRef = renderEngineRef;
+  }
+
+  public async saveScene() {
+    const mediaUploadApi = new MediaUploadApi();
+    const timestamp = new Date();
+    const sceneTitle =
+      "board_" + timestamp.toISOString().substring(0, 19).replace(/\D/g, "");
+
+    const saveJson = this.extractAllNodesData();
+    console.log("saveJson", saveJson);
+    const file = new File([saveJson], `${sceneTitle}`, {
+      type: "application/json",
+    });
+    if (!this.currentSceneToken) {
+      const uploadResponse = await mediaUploadApi.UploadNewScene({
+        blob: file,
+        fileName: file.name,
+        uuid: uuidv4(),
+      });
+      console.log(uploadResponse);
+      if (!uploadResponse.success || !uploadResponse.data) {
+        uiAccess.dialogError.show({
+          title: "Save New Scene Error",
+          message: uploadResponse.errorMessage,
+        });
+        return;
+      }
+      this.currentSceneToken = uploadResponse.data;
+      this.navigateRef(`/${this.currentSceneToken}`);
+    } else {
+      const uploadResponse = await mediaUploadApi.UploadSavedScene({
+        blob: file,
+        fileName: file.name,
+        uuid: uuidv4(),
+        mediaToken: this.currentSceneToken,
+      });
+      console.log(uploadResponse);
+      if (!uploadResponse.success || !uploadResponse.data) {
+        uiAccess.dialogError.show({
+          title: "Save Scene Error",
+          message: uploadResponse.errorMessage,
+        });
+        return;
+      }
+    }
+  }
+
+  public async loadScene(mediaFileToken: string) {
+    const mediaFileApi = new MediaFilesApi();
+    const getSceneResponse = await mediaFileApi.GetMediaFileByToken({
+      mediaFileToken: mediaFileToken,
+    });
+    if (!getSceneResponse.success || !getSceneResponse.data) {
+      uiAccess.dialogError.show({
+        title: "Load Scene Error",
+        message: getSceneResponse.errorMessage,
+      });
+      return;
+    }
+    this.currentSceneToken = mediaFileToken;
+    // console.log(getSceneResponse.data);
+    // console.log(getSceneResponse.data.public_bucket_path);
+    const fileResponse = await fetch(getSceneResponse.data.public_bucket_url);
+    if (!fileResponse.ok) {
+      uiAccess.dialogError.show({
+        title: "Load Scene Error",
+        message: "Failed to download Scene File",
+      });
+      return;
+    }
+    const fileBlob = await fileResponse.blob();
+
+    const loadJson: NodeData[] = await new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      const readerError = () => {
+        uiAccess.dialogError.show({
+          title: "Load Scene Error",
+          message: "Failed to read Scene File",
+        });
+        this.navigateRef("/");
+        console.log("debug file Response", fileResponse);
+        console.log("debug file Blob", fileBlob);
+        reject();
+      };
+      reader.onloadend = () => {
+        try {
+          resolve(JSON.parse(reader.result as string));
+        } catch {
+          readerError();
+        }
+      };
+      reader.onerror = () => {
+        readerError();
+      };
+      reader.readAsText(fileBlob);
+    });
+
+    this.rebuildScene(loadJson);
+  }
+
+  private extractAllNodesData() {
+    const nodesData: NodeData[] = [];
+    this.nodesManagerRef.getAllNodes().forEach((node) => {
+      const nodeData = node.getNodeData(
+        this.renderEngineRef.captureCanvas.position(),
+      );
+      if (nodeData !== null) {
+        nodesData.push(nodeData);
+      }
+    });
+    nodesData.sort((a, b) => a.transform.zIndex - b.transform.zIndex);
+    return JSON.stringify(nodesData);
+  }
+
+  private rebuildScene(nodesData: NodeData[]) {
+    // console.log(nodesData);
+    nodesData.forEach((nodeDatum) => {
+      if (nodeDatum.type === NodeType.IMAGE && nodeDatum.imageNodeData) {
+        this.addImage(nodeDatum.imageNodeData, nodeDatum.transform);
+      } else if (nodeDatum.type === NodeType.VIDEO && nodeDatum.videoNodeData) {
+        this.addVideo(nodeDatum.videoNodeData, nodeDatum.transform);
+      } else if (nodeDatum.type === NodeType.TEXT && nodeDatum.textNodeData) {
+        this.addText({
+          textNodeData: nodeDatum.textNodeData,
+          transform: nodeDatum.transform,
+        });
+      }
+    });
+  }
+
+  private addImage(
+    imageNodeData: ImageNodeData,
+    transform: TransformationData,
+  ) {
+    const imageNode = new ImageNode({
+      mediaFileUrl: imageNodeData.mediaFileUrl,
+      mediaLayerRef: this.mediaLayerRef,
+      canvasPosition: this.renderEngineRef.captureCanvas.position(),
+      canvasSize: this.renderEngineRef.captureCanvas.size(),
+      transform: transform,
+      selectionManagerRef: this.selectionManagerRef,
+    });
+    this.nodesManagerRef.saveNode(imageNode);
+    this.renderEngineRef.addNodes(imageNode);
+  }
+  private addVideo(
+    videoNodeData: VideoNodeData,
+    transform: TransformationData,
+  ) {
+    const videoNode = new VideoNode({
+      loadingVideosProviderRef: this.loadingVideosProviderRef,
+      mediaLayerRef: this.mediaLayerRef,
+      selectionManagerRef: this.selectionManagerRef,
+      canvasPosition: this.renderEngineRef.captureCanvas.position(),
+      canvasSize: this.renderEngineRef.captureCanvas.size(),
+      videoNodeData: videoNodeData,
+      transform: transform,
+    });
+    this.nodesManagerRef.saveNode(videoNode);
+    this.renderEngineRef.addNodes(videoNode);
+  }
+  private addText({
+    textNodeData,
+    transform,
+  }: {
+    textNodeData: TextNodeData;
+    transform: TransformationData;
+  }) {
+    const textNode = new TextNode({
+      textNodeData: textNodeData,
+      transform: transform,
+      mediaLayerRef: this.mediaLayerRef,
+      canvasPosition: this.renderEngineRef.captureCanvas.position(),
+      canvasSize: this.renderEngineRef.captureCanvas.size(),
+      selectionManagerRef: this.selectionManagerRef,
+    });
+    this.nodesManagerRef.saveNode(textNode);
+    this.renderEngineRef.addNodes(textNode);
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/EngineUtitlities/index.ts

@@ -0,0 +1,3 @@
+export { CommandManager } from "./CommandManager";
+export { MatteBox } from "./MatteBox";
+export { SceneManager } from "./SceneManager";

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/GenerationEngine.ts

@@ -0,0 +1,46 @@
+import { invoke } from "@tauri-apps/api/core";
+import {
+  cancelGeneration,
+  finishGeneration,
+  onStartGeneration,
+} from "~/signals/generation/generationSignals";
+
+export class GenerationEngine {
+  private isGenerating = false;
+
+  constructor() {
+    console.log("GenerationEngine constructor");
+    this.attachEventListeners();
+  }
+
+  private attachEventListeners() {
+    onStartGeneration((prompt) => {
+      this.invokeGeneration(prompt);
+    });
+  }
+
+  private async invokeGeneration(prompt: string) {
+    if (this.isGenerating) {
+      return;
+    }
+
+    this.isGenerating = true;
+    console.log("Invoking generation for prompt:", prompt);
+
+    try {
+      const base64BitmapResponse = await invoke("text_to_image", {
+        prompt: prompt,
+      });
+
+      console.log("Generation finished with response:", base64BitmapResponse);
+
+      const base64string = base64BitmapResponse as string;
+      finishGeneration(base64string);
+    } catch (error) {
+      console.error("Error during image processing:", error);
+      cancelGeneration();
+    } finally {
+      this.isGenerating = false;
+    }
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/BaseNode.ts

@@ -0,0 +1,253 @@
+import Konva from "konva";
+
+import { SelectionManager } from "../NodesManagers";
+import { highlightStrokeWidth, primaryOrange } from "./constants";
+import { NodeData, Position } from "../types";
+import { RealTimeDrawEngine } from "../RenderingPrimitives/RealTimeDrawEngine";
+import { MouseEventHandler } from "react";
+import { KonvaEventObject } from "konva/lib/Node";
+
+export type SupportedNode = Konva.Image | Konva.Group | Konva.Shape;
+
+export abstract class BaseNode {
+  protected selectionManagerRef: SelectionManager;
+  public kNode: SupportedNode;
+  protected mediaLayerRef: Konva.Layer;
+
+  // Internal State members
+  // do not modify internal
+  protected isSelecting: boolean = false;
+  // This locks interaction when the render engine is rendering
+  protected isProcessing: boolean = false;
+  protected _isLocked: boolean = false;
+  protected _areBaseEventsListening: boolean = false;
+  protected _isKDragEventListening: boolean = false;
+  protected _isKTranformEventListening: boolean = false;
+
+  abstract getNodeData(captureCanvasPosition: Position): NodeData | null;
+
+  constructor({
+    selectionManagerRef,
+    mediaLayerRef,
+    kNode,
+  }: {
+    selectionManagerRef: SelectionManager;
+    mediaLayerRef: Konva.Layer;
+    kNode: SupportedNode;
+  }) {
+    // console.log("Node constructed");
+    // this.uuid = uuidv4();
+    this.mediaLayerRef = mediaLayerRef;
+    this.selectionManagerRef = selectionManagerRef;
+    this.kNode = kNode;
+  }
+
+  protected delete() {
+    // Do any other clean up and delete the konva node.
+    this.kNode.destroy();
+  }
+  public async setProcessing(val: boolean) {
+    this.isProcessing = val;
+  }
+  public isKEventRef() {
+    return this._isKDragEventListening && this._isKTranformEventListening;
+  }
+  public setIsKEventRef(flag: boolean) {
+    this._isKDragEventListening = flag;
+    this._isKTranformEventListening = flag;
+    this.removeListenToBaseKNodeTransformations();
+    this.removeListenToBaseKNodeDrags();
+    if (flag) {
+      this.listenToBaseKNodeTransformations();
+      this.listenToBaseKNodeDrags();
+    }
+  }
+  public highlight() {
+    // console.log("Highlight", this.kNode._id);
+    if (this.kNode instanceof Konva.Image || this.kNode instanceof Konva.Shape) {
+      this.kNode.stroke(primaryOrange);
+      this.kNode.strokeWidth(highlightStrokeWidth);
+      return;
+    }
+    if (this.kNode instanceof Konva.Group) {
+      const wrapperRect = this.kNode.findOne(".wrapper") as Konva.Rect;
+      console.log("Wrapper rect:", wrapperRect);
+      if (wrapperRect != null) {
+        wrapperRect.stroke(primaryOrange);
+        wrapperRect.strokeWidth(highlightStrokeWidth);
+      }
+      return;
+    }
+    if (import.meta.env.DEV) {
+      console.warn(
+        "DEV: BaseNode Highlight Error, kNode of BaseNode should be override by MediaNodes that extends kNode",
+      );
+    }
+  }
+
+  public unhighlight() {
+    // console.log("unHighlight", this.kNode._id);
+    if (this.kNode instanceof Konva.Image || this.kNode instanceof Konva.Shape) {
+      this.kNode.strokeWidth(0);
+      return;
+    }
+    if (this.kNode instanceof Konva.Group) {
+      const wrapperRect = this.kNode.findOne(".wrapper") as Konva.Rect;
+      console.log("Wrapper rect:", wrapperRect);
+      if (wrapperRect != null) {
+        // Issue investigate
+        wrapperRect.strokeWidth(0);
+      }
+      return;
+    }
+    if (import.meta.env.DEV) {
+      console.warn(
+        "DEV: BaseNode UnHighlight Error, kNode of BaseNode should be override by MediaNodes that extends kNode",
+      );
+    }
+  }
+
+  public moveLayerUp() {
+    this.kNode.moveUp();
+  }
+  public moveLayerDown() {
+    this.kNode.moveDown();
+  }
+  public isLocked() {
+    return this._isLocked;
+  }
+  public lock() {
+    this._isLocked = true;
+    this.kNode.setDraggable(false);
+    this.selectionManagerRef.updateNodeTransformer();
+    if (this.isKEventRef()) {
+      this.selectionManagerRef.updateContextComponents();
+    }
+  }
+  public unlock() {
+    this._isLocked = false;
+    this.kNode.setDraggable(true);
+    this.selectionManagerRef.updateNodeTransformer();
+    if (this.isKEventRef()) {
+      this.selectionManagerRef.updateContextComponents();
+    }
+  }
+
+  public listenToBaseKNode() {
+    if (this._areBaseEventsListening) {
+      return;
+    }
+    this._areBaseEventsListening = true;
+    const handleSelect = (isMultiSelect: boolean) => {
+      // console.log("handle select");
+      if (!isMultiSelect) {
+        // clear selection if not multislect
+        console.log("No Shift >> no multiselect");
+        this.selectionManagerRef.clearSelection();
+      }
+      if (this.selectionManagerRef.isNodeSelected(this)) {
+        this.selectionManagerRef.deselectNode(this);
+        return;
+      }
+      if (this.isSelecting) {
+        this.selectionManagerRef.selectNode(this);
+        return;
+      }
+    };
+
+    const handleRightClick = (e: KonvaEventObject<MouseEvent>) => {
+      this.selectionManagerRef.clearSelection();
+      this.selectionManagerRef.selectNode(this, undefined, {
+        show: true,
+        at: { x: e.evt.x, y: e.evt.y }
+      });
+    }
+
+    this.kNode.on("contextmenu", (e) => {
+      console.log("CONTEXT MENU", e);
+      e.evt.preventDefault();
+      handleRightClick(e);
+    });
+
+    this.kNode.on("mousedown", (e) => {
+      // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/which
+      // 3: Right mouse button
+      // If right click, let context event handle it
+      if (e.evt.button === 2) {
+        return;
+      }
+
+      // Selection of Node
+      if (!this.selectionManagerRef.isNodeSelected(this)) {
+        this.isSelecting = true;
+        // send shift key to check for multiselect
+        handleSelect(e.evt.shiftKey);
+      }
+    });
+
+    this.kNode.on("mouseup", (e) => {
+      // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/which
+      // 3: Right mouse button
+      // If right click, let context event handle it
+      if (e.evt.button === 2) {
+        return;
+      }
+
+      // just coming out of dragging or selecting mode
+      // no need to handle select
+      if (this.selectionManagerRef.isDragging() || this.isSelecting) {
+        this.isSelecting = false;
+        return;
+      }
+
+      // checking for multiselect, in multiselect deselection is possible
+      handleSelect(e.evt.shiftKey);
+    });
+  }
+  public removeListenToBaseKNode() {
+    this._areBaseEventsListening = false;
+    this.kNode.removeEventListener("mousedown mouseup");
+  }
+  private handleDragStart = () => {
+    console.log("Drag start", this.kNode._id);
+    if (this.isProcessing) {
+      return;
+    }
+    this.selectionManagerRef.dragStart();
+  };
+
+  private handleDragEnd = () => {
+    this.selectionManagerRef.dragEnd();
+  };
+
+  public listenToBaseKNodeDrags() {
+    this.kNode.on("dragstart", this.handleDragStart);
+    this.kNode.on("dragend", this.handleDragEnd);
+  }
+
+  public removeListenToBaseKNodeDrags() {
+    this.kNode.off("dragstart", this.handleDragStart);
+    this.kNode.off("dragend", this.handleDragEnd);
+  }
+  public listenToBaseKNodeTransformations() {
+    this.kNode.on("transformstart", (event) => {
+      console.log("transformstart", event.target._id);
+      this.selectionManagerRef.transformStart();
+    });
+    this.kNode.on("transform", () => {
+      this.kNode.setAttrs({
+        width: this.kNode.width() * this.kNode.scaleX(),
+        height: this.kNode.height() * this.kNode.scaleY(),
+        scaleX: 1,
+        scaleY: 1,
+      });
+    });
+    this.kNode.on("transformend", (event) => {
+      console.log("transformend", event.target._id);
+      this.selectionManagerRef.transformEnd();
+    });
+  }
+  public removeListenToBaseKNodeTransformations() {
+    this.kNode.removeEventListener("transformend");
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/ImageNode.ts

@@ -0,0 +1,261 @@
+import Konva from "konva";
+import { MediaFilesApi, MediaUploadApi } from "~/Classes/ApiManager";
+
+import { SelectionManager } from "../NodesManagers";
+import { Position, Size, NodeData, TransformationData } from "../types";
+
+import { NetworkedNode, UploadStatus } from "./NetworkedNode";
+import { NodeType, transparent } from "./constants";
+import { NodeUtilities } from "./NodeUtilities";
+
+interface ImageNodeContructor {
+  canvasPosition: Position;
+  canvasSize: Size;
+  imageFile?: File;
+  imageBitmap?: ImageBitmap;
+  mediaFileToken?: string;
+  mediaFileUrl?: string;
+  transform?: TransformationData;
+  mediaLayerRef: Konva.Layer;
+  selectionManagerRef: SelectionManager;
+  loaded: () => Promise<void>;
+}
+
+export class ImageNode extends NetworkedNode {
+  public kNode: Konva.Image;
+  public imageSize?: Size;
+  private loaded!: () => Promise<void>;
+  constructor({
+    canvasPosition,
+    canvasSize,
+    imageFile,
+    mediaFileToken,
+    mediaFileUrl,
+    transform: existingTransform,
+    mediaLayerRef,
+    selectionManagerRef,
+    loaded,
+    imageBitmap,
+  }: ImageNodeContructor) {
+    // kNodes need to be created first to guaruntee
+    // that it is not undefined in parent's context
+    const transform = NodeUtilities.getInitialTransform({
+      existingTransform,
+      canvasPosition,
+      canvasSize,
+    });
+    const kNode = new Konva.Image({
+      image: undefined, // to do replace with placeholder
+      ...transform,
+      draggable: true,
+      strokeScaleEnabled: false,
+    });
+    super({
+      selectionManagerRef: selectionManagerRef,
+      mediaLayerRef: mediaLayerRef,
+      kNode: kNode,
+      localFile: imageFile,
+    });
+    this.kNode = kNode;
+    this.loaded = loaded;
+    // this.imageSize = minNodeSize;
+    this.mediaLayerRef.add(this.kNode);
+
+    if (imageFile) {
+      this.loadImageFromFile({
+        imageFile: imageFile,
+        maxSize: canvasSize,
+        refPosition: canvasPosition,
+      });
+      return;
+    }
+    if (mediaFileUrl && transform) {
+      this.mediaFileToken = mediaFileToken;
+      this.mediaFileUrl = mediaFileUrl;
+      this.loadImageFromUrl(mediaFileUrl);
+      return;
+    }
+    if (imageBitmap) {
+      this.loadImageFromImageBitmap({
+        imageBitmap: imageBitmap,
+        maxSize: canvasSize,
+        refPosition: canvasPosition,
+      });
+      return;
+    }
+    console.log("image node creation is fucked");
+  }
+  private loadImageFromFile({
+    imageFile,
+    maxSize,
+    refPosition,
+  }: {
+    imageFile: File;
+    maxSize: Size;
+    refPosition: Position;
+  }) {
+    const imageComponent = new Image();
+    imageComponent.crossOrigin = "anonymous";
+    // this.setProgress({ progress: 100, status: UploadStatus.SUCCESS });
+
+    imageComponent.onload = () => {
+      //this.setProgress({ progress: 0, status: UploadStatus.FILE_STAGED });
+      this.imageSize = {
+        width: imageComponent.width,
+        height: imageComponent.height,
+      };
+      const adjustedSize = NodeUtilities.adjustNodeSizeToCanvas({
+        componentSize: this.imageSize,
+        maxSize: maxSize,
+      });
+      const centerPosition = NodeUtilities.positionNodeOnCanvasCenter({
+        canvasOffset: refPosition,
+        componentSize: adjustedSize,
+        maxSize: maxSize,
+      });
+      this.kNode.image(imageComponent);
+      this.kNode.setSize(adjustedSize);
+      this.kNode.setPosition(centerPosition);
+      this.kNode.moveToTop();
+      this.kNode.fill(transparent);
+      this.listenToBaseKNode();
+      this.mediaLayerRef.draw();
+      //this.uploadImage(imageFile);
+      this.loaded();
+    };
+    imageComponent.onerror = () => {
+      //this.setProgress({ progress: 0, status: UploadStatus.ERROR_ON_FILE });
+    };
+    imageComponent.src = URL.createObjectURL(imageFile);
+  }
+  private async loadImageFromUrl(mediaFileUrl: string) {
+    //this.setProgress({ progress: 75, status: UploadStatus.LOADING });
+
+    const newImage = new Image();
+    newImage.crossOrigin = "anonymous";
+    newImage.onerror = () => {
+      //this.setProgress({ progress: 90, status: UploadStatus.ERROR_ON_LOAD });
+    };
+    newImage.onload = () => {
+      // console.log("network image", newImage);
+      this.kNode.image(newImage);
+      this.kNode.draw();
+      //this.setProgress({ progress: 100, status: UploadStatus.SUCCESS });
+    };
+    newImage.src = mediaFileUrl;
+    this.listenToBaseKNode();
+  }
+
+  private loadImageFromImageBitmap({
+    imageBitmap,
+    maxSize,
+    refPosition,
+  }: {
+    imageBitmap: ImageBitmap;
+    maxSize: Size;
+    refPosition: Position;
+  }) {
+    this.imageSize = {
+      width: imageBitmap.width,
+      height: imageBitmap.height,
+    };
+    const adjustedSize = NodeUtilities.adjustNodeSizeToCanvas({
+      componentSize: this.imageSize,
+      maxSize: maxSize, // TODO
+    });
+    const centerPosition = NodeUtilities.positionNodeOnCanvasCenter({
+      canvasOffset: refPosition, // TODO
+      componentSize: adjustedSize, // TODO
+      maxSize: maxSize, // TODO
+    });
+    this.kNode.image(imageBitmap);
+    this.kNode.setSize(adjustedSize);
+    this.kNode.setPosition(centerPosition);
+    this.kNode.moveToTop();
+    this.kNode.fill(transparent);
+    this.listenToBaseKNode();
+    this.mediaLayerRef.draw();
+    //this.uploadImage(imageFile);
+    this.loaded();
+    this.listenToBaseKNode();
+  }
+
+  private async uploadImage(imageFile: File) {
+    //this.setProgress({ progress: 10, status: UploadStatus.UPLOADING });
+
+    const mediaUploadApi = new MediaUploadApi();
+    const uploadResponse = await mediaUploadApi.UploadImage({
+      blob: imageFile,
+      uuid: this.uuidGenerate(),
+      fileName: imageFile.name,
+    });
+    // console.log(uploadResponse);
+    if (!uploadResponse.success || !uploadResponse.data) {
+      this.setStatus(UploadStatus.ERROR_ON_UPLOAD, uploadResponse.errorMessage);
+      return;
+    }
+    this.mediaFileToken = uploadResponse.data;
+    this.retreiveImage(this.mediaFileToken);
+  }
+
+  private async retreiveImage(mediaFileToken: string) {
+    //this.setProgress({ progress: 50, status: UploadStatus.RETREIVING });
+    const mediaFileApi = new MediaFilesApi();
+    const mediaFileResponse = await mediaFileApi.GetMediaFileByToken({
+      mediaFileToken: mediaFileToken,
+    });
+    // console.log(mediaFileResponse);
+    if (!mediaFileResponse.success || !mediaFileResponse.data) {
+      this.setStatus(
+        UploadStatus.ERROR_ON_RETREIVE,
+        mediaFileResponse.errorMessage,
+      );
+      return;
+    }
+    this.mediaFileUrl = mediaFileResponse.data.media_links.cdn_url;
+    this.loadImageFromUrl(this.mediaFileUrl);
+  }
+
+  public async retry() {
+    if (this.mediaFileUrl) {
+      this.loadImageFromUrl(this.mediaFileUrl);
+      return;
+    }
+    if (this.mediaFileToken) {
+      this.retreiveImage(this.mediaFileToken);
+      return;
+    }
+    if (this.localFile) {
+      this.uploadImage(this.localFile);
+      return;
+    }
+    console.warn("Image Node has no data to recontruct itself!");
+  }
+  public getNodeData(canvasPostion: Position) {
+    if (!this.mediaFileUrl) {
+      console.error("Image Node can not be saved");
+      return null;
+    }
+    const data: NodeData = {
+      type: NodeType.IMAGE,
+      transform: {
+        position: {
+          x: this.kNode.position().x - canvasPostion.x,
+          y: this.kNode.position().y - canvasPostion.y,
+        },
+        size: this.kNode.size(),
+        rotation: this.kNode.rotation(),
+        scale: {
+          x: this.kNode.scaleX(),
+          y: this.kNode.scaleY(),
+        },
+        zIndex: this.kNode.getZIndex(),
+      },
+      imageNodeData: {
+        mediaFileUrl: this.mediaFileUrl,
+        mediaFileToken: this.mediaFileToken,
+      },
+    };
+    return data;
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/NetworkedNode.ts

@@ -0,0 +1,134 @@
+import Konva from "konva";
+import { v4 as uuidv4 } from "uuid";
+import { SelectionManager } from "../NodesManagers";
+import { BaseNode, SupportedNode } from "./BaseNode";
+import { Size } from "../types";
+import { LoadingVideosProvider } from "../EngineUtitlities/LoadingVideosProvider";
+import { NodeProgressEventDetail } from "../types/events";
+
+export enum UploadStatus {
+  INIT = "init",
+  FILE_STAGED = "file_staged",
+  ERROR_ON_FILE = "error_on_file",
+  UPLOADING = "uploading",
+  ERROR_ON_UPLOAD = "error_on_upload",
+  RETREIVING = "retreiving",
+  ERROR_ON_RETREIVE = "error_on_retreive",
+  LOADING = "loading",
+  ERROR_ON_LOAD = "error_on_load",
+  SUCCESS = "success",
+}
+
+export abstract class NetworkedNode extends BaseNode {
+  public kNode: SupportedNode;
+
+  // members to deal with loading progress
+  public didFinishLoading: boolean = false;
+  protected _progress: number = 0;
+  protected _progressMessage?: string;
+  protected progressStatus: string = UploadStatus.INIT;
+  public progressEvent: EventTarget;
+
+  // members to deal with the file carried
+  protected localFile?: File;
+  protected mediaFileToken?: string;
+  protected mediaFileUrl?: string;
+  public mediaFileSize?: Size;
+
+  // loading screen
+  protected loadingVideosProviderRef?: LoadingVideosProvider;
+
+  // error and retry handling
+  public errorMessage?: string;
+  abstract retry(): void;
+
+  constructor({
+    kNode,
+    selectionManagerRef,
+    mediaLayerRef,
+    localFile,
+    loadingVideosProviderRef,
+  }: {
+    kNode: SupportedNode;
+    selectionManagerRef: SelectionManager;
+    mediaLayerRef: Konva.Layer;
+    loadingVideosProviderRef?: LoadingVideosProvider;
+    localFile?: File;
+  }) {
+    super({
+      kNode,
+      selectionManagerRef,
+      mediaLayerRef,
+    });
+    this.kNode = kNode;
+    this.loadingVideosProviderRef = loadingVideosProviderRef;
+    this.didFinishLoading = false;
+    this.progressEvent = new EventTarget();
+    this.localFile = localFile;
+  }
+  public progress() {
+    return this._progress;
+  }
+  public progressMessage() {
+    return this._progressMessage;
+  }
+  public status() {
+    return this.progressStatus;
+  }
+  public isError() {
+    const errorStatues: string[] = [
+      UploadStatus.ERROR_ON_FILE,
+      UploadStatus.ERROR_ON_UPLOAD,
+      UploadStatus.ERROR_ON_RETREIVE,
+      UploadStatus.ERROR_ON_LOAD,
+    ];
+    return errorStatues.includes(this.progressStatus);
+  }
+
+  protected uuidGenerate() {
+    return uuidv4();
+  }
+  protected setStatus(newStatus: string, message?: string) {
+    this.progressStatus = newStatus;
+    this.errorMessage = message;
+    this.selectionManagerRef.updateContextComponents();
+  }
+  protected setProgress<S>({
+    progress,
+    name,
+    status,
+    message,
+  }: {
+    progress: number;
+    name?: string;
+    status?: S;
+    message?: string;
+  }) {
+    this._progress = progress;
+    if (message) {
+      this._progressMessage = message;
+    }
+    if (status && typeof status === "string") {
+      this.progressStatus = status;
+    }
+
+    if (this._progress === 100) {
+      this.didFinishLoading = true;
+    }
+    // TODO: change to use
+    this.progressEvent.dispatchEvent(
+      new CustomEvent<NodeProgressEventDetail<S>>(
+        name ? name : "GenericNodeProgress",
+        {
+          detail: {
+            node: this,
+            progress: this._progress,
+            message: message,
+            status: status,
+          },
+        },
+      ),
+    );
+    this.selectionManagerRef.updateContextComponents();
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/NodeUtilities.ts

@@ -0,0 +1,158 @@
+import Konva from "konva";
+import { Position, Size, TransformationData } from "../types";
+import { minNodeSize, transparent } from "./constants";
+
+export const NodeUtilities = {
+  adjustNodeSizeToCanvas,
+  downloadOffscreenCanvas,
+  getInitialTransform,
+  isAssetUrlAvailable,
+  positionNodeOnCanvasCenter,
+  printKNodeAttrs,
+  urlToBlob,
+};
+function downloadOffscreenCanvas(canvas: OffscreenCanvas) {
+  canvas.convertToBlob().then((blob) => {
+    if (blob) {
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "offscreen-canvas-image.png"; // Specify the file name
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url); // Clean up
+    }
+  });
+}
+function getInitialTransform({
+  existingTransform,
+  mediaFileSize,
+  canvasPosition,
+  canvasSize,
+}: {
+  existingTransform?: TransformationData;
+  mediaFileSize?: Size;
+  canvasPosition: Position;
+  canvasSize: Size;
+}) {
+  return existingTransform
+    ? {
+        ...existingTransform,
+        position: {
+          x: existingTransform.position.x + canvasPosition.x,
+          y: existingTransform.position.y + canvasPosition.y,
+        },
+        fill: transparent,
+      }
+    : {
+        position: positionNodeOnCanvasCenter({
+          canvasOffset: canvasPosition,
+          componentSize: mediaFileSize ?? minNodeSize,
+          maxSize: canvasSize,
+        }),
+        size: mediaFileSize ?? minNodeSize,
+        fill: "gray",
+      };
+}
+
+function adjustNodeSizeToCanvas({
+  componentSize,
+  maxSize,
+}: {
+  componentSize: Size;
+  maxSize: Size;
+}) {
+  const adjustedSize = {
+    width: componentSize.width,
+    height: componentSize.height,
+  };
+  if (adjustedSize.width > maxSize.width) {
+    const scaleDown = maxSize.width / adjustedSize.width;
+    adjustedSize.width = adjustedSize.width * scaleDown;
+    adjustedSize.height = adjustedSize.height * scaleDown;
+  }
+  if (adjustedSize.height > maxSize.height) {
+    const scaleDownAgain = maxSize.height / adjustedSize.height;
+    adjustedSize.width = adjustedSize.width * scaleDownAgain;
+    adjustedSize.height = adjustedSize.height * scaleDownAgain;
+  }
+  return adjustedSize;
+}
+
+function positionNodeOnCanvasCenter({
+  canvasOffset,
+  componentSize,
+  maxSize,
+}: {
+  canvasOffset: Position;
+  componentSize: Size;
+  maxSize: Size;
+}) {
+  return {
+    x: canvasOffset.x + maxSize.width / 2 - componentSize.width / 2,
+    y: canvasOffset.y + maxSize.height / 2 - componentSize.height / 2,
+  };
+}
+
+function printKNodeAttrs(kNode: Konva.Node) {
+  console.log({
+    position: kNode.position(),
+    size: kNode.size(),
+    scale: kNode.scale(),
+    rotation: kNode.rotation(),
+  });
+}
+async function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+// Function to check if the URL returns a 200 status
+async function checkUrl(url: string): Promise<boolean> {
+  try {
+    const response = await fetch(url);
+    return response.status === 200;
+  } catch (error) {
+    console.error("Error fetching URL:", error);
+    return false;
+  }
+}
+// wait using a while loop to display the result.
+async function isAssetUrlAvailable({
+  url,
+  sleepDurationMs = 500,
+  totalRetries,
+}: {
+  url: string;
+  sleepDurationMs?: number;
+  totalRetries?: number;
+}): Promise<boolean> {
+  let retryCount = 0;
+  let isAvailable = false;
+  const totalRetriesReached = () => {
+    if (!totalRetries) {
+      return false;
+    }
+    return retryCount >= totalRetries;
+  };
+  while (!isAvailable && !totalRetriesReached()) {
+    isAvailable = await checkUrl(url);
+    if (!isAvailable) {
+      console.log("Asset at Url not available yet, retrying...");
+      retryCount = retryCount + 1;
+      await sleep(sleepDurationMs);
+    } else if (import.meta.env.DEV) {
+      console.log("Preview Image is available:", url);
+    }
+  }
+  return isAvailable;
+}
+
+async function urlToBlob(url: string): Promise<Blob> {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch resource: ${response.statusText}`);
+  }
+  const blob = await response.blob();
+  return blob;
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/PaintNode.ts

@@ -0,0 +1,91 @@
+import Konva from "konva";
+import { SelectionManager } from "../NodesManagers";
+import { Position, NodeData } from "../types";
+import { NodeType } from "./constants";
+
+import { NetworkedNode } from "./NetworkedNode";
+
+interface PaintNodeConstructor {
+  canvasElement: HTMLCanvasElement;
+  lineBounds: {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+  };
+  mediaLayerRef: Konva.Layer;
+  selectionManagerRef: SelectionManager;
+
+  loaded: () => Promise<void>;
+}
+
+export class PaintNode extends NetworkedNode {
+  retry(): void {
+    throw new Error("Method not implemented.");
+  }
+
+  constructor({
+    canvasElement,
+    lineBounds,
+    mediaLayerRef,
+    selectionManagerRef,
+    loaded,
+  }: PaintNodeConstructor) {
+    const cl = canvasElement;
+
+    // Convert circle to image
+    const dataURL = cl.toDataURL();
+    const imageObj = new Image();
+    imageObj.src = dataURL;
+
+    const paintShape = new Konva.Image({
+      x: lineBounds.x,
+      y: lineBounds.y,
+      width: lineBounds.width,
+      height: lineBounds.height,
+      image: imageObj,
+      listening: false, // Disable event listening to allow captureCanvas to receive events
+      draggable: true,
+      // stroke: '#000000',
+      // strokeWidth: 2,
+      // dash: [5, 5], // Creates dotted outline THIS IS FOR DEBUG
+      globalCompositeOperation: "source-over",
+      fill: "transparent",
+    });
+
+    imageObj.onload = () => {
+      this.mediaLayerRef.draw();
+      loaded();
+    };
+
+    super({
+      selectionManagerRef: selectionManagerRef,
+      mediaLayerRef: mediaLayerRef,
+      kNode: paintShape,
+    });
+    this.kNode.moveToTop();
+    this.mediaLayerRef.add(this.kNode);
+    this.listenToBaseKNode();
+    this.mediaLayerRef.draw();
+  }
+
+  public getNodeData(canvasPosition: Position) {
+    const data: NodeData = {
+      type: NodeType.SHAPE,
+      transform: {
+        position: {
+          x: this.kNode.position().x - canvasPosition.x,
+          y: this.kNode.position().y - canvasPosition.y,
+        },
+        size: this.kNode.size(),
+        rotation: this.kNode.rotation(),
+        scale: {
+          x: this.kNode.scaleX(),
+          y: this.kNode.scaleY(),
+        },
+        zIndex: this.kNode.getZIndex(),
+      },
+    };
+    return data;
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/PreviewCopy.ts

@@ -0,0 +1,58 @@
+import Konva from "konva";
+import { SelectionManager } from "../NodesManagers";
+import { Position, Size, NodeData, TransformationData } from "../types";
+import { NodeType } from "./constants";
+import { NodeUtilities } from "./NodeUtilities";
+import { NetworkedNode } from "./NetworkedNode";
+
+interface PreviewCopyConstructor {
+  image: Konva.Image;
+  mediaLayerRef: Konva.Layer;
+  selectionManagerRef: SelectionManager;
+  loaded: () => Promise<void>;
+}
+
+export class PreviewCopyNode extends NetworkedNode {
+  retry(): void {
+    throw new Error("Method not implemented.");
+  }
+
+  constructor({
+    image,
+    mediaLayerRef,
+    selectionManagerRef,
+    loaded,
+  }: PreviewCopyConstructor) {
+    // Create the actual shape inside the group
+
+    super({
+      selectionManagerRef: selectionManagerRef,
+      mediaLayerRef: mediaLayerRef,
+      kNode: image,
+    });
+    this.kNode.moveToTop();
+    this.mediaLayerRef.add(this.kNode);
+    this.listenToBaseKNode();
+    this.mediaLayerRef.draw();
+  }
+
+  public getNodeData(canvasPosition: Position) {
+    const data: NodeData = {
+      type: NodeType.SHAPE,
+      transform: {
+        position: {
+          x: this.kNode.position().x - canvasPosition.x,
+          y: this.kNode.position().y - canvasPosition.y,
+        },
+        size: this.kNode.size(),
+        rotation: this.kNode.rotation(),
+        scale: {
+          x: this.kNode.scaleX(),
+          y: this.kNode.scaleY(),
+        },
+        zIndex: this.kNode.getZIndex(),
+      },
+    };
+    return data;
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/PureTextNode.ts

@@ -0,0 +1,186 @@
+import Konva from "konva";
+import { SelectionManager } from "../NodesManagers";
+import { BaseNode } from "./BaseNode";
+import {
+  NodeData,
+  Position,
+  Size,
+  TextNodeChildrenTransformData,
+  TextNodeData,
+  TransformationData,
+} from "../types";
+import { NodeUtilities } from "./NodeUtilities";
+import { NodeType } from "./constants";
+
+export class PureTextNode extends BaseNode {
+  public kNode: Konva.Group;
+  public rectNode: Konva.Rect;
+  public textNode: Konva.Text;
+  private originalTextSize: Size;
+  private textNodeData: TextNodeData;
+
+  public didFinishLoading: boolean = true;
+
+  constructor({
+    textNodeData,
+    selectionManagerRef,
+    mediaLayerRef,
+    canvasPosition,
+    canvasSize,
+    transform: existingTransform,
+    textChildrenTransforms,
+  }: {
+    textNodeData: TextNodeData;
+    selectionManagerRef: SelectionManager;
+    mediaLayerRef: Konva.Layer;
+    canvasSize: Size;
+    canvasPosition: Position;
+    transform?: TransformationData;
+    textChildrenTransforms?: TextNodeChildrenTransformData;
+  }) {
+    const textNode = new Konva.Text({
+      ...textNodeData,
+      x: 10,
+      y: 10,
+      width: 500,
+    });
+    const kNode = new Konva.Group({
+      position: NodeUtilities.positionNodeOnCanvasCenter({
+        canvasOffset: canvasPosition,
+        componentSize: {
+          width: textNode.width() + 20,
+          height: textNode.height() + 20,
+        },
+        maxSize: canvasSize,
+      }),
+      width: textNode.width() + 20,
+      height: textNode.height() + 20,
+      draggable: true,
+    });
+    const rectNode = new Konva.Rect({
+      x: 0,
+      y: 0,
+      width: textNode.width() + 20,
+      height: textNode.height() + 20,
+      strokeScaleEnabled: false,
+      name: "wrapper",
+    });
+
+    super({
+      selectionManagerRef: selectionManagerRef,
+      mediaLayerRef: mediaLayerRef,
+      kNode: kNode,
+    });
+    this.textNodeData = textNodeData;
+    this.kNode = kNode;
+    this.textNode = textNode;
+    this.rectNode = rectNode;
+    this.kNode.add(this.rectNode);
+    this.kNode.add(this.textNode);
+    if (existingTransform && textChildrenTransforms) {
+      this.applyTransform({
+        existingTransform,
+        textChildrenTransforms,
+        canvasPosition,
+      });
+    }
+    this.mediaLayerRef.add(this.kNode);
+    this.originalTextSize = this.textNode.size();
+    this.listenToBaseKNode();
+  }
+  public listenToBaseKNodeTransformations() {
+    this.kNode.on("transformstart", () => {
+      // console.log("transformstart", event.target._id);
+      this.selectionManagerRef.transformStart();
+    });
+
+    this.kNode.on("transform", () => {
+      const newBoxSize = {
+        width: this.kNode.width() * this.kNode.scaleX(),
+        height: this.kNode.height() * this.kNode.scaleY(),
+        scaleX: 1,
+        scaleY: 1,
+      };
+      this.rectNode.setAttrs(newBoxSize);
+      this.kNode.setAttrs(newBoxSize);
+      const scaleX = (newBoxSize.width - 20) / this.originalTextSize.width;
+      const scaleY = (newBoxSize.height - 20) / this.originalTextSize.height;
+      this.textNode.setAttrs({
+        // make sure these stay the same
+        x: 10,
+        y: 10,
+        size: this.originalTextSize,
+        //while these changes in size
+        scaleX: scaleX,
+        scaleY: scaleY,
+      });
+    });
+    this.kNode.on("transformend", () => {
+      // console.log("transformend", event.target._id);
+      NodeUtilities.printKNodeAttrs(this.kNode);
+      NodeUtilities.printKNodeAttrs(this.textNode);
+      this.selectionManagerRef.transformEnd(this);
+    });
+  }
+  public getNodeData(canvasPostion: Position) {
+    const data: NodeData = {
+      type: NodeType.TEXT,
+      transform: {
+        position: {
+          x: this.kNode.position().x - canvasPostion.x,
+          y: this.kNode.position().y - canvasPostion.y,
+        },
+        size: this.kNode.size(),
+        rotation: this.kNode.rotation(),
+        scale: {
+          x: this.kNode.scaleX(),
+          y: this.kNode.scaleY(),
+        },
+        zIndex: this.kNode.getZIndex(),
+      },
+      textNodeData: this.textNodeData,
+      textChildrenTransforms: {
+        wrapperRectTransform: {
+          position: this.rectNode.position(),
+          size: this.rectNode.size(),
+          rotation: this.rectNode.rotation(),
+          scale: {
+            x: this.rectNode.scaleX(),
+            y: this.rectNode.scaleY(),
+          },
+          zIndex: this.rectNode.getZIndex(),
+        },
+        textNodeTransform: {
+          position: this.textNode.position(),
+          size: this.textNode.size(),
+          rotation: this.textNode.rotation(),
+          scale: {
+            x: this.textNode.scaleX(),
+            y: this.textNode.scaleY(),
+          },
+          zIndex: this.textNode.getZIndex(),
+        },
+      },
+    };
+    return data;
+  }
+  private applyTransform({
+    canvasPosition,
+    existingTransform,
+    textChildrenTransforms,
+  }: {
+    canvasPosition: Position;
+    existingTransform: TransformationData;
+    textChildrenTransforms: TextNodeChildrenTransformData;
+  }) {
+    this.kNode.setAttrs({
+      ...existingTransform,
+      position: {
+        x: existingTransform.position.x + canvasPosition.x,
+        y: existingTransform.position.y + canvasPosition.y,
+      },
+    });
+    this.rectNode.setAttrs(textChildrenTransforms.wrapperRectTransform);
+    this.textNode.setAttrs(textChildrenTransforms.textNodeTransform);
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/ShapeNode.ts

@@ -0,0 +1,152 @@
+import Konva from "konva";
+import { SelectionManager } from "../NodesManagers";
+import { Position, Size, NodeData, TransformationData } from "../types";
+import { NodeType } from "./constants";
+import { NodeUtilities } from "./NodeUtilities";
+import { NetworkedNode } from "./NetworkedNode";
+
+export enum ShapeType {
+  CIRCLE = "circle",
+  SQUARE = "square",
+  TRIANGLE = "triangle",
+}
+
+interface ShapeNodeConstructor {
+  canvasPosition: Position;
+  canvasSize: Size;
+  shapeType: ShapeType;
+  size: Size;
+  color?: string; // Hex color string
+  transform?: TransformationData;
+  mediaLayerRef: Konva.Layer;
+  selectionManagerRef: SelectionManager;
+  loaded: () => Promise<void>;
+}
+
+export class ShapeNode extends NetworkedNode {
+  retry(): void {
+    throw new Error("Method not implemented.");
+  }
+
+  public shapeType: ShapeType;
+  public size: Size;
+  public color: string;
+
+  constructor({
+    canvasPosition,
+    canvasSize,
+    shapeType,
+    size,
+    color = "#2D81FF", // Default red if no color provided
+    transform: existingTransform,
+    mediaLayerRef,
+    selectionManagerRef,
+    loaded,
+  }: ShapeNodeConstructor) {
+    // Create the actual shape inside the group
+    const transform = NodeUtilities.getInitialTransform({
+      existingTransform,
+      mediaFileSize: size,
+      canvasPosition,
+      canvasSize,
+    });
+
+    let shape = null;
+
+    switch (shapeType) {
+      case ShapeType.CIRCLE:
+        shape = new Konva.Ellipse({
+          radiusX: size.width / 2,
+          radiusY: size.height / 2,
+          fill: color,
+          strokeScaleEnabled: false,
+          draggable: true,
+        });
+        break;
+
+      case ShapeType.SQUARE:
+        shape = new Konva.Rect({
+          width: size.width,
+          height: size.height,
+          ...transform,
+          fill: color,
+          strokeScaleEnabled: false,
+          draggable: true,
+        });
+        break;
+
+      case ShapeType.TRIANGLE:
+        shape = new Konva.Shape({
+          width: size.width,
+          height: size.height,
+          ...transform,
+          fill: color,
+          strokeScaleEnabled: false,
+          draggable: true,
+          sceneFunc: (context, shape) => {
+            context.beginPath();
+            context.moveTo(shape.width() / 2, 0);
+            context.lineTo(shape.width(), shape.height());
+            context.lineTo(0, shape.height());
+            context.closePath();
+            context.fillStrokeShape(shape);
+          }
+        });
+        break;
+
+      default:
+        throw new Error("Invalid shape type");
+    }
+
+    super({
+      selectionManagerRef: selectionManagerRef,
+      mediaLayerRef: mediaLayerRef,
+      kNode: shape,
+    });
+
+    this.shapeType = shapeType;
+    this.size = size;
+    this.color = color;
+
+    // Center the shape
+    const centerPosition = NodeUtilities.positionNodeOnCanvasCenter({
+      canvasOffset: canvasPosition,
+      componentSize: this.size,
+      maxSize: canvasSize,
+    });
+
+    // If the shape is an ellipse, the center is the origin so we need to offset it
+    if (shapeType === ShapeType.CIRCLE) {
+      centerPosition.x += size.width / 2;
+      centerPosition.y += size.height / 2;
+    }
+
+    // Add shape to group
+    // bring to the front
+    this.kNode.moveToTop();
+    this.kNode.setPosition(centerPosition);
+    this.mediaLayerRef.add(this.kNode);
+    this.listenToBaseKNode();
+    this.mediaLayerRef.draw();
+  }
+
+  public getNodeData(canvasPosition: Position) {
+    const data: NodeData = {
+      type: NodeType.SHAPE,
+      transform: {
+        position: {
+          x: this.kNode.position().x - canvasPosition.x,
+          y: this.kNode.position().y - canvasPosition.y,
+        },
+        size: this.kNode.size(),
+        rotation: this.kNode.rotation(),
+        scale: {
+          x: this.kNode.scaleX(),
+          y: this.kNode.scaleY(),
+        },
+        zIndex: this.kNode.getZIndex(),
+      },
+    };
+    return data;
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/TextNode.ts

@@ -0,0 +1,168 @@
+import Konva from "konva";
+import { SelectionManager } from "../NodesManagers";
+import { BaseNode } from "./BaseNode";
+import {
+  NodeData,
+  Position,
+  Size,
+  TextAlign,
+  TextNodeData,
+  TransformationData,
+} from "../types";
+import { NodeUtilities } from "./NodeUtilities";
+import { NodeType, transparent } from "./constants";
+
+export class TextNode extends BaseNode {
+  public kNode: Konva.Image;
+  private textNodeData: TextNodeData;
+  private originalTextSize?: Size;
+  public didFinishLoading: boolean = true;
+
+  constructor({
+    textNodeData,
+    selectionManagerRef,
+    mediaLayerRef,
+    canvasPosition,
+    canvasSize,
+    transform: existingTransform,
+  }: {
+    textNodeData: TextNodeData;
+    selectionManagerRef: SelectionManager;
+    mediaLayerRef: Konva.Layer;
+    canvasSize: Size;
+    canvasPosition: Position;
+    transform?: TransformationData;
+  }) {
+    const transform = NodeUtilities.getInitialTransform({
+      existingTransform,
+      canvasPosition,
+      canvasSize,
+    });
+    // Create a new ImageNode to house the canvas text
+    const kNode = new Konva.Image({
+      image: undefined, // will use the canvas as the image source
+      ...transform,
+      draggable: true,
+      strokeScaleEnabled: false,
+    });
+
+    super({
+      selectionManagerRef: selectionManagerRef,
+      mediaLayerRef: mediaLayerRef,
+      kNode: kNode,
+    });
+    this.textNodeData = textNodeData;
+    this.kNode = kNode;
+    this.mediaLayerRef.add(this.kNode);
+    this.listenToBaseKNode();
+
+    this.loadTextImageUsingCanvas({
+      maxSize: canvasSize,
+      refPosition: canvasPosition,
+      existingTransform: existingTransform,
+    });
+  }
+
+  private loadTextImageUsingCanvas({
+    maxSize,
+    refPosition,
+    existingTransform,
+  }: {
+    maxSize: Size;
+    refPosition: Position;
+    existingTransform?: TransformationData;
+  }) {
+    // Create a temporary canvas to draw the text
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    if (context === null) {
+      return;
+    }
+
+    // calvulate and set canvas
+    const lines: string[] = this.textNodeData.text.split("\n");
+    const { fontSize, fontFamily, fontStyle, fontWeight, maxWidth, textAlign } =
+      this.textNodeData;
+    this.originalTextSize = {
+      width: maxWidth,
+      height: fontSize * lines.length * 1.5 + fontSize * 0.5,
+    };
+    canvas.width = this.originalTextSize.width;
+    canvas.height = this.originalTextSize.height;
+
+    // Set the font styles to match the text node
+    context.font = `${fontWeight} ${fontStyle} ${fontSize}px ${fontFamily}`;
+
+    context.fillStyle = this.textNodeData.color;
+    context.textAlign = textAlign;
+    context.textBaseline = "top";
+
+    // Draw the text on the canvas
+    lines.forEach((line, idx) => {
+      const yOffset = fontSize * (1.5 * idx + 0.5);
+      const xOffset =
+        textAlign === TextAlign.LEFT
+          ? 0
+          : textAlign === TextAlign.CENTER
+            ? maxWidth / 2
+            : maxWidth; // textAlign === TextAlign.Right
+
+      context.fillText(line, xOffset, yOffset);
+    });
+
+    // Convert canvas to data URL
+    const dataURL = canvas.toDataURL("image/png");
+
+    // Create a new Image object
+    const imageComponent = new Image();
+    imageComponent.crossOrigin = "anonymous";
+    imageComponent.onload = () => {
+      if (existingTransform) {
+        this.kNode.setAttrs({
+          image: imageComponent,
+          fill: transparent,
+        });
+        return;
+      }
+      const imageSize = {
+        width: canvas.width,
+        height: canvas.height,
+      };
+
+      const centerPosition = NodeUtilities.positionNodeOnCanvasCenter({
+        canvasOffset: refPosition,
+        componentSize: imageSize,
+        maxSize: maxSize,
+      });
+
+      this.kNode.setAttrs({
+        image: imageComponent,
+        size: imageSize,
+        position: centerPosition,
+        fill: transparent,
+      });
+    };
+    imageComponent.src = dataURL;
+  }
+
+  public getNodeData(canvasPostion: Position) {
+    const data: NodeData = {
+      type: NodeType.TEXT,
+      transform: {
+        position: {
+          x: this.kNode.position().x - canvasPostion.x,
+          y: this.kNode.position().y - canvasPostion.y,
+        },
+        size: this.kNode.size(),
+        rotation: this.kNode.rotation(),
+        scale: {
+          x: this.kNode.scaleX(),
+          y: this.kNode.scaleY(),
+        },
+        zIndex: this.kNode.getZIndex(),
+      },
+      textNodeData: this.textNodeData,
+    };
+    return data;
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/constants.ts

@@ -0,0 +1,16 @@
+import { Colors } from "../constants";
+
+export enum NodeType {
+  IMAGE = "image",
+  TEXT = "text",
+  VIDEO = "video",
+  SHAPE = "shape",
+}
+export const transparent = Colors.transparent;
+export const primaryOrange = Colors.primaryOrange;
+
+export const highlightStrokeWidth = 2;
+export const minNodeSize = {
+  width: 200,
+  height: 200,
+};

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/index.ts

@@ -0,0 +1,7 @@
+export { NodeType } from "./constants";
+export { BaseNode } from "./BaseNode";
+export { ImageNode } from "./ImageNode";
+export { PreviewCopyNode } from "./PreviewCopy";
+export { TextNode } from "./TextNode";
+export { ShapeNode , ShapeType} from "./ShapeNode";
+export { PaintNode } from "./PaintNode";