From 11b0910b38faba086c50d95cdbead0d472394e6a Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 10 Jul 2025 19:46:12 +0100
Subject: [PATCH] wip: AI assistant in desktop editor

---
 apps/desktop/src-tauri/src/ai_vision.rs       |  89 ++
 apps/desktop/src-tauri/src/lib.rs             |   5 +-
 .../desktop/src/routes/editor/AIAssistant.tsx | 947 ++++++++++++++++++
 apps/desktop/src/routes/editor/Header.tsx     |   2 +
 apps/desktop/src/utils/tauri.ts               |  13 +
 apps/web/app/api/desktop/[...route]/root.ts   |  20 +-
 apps/web/app/api/desktop/ai-editor/route.ts   | 322 ++++++
 packages/ui-solid/src/auto-imports.d.ts       |   5 +
 8 files changed, 1393 insertions(+), 10 deletions(-)
 create mode 100644 apps/desktop/src-tauri/src/ai_vision.rs
 create mode 100644 apps/desktop/src/routes/editor/AIAssistant.tsx
 create mode 100644 apps/web/app/api/desktop/ai-editor/route.ts

diff --git a/apps/desktop/src-tauri/src/ai_vision.rs b/apps/desktop/src-tauri/src/ai_vision.rs
new file mode 100644
index 000000000..bafc639b5
--- /dev/null
+++ b/apps/desktop/src-tauri/src/ai_vision.rs
@@ -0,0 +1,89 @@
+use serde::{Deserialize, Serialize};
+use specta::Type;
+use std::path::Path;
+use tauri::AppHandle;
+
+#[derive(Debug, Clone, Serialize, Deserialize, Type)]
+pub struct FrameAnalysis {
+    pub timestamp: f64,
+    pub objects: Vec<DetectedObject>,
+    pub scene_description: String,
+    pub dominant_colors: Vec<String>,
+    pub motion_intensity: f64,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Type)]
+pub struct DetectedObject {
+    pub label: String,
+    pub confidence: f64,
+    pub bounding_box: BoundingBox,
+    pub attributes: Vec<String>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Type)]
+pub struct BoundingBox {
+    pub x: f64,
+    pub y: f64,
+    pub width: f64,
+    pub height: f64,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Type)]
+pub struct VideoContentAnalysis {
+    pub frames: Vec<FrameAnalysis>,
+    pub object_timelines: Vec<ObjectTimeline>,
+    pub scene_segments: Vec<SceneSegment>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Type)]
+pub struct ObjectTimeline {
+    pub label: String,
+    pub appearances: Vec<TimeRange>,
+    pub attributes: Vec<String>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Type)]
+pub struct TimeRange {
+    pub start: f64,
+    pub end: f64,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Type)]
+pub struct SceneSegment {
+    pub start: f64,
+    pub end: f64,
+    pub description: String,
+    pub tags: Vec<String>,
+}
+
+#[tauri::command]
+#[specta::specta]
+pub async fn analyze_video_content(
+    app: AppHandle,
+    video_path: String,
+    frame_interval: f64,
+) -> Result<VideoContentAnalysis, String> {
+    // This is a placeholder - in production you would:
+    // 1. Extract frames at intervals using ffmpeg
+    // 2. Send frames to vision API (OpenAI, local model, etc)
+    // 3. Aggregate results into timeline
+
+    // For now, return mock data to demonstrate the structure
+    Ok(VideoContentAnalysis {
+        frames: vec![],
+        object_timelines: vec![],
+        scene_segments: vec![],
+    })
+}
+
+#[tauri::command]
+#[specta::specta]
+pub async fn analyze_frame_batch(
+    app: AppHandle,
+    video_path: String,
+    timestamps: Vec<f64>,
+) -> Result<Vec<FrameAnalysis>, String> {
+    // Extract specific frames and analyze them
+    // This allows on-demand analysis of specific moments
+    Ok(vec![])
+}
diff --git a/apps/desktop/src-tauri/src/lib.rs b/apps/desktop/src-tauri/src/lib.rs
index 87fa91ed8..93e7dd021 100644
--- a/apps/desktop/src-tauri/src/lib.rs
+++ b/apps/desktop/src-tauri/src/lib.rs
@@ -1,3 +1,4 @@
+mod ai_vision;
 mod audio;
 mod audio_meter;
 mod auth;
