Use the new ArtCraft icon for the app icon and favicons

- Regenerate the desktop app icons (Windows, macOS, Store, Android,
  iOS) from the new angular ArtCraft mark in the website logo blue
- Replace favicon.ico, the 16/32 favicons, and the apple-touch icon
- Add the SVG icon as the primary favicon, same as the webapp

Cargo.lock

@@ -262,6 +262,7 @@ version = "0.0.1"
 dependencies = [
  "anyhow",
  "artcraft_api_defs",
+ "artcraft_client_identity",
  "backoff",
  "chrono",
  "cloudflare_errors",
@@ -282,6 +283,13 @@ dependencies = [
  "uuid_utils",
 ]
 
+[[package]]
+name = "artcraft_client_identity"
+version = "0.0.1"
+dependencies = [
+ "url",
+]
+
 [[package]]
 name = "artcraft_router"
 version = "0.0.1"
@@ -7018,6 +7026,7 @@ dependencies = [
 name = "tauri-plugin-http"
 version = "2.4.3"
 dependencies = [
+ "artcraft_client_identity",
  "bytes",
  "cookie_store 0.21.1",
  "data-url",

Cargo.toml

@@ -16,6 +16,7 @@ members = [
   "crates/api_clients/worldlabs_api_client",
   "crates/api_clients/worldlabs_consumer_client",
   "crates/desktop/artcraft",
+  "crates/lib/artcraft_client_identity",
   "crates/lib/browser_emulation",
   "crates/lib/build_metadata",
   "crates/lib/caching/memory_store",
@@ -49,6 +50,7 @@ publish = false
 [workspace.dependencies]
 artcraft_api_defs = { path = "crates/api_clients/artcraft/artcraft_api_defs" }
 artcraft_client = { path = "crates/api_clients/artcraft/artcraft_client" }
+artcraft_client_identity = { path = "crates/lib/artcraft_client_identity" }
 artcraft_router = { path = "crates/api_clients/artcraft/artcraft_router" }
 browser_emulation = { path = "crates/lib/browser_emulation" }
 cookie_store_wrapper = { path = "crates/lib/cookie_store_wrapper" }

_docs/dev_setup.md

@@ -9,21 +9,67 @@ To set up the ArtCraft development environment,  install the following:
 
 1. [Install Rust](https://doc.rust-lang.org/cargo/getting-started/installation.html).
 2. [Install npm](https://nodejs.org/en/download) or [nvm](https://github.com/nvm-sh/nvm). (Node version `v24.13.0` works at time of writing.) 
-3. [Install nx](https://nx.dev/docs/getting-started/installation). (Nx version `v22.4.5` works at time of writing.)
+3. The frontend's Nx and Vite dependencies are installed locally with npm; a global Nx installation is not required for the combined Unix launcher.
 4. [Install Tauri CLI](https://v2.tauri.app/reference/cli/). (Version `tauri-cli 2.10.0` works at time of writing.)
 
-An easy way to get started with running the app in development is to run the two commands (in separate terminals):
-
 **Mac and Linux Development** 
 
 ```bash
-# Run the frontend dev server
-./script/artcraft/unix_frontend_dev.sh
+# Start the frontend and Rust/Tauri together in one terminal
+./script/artcraft/unix_dev.sh
 
-# Run the Tauri Rust application
-./script/artcraft/unix_rust_dev.sh
+# Optionally start the free-port search at another port
+ARTCRAFT_DEV_PORT=6200 ./script/artcraft/unix_dev.sh
 ```
 
+Use the combined launcher instead of starting the two legacy dev scripts. It
+works from any working directory when invoked by its path and installs frontend
+dependencies if the local Vite installation is missing. Node.js 20+ is required.
+
+The launcher binds Vite to `127.0.0.1`, starting at port **5193** and trying
+successive ports until one is available. It leaves existing listeners alone.
+Only after the real frontend socket is bound does it start Tauri with that exact
+`devUrl`. HTTP and the HMR websocket share the selected port; Rust communicates
+through native Tauri IPC and needs no separate HTTP port. Configuration overrides
+are passed in memory, without changing the checked-in Tauri config.
+
+The native HTTP bridge normalizes loopback development origins for first-party
+API requests so an automatically selected port does not break login or media
+loading. See the [desktop session regression checks](../docs/desktop-session-regression.md)
+when changing ports, the launcher, or authentication.
+
+JavaScript, TypeScript, React, and CSS changes use Vite hot reload; compatible
+React component edits use Fast Refresh. Changes that cannot be hot-replaced
+reload the page. Rust changes use `cargo tauri dev`'s automatic **rebuild and app
+restart**, including dependent workspace crates. SQLx metadata and SQLite
+migrations are also watched. Rust reload is a process restart, so it does not
+preserve unsaved in-memory app state. See [Tauri's watch behavior](https://v2.tauri.app/develop/#reacting-to-source-code-changes).
+
+After startup, a Vite configuration restart must reuse the chosen port or report
+an error; it cannot silently switch to another port while Tauri uses an old URL.
+Ctrl-C stops this session's frontend, Rust watcher/compiler, and desktop app.
+If the Rust watcher exits, the launcher closes Vite and propagates the exit code.
+It never finds or terminates another app by name or port.
+
+The launcher retains the existing Unix defaults for `VITE_ENVIRONMENT_TYPE`,
+`SQLX_OFFLINE`, `RUSTFLAGS`, and the Linux WebKit workarounds. Explicit environment
+overrides are preserved. It uses the normal Artcraft app data and Cargo target
+directory; port separation does not create an isolated account/data profile, and
+concurrent Rust builds can wait on Cargo's build lock.
+
+To verify the launcher without compiling Rust or opening a desktop window:
+
+```bash
+node --test frontend/scripts/unix-dev.test.mjs
+```
+
+The tests use real Vite listeners and HMR, with a test-owned fake Cargo process
+tree. They cover occupied ports, simultaneous launches, React edits, shutdown,
+Rust-process failure, and watcher arguments. To verify native Rust reload, run
+the launcher, wait for the desktop window, make a Rust source edit, and check for
+a rebuild/restart in the same terminal. Frontend edits should update the webview
+without restarting the Rust process.
+
 **Windows Development**
 
 ```powershell

crates/api_clients/artcraft/artcraft_client/Cargo.toml

@@ -19,6 +19,7 @@ path = "src/lib.rs"
 
 # Internal
 artcraft_api_defs.workspace = true
+artcraft_client_identity.workspace = true
 cloudflare_errors.workspace = true
 enums.workspace = true
 errors.workspace = true

crates/api_clients/artcraft/artcraft_client/src/endpoints/media_files/get_media_file.rs

@@ -29,7 +29,7 @@ pub async fn get_media_file(api_host: &ApiHost, media_file_token: &MediaFileToke
 
   debug!("Requesting {:?}", &url);
 
-  let response = http_get_anonymous(url).await?;
+  let response = http_get_anonymous(api_host, url).await?;
   let response = filter_bad_response(response).await?;
   let response_body = &response.text().await
       .map_err(|err| StorytellerError::Api(ApiError::from(err)))?;

crates/api_clients/artcraft/artcraft_client/src/endpoints/media_files/legacy_upload_media_file_from_file.rs

@@ -3,7 +3,8 @@ use crate::error::api_error::ApiError;
 use crate::error::client_error::ClientError;
 use crate::error::storyteller_error::StorytellerError;
 use crate::utils::api_host::ApiHost;
-use crate::utils::constants::{APPLICATION_JSON, USER_AGENT};
+use crate::utils::constants::APPLICATION_JSON;
+use crate::utils::storyteller_client_builder::storyteller_client_builder;
 use crate::utils::filter_bad_response::filter_bad_response;
 use crate::utils::http_get_anonymous::http_get_anonymous;
 use chrono::{DateTime, Utc};
@@ -11,7 +12,6 @@ use enums::common::generation_provider::GenerationProvider;
 use uuid_utils::uuid::generate_random_uuid;
 use log::debug;
 use reqwest::multipart::{Form, Part};
-use reqwest::Client;
 use serde_derive::{Deserialize, Serialize};
 use std::path::Path;
 use tokens::tokens::batch_generations::BatchGenerationToken;
@@ -56,8 +56,7 @@ pub async fn legacy_upload_media_file_from_file<P: AsRef<Path>>(
 
   //let mut file = File::open(path)?;
 
-  let client = Client::builder()
-      .gzip(true)
+  let client = storyteller_client_builder(args.api_host)
       .build()
       .map_err(|err| StorytellerError::Client(ClientError::from(err)))?;
 
@@ -86,7 +85,6 @@ pub async fn legacy_upload_media_file_from_file<P: AsRef<Path>>(
   }
 
   let mut request_builder = client.post(url)
-      .header("User-Agent", USER_AGENT)
       .header("Accept", APPLICATION_JSON);
   
   if let Some(creds) = args.maybe_creds {

crates/api_clients/artcraft/artcraft_client/src/endpoints/media_files/upload_image_media_file_from_bytes.rs

@@ -3,7 +3,8 @@ use crate::error::api_error::ApiError;
 use crate::error::client_error::ClientError;
 use crate::error::storyteller_error::StorytellerError;
 use crate::utils::api_host::ApiHost;
-use crate::utils::constants::{APPLICATION_JSON, USER_AGENT};
+use crate::utils::constants::APPLICATION_JSON;
+use crate::utils::storyteller_client_builder::storyteller_client_builder;
 use crate::utils::filter_bad_response::filter_bad_response;
 use crate::utils::http_get_anonymous::http_get_anonymous;
 use enums::common::generation_provider::GenerationProvider;
@@ -11,7 +12,6 @@ use chrono::{DateTime, Utc};
 use uuid_utils::uuid::generate_random_uuid;
 use log::debug;
 use reqwest::multipart::{Form, Part};
-use reqwest::Client;
 use serde_derive::{Deserialize, Serialize};
 use std::fs::File;
 use std::io::Read;
@@ -72,8 +72,7 @@ pub async fn upload_image_media_file_from_bytes(
 
   debug!("Requesting {:?}", &url);
 
-  let client = Client::builder()
-      .gzip(true)
+  let client = storyteller_client_builder(args.api_host)
       .build()
       .map_err(|err| StorytellerError::Client(ClientError::from(err)))?;
 
@@ -95,7 +94,6 @@ pub async fn upload_image_media_file_from_bytes(
   }
 
   let mut request_builder = client.post(url)
-      .header("User-Agent", USER_AGENT)
       .header("Accept", APPLICATION_JSON);
   
   if let Some(creds) = args.maybe_creds {

crates/api_clients/artcraft/artcraft_client/src/endpoints/media_files/upload_image_media_file_from_file.rs

@@ -3,7 +3,8 @@ use crate::error::api_error::ApiError;
 use crate::error::client_error::ClientError;
 use crate::error::storyteller_error::StorytellerError;
 use crate::utils::api_host::ApiHost;
-use crate::utils::constants::{APPLICATION_JSON, USER_AGENT};
+use crate::utils::constants::APPLICATION_JSON;
+use crate::utils::storyteller_client_builder::storyteller_client_builder;
 use crate::utils::filter_bad_response::filter_bad_response;
 use crate::utils::http_get_anonymous::http_get_anonymous;
 use chrono::{DateTime, Utc};
@@ -11,7 +12,6 @@ use enums::common::generation_provider::GenerationProvider;
 use uuid_utils::uuid::generate_random_uuid;
 use log::debug;
 use reqwest::multipart::{Form, Part};
-use reqwest::Client;
 use serde_derive::{Deserialize, Serialize};
 use std::path::Path;
 use tokens::tokens::batch_generations::BatchGenerationToken;
@@ -65,8 +65,7 @@ pub async fn upload_image_media_file_from_file_with_idempotency_token<P: AsRef<P
 
   //let mut file = File::open(path)?;
 
-  let client = Client::builder()
-      .gzip(true)
+  let client = storyteller_client_builder(args.api_host)
       .build()
       .map_err(|err| StorytellerError::Client(ClientError::from(err)))?;
 
@@ -95,7 +94,6 @@ pub async fn upload_image_media_file_from_file_with_idempotency_token<P: AsRef<P
   }
 
   let mut request_builder = client.post(url)
-      .header("User-Agent", USER_AGENT)
       .header("Accept", APPLICATION_JSON);
   
   if let Some(creds) = args.maybe_creds {

crates/api_clients/artcraft/artcraft_client/src/endpoints/media_files/upload_new_engine_asset_from_file.rs

@@ -1,7 +1,8 @@
 use crate::credentials::storyteller_credential_set::StorytellerCredentialSet;
 use crate::error::api_error::ApiError;
 use crate::utils::api_host::ApiHost;
-use crate::utils::constants::{APPLICATION_JSON, USER_AGENT};
+use crate::utils::constants::APPLICATION_JSON;
+use crate::utils::storyteller_client_builder::storyteller_client_builder;
 use crate::utils::filter_bad_response::filter_bad_response;
 use crate::utils::http_get_anonymous::http_get_anonymous;
 use enums::common::generation_provider::GenerationProvider;
@@ -9,7 +10,6 @@ use chrono::{DateTime, Utc};
 use uuid_utils::uuid::generate_random_uuid;
 use log::debug;
 use reqwest::multipart::{Form, Part};
-use reqwest::Client;
 use serde_derive::{Deserialize, Serialize};
 use std::path::Path;
 use tokens::tokens::batch_generations::BatchGenerationToken;
@@ -32,8 +32,7 @@ pub async fn upload_new_engine_asset_from_file<P: AsRef<Path>>(
 
   debug!("Requesting {:?}", &url);
 
-  let client = Client::builder()
-      .gzip(true)
+  let client = storyteller_client_builder(api_host)
       .build()?;
 
   let file_bytes = std::fs::read(path.as_ref())?;
@@ -49,7 +48,6 @@ pub async fn upload_new_engine_asset_from_file<P: AsRef<Path>>(
   }
 
   let mut request_builder = client.post(url)
-      .header("User-Agent", USER_AGENT)
       .header("Accept", APPLICATION_JSON);
   
   if let Some(creds) = maybe_creds {

crates/api_clients/artcraft/artcraft_client/src/endpoints/media_files/upload_video_media_file_from_file.rs

@@ -1,7 +1,8 @@
 use crate::credentials::storyteller_credential_set::StorytellerCredentialSet;
 use crate::error::api_error::ApiError;
 use crate::utils::api_host::ApiHost;
-use crate::utils::constants::{APPLICATION_JSON, USER_AGENT};
+use crate::utils::constants::APPLICATION_JSON;
+use crate::utils::storyteller_client_builder::storyteller_client_builder;
 use crate::utils::filter_bad_response::filter_bad_response;
 use crate::utils::http_get_anonymous::http_get_anonymous;
 use enums::common::generation_provider::GenerationProvider;
@@ -9,7 +10,6 @@ use chrono::{DateTime, Utc};
 use uuid_utils::uuid::generate_random_uuid;
 use log::debug;
 use reqwest::multipart::{Form, Part};
-use reqwest::Client;
 use serde_derive::{Deserialize, Serialize};
 use std::path::Path;
 use tokens::tokens::batch_generations::BatchGenerationToken;
@@ -58,8 +58,7 @@ pub async fn upload_video_media_file_from_file<P: AsRef<Path>>(
 
   debug!("Requesting {:?}", &url);
 
-  let client = Client::builder()
-      .gzip(true)
+  let client = storyteller_client_builder(args.api_host)
       .build()?;
 
   let file_bytes = std::fs::read(args.path.as_ref())?;
@@ -78,7 +77,6 @@ pub async fn upload_video_media_file_from_file<P: AsRef<Path>>(
   }
 
   let mut request_builder = client.post(url)
-      .header("User-Agent", USER_AGENT)
       .header("Accept", APPLICATION_JSON);
   
   if let Some(creds) = args.maybe_creds {

crates/api_clients/artcraft/artcraft_client/src/utils/api_host.rs

@@ -1,4 +1,6 @@
 
+use artcraft_client_identity::origins::{ARTCRAFT_DESKTOP_DEVELOPMENT_ORIGIN, ARTCRAFT_DESKTOP_ORIGIN};
+
 const HTTP_SCHEME: &str = "http";
 
 const HTTPS_SCHEME: &str = "https";
@@ -27,6 +29,15 @@ impl ApiHost {
     }
   }
   
+  /// The `Origin` the desktop client declares to this API.
+  pub fn request_origin(&self) -> &'static str {
+    match self {
+      ApiHost::Storyteller => ARTCRAFT_DESKTOP_ORIGIN,
+      ApiHost::FakeYou => ARTCRAFT_DESKTOP_ORIGIN,
+      ApiHost::Localhost { .. } => ARTCRAFT_DESKTOP_DEVELOPMENT_ORIGIN,
+    }
+  }
+
   pub fn scheme(&self) -> &'static str {
     match self {
       ApiHost::Storyteller => HTTPS_SCHEME,

crates/api_clients/artcraft/artcraft_client/src/utils/basic_json_delete_request.rs

@@ -3,10 +3,10 @@ use crate::error::api_error::ApiError;
 use crate::error::client_error::ClientError;
 use crate::error::storyteller_error::StorytellerError;
 use crate::utils::api_host::ApiHost;
-use crate::utils::constants::{APPLICATION_JSON, USER_AGENT};
+use crate::utils::constants::APPLICATION_JSON;
+use crate::utils::storyteller_client_builder::storyteller_client_builder;
 use crate::utils::filter_bad_response::filter_bad_response;
 use log::{debug, info};
-use reqwest::Client;
 use serde::de::DeserializeOwned;
 use serde::{Deserialize, Serialize};
 
@@ -21,13 +21,11 @@ pub async fn basic_json_delete_request<Req: Serialize, Res: DeserializeOwned>(
 
   info!("DELETE {:?}", &url);
 
-  let client = Client::builder()
-      .gzip(true)
+  let client = storyteller_client_builder(api_host)
       .build()
       .map_err(|err| StorytellerError::Client(ClientError::from(err)))?;
 
   let mut request_builder = client.delete(url)
-      .header("User-Agent", USER_AGENT)
       .header("Accept", APPLICATION_JSON)
       .header("Content-Type", APPLICATION_JSON);
 

crates/api_clients/artcraft/artcraft_client/src/utils/basic_json_get_request.rs

@@ -3,10 +3,10 @@ use crate::error::api_error::ApiError;
 use crate::error::client_error::ClientError;
 use crate::error::storyteller_error::StorytellerError;
 use crate::utils::api_host::ApiHost;
-use crate::utils::constants::{APPLICATION_JSON, USER_AGENT};
+use crate::utils::constants::APPLICATION_JSON;
+use crate::utils::storyteller_client_builder::storyteller_client_builder;
 use crate::utils::filter_bad_response::filter_bad_response;
 use log::{debug, info};
-use reqwest::Client;
 use serde::de::DeserializeOwned;
 use serde::{Deserialize, Serialize};
 
@@ -20,13 +20,11 @@ pub async fn basic_json_get_request<Res: DeserializeOwned>(
 
   debug!("Requesting {:?}", &url);
 
-  let client = Client::builder()
-      .gzip(true)
+  let client = storyteller_client_builder(api_host)
       .build()
       .map_err(|err| StorytellerError::Client(ClientError::from(err)))?;
 
   let mut request_builder = client.get(url)
-      .header("User-Agent", USER_AGENT)
       .header("Accept", APPLICATION_JSON);
 
   if let Some(creds) = maybe_creds {

crates/api_clients/artcraft/artcraft_client/src/utils/basic_json_post_request.rs

@@ -3,10 +3,10 @@ use crate::error::api_error::ApiError;
 use crate::error::client_error::ClientError;
 use crate::error::storyteller_error::StorytellerError;
 use crate::utils::api_host::ApiHost;
-use crate::utils::constants::{APPLICATION_JSON, USER_AGENT};
+use crate::utils::constants::APPLICATION_JSON;
+use crate::utils::storyteller_client_builder::storyteller_client_builder;
 use crate::utils::filter_bad_response::filter_bad_response;
 use log::{debug, info};
-use reqwest::Client;
 use serde::de::DeserializeOwned;
 use serde::{Deserialize, Serialize};
 
@@ -30,13 +30,11 @@ pub async fn basic_json_post_request<Req: Serialize, Res: DeserializeOwned>(
     info!("Requesting {:?}", &url);
   }
 
-  let client = Client::builder()
-      .gzip(true)
+  let client = storyteller_client_builder(api_host)
       .build()
       .map_err(|err| StorytellerError::Client(ClientError::from(err)))?;
 
   let mut request_builder = client.post(url)
-      .header("User-Agent", USER_AGENT)
       .header("Accept", APPLICATION_JSON)
       .header("Content-Type", APPLICATION_JSON);
 

crates/api_clients/artcraft/artcraft_client/src/utils/basic_query_string_post_request.rs

@@ -3,11 +3,11 @@ use crate::error::api_error::ApiError;
 use crate::error::client_error::ClientError;
 use crate::error::storyteller_error::StorytellerError;
 use crate::utils::api_host::ApiHost;
-use crate::utils::constants::{APPLICATION_JSON, USER_AGENT};
+use crate::utils::constants::APPLICATION_JSON;
+use crate::utils::storyteller_client_builder::storyteller_client_builder;
 use crate::utils::filter_bad_response::filter_bad_response;
 use errors::AnyhowResult;
 use log::{debug, info};
-use reqwest::Client;
 use serde::de::DeserializeOwned;
 use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
@@ -26,13 +26,11 @@ pub async fn basic_query_string_post_request<Res: DeserializeOwned>(
 
   debug!("Requesting {:?}", &url);
 
-  let client = Client::builder()
-      .gzip(true)
+  let client = storyteller_client_builder(api_host)
       .build()
       .map_err(|err| StorytellerError::Client(ClientError::from(err)))?;
 
   let mut request_builder = client.post(url)
-      .header("User-Agent", USER_AGENT)
       .header("Accept", APPLICATION_JSON);
 
   if let Some(creds) = maybe_creds {

crates/api_clients/artcraft/artcraft_client/src/utils/constants.rs

@@ -1,4 +1 @@
-
-pub const USER_AGENT: &str = "storyteller-client/1.0";
-
 pub const APPLICATION_JSON : &str = "application/json";

crates/api_clients/artcraft/artcraft_client/src/utils/http_get_anonymous.rs

@@ -1,14 +1,12 @@
 use crate::error::api_error::ApiError;
-use reqwest::Client;
-const USER_AGENT: &str = "storyteller-client/1.0";
+use crate::utils::api_host::ApiHost;
+use crate::utils::storyteller_client_builder::storyteller_client_builder;
 
-pub async fn http_get_anonymous(url: String) -> Result<reqwest::Response, ApiError> {
-  let client = Client::builder()
-      .gzip(true)
+pub async fn http_get_anonymous(api_host: &ApiHost, url: String) -> Result<reqwest::Response, ApiError> {
+  let client = storyteller_client_builder(api_host)
       .build()?;
 
   let response = client.get(url)
-      .header("User-Agent", USER_AGENT)
       .header("Accept", "application/json")
       //.header("Accept-Encoding", "gzip, deflate, br")
       .send()

crates/api_clients/artcraft/artcraft_client/src/utils/login_challenge_client.rs

@@ -7,7 +7,7 @@ use serde::de::DeserializeOwned;
 use url::Url;
 
 use crate::utils::api_host::ApiHost;
-use crate::utils::constants::USER_AGENT;
+use crate::utils::storyteller_client_builder::storyteller_client_builder;
 
 /// Native transport for the session bridge. No request/response bodies, cookies,
 /// or challenge credentials are logged, even at debug level. Never follows redirects.
@@ -25,14 +25,13 @@ pub struct LoginChallengeClientError {
 
 impl LoginChallengeClient {
   pub fn new(api_host: &ApiHost) -> Result<Self, LoginChallengeClientError> {
-    let mut builder = Client::builder();
+    let mut builder = storyteller_client_builder(api_host);
     if matches!(api_host, ApiHost::Localhost { .. }) {
       builder = builder.no_proxy();
     }
     let client = builder
       .timeout(Duration::from_secs(15))
       .redirect(reqwest::redirect::Policy::none())
-      .user_agent(USER_AGENT)
       .build()
       .map_err(|_| LoginChallengeClientError::invalid("Unable to initialize login client"))?;
     Ok(Self {

crates/api_clients/artcraft/artcraft_client/src/utils/mod.rs

@@ -4,6 +4,7 @@ pub mod basic_json_post_request;
 pub (crate) mod basic_query_string_post_request;
 pub (crate) mod filter_bad_response;
 pub (crate) mod http_get_anonymous;
+pub (crate) mod storyteller_client_builder;
 pub mod api_host;
 pub mod constants;
 pub mod status_codes;

crates/api_clients/artcraft/artcraft_client/src/utils/storyteller_client_builder.rs

@@ -0,0 +1,17 @@
+use artcraft_client_identity::user_agents::ARTCRAFT_DESKTOP_USER_AGENT;
+use reqwest::header::{HeaderMap, HeaderValue, ORIGIN};
+use reqwest::{Client, ClientBuilder};
+
+use crate::utils::api_host::ApiHost;
+
+/// Every request to our API is built from this so the desktop client identifies itself
+/// consistently (`User-Agent` and `Origin`). Only use it for Storyteller / ArtCraft APIs.
+pub(crate) fn storyteller_client_builder(api_host: &ApiHost) -> ClientBuilder {
+  let mut headers = HeaderMap::new();
+  headers.insert(ORIGIN, HeaderValue::from_static(api_host.request_origin()));
+
+  Client::builder()
+    .user_agent(ARTCRAFT_DESKTOP_USER_AGENT)
+    .default_headers(headers)
+    .gzip(true)
+}

crates/desktop/artcraft/.taurignore

@@ -1,4 +1,5 @@
-# Don't restart the dev server on Rust changes
-crates/
-Cargo.toml
-Cargo.lock
+# Rust sources and Cargo manifests must remain watched for `cargo tauri dev`.
+# Vite owns frontend reloads; build artifacts must not trigger Rust rebuilds.
+target/
+node_modules/
+dist/

crates/lib/artcraft_client_identity/Cargo.toml

@@ -0,0 +1,17 @@
+[package]
+name = "artcraft_client_identity"
+edition = "2024"
+version = "0.0.1"
+publish = false
+
+[lib]
+name = "artcraft_client_identity"
+path = "src/lib.rs"
+
+[dependencies]
+
+# External
+url.workspace = true
+
+[dev-dependencies]
+# (None)

crates/lib/artcraft_client_identity/src/destination.rs

@@ -0,0 +1,166 @@
+use url::{Host, Url};
+
+use crate::origins::{ARTCRAFT_DESKTOP_DEVELOPMENT_ORIGIN, ARTCRAFT_DESKTOP_ORIGIN};
+use crate::third_party_provider::{ThirdPartyProvider, THIRD_PARTY_PROVIDERS};
+
+/// Hostnames of our deployed APIs (HTTPS only).
+const ARTCRAFT_API_HOSTNAMES: [&str; 3] = [
+  "api.storyteller.ai",
+  "api.getartcraft.com",
+  "api.fakeyou.com",
+];
+
+/// Domains we own. Subdomains match too (CDNs, uploads, websites).
+const ARTCRAFT_DOMAINS: [&str; 4] = [
+  "storyteller.ai",
+  "getartcraft.com",
+  "fakeyou.com",
+  "artcraft.ai",
+];
+
+/// Who a request is going to, which decides how the desktop app identifies itself.
+#[derive(Debug, PartialEq, Eq)]
+pub enum Destination {
+  /// Our HTTP API, deployed or running locally, and the `Origin` to declare to it.
+  ArtcraftApi { origin: &'static str },
+  /// Our other hosts: CDNs, uploads, websites.
+  ArtcraftHost,
+  /// A known third-party provider.
+  ThirdParty(&'static ThirdPartyProvider),
+  /// Anything else.
+  Unknown,
+}
+
+impl Destination {
+  pub fn classify(destination: &Url) -> Self {
+    if is_local_development_api(destination) {
+      return Self::ArtcraftApi { origin: ARTCRAFT_DESKTOP_DEVELOPMENT_ORIGIN };
+    }
+    let Some(host) = destination.host_str() else {
+      return Self::Unknown;
+    };
+    if destination.scheme() == "https" && ARTCRAFT_API_HOSTNAMES.contains(&host) {
+      return Self::ArtcraftApi { origin: ARTCRAFT_DESKTOP_ORIGIN };
+    }
+    if ARTCRAFT_DOMAINS.iter().any(|domain| is_domain_or_subdomain(host, domain)) {
+      return Self::ArtcraftHost;
+    }
+    THIRD_PARTY_PROVIDERS
+      .iter()
+      .find(|provider| provider.domains.iter().any(|domain| is_domain_or_subdomain(host, domain)))
+      .map_or(Self::Unknown, Self::ThirdParty)
+  }
+}
+
+fn is_local_development_api(destination: &Url) -> bool {
+  if !matches!(destination.scheme(), "http" | "https") {
+    return false;
+  }
+  match destination.host() {
+    Some(Host::Domain("localhost")) => true,
+    Some(Host::Ipv4(address)) => address.is_loopback(),
+    Some(Host::Ipv6(address)) => address.is_loopback(),
+    _ => false,
+  }
+}
+
+fn is_domain_or_subdomain(host: &str, domain: &str) -> bool {
+  host == domain
+    || host
+      .strip_suffix(domain)
+      .is_some_and(|prefix| prefix.ends_with('.'))
+}
+
+#[cfg(test)]
+mod tests {
+  use super::*;
+
+  mod artcraft {
+    use super::*;
+
+    #[test]
+    fn deployed_apis_get_desktop_origin() {
+      for destination in [
+        "https://api.storyteller.ai/v1/session",
+        "https://api.getartcraft.com/v1/session",
+        "https://api.fakeyou.com/v1/session",
+      ] {
+        assert_eq!(classify(destination), Destination::ArtcraftApi { origin: "https://desktop.getartcraft.com" });
+      }
+    }
+
+    #[test]
+    fn local_apis_get_development_origin() {
+      for destination in [
+        "http://localhost:12345/v1/session",
+        "https://localhost:12345/v1/session",
+        "http://127.0.0.1:12345/v1/session",
+        "http://[::1]:12345/v1/session",
+      ] {
+        assert_eq!(classify(destination), Destination::ArtcraftApi { origin: "http://localhost" });
+      }
+    }
+
+    #[test]
+    fn other_owned_hosts_are_not_apis() {
+      for destination in [
+        "https://cdn-2.fakeyou.com/media/a/b.png",
+        "https://cdn.storyteller.ai/media/a/b.png",
+        "https://style.storyteller.ai/",
+        "https://app.getartcraft.com/",
+        "https://getartcraft.com/",
+        "http://api.storyteller.ai/v1/session",
+      ] {
+        assert_eq!(classify(destination), Destination::ArtcraftHost, "{destination}");
+      }
+    }
+  }
+
+  mod third_party {
+    use super::*;
+
+    #[test]
+    fn providers_get_their_own_origins() {
+      for (destination, name, origin) in [
+        ("https://grok.com/rest/app-chat/conversations/new", "Grok", "https://grok.com"),
+        ("https://assets.grok.com/users/a/b.mp4", "Grok", "https://grok.com"),
+        ("https://imagine-public.x.ai/a.png", "Grok", "https://grok.com"),
+        ("https://www.midjourney.com/api/submit-jobs", "Midjourney", "https://www.midjourney.com"),
+        ("https://cdn.midjourney.com/a/0_0.png", "Midjourney", "https://www.midjourney.com"),
+        ("https://sora.chatgpt.com/backend/nf/create", "Sora", "https://sora.chatgpt.com"),
+        ("https://videos.openai.com/a.mp4", "Sora", "https://sora.chatgpt.com"),
+        ("https://chatgpt.com/backend-api/sentinel", "ChatGPT", "https://chatgpt.com"),
+        ("https://api.worldlabs.ai/api/v1/worlds", "World Labs", "https://marble.worldlabs.ai"),
+        ("https://static.kinovi.ai/a.png", "Kinovi", "https://kinovi.ai"),
+        ("https://static.seedance2-pro.com/materials/a.png", "Seedance 2 Pro", "https://seedance2-pro.com"),
+        ("https://v3b.fal.media/files/a.png", "fal", "https://fal.ai"),
+        ("https://console.gmicloud.ai/api", "GMI Cloud", "https://console.gmicloud.ai"),
+      ] {
+        let Destination::ThirdParty(provider) = classify(destination) else {
+          panic!("{destination} is not a third party");
+        };
+        assert_eq!((provider.name, provider.origin), (name, origin));
+      }
+    }
+
+    #[test]
+    fn lookalikes_and_others_are_unknown() {
+      for destination in [
+        "https://api.storyteller.ai.example.com/v1/session",
+        "https://notstoryteller.ai/",
+        "https://evilgrok.com/",
+        "https://grok.com.example.com/",
+        "https://www.gravatar.com/avatar/a",
+        "https://storage.googleapis.com/bucket/a.png",
+        "http://192.168.1.2:12345/v1/session",
+        "tauri://localhost",
+      ] {
+        assert_eq!(classify(destination), Destination::Unknown, "{destination}");
+      }
+    }
+  }
+
+  fn classify(destination: &str) -> Destination {
+    Destination::classify(&Url::parse(destination).unwrap())
+  }
+}

crates/lib/artcraft_client_identity/src/lib.rs

@@ -0,0 +1,12 @@
+//! artcraft_client_identity
+//!
+//! How the ArtCraft desktop app identifies itself (`Origin`, `User-Agent`) to each destination.
+//!
+//! Our own APIs get the declared ArtCraft desktop identity. Known third-party providers get an
+//! identity close to their own website, and never ours. The native third-party Rust clients
+//! (Grok, Midjourney, Sora, etc.) set their own headers and do not use this crate.
+
+pub mod destination;
+pub mod origins;
+pub mod third_party_provider;
+pub mod user_agents;

crates/lib/artcraft_client_identity/src/origins.rs

@@ -0,0 +1,11 @@
+/// `Origin` sent to our deployed APIs.
+/// Keep in sync with `actix_cors_configs/src/configs/artcraft_desktop.rs` in artcraft-services.
+pub const ARTCRAFT_DESKTOP_ORIGIN: &str = "https://desktop.getartcraft.com";
+
+/// `Origin` sent to a locally running API (eg. `http://localhost:12345`).
+/// Development CORS accepts any `localhost` origin.
+pub const ARTCRAFT_DESKTOP_DEVELOPMENT_ORIGIN: &str = "http://localhost";
+
+/// `Origin` packaged builds historically sent everywhere. Now only sent to our non-API hosts
+/// (CDNs, websites), where it is left unchanged.
+pub const LEGACY_DESKTOP_ORIGIN: &str = "https://studio.storyteller.ai";

crates/lib/artcraft_client_identity/src/third_party_provider.rs

@@ -0,0 +1,30 @@
+/// A third-party provider, and the `Origin` of its own website that we present to its hosts.
+#[derive(Debug, PartialEq, Eq)]
+pub struct ThirdPartyProvider {
+  pub name: &'static str,
+  /// Registrable domains; subdomains match too.
+  pub domains: &'static [&'static str],
+  pub origin: &'static str,
+}
+
+/// Every third party that gets an invented origin. Origins match what each provider's native
+/// Rust client already sends. First match wins, so more specific entries go first.
+pub const THIRD_PARTY_PROVIDERS: [ThirdPartyProvider; 9] = [
+  ThirdPartyProvider { name: "Grok", domains: &["grok.com", "x.ai"], origin: "https://grok.com" },
+  ThirdPartyProvider { name: "Midjourney", domains: &["midjourney.com"], origin: "https://www.midjourney.com" },
+  ThirdPartyProvider {
+    name: "Sora",
+    domains: &["sora.chatgpt.com", "sora.com", "openai.com", "oaistatic.com"],
+    origin: "https://sora.chatgpt.com",
+  },
+  ThirdPartyProvider { name: "ChatGPT", domains: &["chatgpt.com"], origin: "https://chatgpt.com" },
+  ThirdPartyProvider {
+    name: "World Labs",
+    domains: &["worldlabs.ai", "wlt-ai.art"],
+    origin: "https://marble.worldlabs.ai",
+  },
+  ThirdPartyProvider { name: "Kinovi", domains: &["kinovi.ai"], origin: "https://kinovi.ai" },
+  ThirdPartyProvider { name: "Seedance 2 Pro", domains: &["seedance2-pro.com"], origin: "https://seedance2-pro.com" },
+  ThirdPartyProvider { name: "fal", domains: &["fal.ai", "fal.run", "fal.media"], origin: "https://fal.ai" },
+  ThirdPartyProvider { name: "GMI Cloud", domains: &["gmicloud.ai"], origin: "https://console.gmicloud.ai" },
+];

crates/lib/artcraft_client_identity/src/user_agents.rs

@@ -0,0 +1,23 @@
+/// `User-Agent` sent to our own APIs and hosts.
+///
+/// TODO: Change to "artcraft-desktop/1.0" once the backend services can parse it.
+pub const ARTCRAFT_DESKTOP_USER_AGENT: &str = "storyteller-client/1.0";
+
+/// `User-Agent` sent to third parties: the default of the OS webview Tauri runs on
+/// (WKWebView on macOS, WebView2 on Windows, WebKitGTK on Linux).
+///
+/// NB: These are hardcoded snapshots and WILL go out of date as the OS webviews update
+/// (especially WebView2's Chrome/Edge version, which auto-updates on Windows). Rust can't read
+/// the webview's real `navigator.userAgent`, so refresh these periodically by checking
+/// `navigator.userAgent` in the desktop app's devtools on each OS.
+#[cfg(target_os = "macos")]
+pub const WEBVIEW_USER_AGENT: &str =
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko)";
+
+#[cfg(target_os = "windows")]
+pub const WEBVIEW_USER_AGENT: &str =
+  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36 Edg/140.0.0.0";
+
+#[cfg(not(any(target_os = "macos", target_os = "windows")))]
+pub const WEBVIEW_USER_AGENT: &str =
+  "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/605.1.15 (KHTML, like Gecko)";

crates/vendor/tauri-plugin-http/Cargo.toml

@@ -36,6 +36,7 @@ urlpattern = "0.3"
 regex = "1"
 
 [dependencies]
+artcraft_client_identity = { workspace = true }
 serde = { workspace = true }
 serde_json = { workspace = true }
 tauri = { workspace = true }

crates/vendor/tauri-plugin-http/src/artcraft_identity.rs

@@ -0,0 +1,207 @@
+use artcraft_client_identity::destination::Destination;
+use artcraft_client_identity::origins::LEGACY_DESKTOP_ORIGIN;
+use artcraft_client_identity::user_agents::{ARTCRAFT_DESKTOP_USER_AGENT, WEBVIEW_USER_AGENT};
+use http::{header, HeaderMap, HeaderValue};
+use url::{Host, Url};
+
+/// The `User-Agent` to send when the frontend didn't set one.
+pub(crate) fn artcraft_default_user_agent(destination: &Url) -> &'static str {
+  match Destination::classify(destination) {
+    Destination::ArtcraftApi { .. } | Destination::ArtcraftHost => ARTCRAFT_DESKTOP_USER_AGENT,
+    Destination::ThirdParty(_) | Destination::Unknown => WEBVIEW_USER_AGENT,
+  }
+}
+
+/// Replace the webview's own `Origin` (packaged `tauri://localhost` etc., or a Vite loopback
+/// origin at any port) with the identity chosen for the destination. The native HTTP bridge
+/// shares the desktop cookie jar, so its identity must not depend on the webview.
+pub(crate) fn normalize_artcraft_origin(destination: &Url, headers: &mut HeaderMap) {
+  let origin = headers.get(header::ORIGIN).and_then(|value| value.to_str().ok());
+  // Packaged-app webview origins on macOS and Windows.
+  let packaged_origin = headers.get(header::ORIGIN).is_none()
+    || matches!(origin, Some("null" | "http://tauri.localhost" | "tauri://localhost"));
+  // Development webview origins (Vite on any loopback port).
+  let webview_origin = packaged_origin || origin.is_some_and(is_loopback_origin);
+
+  let replacement = match Destination::classify(destination) {
+    // Our APIs (deployed or local) see the declared desktop identity.
+    Destination::ArtcraftApi { origin } if webview_origin => origin,
+    // Known third parties see an origin close to their own website.
+    Destination::ThirdParty(provider) if webview_origin => provider.origin,
+    // Our CDNs and websites keep the historical packaged-app handling.
+    Destination::ArtcraftHost if packaged_origin => LEGACY_DESKTOP_ORIGIN,
+    // Unknown hosts and ordinary website origins are left untouched.
+    _ => return,
+  };
+
+  // HeaderMap is a multimap; insert replaces all existing Origin values.
+  headers.insert(header::ORIGIN, HeaderValue::from_static(replacement));
+}
+
+fn is_loopback_origin(origin: &str) -> bool {
+  let Ok(url) = Url::parse(origin) else {
+    return false;
+  };
+  if !matches!(url.scheme(), "http" | "https") {
+    return false;
+  }
+  match url.host() {
+    Some(Host::Domain("localhost")) => true,
+    Some(Host::Ipv4(address)) => address.is_loopback(),
+    Some(Host::Ipv6(address)) => address.is_loopback(),
+    _ => false,
+  }
+}
+
+#[cfg(test)]
+mod tests {
+  use super::*;
+
+  const API: &str = "https://api.storyteller.ai/v1/session";
+  const LOCAL_API: &str = "http://localhost:12345/v1/session";
+  const CDN: &str = "https://cdn-2.fakeyou.com/media/a/b.png";
+  const GCS: &str = "https://storage.googleapis.com/bucket/a.png";
+  const GROK: &str = "https://grok.com/rest/app-chat/conversations/new";
+  const MIDJOURNEY: &str = "https://www.midjourney.com/api/submit-jobs";
+  const UNKNOWN: &str = "https://www.gravatar.com/avatar/a";
+
+  const DEV_WEBVIEW_ORIGIN: &str = "http://127.0.0.1:5193";
+  const PACKAGED_ORIGINS: [Option<&str>; 4] =
+    [None, Some("null"), Some("http://tauri.localhost"), Some("tauri://localhost")];
+
+  mod development {
+    use super::*;
+
+    #[test]
+    fn normalizes_dynamic_ports_and_loopback_hosts() {
+      for origin in [
+        "http://127.0.0.1:5193",
+        "http://127.0.0.1:5194",
+        "http://127.0.0.1:65535",
+        "http://localhost:5173",
+        "http://[::1]:5193",
+      ] {
+        assert_eq!(normalized(API, Some(origin)), "https://desktop.getartcraft.com");
+        assert_eq!(normalized(LOCAL_API, Some(origin)), "http://localhost");
+        assert_eq!(normalized(GROK, Some(origin)), "https://grok.com");
+      }
+      assert_eq!(
+        normalized("https://api.fakeyou.com/v1/session", Some(DEV_WEBVIEW_ORIGIN)),
+        "https://desktop.getartcraft.com"
+      );
+    }
+
+    #[test]
+    fn leaves_cdns_and_unknown_destinations_unchanged() {
+      for destination in [
+        CDN,
+        GCS,
+        UNKNOWN,
+        "https://api.storyteller.ai.example.com/v1/session",
+        "http://api.storyteller.ai/v1/session",
+      ] {
+        assert_eq!(normalized(destination, Some(DEV_WEBVIEW_ORIGIN)), DEV_WEBVIEW_ORIGIN, "{destination}");
+      }
+    }
+
+    #[test]
+    fn leaves_non_webview_origins_unchanged() {
+      for origin in [
+        "https://app.getartcraft.com",
+        "https://example.com",
+        "http://localhost.example.com:5193",
+        "http://192.168.1.2:5193",
+        "not a URL",
+        "",
+      ] {
+        assert_eq!(normalized(API, Some(origin)), origin);
+        assert_eq!(normalized(GROK, Some(origin)), origin);
+      }
+    }
+  }
+
+  mod packaged {
+    use super::*;
+
+    #[test]
+    fn our_apis_get_desktop_identity() {
+      for origin in PACKAGED_ORIGINS {
+        assert_eq!(normalized(API, origin), "https://desktop.getartcraft.com");
+        assert_eq!(normalized(LOCAL_API, origin), "http://localhost");
+      }
+    }
+
+    #[test]
+    fn third_parties_get_their_own_origin() {
+      for origin in PACKAGED_ORIGINS {
+        assert_eq!(normalized(GROK, origin), "https://grok.com");
+        assert_eq!(normalized(MIDJOURNEY, origin), "https://www.midjourney.com");
+      }
+    }
+
+    #[test]
+    fn cdns_keep_legacy_origin() {
+      for origin in PACKAGED_ORIGINS {
+        assert_eq!(normalized(CDN, origin), "https://studio.storyteller.ai");
+      }
+    }
+
+    #[test]
+    fn unknown_destinations_never_get_our_origin() {
+      for destination in [UNKNOWN, GCS] {
+        assert_eq!(normalized(destination, Some("tauri://localhost")), "tauri://localhost");
+        assert_eq!(normalized(destination, Some("null")), "null");
+        assert_eq!(normalized_or_missing(destination, None), None);
+      }
+    }
+
+    #[test]
+    fn replaces_duplicate_origin_values_without_changing_session_headers() {
+      let mut headers = HeaderMap::new();
+      headers.append(header::ORIGIN, HeaderValue::from_static(DEV_WEBVIEW_ORIGIN));
+      headers.append(header::ORIGIN, HeaderValue::from_static(DEV_WEBVIEW_ORIGIN));
+      headers.insert(header::COOKIE, HeaderValue::from_static("session=fixture"));
+      normalize_artcraft_origin(&Url::parse(API).unwrap(), &mut headers);
+      assert_eq!(headers.get_all(header::ORIGIN).iter().count(), 1);
+      assert_eq!(headers[header::ORIGIN], "https://desktop.getartcraft.com");
+      assert_eq!(headers[header::COOKIE], "session=fixture");
+    }
+  }
+
+  mod user_agent {
+    use super::*;
+
+    #[test]
+    fn ours_get_artcraft_user_agent() {
+      for destination in [API, LOCAL_API, CDN] {
+        assert_eq!(user_agent(destination), "storyteller-client/1.0");
+      }
+    }
+
+    #[test]
+    fn third_parties_get_webview_user_agent() {
+      for destination in [GROK, MIDJOURNEY, GCS, UNKNOWN] {
+        let user_agent = user_agent(destination);
+        assert!(user_agent.starts_with("Mozilla/5.0 ("), "{user_agent}");
+        assert!(!user_agent.contains("storyteller"), "{user_agent}");
+      }
+    }
+
+    fn user_agent(destination: &str) -> &'static str {
+      artcraft_default_user_agent(&Url::parse(destination).unwrap())
+    }
+  }
+
+  fn normalized(destination: &str, origin: Option<&str>) -> String {
+    normalized_or_missing(destination, origin).unwrap()
+  }
+
+  fn normalized_or_missing(destination: &str, origin: Option<&str>) -> Option<String> {
+    let mut headers = HeaderMap::new();
+    if let Some(origin) = origin {
+      headers.insert(header::ORIGIN, HeaderValue::from_str(origin).unwrap());
+    }
+    normalize_artcraft_origin(&Url::parse(destination).unwrap(), &mut headers);
+    headers.get(header::ORIGIN).map(|value| value.to_str().unwrap().to_owned())
+  }
+}

crates/vendor/tauri-plugin-http/src/commands.rs

@@ -16,12 +16,11 @@ use tauri::{
 use tokio::sync::oneshot::{channel, Receiver, Sender};
 
 use crate::{
+    artcraft_identity::{artcraft_default_user_agent, normalize_artcraft_origin},
     scope::{Entry, Scope},
     Error, Http, Result,
 };
 
-const HTTP_USER_AGENT: &str = concat!(env!("CARGO_PKG_NAME"), "/", env!("CARGO_PKG_VERSION"),);
-
 struct ReqwestResponse(reqwest::Response);
 impl tauri::Resource for ReqwestResponse {}
 
@@ -269,7 +268,7 @@ pub async fn fetch<R: Runtime>(
                     builder = builder.cookie_provider(state.cookies_jar.clone());
                 }
 
-                let mut request = builder.build()?.request(method.clone(), url);
+                let mut request = builder.build()?.request(method.clone(), url.clone());
 
                 // POST and PUT requests should always have a 0 length content-length,
                 // if there is no body. https://fetch.spec.whatwg.org/#http-network-or-cache-fetch
@@ -284,7 +283,7 @@ pub async fn fetch<R: Runtime>(
                 }
 
                 if !headers.contains_key(header::USER_AGENT) {
-                    headers.append(header::USER_AGENT, HeaderValue::from_str(HTTP_USER_AGENT)?);
+                    headers.append(header::USER_AGENT, HeaderValue::from_static(artcraft_default_user_agent(&url)));
                 }
 
                 // ensure we have an Origin header set
@@ -305,26 +304,7 @@ pub async fn fetch<R: Runtime>(
                     headers.remove(header::ORIGIN);
                 };
 
-                // NB(bt): In production builds, the origin seems to be "null". This is what our server CORS filter sees:
-                //   [2025-05-01T23:42:35Z WARN  actix_cors_configs::configs::fakeyou] Invalid origin: "null"
-                //   [2025-05-01T23:42:35Z WARN  actix_cors_configs::util::netlify_branch_domain_matches] Invalid origin: "null"
-                //   [2025-05-01T23:42:35Z WARN  actix_cors_configs::util::netlify_branch_domain_matches] Invalid origin: "null"
-                //     ...
-                //   [2025-05-01T23:42:35Z WARN  actix_cors_configs::util::netlify_branch_domain_matches] Invalid origin: "null"
-                //   [2025-05-01T23:42:35Z INFO  actix_web::middleware::logger] [storyteller-web-85f9b4974-ddvq7] IP=[redact] 
-                //               939322e1095ee5e4-IAD "POST /v1/login HTTP/1.1" 400 42 "-" "tauri-plugin-http/2.4.3" 0.000076
-                let mut maybe_origin_header = headers.get(header::ORIGIN);
-
-                let replace_origin_header = maybe_origin_header.is_none()
-                    || maybe_origin_header == Some(&HeaderValue::from_static("null")) // Above error (Mac)
-                    || maybe_origin_header == Some(&HeaderValue::from_static("http://tauri.localhost")) // Windows
-                    || maybe_origin_header == Some(&HeaderValue::from_static("tauri://localhost")); // Mac plausibly causes this
-
-                if replace_origin_header {
-                    // TODO(bt): Make this a sentinel origin, eg. sentinel.storyteller.ai.
-                    // NB: HeadersMap is a multimap, but this should ensure we just have one value.
-                    headers.insert(header::ORIGIN, HeaderValue::from_static("https://studio.storyteller.ai"));
-                }
+                normalize_artcraft_origin(&url, &mut headers);
 
                 if let Some(data) = data {
                     request = request.body(data);

crates/vendor/tauri-plugin-http/src/lib.rs

@@ -12,6 +12,8 @@ use tauri::{
 
 pub use error::{Error, Result};
 
+mod artcraft_identity;
+
 // NB(bt): We're making everything public so we can access it.
 pub mod commands;
 pub mod error;

docs/desktop-session-regression.md

@@ -0,0 +1,189 @@
+# Desktop session regression — September 27, 2026
+
+The combined development launcher (`92e6f438c3`, following the performance
+change `df707bf8e1`) moved Vite from `localhost:5173` to an available port on
+`127.0.0.1`. The vendored HTTP plugin forwarded that webview Origin to the
+production API. The API rejected it with **400: Origin is not allowed to make
+this request**.
+
+The native login bridge and credits commands use a different HTTP transport and
+continued working. Consequently the login modal correctly recognized the native
+session, but Accounts, Library, and page media requests failed. Accounts treated
+the error as logged out; its Log In button rechecked the valid native session
+and immediately closed the login modal again.
+
+The fix extends the existing packaged-desktop Origin normalization to loopback
+development origins, at any port, for HTTPS requests to `api.storyteller.ai` and
+`api.fakeyou.com`. Other development request destinations and non-loopback
+website origins retain their headers. Cookie handling and API authorization are
+unchanged. A frontend reload alone cannot update this fix: Rust must rebuild.
+
+## Dedicated desktop origin and rollout
+
+The desktop app now declares itself per destination. Both transports read the
+values from one place, `crates/lib/artcraft_client_identity`
+(`Destination::classify`, origins, user agents, third-party provider table):
+
+| Destination                                            | Origin sent                         | User-Agent               |
+|--------------------------------------------------------|-------------------------------------|--------------------------|
+| Our APIs (`api.storyteller.ai`, `api.fakeyou.com`, …)  | `https://desktop.getartcraft.com`   | `storyteller-client/1.0` |
+| Local API (`localhost`, `127.0.0.1`, `[::1]`)          | `http://localhost`                  | `storyteller-client/1.0` |
+| Our CDNs / sites (`*.storyteller.ai`, `*.fakeyou.com`) | unchanged (`studio.storyteller.ai`) | `storyteller-client/1.0` |
+| Named third parties (`THIRD_PARTY_PROVIDERS`)          | the provider's own site             | OS webview               |
+| Any other host (incl. `storage.googleapis.com`)        | webview origin, untouched           | OS webview               |
+
+- The native Rust client (`artcraft_client`) sends the Origin and User-Agent on
+  every API request via `storyteller_client_builder`; it previously sent no
+  Origin.
+- The "OS webview" User-Agents are hardcoded snapshots in
+  `artcraft_client_identity/src/user_agents.rs` and go out of date as the
+  webviews update (notably WebView2's Edge version on Windows). Refresh them
+  from `navigator.userAgent` in the desktop app's devtools on each OS.
+- The vendored HTTP plugin only replaces the webview's own origin (packaged
+  `tauri://localhost` etc., or a loopback Vite origin), and only sets the
+  User-Agent when the frontend didn't.
+- Native third-party Rust clients (Grok, Midjourney, Sora, World Labs, Kinovi)
+  set their own headers and are not affected.
+- Older desktop releases keep working: the server still allows the studio and
+  Tauri origins, and requests without an Origin.
+
+Keep the deployed origin in sync with
+`../artcraft-services/crates/lib/actix_cors_configs/src/configs/artcraft_desktop.rs`.
+Development servers accept any `localhost` origin.
+
+Deploy the server allowlist to the APIs **before running or releasing a desktop
+build with the new origin**. Otherwise the deployed server will reject desktop
+requests until its allowlist is updated. The server retains the studio and
+legacy Tauri origins so existing desktop releases continue working.
+
+Check both repositories:
+
+```sh
+# From artcraft/
+cargo test --offline -p artcraft_client_identity -p tauri-plugin-http --lib
+
+# From artcraft-services/
+cargo test --offline -p actix_cors_configs --lib
+```
+
+The server tests verify credentialed GET/POST requests and OPTIONS preflights in
+production and development, rejection of lookalike domains/HTTP/alternate ports,
+and compatibility with previous desktop origins. After server deployment, repeat
+the native checks below using the updated app.
+
+## Observed native results
+
+These observations were captured with the earlier studio origin, before the
+dedicated desktop origin migration. They do not establish that production has
+deployed the new allowlist.
+
+Checked in the real macOS Tauri dev app at `http://127.0.0.1:5193`, using its
+existing session. Temporary probes were removed after verification. No cookies,
+tokens, passwords, account identifiers, or media contents are recorded here.
+
+| Check                          | Before                                | After                      |
+|--------------------------------|---------------------------------------|----------------------------|
+| Frontend HTTP `/v1/session`    | 400, Origin rejected                  | 200                        |
+| Shared `UsersApi.GetSession()` | `success: false`                      | Success, logged in         |
+| Native vs. frontend identity   | Frontend could not resolve an account | Same account               |
+| Shared media API, page size 1  | Not measured separately               | Success, one item returned |
+
+## Automated checks
+
+From the repository root:
+
+```sh
+cargo test --offline -p tauri-plugin-http artcraft_origin --lib
+./script/artcraft/unix_dev.sh
+```
+
+In a second terminal, substitute the URL printed by the launcher:
+
+```sh
+cd frontend
+npm run test:desktop-session -- http://127.0.0.1:5193
+```
+
+The Rust tests cover the default port, alternate/collision ports, IPv4, IPv6,
+localhost, packaged origins, duplicate headers, session-header preservation,
+and destinations/origins that must remain unchanged.
+
+The browser check uses the real frontend with an isolated Chrome profile and
+mocked IPC. It verifies matching credits and Accounts state, a visible Library
+image, media after opening the deferred image page, video/audio page rendering,
+and logout followed by sign-in. It blocks remote browser traffic and never uses
+your real account or native credentials. It requires installed Google Chrome.
+It can also run against a locally served production frontend build.
+
+These browser mocks cannot validate native transport or server CORS. The
+performance fixture deliberately rejects HTTP requests and is **not** an
+authentication acceptance test. Run the native check below when changing the
+launcher, HTTP bridge, or authentication plumbing.
+
+Validation on September 27: all 12 HTTP-plugin tests, 20 login-modal tests, and
+10 app tests passed. The browser check passed against both the Vite dev server
+and a fresh production build. To repeat the production check, serve a build in
+one terminal, then pass its printed URL to `test:desktop-session` in another:
+
+```sh
+cd frontend/apps/artcraft
+npm run build -- --outDir /tmp/artcraft-session-build
+npm run preview -- --outDir /tmp/artcraft-session-build --host 127.0.0.1 --port 6215
+```
+
+## Repeat the real native check
+
+1. Start the combined launcher, with an existing signed-in test session. Verify
+   Accounts displays that account, My Library loads its media, and Create Image,
+   Create Video, and Create Audio load their content.
+2. Right-click inside the desktop webview, choose **Inspect Element**, and open
+   **Console**. Run this read-only probe. It prints statuses/counts, not credentials
+   or account/media contents:
+
+```js
+void (async () => {
+  const invoke = window.__TAURI_INTERNALS__.invoke;
+  const host = (await invoke("get_app_info_command")).payload.storyteller_host;
+  const options = { method: "GET", credentials: "include" };
+  const started = performance.now();
+  const [native, response] = await Promise.all([
+    invoke("storyteller_get_login_session_command"),
+    window.FetchProxy(`${host}/v1/session`, { ...options }),
+  ]);
+  if (!response.ok) {
+    console.log({ origin: location.origin, sessionStatus: response.status });
+    return;
+  }
+  const session = await response.json();
+  const result = {
+    origin: location.origin,
+    sessionStatus: response.status,
+    nativeLoggedIn: !!native,
+    frontendLoggedIn: session.logged_in,
+    sameAccount: native?.user_token === session.user?.user_token,
+    sessionElapsedMs: performance.now() - started,
+  };
+  if (session.logged_in && session.user) {
+    const username = encodeURIComponent(session.user.username);
+    const media = await window.FetchProxy(
+      `${host}/v1/media_files/list/user/${username}?page_size=1`, { ...options },
+    );
+    result.mediaStatus = media.status;
+    if (media.ok) result.mediaCount = (await media.json()).results?.length;
+  }
+  console.log(result);
+})().catch((error) => console.error("Desktop session probe failed", String(error)));
+```
+
+3. Repeat with a changed port (`ARTCRAFT_DEV_PORT=6200`) and with the starting
+   port occupied. For example, keep this listener running in another terminal
+   before starting the launcher; stop it with Ctrl-C afterward:
+
+```sh
+node -e 'require("node:net").createServer().listen(5193, "127.0.0.1")'
+```
+
+The launcher should select a later port, and both session transports should
+still agree. An empty account may legitimately return zero media; it should
+still return HTTP 200. Verify a genuinely signed-out session shows the login
+screen using the isolated browser check, or a disposable account/profile.

docs/performance.md

@@ -6,6 +6,11 @@ headless Chrome with mocked Tauri services. They do **not** measure native
 process launch, WKWebView/WebView2, Rust, disk startup, real account loading,
 or generation latency.
 
+These timings are not authentication acceptance tests: the benchmark mocks the
+native session and rejects frontend HTTP requests. Before accepting a desktop
+change, also run the [session and Library checks](desktop-session-regression.md),
+including real Tauri HTTP requests when changing the launcher or bridge.
+
 ## Changes and results
 
 Seven samples per version; table values are medians. Each sample uses a fresh

frontend/apps/artcraft/app/index.html

@@ -28,10 +28,11 @@
   </script>
 
   <base href="/" />
+  <link rel="icon" type="image/svg+xml" href="/artcraft-icon.svg" />
   <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 />
-  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
+  <link href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@300..800&display=swap"
     rel="stylesheet" />
   <!-- <link rel="stylesheet" href="/src/styles.css" /> -->
 </head>

frontend/apps/artcraft/app/public/artcraft-icon.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 116.34 97.5">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #4e7bfb;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <path class="cls-1" d="M104.28,49.49L81.55,0h-31.23l-3.17,4.76L14.75,53.63,0,75.85l21.55,21.55,63.79-36.94,16.99,37.04,14.01-21.74-12.06-26.27ZM32.89,65.66l32.42-48.87,10.91,23.77-43.32,25.09Z"/>
+  </g>
+</svg>

frontend/apps/artcraft/app/src/components/GlobalFileDropHandler/GlobalFileDropHandler.tsx

@@ -191,11 +191,11 @@ export function GlobalFileDropHandler() {
   return (
     <>
       {isDragging && modalType === null && (
-        <div className="pointer-events-none fixed inset-0 z-[9999] flex items-center justify-center bg-black/40">
-          <div className="flex flex-col items-center gap-3 rounded-2xl border-2 border-dashed border-white/60 bg-black/30 px-16 py-12 text-white backdrop-blur-sm">
-            <Maximize2Icon  className="text-4xl opacity-80" />
-            <div className="text-xl font-semibold">Drop to Upload</div>
-            <div className="text-sm opacity-60">GLB, PNG, JPG, JPEG, SPZ</div>
+        <div className="pointer-events-none fixed inset-0 z-[9999] flex items-center justify-center bg-black/70">
+          <div className="flex flex-col items-center gap-3 border border-dashed border-white/60 bg-ui-panel px-16 py-12 text-white">
+            <Maximize2Icon className="text-3xl opacity-60" />
+            <div className="font-display text-2xl tracking-tight">Drop to Upload</div>
+            <div className="hud-label text-white/50">GLB, PNG, JPG, JPEG, SPZ</div>
           </div>
         </div>
       )}

frontend/apps/artcraft/app/src/components/experiences/ImageTo3DExperience.tsx

@@ -8,13 +8,14 @@ import { BoxIcon, ImagesIcon, PlusIcon, UploadIcon, XIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 import { useImageTo3DStore } from "../../pages/PageImageTo3DObject/ImageTo3DStore";
 import { useImageTo3DWorldStore } from "../../pages/PageImageTo3DWorld/ImageTo3DWorldStore";
-import { MediaUploadApi, downloadFileFromUrl } from "@storyteller/api";
+import { MediaUploadApi } from "@storyteller/api";
 import { GalleryItem, GalleryModal } from "@storyteller/ui-gallery-modal";
 import {
   GenerateMesh,
   EnqueueImageTo3dObjectModel,
   GenerateSplat,
   commandErrorMessage,
+  downloadFileFromUrl,
 } from "@storyteller/tauri-api";
 import { toast } from "react-hot-toast";
 import { v4 as uuidv4 } from "uuid";
@@ -36,6 +37,7 @@ import {
   useCostBreakdownModalStore,
 } from "@storyteller/ui-pricing-modal";
 import { HelpMenuButton } from "@storyteller/ui-help-menu";
+import { CreateEmptyState } from "~/components/generation-feed/CreateEmptyState";
 
 type Mode = "image" | "text";
 type Variant = "object" | "world";
@@ -549,9 +551,9 @@ export const ImageTo3DExperience = ({
         role="button"
         tabIndex={0}
         className={twMerge(
-          "flex flex-col items-center justify-center rounded-2xl border-[3px] border-dashed border-primary/40 bg-primary/5 text-center text-xs transition-all hover:border-primary hover:bg-primary/10 focus:outline-none focus:ring-2 focus:ring-primary/40",
+          "flex flex-col items-center justify-center border border-dashed border-white/20 bg-white/[0.015] text-center text-xs transition-all hover:border-white/40 hover:bg-white/5 focus:border-white/60 focus:outline-none",
           hasResults ? "aspect-square w-24" : "aspect-square w-48",
-          dragActive && "border-primary bg-primary/10",
+          dragActive && "border-white/60 bg-white/5",
         )}
         onDragEnter={(event) => {
           event.preventDefault();
@@ -581,11 +583,11 @@ export const ImageTo3DExperience = ({
         <PlusIcon
           
           className={twMerge(
-            "text-base-fg opacity-90 drop-shadow",
+            "text-base-fg opacity-80",
             hasResults ? "text-2xl" : "text-4xl",
           )} />
         {!hasResults && (
-          <span className="mt-3 text-[15px] font-medium text-base-fg opacity-60">
+          <span className="mt-3 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
             Add Image
           </span>
         )}
@@ -598,7 +600,7 @@ export const ImageTo3DExperience = ({
       {uploadedPreview ? (
         <div
           className={twMerge(
-            "group relative cursor-pointer overflow-hidden rounded-2xl border-[3px] border-primary/40 bg-black/30 transition-all",
+            "group relative cursor-pointer overflow-hidden border border-white/30 bg-black/30 transition-all hover:border-white/60",
             hasResults ? "aspect-square w-24" : "aspect-square w-48",
           )}
           onClick={() => !isUploading && fileInputRef.current?.click()}
@@ -613,13 +615,13 @@ export const ImageTo3DExperience = ({
           />
           {isUploading && (
             <div className="absolute inset-0 flex items-center justify-center">
-              <div className="h-8 w-8 animate-spin rounded-full border-[3px] border-white/30 border-t-primary" />
+              <div className="h-8 w-8 animate-spin rounded-full border-[3px] border-white/30 border-t-white" />
             </div>
           )}
           {!isUploading && (
             <button
               type="button"
-              className="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-full bg-black/60 text-white opacity-0 transition-opacity group-hover:opacity-100"
+              className="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-[3px] bg-black/60 text-white opacity-0 transition-all hover:bg-black group-hover:opacity-100"
               onClick={(event) => {
                 event.stopPropagation();
                 setUploadedPreview(null);
@@ -645,7 +647,7 @@ export const ImageTo3DExperience = ({
         ref={textareaRef}
         id={promptInputId}
         rows={1}
-        className="text-md max-h-[5.5em] w-full resize-none overflow-y-auto rounded bg-transparent pr-2 pt-1 text-base-fg placeholder-base-fg/60 focus:outline-none"
+        className="text-md max-h-[5.5em] w-full resize-none overflow-y-auto rounded-[3px] bg-transparent pr-2 pt-1 text-base-fg placeholder-base-fg/60 focus:outline-none"
         value={prompt}
         placeholder="Describe any object you want to generate from scratch..."
         onChange={(event) => setPrompt(event.target.value)}
@@ -691,8 +693,8 @@ export const ImageTo3DExperience = ({
                 role="button"
                 tabIndex={0}
                 className={twMerge(
-                  "flex h-32 w-32 flex-col items-center justify-center rounded-xl border-2 border-dashed border-primary/40 bg-primary/5 transition-all hover:border-primary hover:bg-primary/10 focus:outline-none focus:ring-2 focus:ring-primary/40",
-                  dragActive && "border-primary bg-primary/10",
+                  "flex h-32 w-32 flex-col items-center justify-center border border-dashed border-white/20 bg-white/[0.015] transition-all hover:border-white/40 hover:bg-white/5 focus:border-white/60 focus:outline-none",
+                  dragActive && "border-white/60 bg-white/5",
                 )}
                 onDragEnter={(e) => {
                   e.preventDefault();
@@ -730,8 +732,8 @@ export const ImageTo3DExperience = ({
               >
                 <PlusIcon
                   
-                  className="text-3xl text-base-fg opacity-90 drop-shadow" />
-                <span className="mt-2 text-sm font-medium text-base-fg/50">
+                  className="text-3xl text-base-fg opacity-80" />
+                <span className="mt-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
                   Add Images
                 </span>
               </div>
@@ -740,7 +742,7 @@ export const ImageTo3DExperience = ({
           <textarea
             ref={worldTextareaRef}
             rows={2}
-            className="w-full resize-none overflow-y-auto rounded-lg bg-white/5 px-3 py-2.5 text-base text-base-fg placeholder-base-fg/60 outline-none ring-2 ring-transparent transition-all focus:ring-primary/80"
+            className="w-full resize-none overflow-y-auto rounded-[3px] border border-white/15 bg-ui-controls px-3 py-2.5 text-base text-base-fg placeholder-base-fg/60 transition-colors focus:border-white/60 focus:outline-none"
             style={{ maxHeight: "5em" }}
             value={worldPrompt}
             placeholder="Describe your 3D world (optional)..."
@@ -754,7 +756,7 @@ export const ImageTo3DExperience = ({
       <div
         key={img.id}
         className={twMerge(
-          "glass group relative aspect-square overflow-hidden rounded-lg border-2 border-white/30 transition-all",
+          "group relative aspect-square overflow-hidden rounded-[3px] border border-white/30 bg-black/30 transition-all",
           hasResults ? "w-10" : "w-auto",
           img.isUploading
             ? "cursor-default"
@@ -772,13 +774,13 @@ export const ImageTo3DExperience = ({
         />
         {img.isUploading && (
           <div className="absolute inset-0 flex items-center justify-center bg-black/20">
-            <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-primary" />
+            <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
           </div>
         )}
         {!img.isUploading && (
           <button
             type="button"
-            className="absolute right-[2px] top-[2px] flex h-4 w-4 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white opacity-0 backdrop-blur-md transition-colors hover:bg-red/70 group-hover:opacity-100"
+            className="absolute right-[2px] top-[2px] flex h-4 w-4 cursor-pointer items-center justify-center rounded-[3px] bg-black/60 text-white opacity-0 transition-colors hover:bg-red/70 group-hover:opacity-100"
             onClick={(e) => {
               e.stopPropagation();
               removeWorldImage(img.id);
@@ -820,7 +822,7 @@ export const ImageTo3DExperience = ({
         <Button
           variant="action"
           className={twMerge(
-            "aspect-square overflow-hidden rounded-lg border-2 border-dashed border-black/5 bg-ui-controls/40 transition-all hover:bg-ui-controls/60 dark:border-white/25",
+            "aspect-square overflow-hidden rounded-[3px] border border-dashed border-black/15 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10 dark:border-white/25",
             hasResults ? "w-10" : "w-14",
           )}
           onClick={() => worldFileInputRef.current?.click()}
@@ -836,7 +838,7 @@ export const ImageTo3DExperience = ({
     );
 
     const imageCountRow = (
-      <div className="flex items-center justify-center gap-2 text-xs text-base-fg/40">
+      <div className="flex items-center justify-center gap-2 font-mono text-[11px] tabular-nums text-base-fg/40">
         <span>
           {worldImages.length}/{MAX_WORLD_IMAGES} images
         </span>
@@ -865,7 +867,7 @@ export const ImageTo3DExperience = ({
             <textarea
               ref={worldTextareaRef}
               rows={1}
-              className="flex-1 resize-none overflow-y-auto rounded-lg bg-white/5 px-3 py-2 text-sm text-base-fg placeholder-base-fg/60 focus:outline-none focus:ring-2 focus:ring-primary/60"
+              className="flex-1 resize-none overflow-y-auto rounded-[3px] border border-white/15 bg-ui-controls px-3 py-2 text-sm text-base-fg placeholder-base-fg/60 transition-colors focus:border-white/60 focus:outline-none"
               value={worldPrompt}
               placeholder="Describe world (optional)..."
               onChange={(e) => setWorldPrompt(e.target.value)}
@@ -887,7 +889,7 @@ export const ImageTo3DExperience = ({
         <textarea
           ref={worldTextareaRef}
           rows={2}
-          className="w-full resize-none overflow-y-auto rounded-lg bg-white/5 px-3 py-2.5 text-base text-base-fg placeholder-base-fg/60 focus:outline-none focus:ring-2 focus:ring-primary/60"
+          className="w-full resize-none overflow-y-auto rounded-[3px] border border-white/15 bg-ui-controls px-3 py-2.5 text-base text-base-fg placeholder-base-fg/60 transition-colors focus:border-white/60 focus:outline-none"
           style={{ maxHeight: "5em" }}
           value={worldPrompt}
           placeholder="Describe your 3D world (optional)..."
@@ -907,7 +909,7 @@ export const ImageTo3DExperience = ({
     results.find((r) => r.id === selectedResultId) || results[0];
 
   return (
-    <div className="bg-ui-panel-gradient flex h-[calc(100vh-56px)] w-full bg-ui-panel text-base-fg">
+    <div className="flex h-[calc(100vh-56px)] w-full bg-ui-background text-base-fg">
       {backgroundImage && !hasResults && (
         <>
           <div className="pointer-events-none fixed inset-0 z-[1] overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,_transparent_49%,_rgb(var(--st-controls-rgb)_/_var(--st-gallery-vignette-alpha))_100%)]" />
@@ -928,9 +930,12 @@ export const ImageTo3DExperience = ({
 
       <div className="relative z-10 h-full w-full p-8">
         {!hasResults && (
-          <div className="pointer-events-none absolute left-0 top-[calc(50%-280px)] w-full text-center">
-            <h1 className="mb-3 text-7xl font-bold tracking-tight">{title}</h1>
-            <p className="text-xl text-base-fg/70">{subtitle}</p>
+          <div className="pointer-events-none absolute left-0 top-[calc(50%-280px)] flex w-full justify-center">
+            <CreateEmptyState
+              title={title}
+              subtitle={subtitle}
+              className="py-8 sm:py-8"
+            />
           </div>
         )}
 
@@ -944,7 +949,7 @@ export const ImageTo3DExperience = ({
             style={{ height: `calc(100vh - ${bottomOffsetPx + 80}px)` }}
           >
             {/* Left: Viewer */}
-            <div className="glass relative h-full overflow-hidden rounded-xl border border-ui-panel-border">
+            <div className="relative h-full overflow-hidden border border-ui-panel-border bg-ui-panel">
               <Viewer3D
                 key={activeResult?.id}
                 modelUrl={activeResult?.modelUrl}
@@ -1002,13 +1007,15 @@ export const ImageTo3DExperience = ({
             </div>
 
             {/* Right: History List */}
-            <div className="glass flex h-full flex-col overflow-hidden rounded-xl border border-ui-panel-border">
-              <div className="flex items-center justify-between p-4">
-                <h3 className="font-semibold text-base-fg/80">History</h3>
+            <div className="flex h-full flex-col overflow-hidden border border-ui-panel-border bg-ui-panel">
+              <div className="flex items-center justify-between border-b border-ui-panel-border px-4 py-3">
+                <h3 className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
+                  History
+                </h3>
                 {results.length > 0 && (
                   <button
                     onClick={resetResults}
-                    className="rounded-md bg-red/20 px-3 py-1 text-xs text-white/70 transition-colors hover:bg-red/30"
+                    className="rounded-[3px] border border-red/40 bg-red/10 px-3 py-1 text-xs text-white/70 transition-colors hover:bg-red/20"
                   >
                     Clear Session
                   </button>
@@ -1024,13 +1031,13 @@ export const ImageTo3DExperience = ({
                         key={result.id}
                         onClick={() => setSelectedResultId(result.id)}
                         className={twMerge(
-                          "group flex w-full items-center gap-3 rounded-xl border p-2 text-left transition-all hover:bg-ui-controls/40",
+                          "group flex w-full items-center gap-3 rounded-none border p-2 text-left transition-all hover:bg-white/5",
                           isSelected
-                            ? "border-primary/50 bg-primary/10"
-                            : "border-transparent bg-ui-controls/20",
+                            ? "border-white bg-white/10"
+                            : "border-white/10 bg-transparent hover:border-white/30",
                         )}
                       >
-                        <div className="relative aspect-square h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-black/30 ring-1 ring-white/5">
+                        <div className="relative aspect-square h-14 w-14 shrink-0 overflow-hidden border border-white/10 bg-black/30">
                           {result.previewUrl ? (
                             <img
                               src={result.previewUrl}
@@ -1049,7 +1056,7 @@ export const ImageTo3DExperience = ({
                           )}
                           {isPending && (
                             <div className="absolute inset-0 flex items-center justify-center bg-black/30">
-                              <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/20 border-t-primary" />
+                              <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/20 border-t-white" />
                             </div>
                           )}
                         </div>
@@ -1063,7 +1070,7 @@ export const ImageTo3DExperience = ({
                                 Generating…
                               </span>
                             ) : (
-                              <span className="text-base-fg/45">
+                              <span className="font-mono tabular-nums text-base-fg/45">
                                 {formatTime(result.timestamp)}
                               </span>
                             )}
@@ -1093,7 +1100,7 @@ export const ImageTo3DExperience = ({
           <div ref={promptContentRef}>
             <div
               className={twMerge(
-                "glass w-full rounded-xl shadow-2xl ring-1 ring-white/10",
+                "glass w-full",
                 hasResults ? "p-3" : "p-5",
               )}
             >
@@ -1138,7 +1145,7 @@ export const ImageTo3DExperience = ({
                   activeTab={activeMode}
                   onTabChange={(tabId) => setActiveMode(tabId as Mode)}
                   className="w-fit"
-                  indicatorClassName="bg-primary/25"
+                  indicatorClassName="bg-white/15"
                 />
               </div>
             )}
@@ -1195,12 +1202,12 @@ export const ImageTo3DExperience = ({
 
       {previewImage && (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
           onClick={() => setPreviewImage(null)}
         >
           <button
             type="button"
-            className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-black/60 text-white transition-colors hover:bg-black/80"
+            className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-[3px] border border-white/15 bg-black/60 text-white transition-colors hover:border-white/30 hover:bg-black"
             onClick={() => setPreviewImage(null)}
           >
             <XIcon  className="h-4 w-4" />
@@ -1208,7 +1215,7 @@ export const ImageTo3DExperience = ({
           <img
             src={previewImage}
             alt="Preview"
-            className="max-h-[80vh] max-w-[80vw] rounded-xl object-contain shadow-2xl"
+            className="max-h-[80vh] max-w-[80vw] border border-white/15 object-contain"
             onClick={(e) => e.stopPropagation()}
           />
         </div>

frontend/apps/artcraft/app/src/components/generation-feed/CreateEmptyState.tsx

@@ -0,0 +1,56 @@
+import { type ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+const CORNERS = [
+  "top-0 left-0",
+  "top-0 right-0",
+  "bottom-0 left-0",
+  "bottom-0 right-0",
+];
+
+interface CreateEmptyStateProps {
+  title: string;
+  subtitle: string;
+  children?: ReactNode;
+  compact?: boolean;
+  className?: string;
+}
+
+/** A quiet editorial section with a fine border and corner registration marks. */
+export function CreateEmptyState({
+  title,
+  subtitle,
+  children,
+  compact = false,
+  className,
+}: CreateEmptyStateProps) {
+  return (
+    <section
+      className={twMerge(
+        "create-empty-section relative w-full max-w-3xl px-6 text-left sm:px-10",
+        compact ? "py-8" : "py-10 sm:py-14",
+        className,
+      )}
+    >
+      <h1
+        className={twMerge(
+          "text-balance font-display leading-[1.05] tracking-[-0.035em] text-ui-ink",
+          compact ? "text-2xl" : "text-3xl md:text-5xl",
+        )}
+      >
+        {title}
+      </h1>
+      <p className="mt-4 max-w-xl text-pretty text-sm leading-relaxed text-white/60 sm:text-base">
+        {subtitle}
+      </p>
+      {children && <div className="mt-6">{children}</div>}
+      {CORNERS.map((corner) => (
+        <span
+          key={corner}
+          aria-hidden="true"
+          className={`frame-corner-mark ${corner}`}
+        />
+      ))}
+    </section>
+  );
+}

frontend/apps/artcraft/app/src/components/generation-feed/DesktopCreatePageShell.tsx

@@ -1,15 +1,16 @@
 import { useEffect, useState, type ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
+import { CreateEmptyState } from "./CreateEmptyState";
 
 // Shared page chrome for the desktop Generate Image / Generate Video pages,
-// mirroring the webapp's CreateMediaPageShell: a centered hero over the
-// decorative background, and a scrollable generation feed (padded past the
-// fixed promptbox) once there is anything to show.
+// mirroring the webapp's CreateMediaPageShell: a centered empty-state panel,
+// and a scrollable generation feed (padded past the fixed promptbox) once
+// there is anything to show.
 //
-// The hero + background behave like a splash screen: they stay up while the
-// feed is still loading (pages remount on tab switches, so this covers the
-// reload) and fade out once content arrives. With a genuinely empty library
-// they simply stay — they ARE the empty state.
+// The empty state (and optional background) behave like a splash screen:
+// they stay up while the feed is still loading (pages remount on tab
+// switches, so this covers the reload) and fade out once content arrives.
+// With a genuinely empty library they simply stay.
 
 const SPLASH_FADE_MS = 700;
 
@@ -17,7 +18,8 @@ interface DesktopCreatePageShellProps {
   hasContent: boolean;
   emptyStateTitle: string;
   emptyStateSubtitle: string;
-  /** Decorative page background (fixed-position); fades out with the hero. */
+  /** Optional decorative page background (fixed-position); fades out with
+   *  the empty state. */
   background?: ReactNode;
   /** Height of the fixed promptbox area, used to pad the feed's bottom. */
   bottomOffset: number;
@@ -55,11 +57,11 @@ export function DesktopCreatePageShell({
   }, [hasContent, splashState]);
 
   return (
-    <div className="flex h-[calc(100vh-56px)] w-full bg-ui-background">
+    <div className="flex h-[calc(100vh-56px)] w-full bg-ui-background text-white">
       <div className="relative h-full w-full">
         {hasContent && (
           <div
-            className="h-full w-full overflow-y-auto pt-4"
+            className="h-full w-full overflow-y-auto pt-0.5"
             style={{ paddingBottom: bottomOffset + 24 }}
           >
             {listContent}
@@ -73,15 +75,14 @@ export function DesktopCreatePageShell({
               splashState === "fading" ? "opacity-0" : "opacity-100",
             )}
           >
-            <div className="flex h-full w-full flex-col items-center justify-center pb-52">
-              <div className="relative z-20 flex flex-col items-center justify-center text-center drop-shadow-xl">
-                <h1 className="text-7xl font-bold text-base-fg">
-                  {emptyStateTitle}
-                </h1>
-                <span className="pt-2 text-xl text-base-fg opacity-80">
-                  {emptyStateSubtitle}
-                </span>
-              </div>
+            <div
+              className="relative z-20 flex h-full w-full items-center justify-center px-6"
+              style={{ paddingBottom: bottomOffset }}
+            >
+              <CreateEmptyState
+                title={emptyStateTitle}
+                subtitle={emptyStateSubtitle}
+              />
             </div>
             {background}
           </div>
@@ -92,7 +93,7 @@ export function DesktopCreatePageShell({
         {hasContent && (
           <div
             aria-hidden
-            className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-64 bg-gradient-to-t from-ui-background to-transparent"
+            className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-48 bg-gradient-to-t from-ui-background to-transparent"
           />
         )}
 

frontend/apps/artcraft/app/src/components/generation-feed/DesktopGenerationGallery.tsx

@@ -180,7 +180,7 @@ function SelectionDownloadBar({
         type="button"
         onClick={handleDownload}
         disabled={isDownloading || selectedItems.length === 0}
-        className="flex items-center gap-2 rounded-full bg-ui-controls/60 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-ui-controls/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:opacity-60"
+        className="flex items-center gap-2 border border-white/15 bg-ui-controls/60 px-3 py-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white transition-colors hover:bg-ui-controls/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/60 disabled:opacity-60"
       >
         <DynamicIcon
           icon={isDownloading ? LoaderCircleIcon : ArrowDownToLineIcon}
@@ -226,8 +226,8 @@ function ItemActions({
 
   const buttonClass =
     variant === "card"
-      ? "flex h-7 w-7 items-center justify-center rounded-md text-white/85 transition-colors hover:bg-white/15 hover:text-white disabled:opacity-60"
-      : "flex h-8 w-8 items-center justify-center rounded-md text-white/70 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-60";
+      ? "flex h-7 w-7 items-center justify-center text-white/85 transition-colors hover:bg-white/15 hover:text-white disabled:opacity-60"
+      : "flex h-8 w-8 items-center justify-center text-white/70 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-60";
 
   const handleRecreate = useCallback(
     async (e: React.MouseEvent) => {
@@ -305,7 +305,7 @@ function ItemActions({
             aria-label="Make Video"
             className={buttonClass}
           >
-            <VideoIcon  className="text-sm" />
+            <VideoIcon className="text-sm" />
           </button>
         </Tooltip>
       )}

frontend/apps/artcraft/app/src/components/generation-feed/desktopMediaActions.ts

@@ -2,12 +2,15 @@ import toast from "react-hot-toast";
 import {
   FilterMediaClasses,
   PromptsApi,
+} from "@storyteller/api";
+import type { Prompts } from "@storyteller/api";
+import {
+  DownloadUrl,
+  useModelsStore,
   downloadUrlToPath,
   pickDownloadDirectory,
   promptDownloadLocationIfNeeded,
-} from "@storyteller/api";
-import type { Prompts } from "@storyteller/api";
-import { DownloadUrl, useModelsStore } from "@storyteller/tauri-api";
+} from "@storyteller/tauri-api";
 import {
   RefImage,
   RefVideo,

frontend/apps/artcraft/app/src/components/generation-feed/useDesktopGenerationFeed.ts

@@ -35,6 +35,11 @@ import {
 
 const POLL_INTERVAL_MS = 5000;
 
+// Newly completed videos that arrived without a thumbnail URL are looked up
+// again on this interval, for up to MISSING_THUMBNAIL_GIVE_UP_MS.
+const MISSING_THUMBNAIL_POLL_MS = 15_000;
+const MISSING_THUMBNAIL_GIVE_UP_MS = 10 * 60_000;
+
 const FAILED_STATUSES = new Set([
   "complete_failure",
   "attempt_failed",
@@ -197,6 +202,71 @@ export function useDesktopGenerationFeed(options: {
     load();
   });
 
+  // Newly completed videos occasionally arrive without a thumbnail URL (the
+  // Rust media-file lookup fails open). The library copy would have it, but the
+  // newly completed item takes precedence in the feed, so look it up again
+  // until the URL shows up. GalleryThumbnail then re-checks the image itself.
+  const newlyCompletedRef = useRef(newlyCompleted);
+  newlyCompletedRef.current = newlyCompleted;
+  const missingThumbnailSinceRef = useRef<Map<string, number>>(new Map());
+
+  useEffect(() => {
+    if (mediaType !== "video") return;
+    let cancelled = false;
+    let running = false;
+
+    const lookUpMissingThumbnails = async () => {
+      if (running) return; // A slow round is still going.
+      running = true;
+      try {
+        await lookUpMissingThumbnailsOnce();
+      } finally {
+        running = false;
+      }
+    };
+
+    const lookUpMissingThumbnailsOnce = async () => {
+      const now = Date.now();
+      const missing = newlyCompletedRef.current.filter((item) => {
+        if (item.thumbnail) return false;
+        const since = missingThumbnailSinceRef.current.get(item.id) ?? now;
+        missingThumbnailSinceRef.current.set(item.id, since);
+        return now - since < MISSING_THUMBNAIL_GIVE_UP_MS;
+      });
+      for (const item of missing) {
+        const response = await mediaApiRef.current.GetMediaFileByToken({
+          mediaFileToken: item.id,
+        });
+        if (cancelled) return;
+        const links = response.success
+          ? (response.data?.media_links as VideoMediaLinks | undefined)
+          : undefined;
+        // Without a preview or template, getMediaThumbnail would fall back to
+        // the .mp4 itself, which an <img> can't show. Try again next round.
+        if (!links?.maybe_video_previews?.animated && !links?.maybe_thumbnail_template) {
+          continue;
+        }
+        const thumbnail = getMediaThumbnail(links, "video", {
+          size: THUMBNAIL_SIZES.LARGE,
+        });
+        const stillThumbnail = getMediaStillThumbnail(links, {
+          size: THUMBNAIL_SIZES.LARGE,
+        });
+        setNewlyCompleted((prev) =>
+          prev.map((i) =>
+            i.id === item.id ? { ...i, thumbnail, stillThumbnail } : i,
+          ),
+        );
+      }
+    };
+
+    const intervalId = setInterval(lookUpMissingThumbnails, MISSING_THUMBNAIL_POLL_MS);
+    return () => {
+      cancelled = true;
+      clearInterval(intervalId);
+    };
+  }, [mediaType]);
+
   // Poll + reload on Tauri generation events and local "task-queue-update"
   // dispatches (fired by the pages right after enqueueing).
   useEffect(() => {
@@ -249,6 +319,20 @@ export function useDesktopGenerationFeed(options: {
   };
 }
 
+// ── Types ───────────────────────────────────────────────────────────────────
+
+// The media-file API's link fields used for video thumbnails. (The shared
+// MediaFile type predates these fields.)
+interface VideoMediaLinks {
+  cdn_url?: string | null;
+  maybe_thumbnail_template?: string | null;
+  maybe_video_previews?: {
+    animated?: string | null;
+    still?: string | null;
+    still_thumbnail_template?: string | null;
+  } | null;
+}
+
 // ── Task mapping helpers ────────────────────────────────────────────────────
 
 function getTaskMediaType(t: TaskQueueItem): "image" | "video" | "other" {

frontend/apps/artcraft/app/src/components/media/UploadEntryCard.tsx

@@ -106,8 +106,8 @@ export const UploadEntryCard = ({
   return (
     <div
       className={twMerge(
-        "bg-ui-background/60 relative flex h-full flex-col items-center justify-center gap-8 overflow-hidden rounded-2xl border-2 border-dashed border-ui-panel-border p-10 text-center transition-colors",
-        isDragActive && "border-primary/80 bg-primary/5",
+        "relative flex h-full flex-col items-center justify-center gap-6 overflow-hidden rounded-[3px] border border-dashed border-white/15 bg-ui-background p-8 text-center transition-colors hover:border-white/40",
+        isDragActive && "border-white bg-white/10 hover:border-white",
         disabled && "pointer-events-none opacity-60",
       )}
       onDragEnter={handleDragEnter}
@@ -124,35 +124,28 @@ export const UploadEntryCard = ({
         onChange={handleFileChange}
         disabled={disabled}
       />
-      <div className="flex flex-col items-center gap-6">
-        <div className="relative">
-          <div
-            className={twMerge(
-              "relative flex h-32 w-32 items-center justify-center rounded-2xl border-2 shadow-xl backdrop-blur-sm",
-              accentBackgroundClass,
-              accentBorderClass,
-            )}
-          >
-            <DynamicIcon
-              icon={icon}
-              className="text-5xl text-white drop-shadow-lg"
-            />
-          </div>
+      <div className="flex flex-col items-center gap-4">
+        <div
+          className={twMerge(
+            "flex h-14 w-14 items-center justify-center border",
+            accentBackgroundClass,
+            accentBorderClass,
+          )}
+        >
+          <DynamicIcon icon={icon} className="text-xl text-white" />
         </div>
-        <div className="space-y-3">
-          <h3 className="text-4xl font-bold tracking-tight text-base-fg">
-            {title}
-          </h3>
-          <p className="mx-auto max-w-md text-base leading-relaxed text-base-fg/70">
+        <div>
+          <h3 className="text-lg font-semibold text-base-fg">{title}</h3>
+          <p className="mx-auto mt-1 max-w-md text-sm text-base-fg/60">
             {description}
           </p>
         </div>
-        <div className="mt-4 flex flex-wrap justify-center gap-4">
+        <div className="mt-2 flex flex-wrap justify-center gap-2">
           <Button
             variant="primary"
             icon={primaryIcon}
             onClick={handlePrimaryClick}
-            className="px-8 py-3 text-base font-semibold shadow-lg"
+            className="px-3 py-2"
             disabled={disabled}
           >
             {primaryLabel}
@@ -162,7 +155,7 @@ export const UploadEntryCard = ({
               variant="action"
               icon={secondaryIcon}
               onClick={onSecondaryClick}
-              className="border-2 px-8 py-3 text-base font-semibold"
+              className="px-3 py-2"
               disabled={disabled}
             >
               {secondaryLabel}
@@ -173,7 +166,7 @@ export const UploadEntryCard = ({
               variant="action"
               icon={tertiaryIcon}
               onClick={onTertiaryClick}
-              className="border-2 px-8 py-3 text-base font-semibold"
+              className="px-3 py-2"
               disabled={disabled}
             >
               {tertiaryLabel}

frontend/apps/artcraft/app/src/components/reusable/ConfirmationModal.tsx

@@ -24,7 +24,7 @@ export const ConfirmationModal = ({
   onClose,
   onOk,
   okText = "OK",
-  okColor = "bg-brand-success",
+  okColor = "",
   onCancel,
   cancelText = "Cancel",
   canHide,
@@ -52,7 +52,7 @@ export const ConfirmationModal = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-black/40" />
+          <div className="fixed inset-0 bg-black/80" />
         </Transition.Child>
         <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
           <Transition.Child
@@ -64,15 +64,15 @@ export const ConfirmationModal = ({
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all">
+            <Dialog.Panel className="w-full max-w-md transform overflow-hidden border border-white/15 bg-ui-modal p-5 text-left align-middle transition-all">
               <Dialog.Title
                 as="h4"
-                className="mb-4 text-xl font-bold text-white"
+                className="mb-4 font-display text-xl tracking-tight text-white"
               >
                 {title}
               </Dialog.Title>
 
-              <div className="mt-2">{text}</div>
+              <div className="mt-2 text-sm leading-relaxed text-white/70">{text}</div>
               {canHide && (
                 <div className="mt-2">
                   <Checkbox id="hide-dialog" label="Do not show this again" />
@@ -84,7 +84,7 @@ export const ConfirmationModal = ({
                   <Button
                     type="button"
                     onClick={onCancel}
-                    className="rounded-lg px-3 py-2"
+                    className="px-3 py-2"
                     variant="secondary"
                   >
                     {cancelText}
@@ -94,7 +94,7 @@ export const ConfirmationModal = ({
                   <Button
                     type="button"
                     onClick={handleOk}
-                    className={[okColor, "rounded-lg px-3 py-2"].join(" ")}
+                    className={[okColor, "px-3 py-2"].join(" ").trim()}
                   >
                     {okText}
                   </Button>

frontend/apps/artcraft/app/src/components/reusable/CostModal.tsx

@@ -37,11 +37,11 @@ export const CostModal = ({ credits = 1, onClose }: CostModalProps) => {
         transition={{ duration: 0.1, ease: "easeOut" }}
         drag
         dragMomentum={false}
-        className="pointer-events-auto z-10 flex w-72 flex-col overflow-hidden rounded-xl border border-ui-panel-border bg-ui-panel shadow-2xl"
+        className="pointer-events-auto z-10 flex w-72 flex-col overflow-hidden border border-white/15 bg-ui-panel"
       >
-        <div className="bg-ui-panel-header flex cursor-move select-none items-center justify-between border-b border-ui-panel-border px-4 py-3">
-          <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-base-fg">
-            <CoinsIcon  className="text-yellow-400" />
+        <div className="flex cursor-move select-none items-center justify-between border-b border-white/15 px-4 py-3">
+          <div className="flex items-center gap-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg">
+            <CoinsIcon className="text-primary" />
             Cost Breakdown
           </div>
           <button
@@ -53,10 +53,10 @@ export const CostModal = ({ credits = 1, onClose }: CostModalProps) => {
         </div>
 
         <div className="space-y-4 bg-ui-panel p-4">
-          <div className="border-ui-controls-border rounded-lg border bg-ui-controls/50 p-3">
+          <div className="border border-white/15 bg-white/5 p-3">
             <div className="mb-1 flex items-center justify-between">
               <span className="text-sm text-base-fg/80">Total Cost</span>
-              <span className="text-lg font-bold text-base-fg">
+              <span className="text-lg font-semibold tabular-nums tracking-tight text-base-fg">
                 {credits} Credits
               </span>
             </div>
@@ -66,7 +66,7 @@ export const CostModal = ({ credits = 1, onClose }: CostModalProps) => {
           </div>
 
           <div className="space-y-1">
-            <label className="text-xs font-medium text-base-fg/80">
+            <label className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
               Currency
             </label>
             <Select
@@ -77,7 +77,7 @@ export const CostModal = ({ credits = 1, onClose }: CostModalProps) => {
             />
           </div>
 
-          <div className="mt-2 border-t border-ui-panel-border pt-3 text-center text-[10px] text-base-fg/40">
+          <div className="mt-2 border-t border-white/15 pt-3 text-center font-mono text-[10px] uppercase tracking-[0.12em] text-base-fg/40">
             1 Credit = $0.01 USD
           </div>
         </div>

frontend/apps/artcraft/app/src/components/reusable/UploadModalMedia/UploadFilesMedia.tsx

@@ -84,7 +84,7 @@ export const UploadFilesMedia = ({
           <h6 className="z-10 text-red">{assetFile.error}</h6>
         )}
 
-        <div className="relative m-auto aspect-square w-full overflow-hidden rounded-lg bg-brand-secondary">
+        <div className="relative m-auto aspect-square w-full overflow-hidden border border-white/15 bg-ui-controls">
           {!assetFile.value && (
             <h6 className="absolute left-0 top-1/2 -mt-5 w-full text-center">
               File Preview