@uniqueli/openwork 0.2.1 → 0.2.3

package/out/renderer/assets/{index-BPV5Z3ZG.js → index-DTaVewa6.js}

@@ -12755,6 +12755,12 @@ const Key = createLucideIcon("Key", [
   ["path", { d: "m21 2-9.6 9.6", key: "1j0ho8" }],
   ["circle", { cx: "7.5", cy: "15.5", r: "5.5", key: "yqb3hr" }]
 ]);
+const LayoutGrid = createLucideIcon("LayoutGrid", [
+  ["rect", { width: "7", height: "7", x: "3", y: "3", rx: "1", key: "1g98yp" }],
+  ["rect", { width: "7", height: "7", x: "14", y: "3", rx: "1", key: "6d4xhi" }],
+  ["rect", { width: "7", height: "7", x: "14", y: "14", rx: "1", key: "nxv5o0" }],
+  ["rect", { width: "7", height: "7", x: "3", y: "14", rx: "1", key: "1bb6yr" }]
+]);
 const ListTodo = createLucideIcon("ListTodo", [
   ["rect", { x: "3", y: "5", width: "6", height: "6", rx: "1", key: "1defrl" }],
   ["path", { d: "m3 17 2 2 4-4", key: "1jhpwq" }],
@@ -12811,6 +12817,19 @@ const Send = createLucideIcon("Send", [
   ],
   ["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
 ]);
+const Sparkles = createLucideIcon("Sparkles", [
+  [
+    "path",
+    {
+      d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z",
+      key: "4pj2yx"
+    }
+  ],
+  ["path", { d: "M20 3v4", key: "1olli1" }],
+  ["path", { d: "M22 5h-4", key: "1gvqau" }],
+  ["path", { d: "M4 17v2", key: "vumght" }],
+  ["path", { d: "M5 18H3", key: "zchphs" }]
+]);
 const SquarePen = createLucideIcon("SquarePen", [
   ["path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7", key: "1m0v6g" }],
   [
@@ -15579,14 +15598,7 @@ const buttonVariants = cva(
 const Button = reactExports.forwardRef(
   ({ className, variant, size: size2, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot$3 : "button";
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Comp,
-      {
-        className: cn(buttonVariants({ variant, size: size2, className })),
-        ref,
-        ...props
-      }
-    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Comp, { className: cn(buttonVariants({ variant, size: size2, className })), ref, ...props });
   }
 );
 Button.displayName = "Button";
@@ -16711,6 +16723,8 @@ const useAppStore = create$1((set, get) => ({
   rightPanelTab: "todos",
   settingsOpen: false,
   sidebarCollapsed: false,
+  showKanbanView: false,
+  showSubagentsInKanban: true,
   // Thread actions
   loadThreads: async () => {
     const threads = await window.api.threads.list();
@@ -16723,12 +16737,13 @@ const useAppStore = create$1((set, get) => ({
     const thread = await window.api.threads.create(metadata);
     set((state) => ({
       threads: [thread, ...state.threads],
-      currentThreadId: thread.thread_id
+      currentThreadId: thread.thread_id,
+      showKanbanView: false
     }));
     return thread;
   },
   selectThread: async (threadId) => {
-    set({ currentThreadId: threadId });
+    set({ currentThreadId: threadId, showKanbanView: false });
   },
   deleteThread: async (threadId) => {
     console.log("[Store] Deleting thread:", threadId);
@@ -16803,6 +16818,17 @@ const useAppStore = create$1((set, get) => ({
   },
   setSidebarCollapsed: (collapsed) => {
     set({ sidebarCollapsed: collapsed });
+  },
+  // Kanban actions
+  setShowKanbanView: (show) => {
+    if (show) {
+      set({ showKanbanView: true, currentThreadId: null });
+    } else {
+      set({ showKanbanView: false });
+    }
+  },
+  setShowSubagentsInKanban: (show) => {
+    set({ showSubagentsInKanban: show });
   }
 }));
 const CR = "\r".charCodeAt(0);
@@ -44595,6 +44621,7 @@ class ElectronIPCTransport {
     this.accumulatedToolCalls.clear();
     this.completedToolCallsByName.clear();
     const threadId = payload.config?.configurable?.thread_id;
+    const modelId = payload.config?.configurable?.model_id;
     if (!threadId) {
       return this.createErrorGenerator("MISSING_THREAD_ID", "Thread ID is required");
     }
@@ -44606,7 +44633,13 @@ class ElectronIPCTransport {
     if (!messageContent && !hasResumeCommand) {
       return this.createErrorGenerator("MISSING_MESSAGE", "Message content is required");
     }
-    return this.createStreamGenerator(threadId, messageContent, payload.command, payload.signal);
+    return this.createStreamGenerator(
+      threadId,
+      messageContent,
+      payload.command,
+      payload.signal,
+      modelId
+    );
   }
   async *createErrorGenerator(code2, message) {
     yield {
@@ -44614,7 +44647,7 @@ class ElectronIPCTransport {
       data: { error: code2, message }
     };
   }
-  async *createStreamGenerator(threadId, message, command, signal) {
+  async *createStreamGenerator(threadId, message, command, signal, modelId) {
     const eventQueue = [];
     let resolveNext = null;
     let isDone = false;
@@ -44627,22 +44660,28 @@ class ElectronIPCTransport {
         thread_id: threadId
       }
     };
-    const cleanup = window.api.agent.streamAgent(threadId, message, command, (ipcEvent) => {
-      const sdkEvents = this.convertToSDKEvents(ipcEvent, threadId);
-      for (const sdkEvent of sdkEvents) {
-        if (sdkEvent.event === "done" || sdkEvent.event === "error") {
-          isDone = true;
-          hasError = sdkEvent.event === "error";
-        }
-        if (resolveNext) {
-          const resolve = resolveNext;
-          resolveNext = null;
-          resolve(sdkEvent);
-        } else {
-          eventQueue.push(sdkEvent);
+    const cleanup = window.api.agent.streamAgent(
+      threadId,
+      message,
+      command,
+      (ipcEvent) => {
+        const sdkEvents = this.convertToSDKEvents(ipcEvent, threadId);
+        for (const sdkEvent of sdkEvents) {
+          if (sdkEvent.event === "done" || sdkEvent.event === "error") {
+            isDone = true;
+            hasError = sdkEvent.event === "error";
+          }
+          if (resolveNext) {
+            const resolve = resolveNext;
+            resolveNext = null;
+            resolve(sdkEvent);
+          } else {
+            eventQueue.push(sdkEvent);
+          }
         }
-      }
-    });
+      },
+      modelId
+    );
     if (signal) {
       signal.addEventListener("abort", () => {
         cleanup();
@@ -45156,7 +45195,8 @@ const createDefaultThreadState = () => ({
   openFiles: [],
   activeTab: "agent",
   fileContents: {},
-  tokenUsage: null
+  tokenUsage: null,
+  draftInput: ""
 });
 const defaultStreamData = {
   messages: [],
@@ -45221,6 +45261,7 @@ function ThreadStreamHolder({
 function ThreadProvider({ children }) {
   const [threadStates, setThreadStates] = reactExports.useState({});
   const [activeThreadIds, setActiveThreadIds] = reactExports.useState(/* @__PURE__ */ new Set());
+  const [loadingStates, setLoadingStates] = reactExports.useState({});
   const initializedThreadsRef = reactExports.useRef(/* @__PURE__ */ new Set());
   const actionsCache = reactExports.useRef({});
   const streamDataRef = reactExports.useRef({});
@@ -45235,6 +45276,10 @@ function ThreadProvider({ children }) {
     (threadId, data) => {
       streamDataRef.current[threadId] = data;
       notifyStreamSubscribers(threadId);
+      setLoadingStates((prev) => {
+        if (prev[threadId] === data.isLoading) return prev;
+        return { ...prev, [threadId]: data.isLoading };
+      });
     },
     [notifyStreamSubscribers]
   );
@@ -45254,12 +45299,26 @@ function ThreadProvider({ children }) {
     (threadId) => {
       const state = threadStates[threadId] || createDefaultThreadState();
       if (state.pendingApproval) {
-        console.log("[ThreadContext] getThreadState returning pendingApproval for:", threadId, state.pendingApproval);
+        console.log(
+          "[ThreadContext] getThreadState returning pendingApproval for:",
+          threadId,
+          state.pendingApproval
+        );
       }
       return state;
     },
     [threadStates]
   );
+  const getAllThreadStates = reactExports.useCallback(() => {
+    return threadStates;
+  }, [threadStates]);
+  const getAllStreamLoadingStates = reactExports.useCallback(() => {
+    return loadingStates;
+  }, [loadingStates]);
+  const subscribeToAllStreams = reactExports.useCallback(() => {
+    return () => {
+    };
+  }, []);
   const updateThreadState = reactExports.useCallback(
     (threadId, updater) => {
       setThreadStates((prev) => {
@@ -45275,7 +45334,9 @@ function ThreadProvider({ children }) {
   );
   const parseErrorMessage = reactExports.useCallback((error) => {
     const errorMessage = typeof error === "string" ? error : error.message;
-    const contextWindowMatch = errorMessage.match(/prompt is too long: (\d+) tokens > (\d+) maximum/i);
+    const contextWindowMatch = errorMessage.match(
+      /prompt is too long: (\d+) tokens > (\d+) maximum/i
+    );
     if (contextWindowMatch) {
       const [, usedTokens, maxTokens] = contextWindowMatch;
       const usedK = Math.round(parseInt(usedTokens) / 1e3);
@@ -45304,7 +45365,11 @@ function ThreadProvider({ children }) {
       switch (data.type) {
         case "interrupt":
           if (data.request) {
-            console.log("[ThreadContext] Setting pendingApproval for thread:", threadId, data.request);
+            console.log(
+              "[ThreadContext] Setting pendingApproval for thread:",
+              threadId,
+              data.request
+            );
             updateThreadState(threadId, () => ({ pendingApproval: data.request }));
           }
           break;
@@ -45431,7 +45496,8 @@ function ThreadProvider({ children }) {
         closeFile: (path2) => {
           updateThreadState(threadId, (state) => {
             const newOpenFiles = state.openFiles.filter((f2) => f2.path !== path2);
-            const { [path2]: _2, ...newFileContents } = state.fileContents;
+            const newFileContents = { ...state.fileContents };
+            delete newFileContents[path2];
             let newActiveTab = state.activeTab;
             if (state.activeTab === path2) {
               const closedIndex = state.openFiles.findIndex((f2) => f2.path === path2);
@@ -45439,7 +45505,11 @@ function ThreadProvider({ children }) {
               else if (closedIndex > 0) newActiveTab = newOpenFiles[closedIndex - 1].path;
               else newActiveTab = newOpenFiles[0].path;
             }
-            return { openFiles: newOpenFiles, activeTab: newActiveTab, fileContents: newFileContents };
+            return {
+              openFiles: newOpenFiles,
+              activeTab: newActiveTab,
+              fileContents: newFileContents
+            };
           });
         },
         setActiveTab: (tab2) => {
@@ -45449,6 +45519,9 @@ function ThreadProvider({ children }) {
           updateThreadState(threadId, (state) => ({
             fileContents: { ...state.fileContents, [path2]: content2 }
           }));
+        },
+        setDraftInput: (input) => {
+          updateThreadState(threadId, () => ({ draftInput: input }));
         }
       };
       actionsCache.current[threadId] = actions;
@@ -45466,21 +45539,16 @@ function ThreadProvider({ children }) {
           if (metadata.currentModel) {
             actions.setCurrentModel(metadata.currentModel);
           }
-        }
-      } catch (error) {
-        console.error("[ThreadContext] Failed to load thread metadata:", error);
-      }
-      try {
-        const path2 = await window.api.workspace.get(threadId);
-        if (path2) {
-          actions.setWorkspacePath(path2);
-          const diskResult = await window.api.workspace.loadFromDisk(threadId);
-          if (diskResult.success) {
-            actions.setWorkspaceFiles(diskResult.files);
+          if (metadata.workspacePath) {
+            actions.setWorkspacePath(metadata.workspacePath);
+            const diskResult = await window.api.workspace.loadFromDisk(threadId);
+            if (diskResult.success) {
+              actions.setWorkspaceFiles(diskResult.files);
+            }
           }
         }
       } catch (error) {
-        console.error("[ThreadContext] Failed to load workspace path:", error);
+        console.error("[ThreadContext] Failed to load thread metadata:", error);
       }
       try {
         const history = await window.api.threads.getHistory(threadId);
@@ -45561,7 +45629,7 @@ function ThreadProvider({ children }) {
         console.error("[ThreadContext] Failed to load thread history:", error);
       }
     },
-    [getThreadActions]
+    [getThreadActions, updateThreadState]
   );
   const initializeThread = reactExports.useCallback(
     (threadId) => {
@@ -45587,7 +45655,7 @@ function ThreadProvider({ children }) {
       return next;
     });
     setThreadStates((prev) => {
-      const { [threadId]: _2, ...rest } = prev;
+      const { [threadId]: _removed, ...rest } = prev;
       return rest;
     });
   }, []);
@@ -45598,9 +45666,22 @@ function ThreadProvider({ children }) {
       initializeThread,
       cleanupThread,
       subscribeToStream,
-      getStreamData
+      getStreamData,
+      getAllThreadStates,
+      getAllStreamLoadingStates,
+      subscribeToAllStreams
     }),
-    [getThreadState, getThreadActions, initializeThread, cleanupThread, subscribeToStream, getStreamData]
+    [
+      getThreadState,
+      getThreadActions,
+      initializeThread,
+      cleanupThread,
+      subscribeToStream,
+      getStreamData,
+      getAllThreadStates,
+      getAllStreamLoadingStates,
+      subscribeToAllStreams
+    ]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(ThreadContext.Provider, { value: contextValue, children: [
     Array.from(activeThreadIds).map((threadId) => /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -45649,6 +45730,14 @@ function useThreadState(threadId) {
   const actions = context.getThreadActions(threadId);
   return { ...state, ...actions };
 }
+function useAllThreadStates() {
+  const context = useThreadContext();
+  return context.getAllThreadStates();
+}
+function useAllStreamLoadingStates() {
+  const context = useThreadContext();
+  return context.getAllStreamLoadingStates();
+}
 // @__NO_SIDE_EFFECTS__
 function createSlot$3(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone$3(ownerName);
@@ -50610,9 +50699,7 @@ var Portal2 = ContextMenuPortal;
 var Content2$1 = ContextMenuContent$1;
 var Item2 = ContextMenuItem$1;
 var Separator2 = ContextMenuSeparator$1;
-function ContextMenu({
-  ...props
-}) {
+function ContextMenu({ ...props }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Root2$1, { "data-slot": "context-menu", ...props });
 }
 function ContextMenuTrigger({
@@ -50669,11 +50756,15 @@ function ContextMenuSeparator({
     }
   );
 }
-function ThreadLoadingIcon({ threadId }) {
+function ThreadStatusIcon$1({ threadId }) {
   const { isLoading } = useThreadStream(threadId);
+  const { pendingApproval } = useCurrentThread(threadId);
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-4 shrink-0 text-status-info animate-spin" });
   }
+  if (pendingApproval) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "size-4 shrink-0 text-status-warning" });
+  }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-4 shrink-0 text-muted-foreground" });
 }
 function ThreadListItem({
@@ -50702,7 +50793,7 @@ function ThreadListItem({
           }
         },
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(ThreadLoadingIcon, { threadId: thread.thread_id }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ThreadStatusIcon$1, { threadId: thread.thread_id }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0 overflow-hidden", children: isEditing ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
             {
@@ -50744,17 +50835,10 @@ function ThreadListItem({
         "Rename"
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(ContextMenuSeparator, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        ContextMenuItem,
-        {
-          variant: "destructive",
-          onClick: onDelete,
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-4 mr-2" }),
-            "Delete"
-          ]
-        }
-      )
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(ContextMenuItem, { variant: "destructive", onClick: onDelete, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-4 mr-2" }),
+        "Delete"
+      ] })
     ] })
   ] });
 }
@@ -50765,7 +50849,8 @@ function ThreadSidebar() {
     createThread,
     selectThread,
     deleteThread,
-    updateThread
+    updateThread,
+    setShowKanbanView
   } = useAppStore();
   const [editingThreadId, setEditingThreadId] = reactExports.useState(null);
   const [editingTitle, setEditingTitle] = reactExports.useState("");
@@ -50788,10 +50873,19 @@ function ThreadSidebar() {
     await createThread({ title: `Thread ${(/* @__PURE__ */ new Date()).toLocaleDateString()}` });
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("aside", { className: "flex h-full w-full flex-col border-r border-border bg-sidebar overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2", style: { paddingTop: "calc(8px + var(--sidebar-safe-padding, 0px))" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "sm", className: "w-full justify-start gap-2", onClick: handleNewThread, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "size-4" }),
-      "New Thread"
-    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2", style: { paddingTop: "calc(8px + var(--sidebar-safe-padding, 0px))" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "w-full justify-start gap-2",
+        onClick: handleNewThread,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "size-4" }),
+          "New Thread"
+        ]
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-2 space-y-1 overflow-hidden", children: [
       threads.map((thread) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         ThreadListItem,
@@ -50810,10 +50904,26 @@ function ThreadSidebar() {
         thread.thread_id
       )),
       threads.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: "No threads yet" })
-    ] }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 border-t border-border", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "w-full justify-start gap-2",
+        onClick: () => setShowKanbanView(true),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(LayoutGrid, { className: "size-4" }),
+          "Overview"
+        ]
+      }
+    ) })
   ] });
 }
-function TabBar({ className, threadId: propThreadId }) {
+function TabBar({
+  className,
+  threadId: propThreadId
+}) {
   const { currentThreadId } = useAppStore();
   const threadId = propThreadId ?? currentThreadId;
   const threadState = useThreadState(threadId);
@@ -50821,36 +50931,42 @@ function TabBar({ className, threadId: propThreadId }) {
     return null;
   }
   const { openFiles, activeTab, setActiveTab, closeFile } = threadState;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn(
-    "flex items-center h-9 border-b border-border bg-sidebar overflow-x-auto scrollbar-hide",
-    className
-  ), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        onClick: () => setActiveTab("agent"),
-        className: cn(
-          "flex items-center gap-2 px-4 h-full text-sm font-medium transition-colors shrink-0 border-r border-border",
-          activeTab === "agent" ? "bg-primary/15 text-primary border-b-2 border-b-primary" : "text-muted-foreground hover:text-foreground hover:bg-background-interactive"
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center h-9 border-b border-border bg-sidebar overflow-x-auto scrollbar-hide",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            onClick: () => setActiveTab("agent"),
+            className: cn(
+              "flex items-center gap-2 px-4 h-full text-sm font-medium transition-colors shrink-0 border-r border-border",
+              activeTab === "agent" ? "bg-primary/15 text-primary border-b-2 border-b-primary" : "text-muted-foreground hover:text-foreground hover:bg-background-interactive"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Bot, { className: "size-4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Agent" })
+            ]
+          }
         ),
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Bot, { className: "size-4" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Agent" })
-        ]
-      }
-    ),
-    openFiles.map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      FileTab,
-      {
-        file,
-        isActive: activeTab === file.path,
-        onSelect: () => setActiveTab(file.path),
-        onClose: () => closeFile(file.path)
-      },
-      file.path
-    )),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0" })
-  ] });
+        openFiles.map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          FileTab,
+          {
+            file,
+            isActive: activeTab === file.path,
+            onSelect: () => setActiveTab(file.path),
+            onClose: () => closeFile(file.path)
+          },
+          file.path
+        )),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0" })
+      ]
+    }
+  );
 }
 function FileTab({ file, isActive, onSelect, onClose }) {
   const handleClose = (e) => {
@@ -50925,27 +51041,8 @@ const IMAGE_EXTENSIONS = /* @__PURE__ */ new Set([
   "tiff",
   "tif"
 ]);
-const VIDEO_EXTENSIONS = /* @__PURE__ */ new Set([
-  "mp4",
-  "webm",
-  "ogg",
-  "ogv",
-  "mov",
-  "avi",
-  "wmv",
-  "flv",
-  "mkv"
-]);
-const AUDIO_EXTENSIONS = /* @__PURE__ */ new Set([
-  "mp3",
-  "wav",
-  "ogg",
-  "oga",
-  "m4a",
-  "flac",
-  "aac",
-  "weba"
-]);
+const VIDEO_EXTENSIONS = /* @__PURE__ */ new Set(["mp4", "webm", "ogg", "ogv", "mov", "avi", "wmv", "flv", "mkv"]);
+const AUDIO_EXTENSIONS = /* @__PURE__ */ new Set(["mp3", "wav", "ogg", "oga", "m4a", "flac", "aac", "weba"]);
 const PDF_EXTENSIONS = /* @__PURE__ */ new Set(["pdf"]);
 const CODE_EXTENSIONS = /* @__PURE__ */ new Set([
   "ts",
@@ -51057,36 +51154,36 @@ function getFileType(fileName) {
 function getMimeType(ext) {
   const mimeTypes = {
     // Images
-    "png": "image/png",
-    "jpg": "image/jpeg",
-    "jpeg": "image/jpeg",
-    "gif": "image/gif",
-    "svg": "image/svg+xml",
-    "webp": "image/webp",
-    "bmp": "image/bmp",
-    "ico": "image/x-icon",
-    "tiff": "image/tiff",
-    "tif": "image/tiff",
+    png: "image/png",
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    gif: "image/gif",
+    svg: "image/svg+xml",
+    webp: "image/webp",
+    bmp: "image/bmp",
+    ico: "image/x-icon",
+    tiff: "image/tiff",
+    tif: "image/tiff",
     // Video
-    "mp4": "video/mp4",
-    "webm": "video/webm",
-    "ogg": "video/ogg",
-    "ogv": "video/ogg",
-    "mov": "video/quicktime",
-    "avi": "video/x-msvideo",
-    "wmv": "video/x-ms-wmv",
-    "flv": "video/x-flv",
-    "mkv": "video/x-matroska",
+    mp4: "video/mp4",
+    webm: "video/webm",
+    ogg: "video/ogg",
+    ogv: "video/ogg",
+    mov: "video/quicktime",
+    avi: "video/x-msvideo",
+    wmv: "video/x-ms-wmv",
+    flv: "video/x-flv",
+    mkv: "video/x-matroska",
     // Audio
-    "mp3": "audio/mpeg",
-    "wav": "audio/wav",
-    "oga": "audio/ogg",
-    "m4a": "audio/mp4",
-    "flac": "audio/flac",
-    "aac": "audio/aac",
-    "weba": "audio/webm",
+    mp3: "audio/mpeg",
+    wav: "audio/wav",
+    oga: "audio/ogg",
+    m4a: "audio/mp4",
+    flac: "audio/flac",
+    aac: "audio/aac",
+    weba: "audio/webm",
     // PDF
-    "pdf": "application/pdf"
+    pdf: "application/pdf"
   };
   return mimeTypes[ext] || "application/octet-stream";
 }
@@ -61610,25 +61707,25 @@ const SUPPORTED_LANGS = /* @__PURE__ */ new Set([
 ]);
 function getLanguage(ext) {
   const langMap = {
-    "ts": "typescript",
-    "tsx": "tsx",
-    "js": "javascript",
-    "jsx": "jsx",
-    "mjs": "javascript",
-    "cjs": "javascript",
-    "py": "python",
-    "json": "json",
-    "css": "css",
-    "html": "html",
-    "htm": "html",
-    "md": "markdown",
-    "mdx": "markdown",
-    "yaml": "yaml",
-    "yml": "yaml",
-    "sh": "bash",
-    "bash": "bash",
-    "zsh": "bash",
-    "sql": "sql"
+    ts: "typescript",
+    tsx: "tsx",
+    js: "javascript",
+    jsx: "jsx",
+    mjs: "javascript",
+    cjs: "javascript",
+    py: "python",
+    json: "json",
+    css: "css",
+    html: "html",
+    htm: "html",
+    md: "markdown",
+    mdx: "markdown",
+    yaml: "yaml",
+    yml: "yaml",
+    sh: "bash",
+    bash: "bash",
+    zsh: "bash",
+    sql: "sql"
   };
   const lang2 = ext ? langMap[ext] : null;
   return lang2 && SUPPORTED_LANGS.has(lang2) ? lang2 : null;
@@ -61678,19 +61775,17 @@ function CodeViewer({ filePath, content: content2 }) {
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground/50", children: "•" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground/70", children: language || "plain text" })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "shiki-wrapper", children: highlightedHtml ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        className: "shiki-content",
-        dangerouslySetInnerHTML: { __html: highlightedHtml }
-      }
-    ) : (
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "shiki-wrapper", children: highlightedHtml ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "shiki-content", dangerouslySetInnerHTML: { __html: highlightedHtml } }) : (
       // Fallback plain text rendering
       /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "p-4 text-sm font-mono leading-relaxed whitespace-pre-wrap break-all", children: content2 })
     ) }) })
   ] });
 }
