From 5f497d037d6ae17ebc930ca87976312ae60c554f Mon Sep 17 00:00:00 2001
From: Pheem49 <killerpheem13@gmail.com>
Date: Sun, 21 Jun 2026 14:05:22 +0700
Subject: [PATCH 1/4] feat: implement Image Studio panel for AI-powered image
 generation with custom model support

---
 crates/mint-cli/src/main.rs                   |  75 ++-
 crates/mint-core/src/api_server.rs            |  76 ++-
 crates/mint-core/src/config.rs                |   2 +
 crates/mint-core/src/image_gen.rs             | 277 +++++++++
 crates/mint-core/src/lib.rs                   |   4 +
 src-tauri/src/lib.rs                          |  45 ++
 .../src-web/components/DashboardSidebar.tsx   |  10 +-
 .../src-web/components/ImageStudioPanel.tsx   | 412 +++++++++++++
 .../src-web/components/MintDashboard.tsx      |   9 +
 src/renderer/src-web/css/image-studio.css     | 582 ++++++++++++++++++
 src/renderer/src-web/index.css                |   1 +
 src/renderer/src-web/tauri.ts                 |  53 ++
 .../src/components/DashboardSidebar.tsx       |  10 +-
 .../src/components/ImageStudioPanel.tsx       | 412 +++++++++++++
 src/renderer/src/components/MintDashboard.tsx |  11 +-
 src/renderer/src/css/image-studio.css         | 582 ++++++++++++++++++
 src/renderer/src/index.css                    |   1 +
 src/renderer/src/tauri.ts                     |  51 ++
 18 files changed, 2603 insertions(+), 10 deletions(-)
 create mode 100644 crates/mint-core/src/image_gen.rs
 create mode 100644 src/renderer/src-web/components/ImageStudioPanel.tsx
 create mode 100644 src/renderer/src-web/css/image-studio.css
 create mode 100644 src/renderer/src/components/ImageStudioPanel.tsx
 create mode 100644 src/renderer/src/css/image-studio.css

diff --git a/crates/mint-cli/src/main.rs b/crates/mint-cli/src/main.rs
index 75c1897..e77eacf 100644
--- a/crates/mint-cli/src/main.rs
+++ b/crates/mint-cli/src/main.rs
@@ -7,11 +7,11 @@ use std::{
 };
 
 use mint_core::{
-    CHAT_CLI_ID, Capability, ChatRequest, CodeEdit, CodePatchHunk, KnowledgeStore, MemoryStore,
-    MintConfig, TaskStore, apply_code_edits, assert_path_capability, build_code_patch,
+    CHAT_CLI_ID, Capability, ChatRequest, CodeEdit, CodePatchHunk, ImageGenRequest, KnowledgeStore,
+    MemoryStore, MintConfig, TaskStore, apply_code_edits, assert_path_capability, build_code_patch,
     build_symbol_index, classify_shell_command, config_path, create_folder, execute_native_plugin,
-    fetch_github_repo_summary, find_paths, index_semantic_code, initialize_config,
-    inspect_code_plan, list_code_files, load_config, native_plugins,
+    fetch_github_repo_summary, find_paths, generate_images, index_semantic_code,
+    initialize_config, inspect_code_plan, list_code_files, load_config, native_plugins,
     orchestrate_chat_stream_with_fallback, orchestrate_chat_with_fallback, parse_github_url,
     propose_code_edits, read_code_file, repository_summary, run_shell_command, search_code,
     search_semantic_code, set_config_value,
@@ -180,6 +180,23 @@ enum Command {
     Onboard,
     /// Interactively manage enabled agent tools.
     Setup,
+    /// Generate an image from a text prompt using NanoBanana (Gemini image model).
+    Imagine {
+        /// Text description of the image to generate.
+        prompt: String,
+        /// Aspect ratio: 1:1, 16:9, 9:16, or 4:3 [default: 1:1]
+        #[arg(long, default_value = "1:1")]
+        aspect: String,
+        /// Number of images to generate (1–4) [default: 1]
+        #[arg(long, default_value_t = 1)]
+        count: u8,
+        /// Negative prompt — elements to avoid in the image
+        #[arg(long)]
+        negative: Option<String>,
+        /// Save the first generated image to this path
+        #[arg(long)]
+        output: Option<PathBuf>,
+    },
 }
 
 #[derive(Debug, Subcommand)]
@@ -926,6 +943,56 @@ async fn main() -> Result<()> {
                     launch_mint_target(target).await?;
                 }
             }
+            Command::Imagine {
+                prompt,
+                aspect,
+                count,
+                negative,
+                output,
+            } => {
+                let config = load_config()?;
+                let count = count.clamp(1, 4);
+                eprint!("{DIM}✦ Generating {count} image(s) with NanoBanana...{RESET}");
+                let _ = std::io::stderr().flush();
+                let request = ImageGenRequest {
+                    prompt: prompt.clone(),
+                    negative_prompt: negative,
+                    aspect_ratio: Some(aspect),
+                    num_images: Some(count),
+                    model: None,
+                };
+                match generate_images(&config, &request).await {
+                    Ok(result) => {
+                        eprintln!("\r{MINT}✦ Generated {} image(s)         {RESET}", result.images.len());
+                        let data_uris: Vec<String> =
+                            result.images.iter().map(|img| img.data_uri.clone()).collect();
+                        match mint_core::save_chat_images(data_uris, Some("nanobanana".into()), Some(prompt.clone())) {
+                            Ok(saved) => {
+                                for entry in &saved {
+                                    println!("{MINT}✓{RESET} Saved: {}", entry.path.display());
+                                }
+                                // If --output specified, copy first image there
+                                if let (Some(out_path), Some(first)) = (&output, saved.first()) {
+                                    match std::fs::copy(&first.path, out_path) {
+                                        Ok(_) => println!("{MINT}✓{RESET} Copied to: {}", out_path.display()),
+                                        Err(e) => eprintln!("{WARN}Warning: could not copy to output path: {e}{RESET}"),
+                                    }
+                                }
+                                if let Some(desc) = &result.description {
+                                    if !desc.is_empty() {
+                                        println!("\n{DIM}{desc}{RESET}");
+                                    }
+                                }
+                            }
+                            Err(e) => eprintln!("{ERROR}Failed to save images: {e}{RESET}"),
+                        }
+                    }
+                    Err(e) => {
+                        eprintln!("{ERROR}✗ Image generation failed: {e}{RESET}");
+                        anyhow::bail!("image generation failed: {e}");
+                    }
+                }
+            }
         },
     }
     Ok(())
diff --git a/crates/mint-core/src/api_server.rs b/crates/mint-core/src/api_server.rs
index c72e382..6f695e0 100644
--- a/crates/mint-core/src/api_server.rs
+++ b/crates/mint-core/src/api_server.rs
@@ -11,9 +11,10 @@ use tokio::net::TcpListener;
 
 use crate::{
     AgentProgress, ApprovalOutcome, ChatRequest, ChatResponse, DEFAULT_CONVERSATION_ID,
-    MemoryStore, MintConfig, config_path, create_folder, find_paths, list_saved_pictures,
-    load_config, orchestrate_agent_loop, orchestrate_chat_stream_with_fallback,
-    orchestrate_chat_with_fallback, save_chat_images, save_config, weather,
+    ImageGenRequest, MemoryStore, MintConfig, config_path, create_folder, find_paths,
+    generate_images, list_saved_pictures, load_config, orchestrate_agent_loop,
+    orchestrate_chat_stream_with_fallback, orchestrate_chat_with_fallback, save_chat_images,
+    save_config, weather,
 };
 
 const MAX_API_REQUEST_BYTES: usize = 32 * 1024 * 1024;
@@ -663,6 +664,75 @@ pub async fn start_api_server(port: u16) -> Result<(), std::io::Error> {
                     )
                     .await;
                 }
+                ("POST", "/api/image-generate") => {
+                    #[derive(serde::Deserialize)]
+                    #[serde(rename_all = "camelCase")]
+                    struct ImageGenApiRequest {
+                        prompt: String,
+                        #[serde(default)]
+                        negative_prompt: Option<String>,
+                        #[serde(default)]
+                        aspect_ratio: Option<String>,
+                        #[serde(default)]
+                        num_images: Option<u8>,
+                        #[serde(default)]
+                        model: Option<String>,
+                    }
+
+                    if let Ok(req) = serde_json::from_str::<ImageGenApiRequest>(body) {
+                        let config = load_config().unwrap_or_default();
+                        let gen_request = ImageGenRequest {
+                            prompt: req.prompt.clone(),
+                            negative_prompt: req.negative_prompt,
+                            aspect_ratio: req.aspect_ratio,
+                            num_images: req.num_images,
+                            model: req.model,
+                        };
+                        match generate_images(&config, &gen_request).await {
+                            Ok(result) => {
+                                let data_uris: Vec<String> = result
+                                    .images
+                                    .iter()
+                                    .map(|img| img.data_uri.clone())
+                                    .collect();
+                                let mut saved = save_chat_images(
+                                    data_uris,
+                                    Some("nanobanana".into()),
+                                    Some(req.prompt.clone()),
+                                )
+                                .unwrap_or_default();
+                                for picture in &mut saved {
+                                    picture.url = Some(format!("/api/pictures/{}", picture.filename));
+                                    picture.thumbnail_url = Some(format!("/api/pictures/{}", picture.filename));
+                                }
+                                let response = json!({
+                                    "images": saved,
+                                    "model": result.model,
+                                    "provider": result.provider,
+                                    "prompt": result.prompt,
+                                    "description": result.description
+                                });
+                                send_json_response(socket, "200 OK", &response.to_string()).await;
+                            }
+                            Err(e) => {
+                                let err = json!({ "error": e.to_string() });
+                                send_json_response(
+                                    socket,
+                                    "500 Internal Server Error",
+                                    &err.to_string(),
+                                )
+                                .await;
+                            }
+                        }
+                    } else {
+                        send_json_response(
+                            socket,
+                            "400 Bad Request",
+                            "{\"error\":\"invalid image generation request body\"}",
+                        )
+                        .await;
+                    }
+                }
                 _ => {
                     send_json_response(socket, "404 Not Found", "{\"error\":\"Not Found\"}").await;
                 }
