@wrongstack/webui 0.73.1 → 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 } });
   }
@@ -1605,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 {
@@ -7812,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();
@@ -7823,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 = () => {
@@ -7836,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}` : ""}` : "";
@@ -7853,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();
@@ -7949,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