-function ImageViewer({ filePath, base64Content, mimeType }) {
+function ImageViewer({
+  filePath,
+  base64Content,
+  mimeType
+}) {
   const [zoom, setZoom] = reactExports.useState(100);
   const [rotation, setRotation] = reactExports.useState(0);
   const [isPanning, setIsPanning] = reactExports.useState(false);
@@ -61700,10 +61795,18 @@ function ImageViewer({ filePath, base64Content, mimeType }) {
   const fileName = filePath.split("/").pop() || filePath;
   const imageUrl = `data:${mimeType};base64,${base64Content}`;
   const handleZoomIn = () => {
-    setZoom((prev) => Math.min(prev + 25, 400));
+    const newZoom = Math.min(zoom + 25, 400);
+    setZoom(newZoom);
+    if (newZoom <= 100) {
+      setPanOffset({ x: 0, y: 0 });
+    }
   };
   const handleZoomOut = () => {
-    setZoom((prev) => Math.max(prev - 25, 25));
+    const newZoom = Math.max(zoom - 25, 25);
+    setZoom(newZoom);
+    if (newZoom <= 100) {
+      setPanOffset({ x: 0, y: 0 });
+    }
   };
   const handleResetZoom = () => {
     setZoom(100);
@@ -61734,11 +61837,6 @@ function ImageViewer({ filePath, base64Content, mimeType }) {
   const handleMouseLeave = () => {
     setIsPanning(false);
   };
-  reactExports.useEffect(() => {
-    if (zoom <= 100) {
-      setPanOffset({ x: 0, y: 0 });
-    }
-  }, [zoom]);
   const canPan = zoom > 100;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-1 flex-col min-h-0 overflow-hidden", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 px-4 py-2 border-b border-border bg-background/50 shrink-0", children: [
@@ -61781,26 +61879,8 @@ function ImageViewer({ filePath, base64Content, mimeType }) {
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(ZoomIn, { className: "size-4" })
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "sm",
-            onClick: handleRotate,
-            className: "h-7 px-2",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCw, { className: "size-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "sm",
-            onClick: handleResetZoom,
-            className: "h-7 px-2",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Maximize2, { className: "size-4" })
-          }
-        )
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "sm", onClick: handleRotate, className: "h-7 px-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCw, { className: "size-4" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "sm", onClick: handleResetZoom, className: "h-7 px-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Maximize2, { className: "size-4" }) })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -61833,7 +61913,12 @@ function ImageViewer({ filePath, base64Content, mimeType }) {
     ) })
   ] });
 }