diff --git a/crates/mint-core/src/config.rs b/crates/mint-core/src/config.rs
index 6d187d8..05edd4d 100644
--- a/crates/mint-core/src/config.rs
+++ b/crates/mint-core/src/config.rs
@@ -60,6 +60,7 @@ pub struct MintConfig {
     pub local_model_name: String,
     pub ollama_host: String,
     pub ollama_model: String,
+    pub nanobanana_model: String,
     pub show_desktop_widget: bool,
     pub safety_enabled: bool,
     pub sandbox_mode: String,
@@ -109,6 +110,7 @@ impl Default for MintConfig {
             local_model_name: "local-model".into(),
             ollama_host: String::new(),
             ollama_model: "llama3:latest".into(),
+            nanobanana_model: "gemini-2.5-flash-image".into(),
             show_desktop_widget: true,
             safety_enabled: true,
             sandbox_mode: "prefer".into(),
diff --git a/crates/mint-core/src/image_gen.rs b/crates/mint-core/src/image_gen.rs
new file mode 100644
index 0000000..c926072
--- /dev/null
+++ b/crates/mint-core/src/image_gen.rs
@@ -0,0 +1,277 @@
+use base64::{Engine as _, engine::general_purpose::STANDARD};
+use reqwest::Client;
+use serde::{Deserialize, Serialize};
+use serde_json::{Value, json};
+use thiserror::Error;
+
+use crate::MintConfig;
+
+/// A request to generate images with the NanoBanana (Gemini image) model.
+#[derive(Debug, Clone, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ImageGenRequest {
+    pub prompt: String,
+    #[serde(default)]
+    pub negative_prompt: Option<String>,
+    /// Aspect ratio hint: "1:1", "16:9", "9:16", "4:3". Default: "1:1"
+    #[serde(default)]
+    pub aspect_ratio: Option<String>,
+    /// Number of images to return (1–4). Default: 1
+    #[serde(default)]
+    pub num_images: Option<u8>,
+    #[serde(default)]
+    pub model: Option<String>,
+}
+
+/// One generated image returned from the model.
+#[derive(Debug, Clone, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct GeneratedImage {
+    /// Full data URI: `data:image/png;base64,...`
+    pub data_uri: String,
+    pub mime_type: String,
+}
+
+/// The complete response from an image generation call.
+#[derive(Debug, Clone, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ImageGenResponse {
+    pub images: Vec<GeneratedImage>,
+    pub model: String,
+    pub provider: String,
+    pub prompt: String,
+    /// Optional descriptive text returned alongside the image by the model.
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub description: Option<String>,
+}
+
+#[derive(Debug, Error)]
+pub enum ImageGenError {
+    #[error("missing Gemini API key — set GEMINI_API_KEY or configure api_key for NanoBanana image generation")]
+    MissingApiKey,
+    #[error("API request failed: {0}")]
+    Request(#[from] reqwest::Error),
+    #[error("the model returned no images for this prompt")]
+    NoImagesReturned,
+    #[error("model error: {0}")]
+    ModelError(String),
+    #[error("unexpected response structure from the image model")]
+    UnexpectedResponse,
+}
+
+/// Generate images using Google NanoBanana (Gemini image generation model).
+///
+/// Uses the same `generativelanguage.googleapis.com` endpoint as text chat,
+/// but with `responseModalities: ["TEXT", "IMAGE"]` in the generation config.
+pub async fn generate_images(
+    config: &MintConfig,
+    request: &ImageGenRequest,
+) -> Result<ImageGenResponse, ImageGenError> {
+    let client = crate::HTTP_CLIENT.clone();
+    call_nanobanana(&client, config, request).await
+}
+
+async fn call_nanobanana(
+    client: &Client,
+    config: &MintConfig,
+    request: &ImageGenRequest,
+) -> Result<ImageGenResponse, ImageGenError> {
+    // Resolve API key — same field as Gemini chat
+    let api_key = if config.api_key.trim().is_empty() {
+        std::env::var("GEMINI_API_KEY").unwrap_or_default()
+    } else {
+        config.api_key.clone()
+    };
+    if api_key.trim().is_empty() {
+        return Err(ImageGenError::MissingApiKey);
+    }
+
+    let model = match request.model.as_ref().map(|m| m.trim()).filter(|m| !m.is_empty()) {
+        Some(m) => m.to_owned(),
+        None => {
+            let config_model = config.nanobanana_model.trim();
+            if config_model.is_empty() {
+                "gemini-2.5-flash-image".to_owned()
+            } else {
+                config_model.to_owned()
+            }
+        }
+    };
+
+    let url = format!(
+        "https://generativelanguage.googleapis.com/v1beta/models/{model}:generateContent"
+    );
+
+    // Build a prompt that embeds aspect ratio guidance if requested
+    let full_prompt = build_prompt(request);
+
+    let num_images = request.num_images.unwrap_or(1).clamp(1, 4);
+
+    let payload = json!({
+        "contents": [{
+            "parts": [{ "text": full_prompt }]
+        }],
+        "generationConfig": {
+            "responseModalities": ["TEXT", "IMAGE"],
+            "candidateCount": num_images
+        }
+    });
+
+    let response: Value = client
+        .post(&url)
+        .header("x-goog-api-key", &api_key)
+        .json(&payload)
+        .send()
+        .await?
+        .error_for_status()
+        .map_err(|e| {
+            // Surface useful error text from the model
+            ImageGenError::Request(e)
+        })?
+        .json()
+        .await?;
+
+    // Check for API-level error block
+    if let Some(err) = response.get("error") {
+        let msg = err["message"].as_str().unwrap_or("unknown API error");
+        return Err(ImageGenError::ModelError(msg.to_owned()));
+    }
+
+    parse_image_response(&response, &model, &request.prompt)
+}
+
+/// Parse the `generateContent` response and extract image parts.
+fn parse_image_response(
+    response: &Value,
+    model: &str,
+    original_prompt: &str,
+) -> Result<ImageGenResponse, ImageGenError> {
+    let candidates = response["candidates"]
+        .as_array()
+        .ok_or(ImageGenError::UnexpectedResponse)?;
+
+    let mut images = Vec::new();
+    let mut description: Option<String> = None;
+
+    for candidate in candidates {
+        let parts_owned: Vec<Value>;
+        let parts = match candidate["content"]["parts"].as_array() {
+            Some(p) => p,
+            None => {
+                parts_owned = vec![];
+                &parts_owned
+            }
+        };
+
+        for part in parts {
+            // Collect text description if present
+            if let Some(text) = part["text"].as_str() {
+                let text = text.trim();
+                if !text.is_empty() {
+                    description.get_or_insert_with(String::new).push_str(text);
+                }
+            }
+
+            // Collect inline image data
+            if let Some(inline) = part.get("inlineData") {
+                let mime_type = inline["mimeType"]
+                    .as_str()
+                    .unwrap_or("image/png")
+                    .to_owned();
+                let b64 = inline["data"].as_str().unwrap_or("");
+                if b64.is_empty() {
+                    continue;
+                }
+                // Validate it's actually decodable base64
+                if STANDARD.decode(b64).is_err() {
+                    continue;
+                }
+                let data_uri = format!("data:{mime_type};base64,{b64}");
+                images.push(GeneratedImage { data_uri, mime_type });
+            }
+        }
+    }
+
+    if images.is_empty() {
+        return Err(ImageGenError::NoImagesReturned);
+    }
+
+    Ok(ImageGenResponse {
+        images,
+        model: model.to_owned(),
+        provider: "nanobanana".to_owned(),
+        prompt: original_prompt.to_owned(),
+        description,
+    })
+}
+
+/// Build the final prompt string, optionally embedding aspect ratio guidance.
+fn build_prompt(request: &ImageGenRequest) -> String {
+    let mut prompt = request.prompt.trim().to_owned();
+
+    if let Some(ref neg) = request.negative_prompt {
+        let neg = neg.trim();
+        if !neg.is_empty() {
+            prompt.push_str(&format!("\n\nNegative prompt (avoid these elements): {neg}"));
+        }
+    }
+
+    if let Some(ref ratio) = request.aspect_ratio {
+        let ratio = ratio.trim();
+        if !ratio.is_empty() && ratio != "1:1" {
+            prompt.push_str(&format!(
+                "\n\nGenerate the image with a {ratio} aspect ratio."
+            ));
+        }
+    }
+
+    prompt
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn build_prompt_plain() {
+        let req = ImageGenRequest {
+            prompt: "a red apple".to_owned(),
+            negative_prompt: None,
+            aspect_ratio: None,
+            num_images: None,
+        };
+        assert_eq!(build_prompt(&req), "a red apple");
+    }
+
+    #[test]
+    fn build_prompt_with_negative_and_ratio() {
+        let req = ImageGenRequest {
+            prompt: "a cat".to_owned(),
+            negative_prompt: Some("blurry, low quality".to_owned()),
+            aspect_ratio: Some("16:9".to_owned()),
+            num_images: Some(2),
+        };
+        let result = build_prompt(&req);
+        assert!(result.contains("a cat"));
+        assert!(result.contains("Negative prompt"));
+        assert!(result.contains("16:9"));
+    }
+
+    #[test]
+    fn build_prompt_default_ratio_not_added() {
+        let req = ImageGenRequest {
+            prompt: "a dog".to_owned(),
+            negative_prompt: None,
+            aspect_ratio: Some("1:1".to_owned()),
+            num_images: None,
+        };
+        // "1:1" is default — should not append extra text
+        assert!(!build_prompt(&req).contains("aspect ratio"));
+    }
+
+    #[test]
+    fn num_images_clamped() {
+        assert_eq!(5u8.clamp(1, 4), 4);
+        assert_eq!(0u8.clamp(1, 4), 1);
+    }
+}
diff --git a/crates/mint-core/src/lib.rs b/crates/mint-core/src/lib.rs
index 74b2edb..7924a37 100644
--- a/crates/mint-core/src/lib.rs
+++ b/crates/mint-core/src/lib.rs
@@ -5,6 +5,7 @@ pub mod chat;
 pub mod code_tools;
 pub mod config;
 pub mod files;
+pub mod image_gen;
 pub mod knowledge;
 pub mod mcp;
 pub mod memory;
@@ -55,6 +56,9 @@ pub use orchestration::{
     orchestrate_agent_loop, orchestrate_chat, orchestrate_chat_stream,
     orchestrate_chat_stream_with_fallback, orchestrate_chat_with_fallback,
 };
+pub use image_gen::{
+    GeneratedImage, ImageGenError, ImageGenRequest, ImageGenResponse, generate_images,
+};
 pub use pictures::{
     PictureEntry, PictureError, list_saved_pictures, parse_data_uri, save_chat_images,
     save_sent_image,
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 2b59c8e..4b3a967 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -37,6 +37,7 @@ use mint_core::{
     extract_document_text, google_tts_urls, list_saved_pictures, load_config, load_workflows,
     orchestrate_agent_loop, orchestrate_chat_stream_with_fallback, orchestrate_chat_with_fallback,
     propose_code_edits, save_chat_images, save_config, start_channels, weather, workflows_path,
+    ImageGenRequest,
 };
 use plugins::execute_plugin;
 
@@ -626,6 +627,49 @@ async fn submit_tool_approval(
     }
 }
 
+#[derive(serde::Serialize)]
+#[serde(rename_all = "camelCase")]
+struct DesktopImageGenResponse {
+    images: Vec<PictureEntry>,
+    model: String,
+    provider: String,
+    prompt: String,
+    description: Option<String>,
+}
+
+#[tauri::command]
+async fn generate_images(
+    request: ImageGenRequest,
+) -> Result<DesktopImageGenResponse, String> {
+    let config = load_config().map_err(|error| error.to_string())?;
+    
+    // Call core generate_images logic
+    let result = mint_core::generate_images(&config, &request)
+        .await
+        .map_err(|error| error.to_string())?;
+        
+    // Save images to Pictures library (just like api_server does)
+    let data_uris: Vec<String> = result
+        .images
+        .iter()
+        .map(|img| img.data_uri.clone())
+        .collect();
+    let saved = save_chat_images(
+        data_uris,
+        Some("nanobanana".into()),
+        Some(request.prompt.clone()),
+    )
+    .map_err(|error| error.to_string())?;
+    
+    Ok(DesktopImageGenResponse {
+        images: saved,
+        model: result.model,
+        provider: result.provider,
+        prompt: result.prompt,
+        description: result.description,
+    })
+}
+
 #[tauri::command]
 fn list_pictures() -> Result<Vec<PictureEntry>, String> {
     list_saved_pictures().map_err(|error| error.to_string())
@@ -978,6 +1022,7 @@ pub fn run() {
         .invoke_handler(tauri::generate_handler![
             get_runtime_status,
             get_workspace_tree,
+            generate_images,
             select_workspace_directory,
             get_config,
             get_updater_status,
diff --git a/src/renderer/src-web/components/DashboardSidebar.tsx b/src/renderer/src-web/components/DashboardSidebar.tsx
index 2ff34d2..53bd0b4 100644
--- a/src/renderer/src-web/components/DashboardSidebar.tsx
+++ b/src/renderer/src-web/components/DashboardSidebar.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-export type DashboardView = 'chat' | 'pictures' | 'model'
+export type DashboardView = 'chat' | 'pictures' | 'model' | 'imagine'
 
 interface ChatSessionItem {
   id: string
@@ -95,6 +95,14 @@ export default function DashboardSidebar({
         </span>
         <span>Pictures</span>
       </button>
+      <button className={`sidebar-top-action ${view === 'imagine' ? 'is-active' : ''}`} onClick={() => onSetView('imagine')}>
+        <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+          </svg>
+        </span>
+        <span>Image Studio</span>
+      </button>
 
       <div className="sidebar-section">
         <div className="sidebar-section-title">Conversation CLI</div>
diff --git a/src/renderer/src-web/components/ImageStudioPanel.tsx b/src/renderer/src-web/components/ImageStudioPanel.tsx
new file mode 100644
index 0000000..bfff90a
--- /dev/null
+++ b/src/renderer/src-web/components/ImageStudioPanel.tsx
@@ -0,0 +1,412 @@
+import React, { useState, useRef, useCallback } from 'react'
+import {
+  generateImages,
+  convertFileSrc,
+  type ImageGenRequest,
+  type ImageGenResponse,
+  type PictureEntry,
+} from '../tauri'
+
+type AspectRatio = '1:1' | '16:9' | '9:16' | '4:3'
+
+interface ImageStudioPanelProps {
+  view: string
+  onRefreshPictures?: () => void
+  onSendToChat?: (dataUri: string, prompt: string) => void
+}
+
+const ASPECT_OPTIONS: { value: AspectRatio; label: string; icon: string }[] = [
+  { value: '1:1',  label: '1:1',  icon: '⬛' },
+  { value: '16:9', label: '16:9', icon: '▬' },
+  { value: '9:16', label: '9:16', icon: '▮' },
+  { value: '4:3',  label: '4:3',  icon: '⬜' },
+]
+
+const STYLE_SUGGESTIONS = [
+  'photorealistic', 'anime', 'oil painting', 'watercolor',
+  'cinematic', 'digital art', '3D render', 'sketch',
+]
+
+function SkeletonCard() {
+  return (
+    <div className="img-studio-skeleton">
+      <div className="img-studio-skeleton-shine" />
+    </div>
+  )
+}
+
+export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat }: ImageStudioPanelProps) {
+  const [prompt, setPrompt] = useState('')
+  const [negativePrompt, setNegativePrompt] = useState('')
+  const [showNegative, setShowNegative] = useState(false)
+  const [selectedModel, setSelectedModel] = useState('gemini-2.5-flash-image')
+  const [customModel, setCustomModel] = useState('')
+  const [aspectRatio, setAspectRatio] = useState<AspectRatio>('1:1')
+  const [numImages, setNumImages] = useState(1)
+  const [generating, setGenerating] = useState(false)
+  const [error, setError] = useState('')
+  const [result, setResult] = useState<ImageGenResponse | null>(null)
+  const [promptHistory, setPromptHistory] = useState<string[]>([])
+  const promptRef = useRef<HTMLTextAreaElement>(null)
+
+  const handleGenerate = useCallback(async () => {
+    const trimmed = prompt.trim()
+    if (!trimmed || generating) return
+
+    setGenerating(true)
+    setError('')
+    setResult(null)
+
+    const request: ImageGenRequest = {
+      prompt: trimmed,
+      negativePrompt: negativePrompt.trim() || undefined,
+      aspectRatio,
+      numImages,
+      model: selectedModel === 'custom' ? customModel.trim() : selectedModel,
+    }
+
+    try {
+      const response = await generateImages(request)
+      setResult(response)
+      setPromptHistory((prev) =>
+        [trimmed, ...prev.filter((p) => p !== trimmed)].slice(0, 8),
+      )
+      onRefreshPictures?.()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setGenerating(false)
+    }
+  }, [prompt, negativePrompt, aspectRatio, numImages, generating, onRefreshPictures, selectedModel, customModel])
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault()
+      handleGenerate()
+    }
+  }
+
+  const downloadImage = (entry: PictureEntry, index: number) => {
+    const a = document.createElement('a')
+    a.href = entry.url || entry.path
+    a.download = `mint-imagine-${index + 1}.png`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+  }
+
+  if (view !== 'imagine') return null
+
+  return (
+    <div className="img-studio" id="image-studio-panel" role="main" aria-label="Image Studio">
+      {/* Header */}
+      <header className="img-studio-header">
+        <div className="img-studio-header-title">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+          </svg>
+          <h1>Image Studio</h1>
+          <span className="img-studio-badge">
+            {selectedModel === 'custom' ? (customModel.trim() || 'custom') : selectedModel}
+          </span>
+        </div>
+        <p className="img-studio-subtitle">Generate images with Google's Gemini image model</p>
+      </header>
+
+      {/* Main content */}
+      <div className="img-studio-content">
+        {/* Left: controls */}
+        <section className="img-studio-controls" aria-label="Generation settings">
+          {/* Model selection */}
+          <div className="img-studio-field">
+            <label className="img-studio-label" htmlFor="img-studio-model">
+              Model
+              <span className="img-studio-label-hint">Select the generation model</span>
+            </label>
+            <select
+              id="img-studio-model"
+              className="img-studio-textarea"
+              style={{ padding: '8px 10px', height: '38px', cursor: 'pointer' }}
+              value={selectedModel}
+              onChange={(e) => setSelectedModel(e.target.value)}
+              disabled={generating}
+            >
+              <option value="gemini-2.5-flash-image">Gemini 2.5 Flash Image (Default)</option>
+              <option value="gemini-3.1-flash-image">Gemini 3.1 Flash Image</option>
+              <option value="gemini-3-pro-image">Gemini 3 Pro Image</option>
+              <option value="imagen-3.0-generate-002">Imagen 3</option>
+              <option value="custom">Custom Model ID...</option>
+            </select>
+            {selectedModel === 'custom' && (
+              <input
+                type="text"
+                className="img-studio-textarea img-studio-textarea--sm"
+                style={{ marginTop: '5px' }}
+                placeholder="e.g. gemini-3.1-flash-image"
+                value={customModel}
+                onChange={(e) => setCustomModel(e.target.value)}
+                disabled={generating}
+              />
+            )}
+          </div>
+
+          {/* Prompt */}
+          <div className="img-studio-field">
+            <label className="img-studio-label" htmlFor="img-studio-prompt">
+              Prompt
+              <span className="img-studio-label-hint">Describe the image you want</span>
+            </label>
+            <textarea
+              id="img-studio-prompt"
+              ref={promptRef}
+              className="img-studio-textarea"
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="a dragon flying over Bangkok at sunset, golden hour, ultra-detailed..."
+              rows={4}
+              disabled={generating}
+              aria-required="true"
+            />
+            <div className="img-studio-prompt-hint">⌘+Enter to generate</div>
+          </div>
+
+          {/* Style suggestion chips */}
+          <div className="img-studio-field">
+            <span className="img-studio-label">Style suggestions</span>
+            <div className="img-studio-chips" role="group" aria-label="Style suggestions">
+              {STYLE_SUGGESTIONS.map((style) => (
+                <button
+                  key={style}
+                  type="button"
+                  className="img-studio-chip"
+                  onClick={() => setPrompt((p) => p.trim() ? `${p.trim()}, ${style}` : style)}
+                  disabled={generating}
+                  title={`Add "${style}" to prompt`}
+                >
+                  {style}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Negative prompt (collapsible) */}
+          <div className="img-studio-field">
+            <button
+              type="button"
+              className="img-studio-toggle"
+              onClick={() => setShowNegative((v) => !v)}
+              aria-expanded={showNegative}
+              aria-controls="img-studio-negative-wrap"
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"
+                style={{ transform: showNegative ? 'rotate(90deg)' : 'none', transition: 'transform 0.2s' }}>
+                <polyline points="9 18 15 12 9 6"/>
+              </svg>
+              Negative prompt
+              {negativePrompt.trim() && <span className="img-studio-badge-dot" aria-label="has content" />}
+            </button>
+            {showNegative && (
+              <div id="img-studio-negative-wrap">
+                <textarea
+                  id="img-studio-negative"
+                  className="img-studio-textarea img-studio-textarea--sm"
+                  value={negativePrompt}
+                  onChange={(e) => setNegativePrompt(e.target.value)}
+                  placeholder="blurry, low quality, distorted, text, watermark..."
+                  rows={2}
+                  disabled={generating}
+                />
+              </div>
+            )}
+          </div>
+
+          {/* Aspect ratio */}
+          <div className="img-studio-field">
+            <span className="img-studio-label">Aspect ratio</span>
+            <div className="img-studio-aspect-group" role="radiogroup" aria-label="Aspect ratio">
+              {ASPECT_OPTIONS.map(({ value, label, icon }) => (
+                <button
+                  key={value}
+                  type="button"
+                  role="radio"
+                  aria-checked={aspectRatio === value}
+                  className={`img-studio-aspect-btn ${aspectRatio === value ? 'is-active' : ''}`}
+                  onClick={() => setAspectRatio(value)}
+                  disabled={generating}
+                  id={`img-studio-aspect-${value.replace(':', 'x')}`}
+                >
+                  <span className="img-studio-aspect-icon" aria-hidden="true">{icon}</span>
+                  <span>{label}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Count */}
+          <div className="img-studio-field">
+            <span className="img-studio-label">Number of images</span>
+            <div className="img-studio-count-group" role="radiogroup" aria-label="Image count">
+              {[1, 2, 3, 4].map((n) => (
+                <button
+                  key={n}
+                  type="button"
+                  role="radio"
+                  aria-checked={numImages === n}
+                  className={`img-studio-count-btn ${numImages === n ? 'is-active' : ''}`}
+                  onClick={() => setNumImages(n)}
+                  disabled={generating}
+                  id={`img-studio-count-${n}`}
+                >
+                  {n}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Generate button */}
+          <button
+            id="img-studio-generate-btn"
+            type="button"
+            className={`img-studio-generate-btn ${generating ? 'is-loading' : ''}`}
+            onClick={handleGenerate}
+            disabled={!prompt.trim() || generating}
+            aria-busy={generating}
+          >
+            {generating ? (
+              <>
+                <span className="img-studio-spinner" aria-hidden="true" />
+                Generating...
+              </>
+            ) : (
+              <>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+                </svg>
+                Generate Image
+              </>
+            )}
+          </button>
+
+          {/* Error */}
+          {error && (
+            <div className="img-studio-error" role="alert">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
+              </svg>
+              <span>{error}</span>
+              <button type="button" onClick={() => setError('')} aria-label="Dismiss error">×</button>
+            </div>
+          )}
+
+          {/* Prompt history */}
+          {promptHistory.length > 0 && (
+            <div className="img-studio-field">
+              <span className="img-studio-label">Recent prompts</span>
+              <div className="img-studio-history">
+                {promptHistory.map((p) => (
+                  <button
+                    key={p}
+                    type="button"
+                    className="img-studio-history-item"
+                    onClick={() => { setPrompt(p); promptRef.current?.focus() }}
+                    disabled={generating}
+                    title={p}
+                  >
+                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                      <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
+                    </svg>
+                    <span>{p}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </section>
+
+        {/* Right: results */}
+        <section className="img-studio-results" aria-label="Generated images" aria-live="polite">
+          {generating && (
+            <div className="img-studio-skeleton-grid">
+              {Array.from({ length: numImages }).map((_, i) => (
+                <SkeletonCard key={i} />
+              ))}
+              <p className="img-studio-generating-label" aria-live="assertive">
+                Creating {numImages} image{numImages > 1 ? 's' : ''} — this may take a few seconds…
+              </p>
+            </div>
+          )}
+
+          {!generating && result && (
+            <>
+              {result.description && (
+                <p className="img-studio-description">{result.description}</p>
+              )}
+              <div
+                className="img-studio-grid"
+                style={{ '--img-count': result.images.length } as React.CSSProperties}
+              >
+                {result.images.map((entry, idx) => (
+                  <article key={entry.id} className="img-studio-card" aria-label={`Generated image ${idx + 1}`}>
+                    <div className="img-studio-card-img-wrap">
+                      <img
+                        src={convertFileSrc(entry.url || entry.path)}
+                        alt={entry.message || prompt}
+                        className="img-studio-card-img"
+                        loading="eager"
+                        decoding="async"
+                      />
+                    </div>
+                    <div className="img-studio-card-actions">
+                      <button
+                        type="button"
+                        className="img-studio-action-btn"
+                        onClick={() => downloadImage(entry, idx)}
+                        title="Download image"
+                        id={`img-studio-download-${idx}`}
+                      >
+                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
+                        </svg>
+                        Download
+                      </button>
+                      {onSendToChat && (
+                        <button
+                          type="button"
+                          className="img-studio-action-btn img-studio-action-btn--primary"
+                          onClick={() => onSendToChat(entry.url || entry.path, prompt)}
+                          title="Send to Chat"
+                          id={`img-studio-send-${idx}`}
+                        >
+                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                            <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+                          </svg>
+                          Send to Chat
+                        </button>
+                      )}
+                    </div>
+                  </article>
+                ))}
+              </div>
+              <p className="img-studio-meta">
+                Model: <strong>{result.model}</strong> · {result.images.length} image{result.images.length > 1 ? 's' : ''} · Saved to gallery
+              </p>
+            </>
+          )}
+
+          {!generating && !result && (
+            <div className="img-studio-empty">
+              <div className="img-studio-empty-icon" aria-hidden="true">
+                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+                </svg>
+              </div>
+              <p>Your generated images will appear here</p>
+              <span>Type a prompt and click Generate Image to start</span>
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  )
+}
diff --git a/src/renderer/src-web/components/MintDashboard.tsx b/src/renderer/src-web/components/MintDashboard.tsx
index 1d33d1c..04dd3b2 100644
--- a/src/renderer/src-web/components/MintDashboard.tsx
+++ b/src/renderer/src-web/components/MintDashboard.tsx
@@ -21,6 +21,7 @@ import {
 import ChatPanel from './ChatPanel'
 import DashboardSidebar, { type DashboardView } from './DashboardSidebar'
 import PicturesLibrary from './PicturesLibrary'
+import ImageStudioPanel from './ImageStudioPanel'
 
 const DEFAULT_CONFIG = {
   theme: 'dark',
@@ -745,6 +746,14 @@ export default function MintDashboard() {
           />
         </main>
         <PicturesLibrary view={view} pictures={pictures} onSetView={changeView} />
+        <ImageStudioPanel
+          view={view}
+          onRefreshPictures={refreshPictures}
+          onSendToChat={(_url, imgPrompt) => {
+            setView('chat')
+            setMessage(imgPrompt)
+          }}
+        />
       </div>
       <div className={`startup-loading ${startupReady ? 'is-hidden' : ''}`} aria-live="polite" aria-busy={!startupReady}>
         <div className="startup-loading-content">
diff --git a/src/renderer/src-web/css/image-studio.css b/src/renderer/src-web/css/image-studio.css
new file mode 100644
index 0000000..617462e
--- /dev/null
+++ b/src/renderer/src-web/css/image-studio.css
@@ -0,0 +1,582 @@
+/* ============================================================
+   Image Studio Panel — NanoBanana (Gemini Image Generation)
+   ============================================================ */
+
+/* Root panel: overlays the main content area, aligned with sidebar */
+.img-studio {
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: var(--sidebar-expanded-width, 264px);
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg-gradient, radial-gradient(circle at top left, #064e3b, #111827 52%, #0b1020));
+  z-index: 10;
+  transition: left 0.22s ease;
+}
+
+/* Adjust left position when the sidebar is collapsed */
+.app-body.sidebar-collapsed .img-studio {
+  left: calc(var(--sidebar-collapsed-width, 56px) + var(--sidebar-content-gap, 10px));
+}
+
+/* Only visible when view === 'imagine' */
+.img-studio[id="image-studio-panel"]:not([hidden]) {
+  display: flex;
+}
+
+/* MintDashboard renders ImageStudioPanel always, use view prop to show/hide via :not class trick */
+/* We handle display via the component returning null if view !== 'imagine' */
+
+/* ── Header ─────────────────────────────────────────────── */
+.img-studio-header {
+  padding: 20px 28px 12px;
+  border-bottom: 1px solid rgb(148 163 184 / 14%);
+  background: rgb(15 23 42 / 60%);
+  backdrop-filter: var(--glass-blur, blur(16px));
+  flex-shrink: 0;
+}
+
+.img-studio-header-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #d1fae5;
+}
+
+.img-studio-header-title h1 {
+  margin: 0;
+  font-size: 1.18rem;
+  font-weight: 700;
+  color: #f0fdf4;
+}
+
+.img-studio-header-title svg {
+  color: #34d399;
+  flex-shrink: 0;
+}
+
+.img-studio-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 99px;
+  background: linear-gradient(90deg, rgb(52 211 153 / 22%), rgb(79 131 230 / 22%));
+  border: 1px solid rgb(52 211 153 / 30%);
+  color: #6ee7b7;
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.img-studio-subtitle {
+  margin: 6px 0 0;
+  color: #64748b;
+  font-size: 0.80rem;
+}
+
+/* ── Main layout: 2-column ─────────────────────────────── */
+.img-studio-content {
+  display: grid;
+  grid-template-columns: 320px 1fr;
+  min-height: 0;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* ── Controls (left column) ────────────────────────────── */
+.img-studio-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 22px 20px;
+  border-right: 1px solid rgb(148 163 184 / 12%);
+  background: rgb(7 12 28 / 50%);
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgb(52 211 153 / 20%) transparent;
+}
+
+/* ── Field groups ──────────────────────────────────────── */
+.img-studio-field {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.img-studio-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #94a3b8;
+  font-size: 0.76rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.img-studio-label-hint {
+  text-transform: none;
+  font-weight: 400;
+  color: #475569;
+  letter-spacing: 0;
+}
+
+/* ── Textarea ──────────────────────────────────────────── */
+.img-studio-textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid rgb(148 163 184 / 18%);
+  border-radius: 10px;
+  background: rgb(15 23 42 / 70%);
+  color: #f1f5f9;
+  font-size: 0.87rem;
+  line-height: 1.55;
+  resize: vertical;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.img-studio-textarea:focus {
+  border-color: rgb(52 211 153 / 50%);
+  box-shadow: 0 0 0 2px rgb(52 211 153 / 10%);
+}
+
+.img-studio-textarea--sm {
+  font-size: 0.82rem;
+}
+
+.img-studio-prompt-hint {
+  color: #334155;
+  font-size: 0.70rem;
+  text-align: right;
+}
+
+/* ── Style chips ───────────────────────────────────────── */
+.img-studio-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.img-studio-chip {
+  padding: 4px 10px;
+  border: 1px solid rgb(148 163 184 / 18%);
+  border-radius: 99px;
+  background: rgb(30 41 59 / 55%);
+  color: #94a3b8;
+  font-size: 0.73rem;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.img-studio-chip:hover:not(:disabled) {
+  border-color: rgb(52 211 153 / 40%);
+  background: rgb(16 185 129 / 14%);
+  color: #6ee7b7;
+}
+
+/* ── Negative prompt toggle ────────────────────────────── */
+.img-studio-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #64748b;
+  font-size: 0.78rem;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.img-studio-toggle:hover {
+  color: #94a3b8;
+}
+
+.img-studio-badge-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #34d399;
+  margin-left: 2px;
+}
+
+/* ── Aspect ratio buttons ──────────────────────────────── */
+.img-studio-aspect-group,
+.img-studio-count-group {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.img-studio-aspect-btn,
+.img-studio-count-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 12px;
+  border: 1px solid rgb(148 163 184 / 18%);
+  border-radius: 8px;
+  background: rgb(15 23 42 / 60%);
+  color: #64748b;
+  font-size: 0.78rem;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.img-studio-aspect-btn:hover:not(:disabled),
+.img-studio-count-btn:hover:not(:disabled) {
+  border-color: rgb(52 211 153 / 35%);
+  background: rgb(16 185 129 / 12%);
+  color: #a7f3d0;
+}
+
+.img-studio-aspect-btn.is-active,
+.img-studio-count-btn.is-active {
+  border-color: rgb(52 211 153 / 60%);
+  background: rgb(16 185 129 / 22%);
+  color: #6ee7b7;
+  font-weight: 600;
+}
+
+.img-studio-aspect-icon {
+  font-size: 0.65rem;
+  opacity: 0.7;
+}
+
+.img-studio-count-btn {
+  min-width: 40px;
+  justify-content: center;
+  font-size: 0.88rem;
+  font-weight: 600;
+}
+
+/* ── Generate button ───────────────────────────────────── */
+.img-studio-generate-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 11px 18px;
+  border: none;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #059669 0%, #047857 100%);
+  color: #fff;
+  font-size: 0.88rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
+  box-shadow: 0 2px 12px rgb(5 150 105 / 30%);
+}
+
+.img-studio-generate-btn:hover:not(:disabled) {
+  opacity: 0.92;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 18px rgb(5 150 105 / 40%);
+}
+
+.img-studio-generate-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.img-studio-generate-btn.is-loading {
+  cursor: wait;
+}
+
+/* ── Spinner ───────────────────────────────────────────── */
+.img-studio-spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgb(255 255 255 / 30%);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: img-studio-spin 0.6s linear infinite;
+}
+
+@keyframes img-studio-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── Error ─────────────────────────────────────────────── */
+.img-studio-error {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 12px;
+  border: 1px solid rgb(251 113 133 / 35%);
+  border-radius: 8px;
+  background: rgb(127 29 29 / 22%);
+  color: #fca5a5;
+  font-size: 0.80rem;
+  line-height: 1.45;
+}
+
+.img-studio-error svg {
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.img-studio-error span { flex: 1; }
+
+.img-studio-error button {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #fca5a5;
+  font-size: 1rem;
+  cursor: pointer;
+  line-height: 1;
+  opacity: 0.7;
+}
+
+.img-studio-error button:hover { opacity: 1; }
+
+/* ── History ───────────────────────────────────────────── */
+.img-studio-history {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.img-studio-history-item {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 8px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #475569;
+  font-size: 0.75rem;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  overflow: hidden;
+}
+
+.img-studio-history-item:hover:not(:disabled) {
+  background: rgb(30 41 59 / 55%);
+  color: #94a3b8;
+}
+
+.img-studio-history-item span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.img-studio-history-item svg { flex-shrink: 0; }
+
+/* ── Results (right column) ────────────────────────────── */
+.img-studio-results {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px 28px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgb(52 211 153 / 20%) transparent;
+}
+
+/* ── Skeleton loading ──────────────────────────────────── */
+.img-studio-skeleton-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 14px;
+}
+
+.img-studio-skeleton {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: 12px;
+  background: rgb(30 41 59 / 55%);
+  overflow: hidden;
+}
+
+.img-studio-skeleton-shine {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgb(52 211 153 / 8%) 50%,
+    transparent 100%
+  );
+  animation: img-studio-shimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes img-studio-shimmer {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(100%);  }
+}
+
+.img-studio-generating-label {
+  grid-column: 1 / -1;
+  margin: 4px 0 0;
+  color: #475569;
+  font-size: 0.78rem;
+  text-align: center;
+  animation: img-studio-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes img-studio-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.45; }
+}
+
+/* ── Result grid ───────────────────────────────────────── */
+.img-studio-description {
+  margin: 0;
+  color: #94a3b8;
+  font-size: 0.82rem;
+  line-height: 1.5;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: rgb(30 41 59 / 40%);
+  border: 1px solid rgb(148 163 184 / 12%);
+}
+
+.img-studio-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 14px;
+}
+
+/* ── Individual image card ─────────────────────────────── */
+.img-studio-card {
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  background: rgb(15 23 42 / 55%);
+  border: 1px solid rgb(148 163 184 / 14%);
+  overflow: hidden;
+  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+}
+
+.img-studio-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 30px rgb(0 0 0 / 35%);
+  border-color: rgb(52 211 153 / 35%);
+}
+
+.img-studio-card-img-wrap {
+  position: relative;
+  aspect-ratio: 1;
+  background: #111827;
+  overflow: hidden;
+}
+
+.img-studio-card-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.3s;
+}
+
+.img-studio-card:hover .img-studio-card-img {
+  transform: scale(1.02);
+}
+
+.img-studio-card-actions {
+  display: flex;
+  gap: 6px;
+  padding: 8px 10px;
+  border-top: 1px solid rgb(148 163 184 / 10%);
+}
+
+.img-studio-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex: 1;
+  justify-content: center;
+  padding: 5px 8px;
+  border: 1px solid rgb(148 163 184 / 18%);
+  border-radius: 7px;
+  background: transparent;
+  color: #64748b;
+  font-size: 0.72rem;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.img-studio-action-btn:hover {
+  background: rgb(30 41 59 / 70%);
+  color: #94a3b8;
+  border-color: rgb(148 163 184 / 28%);
+}
+
+.img-studio-action-btn--primary {
+  border-color: rgb(52 211 153 / 30%);
+  color: #34d399;
+}
+
+.img-studio-action-btn--primary:hover {
+  background: rgb(16 185 129 / 15%);
+  color: #6ee7b7;
+  border-color: rgb(52 211 153 / 50%);
+}
+
+.img-studio-meta {
+  margin: 0;
+  color: #334155;
+  font-size: 0.73rem;
+  text-align: right;
+}
+
+.img-studio-meta strong { color: #475569; }
+
+/* ── Empty state ───────────────────────────────────────── */
+.img-studio-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  flex: 1;
+  min-height: 300px;
+  text-align: center;
+  color: #334155;
+}
+
+.img-studio-empty-icon {
+  opacity: 0.18;
+  color: #34d399;
+}
+
+.img-studio-empty p {
+  margin: 0;
+  color: #475569;
+  font-size: 0.92rem;
+}
+
+.img-studio-empty span {
+  font-size: 0.78rem;
+  color: #334155;
+}
+
+/* ── Responsive ───────────────────────────────────────── */
+@media (max-width: 860px) {
+  .img-studio-content {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    overflow-y: auto;
+  }
+
+  .img-studio-controls {
+    border-right: none;
+    border-bottom: 1px solid rgb(148 163 184 / 12%);
+    max-height: 50vh;
+    overflow-y: auto;
+  }
+}
diff --git a/src/renderer/src-web/index.css b/src/renderer/src-web/index.css
index 06c3d42..43bb428 100644
--- a/src/renderer/src-web/index.css
+++ b/src/renderer/src-web/index.css
@@ -2,6 +2,7 @@
 @import './css/settings.css';
 @import './css/spotlight.css';
 @import './css/widget.css';
+@import './css/image-studio.css';
 
 * {
   box-sizing: border-box;
diff --git a/src/renderer/src-web/tauri.ts b/src/renderer/src-web/tauri.ts
index 72f51f9..b539a72 100644
--- a/src/renderer/src-web/tauri.ts
+++ b/src/renderer/src-web/tauri.ts
@@ -66,6 +66,23 @@ export interface PictureEntry {
   thumbnailUrl?: string
 }
 
+export interface ImageGenRequest {
+  prompt: string
+  negativePrompt?: string
+  aspectRatio?: '1:1' | '16:9' | '9:16' | '4:3'
+  numImages?: number
+  model?: string
+}
+
+export interface ImageGenResponse {
+  images: PictureEntry[]
+  model: string
+  provider: string
+  prompt: string
+  description?: string | null
+}
+
+
 export interface CodeEdit {
   path: string
   content: string
@@ -404,6 +421,42 @@ export async function listSavedPictures(): Promise<PictureEntry[]> {
   return invoke<PictureEntry[]>('list_pictures')
 }
 
+export async function generateImages(
+  request: ImageGenRequest
+): Promise<ImageGenResponse> {
+  if (typeof window === 'undefined' || !isTauriRuntime()) {
+    const API_BASE = getApiBase()
+    const res = await fetch(`${API_BASE}/image-generate`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        prompt: request.prompt,
+        negativePrompt: request.negativePrompt,
+        aspectRatio: request.aspectRatio ?? '1:1',
+        numImages: request.numImages ?? 1,
+        model: request.model,
+      }),
+    })
+    if (!res.ok) {
+      const err = await res.json().catch(() => null)
+      throw new Error(err?.error || `Image generation failed: HTTP ${res.status}`)
+    }
+    const data = await res.json()
+    // Normalize image URLs for web mode
+    const images: PictureEntry[] = Array.isArray(data.images)
+      ? data.images.map((pic: PictureEntry) => {
+          const pictureUrl = pic.url ? `${API_BASE.replace('/api', '')}${pic.url}` : pic.url
+          return { ...pic, url: pictureUrl, thumbnailUrl: pictureUrl }
+        })
+      : []
+    return { ...data, images }
+  }
+  // Desktop / Tauri mode
+  const { invoke } = await import('@tauri-apps/api/core')
+  return invoke<ImageGenResponse>('generate_images', { request })
+}
+
+
 export async function submitToolApproval(token: string, approved: boolean): Promise<void> {
   if (typeof window === 'undefined' || !isTauriRuntime()) {
     return;
diff --git a/src/renderer/src/components/DashboardSidebar.tsx b/src/renderer/src/components/DashboardSidebar.tsx
index 62e7562..70f3ef3 100644
--- a/src/renderer/src/components/DashboardSidebar.tsx
+++ b/src/renderer/src/components/DashboardSidebar.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-export type DashboardView = 'chat' | 'pictures' | 'model' | 'workspeac'
+export type DashboardView = 'chat' | 'pictures' | 'model' | 'workspeac' | 'imagine'
 
 interface ChatSessionItem {
   id: string
@@ -133,6 +133,14 @@ export default function DashboardSidebar({
         </span>
         <span>Pictures</span>
       </button>
+      <button className={`sidebar-top-action ${view === 'imagine' ? 'is-active' : ''}`} onClick={() => onSetView('imagine')}>
+        <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+          </svg>
+        </span>
+        <span>Image Studio</span>
+      </button>
       <button className={`sidebar-top-action ${view === 'workspeac' ? 'is-active' : ''}`} onClick={() => onSetView('workspeac')}>
         <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
           <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
diff --git a/src/renderer/src/components/ImageStudioPanel.tsx b/src/renderer/src/components/ImageStudioPanel.tsx
new file mode 100644
index 0000000..bfff90a
--- /dev/null
+++ b/src/renderer/src/components/ImageStudioPanel.tsx
@@ -0,0 +1,412 @@
+import React, { useState, useRef, useCallback } from 'react'
+import {
+  generateImages,
+  convertFileSrc,
+  type ImageGenRequest,
+  type ImageGenResponse,
+  type PictureEntry,
+} from '../tauri'
+
+type AspectRatio = '1:1' | '16:9' | '9:16' | '4:3'
+
+interface ImageStudioPanelProps {
+  view: string
+  onRefreshPictures?: () => void
+  onSendToChat?: (dataUri: string, prompt: string) => void
+}
+
+const ASPECT_OPTIONS: { value: AspectRatio; label: string; icon: string }[] = [
+  { value: '1:1',  label: '1:1',  icon: '⬛' },
+  { value: '16:9', label: '16:9', icon: '▬' },
+  { value: '9:16', label: '9:16', icon: '▮' },
+  { value: '4:3',  label: '4:3',  icon: '⬜' },
+]
+
+const STYLE_SUGGESTIONS = [
+  'photorealistic', 'anime', 'oil painting', 'watercolor',
+  'cinematic', 'digital art', '3D render', 'sketch',
+]
+
+function SkeletonCard() {
+  return (
+    <div className="img-studio-skeleton">
+      <div className="img-studio-skeleton-shine" />
+    </div>
+  )
+}
+
+export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat }: ImageStudioPanelProps) {
+  const [prompt, setPrompt] = useState('')
+  const [negativePrompt, setNegativePrompt] = useState('')
+  const [showNegative, setShowNegative] = useState(false)
+  const [selectedModel, setSelectedModel] = useState('gemini-2.5-flash-image')
+  const [customModel, setCustomModel] = useState('')
+  const [aspectRatio, setAspectRatio] = useState<AspectRatio>('1:1')
+  const [numImages, setNumImages] = useState(1)
+  const [generating, setGenerating] = useState(false)
+  const [error, setError] = useState('')
+  const [result, setResult] = useState<ImageGenResponse | null>(null)
+  const [promptHistory, setPromptHistory] = useState<string[]>([])
+  const promptRef = useRef<HTMLTextAreaElement>(null)
+
+  const handleGenerate = useCallback(async () => {
+    const trimmed = prompt.trim()
+    if (!trimmed || generating) return
+
+    setGenerating(true)
+    setError('')
+    setResult(null)
+
+    const request: ImageGenRequest = {
+      prompt: trimmed,
+      negativePrompt: negativePrompt.trim() || undefined,
+      aspectRatio,
+      numImages,
+      model: selectedModel === 'custom' ? customModel.trim() : selectedModel,
+    }
+
+    try {
+      const response = await generateImages(request)
+      setResult(response)
+      setPromptHistory((prev) =>
+        [trimmed, ...prev.filter((p) => p !== trimmed)].slice(0, 8),
+      )
+      onRefreshPictures?.()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setGenerating(false)
+    }
+  }, [prompt, negativePrompt, aspectRatio, numImages, generating, onRefreshPictures, selectedModel, customModel])
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault()
+      handleGenerate()
+    }
+  }
+
+  const downloadImage = (entry: PictureEntry, index: number) => {
+    const a = document.createElement('a')
+    a.href = entry.url || entry.path
+    a.download = `mint-imagine-${index + 1}.png`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+  }
+
+  if (view !== 'imagine') return null
+
+  return (
+    <div className="img-studio" id="image-studio-panel" role="main" aria-label="Image Studio">
+      {/* Header */}
+      <header className="img-studio-header">
+        <div className="img-studio-header-title">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+          </svg>
+          <h1>Image Studio</h1>
+          <span className="img-studio-badge">
+            {selectedModel === 'custom' ? (customModel.trim() || 'custom') : selectedModel}
+          </span>
+        </div>
+        <p className="img-studio-subtitle">Generate images with Google's Gemini image model</p>
+      </header>
+
+      {/* Main content */}
+      <div className="img-studio-content">
+        {/* Left: controls */}
+        <section className="img-studio-controls" aria-label="Generation settings">
+          {/* Model selection */}
+          <div className="img-studio-field">
+            <label className="img-studio-label" htmlFor="img-studio-model">
+              Model
+              <span className="img-studio-label-hint">Select the generation model</span>
+            </label>
+            <select
+              id="img-studio-model"
+              className="img-studio-textarea"
+              style={{ padding: '8px 10px', height: '38px', cursor: 'pointer' }}
+              value={selectedModel}
+              onChange={(e) => setSelectedModel(e.target.value)}
+              disabled={generating}
+            >
+              <option value="gemini-2.5-flash-image">Gemini 2.5 Flash Image (Default)</option>
+              <option value="gemini-3.1-flash-image">Gemini 3.1 Flash Image</option>
+              <option value="gemini-3-pro-image">Gemini 3 Pro Image</option>
+              <option value="imagen-3.0-generate-002">Imagen 3</option>
+              <option value="custom">Custom Model ID...</option>
+            </select>
+            {selectedModel === 'custom' && (
+              <input
+                type="text"
+                className="img-studio-textarea img-studio-textarea--sm"
+                style={{ marginTop: '5px' }}
+                placeholder="e.g. gemini-3.1-flash-image"
+                value={customModel}
+                onChange={(e) => setCustomModel(e.target.value)}
+                disabled={generating}
+              />
+            )}
+          </div>
+
+          {/* Prompt */}
+          <div className="img-studio-field">
+            <label className="img-studio-label" htmlFor="img-studio-prompt">
+              Prompt
+              <span className="img-studio-label-hint">Describe the image you want</span>
+            </label>
+            <textarea
+              id="img-studio-prompt"
+              ref={promptRef}
+              className="img-studio-textarea"
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="a dragon flying over Bangkok at sunset, golden hour, ultra-detailed..."
+              rows={4}
+              disabled={generating}
+              aria-required="true"
+            />
+            <div className="img-studio-prompt-hint">⌘+Enter to generate</div>
+          </div>
+
+          {/* Style suggestion chips */}
+          <div className="img-studio-field">
+            <span className="img-studio-label">Style suggestions</span>
+            <div className="img-studio-chips" role="group" aria-label="Style suggestions">
+              {STYLE_SUGGESTIONS.map((style) => (
+                <button
+                  key={style}
+                  type="button"
+                  className="img-studio-chip"
+                  onClick={() => setPrompt((p) => p.trim() ? `${p.trim()}, ${style}` : style)}
+                  disabled={generating}
+                  title={`Add "${style}" to prompt`}
+                >
+                  {style}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Negative prompt (collapsible) */}
+          <div className="img-studio-field">
+            <button
+              type="button"
+              className="img-studio-toggle"
+              onClick={() => setShowNegative((v) => !v)}
+              aria-expanded={showNegative}
+              aria-controls="img-studio-negative-wrap"
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"
+                style={{ transform: showNegative ? 'rotate(90deg)' : 'none', transition: 'transform 0.2s' }}>
+                <polyline points="9 18 15 12 9 6"/>
+              </svg>
+              Negative prompt
+              {negativePrompt.trim() && <span className="img-studio-badge-dot" aria-label="has content" />}
+            </button>
+            {showNegative && (
+              <div id="img-studio-negative-wrap">
+                <textarea
+                  id="img-studio-negative"
+                  className="img-studio-textarea img-studio-textarea--sm"
+                  value={negativePrompt}
+                  onChange={(e) => setNegativePrompt(e.target.value)}
+                  placeholder="blurry, low quality, distorted, text, watermark..."
+                  rows={2}
+                  disabled={generating}
+                />
+              </div>
+            )}
+          </div>
+
+          {/* Aspect ratio */}
+          <div className="img-studio-field">
+            <span className="img-studio-label">Aspect ratio</span>
+            <div className="img-studio-aspect-group" role="radiogroup" aria-label="Aspect ratio">
+              {ASPECT_OPTIONS.map(({ value, label, icon }) => (
+                <button
+                  key={value}
+                  type="button"
+                  role="radio"
+                  aria-checked={aspectRatio === value}
+                  className={`img-studio-aspect-btn ${aspectRatio === value ? 'is-active' : ''}`}
+                  onClick={() => setAspectRatio(value)}
+                  disabled={generating}
+                  id={`img-studio-aspect-${value.replace(':', 'x')}`}
+                >
+                  <span className="img-studio-aspect-icon" aria-hidden="true">{icon}</span>
+                  <span>{label}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Count */}
+          <div className="img-studio-field">
+            <span className="img-studio-label">Number of images</span>
+            <div className="img-studio-count-group" role="radiogroup" aria-label="Image count">
+              {[1, 2, 3, 4].map((n) => (
+                <button
+                  key={n}
+                  type="button"
+                  role="radio"
+                  aria-checked={numImages === n}
+                  className={`img-studio-count-btn ${numImages === n ? 'is-active' : ''}`}
+                  onClick={() => setNumImages(n)}
+                  disabled={generating}
+                  id={`img-studio-count-${n}`}
+                >
+                  {n}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Generate button */}
+          <button
+            id="img-studio-generate-btn"
+            type="button"
+            className={`img-studio-generate-btn ${generating ? 'is-loading' : ''}`}
+            onClick={handleGenerate}
+            disabled={!prompt.trim() || generating}
+            aria-busy={generating}
+          >
+            {generating ? (
+              <>
+                <span className="img-studio-spinner" aria-hidden="true" />
+                Generating...
+              </>
+            ) : (
+              <>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+                </svg>
+                Generate Image
+              </>
+            )}
+          </button>
+
+          {/* Error */}
+          {error && (
+            <div className="img-studio-error" role="alert">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
+              </svg>
+              <span>{error}</span>
+              <button type="button" onClick={() => setError('')} aria-label="Dismiss error">×</button>
+            </div>
+          )}
+
+          {/* Prompt history */}
+          {promptHistory.length > 0 && (
+            <div className="img-studio-field">
+              <span className="img-studio-label">Recent prompts</span>
+              <div className="img-studio-history">
+                {promptHistory.map((p) => (
+                  <button
+                    key={p}
+                    type="button"
+                    className="img-studio-history-item"
+                    onClick={() => { setPrompt(p); promptRef.current?.focus() }}
+                    disabled={generating}
+                    title={p}
+                  >
+                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                      <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
+                    </svg>
+                    <span>{p}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </section>
+
+        {/* Right: results */}
+        <section className="img-studio-results" aria-label="Generated images" aria-live="polite">
+          {generating && (
+            <div className="img-studio-skeleton-grid">
+              {Array.from({ length: numImages }).map((_, i) => (
+                <SkeletonCard key={i} />
+              ))}
+              <p className="img-studio-generating-label" aria-live="assertive">
+                Creating {numImages} image{numImages > 1 ? 's' : ''} — this may take a few seconds…
+              </p>
+            </div>
+          )}
+
+          {!generating && result && (
+            <>
+              {result.description && (
+                <p className="img-studio-description">{result.description}</p>
+              )}
+              <div
+                className="img-studio-grid"
+                style={{ '--img-count': result.images.length } as React.CSSProperties}
+              >
+                {result.images.map((entry, idx) => (
+                  <article key={entry.id} className="img-studio-card" aria-label={`Generated image ${idx + 1}`}>
+                    <div className="img-studio-card-img-wrap">
+                      <img
+                        src={convertFileSrc(entry.url || entry.path)}
+                        alt={entry.message || prompt}
+                        className="img-studio-card-img"
+                        loading="eager"
+                        decoding="async"
+                      />
+                    </div>
+                    <div className="img-studio-card-actions">
+                      <button
+                        type="button"
+                        className="img-studio-action-btn"
+                        onClick={() => downloadImage(entry, idx)}
+                        title="Download image"
+                        id={`img-studio-download-${idx}`}
+                      >
+                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
+                        </svg>
+                        Download
+                      </button>
+                      {onSendToChat && (
+                        <button
+                          type="button"
+                          className="img-studio-action-btn img-studio-action-btn--primary"
+                          onClick={() => onSendToChat(entry.url || entry.path, prompt)}
+                          title="Send to Chat"
+                          id={`img-studio-send-${idx}`}
+                        >
+                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                            <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+                          </svg>
+                          Send to Chat
+                        </button>
+                      )}
+                    </div>
+                  </article>
+                ))}
+              </div>
+              <p className="img-studio-meta">
+                Model: <strong>{result.model}</strong> · {result.images.length} image{result.images.length > 1 ? 's' : ''} · Saved to gallery
+              </p>
+            </>
+          )}
+
+          {!generating && !result && (
+            <div className="img-studio-empty">
+              <div className="img-studio-empty-icon" aria-hidden="true">
+                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+                </svg>
+              </div>
+              <p>Your generated images will appear here</p>
+              <span>Type a prompt and click Generate Image to start</span>
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  )
+}
diff --git a/src/renderer/src/components/MintDashboard.tsx b/src/renderer/src/components/MintDashboard.tsx
index 09896ba..2ec875e 100644
--- a/src/renderer/src/components/MintDashboard.tsx
+++ b/src/renderer/src/components/MintDashboard.tsx
@@ -21,6 +21,7 @@ import {
 } from '../tauri'
 import ChatPanel from './ChatPanel'
 import DashboardSidebar, { type DashboardView } from './DashboardSidebar'
+import ImageStudioPanel from './ImageStudioPanel'
 import ModelPanel from './ModelPanel'
 import type { ModelInteraction } from './ModelPanel'
 import PicturesLibrary from './PicturesLibrary'
@@ -342,7 +343,7 @@ export default function MintDashboard() {
   }, [])
 
   useEffect(() => {
-    if (view === 'pictures') refreshPictures().catch((reason: unknown) => setError(errorMessage(reason)))
+    if (view === 'pictures' || view === 'imagine') refreshPictures().catch((reason: unknown) => setError(errorMessage(reason)))
   }, [view])
 
   useEffect(() => {
@@ -927,6 +928,14 @@ export default function MintDashboard() {
           />
         </main>
         <PicturesLibrary view={view} pictures={pictures} onSetView={setView} />
+        <ImageStudioPanel
+          view={view}
+          onRefreshPictures={refreshPictures}
+          onSendToChat={(_url, imgPrompt) => {
+            setView('chat')
+            setMessage(imgPrompt)
+          }}
+        />
       </div>
       <div className={`startup-loading ${startupReady ? 'is-hidden' : ''}`} aria-live="polite" aria-busy={!startupReady}>
         <div className="startup-loading-content">
diff --git a/src/renderer/src/css/image-studio.css b/src/renderer/src/css/image-studio.css
new file mode 100644
index 0000000..617462e
--- /dev/null
+++ b/src/renderer/src/css/image-studio.css
@@ -0,0 +1,582 @@
+/* ============================================================
+   Image Studio Panel — NanoBanana (Gemini Image Generation)
+   ============================================================ */
+
+/* Root panel: overlays the main content area, aligned with sidebar */
+.img-studio {
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: var(--sidebar-expanded-width, 264px);
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg-gradient, radial-gradient(circle at top left, #064e3b, #111827 52%, #0b1020));
+  z-index: 10;
+  transition: left 0.22s ease;
+}
+
+/* Adjust left position when the sidebar is collapsed */
+.app-body.sidebar-collapsed .img-studio {
+  left: calc(var(--sidebar-collapsed-width, 56px) + var(--sidebar-content-gap, 10px));
+}
+
+/* Only visible when view === 'imagine' */
+.img-studio[id="image-studio-panel"]:not([hidden]) {
+  display: flex;
+}
+
+/* MintDashboard renders ImageStudioPanel always, use view prop to show/hide via :not class trick */
+/* We handle display via the component returning null if view !== 'imagine' */
+
+/* ── Header ─────────────────────────────────────────────── */
+.img-studio-header {
+  padding: 20px 28px 12px;
+  border-bottom: 1px solid rgb(148 163 184 / 14%);
+  background: rgb(15 23 42 / 60%);
+  backdrop-filter: var(--glass-blur, blur(16px));
+  flex-shrink: 0;
+}
+
+.img-studio-header-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #d1fae5;
+}
+
+.img-studio-header-title h1 {
+  margin: 0;
+  font-size: 1.18rem;
+  font-weight: 700;
+  color: #f0fdf4;
+}
+
+.img-studio-header-title svg {
+  color: #34d399;
+  flex-shrink: 0;
+}
+
+.img-studio-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 99px;
+  background: linear-gradient(90deg, rgb(52 211 153 / 22%), rgb(79 131 230 / 22%));
+  border: 1px solid rgb(52 211 153 / 30%);
+  color: #6ee7b7;
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.img-studio-subtitle {
+  margin: 6px 0 0;
+  color: #64748b;
+  font-size: 0.80rem;
+}
+
+/* ── Main layout: 2-column ─────────────────────────────── */
+.img-studio-content {
+  display: grid;
+  grid-template-columns: 320px 1fr;
+  min-height: 0;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* ── Controls (left column) ────────────────────────────── */
+.img-studio-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 22px 20px;
+  border-right: 1px solid rgb(148 163 184 / 12%);
+  background: rgb(7 12 28 / 50%);
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgb(52 211 153 / 20%) transparent;
+}
+
+/* ── Field groups ──────────────────────────────────────── */
+.img-studio-field {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.img-studio-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #94a3b8;
+  font-size: 0.76rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.img-studio-label-hint {
+  text-transform: none;
+  font-weight: 400;
+  color: #475569;
+  letter-spacing: 0;
+}
+
+/* ── Textarea ──────────────────────────────────────────── */
+.img-studio-textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid rgb(148 163 184 / 18%);
+  border-radius: 10px;
+  background: rgb(15 23 42 / 70%);
+  color: #f1f5f9;
+  font-size: 0.87rem;
+  line-height: 1.55;
+  resize: vertical;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.img-studio-textarea:focus {
+  border-color: rgb(52 211 153 / 50%);
+  box-shadow: 0 0 0 2px rgb(52 211 153 / 10%);
+}
+
+.img-studio-textarea--sm {
+  font-size: 0.82rem;
+}
+
+.img-studio-prompt-hint {
+  color: #334155;
+  font-size: 0.70rem;
+  text-align: right;
+}
+
+/* ── Style chips ───────────────────────────────────────── */
+.img-studio-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.img-studio-chip {
+  padding: 4px 10px;
+  border: 1px solid rgb(148 163 184 / 18%);
+  border-radius: 99px;
+  background: rgb(30 41 59 / 55%);
+  color: #94a3b8;
+  font-size: 0.73rem;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.img-studio-chip:hover:not(:disabled) {
+  border-color: rgb(52 211 153 / 40%);
+  background: rgb(16 185 129 / 14%);
+  color: #6ee7b7;
+}
+
+/* ── Negative prompt toggle ────────────────────────────── */
+.img-studio-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #64748b;
+  font-size: 0.78rem;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.img-studio-toggle:hover {
+  color: #94a3b8;
+}
+
+.img-studio-badge-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #34d399;
+  margin-left: 2px;
+}
+
+/* ── Aspect ratio buttons ──────────────────────────────── */
+.img-studio-aspect-group,
+.img-studio-count-group {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.img-studio-aspect-btn,
+.img-studio-count-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 12px;
+  border: 1px solid rgb(148 163 184 / 18%);
+  border-radius: 8px;
+  background: rgb(15 23 42 / 60%);
+  color: #64748b;
+  font-size: 0.78rem;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.img-studio-aspect-btn:hover:not(:disabled),
+.img-studio-count-btn:hover:not(:disabled) {
+  border-color: rgb(52 211 153 / 35%);
+  background: rgb(16 185 129 / 12%);
+  color: #a7f3d0;
+}
+
+.img-studio-aspect-btn.is-active,
+.img-studio-count-btn.is-active {
+  border-color: rgb(52 211 153 / 60%);
+  background: rgb(16 185 129 / 22%);
+  color: #6ee7b7;
+  font-weight: 600;
+}
+
+.img-studio-aspect-icon {
+  font-size: 0.65rem;
+  opacity: 0.7;
+}
+
+.img-studio-count-btn {
+  min-width: 40px;
+  justify-content: center;
+  font-size: 0.88rem;
+  font-weight: 600;
+}
+
+/* ── Generate button ───────────────────────────────────── */
+.img-studio-generate-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 11px 18px;
+  border: none;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #059669 0%, #047857 100%);
+  color: #fff;
+  font-size: 0.88rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
+  box-shadow: 0 2px 12px rgb(5 150 105 / 30%);
+}
+
+.img-studio-generate-btn:hover:not(:disabled) {
+  opacity: 0.92;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 18px rgb(5 150 105 / 40%);
+}
+
+.img-studio-generate-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.img-studio-generate-btn.is-loading {
+  cursor: wait;
+}
+
+/* ── Spinner ───────────────────────────────────────────── */
+.img-studio-spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgb(255 255 255 / 30%);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: img-studio-spin 0.6s linear infinite;
+}
+
+@keyframes img-studio-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── Error ─────────────────────────────────────────────── */
+.img-studio-error {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 12px;
+  border: 1px solid rgb(251 113 133 / 35%);
+  border-radius: 8px;
+  background: rgb(127 29 29 / 22%);
+  color: #fca5a5;
+  font-size: 0.80rem;
+  line-height: 1.45;
+}
+
+.img-studio-error svg {
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.img-studio-error span { flex: 1; }
+
+.img-studio-error button {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #fca5a5;
+  font-size: 1rem;
+  cursor: pointer;
+  line-height: 1;
+  opacity: 0.7;
+}
+
+.img-studio-error button:hover { opacity: 1; }
+
+/* ── History ───────────────────────────────────────────── */
+.img-studio-history {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.img-studio-history-item {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 8px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #475569;
+  font-size: 0.75rem;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  overflow: hidden;
+}
+
+.img-studio-history-item:hover:not(:disabled) {
+  background: rgb(30 41 59 / 55%);
+  color: #94a3b8;
+}
+
+.img-studio-history-item span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.img-studio-history-item svg { flex-shrink: 0; }
+
+/* ── Results (right column) ────────────────────────────── */
+.img-studio-results {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px 28px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgb(52 211 153 / 20%) transparent;
+}
+
+/* ── Skeleton loading ──────────────────────────────────── */
+.img-studio-skeleton-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 14px;
+}
+
+.img-studio-skeleton {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: 12px;
+  background: rgb(30 41 59 / 55%);
+  overflow: hidden;
+}
+
+.img-studio-skeleton-shine {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgb(52 211 153 / 8%) 50%,
+    transparent 100%
+  );
+  animation: img-studio-shimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes img-studio-shimmer {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(100%);  }
+}
+
+.img-studio-generating-label {
+  grid-column: 1 / -1;
+  margin: 4px 0 0;
+  color: #475569;
+  font-size: 0.78rem;
+  text-align: center;
+  animation: img-studio-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes img-studio-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.45; }
+}
+
+/* ── Result grid ───────────────────────────────────────── */
+.img-studio-description {
+  margin: 0;
+  color: #94a3b8;
+  font-size: 0.82rem;
+  line-height: 1.5;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: rgb(30 41 59 / 40%);
+  border: 1px solid rgb(148 163 184 / 12%);
+}
+
+.img-studio-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 14px;
+}
+
+/* ── Individual image card ─────────────────────────────── */
+.img-studio-card {
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  background: rgb(15 23 42 / 55%);
+  border: 1px solid rgb(148 163 184 / 14%);
+  overflow: hidden;
+  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+}
+
+.img-studio-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 30px rgb(0 0 0 / 35%);
+  border-color: rgb(52 211 153 / 35%);
+}
+
+.img-studio-card-img-wrap {
+  position: relative;
+  aspect-ratio: 1;
+  background: #111827;
+  overflow: hidden;
+}
+
+.img-studio-card-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.3s;
+}
+
+.img-studio-card:hover .img-studio-card-img {
+  transform: scale(1.02);
+}
+
+.img-studio-card-actions {
+  display: flex;
+  gap: 6px;
+  padding: 8px 10px;
+  border-top: 1px solid rgb(148 163 184 / 10%);
+}
+
+.img-studio-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex: 1;
+  justify-content: center;
+  padding: 5px 8px;
+  border: 1px solid rgb(148 163 184 / 18%);
+  border-radius: 7px;
+  background: transparent;
+  color: #64748b;
+  font-size: 0.72rem;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.img-studio-action-btn:hover {
+  background: rgb(30 41 59 / 70%);
+  color: #94a3b8;
+  border-color: rgb(148 163 184 / 28%);
+}
+
+.img-studio-action-btn--primary {
+  border-color: rgb(52 211 153 / 30%);
+  color: #34d399;
+}
+
+.img-studio-action-btn--primary:hover {
+  background: rgb(16 185 129 / 15%);
+  color: #6ee7b7;
+  border-color: rgb(52 211 153 / 50%);
+}
+
+.img-studio-meta {
+  margin: 0;
+  color: #334155;
+  font-size: 0.73rem;
+  text-align: right;
+}
+
+.img-studio-meta strong { color: #475569; }
+
+/* ── Empty state ───────────────────────────────────────── */
+.img-studio-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  flex: 1;
+  min-height: 300px;
+  text-align: center;
+  color: #334155;
+}
+
+.img-studio-empty-icon {
+  opacity: 0.18;
+  color: #34d399;
+}
+
+.img-studio-empty p {
+  margin: 0;
+  color: #475569;
+  font-size: 0.92rem;
+}
+
+.img-studio-empty span {
+  font-size: 0.78rem;
+  color: #334155;
+}
+
+/* ── Responsive ───────────────────────────────────────── */
+@media (max-width: 860px) {
+  .img-studio-content {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    overflow-y: auto;
+  }
+
+  .img-studio-controls {
+    border-right: none;
+    border-bottom: 1px solid rgb(148 163 184 / 12%);
+    max-height: 50vh;
+    overflow-y: auto;
+  }
+}
diff --git a/src/renderer/src/index.css b/src/renderer/src/index.css
index 06c3d42..43bb428 100644
--- a/src/renderer/src/index.css
+++ b/src/renderer/src/index.css
@@ -2,6 +2,7 @@
 @import './css/settings.css';
 @import './css/spotlight.css';
 @import './css/widget.css';
+@import './css/image-studio.css';
 
 * {
   box-sizing: border-box;
diff --git a/src/renderer/src/tauri.ts b/src/renderer/src/tauri.ts
index 9c82d2a..691862a 100644
--- a/src/renderer/src/tauri.ts
+++ b/src/renderer/src/tauri.ts
@@ -65,6 +65,22 @@ export interface PictureEntry {
   thumbnailUrl?: string
 }
 
+export interface ImageGenRequest {
+  prompt: string
+  negativePrompt?: string
+  aspectRatio?: '1:1' | '16:9' | '9:16' | '4:3'
+  numImages?: number
+  model?: string
+}
+
+export interface ImageGenResponse {
+  images: PictureEntry[]
+  model: string
+  provider: string
+  prompt: string
+  description?: string | null
+}
+
 export interface WorkspaceTreeEntry {
   name: string
   path: string
@@ -394,6 +410,41 @@ export async function listSavedPictures(): Promise<PictureEntry[]> {
   return invoke<PictureEntry[]>('list_pictures')
 }
 
+export async function generateImages(
+  request: ImageGenRequest
+): Promise<ImageGenResponse> {
+  if (typeof window === 'undefined' || !(window as any).__TAURI_INTERNALS__) {
+    const API_BASE = 'http://localhost:3000/api'
+    const res = await fetch(`${API_BASE}/image-generate`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        prompt: request.prompt,
+        negativePrompt: request.negativePrompt,
+        aspectRatio: request.aspectRatio ?? '1:1',
+        numImages: request.numImages ?? 1,
+        model: request.model,
+      }),
+    })
+    if (!res.ok) {
+      const err = await res.json().catch(() => null)
+      throw new Error(err?.error || `Image generation failed: HTTP ${res.status}`)
+    }
+    const data = await res.json()
+    // Normalize image URLs for web mode
+    const images: PictureEntry[] = Array.isArray(data.images)
+      ? data.images.map((pic: PictureEntry) => {
+          const pictureUrl = pic.url ? `http://localhost:3000${pic.url}` : pic.url
+          return { ...pic, url: pictureUrl, thumbnailUrl: pictureUrl }
+        })
+      : []
+    return { ...data, images }
+  }
+  // Desktop / Tauri mode
+  const { invoke } = await import('@tauri-apps/api/core')
+  return invoke<ImageGenResponse>('generate_images', { request })
+}
+
 export async function getWorkspaceTree(path?: string | null): Promise<WorkspaceTreeEntry> {
   if (typeof window === 'undefined' || !(window as any).__TAURI_INTERNALS__) {
     return {

From 6c669dd976e9f65580cb50fd365e553e822c41d3 Mon Sep 17 00:00:00 2001
From: Pheem49 <killerpheem13@gmail.com>
Date: Sun, 21 Jun 2026 20:13:59 +0700
Subject: [PATCH 2/4] feat: implement multi-provider support for image
 generation and add provider selection UI to Image Studio panel

---
 crates/mint-cli/src/main.rs                   |  62 +-
 crates/mint-cli/src/onboard.rs                | 151 +++-
 crates/mint-core/src/api_server.rs            |  32 +-
 crates/mint-core/src/config.rs                |  17 +
 crates/mint-core/src/image_gen.rs             | 676 +++++++++++++++++-
 .../src-web/components/ImageStudioPanel.tsx   | 224 ++++--
 src/renderer/src-web/css/image-studio.css     |  43 +-
 src/renderer/src-web/tauri.ts                 |  71 ++
 .../src/components/ImageStudioPanel.tsx       | 224 ++++--
 src/renderer/src/css/image-studio.css         |  43 +-
 src/renderer/src/tauri.ts                     |  72 ++
 11 files changed, 1469 insertions(+), 146 deletions(-)

diff --git a/crates/mint-cli/src/main.rs b/crates/mint-cli/src/main.rs
index e77eacf..32cf40b 100644
--- a/crates/mint-cli/src/main.rs
+++ b/crates/mint-cli/src/main.rs
@@ -952,7 +952,7 @@ async fn main() -> Result<()> {
             } => {
                 let config = load_config()?;
                 let count = count.clamp(1, 4);
-                eprint!("{DIM}✦ Generating {count} image(s) with NanoBanana...{RESET}");
+                eprint!("{DIM}✦ Generating {count} image(s)...{RESET}");
                 let _ = std::io::stderr().flush();
                 let request = ImageGenRequest {
                     prompt: prompt.clone(),
@@ -960,13 +960,14 @@ async fn main() -> Result<()> {
                     aspect_ratio: Some(aspect),
                     num_images: Some(count),
                     model: None,
+                    provider: None,
                 };
                 match generate_images(&config, &request).await {
                     Ok(result) => {
                         eprintln!("\r{MINT}✦ Generated {} image(s)         {RESET}", result.images.len());
                         let data_uris: Vec<String> =
                             result.images.iter().map(|img| img.data_uri.clone()).collect();
-                        match mint_core::save_chat_images(data_uris, Some("nanobanana".into()), Some(prompt.clone())) {
+                        match mint_core::save_chat_images(data_uris, Some(result.provider.clone()), Some(prompt.clone())) {
                             Ok(saved) => {
                                 for entry in &saved {
                                     println!("{MINT}✓{RESET} Saved: {}", entry.path.display());
@@ -1281,6 +1282,7 @@ async fn handle_slash_command(
                 ("/memory clear", "Clear all interactions"),
                 ("/memory get <key>", "Read a profile value"),
                 ("/memory set <key> <val>", "Store a profile value"),
+                ("/image-provider [name]", "List image gen providers or switch default provider"),
                 ("/mcp list", "List configured MCP servers"),
                 ("/mcp allow <server> <tool>", "Allow an MCP tool"),
                 ("/stats", "Show session statistics"),
@@ -1337,6 +1339,57 @@ async fn handle_slash_command(
             Some(SlashResult::Handled)
         }
 
+        "/image-provider" => {
+            let mut available = Vec::new();
+            if !session.config.api_key.trim().is_empty() {
+                available.push("nanobanana");
+            }
+            if !session.config.openai_api_key.trim().is_empty() {
+                available.push("dalle");
+            }
+            if !session.config.stability_api_key.trim().is_empty() {
+                available.push("stability");
+            }
+            if !session.config.ideogram_api_key.trim().is_empty() {
+                available.push("ideogram");
+            }
+            if !session.config.replicate_api_key.trim().is_empty() {
+                available.push("replicate");
+            }
+            if available.is_empty() {
+                available.push("nanobanana");
+            }
+
+            if rest.is_empty() {
+                println!("\n{BLUE}Configured image generation providers:{RESET}");
+                for p in &available {
+                    let active = if p == &session.config.image_gen_provider.as_str() {
+                        format!(" {MINT}← active{RESET}")
+                    } else {
+                        String::new()
+                    };
+                    println!("  {p}{active}");
+                }
+                println!();
+            } else {
+                if available.contains(&rest) {
+                    session.config.image_gen_provider = rest.to_owned();
+                    match mint_core::save_config(&session.config) {
+                        Ok(()) => println!(
+                            "{DIM}Switched default image provider to: {}{RESET}\n",
+                            session.config.image_gen_provider
+                        ),
+                        Err(error) => println!("{ERROR}Config error:{RESET} {error}"),
+                    }
+                } else {
+                    println!(
+                        "{ERROR}Provider '{rest}' is not configured or invalid.{RESET}\n"
+                    );
+                }
+            }
+            Some(SlashResult::Handled)
+        }
+
         "/clear" | "/reset" => {
             println!("Clear conversation history? [y/N] ");
             if let Ok(true) = confirm("Clear conversation history? [y/N] ") {
@@ -1951,6 +2004,7 @@ const AUTOCOMPLETE_COMMANDS: &[(&str, &str)] = &[
     ("/help", "Show help menu"),
     ("/fast", "Toggle fast mode (hide thinking traces)"),
     ("/models", "List AI providers or switch active provider"),
+    ("/image-provider", "List image gen providers or switch default provider"),
     ("/clear", "Clear conversation history"),
     ("/cd", "Change active workspace directory"),
     ("/image", "Attach image from disk"),
@@ -2030,9 +2084,9 @@ fn draw_input_box(
             let highlight_idx = tab_index.map(|idx| idx % matches.len());
             for (i, (cmd, desc)) in matches.iter().enumerate() {
                 if Some(i) == highlight_idx {
-                    println!("  {BLUE}▶ {:<12}{RESET} {DIM}- {}{RESET}", cmd, desc);
+                    println!("  {BLUE}▶ {:<16}{RESET} {DIM}- {}{RESET}", cmd, desc);
                 } else {
-                    println!("    {DIM}{:<12} - {}{RESET}", cmd, desc);
+                    println!("    {DIM}{:<16} - {}{RESET}", cmd, desc);
                 }
             }
         }
diff --git a/crates/mint-cli/src/onboard.rs b/crates/mint-cli/src/onboard.rs
index 125b3f7..4157981 100644
--- a/crates/mint-cli/src/onboard.rs
+++ b/crates/mint-cli/src/onboard.rs
@@ -60,6 +60,38 @@ const HUGGINGFACE_MODEL_PRESETS: &[&str] = &[
     "google/gemma-3-27b-it",
 ];
 
+// ── Image Generation Providers ──────────────────────────────────────────────
+const NANOBANANA_IMAGE_MODEL_PRESETS: &[&str] = &[
+    "gemini-2.5-flash-image",
+    "gemini-2.0-flash-image",
+];
+
+const DALLE_MODEL_PRESETS: &[&str] = &[
+    "dall-e-3",
+    "gpt-image-1",
+    "dall-e-2",
+];
+
+const STABILITY_MODEL_PRESETS: &[&str] = &[
+    "sd3.5-large",
+    "sd3.5-large-turbo",
+    "sd3-medium",
+    "core",
+];
+
+const IDEOGRAM_MODEL_PRESETS: &[&str] = &[
+    "V_3",
+    "V_2",
+    "V_2_TURBO",
+];
+
+const REPLICATE_MODEL_PRESETS: &[&str] = &[
+    "black-forest-labs/flux-1.1-pro",
+    "black-forest-labs/flux-schnell",
+    "stability-ai/sdxl",
+    "bytedance/sdxl-lightning-4step",
+];
+
 pub async fn run() -> Result<()> {
     let mut config = load_config()?;
 
@@ -231,6 +263,37 @@ pub async fn run() -> Result<()> {
                 .and_then(|v| v.as_bool())
                 .unwrap_or(false),
         },
+        // ── Image Generation ─────────────────────────────────────────────────
+        OnboardService {
+            category: "Image Generation",
+            name: "Google NanoBanana (Gemini Images)  [uses Gemini key]",
+            key: "img_nanobanana",
+            enabled: !config.api_key.is_empty() && !config.nanobanana_model.is_empty(),
+        },
+        OnboardService {
+            category: "Image Generation",
+            name: "OpenAI DALL·E  [uses OpenAI key]",
+            key: "img_dalle",
+            enabled: !config.openai_api_key.is_empty() && !config.dalle_model.is_empty(),
+        },
+        OnboardService {
+            category: "Image Generation",
+            name: "Stability AI (Stable Diffusion)",
+            key: "img_stability",
+            enabled: !config.stability_api_key.is_empty(),
+        },
+        OnboardService {
+            category: "Image Generation",
+            name: "Ideogram v3",
+            key: "img_ideogram",
+            enabled: !config.ideogram_api_key.is_empty(),
+        },
+        OnboardService {
+            category: "Image Generation",
+            name: "Replicate (FLUX / SDXL / custom)",
+            key: "img_replicate",
+            enabled: !config.replicate_api_key.is_empty(),
+        },
     ];
 
     let mut cursor = 0;
@@ -842,7 +905,93 @@ pub async fn run() -> Result<()> {
         );
     }
 
-    println!();
+    // ────────────────────────────────────────────────────────────────────────
+    // Image Generation providers
+    // ────────────────────────────────────────────────────────────────────────
+
+    // NanoBanana (Gemini Images)
+    if is_selected("img_nanobanana", &services) {
+        println!("\n\x1b[36m--- Google NanoBanana (Gemini Images) ---\x1b[0m");
+        println!(
+            "\x1b[90mUses the same Gemini API key as Step 1. Select the image generation model.\x1b[0m"
+        );
+        config.nanobanana_model = prompt_select_or_custom(
+            "NanoBanana Model",
+            static_model_options(NANOBANANA_IMAGE_MODEL_PRESETS),
+            Some(&config.nanobanana_model),
+            "Custom NanoBanana model...",
+        )?;
+    }
+
+    // DALL·E
+    if is_selected("img_dalle", &services) {
+        println!("\n\x1b[36m--- OpenAI DALL·E ---\x1b[0m");
+        println!(
+            "\x1b[90mUses the same OpenAI API key. DALL·E 3 supports only 1 image per request; DALL·E 2 supports up to 10.\x1b[0m"
+        );
+        config.dalle_model = prompt_select_or_custom(
+            "DALL·E Model",
+            static_model_options(DALLE_MODEL_PRESETS),
+            Some(&config.dalle_model),
+            "Custom DALL·E model...",
+        )?;
+    }
+
+    // Stability AI
+    if is_selected("img_stability", &services) {
+        println!("\n\x1b[36m--- Stability AI ---\x1b[0m");
+        println!(
+            "\x1b[90mGet your API key at https://platform.stability.ai/. Supports SD3.5 Large, SD3 Medium, and Stable Image Core.\x1b[0m"
+        );
+        config.stability_api_key =
+            prompt_sensitive("Stability AI API Key", &config.stability_api_key)?;
+        config.stability_model = prompt_select_or_custom(
+            "Stability Model",
+            static_model_options(STABILITY_MODEL_PRESETS),
+            Some(&config.stability_model),
+            "Custom Stability model...",
+        )?;
+    } else {
+        config.stability_api_key = String::new();
+    }
+
+    // Ideogram
+    if is_selected("img_ideogram", &services) {
+        println!("\n\x1b[36m--- Ideogram ---\x1b[0m");
+        println!(
+            "\x1b[90mGet your API key at https://ideogram.ai/api. Supports V_3, V_2, and V_2_TURBO.\x1b[0m"
+        );
+        config.ideogram_api_key =
+            prompt_sensitive("Ideogram API Key", &config.ideogram_api_key)?;
+        config.ideogram_model = prompt_select_or_custom(
+            "Ideogram Model",
+            static_model_options(IDEOGRAM_MODEL_PRESETS),
+            Some(&config.ideogram_model),
+            "Custom Ideogram model...",
+        )?;
+    } else {
+        config.ideogram_api_key = String::new();
+    }
+
+    // Replicate
+    if is_selected("img_replicate", &services) {
+        println!("\n\x1b[36m--- Replicate ---\x1b[0m");
+        println!(
+            "\x1b[90mGet your API token at https://replicate.com/account/api-tokens. Works with FLUX, SDXL, and any public image model.\x1b[0m"
+        );
+        config.replicate_api_key =
+            prompt_sensitive("Replicate API Token", &config.replicate_api_key)?;
+        config.replicate_model = prompt_select_or_custom(
+            "Replicate Model (owner/model-name)",
+            static_model_options(REPLICATE_MODEL_PRESETS),
+            Some(&config.replicate_model),
+            "Custom Replicate model...",
+        )?;
+    } else {
+        config.replicate_api_key = String::new();
+    }
+
+
     save_config(&config)?;
     println!("\x1b[32m✅ Configuration saved successfully!\x1b[0m");
     Ok(())
diff --git a/crates/mint-core/src/api_server.rs b/crates/mint-core/src/api_server.rs
index 6f695e0..bfd7a3f 100644
--- a/crates/mint-core/src/api_server.rs
+++ b/crates/mint-core/src/api_server.rs
@@ -677,6 +677,9 @@ pub async fn start_api_server(port: u16) -> Result<(), std::io::Error> {
                         num_images: Option<u8>,
                         #[serde(default)]
                         model: Option<String>,
+                        /// Which image provider to use (overrides config.image_gen_provider).
+                        #[serde(default)]
+                        provider: Option<String>,
                     }
 
                     if let Ok(req) = serde_json::from_str::<ImageGenApiRequest>(body) {
@@ -687,6 +690,7 @@ pub async fn start_api_server(port: u16) -> Result<(), std::io::Error> {
                             aspect_ratio: req.aspect_ratio,
                             num_images: req.num_images,
                             model: req.model,
+                            provider: req.provider,
                         };
                         match generate_images(&config, &gen_request).await {
                             Ok(result) => {
@@ -697,7 +701,7 @@ pub async fn start_api_server(port: u16) -> Result<(), std::io::Error> {
                                     .collect();
                                 let mut saved = save_chat_images(
                                     data_uris,
-                                    Some("nanobanana".into()),
+                                    Some(result.provider.clone()),
                                     Some(req.prompt.clone()),
                                 )
                                 .unwrap_or_default();
@@ -733,6 +737,32 @@ pub async fn start_api_server(port: u16) -> Result<(), std::io::Error> {
                         .await;
                     }
                 }
+                ("GET", "/api/image-gen/providers") => {
+                    let config = load_config().unwrap_or_default();
+                    let mut available: Vec<String> = Vec::new();
+                    if !config.api_key.trim().is_empty() {
+                        available.push("nanobanana".into());
+                    }
+                    if !config.openai_api_key.trim().is_empty() {
+                        available.push("dalle".into());
+                    }
+                    if !config.stability_api_key.trim().is_empty() {
+                        available.push("stability".into());
+                    }
+                    if !config.ideogram_api_key.trim().is_empty() {
+                        available.push("ideogram".into());
+                    }
+                    if !config.replicate_api_key.trim().is_empty() {
+                        available.push("replicate".into());
+                    }
+                    let active = if available.contains(&config.image_gen_provider) {
+                        config.image_gen_provider.clone()
+                    } else {
+                        available.first().cloned().unwrap_or_else(|| "nanobanana".into())
+                    };
+                    let response = json!({ "active": active, "available": available });
+                    send_json_response(socket, "200 OK", &response.to_string()).await;
+                }
                 _ => {
                     send_json_response(socket, "404 Not Found", "{\"error\":\"Not Found\"}").await;
                 }
diff --git a/crates/mint-core/src/config.rs b/crates/mint-core/src/config.rs
index 05edd4d..95be989 100644
--- a/crates/mint-core/src/config.rs
+++ b/crates/mint-core/src/config.rs
@@ -61,6 +61,15 @@ pub struct MintConfig {
     pub ollama_host: String,
     pub ollama_model: String,
     pub nanobanana_model: String,
+    /// Active image-generation provider: "nanobanana" | "dalle" | "stability" | "ideogram" | "replicate"
+    pub image_gen_provider: String,
+    pub dalle_model: String,
+    pub stability_api_key: String,
+    pub stability_model: String,
+    pub ideogram_api_key: String,
+    pub ideogram_model: String,
+    pub replicate_api_key: String,
+    pub replicate_model: String,
     pub show_desktop_widget: bool,
     pub safety_enabled: bool,
     pub sandbox_mode: String,
@@ -111,6 +120,14 @@ impl Default for MintConfig {
             ollama_host: String::new(),
             ollama_model: "llama3:latest".into(),
             nanobanana_model: "gemini-2.5-flash-image".into(),
+            image_gen_provider: "nanobanana".into(),
+            dalle_model: "dall-e-3".into(),
+            stability_api_key: String::new(),
+            stability_model: "sd3.5-large".into(),
+            ideogram_api_key: String::new(),
+            ideogram_model: "V_3".into(),
+            replicate_api_key: String::new(),
+            replicate_model: "black-forest-labs/flux-1.1-pro".into(),
             show_desktop_widget: true,
             safety_enabled: true,
             sandbox_mode: "prefer".into(),
diff --git a/crates/mint-core/src/image_gen.rs b/crates/mint-core/src/image_gen.rs
index c926072..a41aa4d 100644
--- a/crates/mint-core/src/image_gen.rs
+++ b/crates/mint-core/src/image_gen.rs
@@ -6,7 +6,11 @@ use thiserror::Error;
 
 use crate::MintConfig;
 
-/// A request to generate images with the NanoBanana (Gemini image) model.
+// ─────────────────────────────────────────────────────────────────────────────
+// Public request / response types
+// ─────────────────────────────────────────────────────────────────────────────
+
+/// A request to generate images from any supported provider.
 #[derive(Debug, Clone, Deserialize)]
 #[serde(rename_all = "camelCase")]
 pub struct ImageGenRequest {
@@ -19,8 +23,13 @@ pub struct ImageGenRequest {
     /// Number of images to return (1–4). Default: 1
     #[serde(default)]
     pub num_images: Option<u8>,
+    /// Override the model for the selected provider.
     #[serde(default)]
     pub model: Option<String>,
+    /// Which provider to use: "nanobanana" | "dalle" | "stability" | "ideogram" | "replicate".
+    /// Falls back to `config.image_gen_provider` when omitted.
+    #[serde(default)]
+    pub provider: Option<String>,
 }
 
 /// One generated image returned from the model.
@@ -40,15 +49,31 @@ pub struct ImageGenResponse {
     pub model: String,
     pub provider: String,
     pub prompt: String,
-    /// Optional descriptive text returned alongside the image by the model.
+    /// Optional descriptive text returned alongside the image by some models.
     #[serde(skip_serializing_if = "Option::is_none")]
     pub description: Option<String>,
 }
 
 #[derive(Debug, Error)]
 pub enum ImageGenError {
+    // ── NanoBanana ──────────────────────────────────────────────────────────
     #[error("missing Gemini API key — set GEMINI_API_KEY or configure api_key for NanoBanana image generation")]
     MissingApiKey,
+    // ── DALL·E ───────────────────────────────────────────────────────────────
+    #[error("missing OpenAI API key — configure openai_api_key to use DALL·E")]
+    MissingOpenAiKey,
+    // ── Stability AI ─────────────────────────────────────────────────────────
+    #[error("missing Stability AI API key — configure stability_api_key")]
+    MissingStabilityKey,
+    // ── Ideogram ─────────────────────────────────────────────────────────────
+    #[error("missing Ideogram API key — configure ideogram_api_key")]
+    MissingIdeogramKey,
+    // ── Replicate ────────────────────────────────────────────────────────────
+    #[error("missing Replicate API key — configure replicate_api_key")]
+    MissingReplicateKey,
+    // ── Generic ──────────────────────────────────────────────────────────────
+    #[error("unsupported image generation provider: {0}")]
+    UnsupportedProvider(String),
     #[error("API request failed: {0}")]
     Request(#[from] reqwest::Error),
     #[error("the model returned no images for this prompt")]
@@ -59,24 +84,49 @@ pub enum ImageGenError {
     UnexpectedResponse,
 }
 
-/// Generate images using Google NanoBanana (Gemini image generation model).
-///
-/// Uses the same `generativelanguage.googleapis.com` endpoint as text chat,
-/// but with `responseModalities: ["TEXT", "IMAGE"]` in the generation config.
+// ─────────────────────────────────────────────────────────────────────────────
+// Main entry-point — dispatch to the correct provider
+// ─────────────────────────────────────────────────────────────────────────────
+
+/// Generate images using whichever provider is specified in the request or config.
 pub async fn generate_images(
     config: &MintConfig,
     request: &ImageGenRequest,
 ) -> Result<ImageGenResponse, ImageGenError> {
     let client = crate::HTTP_CLIENT.clone();
-    call_nanobanana(&client, config, request).await
+
+    let provider = request
+        .provider
+        .as_deref()
+        .map(str::trim)
+        .filter(|s| !s.is_empty())
+        .unwrap_or_else(|| config.image_gen_provider.trim());
+
+    let provider = if provider.is_empty() {
+        "nanobanana"
+    } else {
+        provider
+    };
+
+    match provider {
+        "nanobanana" => call_nanobanana(&client, config, request).await,
+        "dalle" => call_dalle(&client, config, request).await,
+        "stability" => call_stability(&client, config, request).await,
+        "ideogram" => call_ideogram(&client, config, request).await,
+        "replicate" => call_replicate(&client, config, request).await,
+        other => Err(ImageGenError::UnsupportedProvider(other.to_owned())),
+    }
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// NanoBanana — Google Gemini image generation
+// ─────────────────────────────────────────────────────────────────────────────
+
 async fn call_nanobanana(
     client: &Client,
     config: &MintConfig,
     request: &ImageGenRequest,
 ) -> Result<ImageGenResponse, ImageGenError> {
-    // Resolve API key — same field as Gemini chat
     let api_key = if config.api_key.trim().is_empty() {
         std::env::var("GEMINI_API_KEY").unwrap_or_default()
     } else {
@@ -86,25 +136,26 @@ async fn call_nanobanana(
         return Err(ImageGenError::MissingApiKey);
     }
 
-    let model = match request.model.as_ref().map(|m| m.trim()).filter(|m| !m.is_empty()) {
-        Some(m) => m.to_owned(),
-        None => {
-            let config_model = config.nanobanana_model.trim();
-            if config_model.is_empty() {
+    let model = request
+        .model
+        .as_deref()
+        .map(str::trim)
+        .filter(|m| !m.is_empty())
+        .map(str::to_owned)
+        .unwrap_or_else(|| {
+            let m = config.nanobanana_model.trim();
+            if m.is_empty() {
                 "gemini-2.5-flash-image".to_owned()
             } else {
-                config_model.to_owned()
+                m.to_owned()
             }
-        }
-    };
+        });
 
     let url = format!(
         "https://generativelanguage.googleapis.com/v1beta/models/{model}:generateContent"
     );
 
-    // Build a prompt that embeds aspect ratio guidance if requested
     let full_prompt = build_prompt(request);
-
     let num_images = request.num_images.unwrap_or(1).clamp(1, 4);
 
     let payload = json!({
@@ -124,24 +175,19 @@ async fn call_nanobanana(
         .send()
         .await?
         .error_for_status()
-        .map_err(|e| {
-            // Surface useful error text from the model
-            ImageGenError::Request(e)
-        })?
+        .map_err(ImageGenError::Request)?
         .json()
         .await?;
 
-    // Check for API-level error block
     if let Some(err) = response.get("error") {
         let msg = err["message"].as_str().unwrap_or("unknown API error");
         return Err(ImageGenError::ModelError(msg.to_owned()));
     }
 
-    parse_image_response(&response, &model, &request.prompt)
+    parse_nanobanana_response(&response, &model, &request.prompt)
 }
 
-/// Parse the `generateContent` response and extract image parts.
-fn parse_image_response(
+fn parse_nanobanana_response(
     response: &Value,
     model: &str,
     original_prompt: &str,
@@ -164,7 +210,6 @@ fn parse_image_response(
         };
 
         for part in parts {
-            // Collect text description if present
             if let Some(text) = part["text"].as_str() {
                 let text = text.trim();
                 if !text.is_empty() {
@@ -172,7 +217,6 @@ fn parse_image_response(
                 }
             }
 
-            // Collect inline image data
             if let Some(inline) = part.get("inlineData") {
                 let mime_type = inline["mimeType"]
                     .as_str()
@@ -182,7 +226,6 @@ fn parse_image_response(
                 if b64.is_empty() {
                     continue;
                 }
-                // Validate it's actually decodable base64
                 if STANDARD.decode(b64).is_err() {
                     continue;
                 }
@@ -205,7 +248,538 @@ fn parse_image_response(
     })
 }
 
-/// Build the final prompt string, optionally embedding aspect ratio guidance.
+// ─────────────────────────────────────────────────────────────────────────────
+// DALL·E — OpenAI Images API
+// ─────────────────────────────────────────────────────────────────────────────
+
+async fn call_dalle(
+    client: &Client,
+    config: &MintConfig,
+    request: &ImageGenRequest,
+) -> Result<ImageGenResponse, ImageGenError> {
+    let api_key = if config.openai_api_key.trim().is_empty() {
+        std::env::var("OPENAI_API_KEY").unwrap_or_default()
+    } else {
+        config.openai_api_key.clone()
+    };
+    if api_key.trim().is_empty() {
+        return Err(ImageGenError::MissingOpenAiKey);
+    }
+
+    let model = request
+        .model
+        .as_deref()
+        .map(str::trim)
+        .filter(|m| !m.is_empty())
+        .map(str::to_owned)
+        .unwrap_or_else(|| {
+            let m = config.dalle_model.trim();
+            if m.is_empty() {
+                "dall-e-3".to_owned()
+            } else {
+                m.to_owned()
+            }
+        });
+
+    // DALL·E 3 supports only n=1; DALL·E 2 supports up to 10.
+    let n = if model.starts_with("dall-e-3") || model == "gpt-image-1" {
+        1u8
+    } else {
+        request.num_images.unwrap_or(1).clamp(1, 10)
+    };
+
+    let size = aspect_ratio_to_dalle_size(request.aspect_ratio.as_deref());
+
+    let payload = json!({
+        "model": model,
+        "prompt": request.prompt,
+        "n": n,
+        "size": size,
+        "response_format": "b64_json"
+    });
+
+    let response: Value = client
+        .post("https://api.openai.com/v1/images/generations")
+        .bearer_auth(&api_key)
+        .json(&payload)
+        .send()
+        .await?
+        .error_for_status()
+        .map_err(ImageGenError::Request)?
+        .json()
+        .await?;
+
+    if let Some(err) = response.get("error") {
+        let msg = err["message"].as_str().unwrap_or("unknown OpenAI API error");
+        return Err(ImageGenError::ModelError(msg.to_owned()));
+    }
+
+    let data = response["data"]
+        .as_array()
+        .ok_or(ImageGenError::UnexpectedResponse)?;
+
+    let images: Vec<GeneratedImage> = data
+        .iter()
+        .filter_map(|item| {
+            let b64 = item["b64_json"].as_str()?;
+            if b64.is_empty() || STANDARD.decode(b64).is_err() {
+                return None;
+            }
+            let data_uri = format!("data:image/png;base64,{b64}");
+            Some(GeneratedImage {
+                data_uri,
+                mime_type: "image/png".to_owned(),
+            })
+        })
+        .collect();
+
+    if images.is_empty() {
+        return Err(ImageGenError::NoImagesReturned);
+    }
+
+    Ok(ImageGenResponse {
+        images,
+        model,
+        provider: "dalle".to_owned(),
+        prompt: request.prompt.clone(),
+        description: None,
+    })
+}
+
+fn aspect_ratio_to_dalle_size(ratio: Option<&str>) -> &'static str {
+    match ratio.unwrap_or("1:1") {
+        "16:9" => "1792x1024",
+        "9:16" => "1024x1792",
+        _ => "1024x1024",
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Stability AI — Stable Image Core / SD3.x REST API
+// ─────────────────────────────────────────────────────────────────────────────
+
+async fn call_stability(
+    client: &Client,
+    config: &MintConfig,
+    request: &ImageGenRequest,
+) -> Result<ImageGenResponse, ImageGenError> {
+    let api_key = if config.stability_api_key.trim().is_empty() {
+        std::env::var("STABILITY_API_KEY").unwrap_or_default()
+    } else {
+        config.stability_api_key.clone()
+    };
+    if api_key.trim().is_empty() {
+        return Err(ImageGenError::MissingStabilityKey);
+    }
+
+    let model = request
+        .model
+        .as_deref()
+        .map(str::trim)
+        .filter(|m| !m.is_empty())
+        .map(str::to_owned)
+        .unwrap_or_else(|| {
+            let m = config.stability_model.trim();
+            if m.is_empty() {
+                "sd3.5-large".to_owned()
+            } else {
+                m.to_owned()
+            }
+        });
+
+    // Route: Stable Image Core uses /core; SD3.x models use /sd3
+    let (endpoint, model_param) = if model == "core" {
+        (
+            "https://api.stability.ai/v2beta/stable-image/generate/core".to_owned(),
+            None,
+        )
+    } else {
+        (
+            "https://api.stability.ai/v2beta/stable-image/generate/sd3".to_owned(),
+            Some(model.clone()),
+        )
+    };
+
+    let aspect_ratio = request.aspect_ratio.as_deref().unwrap_or("1:1");
+
+    // Build multipart/form-data manually (reqwest multipart feature not enabled).
+    let boundary = format!("MintBoundary{}", uuid_v4_hex());
+
+    let mut body_parts: Vec<(String, String)> = vec![
+        ("prompt".into(), request.prompt.clone()),
+        ("aspect_ratio".into(), aspect_ratio.to_owned()),
+        ("output_format".into(), "png".to_owned()),
+    ];
+
+    if let Some(neg) = &request.negative_prompt {
+        let neg = neg.trim();
+        if !neg.is_empty() {
+            body_parts.push(("negative_prompt".into(), neg.to_owned()));
+        }
+    }
+
+    if let Some(m) = model_param {
+        body_parts.push(("model".into(), m));
+    }
+
+    let raw_body = build_multipart_text(&boundary, &body_parts);
+
+    let response = client
+        .post(&endpoint)
+        .bearer_auth(&api_key)
+        .header("accept", "image/*")
+        .header(
+            "content-type",
+            format!("multipart/form-data; boundary={boundary}"),
+        )
+        .body(raw_body)
+        .send()
+        .await?
+        .error_for_status()
+        .map_err(ImageGenError::Request)?;
+
+    let bytes = response.bytes().await?;
+    if bytes.is_empty() {
+        return Err(ImageGenError::NoImagesReturned);
+    }
+
+    let b64 = STANDARD.encode(&bytes);
+    let data_uri = format!("data:image/png;base64,{b64}");
+
+    Ok(ImageGenResponse {
+        images: vec![GeneratedImage {
+            data_uri,
+            mime_type: "image/png".to_owned(),
+        }],
+        model,
+        provider: "stability".to_owned(),
+        prompt: request.prompt.clone(),
+        description: None,
+    })
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Ideogram — Ideogram v3 REST API
+// ─────────────────────────────────────────────────────────────────────────────
+
+async fn call_ideogram(
+    client: &Client,
+    config: &MintConfig,
+    request: &ImageGenRequest,
+) -> Result<ImageGenResponse, ImageGenError> {
+    let api_key = if config.ideogram_api_key.trim().is_empty() {
+        std::env::var("IDEOGRAM_API_KEY").unwrap_or_default()
+    } else {
+        config.ideogram_api_key.clone()
+    };
+    if api_key.trim().is_empty() {
+        return Err(ImageGenError::MissingIdeogramKey);
+    }
+
+    let model = request
+        .model
+        .as_deref()
+        .map(str::trim)
+        .filter(|m| !m.is_empty())
+        .map(str::to_owned)
+        .unwrap_or_else(|| {
+            let m = config.ideogram_model.trim();
+            if m.is_empty() {
+                "V_3".to_owned()
+            } else {
+                m.to_owned()
+            }
+        });
+
+    let num_images = request.num_images.unwrap_or(1).clamp(1, 4);
+    let aspect_ratio = aspect_ratio_to_ideogram(request.aspect_ratio.as_deref());
+
+    let mut body = json!({
+        "image_request": {
+            "prompt": request.prompt,
+            "model": model,
+            "num_images": num_images,
+            "aspect_ratio": aspect_ratio,
+            "magic_prompt_option": "AUTO"
+        }
+    });
+
+    if let Some(neg) = &request.negative_prompt {
+        let neg = neg.trim();
+        if !neg.is_empty() {
+            body["image_request"]["negative_prompt"] = json!(neg);
+        }
+    }
+
+    let response: Value = client
+        .post("https://api.ideogram.ai/generate")
+        .header("Api-Key", &api_key)
+        .json(&body)
+        .send()
+        .await?
+        .error_for_status()
+        .map_err(ImageGenError::Request)?
+        .json()
+        .await?;
+
+    if let Some(err) = response.get("error") {
+        let msg = err.as_str().unwrap_or("unknown Ideogram API error");
+        return Err(ImageGenError::ModelError(msg.to_owned()));
+    }
+
+    // Response shape: { data: [ { url: "..." }, ... ] }
+    let data = response["data"]
+        .as_array()
+        .ok_or(ImageGenError::UnexpectedResponse)?;
+
+    let mut images = Vec::new();
+    for item in data {
+        if let Some(url) = item["url"].as_str() {
+            if url.is_empty() {
+                continue;
+            }
+            // Fetch the image bytes and convert to base64 data URI
+            match fetch_url_as_data_uri(client, url).await {
+                Ok(data_uri) => images.push(GeneratedImage {
+                    data_uri,
+                    mime_type: "image/jpeg".to_owned(),
+                }),
+                Err(_) => continue,
+            }
+        }
+    }
+
+    if images.is_empty() {
+        return Err(ImageGenError::NoImagesReturned);
+    }
+
+    Ok(ImageGenResponse {
+        images,
+        model,
+        provider: "ideogram".to_owned(),
+        prompt: request.prompt.clone(),
+        description: None,
+    })
+}
+
+fn aspect_ratio_to_ideogram(ratio: Option<&str>) -> &'static str {
+    match ratio.unwrap_or("1:1") {
+        "16:9" => "ASPECT_16_9",
+        "9:16" => "ASPECT_9_16",
+        "4:3" => "ASPECT_4_3",
+        "3:4" => "ASPECT_3_4",
+        _ => "ASPECT_1_1",
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Replicate — Predictions API (supports FLUX, SDXL, etc.)
+// ─────────────────────────────────────────────────────────────────────────────
+
+async fn call_replicate(
+    client: &Client,
+    config: &MintConfig,
+    request: &ImageGenRequest,
+) -> Result<ImageGenResponse, ImageGenError> {
+    let api_key = if config.replicate_api_key.trim().is_empty() {
+        std::env::var("REPLICATE_API_TOKEN").unwrap_or_default()
+    } else {
+        config.replicate_api_key.clone()
+    };
+    if api_key.trim().is_empty() {
+        return Err(ImageGenError::MissingReplicateKey);
+    }
+
+    let model = request
+        .model
+        .as_deref()
+        .map(str::trim)
+        .filter(|m| !m.is_empty())
+        .map(str::to_owned)
+        .unwrap_or_else(|| {
+            let m = config.replicate_model.trim();
+            if m.is_empty() {
+                "black-forest-labs/flux-1.1-pro".to_owned()
+            } else {
+                m.to_owned()
+            }
+        });
+
+    let num_images = request.num_images.unwrap_or(1).clamp(1, 4);
+    let aspect_ratio = request.aspect_ratio.as_deref().unwrap_or("1:1");
+
+    // Build input — common fields used by FLUX and SDXL families
+    let mut input = json!({
+        "prompt": request.prompt,
+        "num_outputs": num_images,
+        "aspect_ratio": aspect_ratio,
+        "output_format": "png",
+        "output_quality": 90
+    });
+
+    if let Some(neg) = &request.negative_prompt {
+        let neg = neg.trim();
+        if !neg.is_empty() {
+            input["negative_prompt"] = json!(neg);
+        }
+    }
+
+    // POST to /v1/models/{model}/predictions
+    let create_url = format!("https://api.replicate.com/v1/models/{model}/predictions");
+    let create_payload = json!({ "input": input });
+
+    let create_response: Value = client
+        .post(&create_url)
+        .bearer_auth(&api_key)
+        .header("Prefer", "wait=60") // ask Replicate to wait up to 60s synchronously
+        .json(&create_payload)
+        .send()
+        .await?
+        .error_for_status()
+        .map_err(ImageGenError::Request)?
+        .json()
+        .await?;
+
+    // If already succeeded (Prefer: wait worked), parse immediately
+    let prediction = if create_response["status"].as_str() == Some("succeeded") {
+        create_response
+    } else {
+        // Fall back to polling
+        let prediction_url = create_response["urls"]["get"]
+            .as_str()
+            .ok_or(ImageGenError::UnexpectedResponse)?
+            .to_owned();
+
+        poll_replicate(client, &api_key, &prediction_url).await?
+    };
+
+    if let Some(err) = prediction.get("error") {
+        if !err.is_null() {
+            let msg = err.as_str().unwrap_or("unknown Replicate error");
+            return Err(ImageGenError::ModelError(msg.to_owned()));
+        }
+    }
+
+    // Output is an array of image URLs
+    let output = prediction["output"]
+        .as_array()
+        .ok_or(ImageGenError::UnexpectedResponse)?;
+
+    let mut images = Vec::new();
+    for url_val in output {
+        if let Some(url) = url_val.as_str() {
+            match fetch_url_as_data_uri(client, url).await {
+                Ok(data_uri) => images.push(GeneratedImage {
+                    data_uri,
+                    mime_type: "image/png".to_owned(),
+                }),
+                Err(_) => continue,
+            }
+        }
+    }
+
+    if images.is_empty() {
+        return Err(ImageGenError::NoImagesReturned);
+    }
+
+    Ok(ImageGenResponse {
+        images,
+        model,
+        provider: "replicate".to_owned(),
+        prompt: request.prompt.clone(),
+        description: None,
+    })
+}
+
+/// Poll a Replicate prediction URL until it reaches a terminal state.
+async fn poll_replicate(
+    client: &Client,
+    api_key: &str,
+    url: &str,
+) -> Result<Value, ImageGenError> {
+    for _ in 0..60 {
+        tokio::time::sleep(std::time::Duration::from_secs(2)).await;
+
+        let response: Value = client
+            .get(url)
+            .bearer_auth(api_key)
+            .send()
+            .await?
+            .error_for_status()
+            .map_err(ImageGenError::Request)?
+            .json()
+            .await?;
+
+        match response["status"].as_str() {
+            Some("succeeded") | Some("failed") | Some("canceled") => return Ok(response),
+            _ => continue,
+        }
+    }
+
+    Err(ImageGenError::ModelError(
+        "Replicate prediction timed out after 120 seconds".to_owned(),
+    ))
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Shared helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+/// Download an image URL and return it as a `data:<mime>;base64,<data>` URI.
+async fn fetch_url_as_data_uri(client: &Client, url: &str) -> Result<String, ImageGenError> {
+    let resp = client
+        .get(url)
+        .send()
+        .await?
+        .error_for_status()
+        .map_err(ImageGenError::Request)?;
+
+    let mime_type = resp
+        .headers()
+        .get("content-type")
+        .and_then(|v| v.to_str().ok())
+        .map(|ct| ct.split(';').next().unwrap_or("image/jpeg").trim().to_owned())
+        .unwrap_or_else(|| "image/jpeg".to_owned());
+
+    let bytes = resp.bytes().await?;
+    if bytes.is_empty() {
+        return Err(ImageGenError::NoImagesReturned);
+    }
+
+    let b64 = STANDARD.encode(&bytes);
+    Ok(format!("data:{mime_type};base64,{b64}"))
+}
+
+/// Generate a short random hex string suitable for a multipart boundary.
+/// Uses `/dev/urandom` on Linux/macOS via the `sha2` crate's internal
+/// randomness; falls back to a time-based seed. No extra crate required.
+fn uuid_v4_hex() -> String {
+    use std::time::{SystemTime, UNIX_EPOCH};
+    // Mix nanos + a simple linear-congruential step for fast unique strings
+    let seed = SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .map(|d| d.subsec_nanos())
+        .unwrap_or(12345);
+    format!("{:016x}{:016x}", seed as u64 ^ 0xDEAD_BEEF_CAFE_BABE, seed as u64)
+}
+
+/// Encode `fields` as a `multipart/form-data` text-only body for the given boundary.
+fn build_multipart_text(boundary: &str, fields: &[(String, String)]) -> String {
+    let mut body = String::new();
+    for (name, value) in fields {
+        body.push_str(&format!("--{boundary}\r\n"));
+        body.push_str(&format!(
+            "Content-Disposition: form-data; name=\"{name}\"\r\n\r\n"
+        ));
+        body.push_str(value);
+        body.push_str("\r\n");
+    }
+    body.push_str(&format!("--{boundary}--\r\n"));
+    body
+}
+
+/// Build the final prompt string, optionally embedding aspect ratio and negative
+/// prompt guidance. Used by providers that accept a plain text prompt.
 fn build_prompt(request: &ImageGenRequest) -> String {
     let mut prompt = request.prompt.trim().to_owned();
 
@@ -228,18 +802,28 @@ fn build_prompt(request: &ImageGenRequest) -> String {
     prompt
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Tests
+// ─────────────────────────────────────────────────────────────────────────────
+
 #[cfg(test)]
 mod tests {
     use super::*;
 
-    #[test]
-    fn build_prompt_plain() {
-        let req = ImageGenRequest {
-            prompt: "a red apple".to_owned(),
+    fn make_request(prompt: &str) -> ImageGenRequest {
+        ImageGenRequest {
+            prompt: prompt.to_owned(),
             negative_prompt: None,
             aspect_ratio: None,
             num_images: None,
-        };
+            model: None,
+            provider: None,
+        }
+    }
+
+    #[test]
+    fn build_prompt_plain() {
+        let req = make_request("a red apple");
         assert_eq!(build_prompt(&req), "a red apple");
     }
 
@@ -250,6 +834,8 @@ mod tests {
             negative_prompt: Some("blurry, low quality".to_owned()),
             aspect_ratio: Some("16:9".to_owned()),
             num_images: Some(2),
+            model: None,
+            provider: None,
         };
         let result = build_prompt(&req);
         assert!(result.contains("a cat"));
@@ -264,8 +850,9 @@ mod tests {
             negative_prompt: None,
             aspect_ratio: Some("1:1".to_owned()),
             num_images: None,
+            model: None,
+            provider: None,
         };
-        // "1:1" is default — should not append extra text
         assert!(!build_prompt(&req).contains("aspect ratio"));
     }
 
@@ -274,4 +861,21 @@ mod tests {
         assert_eq!(5u8.clamp(1, 4), 4);
         assert_eq!(0u8.clamp(1, 4), 1);
     }
+
+    #[test]
+    fn dalle_size_mapping() {
+        assert_eq!(aspect_ratio_to_dalle_size(Some("16:9")), "1792x1024");
+        assert_eq!(aspect_ratio_to_dalle_size(Some("9:16")), "1024x1792");
+        assert_eq!(aspect_ratio_to_dalle_size(Some("1:1")), "1024x1024");
+        assert_eq!(aspect_ratio_to_dalle_size(None), "1024x1024");
+    }
+
+    #[test]
+    fn ideogram_ratio_mapping() {
+        assert_eq!(aspect_ratio_to_ideogram(Some("16:9")), "ASPECT_16_9");
+        assert_eq!(aspect_ratio_to_ideogram(Some("9:16")), "ASPECT_9_16");
+        assert_eq!(aspect_ratio_to_ideogram(Some("4:3")), "ASPECT_4_3");
+        assert_eq!(aspect_ratio_to_ideogram(Some("1:1")), "ASPECT_1_1");
+        assert_eq!(aspect_ratio_to_ideogram(None), "ASPECT_1_1");
+    }
 }
diff --git a/src/renderer/src-web/components/ImageStudioPanel.tsx b/src/renderer/src-web/components/ImageStudioPanel.tsx
index bfff90a..0b461d9 100644
--- a/src/renderer/src-web/components/ImageStudioPanel.tsx
+++ b/src/renderer/src-web/components/ImageStudioPanel.tsx
@@ -1,9 +1,11 @@
-import React, { useState, useRef, useCallback } from 'react'
+import React, { useState, useRef, useCallback, useEffect } from 'react'
 import {
   generateImages,
+  getImageGenProviders,
   convertFileSrc,
   type ImageGenRequest,
   type ImageGenResponse,
+  type ImageGenProviders,
   type PictureEntry,
 } from '../tauri'
 
@@ -27,6 +29,53 @@ const STYLE_SUGGESTIONS = [
   'cinematic', 'digital art', '3D render', 'sketch',
 ]
 
+// Per-provider model presets shown in the model dropdown
+const PROVIDER_MODELS: Record<string, { value: string; label: string }[]> = {
+  nanobanana: [
+    { value: 'gemini-2.5-flash-image', label: 'Gemini 2.5 Flash Image (Default)' },
+    { value: 'gemini-2.0-flash-image', label: 'Gemini 2.0 Flash Image' },
+  ],
+  dalle: [
+    { value: 'dall-e-3',    label: 'DALL·E 3 (Default)' },
+    { value: 'gpt-image-1', label: 'GPT-Image-1' },
+    { value: 'dall-e-2',    label: 'DALL·E 2' },
+  ],
+  stability: [
+    { value: 'sd3.5-large',       label: 'SD 3.5 Large (Default)' },
+    { value: 'sd3.5-large-turbo', label: 'SD 3.5 Large Turbo' },
+    { value: 'sd3-medium',        label: 'SD 3 Medium' },
+    { value: 'core',              label: 'Stable Image Core' },
+  ],
+  ideogram: [
+    { value: 'V_3',       label: 'Ideogram V3 (Default)' },
+    { value: 'V_2',       label: 'Ideogram V2' },
+    { value: 'V_2_TURBO', label: 'Ideogram V2 Turbo' },
+  ],
+  replicate: [
+    { value: 'black-forest-labs/flux-1.1-pro',          label: 'FLUX 1.1 Pro (Default)' },
+    { value: 'black-forest-labs/flux-schnell',          label: 'FLUX Schnell (fast)' },
+    { value: 'stability-ai/sdxl',                       label: 'SDXL' },
+    { value: 'bytedance/sdxl-lightning-4step',          label: 'SDXL Lightning' },
+  ],
+}
+
+const PROVIDER_LABELS: Record<string, string> = {
+  nanobanana: '✦ NanoBanana (Gemini)',
+  dalle:      '⬡ DALL·E (OpenAI)',
+  stability:  '◈ Stability AI',
+  ideogram:   '◉ Ideogram',
+  replicate:  '⬢ Replicate',
+}
+
+function providerLabel(key: string) {
+  return PROVIDER_LABELS[key] ?? key
+}
+
+function defaultModelForProvider(provider: string): string {
+  const models = PROVIDER_MODELS[provider]
+  return models?.[0]?.value ?? ''
+}
+
 function SkeletonCard() {
   return (
     <div className="img-studio-skeleton">
@@ -39,16 +88,42 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
   const [prompt, setPrompt] = useState('')
   const [negativePrompt, setNegativePrompt] = useState('')
   const [showNegative, setShowNegative] = useState(false)
-  const [selectedModel, setSelectedModel] = useState('gemini-2.5-flash-image')
-  const [customModel, setCustomModel] = useState('')
   const [aspectRatio, setAspectRatio] = useState<AspectRatio>('1:1')
   const [numImages, setNumImages] = useState(1)
   const [generating, setGenerating] = useState(false)
   const [error, setError] = useState('')
   const [result, setResult] = useState<ImageGenResponse | null>(null)
   const [promptHistory, setPromptHistory] = useState<string[]>([])
+
+  // Provider / model state
+  const [providers, setProviders] = useState<ImageGenProviders>({ active: 'nanobanana', available: ['nanobanana'] })
+  const [selectedProvider, setSelectedProvider] = useState('nanobanana')
+  const [selectedModel, setSelectedModel] = useState(defaultModelForProvider('nanobanana'))
+  const [customModel, setCustomModel] = useState('')
+
   const promptRef = useRef<HTMLTextAreaElement>(null)
 
+  // Load available providers on mount
+  useEffect(() => {
+    let cancelled = false
+    getImageGenProviders().then((data) => {
+      if (cancelled) return
+      setProviders(data)
+      setSelectedProvider(data.active)
+      setSelectedModel(defaultModelForProvider(data.active))
+    }).catch(() => { /* keep defaults */ })
+    return () => { cancelled = true }
+  }, [])
+
+  // When provider changes, reset model to provider's default
+  const handleProviderChange = (provider: string) => {
+    setSelectedProvider(provider)
+    setSelectedModel(defaultModelForProvider(provider))
+    setCustomModel('')
+  }
+
+  const effectiveModel = selectedModel === 'custom' ? customModel.trim() : selectedModel
+
   const handleGenerate = useCallback(async () => {
     const trimmed = prompt.trim()
     if (!trimmed || generating) return
@@ -62,7 +137,8 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
       negativePrompt: negativePrompt.trim() || undefined,
       aspectRatio,
       numImages,
-      model: selectedModel === 'custom' ? customModel.trim() : selectedModel,
+      model: effectiveModel || undefined,
+      provider: selectedProvider,
     }
 
     try {
@@ -77,7 +153,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
     } finally {
       setGenerating(false)
     }
-  }, [prompt, negativePrompt, aspectRatio, numImages, generating, onRefreshPictures, selectedModel, customModel])
+  }, [prompt, negativePrompt, aspectRatio, numImages, generating, onRefreshPictures, selectedProvider, effectiveModel])
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
@@ -97,6 +173,8 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
 
   if (view !== 'imagine') return null
 
+  const modelOptions = PROVIDER_MODELS[selectedProvider] ?? []
+
   return (
     <div className="img-studio" id="image-studio-panel" role="main" aria-label="Image Studio">
       {/* Header */}
@@ -107,48 +185,83 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
           </svg>
           <h1>Image Studio</h1>
           <span className="img-studio-badge">
-            {selectedModel === 'custom' ? (customModel.trim() || 'custom') : selectedModel}
+            {providerLabel(selectedProvider)}
           </span>
         </div>
-        <p className="img-studio-subtitle">Generate images with Google's Gemini image model</p>
+        <p className="img-studio-subtitle">
+          Generate images with{' '}
+          {providers.available.length > 1
+            ? `${providers.available.length} configured providers`
+            : providerLabel(selectedProvider)}
+        </p>
       </header>
 
       {/* Main content */}
       <div className="img-studio-content">
         {/* Left: controls */}
         <section className="img-studio-controls" aria-label="Generation settings">
-          {/* Model selection */}
-          <div className="img-studio-field">
-            <label className="img-studio-label" htmlFor="img-studio-model">
-              Model
-              <span className="img-studio-label-hint">Select the generation model</span>
-            </label>
-            <select
-              id="img-studio-model"
-              className="img-studio-textarea"
-              style={{ padding: '8px 10px', height: '38px', cursor: 'pointer' }}
-              value={selectedModel}
-              onChange={(e) => setSelectedModel(e.target.value)}
-              disabled={generating}
-            >
-              <option value="gemini-2.5-flash-image">Gemini 2.5 Flash Image (Default)</option>
-              <option value="gemini-3.1-flash-image">Gemini 3.1 Flash Image</option>
-              <option value="gemini-3-pro-image">Gemini 3 Pro Image</option>
-              <option value="imagen-3.0-generate-002">Imagen 3</option>
-              <option value="custom">Custom Model ID...</option>
-            </select>
-            {selectedModel === 'custom' && (
+
+          {/* Provider & Model side-by-side dropdown selectors */}
+          <div className="img-studio-field" style={{ display: 'flex', gap: '10px', width: '100%' }}>
+            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '4px' }}>
+              <label className="img-studio-label" htmlFor="img-studio-provider" style={{ display: 'flex', alignItems: 'center', width: '100%', height: '18px' }}>
+                <span>Provider</span>
+              </label>
+              <select
+                id="img-studio-provider"
+                className="img-studio-textarea"
+                style={{ padding: '8px 10px', height: '38px', cursor: 'pointer' }}
+                value={selectedProvider}
+                onChange={(e) => handleProviderChange(e.target.value)}
+                disabled={generating}
+              >
+                {providers.available.map((prov) => (
+                  <option key={prov} value={prov}>
+                    {providerLabel(prov).replace(/^[^a-zA-Z0-9]+/, '') /* remove prefix symbol if preferred or keep it */}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '4px' }}>
+              <label className="img-studio-label" htmlFor="img-studio-model" style={{ display: 'flex', alignItems: 'center', height: '18px' }}>
+                Model
+              </label>
+              <select
+                id="img-studio-model"
+                className="img-studio-textarea"
+                style={{ padding: '8px 10px', height: '38px', cursor: 'pointer' }}
+                value={selectedModel}
+                onChange={(e) => setSelectedModel(e.target.value)}
+                disabled={generating}
+              >
+                {modelOptions.map(({ value, label }) => (
+                  <option key={value} value={value}>{label}</option>
+                ))}
+                <option value="custom">Custom Model ID...</option>
+              </select>
+            </div>
+          </div>
+
+          {/* Custom Model ID input */}
+          {selectedModel === 'custom' && (
+            <div className="img-studio-field" style={{ marginTop: '-8px' }}>
               <input
                 type="text"
                 className="img-studio-textarea img-studio-textarea--sm"
-                style={{ marginTop: '5px' }}
-                placeholder="e.g. gemini-3.1-flash-image"
+                placeholder={
+                  selectedProvider === 'replicate'
+                    ? 'e.g. owner/model-name'
+                    : selectedProvider === 'dalle'
+                    ? 'e.g. dall-e-3'
+                    : 'e.g. sd3.5-large'
+                }
                 value={customModel}
                 onChange={(e) => setCustomModel(e.target.value)}
                 disabled={generating}
               />
-            )}
-          </div>
+            </div>
+          )}
 
           {/* Prompt */}
           <div className="img-studio-field">
@@ -243,24 +356,33 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
             </div>
           </div>
 
-          {/* Count */}
+          {/* Count — DALL·E 3 only supports n=1 */}
           <div className="img-studio-field">
-            <span className="img-studio-label">Number of images</span>
+            <span className="img-studio-label">
+              Number of images
+              {(selectedProvider === 'dalle' && (effectiveModel === 'dall-e-3' || effectiveModel === 'gpt-image-1')) && (
+                <span className="img-studio-label-hint"> (DALL·E 3 / GPT-Image-1: max 1)</span>
+              )}
+            </span>
             <div className="img-studio-count-group" role="radiogroup" aria-label="Image count">
-              {[1, 2, 3, 4].map((n) => (
-                <button
-                  key={n}
-                  type="button"
-                  role="radio"
-                  aria-checked={numImages === n}
-                  className={`img-studio-count-btn ${numImages === n ? 'is-active' : ''}`}
-                  onClick={() => setNumImages(n)}
-                  disabled={generating}
-                  id={`img-studio-count-${n}`}
-                >
-                  {n}
-                </button>
-              ))}
+              {[1, 2, 3, 4].map((n) => {
+                const isDisabled = generating ||
+                  (selectedProvider === 'dalle' && (effectiveModel === 'dall-e-3' || effectiveModel === 'gpt-image-1') && n > 1)
+                return (
+                  <button
+                    key={n}
+                    type="button"
+                    role="radio"
+                    aria-checked={numImages === n}
+                    className={`img-studio-count-btn ${numImages === n ? 'is-active' : ''}`}
+                    onClick={() => setNumImages(n)}
+                    disabled={isDisabled}
+                    id={`img-studio-count-${n}`}
+                  >
+                    {n}
+                  </button>
+                )
+              })}
             </div>
           </div>
 
@@ -332,7 +454,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
                 <SkeletonCard key={i} />
               ))}
               <p className="img-studio-generating-label" aria-live="assertive">
-                Creating {numImages} image{numImages > 1 ? 's' : ''} — this may take a few seconds…
+                Creating {numImages} image{numImages > 1 ? 's' : ''} with {providerLabel(selectedProvider)} — this may take a few seconds…
               </p>
             </div>
           )}
@@ -389,7 +511,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
                 ))}
               </div>
               <p className="img-studio-meta">
-                Model: <strong>{result.model}</strong> · {result.images.length} image{result.images.length > 1 ? 's' : ''} · Saved to gallery
+                Provider: <strong>{providerLabel(result.provider)}</strong> · Model: <strong>{result.model}</strong> · {result.images.length} image{result.images.length > 1 ? 's' : ''} · Saved to gallery
               </p>
             </>
           )}
@@ -402,7 +524,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
                 </svg>
               </div>
               <p>Your generated images will appear here</p>
-              <span>Type a prompt and click Generate Image to start</span>
+              <span>Select a provider, type a prompt, and click Generate Image to start</span>
             </div>
           )}
         </section>
diff --git a/src/renderer/src-web/css/image-studio.css b/src/renderer/src-web/css/image-studio.css
index 617462e..1069425 100644
--- a/src/renderer/src-web/css/image-studio.css
+++ b/src/renderer/src-web/css/image-studio.css
@@ -1,5 +1,5 @@
 /* ============================================================
-   Image Studio Panel — NanoBanana (Gemini Image Generation)
+   Image Studio Panel — Multi-provider Image Generation
    ============================================================ */
 
 /* Root panel: overlays the main content area, aligned with sidebar */
@@ -206,6 +206,47 @@
   margin-left: 2px;
 }
 
+/* ── Provider selector ─────────────────────────────────── */
+.img-studio-provider-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.img-studio-provider-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 5px 11px;
+  border: 1px solid rgb(148 163 184 / 18%);
+  border-radius: 99px;
+  background: rgb(15 23 42 / 60%);
+  color: #64748b;
+  font-size: 0.72rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+  white-space: nowrap;
+}
+
+.img-studio-provider-btn:hover:not(:disabled) {
+  border-color: rgb(52 211 153 / 35%);
+  background: rgb(16 185 129 / 10%);
+  color: #a7f3d0;
+}
+
+.img-studio-provider-btn.is-active {
+  border-color: rgb(52 211 153 / 65%);
+  background: rgb(16 185 129 / 22%);
+  color: #6ee7b7;
+  font-weight: 600;
+  box-shadow: 0 0 0 1px rgb(52 211 153 / 20%) inset;
+}
+
+.img-studio-provider-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 /* ── Aspect ratio buttons ──────────────────────────────── */
 .img-studio-aspect-group,
 .img-studio-count-group {
diff --git a/src/renderer/src-web/tauri.ts b/src/renderer/src-web/tauri.ts
index b539a72..44e3d4d 100644
--- a/src/renderer/src-web/tauri.ts
+++ b/src/renderer/src-web/tauri.ts
@@ -72,6 +72,13 @@ export interface ImageGenRequest {
   aspectRatio?: '1:1' | '16:9' | '9:16' | '4:3'
   numImages?: number
   model?: string
+  /** Which image generation provider to use. Falls back to config default when omitted. */
+  provider?: string
+}
+
+export interface ImageGenProviders {
+  active: string
+  available: string[]
 }
 
 export interface ImageGenResponse {
@@ -435,6 +442,7 @@ export async function generateImages(
         aspectRatio: request.aspectRatio ?? '1:1',
         numImages: request.numImages ?? 1,
         model: request.model,
+        provider: request.provider,
       }),
     })
     if (!res.ok) {
@@ -456,6 +464,69 @@ export async function generateImages(
   return invoke<ImageGenResponse>('generate_images', { request })
 }
 
+/** Fetch which image-generation providers are currently configured on the backend. */
+export async function getImageGenProviders(): Promise<ImageGenProviders> {
+  if (typeof window === 'undefined' || !isTauriRuntime()) {
+    const API_BASE = getApiBase()
+    try {
+      const res = await fetch(`${API_BASE}/image-gen/providers`)
+      if (res.ok) return await res.json()
+    } catch (_) { /* ignore */ }
+    return { active: 'nanobanana', available: ['nanobanana'] }
+  }
+  // Desktop / Tauri: read config to know which keys are set
+  try {
+    const { invoke } = await import('@tauri-apps/api/core')
+    const config = await invoke<Record<string, string>>('get_config')
+    const available: string[] = []
+    if (config.api_key)            available.push('nanobanana')
+    if (config.openai_api_key)     available.push('dalle')
+    if (config.stability_api_key)  available.push('stability')
+    if (config.ideogram_api_key)   available.push('ideogram')
+    if (config.replicate_api_key)  available.push('replicate')
+    if (available.length === 0)    available.push('nanobanana')
+    const active = available.includes(config.image_gen_provider)
+      ? config.image_gen_provider
+      : available[0]
+    return { active, available }
+  } catch (_) {
+    return { active: 'nanobanana', available: ['nanobanana'] }
+  }
+}
+
+/** Updates the default image generation provider in the configuration. */
+export async function setDefaultImageProvider(provider: string): Promise<boolean> {
+  if (typeof window === 'undefined' || !isTauriRuntime()) {
+    const API_BASE = getApiBase()
+    try {
+      const getRes = await fetch(`${API_BASE}/config`)
+      if (!getRes.ok) return false
+      const config = await getRes.json()
+      config.image_gen_provider = provider
+      const saveRes = await fetch(`${API_BASE}/config`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(config)
+      })
+      return saveRes.ok
+    } catch (_) {
+      return false
+    }
+  }
+
+  // Desktop / Tauri
+  try {
+    const { invoke } = await import('@tauri-apps/api/core')
+    const config = await invoke<any>('get_config')
+    config.image_gen_provider = provider
+    await invoke('update_config', { config })
+    return true
+  } catch (_) {
+    return false
+  }
+}
+
+
 
 export async function submitToolApproval(token: string, approved: boolean): Promise<void> {
   if (typeof window === 'undefined' || !isTauriRuntime()) {
diff --git a/src/renderer/src/components/ImageStudioPanel.tsx b/src/renderer/src/components/ImageStudioPanel.tsx
index bfff90a..0b461d9 100644
--- a/src/renderer/src/components/ImageStudioPanel.tsx
+++ b/src/renderer/src/components/ImageStudioPanel.tsx
@@ -1,9 +1,11 @@
-import React, { useState, useRef, useCallback } from 'react'
+import React, { useState, useRef, useCallback, useEffect } from 'react'
 import {
   generateImages,
+  getImageGenProviders,
   convertFileSrc,
   type ImageGenRequest,
   type ImageGenResponse,
+  type ImageGenProviders,
   type PictureEntry,
 } from '../tauri'
 
@@ -27,6 +29,53 @@ const STYLE_SUGGESTIONS = [
   'cinematic', 'digital art', '3D render', 'sketch',
 ]
 
+// Per-provider model presets shown in the model dropdown
+const PROVIDER_MODELS: Record<string, { value: string; label: string }[]> = {
+  nanobanana: [
+    { value: 'gemini-2.5-flash-image', label: 'Gemini 2.5 Flash Image (Default)' },
+    { value: 'gemini-2.0-flash-image', label: 'Gemini 2.0 Flash Image' },
+  ],
+  dalle: [
+    { value: 'dall-e-3',    label: 'DALL·E 3 (Default)' },
+    { value: 'gpt-image-1', label: 'GPT-Image-1' },
+    { value: 'dall-e-2',    label: 'DALL·E 2' },
+  ],
+  stability: [
+    { value: 'sd3.5-large',       label: 'SD 3.5 Large (Default)' },
+    { value: 'sd3.5-large-turbo', label: 'SD 3.5 Large Turbo' },
+    { value: 'sd3-medium',        label: 'SD 3 Medium' },
+    { value: 'core',              label: 'Stable Image Core' },
+  ],
+  ideogram: [
+    { value: 'V_3',       label: 'Ideogram V3 (Default)' },
+    { value: 'V_2',       label: 'Ideogram V2' },
+    { value: 'V_2_TURBO', label: 'Ideogram V2 Turbo' },
+  ],
+  replicate: [
+    { value: 'black-forest-labs/flux-1.1-pro',          label: 'FLUX 1.1 Pro (Default)' },
+    { value: 'black-forest-labs/flux-schnell',          label: 'FLUX Schnell (fast)' },
+    { value: 'stability-ai/sdxl',                       label: 'SDXL' },
+    { value: 'bytedance/sdxl-lightning-4step',          label: 'SDXL Lightning' },
+  ],
+}
+
+const PROVIDER_LABELS: Record<string, string> = {
+  nanobanana: '✦ NanoBanana (Gemini)',
+  dalle:      '⬡ DALL·E (OpenAI)',
+  stability:  '◈ Stability AI',
+  ideogram:   '◉ Ideogram',
+  replicate:  '⬢ Replicate',
+}
+
+function providerLabel(key: string) {
+  return PROVIDER_LABELS[key] ?? key
+}
+
+function defaultModelForProvider(provider: string): string {
+  const models = PROVIDER_MODELS[provider]
+  return models?.[0]?.value ?? ''
+}
+
 function SkeletonCard() {
   return (
     <div className="img-studio-skeleton">
@@ -39,16 +88,42 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
   const [prompt, setPrompt] = useState('')
   const [negativePrompt, setNegativePrompt] = useState('')
   const [showNegative, setShowNegative] = useState(false)
-  const [selectedModel, setSelectedModel] = useState('gemini-2.5-flash-image')
-  const [customModel, setCustomModel] = useState('')
   const [aspectRatio, setAspectRatio] = useState<AspectRatio>('1:1')
   const [numImages, setNumImages] = useState(1)
   const [generating, setGenerating] = useState(false)
   const [error, setError] = useState('')
   const [result, setResult] = useState<ImageGenResponse | null>(null)
   const [promptHistory, setPromptHistory] = useState<string[]>([])
+
+  // Provider / model state
+  const [providers, setProviders] = useState<ImageGenProviders>({ active: 'nanobanana', available: ['nanobanana'] })
+  const [selectedProvider, setSelectedProvider] = useState('nanobanana')
+  const [selectedModel, setSelectedModel] = useState(defaultModelForProvider('nanobanana'))
+  const [customModel, setCustomModel] = useState('')
+
   const promptRef = useRef<HTMLTextAreaElement>(null)
 
+  // Load available providers on mount
+  useEffect(() => {
+    let cancelled = false
+    getImageGenProviders().then((data) => {
+      if (cancelled) return
+      setProviders(data)
+      setSelectedProvider(data.active)
+      setSelectedModel(defaultModelForProvider(data.active))
+    }).catch(() => { /* keep defaults */ })
+    return () => { cancelled = true }
+  }, [])
+
+  // When provider changes, reset model to provider's default
+  const handleProviderChange = (provider: string) => {
+    setSelectedProvider(provider)
+    setSelectedModel(defaultModelForProvider(provider))
+    setCustomModel('')
+  }
+
+  const effectiveModel = selectedModel === 'custom' ? customModel.trim() : selectedModel
+
   const handleGenerate = useCallback(async () => {
     const trimmed = prompt.trim()
     if (!trimmed || generating) return
@@ -62,7 +137,8 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
       negativePrompt: negativePrompt.trim() || undefined,
       aspectRatio,
       numImages,
-      model: selectedModel === 'custom' ? customModel.trim() : selectedModel,
+      model: effectiveModel || undefined,
+      provider: selectedProvider,
     }
 
     try {
@@ -77,7 +153,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
     } finally {
       setGenerating(false)
     }
-  }, [prompt, negativePrompt, aspectRatio, numImages, generating, onRefreshPictures, selectedModel, customModel])
+  }, [prompt, negativePrompt, aspectRatio, numImages, generating, onRefreshPictures, selectedProvider, effectiveModel])
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
@@ -97,6 +173,8 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
 
   if (view !== 'imagine') return null
 
+  const modelOptions = PROVIDER_MODELS[selectedProvider] ?? []
+
   return (
     <div className="img-studio" id="image-studio-panel" role="main" aria-label="Image Studio">
       {/* Header */}
@@ -107,48 +185,83 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
           </svg>
           <h1>Image Studio</h1>
           <span className="img-studio-badge">
-            {selectedModel === 'custom' ? (customModel.trim() || 'custom') : selectedModel}
+            {providerLabel(selectedProvider)}
           </span>
         </div>
-        <p className="img-studio-subtitle">Generate images with Google's Gemini image model</p>
+        <p className="img-studio-subtitle">
+          Generate images with{' '}
+          {providers.available.length > 1
+            ? `${providers.available.length} configured providers`
+            : providerLabel(selectedProvider)}
+        </p>
       </header>
 
       {/* Main content */}
       <div className="img-studio-content">
         {/* Left: controls */}
         <section className="img-studio-controls" aria-label="Generation settings">
-          {/* Model selection */}
-          <div className="img-studio-field">
-            <label className="img-studio-label" htmlFor="img-studio-model">
-              Model
-              <span className="img-studio-label-hint">Select the generation model</span>
-            </label>
-            <select
-              id="img-studio-model"
-              className="img-studio-textarea"
-              style={{ padding: '8px 10px', height: '38px', cursor: 'pointer' }}
-              value={selectedModel}
-              onChange={(e) => setSelectedModel(e.target.value)}
-              disabled={generating}
-            >
-              <option value="gemini-2.5-flash-image">Gemini 2.5 Flash Image (Default)</option>
-              <option value="gemini-3.1-flash-image">Gemini 3.1 Flash Image</option>
-              <option value="gemini-3-pro-image">Gemini 3 Pro Image</option>
-              <option value="imagen-3.0-generate-002">Imagen 3</option>
-              <option value="custom">Custom Model ID...</option>
-            </select>
-            {selectedModel === 'custom' && (
+
+          {/* Provider & Model side-by-side dropdown selectors */}
+          <div className="img-studio-field" style={{ display: 'flex', gap: '10px', width: '100%' }}>
+            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '4px' }}>
+              <label className="img-studio-label" htmlFor="img-studio-provider" style={{ display: 'flex', alignItems: 'center', width: '100%', height: '18px' }}>
+                <span>Provider</span>
+              </label>
+              <select
+                id="img-studio-provider"
+                className="img-studio-textarea"
+                style={{ padding: '8px 10px', height: '38px', cursor: 'pointer' }}
+                value={selectedProvider}
+                onChange={(e) => handleProviderChange(e.target.value)}
+                disabled={generating}
+              >
+                {providers.available.map((prov) => (
+                  <option key={prov} value={prov}>
+                    {providerLabel(prov).replace(/^[^a-zA-Z0-9]+/, '') /* remove prefix symbol if preferred or keep it */}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '4px' }}>
+              <label className="img-studio-label" htmlFor="img-studio-model" style={{ display: 'flex', alignItems: 'center', height: '18px' }}>
+                Model
+              </label>
+              <select
+                id="img-studio-model"
+                className="img-studio-textarea"
+                style={{ padding: '8px 10px', height: '38px', cursor: 'pointer' }}
+                value={selectedModel}
+                onChange={(e) => setSelectedModel(e.target.value)}
+                disabled={generating}
+              >
+                {modelOptions.map(({ value, label }) => (
+                  <option key={value} value={value}>{label}</option>
+                ))}
+                <option value="custom">Custom Model ID...</option>
+              </select>
+            </div>
+          </div>
+
+          {/* Custom Model ID input */}
+          {selectedModel === 'custom' && (
+            <div className="img-studio-field" style={{ marginTop: '-8px' }}>
               <input
                 type="text"
                 className="img-studio-textarea img-studio-textarea--sm"
-                style={{ marginTop: '5px' }}
-                placeholder="e.g. gemini-3.1-flash-image"
+                placeholder={
+                  selectedProvider === 'replicate'
+                    ? 'e.g. owner/model-name'
+                    : selectedProvider === 'dalle'
+                    ? 'e.g. dall-e-3'
+                    : 'e.g. sd3.5-large'
+                }
                 value={customModel}
                 onChange={(e) => setCustomModel(e.target.value)}
                 disabled={generating}
               />
-            )}
-          </div>
+            </div>
+          )}
 
           {/* Prompt */}
           <div className="img-studio-field">
@@ -243,24 +356,33 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
             </div>
           </div>
 
-          {/* Count */}
+          {/* Count — DALL·E 3 only supports n=1 */}
           <div className="img-studio-field">
-            <span className="img-studio-label">Number of images</span>
+            <span className="img-studio-label">
+              Number of images
+              {(selectedProvider === 'dalle' && (effectiveModel === 'dall-e-3' || effectiveModel === 'gpt-image-1')) && (
+                <span className="img-studio-label-hint"> (DALL·E 3 / GPT-Image-1: max 1)</span>
+              )}
+            </span>
             <div className="img-studio-count-group" role="radiogroup" aria-label="Image count">
-              {[1, 2, 3, 4].map((n) => (
-                <button
-                  key={n}
-                  type="button"
-                  role="radio"
-                  aria-checked={numImages === n}
-                  className={`img-studio-count-btn ${numImages === n ? 'is-active' : ''}`}
-                  onClick={() => setNumImages(n)}
-                  disabled={generating}
-                  id={`img-studio-count-${n}`}
-                >
-                  {n}
-                </button>
-              ))}
+              {[1, 2, 3, 4].map((n) => {
+                const isDisabled = generating ||
+                  (selectedProvider === 'dalle' && (effectiveModel === 'dall-e-3' || effectiveModel === 'gpt-image-1') && n > 1)
+                return (
+                  <button
+                    key={n}
+                    type="button"
+                    role="radio"
+                    aria-checked={numImages === n}
+                    className={`img-studio-count-btn ${numImages === n ? 'is-active' : ''}`}
+                    onClick={() => setNumImages(n)}
+                    disabled={isDisabled}
+                    id={`img-studio-count-${n}`}
+                  >
+                    {n}
+                  </button>
+                )
+              })}
             </div>
           </div>
 
@@ -332,7 +454,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
                 <SkeletonCard key={i} />
               ))}
               <p className="img-studio-generating-label" aria-live="assertive">
-                Creating {numImages} image{numImages > 1 ? 's' : ''} — this may take a few seconds…
+                Creating {numImages} image{numImages > 1 ? 's' : ''} with {providerLabel(selectedProvider)} — this may take a few seconds…
               </p>
             </div>
           )}
@@ -389,7 +511,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
                 ))}
               </div>
               <p className="img-studio-meta">
-                Model: <strong>{result.model}</strong> · {result.images.length} image{result.images.length > 1 ? 's' : ''} · Saved to gallery
+                Provider: <strong>{providerLabel(result.provider)}</strong> · Model: <strong>{result.model}</strong> · {result.images.length} image{result.images.length > 1 ? 's' : ''} · Saved to gallery
               </p>
             </>
           )}
@@ -402,7 +524,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
                 </svg>
               </div>
               <p>Your generated images will appear here</p>
-              <span>Type a prompt and click Generate Image to start</span>
+              <span>Select a provider, type a prompt, and click Generate Image to start</span>
             </div>
           )}
         </section>
diff --git a/src/renderer/src/css/image-studio.css b/src/renderer/src/css/image-studio.css
index 617462e..1069425 100644
--- a/src/renderer/src/css/image-studio.css
+++ b/src/renderer/src/css/image-studio.css
@@ -1,5 +1,5 @@
 /* ============================================================
-   Image Studio Panel — NanoBanana (Gemini Image Generation)
+   Image Studio Panel — Multi-provider Image Generation
    ============================================================ */
 
 /* Root panel: overlays the main content area, aligned with sidebar */
@@ -206,6 +206,47 @@
   margin-left: 2px;
 }
 
+/* ── Provider selector ─────────────────────────────────── */
+.img-studio-provider-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.img-studio-provider-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 5px 11px;
+  border: 1px solid rgb(148 163 184 / 18%);
+  border-radius: 99px;
+  background: rgb(15 23 42 / 60%);
+  color: #64748b;
+  font-size: 0.72rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+  white-space: nowrap;
+}
+
+.img-studio-provider-btn:hover:not(:disabled) {
+  border-color: rgb(52 211 153 / 35%);
+  background: rgb(16 185 129 / 10%);
+  color: #a7f3d0;
+}
+
+.img-studio-provider-btn.is-active {
+  border-color: rgb(52 211 153 / 65%);
+  background: rgb(16 185 129 / 22%);
+  color: #6ee7b7;
+  font-weight: 600;
+  box-shadow: 0 0 0 1px rgb(52 211 153 / 20%) inset;
+}
+
+.img-studio-provider-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 /* ── Aspect ratio buttons ──────────────────────────────── */
 .img-studio-aspect-group,
 .img-studio-count-group {
diff --git a/src/renderer/src/tauri.ts b/src/renderer/src/tauri.ts
index 691862a..57b5832 100644
--- a/src/renderer/src/tauri.ts
+++ b/src/renderer/src/tauri.ts
@@ -71,6 +71,13 @@ export interface ImageGenRequest {
   aspectRatio?: '1:1' | '16:9' | '9:16' | '4:3'
   numImages?: number
   model?: string
+  /** Which image generation provider to use. Falls back to config default when omitted. */
+  provider?: string
+}
+
+export interface ImageGenProviders {
+  active: string
+  available: string[]
 }
 
 export interface ImageGenResponse {
@@ -424,6 +431,7 @@ export async function generateImages(
         aspectRatio: request.aspectRatio ?? '1:1',
         numImages: request.numImages ?? 1,
         model: request.model,
+        provider: request.provider,
       }),
     })
     if (!res.ok) {
@@ -445,6 +453,70 @@ export async function generateImages(
   return invoke<ImageGenResponse>('generate_images', { request })
 }
 
+/** Fetch which image-generation providers are currently configured on the backend. */
+export async function getImageGenProviders(): Promise<ImageGenProviders> {
+  if (typeof window === 'undefined' || !(window as any).__TAURI_INTERNALS__) {
+    const API_BASE = 'http://localhost:3000/api'
+    try {
+      const res = await fetch(`${API_BASE}/image-gen/providers`)
+      if (res.ok) return await res.json()
+    } catch (_) { /* ignore */ }
+    return { active: 'nanobanana', available: ['nanobanana'] }
+  }
+  // Desktop / Tauri: read config to know which keys are set
+  try {
+    const { invoke } = await import('@tauri-apps/api/core')
+    const config = await invoke<Record<string, string>>('get_config')
+    const available: string[] = []
+    if (config.api_key)            available.push('nanobanana')
+    if (config.openai_api_key)     available.push('dalle')
+    if (config.stability_api_key)  available.push('stability')
+    if (config.ideogram_api_key)   available.push('ideogram')
+    if (config.replicate_api_key)  available.push('replicate')
+    if (available.length === 0)    available.push('nanobanana')
+    const active = available.includes(config.image_gen_provider)
+      ? config.image_gen_provider
+      : available[0]
+    return { active, available }
+  } catch (_) {
+    return { active: 'nanobanana', available: ['nanobanana'] }
+  }
+}
+
+/** Updates the default image generation provider in the configuration. */
+export async function setDefaultImageProvider(provider: string): Promise<boolean> {
+  if (typeof window === 'undefined' || !(window as any).__TAURI_INTERNALS__) {
+    const API_BASE = "http://localhost:3000/api";
+    try {
+      const getRes = await fetch(`${API_BASE}/config`)
+      if (!getRes.ok) return false
+      const config = await getRes.json()
+      config.image_gen_provider = provider
+      const saveRes = await fetch(`${API_BASE}/config`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(config)
+      })
+      return saveRes.ok
+    } catch (_) {
+      return false
+    }
+  }
+
+  // Desktop / Tauri
+  try {
+    const { invoke } = await import('@tauri-apps/api/core')
+    const config = await invoke<any>('get_config')
+    config.image_gen_provider = provider
+    await invoke('update_config', { config })
+    return true
+  } catch (_) {
+    return false
+  }
+}
+
+
+
 export async function getWorkspaceTree(path?: string | null): Promise<WorkspaceTreeEntry> {
   if (typeof window === 'undefined' || !(window as any).__TAURI_INTERNALS__) {
     return {

From 1802406095249a0b698dad13fd1df47908abd970 Mon Sep 17 00:00:00 2001
From: Pheem49 <killerpheem13@gmail.com>
Date: Sun, 21 Jun 2026 20:45:36 +0700
Subject: [PATCH 3/4] refactor: centralize color variables and update
 ImageStudioPanel to include history management

---
 crates/mint-core/src/chat.rs                  |  32 +-
 .../src-web/components/ImageStudioPanel.tsx   | 246 ++++++++++-----
 src/renderer/src-web/css/image-studio.css     | 281 ++++++++++++------
 src/renderer/src-web/css/styles.css           |  72 +++--
 .../src/components/ImageStudioPanel.tsx       | 246 ++++++++++-----
 src/renderer/src/css/image-studio.css         | 281 ++++++++++++------
 src/renderer/src/css/styles.css               |  72 +++--
 7 files changed, 857 insertions(+), 373 deletions(-)

diff --git a/crates/mint-core/src/chat.rs b/crates/mint-core/src/chat.rs
index 567893e..34e013d 100644
--- a/crates/mint-core/src/chat.rs
+++ b/crates/mint-core/src/chat.rs
@@ -604,7 +604,13 @@ where
 fn parse_stream_line(format: StreamFormat, line: &str) -> Option<String> {
     let payload = match format {
         StreamFormat::Ollama => line,
-        _ => line.strip_prefix("data: ")?.trim(),
+        _ => {
+            if let Some(stripped) = line.strip_prefix("data:") {
+                stripped.trim()
+            } else {
+                return None;
+            }
+        }
     };
     if payload.is_empty() || payload == "[DONE]" {
         return None;
@@ -862,6 +868,30 @@ mod tests {
             .as_deref(),
             Some("hello")
         );
+        assert_eq!(
+            parse_stream_line(
+                StreamFormat::OpenAi,
+                r#"data:{"choices":[{"delta":{"content":"hello"}}]}"#
+            )
+            .as_deref(),
+            Some("hello")
+        );
+        assert_eq!(
+            parse_stream_line(
+                StreamFormat::Gemini,
+                r#"data: {"candidates":[{"content":{"parts":[{"text":"hello"}]}}]}"#
+            )
+            .as_deref(),
+            Some("hello")
+        );
+        assert_eq!(
+            parse_stream_line(
+                StreamFormat::Gemini,
+                r#"data:{"candidates":[{"content":{"parts":[{"text":"hello"}]}}]}"#
+            )
+            .as_deref(),
+            Some("hello")
+        );
         assert_eq!(
             parse_stream_line(StreamFormat::Ollama, r#"{"message":{"content":"hi"}}"#).as_deref(),
             Some("hi")
diff --git a/src/renderer/src-web/components/ImageStudioPanel.tsx b/src/renderer/src-web/components/ImageStudioPanel.tsx
index 0b461d9..fbe6873 100644
--- a/src/renderer/src-web/components/ImageStudioPanel.tsx
+++ b/src/renderer/src-web/components/ImageStudioPanel.tsx
@@ -3,6 +3,7 @@ import {
   generateImages,
   getImageGenProviders,
   convertFileSrc,
+  listSavedPictures,
   type ImageGenRequest,
   type ImageGenResponse,
   type ImageGenProviders,
@@ -94,6 +95,25 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
   const [error, setError] = useState('')
   const [result, setResult] = useState<ImageGenResponse | null>(null)
   const [promptHistory, setPromptHistory] = useState<string[]>([])
+  const [historyPictures, setHistoryPictures] = useState<PictureEntry[]>([])
+
+  const loadHistory = useCallback(async () => {
+    try {
+      const pics = await listSavedPictures()
+      const imageGenSources = ['nanobanana', 'dalle', 'stability', 'ideogram', 'replicate']
+      const filtered = pics.filter((pic) =>
+        imageGenSources.includes(pic.source?.toLowerCase()),
+      )
+      const sorted = [...filtered].sort((a, b) => {
+        const da = a.createdAt ? new Date(a.createdAt).getTime() : 0
+        const db = b.createdAt ? new Date(b.createdAt).getTime() : 0
+        return db - da || b.filename.localeCompare(a.filename)
+      })
+      setHistoryPictures(sorted)
+    } catch (err) {
+      console.error('Failed to load history pictures:', err)
+    }
+  }, [])
 
   // Provider / model state
   const [providers, setProviders] = useState<ImageGenProviders>({ active: 'nanobanana', available: ['nanobanana'] })
@@ -103,7 +123,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
 
   const promptRef = useRef<HTMLTextAreaElement>(null)
 
-  // Load available providers on mount
+  // Load available providers and history on mount
   useEffect(() => {
     let cancelled = false
     getImageGenProviders().then((data) => {
@@ -112,8 +132,9 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
       setSelectedProvider(data.active)
       setSelectedModel(defaultModelForProvider(data.active))
     }).catch(() => { /* keep defaults */ })
+    loadHistory()
     return () => { cancelled = true }
-  }, [])
+  }, [loadHistory])
 
   // When provider changes, reset model to provider's default
   const handleProviderChange = (provider: string) => {
@@ -148,6 +169,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
         [trimmed, ...prev.filter((p) => p !== trimmed)].slice(0, 8),
       )
       onRefreshPictures?.()
+      loadHistory()
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err))
     } finally {
@@ -448,85 +470,167 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
 
         {/* Right: results */}
         <section className="img-studio-results" aria-label="Generated images" aria-live="polite">
-          {generating && (
-            <div className="img-studio-skeleton-grid">
-              {Array.from({ length: numImages }).map((_, i) => (
-                <SkeletonCard key={i} />
-              ))}
-              <p className="img-studio-generating-label" aria-live="assertive">
-                Creating {numImages} image{numImages > 1 ? 's' : ''} with {providerLabel(selectedProvider)} — this may take a few seconds…
-              </p>
-            </div>
-          )}
+          {/* Active Generation Session workspace */}
+          <div className="img-studio-active-workspace">
+            {generating && (
+              <div className="img-studio-skeleton-grid">
+                {Array.from({ length: numImages }).map((_, i) => (
+                  <SkeletonCard key={i} />
+                ))}
+                <p className="img-studio-generating-label" aria-live="assertive">
+                  Creating {numImages} image{numImages > 1 ? 's' : ''} with {providerLabel(selectedProvider)} — this may take a few seconds…
+                </p>
+              </div>
+            )}
 
-          {!generating && result && (
-            <>
-              {result.description && (
-                <p className="img-studio-description">{result.description}</p>
-              )}
-              <div
-                className="img-studio-grid"
-                style={{ '--img-count': result.images.length } as React.CSSProperties}
-              >
-                {result.images.map((entry, idx) => (
-                  <article key={entry.id} className="img-studio-card" aria-label={`Generated image ${idx + 1}`}>
-                    <div className="img-studio-card-img-wrap">
-                      <img
-                        src={convertFileSrc(entry.url || entry.path)}
-                        alt={entry.message || prompt}
-                        className="img-studio-card-img"
-                        loading="eager"
-                        decoding="async"
-                      />
-                    </div>
-                    <div className="img-studio-card-actions">
-                      <button
-                        type="button"
-                        className="img-studio-action-btn"
-                        onClick={() => downloadImage(entry, idx)}
-                        title="Download image"
-                        id={`img-studio-download-${idx}`}
-                      >
-                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
-                        </svg>
-                        Download
-                      </button>
-                      {onSendToChat && (
+            {!generating && result && (
+              <>
+                {result.description && (
+                  <p className="img-studio-description">{result.description}</p>
+                )}
+                <div
+                  className="img-studio-grid"
+                  style={{ '--img-count': result.images.length } as React.CSSProperties}
+                >
+                  {result.images.map((entry, idx) => (
+                    <article key={entry.id} className="img-studio-card" aria-label={`Generated image ${idx + 1}`}>
+                      <div className="img-studio-card-img-wrap">
+                        <img
+                          src={convertFileSrc(entry.url || entry.path)}
+                          alt={entry.message || prompt}
+                          className="img-studio-card-img"
+                          loading="eager"
+                          decoding="async"
+                        />
+                      </div>
+                      <div className="img-studio-card-actions">
                         <button
                           type="button"
-                          className="img-studio-action-btn img-studio-action-btn--primary"
-                          onClick={() => onSendToChat(entry.url || entry.path, prompt)}
-                          title="Send to Chat"
-                          id={`img-studio-send-${idx}`}
+                          className="img-studio-action-btn"
+                          onClick={() => downloadImage(entry, idx)}
+                          title="Download image"
+                          id={`img-studio-download-${idx}`}
                         >
                           <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                            <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
                           </svg>
-                          Send to Chat
+                          Download
                         </button>
-                      )}
-                    </div>
-                  </article>
-                ))}
-              </div>
-              <p className="img-studio-meta">
-                Provider: <strong>{providerLabel(result.provider)}</strong> · Model: <strong>{result.model}</strong> · {result.images.length} image{result.images.length > 1 ? 's' : ''} · Saved to gallery
-              </p>
-            </>
-          )}
+                        {onSendToChat && (
+                          <button
+                            type="button"
+                            className="img-studio-action-btn img-studio-action-btn--primary"
+                            onClick={() => onSendToChat(entry.url || entry.path, prompt)}
+                            title="Send to Chat"
+                            id={`img-studio-send-${idx}`}
+                          >
+                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                              <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+                            </svg>
+                            Send to Chat
+                          </button>
+                        )}
+                      </div>
+                    </article>
+                  ))}
+                </div>
+                <p className="img-studio-meta">
+                  Provider: <strong>{providerLabel(result.provider)}</strong> · Model: <strong>{result.model}</strong> · {result.images.length} image{result.images.length > 1 ? 's' : ''} · Saved to gallery
+                </p>
+              </>
+            )}
 
-          {!generating && !result && (
-            <div className="img-studio-empty">
-              <div className="img-studio-empty-icon" aria-hidden="true">
-                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
-                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
-                </svg>
+            {!generating && !result && (
+              <div className="img-studio-active-empty">
+                <div className="img-studio-empty-icon" aria-hidden="true">
+                  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+                  </svg>
+                </div>
+                <p>No active generation</p>
+                <span>Enter a prompt on the left pane and generate new images.</span>
               </div>
-              <p>Your generated images will appear here</p>
-              <span>Select a provider, type a prompt, and click Generate Image to start</span>
+            )}
+          </div>
+
+          {/* 2. Middle divider / tab header */}
+          <div className="img-studio-history-header">
+            <div className="img-studio-history-title">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
+              </svg>
+              <span>Gallery & History</span>
+              <span className="img-studio-history-badge">
+                {(() => {
+                  const currentIds = new Set(result?.images.map(img => img.id) || [])
+                  return historyPictures.filter(img => !currentIds.has(img.id)).length
+                })()}
+              </span>
             </div>
-          )}
+          </div>
+
+          {/* 3. Previously Generated Gallery list */}
+          <div className="img-studio-history-gallery">
+            {(() => {
+              const currentIds = new Set(result?.images.map(img => img.id) || [])
+              const filteredHistory = historyPictures.filter(img => !currentIds.has(img.id))
+              
+              if (filteredHistory.length === 0) {
+                return (
+                  <div className="img-studio-gallery-empty">
+                    <p>Your saved gallery is empty</p>
+                    <span>Generated images will be stored here automatically.</span>
+                  </div>
+                )
+              }
+              
+              return (
+                <div className="img-studio-grid">
+                  {filteredHistory.map((picture, idx) => (
+                    <article key={picture.id} className="img-studio-card" aria-label={`Saved image ${idx + 1}`}>
+                      <div className="img-studio-card-img-wrap">
+                        <img
+                          src={convertFileSrc(picture.thumbnailUrl || picture.thumbnailPath || picture.url || picture.path)}
+                          alt={picture.message || 'Generated image'}
+                          className="img-studio-card-img"
+                          loading="lazy"
+                          decoding="async"
+                        />
+                      </div>
+                      <div className="img-studio-card-actions">
+                        <button
+                          type="button"
+                          className="img-studio-action-btn"
+                          onClick={() => downloadImage(picture, idx)}
+                          title="Download image"
+                          id={`img-studio-gallery-download-${idx}`}
+                        >
+                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
+                          </svg>
+                          Download
+                        </button>
+                        {onSendToChat && (
+                          <button
+                            type="button"
+                            className="img-studio-action-btn img-studio-action-btn--primary"
+                            onClick={() => onSendToChat(picture.url || picture.path, picture.message || '')}
+                            title="Send to Chat"
+                            id={`img-studio-gallery-send-${idx}`}
+                          >
+                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                              <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+                            </svg>
+                            Send to Chat
+                          </button>
+                        )}
+                      </div>
+                    </article>
+                  ))}
+                </div>
+              )
+            })()}
+          </div>
         </section>
       </div>
     </div>
diff --git a/src/renderer/src-web/css/image-studio.css b/src/renderer/src-web/css/image-studio.css
index 1069425..c79907e 100644
--- a/src/renderer/src-web/css/image-studio.css
+++ b/src/renderer/src-web/css/image-studio.css
@@ -33,8 +33,8 @@
 /* ── Header ─────────────────────────────────────────────── */
 .img-studio-header {
   padding: 20px 28px 12px;
-  border-bottom: 1px solid rgb(148 163 184 / 14%);
-  background: rgb(15 23 42 / 60%);
+  border-bottom: 1px solid var(--border);
+  background: var(--chrome-bg);
   backdrop-filter: var(--glass-blur, blur(16px));
   flex-shrink: 0;
 }
@@ -43,18 +43,18 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  color: #d1fae5;
+  color: var(--text-main);
 }
 
 .img-studio-header-title h1 {
   margin: 0;
   font-size: 1.18rem;
   font-weight: 700;
-  color: #f0fdf4;
+  color: var(--text-main);
 }
 
 .img-studio-header-title svg {
-  color: #34d399;
+  color: var(--accent);
   flex-shrink: 0;
 }
 
@@ -63,9 +63,9 @@
   align-items: center;
   padding: 2px 8px;
   border-radius: 99px;
-  background: linear-gradient(90deg, rgb(52 211 153 / 22%), rgb(79 131 230 / 22%));
-  border: 1px solid rgb(52 211 153 / 30%);
-  color: #6ee7b7;
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+  color: var(--accent-hover);
   font-size: 0.68rem;
   font-weight: 600;
   letter-spacing: 0.03em;
@@ -74,7 +74,7 @@
 
 .img-studio-subtitle {
   margin: 6px 0 0;
-  color: #64748b;
+  color: var(--text-muted);
   font-size: 0.80rem;
 }
 
@@ -93,11 +93,29 @@
   flex-direction: column;
   gap: 18px;
   padding: 22px 20px;
-  border-right: 1px solid rgb(148 163 184 / 12%);
-  background: rgb(7 12 28 / 50%);
+  border-right: 1px solid var(--border);
+  background: var(--panel-soft);
   overflow-y: auto;
   scrollbar-width: thin;
-  scrollbar-color: rgb(52 211 153 / 20%) transparent;
+  scrollbar-color: color-mix(in srgb, var(--accent) 20%, transparent) transparent;
+}
+
+.img-studio-controls::-webkit-scrollbar,
+.img-studio-results::-webkit-scrollbar {
+  width: 6px;
+}
+.img-studio-controls::-webkit-scrollbar-track,
+.img-studio-results::-webkit-scrollbar-track {
+  background: transparent;
+}
+.img-studio-controls::-webkit-scrollbar-thumb,
+.img-studio-results::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  border-radius: 99px;
+}
+.img-studio-controls::-webkit-scrollbar-thumb:hover,
+.img-studio-results::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--accent) 30%, transparent);
 }
 
 /* ── Field groups ──────────────────────────────────────── */
@@ -111,7 +129,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  color: #94a3b8;
+  color: var(--text-soft);
   font-size: 0.76rem;
   font-weight: 500;
   letter-spacing: 0.02em;
@@ -121,7 +139,7 @@
 .img-studio-label-hint {
   text-transform: none;
   font-weight: 400;
-  color: #475569;
+  color: var(--text-muted);
   letter-spacing: 0;
 }
 
@@ -129,20 +147,20 @@
 .img-studio-textarea {
   width: 100%;
   padding: 10px 12px;
-  border: 1px solid rgb(148 163 184 / 18%);
+  border: 1px solid var(--border);
   border-radius: 10px;
-  background: rgb(15 23 42 / 70%);
-  color: #f1f5f9;
+  background: var(--input-bg);
+  color: var(--text-main);
   font-size: 0.87rem;
   line-height: 1.55;
   resize: vertical;
   outline: none;
-  transition: border-color 0.15s;
+  transition: border-color 0.15s, box-shadow 0.15s;
 }
 
 .img-studio-textarea:focus {
-  border-color: rgb(52 211 153 / 50%);
-  box-shadow: 0 0 0 2px rgb(52 211 153 / 10%);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
 }
 
 .img-studio-textarea--sm {
@@ -150,9 +168,10 @@
 }
 
 .img-studio-prompt-hint {
-  color: #334155;
+  color: var(--text-muted);
   font-size: 0.70rem;
   text-align: right;
+  opacity: 0.85;
 }
 
 /* ── Style chips ───────────────────────────────────────── */
@@ -164,19 +183,19 @@
 
 .img-studio-chip {
   padding: 4px 10px;
-  border: 1px solid rgb(148 163 184 / 18%);
+  border: 1px solid var(--border);
   border-radius: 99px;
-  background: rgb(30 41 59 / 55%);
-  color: #94a3b8;
+  background: var(--panel-raised);
+  color: var(--text-soft);
   font-size: 0.73rem;
   cursor: pointer;
   transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
 
 .img-studio-chip:hover:not(:disabled) {
-  border-color: rgb(52 211 153 / 40%);
-  background: rgb(16 185 129 / 14%);
-  color: #6ee7b7;
+  border-color: var(--accent-hover);
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  color: var(--accent-hover);
 }
 
 /* ── Negative prompt toggle ────────────────────────────── */
@@ -187,14 +206,14 @@
   padding: 0;
   border: none;
   background: transparent;
-  color: #64748b;
+  color: var(--text-soft);
   font-size: 0.78rem;
   cursor: pointer;
   transition: color 0.15s;
 }
 
 .img-studio-toggle:hover {
-  color: #94a3b8;
+  color: var(--text-main);
 }
 
 .img-studio-badge-dot {
@@ -202,7 +221,7 @@
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: #34d399;
+  background: var(--accent);
   margin-left: 2px;
 }
 
@@ -217,10 +236,10 @@
   display: inline-flex;
   align-items: center;
   padding: 5px 11px;
-  border: 1px solid rgb(148 163 184 / 18%);
+  border: 1px solid var(--border);
   border-radius: 99px;
-  background: rgb(15 23 42 / 60%);
-  color: #64748b;
+  background: var(--panel-raised);
+  color: var(--text-soft);
   font-size: 0.72rem;
   font-weight: 500;
   cursor: pointer;
@@ -229,17 +248,17 @@
 }
 
 .img-studio-provider-btn:hover:not(:disabled) {
-  border-color: rgb(52 211 153 / 35%);
-  background: rgb(16 185 129 / 10%);
-  color: #a7f3d0;
+  border-color: var(--accent-hover);
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  color: var(--accent-hover);
 }
 
 .img-studio-provider-btn.is-active {
-  border-color: rgb(52 211 153 / 65%);
-  background: rgb(16 185 129 / 22%);
-  color: #6ee7b7;
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+  color: var(--accent-hover);
   font-weight: 600;
-  box-shadow: 0 0 0 1px rgb(52 211 153 / 20%) inset;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent) inset;
 }
 
 .img-studio-provider-btn:disabled {
@@ -261,10 +280,10 @@
   align-items: center;
   gap: 5px;
   padding: 6px 12px;
-  border: 1px solid rgb(148 163 184 / 18%);
+  border: 1px solid var(--border);
   border-radius: 8px;
-  background: rgb(15 23 42 / 60%);
-  color: #64748b;
+  background: var(--panel-raised);
+  color: var(--text-soft);
   font-size: 0.78rem;
   cursor: pointer;
   transition: background 0.15s, border-color 0.15s, color 0.15s;
@@ -272,16 +291,16 @@
 
 .img-studio-aspect-btn:hover:not(:disabled),
 .img-studio-count-btn:hover:not(:disabled) {
-  border-color: rgb(52 211 153 / 35%);
-  background: rgb(16 185 129 / 12%);
-  color: #a7f3d0;
+  border-color: var(--accent-hover);
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  color: var(--accent-hover);
 }
 
 .img-studio-aspect-btn.is-active,
 .img-studio-count-btn.is-active {
-  border-color: rgb(52 211 153 / 60%);
-  background: rgb(16 185 129 / 22%);
-  color: #6ee7b7;
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+  color: var(--accent-hover);
   font-weight: 600;
 }
 
@@ -306,19 +325,19 @@
   padding: 11px 18px;
   border: none;
   border-radius: 10px;
-  background: linear-gradient(135deg, #059669 0%, #047857 100%);
+  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 80%, #000) 100%);
   color: #fff;
   font-size: 0.88rem;
   font-weight: 600;
   cursor: pointer;
   transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
-  box-shadow: 0 2px 12px rgb(5 150 105 / 30%);
+  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 30%, transparent);
 }
 
 .img-studio-generate-btn:hover:not(:disabled) {
   opacity: 0.92;
   transform: translateY(-1px);
-  box-shadow: 0 4px 18px rgb(5 150 105 / 40%);
+  box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 45%, transparent);
 }
 
 .img-studio-generate-btn:disabled {
@@ -337,7 +356,7 @@
   display: inline-block;
   width: 14px;
   height: 14px;
-  border: 2px solid rgb(255 255 255 / 30%);
+  border: 2px solid rgba(255, 255, 255, 0.3);
   border-top-color: #fff;
   border-radius: 50%;
   animation: img-studio-spin 0.6s linear infinite;
@@ -353,10 +372,10 @@
   align-items: flex-start;
   gap: 8px;
   padding: 10px 12px;
-  border: 1px solid rgb(251 113 133 / 35%);
+  border: 1px solid rgba(239, 68, 68, 0.35);
   border-radius: 8px;
-  background: rgb(127 29 29 / 22%);
-  color: #fca5a5;
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
   font-size: 0.80rem;
   line-height: 1.45;
 }
@@ -372,7 +391,7 @@
   padding: 0;
   border: none;
   background: transparent;
-  color: #fca5a5;
+  color: #ef4444;
   font-size: 1rem;
   cursor: pointer;
   line-height: 1;
@@ -396,7 +415,7 @@
   border: none;
   border-radius: 6px;
   background: transparent;
-  color: #475569;
+  color: var(--text-soft);
   font-size: 0.75rem;
   text-align: left;
   cursor: pointer;
@@ -405,8 +424,8 @@
 }
 
 .img-studio-history-item:hover:not(:disabled) {
-  background: rgb(30 41 59 / 55%);
-  color: #94a3b8;
+  background: var(--panel-raised);
+  color: var(--text-main);
 }
 
 .img-studio-history-item span {
@@ -425,7 +444,7 @@
   padding: 24px 28px;
   overflow-y: auto;
   scrollbar-width: thin;
-  scrollbar-color: rgb(52 211 153 / 20%) transparent;
+  scrollbar-color: color-mix(in srgb, var(--accent) 20%, transparent) transparent;
 }
 
 /* ── Skeleton loading ──────────────────────────────────── */
@@ -439,7 +458,7 @@
   position: relative;
   aspect-ratio: 1;
   border-radius: 12px;
-  background: rgb(30 41 59 / 55%);
+  background: var(--panel-raised);
   overflow: hidden;
 }
 
@@ -449,7 +468,7 @@
   background: linear-gradient(
     90deg,
     transparent 0%,
-    rgb(52 211 153 / 8%) 50%,
+    color-mix(in srgb, var(--accent) 8%, transparent) 50%,
     transparent 100%
   );
   animation: img-studio-shimmer 1.4s ease-in-out infinite;
@@ -463,7 +482,7 @@
 .img-studio-generating-label {
   grid-column: 1 / -1;
   margin: 4px 0 0;
-  color: #475569;
+  color: var(--text-soft);
   font-size: 0.78rem;
   text-align: center;
   animation: img-studio-pulse 1.6s ease-in-out infinite;
@@ -477,13 +496,13 @@
 /* ── Result grid ───────────────────────────────────────── */
 .img-studio-description {
   margin: 0;
-  color: #94a3b8;
+  color: var(--text-soft);
   font-size: 0.82rem;
   line-height: 1.5;
   padding: 10px 12px;
   border-radius: 8px;
-  background: rgb(30 41 59 / 40%);
-  border: 1px solid rgb(148 163 184 / 12%);
+  background: var(--panel-raised);
+  border: 1px solid var(--border);
 }
 
 .img-studio-grid {
@@ -497,22 +516,22 @@
   display: flex;
   flex-direction: column;
   border-radius: 12px;
-  background: rgb(15 23 42 / 55%);
-  border: 1px solid rgb(148 163 184 / 14%);
+  background: var(--panel-raised);
+  border: 1px solid var(--border);
   overflow: hidden;
   transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
 }
 
 .img-studio-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 30px rgb(0 0 0 / 35%);
-  border-color: rgb(52 211 153 / 35%);
+  box-shadow: var(--shadow);
+  border-color: var(--accent);
 }
 
 .img-studio-card-img-wrap {
   position: relative;
   aspect-ratio: 1;
-  background: #111827;
+  background: var(--panel-soft);
   overflow: hidden;
 }
 
@@ -532,7 +551,7 @@
   display: flex;
   gap: 6px;
   padding: 8px 10px;
-  border-top: 1px solid rgb(148 163 184 / 10%);
+  border-top: 1px solid var(--border);
 }
 
 .img-studio-action-btn {
@@ -542,40 +561,40 @@
   flex: 1;
   justify-content: center;
   padding: 5px 8px;
-  border: 1px solid rgb(148 163 184 / 18%);
+  border: 1px solid var(--border);
   border-radius: 7px;
   background: transparent;
-  color: #64748b;
+  color: var(--text-soft);
   font-size: 0.72rem;
   cursor: pointer;
   transition: background 0.15s, color 0.15s, border-color 0.15s;
 }
 
 .img-studio-action-btn:hover {
-  background: rgb(30 41 59 / 70%);
-  color: #94a3b8;
-  border-color: rgb(148 163 184 / 28%);
+  background: var(--panel-soft);
+  color: var(--text-main);
+  border-color: var(--border-light);
 }
 
 .img-studio-action-btn--primary {
-  border-color: rgb(52 211 153 / 30%);
-  color: #34d399;
+  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
+  color: var(--accent);
 }
 
 .img-studio-action-btn--primary:hover {
-  background: rgb(16 185 129 / 15%);
-  color: #6ee7b7;
-  border-color: rgb(52 211 153 / 50%);
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  color: var(--accent-hover);
+  border-color: var(--accent);
 }
 
 .img-studio-meta {
   margin: 0;
-  color: #334155;
+  color: var(--text-muted);
   font-size: 0.73rem;
   text-align: right;
 }
 
-.img-studio-meta strong { color: #475569; }
+.img-studio-meta strong { color: var(--text-soft); }
 
 /* ── Empty state ───────────────────────────────────────── */
 .img-studio-empty {
@@ -587,23 +606,103 @@
   flex: 1;
   min-height: 300px;
   text-align: center;
-  color: #334155;
+  color: var(--text-muted);
 }
 
 .img-studio-empty-icon {
-  opacity: 0.18;
-  color: #34d399;
+  opacity: 0.35;
+  color: var(--accent);
 }
 
 .img-studio-empty p {
   margin: 0;
-  color: #475569;
+  color: var(--text-soft);
   font-size: 0.92rem;
 }
 
 .img-studio-empty span {
   font-size: 0.78rem;
-  color: #334155;
+  color: var(--text-muted);
+}
+
+/* ── History Header & Divider ──────────────────────────── */
+.img-studio-history-header {
+  margin-top: 28px;
+  padding: 12px 0;
+  border-top: 1px dashed var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.img-studio-history-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-soft);
+  font-size: 0.88rem;
+  font-weight: 600;
+}
+
+.img-studio-history-title svg {
+  color: var(--accent);
+}
+
+.img-studio-history-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1px 6px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  border-radius: 99px;
+  background: var(--panel-soft);
+  border: 1px solid var(--border);
+  color: var(--text-soft);
+}
+
+.img-studio-gallery-empty {
+  padding: 30px 20px;
+  text-align: center;
+  color: var(--text-muted);
+  border: 1px dashed var(--border);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.01);
+}
+
+.img-studio-gallery-empty p {
+  margin: 0 0 4px;
+  font-size: 0.82rem;
+  color: var(--text-soft);
+}
+
+.img-studio-gallery-empty span {
+  font-size: 0.74rem;
+}
+
+.img-studio-active-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 40px 20px;
+  border: 1px dashed var(--border);
+  border-radius: 12px;
+  background: var(--panel-soft);
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.img-studio-active-empty p {
+  margin: 0;
+  color: var(--text-soft);
+  font-size: 0.88rem;
+  font-weight: 500;
+}
+
+.img-studio-active-empty span {
+  font-size: 0.78rem;
 }
 
 /* ── Responsive ───────────────────────────────────────── */
@@ -616,7 +715,7 @@
 
   .img-studio-controls {
     border-right: none;
-    border-bottom: 1px solid rgb(148 163 184 / 12%);
+    border-bottom: 1px solid var(--border);
     max-height: 50vh;
     overflow-y: auto;
   }
diff --git a/src/renderer/src-web/css/styles.css b/src/renderer/src-web/css/styles.css
index 645755b..ac59ccf 100644
--- a/src/renderer/src-web/css/styles.css
+++ b/src/renderer/src-web/css/styles.css
@@ -18,6 +18,16 @@
   --border-light: rgba(255, 255, 255, 0.11);
   --shadow: none;
   --glass-blur: none;
+  --status-listening: #7dd3fc;
+  --status-thinking: var(--accent);
+  --status-speaking: #22c55e;
+  --status-error: #ef4444;
+  --hover-delete: #fca5a5;
+  --hover-delete-bg: rgba(248, 113, 113, 0.12);
+  --hover-edit: #c7d2fe;
+  --hover-edit-bg: rgba(99, 102, 241, 0.12);
+  --close-btn-hover-bg: #3a2020;
+  --close-btn-hover-color: #ff8a8a;
 }
 
 [data-theme="light"] {
@@ -37,6 +47,16 @@
   --border: rgba(0, 0, 0, 0.06);
   --border-light: rgba(255, 255, 255, 0.6);
   --shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+  --status-listening: #0284c7;
+  --status-thinking: var(--accent);
+  --status-speaking: #16a34a;
+  --status-error: #dc2626;
+  --hover-delete: #dc2626;
+  --hover-delete-bg: rgba(220, 38, 38, 0.08);
+  --hover-edit: #4f46e5;
+  --hover-edit-bg: rgba(79, 70, 229, 0.08);
+  --close-btn-hover-bg: #fee2e2;
+  --close-btn-hover-color: #dc2626;
 }
 
 [data-theme="midnight"] {
@@ -56,6 +76,16 @@
   --border: rgba(99, 102, 241, 0.16);
   --border-light: rgba(99, 102, 241, 0.26);
   --shadow: none;
+  --status-listening: #7dd3fc;
+  --status-thinking: var(--accent);
+  --status-speaking: #22c55e;
+  --status-error: #fca5a5;
+  --hover-delete: #fca5a5;
+  --hover-delete-bg: rgba(248, 113, 113, 0.12);
+  --hover-edit: #c7d2fe;
+  --hover-edit-bg: rgba(99, 102, 241, 0.12);
+  --close-btn-hover-bg: #3a2020;
+  --close-btn-hover-color: #ff8a8a;
 }
 
 * {
@@ -107,7 +137,6 @@ body {
 
 /* Header - Drag Region */
 .drag-region {
-  app-region: no-drag;
   -webkit-app-region: no-drag;
   min-height: 34px;
   padding: 0 8px;
@@ -124,7 +153,6 @@ body {
 }
 
 .header-content {
-  app-region: drag;
   -webkit-app-region: drag;
   display: flex;
   align-items: center;
@@ -134,7 +162,6 @@ body {
 }
 
 .titlebar-drag-space {
-  app-region: drag;
   -webkit-app-region: drag;
   align-self: stretch;
   min-width: 0;
@@ -165,7 +192,6 @@ h1 {
 .header-actions,
 .header-utility,
 .window-controls {
-  app-region: no-drag;
   -webkit-app-region: no-drag;
   display: flex;
   align-items: center;
@@ -197,7 +223,6 @@ h1 {
 .clear-btn,
 .settings-btn {
   -webkit-app-region: no-drag;
-  app-region: no-drag;
   min-width: 0;
   height: 28px;
   border: 1px solid transparent;
@@ -231,7 +256,6 @@ h1 {
 .maximize-btn,
 .minimize-btn {
   -webkit-app-region: no-drag;
-  app-region: no-drag;
   background: transparent;
   border: none;
   color: var(--text-muted);
@@ -2190,13 +2214,13 @@ input:checked + .slider:before {
 }
 
 .sidebar-chat-delete:hover {
-  color: #fca5a5;
-  background: rgba(248, 113, 113, 0.12);
+  color: var(--hover-delete);
+  background: var(--hover-delete-bg);
 }
 
 .sidebar-chat-edit:hover {
-  color: #c7d2fe;
-  background: rgba(99, 102, 241, 0.12);
+  color: var(--hover-edit);
+  background: var(--hover-edit-bg);
 }
 
 .sidebar-chat-rename-input {
@@ -2288,49 +2312,49 @@ input:checked + .slider:before {
 
 .mint-status-pill[data-state="listening"],
 .model-activity-badge[data-state="listening"] {
-  color: #7dd3fc;
+  color: var(--status-listening);
 }
 
 .mint-status-pill[data-state="listening"] .mint-status-dot,
 .model-activity-badge[data-state="listening"] .mint-status-dot {
-  background: #38bdf8;
-  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
+  background: var(--status-listening);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-listening) 16%, transparent);
   animation: mintStatusPulse 1.2s ease-in-out infinite;
 }
 
 .mint-status-pill[data-state="thinking"],
 .model-activity-badge[data-state="thinking"] {
-  color: #a7f3d0;
+  color: var(--status-thinking);
 }
 
 .mint-status-pill[data-state="thinking"] .mint-status-dot,
 .model-activity-badge[data-state="thinking"] .mint-status-dot {
-  background: var(--accent);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
+  background: var(--status-thinking);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-thinking) 20%, transparent);
   animation: mintStatusPulse 1s ease-in-out infinite;
 }
 
 .mint-status-pill[data-state="speaking"],
 .model-activity-badge[data-state="speaking"] {
-  color: #86efac;
+  color: var(--status-speaking);
 }
 
 .mint-status-pill[data-state="speaking"] .mint-status-dot,
 .model-activity-badge[data-state="speaking"] .mint-status-dot {
-  background: #22c55e;
-  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
+  background: var(--status-speaking);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-speaking) 16%, transparent);
   animation: mintStatusPulse 0.9s ease-in-out infinite;
 }
 
 .mint-status-pill[data-state="error"],
 .model-activity-badge[data-state="error"] {
-  color: #fca5a5;
+  color: var(--status-error);
 }
 
 .mint-status-pill[data-state="error"] .mint-status-dot,
 .model-activity-badge[data-state="error"] .mint-status-dot {
-  background: #ef4444;
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
+  background: var(--status-error);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-error) 16%, transparent);
 }
 
 @keyframes mintStatusPulse {
@@ -3319,8 +3343,8 @@ input:checked + .slider:before {
 }
 
 .close-btn:hover {
-  background: #3a2020;
-  color: #ff8a8a;
+  background: var(--close-btn-hover-bg);
+  color: var(--close-btn-hover-color);
 }
 
 .assistant-workspace.layout-horizontal {
diff --git a/src/renderer/src/components/ImageStudioPanel.tsx b/src/renderer/src/components/ImageStudioPanel.tsx
index 0b461d9..fbe6873 100644
--- a/src/renderer/src/components/ImageStudioPanel.tsx
+++ b/src/renderer/src/components/ImageStudioPanel.tsx
@@ -3,6 +3,7 @@ import {
   generateImages,
   getImageGenProviders,
   convertFileSrc,
+  listSavedPictures,
   type ImageGenRequest,
   type ImageGenResponse,
   type ImageGenProviders,
@@ -94,6 +95,25 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
   const [error, setError] = useState('')
   const [result, setResult] = useState<ImageGenResponse | null>(null)
   const [promptHistory, setPromptHistory] = useState<string[]>([])
+  const [historyPictures, setHistoryPictures] = useState<PictureEntry[]>([])
+
+  const loadHistory = useCallback(async () => {
+    try {
+      const pics = await listSavedPictures()
+      const imageGenSources = ['nanobanana', 'dalle', 'stability', 'ideogram', 'replicate']
+      const filtered = pics.filter((pic) =>
+        imageGenSources.includes(pic.source?.toLowerCase()),
+      )
+      const sorted = [...filtered].sort((a, b) => {
+        const da = a.createdAt ? new Date(a.createdAt).getTime() : 0
+        const db = b.createdAt ? new Date(b.createdAt).getTime() : 0
+        return db - da || b.filename.localeCompare(a.filename)
+      })
+      setHistoryPictures(sorted)
+    } catch (err) {
+      console.error('Failed to load history pictures:', err)
+    }
+  }, [])
 
   // Provider / model state
   const [providers, setProviders] = useState<ImageGenProviders>({ active: 'nanobanana', available: ['nanobanana'] })
@@ -103,7 +123,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
 
   const promptRef = useRef<HTMLTextAreaElement>(null)
 
-  // Load available providers on mount
+  // Load available providers and history on mount
   useEffect(() => {
     let cancelled = false
     getImageGenProviders().then((data) => {
@@ -112,8 +132,9 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
       setSelectedProvider(data.active)
       setSelectedModel(defaultModelForProvider(data.active))
     }).catch(() => { /* keep defaults */ })
+    loadHistory()
     return () => { cancelled = true }
-  }, [])
+  }, [loadHistory])
 
   // When provider changes, reset model to provider's default
   const handleProviderChange = (provider: string) => {
@@ -148,6 +169,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
         [trimmed, ...prev.filter((p) => p !== trimmed)].slice(0, 8),
       )
       onRefreshPictures?.()
+      loadHistory()
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err))
     } finally {
@@ -448,85 +470,167 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
 
         {/* Right: results */}
         <section className="img-studio-results" aria-label="Generated images" aria-live="polite">
-          {generating && (
-            <div className="img-studio-skeleton-grid">
-              {Array.from({ length: numImages }).map((_, i) => (
-                <SkeletonCard key={i} />
-              ))}
-              <p className="img-studio-generating-label" aria-live="assertive">
-                Creating {numImages} image{numImages > 1 ? 's' : ''} with {providerLabel(selectedProvider)} — this may take a few seconds…
-              </p>
-            </div>
-          )}
+          {/* Active Generation Session workspace */}
+          <div className="img-studio-active-workspace">
+            {generating && (
+              <div className="img-studio-skeleton-grid">
+                {Array.from({ length: numImages }).map((_, i) => (
+                  <SkeletonCard key={i} />
+                ))}
+                <p className="img-studio-generating-label" aria-live="assertive">
+                  Creating {numImages} image{numImages > 1 ? 's' : ''} with {providerLabel(selectedProvider)} — this may take a few seconds…
+                </p>
+              </div>
+            )}
 
-          {!generating && result && (
-            <>
-              {result.description && (
-                <p className="img-studio-description">{result.description}</p>
-              )}
-              <div
-                className="img-studio-grid"
-                style={{ '--img-count': result.images.length } as React.CSSProperties}
-              >
-                {result.images.map((entry, idx) => (
-                  <article key={entry.id} className="img-studio-card" aria-label={`Generated image ${idx + 1}`}>
-                    <div className="img-studio-card-img-wrap">
-                      <img
-                        src={convertFileSrc(entry.url || entry.path)}
-                        alt={entry.message || prompt}
-                        className="img-studio-card-img"
-                        loading="eager"
-                        decoding="async"
-                      />
-                    </div>
-                    <div className="img-studio-card-actions">
-                      <button
-                        type="button"
-                        className="img-studio-action-btn"
-                        onClick={() => downloadImage(entry, idx)}
-                        title="Download image"
-                        id={`img-studio-download-${idx}`}
-                      >
-                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
-                        </svg>
-                        Download
-                      </button>
-                      {onSendToChat && (
+            {!generating && result && (
+              <>
+                {result.description && (
+                  <p className="img-studio-description">{result.description}</p>
+                )}
+                <div
+                  className="img-studio-grid"
+                  style={{ '--img-count': result.images.length } as React.CSSProperties}
+                >
+                  {result.images.map((entry, idx) => (
+                    <article key={entry.id} className="img-studio-card" aria-label={`Generated image ${idx + 1}`}>
+                      <div className="img-studio-card-img-wrap">
+                        <img
+                          src={convertFileSrc(entry.url || entry.path)}
+                          alt={entry.message || prompt}
+                          className="img-studio-card-img"
+                          loading="eager"
+                          decoding="async"
+                        />
+                      </div>
+                      <div className="img-studio-card-actions">
                         <button
                           type="button"
-                          className="img-studio-action-btn img-studio-action-btn--primary"
-                          onClick={() => onSendToChat(entry.url || entry.path, prompt)}
-                          title="Send to Chat"
-                          id={`img-studio-send-${idx}`}
+                          className="img-studio-action-btn"
+                          onClick={() => downloadImage(entry, idx)}
+                          title="Download image"
+                          id={`img-studio-download-${idx}`}
                         >
                           <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                            <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
                           </svg>
-                          Send to Chat
+                          Download
                         </button>
-                      )}
-                    </div>
-                  </article>
-                ))}
-              </div>
-              <p className="img-studio-meta">
-                Provider: <strong>{providerLabel(result.provider)}</strong> · Model: <strong>{result.model}</strong> · {result.images.length} image{result.images.length > 1 ? 's' : ''} · Saved to gallery
-              </p>
-            </>
-          )}
+                        {onSendToChat && (
+                          <button
+                            type="button"
+                            className="img-studio-action-btn img-studio-action-btn--primary"
+                            onClick={() => onSendToChat(entry.url || entry.path, prompt)}
+                            title="Send to Chat"
+                            id={`img-studio-send-${idx}`}
+                          >
+                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                              <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+                            </svg>
+                            Send to Chat
+                          </button>
+                        )}
+                      </div>
+                    </article>
+                  ))}
+                </div>
+                <p className="img-studio-meta">
+                  Provider: <strong>{providerLabel(result.provider)}</strong> · Model: <strong>{result.model}</strong> · {result.images.length} image{result.images.length > 1 ? 's' : ''} · Saved to gallery
+                </p>
+              </>
+            )}
 
-          {!generating && !result && (
-            <div className="img-studio-empty">
-              <div className="img-studio-empty-icon" aria-hidden="true">
-                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
-                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
-                </svg>
+            {!generating && !result && (
+              <div className="img-studio-active-empty">
+                <div className="img-studio-empty-icon" aria-hidden="true">
+                  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+                  </svg>
+                </div>
+                <p>No active generation</p>
+                <span>Enter a prompt on the left pane and generate new images.</span>
               </div>
-              <p>Your generated images will appear here</p>
-              <span>Select a provider, type a prompt, and click Generate Image to start</span>
+            )}
+          </div>
+
+          {/* 2. Middle divider / tab header */}
+          <div className="img-studio-history-header">
+            <div className="img-studio-history-title">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
+              </svg>
+              <span>Gallery & History</span>
+              <span className="img-studio-history-badge">
+                {(() => {
+                  const currentIds = new Set(result?.images.map(img => img.id) || [])
+                  return historyPictures.filter(img => !currentIds.has(img.id)).length
+                })()}
+              </span>
             </div>
-          )}
+          </div>
+
+          {/* 3. Previously Generated Gallery list */}
+          <div className="img-studio-history-gallery">
+            {(() => {
+              const currentIds = new Set(result?.images.map(img => img.id) || [])
+              const filteredHistory = historyPictures.filter(img => !currentIds.has(img.id))
+              
+              if (filteredHistory.length === 0) {
+                return (
+                  <div className="img-studio-gallery-empty">
+                    <p>Your saved gallery is empty</p>
+                    <span>Generated images will be stored here automatically.</span>
+                  </div>
+                )
+              }
+              
+              return (
+                <div className="img-studio-grid">
+                  {filteredHistory.map((picture, idx) => (
+                    <article key={picture.id} className="img-studio-card" aria-label={`Saved image ${idx + 1}`}>
+                      <div className="img-studio-card-img-wrap">
+                        <img
+                          src={convertFileSrc(picture.thumbnailUrl || picture.thumbnailPath || picture.url || picture.path)}
+                          alt={picture.message || 'Generated image'}
+                          className="img-studio-card-img"
+                          loading="lazy"
+                          decoding="async"
+                        />
+                      </div>
+                      <div className="img-studio-card-actions">
+                        <button
+                          type="button"
+                          className="img-studio-action-btn"
+                          onClick={() => downloadImage(picture, idx)}
+                          title="Download image"
+                          id={`img-studio-gallery-download-${idx}`}
+                        >
+                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
+                          </svg>
+                          Download
+                        </button>
+                        {onSendToChat && (
+                          <button
+                            type="button"
+                            className="img-studio-action-btn img-studio-action-btn--primary"
+                            onClick={() => onSendToChat(picture.url || picture.path, picture.message || '')}
+                            title="Send to Chat"
+                            id={`img-studio-gallery-send-${idx}`}
+                          >
+                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                              <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+                            </svg>
+                            Send to Chat
+                          </button>
+                        )}
+                      </div>
+                    </article>
+                  ))}
+                </div>
+              )
+            })()}
+          </div>
         </section>
       </div>
     </div>
diff --git a/src/renderer/src/css/image-studio.css b/src/renderer/src/css/image-studio.css
index 1069425..c79907e 100644
--- a/src/renderer/src/css/image-studio.css
+++ b/src/renderer/src/css/image-studio.css
@@ -33,8 +33,8 @@
 /* ── Header ─────────────────────────────────────────────── */
 .img-studio-header {
   padding: 20px 28px 12px;
-  border-bottom: 1px solid rgb(148 163 184 / 14%);
-  background: rgb(15 23 42 / 60%);
+  border-bottom: 1px solid var(--border);
+  background: var(--chrome-bg);
   backdrop-filter: var(--glass-blur, blur(16px));
   flex-shrink: 0;
 }
@@ -43,18 +43,18 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  color: #d1fae5;
+  color: var(--text-main);
 }
 
 .img-studio-header-title h1 {
   margin: 0;
   font-size: 1.18rem;
   font-weight: 700;
-  color: #f0fdf4;
+  color: var(--text-main);
 }
 
 .img-studio-header-title svg {
-  color: #34d399;
+  color: var(--accent);
   flex-shrink: 0;
 }
 
@@ -63,9 +63,9 @@
   align-items: center;
   padding: 2px 8px;
   border-radius: 99px;
-  background: linear-gradient(90deg, rgb(52 211 153 / 22%), rgb(79 131 230 / 22%));
-  border: 1px solid rgb(52 211 153 / 30%);
-  color: #6ee7b7;
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+  color: var(--accent-hover);
   font-size: 0.68rem;
   font-weight: 600;
   letter-spacing: 0.03em;
@@ -74,7 +74,7 @@
 
 .img-studio-subtitle {
   margin: 6px 0 0;
-  color: #64748b;
+  color: var(--text-muted);
   font-size: 0.80rem;
 }
 
@@ -93,11 +93,29 @@
   flex-direction: column;
   gap: 18px;
   padding: 22px 20px;
-  border-right: 1px solid rgb(148 163 184 / 12%);
-  background: rgb(7 12 28 / 50%);
+  border-right: 1px solid var(--border);
+  background: var(--panel-soft);
   overflow-y: auto;
   scrollbar-width: thin;
-  scrollbar-color: rgb(52 211 153 / 20%) transparent;
+  scrollbar-color: color-mix(in srgb, var(--accent) 20%, transparent) transparent;
+}
+
+.img-studio-controls::-webkit-scrollbar,
+.img-studio-results::-webkit-scrollbar {
+  width: 6px;
+}
+.img-studio-controls::-webkit-scrollbar-track,
+.img-studio-results::-webkit-scrollbar-track {
+  background: transparent;
+}
+.img-studio-controls::-webkit-scrollbar-thumb,
+.img-studio-results::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  border-radius: 99px;
+}
+.img-studio-controls::-webkit-scrollbar-thumb:hover,
+.img-studio-results::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--accent) 30%, transparent);
 }
 
 /* ── Field groups ──────────────────────────────────────── */
@@ -111,7 +129,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  color: #94a3b8;
+  color: var(--text-soft);
   font-size: 0.76rem;
   font-weight: 500;
   letter-spacing: 0.02em;
@@ -121,7 +139,7 @@
 .img-studio-label-hint {
   text-transform: none;
   font-weight: 400;
-  color: #475569;
+  color: var(--text-muted);
   letter-spacing: 0;
 }
 
@@ -129,20 +147,20 @@
 .img-studio-textarea {
   width: 100%;
   padding: 10px 12px;
-  border: 1px solid rgb(148 163 184 / 18%);
+  border: 1px solid var(--border);
   border-radius: 10px;
-  background: rgb(15 23 42 / 70%);
-  color: #f1f5f9;
+  background: var(--input-bg);
+  color: var(--text-main);
   font-size: 0.87rem;
   line-height: 1.55;
   resize: vertical;
   outline: none;
-  transition: border-color 0.15s;
+  transition: border-color 0.15s, box-shadow 0.15s;
 }
 
 .img-studio-textarea:focus {
-  border-color: rgb(52 211 153 / 50%);
-  box-shadow: 0 0 0 2px rgb(52 211 153 / 10%);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
 }
 
 .img-studio-textarea--sm {
@@ -150,9 +168,10 @@
 }
 
 .img-studio-prompt-hint {
-  color: #334155;
+  color: var(--text-muted);
   font-size: 0.70rem;
   text-align: right;
+  opacity: 0.85;
 }
 
 /* ── Style chips ───────────────────────────────────────── */
@@ -164,19 +183,19 @@
 
 .img-studio-chip {
   padding: 4px 10px;
-  border: 1px solid rgb(148 163 184 / 18%);
+  border: 1px solid var(--border);
   border-radius: 99px;
-  background: rgb(30 41 59 / 55%);
-  color: #94a3b8;
+  background: var(--panel-raised);
+  color: var(--text-soft);
   font-size: 0.73rem;
   cursor: pointer;
   transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
 
 .img-studio-chip:hover:not(:disabled) {
-  border-color: rgb(52 211 153 / 40%);
-  background: rgb(16 185 129 / 14%);
-  color: #6ee7b7;
+  border-color: var(--accent-hover);
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  color: var(--accent-hover);
 }
 
 /* ── Negative prompt toggle ────────────────────────────── */
@@ -187,14 +206,14 @@
   padding: 0;
   border: none;
   background: transparent;
-  color: #64748b;
+  color: var(--text-soft);
   font-size: 0.78rem;
   cursor: pointer;
   transition: color 0.15s;
 }
 
 .img-studio-toggle:hover {
-  color: #94a3b8;
+  color: var(--text-main);
 }
 
 .img-studio-badge-dot {
@@ -202,7 +221,7 @@
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: #34d399;
+  background: var(--accent);
   margin-left: 2px;
 }
 
@@ -217,10 +236,10 @@
   display: inline-flex;
   align-items: center;
   padding: 5px 11px;
-  border: 1px solid rgb(148 163 184 / 18%);
+  border: 1px solid var(--border);
   border-radius: 99px;
-  background: rgb(15 23 42 / 60%);
-  color: #64748b;
+  background: var(--panel-raised);
+  color: var(--text-soft);
   font-size: 0.72rem;
   font-weight: 500;
   cursor: pointer;
@@ -229,17 +248,17 @@
 }
 
 .img-studio-provider-btn:hover:not(:disabled) {
-  border-color: rgb(52 211 153 / 35%);
-  background: rgb(16 185 129 / 10%);
-  color: #a7f3d0;
+  border-color: var(--accent-hover);
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  color: var(--accent-hover);
 }
 
 .img-studio-provider-btn.is-active {
-  border-color: rgb(52 211 153 / 65%);
-  background: rgb(16 185 129 / 22%);
-  color: #6ee7b7;
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+  color: var(--accent-hover);
   font-weight: 600;
-  box-shadow: 0 0 0 1px rgb(52 211 153 / 20%) inset;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent) inset;
 }
 
 .img-studio-provider-btn:disabled {
@@ -261,10 +280,10 @@
   align-items: center;
   gap: 5px;
   padding: 6px 12px;
-  border: 1px solid rgb(148 163 184 / 18%);
+  border: 1px solid var(--border);
   border-radius: 8px;
-  background: rgb(15 23 42 / 60%);
-  color: #64748b;
+  background: var(--panel-raised);
+  color: var(--text-soft);
   font-size: 0.78rem;
   cursor: pointer;
   transition: background 0.15s, border-color 0.15s, color 0.15s;
@@ -272,16 +291,16 @@
 
 .img-studio-aspect-btn:hover:not(:disabled),
 .img-studio-count-btn:hover:not(:disabled) {
-  border-color: rgb(52 211 153 / 35%);
-  background: rgb(16 185 129 / 12%);
-  color: #a7f3d0;
+  border-color: var(--accent-hover);
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  color: var(--accent-hover);
 }
 
 .img-studio-aspect-btn.is-active,
 .img-studio-count-btn.is-active {
-  border-color: rgb(52 211 153 / 60%);
-  background: rgb(16 185 129 / 22%);
-  color: #6ee7b7;
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+  color: var(--accent-hover);
   font-weight: 600;
 }
 
@@ -306,19 +325,19 @@
   padding: 11px 18px;
   border: none;
   border-radius: 10px;
-  background: linear-gradient(135deg, #059669 0%, #047857 100%);
+  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 80%, #000) 100%);
   color: #fff;
   font-size: 0.88rem;
   font-weight: 600;
   cursor: pointer;
   transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
-  box-shadow: 0 2px 12px rgb(5 150 105 / 30%);
+  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 30%, transparent);
 }
 
 .img-studio-generate-btn:hover:not(:disabled) {
   opacity: 0.92;
   transform: translateY(-1px);
-  box-shadow: 0 4px 18px rgb(5 150 105 / 40%);
+  box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 45%, transparent);
 }
 
 .img-studio-generate-btn:disabled {
@@ -337,7 +356,7 @@
   display: inline-block;
   width: 14px;
   height: 14px;
-  border: 2px solid rgb(255 255 255 / 30%);
+  border: 2px solid rgba(255, 255, 255, 0.3);
   border-top-color: #fff;
   border-radius: 50%;
   animation: img-studio-spin 0.6s linear infinite;
@@ -353,10 +372,10 @@
   align-items: flex-start;
   gap: 8px;
   padding: 10px 12px;
-  border: 1px solid rgb(251 113 133 / 35%);
+  border: 1px solid rgba(239, 68, 68, 0.35);
   border-radius: 8px;
-  background: rgb(127 29 29 / 22%);
-  color: #fca5a5;
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
   font-size: 0.80rem;
   line-height: 1.45;
 }
@@ -372,7 +391,7 @@
   padding: 0;
   border: none;
   background: transparent;
-  color: #fca5a5;
+  color: #ef4444;
   font-size: 1rem;
   cursor: pointer;
   line-height: 1;
@@ -396,7 +415,7 @@
   border: none;
   border-radius: 6px;
   background: transparent;
-  color: #475569;
+  color: var(--text-soft);
   font-size: 0.75rem;
   text-align: left;
   cursor: pointer;
@@ -405,8 +424,8 @@
 }
 
 .img-studio-history-item:hover:not(:disabled) {
-  background: rgb(30 41 59 / 55%);
-  color: #94a3b8;
+  background: var(--panel-raised);
+  color: var(--text-main);
 }
 
 .img-studio-history-item span {
@@ -425,7 +444,7 @@
   padding: 24px 28px;
   overflow-y: auto;
   scrollbar-width: thin;
-  scrollbar-color: rgb(52 211 153 / 20%) transparent;
+  scrollbar-color: color-mix(in srgb, var(--accent) 20%, transparent) transparent;
 }
 
 /* ── Skeleton loading ──────────────────────────────────── */
@@ -439,7 +458,7 @@
   position: relative;
   aspect-ratio: 1;
   border-radius: 12px;
-  background: rgb(30 41 59 / 55%);
+  background: var(--panel-raised);
   overflow: hidden;
 }
 
@@ -449,7 +468,7 @@
   background: linear-gradient(
     90deg,
     transparent 0%,
-    rgb(52 211 153 / 8%) 50%,
+    color-mix(in srgb, var(--accent) 8%, transparent) 50%,
     transparent 100%
   );
   animation: img-studio-shimmer 1.4s ease-in-out infinite;
@@ -463,7 +482,7 @@
 .img-studio-generating-label {
   grid-column: 1 / -1;
   margin: 4px 0 0;
-  color: #475569;
+  color: var(--text-soft);
   font-size: 0.78rem;
   text-align: center;
   animation: img-studio-pulse 1.6s ease-in-out infinite;
@@ -477,13 +496,13 @@
 /* ── Result grid ───────────────────────────────────────── */
 .img-studio-description {
   margin: 0;
-  color: #94a3b8;
+  color: var(--text-soft);
   font-size: 0.82rem;
   line-height: 1.5;
   padding: 10px 12px;
   border-radius: 8px;
-  background: rgb(30 41 59 / 40%);
-  border: 1px solid rgb(148 163 184 / 12%);
+  background: var(--panel-raised);
+  border: 1px solid var(--border);
 }
 
 .img-studio-grid {
@@ -497,22 +516,22 @@
   display: flex;
   flex-direction: column;
   border-radius: 12px;
-  background: rgb(15 23 42 / 55%);
-  border: 1px solid rgb(148 163 184 / 14%);
+  background: var(--panel-raised);
+  border: 1px solid var(--border);
   overflow: hidden;
   transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
 }
 
 .img-studio-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 30px rgb(0 0 0 / 35%);
-  border-color: rgb(52 211 153 / 35%);
+  box-shadow: var(--shadow);
+  border-color: var(--accent);
 }
 
 .img-studio-card-img-wrap {
   position: relative;
   aspect-ratio: 1;
-  background: #111827;
+  background: var(--panel-soft);
   overflow: hidden;
 }
 
@@ -532,7 +551,7 @@
   display: flex;
   gap: 6px;
   padding: 8px 10px;
-  border-top: 1px solid rgb(148 163 184 / 10%);
+  border-top: 1px solid var(--border);
 }
 
 .img-studio-action-btn {
@@ -542,40 +561,40 @@
   flex: 1;
   justify-content: center;
   padding: 5px 8px;
-  border: 1px solid rgb(148 163 184 / 18%);
+  border: 1px solid var(--border);
   border-radius: 7px;
   background: transparent;
-  color: #64748b;
+  color: var(--text-soft);
   font-size: 0.72rem;
   cursor: pointer;
   transition: background 0.15s, color 0.15s, border-color 0.15s;
 }
 
 .img-studio-action-btn:hover {
-  background: rgb(30 41 59 / 70%);
-  color: #94a3b8;
-  border-color: rgb(148 163 184 / 28%);
+  background: var(--panel-soft);
+  color: var(--text-main);
+  border-color: var(--border-light);
 }
 
 .img-studio-action-btn--primary {
-  border-color: rgb(52 211 153 / 30%);
-  color: #34d399;
+  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
+  color: var(--accent);
 }
 
 .img-studio-action-btn--primary:hover {
-  background: rgb(16 185 129 / 15%);
-  color: #6ee7b7;
-  border-color: rgb(52 211 153 / 50%);
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  color: var(--accent-hover);
+  border-color: var(--accent);
 }
 
 .img-studio-meta {
   margin: 0;
-  color: #334155;
+  color: var(--text-muted);
   font-size: 0.73rem;
   text-align: right;
 }
 
-.img-studio-meta strong { color: #475569; }
+.img-studio-meta strong { color: var(--text-soft); }
 
 /* ── Empty state ───────────────────────────────────────── */
 .img-studio-empty {
@@ -587,23 +606,103 @@
   flex: 1;
   min-height: 300px;
   text-align: center;
-  color: #334155;
+  color: var(--text-muted);
 }
 
 .img-studio-empty-icon {
-  opacity: 0.18;
-  color: #34d399;
+  opacity: 0.35;
+  color: var(--accent);
 }
 
 .img-studio-empty p {
   margin: 0;
-  color: #475569;
+  color: var(--text-soft);
   font-size: 0.92rem;
 }
 
 .img-studio-empty span {
   font-size: 0.78rem;
-  color: #334155;
+  color: var(--text-muted);
+}
+
+/* ── History Header & Divider ──────────────────────────── */
+.img-studio-history-header {
+  margin-top: 28px;
+  padding: 12px 0;
+  border-top: 1px dashed var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.img-studio-history-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-soft);
+  font-size: 0.88rem;
+  font-weight: 600;
+}
+
+.img-studio-history-title svg {
+  color: var(--accent);
+}
+
+.img-studio-history-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1px 6px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  border-radius: 99px;
+  background: var(--panel-soft);
+  border: 1px solid var(--border);
+  color: var(--text-soft);
+}
+
+.img-studio-gallery-empty {
+  padding: 30px 20px;
+  text-align: center;
+  color: var(--text-muted);
+  border: 1px dashed var(--border);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.01);
+}
+
+.img-studio-gallery-empty p {
+  margin: 0 0 4px;
+  font-size: 0.82rem;
+  color: var(--text-soft);
+}
+
+.img-studio-gallery-empty span {
+  font-size: 0.74rem;
+}
+
+.img-studio-active-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 40px 20px;
+  border: 1px dashed var(--border);
+  border-radius: 12px;
+  background: var(--panel-soft);
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.img-studio-active-empty p {
+  margin: 0;
+  color: var(--text-soft);
+  font-size: 0.88rem;
+  font-weight: 500;
+}
+
+.img-studio-active-empty span {
+  font-size: 0.78rem;
 }
 
 /* ── Responsive ───────────────────────────────────────── */
@@ -616,7 +715,7 @@
 
   .img-studio-controls {
     border-right: none;
-    border-bottom: 1px solid rgb(148 163 184 / 12%);
+    border-bottom: 1px solid var(--border);
     max-height: 50vh;
     overflow-y: auto;
   }
diff --git a/src/renderer/src/css/styles.css b/src/renderer/src/css/styles.css
index 5c454b7..6310af9 100644
--- a/src/renderer/src/css/styles.css
+++ b/src/renderer/src/css/styles.css
@@ -18,6 +18,16 @@
   --border-light: rgba(255, 255, 255, 0.11);
   --shadow: none;
   --glass-blur: none;
+  --status-listening: #7dd3fc;
+  --status-thinking: var(--accent);
+  --status-speaking: #22c55e;
+  --status-error: #ef4444;
+  --hover-delete: #fca5a5;
+  --hover-delete-bg: rgba(248, 113, 113, 0.12);
+  --hover-edit: #c7d2fe;
+  --hover-edit-bg: rgba(99, 102, 241, 0.12);
+  --close-btn-hover-bg: #3a2020;
+  --close-btn-hover-color: #ff8a8a;
 }
 
 [data-theme="light"] {
@@ -37,6 +47,16 @@
   --border: rgba(0, 0, 0, 0.06);
   --border-light: rgba(255, 255, 255, 0.6);
   --shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+  --status-listening: #0284c7;
+  --status-thinking: var(--accent);
+  --status-speaking: #16a34a;
+  --status-error: #dc2626;
+  --hover-delete: #dc2626;
+  --hover-delete-bg: rgba(220, 38, 38, 0.08);
+  --hover-edit: #4f46e5;
+  --hover-edit-bg: rgba(79, 70, 229, 0.08);
+  --close-btn-hover-bg: #fee2e2;
+  --close-btn-hover-color: #dc2626;
 }
 
 [data-theme="midnight"] {
@@ -56,6 +76,16 @@
   --border: rgba(99, 102, 241, 0.16);
   --border-light: rgba(99, 102, 241, 0.26);
   --shadow: none;
+  --status-listening: #7dd3fc;
+  --status-thinking: var(--accent);
+  --status-speaking: #22c55e;
+  --status-error: #fca5a5;
+  --hover-delete: #fca5a5;
+  --hover-delete-bg: rgba(248, 113, 113, 0.12);
+  --hover-edit: #c7d2fe;
+  --hover-edit-bg: rgba(99, 102, 241, 0.12);
+  --close-btn-hover-bg: #3a2020;
+  --close-btn-hover-color: #ff8a8a;
 }
 
 * {
@@ -107,7 +137,6 @@ body {
 
 /* Header - Drag Region */
 .drag-region {
-  app-region: no-drag;
   -webkit-app-region: no-drag;
   min-height: 34px;
   padding: 0 8px;
@@ -124,7 +153,6 @@ body {
 }
 
 .header-content {
-  app-region: drag;
   -webkit-app-region: drag;
   display: flex;
   align-items: center;
@@ -134,7 +162,6 @@ body {
 }
 
 .titlebar-drag-space {
-  app-region: drag;
   -webkit-app-region: drag;
   align-self: stretch;
   min-width: 0;
@@ -165,7 +192,6 @@ h1 {
 .header-actions,
 .header-utility,
 .window-controls {
-  app-region: no-drag;
   -webkit-app-region: no-drag;
   display: flex;
   align-items: center;
@@ -197,7 +223,6 @@ h1 {
 .clear-btn,
 .settings-btn {
   -webkit-app-region: no-drag;
-  app-region: no-drag;
   min-width: 0;
   height: 28px;
   border: 1px solid transparent;
@@ -231,7 +256,6 @@ h1 {
 .maximize-btn,
 .minimize-btn {
   -webkit-app-region: no-drag;
-  app-region: no-drag;
   background: transparent;
   border: none;
   color: var(--text-muted);
@@ -2172,13 +2196,13 @@ input:checked + .slider:before {
 }
 
 .sidebar-chat-delete:hover {
-  color: #fca5a5;
-  background: rgba(248, 113, 113, 0.12);
+  color: var(--hover-delete);
+  background: var(--hover-delete-bg);
 }
 
 .sidebar-chat-edit:hover {
-  color: #c7d2fe;
-  background: rgba(99, 102, 241, 0.12);
+  color: var(--hover-edit);
+  background: var(--hover-edit-bg);
 }
 
 .sidebar-chat-rename-input {
@@ -2270,49 +2294,49 @@ input:checked + .slider:before {
 
 .mint-status-pill[data-state="listening"],
 .model-activity-badge[data-state="listening"] {
-  color: #7dd3fc;
+  color: var(--status-listening);
 }
 
 .mint-status-pill[data-state="listening"] .mint-status-dot,
 .model-activity-badge[data-state="listening"] .mint-status-dot {
-  background: #38bdf8;
-  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
+  background: var(--status-listening);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-listening) 16%, transparent);
   animation: mintStatusPulse 1.2s ease-in-out infinite;
 }
 
 .mint-status-pill[data-state="thinking"],
 .model-activity-badge[data-state="thinking"] {
-  color: #a7f3d0;
+  color: var(--status-thinking);
 }
 
 .mint-status-pill[data-state="thinking"] .mint-status-dot,
 .model-activity-badge[data-state="thinking"] .mint-status-dot {
-  background: var(--accent);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
+  background: var(--status-thinking);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-thinking) 20%, transparent);
   animation: mintStatusPulse 1s ease-in-out infinite;
 }
 
 .mint-status-pill[data-state="speaking"],
 .model-activity-badge[data-state="speaking"] {
-  color: #86efac;
+  color: var(--status-speaking);
 }
 
 .mint-status-pill[data-state="speaking"] .mint-status-dot,
 .model-activity-badge[data-state="speaking"] .mint-status-dot {
-  background: #22c55e;
-  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
+  background: var(--status-speaking);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-speaking) 16%, transparent);
   animation: mintStatusPulse 0.9s ease-in-out infinite;
 }
 
 .mint-status-pill[data-state="error"],
 .model-activity-badge[data-state="error"] {
-  color: #fca5a5;
+  color: var(--status-error);
 }
 
 .mint-status-pill[data-state="error"] .mint-status-dot,
 .model-activity-badge[data-state="error"] .mint-status-dot {
-  background: #ef4444;
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
+  background: var(--status-error);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-error) 16%, transparent);
 }
 
 @keyframes mintStatusPulse {
@@ -3609,8 +3633,8 @@ input:checked + .slider:before {
 }
 
 .close-btn:hover {
-  background: #3a2020;
-  color: #ff8a8a;
+  background: var(--close-btn-hover-bg);
+  color: var(--close-btn-hover-color);
 }
 
 .assistant-workspace.layout-horizontal {

From 79c46bc82dec52571b1662dde9a8bf0aa31b897e Mon Sep 17 00:00:00 2001
From: Pheem49 <killerpheem13@gmail.com>
Date: Sun, 21 Jun 2026 20:49:51 +0700
Subject: [PATCH 4/4] refactor: simplify parse_stream_line logic and remove
 redundant test cases

---
 crates/mint-core/src/chat.rs | 32 +-------------------------------
 1 file changed, 1 insertion(+), 31 deletions(-)

diff --git a/crates/mint-core/src/chat.rs b/crates/mint-core/src/chat.rs
index 34e013d..567893e 100644
--- a/crates/mint-core/src/chat.rs
+++ b/crates/mint-core/src/chat.rs
@@ -604,13 +604,7 @@ where
 fn parse_stream_line(format: StreamFormat, line: &str) -> Option<String> {
     let payload = match format {
         StreamFormat::Ollama => line,
-        _ => {
-            if let Some(stripped) = line.strip_prefix("data:") {
-                stripped.trim()
-            } else {
-                return None;
-            }
-        }
+        _ => line.strip_prefix("data: ")?.trim(),
     };
     if payload.is_empty() || payload == "[DONE]" {
         return None;
@@ -868,30 +862,6 @@ mod tests {
             .as_deref(),
             Some("hello")
         );
-        assert_eq!(
-            parse_stream_line(
-                StreamFormat::OpenAi,
-                r#"data:{"choices":[{"delta":{"content":"hello"}}]}"#
-            )
-            .as_deref(),
-            Some("hello")
-        );
-        assert_eq!(
-            parse_stream_line(
-                StreamFormat::Gemini,
-                r#"data: {"candidates":[{"content":{"parts":[{"text":"hello"}]}}]}"#
-            )
-            .as_deref(),
-            Some("hello")
-        );
-        assert_eq!(
-            parse_stream_line(
-                StreamFormat::Gemini,
-                r#"data:{"candidates":[{"content":{"parts":[{"text":"hello"}]}}]}"#
-            )
-            .as_deref(),
-            Some("hello")
-        );
         assert_eq!(
             parse_stream_line(StreamFormat::Ollama, r#"{"message":{"content":"hi"}}"#).as_deref(),
             Some("hi")