@wrongstack/webui 0.68.0 → 0.77.0

package/dist/index.js

@@ -408,6 +408,10 @@ var WrongStackWebSocketClient = class {
   clearTodos() {
     this.send({ type: "todos.clear" });
   }
+  removeTodo(idOrIndex) {
+    const payload = typeof idOrIndex === "number" ? { index: idOrIndex } : { id: idOrIndex };
+    this.send({ type: "todos.remove", payload });
+  }
   listSessions(limit = 50) {
     this.send({ type: "sessions.list", payload: { limit } });
   }
@@ -1137,6 +1141,8 @@ function handleKeyOperationResult(msg) {
   const p = msg.payload;
   if (p.success) toast.success(p.message);
   else toast.error(p.message);
+  const client2 = getWSClient(useConfigStore.getState().wsUrl);
+  client2.listSavedProviders();
 }
 function handleContextCompacted(msg) {
   const payload = msg.payload;
@@ -1252,7 +1258,8 @@ function handleRunResult(msg) {
   const runStart = useChatStore.getState().runStart;
   if (runStart && payload.status === "done") {
     const all = useChatStore.getState().messages;
-    let lastAssistantIdx = -1, toolCount = 0;
+    let lastAssistantIdx = -1;
+    let toolCount = 0;
     for (let i = all.length - 1; i >= 0; i--) {
       const m = all[i];
       if (m.role === "assistant" && lastAssistantIdx === -1 && m.content) lastAssistantIdx = i;
@@ -1602,7 +1609,7 @@ function useWebSocket() {
 }
 
 // src/App.tsx
-import { useEffect as useEffect21 } from "react";
+import { useEffect as useEffect22 } from "react";
 
 // src/components/ChatView/index.tsx
 import {
@@ -5367,15 +5374,16 @@ function CollabPanel({ sessionId, className }) {
     const offs = [];
     offs.push(
       client2.on("collab.state", (msg) => {
-        if (msg?.payload?.sessionId === sessionId) {
-          setParticipants(msg.payload.participants ?? []);
+        const p = msg.payload;
+        if (p.sessionId === sessionId) {
+          setParticipants(p.participants ?? []);
         }
       })
     );
     offs.push(
       client2.on("collab.participant.joined", (msg) => {
-        if (msg?.payload?.sessionId !== sessionId) return;
         const p = msg.payload;
+        if (p.sessionId !== sessionId) return;
         setParticipants((prev) => {
           if (prev.some((x) => x.participantId === p.participantId)) return prev;
           return [...prev, { participantId: p.participantId, role: p.role, joinedAt: p.joinedAt }];
@@ -5384,15 +5392,17 @@ function CollabPanel({ sessionId, className }) {
     );
     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));
+        const p = msg.payload;
+        if (p.sessionId !== sessionId) return;
+        const id = p.participantId;
+        setParticipants((prev) => prev.filter((p2) => p2.participantId !== id));
       })
     );
     offs.push(
       client2.on("error", (msg) => {
-        if (msg?.payload?.phase === "collab") {
-          setError(msg.payload.message);
+        const p = msg.payload;
+        if (p.phase === "collab") {
+          setError(p.message);
           setJoined(false);
         }
       })
@@ -5401,26 +5411,30 @@ function CollabPanel({ sessionId, className }) {
     }));
     offs.push(
       client2.on("collab.annotation.added", (msg) => {
-        if (msg?.payload?.sessionId !== sessionId) return;
-        if (msg?.payload?.annotation?.resolved) return;
+        const p = msg.payload;
+        if (p.sessionId !== sessionId) return;
+        if (p.annotation?.resolved) return;
         setOpenAnnotationCount((c) => c + 1);
       })
     );
     offs.push(
       client2.on("collab.annotation.resolved", (msg) => {
-        if (msg?.payload?.sessionId !== sessionId) return;
+        const p = msg.payload;
+        if (p.sessionId !== sessionId) return;
         setOpenAnnotationCount((c) => Math.max(0, c - 1));
       })
     );
     offs.push(
       client2.on("collab.pause.granted", (msg) => {
-        if (msg?.payload?.sessionId !== sessionId) return;
+        const p = msg.payload;
+        if (p.sessionId !== sessionId) return;
         setPaused(true);
       })
     );
     offs.push(
       client2.on("collab.pause.released", (msg) => {
-        if (msg?.payload?.sessionId !== sessionId) return;
+        const p = msg.payload;
+        if (p.sessionId !== sessionId) return;
         setPaused(false);
       })
     );
@@ -6359,8 +6373,6 @@ function QuickModelSwitcher() {
 
 // src/components/SettingsPanel/index.tsx
 import {
-  AlertCircle,
-  CheckCircle2 as CheckCircle26,
   Cpu as Cpu6,
   Globe as Globe3,
   Monitor as Monitor3,
@@ -6907,7 +6919,6 @@ function SettingsPanel() {
   const [isLoadingCatalog, setIsLoadingCatalog] = useState23(false);
   const [isLoadingModels, setIsLoadingModels] = useState23(false);
   const [isLoadingSaved, setIsLoadingSaved] = useState23(false);
-  const [operationStatus, setOperationStatus] = useState23(null);
   const [providerTab, setProviderTab] = useState23("catalog");
   const [catalogQuery, setCatalogQuery] = useState23("");
   const currentCatalogProvider = catalogProviders.find((p) => p.id === provider);
@@ -6935,19 +6946,10 @@ function SettingsPanel() {
         if (next.length > 0) setProviderTab("saved");
       }
     };
-    const handleKeyOperationResult2 = (msg) => {
-      if (msg.type === "key.operation_result") {
-        const payload = msg.payload;
-        setOperationStatus(payload);
-        setTimeout(() => setOperationStatus(null), 3e3);
-        wsClient.listSavedProviders();
-      }
-    };
     if (!wsConnected || !wsClient) return;
     const off1 = wsClient.on("provider.catalog", handleProviderCatalog);
     const off2 = wsClient.on("provider.models", handleProviderModels);
     const off3 = wsClient.on("providers.saved", handleSavedProviders);
-    const off4 = wsClient.on("key.operation_result", handleKeyOperationResult2);
     setIsLoadingCatalog(true);
     setIsLoadingSaved(true);
     wsClient.listProviders();
@@ -6956,7 +6958,6 @@ function SettingsPanel() {
       off1?.();
       off2?.();
       off3?.();
-      off4?.();
     };
   }, [wsConnected, wsClient]);
   const handleProviderSelect = useCallback5(
@@ -6974,7 +6975,7 @@ function SettingsPanel() {
       setModel(modelId);
       const currentProvider = useConfigStore.getState().provider;
       ws.switchModel?.(currentProvider, modelId);
-      setOperationStatus({ success: true, message: `Switching to ${currentProvider} / ${modelId}\u2026` });
+      toast.success(`Switching to ${currentProvider} / ${modelId}\u2026`);
     },
     [setModel, ws]
   );
@@ -7032,41 +7033,26 @@ function SettingsPanel() {
           "Appearance"
         ] })
       ] }),
-      /* @__PURE__ */ jsxs32(TabsContent, { value: "provider", className: "space-y-4", children: [
-        operationStatus && /* @__PURE__ */ jsxs32(
-          "div",
-          {
-            className: cn(
-              "p-3 rounded-lg mb-4 flex items-center gap-2",
-              operationStatus.success ? "bg-green-500/10 text-green-600" : "bg-red-500/10 text-red-600"
-            ),
-            children: [
-              operationStatus.success ? /* @__PURE__ */ jsx37(CheckCircle26, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx37(AlertCircle, { className: "h-4 w-4" }),
-              operationStatus.message
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx37(
-          ProviderSection,
-          {
-            activeProvider: provider,
-            catalogProviders,
-            isLoadingCatalog,
-            savedProviders,
-            isLoadingSaved,
-            providerTab,
-            setProviderTab,
-            onSelectProvider: handleProviderSelect,
-            onAddKey: handleAddKey,
-            onDeleteKey: handleDeleteKey,
-            onSetActiveKey: handleSetActiveKey,
-            onAddProvider: handleAddProvider,
-            onRemoveProvider: handleRemoveProvider,
-            catalogQuery,
-            setCatalogQuery
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsx37(TabsContent, { value: "provider", className: "space-y-4", children: /* @__PURE__ */ jsx37(
+        ProviderSection,
+        {
+          activeProvider: provider,
+          catalogProviders,
+          isLoadingCatalog,
+          savedProviders,
+          isLoadingSaved,
+          providerTab,
+          setProviderTab,
+          onSelectProvider: handleProviderSelect,
+          onAddKey: handleAddKey,
+          onDeleteKey: handleDeleteKey,
+          onSetActiveKey: handleSetActiveKey,
+          onAddProvider: handleAddProvider,
+          onRemoveProvider: handleRemoveProvider,
+          catalogQuery,
+          setCatalogQuery
+        }
+      ) }),
       /* @__PURE__ */ jsx37(TabsContent, { value: "model", className: "space-y-4", children: /* @__PURE__ */ jsx37(
         ModelSection,
         {
@@ -7334,7 +7320,7 @@ import { useEffect as useEffect20, useState as useState25 } from "react";
 
 // src/components/Sidebar/ConfigSection.tsx
 import {
-  CheckCircle2 as CheckCircle27,
+  CheckCircle2 as CheckCircle26,
   Circle,
   CircleDot,
   Database as Database2,
@@ -7418,7 +7404,7 @@ function ConfigSection({ formatDuration: formatDuration2 }) {
         ] }),
         /* @__PURE__ */ jsx39("div", { className: cn("relative h-1.5 w-full overflow-hidden rounded-full bg-muted", running > 0 && "bar-sweep"), title: `${pct}% complete`, children: /* @__PURE__ */ jsx39("div", { className: cn("h-full rounded-full transition-all duration-500", allDone ? "bg-[hsl(var(--success))]" : "bg-primary"), style: { width: `${Math.max(pct, running > 0 ? 4 : 0)}%` } }) }),
         /* @__PURE__ */ jsx39("ul", { className: "space-y-0.5 max-h-56 overflow-y-auto pr-1 -mx-1", children: todos.map((t) => {
-          const Icon2 = t.status === "completed" ? CheckCircle27 : t.status === "in_progress" ? CircleDot : Circle;
+          const Icon2 = t.status === "completed" ? CheckCircle26 : t.status === "in_progress" ? CircleDot : Circle;
           const active = t.status === "in_progress";
           const tone2 = t.status === "completed" ? "text-[hsl(var(--success))] line-through opacity-60" : active ? "text-foreground" : "text-muted-foreground";
           return /* @__PURE__ */ jsxs34("li", { className: cn("flex items-start gap-2 text-xs leading-snug rounded-md px-1.5 py-1 transition-colors", active && "bg-primary/10 ring-1 ring-inset ring-primary/20", tone2), children: [
@@ -7830,8 +7816,98 @@ function Sidebar() {
   ] });
 }
 
+// src/components/TodosPanel.tsx
+import { CheckCircle2 as CheckCircle27, Circle as Circle2, Clock as Clock3, X as X8 } from "lucide-react";
+import { useCallback as useCallback6, useEffect as useEffect21, useRef as useRef12, useState as useState26 } from "react";
+import { jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
+function TodosPanel() {
+  const [todos, setTodos] = useState26([]);
+  const ws = getWSClient();
+  const offRef = useRef12(null);
+  useEffect21(() => {
+    ws.send({ type: "todos.get" });
+    offRef.current = ws.on("todos.updated", (msg) => {
+      const payload = msg?.payload;
+      if (payload?.todos) setTodos(payload.todos);
+    });
+    return () => {
+      offRef.current?.();
+    };
+  }, [ws]);
+  const handleRemove = useCallback6(
+    (id) => {
+      ws.removeTodo(id);
+    },
+    [ws]
+  );
+  const pending = todos.filter((t) => t.status === "pending");
+  const inProgress = todos.filter((t) => t.status === "in_progress");
+  const completed = todos.filter((t) => t.status === "completed");
+  return /* @__PURE__ */ jsxs38("div", { className: "flex flex-col h-full bg-background", children: [
+    /* @__PURE__ */ jsxs38("div", { className: "px-4 py-3 border-b border-border flex items-center justify-between shrink-0", children: [
+      /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx43("h2", { className: "text-sm font-semibold text-foreground", children: "TODOS" }),
+        /* @__PURE__ */ jsxs38("span", { className: "text-xs text-muted-foreground tabular-nums", children: [
+          completed.length,
+          "/",
+          todos.length
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-2 text-xs", children: [
+        inProgress.length > 0 && /* @__PURE__ */ jsxs38("span", { className: "flex items-center gap-1 text-yellow-600 dark:text-yellow-400", children: [
+          /* @__PURE__ */ jsx43(Clock3, { className: "w-3 h-3" }),
+          inProgress.length
+        ] }),
+        pending.length > 0 && /* @__PURE__ */ jsxs38("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx43(Circle2, { className: "w-3 h-3" }),
+          pending.length
+        ] }),
+        completed.length > 0 && /* @__PURE__ */ jsxs38("span", { className: "flex items-center gap-1 text-emerald-600 dark:text-emerald-400", children: [
+          /* @__PURE__ */ jsx43(CheckCircle27, { className: "w-3 h-3" }),
+          completed.length
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx43("div", { className: "flex-1 overflow-y-auto", children: todos.length === 0 ? /* @__PURE__ */ jsx43("p", { className: "px-4 py-8 text-xs text-muted-foreground text-center", children: "No todos yet. The agent will create them as it plans work." }) : /* @__PURE__ */ jsx43("div", { className: "py-1", children: todos.map((t) => {
+      const label = t.status === "in_progress" && t.activeForm ? t.activeForm : t.content;
+      const isInProgress = t.status === "in_progress";
+      const isCompleted = t.status === "completed";
+      return /* @__PURE__ */ jsxs38(
+        "div",
+        {
+          className: `px-4 py-2 flex items-start gap-2.5 text-sm border-l-2 group ${isInProgress ? "border-l-yellow-500 bg-yellow-50/40 dark:bg-yellow-950/20" : isCompleted ? "border-l-emerald-500 bg-emerald-50/30 dark:bg-emerald-950/15" : "border-l-transparent"}`,
+          children: [
+            /* @__PURE__ */ jsx43("span", { className: "mt-0.5 shrink-0", children: isCompleted ? /* @__PURE__ */ jsx43(CheckCircle27, { className: "w-3.5 h-3.5 text-emerald-500" }) : isInProgress ? /* @__PURE__ */ jsx43(Clock3, { className: "w-3.5 h-3.5 text-yellow-500 animate-spin" }) : /* @__PURE__ */ jsx43(Circle2, { className: "w-3.5 h-3.5 text-muted-foreground/50" }) }),
+            /* @__PURE__ */ jsx43(
+              "span",
+              {
+                className: `leading-snug flex-1 ${isInProgress ? "text-yellow-800 dark:text-yellow-200 font-medium" : isCompleted ? "text-muted-foreground line-through" : "text-foreground"}`,
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsx43(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleRemove(t.id);
+                },
+                className: "shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-60 hover:opacity-100 hover:bg-muted transition-all",
+                title: "Remove",
+                children: /* @__PURE__ */ jsx43(X8, { className: "w-3 h-3 text-muted-foreground" })
+              }
+            )
+          ]
+        },
+        t.id
+      );
+    }) }) })
+  ] });
+}
+
 // src/App.tsx
-import { Fragment as Fragment11, jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
 function AppInner() {
   const { theme } = useTheme();
   const { currentView, sidebarOpen, toggleSidebar, setSearchOpen, setSidebarOpen } = useUIStore();
@@ -7841,7 +7917,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);
-  useEffect21(() => {
+  useEffect22(() => {
     if (typeof window === "undefined") return;
     const mq = window.matchMedia("(max-width: 768px)");
     const apply = () => {
@@ -7854,7 +7930,7 @@ function AppInner() {
     return () => mq.removeEventListener("change", apply);
   }, [setSidebarOpen]);
   useWebSocketBootstrap();
-  useEffect21(() => {
+  useEffect22(() => {
     const parts = [];
     if (isLoading) {
       const it = iteration ? ` iter ${iteration.index}${iteration.max ? `/${iteration.max}` : ""}` : "";
@@ -7871,7 +7947,7 @@ function AppInner() {
       document.title = "WrongStack";
     };
   }, [isLoading, iteration, projectName, sessionTitle, nickname]);
-  useEffect21(() => {
+  useEffect22(() => {
     const onKey = (e) => {
       const t = e.target;
       const tag = t?.tagName?.toLowerCase();
@@ -7967,33 +8043,34 @@ function AppInner() {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [toggleSidebar, setSearchOpen]);
-  return /* @__PURE__ */ jsxs38("div", { className: cn("flex h-screen", theme), children: [
-    sidebarOpen && /* @__PURE__ */ jsx43(Sidebar, {}),
-    /* @__PURE__ */ jsxs38("main", { className: "flex-1 flex flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsx43(ConnectionBanner, {}),
-      currentView === "chat" && /* @__PURE__ */ jsxs38(Fragment11, { children: [
-        sessionId && /* @__PURE__ */ jsxs38("div", { className: "px-4 pt-2 space-y-2", children: [
-          /* @__PURE__ */ jsx43(CollabPanel, { sessionId }),
-          /* @__PURE__ */ jsx43(FleetPanel, {})
+  return /* @__PURE__ */ jsxs39("div", { className: cn("flex h-screen", theme), children: [
+    sidebarOpen && /* @__PURE__ */ jsx44(Sidebar, {}),
+    /* @__PURE__ */ jsxs39("main", { className: "flex-1 flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsx44(ConnectionBanner, {}),
+      currentView === "chat" && /* @__PURE__ */ jsxs39(Fragment11, { children: [
+        sessionId && /* @__PURE__ */ jsxs39("div", { className: "px-4 pt-2 space-y-2", children: [
+          /* @__PURE__ */ jsx44(CollabPanel, { sessionId }),
+          /* @__PURE__ */ jsx44(FleetPanel, {}),
+          /* @__PURE__ */ jsx44(TodosPanel, {})
         ] }),
-        /* @__PURE__ */ jsx43(ChatView, {})
+        /* @__PURE__ */ jsx44(ChatView, {})
       ] }),
-      currentView === "settings" && /* @__PURE__ */ jsx43(SettingsPanel, {})
+      currentView === "settings" && /* @__PURE__ */ jsx44(SettingsPanel, {})
     ] }),
-    /* @__PURE__ */ jsx43(ConfirmDialog, {}),
-    /* @__PURE__ */ jsx43(CommandPalette, {}),
-    /* @__PURE__ */ jsx43(ShortcutsOverlay, {}),
-    /* @__PURE__ */ jsx43(QuickModelSwitcher, {}),
-    /* @__PURE__ */ jsx43(Toaster, {})
+    /* @__PURE__ */ jsx44(ConfirmDialog, {}),
+    /* @__PURE__ */ jsx44(CommandPalette, {}),
+    /* @__PURE__ */ jsx44(ShortcutsOverlay, {}),
+    /* @__PURE__ */ jsx44(QuickModelSwitcher, {}),
+    /* @__PURE__ */ jsx44(Toaster, {})
   ] });
 }
 function App() {
-  return /* @__PURE__ */ jsx43(ErrorBoundary, { children: /* @__PURE__ */ jsx43(ThemeProvider, { defaultTheme: "system", children: /* @__PURE__ */ jsx43(AppInner, {}) }) });
+  return /* @__PURE__ */ jsx44(ErrorBoundary, { children: /* @__PURE__ */ jsx44(ThemeProvider, { defaultTheme: "system", children: /* @__PURE__ */ jsx44(AppInner, {}) }) });
 }
 
 // src/main.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 ReactDOM.createRoot(document.getElementById("root")).render(
-  /* @__PURE__ */ jsx44(React6.StrictMode, { children: /* @__PURE__ */ jsx44(App, {}) })
+  /* @__PURE__ */ jsx45(React6.StrictMode, { children: /* @__PURE__ */ jsx45(App, {}) })
 );
 //# sourceMappingURL=index.js.map