-function MediaViewer({ filePath, base64Content, mimeType, mediaType }) {
+function MediaViewer({
+  filePath,
+  base64Content,
+  mimeType,
+  mediaType
+}) {
   const fileName = filePath.split("/").pop() || filePath;
   const mediaUrl = `data:${mimeType};base64,${base64Content}`;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-1 flex-col min-h-0 overflow-hidden", children: [
@@ -61864,18 +61949,10 @@ function MediaViewer({ filePath, base64Content, mimeType, mediaType }) {
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-muted-foreground", children: "Audio File" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "audio",
-        {
-          controls: true,
-          className: "w-full max-w-md",
-          preload: "metadata",
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("source", { src: mediaUrl, type: mimeType }),
-            "Your browser does not support the audio tag."
-          ]
-        }
-      )
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("audio", { controls: true, className: "w-full max-w-md", preload: "metadata", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("source", { src: mediaUrl, type: mimeType }),
+        "Your browser does not support the audio tag."
+      ] })
     ] }) }) })
   ] });
 }
@@ -61895,39 +61972,22 @@ function PDFViewer({ filePath, base64Content }) {
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground/50", children: "•" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "PDF Document" })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Button,
-        {
-          variant: "ghost",
-          size: "sm",
-          onClick: handleOpenExternal,
-          className: "h-7 px-2 gap-1",
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "size-3" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: "Download" })
-          ]
-        }
-      )
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "sm", onClick: handleOpenExternal, className: "h-7 px-2 gap-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "size-3" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: "Download" })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col items-center min-h-full bg-muted/30", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "object",
-      {
-        data: pdfUrl,
-        type: "application/pdf",
-        className: "w-full h-full min-h-[600px]",
-        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center min-h-[600px] gap-4 p-8", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(FileText, { className: "size-16 text-muted-foreground/50" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-foreground mb-2", children: fileName }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-muted-foreground mb-4", children: "PDF preview not available in this browser" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: handleOpenExternal, variant: "outline", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "size-4 mr-2" }),
-              "Download PDF"
-            ] })
-          ] })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col items-center min-h-full bg-muted/30", children: /* @__PURE__ */ jsxRuntimeExports.jsx("object", { data: pdfUrl, type: "application/pdf", className: "w-full h-full min-h-[600px]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center min-h-[600px] gap-4 p-8", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(FileText, { className: "size-16 text-muted-foreground/50" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-foreground mb-2", children: fileName }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-muted-foreground mb-4", children: "PDF preview not available in this browser" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: handleOpenExternal, variant: "outline", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "size-4 mr-2" }),
+          "Download PDF"
         ] })
-      }
-    ) }) })
+      ] })
+    ] }) }) }) })
   ] });
 }
 function BinaryFileViewer({ filePath, size: size2 }) {
@@ -62142,16 +62202,23 @@ function TodosDisplay({ todos }) {
     const config2 = statusConfig[todo.status] || defaultConfig;
     const Icon2 = config2.icon;
     const isDone = todo.status === "completed" || todo.status === "cancelled";
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn(
-      "flex items-start gap-2 text-xs",
-      isDone && "opacity-50"
-    ), children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: cn("size-3.5 mt-0.5 shrink-0", config2.color) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn(isDone && "line-through"), children: todo.content })
-    ] }, todo.id || i2);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: cn("flex items-start gap-2 text-xs", isDone && "opacity-50"),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: cn("size-3.5 mt-0.5 shrink-0", config2.color) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn(isDone && "line-through"), children: todo.content })
+        ]
+      },
+      todo.id || i2
+    );
   }) });
 }
-function FileListDisplay({ files, isGlob }) {
+function FileListDisplay({
+  files,
+  isGlob
+}) {
   const items = files.slice(0, 15);
   const hasMore = files.length > 15;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-0.5", children: [
@@ -62170,12 +62237,17 @@ function FileListDisplay({ files, isGlob }) {
     ] })
   ] });
 }
-function GrepResultsDisplay({ matches: matches2 }) {
-  const grouped = matches2.reduce((acc, match) => {
-    if (!acc[match.path]) acc[match.path] = [];
-    acc[match.path].push(match);
-    return acc;
-  }, {});
+function GrepResultsDisplay({
+  matches: matches2
+}) {
+  const grouped = matches2.reduce(
+    (acc, match) => {
+      if (!acc[match.path]) acc[match.path] = [];
+      acc[match.path].push(match);
+      return acc;
+    },
+    {}
+  );
   const files = Object.keys(grouped).slice(0, 5);
   const hasMore = Object.keys(grouped).length > 5;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
@@ -62252,7 +62324,10 @@ function FileEditSummary({ args }) {
   }
   return null;
 }
-function CommandDisplay({ command, output }) {
+function CommandDisplay({
+  command,
+  output
+}) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs space-y-2 w-full overflow-hidden", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-mono bg-background rounded-sm p-2 flex items-center gap-2 min-w-0", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-status-info shrink-0", children: "$" }),
@@ -62264,7 +62339,10 @@ function CommandDisplay({ command, output }) {
     ] })
   ] });
 }
-function TaskDisplay({ args, isExpanded }) {
+function TaskDisplay({
+  args,
+  isExpanded
+}) {
   const name2 = args.name;
   const description = args.description;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs space-y-1", children: [
@@ -62272,13 +62350,16 @@ function TaskDisplay({ args, isExpanded }) {
       /* @__PURE__ */ jsxRuntimeExports.jsx(GitBranch, { className: "size-3 text-status-info" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium truncate", children: name2 })
     ] }),
-    description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: cn(
-      "text-muted-foreground pl-5",
-      !isExpanded && "line-clamp-2"
-    ), children: description })
+    description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: cn("text-muted-foreground pl-5", !isExpanded && "line-clamp-2"), children: description })
   ] });
 }
-function ToolCallRenderer({ toolCall, result, isError: isError2, needsApproval, onApprovalDecision }) {
+function ToolCallRenderer({
+  toolCall,
+  result,
+  isError: isError2,
+  needsApproval,
+  onApprovalDecision
+}) {
   const args = toolCall?.args || {};
   const [isExpanded, setIsExpanded] = reactExports.useState(false);
   if (!toolCall) {
@@ -62358,7 +62439,9 @@ function ToolCallRenderer({ toolCall, result, isError: isError2, needsApproval,
       }
       case "ls": {
         if (Array.isArray(result)) {
-          const dirs = result.filter((f2) => typeof f2 === "object" && f2.is_dir).length;
+          const dirs = result.filter(
+            (f2) => typeof f2 === "object" && f2.is_dir
+          ).length;
           const files = result.length - dirs;
           return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-status-nominal flex items-center gap-1.5", children: [
@@ -62491,72 +62574,89 @@ function ToolCallRenderer({ toolCall, result, isError: isError2, needsApproval,
   const formattedContent = renderFormattedContent();
   const formattedResult = renderFormattedResult();
   const hasFormattedDisplay = formattedContent || formattedResult;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn(
-    "rounded-sm border overflow-hidden",
-    needsApproval ? "border-amber-500/50 bg-amber-500/5" : "border-border bg-background-elevated"
-  ), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        onClick: () => setIsExpanded(!isExpanded),
-        className: "flex w-full items-center gap-2 px-3 py-2 hover:bg-background-interactive transition-colors",
-        children: [
-          isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4 text-muted-foreground shrink-0" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 text-muted-foreground shrink-0" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: cn("size-4 shrink-0", needsApproval ? "text-amber-500" : "text-status-info") }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium shrink-0", children: label }),
-          displayArg && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1 truncate text-left text-xs text-muted-foreground font-mono", children: displayArg }),
-          needsApproval && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "warning", className: "ml-auto shrink-0", children: "APPROVAL" }),
-          !needsApproval && result === void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", className: "ml-auto shrink-0 animate-pulse", children: "RUNNING" }),
-          result !== void 0 && !needsApproval && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: isError2 ? "critical" : "nominal", className: "ml-auto shrink-0", children: isError2 ? "ERROR" : "OK" }),
-          isPanelSynced && !needsApproval && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", className: "shrink-0 text-[9px]", children: "SYNCED" })
-        ]
-      }
-    ),
-    needsApproval ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-t border-amber-500/20 px-3 py-3 space-y-3", children: [
-      formattedContent,
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-section-header text-[10px] mb-1", children: "ARGUMENTS" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-xs font-mono bg-background p-2 rounded-sm overflow-auto max-h-24", children: JSON.stringify(args, null, 2) })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end gap-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-sm border overflow-hidden",
+        needsApproval ? "border-amber-500/50 bg-amber-500/5" : "border-border bg-background-elevated"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "button",
           {
-            className: "px-3 py-1.5 text-xs border border-border rounded-sm hover:bg-background-interactive transition-colors",
-            onClick: handleReject,
-            children: "Reject"
+            onClick: () => setIsExpanded(!isExpanded),
+            className: "flex w-full items-center gap-2 px-3 py-2 hover:bg-background-interactive transition-colors",
+            children: [
+              isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4 text-muted-foreground shrink-0" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 text-muted-foreground shrink-0" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Icon2,
+                {
+                  className: cn("size-4 shrink-0", needsApproval ? "text-amber-500" : "text-status-info")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium shrink-0", children: label }),
+              displayArg && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1 truncate text-left text-xs text-muted-foreground font-mono", children: displayArg }),
+              needsApproval && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "warning", className: "ml-auto shrink-0", children: "APPROVAL" }),
+              !needsApproval && result === void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", className: "ml-auto shrink-0 animate-pulse", children: "RUNNING" }),
+              result !== void 0 && !needsApproval && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: isError2 ? "critical" : "nominal", className: "ml-auto shrink-0", children: isError2 ? "ERROR" : "OK" }),
+              isPanelSynced && !needsApproval && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", className: "shrink-0 text-[9px]", children: "SYNCED" })
+            ]
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            className: "px-3 py-1.5 text-xs bg-status-nominal text-background rounded-sm hover:bg-status-nominal/90 transition-colors",
-            onClick: handleApprove,
-            children: "Approve & Run"
-          }
-        )
-      ] })
-    ] }) : null,
-    hasFormattedDisplay && !isExpanded && !needsApproval && result !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-t border-border px-3 py-2 space-y-2 overflow-hidden", children: [
-      formattedContent,
-      formattedResult
-    ] }),
-    isExpanded && !needsApproval && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-t border-border px-3 py-2 space-y-2 overflow-hidden", children: [
-      formattedContent,
-      formattedResult,
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "overflow-hidden w-full", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-section-header mb-1", children: "RAW ARGUMENTS" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-xs font-mono bg-background p-2 rounded-sm overflow-auto max-h-48 w-full whitespace-pre-wrap break-all", children: JSON.stringify(args, null, 2) })
-      ] }),
-      result !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "overflow-hidden w-full", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-section-header mb-1", children: "RAW RESULT" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: cn(
-          "text-xs font-mono p-2 rounded-sm overflow-auto max-h-48 w-full whitespace-pre-wrap break-all",
-          isError2 ? "bg-status-critical/10 text-status-critical" : "bg-background"
-        ), children: typeof result === "string" ? result : JSON.stringify(result, null, 2) })
-      ] })
-    ] })
-  ] });
+        needsApproval ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-t border-amber-500/20 px-3 py-3 space-y-3", children: [
+          formattedContent,
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-section-header text-[10px] mb-1", children: "ARGUMENTS" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-xs font-mono bg-background p-2 rounded-sm overflow-auto max-h-24", children: JSON.stringify(args, null, 2) })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                className: "px-3 py-1.5 text-xs border border-border rounded-sm hover:bg-background-interactive transition-colors",
+                onClick: handleReject,
+                children: "Reject"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                className: "px-3 py-1.5 text-xs bg-status-nominal text-background rounded-sm hover:bg-status-nominal/90 transition-colors",
+                onClick: handleApprove,
+                children: "Approve & Run"
+              }
+            )
+          ] })
+        ] }) : null,
+        hasFormattedDisplay && !isExpanded && !needsApproval && result !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-t border-border px-3 py-2 space-y-2 overflow-hidden", children: [
+          formattedContent,
+          formattedResult
+        ] }),
+        isExpanded && !needsApproval && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-t border-border px-3 py-2 space-y-2 overflow-hidden", children: [
+          formattedContent,
+          formattedResult,
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "overflow-hidden w-full", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-section-header mb-1", children: "RAW ARGUMENTS" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-xs font-mono bg-background p-2 rounded-sm overflow-auto max-h-48 w-full whitespace-pre-wrap break-all", children: JSON.stringify(args, null, 2) })
+          ] }),
+          result !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "overflow-hidden w-full", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-section-header mb-1", children: "RAW RESULT" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "pre",
+              {
+                className: cn(
+                  "text-xs font-mono p-2 rounded-sm overflow-auto max-h-48 w-full whitespace-pre-wrap break-all",
+                  isError2 ? "bg-status-critical/10 text-status-critical" : "bg-background"
+                ),
+                children: typeof result === "string" ? result : JSON.stringify(result, null, 2)
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
 }
 function ok$1() {
 }
@@ -73902,7 +74002,13 @@ const StreamingMarkdown = reactExports.memo(function StreamingMarkdown2({
     isStreaming && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-block w-2 h-4 ml-0.5 bg-foreground/70 animate-pulse" })
   ] });
 });
-function MessageBubble({ message, isStreaming, toolResults, pendingApproval, onApprovalDecision }) {
+function MessageBubble({
+  message,
+  isStreaming,
+  toolResults,
+  pendingApproval,
+  onApprovalDecision
+}) {
   const isUser = message.role === "user";
   const isTool = message.role === "tool";
   if (isTool) {
@@ -73945,14 +74051,14 @@ function MessageBubble({ message, isStreaming, toolResults, pendingApproval, onA
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3 overflow-hidden", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-8 shrink-0", children: !isUser && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex size-8 items-center justify-center rounded-sm bg-status-info/10 text-status-info", children: getIcon() }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0 space-y-2 overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(
-        "text-section-header",
-        isUser && "text-right"
-      ), children: getLabel() }),
-      content2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(
-        "rounded-sm p-3 overflow-hidden",
-        isUser ? "bg-primary/10" : "bg-card"
-      ), children: content2 }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("text-section-header", isUser && "text-right"), children: getLabel() }),
+      content2 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: cn("rounded-sm p-3 overflow-hidden", isUser ? "bg-primary/10" : "bg-card"),
+          children: content2
+        }
+      ),
       hasToolCalls && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 overflow-hidden", children: message.tool_calls.map((toolCall, index2) => {
         const result = toolResults?.get(toolCall.id);
         const pendingId = pendingApproval?.tool_call?.id;
