Fix history missing from gallery edit

- clear all tooltip
- padding, gap, ordering fixes

crates/desktop/artcraft/src/core/commands/enqueue/image_bg_removal/enqueue_image_bg_removal_command.rs

@@ -11,8 +11,6 @@ use crate::core::events::generation_events::common::{GenerationAction, Generatio
 use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
 use crate::core::events::generation_events::generation_enqueue_success_event::GenerationEnqueueSuccessEvent;
 use crate::core::events::sendable_event_trait::SendableEvent;
-use crate::core::model::contextual_image_edit_models::ContextualImageEditModel;
-use crate::core::model::image_models::ImageModel;
 use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
 use crate::core::state::data_dir::trait_data_subdir::DataSubdir;

crates/desktop/artcraft/src/core/commands/enqueue/image_bg_removal/generic/handle_generic_bg_removal_artcraft.rs

@@ -6,8 +6,6 @@ use crate::core::commands::enqueue::task_enqueue_success::TaskEnqueueSuccess;
 use crate::core::events::basic_sendable_event_trait::BasicSendableEvent;
 use crate::core::events::generation_events::common::{GenerationAction, GenerationServiceProvider};
 use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
-use crate::core::model::contextual_image_edit_models::ContextualImageEditModel;
-use crate::core::model::image_models::ImageModel;
 use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
 use crate::core::state::provider_priority::ProviderPriorityStore;

crates/desktop/artcraft/src/core/commands/enqueue/image_edit/enqueue_contextual_edit_image_command.rs

@@ -10,8 +10,6 @@ use crate::core::events::generation_events::common::{GenerationAction, Generatio
 use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
 use crate::core::events::generation_events::generation_enqueue_success_event::GenerationEnqueueSuccessEvent;
 use crate::core::events::sendable_event_trait::SendableEvent;
-use crate::core::model::contextual_image_edit_models::ContextualImageEditModel;
-use crate::core::model::image_models::ImageModel;
 use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
 use crate::core::state::data_dir::trait_data_subdir::DataSubdir;
@@ -27,6 +25,7 @@ use crate::services::storyteller::state::storyteller_credential_manager::Storyte
 use enums::common::generation_provider::GenerationProvider;
 use enums::tauri::tasks::task_status::TaskStatus;
 use enums::tauri::tasks::task_type::TaskType;
+use enums::tauri::ux::tauri_command_caller::TauriCommandCaller;
 use errors::AnyhowError;
 use log::{error, info, warn};
 use openai_sora_client::recipes::image_remix_with_session_auto_renew::{image_remix_with_session_auto_renew, ImageRemixAutoRenewRequest};
@@ -41,9 +40,20 @@ use storyteller_client::error::storyteller_error::StorytellerError;
 use storyteller_client::media_files::get_media_file::get_media_file;
 use storyteller_client::utils::api_host::ApiHost;
 use tauri::{AppHandle, Manager, State};
-use enums::tauri::ux::tauri_command_caller::TauriCommandCaller;
 use tokens::tokens::media_files::MediaFileToken;
 
+/// This is used in the Tauri command bridge. 
+/// Don't change the serializations without coordinating with the frontend.
+#[derive(Deserialize, Debug, Copy, Clone)]
+#[serde(rename_all = "snake_case")]
+pub enum ContextualImageEditModel {
+  #[serde(rename = "gpt_image_1")]
+  GptImage1,
+
+  #[serde(rename = "flux_pro_kontext_max")]
+  FluxProKontextMax,
+}
+
 #[derive(Deserialize, Debug)]
 pub struct EnqueueContextualEditImageCommand {
   /// The model to use.

crates/desktop/artcraft/src/core/commands/enqueue/image_edit/flux_kontext/handle_flux_kontext_edit_artcraft.rs

@@ -4,8 +4,6 @@ use crate::core::commands::enqueue::task_enqueue_success::TaskEnqueueSuccess;
 use crate::core::events::basic_sendable_event_trait::BasicSendableEvent;
 use crate::core::events::generation_events::common::{GenerationAction, GenerationModel, GenerationServiceProvider};
 use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
-use crate::core::model::contextual_image_edit_models::ContextualImageEditModel;
-use crate::core::model::image_models::ImageModel;
 use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
 use crate::core::state::provider_priority::ProviderPriorityStore;

crates/desktop/artcraft/src/core/commands/enqueue/image_edit/gpt_image_1/handle_gpt_image_1_edit_artcraft.rs

@@ -5,8 +5,6 @@ use crate::core::commands::enqueue::task_enqueue_success::TaskEnqueueSuccess;
 use crate::core::events::basic_sendable_event_trait::BasicSendableEvent;
 use crate::core::events::generation_events::common::{GenerationAction, GenerationModel, GenerationServiceProvider};
 use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
-use crate::core::model::contextual_image_edit_models::ContextualImageEditModel;
-use crate::core::model::image_models::ImageModel;
 use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
 use crate::core::state::provider_priority::ProviderPriorityStore;

crates/desktop/artcraft/src/core/commands/enqueue/image_edit/gpt_image_1/handle_gpt_image_1_edit_sora.rs

@@ -8,8 +8,6 @@ use crate::core::events::functional_events::show_provider_login_modal_event::Sho
 use crate::core::events::generation_events::common::{GenerationAction, GenerationModel, GenerationServiceProvider};
 use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
 use crate::core::events::generation_events::generation_enqueue_success_event::GenerationEnqueueSuccessEvent;
-use crate::core::model::contextual_image_edit_models::ContextualImageEditModel;
-use crate::core::model::image_models::ImageModel;
 use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
 use crate::core::state::data_dir::trait_data_subdir::DataSubdir;

crates/desktop/artcraft/src/core/commands/enqueue/image_inpaint/enqueue_image_inpaint_command.rs

@@ -1,7 +1,9 @@
 use crate::core::commands::enqueue::image_edit::errors::InternalContextualEditImageError;
 use crate::core::commands::enqueue::image_edit::gpt_image_1::handle_gpt_image_1_edit::handle_gpt_image_1_edit;
 use crate::core::commands::enqueue::image_inpaint::errors::InternalImageInpaintError;
+use crate::core::commands::enqueue::image_inpaint::flux_dev_juggernaut_inpaint::handle_flux_dev_juggernaut_inpaint::handle_flux_dev_juggernaut_inpaint;
 use crate::core::commands::enqueue::image_inpaint::flux_pro_1_inpaint::handle_flux_pro_1_inpaint::handle_flux_pro_1_inpaint;
+use crate::core::commands::enqueue::image_inpaint::flux_pro_kontext_inpaint::handle_flux_pro_kontext_inpaint::handle_flux_pro_kontext_inpaint;
 use crate::core::commands::enqueue::task_enqueue_success::TaskEnqueueSuccess;
 use crate::core::commands::response::failure_response_wrapper::{CommandErrorResponseWrapper, CommandErrorStatus};
 use crate::core::commands::response::shorthand::{Response, ResponseOrErrorType};
@@ -11,8 +13,6 @@ use crate::core::events::generation_events::common::{GenerationAction, Generatio
 use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
 use crate::core::events::generation_events::generation_enqueue_success_event::GenerationEnqueueSuccessEvent;
 use crate::core::events::sendable_event_trait::SendableEvent;
-use crate::core::model::contextual_image_edit_models::ContextualImageEditModel;
-use crate::core::model::image_models::ImageModel;
 use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
 use crate::core::state::data_dir::trait_data_subdir::DataSubdir;
@@ -44,15 +44,20 @@ use storyteller_client::media_files::get_media_file::get_media_file;
 use storyteller_client::utils::api_host::ApiHost;
 use tauri::{AppHandle, Manager, State};
 use tokens::tokens::media_files::MediaFileToken;
-use crate::core::commands::enqueue::image_inpaint::flux_dev_juggernaut_inpaint::handle_flux_dev_juggernaut_inpaint::handle_flux_dev_juggernaut_inpaint;
 
 #[derive(Deserialize, Debug, Copy, Clone)]
 #[serde(rename_all = "snake_case")]
 pub enum ImageInpaintModel {
+  // Mask-based inpainting models
   #[serde(rename = "flux_dev_juggernaut")]
   FluxDevJuggernaut,
   #[serde(rename = "flux_pro_1")]
   FluxPro1,
+
+  // Non-inpainting, instructive editing models
+  // NB: We're supporting these to keep the app simple and not over-complicate the javascript
+  #[serde(rename = "flux_pro_kontext_max")]
+  FluxProKontextMax,
 }
 
 #[derive(Deserialize, Debug)]
@@ -244,6 +249,21 @@ pub async fn handle_request(
         sora_task_queue,
       ).await?
     }
+    Some(ImageInpaintModel::FluxProKontextMax) => {
+      // Redirect to contextual image edit handler.
+      handle_flux_pro_kontext_inpaint(
+        request,
+        app,
+        app_data_root,
+        app_env_configs,
+        provider_priority_store,
+        storyteller_creds_manager,
+        fal_creds_manager,
+        fal_task_queue,
+        sora_creds_manager,
+        sora_task_queue,
+      ).await?
+    }
   };
 
   let result = success_event

crates/desktop/artcraft/src/core/commands/enqueue/image_inpaint/flux_dev_juggernaut_inpaint/handle_flux_dev_juggernaut_inpaint_artcraft.rs

@@ -7,8 +7,6 @@ use crate::core::commands::enqueue::task_enqueue_success::TaskEnqueueSuccess;
 use crate::core::events::basic_sendable_event_trait::BasicSendableEvent;
 use crate::core::events::generation_events::common::{GenerationAction, GenerationModel, GenerationServiceProvider};
 use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
-use crate::core::model::contextual_image_edit_models::ContextualImageEditModel;
-use crate::core::model::image_models::ImageModel;
 use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
 use crate::core::state::provider_priority::ProviderPriorityStore;

crates/desktop/artcraft/src/core/commands/enqueue/image_inpaint/flux_pro_1_inpaint/handle_flux_pro_1_inpaint_artcraft.rs

@@ -7,8 +7,6 @@ use crate::core::commands::enqueue::task_enqueue_success::TaskEnqueueSuccess;
 use crate::core::events::basic_sendable_event_trait::BasicSendableEvent;
 use crate::core::events::generation_events::common::{GenerationAction, GenerationModel, GenerationServiceProvider};
 use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
-use crate::core::model::contextual_image_edit_models::ContextualImageEditModel;
-use crate::core::model::image_models::ImageModel;
 use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
 use crate::core::state::provider_priority::ProviderPriorityStore;
@@ -132,7 +130,7 @@ pub async fn handle_flux_pro_1_inpaint_artcraft(
   
   Ok(TaskEnqueueSuccess {
     provider: GenerationProvider::Artcraft,
-    model: Some(GenerationModel::FluxProKontextMax),
+    model: Some(GenerationModel::FluxPro1),
     provider_job_id: Some(job_id.to_string()),
     task_type: TaskType::ImageInpaintEdit,
   })

crates/desktop/artcraft/src/core/commands/enqueue/image_inpaint/flux_pro_kontext_inpaint/handle_flux_pro_kontext_inpaint.rs

@@ -0,0 +1,59 @@
+use crate::core::commands::enqueue::image_edit::enqueue_contextual_edit_image_command::EnqueueContextualEditImageCommand;
+use crate::core::commands::enqueue::image_edit::errors::InternalContextualEditImageError;
+use crate::core::commands::enqueue::image_inpaint::enqueue_image_inpaint_command::EnqueueInpaintImageCommand;
+use crate::core::commands::enqueue::image_inpaint::errors::InternalImageInpaintError;
+use crate::core::commands::enqueue::image_inpaint::flux_pro_kontext_inpaint::handle_flux_pro_kontext_inpaint_artcraft::handle_flux_pro_kontext_inpaint_artcraft;
+use crate::core::commands::enqueue::task_enqueue_success::TaskEnqueueSuccess;
+use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
+use crate::core::state::data_dir::app_data_root::AppDataRoot;
+use crate::core::state::provider_priority::{Provider, ProviderPriorityStore};
+use crate::services::fal::state::fal_credential_manager::FalCredentialManager;
+use crate::services::fal::state::fal_task_queue::FalTaskQueue;
+use crate::services::sora::state::sora_credential_manager::SoraCredentialManager;
+use crate::services::sora::state::sora_task_queue::SoraTaskQueue;
+use crate::services::storyteller::state::storyteller_credential_manager::StorytellerCredentialManager;
+use log::info;
+use tauri::AppHandle;
+
+pub async fn handle_flux_pro_kontext_inpaint(
+  request: &EnqueueInpaintImageCommand,
+  app: &AppHandle,
+  app_data_root: &AppDataRoot,
+  app_env_configs: &AppEnvConfigs,
+  provider_priority_store: &ProviderPriorityStore,
+  storyteller_creds_manager: &StorytellerCredentialManager,
+  fal_creds_manager: &FalCredentialManager,
+  fal_task_queue: &FalTaskQueue,
+  sora_creds_manager: &SoraCredentialManager,
+  sora_task_queue: &SoraTaskQueue,
+) -> Result<TaskEnqueueSuccess, InternalImageInpaintError> {
+
+  let priority = provider_priority_store.get_priority()?;
+  
+  // TODO: Check if providers are available before proceeding.
+
+  info!("Providers by priority: {:?}", priority);
+
+  for provider in priority.iter() {
+    match provider {
+      Provider::Fal => {
+        // Fallthrough (for now)
+      }
+      Provider::Sora => {
+        // Fallthrough
+      }
+      Provider::Artcraft => {
+        info!("Dispatching flux pro kontext inpaint via Artcraft...");
+        return handle_flux_pro_kontext_inpaint_artcraft(
+          request, 
+          app,
+          app_data_root,
+          app_env_configs, 
+          storyteller_creds_manager
+        ).await;
+      }
+    }
+  }
+  
+  Err(InternalImageInpaintError::NoProviderAvailable)
+}

crates/desktop/artcraft/src/core/commands/enqueue/image_inpaint/flux_pro_kontext_inpaint/handle_flux_pro_kontext_inpaint_artcraft.rs

@@ -0,0 +1,183 @@
+use crate::core::commands::enqueue::image_bg_removal::enqueue_image_bg_removal_command::EnqueueImageBgRemovalCommand;
+use crate::core::commands::enqueue::image_bg_removal::errors::InternalBgRemovalError;
+use crate::core::commands::enqueue::image_edit::enqueue_contextual_edit_image_command::{EditImageQuality, EditImageSize, EnqueueContextualEditImageCommand};
+use crate::core::commands::enqueue::image_edit::errors::InternalContextualEditImageError;
+use crate::core::commands::enqueue::image_inpaint::enqueue_image_inpaint_command::EnqueueInpaintImageCommand;
+use crate::core::commands::enqueue::image_inpaint::errors::InternalImageInpaintError;
+use crate::core::commands::enqueue::task_enqueue_success::TaskEnqueueSuccess;
+use crate::core::events::basic_sendable_event_trait::BasicSendableEvent;
+use crate::core::events::generation_events::common::{GenerationAction, GenerationModel, GenerationServiceProvider};
+use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
+use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
+use crate::core::state::data_dir::app_data_root::AppDataRoot;
+use crate::core::state::provider_priority::ProviderPriorityStore;
+use crate::core::utils::save_base64_image_to_temp_dir::save_base64_image_to_temp_dir;
+use crate::services::fal::state::fal_credential_manager::FalCredentialManager;
+use crate::services::fal::state::fal_task_queue::FalTaskQueue;
+use crate::services::sora::state::sora_credential_manager::SoraCredentialManager;
+use crate::services::sora::state::sora_task_queue::SoraTaskQueue;
+use crate::services::storyteller::state::storyteller_credential_manager::StorytellerCredentialManager;
+use anyhow::anyhow;
+use artcraft_api_defs::generate::image::edit::flux_pro_kontext_max_edit_image::{FluxProKontextMaxEditImageNumImages, FluxProKontextMaxEditImageRequest};
+use artcraft_api_defs::generate::image::edit::gpt_image_1_edit_image::{GptImage1EditImageImageQuality, GptImage1EditImageImageSize, GptImage1EditImageNumImages, GptImage1EditImageRequest};
+use artcraft_api_defs::generate::image::generate_flux_1_dev_text_to_image::GenerateFlux1DevTextToImageRequest;
+use artcraft_api_defs::generate::image::generate_flux_1_schnell_text_to_image::GenerateFlux1SchnellTextToImageRequest;
+use artcraft_api_defs::generate::image::generate_flux_pro_11_text_to_image::GenerateFluxPro11TextToImageRequest;
+use artcraft_api_defs::generate::image::generate_flux_pro_11_ultra_text_to_image::GenerateFluxPro11UltraTextToImageRequest;
+use artcraft_api_defs::generate::image::inpaint::flux_pro_1_inpaint_image::{FluxPro1InpaintImageNumImages, FluxPro1InpaintImageRequest};
+use enums::common::generation_provider::GenerationProvider;
+use enums::tauri::tasks::task_type::TaskType;
+use fal_client::requests::queue::image_gen::enqueue_flux_pro_11_ultra_text_to_image::{enqueue_flux_pro_11_ultra_text_to_image, FluxPro11UltraTextToImageArgs};
+use fal_client::requests::webhook::image::enqueue_gpt_image_1_edit_image_webhook::GptEditImageQuality;
+use idempotency::uuid::generate_random_uuid;
+use images::encoding::image_bytes_to_png_bytes::image_bytes_to_png_bytes;
+use images::encoding::image_bytes_to_png_bytes_with_dimensions::image_bytes_to_png_bytes_with_dimensions;
+use images::mask_images::normalize_image_bytes_to_flux_mask::normalize_image_bytes_to_flux_mask;
+use log::{error, info};
+use mimetypes::mimetype_info::mimetype_info::MimetypeInfo;
+use storyteller_client::credentials::storyteller_credential_set::StorytellerCredentialSet;
+use storyteller_client::generate::image::edit::flux_pro_kontext_max_edit_image::flux_pro_kontext_max_edit_image;
+use storyteller_client::generate::image::edit::gpt_image_1_edit_image::gpt_image_1_edit_image;
+use storyteller_client::generate::image::generate_flux_1_dev_text_to_image::generate_flux_1_dev_text_to_image;
+use storyteller_client::generate::image::generate_flux_1_schnell_text_to_image::generate_flux_1_schnell_text_to_image;
+use storyteller_client::generate::image::generate_flux_pro_11_text_to_image::generate_flux_pro_11_text_to_image;
+use storyteller_client::generate::image::generate_flux_pro_11_ultra_text_to_image::generate_flux_pro_11_ultra_text_to_image;
+use storyteller_client::generate::image::inpaint::flux_pro_1_inpaint_image::flux_pro_1_inpaint_image;
+use storyteller_client::media_files::get_media_file::get_media_file;
+use storyteller_client::media_files::upload_image_media_file_from_bytes::{upload_image_media_file_from_bytes, ImageType, UploadImageBytesArgs};
+use storyteller_client::media_files::upload_image_media_file_from_file::upload_image_media_file_from_file;
+use tauri::AppHandle;
+use tokens::tokens::media_files::MediaFileToken;
+
+pub async fn handle_flux_pro_kontext_inpaint_artcraft(
+  request: &EnqueueInpaintImageCommand,
+  app: &AppHandle,
+  app_data_root: &AppDataRoot,
+  app_env_configs: &AppEnvConfigs,
+  storyteller_creds_manager: &StorytellerCredentialManager,
+) -> Result<TaskEnqueueSuccess, InternalImageInpaintError> {
+
+  let creds = match storyteller_creds_manager.get_credentials()? {
+    Some(creds) => creds,
+    None => {
+      return Err(InternalImageInpaintError::NeedsStorytellerCredentials);
+    },
+  };
+
+  let image_media_token = match &request.image_media_token {
+    Some(token) => token.clone(),
+    None => {
+      return Err(InternalImageInpaintError::NoSourceImageSpecified);
+    },
+  };
+
+  //let image_media_file = get_media_file(
+  //  &app_env_configs.storyteller_host,
+  //  &image_media_token,
+  //).await.map_err(|err| {
+  //  error!("Failed to get media file for image: {:?}", err);
+  //  InternalImageInpaintError::StorytellerError(err)
+  //})?;
+
+  // TODO: Experiment in seeing if we can use the mask in any useful way.
+  
+  // let mask_media_token = get_mask(
+  //   request,
+  //   app_env_configs,
+  //   &creds,
+  // ).await?;
+
+  info!("Calling Artcraft flux pro kontext inpaint ...");
+
+  let uuid_idempotency_token = generate_random_uuid();
+
+  let num_images = match request.image_count {
+    None => None,
+    Some(1) => Some(FluxProKontextMaxEditImageNumImages::One),
+    Some(2) => Some(FluxProKontextMaxEditImageNumImages::Two),
+    Some(3) => Some(FluxProKontextMaxEditImageNumImages::Three),
+    Some(4) => Some(FluxProKontextMaxEditImageNumImages::Four),
+    Some(other) => {
+      return Err(InternalImageInpaintError::InvalidNumberOfRequestedImages {
+        min: 1,
+        max: 4,
+        requested: other,
+      });
+    },
+  };
+
+
+  let request = FluxProKontextMaxEditImageRequest {
+    uuid_idempotency_token,
+    prompt: Some(request.prompt.clone()),
+    image_media_token,
+    num_images,
+  };
+
+  let result = flux_pro_kontext_max_edit_image(
+    &app_env_configs.storyteller_host,
+    Some(&creds),
+    request,
+  ).await;
+
+
+  let job_id = match result {
+    Ok(enqueued) => {
+      // TODO(bt,2025-07-05): Enqueue job token?
+      info!("Successfully enqueued Artcraft flux pro kontext inpaint. Job token: {}",
+        enqueued.inference_job_token);
+      enqueued.inference_job_token
+    }
+    Err(err) => {
+      error!("Failed to use Artcraft flux pro kontext inpaint: {:?}", err);
+      return Err(InternalImageInpaintError::StorytellerError(err));
+    }
+  };
+  
+  Ok(TaskEnqueueSuccess {
+    provider: GenerationProvider::Artcraft,
+    model: Some(GenerationModel::FluxProKontextMax),
+    provider_job_id: Some(job_id.to_string()),
+    task_type: TaskType::ImageInpaintEdit,
+  })
+}
+
+// async fn get_mask(
+//   request: &EnqueueInpaintImageCommand,
+//   app_env_configs: &AppEnvConfigs,
+//   storyteller_creds: &StorytellerCredentialSet,
+// ) -> Result<MediaFileToken, InternalImageInpaintError> {
+// 
+//   if request.mask_image_media_token.is_some() && request.mask_image_raw_bytes.is_some() {
+//     return Err(InternalImageInpaintError::MaskMediaTokenAndBytesSupplied);
+//   }
+// 
+//   if let Some(token) = request.mask_image_media_token.as_ref() {
+//     return Ok(token.clone());
+//   };
+// 
+//   let image_bytes = request.mask_image_raw_bytes.as_ref()
+//     .ok_or(InternalImageInpaintError::NoMaskImageSpecified)?;
+// 
+//   let image_bytes = normalize_image_bytes_to_flux_mask(image_bytes)
+//       .map_err(|err| {
+//         error!("Failed to convert image bytes to png: {:?}", err);
+//         InternalImageInpaintError::CouldNotEncodeMask
+//       })?;
+// 
+//   info!("Uploading image media file from bytes...");
+// 
+//   let result = upload_image_media_file_from_bytes(UploadImageBytesArgs {
+//     api_host: &app_env_configs.storyteller_host,
+//     maybe_creds: Some(&storyteller_creds),
+//     image_bytes: image_bytes.0,
+//     image_type: ImageType::Png,
+//     is_intermediate_system_file: true,
+//   }).await
+//       .map_err(|err| {
+//         error!("Failed to upload image media file: {:?}", err);
+//         InternalImageInpaintError::StorytellerError(err)
+//       })?;
+// 
+//   Ok(result.media_file_token)
+// }

crates/desktop/artcraft/src/core/commands/enqueue/image_inpaint/flux_pro_kontext_inpaint/mod.rs

@@ -0,0 +1,2 @@
+pub (super) mod handle_flux_pro_kontext_inpaint;
+pub (super) mod handle_flux_pro_kontext_inpaint_artcraft;

crates/desktop/artcraft/src/core/commands/enqueue/image_inpaint/mod.rs

@@ -1,4 +1,5 @@
 mod flux_dev_juggernaut_inpaint;
 mod flux_pro_1_inpaint;
+mod flux_pro_kontext_inpaint;
 pub mod enqueue_image_inpaint_command;
 pub mod errors;

crates/desktop/artcraft/src/core/commands/enqueue/image_to_video/enqueue_image_to_video_command.rs

@@ -6,7 +6,6 @@ use crate::core::commands::response::shorthand::Response;
 use crate::core::commands::response::success_response_wrapper::SerializeMarker;
 use crate::core::events::basic_sendable_event_trait::BasicSendableEvent;
 use crate::core::events::generation_events::generation_enqueue_success_event::GenerationEnqueueSuccessEvent;
-use crate::core::model::video_models::VideoModel;
 use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
 use crate::core::state::provider_priority::{Provider, ProviderPriorityStore};
@@ -21,6 +20,27 @@ use serde_derive::{Deserialize, Serialize};
 use tauri::{AppHandle, State};
 use tokens::tokens::media_files::MediaFileToken;
 
+/// This is used in the Tauri command bridge. 
+/// Don't change the serializations without coordinating with the frontend.
+#[derive(Deserialize, Debug, Copy, Clone)]
+#[serde(rename_all = "snake_case")]
+pub enum VideoModel {
+  #[serde(rename = "kling_1.6_pro")]
+  Kling16Pro,
+
+  #[serde(rename = "kling_2.1_pro")]
+  Kling21Pro,
+
+  #[serde(rename = "kling_2.1_master")]
+  Kling21Master,
+
+  #[serde(rename = "seedance_1.0_lite")]
+  Seedance10Lite,
+
+  #[serde(rename = "veo_2")]
+  Veo2,
+}
+
 #[derive(Deserialize)]
 pub struct EnqueueImageToVideoRequest {
   /// REQUIRED.

crates/desktop/artcraft/src/core/commands/enqueue/image_to_video/generic/handle_video_artcraft.rs

@@ -1,11 +1,10 @@
-use crate::core::commands::enqueue::image_to_video::enqueue_image_to_video_command::EnqueueImageToVideoRequest;
+use crate::core::commands::enqueue::image_to_video::enqueue_image_to_video_command::{EnqueueImageToVideoRequest, VideoModel};
 use crate::core::commands::enqueue::image_to_video::internal_video_error::InternalVideoError;
 use crate::core::commands::enqueue::task_enqueue_success::TaskEnqueueSuccess;
 use crate::core::events::basic_sendable_event_trait::BasicSendableEvent;
 use crate::core::events::generation_events::common::{GenerationAction, GenerationModel, GenerationServiceProvider};
 use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
 use crate::core::events::generation_events::generation_enqueue_success_event::GenerationEnqueueSuccessEvent;
-use crate::core::model::video_models::VideoModel;
 use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
 use crate::services::storyteller::state::storyteller_credential_manager::StorytellerCredentialManager;

crates/desktop/artcraft/src/core/commands/enqueue/image_to_video/generic/handle_video_fal.rs

@@ -1,11 +1,10 @@
-use crate::core::commands::enqueue::image_to_video::enqueue_image_to_video_command::EnqueueImageToVideoRequest;
+use crate::core::commands::enqueue::image_to_video::enqueue_image_to_video_command::{EnqueueImageToVideoRequest, VideoModel};
 use crate::core::commands::enqueue::image_to_video::internal_video_error::InternalVideoError;
 use crate::core::commands::enqueue::task_enqueue_success::TaskEnqueueSuccess;
 use crate::core::events::basic_sendable_event_trait::BasicSendableEvent;
 use crate::core::events::generation_events::common::{GenerationAction, GenerationModel, GenerationServiceProvider};
 use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
 use crate::core::events::generation_events::generation_enqueue_success_event::GenerationEnqueueSuccessEvent;
-use crate::core::model::video_models::VideoModel;
 use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
 use crate::core::utils::download_media_file_to_temp_dir::download_media_file_to_temp_dir;

crates/desktop/artcraft/src/core/commands/enqueue/text_to_image/enqueue_text_to_image_command.rs

@@ -12,7 +12,6 @@ use crate::core::events::basic_sendable_event_trait::BasicSendableEvent;
 use crate::core::events::generation_events::common::{GenerationAction, GenerationServiceProvider};
 use crate::core::events::generation_events::generation_enqueue_success_event::GenerationEnqueueSuccessEvent;
 use crate::core::events::sendable_event_trait::SendableEvent;
-use crate::core::model::image_models::ImageModel;
 use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
 use crate::core::state::provider_priority::{Provider, ProviderPriorityStore};
@@ -26,12 +25,35 @@ use crate::services::storyteller::state::storyteller_credential_manager::Storyte
 use enums::common::generation_provider::GenerationProvider;
 use enums::tauri::tasks::task_status::TaskStatus;
 use enums::tauri::tasks::task_type::TaskType;
+use enums::tauri::ux::tauri_command_caller::TauriCommandCaller;
 use fal_client::requests::queue::image_gen::enqueue_flux_pro_11_ultra_text_to_image::{enqueue_flux_pro_11_ultra_text_to_image, FluxPro11UltraTextToImageArgs};
 use log::{error, info, warn};
 use serde::{Deserialize, Serialize};
 use sqlite_tasks::queries::create_task::{create_task, CreateTaskArgs};
 use tauri::{AppHandle, State};
-use enums::tauri::ux::tauri_command_caller::TauriCommandCaller;
+
+/// This is used in the Tauri command bridge. 
+/// Don't change the serializations without coordinating with the frontend.
+#[derive(Deserialize, Debug, Copy, Clone)]
+#[serde(rename_all = "snake_case")]
+pub enum ImageModel {
+  #[serde(rename = "flux_1_dev")]
+  Flux1Dev,
+  #[serde(rename = "flux_1_schnell")]
+  Flux1Schnell,
+  #[serde(rename = "flux_pro_11")]
+  FluxPro11,
+  #[serde(rename = "flux_pro_11_ultra")]
+  FluxPro11Ultra,
+  #[serde(rename = "gpt_image_1")]
+  GptImage1,
+  #[serde(rename = "recraft_3")]
+  Recraft3,
+
+  // Generic Midjourney model, version unknown.
+  #[serde(rename = "midjourney")]
+  Midjourney,
+}
 
 #[derive(Deserialize)]
 pub struct EnqueueTextToImageRequest {

crates/desktop/artcraft/src/core/commands/enqueue/text_to_image/generic/handle_image_artcraft.rs

@@ -1,10 +1,9 @@
 use crate::core::commands::enqueue::task_enqueue_success::TaskEnqueueSuccess;
-use crate::core::commands::enqueue::text_to_image::enqueue_text_to_image_command::{EnqueueTextToImageRequest, TextToImageSize};
+use crate::core::commands::enqueue::text_to_image::enqueue_text_to_image_command::{EnqueueTextToImageRequest, ImageModel, TextToImageSize};
 use crate::core::commands::enqueue::text_to_image::internal_image_error::InternalImageError;
 use crate::core::events::basic_sendable_event_trait::BasicSendableEvent;
 use crate::core::events::generation_events::common::{GenerationAction, GenerationModel, GenerationServiceProvider};
 use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
-use crate::core::model::image_models::ImageModel;
 use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
 use crate::services::storyteller::state::storyteller_credential_manager::StorytellerCredentialManager;

crates/desktop/artcraft/src/core/commands/enqueue/text_to_image/generic/handle_image_fal.rs

@@ -1,10 +1,9 @@
 use crate::core::commands::enqueue::task_enqueue_success::TaskEnqueueSuccess;
-use crate::core::commands::enqueue::text_to_image::enqueue_text_to_image_command::EnqueueTextToImageRequest;
+use crate::core::commands::enqueue::text_to_image::enqueue_text_to_image_command::{EnqueueTextToImageRequest, ImageModel};
 use crate::core::commands::enqueue::text_to_image::internal_image_error::InternalImageError;
 use crate::core::events::basic_sendable_event_trait::BasicSendableEvent;
 use crate::core::events::generation_events::common::{GenerationAction, GenerationModel, GenerationServiceProvider};
 use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
-use crate::core::model::image_models::ImageModel;
 use crate::services::fal::state::fal_credential_manager::FalCredentialManager;
 use crate::services::fal::state::fal_task_queue::FalTaskQueue;
 use anyhow::anyhow;

crates/desktop/artcraft/src/core/commands/enqueue/text_to_image/gpt_image_1/handle_gpt_image_1.rs

@@ -9,7 +9,6 @@ use crate::core::commands::enqueue::text_to_image::internal_image_error::Interna
 use crate::core::events::basic_sendable_event_trait::BasicSendableEvent;
 use crate::core::events::generation_events::common::{GenerationAction, GenerationModel, GenerationServiceProvider};
 use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
-use crate::core::model::image_models::ImageModel;
 use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
 use crate::core::state::provider_priority::{Provider, ProviderPriorityStore};

crates/desktop/artcraft/src/core/commands/enqueue/text_to_image/gpt_image_1/handle_gpt_image_1_artcraft.rs

@@ -6,7 +6,6 @@ use crate::core::commands::enqueue::text_to_image::internal_image_error::Interna
 use crate::core::events::basic_sendable_event_trait::BasicSendableEvent;
 use crate::core::events::generation_events::common::{GenerationAction, GenerationModel, GenerationServiceProvider};
 use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
-use crate::core::model::image_models::ImageModel;
 use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
 use crate::core::state::provider_priority::ProviderPriorityStore;

crates/desktop/artcraft/src/core/commands/enqueue/text_to_image/gpt_image_1/handle_gpt_image_1_sora.rs

@@ -5,7 +5,6 @@ use crate::core::events::basic_sendable_event_trait::BasicSendableEvent;
 use crate::core::events::functional_events::show_provider_login_modal_event::ShowProviderLoginModalEvent;
 use crate::core::events::generation_events::common::{GenerationAction, GenerationModel, GenerationServiceProvider};
 use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
-use crate::core::model::image_models::ImageModel;
 use crate::services::sora::state::sora_credential_manager::SoraCredentialManager;
 use crate::services::sora::state::sora_task_queue::SoraTaskQueue;
 use enums::common::generation_provider::GenerationProvider;

crates/desktop/artcraft/src/core/commands/enqueue/text_to_image/midjourney/handle_midjourney.rs

@@ -9,7 +9,6 @@ use crate::core::events::functional_events::show_provider_login_modal_event::Sho
 use crate::core::events::generation_events::common::{GenerationAction, GenerationModel, GenerationServiceProvider};
 use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
 use crate::core::events::warning_events::flash_user_input_error_event::FlashUserInputErrorEvent;
-use crate::core::model::image_models::ImageModel;
 use crate::core::state::app_env_configs::app_env_configs::AppEnvConfigs;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
 use crate::core::state::provider_priority::ProviderPriorityStore;

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

@@ -2,7 +2,6 @@ pub mod artcraft_error;
 pub mod commands;
 pub mod events;
 pub mod lifecycle;
-pub mod model;
 pub mod state;
 pub mod threads;
 pub mod utils;

crates/desktop/artcraft/src/core/model/contextual_image_edit_models.rs

@@ -1,15 +0,0 @@
-use serde_derive::Deserialize;
-
-/// This is used in the Tauri command bridge. 
-/// Don't change the serializations without coordinating with the frontend.
-#[derive(Deserialize, Debug, Copy, Clone)]
-#[serde(rename_all = "snake_case")]
-pub enum ContextualImageEditModel {
-  #[serde(rename = "gpt_image_1")]
-  GptImage1,
-
-  #[serde(rename = "flux_pro_kontext_max")]
-  FluxProKontextMax,
-  
-  // TODO: Flux Kontext models.
-}

crates/desktop/artcraft/src/core/model/image_models.rs

@@ -1,24 +0,0 @@
-use serde_derive::Deserialize;
-
-/// This is used in the Tauri command bridge. 
-/// Don't change the serializations without coordinating with the frontend.
-#[derive(Deserialize, Debug, Copy, Clone)]
-#[serde(rename_all = "snake_case")]
-pub enum ImageModel {
-  #[serde(rename = "flux_1_dev")]
-  Flux1Dev,
-  #[serde(rename = "flux_1_schnell")]
-  Flux1Schnell,
-  #[serde(rename = "flux_pro_11")]
-  FluxPro11,
-  #[serde(rename = "flux_pro_11_ultra")]
-  FluxPro11Ultra,
-  #[serde(rename = "gpt_image_1")]
-  GptImage1,
-  #[serde(rename = "recraft_3")]
-  Recraft3,
-  
-  // Generic Midjourney model, version unknown.
-  #[serde(rename = "midjourney")]
-  Midjourney,
-}

crates/desktop/artcraft/src/core/model/mod.rs

@@ -1,3 +0,0 @@
-pub mod contextual_image_edit_models;
-pub mod image_models;
-pub mod video_models;

crates/desktop/artcraft/src/core/model/video_models.rs

@@ -1,22 +0,0 @@
-use serde_derive::Deserialize;
-
-/// This is used in the Tauri command bridge. 
-/// Don't change the serializations without coordinating with the frontend.
-#[derive(Deserialize, Debug, Copy, Clone)]
-#[serde(rename_all = "snake_case")]
-pub enum VideoModel {
-  #[serde(rename = "kling_1.6_pro")]
-  Kling16Pro,
-  
-  #[serde(rename = "kling_2.1_pro")]
-  Kling21Pro,
-  
-  #[serde(rename = "kling_2.1_master")]
-  Kling21Master,
-  
-  #[serde(rename = "seedance_1.0_lite")]
-  Seedance10Lite,
-  
-  #[serde(rename = "veo_2")]
-  Veo2,
-}

crates/service/web/storyteller_web/src/api_doc_cli.rs

@@ -27,6 +27,7 @@ use errors::AnyhowResult;
 
 pub mod billing;
 pub mod configs;
+pub mod error;
 pub mod http_server;
 pub mod state;
 pub mod threads;

crates/service/web/storyteller_web/src/api_doc_server.rs

@@ -30,6 +30,7 @@ use crate::configs::static_api_tokens::StaticApiTokenSet;
 
 pub mod billing;
 pub mod configs;
+pub mod error;
 pub mod http_server;
 pub mod state;
 pub mod threads;

crates/service/web/storyteller_web/src/error/internal_error.rs

@@ -0,0 +1,37 @@
+use std::error::Error;
+use std::fmt::{Debug, Display, Formatter};
+
+/// Any generic errors arising internally.
+/// An error class that we do not expose via the API.
+/// This should be massaged before we send it to the user.
+#[derive(Debug)]
+pub enum InternalError {
+  /// Issue with HMAC decoding
+  /// This is typically when using development cookies against production,
+  /// or vice versa.
+  VisitorCookieError(String),
+  
+  /// Decode error with AVT cookie missing a required field.
+  VisitorCookieMissingField(&'static str),
+
+  /// Catch instances of anyhow::Error.
+  AnyhowError(anyhow::Error),
+}
+
+impl Error for InternalError {}
+
+impl Display for InternalError {
+  fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+    match self {
+      InternalError::VisitorCookieError(reason) => write!(f, "Visitor cookie error: {:?}", reason),
+      InternalError::VisitorCookieMissingField(field) => write!(f, "Visitor cookie missing field: {}", field),
+      InternalError::AnyhowError(err) => write!(f, "Anyhow error: {}", err),
+    }
+  }
+}
+
+impl From<anyhow::Error> for InternalError {
+  fn from(err: anyhow::Error) -> Self {
+    InternalError::AnyhowError(err)
+  }
+}

crates/service/web/storyteller_web/src/error/mod.rs

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

crates/service/web/storyteller_web/src/http_server/cookies/anonymous_visitor_tracking/avt_cookie_manager.rs

@@ -4,12 +4,12 @@ use actix_web::HttpRequest;
 use anyhow::anyhow;
 use log::warn;
 
+use crate::error::internal_error::InternalError;
+use crate::http_server::cookies::anonymous_visitor_tracking::avt_cookie_payload::AvtCookiePayload;
 use cookies::jwt_signer::JwtSigner;
 use errors::AnyhowResult;
 use tokens::tokens::anonymous_visitor_tracking::AnonymousVisitorTrackingToken;
 
-use crate::http_server::cookies::anonymous_visitor_tracking::avt_cookie_payload::AvtCookiePayload;
-
 const VISITOR_COOKIE_NAME : &str = "visitor";
 
 /// Handle "anonymous visitor tracking" cookies.
@@ -70,7 +70,7 @@ impl AvtCookieManager {
     Ok(payload)
   }
 
-  pub fn decode_cookie_payload_from_request(&self, request: &HttpRequest) -> AnyhowResult<Option<AvtCookiePayload>> {
+  pub fn decode_cookie_payload_from_request(&self, request: &HttpRequest) -> Result<Option<AvtCookiePayload>, InternalError> {
     let cookie = match request.cookie(VISITOR_COOKIE_NAME) {
       None => return Ok(None),
       Some(cookie) => cookie,
@@ -79,7 +79,7 @@ impl AvtCookieManager {
     match self.decode_cookie_payload(&cookie) {
       Err(e) => {
         warn!("Visitor cookie decode error: {:?}", e);
-        Err(anyhow!("Could not decode visitor cookie: {:?}", e))
+        Err(InternalError::VisitorCookieError(e.to_string()))
       },
       Ok(payload) => Ok(Some(payload)),
     }

crates/service/web/storyteller_web/src/http_server/cookies/anonymous_visitor_tracking/avt_cookie_payload.rs

@@ -1,9 +1,7 @@
 use std::collections::BTreeMap;
 use std::str::FromStr;
 
-use anyhow::anyhow;
-
-use errors::AnyhowResult;
+use crate::error::internal_error::InternalError;
 use tokens::tokens::anonymous_visitor_tracking::AnonymousVisitorTrackingToken;
 
 /**
@@ -38,18 +36,19 @@ impl AvtCookiePayload {
     }
   }
 
-  pub fn from_map(map: BTreeMap<String, String>) -> AnyhowResult<Self> {
+  pub fn from_map(map: BTreeMap<String, String>) -> Result<Self, InternalError> {
     let avt_token = map.get("avt_token")
-        .ok_or(anyhow!("avt_token not present"))?
-        .to_string();
+        .ok_or_else(|| InternalError::VisitorCookieMissingField("avt_token"))?;
 
     let cookie_version = map
         .get("cookie_version")
-        .ok_or(anyhow!("avt_token not present"))?;
+        .ok_or_else(|| InternalError::VisitorCookieMissingField("cookie_version"))?;
 
-    let avt_token = AnonymousVisitorTrackingToken::new_from_str(&avt_token);
+    let avt_token = AnonymousVisitorTrackingToken::new_from_str(avt_token);
 
-    let cookie_version = u32::from_str(cookie_version)?;
+    let cookie_version = u32::from_str(cookie_version)
+        .map_err(|e| InternalError::VisitorCookieError(
+          format!("invalid integer for cookie_version: {:?}, version: {}", e, cookie_version)))?;
 
     Ok(AvtCookiePayload {
       avt_token,

crates/service/web/storyteller_web/src/main.rs

@@ -92,6 +92,7 @@ use crate::util::troll_user_bans::troll_user_ban_list::TrollUserBanList;
 
 pub mod billing;
 pub mod configs;
+pub mod error;
 pub mod http_server;
 pub mod state;
 pub mod threads;

frontend/apps/editor3d/app/src/Helpers/CanvasHelpers.ts

@@ -13,3 +13,17 @@ export const normalizeCanvas = (canvas: HTMLCanvasElement, width: number, height
   ctx.drawImage(canvas, 0, 0, width, height);
   return newCanvas;
 }
+
+export const drawAlphaMask = (canvas: OffscreenCanvas, width: number, height: number) => {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to get canvas context");
+  }
+
+  // Fill the entire screen with black and composite to keep non-transparent pixels
+  ctx.save();
+  ctx.globalCompositeOperation = "source-in";
+  ctx.fillStyle = "black";
+  ctx.fillRect(0, 0, width, height);
+  ctx.restore();
+}

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

@@ -154,6 +154,9 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
         url,
         mediaToken: mediaId || "",
       };
+
+      // Add it to state history
+      useEditStore.getState().addHistoryImageBundle({ images: [baseImage] });
       useEditStore.getState().setBaseImageInfo(baseImage);
 
       // Close gallery modal and lightbox if open

frontend/apps/editor3d/app/src/pages/PageEdit/HistoryStack.tsx

@@ -1,11 +1,19 @@
 import { Button } from "@storyteller/ui-button";
 import { useImageEditCompleteEvent } from "@storyteller/tauri-events";
-import { faClockRotateLeft, faTrash, faTrashXmark, faXmark } from "@fortawesome/pro-solid-svg-icons";
-import { useRef, useState } from "react";
+import {
+  faClockRotateLeft,
+  faTrash,
+  faTrashXmark,
+  faXmark,
+} from "@fortawesome/pro-solid-svg-icons";
+import { Fragment, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { BaseSelectorImage } from "./BaseImageSelector";
 import { Tooltip } from "@storyteller/ui-tooltip";
-import { isActionReminderOpen, showActionReminder } from "@storyteller/ui-action-reminder-modal";
+import {
+  isActionReminderOpen,
+  showActionReminder,
+} from "@storyteller/ui-action-reminder-modal";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export interface ImageBundle {
@@ -15,21 +23,18 @@ export interface ImageBundle {
 interface HistoryStackProps {
   onClear: () => void;
   onImageSelect?: (image: BaseSelectorImage) => void;
-  startingBundles: ImageBundle[];
+  imageBundles: ImageBundle[];
+  onNewImageBundle?: (newBundle: ImageBundle) => void;
+  selectedImageToken?: string;
 }
 
 export const HistoryStack = ({
   onClear,
   onImageSelect = () => { },
-  startingBundles = [],
+  imageBundles,
+  onNewImageBundle = () => { },
+  selectedImageToken
 }: HistoryStackProps) => {
-  const [imageBundles, setImageBundles] =
-    useState<ImageBundle[]>(startingBundles);
-  const [selectedImageToken, setSelectedImageToken] = useState<string | null>(
-    startingBundles.length > 0 && startingBundles[0].images.length > 0
-      ? startingBundles[0].images[0].mediaToken
-      : null,
-  );
   useImageEditCompleteEvent(async (event) => {
     const newBundle: ImageBundle = {
       images: event.edited_images.map(
@@ -41,12 +46,7 @@ export const HistoryStack = ({
       ),
     };
 
-    setImageBundles([...imageBundles, newBundle]);
-    const newlySelected = newBundle.images[0];
-    if (newlySelected) {
-      setSelectedImageToken(newlySelected.mediaToken);
-      onImageSelect(newlySelected);
-    }
+    onNewImageBundle(newBundle);
   });
 
   // This is used to force image reloads in different sessions
@@ -54,27 +54,23 @@ export const HistoryStack = ({
   const sessionRandBuster = useRef(Math.random());
 
   const handleClear = () => {
-    setImageBundles(startingBundles);
-    setSelectedImageToken(null);
     onClear();
   };
 
   return (
-    <div className="max-h-1/2 h-auto w-20 overflow-y-auto rounded-lg">
-      <div className="flex glass rounded-lg flex-col-reverse items-center justify-center gap-2 p-1">
+    <div className="h-auto w-20 rounded-lg">
+      <div className={"glass max-h-[50vh] flex flex-col-reverse items-center justify-center gap-2 overflow-y-auto rounded-lg p-1.5"}>
         {imageBundles.map((bundle, index) => (
-          <>
-            {index < imageBundles.length - 1 && <hr className="h-0.5 w-3/4 rounded-md border-none bg-white/10" />}
-            {bundle.images.map((image, imgIndex) => (
+          <Fragment key={index}>
+            {bundle.images.map((image) => (
               <Button
-                key={imgIndex}
+                key={image.mediaToken}
                 className={twMerge(
-                  "aspect-square relative h-full w-full border-2 bg-transparent p-0 m-1 hover:bg-transparent hover:opacity-80",
+                  "relative aspect-square h-full w-full border-2 bg-transparent p-0 hover:bg-transparent hover:opacity-80",
                   selectedImageToken === image.mediaToken &&
                   "border-primary hover:opacity-100",
                 )}
                 onClick={() => {
-                  setSelectedImageToken(image.mediaToken);
                   onImageSelect(image);
                 }}
               >
@@ -87,35 +83,54 @@ export const HistoryStack = ({
                 />
               </Button>
             ))}
-          </>
+            {index < imageBundles.length - 1 && (
+              <hr className="min-h-0.5 h-0.5 w-3/4 rounded-md border-none bg-white/10" key={"hr" + index} />
+            )}
+          </Fragment>
         ))}
-        <FontAwesomeIcon icon={faClockRotateLeft} className="p-1 text-gray-400" />
+        <FontAwesomeIcon
+          icon={faClockRotateLeft}
+          className="p-1 text-gray-400"
+        />
       </div>
-      <div className="glass mt-4 rounded-full border-red/50 border-2 size-12 flex justify-center items-center mx-auto">
-        <button
-          className="flex h-full w-full aspect-square rounded-full items-center justify-center text-white transition-colors hover:bg-red/50"
-          onClick={() =>
-            showActionReminder({
-              reminderType: "default",
-              title: "Reset All",
-              primaryActionIcon: faTrashXmark,
-              primaryActionBtnClassName: "bg-red hover:bg-red/80",
-              message: (
-                <p className="text-sm text-white/70">
-                  Are you sure you want to reset all? This will clear all your
-                  work and cannot be undone.
-                </p>
-              ),
-              primaryActionText: "Reset all",
-              onPrimaryAction: () => {
-                handleClear();
-                isActionReminderOpen.value = false;
-              },
-            })
-          }
-        >
-          <FontAwesomeIcon icon={faXmark} className="h-5 w-5 text-xl" />
-        </button>
+
+      <div className="mt-3 flex justify-center">
+        <div className="glass w-fit rounded-xl border-2 border-red/50 shadow-lg hover:border-red/80">
+          <div className="relative h-full">
+            <Tooltip
+              content="Reset All"
+              position="left"
+              closeOnClick={true}
+              className="ms-1 rounded-md bg-red px-3 py-1"
+              delay={100}
+            >
+              <button
+                className="flex h-10 w-10 items-center justify-center rounded-lg border-2 border-transparent text-white transition-colors hover:bg-red/50"
+                onClick={() =>
+                  showActionReminder({
+                    reminderType: "default",
+                    title: "Reset All",
+                    primaryActionIcon: faTrashXmark,
+                    primaryActionBtnClassName: "bg-red hover:bg-red/80",
+                    message: (
+                      <p className="text-sm text-white/70">
+                        Are you sure you want to reset all? This will clear all
+                        your work and cannot be undone.
+                      </p>
+                    ),
+                    primaryActionText: "Reset all",
+                    onPrimaryAction: () => {
+                      handleClear();
+                      isActionReminderOpen.value = false;
+                    },
+                  })
+                }
+              >
+                <FontAwesomeIcon icon={faXmark} className="h-5 w-5 text-xl" />
+              </button>
+            </Tooltip>
+          </div>
+        </div>
       </div>
     </div>
   );

frontend/apps/editor3d/app/src/pages/PageEdit/PageEdit.tsx

@@ -10,7 +10,7 @@ import { useUndoRedoHotkeys } from "../PageDraw/hooks/useUndoRedoHotkeys";
 import PromptEditor from "./PromptEditor/PromptEditor";
 import { ActiveEditTool, useEditStore } from "./stores/EditState";
 import { EditPaintSurface } from "./EditPaintSurface";
-import { normalizeCanvas } from "../../Helpers/CanvasHelpers";
+import { drawAlphaMask, normalizeCanvas } from "../../Helpers/CanvasHelpers";
 import { BaseImageSelector, BaseSelectorImage } from "./BaseImageSelector";
 import DrawToolControlBar from "./DrawToolControlBar";
 import {
@@ -27,7 +27,7 @@ const PAGE_ID: ModelPage = ModelPage.ImageEditor;
 const PageEdit = () => {
   //useStateSceneLoader();
 
-  const selectedImageModel : ImageModel | undefined = getSelectedImageModel(PAGE_ID);
+  const selectedImageModel: ImageModel | undefined = getSelectedImageModel(PAGE_ID);
 
   // State for canvas dimensions
   const canvasWidth = useRef<number>(1024);
@@ -46,6 +46,8 @@ const PageEdit = () => {
 
   // Use the Zustand store
   const store = useEditStore();
+  const addHistoryImageBundle = useEditStore((state) => state.addHistoryImageBundle);
+  const historyImageBundles = useEditStore((state) => state.historyImageBundles)
 
   // Pass store actions directly as callbacks
   useDeleteHotkeys({ onDelete: store.deleteSelectedItems });
@@ -154,18 +156,6 @@ const PageEdit = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Auto-fit the canvas when base image is loaded
-  useEffect(() => {
-    if (!store.baseImageBitmap) {
-      console.log("No base image bitmap available, skipping auto-fit");
-      return;
-    }
-
-    // When baseImageBitmap changes from null to an actual image, call onFitPressed
-    // Use a slight delay to ensure the image dimensions are properly loaded
-    onFitPressed();
-  }, [onFitPressed, store.baseImageBitmap]);
-
   // Create a function to use the left layer ref and download the bitmap from it
   const getMaskArrayBuffer = async (): Promise<Uint8Array> => {
     if (
@@ -197,6 +187,10 @@ const PageEdit = () => {
       rect.height(),
     );
 
+    // Convert colored canvas to alpha mask
+    // NOTE: This isn't needed because the tauri backend uses the alpha channel anyway
+    // drawAlphaMask(fittedCanvas, rect.width(), rect.height());
+
     const blob = await fittedCanvas.convertToBlob({ type: "image/png" });
     const arrayBuffer = await blob.arrayBuffer();
 
@@ -247,11 +241,14 @@ const PageEdit = () => {
   //const supportsMaskedInpainting = modelConfig?.tags?.includes(ModelTag.MaskedInpainting) ?? false;
   const supportsMaskedInpainting = selectedImageModel?.usesInpaintingMask ?? false;
 
-  if (!supportsMaskedInpainting && (store.activeTool !== "select" || store.lineNodes.length > 0)) {
-    // TODO: Implement a new mode for unsupported masking and hide the nodes layer instead of clearing
-    store.setActiveTool("select");
-    store.clearLineNodes();
-  }
+  useEffect(() => {
+    if (!supportsMaskedInpainting && (store.activeTool !== "select" || store.lineNodes.length > 0)) {
+      // TODO: Implement a new mode for unsupported masking and hide the nodes layer instead of clearing
+      store.setActiveTool("select");
+      store.clearLineNodes();
+    }
+  }, [store, supportsMaskedInpainting]);
+
 
   /*
     *
@@ -273,6 +270,7 @@ const PageEdit = () => {
       >
         <BaseImageSelector
           onImageSelect={(image: BaseSelectorImage) => {
+            addHistoryImageBundle({ images: [image] });
             store.setBaseImageInfo(image);
           }}
           showLoading={
@@ -305,11 +303,13 @@ const PageEdit = () => {
           onClear={() => {
             store.RESET();
           }}
-          startingBundles={[{ images: [store.baseImageInfo] } as ImageBundle]}
+          imageBundles={historyImageBundles}
           onImageSelect={(baseImage) => {
             store.clearLineNodes();
             store.setBaseImageInfo(baseImage);
           }}
+          onNewImageBundle={addHistoryImageBundle}
+          selectedImageToken={store.baseImageInfo?.mediaToken}
         />
       </div>
       <div
@@ -374,7 +374,7 @@ const PageEdit = () => {
             }}
             //fillColor={store.fillColor}
             activeTool={store.activeTool}
-            brushColor={store.brushColor}
+            brushColor={"rgba(39, 187, 245, 0.54)"}
             brushSize={store.brushSize}
             onSelectionChange={setIsSelecting}
             stageRef={stageRef}

frontend/apps/editor3d/app/src/pages/PageEdit/stores/EditState.ts

@@ -3,6 +3,7 @@ import { LineNode, generateId } from "~/pages/PageDraw/stores/SceneState";
 import { Node } from "~/pages/PageDraw/Node";
 import { BaseSelectorImage } from "../BaseImageSelector";
 import { FetchProxy } from "libs/tauri-utils/src/lib/FetchProxy";
+import { ImageBundle } from "../HistoryStack";
 
 export type ActiveEditTool = "select" | "edit" | "expand";
 export type EditOperation = "add" | "minus";
@@ -126,6 +127,11 @@ interface EditState {
   // pushHistory: () => void;
   // clearHistory: () => void;
   RESET: () => void;
+
+  // For the history stack
+  historyImageBundles: ImageBundle[];
+  clearHistoryImages: () => void;
+  addHistoryImageBundle: (bundle: ImageBundle) => void;
 }
 
 // Add a flag to prevent saving state during restoration
@@ -172,6 +178,9 @@ export const useEditStore = create<EditState>((set, get, store) => ({
   baseImageInfo: null,
   baseImageBitmap: null,
 
+  // History stack state
+  historyImageBundles: [],
+
   // Actions
   addNode: (node: Node) => {
     set((state) => {
@@ -1009,5 +1018,13 @@ export const useEditStore = create<EditState>((set, get, store) => ({
 
   RESET: () => {
     set(store.getInitialState());
-  }
+  },
+
+  clearHistoryImages: () => {
+    set({ historyImageBundles: [] });
+  },
+
+  addHistoryImageBundle(bundle) {
+    set((state) => ({ historyImageBundles: [...state.historyImageBundles, bundle] }));
+  },
 }));

frontend/libs/components/model-selector/src/lib/model-selectors-for-pages.tsx

@@ -48,11 +48,12 @@ export const STAGE_3D_PAGE_MODEL_LIST : ModelList = buildItems2(
 );
 
 export const IMAGE_EDITOR_PAGE_MODEL_LIST : ModelList = buildItems2(
-  [
-    ALL_MODELS_BY_ID.get("flux_pro_inpaint")!,
-    ALL_MODELS_BY_ID.get("flux_dev_juggernaut_inpaint")!,
-    ALL_MODELS_BY_ID.get("flux_pro_kontext_max")!,
-  ],
+  //[
+  //  ALL_MODELS_BY_ID.get("flux_pro_inpaint")!,
+  //  ALL_MODELS_BY_ID.get("flux_dev_juggernaut_inpaint")!,
+  //  ALL_MODELS_BY_ID.get("flux_pro_kontext_max")!,
+  //],
+  IMAGE_MODELS.filter((m) => m.canEditImages),
   <FontAwesomeIcon icon={faImage} className="h-4 w-4" />
 );
 
@@ -63,6 +64,8 @@ export const IMAGE_TO_VIDEO_PAGE_MODEL_LIST : ModelList = buildItems2(
 
 export const TEXT_TO_IMAGE_PAGE_MODEL_LIST : ModelList = buildItems2(
   IMAGE_MODELS
-    .filter((model) => !model.usesInpaintingMask), // We can't use masked inpainting models here
+    .filter((model) => !model.usesInpaintingMask) // We can't use masked inpainting models here
+    .filter((model) => model.id !== "flux_pro_kontext_max") // NB: Flux Pro Kontext Max requires an input image
+    ,
   <FontAwesomeIcon icon={faImage} className="h-4 w-4" />
 );

frontend/libs/model-list/src/lib/classes/ImageModel.ts

@@ -4,9 +4,15 @@ import { ModelCategory } from "../legacy/ModelConfig.js";
 import { ModelTag } from "./metadata/ModelTag.js";
 
 export class ImageModel extends Model {
+  // Maximum number of images that can be generated at once
   readonly maxGenerationCount: number;
+
+  // Default number of images that can be generated at once
   readonly defaultGenerationCount: number;
 
+  // Signals image editing models that focus on editing a single image.
+  readonly canEditImages: boolean;
+
   // For inpainting models, does it require sending a mask?
   readonly usesInpaintingMask: boolean;
 
@@ -21,6 +27,7 @@ export class ImageModel extends Model {
     selectorBadges: string[];
     maxGenerationCount: number;
     defaultGenerationCount: number;
+    canEditImages?: boolean;
     usesInpaintingMask?: boolean;
     tags?: ModelTag[];
   }) {
@@ -36,6 +43,7 @@ export class ImageModel extends Model {
     super(args);
     this.maxGenerationCount = args.maxGenerationCount;
     this.defaultGenerationCount = args.defaultGenerationCount;
+    this.canEditImages = args.canEditImages ?? false;
     this.usesInpaintingMask = args.usesInpaintingMask ?? false; 
   } 
 }

frontend/libs/model-list/src/lib/lists/ImageModels.ts

@@ -83,36 +83,39 @@ export const IMAGE_MODELS: ImageModel[] = [
     category: "image",
     creator: ModelCreator.BlackForestLabs,
     selectorName: "Flux Pro Kontext Max",
-    selectorDescription: "Fast and high-quality model",
+    selectorDescription: "Fast instructive editing",
     selectorBadges: ["20 sec."],
     maxGenerationCount: 4,
     defaultGenerationCount: 4,
+    canEditImages: true,
     tags: [ModelTag.InstructiveEdit],
   }),
   new ImageModel({
     id: "flux_pro_inpaint",
-    tauriId: "flux_pro_inpaint",
+    tauriId: "flux_pro_1",
     fullName: "Flux Pro Inpaint",
     category: "image",
     creator: ModelCreator.BlackForestLabs,
-    selectorName: "Flux Pro Inpaint",
-    selectorDescription: "Fast and high-quality model",
-    selectorBadges: ["20 sec."],
-    maxGenerationCount: 1,
-    defaultGenerationCount: 1,
+    selectorName: "Flux Pro",
+    selectorDescription: "Fast inpainting",
+    selectorBadges: ["30 sec."],
+    maxGenerationCount: 1, // NB: Fal only allows one image for some reason!
+    defaultGenerationCount: 1, // NB: Fal only allows one image for some reason!
+    canEditImages: true,
     usesInpaintingMask: true,
   }),
   new ImageModel({
     id: "flux_dev_juggernaut_inpaint",
-    tauriId: "flux_dev_juggernaut_inpaint",
+    tauriId: "flux_dev_juggernaut",
     fullName: "Flux Dev Juggernaut Inpaint",
     category: "image",
     creator: ModelCreator.BlackForestLabs,
-    selectorName: "Flux Dev Juggernaut Inpaint",
-    selectorDescription: "Fast and high-quality model",
-    selectorBadges: ["20 sec."],
+    selectorName: "Flux Dev Juggernaut",
+    selectorDescription: "Fast inpainting",
+    selectorBadges: ["15 sec."],
     maxGenerationCount: 4,
     defaultGenerationCount: 4,
+    canEditImages: true,
     usesInpaintingMask: true,
   }),
 ];