@@ -1808,7 +1809,9 @@ pub async fn run(recording_logging_handle: LoggingHandle) {
             captions::download_whisper_model,
             captions::check_model_exists,
             captions::delete_whisper_model,
-            captions::export_captions_srt
+            captions::export_captions_srt,
+            ai_vision::analyze_video_content,
+            ai_vision::analyze_frame_batch
         ])
         .events(tauri_specta::collect_events![
             RecordingOptionsChanged,
diff --git a/apps/desktop/src/routes/editor/AIAssistant.tsx b/apps/desktop/src/routes/editor/AIAssistant.tsx
new file mode 100644
index 000000000..ab59c29ae
--- /dev/null
+++ b/apps/desktop/src/routes/editor/AIAssistant.tsx
@@ -0,0 +1,947 @@
+import {
+  createSignal,
+  createMemo,
+  For,
+  Show,
+  onMount,
+  createEffect,
+} from "solid-js";
+import { createStore, produce } from "solid-js/store";
+import { Button } from "@cap/ui-solid";
+import { cx } from "cva";
+import toast from "solid-toast";
+import { fetch } from "@tauri-apps/plugin-http";
+import {
+  commands,
+  type ProjectConfiguration,
+  type AspectRatio,
+} from "~/utils/tauri";
+import { clientEnv } from "~/utils/env";
+import { maybeProtectedHeaders } from "~/utils/web-api";
+import { useEditorContext } from "./context";
+import { convertFileSrc } from "@tauri-apps/api/core";
+import { resolveResource } from "@tauri-apps/api/path";
+
+// Available background presets
+const AVAILABLE_WALLPAPERS = [
+  // macOS wallpapers
+  "macOS/sequoia-dark",
+  "macOS/sequoia-light",
+  "macOS/sonoma-clouds",
+  "macOS/sonoma-dark",
+  "macOS/sonoma-evening",
+  "macOS/sonoma-fromabove",
+  "macOS/sonoma-horizon",
+  "macOS/sonoma-light",
+  "macOS/sonoma-river",
+  "macOS/ventura-dark",
+  "macOS/ventura-semi-dark",
+  "macOS/ventura",
+  // Blue wallpapers
+  "blue/1",
+  "blue/2",
+  "blue/3",
+  "blue/4",
+  "blue/5",
+  "blue/6",
+  // Purple wallpapers
+  "purple/1",
+  "purple/2",
+  "purple/3",
+  "purple/4",
+  "purple/5",
+  "purple/6",
+  // Dark wallpapers
+  "dark/1",
+  "dark/2",
+  "dark/3",
+  "dark/4",
+  "dark/5",
+  "dark/6",
+  // Orange wallpapers
+  "orange/1",
+  "orange/2",
+  "orange/3",
+  "orange/4",
+  "orange/5",
+  "orange/6",
+  "orange/7",
+  "orange/8",
+  "orange/9",
+];
+
+const AVAILABLE_COLORS = [
+  "#FF0000",
+  "#FF4500",
+  "#FF8C00",
+  "#FFD700",
+  "#FFFF00",
+  "#ADFF2F",
+  "#32CD32",
+  "#008000",
+  "#00CED1",
+  "#4785FF",
+  "#0000FF",
+  "#4B0082",
+  "#800080",
+  "#A9A9A9",
+  "#FFFFFF",
+  "#000000",
+];
+
+const AVAILABLE_GRADIENTS = [
+  { from: [15, 52, 67], to: [52, 232, 158] },
+  { from: [34, 193, 195], to: [253, 187, 45] },
+  { from: [29, 253, 251], to: [195, 29, 253] },
+  { from: [69, 104, 220], to: [176, 106, 179] },
+  { from: [106, 130, 251], to: [252, 92, 125] },
+  { from: [131, 58, 180], to: [253, 29, 29] },
+  { from: [249, 212, 35], to: [255, 78, 80] },
+  { from: [255, 94, 0], to: [255, 42, 104] },
+  { from: [255, 0, 150], to: [0, 204, 255] },
+  { from: [0, 242, 96], to: [5, 117, 230] },
+  { from: [238, 205, 163], to: [239, 98, 159] },
+  { from: [44, 62, 80], to: [52, 152, 219] },
+  { from: [168, 239, 255], to: [238, 205, 163] },
+  { from: [74, 0, 224], to: [143, 0, 255] },
+  { from: [252, 74, 26], to: [247, 183, 51] },
+  { from: [0, 255, 255], to: [255, 20, 147] },
+  { from: [255, 127, 0], to: [255, 255, 0] },
+  { from: [255, 0, 255], to: [0, 255, 0] },
+];
+
+// Map of aspect ratio strings to their dimensions
+const ASPECT_RATIO_MAP = {
+  wide: { width: 16, height: 9 },
+  vertical: { width: 9, height: 16 },
+  square: { width: 1, height: 1 },
+  classic: { width: 4, height: 3 },
+  tall: { width: 3, height: 4 },
+};
+
+// Function to convert aspect ratio object to predefined string
+function normalizeAspectRatio(aspectRatio: any): AspectRatio | null {
+  if (!aspectRatio) return null;
+
+  // If it's already a string and valid, return it
+  if (typeof aspectRatio === "string" && aspectRatio in ASPECT_RATIO_MAP) {
+    return aspectRatio as AspectRatio;
+  }
+
+  // If it's an object with width and height, try to match it to a predefined ratio
+  if (
+    aspectRatio &&
+    typeof aspectRatio === "object" &&
+    "width" in aspectRatio &&
+    "height" in aspectRatio
+  ) {
+    const ratio = aspectRatio.width / aspectRatio.height;
+
+    // Check each predefined aspect ratio
+    for (const [key, dimensions] of Object.entries(ASPECT_RATIO_MAP)) {
+      const predefinedRatio = dimensions.width / dimensions.height;
+      // Allow small tolerance for floating point comparison
+      if (Math.abs(ratio - predefinedRatio) < 0.01) {
+        return key as AspectRatio;
+      }
+    }
+  }
+
+  // If no match found, return null (auto)
+  return null;
+}
+
+// Temporary type definitions until TypeScript bindings are regenerated
+interface VideoContentAnalysis {
+  frames: FrameAnalysis[];
+  objectTimelines: ObjectTimeline[];
+  sceneSegments: SceneSegment[];
+}
+
+interface FrameAnalysis {
+  timestamp: number;
+  objects: DetectedObject[];
+  sceneDescription: string;
+  dominantColors: string[];
+  motionIntensity: number;
+}
+
+interface DetectedObject {
+  label: string;
+  confidence: number;
+  boundingBox: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+  attributes: string[];
+}
+
+interface ObjectTimeline {
+  label: string;
+  appearances: TimeRange[];
+  attributes: string[];
+}
+
+interface TimeRange {
+  start: number;
+  end: number;
+}
+
+interface SceneSegment {
+  start: number;
+  end: number;
+  description: string;
+  tags: string[];
+}
+
+interface Message {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  timestamp: Date;
+  status?: "pending" | "success" | "error";
+  appliedConfig?: ProjectConfiguration;
+}
+
+interface AIAssistantState {
+  isOpen: boolean;
+  isExpanded: boolean;
+  messages: Message[];
+  input: string;
+  isLoading: boolean;
+  configHistory: ProjectConfiguration[];
+  currentHistoryIndex: number;
+  videoContent: VideoContentAnalysis | null;
+  isAnalyzingVideo: boolean;
+}
+
+// Helper function for safe cloning
+function safeClone<T>(obj: T): T {
+  try {
+    return JSON.parse(JSON.stringify(obj));
+  } catch (error) {
+    console.error("Failed to clone object:", error);
+    return obj;
+  }
+}
+
+export function AIAssistant() {
+  const { project, setProject, editorInstance, meta } = useEditorContext();
+
+  const [state, setState] = createStore<AIAssistantState>({
+    isOpen: false,
+    isExpanded: false,
+    messages: [],
+    input: "",
+    isLoading: false,
+    configHistory: [],
+    currentHistoryIndex: -1,
+    videoContent: null,
+    isAnalyzingVideo: false,
+  });
+
+  let inputRef: HTMLTextAreaElement | undefined;
+  let messagesEndRef: HTMLDivElement | undefined;
+
+  // Initialize with the current config
+  onMount(() => {
+    setState("configHistory", [safeClone(project)]);
+    setState("currentHistoryIndex", 0);
+  });
+
+  // Auto-scroll to bottom when new messages are added
+  createEffect(() => {
+    if (state.messages.length && messagesEndRef) {
+      messagesEndRef.scrollIntoView({ behavior: "smooth" });
+    }
+  });
+
+  // Auto-focus input when overlay opens
+  createEffect(() => {
+    if (state.isOpen && inputRef) {
+      // Small delay to ensure the overlay is rendered
+      setTimeout(() => inputRef?.focus(), 150);
+    }
+  });
+
+  const canUndo = createMemo(() => state.currentHistoryIndex > 0);
+  const canRedo = createMemo(
+    () => state.currentHistoryIndex < state.configHistory.length - 1
+  );
+
+  const lastMessage = createMemo(() => {
+    const messages = state.messages;
+    if (messages.length === 0) return null;
+    // Find the last assistant message
+    for (let i = messages.length - 1; i >= 0; i--) {
+      if (messages[i].role === "assistant") {
+        return messages[i];
+      }
+    }
+    return null;
+  });
+
+  const addMessage = (
+    role: Message["role"],
+    content: string,
+    appliedConfig?: ProjectConfiguration
+  ) => {
+    const message: Message = {
+      id: crypto.randomUUID(),
+      role,
+      content,
+      timestamp: new Date(),
+      status: role === "user" ? "success" : "pending",
+      appliedConfig,
+    };
+    setState("messages", [...state.messages, message]);
+    return message.id;
+  };
+
+  const updateMessageStatus = (id: string, status: Message["status"]) => {
+    setState("messages", (messages) =>
+      messages.map((msg) => (msg.id === id ? { ...msg, status } : msg))
+    );
+  };
+
+  const resolveWallpaperPath = async (wallpaperId: string) => {
+    try {
+      const resolvedPath = await resolveResource(
+        `assets/backgrounds/${wallpaperId}.jpg`
+      );
+      return resolvedPath;
+    } catch (error) {
+      console.error("Failed to resolve wallpaper path:", error);
+      return wallpaperId; // Fallback to ID if resolution fails
+    }
+  };
+
+  const applyConfiguration = async (newConfig: ProjectConfiguration) => {
+    try {
+      // Normalize the aspect ratio before applying
+      const normalizedConfig = {
+        ...newConfig,
+        aspectRatio: normalizeAspectRatio(newConfig.aspectRatio),
+      };
+
+      // Resolve wallpaper paths if they are IDs
+      let resolvedConfig = normalizedConfig;
+      if (
+        normalizedConfig.background.source.type === "wallpaper" &&
+        normalizedConfig.background.source.path &&
+        AVAILABLE_WALLPAPERS.includes(normalizedConfig.background.source.path)
+      ) {
+        const resolvedPath = await resolveWallpaperPath(
+          normalizedConfig.background.source.path
+        );
+        resolvedConfig = {
+          ...normalizedConfig,
+          background: {
+            ...normalizedConfig.background,
+            source: {
+              ...normalizedConfig.background.source,
+              path: resolvedPath,
+            },
+          },
+        };
+      }
+
+      // Apply the resolved configuration
+      setProject(resolvedConfig);
+
+      // Save to backend
+      await commands.setProjectConfig(resolvedConfig);
+
+      // Add to history
+      setState(
+        "configHistory",
+        produce((history) => {
+          // Remove any history after current index (for redo functionality)
+          history.splice(state.currentHistoryIndex + 1);
+          // Add new config
+          history.push(safeClone(resolvedConfig));
+        })
+      );
+      setState("currentHistoryIndex", state.configHistory.length);
+
+      return true;
+    } catch (error) {
+      console.error("Failed to apply configuration:", error);
+      toast.error("Failed to apply changes");
+      return false;
+    }
+  };
+
+  const undo = async () => {
+    if (!canUndo()) return;
+
+    const newIndex = state.currentHistoryIndex - 1;
+    const config = state.configHistory[newIndex];
+
+    setProject(config);
+    await commands.setProjectConfig(config);
+    setState("currentHistoryIndex", newIndex);
+
+    toast("Reverted to previous configuration");
+  };
+
+  const redo = async () => {
+    if (!canRedo()) return;
+
+    const newIndex = state.currentHistoryIndex + 1;
+    const config = state.configHistory[newIndex];
+
+    setProject(config);
+    await commands.setProjectConfig(config);
+    setState("currentHistoryIndex", newIndex);
+
+    toast("Applied next configuration");
+  };
+
+  const analyzeVideo = async () => {
+    setState("isAnalyzingVideo", true);
+
+    try {
+      // TODO: Uncomment when TypeScript bindings are regenerated
+      // const content = await commands.analyzeVideoContent(
+      //   editorInstance.path,
+      //   2.0
+      // );
+
+      // For now, use mock data to demonstrate the UI
+      const content: VideoContentAnalysis = {
+        frames: [],
+        objectTimelines: [],
+        sceneSegments: [],
+      };
+
+      setState("videoContent", content);
+      toast.success("Video analysis complete!");
+    } catch (error) {
+      console.error("Failed to analyze video:", error);
+      toast.error("Failed to analyze video content");
+    } finally {
+      setState("isAnalyzingVideo", false);
+    }
+  };
+
+  const handleSubmit = async (e?: Event) => {
+    e?.preventDefault();
+
+    const input = state.input.trim();
+    if (!input || state.isLoading) return;
+
+    // Add user message
+    addMessage("user", input);
+    setState("input", "");
+    setState("isLoading", true);
+
+    // Create assistant message
+    const assistantMessageId = addMessage("assistant", "Thinking...");
+
+    try {
+      // Get auth headers if available
+      const authHeaders = await maybeProtectedHeaders();
+
+      // Build headers object
+      const headers: Record<string, string> = {
+        "Content-Type": "application/json",
+      };
+
+      if (authHeaders.authorization) {
+        headers.authorization = authHeaders.authorization;
+      }
+
+      // Call the API
+      const response = await fetch(
+        `${clientEnv.VITE_SERVER_URL}/api/desktop/ai-editor`,
+        {
+          method: "POST",
+          headers,
+          body: JSON.stringify({
+            prompt: input,
+            currentConfig: project,
+            editorContext: {
+              hasCamera: editorInstance.recordings.segments.some(
+                (s) => s.camera !== null
+              ),
+              hasAudio: editorInstance.recordings.segments.some(
+                (s) => s.mic !== null || s.system_audio !== null
+              ),
+              hasCursor:
+                meta().type === "multiple" &&
+                !!(meta() as any).segments[0].cursor,
+              duration: editorInstance.recordingDuration,
+            },
+            videoContent: state.videoContent,
+            conversationHistory: state.messages.map((msg) => ({
+              role: msg.role,
+              content: msg.content,
+            })),
+            availableBackgrounds: {
+              wallpapers: AVAILABLE_WALLPAPERS,
+              colors: AVAILABLE_COLORS,
+              gradients: AVAILABLE_GRADIENTS,
+            },
+          }),
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`API error: ${response.status}`);
+      }
+
+      const data = await response.json();
+
+      if (data.error) {
+        throw new Error(data.error);
+      }
+
+      // Update assistant message with the response
+      setState("messages", (messages) =>
+        messages.map((msg) =>
+          msg.id === assistantMessageId
+            ? {
+                ...msg,
+                content: data.explanation || "Changes applied successfully!",
+                status: "success" as const,
+              }
+            : msg
+        )
+      );
+
+      // Apply the new configuration
+      if (data.newConfig) {
+        const applied = await applyConfiguration(data.newConfig);
+        if (applied) {
+          // Update the message to include the applied config
+          setState("messages", (messages) =>
+            messages.map((msg) =>
+              msg.id === assistantMessageId
+                ? { ...msg, appliedConfig: data.newConfig }
+                : msg
+            )
+          );
+        }
+      }
+    } catch (error) {
+      console.error("AI Assistant error:", error);
+      updateMessageStatus(assistantMessageId, "error");
+      setState("messages", (messages) =>
+        messages.map((msg) =>
+          msg.id === assistantMessageId
+            ? {
+                ...msg,
+                content: "Sorry, I encountered an error. Please try again.",
+                status: "error" as const,
+              }
+            : msg
+        )
+      );
+      toast.error("Failed to process your request");
+    } finally {
+      setState("isLoading", false);
+      inputRef?.focus();
+    }
+  };
+
+  return (
+    <>
+      {/* AI Orb Button */}
+      <button
+        onClick={() => {
+          setState("isOpen", !state.isOpen);
+          if (!state.isOpen) {
+            // Opening the overlay, focus the input after a short delay
+            setTimeout(() => inputRef?.focus(), 100);
+          }
+        }}
+        class={cx(
+          "relative size-[34px] rounded-full transition-all duration-300 hover:scale-110",
+          state.isOpen && "scale-110",
+          state.configHistory.length > 1 && "ring-2 ring-white/20"
+        )}
+        style={{
+          background:
+            "radial-gradient(circle at 30% 30%, #d0eefc 0%, #85e4f8 35%, #3c90e6 100%)",
+          "box-shadow":
+            "0 0 25px rgba(133, 228, 248, 0.6), inset 0 0 20px rgba(208, 238, 252, 0.4)",
+        }}
+      >
+        {/* Inner glow overlay */}
+        <div
+          class="absolute inset-0 rounded-full opacity-90"
+          style={{
+            background:
+              "radial-gradient(circle at 40% 40%, rgba(208, 238, 252, 0.8) 0%, transparent 60%)",
+          }}
+        />
+
+        {/* Center highlight */}
+        <div
+          class="absolute top-[15%] left-[15%] w-[30%] h-[30%] rounded-full opacity-80"
+          style={{
+            background:
+              "radial-gradient(circle at center, rgba(255, 255, 255, 0.9) 0%, rgba(208, 238, 252, 0.6) 50%, transparent 100%)",
+            filter: "blur(1px)",
+          }}
+        />
+
+        {/* Animated sparkles */}
+        <div class="absolute inset-0 rounded-full overflow-hidden">
+          <div class="sparkle sparkle-1" />
+          <div class="sparkle sparkle-2" />
+          <div class="sparkle sparkle-3" />
+          <div class="sparkle sparkle-4" />
+          <div class="sparkle sparkle-5" />
+        </div>
+      </button>
+
+      {/* AI Assistant Overlay */}
+      <Show when={state.isOpen}>
+        {/* Full Screen Click Handler (behind everything) */}
+        <div
+          class="fixed inset-0 z-[39] animate-in fade-in duration-200"
+          onClick={() => setState("isOpen", false)}
+        />
+
+        {/* Timeline Darkening Backdrop */}
+        <div class="fixed bottom-0 left-0 right-0 h-[120px] bg-gradient-to-t from-black/60 to-transparent pointer-events-none z-40 animate-in fade-in duration-300" />
+
+        {/* AI Assistant Panel */}
+        <div
+          class={cx(
+            "fixed z-50 transition-all duration-300 ease-out",
+            state.isExpanded
+              ? "bottom-[80px] left-1/2 -translate-x-1/2 w-[600px] max-h-[calc(100vh-180px)]"
+              : "bottom-[80px] left-1/2 -translate-x-1/2 w-[400px] max-h-[300px]"
+          )}
+        >
+          <div
+            class={cx(
+              "bg-gray-1 dark:bg-gray-2 rounded-2xl shadow-2xl flex flex-col overflow-hidden border-4 border-gray-3",
+              "animate-in fade-in-0 slide-in-from-bottom-4 duration-300",
+              "shadow-[0_0_40px_rgba(0,0,0,0.3)]"
+            )}
+          >
+            {/* Header */}
+            <div class="flex items-center justify-between p-3 border-b border-gray-3">
+              <div class="flex items-center gap-2">
+                <div
+                  class="size-5 rounded-full relative"
+                  style={{
+                    background:
+                      "radial-gradient(circle at 30% 30%, #d0eefc 0%, #85e4f8 35%, #3c90e6 100%)",
+                    "box-shadow":
+                      "0 0 15px rgba(133, 228, 248, 0.4), inset 0 0 10px rgba(208, 238, 252, 0.3)",
+                  }}
+                >
+                  <div
+                    class="absolute inset-0 rounded-full opacity-90"
+                    style={{
+                      background:
+                        "radial-gradient(circle at 40% 40%, rgba(208, 238, 252, 0.8) 0%, transparent 60%)",
+                    }}
+                  />
+                  <div
+                    class="absolute top-[15%] left-[15%] w-[30%] h-[30%] rounded-full opacity-80"
+                    style={{
+                      background:
+                        "radial-gradient(circle at center, rgba(255, 255, 255, 0.9) 0%, rgba(208, 238, 252, 0.6) 50%, transparent 100%)",
+                      filter: "blur(0.5px)",
+                    }}
+                  />
+                </div>
+                <h3 class="text-sm font-medium">Cap AI</h3>
+              </div>
+              <div class="flex items-center gap-1">
+                <Show when={canUndo() || canRedo()}>
+                  <button
+                    onClick={undo}
+                    disabled={!canUndo()}
+                    class="p-1.5 rounded-lg hover:bg-gray-3 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                  >
+                    <IconCapUndo class="size-3.5" />
+                  </button>
+                  <button
+                    onClick={redo}
+                    disabled={!canRedo()}
+                    class="p-1.5 rounded-lg hover:bg-gray-3 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                  >
+                    <IconCapRedo class="size-3.5" />
+                  </button>
+                </Show>
+                <button
+                  onClick={() => setState("isExpanded", !state.isExpanded)}
+                  class="p-1.5 rounded-lg hover:bg-gray-3 transition-colors"
+                >
+                  <Show
+                    when={state.isExpanded}
+                    fallback={<IconCapEnlarge class="size-3.5" />}
+                  >
+                    <IconCapChevronDown class="size-3.5" />
+                  </Show>
+                </button>
+                <button
+                  onClick={() => setState("isOpen", false)}
+                  class="p-1.5 rounded-lg hover:bg-gray-3 transition-colors"
+                >
+                  <IconCapCircleX class="size-3.5" />
+                </button>
+              </div>
+            </div>
+
+            {/* Content */}
+            <div
+              class={cx(
+                "flex-1 overflow-y-auto",
+                state.isExpanded ? "p-4" : "p-3"
+              )}
+            >
+              <Show
+                when={state.isExpanded}
+                fallback={
+                  // Compact view - only show last message
+                  <Show when={lastMessage()}>
+                    <div
+                      class={cx(
+                        "text-sm rounded-lg p-2.5",
+                        lastMessage()!.status === "error"
+                          ? "bg-red-5 text-red-11"
+                          : "bg-gray-3 text-gray-12"
+                      )}
+                    >
+                      <Show
+                        when={
+                          lastMessage()!.status === "pending" &&
+                          lastMessage()!.role === "assistant"
+                        }
+                      >
+                        <div class="flex items-center gap-2">
+                          <IconLucideLoaderCircle class="w-4 h-4 animate-spin" />
+                          <span>Applying changes...</span>
+                        </div>
+                      </Show>
+                      <Show when={lastMessage()!.status !== "pending"}>
+                        <p class="whitespace-pre-wrap line-clamp-3">
+                          {lastMessage()!.content}
+                        </p>
+                      </Show>
+                    </div>
+                  </Show>
+                }
+              >
+                {/* Expanded view - show all messages */}
+                <div class="space-y-3">
+                  <Show
+                    when={state.messages.length > 0}
+                    fallback={
+                      <div class="text-sm text-gray-11 space-y-3">
+                        <p class="font-medium">
+                          How can I help you edit your video?
+                        </p>
+                        <Show when={!state.videoContent}>
+                          <div class="bg-blue-5/20 border border-blue-7 rounded-lg p-3">
+                            <p class="text-sm mb-2">
+                              For content-aware editing, analyze your video
+                              first:
+                            </p>
+                            <Button
+                              onClick={analyzeVideo}
+                              disabled={state.isAnalyzingVideo}
+                              size="sm"
+                              class="w-full"
+                            >
+                              <Show
+                                when={state.isAnalyzingVideo}
+                                fallback="Analyze Video Content"
+                              >
+                                <IconLucideLoaderCircle class="w-4 h-4 animate-spin mr-2" />
+                                Analyzing...
+                              </Show>
+                            </Button>
+                          </div>
+                        </Show>
+                        <ul class="space-y-1.5 text-xs">
+                          <li>• "Make the background blue with a gradient"</li>
+                          <li>• "Move the camera to the top right"</li>
+                          <li>• "Add padding and rounded corners"</li>
+                          <li>• "Enable captions with larger font"</li>
+                        </ul>
+                      </div>
+                    }
+                  >
+                    <For each={state.messages}>
+                      {(message) => (
+                        <div
+                          class={cx(
+                            "flex gap-2",
+                            message.role === "user"
+                              ? "justify-end"
+                              : "justify-start"
+                          )}
+                        >
+                          <div
+                            class={cx(
+                              "max-w-[80%] rounded-lg px-3 py-2 text-sm",
+                              message.role === "user"
+                                ? "bg-blue-9 text-white"
+                                : "bg-gray-3 text-gray-12",
+                              message.status === "error" &&
+                                "bg-red-5 text-red-11"
+                            )}
+                          >
+                            <Show
+                              when={
+                                message.status === "pending" &&
+                                message.role === "assistant"
+                              }
+                            >
+                              <div class="flex items-center gap-2">
+                                <IconLucideLoaderCircle class="w-4 h-4 animate-spin" />
+                                <span>Applying changes...</span>
+                              </div>
+                            </Show>
+                            <Show
+                              when={
+                                message.status !== "pending" ||
+                                message.role === "user"
+                              }
+                            >
+                              <p class="whitespace-pre-wrap">
+                                {message.content}
+                              </p>
+                            </Show>
+                            <Show when={message.appliedConfig}>
+                              <p class="text-xs mt-1 opacity-70">
+                                ✓ Changes applied
+                              </p>
+                            </Show>
+                          </div>
+                        </div>
+                      )}
+                    </For>
+                    <div ref={messagesEndRef} />
+                  </Show>
+                </div>
+              </Show>
+            </div>
+
+            {/* Input */}
+            <form onSubmit={handleSubmit} class="p-3 border-t border-gray-3">
+              <div class="flex gap-2 items-end">
+                <textarea
+                  ref={inputRef}
+                  value={state.input}
+                  onInput={(e) => setState("input", e.currentTarget.value)}
+                  onKeyDown={(e) => {
+                    // Cmd/Ctrl + Enter for new line
+                    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                      // Allow default behavior for new line
+                      return;
+                    }
+                    // Enter to send
+                    if (e.key === "Enter" && !e.shiftKey) {
+                      e.preventDefault();
+                      handleSubmit();
+                    }
+                  }}
+                  placeholder="Describe what you want to change..."
+                  disabled={state.isLoading}
+                  class="flex-1 px-3 py-2 bg-gray-2 dark:bg-gray-3 border border-gray-9 rounded-lg resize-none focus:outline-none text-sm min-h-[36px] max-h-[80px]"
+                  rows="1"
+                />
+              </div>
+              <div class="flex items-center justify-between mt-2">
+                <p class="text-xs text-gray-11">
+                  Press Enter to send,{" "}
+                  {window.navigator.platform.includes("Mac") ? "⌘" : "Ctrl"}
+                  +Enter for new line
+                </p>
+                <Show when={state.isLoading}>
+                  <div class="flex items-center gap-2 text-xs text-gray-11">
+                    <IconLucideLoaderCircle class="w-3 h-3 animate-spin" />
+                  </div>
+                </Show>
+              </div>
+            </form>
+          </div>
+        </div>
+      </Show>
+
+      {/* Add subtle glow animation */}
+      <style>{`
+        .sparkle {
+          position: absolute;
+          background: rgba(255, 255, 255, 0.9);
+          border-radius: 50%;
+          animation: sparkle 2s ease-in-out infinite;
+        }
+        
+        .sparkle-1 {
+          width: 2px;
+          height: 2px;
+          top: 25%;
+          left: 60%;
+          animation-delay: 0s;
+          animation-duration: 2.5s;
+        }
+        
+        .sparkle-2 {
+          width: 1.5px;
+          height: 1.5px;
+          top: 50%;
+          left: 30%;
+          animation-delay: 0.8s;
+          animation-duration: 3s;
+        }
+        
+        .sparkle-3 {
+          width: 3px;
+          height: 3px;
+          top: 70%;
+          left: 70%;
+          animation-delay: 1.2s;
+          animation-duration: 2.2s;
+        }
+        
+        .sparkle-4 {
+          width: 1px;
+          height: 1px;
+          top: 40%;
+          left: 80%;
+          animation-delay: 1.8s;
+          animation-duration: 2.8s;
+        }
+        
+        .sparkle-5 {
+          width: 2px;
+          height: 2px;
+          top: 80%;
+          left: 45%;
+          animation-delay: 2.3s;
+          animation-duration: 3.5s;
+        }
+        
+        @keyframes sparkle {
+          0%, 100% {
+            opacity: 0;
+            transform: scale(0.5) translateY(0px);
+          }
+          50% {
+            opacity: 1;
+            transform: scale(1) translateY(-2px);
+          }
+        }
+
+        /* Ensure timeline controls remain interactive */
+        .timeline-controls {
+          position: relative;
+          z-index: 41;
+        }
+      `}</style>
+    </>
+  );
+}
diff --git a/apps/desktop/src/routes/editor/Header.tsx b/apps/desktop/src/routes/editor/Header.tsx
index 89f6d3a20..af6317b40 100644
--- a/apps/desktop/src/routes/editor/Header.tsx
+++ b/apps/desktop/src/routes/editor/Header.tsx
@@ -20,6 +20,7 @@ import Tooltip from "~/components/Tooltip";
 import { trackEvent } from "~/utils/analytics";
 import { initializeTitlebar } from "~/utils/titlebar-state";
 import { useEditorContext } from "./context";
+import { AIAssistant } from "./AIAssistant";
 import PresetsDropdown from "./PresetsDropdown";
 import ShareButton from "./ShareButton";
 import { EditorButton } from "./ui";
@@ -177,6 +178,7 @@ export function Header() {
         <Show when={customDomain.data}>
           <ShareButton />
         </Show>
+        <AIAssistant />
         <Button
           variant="lightdark"
           class={cx("flex gap-2 justify-center")}
diff --git a/apps/desktop/src/utils/tauri.ts b/apps/desktop/src/utils/tauri.ts
index 00722d98d..9b6982e51 100644
--- a/apps/desktop/src/utils/tauri.ts
+++ b/apps/desktop/src/utils/tauri.ts
@@ -238,6 +238,12 @@ async deleteWhisperModel(modelPath: string) : Promise<null> {
  */
 async exportCaptionsSrt(videoId: string) : Promise<string | null> {
     return await TAURI_INVOKE("export_captions_srt", { videoId });
+},
+async analyzeVideoContent(videoPath: string, frameInterval: number) : Promise<VideoContentAnalysis> {
+    return await TAURI_INVOKE("analyze_video_content", { videoPath, frameInterval });
+},
+async analyzeFrameBatch(videoPath: string, timestamps: number[]) : Promise<FrameAnalysis[]> {
+    return await TAURI_INVOKE("analyze_frame_batch", { videoPath, timestamps });
 }
 }
 
@@ -301,6 +307,7 @@ export type AuthStore = { secret: AuthSecret; user_id: string | null; plan: Plan
 export type AuthenticationInvalid = null
 export type BackgroundConfiguration = { source: BackgroundSource; blur: number; padding: number; rounding: number; inset: number; crop: Crop | null; shadow?: number; advancedShadow?: ShadowConfiguration | null }
 export type BackgroundSource = { type: "wallpaper"; path: string | null } | { type: "image"; path: string | null } | { type: "color"; value: [number, number, number] } | { type: "gradient"; from: [number, number, number]; to: [number, number, number]; angle?: number }
+export type BoundingBox = { x: number; y: number; width: number; height: number }
 export type Bounds = { x: number; y: number; width: number; height: number }
 export type Camera = { hide: boolean; mirror: boolean; position: CameraPosition; size: number; zoom_size: number | null; rounding?: number; shadow?: number; advanced_shadow?: ShadowConfiguration | null; shape?: CameraShape }
 export type CameraPosition = { x: CameraXPosition; y: CameraYPosition }
@@ -323,12 +330,14 @@ export type CursorConfiguration = { hide?: boolean; hideWhenIdle: boolean; size:
 export type CursorMeta = { imagePath: string; hotspot: XY<number> }
 export type CursorType = "pointer" | "circle"
 export type Cursors = { [key in string]: string } | { [key in string]: CursorMeta }
+export type DetectedObject = { label: string; confidence: number; bounding_box: BoundingBox; attributes: string[] }
 export type DownloadProgress = { progress: number; message: string }
 export type EditorStateChanged = { playhead_position: number }
 export type ExportCompression = "Minimal" | "Social" | "Web" | "Potato"
 export type ExportEstimates = { duration_seconds: number; estimated_time_seconds: number; estimated_size_mb: number }
 export type ExportSettings = ({ format: "Mp4" } & Mp4ExportSettings) | ({ format: "Gif" } & GifExportSettings)
 export type Flags = { captions: boolean }
+export type FrameAnalysis = { timestamp: number; objects: DetectedObject[]; scene_description: string; dominant_colors: string[]; motion_intensity: number }
 export type FramesRendered = { renderedCount: number; totalFrames: number; type: "FramesRendered" }
 export type GeneralSettingsStore = { instanceId?: string; uploadIndividualFiles?: boolean; hideDockIcon?: boolean; hapticsEnabled?: boolean; autoCreateShareableLink?: boolean; enableNotifications?: boolean; disableAutoOpenLinks?: boolean; hasCompletedStartup?: boolean; theme?: AppTheme; commercialLicense?: CommercialLicense | null; lastVersion?: string | null; windowTransparency?: boolean; postStudioRecordingBehaviour?: PostStudioRecordingBehaviour; mainWindowRecordingStartBehaviour?: MainWindowRecordingStartBehaviour; customCursorCapture?: boolean; serverUrl?: string; 
 /**
@@ -354,6 +363,7 @@ export type NewStudioRecordingAdded = { path: string }
 export type OSPermission = "screenRecording" | "camera" | "microphone" | "accessibility"
 export type OSPermissionStatus = "notNeeded" | "empty" | "granted" | "denied"
 export type OSPermissionsCheck = { screenRecording: OSPermissionStatus; microphone: OSPermissionStatus; camera: OSPermissionStatus; accessibility: OSPermissionStatus }
+export type ObjectTimeline = { label: string; appearances: TimeRange[]; attributes: string[] }
 export type Plan = { upgraded: boolean; manual: boolean; last_checked: number }
 export type Platform = "MacOS" | "Windows"
 export type PostStudioRecordingBehaviour = "openEditor" | "showOverlay"
@@ -373,6 +383,7 @@ export type RequestNewScreenshot = null
 export type RequestOpenSettings = { page: string }
 export type RequestStartRecording = null
 export type S3UploadMeta = { id: string }
+export type SceneSegment = { start: number; end: number; description: string; tags: string[] }
 export type ScreenCaptureTarget = { variant: "window"; id: number } | { variant: "screen"; id: number } | { variant: "area"; screen: number; bounds: Bounds }
 export type SegmentRecordings = { display: Video; camera: Video | null; mic: Audio | null; system_audio: Audio | null }
 export type SerializedEditorInstance = { framesSocketUrl: string; recordingDuration: number; savedProjectConfig: ProjectConfiguration; recordings: ProjectRecordingsMeta; path: string }
@@ -383,12 +394,14 @@ export type SingleSegment = { display: VideoMeta; camera?: VideoMeta | null; aud
 export type StartRecordingInputs = { capture_target: ScreenCaptureTarget; capture_system_audio?: boolean; mode: RecordingMode }
 export type StereoMode = "stereo" | "monoL" | "monoR"
 export type StudioRecordingMeta = { segment: SingleSegment } | { inner: MultipleSegments }
+export type TimeRange = { start: number; end: number }
 export type TimelineConfiguration = { segments: TimelineSegment[]; zoomSegments: ZoomSegment[] }
 export type TimelineSegment = { recordingSegment?: number; timescale: number; start: number; end: number }
 export type UploadMode = { Initial: { pre_created_video: VideoUploadInfo | null } } | "Reupload"
 export type UploadProgress = { progress: number }
 export type UploadResult = { Success: string } | "NotAuthenticated" | "PlanCheckFailed" | "UpgradeRequired"
 export type Video = { duration: number; width: number; height: number; fps: number; start_time: number }
+export type VideoContentAnalysis = { frames: FrameAnalysis[]; object_timelines: ObjectTimeline[]; scene_segments: SceneSegment[] }
 export type VideoMeta = { path: string; fps?: number; 
 /**
  * unix time of the first frame
diff --git a/apps/web/app/api/desktop/[...route]/root.ts b/apps/web/app/api/desktop/[...route]/root.ts
index 5fe4b172d..deafa5640 100644
--- a/apps/web/app/api/desktop/[...route]/root.ts
+++ b/apps/web/app/api/desktop/[...route]/root.ts
@@ -12,16 +12,16 @@ import { withAuth } from "../../utils";
 
 export const app = new Hono().use(withAuth);
 
+// Define schemas separately to avoid deep type instantiation
+const feedbackSchema = z.object({
+  feedback: z.string(),
+  os: z.union([z.literal("macos"), z.literal("windows")]).optional(),
+  version: z.string().optional(),
+});
+
 app.post(
   "/feedback",
-  zValidator(
-    "form",
-    z.object({
-      feedback: z.string(),
-      os: z.union([z.literal("macos"), z.literal("windows")]).optional(),
-      version: z.string().optional(),
-    })
-  ),
+  zValidator("form", feedbackSchema),
   async (c) => {
     const { feedback, os, version } = c.req.valid("form");
 
@@ -142,9 +142,11 @@ app.get("/plan", async (c) => {
   });
 });
 
+const subscribeSchema = z.object({ priceId: z.string() });
+
 app.post(
   "/subscribe",
-  zValidator("json", z.object({ priceId: z.string() })),
+  zValidator("json", subscribeSchema),
   async (c) => {
     const { priceId } = c.req.valid("json");
     const user = c.get("user");
diff --git a/apps/web/app/api/desktop/ai-editor/route.ts b/apps/web/app/api/desktop/ai-editor/route.ts
new file mode 100644
index 000000000..17823c1a3
--- /dev/null
+++ b/apps/web/app/api/desktop/ai-editor/route.ts
@@ -0,0 +1,322 @@
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+
+// Define the configuration schema based on the ProjectConfiguration type
+const ProjectConfigSchema = z.object({
+  aspectRatio: z.enum(["wide", "vertical", "square", "classic", "tall"]).nullable(),
+  background: z.object({
+    source: z.union([
+      z.object({ type: z.literal("wallpaper"), path: z.string().nullable() }),
+      z.object({ type: z.literal("image"), path: z.string().nullable() }),
+      z.object({ type: z.literal("color"), value: z.tuple([z.number(), z.number(), z.number()]) }),
+      z.object({ 
+        type: z.literal("gradient"), 
+        from: z.tuple([z.number(), z.number(), z.number()]),
+        to: z.tuple([z.number(), z.number(), z.number()]),
+        angle: z.number().optional()
+      }),
+    ]),
+    blur: z.number(),
+    padding: z.number(),
+    rounding: z.number(),
+    inset: z.number(),
+    crop: z.object({
+      position: z.object({ x: z.number(), y: z.number() }),
+      size: z.object({ x: z.number(), y: z.number() }),
+    }).nullable(),
+    shadow: z.number().optional(),
+    advancedShadow: z.object({
+      size: z.number(),
+      opacity: z.number(),
+      blur: z.number(),
+    }).nullable().optional(),
+  }),
+  camera: z.object({
+    hide: z.boolean(),
+    mirror: z.boolean(),
+    position: z.object({ x: z.string(), y: z.string() }),
+    size: z.number(),
+    zoom_size: z.number().nullable(),
+    rounding: z.number().optional(),
+    shadow: z.number().optional(),
+    advanced_shadow: z.object({
+      size: z.number(),
+      opacity: z.number(),
+      blur: z.number(),
+    }).nullable().optional(),
+    shape: z.enum(["square", "source"]).optional(),
+  }),
+  audio: z.object({
+    mute: z.boolean(),
+    improve: z.boolean(),
+    micVolumeDb: z.number().optional(),
+    micStereoMode: z.enum(["stereo", "monoL", "monoR"]).optional(),
+    systemVolumeDb: z.number().optional(),
+  }),
+  cursor: z.object({
+    hide: z.boolean().optional(),
+    hideWhenIdle: z.boolean(),
+    size: z.number(),
+    type: z.string(),
+    animationStyle: z.string(),
+    tension: z.number(),
+    mass: z.number(),
+    friction: z.number(),
+    raw: z.boolean().optional(),
+    motionBlur: z.number().optional(),
+  }),
+  hotkeys: z.object({
+    show: z.boolean(),
+  }),
+  timeline: z.any().optional(),
+  captions: z.any().optional(),
+});
+
+const RequestSchema = z.object({
+  prompt: z.string(),
+  currentConfig: ProjectConfigSchema,
+  editorContext: z.object({
+    hasCamera: z.boolean(),
+    hasAudio: z.boolean(),
+    hasCursor: z.boolean(),
+    duration: z.number(),
+  }),
+  conversationHistory: z.array(z.object({
+    role: z.enum(["user", "assistant"]),
+    content: z.string(),
+  })),
+  availableBackgrounds: z.object({
+    wallpapers: z.array(z.string()),
+    colors: z.array(z.string()),
+    gradients: z.array(z.object({
+      from: z.tuple([z.number(), z.number(), z.number()]),
+      to: z.tuple([z.number(), z.number(), z.number()]),
+    })),
+  }).optional(),
+});
+
+// Function to create system prompt with available backgrounds
+function createSystemPrompt(availableBackgrounds?: { wallpapers: string[], colors: string[], gradients: Array<{ from: number[], to: number[] }> }) {
+  let backgroundSection = `BACKGROUND:
+- Source must be one of these exact structures:
+  - {type: "wallpaper", path: string|null}
+  - {type: "image", path: string|null}
+  - {type: "color", value: [r, g, b]} where r,g,b are 0-255
+  - {type: "gradient", from: [r,g,b], to: [r,g,b], angle?: number}`;
+
+  if (availableBackgrounds) {
+    backgroundSection += `\n\nAvailable preset backgrounds:`;
+    
+    if (availableBackgrounds.wallpapers.length > 0) {
+      // Group wallpapers by theme
+      const macOSWallpapers = availableBackgrounds.wallpapers.filter(w => w.startsWith('macOS/'));
+      const blueWallpapers = availableBackgrounds.wallpapers.filter(w => w.startsWith('blue/'));
+      const purpleWallpapers = availableBackgrounds.wallpapers.filter(w => w.startsWith('purple/'));
+      const darkWallpapers = availableBackgrounds.wallpapers.filter(w => w.startsWith('dark/'));
+      const orangeWallpapers = availableBackgrounds.wallpapers.filter(w => w.startsWith('orange/'));
+      
+      backgroundSection += `\n- Wallpapers by theme:`;
+      backgroundSection += `\n  • macOS: ${macOSWallpapers.join(', ')}`;
+      backgroundSection += `\n  • Blue: ${blueWallpapers.length} wallpapers (blue/1 to blue/6)`;
+      backgroundSection += `\n  • Purple: ${purpleWallpapers.length} wallpapers (purple/1 to purple/6)`;
+      backgroundSection += `\n  • Dark: ${darkWallpapers.length} wallpapers (dark/1 to dark/6)`;
+      backgroundSection += `\n  • Orange: ${orangeWallpapers.length} wallpapers (orange/1 to orange/9)`;
+      backgroundSection += `\n  When user asks for a specific background, use the exact path. Examples:`;
+      backgroundSection += `\n  - "Sequoia dark" → "macOS/sequoia-dark"`;
+      backgroundSection += `\n  - "Sonoma" → "macOS/sonoma-light" or ask which variant`;
+      backgroundSection += `\n  - "blue background" → suggest options like "blue/1", "blue/2", etc.`;
+    }
+    
+    if (availableBackgrounds.colors.length > 0) {
+      backgroundSection += `\n- Preset colors: ${availableBackgrounds.colors.slice(0, 10).join(', ')}... (${availableBackgrounds.colors.length} total)`;
+      backgroundSection += `\n  When user mentions a color by name, convert to RGB:`;
+      backgroundSection += `\n  - "red" → [255, 0, 0]`;
+      backgroundSection += `\n  - "blue" → [0, 0, 255] or [71, 133, 255] for lighter blue`;
+      backgroundSection += `\n  - "purple" → [128, 0, 128]`;
+      backgroundSection += `\n  Or use exact hex values if provided: #FF0000 → [255, 0, 0]`;
+    }
+    
+    if (availableBackgrounds.gradients.length > 0) {
+      backgroundSection += `\n- Preset gradients: ${availableBackgrounds.gradients.length} beautiful gradients`;
+      backgroundSection += `\n  Popular options:`;
+      backgroundSection += `\n  - Dark Blue to Teal: {from: [15, 52, 67], to: [52, 232, 158]}`;
+      backgroundSection += `\n  - Purple to Red: {from: [131, 58, 180], to: [253, 29, 29]}`;
+      backgroundSection += `\n  - Cyan to Purple: {from: [29, 253, 251], to: [195, 29, 253]}`;
+      backgroundSection += `\n  Default angle is 90 degrees (left to right)`;
+    }
+  }
+
+  backgroundSection += `\n- Blur: 0-100 (amount of background blur)
+- Padding: 0-200 (space around the content)
+- Rounding: 0-100 (corner radius)
+- Inset: 0-100 (inner spacing)
+- Shadow: 0-100 (shadow intensity)
+- Crop: {position: {x: number, y: number}, size: {x: number, y: number}} or null`;
+
+  return `You are an AI assistant for Cap, a video editor. You help users modify their video configuration by interpreting their natural language requests and returning transformed JSON configurations.
+
+CRITICAL FORMAT REQUIREMENTS:
+- aspectRatio must be one of these exact strings: "wide", "vertical", "square", "classic", "tall", or null
+- NEVER return aspectRatio as an object with width/height properties
+- background.source must follow the exact type structure (type + properties)
+- All numeric values must be numbers, not strings
+
+Available configuration options you can modify:
+
+ASPECT RATIO:
+- Must be one of these exact strings: "wide", "vertical", "square", "classic", "tall", or null
+- "wide" = 16:9 ratio
+- "vertical" = 9:16 ratio  
+- "square" = 1:1 ratio
+- "classic" = 4:3 ratio
+- "tall" = 3:4 ratio
+- null = auto (maintain original aspect ratio)
+
+${backgroundSection}
+
+CAMERA:
+- Hide: true/false
+- Mirror: true/false
+- Position: {x: "left"|"center"|"right", y: "top"|"bottom"}
+- Size: 0-100 (percentage of screen)
+- Shape: "square" or "source"
+- Rounding: 0-100 (corner radius)
+- Shadow: 0-100 (shadow intensity)
+
+AUDIO:
+- Mute: true/false
+- Microphone volume: -30 to 10 dB
+- System audio volume: -30 to 10 dB
+- Stereo mode: "stereo", "monoL", or "monoR"
+
+CURSOR:
+- Hide: true/false
+- Size: 20-300 (percentage)
+- Smooth movement settings: tension (1-500), friction (0-50), mass (0.1-10)
+- Raw mode: true/false (disables smoothing)
+
+When the user asks for changes:
+1. Parse their request carefully
+2. Only modify the specific properties they mention
+3. Keep all other settings unchanged
+4. Return a brief explanation of what was changed
+5. Be helpful and suggest related options they might want to adjust
+
+Examples:
+- "Make the background blue" → Change background.source to {type: "color", value: [0, 100, 255]}
+- "Use Sequoia dark background" → Change background.source to {type: "wallpaper", path: "macOS/sequoia-dark"}
+- "Add padding around the video" → Increase background.padding value
+- "Move camera to top right" → Change camera.position to {x: "right", y: "top"}
+- "Change aspect ratio to square" → Change aspectRatio to "square"
+- "Set 16:9 aspect ratio" → Change aspectRatio to "wide"
+- "Make it vertical" → Change aspectRatio to "vertical"`;
+}
+
+async function callOpenAI(messages: Array<{ role: string; content: string }>, systemPrompt: string) {
+  const apiKey = process.env.OPENAI_API_KEY;
+  if (!apiKey) {
+    throw new Error("OpenAI API key not configured");
+  }
+
+  const response = await fetch("https://api.openai.com/v1/chat/completions", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": `Bearer ${apiKey}`,
+    },
+    body: JSON.stringify({
+      model: "gpt-4o-mini",
+      messages: [
+        { role: "system", content: systemPrompt },
+        ...messages,
+      ],
+      temperature: 0.7,
+      max_tokens: 1000,
+      response_format: { type: "json_object" },
+    }),
+  });
+
+  if (!response.ok) {
+    const error = await response.text();
+    throw new Error(`OpenAI API error: ${error}`);
+  }
+
+  const data = await response.json();
+  return data.choices[0].message.content;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const validation = RequestSchema.safeParse(body);
+
+    if (!validation.success) {
+      return NextResponse.json(
+        { error: "Invalid request data", details: validation.error },
+        { status: 400 }
+      );
+    }
+
+    const { prompt, currentConfig, editorContext, conversationHistory, availableBackgrounds } = validation.data;
+
+    // Create system prompt with available backgrounds
+    const systemPrompt = createSystemPrompt(availableBackgrounds);
+
+    // Build the conversation for the AI
+    const messages = [
+      ...conversationHistory,
+      {
+        role: "user" as const,
+        content: `Current configuration: ${JSON.stringify(currentConfig, null, 2)}
+
+Editor context:
+- Has camera: ${editorContext.hasCamera}
+- Has audio: ${editorContext.hasAudio}
+- Has cursor: ${editorContext.hasCursor}
+- Duration: ${editorContext.duration} seconds
+
+User request: ${prompt}
+
+Please respond with a JSON object containing:
+{
+  "explanation": "Brief explanation of what was changed",
+  "newConfig": <the updated configuration object>
+}`,
+      },
+    ];
+
+    // Call OpenAI
+    const aiResponse = await callOpenAI(messages, systemPrompt);
+    
+    try {
+      const parsed = JSON.parse(aiResponse);
+      
+      // Validate the new configuration
+      const configValidation = ProjectConfigSchema.safeParse(parsed.newConfig);
+      if (!configValidation.success) {
+        console.error("Invalid configuration from AI:", configValidation.error);
+        return NextResponse.json(
+          { error: "AI generated invalid configuration", details: configValidation.error.format() },
+          { status: 500 }
+        );
+      }
+
+      return NextResponse.json({
+        explanation: parsed.explanation || "Configuration updated successfully",
+        newConfig: parsed.newConfig,
+      });
+    } catch (parseError) {
+      console.error("Failed to parse AI response:", parseError);
+      return NextResponse.json(
+        { error: "Failed to parse AI response" },
+        { status: 500 }
+      );
+    }
+  } catch (error) {
+    console.error("AI Editor API error:", error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : "Internal server error" },
+      { status: 500 }
+    );
+  }
+} 
\ No newline at end of file
diff --git a/packages/ui-solid/src/auto-imports.d.ts b/packages/ui-solid/src/auto-imports.d.ts
index d20fda030..859ae0d28 100644
--- a/packages/ui-solid/src/auto-imports.d.ts
+++ b/packages/ui-solid/src/auto-imports.d.ts
@@ -44,6 +44,7 @@ declare global {
   const IconCapLogoFullDark: typeof import('~icons/cap/logo-full-dark.jsx')['default']
   const IconCapMessageBubble: typeof import('~icons/cap/message-bubble.jsx')['default']
   const IconCapMicrophone: typeof import('~icons/cap/microphone.jsx')['default']
+  const IconCapMinimize: typeof import('~icons/cap/minimize.jsx')['default']
   const IconCapMoreVertical: typeof import('~icons/cap/more-vertical.jsx')['default']
   const IconCapMoveLeft: typeof import("~icons/cap/move-left.jsx")["default"]
   const IconCapMoveRight: typeof import("~icons/cap/move-right.jsx")["default"]
@@ -63,6 +64,7 @@ declare global {
   const IconCapShadow: typeof import('~icons/cap/shadow.jsx')['default']
   const IconCapSize: typeof import("~icons/cap/size.jsx")["default"]
   const IconCapSquare: typeof import('~icons/cap/square.jsx')['default']
+  const IconCapStar: typeof import('~icons/cap/star.jsx')['default']
   const IconCapStop: typeof import("~icons/cap/stop.jsx")["default"]
   const IconCapStopCircle: typeof import('~icons/cap/stop-circle.jsx')['default']
   const IconCapTrash: typeof import('~icons/cap/trash.jsx')['default']
@@ -89,10 +91,12 @@ declare global {
   const IconLucideHardDrive: typeof import('~icons/lucide/hard-drive.jsx')['default']
   const IconLucideLayoutGrid: typeof import("~icons/lucide/layout-grid.jsx")["default"]
   const IconLucideLoaderCircle: typeof import('~icons/lucide/loader-circle.jsx')['default']
+  const IconLucideMaximize2: typeof import('~icons/lucide/maximize2.jsx')['default']
   const IconLucideMessageCircle: typeof import("~icons/lucide/message-circle.jsx")["default"]
   const IconLucideMessageSquare: typeof import("~icons/lucide/message-square.jsx")["default"]
   const IconLucideMessageSquarePlus: typeof import('~icons/lucide/message-square-plus.jsx')['default']
   const IconLucideMicOff: typeof import('~icons/lucide/mic-off.jsx')['default']
+  const IconLucideMinimize2: typeof import('~icons/lucide/minimize2.jsx')['default']
   const IconLucideMonitor: typeof import('~icons/lucide/monitor.jsx')['default']
   const IconLucideRabbit: typeof import("~icons/lucide/rabbit.jsx")["default"]
   const IconLucideRectangle: typeof import('~icons/lucide/rectangle.jsx')['default']
@@ -100,6 +104,7 @@ declare global {
   const IconLucideRectangleSquare: typeof import('~icons/lucide/rectangle-square.jsx')['default']
   const IconLucideRotateCcw: typeof import('~icons/lucide/rotate-ccw.jsx')['default']
   const IconLucideSearch: typeof import('~icons/lucide/search.jsx')['default']
+  const IconLucideSparkles: typeof import('~icons/lucide/sparkles.jsx')['default']
   const IconLucideSquarePlay: typeof import('~icons/lucide/square-play.jsx')['default']
   const IconLucideUnplug: typeof import('~icons/lucide/unplug.jsx')['default']
   const IconLucideVideo: typeof import("~icons/lucide/video.jsx")["default"]

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://clevelandohioweatherforecast.com/php-proxy/index.php?q=https://github.com/CapSoftware/Cap/compare/main...ai-editor.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/index.php?u=https://github.com/CapSoftware/Cap/compare/main...ai-editor.patch" target="_blank">pFad Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v3index.php?u=https://github.com/CapSoftware/Cap/compare/main...ai-editor.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v4index.php?u=https://github.com/CapSoftware/Cap/compare/main...ai-editor.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>