@@ -74333,14 +74439,10 @@ var Root2 = Popover$1;
 var Trigger = PopoverTrigger$1;
 var Portal$1 = PopoverPortal;
 var Content2 = PopoverContent$1;
-function Popover({
-  ...props
-}) {
+function Popover({ ...props }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Root2, { "data-slot": "popover", ...props });
 }
-function PopoverTrigger({
-  ...props
-}) {
+function PopoverTrigger({ ...props }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({
@@ -74782,16 +74884,7 @@ const DialogContent = reactExports.forwardRef(({ className, children, ...props }
   )
 ] }));
 DialogContent.displayName = Content.displayName;
-const DialogHeader = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  "div",
-  {
-    className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
-    ...props
-  }
-);
+const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
 DialogHeader.displayName = "DialogHeader";
 const DialogTitle = reactExports.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
   Title,
@@ -74831,10 +74924,13 @@ Input.displayName = "Input";
 const PROVIDER_INFO = {
   anthropic: { placeholder: "sk-ant-...", envVar: "ANTHROPIC_API_KEY" },
   openai: { placeholder: "sk-...", envVar: "OPENAI_API_KEY" },
-  google: { placeholder: "AIza...", envVar: "GOOGLE_API_KEY" },
-  custom: { placeholder: "your-api-key", envVar: "CUSTOM_API_KEY" }
+  google: { placeholder: "AIza...", envVar: "GOOGLE_API_KEY" }
 };
-function ApiKeyDialog({ open, onOpenChange, provider }) {
+function ApiKeyDialog({
+  open,
+  onOpenChange,
+  provider
+}) {
   const [apiKey, setApiKey] = reactExports.useState("");
   const [showKey, setShowKey] = reactExports.useState(false);
   const [saving, setSaving] = reactExports.useState(false);
@@ -74965,14 +75061,14 @@ function ApiKeyDialog({ open, onOpenChange, provider }) {
         ] })
       ] }),
       provider.id === "custom" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs text-muted-foreground", children: "Model Name (Optional)" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-xs text-muted-foreground", children: "Model Name (optional)" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Input,
           {
             type: "text",
             value: modelName,
             onChange: (e) => setModelName(e.target.value),
-            placeholder: "gpt-4, claude-3-opus, etc."
+            placeholder: "e.g., gpt-4"
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-muted-foreground", children: [
@@ -74981,32 +75077,29 @@ function ApiKeyDialog({ open, onOpenChange, provider }) {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
-      hasExistingKey ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Button,
-        {
-          type: "button",
-          variant: "destructive",
-          size: "sm",
-          onClick: handleDelete2,
-          disabled: deleting || saving,
-          children: [
-            deleting ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-4 animate-spin mr-2" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-4 mr-2" }),
-            "Remove Key"
-          ]
-        }
-      ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between gap-2", children: [
+      hasExistingKey && /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "destructive", size: "sm", onClick: handleDelete2, disabled: deleting, children: deleting ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-4 animate-spin" }),
+        "Removing..."
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-4" }),
+        "Remove"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 ml-auto", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Button,
           {
-            type: "button",
-            onClick: handleSave,
-            disabled: !apiKey.trim() || saving || provider.id === "custom" && !baseUrl.trim(),
-            children: saving ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-4 animate-spin" }) : "Save"
+            variant: "outline",
+            size: "sm",
+            onClick: () => onOpenChange(false),
+            disabled: saving,
+            children: "Cancel"
           }
-        )
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "sm", onClick: handleSave, disabled: saving || !apiKey.trim(), children: saving ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-4 animate-spin" }),
+          "Saving..."
+        ] }) : "Save" })
       ] })
     ] })
   ] }) });
@@ -75158,26 +75251,11 @@ function AddProviderDialog({ open, onOpenChange, onSuccess }) {
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          variant: "outline",
-          onClick: handleCancel,
-          disabled: saving,
-          children: "取消"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          onClick: handleSave,
-          disabled: saving || !id || !name2 || !baseUrl || !apiKey,
-          children: saving ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-4 animate-spin mr-2" }),
-            "保存中..."
-          ] }) : "保存"
-        }
-      )
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: handleCancel, disabled: saving, children: "取消" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: handleSave, disabled: saving || !id || !name2 || !baseUrl || !apiKey, children: saving ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-4 animate-spin mr-2" }),
+        "保存中..."
+      ] }) : "保存" })
     ] })
   ] }) });
 }
@@ -75191,11 +75269,21 @@ function GoogleIcon({ className }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" }) });
 }
 function CustomIcon({ className }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M2 17l10 5 10-5" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M2 12l10 5 10-5" })
-  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M2 17l10 5 10-5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M2 12l10 5 10-5" })
+      ]
+    }
+  );
 }
 const PROVIDER_ICONS = {
   anthropic: AnthropicIcon,
@@ -75211,8 +75299,7 @@ function getProviderIcon(providerId) {
 const FALLBACK_PROVIDERS = [
   { id: "anthropic", name: "Anthropic", hasApiKey: false },
   { id: "openai", name: "OpenAI", hasApiKey: false },
-  { id: "google", name: "Google", hasApiKey: false },
-  { id: "custom", name: "Custom API", hasApiKey: false }
+  { id: "google", name: "Google", hasApiKey: false }
 ];
 function ModelSwitcher({ threadId }) {
   const [open, setOpen] = reactExports.useState(false);
@@ -75227,20 +75314,10 @@ function ModelSwitcher({ threadId }) {
     loadProviders();
   }, [loadModels, loadProviders]);
   const displayProviders = providers.length > 0 ? providers : FALLBACK_PROVIDERS;
-  reactExports.useEffect(() => {
-    if (!selectedProviderId && currentModel) {
-      const model = models.find((m2) => m2.id === currentModel);
-      if (model) {
-        setSelectedProviderId(model.provider);
-      }
-    }
-    if (!selectedProviderId && displayProviders.length > 0) {
-      setSelectedProviderId(displayProviders[0].id);
-    }
-  }, [currentModel, models, selectedProviderId, displayProviders]);
+  const effectiveProviderId = selectedProviderId || (currentModel ? models.find((m2) => m2.id === currentModel)?.provider : null) || (displayProviders.length > 0 ? displayProviders[0].id : null);
   const selectedModel = models.find((m2) => m2.id === currentModel);
-  const filteredModels = selectedProviderId ? models.filter((m2) => m2.provider === selectedProviderId) : [];
-  const selectedProvider = displayProviders.find((p2) => p2.id === selectedProviderId);
+  const filteredModels = effectiveProviderId ? models.filter((m2) => m2.provider === effectiveProviderId) : [];
+  const selectedProvider = displayProviders.find((p2) => p2.id === effectiveProviderId);
   function handleProviderClick(provider) {
     setSelectedProviderId(provider.id);
   }
@@ -75301,7 +75378,7 @@ function ModelSwitcher({ threadId }) {
                       onClick: () => handleProviderClick(provider),
                       className: cn(
                         "w-full flex items-center gap-1.5 px-2 py-1 rounded-sm text-xs transition-colors text-left",
-                        selectedProviderId === provider.id ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+                        effectiveProviderId === provider.id ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
                       ),
                       children: [
                         /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "size-3.5 shrink-0" }),
@@ -75321,10 +75398,20 @@ function ModelSwitcher({ threadId }) {
                     },
                     className: "w-full flex items-center justify-center gap-1.5 px-2 py-2 rounded-sm text-xs transition-colors text-muted-foreground hover:text-foreground hover:bg-muted/50 border-t border-border mt-1 pt-2",
                     children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
-                      ] }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                        "svg",
+                        {
+                          className: "size-4",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          children: [
+                            /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+                            /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+                          ]
+                        }
+                      ),
                       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "添加Provider" })
                     ]
                   }
