@wrongstack/webui 0.9.19 → 0.10.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/main.tsx
-import React7 from "react";
+import React6 from "react";
 import ReactDOM from "react-dom/client";
 
 // src/lib/utils.ts
@@ -1615,7 +1615,7 @@ function useWebSocket() {
 }
 
 // src/App.tsx
-import { useEffect as useEffect20 } from "react";
+import { useEffect as useEffect21 } from "react";
 
 // src/components/ChatView.tsx
 import {
@@ -5012,7 +5012,7 @@ function ChatView() {
   const compactMode = useUIStore((s) => s.compactMode);
   const setTheme = useConfigStore((s) => s.setTheme);
   const theme = useConfigStore((s) => s.theme);
-  const { totalTokens, cost, startTime, lastInputTokens, maxContext, projectName, iteration } = useSessionStore();
+  const { totalTokens, startTime, lastInputTokens, maxContext, projectName, iteration } = useSessionStore();
   const { wsConnected, wsStatus, provider, model } = useConfigStore();
   const { setCurrentView } = useUIStore();
   const scrollRef = useRef9(null);
@@ -5507,18 +5507,302 @@ function ChatView() {
   ] });
 }
 
+// src/components/CollabPanel.tsx
+import { Eye, LogIn, LogOut, MessageSquareWarning, Pause, Play, Users } from "lucide-react";
+import { useEffect as useEffect13, useState as useState14 } from "react";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+function CollabPanel({ sessionId, className }) {
+  const [participants, setParticipants] = useState14([]);
+  const [joined, setJoined] = useState14(false);
+  const [joinedRole, setJoinedRole] = useState14(null);
+  const [error, setError] = useState14(null);
+  const [openAnnotationCount, setOpenAnnotationCount] = useState14(0);
+  const [paused, setPaused] = useState14(false);
+  const wsUrl = useConfigStore((s) => s.wsUrl);
+  const client2 = getWSClient(wsUrl);
+  useEffect13(() => {
+    const offs = [];
+    offs.push(
+      client2.on("collab.state", (msg) => {
+        if (msg?.payload?.sessionId === sessionId) {
+          setParticipants(msg.payload.participants ?? []);
+        }
+      })
+    );
+    offs.push(
+      client2.on("collab.participant.joined", (msg) => {
+        if (msg?.payload?.sessionId !== sessionId) return;
+        const p = msg.payload;
+        setParticipants((prev) => {
+          if (prev.some((x) => x.participantId === p.participantId)) return prev;
+          return [...prev, { participantId: p.participantId, role: p.role, joinedAt: p.joinedAt }];
+        });
+      })
+    );
+    offs.push(
+      client2.on("collab.participant.left", (msg) => {
+        if (msg?.payload?.sessionId !== sessionId) return;
+        const id = msg.payload.participantId;
+        setParticipants((prev) => prev.filter((p) => p.participantId !== id));
+      })
+    );
+    offs.push(
+      client2.on("error", (msg) => {
+        if (msg?.payload?.phase === "collab") {
+          setError(msg.payload.message);
+          setJoined(false);
+        }
+      })
+    );
+    offs.push(client2.on("collab.event", () => {
+    }));
+    offs.push(
+      client2.on("collab.annotation.added", (msg) => {
+        if (msg?.payload?.sessionId !== sessionId) return;
+        if (msg?.payload?.annotation?.resolved) return;
+        setOpenAnnotationCount((c) => c + 1);
+      })
+    );
+    offs.push(
+      client2.on("collab.annotation.resolved", (msg) => {
+        if (msg?.payload?.sessionId !== sessionId) return;
+        setOpenAnnotationCount((c) => Math.max(0, c - 1));
+      })
+    );
+    offs.push(
+      client2.on("collab.pause.granted", (msg) => {
+        if (msg?.payload?.sessionId !== sessionId) return;
+        setPaused(true);
+      })
+    );
+    offs.push(
+      client2.on("collab.pause.released", (msg) => {
+        if (msg?.payload?.sessionId !== sessionId) return;
+        setPaused(false);
+      })
+    );
+    return () => {
+      for (const off of offs) off();
+    };
+  }, [client2, sessionId]);
+  const handleJoin = (role = "observer") => {
+    setError(null);
+    client2.send({ type: "collab.join", payload: { sessionId, role } });
+    setJoined(true);
+    setJoinedRole(role);
+  };
+  const handleRequestPause = () => {
+    client2.send({ type: "collab.request_pause", payload: { sessionId } });
+  };
+  const handleResume = () => {
+    client2.send({ type: "collab.resume", payload: { sessionId } });
+  };
+  const handleLeave = () => {
+    client2.send({ type: "collab.leave", payload: { sessionId } });
+    setJoined(false);
+    setParticipants([]);
+  };
+  if (participants.length === 0 && !error) {
+    return /* @__PURE__ */ jsxs17(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2 px-3 py-2 rounded-md border border-dashed border-border bg-card/40",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx18(Users, { className: "w-4 h-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx18("span", { className: "text-xs text-muted-foreground", children: "No live observers" }),
+          /* @__PURE__ */ jsxs17("div", { className: "ml-auto flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxs17(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleJoin("observer"),
+                className: "inline-flex items-center gap-1 text-xs px-2 py-1 rounded bg-primary text-primary-foreground hover:bg-primary/90 transition-colors",
+                title: "Join as a read-only observer (Phase 1)",
+                children: [
+                  /* @__PURE__ */ jsx18(LogIn, { className: "w-3 h-3" }),
+                  "observer"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs17(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleJoin("annotator"),
+                className: "inline-flex items-center gap-1 text-xs px-2 py-1 rounded border border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300 hover:bg-amber-500/20 transition-colors",
+                title: "Join as an annotator \u2014 leave inline notes on tool calls (Phase 2)",
+                children: [
+                  /* @__PURE__ */ jsx18(MessageSquareWarning, { className: "w-3 h-3" }),
+                  "annotator"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs17(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleJoin("controller"),
+                className: "inline-flex items-center gap-1 text-xs px-2 py-1 rounded border border-rose-500/40 bg-rose-500/10 text-rose-700 dark:text-rose-300 hover:bg-rose-500/20 transition-colors",
+                title: "Join as a controller \u2014 can pause the agent loop (Phase 3)",
+                children: [
+                  /* @__PURE__ */ jsx18(Pause, { className: "w-3 h-3" }),
+                  "controller"
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs17(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2 px-3 py-2 rounded-md border border-destructive/50 bg-destructive/10",
+          className
+        ),
+        role: "alert",
+        children: [
+          /* @__PURE__ */ jsxs17("span", { className: "text-xs text-destructive", children: [
+            "Collab: ",
+            error
+          ] }),
+          /* @__PURE__ */ jsx18(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setError(null);
+                setJoined(false);
+              },
+              className: "ml-auto text-xs underline text-destructive",
+              children: "dismiss"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 px-3 py-2 rounded-md border border-emerald-500/40 bg-emerald-500/5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs17("span", { className: "relative flex h-2 w-2", "aria-label": "Live", children: [
+          /* @__PURE__ */ jsx18("span", { className: "absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75 animate-ping" }),
+          /* @__PURE__ */ jsx18("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-emerald-500" })
+        ] }),
+        /* @__PURE__ */ jsx18(Users, { className: "w-4 h-4 text-emerald-700 dark:text-emerald-400" }),
+        /* @__PURE__ */ jsxs17("span", { className: "text-xs font-medium text-emerald-700 dark:text-emerald-300", children: [
+          participants.length,
+          " ",
+          participants.length === 1 ? "observer" : "observers"
+        ] }),
+        openAnnotationCount > 0 && /* @__PURE__ */ jsxs17(
+          "span",
+          {
+            title: `${openAnnotationCount} open annotation(s) \u2014 annotators reviewing this session`,
+            className: "ml-2 inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-700 dark:text-amber-300 border border-amber-500/30",
+            children: [
+              /* @__PURE__ */ jsx18(MessageSquareWarning, { className: "w-3 h-3" }),
+              openAnnotationCount,
+              " note",
+              openAnnotationCount === 1 ? "" : "s"
+            ]
+          }
+        ),
+        paused && /* @__PURE__ */ jsxs17(
+          "span",
+          {
+            title: "Agent loop is paused \u2014 a controller is reviewing",
+            className: "ml-2 inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-rose-500/15 text-rose-700 dark:text-rose-300 border border-rose-500/40",
+            children: [
+              /* @__PURE__ */ jsx18(Pause, { className: "w-3 h-3" }),
+              "paused"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-1 ml-2", children: [
+          participants.slice(0, 3).map((p) => /* @__PURE__ */ jsxs17(
+            "span",
+            {
+              title: `Joined ${new Date(p.joinedAt).toLocaleTimeString()}`,
+              className: "inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+              children: [
+                /* @__PURE__ */ jsx18(Eye, { className: "w-3 h-3" }),
+                p.role
+              ]
+            },
+            p.participantId
+          )),
+          participants.length > 3 && /* @__PURE__ */ jsxs17("span", { className: "text-[10px] text-muted-foreground", children: [
+            "+",
+            participants.length - 3
+          ] })
+        ] }),
+        joined && joinedRole === "controller" && (paused ? /* @__PURE__ */ jsxs17(
+          "button",
+          {
+            type: "button",
+            onClick: handleResume,
+            className: "ml-auto inline-flex items-center gap-1 text-xs px-2 py-1 rounded border border-rose-500/40 bg-rose-500/10 text-rose-700 dark:text-rose-300 hover:bg-rose-500/20 transition-colors",
+            title: "Resume the agent loop",
+            children: [
+              /* @__PURE__ */ jsx18(Play, { className: "w-3 h-3" }),
+              "Resume"
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs17(
+          "button",
+          {
+            type: "button",
+            onClick: handleRequestPause,
+            className: "ml-auto inline-flex items-center gap-1 text-xs px-2 py-1 rounded border border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300 hover:bg-amber-500/20 transition-colors",
+            title: "Pause the agent before the next tool call",
+            children: [
+              /* @__PURE__ */ jsx18(Pause, { className: "w-3 h-3" }),
+              "Pause agent"
+            ]
+          }
+        )),
+        joined && joinedRole !== "controller" && /* @__PURE__ */ jsxs17(
+          "button",
+          {
+            type: "button",
+            onClick: handleLeave,
+            className: "ml-auto inline-flex items-center gap-1 text-xs px-2 py-1 rounded border border-border hover:bg-muted transition-colors",
+            title: "Leave the observer session",
+            children: [
+              /* @__PURE__ */ jsx18(LogOut, { className: "w-3 h-3" }),
+              "Leave"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/components/ConfirmDialog.tsx
 import { AlertTriangle as AlertTriangle2, FileEdit, Globe, ShieldAlert, Terminal as Terminal3, Wrench as Wrench3 } from "lucide-react";
-import { useEffect as useEffect13, useRef as useRef10 } from "react";
+import { useEffect as useEffect14, useRef as useRef10 } from "react";
 
 // src/components/ui/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X as X3 } from "lucide-react";
 import * as React3 from "react";
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+var DialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -5530,9 +5814,9 @@ var DialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs17(DialogPortal, { children: [
-  /* @__PURE__ */ jsx18(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs17(
+var DialogContent = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs18(DialogPortal, { children: [
+  /* @__PURE__ */ jsx19(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs18(
     DialogPrimitive.Content,
     {
       ref,
@@ -5543,18 +5827,18 @@ var DialogContent = React3.forwardRef(({ className, children, ...props }, ref) =
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs17(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ jsx18(X3, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx18("span", { className: "sr-only", children: "Close" })
+        /* @__PURE__ */ jsxs18(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+          /* @__PURE__ */ jsx19(X3, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx19("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
   )
 ] }));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx18("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx19("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
 DialogHeader.displayName = "DialogHeader";
-var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx18(
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx19(
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -5562,7 +5846,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx18(
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   DialogPrimitive.Title,
   {
     ref,
@@ -5571,7 +5855,7 @@ var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   DialogPrimitive.Description,
   {
     ref,
@@ -5582,7 +5866,7 @@ var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/ConfirmDialog.tsx
-import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
 function pickToolIcon(toolName) {
   if (/edit|write|create|patch/i.test(toolName)) return FileEdit;
   if (/bash|shell|exec|run|command/i.test(toolName)) return Terminal3;
@@ -5595,7 +5879,7 @@ function SmartInputPreview({
 }) {
   const diffArgs = diffFromToolInput(toolName, input);
   if (diffArgs) {
-    return /* @__PURE__ */ jsx19("div", { className: "rounded-lg overflow-hidden border", children: /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx20("div", { className: "rounded-lg overflow-hidden border", children: /* @__PURE__ */ jsx20(
       DiffView,
       {
         oldText: diffArgs.oldText,
@@ -5608,12 +5892,12 @@ function SmartInputPreview({
     const obj = input;
     const cmd = obj.command ?? obj.cmd ?? obj.script;
     if (typeof cmd === "string" && cmd.trim().length > 0) {
-      return /* @__PURE__ */ jsxs18("div", { className: "rounded-lg border bg-background/40 overflow-hidden", children: [
-        /* @__PURE__ */ jsxs18("div", { className: "px-3 py-1.5 text-[10px] uppercase tracking-wider text-muted-foreground border-b bg-muted/40 flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx19(Terminal3, { className: "h-3 w-3" }),
-          /* @__PURE__ */ jsx19("span", { children: "Command" })
+      return /* @__PURE__ */ jsxs19("div", { className: "rounded-lg border bg-background/40 overflow-hidden", children: [
+        /* @__PURE__ */ jsxs19("div", { className: "px-3 py-1.5 text-[10px] uppercase tracking-wider text-muted-foreground border-b bg-muted/40 flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx20(Terminal3, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx20("span", { children: "Command" })
         ] }),
-        /* @__PURE__ */ jsxs18("pre", { className: "px-3 py-2 text-xs font-mono whitespace-pre-wrap break-all max-h-40 overflow-auto", children: [
+        /* @__PURE__ */ jsxs19("pre", { className: "px-3 py-2 text-xs font-mono whitespace-pre-wrap break-all max-h-40 overflow-auto", children: [
           "$",
           cmd
         ] })
@@ -5622,16 +5906,16 @@ function SmartInputPreview({
     const url = obj.url;
     if (typeof url === "string") {
       const method = obj.method ?? "GET";
-      return /* @__PURE__ */ jsxs18("div", { className: "rounded-lg border bg-background/40 px-3 py-2 text-xs font-mono", children: [
-        /* @__PURE__ */ jsx19("span", { className: "text-muted-foreground", children: method.toUpperCase() }),
+      return /* @__PURE__ */ jsxs19("div", { className: "rounded-lg border bg-background/40 px-3 py-2 text-xs font-mono", children: [
+        /* @__PURE__ */ jsx20("span", { className: "text-muted-foreground", children: method.toUpperCase() }),
         " ",
-        /* @__PURE__ */ jsx19("span", { className: "break-all", children: url })
+        /* @__PURE__ */ jsx20("span", { className: "break-all", children: url })
       ] });
     }
   }
-  return /* @__PURE__ */ jsxs18("div", { className: "p-3 rounded-lg bg-muted/50 border text-xs font-mono", children: [
-    /* @__PURE__ */ jsx19("div", { className: "text-muted-foreground mb-2", children: "Input:" }),
-    /* @__PURE__ */ jsx19("pre", { className: "whitespace-pre-wrap break-all max-h-60 overflow-auto", children: JSON.stringify(input, null, 2) })
+  return /* @__PURE__ */ jsxs19("div", { className: "p-3 rounded-lg bg-muted/50 border text-xs font-mono", children: [
+    /* @__PURE__ */ jsx20("div", { className: "text-muted-foreground mb-2", children: "Input:" }),
+    /* @__PURE__ */ jsx20("pre", { className: "whitespace-pre-wrap break-all max-h-60 overflow-auto", children: JSON.stringify(input, null, 2) })
   ] });
 }
 function ConfirmDialog() {
@@ -5644,7 +5928,7 @@ function ConfirmDialog() {
     }
     hideConfirm();
   };
-  useEffect13(() => {
+  useEffect14(() => {
     if (!showConfirmDialog) return;
     const onKey = (e) => {
       const target = e.target;
@@ -5669,50 +5953,50 @@ function ConfirmDialog() {
     return () => window.removeEventListener("keydown", onKey);
   }, [showConfirmDialog, confirmInfo?.id]);
   if (!confirmInfo) {
-    return /* @__PURE__ */ jsx19(Dialog, { open: showConfirmDialog, onOpenChange: () => hideConfirm(), children: /* @__PURE__ */ jsx19(DialogContent, {}) });
+    return /* @__PURE__ */ jsx20(Dialog, { open: showConfirmDialog, onOpenChange: () => hideConfirm(), children: /* @__PURE__ */ jsx20(DialogContent, {}) });
   }
   const Icon2 = pickToolIcon(confirmInfo.toolName);
   const isEdit = /edit|write/i.test(confirmInfo.toolName);
-  return /* @__PURE__ */ jsx19(Dialog, { open: showConfirmDialog, onOpenChange: () => hideConfirm(), children: /* @__PURE__ */ jsxs18(DialogContent, { className: "sm:max-w-2xl border-yellow-500/50", ref: dialogRef, tabIndex: -1, children: [
-    /* @__PURE__ */ jsxs18(DialogHeader, { children: [
-      /* @__PURE__ */ jsxs18(DialogTitle, { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx19(ShieldAlert, { className: "h-5 w-5 text-yellow-500 animate-pulse" }),
+  return /* @__PURE__ */ jsx20(Dialog, { open: showConfirmDialog, onOpenChange: () => hideConfirm(), children: /* @__PURE__ */ jsxs19(DialogContent, { className: "sm:max-w-2xl border-yellow-500/50", ref: dialogRef, tabIndex: -1, children: [
+    /* @__PURE__ */ jsxs19(DialogHeader, { children: [
+      /* @__PURE__ */ jsxs19(DialogTitle, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx20(ShieldAlert, { className: "h-5 w-5 text-yellow-500 animate-pulse" }),
         "Approval required: ",
         confirmInfo.toolName
       ] }),
-      /* @__PURE__ */ jsxs18(DialogDescription, { children: [
+      /* @__PURE__ */ jsxs19(DialogDescription, { children: [
         "The agent wants to ",
         isEdit ? "modify a file" : "run this tool",
         ". Review the request below and decide whether to proceed."
       ] })
     ] }),
-    /* @__PURE__ */ jsxs18("div", { className: "py-2 space-y-3", children: [
-      /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3 p-3 rounded-lg bg-muted", children: [
-        /* @__PURE__ */ jsx19(Icon2, { className: "h-5 w-5 text-muted-foreground" }),
-        /* @__PURE__ */ jsxs18("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx19("div", { className: "font-medium font-mono truncate", children: confirmInfo.toolName }),
-          /* @__PURE__ */ jsxs18("div", { className: "text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "py-2 space-y-3", children: [
+      /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-3 p-3 rounded-lg bg-muted", children: [
+        /* @__PURE__ */ jsx20(Icon2, { className: "h-5 w-5 text-muted-foreground" }),
+        /* @__PURE__ */ jsxs19("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx20("div", { className: "font-medium font-mono truncate", children: confirmInfo.toolName }),
+          /* @__PURE__ */ jsxs19("div", { className: "text-xs text-muted-foreground", children: [
             isEdit ? "File modification" : "Tool execution",
             " \u2014 preview below"
           ] })
         ] })
       ] }),
-      confirmInfo.input !== void 0 && /* @__PURE__ */ jsx19(SmartInputPreview, { toolName: confirmInfo.toolName, input: confirmInfo.input }),
-      confirmInfo.suggestedPattern && /* @__PURE__ */ jsxs18("div", { className: "flex items-start gap-2 p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20", children: [
-        /* @__PURE__ */ jsx19(AlertTriangle2, { className: "h-4 w-4 text-yellow-600 mt-0.5 shrink-0" }),
-        /* @__PURE__ */ jsxs18("div", { className: "text-sm min-w-0", children: [
-          /* @__PURE__ */ jsx19("div", { className: "font-medium text-yellow-800 dark:text-yellow-200", children: "Trust pattern suggestion" }),
-          /* @__PURE__ */ jsx19("div", { className: "font-mono text-xs mt-1 break-all", children: confirmInfo.suggestedPattern }),
-          /* @__PURE__ */ jsxs18("div", { className: "text-xs text-muted-foreground mt-1", children: [
+      confirmInfo.input !== void 0 && /* @__PURE__ */ jsx20(SmartInputPreview, { toolName: confirmInfo.toolName, input: confirmInfo.input }),
+      confirmInfo.suggestedPattern && /* @__PURE__ */ jsxs19("div", { className: "flex items-start gap-2 p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20", children: [
+        /* @__PURE__ */ jsx20(AlertTriangle2, { className: "h-4 w-4 text-yellow-600 mt-0.5 shrink-0" }),
+        /* @__PURE__ */ jsxs19("div", { className: "text-sm min-w-0", children: [
+          /* @__PURE__ */ jsx20("div", { className: "font-medium text-yellow-800 dark:text-yellow-200", children: "Trust pattern suggestion" }),
+          /* @__PURE__ */ jsx20("div", { className: "font-mono text-xs mt-1 break-all", children: confirmInfo.suggestedPattern }),
+          /* @__PURE__ */ jsxs19("div", { className: "text-xs text-muted-foreground mt-1", children: [
             "Picking ",
-            /* @__PURE__ */ jsx19("span", { className: "font-medium", children: "Always" }),
+            /* @__PURE__ */ jsx20("span", { className: "font-medium", children: "Always" }),
             " will whitelist matching calls for this project."
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs18(DialogFooter, { className: "gap-2 sm:gap-2 flex-wrap", children: [
-      /* @__PURE__ */ jsxs18(
+    /* @__PURE__ */ jsxs19(DialogFooter, { className: "gap-2 sm:gap-2 flex-wrap", children: [
+      /* @__PURE__ */ jsxs19(
         Button,
         {
           variant: "outline",
@@ -5721,11 +6005,11 @@ function ConfirmDialog() {
           title: "Reject this and all future calls matching the pattern (d)",
           children: [
             "Deny always ",
-            /* @__PURE__ */ jsx19("kbd", { className: "ml-1 text-[10px] border rounded px-1 bg-background", children: "d" })
+            /* @__PURE__ */ jsx20("kbd", { className: "ml-1 text-[10px] border rounded px-1 bg-background", children: "d" })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs18(
+      /* @__PURE__ */ jsxs19(
         Button,
         {
           variant: "outline",
@@ -5734,11 +6018,11 @@ function ConfirmDialog() {
           title: "Reject this single call (Esc / n)",
           children: [
             "No ",
-            /* @__PURE__ */ jsx19("kbd", { className: "ml-1 text-[10px] border rounded px-1 bg-background", children: "n" })
+            /* @__PURE__ */ jsx20("kbd", { className: "ml-1 text-[10px] border rounded px-1 bg-background", children: "n" })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs18(
+      /* @__PURE__ */ jsxs19(
         Button,
         {
           variant: "outline",
@@ -5747,11 +6031,11 @@ function ConfirmDialog() {
           title: "Approve and remember the pattern for the project (a)",
           children: [
             "Always ",
-            /* @__PURE__ */ jsx19("kbd", { className: "ml-1 text-[10px] border rounded px-1 bg-background", children: "a" })
+            /* @__PURE__ */ jsx20("kbd", { className: "ml-1 text-[10px] border rounded px-1 bg-background", children: "a" })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs18(
+      /* @__PURE__ */ jsxs19(
         Button,
         {
           size: "sm",
@@ -5759,7 +6043,7 @@ function ConfirmDialog() {
           title: "Approve this single call (y)",
           children: [
             "Yes ",
-            /* @__PURE__ */ jsx19("kbd", { className: "ml-1 text-[10px] border rounded px-1 bg-background/80", children: "y" })
+            /* @__PURE__ */ jsx20("kbd", { className: "ml-1 text-[10px] border rounded px-1 bg-background/80", children: "y" })
           ]
         }
       )
@@ -5768,20 +6052,20 @@ function ConfirmDialog() {
 }
 
 // src/components/ConnectionBanner.tsx
-import { Loader2 as Loader23, RotateCcw as RotateCcw4, WifiOff as WifiOff3, X as X4 } from "lucide-react";
-import { useEffect as useEffect14, useState as useState14 } from "react";
-import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Loader2 as Loader23, RotateCcw as RotateCcw4, WifiOff as WifiOff2, X as X4 } from "lucide-react";
+import { useEffect as useEffect15, useState as useState15 } from "react";
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 function ConnectionBanner() {
   const wsStatus = useConfigStore((s) => s.wsStatus);
   const wsUrl = useConfigStore((s) => s.wsUrl);
-  const [dismissed, setDismissed] = useState14(false);
-  const [now, setNow] = useState14(Date.now());
-  useEffect14(() => {
+  const [dismissed, setDismissed] = useState15(false);
+  const [now, setNow] = useState15(Date.now());
+  useEffect15(() => {
     if (wsStatus.state !== "reconnecting") return;
     const id = setInterval(() => setNow(Date.now()), 500);
     return () => clearInterval(id);
   }, [wsStatus.state]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (wsStatus.state === "open") setDismissed(false);
   }, [wsStatus.state]);
   if (wsStatus.state === "open" || wsStatus.state === "connecting") return null;
@@ -5790,7 +6074,7 @@ function ConnectionBanner() {
   const isReconnecting = wsStatus.state === "reconnecting";
   const errorText = wsStatus.state === "closed" ? wsStatus.error : wsStatus.state === "reconnecting" ? wsStatus.lastError : void 0;
   const remaining = isReconnecting ? Math.max(0, Math.ceil((wsStatus.nextRetryAt - now) / 1e3)) : 0;
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       className: cn(
@@ -5798,12 +6082,12 @@ function ConnectionBanner() {
         isReconnecting ? "bg-orange-500/10 text-orange-700 dark:text-orange-300 border-orange-500/30" : "bg-red-500/10 text-red-700 dark:text-red-300 border-red-500/30"
       ),
       children: [
-        isReconnecting ? /* @__PURE__ */ jsx20(Loader23, { className: "h-4 w-4 animate-spin shrink-0" }) : /* @__PURE__ */ jsx20(WifiOff3, { className: "h-4 w-4 shrink-0" }),
-        /* @__PURE__ */ jsxs19("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx20("div", { className: "font-medium", children: isReconnecting ? `Reconnecting to backend (attempt ${wsStatus.attempt}) \u2014 retrying in ${remaining}s` : "Disconnected from backend" }),
-          errorText && /* @__PURE__ */ jsx20("div", { className: "text-xs opacity-80 truncate", children: errorText })
+        isReconnecting ? /* @__PURE__ */ jsx21(Loader23, { className: "h-4 w-4 animate-spin shrink-0" }) : /* @__PURE__ */ jsx21(WifiOff2, { className: "h-4 w-4 shrink-0" }),
+        /* @__PURE__ */ jsxs20("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx21("div", { className: "font-medium", children: isReconnecting ? `Reconnecting to backend (attempt ${wsStatus.attempt}) \u2014 retrying in ${remaining}s` : "Disconnected from backend" }),
+          errorText && /* @__PURE__ */ jsx21("div", { className: "text-xs opacity-80 truncate", children: errorText })
         ] }),
-        /* @__PURE__ */ jsxs19(
+        /* @__PURE__ */ jsxs20(
           "button",
           {
             type: "button",
@@ -5815,19 +6099,19 @@ function ConnectionBanner() {
             ),
             title: "Retry connection now",
             children: [
-              /* @__PURE__ */ jsx20(RotateCcw4, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx21(RotateCcw4, { className: "h-3 w-3" }),
               "Retry now"
             ]
           }
         ),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "button",
           {
             type: "button",
             onClick: () => setDismissed(true),
             className: "text-current/60 hover:text-current shrink-0",
             title: "Dismiss (chip in topbar still shows status)",
-            children: /* @__PURE__ */ jsx20(X4, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx21(X4, { className: "h-4 w-4" })
           }
         )
       ]
@@ -5838,7 +6122,7 @@ function ConnectionBanner() {
 // src/components/ErrorBoundary.tsx
 import { AlertTriangle as AlertTriangle3, RefreshCw } from "lucide-react";
 import { Component } from "react";
-import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
 var ErrorBoundary = class extends Component {
   state = { error: null };
   static getDerivedStateFromError(error) {
@@ -5853,17 +6137,17 @@ var ErrorBoundary = class extends Component {
   };
   render() {
     if (this.state.error) {
-      return /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center h-screen bg-background", children: /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-4 p-8 max-w-md text-center", children: [
-        /* @__PURE__ */ jsx21(AlertTriangle3, { className: "h-12 w-12 text-destructive" }),
-        /* @__PURE__ */ jsx21("h1", { className: "text-lg font-semibold", children: "Something went wrong" }),
-        /* @__PURE__ */ jsx21("p", { className: "text-sm text-muted-foreground", children: "A rendering error occurred. Your session is still active on the server \u2014 reloading will pick up where you left off." }),
-        /* @__PURE__ */ jsx21("pre", { className: "text-xs font-mono text-muted-foreground bg-muted/50 rounded p-3 max-h-32 overflow-auto w-full text-left", children: this.state.error.message }),
-        /* @__PURE__ */ jsxs20("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsxs20(Button, { size: "sm", variant: "outline", onClick: () => window.location.reload(), children: [
-            /* @__PURE__ */ jsx21(RefreshCw, { className: "h-4 w-4 mr-1" }),
+      return /* @__PURE__ */ jsx22("div", { className: "flex items-center justify-center h-screen bg-background", children: /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-4 p-8 max-w-md text-center", children: [
+        /* @__PURE__ */ jsx22(AlertTriangle3, { className: "h-12 w-12 text-destructive" }),
+        /* @__PURE__ */ jsx22("h1", { className: "text-lg font-semibold", children: "Something went wrong" }),
+        /* @__PURE__ */ jsx22("p", { className: "text-sm text-muted-foreground", children: "A rendering error occurred. Your session is still active on the server \u2014 reloading will pick up where you left off." }),
+        /* @__PURE__ */ jsx22("pre", { className: "text-xs font-mono text-muted-foreground bg-muted/50 rounded p-3 max-h-32 overflow-auto w-full text-left", children: this.state.error.message }),
+        /* @__PURE__ */ jsxs21("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs21(Button, { size: "sm", variant: "outline", onClick: () => window.location.reload(), children: [
+            /* @__PURE__ */ jsx22(RefreshCw, { className: "h-4 w-4 mr-1" }),
             "Reload page"
           ] }),
-          /* @__PURE__ */ jsx21(Button, { size: "sm", onClick: this.handleReset, children: "Try again" })
+          /* @__PURE__ */ jsx22(Button, { size: "sm", onClick: this.handleReset, children: "Try again" })
         ] })
       ] }) });
     }
@@ -5873,22 +6157,22 @@ var ErrorBoundary = class extends Component {
 
 // src/components/QuickModelSwitcher.tsx
 import { ArrowRight as ArrowRight2, Cpu as Cpu3, Search as Search4 } from "lucide-react";
-import { useEffect as useEffect15, useMemo as useMemo5, useRef as useRef11, useState as useState15 } from "react";
-import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useEffect as useEffect16, useMemo as useMemo5, useRef as useRef11, useState as useState16 } from "react";
+import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 function QuickModelSwitcher() {
   const open = useUIStore((s) => s.modelSwitcherOpen);
   const setOpen = useUIStore((s) => s.setModelSwitcherOpen);
-  const [query, setQuery] = useState15("");
-  const [selected, setSelected] = useState15(0);
-  const [saved, setSaved] = useState15([]);
-  const [modelsByProvider, setModelsByProvider] = useState15({});
+  const [query, setQuery] = useState16("");
+  const [selected, setSelected] = useState16(0);
+  const [saved, setSaved] = useState16([]);
+  const [modelsByProvider, setModelsByProvider] = useState16({});
   const inputRef = useRef11(null);
   const wsUrl = useConfigStore((s) => s.wsUrl);
   const currentProvider = useConfigStore((s) => s.provider);
   const currentModel = useConfigStore((s) => s.model);
   const paletteOpen = useUIStore((s) => s.paletteOpen);
   const ws = useWebSocket();
-  useEffect15(() => {
+  useEffect16(() => {
     const onKey = (e) => {
       const mod = e.ctrlKey || e.metaKey;
       if (mod && e.key.toLowerCase() === "m" && !e.shiftKey && !e.altKey) {
@@ -5905,7 +6189,7 @@ function QuickModelSwitcher() {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [open, paletteOpen]);
-  useEffect15(() => {
+  useEffect16(() => {
     const client2 = getWSClient(wsUrl);
     const offSaved = client2.on("providers.saved", (msg) => {
       const p = msg.payload;
@@ -5920,14 +6204,14 @@ function QuickModelSwitcher() {
       offModels();
     };
   }, [wsUrl]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!open) return;
     setQuery("");
     setSelected(0);
     ws.listSavedProviders();
     requestAnimationFrame(() => inputRef.current?.focus());
   }, [open, ws]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!open) return;
     for (const sp of saved) {
       if (!modelsByProvider[sp.id]) {
@@ -5958,7 +6242,7 @@ function QuickModelSwitcher() {
       return a.provider.localeCompare(b.provider) || a.model.localeCompare(b.model);
     });
   }, [saved, modelsByProvider, query, currentProvider, currentModel]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (selected >= candidates.length) setSelected(0);
   }, [candidates.length, selected]);
   const commit = (idx) => {
@@ -5968,7 +6252,7 @@ function QuickModelSwitcher() {
     setOpen(false);
   };
   if (!open) return null;
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       className: "fixed inset-0 z-50 flex items-start justify-center bg-background/60 backdrop-blur-sm pt-[15vh]",
@@ -5978,10 +6262,10 @@ function QuickModelSwitcher() {
       onKeyDown: (e) => {
         if (e.key === "Escape") setOpen(false);
       },
-      children: /* @__PURE__ */ jsxs21("div", { className: "w-full max-w-xl rounded-xl border bg-popover shadow-2xl overflow-hidden", children: [
-        /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2 border-b px-3 py-2", children: [
-          /* @__PURE__ */ jsx22(Search4, { className: "h-4 w-4 text-muted-foreground" }),
-          /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsxs22("div", { className: "w-full max-w-xl rounded-xl border bg-popover shadow-2xl overflow-hidden", children: [
+        /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 border-b px-3 py-2", children: [
+          /* @__PURE__ */ jsx23(Search4, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx23(
             "input",
             {
               ref: inputRef,
@@ -6009,9 +6293,9 @@ function QuickModelSwitcher() {
               className: "flex-1 bg-transparent outline-none text-sm placeholder:text-muted-foreground"
             }
           ),
-          /* @__PURE__ */ jsx22("span", { className: "text-[10px] text-muted-foreground font-mono", children: "\u2191\u2193 \xB7 Enter \xB7 Esc" })
+          /* @__PURE__ */ jsx23("span", { className: "text-[10px] text-muted-foreground font-mono", children: "\u2191\u2193 \xB7 Enter \xB7 Esc" })
         ] }),
-        /* @__PURE__ */ jsx22("div", { className: "max-h-[50vh] overflow-y-auto py-1", children: candidates.length === 0 ? /* @__PURE__ */ jsx22("div", { className: "px-4 py-8 text-center text-sm text-muted-foreground", children: saved.length === 0 ? "No saved providers \u2014 register a key in Settings first." : "Loading models\u2026" }) : candidates.map((c, idx) => /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsx23("div", { className: "max-h-[50vh] overflow-y-auto py-1", children: candidates.length === 0 ? /* @__PURE__ */ jsx23("div", { className: "px-4 py-8 text-center text-sm text-muted-foreground", children: saved.length === 0 ? "No saved providers \u2014 register a key in Settings first." : "Loading models\u2026" }) : candidates.map((c, idx) => /* @__PURE__ */ jsxs22(
           "button",
           {
             type: "button",
@@ -6023,7 +6307,7 @@ function QuickModelSwitcher() {
               c.isCurrent && "font-medium"
             ),
             children: [
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 Cpu3,
                 {
                   className: cn(
@@ -6032,19 +6316,19 @@ function QuickModelSwitcher() {
                   )
                 }
               ),
-              /* @__PURE__ */ jsxs21("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsxs21("div", { className: "truncate", children: [
-                  /* @__PURE__ */ jsx22("span", { className: "text-muted-foreground", children: c.provider }),
-                  /* @__PURE__ */ jsx22("span", { className: "mx-1 text-muted-foreground/40", children: "\xB7" }),
-                  /* @__PURE__ */ jsx22("span", { children: c.modelName })
+              /* @__PURE__ */ jsxs22("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs22("div", { className: "truncate", children: [
+                  /* @__PURE__ */ jsx23("span", { className: "text-muted-foreground", children: c.provider }),
+                  /* @__PURE__ */ jsx23("span", { className: "mx-1 text-muted-foreground/40", children: "\xB7" }),
+                  /* @__PURE__ */ jsx23("span", { children: c.modelName })
                 ] }),
-                c.contextWindow && /* @__PURE__ */ jsxs21("div", { className: "text-[10px] text-muted-foreground font-mono", children: [
+                c.contextWindow && /* @__PURE__ */ jsxs22("div", { className: "text-[10px] text-muted-foreground font-mono", children: [
                   c.model,
                   " \xB7 ctx ",
                   c.contextWindow.toLocaleString()
                 ] })
               ] }),
-              c.isCurrent ? /* @__PURE__ */ jsx22("span", { className: "text-[10px] uppercase tracking-wide text-primary font-semibold", children: "active" }) : /* @__PURE__ */ jsx22(ArrowRight2, { className: "h-3.5 w-3.5 text-muted-foreground opacity-0 group-hover:opacity-100" })
+              c.isCurrent ? /* @__PURE__ */ jsx23("span", { className: "text-[10px] uppercase tracking-wide text-primary font-semibold", children: "active" }) : /* @__PURE__ */ jsx23(ArrowRight2, { className: "h-3.5 w-3.5 text-muted-foreground opacity-0 group-hover:opacity-100" })
             ]
           },
           `${c.provider}:${c.model}`
@@ -6059,7 +6343,7 @@ import {
   AlertCircle,
   CheckCircle2 as CheckCircle24,
   Cpu as Cpu4,
-  Eye,
+  Eye as Eye2,
   EyeOff,
   Globe as Globe2,
   Key,
@@ -6074,25 +6358,25 @@ import {
   Trash2 as Trash22,
   X as X5
 } from "lucide-react";
-import { useState as useState17, useEffect as useEffect17, useCallback as useCallback4 } from "react";
+import { useState as useState18, useEffect as useEffect18, useCallback as useCallback4 } from "react";
 
 // src/components/ThemeProvider.tsx
-import { createContext, useContext, useEffect as useEffect16, useState as useState16 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { createContext, useContext, useEffect as useEffect17, useState as useState17 } from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var ThemeProviderContext = createContext(void 0);
 function ThemeProvider({
   children,
   defaultTheme = "system",
   storageKey = "wrongstack-theme"
 }) {
-  const { theme: storeTheme, setTheme: setStoreTheme } = useConfigStore();
-  const [theme, setTheme] = useState16(() => {
+  const { setTheme: setStoreTheme } = useConfigStore();
+  const [theme, setTheme] = useState17(() => {
     if (typeof window !== "undefined") {
       return localStorage.getItem(storageKey) || defaultTheme;
     }
     return defaultTheme;
   });
-  useEffect16(() => {
+  useEffect17(() => {
     const root = window.document.documentElement;
     root.classList.remove("light", "dark");
     if (theme === "system") {
@@ -6110,7 +6394,7 @@ function ThemeProvider({
       setStoreTheme(newTheme);
     }
   };
-  return /* @__PURE__ */ jsx23(ThemeProviderContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx24(ThemeProviderContext.Provider, { value, children });
 }
 function useTheme() {
   const context = useContext(ThemeProviderContext);
@@ -6122,10 +6406,10 @@ function useTheme() {
 
 // src/components/ui/input.tsx
 import * as React4 from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var Input = React4.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx25(
       "input",
       {
         type,
@@ -6144,9 +6428,9 @@ Input.displayName = "Input";
 // src/components/ui/tabs.tsx
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as React5 from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var Tabs = TabsPrimitive.Root;
-var TabsList = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
+var TabsList = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   TabsPrimitive.List,
   {
     ref,
@@ -6158,7 +6442,7 @@ var TabsList = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
+var TabsTrigger = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -6170,7 +6454,7 @@ var TabsTrigger = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
+var TabsContent = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   TabsPrimitive.Content,
   {
     ref,
@@ -6184,34 +6468,32 @@ var TabsContent = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // src/components/SettingsPanel.tsx
-import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 function SettingsPanel() {
   const { setCurrentView } = useUIStore();
   const { provider, model, setProvider, setModel, wsConnected } = useConfigStore();
   const { theme, setTheme } = useTheme();
   const ws = useWebSocket();
   const wsClient = ws.client;
-  const listProviders = ws.listProviders;
-  const listSavedProviders = ws.listSavedProviders;
-  const [catalogProviders, setCatalogProviders] = useState17([]);
-  const [catalogModels, setCatalogModels] = useState17({});
-  const [savedProviders, setSavedProviders] = useState17([]);
-  const [isLoadingCatalog, setIsLoadingCatalog] = useState17(false);
-  const [isLoadingModels, setIsLoadingModels] = useState17(false);
-  const [isLoadingSaved, setIsLoadingSaved] = useState17(false);
-  const [operationStatus, setOperationStatus] = useState17(null);
-  const [providerTab, setProviderTab] = useState17("catalog");
-  const [showAddKeyForm, setShowAddKeyForm] = useState17(null);
-  const [newKeyLabel, setNewKeyLabel] = useState17("");
-  const [newKeyValue, setNewKeyValue] = useState17("");
-  const [showNewKeyValue, setShowNewKeyValue] = useState17(false);
-  const [showAddProviderForm, setShowAddProviderForm] = useState17(false);
-  const [newProviderId, setNewProviderId] = useState17("");
-  const [newProviderFamily, setNewProviderFamily] = useState17("openai-compatible");
-  const [newProviderBaseUrl, setNewProviderBaseUrl] = useState17("");
-  const [newProviderApiKey, setNewProviderApiKey] = useState17("");
+  const [catalogProviders, setCatalogProviders] = useState18([]);
+  const [catalogModels, setCatalogModels] = useState18({});
+  const [savedProviders, setSavedProviders] = useState18([]);
+  const [isLoadingCatalog, setIsLoadingCatalog] = useState18(false);
+  const [isLoadingModels, setIsLoadingModels] = useState18(false);
+  const [isLoadingSaved, setIsLoadingSaved] = useState18(false);
+  const [operationStatus, setOperationStatus] = useState18(null);
+  const [providerTab, setProviderTab] = useState18("catalog");
+  const [showAddKeyForm, setShowAddKeyForm] = useState18(null);
+  const [newKeyLabel, setNewKeyLabel] = useState18("");
+  const [newKeyValue, setNewKeyValue] = useState18("");
+  const [showNewKeyValue, setShowNewKeyValue] = useState18(false);
+  const [showAddProviderForm, setShowAddProviderForm] = useState18(false);
+  const [newProviderId, setNewProviderId] = useState18("");
+  const [newProviderFamily, setNewProviderFamily] = useState18("openai-compatible");
+  const [newProviderBaseUrl, setNewProviderBaseUrl] = useState18("");
+  const [newProviderApiKey, setNewProviderApiKey] = useState18("");
   const currentCatalogProvider = catalogProviders.find((p) => p.id === provider);
-  useEffect17(() => {
+  useEffect18(() => {
     const handleProviderCatalog = (msg) => {
       if (msg.type === "provider.catalog") {
         const payload = msg.payload;
@@ -6320,7 +6602,7 @@ function SettingsPanel() {
     },
     [ws]
   );
-  const [catalogQuery, setCatalogQuery] = useState17("");
+  const [catalogQuery, setCatalogQuery] = useState18("");
   const families = ["anthropic", "openai", "google", "openai-compatible"];
   const filteredCatalog = catalogQuery.trim() ? catalogProviders.filter((p) => {
     const q = catalogQuery.trim().toLowerCase();
@@ -6334,52 +6616,52 @@ function SettingsPanel() {
     },
     {}
   );
-  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ jsxs22("header", { className: "flex items-center justify-between px-4 py-3 border-b bg-card shrink-0", children: [
-      /* @__PURE__ */ jsx26("h1", { className: "text-lg font-semibold", children: "Settings" }),
-      /* @__PURE__ */ jsx26(Button, { variant: "ghost", size: "icon", onClick: () => setCurrentView("chat"), children: /* @__PURE__ */ jsx26(X5, { className: "h-4 w-4" }) })
+  return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs23("header", { className: "flex items-center justify-between px-4 py-3 border-b bg-card shrink-0", children: [
+      /* @__PURE__ */ jsx27("h1", { className: "text-lg font-semibold", children: "Settings" }),
+      /* @__PURE__ */ jsx27(Button, { variant: "ghost", size: "icon", onClick: () => setCurrentView("chat"), children: /* @__PURE__ */ jsx27(X5, { className: "h-4 w-4" }) })
     ] }),
-    /* @__PURE__ */ jsx26(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx26("div", { className: "p-6 max-w-2xl mx-auto", children: /* @__PURE__ */ jsxs22(Tabs, { defaultValue: "provider", children: [
-      /* @__PURE__ */ jsxs22(TabsList, { className: "w-full justify-start mb-6 grid grid-cols-4", children: [
-        /* @__PURE__ */ jsxs22(TabsTrigger, { value: "provider", className: "gap-2", children: [
-          /* @__PURE__ */ jsx26(Network, { className: "h-4 w-4" }),
+    /* @__PURE__ */ jsx27(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx27("div", { className: "p-6 max-w-2xl mx-auto", children: /* @__PURE__ */ jsxs23(Tabs, { defaultValue: "provider", children: [
+      /* @__PURE__ */ jsxs23(TabsList, { className: "w-full justify-start mb-6 grid grid-cols-4", children: [
+        /* @__PURE__ */ jsxs23(TabsTrigger, { value: "provider", className: "gap-2", children: [
+          /* @__PURE__ */ jsx27(Network, { className: "h-4 w-4" }),
           "Provider"
         ] }),
-        /* @__PURE__ */ jsxs22(TabsTrigger, { value: "model", className: "gap-2", children: [
-          /* @__PURE__ */ jsx26(Cpu4, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxs23(TabsTrigger, { value: "model", className: "gap-2", children: [
+          /* @__PURE__ */ jsx27(Cpu4, { className: "h-4 w-4" }),
           "Model"
         ] }),
-        /* @__PURE__ */ jsxs22(TabsTrigger, { value: "connection", className: "gap-2", children: [
-          /* @__PURE__ */ jsx26(Globe2, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxs23(TabsTrigger, { value: "connection", className: "gap-2", children: [
+          /* @__PURE__ */ jsx27(Globe2, { className: "h-4 w-4" }),
           "Connection"
         ] }),
-        /* @__PURE__ */ jsxs22(TabsTrigger, { value: "appearance", className: "gap-2", children: [
-          /* @__PURE__ */ jsx26(Palette, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxs23(TabsTrigger, { value: "appearance", className: "gap-2", children: [
+          /* @__PURE__ */ jsx27(Palette, { className: "h-4 w-4" }),
           "Appearance"
         ] })
       ] }),
-      /* @__PURE__ */ jsxs22(TabsContent, { value: "provider", className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs22("div", { className: "flex gap-2 mb-4", children: [
-          /* @__PURE__ */ jsxs22(
+      /* @__PURE__ */ jsxs23(TabsContent, { value: "provider", className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs23("div", { className: "flex gap-2 mb-4", children: [
+          /* @__PURE__ */ jsxs23(
             Button,
             {
               variant: providerTab === "catalog" ? "default" : "outline",
               size: "sm",
               onClick: () => setProviderTab("catalog"),
               children: [
-                /* @__PURE__ */ jsx26(Globe2, { className: "h-4 w-4 mr-1" }),
+                /* @__PURE__ */ jsx27(Globe2, { className: "h-4 w-4 mr-1" }),
                 "Catalog"
               ]
             }
           ),
-          /* @__PURE__ */ jsxs22(
+          /* @__PURE__ */ jsxs23(
             Button,
             {
               variant: providerTab === "saved" ? "default" : "outline",
               size: "sm",
               onClick: () => setProviderTab("saved"),
               children: [
-                /* @__PURE__ */ jsx26(Key, { className: "h-4 w-4 mr-1" }),
+                /* @__PURE__ */ jsx27(Key, { className: "h-4 w-4 mr-1" }),
                 "Saved (",
                 savedProviders.length,
                 ")"
@@ -6387,7 +6669,7 @@ function SettingsPanel() {
             }
           )
         ] }),
-        operationStatus && /* @__PURE__ */ jsxs22(
+        operationStatus && /* @__PURE__ */ jsxs23(
           "div",
           {
             className: cn(
@@ -6395,13 +6677,13 @@ function SettingsPanel() {
               operationStatus.success ? "bg-green-500/10 text-green-600" : "bg-red-500/10 text-red-600"
             ),
             children: [
-              operationStatus.success ? /* @__PURE__ */ jsx26(CheckCircle24, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx26(AlertCircle, { className: "h-4 w-4" }),
+              operationStatus.success ? /* @__PURE__ */ jsx27(CheckCircle24, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx27(AlertCircle, { className: "h-4 w-4" }),
               operationStatus.message
             ]
           }
         ),
-        providerTab === "catalog" && /* @__PURE__ */ jsxs22("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsx26(
+        providerTab === "catalog" && /* @__PURE__ */ jsxs23("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx27(
             Input,
             {
               placeholder: `Search ${catalogProviders.length} providers (name / id / family)\u2026`,
@@ -6410,19 +6692,19 @@ function SettingsPanel() {
               className: "text-sm"
             }
           ),
-          isLoadingCatalog && catalogProviders.length === 0 ? /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-center py-8", children: [
-            /* @__PURE__ */ jsx26(Loader24, { className: "h-6 w-6 animate-spin text-muted-foreground" }),
-            /* @__PURE__ */ jsx26("span", { className: "ml-2 text-muted-foreground", children: "Loading catalog..." })
-          ] }) : filteredCatalog.length === 0 && catalogQuery ? /* @__PURE__ */ jsxs22("div", { className: "text-center py-8 text-muted-foreground text-sm", children: [
+          isLoadingCatalog && catalogProviders.length === 0 ? /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-center py-8", children: [
+            /* @__PURE__ */ jsx27(Loader24, { className: "h-6 w-6 animate-spin text-muted-foreground" }),
+            /* @__PURE__ */ jsx27("span", { className: "ml-2 text-muted-foreground", children: "Loading catalog..." })
+          ] }) : filteredCatalog.length === 0 && catalogQuery ? /* @__PURE__ */ jsxs23("div", { className: "text-center py-8 text-muted-foreground text-sm", children: [
             'No providers match "',
-            /* @__PURE__ */ jsx26("span", { className: "font-mono", children: catalogQuery }),
+            /* @__PURE__ */ jsx27("span", { className: "font-mono", children: catalogQuery }),
             '".'
-          ] }) : /* @__PURE__ */ jsx26(Fragment7, { children: families.map((family) => {
+          ] }) : /* @__PURE__ */ jsx27(Fragment7, { children: families.map((family) => {
             const providers = catalogByFamily[family];
             if (!providers?.length) return null;
-            return /* @__PURE__ */ jsxs22("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx26("h3", { className: "text-sm font-semibold text-muted-foreground uppercase tracking-wider", children: family }),
-              /* @__PURE__ */ jsx26("div", { className: "grid grid-cols-1 gap-2", children: providers.map((p) => /* @__PURE__ */ jsxs22(
+            return /* @__PURE__ */ jsxs23("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx27("h3", { className: "text-sm font-semibold text-muted-foreground uppercase tracking-wider", children: family }),
+              /* @__PURE__ */ jsx27("div", { className: "grid grid-cols-1 gap-2", children: providers.map((p) => /* @__PURE__ */ jsxs23(
                 "button",
                 {
                   type: "button",
@@ -6432,28 +6714,28 @@ function SettingsPanel() {
                     provider === p.id ? "border-primary bg-primary/5 ring-2 ring-primary/20" : "border-border hover:bg-muted"
                   ),
                   children: [
-                    /* @__PURE__ */ jsxs22("div", { className: "flex w-full justify-between items-start", children: [
-                      /* @__PURE__ */ jsxs22("div", { children: [
-                        /* @__PURE__ */ jsx26("span", { className: "font-medium", children: p.name }),
-                        /* @__PURE__ */ jsxs22("span", { className: "ml-2 text-xs text-muted-foreground", children: [
+                    /* @__PURE__ */ jsxs23("div", { className: "flex w-full justify-between items-start", children: [
+                      /* @__PURE__ */ jsxs23("div", { children: [
+                        /* @__PURE__ */ jsx27("span", { className: "font-medium", children: p.name }),
+                        /* @__PURE__ */ jsxs23("span", { className: "ml-2 text-xs text-muted-foreground", children: [
                           "(",
                           p.id,
                           ")"
                         ] })
                       ] }),
-                      /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
-                        p.hasApiKey && /* @__PURE__ */ jsxs22("span", { className: "text-xs bg-green-500/10 text-green-600 px-2 py-0.5 rounded", children: [
-                          /* @__PURE__ */ jsx26(Key, { className: "h-3 w-3 inline mr-1" }),
+                      /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
+                        p.hasApiKey && /* @__PURE__ */ jsxs23("span", { className: "text-xs bg-green-500/10 text-green-600 px-2 py-0.5 rounded", children: [
+                          /* @__PURE__ */ jsx27(Key, { className: "h-3 w-3 inline mr-1" }),
                           "Configured"
                         ] }),
-                        p.envVars[0] && /* @__PURE__ */ jsxs22("span", { className: "text-xs text-muted-foreground", children: [
+                        p.envVars[0] && /* @__PURE__ */ jsxs23("span", { className: "text-xs text-muted-foreground", children: [
                           "ENV: ",
                           p.envVars[0]
                         ] }),
-                        provider === p.id && /* @__PURE__ */ jsx26(CheckCircle24, { className: "h-4 w-4 text-primary" })
+                        provider === p.id && /* @__PURE__ */ jsx27(CheckCircle24, { className: "h-4 w-4 text-primary" })
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsxs22("div", { className: "text-xs text-muted-foreground mt-1", children: [
+                    /* @__PURE__ */ jsxs23("div", { className: "text-xs text-muted-foreground mt-1", children: [
                       p.modelCount,
                       " models",
                       p.apiBase && ` \xB7 ${p.apiBase}`
@@ -6465,25 +6747,25 @@ function SettingsPanel() {
             ] }, family);
           }) })
         ] }),
-        providerTab === "saved" && /* @__PURE__ */ jsxs22("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxs22("div", { className: "flex justify-between items-center", children: [
-            /* @__PURE__ */ jsx26("p", { className: "text-sm text-muted-foreground", children: "Manage your API keys and provider configurations" }),
-            /* @__PURE__ */ jsxs22(
+        providerTab === "saved" && /* @__PURE__ */ jsxs23("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs23("div", { className: "flex justify-between items-center", children: [
+            /* @__PURE__ */ jsx27("p", { className: "text-sm text-muted-foreground", children: "Manage your API keys and provider configurations" }),
+            /* @__PURE__ */ jsxs23(
               Button,
               {
                 size: "sm",
                 variant: "outline",
                 onClick: () => setShowAddProviderForm(!showAddProviderForm),
                 children: [
-                  /* @__PURE__ */ jsx26(Plus, { className: "h-4 w-4 mr-1" }),
+                  /* @__PURE__ */ jsx27(Plus, { className: "h-4 w-4 mr-1" }),
                   "Add Provider"
                 ]
               }
             )
           ] }),
-          showAddProviderForm && /* @__PURE__ */ jsxs22("div", { className: "p-4 border rounded-lg space-y-3 bg-muted/50", children: [
-            /* @__PURE__ */ jsx26("h4", { className: "font-medium", children: "Add Custom Provider" }),
-            /* @__PURE__ */ jsx26(
+          showAddProviderForm && /* @__PURE__ */ jsxs23("div", { className: "p-4 border rounded-lg space-y-3 bg-muted/50", children: [
+            /* @__PURE__ */ jsx27("h4", { className: "font-medium", children: "Add Custom Provider" }),
+            /* @__PURE__ */ jsx27(
               Input,
               {
                 placeholder: "Provider ID (e.g. my-llm-server)",
@@ -6491,21 +6773,21 @@ function SettingsPanel() {
                 onChange: (e) => setNewProviderId(e.target.value)
               }
             ),
-            /* @__PURE__ */ jsxs22(
+            /* @__PURE__ */ jsxs23(
               "select",
               {
                 className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
                 value: newProviderFamily,
                 onChange: (e) => setNewProviderFamily(e.target.value),
                 children: [
-                  /* @__PURE__ */ jsx26("option", { value: "anthropic", children: "Anthropic" }),
-                  /* @__PURE__ */ jsx26("option", { value: "openai", children: "OpenAI" }),
-                  /* @__PURE__ */ jsx26("option", { value: "openai-compatible", children: "OpenAI Compatible" }),
-                  /* @__PURE__ */ jsx26("option", { value: "google", children: "Google" })
+                  /* @__PURE__ */ jsx27("option", { value: "anthropic", children: "Anthropic" }),
+                  /* @__PURE__ */ jsx27("option", { value: "openai", children: "OpenAI" }),
+                  /* @__PURE__ */ jsx27("option", { value: "openai-compatible", children: "OpenAI Compatible" }),
+                  /* @__PURE__ */ jsx27("option", { value: "google", children: "Google" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx26(
+            /* @__PURE__ */ jsx27(
               Input,
               {
                 placeholder: "Base URL (optional, e.g. http://localhost:11434/v1)",
@@ -6513,7 +6795,7 @@ function SettingsPanel() {
                 onChange: (e) => setNewProviderBaseUrl(e.target.value)
               }
             ),
-            /* @__PURE__ */ jsx26(
+            /* @__PURE__ */ jsx27(
               Input,
               {
                 type: "password",
@@ -6522,8 +6804,8 @@ function SettingsPanel() {
                 onChange: (e) => setNewProviderApiKey(e.target.value)
               }
             ),
-            /* @__PURE__ */ jsxs22("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsx26(
+            /* @__PURE__ */ jsxs23("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx27(
                 Button,
                 {
                   size: "sm",
@@ -6532,7 +6814,7 @@ function SettingsPanel() {
                   children: "Add"
                 }
               ),
-              /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsx27(
                 Button,
                 {
                   size: "sm",
@@ -6543,59 +6825,59 @@ function SettingsPanel() {
               )
             ] })
           ] }),
-          isLoadingSaved ? /* @__PURE__ */ jsx26("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx26(Loader24, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }) : savedProviders.length === 0 ? /* @__PURE__ */ jsxs22("div", { className: "text-center py-8 text-muted-foreground", children: [
-            /* @__PURE__ */ jsx26(Key, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
-            /* @__PURE__ */ jsx26("p", { children: "No saved providers yet" }),
-            /* @__PURE__ */ jsx26("p", { className: "text-sm", children: "Add a provider to get started" })
-          ] }) : savedProviders.map((sp) => /* @__PURE__ */ jsxs22("div", { className: "border rounded-lg p-4 space-y-3", children: [
-            /* @__PURE__ */ jsxs22("div", { className: "flex justify-between items-start", children: [
-              /* @__PURE__ */ jsxs22("div", { children: [
-                /* @__PURE__ */ jsx26("h4", { className: "font-medium", children: sp.id }),
-                sp.family && /* @__PURE__ */ jsx26("span", { className: "text-xs text-muted-foreground", children: sp.family })
+          isLoadingSaved ? /* @__PURE__ */ jsx27("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx27(Loader24, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }) : savedProviders.length === 0 ? /* @__PURE__ */ jsxs23("div", { className: "text-center py-8 text-muted-foreground", children: [
+            /* @__PURE__ */ jsx27(Key, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
+            /* @__PURE__ */ jsx27("p", { children: "No saved providers yet" }),
+            /* @__PURE__ */ jsx27("p", { className: "text-sm", children: "Add a provider to get started" })
+          ] }) : savedProviders.map((sp) => /* @__PURE__ */ jsxs23("div", { className: "border rounded-lg p-4 space-y-3", children: [
+            /* @__PURE__ */ jsxs23("div", { className: "flex justify-between items-start", children: [
+              /* @__PURE__ */ jsxs23("div", { children: [
+                /* @__PURE__ */ jsx27("h4", { className: "font-medium", children: sp.id }),
+                sp.family && /* @__PURE__ */ jsx27("span", { className: "text-xs text-muted-foreground", children: sp.family })
               ] }),
-              /* @__PURE__ */ jsx26("div", { className: "flex gap-2", children: /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsx27("div", { className: "flex gap-2", children: /* @__PURE__ */ jsx27(
                 Button,
                 {
                   size: "icon",
                   variant: "ghost",
                   onClick: () => handleRemoveProvider(sp.id),
-                  children: /* @__PURE__ */ jsx26(Trash22, { className: "h-4 w-4 text-destructive" })
+                  children: /* @__PURE__ */ jsx27(Trash22, { className: "h-4 w-4 text-destructive" })
                 }
               ) })
             ] }),
-            sp.baseUrl && /* @__PURE__ */ jsxs22("div", { className: "text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ jsx26(Globe2, { className: "h-3 w-3 inline mr-1" }),
+            sp.baseUrl && /* @__PURE__ */ jsxs23("div", { className: "text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx27(Globe2, { className: "h-3 w-3 inline mr-1" }),
               sp.baseUrl
             ] }),
-            /* @__PURE__ */ jsxs22("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxs22("div", { className: "flex justify-between items-center", children: [
-                /* @__PURE__ */ jsx26("span", { className: "text-sm font-medium", children: "API Keys" }),
-                /* @__PURE__ */ jsxs22(
+            /* @__PURE__ */ jsxs23("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs23("div", { className: "flex justify-between items-center", children: [
+                /* @__PURE__ */ jsx27("span", { className: "text-sm font-medium", children: "API Keys" }),
+                /* @__PURE__ */ jsxs23(
                   Button,
                   {
                     size: "sm",
                     variant: "ghost",
                     onClick: () => setShowAddKeyForm(showAddKeyForm === sp.id ? null : sp.id),
                     children: [
-                      /* @__PURE__ */ jsx26(Plus, { className: "h-3 w-3 mr-1" }),
+                      /* @__PURE__ */ jsx27(Plus, { className: "h-3 w-3 mr-1" }),
                       "Add Key"
                     ]
                   }
                 )
               ] }),
-              sp.apiKeys.length === 0 && !showAddKeyForm && /* @__PURE__ */ jsx26("p", { className: "text-xs text-muted-foreground", children: "No keys configured" }),
-              sp.apiKeys.map((key) => /* @__PURE__ */ jsxs22(
+              sp.apiKeys.length === 0 && !showAddKeyForm && /* @__PURE__ */ jsx27("p", { className: "text-xs text-muted-foreground", children: "No keys configured" }),
+              sp.apiKeys.map((key) => /* @__PURE__ */ jsxs23(
                 "div",
                 {
                   className: "flex items-center justify-between p-2 bg-muted/50 rounded",
                   children: [
-                    /* @__PURE__ */ jsxs22("div", { children: [
-                      /* @__PURE__ */ jsx26("span", { className: "text-sm font-medium", children: key.label }),
-                      key.isActive && /* @__PURE__ */ jsx26("span", { className: "ml-2 text-xs bg-green-500/10 text-green-600 px-1.5 py-0.5 rounded", children: "Active" }),
-                      /* @__PURE__ */ jsx26("div", { className: "text-xs text-muted-foreground font-mono", children: key.maskedKey })
+                    /* @__PURE__ */ jsxs23("div", { children: [
+                      /* @__PURE__ */ jsx27("span", { className: "text-sm font-medium", children: key.label }),
+                      key.isActive && /* @__PURE__ */ jsx27("span", { className: "ml-2 text-xs bg-green-500/10 text-green-600 px-1.5 py-0.5 rounded", children: "Active" }),
+                      /* @__PURE__ */ jsx27("div", { className: "text-xs text-muted-foreground font-mono", children: key.maskedKey })
                     ] }),
-                    /* @__PURE__ */ jsxs22("div", { className: "flex gap-1", children: [
-                      !key.isActive && /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsxs23("div", { className: "flex gap-1", children: [
+                      !key.isActive && /* @__PURE__ */ jsx27(
                         Button,
                         {
                           size: "sm",
@@ -6604,13 +6886,13 @@ function SettingsPanel() {
                           children: "Set Active"
                         }
                       ),
-                      /* @__PURE__ */ jsx26(
+                      /* @__PURE__ */ jsx27(
                         Button,
                         {
                           size: "icon",
                           variant: "ghost",
                           onClick: () => handleDeleteKey(sp.id, key.label),
-                          children: /* @__PURE__ */ jsx26(Trash22, { className: "h-3 w-3 text-destructive" })
+                          children: /* @__PURE__ */ jsx27(Trash22, { className: "h-3 w-3 text-destructive" })
                         }
                       )
                     ] })
@@ -6618,8 +6900,8 @@ function SettingsPanel() {
                 },
                 key.label
               )),
-              showAddKeyForm === sp.id && /* @__PURE__ */ jsxs22("div", { className: "p-3 border rounded space-y-2 bg-background", children: [
-                /* @__PURE__ */ jsx26(
+              showAddKeyForm === sp.id && /* @__PURE__ */ jsxs23("div", { className: "p-3 border rounded space-y-2 bg-background", children: [
+                /* @__PURE__ */ jsx27(
                   Input,
                   {
                     placeholder: "Key label (e.g. default, production)",
@@ -6627,8 +6909,8 @@ function SettingsPanel() {
                     onChange: (e) => setNewKeyLabel(e.target.value)
                   }
                 ),
-                /* @__PURE__ */ jsxs22("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ jsx26(
+                /* @__PURE__ */ jsxs23("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsx27(
                     Input,
                     {
                       type: showNewKeyValue ? "text" : "password",
@@ -6637,18 +6919,18 @@ function SettingsPanel() {
                       onChange: (e) => setNewKeyValue(e.target.value)
                     }
                   ),
-                  /* @__PURE__ */ jsx26(
+                  /* @__PURE__ */ jsx27(
                     Button,
                     {
                       size: "icon",
                       variant: "ghost",
                       onClick: () => setShowNewKeyValue(!showNewKeyValue),
-                      children: showNewKeyValue ? /* @__PURE__ */ jsx26(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx26(Eye, { className: "h-4 w-4" })
+                      children: showNewKeyValue ? /* @__PURE__ */ jsx27(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx27(Eye2, { className: "h-4 w-4" })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs22("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ jsx26(
+                /* @__PURE__ */ jsxs23("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsx27(
                     Button,
                     {
                       size: "sm",
@@ -6657,7 +6939,7 @@ function SettingsPanel() {
                       children: "Save Key"
                     }
                   ),
-                  /* @__PURE__ */ jsx26(
+                  /* @__PURE__ */ jsx27(
                     Button,
                     {
                       size: "sm",
@@ -6676,13 +6958,13 @@ function SettingsPanel() {
           ] }, sp.id))
         ] })
       ] }),
-      /* @__PURE__ */ jsx26(TabsContent, { value: "model", className: "space-y-4", children: provider ? /* @__PURE__ */ jsxs22(Fragment7, { children: [
-        /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs22("div", { children: [
-            /* @__PURE__ */ jsx26("p", { className: "text-sm font-medium", children: currentCatalogProvider?.name || provider }),
-            /* @__PURE__ */ jsx26("p", { className: "text-xs text-muted-foreground", children: provider })
+      /* @__PURE__ */ jsx27(TabsContent, { value: "model", className: "space-y-4", children: provider ? /* @__PURE__ */ jsxs23(Fragment7, { children: [
+        /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs23("div", { children: [
+            /* @__PURE__ */ jsx27("p", { className: "text-sm font-medium", children: currentCatalogProvider?.name || provider }),
+            /* @__PURE__ */ jsx27("p", { className: "text-xs text-muted-foreground", children: provider })
           ] }),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             Button,
             {
               variant: "ghost",
@@ -6691,15 +6973,15 @@ function SettingsPanel() {
                 setIsLoadingModels(true);
                 ws.listProviderModels?.(provider);
               },
-              children: /* @__PURE__ */ jsx26(RefreshCw2, { className: cn("h-4 w-4", isLoadingModels && "animate-spin") })
+              children: /* @__PURE__ */ jsx27(RefreshCw2, { className: cn("h-4 w-4", isLoadingModels && "animate-spin") })
             }
           )
         ] }),
-        isLoadingModels && !catalogModels[provider] ? /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-center py-8", children: [
-          /* @__PURE__ */ jsx26(Loader24, { className: "h-6 w-6 animate-spin text-muted-foreground" }),
-          /* @__PURE__ */ jsx26("span", { className: "ml-2 text-muted-foreground", children: "Loading models..." })
-        ] }) : /* @__PURE__ */ jsxs22("div", { className: "space-y-1", children: [
-          (catalogModels[provider] || []).map((m) => /* @__PURE__ */ jsxs22(
+        isLoadingModels && !catalogModels[provider] ? /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-center py-8", children: [
+          /* @__PURE__ */ jsx27(Loader24, { className: "h-6 w-6 animate-spin text-muted-foreground" }),
+          /* @__PURE__ */ jsx27("span", { className: "ml-2 text-muted-foreground", children: "Loading models..." })
+        ] }) : /* @__PURE__ */ jsxs23("div", { className: "space-y-1", children: [
+          (catalogModels[provider] || []).map((m) => /* @__PURE__ */ jsxs23(
             "button",
             {
               type: "button",
@@ -6709,47 +6991,47 @@ function SettingsPanel() {
                 model === m.id ? "border-primary bg-primary/5 ring-2 ring-primary/20" : "border-border hover:bg-muted"
               ),
               children: [
-                /* @__PURE__ */ jsxs22("div", { children: [
-                  /* @__PURE__ */ jsx26("span", { className: "font-medium", children: m.name || m.id }),
-                  /* @__PURE__ */ jsx26("div", { className: "flex gap-2 mt-1", children: m.capabilities.map((cap) => /* @__PURE__ */ jsx26("span", { className: "text-xs bg-muted px-1.5 py-0.5 rounded", children: cap }, cap)) })
+                /* @__PURE__ */ jsxs23("div", { children: [
+                  /* @__PURE__ */ jsx27("span", { className: "font-medium", children: m.name || m.id }),
+                  /* @__PURE__ */ jsx27("div", { className: "flex gap-2 mt-1", children: m.capabilities.map((cap) => /* @__PURE__ */ jsx27("span", { className: "text-xs bg-muted px-1.5 py-0.5 rounded", children: cap }, cap)) })
                 ] }),
-                /* @__PURE__ */ jsxs22("div", { className: "text-right text-xs text-muted-foreground", children: [
-                  m.contextWindow && /* @__PURE__ */ jsxs22("div", { children: [
+                /* @__PURE__ */ jsxs23("div", { className: "text-right text-xs text-muted-foreground", children: [
+                  m.contextWindow && /* @__PURE__ */ jsxs23("div", { children: [
                     m.contextWindow / 1e3,
                     "k context"
                   ] }),
-                  m.inputCost && m.outputCost && /* @__PURE__ */ jsxs22("div", { children: [
+                  m.inputCost && m.outputCost && /* @__PURE__ */ jsxs23("div", { children: [
                     "$",
                     m.inputCost,
                     "/$",
                     m.outputCost
                   ] }),
-                  model === m.id && /* @__PURE__ */ jsx26(CheckCircle24, { className: "h-4 w-4 text-primary mt-1" })
+                  model === m.id && /* @__PURE__ */ jsx27(CheckCircle24, { className: "h-4 w-4 text-primary mt-1" })
                 ] })
               ]
             },
             m.id
           )),
-          catalogModels[provider]?.length === 0 && /* @__PURE__ */ jsx26("p", { className: "text-sm text-muted-foreground text-center py-4", children: "No models found for this provider. The catalog might be empty or still loading." })
+          catalogModels[provider]?.length === 0 && /* @__PURE__ */ jsx27("p", { className: "text-sm text-muted-foreground text-center py-4", children: "No models found for this provider. The catalog might be empty or still loading." })
         ] })
-      ] }) : /* @__PURE__ */ jsxs22("div", { className: "text-center py-8 text-muted-foreground", children: [
-        /* @__PURE__ */ jsx26(Cpu4, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
-        /* @__PURE__ */ jsx26("p", { children: "Select a provider first" })
+      ] }) : /* @__PURE__ */ jsxs23("div", { className: "text-center py-8 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx27(Cpu4, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
+        /* @__PURE__ */ jsx27("p", { children: "Select a provider first" })
       ] }) }),
-      /* @__PURE__ */ jsxs22(TabsContent, { value: "connection", className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs22("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsxs22(
+      /* @__PURE__ */ jsxs23(TabsContent, { value: "connection", className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs23("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs23(
             "label",
             {
               htmlFor: "websocket-url",
               className: "text-sm font-medium flex items-center gap-2",
               children: [
-                /* @__PURE__ */ jsx26(Globe2, { className: "h-4 w-4 text-muted-foreground" }),
+                /* @__PURE__ */ jsx27(Globe2, { className: "h-4 w-4 text-muted-foreground" }),
                 "WebSocket Server URL"
               ]
             }
           ),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             Input,
             {
               id: "websocket-url",
@@ -6759,70 +7041,70 @@ function SettingsPanel() {
               className: "font-mono text-sm"
             }
           ),
-          /* @__PURE__ */ jsx26("p", { className: "text-xs text-muted-foreground", children: "URL of the WrongStack WebSocket server. The server runs alongside the CLI." })
+          /* @__PURE__ */ jsx27("p", { className: "text-xs text-muted-foreground", children: "URL of the WrongStack WebSocket server. The server runs alongside the CLI." })
         ] }),
-        /* @__PURE__ */ jsxs22("div", { className: "p-4 rounded-lg border bg-muted/50", children: [
-          /* @__PURE__ */ jsx26("h4", { className: "text-sm font-medium mb-2", children: "Starting the WebSocket Server" }),
-          /* @__PURE__ */ jsxs22("p", { className: "text-xs text-muted-foreground mb-3", children: [
+        /* @__PURE__ */ jsxs23("div", { className: "p-4 rounded-lg border bg-muted/50", children: [
+          /* @__PURE__ */ jsx27("h4", { className: "text-sm font-medium mb-2", children: "Starting the WebSocket Server" }),
+          /* @__PURE__ */ jsxs23("p", { className: "text-xs text-muted-foreground mb-3", children: [
             "Standalone: run ",
-            /* @__PURE__ */ jsx26("code", { className: "bg-muted px-1 py-0.5 rounded", children: "./dev.ps1" }),
+            /* @__PURE__ */ jsx27("code", { className: "bg-muted px-1 py-0.5 rounded", children: "./dev.ps1" }),
             " ",
             "from the repo root, or set WS_HOST/WS_PORT before launching",
             " ",
-            /* @__PURE__ */ jsx26("code", { className: "bg-muted px-1 py-0.5 rounded", children: "node packages/webui/dist/server/entry.js" }),
+            /* @__PURE__ */ jsx27("code", { className: "bg-muted px-1 py-0.5 rounded", children: "node packages/webui/dist/server/entry.js" }),
             ". Or alongside the CLI:",
             " ",
-            /* @__PURE__ */ jsx26("code", { className: "bg-muted px-1 py-0.5 rounded", children: "wstack --webui" }),
+            /* @__PURE__ */ jsx27("code", { className: "bg-muted px-1 py-0.5 rounded", children: "wstack --webui" }),
             "."
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs22(TabsContent, { value: "appearance", className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs22("div", { children: [
-          /* @__PURE__ */ jsx26("h3", { className: "text-sm font-semibold mb-3", children: "Theme" }),
-          /* @__PURE__ */ jsxs22("div", { className: "grid grid-cols-3 gap-2 max-w-md", children: [
-            /* @__PURE__ */ jsxs22(
+      /* @__PURE__ */ jsxs23(TabsContent, { value: "appearance", className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs23("div", { children: [
+          /* @__PURE__ */ jsx27("h3", { className: "text-sm font-semibold mb-3", children: "Theme" }),
+          /* @__PURE__ */ jsxs23("div", { className: "grid grid-cols-3 gap-2 max-w-md", children: [
+            /* @__PURE__ */ jsxs23(
               Button,
               {
                 variant: theme === "light" ? "default" : "outline",
                 size: "sm",
                 onClick: () => setTheme("light"),
                 children: [
-                  /* @__PURE__ */ jsx26(Sun3, { className: "h-4 w-4 mr-1" }),
+                  /* @__PURE__ */ jsx27(Sun3, { className: "h-4 w-4 mr-1" }),
                   "Light"
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs22(
+            /* @__PURE__ */ jsxs23(
               Button,
               {
                 variant: theme === "dark" ? "default" : "outline",
                 size: "sm",
                 onClick: () => setTheme("dark"),
                 children: [
-                  /* @__PURE__ */ jsx26(Moon3, { className: "h-4 w-4 mr-1" }),
+                  /* @__PURE__ */ jsx27(Moon3, { className: "h-4 w-4 mr-1" }),
                   "Dark"
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs22(
+            /* @__PURE__ */ jsxs23(
               Button,
               {
                 variant: theme === "system" ? "default" : "outline",
                 size: "sm",
                 onClick: () => setTheme("system"),
                 children: [
-                  /* @__PURE__ */ jsx26(Monitor3, { className: "h-4 w-4 mr-1" }),
+                  /* @__PURE__ */ jsx27(Monitor3, { className: "h-4 w-4 mr-1" }),
                   "System"
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ jsx26("p", { className: "text-xs text-muted-foreground mt-2", children: "System follows your OS-level light/dark preference." })
+          /* @__PURE__ */ jsx27("p", { className: "text-xs text-muted-foreground mt-2", children: "System follows your OS-level light/dark preference." })
         ] }),
-        /* @__PURE__ */ jsxs22("div", { className: "pt-2 border-t", children: [
-          /* @__PURE__ */ jsx26("h3", { className: "text-sm font-semibold mb-3 mt-3", children: "Preferences" }),
-          /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsxs23("div", { className: "pt-2 border-t", children: [
+          /* @__PURE__ */ jsx27("h3", { className: "text-sm font-semibold mb-3 mt-3", children: "Preferences" }),
+          /* @__PURE__ */ jsx27(
             PreferenceToggle,
             {
               label: "Compact density",
@@ -6831,7 +7113,7 @@ function SettingsPanel() {
               onChange: () => useUIStore.getState().toggleCompactMode()
             }
           ),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             PreferenceToggle,
             {
               label: "Sound on completion",
@@ -6865,12 +7147,12 @@ function PreferenceToggle({
       }
     }
   };
-  return /* @__PURE__ */ jsxs22("div", { className: "flex items-start justify-between gap-3 py-2", children: [
-    /* @__PURE__ */ jsxs22("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx26("div", { className: "text-sm font-medium", children: label }),
-      hint && /* @__PURE__ */ jsx26("div", { className: "text-xs text-muted-foreground mt-0.5", children: hint })
+  return /* @__PURE__ */ jsxs23("div", { className: "flex items-start justify-between gap-3 py-2", children: [
+    /* @__PURE__ */ jsxs23("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx27("div", { className: "text-sm font-medium", children: label }),
+      hint && /* @__PURE__ */ jsx27("div", { className: "text-xs text-muted-foreground mt-0.5", children: hint })
     ] }),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(
       "button",
       {
         type: "button",
@@ -6881,7 +7163,7 @@ function PreferenceToggle({
           "shrink-0 relative inline-flex h-5 w-9 rounded-full border transition-colors",
           on ? "bg-primary border-primary" : "bg-muted border-input hover:bg-muted/80"
         ),
-        children: /* @__PURE__ */ jsx26(
+        children: /* @__PURE__ */ jsx27(
           "span",
           {
             className: cn(
@@ -6897,8 +7179,8 @@ function PreferenceToggle({
 
 // src/components/ShortcutsOverlay.tsx
 import { Keyboard as Keyboard2, X as X6 } from "lucide-react";
-import { useEffect as useEffect18 } from "react";
-import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useEffect as useEffect19 } from "react";
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 var SHORTCUTS = [
   {
     section: "Global",
@@ -6948,7 +7230,7 @@ var SHORTCUTS = [
 function ShortcutsOverlay() {
   const open = useUIStore((s) => s.shortcutsOpen);
   const setOpen = useUIStore((s) => s.setShortcutsOpen);
-  useEffect18(() => {
+  useEffect19(() => {
     const onKey = (e) => {
       const target = e.target;
       const tag = target?.tagName?.toLowerCase();
@@ -6967,7 +7249,7 @@ function ShortcutsOverlay() {
     return () => window.removeEventListener("keydown", onKey);
   }, [setOpen]);
   if (!open) return null;
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       className: "fixed inset-0 z-50 bg-background/60 backdrop-blur-sm flex items-center justify-center px-4",
@@ -6975,49 +7257,49 @@ function ShortcutsOverlay() {
       onKeyDown: (e) => {
         if (e.key === "Escape") setOpen(false);
       },
-      children: /* @__PURE__ */ jsxs23(
+      children: /* @__PURE__ */ jsxs24(
         "div",
         {
           onClick: (e) => e.stopPropagation(),
           onKeyDown: (e) => e.stopPropagation(),
           className: "w-full max-w-2xl rounded-xl border bg-popover shadow-2xl overflow-hidden flex flex-col max-h-[80vh]",
           children: [
-            /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between px-5 py-4 border-b", children: [
-              /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx27(Keyboard2, { className: "h-4 w-4 text-muted-foreground" }),
-                /* @__PURE__ */ jsx27("h2", { className: "text-sm font-semibold", children: "Keyboard shortcuts" })
+            /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between px-5 py-4 border-b", children: [
+              /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx28(Keyboard2, { className: "h-4 w-4 text-muted-foreground" }),
+                /* @__PURE__ */ jsx28("h2", { className: "text-sm font-semibold", children: "Keyboard shortcuts" })
               ] }),
-              /* @__PURE__ */ jsx27(
+              /* @__PURE__ */ jsx28(
                 "button",
                 {
                   type: "button",
                   onClick: () => setOpen(false),
                   className: "text-muted-foreground hover:text-foreground p-1 rounded hover:bg-muted",
-                  children: /* @__PURE__ */ jsx27(X6, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx28(X6, { className: "h-4 w-4" })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx27("div", { className: "overflow-y-auto px-5 py-4 space-y-6", children: SHORTCUTS.map((group) => /* @__PURE__ */ jsxs23("div", { children: [
-              /* @__PURE__ */ jsx27("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground mb-2", children: group.section }),
-              /* @__PURE__ */ jsx27("div", { className: "grid grid-cols-1 gap-1.5", children: group.items.map((s) => /* @__PURE__ */ jsxs23(
+            /* @__PURE__ */ jsx28("div", { className: "overflow-y-auto px-5 py-4 space-y-6", children: SHORTCUTS.map((group) => /* @__PURE__ */ jsxs24("div", { children: [
+              /* @__PURE__ */ jsx28("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground mb-2", children: group.section }),
+              /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-1 gap-1.5", children: group.items.map((s) => /* @__PURE__ */ jsxs24(
                 "div",
                 {
                   className: "flex items-center justify-between gap-3 text-sm px-2 py-1.5 rounded hover:bg-muted/40",
                   children: [
-                    /* @__PURE__ */ jsx27("span", { className: "text-foreground/80", children: s.description }),
-                    /* @__PURE__ */ jsx27("span", { className: "flex items-center gap-1 shrink-0", children: s.keys.map((k, ki) => /* @__PURE__ */ jsxs23("span", { className: "flex items-center gap-1", children: [
-                      ki > 0 && /* @__PURE__ */ jsx27("span", { className: "text-muted-foreground/40 text-xs", children: "+" }),
-                      /* @__PURE__ */ jsx27("kbd", { className: "font-mono text-[10px] border rounded px-1.5 py-0.5 bg-background", children: k })
+                    /* @__PURE__ */ jsx28("span", { className: "text-foreground/80", children: s.description }),
+                    /* @__PURE__ */ jsx28("span", { className: "flex items-center gap-1 shrink-0", children: s.keys.map((k, ki) => /* @__PURE__ */ jsxs24("span", { className: "flex items-center gap-1", children: [
+                      ki > 0 && /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground/40 text-xs", children: "+" }),
+                      /* @__PURE__ */ jsx28("kbd", { className: "font-mono text-[10px] border rounded px-1.5 py-0.5 bg-background", children: k })
                     ] }, k)) })
                   ]
                 },
                 s.description
               )) })
             ] }, group.section)) }),
-            /* @__PURE__ */ jsxs23("div", { className: "border-t px-5 py-3 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs24("div", { className: "border-t px-5 py-3 text-xs text-muted-foreground", children: [
               "Press",
               " ",
-              /* @__PURE__ */ jsx27("kbd", { className: "font-mono text-[10px] border rounded px-1 py-0.5 bg-background", children: "?" }),
+              /* @__PURE__ */ jsx28("kbd", { className: "font-mono text-[10px] border rounded px-1 py-0.5 bg-background", children: "?" }),
               " ",
               "any time to reopen this list."
             ] })
@@ -7046,13 +7328,13 @@ import {
   Settings as SettingsIcon2,
   Star,
   Trash2 as Trash23,
-  Wifi as Wifi3,
-  WifiOff as WifiOff4,
+  Wifi as Wifi2,
+  WifiOff as WifiOff3,
   X as X7,
   Zap as Zap3
 } from "lucide-react";
-import { useEffect as useEffect19, useState as useState18 } from "react";
-import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useEffect as useEffect20, useState as useState19 } from "react";
+import { Fragment as Fragment8, jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
 function Sidebar() {
   const { toggleSidebar, currentView, setCurrentView } = useUIStore();
   const sidebarWidth = useUIStore((s) => s.sidebarWidth);
@@ -7061,13 +7343,13 @@ function Sidebar() {
   const { messages, clearMessages } = useChatStore();
   const pinnedIds = useUIStore((s) => s.pinnedIds);
   const unpinAll = useUIStore((s) => s.unpinAll);
-  const [historyQuery, setHistoryQuery] = useState18("");
+  const [historyQuery, setHistoryQuery] = useState19("");
   const favoriteSessionIds = useUIStore((s) => s.favoriteSessionIds);
   const toggleFavoriteSession = useUIStore((s) => s.toggleFavoriteSession);
   const sessionNicknames = useUIStore((s) => s.sessionNicknames);
   const setSessionNickname = useUIStore((s) => s.setSessionNickname);
-  const [renamingId, setRenamingId] = useState18(null);
-  const [renameDraft, setRenameDraft] = useState18("");
+  const [renamingId, setRenamingId] = useState19(null);
+  const [renameDraft, setRenameDraft] = useState19("");
   const pinnedRows = pinnedIds.map((id) => messages.find((m) => m.id === id)).filter((m) => !!m && m.content.length > 0);
   const { wsConnected, wsUrl, provider, model } = useConfigStore();
   const {
@@ -7076,11 +7358,11 @@ function Sidebar() {
     error: historyError
   } = useHistoryStore();
   const { listSessions, deleteSession, resumeSession, client: client2 } = useWebSocket();
-  useEffect19(() => {
+  useEffect20(() => {
     if (wsConnected) client2?.getTodos?.();
   }, [wsConnected, client2]);
   const activeSessionId = session?.id;
-  useEffect19(() => {
+  useEffect20(() => {
     void activeSessionId;
     if (currentView === "history" && wsConnected) {
       listSessions(50);
@@ -7164,13 +7446,13 @@ function Sidebar() {
     document.body.style.cursor = "col-resize";
     document.body.style.userSelect = "none";
   };
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "aside",
     {
       style: { width: `${sidebarWidth}px` },
       className: "relative border-r bg-card flex flex-col shrink-0",
       children: [
-        /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsxs25(
           "div",
           {
             onMouseDown: startDrag,
@@ -7178,56 +7460,56 @@ function Sidebar() {
             className: "group/handle absolute top-0 right-0 h-full w-2 cursor-col-resize z-10 flex items-center justify-end",
             title: "Drag to resize \xB7 double-click to reset",
             children: [
-              /* @__PURE__ */ jsx28("div", { className: "h-full w-px bg-border group-hover/handle:bg-primary/60 group-hover/handle:w-0.5 transition-all" }),
-              /* @__PURE__ */ jsxs24("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 flex flex-col gap-0.5 opacity-0 group-hover/handle:opacity-100 transition-opacity pr-0.5", children: [
-                /* @__PURE__ */ jsx28("span", { className: "h-1 w-1 rounded-full bg-primary/70" }),
-                /* @__PURE__ */ jsx28("span", { className: "h-1 w-1 rounded-full bg-primary/70" }),
-                /* @__PURE__ */ jsx28("span", { className: "h-1 w-1 rounded-full bg-primary/70" })
+              /* @__PURE__ */ jsx29("div", { className: "h-full w-px bg-border group-hover/handle:bg-primary/60 group-hover/handle:w-0.5 transition-all" }),
+              /* @__PURE__ */ jsxs25("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 flex flex-col gap-0.5 opacity-0 group-hover/handle:opacity-100 transition-opacity pr-0.5", children: [
+                /* @__PURE__ */ jsx29("span", { className: "h-1 w-1 rounded-full bg-primary/70" }),
+                /* @__PURE__ */ jsx29("span", { className: "h-1 w-1 rounded-full bg-primary/70" }),
+                /* @__PURE__ */ jsx29("span", { className: "h-1 w-1 rounded-full bg-primary/70" })
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between px-4 py-3 border-b", children: [
-          /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx28("div", { className: "w-6 h-6 rounded bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsx28(Zap3, { className: "h-4 w-4 text-primary-foreground" }) }),
-            /* @__PURE__ */ jsx28("span", { className: "text-sm font-semibold tracking-tight", children: "WrongStack" })
+        /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between px-4 py-3 border-b", children: [
+          /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx29("div", { className: "w-6 h-6 rounded bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsx29(Zap3, { className: "h-4 w-4 text-primary-foreground" }) }),
+            /* @__PURE__ */ jsx29("span", { className: "text-sm font-semibold tracking-tight", children: "WrongStack" })
           ] }),
-          /* @__PURE__ */ jsx28(Button, { variant: "ghost", size: "icon", onClick: toggleSidebar, children: /* @__PURE__ */ jsx28(PanelLeftClose, { className: "h-4 w-4" }) })
+          /* @__PURE__ */ jsx29(Button, { variant: "ghost", size: "icon", onClick: toggleSidebar, children: /* @__PURE__ */ jsx29(PanelLeftClose, { className: "h-4 w-4" }) })
         ] }),
-        /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsxs25(
           Tabs,
           {
             value: currentView === "settings" ? "chat" : currentView,
             onValueChange: (v) => setCurrentView(v),
             className: "flex-1 flex flex-col",
             children: [
-              /* @__PURE__ */ jsxs24(TabsList, { className: "w-full rounded-none bg-transparent p-2 h-auto grid grid-cols-2", children: [
-                /* @__PURE__ */ jsxs24(
+              /* @__PURE__ */ jsxs25(TabsList, { className: "w-full rounded-none bg-transparent p-2 h-auto grid grid-cols-2", children: [
+                /* @__PURE__ */ jsxs25(
                   TabsTrigger,
                   {
                     value: "chat",
                     className: "flex-col gap-1.5 py-2 data-[state=active]:bg-primary/10",
                     children: [
-                      /* @__PURE__ */ jsx28(MessageSquare, { className: "h-4 w-4" }),
-                      /* @__PURE__ */ jsx28("span", { className: "text-xs", children: "Chat" })
+                      /* @__PURE__ */ jsx29(MessageSquare, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsx29("span", { className: "text-xs", children: "Chat" })
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs24(
+                /* @__PURE__ */ jsxs25(
                   TabsTrigger,
                   {
                     value: "history",
                     className: "flex-col gap-1.5 py-2 data-[state=active]:bg-primary/10",
                     children: [
-                      /* @__PURE__ */ jsx28(History, { className: "h-4 w-4" }),
-                      /* @__PURE__ */ jsx28("span", { className: "text-xs", children: "History" })
+                      /* @__PURE__ */ jsx29(History, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsx29("span", { className: "text-xs", children: "History" })
                     ]
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs24(TabsContent, { value: "chat", className: "flex-1 flex flex-col m-0 overflow-hidden", children: [
-                /* @__PURE__ */ jsxs24("div", { className: "px-4 py-3 border-b", children: [
-                  /* @__PURE__ */ jsxs24(
+              /* @__PURE__ */ jsxs25(TabsContent, { value: "chat", className: "flex-1 flex flex-col m-0 overflow-hidden", children: [
+                /* @__PURE__ */ jsxs25("div", { className: "px-4 py-3 border-b", children: [
+                  /* @__PURE__ */ jsxs25(
                     "div",
                     {
                       className: cn(
@@ -7235,95 +7517,95 @@ function Sidebar() {
                         wsConnected ? "bg-green-500/10 text-green-600 dark:text-green-400" : "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400"
                       ),
                       children: [
-                        wsConnected ? /* @__PURE__ */ jsx28(Wifi3, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx28(WifiOff4, { className: "h-4 w-4" }),
-                        /* @__PURE__ */ jsx28("span", { className: "font-medium", children: wsConnected ? "Connected" : "Disconnected" })
+                        wsConnected ? /* @__PURE__ */ jsx29(Wifi2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx29(WifiOff3, { className: "h-4 w-4" }),
+                        /* @__PURE__ */ jsx29("span", { className: "font-medium", children: wsConnected ? "Connected" : "Disconnected" })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx28("div", { className: "text-xs text-muted-foreground mt-2 px-1 font-mono", children: wsUrl })
+                  /* @__PURE__ */ jsx29("div", { className: "text-xs text-muted-foreground mt-2 px-1 font-mono", children: wsUrl })
                 ] }),
-                /* @__PURE__ */ jsxs24(
+                /* @__PURE__ */ jsxs25(
                   "button",
                   {
                     type: "button",
                     onClick: () => setCurrentView("settings"),
                     className: "px-4 py-3 border-b text-left hover:bg-muted/40 transition-colors",
                     children: [
-                      /* @__PURE__ */ jsx28("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground mb-1", children: "Active model" }),
-                      /* @__PURE__ */ jsxs24("div", { className: "font-mono text-xs truncate", children: [
-                        /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground", children: provider || "\u2014" }),
-                        /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground/40 mx-1", children: "/" }),
-                        /* @__PURE__ */ jsx28("span", { className: "font-medium", children: model || "\u2014" })
+                      /* @__PURE__ */ jsx29("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground mb-1", children: "Active model" }),
+                      /* @__PURE__ */ jsxs25("div", { className: "font-mono text-xs truncate", children: [
+                        /* @__PURE__ */ jsx29("span", { className: "text-muted-foreground", children: provider || "\u2014" }),
+                        /* @__PURE__ */ jsx29("span", { className: "text-muted-foreground/40 mx-1", children: "/" }),
+                        /* @__PURE__ */ jsx29("span", { className: "font-medium", children: model || "\u2014" })
                       ] })
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs24("div", { className: "px-4 py-3 border-b space-y-3", children: [
-                  /* @__PURE__ */ jsxs24("h3", { className: "text-sm font-medium flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx28(Database2, { className: "h-4 w-4 text-muted-foreground" }),
+                /* @__PURE__ */ jsxs25("div", { className: "px-4 py-3 border-b space-y-3", children: [
+                  /* @__PURE__ */ jsxs25("h3", { className: "text-sm font-medium flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx29(Database2, { className: "h-4 w-4 text-muted-foreground" }),
                     "Session"
                   ] }),
-                  /* @__PURE__ */ jsxs24("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [
-                    /* @__PURE__ */ jsxs24("div", { className: "flex flex-col p-2 rounded-lg bg-muted/50", children: [
-                      /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground", children: "Messages" }),
-                      /* @__PURE__ */ jsx28("span", { className: "text-lg font-semibold", children: messages.length })
+                  /* @__PURE__ */ jsxs25("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [
+                    /* @__PURE__ */ jsxs25("div", { className: "flex flex-col p-2 rounded-lg bg-muted/50", children: [
+                      /* @__PURE__ */ jsx29("span", { className: "text-muted-foreground", children: "Messages" }),
+                      /* @__PURE__ */ jsx29("span", { className: "text-lg font-semibold", children: messages.length })
                     ] }),
-                    /* @__PURE__ */ jsxs24("div", { className: "flex flex-col p-2 rounded-lg bg-muted/50", children: [
-                      /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground", children: "Duration" }),
-                      /* @__PURE__ */ jsx28("span", { className: "text-lg font-semibold", children: formatDuration2(session?.startedAt ?? null) })
+                    /* @__PURE__ */ jsxs25("div", { className: "flex flex-col p-2 rounded-lg bg-muted/50", children: [
+                      /* @__PURE__ */ jsx29("span", { className: "text-muted-foreground", children: "Duration" }),
+                      /* @__PURE__ */ jsx29("span", { className: "text-lg font-semibold", children: formatDuration2(session?.startedAt ?? null) })
                     ] }),
-                    /* @__PURE__ */ jsxs24("div", { className: "flex flex-col p-2 rounded-lg bg-muted/50", children: [
-                      /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground", children: "Input" }),
-                      /* @__PURE__ */ jsx28("span", { className: "text-lg font-semibold", children: totalTokens.input.toLocaleString() })
+                    /* @__PURE__ */ jsxs25("div", { className: "flex flex-col p-2 rounded-lg bg-muted/50", children: [
+                      /* @__PURE__ */ jsx29("span", { className: "text-muted-foreground", children: "Input" }),
+                      /* @__PURE__ */ jsx29("span", { className: "text-lg font-semibold", children: totalTokens.input.toLocaleString() })
                     ] }),
-                    /* @__PURE__ */ jsxs24("div", { className: "flex flex-col p-2 rounded-lg bg-muted/50", children: [
-                      /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground", children: "Output" }),
-                      /* @__PURE__ */ jsx28("span", { className: "text-lg font-semibold", children: totalTokens.output.toLocaleString() })
+                    /* @__PURE__ */ jsxs25("div", { className: "flex flex-col p-2 rounded-lg bg-muted/50", children: [
+                      /* @__PURE__ */ jsx29("span", { className: "text-muted-foreground", children: "Output" }),
+                      /* @__PURE__ */ jsx29("span", { className: "text-lg font-semibold", children: totalTokens.output.toLocaleString() })
                     ] })
                   ] }),
-                  cost > 0 && /* @__PURE__ */ jsxs24("div", { className: "flex justify-between items-center p-2 rounded-lg bg-green-500/10", children: [
-                    /* @__PURE__ */ jsx28("span", { className: "text-sm text-muted-foreground", children: "Cost" }),
-                    /* @__PURE__ */ jsxs24("span", { className: "text-lg font-semibold text-green-600 dark:text-green-400", children: [
+                  cost > 0 && /* @__PURE__ */ jsxs25("div", { className: "flex justify-between items-center p-2 rounded-lg bg-green-500/10", children: [
+                    /* @__PURE__ */ jsx29("span", { className: "text-sm text-muted-foreground", children: "Cost" }),
+                    /* @__PURE__ */ jsxs25("span", { className: "text-lg font-semibold text-green-600 dark:text-green-400", children: [
                       "$",
                       cost.toFixed(4)
                     ] })
                   ] })
                 ] }),
-                todos.length > 0 && /* @__PURE__ */ jsxs24("div", { className: "px-4 py-3 border-b space-y-2", children: [
-                  /* @__PURE__ */ jsxs24("h3", { className: "text-sm font-medium flex items-center justify-between", children: [
-                    /* @__PURE__ */ jsxs24("span", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx28(ListTodo, { className: "h-4 w-4 text-muted-foreground" }),
+                todos.length > 0 && /* @__PURE__ */ jsxs25("div", { className: "px-4 py-3 border-b space-y-2", children: [
+                  /* @__PURE__ */ jsxs25("h3", { className: "text-sm font-medium flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxs25("span", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx29(ListTodo, { className: "h-4 w-4 text-muted-foreground" }),
                       "Todos"
                     ] }),
-                    /* @__PURE__ */ jsxs24("span", { className: "text-[10px] text-muted-foreground tabular-nums", children: [
+                    /* @__PURE__ */ jsxs25("span", { className: "text-[10px] text-muted-foreground tabular-nums", children: [
                       todos.filter((t) => t.status === "completed").length,
                       "/",
                       todos.length
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx28("ul", { className: "space-y-1 max-h-48 overflow-y-auto pr-1", children: todos.map((t) => {
+                  /* @__PURE__ */ jsx29("ul", { className: "space-y-1 max-h-48 overflow-y-auto pr-1", children: todos.map((t) => {
                     const Icon2 = t.status === "completed" ? CheckCircle25 : t.status === "in_progress" ? CircleDot : Circle;
                     const tone2 = t.status === "completed" ? "text-green-600 dark:text-green-400 line-through opacity-70" : t.status === "in_progress" ? "text-amber-600 dark:text-amber-400" : "text-muted-foreground";
-                    return /* @__PURE__ */ jsxs24(
+                    return /* @__PURE__ */ jsxs25(
                       "li",
                       {
                         className: cn("flex items-start gap-2 text-xs leading-snug", tone2),
                         children: [
-                          /* @__PURE__ */ jsx28(Icon2, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }),
-                          /* @__PURE__ */ jsx28("span", { className: "break-words", children: t.status === "in_progress" && t.activeForm ? t.activeForm : t.content })
+                          /* @__PURE__ */ jsx29(Icon2, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }),
+                          /* @__PURE__ */ jsx29("span", { className: "break-words", children: t.status === "in_progress" && t.activeForm ? t.activeForm : t.content })
                         ]
                       },
                       t.id
                     );
                   }) })
                 ] }),
-                pinnedRows.length > 0 && /* @__PURE__ */ jsxs24("div", { className: "px-4 py-3 border-b space-y-2", children: [
-                  /* @__PURE__ */ jsxs24("h3", { className: "text-sm font-medium flex items-center justify-between", children: [
-                    /* @__PURE__ */ jsxs24("span", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx28(Pin2, { className: "h-4 w-4 text-amber-500" }),
+                pinnedRows.length > 0 && /* @__PURE__ */ jsxs25("div", { className: "px-4 py-3 border-b space-y-2", children: [
+                  /* @__PURE__ */ jsxs25("h3", { className: "text-sm font-medium flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxs25("span", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx29(Pin2, { className: "h-4 w-4 text-amber-500" }),
                       "Pinned"
                     ] }),
-                    /* @__PURE__ */ jsx28(
+                    /* @__PURE__ */ jsx29(
                       "button",
                       {
                         type: "button",
@@ -7333,9 +7615,9 @@ function Sidebar() {
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx28("ul", { className: "space-y-1 max-h-48 overflow-y-auto pr-1", children: pinnedRows.map((m) => {
+                  /* @__PURE__ */ jsx29("ul", { className: "space-y-1 max-h-48 overflow-y-auto pr-1", children: pinnedRows.map((m) => {
                     const preview = m.content.replace(/\s+/g, " ").slice(0, 80);
-                    return /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsxs24(
+                    return /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsxs25(
                       "button",
                       {
                         type: "button",
@@ -7358,8 +7640,8 @@ function Sidebar() {
                     ) }, m.id);
                   }) })
                 ] }),
-                /* @__PURE__ */ jsxs24("div", { className: "px-4 py-3 border-b space-y-2", children: [
-                  /* @__PURE__ */ jsxs24(
+                /* @__PURE__ */ jsxs25("div", { className: "px-4 py-3 border-b space-y-2", children: [
+                  /* @__PURE__ */ jsxs25(
                     Button,
                     {
                       variant: "outline",
@@ -7370,12 +7652,12 @@ function Sidebar() {
                         client2?.clearContext?.();
                       },
                       children: [
-                        /* @__PURE__ */ jsx28(Trash23, { className: "h-4 w-4 mr-2" }),
+                        /* @__PURE__ */ jsx29(Trash23, { className: "h-4 w-4 mr-2" }),
                         "Clear context"
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxs24(
+                  /* @__PURE__ */ jsxs25(
                     Button,
                     {
                       variant: "outline",
@@ -7384,12 +7666,12 @@ function Sidebar() {
                       onClick: () => client2?.newSession?.(),
                       disabled: !wsConnected,
                       children: [
-                        /* @__PURE__ */ jsx28(RotateCcw5, { className: "h-4 w-4 mr-2" }),
+                        /* @__PURE__ */ jsx29(RotateCcw5, { className: "h-4 w-4 mr-2" }),
                         "New session"
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxs24(
+                  /* @__PURE__ */ jsxs25(
                     Button,
                     {
                       variant: "outline",
@@ -7398,14 +7680,14 @@ function Sidebar() {
                       onClick: () => client2?.compactContext?.(),
                       disabled: !wsConnected,
                       children: [
-                        /* @__PURE__ */ jsx28(Database2, { className: "h-4 w-4 mr-2" }),
+                        /* @__PURE__ */ jsx29(Database2, { className: "h-4 w-4 mr-2" }),
                         "Compact context"
                       ]
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx28("div", { className: "flex-1" }),
-                /* @__PURE__ */ jsx28("div", { className: "px-3 py-3 border-t", children: /* @__PURE__ */ jsxs24(
+                /* @__PURE__ */ jsx29("div", { className: "flex-1" }),
+                /* @__PURE__ */ jsx29("div", { className: "px-3 py-3 border-t", children: /* @__PURE__ */ jsxs25(
                   Button,
                   {
                     variant: "ghost",
@@ -7413,16 +7695,16 @@ function Sidebar() {
                     className: "w-full justify-start",
                     onClick: () => setCurrentView("settings"),
                     children: [
-                      /* @__PURE__ */ jsx28(SettingsIcon2, { className: "h-4 w-4 mr-2" }),
+                      /* @__PURE__ */ jsx29(SettingsIcon2, { className: "h-4 w-4 mr-2" }),
                       "Settings"
                     ]
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsxs24(TabsContent, { value: "history", className: "flex-1 m-0 flex flex-col overflow-hidden", children: [
-                /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between px-4 py-2 border-b", children: [
-                  /* @__PURE__ */ jsx28("span", { className: "text-xs uppercase tracking-wider text-muted-foreground", children: "Recent sessions" }),
-                  /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsxs25(TabsContent, { value: "history", className: "flex-1 m-0 flex flex-col overflow-hidden", children: [
+                /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between px-4 py-2 border-b", children: [
+                  /* @__PURE__ */ jsx29("span", { className: "text-xs uppercase tracking-wider text-muted-foreground", children: "Recent sessions" }),
+                  /* @__PURE__ */ jsx29(
                     Button,
                     {
                       variant: "ghost",
@@ -7431,13 +7713,13 @@ function Sidebar() {
                       onClick: () => listSessions(50),
                       disabled: !wsConnected,
                       title: "Refresh",
-                      children: historyLoading ? /* @__PURE__ */ jsx28(Loader25, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx28(RefreshCw3, { className: "h-3.5 w-3.5" })
+                      children: historyLoading ? /* @__PURE__ */ jsx29(Loader25, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx29(RefreshCw3, { className: "h-3.5 w-3.5" })
                     }
                   )
                 ] }),
-                historyEntries.length > 3 && /* @__PURE__ */ jsx28("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ jsxs24("div", { className: "relative", children: [
-                  /* @__PURE__ */ jsx28(Search5, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground/60" }),
-                  /* @__PURE__ */ jsx28(
+                historyEntries.length > 3 && /* @__PURE__ */ jsx29("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ jsxs25("div", { className: "relative", children: [
+                  /* @__PURE__ */ jsx29(Search5, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground/60" }),
+                  /* @__PURE__ */ jsx29(
                     "input",
                     {
                       type: "text",
@@ -7447,28 +7729,28 @@ function Sidebar() {
                       className: "w-full pl-7 pr-7 py-1 text-xs rounded-md bg-muted/40 border border-transparent focus:bg-background focus:border-input focus:outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/50"
                     }
                   ),
-                  historyQuery && /* @__PURE__ */ jsx28(
+                  historyQuery && /* @__PURE__ */ jsx29(
                     "button",
                     {
                       type: "button",
                       onClick: () => setHistoryQuery(""),
                       className: "absolute right-1 top-1/2 -translate-y-1/2 text-muted-foreground/60 hover:text-foreground p-0.5",
                       title: "Clear filter",
-                      children: /* @__PURE__ */ jsx28(X7, { className: "h-3 w-3" })
+                      children: /* @__PURE__ */ jsx29(X7, { className: "h-3 w-3" })
                     }
                   )
                 ] }) }),
-                historyError && /* @__PURE__ */ jsx28("div", { className: "px-4 py-2 text-xs text-destructive bg-destructive/5 border-b", children: historyError }),
-                /* @__PURE__ */ jsx28(ScrollArea, { className: "flex-1", children: historyEntries.length === 0 && !historyLoading ? /* @__PURE__ */ jsxs24("div", { className: "text-center text-muted-foreground py-8 px-4", children: [
-                  /* @__PURE__ */ jsx28(History, { className: "h-8 w-8 mx-auto mb-3 opacity-20" }),
-                  /* @__PURE__ */ jsx28("p", { className: "text-sm font-medium", children: "No history yet" }),
-                  /* @__PURE__ */ jsx28("p", { className: "text-xs mt-1", children: "Your conversations will appear here" })
-                ] }) : groupedHistory.length === 0 ? /* @__PURE__ */ jsxs24("div", { className: "text-center text-muted-foreground py-8 px-4", children: [
-                  /* @__PURE__ */ jsx28(Search5, { className: "h-8 w-8 mx-auto mb-3 opacity-20" }),
-                  /* @__PURE__ */ jsx28("p", { className: "text-sm font-medium", children: "No matches" }),
-                  /* @__PURE__ */ jsx28("p", { className: "text-xs mt-1", children: "Try a different filter" })
-                ] }) : /* @__PURE__ */ jsx28("div", { className: "p-2 space-y-3", children: groupedHistory.map((group) => /* @__PURE__ */ jsxs24("div", { className: "space-y-1", children: [
-                  /* @__PURE__ */ jsxs24(
+                historyError && /* @__PURE__ */ jsx29("div", { className: "px-4 py-2 text-xs text-destructive bg-destructive/5 border-b", children: historyError }),
+                /* @__PURE__ */ jsx29(ScrollArea, { className: "flex-1", children: historyEntries.length === 0 && !historyLoading ? /* @__PURE__ */ jsxs25("div", { className: "text-center text-muted-foreground py-8 px-4", children: [
+                  /* @__PURE__ */ jsx29(History, { className: "h-8 w-8 mx-auto mb-3 opacity-20" }),
+                  /* @__PURE__ */ jsx29("p", { className: "text-sm font-medium", children: "No history yet" }),
+                  /* @__PURE__ */ jsx29("p", { className: "text-xs mt-1", children: "Your conversations will appear here" })
+                ] }) : groupedHistory.length === 0 ? /* @__PURE__ */ jsxs25("div", { className: "text-center text-muted-foreground py-8 px-4", children: [
+                  /* @__PURE__ */ jsx29(Search5, { className: "h-8 w-8 mx-auto mb-3 opacity-20" }),
+                  /* @__PURE__ */ jsx29("p", { className: "text-sm font-medium", children: "No matches" }),
+                  /* @__PURE__ */ jsx29("p", { className: "text-xs mt-1", children: "Try a different filter" })
+                ] }) : /* @__PURE__ */ jsx29("div", { className: "p-2 space-y-3", children: groupedHistory.map((group) => /* @__PURE__ */ jsxs25("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsxs25(
                     "div",
                     {
                       className: cn(
@@ -7476,10 +7758,10 @@ function Sidebar() {
                         group.star ? "text-amber-500" : "text-muted-foreground/80"
                       ),
                       children: [
-                        group.star && /* @__PURE__ */ jsx28(Star, { className: "h-3 w-3 fill-current" }),
+                        group.star && /* @__PURE__ */ jsx29(Star, { className: "h-3 w-3 fill-current" }),
                         group.label,
                         " ",
-                        /* @__PURE__ */ jsxs24("span", { className: "text-muted-foreground/50 font-normal normal-case ml-1", children: [
+                        /* @__PURE__ */ jsxs25("span", { className: "text-muted-foreground/50 font-normal normal-case ml-1", children: [
                           "(",
                           group.rows.length,
                           ")"
@@ -7487,7 +7769,7 @@ function Sidebar() {
                       ]
                     }
                   ),
-                  group.rows.map((entry) => /* @__PURE__ */ jsxs24(
+                  group.rows.map((entry) => /* @__PURE__ */ jsxs25(
                     "div",
                     {
                       className: cn(
@@ -7495,7 +7777,7 @@ function Sidebar() {
                         entry.isCurrent ? "bg-primary/5 border-primary/40" : "bg-card border-border/60 hover:bg-muted/40 hover:border-primary/40"
                       ),
                       children: [
-                        /* @__PURE__ */ jsx28(
+                        /* @__PURE__ */ jsx29(
                           "button",
                           {
                             type: "button",
@@ -7507,8 +7789,8 @@ function Sidebar() {
                               setRenameDraft(sessionNicknames[entry.id] ?? entry.title ?? "");
                             },
                             className: "block w-full rounded-md px-3 py-2 pr-16 text-left disabled:cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                            children: /* @__PURE__ */ jsxs24("div", { className: "min-w-0 flex-1", children: [
-                              renamingId === entry.id ? /* @__PURE__ */ jsx28(
+                            children: /* @__PURE__ */ jsxs25("div", { className: "min-w-0 flex-1", children: [
+                              renamingId === entry.id ? /* @__PURE__ */ jsx29(
                                 "input",
                                 {
                                   value: renameDraft,
@@ -7531,7 +7813,7 @@ function Sidebar() {
                                   placeholder: entry.title || "Nickname",
                                   className: "w-full text-sm bg-background border border-input rounded px-1.5 py-0.5 focus:outline-none focus:ring-1 focus:ring-ring"
                                 }
-                              ) : /* @__PURE__ */ jsx28(
+                              ) : /* @__PURE__ */ jsx29(
                                 "div",
                                 {
                                   className: "font-medium truncate text-foreground",
@@ -7541,30 +7823,30 @@ Double-click to rename`,
                                   children: sessionNicknames[entry.id] || entry.title || "(empty)"
                                 }
                               ),
-                              /* @__PURE__ */ jsxs24("div", { className: "text-[10px] text-muted-foreground font-mono truncate mt-0.5", children: [
+                              /* @__PURE__ */ jsxs25("div", { className: "text-[10px] text-muted-foreground font-mono truncate mt-0.5", children: [
                                 entry.provider,
                                 "/",
                                 entry.model
                               ] }),
-                              /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2 text-[10px] text-muted-foreground/80 mt-0.5", children: [
-                                /* @__PURE__ */ jsx28("span", { children: formatRelative(entry.startedAt) }),
-                                entry.tokenTotal > 0 && /* @__PURE__ */ jsxs24(Fragment8, { children: [
-                                  /* @__PURE__ */ jsx28("span", { children: "\xB7" }),
-                                  /* @__PURE__ */ jsxs24("span", { className: "tabular-nums", children: [
+                              /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2 text-[10px] text-muted-foreground/80 mt-0.5", children: [
+                                /* @__PURE__ */ jsx29("span", { children: formatRelative(entry.startedAt) }),
+                                entry.tokenTotal > 0 && /* @__PURE__ */ jsxs25(Fragment8, { children: [
+                                  /* @__PURE__ */ jsx29("span", { children: "\xB7" }),
+                                  /* @__PURE__ */ jsxs25("span", { className: "tabular-nums", children: [
                                     entry.tokenTotal.toLocaleString(),
                                     " tok"
                                   ] })
                                 ] }),
-                                entry.isCurrent && /* @__PURE__ */ jsxs24(Fragment8, { children: [
-                                  /* @__PURE__ */ jsx28("span", { children: "\xB7" }),
-                                  /* @__PURE__ */ jsx28("span", { className: "text-primary font-medium", children: "active" })
+                                entry.isCurrent && /* @__PURE__ */ jsxs25(Fragment8, { children: [
+                                  /* @__PURE__ */ jsx29("span", { children: "\xB7" }),
+                                  /* @__PURE__ */ jsx29("span", { className: "text-primary font-medium", children: "active" })
                                 ] })
                               ] })
                             ] })
                           }
                         ),
-                        /* @__PURE__ */ jsxs24("div", { className: "absolute right-2 top-2 flex items-center gap-1", children: [
-                          /* @__PURE__ */ jsx28(
+                        /* @__PURE__ */ jsxs25("div", { className: "absolute right-2 top-2 flex items-center gap-1", children: [
+                          /* @__PURE__ */ jsx29(
                             "button",
                             {
                               type: "button",
@@ -7574,7 +7856,7 @@ Double-click to rename`,
                                 favoriteSessionIds.includes(entry.id) ? "opacity-100 text-amber-500" : "opacity-0 group-hover:opacity-100 text-muted-foreground"
                               ),
                               title: favoriteSessionIds.includes(entry.id) ? "Unfavorite" : "Mark as favorite",
-                              children: /* @__PURE__ */ jsx28(
+                              children: /* @__PURE__ */ jsx29(
                                 Star,
                                 {
                                   className: cn(
@@ -7585,7 +7867,7 @@ Double-click to rename`,
                               )
                             }
                           ),
-                          !entry.isCurrent && /* @__PURE__ */ jsx28(
+                          !entry.isCurrent && /* @__PURE__ */ jsx29(
                             "button",
                             {
                               type: "button",
@@ -7596,7 +7878,7 @@ Double-click to rename`,
                               },
                               className: "opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive",
                               title: "Delete session",
-                              children: /* @__PURE__ */ jsx28(Trash23, { className: "h-3.5 w-3.5" })
+                              children: /* @__PURE__ */ jsx29(Trash23, { className: "h-3.5 w-3.5" })
                             }
                           )
                         ] })
@@ -7615,7 +7897,7 @@ Double-click to rename`,
 }
 
 // src/App.tsx
-import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
 function AppInner() {
   const { theme } = useTheme();
   const { currentView, sidebarOpen, toggleSidebar, setSearchOpen, setSidebarOpen } = useUIStore();
@@ -7625,7 +7907,7 @@ function AppInner() {
   const sessionTitle = useSessionStore((s) => s.session?.title);
   const sessionId = useSessionStore((s) => s.session?.id);
   const nickname = useUIStore((s) => sessionId ? s.sessionNicknames[sessionId] : void 0);
-  useEffect20(() => {
+  useEffect21(() => {
     if (typeof window === "undefined") return;
     const mq = window.matchMedia("(max-width: 768px)");
     const apply = () => {
@@ -7638,7 +7920,7 @@ function AppInner() {
     return () => mq.removeEventListener("change", apply);
   }, [setSidebarOpen]);
   useWebSocketBootstrap();
-  useEffect20(() => {
+  useEffect21(() => {
     const parts = [];
     if (isLoading) {
       const it = iteration ? ` iter ${iteration.index}${iteration.max ? `/${iteration.max}` : ""}` : "";
@@ -7655,7 +7937,7 @@ function AppInner() {
       document.title = "WrongStack";
     };
   }, [isLoading, iteration, projectName, sessionTitle, nickname]);
-  useEffect20(() => {
+  useEffect21(() => {
     const onKey = (e) => {
       const t = e.target;
       const tag = t?.tagName?.toLowerCase();
@@ -7751,27 +8033,30 @@ function AppInner() {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [toggleSidebar, setSearchOpen]);
-  return /* @__PURE__ */ jsxs25("div", { className: cn("flex h-screen", theme), children: [
-    sidebarOpen && /* @__PURE__ */ jsx29(Sidebar, {}),
-    /* @__PURE__ */ jsxs25("main", { className: "flex-1 flex flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsx29(ConnectionBanner, {}),
-      currentView === "chat" && /* @__PURE__ */ jsx29(ChatView, {}),
-      currentView === "settings" && /* @__PURE__ */ jsx29(SettingsPanel, {})
+  return /* @__PURE__ */ jsxs26("div", { className: cn("flex h-screen", theme), children: [
+    sidebarOpen && /* @__PURE__ */ jsx30(Sidebar, {}),
+    /* @__PURE__ */ jsxs26("main", { className: "flex-1 flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsx30(ConnectionBanner, {}),
+      currentView === "chat" && /* @__PURE__ */ jsxs26(Fragment9, { children: [
+        sessionId && /* @__PURE__ */ jsx30("div", { className: "px-4 pt-2", children: /* @__PURE__ */ jsx30(CollabPanel, { sessionId }) }),
+        /* @__PURE__ */ jsx30(ChatView, {})
+      ] }),
+      currentView === "settings" && /* @__PURE__ */ jsx30(SettingsPanel, {})
     ] }),
-    /* @__PURE__ */ jsx29(ConfirmDialog, {}),
-    /* @__PURE__ */ jsx29(CommandPalette, {}),
-    /* @__PURE__ */ jsx29(ShortcutsOverlay, {}),
-    /* @__PURE__ */ jsx29(QuickModelSwitcher, {}),
-    /* @__PURE__ */ jsx29(Toaster, {})
+    /* @__PURE__ */ jsx30(ConfirmDialog, {}),
+    /* @__PURE__ */ jsx30(CommandPalette, {}),
+    /* @__PURE__ */ jsx30(ShortcutsOverlay, {}),
+    /* @__PURE__ */ jsx30(QuickModelSwitcher, {}),
+    /* @__PURE__ */ jsx30(Toaster, {})
   ] });
 }
 function App() {
-  return /* @__PURE__ */ jsx29(ErrorBoundary, { children: /* @__PURE__ */ jsx29(ThemeProvider, { defaultTheme: "system", children: /* @__PURE__ */ jsx29(AppInner, {}) }) });
+  return /* @__PURE__ */ jsx30(ErrorBoundary, { children: /* @__PURE__ */ jsx30(ThemeProvider, { defaultTheme: "system", children: /* @__PURE__ */ jsx30(AppInner, {}) }) });
 }
 
 // src/main.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 ReactDOM.createRoot(document.getElementById("root")).render(
-  /* @__PURE__ */ jsx30(React7.StrictMode, { children: /* @__PURE__ */ jsx30(App, {}) })
+  /* @__PURE__ */ jsx31(React6.StrictMode, { children: /* @__PURE__ */ jsx31(App, {}) })
 );
 //# sourceMappingURL=index.js.map