@wrongstack/webui 0.257.0 → 0.257.2

package/dist/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/wrongstack.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>WrongStack WebUI</title>
-    <script type="module" crossorigin src="/assets/index-BCG7KsrQ.js"></script>
+    <script type="module" crossorigin src="/assets/index-DiFYgNpK.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-QTnfLwEv.js">
     <link rel="modulepreload" crossorigin href="/assets/vendor-BXyxPv8C.js">
     <link rel="stylesheet" crossorigin href="/assets/vendor-CEQg2uSG.css">

package/dist/index.js

@@ -8133,8 +8133,13 @@ var NEXT_STEPS_RE = /💡\s*Next steps?\s*\n+((?:\d+\.\s+.+(?:\s+auto="true")?\n
 var ITEM_RE = /^(\d+)\.\s+(.+?)(?:\s+auto="true")?$/;
 function parseNextSteps(content) {
   const match = NEXT_STEPS_RE.exec(content);
-  if (!match?.[1]) return [];
-  const block = match[1];
+  if (match?.[1]) {
+    const block = match[1];
+    return parseStepLines(block);
+  }
+  return parseStepLines(content);
+}
+function parseStepLines(block) {
   const lines = block.split("\n").filter(Boolean);
   const steps = [];
   for (const line of lines) {
@@ -8331,32 +8336,23 @@ function CodeCopyButton({ text }) {
 }
 var markdownComponents = {
   next_steps({ children }) {
-    const rawText = typeof children === "string" ? children : "";
+    const rawText = typeof children === "string" ? children.trim() : "";
+    if (!rawText) return null;
     const steps = parseNextSteps(rawText);
     if (steps.length === 0) return null;
-    return /* @__PURE__ */ jsxs22("div", { className: "mt-4 rounded-xl border border-primary/20 bg-primary/[0.03] overflow-hidden animate-message", children: [
-      /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 px-3.5 py-2 border-b border-primary/10 bg-primary/[0.04]", children: [
-        /* @__PURE__ */ jsx24("span", { className: "flex items-center justify-center w-5 h-5 rounded-md bg-primary/15 text-primary text-xs", children: "\u{1F4A1}" }),
-        /* @__PURE__ */ jsx24("span", { className: "text-xs font-semibold text-foreground/90", children: "Next steps" }),
-        /* @__PURE__ */ jsx24("span", { className: "text-[10px] text-muted-foreground ml-auto", children: "click to fill input" })
-      ] }),
-      /* @__PURE__ */ jsx24("div", { className: "flex flex-col p-2 gap-1", children: steps.map((s) => /* @__PURE__ */ jsxs22(
-        "button",
-        {
-          type: "button",
-          onClick: () => fillInput(s.text),
-          className: "group flex items-center gap-2.5 w-full text-left px-3 py-2 rounded-lg transition-all\n                         hover:bg-primary/[0.08] hover:shadow-sm\n                         border border-transparent hover:border-primary/20 cursor-pointer",
-          title: `Click to fill: ${s.text}`,
-          children: [
-            /* @__PURE__ */ jsx24("span", { className: "flex items-center justify-center w-5 h-5 rounded-md bg-muted/80 group-hover:bg-primary/20\n                               text-[11px] font-mono font-semibold tabular-nums shrink-0\n                               text-muted-foreground group-hover:text-primary transition-colors", children: s.index }),
-            /* @__PURE__ */ jsx24("span", { className: "h-3.5 w-3.5 text-muted-foreground/60 group-hover:text-primary group-hover:translate-x-0.5 transition-all shrink-0 text-xs", children: "\u2192" }),
-            /* @__PURE__ */ jsx24("span", { className: "text-sm leading-snug text-foreground/80 group-hover:text-foreground transition-colors flex-1 min-w-0", children: s.text }),
-            /* @__PURE__ */ jsx24("span", { className: "opacity-0 group-hover:opacity-100 text-primary/60 transition-all shrink-0 text-xs", children: "\u2197" })
-          ]
-        },
-        s.index
-      )) })
-    ] });
+    return /* @__PURE__ */ jsx24(
+      NextStepsBar,
+      {
+        steps,
+        onAutoSubmit: (text) => {
+          fillInput(text);
+          const form = document.querySelector('form[class*="flex items-end gap-2"]');
+          if (form) {
+            form.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+          }
+        }
+      }
+    );
   },
   code({
     inline,
@@ -8577,6 +8573,7 @@ var MessageBubble = memo3(function MessageBubble2({
     setLoading(true);
     const client2 = getWSClient(wsUrl);
     client2.sendMessage(text);
+    fillInput("");
   };
   const isLatestAssistant = (() => {
     if (message.role !== "assistant" || isLoading) return false;
@@ -9737,6 +9734,14 @@ function ChatView() {
     }
     setScrolledDeep(h.scrollOffset > h.viewportSize && h.scrollSize > h.viewportSize * 2.5);
   }, []);
+  const handleHistorySelect = useCallback10(
+    (sessionId2) => {
+      const ws = getWSClient();
+      ws?.resumeSession?.(sessionId2);
+      setSwitcherOpen(false);
+    },
+    []
+  );
   useEffect19(() => {
     const h = vlistRef.current;
     if (!h) return;
@@ -9774,6 +9779,41 @@ function ChatView() {
   const [runStartedAt, setRunStartedAt] = useState25(null);
   const [nowTick, setNowTick] = useState25(() => Date.now());
   const streamAnchor = useRef14(null);
+  const runningStatus = useMemo7(() => {
+    const last = messages[messages.length - 1];
+    const runningTools = messages.filter((m) => m.role === "tool" && m.toolResult === void 0);
+    let label = "Thinking\u2026";
+    if (runningTools.length > 0) {
+      const names = Array.from(new Set(runningTools.map((t) => t.toolName).filter(Boolean)));
+      const preview = names.slice(0, 2).join(", ");
+      const more = names.length > 2 ? ` +${names.length - 2}` : "";
+      label = runningTools.length === 1 ? `Running ${preview || "tool"}\u2026` : `Running ${runningTools.length} tools (${preview}${more})\u2026`;
+    } else if (last?.role === "assistant" && last.content) {
+      label = "Writing reply\u2026";
+    } else if (last?.role === "tool" && last.toolResult !== void 0) {
+      label = "Thinking about the next step\u2026";
+    }
+    const elapsedSec = runStartedAt ? Math.max(0, Math.floor((nowTick - runStartedAt) / 1e3)) : 0;
+    const elapsed = elapsedSec < 60 ? `${elapsedSec}s` : `${Math.floor(elapsedSec / 60)}m ${elapsedSec % 60}s`;
+    let speedLabel = "";
+    const streamingBubble = last?.role === "assistant" && last.streaming && last.content ? last : null;
+    if (streamingBubble) {
+      const anchor = streamAnchor.current;
+      if (!anchor || anchor.id !== streamingBubble.id) {
+        streamAnchor.current = { id: streamingBubble.id, at: Date.now(), len: streamingBubble.content.length };
+      } else {
+        const dt = Math.max(1, nowTick - anchor.at);
+        const dl = Math.max(0, streamingBubble.content.length - anchor.len);
+        if (dt > 500 && dl > 0) {
+          const cps = dl * 1e3 / dt;
+          speedLabel = cps >= 1e3 ? `${(cps / 1e3).toFixed(1)}k ch/s` : `${Math.round(cps)} ch/s`;
+        }
+      }
+    } else if (streamAnchor.current) {
+      streamAnchor.current = null;
+    }
+    return { label, elapsed, speedLabel };
+  }, [messages, nowTick, runStartedAt]);
   useEffect19(() => {
     if (isLoading && runStartedAt === null) setRunStartedAt(Date.now());
     if (!isLoading && runStartedAt !== null) setRunStartedAt(null);
@@ -9888,11 +9928,7 @@ function ChatView() {
               "button",
               {
                 type: "button",
-                onClick: () => {
-                  const ws = getWSClient();
-                  ws?.resumeSession?.(e.id);
-                  setSwitcherOpen(false);
-                },
+                onClick: () => handleHistorySelect(e.id),
                 className: cn(
                   "w-full text-left px-2 py-1.5 rounded text-xs hover:bg-accent transition-colors",
                   e.isCurrent && "bg-primary/10"
@@ -10081,69 +10117,27 @@ function ChatView() {
             className: cn("mx-auto max-w-5xl w-full px-4", compactMode ? "pb-3" : "pb-8"),
             children: [
               /* @__PURE__ */ jsx35(ThinkingBubble, {}),
-              isLoading && (() => {
-                const last = messages[messages.length - 1];
-                const runningTools = messages.filter(
-                  (m) => m.role === "tool" && m.toolResult === void 0
-                );
-                let label = "Thinking\u2026";
-                if (runningTools.length > 0) {
-                  const names = Array.from(
-                    new Set(runningTools.map((t) => t.toolName).filter(Boolean))
-                  );
-                  const preview = names.slice(0, 2).join(", ");
-                  const more = names.length > 2 ? ` +${names.length - 2}` : "";
-                  label = runningTools.length === 1 ? `Running ${preview || "tool"}\u2026` : `Running ${runningTools.length} tools (${preview}${more})\u2026`;
-                } else if (last?.role === "assistant" && last.content) {
-                  label = "Writing reply\u2026";
-                } else if (last?.role === "tool" && last.toolResult !== void 0) {
-                  label = "Thinking about the next step\u2026";
-                }
-                const elapsedSec = runStartedAt ? Math.max(0, Math.floor((nowTick - runStartedAt) / 1e3)) : 0;
-                const elapsed = elapsedSec < 60 ? `${elapsedSec}s` : `${Math.floor(elapsedSec / 60)}m ${elapsedSec % 60}s`;
-                let speedLabel = "";
-                const streamingBubble = last?.role === "assistant" && last.streaming && last.content ? last : null;
-                if (streamingBubble) {
-                  const anchor = streamAnchor.current;
-                  if (!anchor || anchor.id !== streamingBubble.id) {
-                    streamAnchor.current = {
-                      id: streamingBubble.id,
-                      at: Date.now(),
-                      len: streamingBubble.content.length
-                    };
-                  } else {
-                    const dt = Math.max(1, nowTick - anchor.at);
-                    const dl = Math.max(0, streamingBubble.content.length - anchor.len);
-                    if (dt > 500 && dl > 0) {
-                      const cps = dl * 1e3 / dt;
-                      speedLabel = cps >= 1e3 ? `${(cps / 1e3).toFixed(1)}k ch/s` : `${Math.round(cps)} ch/s`;
-                    }
-                  }
-                } else if (streamAnchor.current) {
-                  streamAnchor.current = null;
-                }
-                return /* @__PURE__ */ jsxs33("div", { className: "flex gap-3 animate-message", children: [
-                  /* @__PURE__ */ jsx35("div", { className: "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center bg-accent text-accent-foreground ring-2 ring-offset-2 ring-offset-background ring-accent/20", children: /* @__PURE__ */ jsx35(Bot4, { className: "h-4 w-4" }) }),
-                  /* @__PURE__ */ jsx35("div", { className: "flex flex-col gap-1.5", children: /* @__PURE__ */ jsx35("div", { className: "rounded-2xl px-4 py-3 bg-card border text-foreground", children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-3 text-sm", children: [
-                    /* @__PURE__ */ jsxs33("span", { className: "flex gap-1", children: [
-                      /* @__PURE__ */ jsx35("span", { className: "h-1.5 w-1.5 rounded-full bg-primary/70 animate-bounce [animation-delay:-0.3s]" }),
-                      /* @__PURE__ */ jsx35("span", { className: "h-1.5 w-1.5 rounded-full bg-primary/70 animate-bounce [animation-delay:-0.15s]" }),
-                      /* @__PURE__ */ jsx35("span", { className: "h-1.5 w-1.5 rounded-full bg-primary/70 animate-bounce" })
-                    ] }),
-                    /* @__PURE__ */ jsx35("span", { className: "text-foreground/90", children: label }),
-                    /* @__PURE__ */ jsx35("span", { className: "text-xs text-muted-foreground tabular-nums", children: elapsed }),
-                    iteration && /* @__PURE__ */ jsxs33("span", { className: "text-xs text-muted-foreground tabular-nums", children: [
-                      "\xB7 iter ",
-                      iteration.index,
-                      iteration.max > 0 ? `/${iteration.max}` : ""
-                    ] }),
-                    speedLabel && /* @__PURE__ */ jsxs33("span", { className: "text-xs text-muted-foreground/80 tabular-nums", children: [
-                      "\xB7 ",
-                      speedLabel
-                    ] })
-                  ] }) }) })
-                ] });
-              })()
+              isLoading && /* @__PURE__ */ jsxs33("div", { className: "flex gap-3 animate-message", children: [
+                /* @__PURE__ */ jsx35("div", { className: "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center bg-accent text-accent-foreground ring-2 ring-offset-2 ring-offset-background ring-accent/20", children: /* @__PURE__ */ jsx35(Bot4, { className: "h-4 w-4" }) }),
+                /* @__PURE__ */ jsx35("div", { className: "flex flex-col gap-1.5", children: /* @__PURE__ */ jsx35("div", { className: "rounded-2xl px-4 py-3 bg-card border text-foreground", children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-3 text-sm", children: [
+                  /* @__PURE__ */ jsxs33("span", { className: "flex gap-1", children: [
+                    /* @__PURE__ */ jsx35("span", { className: "h-1.5 w-1.5 rounded-full bg-primary/70 animate-bounce [animation-delay:-0.3s]" }),
+                    /* @__PURE__ */ jsx35("span", { className: "h-1.5 w-1.5 rounded-full bg-primary/70 animate-bounce [animation-delay:-0.15s]" }),
+                    /* @__PURE__ */ jsx35("span", { className: "h-1.5 w-1.5 rounded-full bg-primary/70 animate-bounce" })
+                  ] }),
+                  /* @__PURE__ */ jsx35("span", { className: "text-foreground/90", children: runningStatus.label }),
+                  /* @__PURE__ */ jsx35("span", { className: "text-xs text-muted-foreground tabular-nums", children: runningStatus.elapsed }),
+                  iteration && /* @__PURE__ */ jsxs33("span", { className: "text-xs text-muted-foreground tabular-nums", children: [
+                    "\xB7 iter ",
+                    iteration.index,
+                    iteration.max > 0 ? `/${iteration.max}` : ""
+                  ] }),
+                  runningStatus.speedLabel && /* @__PURE__ */ jsxs33("span", { className: "text-xs text-muted-foreground/80 tabular-nums", children: [
+                    "\xB7 ",
+                    runningStatus.speedLabel
+                  ] })
+                ] }) }) })
+              ] })
             ]
           },
           "__live"
@@ -14688,7 +14682,10 @@ function MailboxPanel({ className }) {
   const [deleting, setDeleting] = useState34(false);
   const { client: client2 } = useWebSocket();
   const [ready, setReady] = useState34(client2.status.state === "open");
-  useEffect31(() => client2.onStatus((s) => setReady(s.state === "open")), [client2]);
+  useEffect31(() => {
+    const off = client2.onStatus((s) => setReady(s.state === "open"));
+    return () => off();
+  }, [client2]);
   useEffect31(() => {
     if (!ready) return;
     client2.send({ type: "mailbox.messages", payload: { limit: 30 } });
@@ -18313,6 +18310,10 @@ function FleetMonitor({
   );
   const runningCount = fleetList.filter((a) => a.status === "running").length;
   const selectedAgent = selectedIdx !== null ? fleetList[selectedIdx] : null;
+  const handleAgentClick = useCallback27(
+    (i) => setSelectedIdx((prev) => prev === i ? null : i),
+    []
+  );
   const handleKeyDown = useCallback27(
     (e) => {
       if (e.key === "Escape") {
@@ -18428,7 +18429,7 @@ function FleetMonitor({
                 agent,
                 isSelected: i === selectedIdx,
                 isLeader: agent.id === leaderId,
-                onClick: () => setSelectedIdx(i === selectedIdx ? null : i)
+                onClick: () => handleAgentClick(i)
               },
               agent.id
             )) }) }),