@@ -75341,14 +75428,7 @@ function ModelSwitcher({ threadId }) {
                     "API key required for ",
                     selectedProvider.name
                   ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    Button,
-                    {
-                      size: "sm",
-                      onClick: () => handleConfigureApiKey(selectedProvider),
-                      children: "Configure API Key"
-                    }
-                  )
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "sm", onClick: () => handleConfigureApiKey(selectedProvider), children: "Configure API Key" })
                 ] })
               ) : (
                 // Show models list with scrollable area
@@ -75577,11 +75657,16 @@ const MODEL_CONTEXT_LIMITS = {
   "gpt-4o-mini": 128e3,
   "gpt-4-turbo": 128e3,
   "gpt-4": 8192,
-  "o1": 2e5,
+  o1: 2e5,
   "o1-mini": 128e3,
-  "o3": 2e5,
+  o3: 2e5,
   "o3-mini": 2e5,
   // Google models
+  "gemini-3-pro-preview": 2e6,
+  "gemini-3-flash-preview": 1e6,
+  "gemini-2.5-pro": 2e6,
+  "gemini-2.5-flash": 1e6,
+  "gemini-2.5-flash-lite": 1e6,
   "gemini-2.0-flash": 1e6,
   "gemini-1.5-pro": 2e6,
   "gemini-1.5-flash": 1e6
@@ -75624,9 +75709,9 @@ function ContextUsageIndicator({
   const contextLimit = getContextLimit(modelId);
   const usedTokens = tokenUsage.inputTokens;
   const usagePercent = Math.min(usedTokens / contextLimit * 100, 100);
-  let colorClass = "text-muted-foreground";
-  let bgColorClass = "bg-muted-foreground/20";
-  let barColorClass = "bg-muted-foreground";
+  let colorClass = "text-blue-500";
+  let bgColorClass = "bg-blue-500/20";
+  let barColorClass = "bg-blue-500";
   let statusText = "Normal";
   if (usagePercent >= 90) {
     colorClass = "text-red-500";
@@ -75670,96 +75755,97 @@ function ContextUsageIndicator({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      PopoverContent,
-      {
-        className: "w-72 p-0 bg-background border-border",
-        align: "end",
-        sideOffset: 8,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-3 space-y-3", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium text-foreground", children: "Context Window" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn("text-[10px] font-medium px-1.5 py-0.5 rounded", bgColorClass, colorClass), children: statusText })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-2 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: cn("h-full rounded-full transition-all", barColorClass),
-                style: { width: `${usagePercent}%` }
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between text-[10px] text-muted-foreground", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                formatTokenCountFull(usedTokens),
-                " tokens"
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                formatTokenCountFull(contextLimit),
-                " max"
-              ] })
-            ] })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverContent, { className: "w-72 p-0 bg-background border-border", align: "end", sideOffset: 8, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-3 space-y-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium text-foreground", children: "Context Window" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "span",
+          {
+            className: cn(
+              "text-[10px] font-medium px-1.5 py-0.5 rounded",
+              bgColorClass,
+              colorClass
+            ),
+            children: statusText
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-2 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: cn("h-full rounded-full transition-all", barColorClass),
+            style: { width: `${usagePercent}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between text-[10px] text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+            formatTokenCountFull(usedTokens),
+            " tokens"
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5 pt-2 border-t border-border", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wider", children: "Token Breakdown" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "size-3" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Input" })
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", children: formatTokenCountFull(tokenUsage.inputTokens) })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "size-3" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Output" })
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", children: formatTokenCountFull(tokenUsage.outputTokens) })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between text-xs pt-1 border-t border-border/50", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Total" })
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", children: formatTokenCountFull(tokenUsage.totalTokens) })
-              ] })
-            ] })
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+            formatTokenCountFull(contextLimit),
+            " max"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5 pt-2 border-t border-border", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wider", children: "Token Breakdown" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUp, { className: "size-3" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Input" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", children: formatTokenCountFull(tokenUsage.inputTokens) })
           ] }),
-          hasCacheData && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5 pt-2 border-t border-border", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wider", children: "Cache" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
-              tokenUsage.cacheReadTokens !== void 0 && tokenUsage.cacheReadTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-green-500", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(Database, { className: "size-3" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Cache hits" })
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-green-500", children: formatTokenCountFull(tokenUsage.cacheReadTokens) })
-              ] }),
-              tokenUsage.cacheCreationTokens !== void 0 && tokenUsage.cacheCreationTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-blue-500", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(Database, { className: "size-3" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Cache created" })
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-blue-500", children: formatTokenCountFull(tokenUsage.cacheCreationTokens) })
-              ] })
-            ] })
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDown, { className: "size-3" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Output" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", children: formatTokenCountFull(tokenUsage.outputTokens) })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pt-2 border-t border-border", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-[10px] text-muted-foreground", children: [
-            "Last updated: ",
-            tokenUsage.lastUpdated.toLocaleTimeString()
-          ] }) })
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between text-xs pt-1 border-t border-border/50", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Total" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", children: formatTokenCountFull(tokenUsage.totalTokens) })
+          ] })
         ] })
-      }
-    )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5 pt-2 border-t border-border", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wider", children: "Cache" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1", children: hasCacheData ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          tokenUsage.cacheReadTokens !== void 0 && tokenUsage.cacheReadTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-green-500", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Database, { className: "size-3" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Cache hits" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-green-500", children: formatTokenCountFull(tokenUsage.cacheReadTokens) })
+          ] }),
+          tokenUsage.cacheCreationTokens !== void 0 && tokenUsage.cacheCreationTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-blue-500", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Database, { className: "size-3" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Cache created" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-blue-500", children: formatTokenCountFull(tokenUsage.cacheCreationTokens) })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-muted-foreground", children: "No cached tokens" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pt-2 border-t border-border", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-[10px] text-muted-foreground", children: [
+        "Last updated: ",
+        tokenUsage.lastUpdated.toLocaleTimeString()
+      ] }) })
+    ] }) })
   ] });
 }
 function ChatContainer({ threadId }) {
-  const [input, setInput] = reactExports.useState("");
   const inputRef = reactExports.useRef(null);
   const scrollRef = reactExports.useRef(null);
   const isAtBottomRef = reactExports.useRef(true);
-  const { loadThreads, generateTitleForFirstMessage } = useAppStore();
+  const { threads, loadThreads, generateTitleForFirstMessage } = useAppStore();
   const {
     messages: threadMessages,
     pendingApproval,
@@ -75768,13 +75854,15 @@ function ChatContainer({ threadId }) {
     workspacePath,
     tokenUsage,
     currentModel,
+    draftInput: input,
     setTodos,
     setWorkspaceFiles,
     setWorkspacePath,
     setPendingApproval,
     appendMessage,
     setError,
-    clearError
+    clearError,
+    setDraftInput: setInput
   } = useCurrentThread(threadId);
   const streamData = useThreadStream(threadId);
   const stream = streamData.stream;
@@ -75784,12 +75872,15 @@ function ChatContainer({ threadId }) {
       if (!pendingApproval || !stream) return;
       setPendingApproval(null);
       try {
-        await stream.submit(null, { command: { resume: { decision } } });
+        await stream.submit(null, {
+          command: { resume: { decision } },
+          config: { configurable: { thread_id: threadId, model_id: currentModel } }
+        });
       } catch (err) {
         console.error("[ChatContainer] Resume command failed:", err);
       }
     },
-    [pendingApproval, setPendingApproval, stream]
+    [pendingApproval, setPendingApproval, stream, threadId, currentModel]
   );
   const agentValues = stream?.values;
   const streamTodos = agentValues?.todos;
@@ -75924,7 +76015,11 @@ function ChatContainer({ threadId }) {
     };
     appendMessage(userMessage);
     if (isFirstMessage) {
-      generateTitleForFirstMessage(threadId, message);
+      const currentThread = threads.find((t) => t.thread_id === threadId);
+      const hasDefaultTitle = currentThread?.title?.startsWith("Thread ");
+      if (hasDefaultTitle) {
+        generateTitleForFirstMessage(threadId, message);
+      }
     }
     await stream.submit(
       {
@@ -75932,7 +76027,7 @@ function ChatContainer({ threadId }) {
       },
       {
         config: {
-          configurable: { thread_id: threadId }
+          configurable: { thread_id: threadId, model_id: currentModel }
         }
       }
     );
@@ -76034,7 +76129,17 @@ function ChatContainer({ threadId }) {
             style: { minHeight: "48px", maxHeight: "200px" }
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center shrink-0 h-12", children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: handleCancel, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Square, { className: "size-4" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "submit", variant: "default", size: "icon", disabled: !input.trim(), className: "rounded-md", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { className: "size-4" }) }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center shrink-0 h-12", children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: handleCancel, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Square, { className: "size-4" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            type: "submit",
+            variant: "default",
+            size: "icon",
+            disabled: !input.trim(),
+            className: "rounded-md",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { className: "size-4" })
+          }
+        ) })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -76063,6 +76168,781 @@ function TabbedPanel({ threadId, showTabBar = true }) {
     ) })
   ] });
 }
+function Switch({ checked = false, onCheckedChange, disabled = false, className, onClick, ...props }) {
+  const handleClick = (e) => {
+    onClick?.(e);
+    if (!disabled) {
+      onCheckedChange?.(!checked);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      disabled,
+      onClick: handleClick,
+      className: cn(
+        "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white/20 focus:ring-offset-2 focus:ring-offset-[#0D0D0F] disabled:cursor-not-allowed disabled:opacity-50",
+        checked ? "bg-blue-500" : "bg-white/10",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "span",
+        {
+          className: cn(
+            "pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
+            checked ? "translate-x-4" : "translate-x-0"
+          )
+        }
+      )
+    }
+  );
+}
+const SKILL_TEMPLATES = [
+  {
+    id: "custom-code-language",
+    name: "Programming Language Expert",
+    description: "Create a skill for a specific programming language",
+    category: "coding",
+    prompt: `You are an expert in {{LANGUAGE}} programming. Your expertise includes:
+
+## Core {{LANGUAGE}} Knowledge
+- Language syntax and best practices
+- Standard library and common frameworks
+- Idiomatic {{LANGUAGE}} code patterns
+- Performance considerations specific to {{LANGUAGE}}
+
+## Code Style
+- Follow {{LANGUAGE}} community conventions
+- Write clear, readable code
+- Use meaningful variable and function names
+- Add comments only when necessary
+
+## Common Patterns
+{{COMMON_PATTERNS}}
+
+## Best Practices
+{{BEST_PRACTICES}}
+
+## Testing
+- Testing frameworks for {{LANGUAGE}}
+- Writing testable code
+- Test organization and structure
+
+When helping with {{LANGUAGE}}:
+1. Follow modern {{LANGUAGE}} conventions
+2. Use appropriate libraries and frameworks
+3. Write idiomatic, clean code
+4. Explain {{LANGUAGE}}-specific concepts`,
+    variables: [
+      {
+        name: "LANGUAGE",
+        label: "Programming Language",
+        placeholder: "e.g., Rust, Go, Ruby, PHP",
+        required: true
+      },
+      {
+        name: "COMMON_PATTERNS",
+        label: "Common Patterns",
+        placeholder: "Describe common patterns in this language...",
+        required: false
+      },
+      {
+        name: "BEST_PRACTICES",
+        label: "Best Practices",
+        placeholder: "Describe best practices for this language...",
+        required: false
+      }
+    ]
+  },
+  {
+    id: "custom-framework",
+    name: "Framework Expert",
+    description: "Create a skill for a specific framework (React, Vue, Django, etc.)",
+    category: "coding",
+    prompt: `You are an expert in {{FRAMEWORK}} development. Your expertise includes:
+
+## {{FRAMEWORK}} Fundamentals
+- Framework architecture and design patterns
+- Component/model/view/controller structure
+- State management approaches
+- Routing and navigation
+
+## Best Practices
+- {{FRAMEWORK}} conventions and patterns
+- Performance optimization
+- Code organization and structure
+- Testing strategies
+
+## Common Tasks
+{{COMMON_TASKS}}
+
+## Ecosystem
+- Popular libraries and tools
+- Development workflow
+- Build and deployment
+
+When working with {{FRAMEWORK}}:
+1. Follow framework conventions
+2. Use recommended patterns
+3. Consider performance implications
+4. Write maintainable code`,
+    variables: [
+      {
+        name: "FRAMEWORK",
+        label: "Framework Name",
+        placeholder: "e.g., Laravel, Spring Boot, Express.js",
+        required: true
+      },
+      {
+        name: "COMMON_TASKS",
+        label: "Common Tasks",
+        placeholder: "List common tasks for this framework...",
+        required: false
+      }
+    ]
+  },
+  {
+    id: "custom-domain",
+    name: "Domain Expert",
+    description: "Create a skill for a specific domain (finance, healthcare, education, etc.)",
+    category: "custom",
+    prompt: `You are an expert in {{DOMAIN}}. Your expertise includes:
+
+## Domain Knowledge
+- {{DOMAIN}} terminology and concepts
+- Industry standards and regulations
+- Best practices and workflows
+- Common tools and technologies
+
+## Problem Solving
+- Typical {{DOMAIN}} challenges
+- Analytical approaches
+- Solution strategies
+- Decision-making frameworks
+
+## Communication
+- Explain {{DOMAIN}} concepts clearly
+- Use appropriate terminology
+- Provide context for technical decisions
+- Consider stakeholder needs
+
+When helping with {{DOMAIN}}:
+1. Understand the specific context
+2. Apply domain-relevant knowledge
+3. Consider industry standards
+4. Explain domain-specific concepts`,
+    variables: [
+      {
+        name: "DOMAIN",
+        label: "Domain Name",
+        placeholder: "e.g., Finance, Healthcare, E-commerce",
+        required: true
+      }
+    ]
+  },
+  {
+    id: "custom-tool",
+    name: "Tool/CLI Expert",
+    description: "Create a skill for a specific command-line tool or software",
+    category: "system",
+    prompt: `You are an expert in {{TOOL_NAME}}. Your expertise includes:
+
+## {{TOOL_NAME}} Overview
+- Tool purpose and use cases
+- Installation and setup
+- Basic commands and operations
+- Advanced features
+
+## Common Commands
+{{COMMON_COMMANDS}}
+
+## Best Practices
+- Efficient workflows
+- Common pitfalls and how to avoid them
+- Performance considerations
+- Integration with other tools
+
+## Troubleshooting
+- Common issues and solutions
+- Debugging techniques
+- Error interpretation
+
+When helping with {{TOOL_NAME}}:
+1. Provide clear command examples
+2. Explain flags and options
+3. Show expected output
+4. Include troubleshooting tips`,
+    variables: [
+      {
+        name: "TOOL_NAME",
+        label: "Tool Name",
+        placeholder: "e.g., Docker, Kubernetes, Git",
+        required: true
+      },
+      {
+        name: "COMMON_COMMANDS",
+        label: "Common Commands",
+        placeholder: "List common commands with examples...",
+        required: false
+      }
+    ]
+  },
+  {
+    id: "custom-language-learning",
+    name: "Language Learning Assistant",
+    description: "Create a skill for learning a human language",
+    category: "creative",
+    prompt: `You are a {{LANGUAGE}} language learning assistant. Your expertise includes:
+
+## Language Skills
+- {{LANGUAGE}} grammar and syntax
+- Vocabulary and expressions
+- Pronunciation guidance
+- Cultural context and nuances
+
+## Teaching Approach
+- Explain concepts clearly
+- Provide examples and practice
+- Correct mistakes gently
+- Encourage conversation practice
+
+## Learning Resources
+- Common learning materials
+- Practice exercises
+- Real-world usage examples
+- Tips for effective learning
+
+When helping with {{LANGUAGE}}:
+1. Assess current skill level
+2. Provide appropriate level instruction
+3. Use natural examples
+4. Encourage practice and immersion`,
+    variables: [
+      {
+        name: "LANGUAGE",
+        label: "Language",
+        placeholder: "e.g., Spanish, Japanese, German",
+        required: true
+      }
+    ]
+  }
+];
+function renderTemplate(template, values) {
+  let rendered = template.prompt;
+  for (const variable of template.variables || []) {
+    const value = values[variable.name] || "";
+    const placeholder = `{{${variable.name}}}`;
+    rendered = rendered.replace(new RegExp(placeholder, "g"), value);
+  }
+  return rendered;
+}
+const categories = [
+  { value: "coding", label: "Coding", description: "Programming and development tasks" },
+  { value: "analysis", label: "Analysis", description: "Data analysis and research" },
+  { value: "creative", label: "Creative", description: "Writing and creative work" },
+  { value: "data", label: "Data", description: "Database and data management" },
+  { value: "system", label: "System", description: "System operations and debugging" },
+  { value: "custom", label: "Custom", description: "Other specialized skills" }
+];
+function CreateSkillDialog({ open, onClose, onCreate }) {
+  const [mode, setMode] = reactExports.useState("custom");
+  const [selectedTemplate, setSelectedTemplate] = reactExports.useState(null);
+  const [templateValues, setTemplateValues] = reactExports.useState({});
+  const [name2, setName] = reactExports.useState("");
+  const [description, setDescription] = reactExports.useState("");
+  const [category, setCategory] = reactExports.useState("custom");
+  const [prompt, setPrompt] = reactExports.useState("");
+  reactExports.useEffect(() => {
+    if (!open) {
+      setMode("custom");
+      setSelectedTemplate(null);
+      setTemplateValues({});
+      setName("");
+      setDescription("");
+      setCategory("custom");
+      setPrompt("");
+    }
+  }, [open]);
+  reactExports.useEffect(() => {
+    if (mode === "template" && selectedTemplate) {
+      const template = SKILL_TEMPLATES.find((t) => t.id === selectedTemplate);
+      if (template) {
+        setCategory(template.category);
+        setName(template.name.replace(/{{.*?}}/g, "Custom"));
+        setDescription(template.description);
+        setPrompt(template.prompt);
+      }
+    }
+  }, [selectedTemplate, mode]);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const finalPrompt = mode === "template" && selectedTemplate ? renderTemplate(SKILL_TEMPLATES.find((t) => t.id === selectedTemplate), templateValues) : prompt;
+    if (!name2.trim() || !description.trim() || !finalPrompt.trim()) {
+      return;
+    }
+    onCreate({
+      name: name2.trim(),
+      description: description.trim(),
+      category,
+      prompt: finalPrompt.trim()
+    });
+    setMode("custom");
+    setSelectedTemplate(null);
+    setTemplateValues({});
+    setName("");
+    setDescription("");
+    setCategory("custom");
+    setPrompt("");
+    onClose();
+  };
+  const currentTemplate = SKILL_TEMPLATES.find((t) => t.id === selectedTemplate);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full max-w-3xl mx-4 bg-[#1A1A1D] rounded-lg shadow-xl border border-white/10", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-white/5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold text-white", children: "Create Custom Skill" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: onClose,
+          className: "text-gray-400 hover:text-white transition-colors",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 px-6 py-3 border-b border-white/5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setMode("custom"),
+          className: `px-4 py-2 text-sm font-medium rounded-md transition-colors ${mode === "custom" ? "bg-blue-500 text-white" : "bg-white/5 text-gray-400 hover:bg-white/10"}`,
+          children: "Custom"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setMode("template"),
+          className: `px-4 py-2 text-sm font-medium rounded-md transition-colors ${mode === "template" ? "bg-blue-500 text-white" : "bg-white/5 text-gray-400 hover:bg-white/10"}`,
+          children: "From Template"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleSubmit, className: "p-6 space-y-4", children: [
+      mode === "template" && /* Template Selection */
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-300 mb-2", children: "Choose Template" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-2 max-h-48 overflow-y-auto", children: SKILL_TEMPLATES.map((template) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSelectedTemplate(template.id),
+            className: `px-3 py-2 text-left text-sm rounded-md transition-colors ${selectedTemplate === template.id ? "bg-blue-500/20 text-blue-400 border border-blue-500/50" : "bg-white/5 text-gray-400 border border-white/10 hover:bg-white/10"}`,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium", children: template.name }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs opacity-75", children: template.description })
+            ]
+          },
+          template.id
+        )) })
+      ] }),
+      mode === "template" && currentTemplate && currentTemplate.variables && currentTemplate.variables.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3 p-4 bg-white/5 rounded-lg border border-white/10", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-medium text-white", children: "Customize Template" }),
+        currentTemplate.variables.map((variable) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm text-gray-300 mb-1", children: [
+            variable.label,
+            variable.required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: " *" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              type: "text",
+              value: templateValues[variable.name] || "",
+              onChange: (e) => setTemplateValues({ ...templateValues, [variable.name]: e.target.value }),
+              placeholder: variable.placeholder,
+              className: "w-full px-3 py-2 text-sm text-white placeholder-gray-500 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-blue-500",
+              required: variable.required
+            }
+          )
+        ] }, variable.name))
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-300 mb-1", children: [
+          "Skill Name ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            type: "text",
+            value: name2,
+            onChange: (e) => setName(e.target.value),
+            placeholder: "e.g., React Expert, Python Specialist",
+            className: "w-full px-3 py-2 text-sm text-white placeholder-gray-500 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-blue-500",
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-300 mb-1", children: [
+          "Description ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            type: "text",
+            value: description,
+            onChange: (e) => setDescription(e.target.value),
+            placeholder: "Brief description of what this skill does",
+            className: "w-full px-3 py-2 text-sm text-white placeholder-gray-500 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-blue-500",
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium text-gray-300 mb-2", children: "Category" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-3 gap-2", children: categories.map((cat) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setCategory(cat.value),
+            className: `px-3 py-2 text-left text-sm rounded-md transition-colors ${category === cat.value ? "bg-blue-500/20 text-blue-400 border border-blue-500/50" : "bg-white/5 text-gray-400 border border-white/10 hover:bg-white/10"}`,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium", children: cat.label }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs opacity-75", children: cat.description })
+            ]
+          },
+          cat.value
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium text-gray-300 mb-1", children: [
+          "Specialized Prompt ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "textarea",
+          {
+            value: prompt,
+            onChange: (e) => setPrompt(e.target.value),
+            placeholder: "Enter the specialized instructions and expertise for this skill...",
+            rows: 8,
+            className: "w-full px-3 py-2 text-sm text-white placeholder-gray-500 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-blue-500 resize-none",
+            required: true
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-gray-500", children: "This prompt will be loaded when the agent activates this skill, providing specialized knowledge and instructions." })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end gap-3 pt-4 border-t border-white/5", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "px-4 py-2 text-sm text-gray-400 hover:text-white transition-colors",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: !name2.trim() || !description.trim() || !prompt.trim(),
+            className: "px-4 py-2 text-sm text-white bg-blue-500 hover:bg-blue-600 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-md transition-colors",
+            children: "Create Skill"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+const categoryColors = {
+  coding: "bg-blue-500/10 text-blue-500 border-blue-500/20",
+  analysis: "bg-purple-500/10 text-purple-500 border-purple-500/20",
+  creative: "bg-pink-500/10 text-pink-500 border-pink-500/20",
+  data: "bg-green-500/10 text-green-500 border-green-500/20",
+  system: "bg-orange-500/10 text-orange-500 border-orange-500/20",
+  custom: "bg-cyan-500/10 text-cyan-500 border-cyan-500/20"
+};
+function SkillDetailDialog({ skill, open, onClose, onToggle, onDelete }) {
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full max-w-3xl mx-4 max-h-[80vh] bg-[#1A1A1D] rounded-lg shadow-xl border border-white/10 flex flex-col", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between px-6 py-4 border-b border-white/5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold text-white", children: skill.name }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "span",
+            {
+              className: `px-2 py-0.5 text-xs font-medium rounded border ${categoryColors[skill.category] || categoryColors.custom}`,
+              children: skill.category
+            }
+          ),
+          skill.isBuiltin && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-2 py-0.5 text-xs font-medium rounded bg-white/5 text-gray-400 border border-white/10", children: "Built-in" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-400", children: skill.description })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: onClose,
+          className: "ml-4 text-gray-400 hover:text-white transition-colors",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4 mb-6", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white/5 rounded-lg p-3 border border-white/5", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 mb-1", children: "Status" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-medium text-white", children: skill.enabled ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-green-400", children: "Enabled" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "Disabled" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white/5 rounded-lg p-3 border border-white/5", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-gray-500 mb-1", children: "Type" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-medium text-white", children: skill.isBuiltin ? "Built-in Skill" : "Custom Skill" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium text-gray-300 mb-2", children: "Specialized Prompt" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white/5 rounded-lg p-4 border border-white/5", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "text-sm text-gray-300 whitespace-pre-wrap font-mono", children: skill.prompt }) })
+      ] }),
+      skill.subSkills && skill.subSkills.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium text-gray-300 mb-2", children: "Sub Skills" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-2", children: skill.subSkills.map((subSkill) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "span",
+          {
+            className: "px-3 py-1 text-sm bg-white/5 text-gray-300 rounded-md border border-white/10",
+            children: subSkill
+          },
+          subSkill
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-t border-white/5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-gray-500", children: [
+        "Created: ",
+        new Date(skill.createdAt).toLocaleDateString(),
+        " • Updated:",
+        " ",
+        new Date(skill.updatedAt).toLocaleDateString()
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+        !skill.isBuiltin && onDelete && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: () => {
+              if (confirm(`Are you sure you want to delete "${skill.name}"?`)) {
+                onDelete(skill.id);
+                onClose();
+              }
+            },
+            className: "px-4 py-2 text-sm text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded-md transition-colors",
+            children: "Delete"
+          }
+        ),
+        onToggle && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: () => onToggle(skill.id, !skill.enabled),
+            className: `px-4 py-2 text-sm rounded-md transition-colors ${skill.enabled ? "bg-white/10 text-gray-300 hover:bg-white/15" : "bg-blue-500 text-white hover:bg-blue-600"}`,
+            children: skill.enabled ? "Disable" : "Enable"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "px-4 py-2 text-sm text-white bg-white/10 hover:bg-white/15 rounded-md transition-colors",
+            children: "Close"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+function SkillsPanel(_props) {
+  const [skills, setSkills] = reactExports.useState([]);
+  const [loading, setLoading] = reactExports.useState(true);
+  const [filter, setFilter] = reactExports.useState("all");
+  const [searchQuery, setSearchQuery] = reactExports.useState("");
+  const [showCreateDialog, setShowCreateDialog] = reactExports.useState(false);
+  const [selectedSkill, setSelectedSkill] = reactExports.useState(null);
+  reactExports.useEffect(() => {
+    loadSkills();
+  }, []);
+  const loadSkills = async () => {
+    setLoading(true);
+    try {
+      const result = await window.api.skills.list();
+      if (result.success && result.skills) {
+        setSkills(result.skills);
+      }
+    } catch (error) {
+      console.error("Failed to load skills:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const toggleSkill = async (skillId, enabled) => {
+    const result = await window.api.skills.toggle(skillId, enabled);
+    if (result.success) {
+      setSkills(
+        (prev) => prev.map((s2) => s2.id === skillId ? { ...s2, enabled: result.enabled ?? false } : s2)
+      );
+    }
+  };
+  const handleCreateSkill = async (skill) => {
+    const result = await window.api.skills.create(skill);
+    if (result.success) {
+      loadSkills();
+    }
+  };
+  const handleDeleteSkill = async (skillId) => {
+    const result = await window.api.skills.delete(skillId);
+    if (result.success) {
+      loadSkills();
+    }
+  };
+  const filteredSkills = skills.filter((skill) => {
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      if (!skill.name.toLowerCase().includes(query) && !skill.description.toLowerCase().includes(query)) {
+        return false;
+      }
+    }
+    if (filter === "enabled") return skill.enabled;
+    if (filter === "builtin") return skill.isBuiltin;
+    if (filter === "user") return !skill.isBuiltin;
+    return true;
+  });
+  const groupedSkills = filteredSkills.reduce(
+    (acc, skill) => {
+      if (!acc[skill.category]) {
+        acc[skill.category] = [];
+      }
+      acc[skill.category].push(skill);
+      return acc;
+    },
+    {}
+  );
+  const categoryColors2 = {
+    coding: "bg-blue-500/10 text-blue-500",
+    analysis: "bg-purple-500/10 text-purple-500",
+    creative: "bg-pink-500/10 text-pink-500",
+    data: "bg-green-500/10 text-green-500",
+    system: "bg-orange-500/10 text-orange-500",
+    custom: "bg-cyan-500/10 text-cyan-500"
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full bg-[#0D0D0F]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-white/5", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold text-white", children: "Skills" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              onClick: () => setShowCreateDialog(true),
+              className: "px-3 py-1 text-xs font-medium text-white bg-blue-500 hover:bg-blue-600 rounded-md transition-colors",
+              children: "+ New Skill"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-400", children: [
+            skills.filter((s2) => s2.enabled).length,
+            " / ",
+            skills.length,
+            " enabled"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 px-4 py-3 border-b border-white/5", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Search skills...",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            className: "w-full px-3 py-2 text-sm text-white placeholder-gray-500 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-white/20"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-2", children: ["all", "enabled", "builtin", "user"].map((f2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: () => setFilter(f2),
+            className: `px-3 py-1 text-xs rounded-md transition-colors ${filter === f2 ? "bg-white/10 text-white" : "text-gray-400 hover:text-white hover:bg-white/5"}`,
+            children: f2.charAt(0).toUpperCase() + f2.slice(1)
+          },
+          f2
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4", children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-32", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-400", children: "Loading skills..." }) }) : filteredSkills.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col items-center justify-center h-32 text-gray-400", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm", children: "No skills found" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: Object.entries(groupedSkills).map(([category, categorySkills]) => {
+        const skillsList = categorySkills;
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium text-gray-300 mb-2 capitalize", children: category }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: skillsList.map((skill) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              onClick: () => setSelectedSkill(skill),
+              className: "flex items-start justify-between p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-medium text-white", children: skill.name }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Badge,
+                      {
+                        className: categoryColors2[skill.category] || categoryColors2.custom,
+                        children: skill.category
+                      }
+                    ),
+                    skill.isBuiltin && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "bg-white/5 text-gray-400 text-xs", children: "Built-in" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-400 line-clamp-2", children: skill.description })
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Switch,
+                  {
+                    checked: skill.enabled,
+                    onCheckedChange: (checked) => {
+                      toggleSkill(skill.id, checked);
+                    },
+                    onClick: (e) => e.stopPropagation(),
+                    className: "ml-3 flex-shrink-0"
+                  }
+                )
+              ]
+            },
+            skill.id
+          )) })
+        ] }, category);
+      }) }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CreateSkillDialog,
+      {
+        open: showCreateDialog,
+        onClose: () => setShowCreateDialog(false),
+        onCreate: handleCreateSkill
+      }
+    ),
+    selectedSkill && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SkillDetailDialog,
+      {
+        skill: selectedSkill,
+        open: !!selectedSkill,
+        onClose: () => setSelectedSkill(null),
+        onToggle: toggleSkill,
+        onDelete: handleDeleteSkill
+      }
+    )
+  ] });
+}
 const HEADER_HEIGHT = 40;
 const HANDLE_HEIGHT = 6;
 const MIN_CONTENT_HEIGHT = 60;
@@ -76140,38 +77020,43 @@ function RightPanel() {
   const [tasksOpen, setTasksOpen] = reactExports.useState(true);
   const [filesOpen, setFilesOpen] = reactExports.useState(true);
   const [agentsOpen, setAgentsOpen] = reactExports.useState(true);
+  const [skillsOpen, setSkillsOpen] = reactExports.useState(false);
   const [tasksHeight, setTasksHeight] = reactExports.useState(null);
   const [filesHeight, setFilesHeight] = reactExports.useState(null);
   const [agentsHeight, setAgentsHeight] = reactExports.useState(null);
+  const [skillsHeight, setSkillsHeight] = reactExports.useState(null);
   const dragStartHeights = reactExports.useRef(null);
   const getAvailableContentHeight = reactExports.useCallback(() => {
     if (!containerRef.current) return 0;
     const totalHeight = containerRef.current.clientHeight;
-    let used = HEADER_HEIGHT * 3;
-    if (tasksOpen && (filesOpen || agentsOpen)) used += HANDLE_HEIGHT;
-    if (filesOpen && agentsOpen) used += HANDLE_HEIGHT;
+    let used = HEADER_HEIGHT * 4;
+    const openPanels = [tasksOpen, filesOpen, agentsOpen, skillsOpen].filter(Boolean).length;
+    used += HANDLE_HEIGHT * (openPanels - 1);
     return Math.max(0, totalHeight - used);
-  }, [tasksOpen, filesOpen, agentsOpen]);
+  }, [tasksOpen, filesOpen, agentsOpen, skillsOpen]);
   const getContentHeights = reactExports.useCallback(() => {
     const available = getAvailableContentHeight();
-    const openCount = [tasksOpen, filesOpen, agentsOpen].filter(Boolean).length;
+    const openCount = [tasksOpen, filesOpen, agentsOpen, skillsOpen].filter(Boolean).length;
     if (openCount === 0) {
-      return { tasks: 0, files: 0, agents: 0 };
+      return { tasks: 0, files: 0, agents: 0, skills: 0 };
     }
     const defaultHeight = available / openCount;
     return {
       tasks: tasksOpen ? tasksHeight ?? defaultHeight : 0,
       files: filesOpen ? filesHeight ?? defaultHeight : 0,
-      agents: agentsOpen ? agentsHeight ?? defaultHeight : 0
+      agents: agentsOpen ? agentsHeight ?? defaultHeight : 0,
+      skills: skillsOpen ? skillsHeight ?? defaultHeight : 0
     };
   }, [
     getAvailableContentHeight,
     tasksOpen,
     filesOpen,
     agentsOpen,
+    skillsOpen,
     tasksHeight,
     filesHeight,
-    agentsHeight
+    agentsHeight,
+    skillsHeight
   ]);
   const handleTasksResize = reactExports.useCallback(
     (totalDelta) => {
@@ -76181,7 +77066,12 @@ function RightPanel() {
       }
       const start = dragStartHeights.current;
       const available = getAvailableContentHeight();
-      const otherStart = filesOpen ? start.files : start.agents;
+      let nextPanel = null;
+      if (filesOpen) nextPanel = "files";
+      else if (agentsOpen) nextPanel = "agents";
+      else if (skillsOpen) nextPanel = "skills";
+      if (!nextPanel) return;
+      const otherStart = start[nextPanel];
       let newTasksHeight = start.tasks + totalDelta;
       let newOtherHeight = otherStart - totalDelta;
       if (newTasksHeight < MIN_CONTENT_HEIGHT) {
@@ -76192,8 +77082,8 @@ function RightPanel() {
         newOtherHeight = MIN_CONTENT_HEIGHT;
         newTasksHeight = start.tasks + (otherStart - MIN_CONTENT_HEIGHT);
       }
-      const thirdPanelHeight = filesOpen && agentsOpen ? agentsHeight ?? available / 3 : 0;
-      const maxForTwo = available - thirdPanelHeight;
+      const belowHeight = nextPanel === "files" && (agentsOpen || skillsOpen) ? (agentsOpen ? agentsHeight ?? available / 4 : 0) + (skillsOpen ? skillsHeight ?? available / 4 : 0) : nextPanel === "agents" && skillsOpen ? skillsHeight ?? available / 4 : 0;
+      const maxForTwo = available - belowHeight;
       if (newTasksHeight + newOtherHeight > maxForTwo) {
         const excess = newTasksHeight + newOtherHeight - maxForTwo;
         if (totalDelta > 0) {
@@ -76203,20 +77093,19 @@ function RightPanel() {
         }
       }
       setTasksHeight(newTasksHeight);
-      if (filesOpen) {
-        setFilesHeight(newOtherHeight);
-      } else if (agentsOpen) {
-        setAgentsHeight(newOtherHeight);
-      }
+      if (nextPanel === "files") setFilesHeight(newOtherHeight);
+      else if (nextPanel === "agents") setAgentsHeight(newOtherHeight);
+      else if (nextPanel === "skills") setSkillsHeight(newOtherHeight);
       if (newTasksHeight < COLLAPSE_THRESHOLD) {
         setTasksOpen(false);
       }
       if (newOtherHeight < COLLAPSE_THRESHOLD) {
-        if (filesOpen) setFilesOpen(false);
-        else if (agentsOpen) setAgentsOpen(false);
+        if (nextPanel === "files") setFilesOpen(false);
+        else if (nextPanel === "agents") setAgentsOpen(false);
+        else if (nextPanel === "skills") setSkillsOpen(false);
       }
     },
-    [getContentHeights, getAvailableContentHeight, filesOpen, agentsOpen, agentsHeight]
+    [getContentHeights, getAvailableContentHeight, filesOpen, agentsOpen, skillsOpen, agentsHeight, skillsHeight]
   );
   const handleFilesResize = reactExports.useCallback(
     (totalDelta) => {
@@ -76226,36 +77115,83 @@ function RightPanel() {
       }
       const start = dragStartHeights.current;
       const available = getAvailableContentHeight();
-      const tasksH = tasksOpen ? tasksHeight ?? available / 3 : 0;
-      const maxForFilesAndAgents = available - tasksH;
+      const tasksH = tasksOpen ? tasksHeight ?? available / 4 : 0;
+      let nextPanel = null;
+      if (agentsOpen) nextPanel = "agents";
+      else if (skillsOpen) nextPanel = "skills";
+      if (!nextPanel) return;
+      const maxForFilesAndNext = available - tasksH;
       let newFilesHeight = start.files + totalDelta;
-      let newAgentsHeight = start.agents - totalDelta;
+      let newNextHeight = start[nextPanel] - totalDelta;
       if (newFilesHeight < MIN_CONTENT_HEIGHT) {
         newFilesHeight = MIN_CONTENT_HEIGHT;
-        newAgentsHeight = start.agents + (start.files - MIN_CONTENT_HEIGHT);
+        newNextHeight = start[nextPanel] + (start.files - MIN_CONTENT_HEIGHT);
       }
-      if (newAgentsHeight < MIN_CONTENT_HEIGHT) {
-        newAgentsHeight = MIN_CONTENT_HEIGHT;
-        newFilesHeight = start.files + (start.agents - MIN_CONTENT_HEIGHT);
+      if (newNextHeight < MIN_CONTENT_HEIGHT) {
+        newNextHeight = MIN_CONTENT_HEIGHT;
+        newFilesHeight = start.files + (start[nextPanel] - MIN_CONTENT_HEIGHT);
       }
-      if (newFilesHeight + newAgentsHeight > maxForFilesAndAgents) {
-        const excess = newFilesHeight + newAgentsHeight - maxForFilesAndAgents;
+      if (newFilesHeight + newNextHeight > maxForFilesAndNext) {
+        const excess = newFilesHeight + newNextHeight - maxForFilesAndNext;
         if (totalDelta > 0) {
-          newAgentsHeight = Math.max(MIN_CONTENT_HEIGHT, newAgentsHeight - excess);
+          newNextHeight = Math.max(MIN_CONTENT_HEIGHT, newNextHeight - excess);
         } else {
           newFilesHeight = Math.max(MIN_CONTENT_HEIGHT, newFilesHeight - excess);
         }
       }
       setFilesHeight(newFilesHeight);
-      setAgentsHeight(newAgentsHeight);
+      if (nextPanel === "agents") setAgentsHeight(newNextHeight);
+      else if (nextPanel === "skills") setSkillsHeight(newNextHeight);
       if (newFilesHeight < COLLAPSE_THRESHOLD) {
         setFilesOpen(false);
       }
+      if (newNextHeight < COLLAPSE_THRESHOLD) {
+        if (nextPanel === "agents") setAgentsOpen(false);
+        else if (nextPanel === "skills") setSkillsOpen(false);
+      }
+    },
+    [getContentHeights, getAvailableContentHeight, tasksOpen, tasksHeight, agentsOpen, skillsOpen]
+  );
+  const handleAgentsResize = reactExports.useCallback(
+    (totalDelta) => {
+      if (!dragStartHeights.current) {
+        const heights2 = getContentHeights();
+        dragStartHeights.current = { ...heights2 };
+      }
+      const start = dragStartHeights.current;
+      const available = getAvailableContentHeight();
+      const tasksH = tasksOpen ? tasksHeight ?? available / 4 : 0;
+      const filesH = filesOpen ? filesHeight ?? available / 4 : 0;
+      const aboveHeight = tasksH + filesH;
+      const maxForAgentsAndSkills = available - aboveHeight;
+      let newAgentsHeight = start.agents + totalDelta;
+      let newSkillsHeight = start.skills - totalDelta;
+      if (newAgentsHeight < MIN_CONTENT_HEIGHT) {
+        newAgentsHeight = MIN_CONTENT_HEIGHT;
+        newSkillsHeight = start.skills + (start.agents - MIN_CONTENT_HEIGHT);
+      }
+      if (newSkillsHeight < MIN_CONTENT_HEIGHT) {
+        newSkillsHeight = MIN_CONTENT_HEIGHT;
+        newAgentsHeight = start.agents + (start.skills - MIN_CONTENT_HEIGHT);
+      }
+      if (newAgentsHeight + newSkillsHeight > maxForAgentsAndSkills) {
+        const excess = newAgentsHeight + newSkillsHeight - maxForAgentsAndSkills;
+        if (totalDelta > 0) {
+          newSkillsHeight = Math.max(MIN_CONTENT_HEIGHT, newSkillsHeight - excess);
+        } else {
+          newAgentsHeight = Math.max(MIN_CONTENT_HEIGHT, newAgentsHeight - excess);
+        }
+      }
+      setAgentsHeight(newAgentsHeight);
+      setSkillsHeight(newSkillsHeight);
       if (newAgentsHeight < COLLAPSE_THRESHOLD) {
         setAgentsOpen(false);
       }
+      if (newSkillsHeight < COLLAPSE_THRESHOLD) {
+        setSkillsOpen(false);
+      }
     },
-    [getContentHeights, getAvailableContentHeight, tasksOpen, tasksHeight]
+    [getContentHeights, getAvailableContentHeight, tasksOpen, filesOpen, tasksHeight, filesHeight]
   );
   reactExports.useEffect(() => {
     const handleMouseUp = () => {
@@ -76268,8 +77204,9 @@ function RightPanel() {
     setTasksHeight(null);
     setFilesHeight(null);
     setAgentsHeight(null);
-  }, [tasksOpen, filesOpen, agentsOpen]);
-  const [heights, setHeights] = reactExports.useState({ tasks: 0, files: 0, agents: 0 });
+    setSkillsHeight(null);
+  }, [tasksOpen, filesOpen, agentsOpen, skillsOpen]);
+  const [heights, setHeights] = reactExports.useState({ tasks: 0, files: 0, agents: 0, skills: 0 });
   reactExports.useEffect(() => {
     setHeights(getContentHeights());
   }, [getContentHeights]);
@@ -76292,7 +77229,7 @@ function RightPanel() {
           ),
           tasksOpen && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-auto", style: { height: heights.tasks }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TasksContent, {}) })
         ] }),
-        tasksOpen && (filesOpen || agentsOpen) && /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeHandle$1, { onDrag: handleTasksResize }),
+        tasksOpen && (filesOpen || agentsOpen || skillsOpen) && /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeHandle$1, { onDrag: handleTasksResize }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col shrink-0 border-b border-border", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             SectionHeader,
@@ -76306,8 +77243,8 @@ function RightPanel() {
           ),
           filesOpen && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-auto", style: { height: heights.files }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FilesContent, {}) })
         ] }),
-        filesOpen && agentsOpen && /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeHandle$1, { onDrag: handleFilesResize }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col shrink-0", children: [
+        filesOpen && (agentsOpen || skillsOpen) && /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeHandle$1, { onDrag: handleFilesResize }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col shrink-0 border-b border-border", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             SectionHeader,
             {
@@ -76319,6 +77256,19 @@ function RightPanel() {
             }
           ),
           agentsOpen && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-auto", style: { height: heights.agents }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(AgentsContent, {}) })
+        ] }),
+        agentsOpen && skillsOpen && /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeHandle$1, { onDrag: handleAgentsResize }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col shrink-0", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SectionHeader,
+            {
+              title: "SKILLS",
+              icon: Sparkles,
+              isOpen: skillsOpen,
+              onToggle: () => setSkillsOpen((prev) => !prev)
+            }
+          ),
+          skillsOpen && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-auto", style: { height: heights.skills }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkillsContent, {}) })
         ] })
       ]
     }
@@ -76585,14 +77535,11 @@ function buildFileTree(files) {
   return root2;
 }
 function FileTree({ files }) {
+  const { currentThreadId } = useAppStore();
+  const threadState = useThreadState(currentThreadId);
+  const openFile = threadState?.openFile;
   const tree = reactExports.useMemo(() => buildFileTree(files), [files]);
-  const [expanded, setExpanded] = reactExports.useState(() => {
-    const dirs = /* @__PURE__ */ new Set();
-    files.forEach((f2) => {
-      if (f2.is_dir ?? false) dirs.add(f2.path);
-    });
-    return dirs;
-  });
+  const [expanded, setExpanded] = reactExports.useState(/* @__PURE__ */ new Set());
   const toggleExpand = reactExports.useCallback((path2) => {
     setExpanded((prev) => {
       const next = new Set(prev);
@@ -76610,59 +77557,64 @@ function FileTree({ files }) {
       node: node2,
       depth: 0,
       expanded,
-      onToggle: toggleExpand
+      onToggle: toggleExpand,
+      openFile
     },
     node2.path
   )) });
 }
-function FileTreeNode({
-  node: node2,
-  depth,
-  expanded,
-  onToggle
-}) {
-  const { currentThreadId } = useAppStore();
-  const threadState = useThreadState(currentThreadId);
-  const openFile = threadState?.openFile;
-  const isExpanded = expanded.has(node2.path);
-  const hasChildren = node2.children.length > 0;
-  const paddingLeft = 8 + depth * 16;
-  const handleClick = () => {
-    if (node2.is_dir) {
-      onToggle(node2.path);
-    } else if (openFile) {
-      openFile(node2.path, node2.name);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        onClick: handleClick,
-        className: cn(
-          "flex items-center gap-1.5 py-1 pr-3 text-xs hover:bg-background-interactive cursor-pointer"
-        ),
-        style: { paddingLeft },
-        children: [
-          node2.is_dir ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-3.5 flex items-center justify-center shrink-0", children: hasChildren && (isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3 text-muted-foreground" })) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-3.5 shrink-0" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(FileIcon, { name: node2.name, isDir: node2.is_dir, isOpen: isExpanded }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate flex-1", children: node2.name }),
-          !node2.is_dir && node2.size !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-muted-foreground tabular-nums shrink-0", children: formatSize(node2.size) })
-        ]
+const FileTreeNode = reactExports.memo(
+  function FileTreeNode2({
+    node: node2,
+    depth,
+    expanded,
+    onToggle,
+    openFile
+  }) {
+    const isExpanded = expanded.has(node2.path);
+    const hasChildren = node2.children.length > 0;
+    const paddingLeft = 8 + depth * 16;
+    const handleClick = () => {
+      if (node2.is_dir) {
+        onToggle(node2.path);
+      } else if (openFile) {
+        openFile(node2.path, node2.name);
       }
-    ),
-    node2.is_dir && isExpanded && node2.children.map((child) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      FileTreeNode,
-      {
-        node: child,
-        depth: depth + 1,
-        expanded,
-        onToggle
-      },
-      child.path
-    ))
-  ] });
-}
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          onClick: handleClick,
+          className: cn(
+            "flex items-center gap-1.5 py-1 pr-3 text-xs hover:bg-background-interactive cursor-pointer"
+          ),
+          style: { paddingLeft },
+          children: [
+            node2.is_dir ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-3.5 flex items-center justify-center shrink-0", children: hasChildren && (isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3 text-muted-foreground" })) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-3.5 shrink-0" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(FileIcon, { name: node2.name, isDir: node2.is_dir, isOpen: isExpanded }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate flex-1", children: node2.name }),
+            !node2.is_dir && node2.size !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-muted-foreground tabular-nums shrink-0", children: formatSize(node2.size) })
+          ]
+        }
+      ),
+      node2.is_dir && isExpanded && node2.children.map((child) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        FileTreeNode2,
+        {
+          node: child,
+          depth: depth + 1,
+          expanded,
+          onToggle,
+          openFile
+        },
+        child.path
+      ))
+    ] });
+  },
+  (prevProps, nextProps) => {
+    return prevProps.node === nextProps.node && prevProps.expanded.has(prevProps.node.path) === nextProps.expanded.has(nextProps.node.path) && prevProps.openFile === nextProps.openFile && prevProps.onToggle === nextProps.onToggle && prevProps.depth === nextProps.depth;
+  }
+);
 function FileIcon({
   name: name2,
   isDir,
@@ -76738,32 +77690,329 @@ function AgentsContent() {
     agent.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground mt-1", children: agent.description })
   ] }, agent.id)) });
 }
+function SkillsContent() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SkillsPanel, {});
+}
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes}B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
 }
+const columnConfig = {
+  pending: { badge: "outline", borderColor: "border-t-border" },
+  in_progress: { badge: "info", borderColor: "border-t-status-info" },
+  interrupted: { badge: "warning", borderColor: "border-t-status-warning" },
+  done: { badge: "nominal", borderColor: "border-t-status-nominal" }
+};
+function KanbanColumn({
+  title,
+  status,
+  count: count2,
+  children
+}) {
+  const config2 = columnConfig[status];
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col min-w-[200px] w-[200px] flex-1 bg-muted/30 rounded-sm border border-border border-t-2",
+        config2.borderColor
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b border-border", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-section-header", children: title }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: config2.badge, children: count2 })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2 space-y-2", children }) })
+      ]
+    }
+  );
+}
+const Card = reactExports.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref,
+      className: cn("rounded-sm border border-border bg-card text-card-foreground", className),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+const CardHeader = reactExports.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-4", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+const CardTitle = reactExports.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { ref, className: cn("text-section-header", className), ...props })
+);
+CardTitle.displayName = "CardTitle";
+const CardDescription = reactExports.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+CardDescription.displayName = "CardDescription";
+const CardContent = reactExports.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, className: cn("p-4 pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+const CardFooter = reactExports.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, className: cn("flex items-center p-4 pt-0", className), ...props })
+);
+CardFooter.displayName = "CardFooter";
+function ThreadStatusIcon({ threadId }) {
+  const { isLoading } = useThreadStream(threadId);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-4 shrink-0 text-status-info animate-spin" });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-4 shrink-0 text-muted-foreground" });
+}
+function ThreadKanbanCard({ thread, status, onClick }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Card,
+    {
+      className: cn(
+        "cursor-pointer transition-all hover:border-border-emphasis hover:bg-background-interactive",
+        status === "in_progress" && "border-status-info/50",
+        status === "interrupted" && "!border-amber-500/50 !bg-amber-500/5"
+      ),
+      onClick,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2", children: [
+        status === "interrupted" ? /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-4 shrink-0 text-amber-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ThreadStatusIcon, { threadId: thread.thread_id }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium truncate", children: thread.title || truncate(thread.thread_id, 20) }),
+            status === "done" && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "nominal", className: "shrink-0 text-[9px]", children: "DONE" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mt-1 text-[10px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
+            formatRelativeTime(thread.updated_at)
+          ] })
+        ] })
+      ] }) })
+    }
+  );
+}
+function SubagentKanbanCard({
+  subagent,
+  parentThread,
+  onClick
+}) {
+  const isDone = subagent.status === "completed" || subagent.status === "failed";
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Card,
+    {
+      className: cn(
+        "cursor-pointer transition-all hover:border-border-emphasis hover:bg-background-interactive border-dashed",
+        subagent.status === "running" && "border-status-info/50"
+      ),
+      onClick,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-3 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2 min-w-0", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Bot,
+          {
+            className: cn(
+              "size-4 shrink-0",
+              subagent.status === "running" ? "text-status-info" : "text-muted-foreground"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0 overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium truncate", children: subagent.name }),
+            isDone && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Badge,
+              {
+                variant: subagent.status === "failed" ? "critical" : "nominal",
+                className: "shrink-0 text-[9px]",
+                children: subagent.status === "failed" ? "FAILED" : "DONE"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-[10px] text-muted-foreground line-clamp-2 mt-0.5 break-words", children: subagent.description }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-1 mt-1 text-[10px] text-muted-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "truncate", children: [
+            "↳ ",
+            parentThread.title || truncate(parentThread.thread_id, 15)
+          ] }) })
+        ] })
+      ] }) })
+    }
+  );
+}
+function getThreadKanbanStatus(thread, isLoading, hasDraft, hasPendingApproval) {
+  if (hasPendingApproval || thread.status === "interrupted") return "interrupted";
+  if (thread.status === "busy" || isLoading) return "in_progress";
+  if (hasDraft) return "pending";
+  return "done";
+}
+function KanbanView() {
+  const { threads, selectThread, showSubagentsInKanban } = useAppStore();
+  const allThreadStates = useAllThreadStates();
+  const loadingStates = useAllStreamLoadingStates();
+  const handleCardClick = (threadId) => {
+    selectThread(threadId);
+  };
+  const categorizedThreads = reactExports.useMemo(() => {
+    const result = {
+      pending: [],
+      in_progress: [],
+      interrupted: [],
+      done: []
+    };
+    for (const thread of threads) {
+      const isLoading = loadingStates[thread.thread_id] ?? false;
+      const threadState = allThreadStates[thread.thread_id];
+      const hasDraft = Boolean(threadState?.draftInput?.trim());
+      const hasPendingApproval = Boolean(threadState?.pendingApproval);
+      const status = getThreadKanbanStatus(thread, isLoading, hasDraft, hasPendingApproval);
+      result[status].push({ thread, status });
+    }
+    return result;
+  }, [threads, loadingStates, allThreadStates]);
+  const categorizedSubagents = reactExports.useMemo(() => {
+    if (!showSubagentsInKanban) {
+      return { pending: [], in_progress: [], interrupted: [], done: [] };
+    }
+    const result = {
+      pending: [],
+      in_progress: [],
+      interrupted: [],
+      done: []
+    };
+    const threadMap = new Map(threads.map((t) => [t.thread_id, t]));
+    for (const [threadId, state] of Object.entries(allThreadStates)) {
+      const parentThread = threadMap.get(threadId);
+      if (!parentThread || !state.subagents) continue;
+      for (const subagent of state.subagents) {
+        let status;
+        switch (subagent.status) {
+          case "pending":
+            status = "pending";
+            break;
+          case "running":
+            status = "in_progress";
+            break;
+          case "completed":
+            status = "done";
+            break;
+          case "failed":
+            status = "done";
+            break;
+          default:
+            status = "pending";
+        }
+        result[status].push({ subagent, parentThread, status });
+      }
+    }
+    return result;
+  }, [threads, allThreadStates, showSubagentsInKanban]);
+  const columnData = [
+    { status: "pending", title: "PENDING" },
+    { status: "in_progress", title: "IN PROGRESS" },
+    { status: "interrupted", title: "BLOCKED" },
+    { status: "done", title: "DONE" }
+  ];
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col h-full bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-x-auto p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full min-w-max gap-2", children: columnData.map(({ status, title }) => {
+    const threadItems = categorizedThreads[status];
+    const subagentItems = categorizedSubagents[status];
+    const totalCount = threadItems.length + subagentItems.length;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(KanbanColumn, { title, status, count: totalCount, children: [
+      threadItems.map(({ thread, status: threadStatus }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ThreadKanbanCard,
+        {
+          thread,
+          status: threadStatus,
+          onClick: () => handleCardClick(thread.thread_id)
+        },
+        thread.thread_id
+      )),
+      subagentItems.map(({ subagent, parentThread }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SubagentKanbanCard,
+        {
+          subagent,
+          parentThread,
+          onClick: () => handleCardClick(parentThread.thread_id)
+        },
+        subagent.id
+      )),
+      totalCount === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center text-sm text-muted-foreground py-8", children: "No items" })
+    ] }, status);
+  }) }) }) });
+}
+function KanbanHeader({ className }) {
+  const { showSubagentsInKanban, setShowSubagentsInKanban, threads } = useAppStore();
+  const activeCount = threads.filter(
+    (t) => t.status === "busy" || t.status === "interrupted"
+  ).length;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between px-3 app-no-drag relative overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 pointer-events-none opacity-[0.03]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: {
+              backgroundImage: "repeating-linear-gradient(0deg, transparent, transparent 2px, currentColor 2px, currentColor 3px)",
+              backgroundSize: "100% 3px"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-mono uppercase tracking-wider text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: cn(
+                "size-1.5 rounded-full",
+                activeCount > 0 ? "bg-status-nominal animate-tactical-pulse" : "bg-muted-foreground"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "tabular-nums", children: activeCount > 0 ? `${activeCount} ACTIVE` : "IDLE" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Button,
+          {
+            variant: showSubagentsInKanban ? "secondary" : "ghost",
+            size: "sm",
+            onClick: () => setShowSubagentsInKanban(!showSubagentsInKanban),
+            className: "gap-2 h-7 relative",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Bot, { className: "size-3.5" }),
+              showSubagentsInKanban ? "Hide" : "Show",
+              " Subagents"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 const HANDLE_WIDTH = 6;
 function ResizeHandle({ onDrag }) {
   const startXRef = reactExports.useRef(0);
-  const handleMouseDown = reactExports.useCallback((e) => {
-    e.preventDefault();
-    startXRef.current = e.clientX;
-    const handleMouseMove = (e2) => {
-      const totalDelta = e2.clientX - startXRef.current;
-      onDrag(totalDelta);
-    };
-    const handleMouseUp = () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-      document.body.style.cursor = "";
-      document.body.style.userSelect = "";
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    document.body.style.cursor = "col-resize";
-    document.body.style.userSelect = "none";
-  }, [onDrag]);
+  const handleMouseDown = reactExports.useCallback(
+    (e) => {
+      e.preventDefault();
+      startXRef.current = e.clientX;
+      const handleMouseMove = (e2) => {
+        const totalDelta = e2.clientX - startXRef.current;
+        onDrag(totalDelta);
+      };
+      const handleMouseUp = () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    [onDrag]
+  );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
@@ -76781,7 +78030,7 @@ const RIGHT_MIN = 250;
 const RIGHT_MAX = 450;
 const RIGHT_DEFAULT = 320;
 function App() {
-  const { currentThreadId, loadThreads, createThread } = useAppStore();
+  const { currentThreadId, loadThreads, createThread, showKanbanView } = useAppStore();
   const [isLoading, setIsLoading] = reactExports.useState(true);
   const [leftWidth, setLeftWidth] = reactExports.useState(LEFT_DEFAULT);
   const [rightWidth, setRightWidth] = reactExports.useState(RIGHT_DEFAULT);
@@ -76871,24 +78120,29 @@ function App() {
         },
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "app-badge-name", children: "OPENWORK" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "app-badge-version", children: "0.2.1" })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "app-badge-version", children: "0.2.3" })
         ]
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-9 w-full shrink-0 app-drag-region bg-sidebar", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: leftWidth }, className: "shrink-0" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-9 w-full shrink-0 app-drag-region", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: leftWidth }, className: "shrink-0 bg-sidebar" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-[1px] shrink-0" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: currentThreadId && /* @__PURE__ */ jsxRuntimeExports.jsx(TabBar, { className: "h-full border-b-0" }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0 bg-background border-b border-border", children: showKanbanView ? /* @__PURE__ */ jsxRuntimeExports.jsx(KanbanHeader, { className: "h-full" }) : currentThreadId && /* @__PURE__ */ jsxRuntimeExports.jsx(TabBar, { className: "h-full border-b-0" }) })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: leftWidth }, className: "shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThreadSidebar, {}) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeHandle, { onDrag: handleLeftResize }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("main", { className: "flex flex-1 flex-col min-w-0 overflow-hidden", children: currentThreadId ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabbedPanel, { threadId: currentThreadId, showTabBar: false }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-1 items-center justify-center text-muted-foreground", children: "Select or create a thread to begin" }) })
+        showKanbanView ? (
+          /* Kanban View - replaces center and right panels */
+          /* @__PURE__ */ jsxRuntimeExports.jsx("main", { className: "flex flex-1 flex-col min-w-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(KanbanView, {}) })
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("main", { className: "flex flex-1 flex-col min-w-0 overflow-hidden", children: currentThreadId ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabbedPanel, { threadId: currentThreadId, showTabBar: false }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-1 items-center justify-center text-muted-foreground", children: "Select or create a thread to begin" }) }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeHandle, { onDrag: handleRightResize }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: rightWidth }, className: "shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(RightPanel, {}) })
+    !showKanbanView && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeHandle, { onDrag: handleRightResize }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: rightWidth }, className: "shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(RightPanel, {}) })
+    ] })
   ] }) });
 }
 ReactDOM$1.createRoot(document.getElementById("root")).render(