feat: Codex integration

Cargo.lock

@@ -4514,6 +4514,7 @@ name = "koharu-ai"
 version = "0.48.0"
 dependencies = [
  "anyhow",
+ "async-trait",
  "base64 0.22.1",
  "clap",
  "eventsource-stream",
@@ -4535,6 +4536,7 @@ dependencies = [
  "arc-swap",
  "async-trait",
  "atomicwrites",
+ "base64 0.22.1",
  "blake3",
  "camino",
  "chrono",
@@ -4546,6 +4548,7 @@ dependencies = [
  "imageproc",
  "indexmap 2.14.0",
  "inventory",
+ "koharu-ai",
  "koharu-core",
  "koharu-llm",
  "koharu-ml",

koharu-ai/Cargo.toml

@@ -17,6 +17,7 @@ path = "bin/codex.rs"
 
 [dependencies]
 anyhow = { workspace = true }
+async-trait = { workspace = true }
 base64 = { workspace = true }
 clap = { workspace = true }
 eventsource-stream = { workspace = true }

koharu-ai/bin/codex.rs

@@ -7,7 +7,7 @@ use eventsource_stream::Eventsource;
 use futures::StreamExt;
 use koharu_ai::codex::{
     CodexClient, CodexConfig, CodexImageGenerationRequest, CodexInputImage, CodexTaskRequest,
-    DEFAULT_RESPONSES_URL,
+    DEFAULT_RESPONSES_URL, image_response_stream_result,
 };
 use serde_json::Value;
 
@@ -207,8 +207,10 @@ async fn image_cmd(client: &CodexClient, command: ImageCommand) -> anyhow::Resul
     }
 
     let response = client.create_response_raw(&request).await?;
-    let Some(url) = image_response_stream_url(response).await? else {
-        anyhow::bail!("No image URL or image result found in response stream");
+    let result = image_response_stream_result(response).await?;
+    let Some(url) = result.image_url else {
+        let response_text = result.response_text.as_deref().unwrap_or("none");
+        anyhow::bail!("No image URL or image result found in response stream: {response_text}");
     };
     println!("{url}");
     Ok(())
@@ -252,77 +254,6 @@ async fn print_response_stream(response: reqwest::Response) -> anyhow::Result<()
     Ok(())
 }
 
-async fn image_response_stream_url(response: reqwest::Response) -> anyhow::Result<Option<String>> {
-    let mut stream = response.bytes_stream().eventsource();
-    let mut result = None;
-
-    while let Some(event) = stream.next().await {
-        let event = event?;
-        let Ok(data) = serde_json::from_str::<Value>(&event.data) else {
-            continue;
-        };
-        if let Some(url) = extract_image_url(&data) {
-            result = Some(url);
-        }
-    }
-
-    Ok(result)
-}
-
-fn extract_image_url(value: &Value) -> Option<String> {
-    match value {
-        Value::Object(map) => {
-            if matches!(
-                map.get("type").and_then(Value::as_str),
-                Some("image_generation_call")
-            ) && let Some(url) = extract_image_result(map.get("result")?)
-            {
-                return Some(url);
-            }
-
-            if let Some(call) = map.get("image_generation_call")
-                && let Some(url) = extract_image_url(call)
-            {
-                return Some(url);
-            }
-
-            if let Some(url) = map.get("url").and_then(Value::as_str)
-                && (url.starts_with("http://")
-                    || url.starts_with("https://")
-                    || url.starts_with("data:image/"))
-            {
-                return Some(url.to_string());
-            }
-
-            for child in map.values() {
-                if let Some(url) = extract_image_url(child) {
-                    return Some(url);
-                }
-            }
-            None
-        }
-        Value::Array(items) => items.iter().find_map(extract_image_url),
-        _ => None,
-    }
-}
-
-fn extract_image_result(value: &Value) -> Option<String> {
-    match value {
-        Value::String(value) if value.starts_with("http://") || value.starts_with("https://") => {
-            Some(value.clone())
-        }
-        Value::String(value) if value.starts_with("data:image/") => Some(value.clone()),
-        Value::String(value) if !value.is_empty() => Some(format!("data:image/png;base64,{value}")),
-        Value::Object(map) => map
-            .get("url")
-            .and_then(Value::as_str)
-            .map(ToOwned::to_owned)
-            .or_else(|| map.values().find_map(extract_image_url)),
-        Value::Array(items) => items.iter().find_map(extract_image_url),
-        _ => None,
-    }
-}
-
 fn image_data_url(path: &Path) -> anyhow::Result<String> {
     let bytes = std::fs::read(path)?;
     let b64 = base64::engine::general_purpose::STANDARD.encode(bytes);
@@ -346,6 +277,7 @@ fn image_mime_type(path: &Path) -> &'static str {
 #[cfg(test)]
 mod tests {
     use super::*;
+    use koharu_ai::codex::extract_image_url;
 
     #[test]
     fn extracts_nested_image_generation_url() {

koharu-ai/src/codex/client.rs

@@ -9,12 +9,14 @@ use serde_json::Value;
 use super::config::CodexConfig;
 use super::device::{DeviceAuthorization, DeviceCode};
 use super::error::{CodexError, Result};
+use super::image::{CodexImageGenerationRequest, CodexInputImage, image_response_stream_result};
 use super::requests::{
     TokenExchangeRequest, TokenExchangeResponse, TokenPollRequest, TokenPollSuccessResponse,
     TokenRefreshRequest, TokenRefreshResponse, UserCodeRequest, UserCodeResponse,
 };
 use super::token_store::TokenStore;
 use super::tokens::CodexTokens;
+use crate::provider::{AiImageProvider, AiImageRequest, AiImageResult};
 
 const USER_AGENT: &str = concat!("koharu-ai/", env!("CARGO_PKG_VERSION"));
 
@@ -306,3 +308,38 @@ async fn ensure_success(endpoint: &str, response: reqwest::Response) -> Result<r
         body,
     })
 }
+
+#[async_trait::async_trait]
+impl AiImageProvider for CodexClient {
+    async fn generate_image(&self, request: AiImageRequest) -> anyhow::Result<AiImageResult> {
+        let action = request.action.unwrap_or_else(|| {
+            if request.input_image.is_some() {
+                "edit".to_string()
+            } else {
+                "generate".to_string()
+            }
+        });
+
+        let mut codex_request = CodexImageGenerationRequest::new(request.model, request.prompt)
+            .with_instructions(request.instructions)
+            .with_quality(request.quality)
+            .with_action(action);
+        if let Some(size) = request.size {
+            codex_request = codex_request.with_size(size);
+        }
+        if let Some(image) = request.input_image {
+            codex_request = codex_request
+                .with_input_image(CodexInputImage::new(image.data_url).with_detail(image.detail));
+        }
+
+        let response = self.create_response_raw(&codex_request).await?;
+        let result = image_response_stream_result(response).await?;
+        let image_url = result.image_url.ok_or_else(|| {
+            let response_text = result.response_text.as_deref().unwrap_or("none");
+            anyhow::anyhow!(
+                "Codex returned no image URL or image result. Response text: {response_text}"
+            )
+        })?;
+        Ok(AiImageResult { image_url })
+    }
+}

koharu-ai/src/codex/image.rs

@@ -1,4 +1,8 @@
 use serde::Serialize;
+use serde_json::Value;
+
+use eventsource_stream::Eventsource;
+use futures::StreamExt;
 
 use super::responses::{CodexInputContent, CodexInputItem};
 
@@ -10,11 +14,18 @@ pub struct CodexImageGenerationRequest {
     pub model: String,
     pub instructions: String,
     pub tools: [CodexImageGenerationTool; 1],
+    pub tool_choice: CodexImageToolChoice,
     pub input: Vec<CodexInputItem>,
     pub stream: bool,
     pub store: bool,
 }
 
+#[derive(Debug, Clone, Serialize)]
+pub struct CodexImageToolChoice {
+    #[serde(rename = "type")]
+    pub tool_type: &'static str,
+}
+
 #[derive(Debug, Clone, Serialize)]
 pub struct CodexImageGenerationTool {
     #[serde(rename = "type")]
@@ -38,12 +49,19 @@ pub struct CodexInputImage {
     pub detail: String,
 }
 
+#[derive(Debug, Clone, Default, PartialEq, Eq)]
+pub struct CodexImageStreamResult {
+    pub image_url: Option<String>,
+    pub response_text: Option<String>,
+}
+
 impl CodexImageGenerationRequest {
     pub fn new(model: impl Into<String>, prompt: impl Into<String>) -> Self {
         Self {
             model: model.into(),
             instructions: DEFAULT_IMAGE_INSTRUCTIONS.to_string(),
             tools: [CodexImageGenerationTool::default()],
+            tool_choice: CodexImageToolChoice::image_generation(),
             input: vec![CodexInputItem::user_text(prompt)],
             stream: true,
             store: false,
@@ -85,6 +103,14 @@ impl CodexImageGenerationRequest {
     }
 }
 
+impl CodexImageToolChoice {
+    pub fn image_generation() -> Self {
+        Self {
+            tool_type: "image_generation",
+        }
+    }
+}
+
 impl CodexImageGenerationTool {
     pub fn new(image_generation: CodexImageGenerationConfig) -> Self {
         Self {
@@ -124,6 +150,236 @@ impl CodexInputImage {
     }
 }
 
+pub async fn image_response_stream_url(
+    response: reqwest::Response,
+) -> anyhow::Result<Option<String>> {
+    Ok(image_response_stream_result(response).await?.image_url)
+}
+
+pub async fn image_response_stream_result(
+    response: reqwest::Response,
+) -> anyhow::Result<CodexImageStreamResult> {
+    let mut stream = response.bytes_stream().eventsource();
+    let mut collector = CodexImageStreamCollector::default();
+
+    while let Some(event) = stream.next().await {
+        let event = event?;
+        let Ok(data) = serde_json::from_str::<Value>(&event.data) else {
+            continue;
+        };
+        collector.push(&data)?;
+    }
+
+    Ok(collector.finish())
+}
+
+#[derive(Debug, Default)]
+struct CodexImageStreamCollector {
+    final_image: Option<String>,
+    partial_image: Option<String>,
+    output_text: Vec<String>,
+    final_text: Option<String>,
+}
+
+impl CodexImageStreamCollector {
+    fn push(&mut self, value: &Value) -> anyhow::Result<()> {
+        if let Some(error) = extract_response_error(value) {
+            anyhow::bail!("{error}");
+        }
+
+        if let Some(url) = extract_final_image_url(value) {
+            self.final_image = Some(url);
+        }
+        if let Some(url) = extract_partial_image_url(value) {
+            self.partial_image = Some(url);
+        }
+        if let Some(delta) = extract_output_text_delta(value) {
+            self.output_text.push(delta);
+        }
+        if let Some(text) = extract_response_text(value) {
+            self.final_text = Some(text);
+        }
+
+        Ok(())
+    }
+
+    fn finish(self) -> CodexImageStreamResult {
+        CodexImageStreamResult {
+            image_url: self.final_image.or(self.partial_image),
+            response_text: self
+                .final_text
+                .or_else(|| join_text_fragments(self.output_text)),
+        }
+    }
+}
+
+pub fn extract_image_url(value: &Value) -> Option<String> {
+    extract_final_image_url(value).or_else(|| extract_partial_image_url(value))
+}
+
+fn extract_final_image_url(value: &Value) -> Option<String> {
+    find_map_value(value, &mut |value| {
+        let Value::Object(map) = value else {
+            return None;
+        };
+
+        if matches!(
+            map.get("type").and_then(Value::as_str),
+            Some("image_generation_call")
+        ) {
+            return map.get("result").and_then(extract_image_result);
+        }
+
+        map.get("image_generation_call")
+            .and_then(extract_final_image_url)
+            .or_else(|| {
+                map.get("url")
+                    .or_else(|| map.get("image_url"))
+                    .and_then(Value::as_str)
+                    .filter(|url| is_image_url(url))
+                    .map(ToOwned::to_owned)
+            })
+    })
+}
+
+fn extract_partial_image_url(value: &Value) -> Option<String> {
+    let Value::Object(map) = value else {
+        return None;
+    };
+
+    let b64 = map
+        .get("partial_image_b64")
+        .or_else(|| map.get("b64_json"))
+        .and_then(Value::as_str)
+        .filter(|value| !value.trim().is_empty())?;
+    Some(format!("data:image/png;base64,{b64}"))
+}
+
+fn extract_image_result(value: &Value) -> Option<String> {
+    match value {
+        Value::String(value) if value.starts_with("http://") || value.starts_with("https://") => {
+            Some(value.clone())
+        }
+        Value::String(value) if value.starts_with("data:image/") => Some(value.clone()),
+        Value::String(value) if !value.is_empty() => Some(format!("data:image/png;base64,{value}")),
+        Value::Object(map) => map
+            .get("url")
+            .and_then(Value::as_str)
+            .filter(|url| is_image_url(url))
+            .map(ToOwned::to_owned)
+            .or_else(|| map.values().find_map(extract_final_image_url)),
+        Value::Array(items) => items.iter().find_map(extract_final_image_url),
+        _ => None,
+    }
+}
+
+fn is_image_url(value: &str) -> bool {
+    value.starts_with("http://")
+        || value.starts_with("https://")
+        || value.starts_with("data:image/")
+}
+
+fn extract_output_text_delta(value: &Value) -> Option<String> {
+    let Value::Object(map) = value else {
+        return None;
+    };
+    if !matches!(
+        map.get("type").and_then(Value::as_str),
+        Some("response.output_text.delta")
+    ) {
+        return None;
+    }
+    map.get("delta")
+        .and_then(Value::as_str)
+        .filter(|text| !text.is_empty())
+        .map(ToOwned::to_owned)
+}
+
+fn extract_response_text(value: &Value) -> Option<String> {
+    let mut fragments = Vec::new();
+    collect_response_text(value, &mut fragments);
+    join_text_fragments(fragments)
+}
+
+fn collect_response_text(value: &Value, fragments: &mut Vec<String>) {
+    match value {
+        Value::Object(map) => {
+            if matches!(
+                map.get("type").and_then(Value::as_str),
+                Some("response.output_text.done" | "output_text")
+            ) && let Some(text) = map.get("text").and_then(Value::as_str)
+                && !text.is_empty()
+            {
+                fragments.push(text.to_string());
+                return;
+            }
+
+            if matches!(map.get("type").and_then(Value::as_str), Some("message"))
+                && !matches!(map.get("role").and_then(Value::as_str), Some("assistant"))
+            {
+                return;
+            }
+
+            for key in ["response", "output", "item", "content"] {
+                if let Some(child) = map.get(key) {
+                    collect_response_text(child, fragments);
+                }
+            }
+        }
+        Value::Array(items) => {
+            for item in items {
+                collect_response_text(item, fragments);
+            }
+        }
+        _ => {}
+    }
+}
+
+fn join_text_fragments(fragments: Vec<String>) -> Option<String> {
+    let text = fragments.concat();
+    let text = text.trim();
+    if text.is_empty() {
+        None
+    } else {
+        Some(text.to_string())
+    }
+}
+
+fn find_map_value(value: &Value, f: &mut impl FnMut(&Value) -> Option<String>) -> Option<String> {
+    if let Some(found) = f(value) {
+        return Some(found);
+    }
+
+    match value {
+        Value::Object(map) => map.values().find_map(|child| find_map_value(child, f)),
+        Value::Array(items) => items.iter().find_map(|child| find_map_value(child, f)),
+        _ => None,
+    }
+}
+
+fn extract_response_error(value: &Value) -> Option<String> {
+    let Value::Object(map) = value else {
+        return None;
+    };
+    let event_type = map.get("type").and_then(Value::as_str);
+    if !matches!(
+        event_type,
+        Some("response.failed" | "response.incomplete" | "error")
+    ) {
+        return None;
+    }
+
+    map.get("error")
+        .and_then(|error| {
+            error
+                .get("message")
+                .and_then(Value::as_str)
+                .or_else(|| error.as_str())
+        })
+        .or_else(|| map.get("message").and_then(Value::as_str))
+        .map(ToOwned::to_owned)
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -145,6 +401,7 @@ mod tests {
             "draw a koharu logo"
         );
         assert_eq!(value["tools"][0]["type"], "image_generation");
+        assert_eq!(value["tool_choice"]["type"], "image_generation");
         assert_eq!(value["tools"][0]["quality"], "high");
         assert_eq!(value["tools"][0]["action"], "generate");
         assert_eq!(value["stream"], true);
@@ -168,6 +425,134 @@ mod tests {
         );
         assert_eq!(value["input"][0]["content"][1]["detail"], "high");
         assert_eq!(value["tools"][0]["action"], "edit");
+        assert_eq!(value["tool_choice"]["type"], "image_generation");
         assert!(value.get("input_image").is_none());
     }
+
+    #[test]
+    fn extracts_nested_image_generation_url() {
+        let value = serde_json::json!({
+            "type": "response.output_item.done",
+            "item": {
+                "type": "image_generation_call",
+                "result": {
+                    "url": "https://example.test/image.png"
+                }
+            }
+        });
+
+        assert_eq!(
+            extract_image_url(&value),
+            Some("https://example.test/image.png".to_string())
+        );
+    }
+
+    #[test]
+    fn converts_base64_image_generation_result_to_data_url() {
+        let value = serde_json::json!({
+            "type": "image_generation_call",
+            "result": "abc123"
+        });
+
+        assert_eq!(
+            extract_image_url(&value),
+            Some("data:image/png;base64,abc123".to_string())
+        );
+    }
+
+    #[test]
+    fn extracts_responses_partial_image_event() {
+        let value = serde_json::json!({
+            "type": "response.image_generation_call.partial_image",
+            "partial_image_b64": "abc123"
+        });
+
+        assert_eq!(
+            extract_image_url(&value),
+            Some("data:image/png;base64,abc123".to_string())
+        );
+    }
+
+    #[test]
+    fn extracts_images_stream_completed_event() {
+        let value = serde_json::json!({
+            "type": "image_generation.completed",
+            "b64_json": "def456"
+        });
+
+        assert_eq!(
+            extract_image_url(&value),
+            Some("data:image/png;base64,def456".to_string())
+        );
+    }
+
+    #[test]
+    fn extracts_stream_error_message() {
+        let value = serde_json::json!({
+            "type": "response.failed",
+            "error": { "message": "image generation failed" }
+        });
+
+        assert_eq!(
+            extract_response_error(&value),
+            Some("image generation failed".to_string())
+        );
+    }
+
+    #[test]
+    fn extracts_response_text_from_completed_message() {
+        let value = serde_json::json!({
+            "type": "response.completed",
+            "response": {
+                "output": [
+                    {
+                        "type": "message",
+                        "role": "assistant",
+                        "content": [
+                            {
+                                "type": "output_text",
+                                "text": "I could not generate the image."
+                            }
+                        ]
+                    }
+                ]
+            }
+        });
+
+        assert_eq!(
+            extract_response_text(&value),
+            Some("I could not generate the image.".to_string())
+        );
+    }
+
+    #[test]
+    fn collector_prefers_final_image_and_keeps_text() {
+        let mut collector = CodexImageStreamCollector::default();
+        collector
+            .push(&serde_json::json!({
+                "type": "response.output_text.delta",
+                "delta": "Working"
+            }))
+            .unwrap();
+        collector
+            .push(&serde_json::json!({
+                "type": "response.image_generation_call.partial_image",
+                "partial_image_b64": "partial"
+            }))
+            .unwrap();
+        collector
+            .push(&serde_json::json!({
+                "type": "image_generation_call",
+                "result": "final"
+            }))
+            .unwrap();
+
+        assert_eq!(
+            collector.finish(),
+            CodexImageStreamResult {
+                image_url: Some("data:image/png;base64,final".to_string()),
+                response_text: Some("Working".to_string()),
+            }
+        );
+    }
 }

koharu-ai/src/codex/mod.rs

@@ -16,7 +16,8 @@ pub use device::{DeviceAuthorization, DeviceCode};
 pub use error::{CodexError, Result};
 pub use image::{
     CodexImageGenerationConfig, CodexImageGenerationRequest, CodexImageGenerationTool,
-    CodexInputImage,
+    CodexImageStreamResult, CodexInputImage, extract_image_url, image_response_stream_result,
+    image_response_stream_url,
 };
 pub use responses::{CodexInputContent, CodexInputItem};
 pub use task::CodexTaskRequest;

koharu-ai/src/lib.rs

@@ -1 +1,4 @@
 pub mod codex;
+pub mod provider;
+
+pub use provider::{AiImageProvider, AiImageRequest, AiImageResult, AiInputImage};

koharu-ai/src/provider.rs

@@ -0,0 +1,50 @@
+use async_trait::async_trait;
+
+#[derive(Debug, Clone)]
+pub struct AiInputImage {
+    pub data_url: String,
+    pub detail: String,
+}
+
+#[derive(Debug, Clone)]
+pub struct AiImageRequest {
+    pub model: String,
+    pub instructions: String,
+    pub prompt: String,
+    pub input_image: Option<AiInputImage>,
+    pub quality: String,
+    pub size: Option<String>,
+    pub action: Option<String>,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct AiImageResult {
+    pub image_url: String,
+}
+
+#[async_trait]
+pub trait AiImageProvider: Send + Sync {
+    async fn generate_image(&self, request: AiImageRequest) -> anyhow::Result<AiImageResult>;
+}
+
+impl AiImageRequest {
+    pub fn new(model: impl Into<String>, prompt: impl Into<String>) -> Self {
+        Self {
+            model: model.into(),
+            instructions: "Generate or edit the requested image.".to_string(),
+            prompt: prompt.into(),
+            input_image: None,
+            quality: "high".to_string(),
+            size: None,
+            action: None,
+        }
+    }
+
+    pub fn with_input_image(mut self, data_url: impl Into<String>) -> Self {
+        self.input_image = Some(AiInputImage {
+            data_url: data_url.into(),
+            detail: "high".to_string(),
+        });
+        self
+    }
+}

koharu-app/Cargo.toml

@@ -19,6 +19,7 @@ path = "bin/pipeline.rs"
 clap = { workspace = true }
 tracing-subscriber = { workspace = true }
 koharu-core = { workspace = true }
+koharu-ai = { workspace = true }
 koharu-ml = { workspace = true }
 koharu-renderer = { workspace = true }
 koharu-llm = { workspace = true }
@@ -27,6 +28,7 @@ anyhow = { workspace = true }
 arc-swap = { workspace = true }
 async-trait = { workspace = true }
 atomicwrites = { workspace = true }
+base64 = { workspace = true }
 blake3 = { workspace = true }
 camino = { workspace = true }
 chrono = { workspace = true }

koharu-app/src/ai.rs

@@ -0,0 +1,431 @@
+use std::io::Cursor;
+use std::sync::Arc;
+use std::time::Duration;
+
+use anyhow::{Context, Result, anyhow, bail};
+use base64::Engine as _;
+use dashmap::DashMap;
+use image::DynamicImage;
+use koharu_ai::codex::{CodexClient, CodexConfig};
+use koharu_ai::{AiImageProvider, AiImageRequest};
+use koharu_core::{
+    BlobRef, ImageData, ImageDataPatch, ImageRole, Node, NodeDataPatch, NodeId, NodeKind,
+    NodePatch, Op, PageId, Scene, Transform,
+};
+use koharu_runtime::{RuntimeHttpClient, RuntimeManager};
+use parking_lot::RwLock;
+use serde::{Deserialize, Serialize};
+use tracing::Instrument as _;
+use utoipa::ToSchema;
+use uuid::Uuid;
+
+use crate::session::ProjectSession;
+
+const DEFAULT_CODEX_IMAGE_MODEL: &str = "gpt-5.5";
+const DEFAULT_CODEX_IMAGE_INSTRUCTIONS: &str = "Generate or edit the requested image.";
+const DEFAULT_CODEX_IMAGE_QUALITY: &str = "high";
+
+#[derive(Debug, Clone, Serialize, Deserialize, ToSchema)]
+#[serde(rename_all = "snake_case")]
+pub enum CodexAuthAttemptStatus {
+    Pending,
+    Succeeded,
+    Failed,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, ToSchema)]
+#[serde(rename_all = "camelCase")]
+pub struct CodexDeviceLogin {
+    pub login_id: String,
+    pub verification_url: String,
+    pub user_code: String,
+    pub interval_seconds: u64,
+    pub timeout_seconds: u64,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, ToSchema)]
+#[serde(rename_all = "camelCase")]
+pub struct CodexDeviceLoginStatus {
+    pub login_id: String,
+    pub status: CodexAuthAttemptStatus,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub account_id: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub error: Option<String>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, ToSchema)]
+#[serde(rename_all = "camelCase")]
+pub struct CodexAuthStatus {
+    pub signed_in: bool,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub account_id: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub login: Option<CodexDeviceLoginStatus>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, ToSchema)]
+#[serde(rename_all = "camelCase")]
+pub struct CodexImageGenerationOptions {
+    pub page_id: PageId,
+    pub prompt: String,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub model: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub instructions: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub quality: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub size: Option<String>,
+}
+
+#[derive(Debug, Clone)]
+struct LoginAttempt {
+    status: CodexAuthAttemptStatus,
+    account_id: Option<String>,
+    error: Option<String>,
+}
+
+pub struct AiManager {
+    codex: CodexClient,
+    http_client: RuntimeHttpClient,
+    codex_device_timeout: Duration,
+    codex_logins: Arc<DashMap<String, LoginAttempt>>,
+    latest_codex_login: RwLock<Option<String>>,
+}
+
+impl AiManager {
+    pub fn new(runtime: &RuntimeManager) -> Self {
+        let config = CodexConfig::default();
+        let codex_device_timeout = config.device_auth_timeout;
+        Self {
+            codex: CodexClient::with_http_client(config, runtime.http_client()),
+            http_client: runtime.http_client(),
+            codex_device_timeout,
+            codex_logins: Arc::new(DashMap::new()),
+            latest_codex_login: RwLock::new(None),
+        }
+    }
+
+    pub fn codex_auth_status(&self) -> Result<CodexAuthStatus> {
+        let tokens = self.codex.token_store().load()?;
+        let account_id = tokens
+            .as_ref()
+            .and_then(|tokens| tokens.chatgpt_account_id());
+        let login = self
+            .latest_codex_login
+            .read()
+            .as_ref()
+            .and_then(|id| {
+                self.codex_logins
+                    .get(id)
+                    .map(|entry| (id.clone(), entry.clone()))
+            })
+            .map(|(login_id, attempt)| CodexDeviceLoginStatus {
+                login_id,
+                status: attempt.status,
+                account_id: attempt.account_id,
+                error: attempt.error,
+            });
+
+        Ok(CodexAuthStatus {
+            signed_in: tokens.is_some(),
+            account_id,
+            login,
+        })
+    }
+
+    pub async fn start_codex_device_login(self: &Arc<Self>) -> Result<CodexDeviceLogin> {
+        let device_code = self.codex.request_device_code().await?;
+        let login_id = Uuid::new_v4().to_string();
+        self.codex_logins.insert(
+            login_id.clone(),
+            LoginAttempt {
+                status: CodexAuthAttemptStatus::Pending,
+                account_id: None,
+                error: None,
+            },
+        );
+        *self.latest_codex_login.write() = Some(login_id.clone());
+
+        let manager = Arc::clone(self);
+        let device_code_for_task = device_code.clone();
+        let login_id_for_task = login_id.clone();
+        tokio::spawn(async move {
+            let result = manager
+                .codex
+                .complete_device_code_login(&device_code_for_task)
+                .await;
+            let attempt = match result {
+                Ok(tokens) => LoginAttempt {
+                    status: CodexAuthAttemptStatus::Succeeded,
+                    account_id: tokens.chatgpt_account_id(),
+                    error: None,
+                },
+                Err(err) => LoginAttempt {
+                    status: CodexAuthAttemptStatus::Failed,
+                    account_id: None,
+                    error: Some(format!("{err:#}")),
+                },
+            };
+            manager.codex_logins.insert(login_id_for_task, attempt);
+        });
+
+        let interval_seconds = device_code.interval().as_secs().max(1);
+        Ok(CodexDeviceLogin {
+            login_id,
+            verification_url: device_code.verification_url,
+            user_code: device_code.user_code,
+            interval_seconds,
+            timeout_seconds: self.codex_device_timeout.as_secs(),
+        })
+    }
+
+    pub fn logout_codex(&self) -> Result<()> {
+        self.codex.token_store().delete()?;
+        Ok(())
+    }
+
+    pub async fn generate_codex_page_image(
+        &self,
+        session: Arc<ProjectSession>,
+        options: CodexImageGenerationOptions,
+        cancel: Arc<std::sync::atomic::AtomicBool>,
+    ) -> Result<()> {
+        let workflow_span = tracing::info_span!(
+            "codex_image_generation_workflow",
+            page_id = %options.page_id
+        );
+        async move {
+            let prompt = options.prompt.trim().to_string();
+            if prompt.is_empty() {
+                bail!("prompt is required");
+            }
+
+            let source = tracing::info_span!("codex_source_image_load").in_scope(|| {
+                let scene = session.scene_snapshot();
+                let (_, image_data) = source_image(&scene, options.page_id)?;
+                session.blobs.load_image(&image_data.blob)
+            })?;
+
+            let source_data_url = tracing::info_span!("codex_source_image_encode")
+                .in_scope(|| image_data_url(&source))?;
+            tracing::info!(bytes = source_data_url.len(), "encoded Codex source image");
+
+            check_cancelled(&cancel)?;
+            let mut request = AiImageRequest::new(
+                options
+                    .model
+                    .filter(|value| !value.trim().is_empty())
+                    .unwrap_or_else(|| DEFAULT_CODEX_IMAGE_MODEL.to_string()),
+                prompt,
+            )
+            .with_input_image(source_data_url);
+            request.instructions = options
+                .instructions
+                .filter(|value| !value.trim().is_empty())
+                .unwrap_or_else(|| DEFAULT_CODEX_IMAGE_INSTRUCTIONS.to_string());
+            request.quality = options
+                .quality
+                .filter(|value| !value.trim().is_empty())
+                .unwrap_or_else(|| DEFAULT_CODEX_IMAGE_QUALITY.to_string());
+            request.size = options
+                .size
+                .filter(|value| !value.trim().is_empty())
+                .or_else(|| Some("auto".to_string()));
+            request.action = Some("edit".to_string());
+
+            let result = self
+                .codex
+                .generate_image(request)
+                .instrument(tracing::info_span!("codex_image_request"))
+                .await?;
+            tracing::info!("Codex image request completed");
+
+            check_cancelled(&cancel)?;
+            let generated_bytes = self
+                .load_generated_image_bytes(&result.image_url)
+                .instrument(tracing::info_span!("codex_generated_image_load"))
+                .await?;
+            tracing::info!(
+                bytes = generated_bytes.len(),
+                "loaded Codex generated image bytes"
+            );
+
+            let (width, height, blob) = tracing::info_span!("codex_generated_image_store")
+                .in_scope(|| {
+                    let generated = image::load_from_memory(&generated_bytes)
+                        .with_context(|| "failed to decode Codex image result")?;
+                    let (width, height) = image_dimensions(&generated);
+                    let blob = session.blobs.put_webp(&generated)?;
+                    Ok::<_, anyhow::Error>((width, height, blob))
+                })?;
+            tracing::info!(width, height, "decoded and stored Codex generated image");
+
+            check_cancelled(&cancel)?;
+            let scene = session.scene_snapshot();
+            let op = upsert_image_blob(
+                &scene,
+                options.page_id,
+                ImageRole::Rendered,
+                blob,
+                width,
+                height,
+            )?;
+            session.apply(Op::Batch {
+                ops: vec![op],
+                label: format!("codex-image: page {}", options.page_id),
+            })?;
+            tracing::info!("finished Codex image generation workflow");
+            Ok(())
+        }
+        .instrument(workflow_span)
+        .await
+    }
+
+    async fn load_generated_image_bytes(&self, url: &str) -> Result<Vec<u8>> {
+        if let Some(bytes) = decode_data_image_url(url)? {
+            return Ok(bytes);
+        }
+
+        if !(url.starts_with("http://") || url.starts_with("https://")) {
+            bail!("unsupported Codex image result URL: {url}");
+        }
+
+        let response = self.http_client.get(url).send().await?;
+        let status = response.status();
+        if !status.is_success() {
+            let body = response.text().await.unwrap_or_default();
+            bail!("failed to fetch Codex image result ({status}): {body}");
+        }
+        Ok(response.bytes().await?.to_vec())
+    }
+}
+
+fn check_cancelled(cancel: &std::sync::atomic::AtomicBool) -> Result<()> {
+    if cancel.load(std::sync::atomic::Ordering::Relaxed) {
+        bail!("cancelled");
+    }
+    Ok(())
+}
+
+fn source_image(scene: &Scene, page_id: PageId) -> Result<(NodeId, &ImageData)> {
+    let page = scene
+        .page(page_id)
+        .with_context(|| format!("page {} not found", page_id))?;
+    page.nodes
+        .iter()
+        .find_map(|(id, node)| match &node.kind {
+            NodeKind::Image(image) if image.role == ImageRole::Source => Some((*id, image)),
+            _ => None,
+        })
+        .ok_or_else(|| anyhow!("page has no Source image node"))
+}
+
+fn image_data_url(image: &DynamicImage) -> Result<String> {
+    let mut buf = Cursor::new(Vec::new());
+    image.write_to(&mut buf, image::ImageFormat::Png)?;
+    let encoded = base64::engine::general_purpose::STANDARD.encode(buf.into_inner());
+    Ok(format!("data:image/png;base64,{encoded}"))
+}
+
+fn decode_data_image_url(url: &str) -> Result<Option<Vec<u8>>> {
+    let Some(rest) = url.strip_prefix("data:image/") else {
+        return Ok(None);
+    };
+    let Some((_, data)) = rest.split_once(',') else {
+        bail!("invalid data image URL");
+    };
+    let decoded = base64::engine::general_purpose::STANDARD
+        .decode(data)
+        .context("failed to decode data image URL")?;
+    Ok(Some(decoded))
+}
+
+fn image_dimensions(image: &DynamicImage) -> (u32, u32) {
+    use image::GenericImageView as _;
+    image.dimensions()
+}
+
+fn upsert_image_blob(
+    scene: &Scene,
+    page: PageId,
+    role: ImageRole,
+    blob: BlobRef,
+    natural_width: u32,
+    natural_height: u32,
+) -> Result<Op> {
+    let page_ref = scene
+        .page(page)
+        .with_context(|| format!("page {} not found", page))?;
+
+    if let Some((node_id, _)) = page_ref
+        .nodes
+        .iter()
+        .find_map(|(id, node)| match &node.kind {
+            NodeKind::Image(image) if image.role == role => Some((*id, image)),
+            _ => None,
+        })
+    {
+        return Ok(Op::UpdateNode {
+            page,
+            id: node_id,
+            patch: NodePatch {
+                data: Some(NodeDataPatch::Image(ImageDataPatch {
+                    blob: Some(blob),
+                    opacity: None,
+                    name: None,
+                    natural_width: Some(natural_width),
+                    natural_height: Some(natural_height),
+                })),
+                transform: None,
+                visible: None,
+            },
+            prev: NodePatch::default(),
+        });
+    }
+
+    let at = if role == ImageRole::Inpainted {
+        1.min(page_ref.nodes.len())
+    } else {
+        page_ref.nodes.len()
+    };
+    Ok(Op::AddNode {
+        page,
+        node: Node {
+            id: NodeId::new(),
+            transform: Transform::default(),
+            visible: role != ImageRole::Rendered,
+            kind: NodeKind::Image(ImageData {
+                role,
+                blob,
+                opacity: 1.0,
+                natural_width,
+                natural_height,
+                name: None,
+            }),
+        },
+        at,
+    })
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn decodes_data_image_url() {
+        let encoded = base64::engine::general_purpose::STANDARD.encode(b"png");
+        let decoded = decode_data_image_url(&format!("data:image/png;base64,{encoded}")).unwrap();
+        assert_eq!(decoded, Some(b"png".to_vec()));
+    }
+
+    #[test]
+    fn ignores_non_data_url() {
+        assert!(
+            decode_data_image_url("https://example.test/image.png")
+                .unwrap()
+                .is_none()
+        );
+    }
+}

koharu-app/src/app.rs

@@ -23,6 +23,7 @@ use koharu_core::{AppEvent, DownloadProgress, JobSummary, LlmStateStatus};
 use koharu_runtime::{ComputePolicy, RuntimeManager};
 use tokio::sync::Mutex;
 
+use crate::ai::AiManager;
 use crate::autosave::{self, AutosaveSignal};
 use crate::bus::EventBus;
 use crate::config::AppConfig;
@@ -62,6 +63,7 @@ pub struct App {
     pub jobs: Arc<DashMap<String, JobSummary>>,
     pub downloads: Arc<DashMap<String, DownloadProgress>>,
     pub bus: Arc<EventBus>,
+    pub ai: Arc<AiManager>,
     pub llm: Arc<llm::Model>,
     pub renderer: Arc<renderer::Renderer>,
     /// Autosave handle (tx + join) for the currently-open session. `None` = no project open.
@@ -92,6 +94,7 @@ impl App {
     ) -> Result<Self> {
         let backend = shared_llama_backend(&runtime)?;
         let llm = Arc::new(llm::Model::new((*runtime).clone(), cpu, backend));
+        let ai = Arc::new(AiManager::new(&runtime));
         let renderer = Arc::new(renderer::Renderer::new()?);
         Ok(Self {
             config: Arc::new(ArcSwap::from_pointee(config)),
@@ -101,6 +104,7 @@ impl App {
             jobs: shared.jobs,
             downloads: shared.downloads,
             bus: shared.bus,
+            ai,
             llm,
             renderer,
             autosave: Mutex::new(None),

koharu-app/src/lib.rs

@@ -3,6 +3,7 @@
 //!
 //! See [`crate::app::App`] for the entry point.
 
+pub mod ai;
 pub mod app;
 pub mod archive;
 pub mod autosave;
@@ -18,6 +19,7 @@ pub mod renderer;
 pub mod session;
 pub mod utils;
 
+pub use ai::AiManager;
 pub use app::{App, AppSharedState};
 pub use blobs::BlobStore;
 pub use config::AppConfig;

koharu-rpc/src/api.rs

@@ -37,6 +37,7 @@ fn app_api() -> OpenApiRouter<ApiState> {
         .merge(routes::meta::router())
         .merge(routes::fonts::router())
         .merge(routes::llm::router())
+        .merge(routes::ai::router())
         .merge(routes::pipelines::router())
         .merge(binary::router())
 }

koharu-rpc/src/routes/ai.rs

@@ -0,0 +1,133 @@
+//! AI workflow routes. These are separate from `/llm/*` because Codex image
+//! generation is not a translation model lifecycle concern.
+
+use std::sync::Arc;
+use std::sync::atomic::AtomicBool;
+
+use axum::Json;
+use axum::extract::State;
+use axum::http::StatusCode;
+use koharu_app::ai::{CodexAuthStatus, CodexDeviceLogin, CodexImageGenerationOptions};
+use koharu_core::{AppEvent, JobFinishedEvent, JobStatus, JobSummary};
+use serde::{Deserialize, Serialize};
+use utoipa_axum::{router::OpenApiRouter, routes};
+use uuid::Uuid;
+
+use crate::AppState;
+use crate::error::{ApiError, ApiResult};
+use crate::routes::operations::{register_cancel, unregister_cancel};
+
+pub fn router() -> OpenApiRouter<AppState> {
+    OpenApiRouter::default()
+        .routes(routes!(get_codex_auth_status))
+        .routes(routes!(start_codex_device_login))
+        .routes(routes!(delete_codex_session))
+        .routes(routes!(start_codex_image_generation))
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, utoipa::ToSchema)]
+#[serde(rename_all = "camelCase")]
+pub struct CodexImageGenerationResponse {
+    pub operation_id: String,
+}
+
+#[utoipa::path(
+    get,
+    path = "/ai/codex/auth/status",
+    responses((status = 200, body = CodexAuthStatus))
+)]
+async fn get_codex_auth_status(State(app): State<AppState>) -> ApiResult<Json<CodexAuthStatus>> {
+    app.ai
+        .codex_auth_status()
+        .map(Json)
+        .map_err(ApiError::internal)
+}
+
+#[utoipa::path(
+    post,
+    path = "/ai/codex/auth/device-code",
+    responses((status = 200, body = CodexDeviceLogin))
+)]
+async fn start_codex_device_login(
+    State(app): State<AppState>,
+) -> ApiResult<Json<CodexDeviceLogin>> {
+    app.ai
+        .start_codex_device_login()
+        .await
+        .map(Json)
+        .map_err(ApiError::internal)
+}
+
+#[utoipa::path(delete, path = "/ai/codex/auth/session", responses((status = 204)))]
+async fn delete_codex_session(State(app): State<AppState>) -> ApiResult<StatusCode> {
+    app.ai.logout_codex().map_err(ApiError::internal)?;
+    Ok(StatusCode::NO_CONTENT)
+}
+
+#[utoipa::path(
+    post,
+    path = "/ai/codex/images",
+    request_body = CodexImageGenerationOptions,
+    responses((status = 200, body = CodexImageGenerationResponse))
+)]
+async fn start_codex_image_generation(
+    State(app): State<AppState>,
+    Json(req): Json<CodexImageGenerationOptions>,
+) -> ApiResult<Json<CodexImageGenerationResponse>> {
+    let session = app
+        .current_session()
+        .ok_or_else(|| ApiError::bad_request("no project open"))?;
+
+    let operation_id = Uuid::new_v4().to_string();
+    let cancel = Arc::new(AtomicBool::new(false));
+    register_cancel(operation_id.clone(), cancel.clone());
+
+    app.jobs.insert(
+        operation_id.clone(),
+        JobSummary {
+            id: operation_id.clone(),
+            kind: "ai".to_string(),
+            status: JobStatus::Running,
+            error: None,
+        },
+    );
+    app.bus.publish(AppEvent::JobStarted {
+        id: operation_id.clone(),
+        kind: "ai".to_string(),
+    });
+
+    let app_c = app.clone();
+    let session_c = session.clone();
+    let op_id_c = operation_id.clone();
+    tokio::spawn(async move {
+        let result = app_c
+            .ai
+            .generate_codex_page_image(session_c, req, cancel)
+            .await;
+        let (status, error) = match result {
+            Ok(()) => (JobStatus::Completed, None),
+            Err(e) if e.to_string().contains("cancelled") => (JobStatus::Cancelled, None),
+            Err(e) => {
+                tracing::warn!(operation_id = %op_id_c, "Codex image generation failed: {e:#}");
+                (JobStatus::Failed, Some(format!("{e:#}")))
+            }
+        };
+        app_c.jobs.insert(
+            op_id_c.clone(),
+            JobSummary {
+                id: op_id_c.clone(),
+                kind: "ai".to_string(),
+                status,
+                error: error.clone(),
+            },
+        );
+        app_c.bus.publish(AppEvent::JobFinished(JobFinishedEvent {
+            id: op_id_c.clone(),
+            status,
+            error,
+        }));
+        unregister_cancel(&op_id_c);
+    });
+
+    Ok(Json(CodexImageGenerationResponse { operation_id }))
+}

koharu-rpc/src/routes/mod.rs

@@ -2,6 +2,7 @@
 //! `OpenApiRouter<ApiState>` that can be merged into the top-level router in
 //! `api.rs`.
 
+pub mod ai;
 pub mod config;
 pub mod downloads;
 pub mod fonts;

koharu-rpc/tests/snapshots/openapi__openapi_paths_snapshot.snap

@@ -4,6 +4,30 @@ assertion_line: 34
 expression: paths
 ---
 [
+    (
+        "/ai/codex/auth/device-code",
+        [
+            "post",
+        ],
+    ),
+    (
+        "/ai/codex/auth/session",
+        [
+            "delete",
+        ],
+    ),
+    (
+        "/ai/codex/auth/status",
+        [
+            "get",
+        ],
+    ),
+    (
+        "/ai/codex/images",
+        [
+            "post",
+        ],
+    ),
     (
         "/blobs/{hash}",
         [

ui/components/Panels.tsx

@@ -1,16 +1,26 @@
 'use client'
 
-import { LayersIcon, SlidersHorizontalIcon } from 'lucide-react'
+import { LayersIcon, SlidersHorizontalIcon, SparklesIcon, TypeIcon } from 'lucide-react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { AiPanel } from '@/components/panels/AiPanel'
 import { LayersPanel } from '@/components/panels/LayersPanel'
 import { RenderControlsPanel } from '@/components/panels/RenderControlsPanel'
 import { TextBlocksPanel } from '@/components/panels/TextBlocksPanel'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { useGetCodexAuthStatus } from '@/lib/api/default/default'
 
 export function Panels() {
   const { t } = useTranslation()
+  const { data: codexAuth } = useGetCodexAuthStatus()
+  const codexSignedIn = codexAuth?.signedIn === true
+  const [workTab, setWorkTab] = useState('text')
+
+  useEffect(() => {
+    if (!codexSignedIn && workTab === 'ai') setWorkTab('text')
+  }, [codexSignedIn, workTab])
 
   return (
     <div className='flex h-full min-h-0 w-full flex-col border-l bg-muted/50'>
@@ -57,8 +67,51 @@ export function Panels() {
         </TabsContent>
       </Tabs>
 
-      {/* Text Blocks Section - takes remaining space */}
-      <TextBlocksPanel />
+      <Tabs
+        value={workTab}
+        onValueChange={setWorkTab}
+        className='min-h-0 flex-1 gap-0'
+        data-testid='panels-work-tabs'
+      >
+        {codexSignedIn && (
+          <TabsList className='m-2 mb-0 grid w-[calc(100%-1rem)] grid-cols-2 bg-muted/70'>
+            <TabsTrigger value='text' data-testid='panels-tab-textblocks' className='gap-1'>
+              <TypeIcon className='size-3.5' />
+              <span className='text-xs font-semibold tracking-wide uppercase'>
+                {t('layers.textBlocks')}
+              </span>
+            </TabsTrigger>
+            <TabsTrigger value='ai' data-testid='panels-tab-ai' className='gap-1'>
+              <SparklesIcon className='size-3.5' />
+              <span className='text-xs font-semibold tracking-wide uppercase'>
+                {t('panels.ai')}
+              </span>
+            </TabsTrigger>
+          </TabsList>
+        )}
+
+        <TabsContent
+          value='text'
+          className='flex min-h-0 flex-1 data-[state=inactive]:hidden'
+          data-testid='panels-textblocks-tab'
+        >
+          <TextBlocksPanel />
+        </TabsContent>
+
+        {codexSignedIn && (
+          <TabsContent
+            value='ai'
+            className='min-h-0 flex-1 px-2 pb-2 data-[state=inactive]:hidden'
+            data-testid='panels-ai'
+          >
+            <ScrollArea className='h-full' viewportClassName='pr-1 [&>div]:!block'>
+              <div className='pt-2'>
+                <AiPanel />
+              </div>
+            </ScrollArea>
+          </TabsContent>
+        )}
+      </Tabs>
     </div>
   )
 }

ui/components/SettingsDialog.tsx

@@ -17,6 +17,11 @@ import {
   SaveIcon,
   RotateCcwIcon,
   AlertTriangleIcon,
+  CopyIcon,
+  ExternalLinkIcon,
+  LogInIcon,
+  LogOutIcon,
+  SparklesIcon,
 } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { Fragment, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
@@ -57,10 +62,15 @@ import {
   getGetCatalogQueryKey as getGetLlmCatalogQueryKey,
   getMeta,
   patchConfig,
+  deleteCodexSession,
+  getGetCodexAuthStatusQueryKey,
+  startCodexDeviceLogin,
+  useGetCodexAuthStatus,
 } from '@/lib/api/default/default'
 import type {
   AppConfig,
   ConfigPatch,
+  CodexDeviceLogin,
   EngineCatalog as GetEngineCatalog200,
   LlmProviderCatalog,
   ProviderConfig,
@@ -127,6 +137,7 @@ const TABS = [
   { id: 'appearance', icon: PaletteIcon, labelKey: 'settings.appearance' },
   { id: 'engines', icon: CpuIcon, labelKey: 'settings.engines' },
   { id: 'providers', icon: KeyIcon, labelKey: 'settings.apiKeys' },
+  { id: 'ai', icon: SparklesIcon, labelKey: 'settings.ai' },
   { id: 'keybinds', icon: KeyboardIcon, labelKey: 'settings.keybinds' },
   { id: 'runtime', icon: HardDriveIcon, labelKey: 'settings.runtime' },
   { id: 'about', icon: InfoIcon, labelKey: 'settings.about' },
@@ -386,6 +397,7 @@ export function SettingsDialog({
                   }}
                 />
               )}
+              {tab === 'ai' && <CodexSettingsPane />}
               {tab === 'runtime' && (
                 <StoragePane
                   dataPath={dataPathDraft}
@@ -676,6 +688,187 @@ function ProvidersPane({
 
 // ── Keybinds ──────────────────────────────────────────────────────
 
+function CodexSettingsPane() {
+  const { t } = useTranslation()
+  const queryClient = useQueryClient()
+  const [login, setLogin] = useState<CodexDeviceLogin | null>(null)
+  const [loginOpen, setLoginOpen] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const [actionError, setActionError] = useState<string | null>(null)
+  const { data: auth, refetch } = useGetCodexAuthStatus()
+
+  const loginStatus = auth?.login?.status
+  const signedIn = auth?.signedIn === true
+
+  useEffect(() => {
+    if (!loginOpen && loginStatus !== 'pending') return
+    const id = window.setInterval(() => void refetch(), 2000)
+    return () => window.clearInterval(id)
+  }, [loginOpen, loginStatus, refetch])
+
+  useEffect(() => {
+    if (loginOpen && (signedIn || loginStatus === 'succeeded')) {
+      const id = window.setTimeout(() => setLoginOpen(false), 700)
+      return () => window.clearTimeout(id)
+    }
+  }, [loginOpen, loginStatus, signedIn])
+
+  const statusLabel = useMemo(() => {
+    if (signedIn) return auth?.accountId ? auth.accountId : t('ai.signedIn')
+    if (loginStatus === 'failed') return t('ai.signInFailed')
+    if (loginStatus === 'pending') return t('ai.signInPending')
+    return t('ai.signedOut')
+  }, [auth?.accountId, loginStatus, signedIn, t])
+
+  const invalidateAuth = () =>
+    queryClient.invalidateQueries({ queryKey: getGetCodexAuthStatusQueryKey() })
+
+  const handleSignIn = async () => {
+    setBusy(true)
+    setActionError(null)
+    try {
+      const next = await startCodexDeviceLogin()
+      setLogin(next)
+      setCopied(false)
+      setLoginOpen(true)
+      void invalidateAuth()
+      void openExternalUrl(next.verificationUrl)
+    } catch (err) {
+      setActionError(String(err))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleLogout = async () => {
+    setBusy(true)
+    setActionError(null)
+    try {
+      await deleteCodexSession()
+      await invalidateAuth()
+    } catch (err) {
+      setActionError(String(err))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const handleCopyCode = async () => {
+    if (!login?.userCode || typeof navigator === 'undefined') return
+    await navigator.clipboard?.writeText(login.userCode)
+    setCopied(true)
+    window.setTimeout(() => setCopied(false), 1200)
+  }
+
+  return (
+    <Section title={t('settings.codex')} description={t('settings.codexDescription')}>
+      <div className='rounded-md border border-amber-200/70 bg-amber-50/80 p-3 text-xs leading-relaxed text-amber-900 dark:border-amber-900/70 dark:bg-amber-950/40 dark:text-amber-100'>
+        {t('settings.codexTwoFactorDescription')}
+      </div>
+      <div className='rounded-md border border-border bg-card p-3'>
+        <div className='flex items-center justify-between gap-3'>
+          <div className='flex min-w-0 items-center gap-2'>
+            <div className='flex size-8 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary'>
+              <SparklesIcon className='size-4' />
+            </div>
+            <div className='min-w-0'>
+              <div className='text-sm font-medium text-foreground'>Codex</div>
+              <div className='truncate text-xs text-muted-foreground'>{statusLabel}</div>
+            </div>
+          </div>
+          {signedIn ? (
+            <Button
+              variant='outline'
+              size='sm'
+              className='gap-1.5'
+              disabled={busy}
+              onClick={() => void handleLogout()}
+            >
+              <LogOutIcon className='size-3.5' />
+              {t('ai.signOut')}
+            </Button>
+          ) : (
+            <Button
+              variant='default'
+              size='sm'
+              className='gap-1.5'
+              disabled={busy}
+              onClick={() => void handleSignIn()}
+            >
+              {busy ? (
+                <LoaderIcon className='size-3.5 animate-spin' />
+              ) : (
+                <LogInIcon className='size-3.5' />
+              )}
+              {t('ai.signIn')}
+            </Button>
+          )}
+        </div>
+        {(actionError || (auth?.login?.status === 'failed' && auth.login.error)) && (
+          <p className='mt-2 line-clamp-3 text-xs text-destructive'>
+            {actionError || auth?.login?.error}
+          </p>
+        )}
+      </div>
+
+      <Dialog open={loginOpen} onOpenChange={setLoginOpen}>
+        <DialogContent className='w-[340px] max-w-[92vw] gap-3 p-4'>
+          <DialogTitle className='text-sm'>{t('ai.signInTitle')}</DialogTitle>
+          <DialogDescription className='sr-only'>{t('ai.signIn')}</DialogDescription>
+          <div className='flex items-center justify-between gap-3 rounded-md border border-border bg-muted/40 px-3 py-2'>
+            <div className='min-w-0'>
+              <div className='text-[10px] font-semibold tracking-wide text-muted-foreground uppercase'>
+                {t('ai.userCode')}
+              </div>
+              <div className='mt-0.5 font-mono text-xl font-semibold tracking-widest'>
+                {login?.userCode ?? '...'}
+              </div>
+            </div>
+            <Button
+              variant='outline'
+              size='icon-sm'
+              disabled={!login}
+              aria-label={copied ? t('common.copied') : t('common.copy')}
+              onClick={() => void handleCopyCode()}
+            >
+              <CopyIcon className='size-3.5' />
+            </Button>
+          </div>
+          <Button
+            variant='outline'
+            size='sm'
+            className='w-full gap-1.5'
+            disabled={!login}
+            onClick={() => login && void openExternalUrl(login.verificationUrl)}
+          >
+            <ExternalLinkIcon className='size-3.5' />
+            {t('ai.openBrowser')}
+          </Button>
+          <div className='flex items-center gap-2 text-xs text-muted-foreground'>
+            {signedIn || loginStatus === 'succeeded' ? (
+              <>
+                <CheckCircleIcon className='size-4 text-green-500' />
+                {t('ai.signInComplete')}
+              </>
+            ) : loginStatus === 'failed' ? (
+              <>
+                <AlertCircleIcon className='size-4 text-destructive' />
+                <span className='line-clamp-2'>{auth?.login?.error ?? t('ai.signInFailed')}</span>
+              </>
+            ) : (
+              <>
+                <LoaderIcon className='size-4 animate-spin' />
+                {t('ai.signInPending')}
+              </>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </Section>
+  )
+}
+
 const SHORTCUT_ITEMS = [
   { key: 'select', labelKey: 'toolRail.select' },
   { key: 'block', labelKey: 'toolRail.block' },

ui/components/canvas/SubToolRail.tsx

@@ -30,84 +30,84 @@ export function SubToolRail() {
     <AnimatePresence>
       {isBrushTool && (
         <motion.div
-        initial={{ x: -20, opacity: 0 }}
-        animate={{ x: 0, opacity: 1 }}
-        exit={{ x: -20, opacity: 0 }}
-        transition={{ duration: 0.2, ease: 'easeOut' }}
-        className='absolute top-14 left-11 z-50 ml-1 flex w-[260px] flex-col overflow-hidden rounded-xl border border-border bg-card shadow-2xl'
-        data-testid='sub-tool-rail'
-      >
-        <div className='space-y-4 p-4'>
-          {/* Brush Size */}
-          <div className='space-y-2'>
-            <p id='brush-size-label' className='text-[11px] font-medium text-muted-foreground'>
-              {t('toolbar.brushSize')}
-            </p>
-            <div className='flex items-center gap-2'>
-              <Slider
-                min={8}
-                max={128}
-                step={4}
-                value={[localSize]}
-                onValueChange={(vals) => setLocalSize(vals[0] ?? localSize)}
-                onValueCommit={(vals) => setBrushConfig({ size: vals[0] ?? localSize })}
-                className='flex-1'
-                aria-labelledby='brush-size-label'
-              />
-              <div className='flex shrink-0 items-center gap-1.5'>
-                <Input
-                  value={localSize}
-                  readOnly
-                  aria-label='Brush size value'
-                  className='h-8 w-11 border-border/50 bg-muted/20 px-1 text-center text-[11px]'
+          initial={{ x: -20, opacity: 0 }}
+          animate={{ x: 0, opacity: 1 }}
+          exit={{ x: -20, opacity: 0 }}
+          transition={{ duration: 0.2, ease: 'easeOut' }}
+          className='absolute top-14 left-11 z-50 ml-1 flex w-[260px] flex-col overflow-hidden rounded-xl border border-border bg-card shadow-2xl'
+          data-testid='sub-tool-rail'
+        >
+          <div className='space-y-4 p-4'>
+            {/* Brush Size */}
+            <div className='space-y-2'>
+              <p id='brush-size-label' className='text-[11px] font-medium text-muted-foreground'>
+                {t('toolbar.brushSize')}
+              </p>
+              <div className='flex items-center gap-2'>
+                <Slider
+                  min={8}
+                  max={128}
+                  step={4}
+                  value={[localSize]}
+                  onValueChange={(vals) => setLocalSize(vals[0] ?? localSize)}
+                  onValueCommit={(vals) => setBrushConfig({ size: vals[0] ?? localSize })}
+                  className='flex-1'
+                  aria-labelledby='brush-size-label'
                 />
-                <span
-                  className='w-4 text-[10px] font-medium text-muted-foreground'
-                  aria-hidden='true'
-                >
-                  px
-                </span>
+                <div className='flex shrink-0 items-center gap-1.5'>
+                  <Input
+                    value={localSize}
+                    readOnly
+                    aria-label='Brush size value'
+                    className='h-8 w-11 border-border/50 bg-muted/20 px-1 text-center text-[11px]'
+                  />
+                  <span
+                    className='w-4 text-[10px] font-medium text-muted-foreground'
+                    aria-hidden='true'
+                  >
+                    px
+                  </span>
+                </div>
               </div>
             </div>
-          </div>
 
-          {/* Color Picker Section */}
-          <AnimatePresence initial={false}>
-            {mode === 'brush' && (
-              <motion.div
-                initial={{ height: 0, opacity: 0 }}
-                animate={{ height: 'auto', opacity: 1 }}
-                exit={{ height: 0, opacity: 0 }}
-                transition={{ duration: 0.2, ease: 'easeInOut' }}
-                className='overflow-hidden border-t border-border/30 pt-2'
-              >
-                <div className='flex items-center justify-between'>
-                  <p
-                    id='brush-color-label'
-                    className='text-[11px] font-medium text-muted-foreground'
-                  >
-                    {t('toolbar.brushColor')}
-                  </p>
-                  <div className='flex items-center gap-2'>
-                    <span
-                      className='font-mono text-[10px] text-muted-foreground uppercase'
-                      aria-hidden='true'
+            {/* Color Picker Section */}
+            <AnimatePresence initial={false}>
+              {mode === 'brush' && (
+                <motion.div
+                  initial={{ height: 0, opacity: 0 }}
+                  animate={{ height: 'auto', opacity: 1 }}
+                  exit={{ height: 0, opacity: 0 }}
+                  transition={{ duration: 0.2, ease: 'easeInOut' }}
+                  className='overflow-hidden border-t border-border/30 pt-2'
+                >
+                  <div className='flex items-center justify-between'>
+                    <p
+                      id='brush-color-label'
+                      className='text-[11px] font-medium text-muted-foreground'
                     >
-                      {brushConfig.color}
-                    </span>
-                    <ColorPicker
-                      value={brushConfig.color}
-                      onChange={(color) => setBrushConfig({ color })}
-                      className='size-5 rounded-md'
-                      aria-labelledby='brush-color-label'
-                    />
+                      {t('toolbar.brushColor')}
+                    </p>
+                    <div className='flex items-center gap-2'>
+                      <span
+                        className='font-mono text-[10px] text-muted-foreground uppercase'
+                        aria-hidden='true'
+                      >
+                        {brushConfig.color}
+                      </span>
+                      <ColorPicker
+                        value={brushConfig.color}
+                        onChange={(color) => setBrushConfig({ color })}
+                        className='size-5 rounded-md'
+                        aria-labelledby='brush-color-label'
+                      />
+                    </div>
                   </div>
-                </div>
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      </motion.div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </motion.div>
       )}
     </AnimatePresence>
   )

ui/components/panels/AiPanel.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import { LoaderCircleIcon, SparklesIcon } from 'lucide-react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import { useCurrentPage } from '@/hooks/useCurrentPage'
+import { startCodexImageGeneration, useGetCodexAuthStatus } from '@/lib/api/default/default'
+import { useEditorUiStore } from '@/lib/stores/editorUiStore'
+import { useJobsStore } from '@/lib/stores/jobsStore'
+import { usePreferencesStore } from '@/lib/stores/preferencesStore'
+
+export function AiPanel() {
+  const { t } = useTranslation()
+  const page = useCurrentPage()
+  const prompt = usePreferencesStore((s) => s.codexImagePrompt)
+  const setPrompt = usePreferencesStore((s) => s.setCodexImagePrompt)
+  const model = usePreferencesStore((s) => s.codexImageModel)
+  const setModel = usePreferencesStore((s) => s.setCodexImageModel)
+  const setShowRenderedImage = useEditorUiStore((s) => s.setShowRenderedImage)
+  const showError = useEditorUiStore((s) => s.showError)
+  const [busy, setBusy] = useState(false)
+  const { data: auth } = useGetCodexAuthStatus()
+  const isProcessing = useJobsStore((s) =>
+    Object.values(s.jobs).some((job) => job.status === 'running'),
+  )
+
+  const signedIn = auth?.signedIn === true
+  const promptReady = !!prompt?.trim()
+  const modelValue = model?.trim() || 'gpt-5.5'
+  const canGenerate = signedIn && !!page && promptReady && !isProcessing && !busy
+
+  const handleGenerate = async () => {
+    if (!signedIn || !page || !promptReady) return
+    setBusy(true)
+    try {
+      setShowRenderedImage(true)
+      await startCodexImageGeneration({
+        pageId: page.id,
+        prompt: prompt!.trim(),
+        model: modelValue,
+        quality: 'high',
+      })
+    } catch (err) {
+      showError(String(err))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  if (!signedIn) return null
+
+  return (
+    <div className='flex min-h-0 flex-col gap-3 text-xs'>
+      <div className='space-y-1.5'>
+        <Label className='text-[10px] font-semibold tracking-wide text-muted-foreground uppercase'>
+          {t('ai.model')}
+        </Label>
+        <Input
+          value={modelValue}
+          onChange={(event) => setModel(event.target.value || undefined)}
+          className='h-7 px-2 text-xs'
+        />
+      </div>
+
+      <div className='space-y-1.5'>
+        <Label className='text-[10px] font-semibold tracking-wide text-muted-foreground uppercase'>
+          {t('ai.prompt')}
+        </Label>
+        <Textarea
+          value={prompt ?? ''}
+          onChange={(event) => setPrompt(event.target.value || undefined)}
+          rows={8}
+          className='min-h-36 resize-y px-2 py-1.5 text-xs leading-snug md:text-xs'
+        />
+      </div>
+
+      <Button
+        className='w-full gap-1.5'
+        size='sm'
+        disabled={!canGenerate}
+        onClick={() => void handleGenerate()}
+      >
+        {busy || isProcessing ? (
+          <LoaderCircleIcon className='size-3.5 animate-spin' />
+        ) : (
+          <SparklesIcon className='size-3.5' />
+        )}
+        {t('ai.generate')}
+      </Button>
+
+      {!page && <p className='text-xs text-muted-foreground'>{t('ai.noPage')}</p>}
+    </div>
+  )
+}

ui/lib/api/default/default.msw.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */
@@ -8,6 +8,7 @@ import { HttpResponse, delay, http } from 'msw'
 import type { RequestHandlerOptions } from 'msw'
 
 import {
+  CodexAuthAttemptStatus,
   FontSource,
   ImageRole,
   JobStatus,
@@ -23,6 +24,10 @@ import type {
   AddImageLayerResponse,
   AppConfig,
   AppEvent,
+  CodexAuthStatus,
+  CodexDeviceLogin,
+  CodexDeviceLoginStatus,
+  CodexImageGenerationResponse,
   CreatePagesResponse,
   DataConfig,
   EngineCatalog,
@@ -50,6 +55,60 @@ import type {
   Transform,
 } from '../schemas'
 
+export const getStartCodexDeviceLoginResponseMock = (
+  overrideResponse: Partial<Extract<CodexDeviceLogin, object>> = {},
+): CodexDeviceLogin => ({
+  intervalSeconds: faker.number.int({ min: 0 }),
+  loginId: faker.string.alpha({ length: { min: 10, max: 20 } }),
+  timeoutSeconds: faker.number.int({ min: 0 }),
+  userCode: faker.string.alpha({ length: { min: 10, max: 20 } }),
+  verificationUrl: faker.string.alpha({ length: { min: 10, max: 20 } }),
+  ...overrideResponse,
+})
+
+export const getGetCodexAuthStatusResponseCodexDeviceLoginStatusMock = (
+  overrideResponse: Partial<CodexDeviceLoginStatus> = {},
+): CodexDeviceLoginStatus => ({
+  ...{
+    accountId: faker.helpers.arrayElement([
+      faker.helpers.arrayElement([faker.string.alpha({ length: { min: 10, max: 20 } }), null]),
+      undefined,
+    ]),
+    error: faker.helpers.arrayElement([
+      faker.helpers.arrayElement([faker.string.alpha({ length: { min: 10, max: 20 } }), null]),
+      undefined,
+    ]),
+    loginId: faker.string.alpha({ length: { min: 10, max: 20 } }),
+    status: faker.helpers.arrayElement(Object.values(CodexAuthAttemptStatus)),
+  },
+  ...overrideResponse,
+})
+
+export const getGetCodexAuthStatusResponseMock = (
+  overrideResponse: Partial<Extract<CodexAuthStatus, object>> = {},
+): CodexAuthStatus => ({
+  accountId: faker.helpers.arrayElement([
+    faker.helpers.arrayElement([faker.string.alpha({ length: { min: 10, max: 20 } }), null]),
+    undefined,
+  ]),
+  login: faker.helpers.arrayElement([
+    faker.helpers.arrayElement([
+      null,
+      { ...getGetCodexAuthStatusResponseCodexDeviceLoginStatusMock() },
+    ]),
+    undefined,
+  ]),
+  signedIn: faker.datatype.boolean(),
+  ...overrideResponse,
+})
+
+export const getStartCodexImageGenerationResponseMock = (
+  overrideResponse: Partial<Extract<CodexImageGenerationResponse, object>> = {},
+): CodexImageGenerationResponse => ({
+  operationId: faker.string.alpha({ length: { min: 10, max: 20 } }),
+  ...overrideResponse,
+})
+
 export const getGetBlobResponseMock = (): ArrayBuffer =>
   new ArrayBuffer(faker.number.int({ min: 1, max: 64 }))
 
@@ -1000,6 +1059,104 @@ export const getGetSceneJsonResponseMock = (
   ...overrideResponse,
 })
 
+export const getStartCodexDeviceLoginMockHandler = (
+  overrideResponse?:
+    | CodexDeviceLogin
+    | ((
+        info: Parameters<Parameters<typeof http.post>[1]>[0],
+      ) => Promise<CodexDeviceLogin> | CodexDeviceLogin),
+  options?: RequestHandlerOptions,
+) => {
+  return http.post(
+    '*/ai/codex/auth/device-code',
+    async (info: Parameters<Parameters<typeof http.post>[1]>[0]) => {
+      await delay(0)
+
+      return HttpResponse.json(
+        overrideResponse !== undefined
+          ? typeof overrideResponse === 'function'
+            ? await overrideResponse(info)
+            : overrideResponse
+          : getStartCodexDeviceLoginResponseMock(),
+        { status: 200 },
+      )
+    },
+    options,
+  )
+}
+
+export const getDeleteCodexSessionMockHandler = (
+  overrideResponse?:
+    | void
+    | ((info: Parameters<Parameters<typeof http.delete>[1]>[0]) => Promise<void> | void),
+  options?: RequestHandlerOptions,
+) => {
+  return http.delete(
+    '*/ai/codex/auth/session',
+    async (info: Parameters<Parameters<typeof http.delete>[1]>[0]) => {
+      await delay(0)
+      if (typeof overrideResponse === 'function') {
+        await overrideResponse(info)
+      }
+
+      return new HttpResponse(null, { status: 204 })
+    },
+    options,
+  )
+}
+
+export const getGetCodexAuthStatusMockHandler = (
+  overrideResponse?:
+    | CodexAuthStatus
+    | ((
+        info: Parameters<Parameters<typeof http.get>[1]>[0],
+      ) => Promise<CodexAuthStatus> | CodexAuthStatus),
+  options?: RequestHandlerOptions,
+) => {
+  return http.get(
+    '*/ai/codex/auth/status',
+    async (info: Parameters<Parameters<typeof http.get>[1]>[0]) => {
+      await delay(0)
+
+      return HttpResponse.json(
+        overrideResponse !== undefined
+          ? typeof overrideResponse === 'function'
+            ? await overrideResponse(info)
+            : overrideResponse
+          : getGetCodexAuthStatusResponseMock(),
+        { status: 200 },
+      )
+    },
+    options,
+  )
+}
+
+export const getStartCodexImageGenerationMockHandler = (
+  overrideResponse?:
+    | CodexImageGenerationResponse
+    | ((
+        info: Parameters<Parameters<typeof http.post>[1]>[0],
+      ) => Promise<CodexImageGenerationResponse> | CodexImageGenerationResponse),
+  options?: RequestHandlerOptions,
+) => {
+  return http.post(
+    '*/ai/codex/images',
+    async (info: Parameters<Parameters<typeof http.post>[1]>[0]) => {
+      await delay(0)
+
+      return HttpResponse.json(
+        overrideResponse !== undefined
+          ? typeof overrideResponse === 'function'
+            ? await overrideResponse(info)
+            : overrideResponse
+          : getStartCodexImageGenerationResponseMock(),
+        { status: 200 },
+      )
+    },
+    options,
+  )
+}
+
 export const getGetBlobMockHandler = (
   overrideResponse?:
     | ArrayBuffer
@@ -1910,6 +2067,10 @@ export const getGetSceneJsonMockHandler = (
   )
 }
 export const getDefaultMock = () => [
+  getStartCodexDeviceLoginMockHandler(),
+  getDeleteCodexSessionMockHandler(),
+  getGetCodexAuthStatusMockHandler(),
+  getStartCodexImageGenerationMockHandler(),
   getGetBlobMockHandler(),
   getGetConfigMockHandler(),
   getPatchConfigMockHandler(),

ui/lib/api/default/default.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */
@@ -24,6 +24,10 @@ import type {
   AddImageLayerResponse,
   AppConfig,
   AppEvent,
+  CodexAuthStatus,
+  CodexDeviceLogin,
+  CodexImageGenerationOptions,
+  CodexImageGenerationResponse,
   ConfigPatch,
   CreatePagesFromPathsRequest,
   CreatePagesResponse,
@@ -56,6 +60,313 @@ import type {
 
 type SecondParameter<T extends (...args: never) => unknown> = Parameters<T>[1]
 
+export const getStartCodexDeviceLoginUrl = () => {
+  return `/api/v1/ai/codex/auth/device-code`
+}
+
+export const startCodexDeviceLogin = async (options?: RequestInit): Promise<CodexDeviceLogin> => {
+  return fetchApi<CodexDeviceLogin>(getStartCodexDeviceLoginUrl(), {
+    ...options,
+    method: 'POST',
+  })
+}
+
+export const getStartCodexDeviceLoginMutationOptions = <
+  TError = unknown,
+  TContext = unknown,
+>(options?: {
+  mutation?: UseMutationOptions<
+    Awaited<ReturnType<typeof startCodexDeviceLogin>>,
+    TError,
+    void,
+    TContext
+  >
+  request?: SecondParameter<typeof fetchApi>
+}): UseMutationOptions<
+  Awaited<ReturnType<typeof startCodexDeviceLogin>>,
+  TError,
+  void,
+  TContext
+> => {
+  const mutationKey = ['startCodexDeviceLogin']
+  const { mutation: mutationOptions, request: requestOptions } = options
+    ? options.mutation && 'mutationKey' in options.mutation && options.mutation.mutationKey
+      ? options
+      : { ...options, mutation: { ...options.mutation, mutationKey } }
+    : { mutation: { mutationKey }, request: undefined }
+
+  const mutationFn: MutationFunction<
+    Awaited<ReturnType<typeof startCodexDeviceLogin>>,
+    void
+  > = () => {
+    return startCodexDeviceLogin(requestOptions)
+  }
+
+  return { mutationFn, ...mutationOptions }
+}
+
+export type StartCodexDeviceLoginMutationResult = NonNullable<
+  Awaited<ReturnType<typeof startCodexDeviceLogin>>
+>
+
+export type StartCodexDeviceLoginMutationError = unknown
+
+export const useStartCodexDeviceLogin = <TError = unknown, TContext = unknown>(
+  options?: {
+    mutation?: UseMutationOptions<
+      Awaited<ReturnType<typeof startCodexDeviceLogin>>,
+      TError,
+      void,
+      TContext
+    >
+    request?: SecondParameter<typeof fetchApi>
+  },
+  queryClient?: QueryClient,
+): UseMutationResult<Awaited<ReturnType<typeof startCodexDeviceLogin>>, TError, void, TContext> => {
+  return useMutation(getStartCodexDeviceLoginMutationOptions(options), queryClient)
+}
+export const getDeleteCodexSessionUrl = () => {
+  return `/api/v1/ai/codex/auth/session`
+}
+
+export const deleteCodexSession = async (options?: RequestInit): Promise<void> => {
+  return fetchApi<void>(getDeleteCodexSessionUrl(), {
+    ...options,
+    method: 'DELETE',
+  })
+}
+
+export const getDeleteCodexSessionMutationOptions = <
+  TError = unknown,
+  TContext = unknown,
+>(options?: {
+  mutation?: UseMutationOptions<
+    Awaited<ReturnType<typeof deleteCodexSession>>,
+    TError,
+    void,
+    TContext
+  >
+  request?: SecondParameter<typeof fetchApi>
+}): UseMutationOptions<Awaited<ReturnType<typeof deleteCodexSession>>, TError, void, TContext> => {
+  const mutationKey = ['deleteCodexSession']
+  const { mutation: mutationOptions, request: requestOptions } = options
+    ? options.mutation && 'mutationKey' in options.mutation && options.mutation.mutationKey
+      ? options
+      : { ...options, mutation: { ...options.mutation, mutationKey } }
+    : { mutation: { mutationKey }, request: undefined }
+
+  const mutationFn: MutationFunction<Awaited<ReturnType<typeof deleteCodexSession>>, void> = () => {
+    return deleteCodexSession(requestOptions)
+  }
+
+  return { mutationFn, ...mutationOptions }
+}
+
+export type DeleteCodexSessionMutationResult = NonNullable<
+  Awaited<ReturnType<typeof deleteCodexSession>>
+>
+
+export type DeleteCodexSessionMutationError = unknown
+
+export const useDeleteCodexSession = <TError = unknown, TContext = unknown>(
+  options?: {
+    mutation?: UseMutationOptions<
+      Awaited<ReturnType<typeof deleteCodexSession>>,
+      TError,
+      void,
+      TContext
+    >
+    request?: SecondParameter<typeof fetchApi>
+  },
+  queryClient?: QueryClient,
+): UseMutationResult<Awaited<ReturnType<typeof deleteCodexSession>>, TError, void, TContext> => {
+  return useMutation(getDeleteCodexSessionMutationOptions(options), queryClient)
+}
+export const getGetCodexAuthStatusUrl = () => {
+  return `/api/v1/ai/codex/auth/status`
+}
+
+export const getCodexAuthStatus = async (options?: RequestInit): Promise<CodexAuthStatus> => {
+  return fetchApi<CodexAuthStatus>(getGetCodexAuthStatusUrl(), {
+    ...options,
+    method: 'GET',
+  })
+}
+
+export const getGetCodexAuthStatusQueryKey = () => {
+  return [`/api/v1/ai/codex/auth/status`] as const
+}
+
+export const getGetCodexAuthStatusQueryOptions = <
+  TData = Awaited<ReturnType<typeof getCodexAuthStatus>>,
+  TError = unknown,
+>(options?: {
+  query?: Partial<UseQueryOptions<Awaited<ReturnType<typeof getCodexAuthStatus>>, TError, TData>>
+  request?: SecondParameter<typeof fetchApi>
+}) => {
+  const { query: queryOptions, request: requestOptions } = options ?? {}
+
+  const queryKey = queryOptions?.queryKey ?? getGetCodexAuthStatusQueryKey()
+
+  const queryFn: QueryFunction<Awaited<ReturnType<typeof getCodexAuthStatus>>> = ({ signal }) =>
+    getCodexAuthStatus({ signal, ...requestOptions })
+
+  return { queryKey, queryFn, gcTime: 300000, retry: 1, ...queryOptions } as UseQueryOptions<
+    Awaited<ReturnType<typeof getCodexAuthStatus>>,
+    TError,
+    TData
+  > & { queryKey: DataTag<QueryKey, TData, TError> }
+}
+
+export type GetCodexAuthStatusQueryResult = NonNullable<
+  Awaited<ReturnType<typeof getCodexAuthStatus>>
+>
+export type GetCodexAuthStatusQueryError = unknown
+
+export function useGetCodexAuthStatus<
+  TData = Awaited<ReturnType<typeof getCodexAuthStatus>>,
+  TError = unknown,
+>(
+  options: {
+    query: Partial<UseQueryOptions<Awaited<ReturnType<typeof getCodexAuthStatus>>, TError, TData>> &
+      Pick<
+        DefinedInitialDataOptions<
+          Awaited<ReturnType<typeof getCodexAuthStatus>>,
+          TError,
+          Awaited<ReturnType<typeof getCodexAuthStatus>>
+        >,
+        'initialData'
+      >
+    request?: SecondParameter<typeof fetchApi>
+  },
+  queryClient?: QueryClient,
+): DefinedUseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> }
+export function useGetCodexAuthStatus<
+  TData = Awaited<ReturnType<typeof getCodexAuthStatus>>,
+  TError = unknown,
+>(
+  options?: {
+    query?: Partial<
+      UseQueryOptions<Awaited<ReturnType<typeof getCodexAuthStatus>>, TError, TData>
+    > &
+      Pick<
+        UndefinedInitialDataOptions<
+          Awaited<ReturnType<typeof getCodexAuthStatus>>,
+          TError,
+          Awaited<ReturnType<typeof getCodexAuthStatus>>
+        >,
+        'initialData'
+      >
+    request?: SecondParameter<typeof fetchApi>
+  },
+  queryClient?: QueryClient,
+): UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> }
+export function useGetCodexAuthStatus<
+  TData = Awaited<ReturnType<typeof getCodexAuthStatus>>,
+  TError = unknown,
+>(
+  options?: {
+    query?: Partial<UseQueryOptions<Awaited<ReturnType<typeof getCodexAuthStatus>>, TError, TData>>
+    request?: SecondParameter<typeof fetchApi>
+  },
+  queryClient?: QueryClient,
+): UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> }
+
+export function useGetCodexAuthStatus<
+  TData = Awaited<ReturnType<typeof getCodexAuthStatus>>,
+  TError = unknown,
+>(
+  options?: {
+    query?: Partial<UseQueryOptions<Awaited<ReturnType<typeof getCodexAuthStatus>>, TError, TData>>
+    request?: SecondParameter<typeof fetchApi>
+  },
+  queryClient?: QueryClient,
+): UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> } {
+  const queryOptions = getGetCodexAuthStatusQueryOptions(options)
+
+  const query = useQuery(queryOptions, queryClient) as UseQueryResult<TData, TError> & {
+    queryKey: DataTag<QueryKey, TData, TError>
+  }
+
+  return { ...query, queryKey: queryOptions.queryKey }
+}
+export const getStartCodexImageGenerationUrl = () => {
+  return `/api/v1/ai/codex/images`
+}
+
+export const startCodexImageGeneration = async (
+  codexImageGenerationOptions: CodexImageGenerationOptions,
+  options?: RequestInit,
+): Promise<CodexImageGenerationResponse> => {
+  return fetchApi<CodexImageGenerationResponse>(getStartCodexImageGenerationUrl(), {
+    ...options,
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', ...options?.headers },
+    body: JSON.stringify(codexImageGenerationOptions),
+  })
+}
+
+export const getStartCodexImageGenerationMutationOptions = <
+  TError = unknown,
+  TContext = unknown,
+>(options?: {
+  mutation?: UseMutationOptions<
+    Awaited<ReturnType<typeof startCodexImageGeneration>>,
+    TError,
+    { data: CodexImageGenerationOptions },
+    TContext
+  >
+  request?: SecondParameter<typeof fetchApi>
+}): UseMutationOptions<
+  Awaited<ReturnType<typeof startCodexImageGeneration>>,
+  TError,
+  { data: CodexImageGenerationOptions },
+  TContext
+> => {
+  const mutationKey = ['startCodexImageGeneration']
+  const { mutation: mutationOptions, request: requestOptions } = options
+    ? options.mutation && 'mutationKey' in options.mutation && options.mutation.mutationKey
+      ? options
+      : { ...options, mutation: { ...options.mutation, mutationKey } }
+    : { mutation: { mutationKey }, request: undefined }
+
+  const mutationFn: MutationFunction<
+    Awaited<ReturnType<typeof startCodexImageGeneration>>,
+    { data: CodexImageGenerationOptions }
+  > = (props) => {
+    const { data } = props ?? {}
+
+    return startCodexImageGeneration(data, requestOptions)
+  }
+
+  return { mutationFn, ...mutationOptions }
+}
+
+export type StartCodexImageGenerationMutationResult = NonNullable<
+  Awaited<ReturnType<typeof startCodexImageGeneration>>
+>
+export type StartCodexImageGenerationMutationBody = CodexImageGenerationOptions
+export type StartCodexImageGenerationMutationError = unknown
+
+export const useStartCodexImageGeneration = <TError = unknown, TContext = unknown>(
+  options?: {
+    mutation?: UseMutationOptions<
+      Awaited<ReturnType<typeof startCodexImageGeneration>>,
+      TError,
+      { data: CodexImageGenerationOptions },
+      TContext
+    >
+    request?: SecondParameter<typeof fetchApi>
+  },
+  queryClient?: QueryClient,
+): UseMutationResult<
+  Awaited<ReturnType<typeof startCodexImageGeneration>>,
+  TError,
+  { data: CodexImageGenerationOptions },
+  TContext
+> => {
+  return useMutation(getStartCodexImageGenerationMutationOptions(options), queryClient)
+}
 export const getGetBlobUrl = (hash: string) => {
   return `/api/v1/blobs/${hash}`
 }

ui/lib/api/schemas/addImageLayerResponse.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/appConfig.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/appEvent.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/blobRef.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/codexAuthAttemptStatus.ts

@@ -0,0 +1,14 @@
+/**
+ * Generated by orval v8.8.1 🍺
+ * Do not edit manually.
+ * OpenAPI spec version: 0.0.1
+ */
+
+export type CodexAuthAttemptStatus =
+  (typeof CodexAuthAttemptStatus)[keyof typeof CodexAuthAttemptStatus]
+
+export const CodexAuthAttemptStatus = {
+  pending: 'pending',
+  succeeded: 'succeeded',
+  failed: 'failed',
+} as const

ui/lib/api/schemas/codexAuthStatus.ts

@@ -0,0 +1,13 @@
+/**
+ * Generated by orval v8.8.1 🍺
+ * Do not edit manually.
+ * OpenAPI spec version: 0.0.1
+ */
+import type { CodexDeviceLoginStatus } from './codexDeviceLoginStatus'
+
+export interface CodexAuthStatus {
+  /** @nullable */
+  accountId?: string | null
+  login?: null | CodexDeviceLoginStatus
+  signedIn: boolean
+}

ui/lib/api/schemas/codexDeviceLogin.ts

@@ -0,0 +1,15 @@
+/**
+ * Generated by orval v8.8.1 🍺
+ * Do not edit manually.
+ * OpenAPI spec version: 0.0.1
+ */
+
+export interface CodexDeviceLogin {
+  /** @minimum 0 */
+  intervalSeconds: number
+  loginId: string
+  /** @minimum 0 */
+  timeoutSeconds: number
+  userCode: string
+  verificationUrl: string
+}

ui/lib/api/schemas/codexDeviceLoginStatus.ts

@@ -0,0 +1,15 @@
+/**
+ * Generated by orval v8.8.1 🍺
+ * Do not edit manually.
+ * OpenAPI spec version: 0.0.1
+ */
+import type { CodexAuthAttemptStatus } from './codexAuthAttemptStatus'
+
+export interface CodexDeviceLoginStatus {
+  /** @nullable */
+  accountId?: string | null
+  /** @nullable */
+  error?: string | null
+  loginId: string
+  status: CodexAuthAttemptStatus
+}

ui/lib/api/schemas/codexImageGenerationOptions.ts

@@ -0,0 +1,19 @@
+/**
+ * Generated by orval v8.8.1 🍺
+ * Do not edit manually.
+ * OpenAPI spec version: 0.0.1
+ */
+import type { PageId } from './pageId'
+
+export interface CodexImageGenerationOptions {
+  /** @nullable */
+  instructions?: string | null
+  /** @nullable */
+  model?: string | null
+  pageId: PageId
+  prompt: string
+  /** @nullable */
+  quality?: string | null
+  /** @nullable */
+  size?: string | null
+}

ui/lib/api/schemas/codexImageGenerationResponse.ts

@@ -0,0 +1,9 @@
+/**
+ * Generated by orval v8.8.1 🍺
+ * Do not edit manually.
+ * OpenAPI spec version: 0.0.1
+ */
+
+export interface CodexImageGenerationResponse {
+  operationId: string
+}

ui/lib/api/schemas/configPatch.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/createPagesFromPathsRequest.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/createPagesResponse.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/createProjectRequest.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/dataConfig.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/dataConfigPatch.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/downloadProgress.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/downloadStatus.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/engineCatalog.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/engineCatalogEntry.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/exportFormat.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/exportProjectRequest.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/fontFaceInfo.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/fontPrediction.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/fontSource.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/googleFontCatalog.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/googleFontEntry.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */

ui/lib/api/schemas/googleFontVariant.ts

@@ -1,5 +1,5 @@
 /**
- * Generated by orval v8.8.0 🍺
+ * Generated by orval v8.8.1 🍺
  * Do not edit manually.
  * OpenAPI spec version: 0.0.1
  */