@circuitwall/jarela 0.9.3 → 0.10.0

package/.next/standalone/.next/server/app/page.js

@@ -2434,13 +2434,23 @@ function useSSE(onDone) {
             if (err.name !== "AbortError") {
                 setError(String(err));
             }
-            setStreaming(false);
-            setStreamingContent("");
-            setThinkingContent("");
-            closeActivity();
             return {
                 accepted: false
             };
+        } finally{
+            // Always release the gate when the stream ends — defends against the
+            // consume() loop returning without ever observing a terminal `done`
+            // event (e.g. the EventSource closed cleanly with zero events). If
+            // we relied solely on the `done` branch inside consume(), the chat
+            // would stay locked behind the Stop button forever.
+            //
+            // We intentionally do NOT clear streamingContent / thinkingContent
+            // here — the consumer (ChatView) swaps them for the persisted
+            // assistant bubble once the refetch lands; clearing now would yank
+            // the text out from under the user. The next start()/attach() resets
+            // them.
+            setStreaming(false);
+            closeActivity();
         }
     }, [
         consume,
@@ -2493,15 +2503,18 @@ function useSSE(onDone) {
         try {
             await consume((0,client/* subscribeRun */._C)(threadId, ctrl.signal));
         } catch (err) {
-            // Attach failures are non-fatal — clear the gate and let the consumer
-            // drain anything queued during session load. The common case is
-            // "no run to attach to" (server returns 404, EventSource fails to
-            // open) — completely normal when navigating into an idle session.
-            setStreaming(false);
-            closeActivity();
             if (err.name !== "AbortError") {
                 onDone?.();
             }
+        } finally{
+            // Always release the optimistic gate when the stream ends — whether
+            // via terminal `done`/`error` event, a thrown failure, or a clean
+            // EventSource close with no events (idle thread, server returned 404
+            // so the iterator exited without yielding). Without this, navigating
+            // into an idle thread leaves streaming=true forever: the Stop button
+            // hangs in the composer and the "Reconnecting…" badge never clears.
+            setStreaming(false);
+            closeActivity();
         }
     }, [
         consume,
@@ -32860,6 +32873,123 @@ function UserAvatar({ profile }) {
 // lines at the top of every bubble. Format is fixed by dispatcher; if either
 // side changes, update both.
 const parseBridgeContext = parseBridgePrompt;
+const SILENT_TRIGGER_RE = /\n+\[SILENT_TRIGGER\][^\n]*(?:\n(?!\n).*)*$/;
+// Strip the `[SILENT_TRIGGER] …` envelope that runTriggerAgent appends
+// in silent mode so the card can render the user's original prompt and
+// surface a separate "Silent" pill instead of leaking framework prose.
+function stripSilentEnvelope(text) {
+    const m = SILENT_TRIGGER_RE.exec(text);
+    if (!m) return {
+        text,
+        silent: false
+    };
+    return {
+        text: text.slice(0, m.index).trimEnd(),
+        silent: true
+    };
+}
+function parseTriggerMessage(category, raw) {
+    if (category === "scheduled_task") {
+        const { text, silent } = stripSilentEnvelope(raw);
+        return {
+            kind: "scheduled_task",
+            prompt: text,
+            silent
+        };
+    }
+    if (category === "watcher") {
+        const { text, silent } = stripSilentEnvelope(raw);
+        const headerRe = /^Watcher\s+"([^"]*)"\s+detected a change\.\s*\n+Tool:\s*([^\n]+)\s*\nArgs:\s*([\s\S]*?)\n+---\s*Diff[^\n]*---\s*\n([\s\S]*?)\n\n([\s\S]*)$/;
+        const m = headerRe.exec(text);
+        if (!m) return null;
+        return {
+            kind: "watcher",
+            label: m[1],
+            tool: m[2].trim(),
+            args: m[3].trim(),
+            diff: m[4].trim(),
+            directive: m[5].trim(),
+            silent
+        };
+    }
+    return null;
+}
+// Compact header card for trigger-originated user messages (scheduled
+// tasks + watchers, ADR-0027/ADR-0032). Surfaces the trigger type with
+// an icon + label so the operator can tell at a glance that the prompt
+// came from automation and not from them. Watchers additionally expose
+// the diff context in a collapsed section to keep large diffs out of
+// the main bubble height.
+function TriggerMessageCard({ data }) {
+    const [diffOpen, setDiffOpen] = (0,react.useState)(false);
+    const Icon = data.kind === "scheduled_task" ? Clock : eye/* default */.A;
+    const label = data.kind === "scheduled_task" ? "Scheduled task" : `Watcher: ${data.label || "(unnamed)"}`;
+    return /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("div", {
+        className: "flex flex-col gap-1.5 min-w-0",
+        children: [
+            /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("div", {
+                className: "flex items-center gap-1.5 text-[11px] text-white/85 min-w-0",
+                children: [
+                    /*#__PURE__*/ (0,react_jsx_runtime.jsx)(Icon, {
+                        size: 11,
+                        className: "shrink-0"
+                    }),
+                    /*#__PURE__*/ (0,react_jsx_runtime.jsx)("span", {
+                        className: "font-medium truncate",
+                        children: label
+                    }),
+                    data.kind === "watcher" && /*#__PURE__*/ (0,react_jsx_runtime.jsx)("span", {
+                        className: "px-1.5 py-0.5 rounded-full bg-white/15 text-[9.5px] uppercase tracking-wide shrink-0",
+                        children: data.tool
+                    }),
+                    data.silent && /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("span", {
+                        className: "flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-white/15 text-[9.5px] uppercase tracking-wide shrink-0",
+                        title: "Silent trigger: reply only if material",
+                        children: [
+                            /*#__PURE__*/ (0,react_jsx_runtime.jsx)(EyeOff, {
+                                size: 9
+                            }),
+                            "silent"
+                        ]
+                    })
+                ]
+            }),
+            data.kind === "watcher" && /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("button", {
+                type: "button",
+                onClick: ()=>setDiffOpen((v)=>!v),
+                className: "flex items-center gap-1 text-left text-[11px] text-white/75 hover:text-white/95",
+                "aria-expanded": diffOpen,
+                title: diffOpen ? "Hide diff" : "Show diff",
+                children: [
+                    /*#__PURE__*/ (0,react_jsx_runtime.jsx)(ChevronRight, {
+                        size: 11,
+                        className: `shrink-0 transition-transform ${diffOpen ? "rotate-90" : ""}`
+                    }),
+                    /*#__PURE__*/ (0,react_jsx_runtime.jsx)("span", {
+                        children: "Change context"
+                    })
+                ]
+            }),
+            data.kind === "watcher" && diffOpen && /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("div", {
+                className: "ml-4 flex flex-col gap-1",
+                children: [
+                    /*#__PURE__*/ (0,react_jsx_runtime.jsx)("pre", {
+                        className: "m-0 px-2 py-1.5 rounded bg-black/25 text-[11px] leading-snug whitespace-pre-wrap break-words text-white/90 max-h-72 overflow-auto",
+                        children: data.args
+                    }),
+                    /*#__PURE__*/ (0,react_jsx_runtime.jsx)("pre", {
+                        className: "m-0 px-2 py-1.5 rounded bg-black/25 text-[11px] leading-snug whitespace-pre-wrap break-words text-white/90 max-h-96 overflow-auto",
+                        children: data.diff
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0,react_jsx_runtime.jsx)("p", {
+                className: "whitespace-pre-wrap text-[13.5px] leading-relaxed",
+                children: data.kind === "scheduled_task" ? data.prompt : data.directive
+            })
+        ]
+    });
+}
 // Compact header card for inbound bridge messages. Shows sender + chat
 // context as a single line of metadata above the actual message text, so a
 // WhatsApp DM looks like "Alice • DM\n<text>" and a group message looks
@@ -33667,6 +33797,11 @@ const MessageBubble = /*#__PURE__*/ (0,react.memo)(function MessageBubble({ mess
                         className: `rounded-2xl px-4 py-3 text-sm leading-relaxed max-w-full overflow-hidden ${isUser ? "glass-bubble-accent text-white rounded-br-sm" : "glass-bubble text-fg rounded-bl-sm"}`,
                         children: [
                             typeof parsed === "string" ? isUser ? (()=>{
+                                const category = "category" in message ? message.category : null;
+                                const trigger = parseTriggerMessage(category, parsed);
+                                if (trigger) return /*#__PURE__*/ (0,react_jsx_runtime.jsx)(TriggerMessageCard, {
+                                    data: trigger
+                                });
                                 const bridge = parseBridgeContext(parsed);
                                 if (bridge) return /*#__PURE__*/ (0,react_jsx_runtime.jsx)(BridgeMessageCard, {
                                     ctx: bridge
@@ -40569,7 +40704,9 @@ function ToolGroupBlock({ group, categories, advancedMode, selected, onToggleToo
     const selectedInGroup = allTools.filter((t)=>selected.includes(t.name)).length;
     const allOn = selectedInGroup === allTools.length;
     const someOn = selectedInGroup > 0 && !allOn;
-    const [open, setOpen] = (0,react.useState)(selectedInGroup > 0);
+    // Collapsed by default to keep the editor compact on small / PWA viewports;
+    // the header still surfaces the selected/total count.
+    const [open, setOpen] = (0,react.useState)(false);
     const headerRef = (0,react.useRef)(null);
     process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && (0,react.useEffect)(()=>{
         if (headerRef.current) headerRef.current.indeterminate = someOn;
@@ -40599,13 +40736,14 @@ function ToolGroupBlock({ group, categories, advancedMode, selected, onToggleToo
 }
 // Collapsible per-category block with a tri-state header checkbox. The
 // header toggle flips the entire category on/off; individual tool checkboxes
-// stay available for fine-grained control. Collapsed-by-default when no tool
-// in the category is selected, to keep the editor compact.
+// stay available for fine-grained control. Collapsed by default to keep the
+// editor short on mobile / PWA viewports.
 function ToolCategoryBlock({ category, tools, advancedMode, selected, onToggleTool, onToggleCategory, onToggleCategoryPermission }) {
     const selectedInCat = tools.filter((t)=>selected.includes(t.name)).length;
     const allOn = selectedInCat === tools.length;
     const someOn = selectedInCat > 0 && !allOn;
-    const [open, setOpen] = (0,react.useState)(selectedInCat > 0);
+    // Collapsed by default — see ToolGroupBlock comment.
+    const [open, setOpen] = (0,react.useState)(false);
     const headerRef = (0,react.useRef)(null);
     // Render the tri-state indeterminate dash via the DOM property (React
     // doesn't expose it as a JSX attribute).
@@ -52043,20 +52181,6 @@ function DashboardPanel() {
                             className: "text-[11px] text-[var(--text-secondary)]",
                             children: currencyInfo.source === "manual" ? `Currency manually set to ${currencyInfo.currency}.` : currencyInfo.source === "location" ? `Currency converted from USD to ${currencyInfo.currency} based on saved location.` : "Currency defaults to USD because no location-based currency is available."
                         }),
-                        /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("section", {
-                            className: "rounded-2xl border border-[var(--border)] bg-[var(--bg-secondary)]/90 p-4 shadow-sm",
-                            children: [
-                                /*#__PURE__*/ (0,react_jsx_runtime.jsx)("h3", {
-                                    className: "text-sm font-medium text-[var(--text-primary)] mb-3",
-                                    children: "Token usage over time"
-                                }),
-                                /*#__PURE__*/ (0,react_jsx_runtime.jsx)(InteractiveTokenChart, {
-                                    series: series,
-                                    selectedDay: selectedDay,
-                                    onSelectDay: (day)=>setSelectedDay((prev)=>prev === day ? null : day)
-                                })
-                            ]
-                        }),
                         /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("section", {
                             className: "rounded-2xl border border-[var(--border)] bg-[var(--bg-secondary)]/90 p-4 shadow-sm",
                             children: [
@@ -52065,7 +52189,7 @@ function DashboardPanel() {
                                     children: [
                                         /*#__PURE__*/ (0,react_jsx_runtime.jsx)("h3", {
                                             className: "text-sm font-medium text-[var(--text-primary)]",
-                                            children: "Estimated cost over time"
+                                            children: "Tokens & cost over time"
                                         }),
                                         selectedDay ? /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("button", {
                                             type: "button",
@@ -52086,11 +52210,19 @@ function DashboardPanel() {
                                         })
                                     ]
                                 }),
-                                /*#__PURE__*/ (0,react_jsx_runtime.jsx)(InteractiveCostChart, {
+                                /*#__PURE__*/ (0,react_jsx_runtime.jsx)(InteractiveTokenChart, {
                                     series: series,
-                                    currencyInfo: currencyInfo,
                                     selectedDay: selectedDay,
                                     onSelectDay: (day)=>setSelectedDay((prev)=>prev === day ? null : day)
+                                }),
+                                /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
+                                    className: "mt-3 border-t border-[var(--border)]/60 pt-3",
+                                    children: /*#__PURE__*/ (0,react_jsx_runtime.jsx)(InteractiveCostChart, {
+                                        series: series,
+                                        currencyInfo: currencyInfo,
+                                        selectedDay: selectedDay,
+                                        onSelectDay: (day)=>setSelectedDay((prev)=>prev === day ? null : day)
+                                    })
                                 })
                             ]
                         }),
@@ -52485,6 +52617,13 @@ function InsightChip({ label, value, hint }) {
         ]
     });
 }
+// Per-tier breakdown colors shared by the stacked token chart legend.
+const TIER_COLORS = {
+    hot: "#22d3ee",
+    warm: "#f59e0b",
+    facts: "#a78bfa",
+    overhead: "#94a3b8"
+};
 function SharedDonutChart({ ariaLabel, size, centerAmount, slices, hovered, onHoverChange }) {
     const uid = (0,react.useId)().replace(/:/g, "");
     const [animCycle, setAnimCycle] = (0,react.useState)(0);
@@ -52894,6 +53033,15 @@ function InteractiveTokenChart({ series, selectedDay, onSelectDay }) {
                             const totalHeight = hasData && maxTotal > 0 ? Math.max(4, Math.round(total / maxTotal * 150)) : 0;
                             const inputHeight = hasData ? Math.round(point.input_tokens_est / total * totalHeight) : 0;
                             const outputHeight = hasData ? Math.max(0, totalHeight - inputHeight) : 0;
+                            // Subdivide the input portion by measured tier breakdown when the
+                            // day has at least one snapshotted assistant turn. Legacy days
+                            // (measured_input_tokens === 0) fall back to a solid violet block.
+                            const tier = point.tier_tokens;
+                            const tierTotal = tier?.measured_input_tokens ?? 0;
+                            const hotPx = tierTotal > 0 ? Math.round(tier.hot_tokens / tierTotal * inputHeight) : 0;
+                            const warmPx = tierTotal > 0 ? Math.round(tier.warm_tokens / tierTotal * inputHeight) : 0;
+                            const factsPx = tierTotal > 0 ? Math.round(tier.facts_tokens / tierTotal * inputHeight) : 0;
+                            const overheadPx = tierTotal > 0 ? Math.max(0, inputHeight - hotPx - warmPx - factsPx) : 0;
                             const isActive = idx === hovered;
                             const isSelected = selectedDay === point.day;
                             const clickable = !!onSelectDay && hasData;
@@ -52924,7 +53072,42 @@ function InteractiveTokenChart({ series, selectedDay, onSelectDay }) {
                                                         transition: `height 420ms cubic-bezier(0.2, 0.8, 0.2, 1) ${idx * 18}ms`
                                                     }
                                                 }),
-                                                /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
+                                                tierTotal > 0 ? /*#__PURE__*/ (0,react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, {
+                                                    children: [
+                                                        /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
+                                                            className: "w-full",
+                                                            style: {
+                                                                background: TIER_COLORS.hot,
+                                                                height: barsReady ? `${hotPx}px` : "0px",
+                                                                transition: `height 420ms cubic-bezier(0.2, 0.8, 0.2, 1) ${idx * 18 + 30}ms`
+                                                            }
+                                                        }),
+                                                        /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
+                                                            className: "w-full",
+                                                            style: {
+                                                                background: TIER_COLORS.warm,
+                                                                height: barsReady ? `${warmPx}px` : "0px",
+                                                                transition: `height 420ms cubic-bezier(0.2, 0.8, 0.2, 1) ${idx * 18 + 42}ms`
+                                                            }
+                                                        }),
+                                                        /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
+                                                            className: "w-full",
+                                                            style: {
+                                                                background: TIER_COLORS.facts,
+                                                                height: barsReady ? `${factsPx}px` : "0px",
+                                                                transition: `height 420ms cubic-bezier(0.2, 0.8, 0.2, 1) ${idx * 18 + 54}ms`
+                                                            }
+                                                        }),
+                                                        /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
+                                                            className: "w-full",
+                                                            style: {
+                                                                background: TIER_COLORS.overhead,
+                                                                height: barsReady ? `${overheadPx}px` : "0px",
+                                                                transition: `height 420ms cubic-bezier(0.2, 0.8, 0.2, 1) ${idx * 18 + 66}ms`
+                                                            }
+                                                        })
+                                                    ]
+                                                }) : /*#__PURE__*/ (0,react_jsx_runtime.jsx)("div", {
                                                     className: "w-full bg-gradient-to-t from-indigo-500 to-violet-400",
                                                     style: {
                                                         height: barsReady ? `${inputHeight}px` : "0px",
@@ -52947,13 +53130,61 @@ function InteractiveTokenChart({ series, selectedDay, onSelectDay }) {
             /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("div", {
                 className: "mt-2 flex flex-wrap items-center gap-3 text-[11px] text-[var(--text-secondary)]",
                 children: [
+                    /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("span", {
+                        className: "inline-flex items-center gap-1",
+                        children: [
+                            /*#__PURE__*/ (0,react_jsx_runtime.jsx)("span", {
+                                className: "w-2 h-2 rounded-sm",
+                                style: {
+                                    background: TIER_COLORS.hot
+                                }
+                            }),
+                            "hot"
+                        ]
+                    }),
+                    /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("span", {
+                        className: "inline-flex items-center gap-1",
+                        children: [
+                            /*#__PURE__*/ (0,react_jsx_runtime.jsx)("span", {
+                                className: "w-2 h-2 rounded-sm",
+                                style: {
+                                    background: TIER_COLORS.warm
+                                }
+                            }),
+                            "warm"
+                        ]
+                    }),
+                    /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("span", {
+                        className: "inline-flex items-center gap-1",
+                        children: [
+                            /*#__PURE__*/ (0,react_jsx_runtime.jsx)("span", {
+                                className: "w-2 h-2 rounded-sm",
+                                style: {
+                                    background: TIER_COLORS.facts
+                                }
+                            }),
+                            "facts"
+                        ]
+                    }),
+                    /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("span", {
+                        className: "inline-flex items-center gap-1",
+                        children: [
+                            /*#__PURE__*/ (0,react_jsx_runtime.jsx)("span", {
+                                className: "w-2 h-2 rounded-sm",
+                                style: {
+                                    background: TIER_COLORS.overhead
+                                }
+                            }),
+                            "overhead"
+                        ]
+                    }),
                     /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("span", {
                         className: "inline-flex items-center gap-1",
                         children: [
                             /*#__PURE__*/ (0,react_jsx_runtime.jsx)("span", {
                                 className: "w-2 h-2 rounded-full bg-violet-400"
                             }),
-                            "input"
+                            "input (est)"
                         ]
                     }),
                     /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("span", {
@@ -52965,14 +53196,9 @@ function InteractiveTokenChart({ series, selectedDay, onSelectDay }) {
                             "output"
                         ]
                     }),
-                    active && /*#__PURE__*/ (0,react_jsx_runtime.jsxs)("span", {
+                    active && /*#__PURE__*/ (0,react_jsx_runtime.jsx)("span", {
                         className: "ml-auto text-[var(--text-primary)]",
-                        children: [
-                            "in ",
-                            formatInt(active.input_tokens_est),
-                            " \xb7 out ",
-                            formatInt(active.output_tokens_est)
-                        ]
+                        children: active.tier_tokens.measured_input_tokens > 0 ? `hot ${formatInt(active.tier_tokens.hot_tokens)} · warm ${formatInt(active.tier_tokens.warm_tokens)} · facts ${formatInt(active.tier_tokens.facts_tokens)} · overhead ${formatInt(active.tier_tokens.overhead_tokens)} · out ${formatInt(active.output_tokens_est)}` : `in ${formatInt(active.input_tokens_est)} · out ${formatInt(active.output_tokens_est)}`
                     })
                 ]
             })