@tangle-network/sandbox-ui 0.54.0 → 0.56.0

package/dist/{WorkflowGraph-FSS7GW5O.js → WorkflowGraph-VMG2ZEAN.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-GTJ5PSK5.js";
 import {
   buildWorkflowGraph
-} from "./chunk-DEN4GUA7.js";
+} from "./chunk-WEYFEMIN.js";
 import {
   providerLabel
 } from "./chunk-7JLB7UZ3.js";

package/dist/assistant.js

@@ -1,6 +1,9 @@
 import {
   ProviderIcon
 } from "./chunk-GTJ5PSK5.js";
+import {
+  timeAgo
+} from "./chunk-TK46XFLM.js";
 import {
   providerLabel
 } from "./chunk-7JLB7UZ3.js";
@@ -1542,11 +1545,115 @@ import {
 
 // src/assistant/AssistantPanel.tsx
 import { AgentTimeline, ChatInput, ThinkingIndicator } from "@tangle-network/ui/chat";
-import { History, MessageSquarePlus, Minus, Plus, Trash2, X } from "lucide-react";
-import { useEffect as useEffect5, useMemo, useRef as useRef4, useState as useState5 } from "react";
+import { History, MessageSquarePlus, Minus, Plus, X } from "lucide-react";
+import { useEffect as useEffect5, useMemo as useMemo2, useRef as useRef4, useState as useState6 } from "react";
+
+// src/assistant/AssistantHistory.tsx
+import { Search, Trash2 } from "lucide-react";
+import { useMemo, useState as useState3 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function parsedTime(iso) {
+  if (!iso) return null;
+  const ms = Date.parse(iso);
+  return Number.isFinite(ms) ? ms : null;
+}
+function AssistantHistory({
+  threads,
+  loaded,
+  activeThreadId,
+  activeBusy,
+  canRemove,
+  onSelect,
+  onDelete
+}) {
+  const [query, setQuery] = useState3("");
+  const sorted = useMemo(
+    () => [...threads].sort((a, b) => {
+      const ta = parsedTime(a.updatedAt);
+      const tb = parsedTime(b.updatedAt);
+      if (ta === null && tb === null) return 0;
+      if (ta === null) return 1;
+      if (tb === null) return -1;
+      return tb - ta;
+    }),
+    [threads]
+  );
+  const trimmed = query.trim().toLowerCase();
+  const visible = useMemo(
+    () => trimmed ? (
+      // Match the title as displayed, so searching "untitled" finds the
+      // rows that render as "Untitled conversation".
+      sorted.filter(
+        (t) => (t.title ?? "Untitled conversation").toLowerCase().includes(trimmed)
+      )
+    ) : sorted,
+    [sorted, trimmed]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx2("div", { className: "border-border border-b p-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx2(Search, { className: "-translate-y-1/2 pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 text-muted-foreground" }),
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "search",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          placeholder: "Search conversations",
+          "aria-label": "Search conversations",
+          className: "w-full rounded-md border border-border bg-surface-container-high py-1.5 pr-2 pl-8 text-foreground text-sm placeholder:text-muted-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx2("div", { className: "min-h-0 flex-1 overflow-y-auto", children: visible.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "px-3 py-6 text-center text-muted-foreground text-xs", children: !loaded ? "Loading\u2026" : trimmed ? "No conversations match your search." : "No past conversations yet." }) : /* @__PURE__ */ jsx2("ul", { className: "py-1", children: visible.map((t) => {
+      const active = t.id === activeThreadId;
+      const ms = parsedTime(t.updatedAt);
+      const busyActive = active && activeBusy;
+      const title = t.title ?? "Untitled conversation";
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: `group flex items-center transition-colors hover:bg-muted/60 ${active ? "bg-primary/10" : ""}`,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => onSelect(t.id),
+                className: "flex min-w-0 flex-1 flex-col gap-0.5 px-3 py-2 text-left",
+                children: [
+                  /* @__PURE__ */ jsx2(
+                    "span",
+                    {
+                      className: `truncate text-sm ${active ? "font-medium text-foreground" : "text-foreground"}`,
+                      children: title
+                    }
+                  ),
+                  ms != null && /* @__PURE__ */ jsx2("span", { className: "text-[11px] text-muted-foreground", children: timeAgo(ms) })
+                ]
+              }
+            ),
+            canRemove && /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                onClick: () => onDelete(t.id),
+                disabled: busyActive,
+                "aria-label": `Delete conversation: ${title}`,
+                title: busyActive ? "Can't delete while this conversation is active" : "Delete conversation",
+                className: "shrink-0 p-2 text-muted-foreground opacity-0 transition [@media(hover:none)]:opacity-100 hover:text-destructive focus-visible:opacity-100 group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30",
+                children: /* @__PURE__ */ jsx2(Trash2, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ]
+        },
+        t.id
+      );
+    }) }) })
+  ] });
+}
 
 // src/assistant/build-timeline.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var TOOL_STATUS = {
   running: "running",
   ok: "success",
@@ -1602,7 +1709,7 @@ function buildAssistantTimeline(state, renderProposal) {
     items.push({
       id: "reasoning",
       kind: "custom",
-      content: /* @__PURE__ */ jsx2("p", { className: "whitespace-pre-wrap px-1 text-muted-foreground text-xs italic", children: state.reasoning })
+      content: /* @__PURE__ */ jsx3("p", { className: "whitespace-pre-wrap px-1 text-muted-foreground text-xs italic", children: state.reasoning })
     });
   }
   if (state.status !== "streaming" && state.usage && state.usage.costUsd != null) {
@@ -1623,8 +1730,8 @@ function buildAssistantTimeline(state, renderProposal) {
 }
 
 // src/assistant/ProposalCard.tsx
-import { useState as useState3 } from "react";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { useState as useState4 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function ProposalCard({
   proposal,
   confirming,
@@ -1634,31 +1741,31 @@ function ProposalCard({
   renderGraph
 }) {
   const view = describeProposal(proposal);
-  const [tab, setTab] = useState3("graph");
+  const [tab, setTab] = useState4("graph");
   const isWorkflow = view.preview?.kind === "workflow";
   const showGraph = isWorkflow && !!renderGraph;
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-primary/40 bg-card p-3 text-sm", children: [
-    /* @__PURE__ */ jsx3("p", { className: "font-medium text-foreground", children: view.title }),
-    /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Confirm to run this action on your account." }),
-    view.fields.length > 0 && /* @__PURE__ */ jsx3("dl", { className: "mt-2 space-y-1", children: view.fields.map((f) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs", children: [
-      /* @__PURE__ */ jsx3("dt", { className: "shrink-0 text-muted-foreground", children: f.label }),
-      /* @__PURE__ */ jsx3("dd", { className: "truncate text-foreground", title: f.value, children: f.value })
+  return /* @__PURE__ */ jsxs2("div", { className: "rounded-lg border border-primary/40 bg-card p-3 text-sm", children: [
+    /* @__PURE__ */ jsx4("p", { className: "font-medium text-foreground", children: view.title }),
+    /* @__PURE__ */ jsx4("p", { className: "text-muted-foreground text-xs", children: "Confirm to run this action on your account." }),
+    view.fields.length > 0 && /* @__PURE__ */ jsx4("dl", { className: "mt-2 space-y-1", children: view.fields.map((f) => /* @__PURE__ */ jsxs2("div", { className: "flex gap-2 text-xs", children: [
+      /* @__PURE__ */ jsx4("dt", { className: "shrink-0 text-muted-foreground", children: f.label }),
+      /* @__PURE__ */ jsx4("dd", { className: "truncate text-foreground", title: f.value, children: f.value })
     ] }, f.label)) }),
-    view.skills && view.skills.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
-      /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "New skills" }),
-      /* @__PURE__ */ jsx3("ul", { className: "mt-1 space-y-0.5", children: view.skills.map((s) => /* @__PURE__ */ jsxs("li", { className: "text-foreground text-xs", children: [
-        /* @__PURE__ */ jsx3("span", { className: "font-medium", children: s.name }),
-        s.description ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+    view.skills && view.skills.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "mt-2", children: [
+      /* @__PURE__ */ jsx4("p", { className: "text-muted-foreground text-xs", children: "New skills" }),
+      /* @__PURE__ */ jsx4("ul", { className: "mt-1 space-y-0.5", children: view.skills.map((s) => /* @__PURE__ */ jsxs2("li", { className: "text-foreground text-xs", children: [
+        /* @__PURE__ */ jsx4("span", { className: "font-medium", children: s.name }),
+        s.description ? /* @__PURE__ */ jsxs2("span", { className: "text-muted-foreground", children: [
           " \u2014 ",
           s.description
         ] }) : null
       ] }, s.name)) })
     ] }),
-    view.preview && /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: view.preview.label }),
-        showGraph && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs", children: [
-          /* @__PURE__ */ jsx3(
+    view.preview && /* @__PURE__ */ jsxs2("div", { className: "mt-2", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx4("p", { className: "text-muted-foreground text-xs", children: view.preview.label }),
+        showGraph && /* @__PURE__ */ jsxs2("div", { className: "flex gap-2 text-xs", children: [
+          /* @__PURE__ */ jsx4(
             "button",
             {
               type: "button",
@@ -1667,7 +1774,7 @@ function ProposalCard({
               children: "Graph"
             }
           ),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "button",
             {
               type: "button",
@@ -1678,11 +1785,11 @@ function ProposalCard({
           )
         ] })
       ] }),
-      showGraph && tab === "graph" ? /* @__PURE__ */ jsx3("div", { className: "mt-1 h-64 overflow-hidden rounded border border-border", children: renderGraph?.(view.preview.content) }) : /* @__PURE__ */ jsx3("pre", { className: "mt-1 max-h-48 overflow-auto rounded border border-border bg-muted/50 p-2 text-xs", children: /* @__PURE__ */ jsx3("code", { children: view.preview.content }) })
+      showGraph && tab === "graph" ? /* @__PURE__ */ jsx4("div", { className: "mt-1 h-64 overflow-hidden rounded border border-border", children: renderGraph?.(view.preview.content) }) : /* @__PURE__ */ jsx4("pre", { className: "mt-1 max-h-48 overflow-auto rounded border border-border bg-muted/50 p-2 text-xs", children: /* @__PURE__ */ jsx4("code", { children: view.preview.content }) })
     ] }),
-    proposal.requirements && proposal.requirements.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3 rounded border border-border p-2", children: [
-      /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Integrations" }),
-      /* @__PURE__ */ jsx3("ul", { className: "mt-1 space-y-1", children: proposal.requirements.map((r) => /* @__PURE__ */ jsx3(
+    proposal.requirements && proposal.requirements.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "mt-3 rounded border border-border p-2", children: [
+      /* @__PURE__ */ jsx4("p", { className: "text-muted-foreground text-xs", children: "Integrations" }),
+      /* @__PURE__ */ jsx4("ul", { className: "mt-1 space-y-1", children: proposal.requirements.map((r) => /* @__PURE__ */ jsx4(
         RequirementRow,
         {
           req: r,
@@ -1690,11 +1797,11 @@ function ProposalCard({
         },
         `${r.provider}-${r.kind ?? "integration"}`
       )) }),
-      /* @__PURE__ */ jsx3("p", { className: "mt-1 text-muted-foreground text-xs", children: "Connect the items above, then confirm \u2014 your proposal stays here until you do." })
+      /* @__PURE__ */ jsx4("p", { className: "mt-1 text-muted-foreground text-xs", children: "Connect the items above, then confirm \u2014 your proposal stays here until you do." })
     ] }),
-    proposal.retryError && /* @__PURE__ */ jsx3("p", { role: "alert", className: "mt-2 text-destructive text-xs", children: proposal.retryError }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-3 flex gap-2", children: [
-      /* @__PURE__ */ jsx3(
+    proposal.retryError && /* @__PURE__ */ jsx4("p", { role: "alert", className: "mt-2 text-destructive text-xs", children: proposal.retryError }),
+    /* @__PURE__ */ jsxs2("div", { className: "mt-3 flex gap-2", children: [
+      /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
@@ -1704,7 +1811,7 @@ function ProposalCard({
           children: confirming ? "Confirming\u2026" : "Confirm"
         }
       ),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
@@ -1744,9 +1851,9 @@ function RequirementRow({
   const statusText = req.connected ? isApp ? "installed" : "connected" : isApp ? "not installed" : "not connected";
   const canConnect = !req.connected && req.connectUrl !== null;
   const target = req.connectUrl ?? "/app/integrations";
-  return /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-2 text-xs", children: [
-    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
-      /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2("li", { className: "flex items-center justify-between gap-2 text-xs", children: [
+    /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsx4(
         ProviderIcon,
         {
           id: req.provider,
@@ -1755,16 +1862,16 @@ function RequirementRow({
           className: "rounded"
         }
       ),
-      /* @__PURE__ */ jsx3("span", { className: "truncate text-foreground", children: kindLabel }),
-      /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [
-        /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4("span", { className: "truncate text-foreground", children: kindLabel }),
+      /* @__PURE__ */ jsxs2("span", { className: "flex shrink-0 items-center gap-1", children: [
+        /* @__PURE__ */ jsx4(
           "span",
           {
             "aria-hidden": "true",
             className: `h-1.5 w-1.5 rounded-full ${req.connected ? "bg-primary" : "border border-muted-foreground"}`
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "span",
           {
             className: req.connected ? "text-primary" : "text-muted-foreground",
@@ -1773,7 +1880,7 @@ function RequirementRow({
         )
       ] })
     ] }),
-    canConnect && /* @__PURE__ */ jsxs(
+    canConnect && /* @__PURE__ */ jsxs2(
       "button",
       {
         type: "button",
@@ -1789,7 +1896,7 @@ function RequirementRow({
 }
 
 // src/assistant/usePanelPrefs.ts
-import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
 var MIN_PANEL_WIDTH = 360;
 var DEFAULT_PANEL_WIDTH = 448;
 var MAX_PANEL_WIDTH_FRACTION = 0.95;
@@ -1830,8 +1937,8 @@ function clampScale(value) {
   return Math.min(Math.max(stepped, MIN_FONT_SCALE), MAX_FONT_SCALE);
 }
 function usePanelWidth() {
-  const [width, setWidthState] = useState4(DEFAULT_PANEL_WIDTH);
-  const [maxWidth, setMaxWidth] = useState4(() => maxPanelWidth());
+  const [width, setWidthState] = useState5(DEFAULT_PANEL_WIDTH);
+  const [maxWidth, setMaxWidth] = useState5(() => maxPanelWidth());
   const desiredRef = useRef3(DEFAULT_PANEL_WIDTH);
   useEffect4(() => {
     setMaxWidth(maxPanelWidth());
@@ -1867,7 +1974,7 @@ function usePanelWidth() {
   return { width, maxWidth, setWidth, previewWidth, nudgeWidth };
 }
 function useFontScale() {
-  const [scale, setScaleState] = useState4(DEFAULT_FONT_SCALE);
+  const [scale, setScaleState] = useState5(DEFAULT_FONT_SCALE);
   useEffect4(() => {
     const stored = readNumber(FONT_SCALE_KEY);
     if (stored != null) setScaleState(clampScale(stored));
@@ -1888,7 +1995,7 @@ function useFontScale() {
   };
 }
 function useIsDesktop() {
-  const [isDesktop, setIsDesktop] = useState4(
+  const [isDesktop, setIsDesktop] = useState5(
     () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(min-width: 768px)").matches : true
   );
   useEffect4(() => {
@@ -1905,7 +2012,7 @@ function useIsDesktop() {
 }
 
 // src/assistant/AssistantPanel.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var EMPTY_STATE = "Ask me to create a workflow, check your usage, or manage your API keys.";
 function defaultFormatMoney(usd) {
   if (usd == null) return "\u2014";
@@ -1944,10 +2051,10 @@ function AssistantPanel({
   const models = useAssistantModels();
   const threads = useAssistantThreads(userId);
   const font = useFontScale();
-  const [historyOpen, setHistoryOpen] = useState5(false);
-  const historyRef = useRef4(null);
+  const [view, setView] = useState6("chat");
   const historyButtonRef = useRef4(null);
-  const pickerModels = useMemo(
+  const logRef = useRef4(null);
+  const pickerModels = useMemo2(
     () => toPickerModels(models, chat.selectedModel),
     [models, chat.selectedModel]
   );
@@ -1956,30 +2063,27 @@ function AssistantPanel({
   const chatRef = useRef4(chat);
   chatRef.current = chat;
   useEffect5(() => {
-    if (!historyOpen) return;
-    const onPointerDown = (e) => {
-      const target = e.target;
-      if (historyRef.current?.contains(target)) return;
-      if (historyButtonRef.current?.contains(target)) return;
-      setHistoryOpen(false);
-    };
+    if (view !== "history") return;
+    const search = logRef.current?.querySelector(
+      'input[type="search"]'
+    );
+    (search ?? logRef.current)?.focus();
+  }, [view]);
+  useEffect5(() => {
+    if (view !== "history") return;
     const onKeyDownCapture = (e) => {
       if (e.key !== "Escape") return;
-      if (!historyRef.current?.contains(e.target)) return;
+      const target = e.target;
+      if (!logRef.current?.contains(target) && !historyButtonRef.current?.contains(target)) {
+        return;
+      }
       e.stopImmediatePropagation();
-      setHistoryOpen(false);
+      setView("chat");
       historyButtonRef.current?.focus();
     };
-    document.addEventListener("pointerdown", onPointerDown);
     document.addEventListener("keydown", onKeyDownCapture, true);
-    return () => {
-      document.removeEventListener("pointerdown", onPointerDown);
-      document.removeEventListener("keydown", onKeyDownCapture, true);
-    };
-  }, [historyOpen]);
-  useEffect5(() => {
-    if (historyOpen) historyRef.current?.focus();
-  }, [historyOpen]);
+    return () => document.removeEventListener("keydown", onKeyDownCapture, true);
+  }, [view]);
   const effectiveBalance = state.usage?.balanceUsd ?? balanceUsd;
   const errorView = state.error ? presentError(state.error.code, state.error.message) : null;
   const low = isLowBalance(effectiveBalance) && !errorView;
@@ -1987,7 +2091,7 @@ function AssistantPanel({
   const firstUserText = state.messages.find((m) => m.role === "user")?.text.trim();
   const titleChars = firstUserText ? Array.from(firstUserText) : [];
   const conversationTitle = firstUserText ? titleChars.length > 60 ? `${titleChars.slice(0, 60).join("")}\u2026` : firstUserText : null;
-  const renderProposal = (proposal) => /* @__PURE__ */ jsx4(
+  const renderProposal = (proposal) => /* @__PURE__ */ jsx5(
     ProposalCard,
     {
       proposal,
@@ -1999,12 +2103,13 @@ function AssistantPanel({
     }
   );
   const isThinking = assistantIsThinking(state);
-  const openHistory = () => {
-    setHistoryOpen((v) => {
-      const next = !v;
-      if (next) threads.refresh();
-      return next;
-    });
+  const showHistory = () => {
+    threads.refresh();
+    setView("history");
+  };
+  const toggleHistory = () => {
+    if (view === "history") setView("chat");
+    else showHistory();
   };
   const deleteThread = async (threadId) => {
     const pre = chatRef.current.state;
@@ -2018,85 +2123,38 @@ function AssistantPanel({
       chatRef.current.reset();
     }
   };
-  return /* @__PURE__ */ jsxs2("div", { className: "relative flex h-full flex-col bg-background", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "relative z-10 border-border border-b", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 px-4 pt-3 pb-1.5", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-col", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-2", children: [
-            /* @__PURE__ */ jsx4("span", { className: "font-medium text-foreground text-sm", children: "Assistant" }),
-            /* @__PURE__ */ jsx4(
-              "span",
-              {
-                "aria-label": "Your credit balance",
-                className: "text-muted-foreground text-xs",
-                children: formatMoney(effectiveBalance)
-              }
-            )
-          ] }),
-          conversationTitle && /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3("div", { className: "relative flex h-full flex-col bg-background", children: [
+    /* @__PURE__ */ jsx5("div", { className: "border-border border-b", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-2 px-4 pt-3 pb-2.5", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-col", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-baseline gap-2", children: [
+          /* @__PURE__ */ jsx5("span", { className: "font-medium text-foreground text-sm", children: "Assistant" }),
+          /* @__PURE__ */ jsx5(
             "span",
             {
-              className: "truncate text-muted-foreground text-xs",
-              title: conversationTitle,
-              children: conversationTitle
+              "aria-label": "Your credit balance",
+              className: "text-muted-foreground text-xs",
+              children: formatMoney(effectiveBalance)
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center gap-0.5", children: [
-          /* @__PURE__ */ jsx4(
-            "button",
-            {
-              ref: historyButtonRef,
-              type: "button",
-              onClick: openHistory,
-              "aria-label": "Chat history",
-              "aria-pressed": historyOpen,
-              className: `rounded-md p-1.5 transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring ${historyOpen ? "bg-muted text-foreground" : "text-muted-foreground"}`,
-              children: /* @__PURE__ */ jsx4(History, { className: "h-4 w-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx4(
-            "button",
-            {
-              type: "button",
-              onClick: chat.reset,
-              "aria-label": "New chat",
-              title: "New chat",
-              className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              children: /* @__PURE__ */ jsx4(MessageSquarePlus, { className: "h-4 w-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx4(
-            "button",
-            {
-              type: "button",
-              onClick: onClose,
-              "aria-label": "Close assistant",
-              className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              children: /* @__PURE__ */ jsx4(X, { className: "h-4 w-4" })
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 px-3 pb-2", children: [
-        pickerModels.length > 0 ? /* @__PURE__ */ jsx4(
-          ModelPicker,
+        conversationTitle && /* @__PURE__ */ jsx5(
+          "span",
           {
-            variant: "pill",
-            label: "Model",
-            value: pickerValue,
-            onChange: (id) => chat.setModel(nextModelSelection(id, models.default)),
-            models: pickerModels
+            className: "truncate text-muted-foreground text-xs",
+            title: conversationTitle,
+            children: conversationTitle
           }
-        ) : /* @__PURE__ */ jsx4("span", { className: "px-1 text-muted-foreground text-xs", children: "Default model" }),
-        /* @__PURE__ */ jsxs2(
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 items-center gap-1", children: [
+        /* @__PURE__ */ jsxs3(
           "div",
           {
             className: "flex items-center overflow-hidden rounded-md border border-border",
             role: "group",
             "aria-label": "Text size",
             children: [
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5(
                 "button",
                 {
                   type: "button",
@@ -2104,10 +2162,10 @@ function AssistantPanel({
                   disabled: !font.canDecrease,
                   "aria-label": "Decrease text size",
                   className: "px-1.5 py-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent",
-                  children: /* @__PURE__ */ jsx4(Minus, { className: "h-3.5 w-3.5" })
+                  children: /* @__PURE__ */ jsx5(Minus, { className: "h-3.5 w-3.5" })
                 }
               ),
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5(
                 "button",
                 {
                   type: "button",
@@ -2115,100 +2173,109 @@ function AssistantPanel({
                   disabled: !font.canIncrease,
                   "aria-label": "Increase text size",
                   className: "border-border border-l px-1.5 py-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent",
-                  children: /* @__PURE__ */ jsx4(Plus, { className: "h-3.5 w-3.5" })
+                  children: /* @__PURE__ */ jsx5(Plus, { className: "h-3.5 w-3.5" })
                 }
               )
             ]
           }
+        ),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            ref: historyButtonRef,
+            type: "button",
+            onClick: toggleHistory,
+            "aria-label": "Chat history",
+            "aria-pressed": view === "history",
+            className: `rounded-md p-1.5 transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring ${view === "history" ? "bg-muted text-foreground" : "text-muted-foreground"}`,
+            children: /* @__PURE__ */ jsx5(History, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              chat.reset();
+              setView("chat");
+            },
+            "aria-label": "New chat",
+            title: "New chat",
+            className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            children: /* @__PURE__ */ jsx5(MessageSquarePlus, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            "aria-label": "Close assistant",
+            className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            children: /* @__PURE__ */ jsx5(X, { className: "h-4 w-4" })
+          }
         )
-      ] }),
-      historyOpen && /* @__PURE__ */ jsxs2(
-        "div",
-        {
-          ref: historyRef,
-          role: "dialog",
-          "aria-label": "Recent conversations",
-          tabIndex: -1,
-          className: "absolute inset-x-2 top-full z-30 mt-1 overflow-hidden rounded-lg border border-border bg-surface-container-highest shadow-xl ring-1 ring-black/5 focus:outline-none",
-          children: [
-            /* @__PURE__ */ jsx4("div", { className: "border-border border-b bg-surface-container-high px-3 py-2 font-medium text-[11px] text-muted-foreground uppercase tracking-wide", children: "Recent conversations" }),
-            /* @__PURE__ */ jsx4("div", { className: "max-h-[min(18rem,50vh)] overflow-y-auto", children: threads.threads.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "px-3 py-3 text-muted-foreground text-xs", children: threads.loaded ? "No past conversations." : "Loading\u2026" }) : /* @__PURE__ */ jsx4("ul", { className: "py-1", children: threads.threads.map((t) => {
-              const busyActive = state.threadId === t.id && state.status !== "idle";
-              const active = state.threadId === t.id;
-              return /* @__PURE__ */ jsxs2(
-                "li",
-                {
-                  className: `group flex items-center transition-colors hover:bg-muted/60 ${active ? "bg-primary/10" : ""}`,
-                  children: [
-                    /* @__PURE__ */ jsx4(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => {
-                          chat.switchThread(t.id);
-                          setHistoryOpen(false);
-                        },
-                        className: `min-w-0 flex-1 truncate px-3 py-2 text-left text-xs ${active ? "font-medium text-foreground" : "text-foreground"}`,
-                        children: t.title ?? "Untitled conversation"
-                      }
-                    ),
-                    threads.canRemove && /* @__PURE__ */ jsx4(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => void deleteThread(t.id),
-                        disabled: busyActive,
-                        "aria-label": "Delete conversation",
-                        title: busyActive ? "Can't delete while this conversation is active" : "Delete conversation",
-                        className: "shrink-0 p-2 text-muted-foreground opacity-0 transition hover:text-destructive focus-visible:opacity-100 group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30",
-                        children: /* @__PURE__ */ jsx4(Trash2, { className: "h-3.5 w-3.5" })
-                      }
-                    )
-                  ]
-                },
-                t.id
-              );
-            }) }) })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx4(
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx5(
       "div",
       {
-        role: "log",
+        ref: logRef,
+        tabIndex: -1,
         "aria-label": "Conversation",
-        "aria-live": "polite",
-        className: "min-h-0 flex-1 overflow-y-auto px-2 py-3",
-        style: { zoom: font.scale },
-        children: renderTranscript ? renderTranscript({
-          messages: state.messages,
-          reasoning: state.reasoning,
-          streamingId: state.streamingId,
-          model: state.model,
-          isStreaming: streaming,
-          isThinking,
-          pendingProposals: state.pendingProposals,
-          usage: state.usage,
-          renderProposal
-        }) : /* @__PURE__ */ jsx4(
-          AgentTimeline,
+        role: view === "chat" ? "log" : void 0,
+        "aria-live": view === "chat" ? "polite" : void 0,
+        className: "min-h-0 flex-1 overflow-y-auto focus:outline-none",
+        children: view === "history" ? /* @__PURE__ */ jsx5(
+          AssistantHistory,
           {
-            items: buildAssistantTimeline(state, renderProposal),
-            isThinking,
-            emptyState: /* @__PURE__ */ jsx4("p", { className: "px-4 py-8 text-center text-muted-foreground text-sm", children: EMPTY_STATE })
+            threads: threads.threads,
+            loaded: threads.loaded,
+            activeThreadId: state.threadId,
+            activeBusy: state.status !== "idle",
+            canRemove: threads.canRemove,
+            onSelect: (id) => {
+              chat.switchThread(id);
+              setView("chat");
+            },
+            onDelete: (id) => void deleteThread(id)
           }
+        ) : (
+          // The text-size control zooms the transcript only — not the history
+          // view's search box and buttons. `zoom` scales every descendant
+          // uniformly regardless of which renderer draws the conversation; an
+          // inline `font-size` would not (the transcript's text utilities set
+          // absolute rem sizes), and `transform: scale` would break the scroll
+          // container by keeping the original layout box.
+          /* @__PURE__ */ jsx5("div", { className: "px-2 py-3", style: { zoom: font.scale }, children: renderTranscript ? renderTranscript({
+            messages: state.messages,
+            reasoning: state.reasoning,
+            streamingId: state.streamingId,
+            model: state.model,
+            isStreaming: streaming,
+            isThinking,
+            pendingProposals: state.pendingProposals,
+            usage: state.usage,
+            renderProposal
+          }) : /* @__PURE__ */ jsx5(
+            AgentTimeline,
+            {
+              items: buildAssistantTimeline(state, renderProposal),
+              isThinking,
+              emptyState: /* @__PURE__ */ jsx5("p", { className: "px-4 py-8 text-center text-muted-foreground text-sm", children: EMPTY_STATE })
+            }
+          ) })
         )
       }
     ),
-    errorView && /* @__PURE__ */ jsxs2(
+    errorView && /* @__PURE__ */ jsxs3(
       "div",
       {
         role: "alert",
         className: "mx-4 mb-2 rounded-lg border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm",
         children: [
-          /* @__PURE__ */ jsx4("p", { className: "text-foreground", children: errorView.message }),
-          errorView.cta && /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsx5("p", { className: "text-foreground", children: errorView.message }),
+          errorView.cta && /* @__PURE__ */ jsxs3(
             "button",
             {
               type: "button",
@@ -2223,14 +2290,14 @@ function AssistantPanel({
         ]
       }
     ),
-    low && /* @__PURE__ */ jsxs2(
+    low && /* @__PURE__ */ jsxs3(
       "div",
       {
         role: "status",
         className: "mx-4 mb-2 rounded-lg border border-border bg-muted/40 px-3 py-2 text-sm",
         children: [
-          /* @__PURE__ */ jsx4("p", { className: "text-foreground", children: "Your credit balance is running low." }),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5("p", { className: "text-foreground", children: "Your credit balance is running low." }),
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -2242,12 +2309,25 @@ function AssistantPanel({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs2("div", { className: "border-border border-t p-2", children: [
-      streaming && /* @__PURE__ */ jsx4("div", { className: "px-2 pb-1.5", "aria-label": "Assistant is working", children: /* @__PURE__ */ jsx4(ThinkingIndicator, {}) }),
-      /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsxs3("div", { className: "border-border border-t p-2", children: [
+      streaming && /* @__PURE__ */ jsx5("div", { className: "px-2 pb-1.5", "aria-label": "Assistant is working", children: /* @__PURE__ */ jsx5(ThinkingIndicator, {}) }),
+      /* @__PURE__ */ jsx5("div", { className: "mb-1.5 flex items-center px-1", children: pickerModels.length > 0 ? /* @__PURE__ */ jsx5(
+        ModelPicker,
+        {
+          variant: "pill",
+          label: "Model",
+          value: pickerValue,
+          onChange: (id) => chat.setModel(nextModelSelection(id, models.default)),
+          models: pickerModels
+        }
+      ) : /* @__PURE__ */ jsx5("span", { className: "px-1 text-muted-foreground text-xs", children: "Default model" }) }),
+      /* @__PURE__ */ jsx5(
         ChatInput,
         {
-          onSend: (message) => chat.send(message),
+          onSend: (message) => {
+            setView("chat");
+            chat.send(message);
+          },
           onCancel: chat.stop,
           isStreaming: streaming,
           disabled: chat.restoring || state.status === "awaiting_confirm",
@@ -2266,27 +2346,27 @@ import {
   createContext as createContext2,
   useCallback as useCallback4,
   useContext as useContext2,
-  useMemo as useMemo2,
-  useState as useState6
+  useMemo as useMemo3,
+  useState as useState7
 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var AssistantLauncherContext = createContext2(null);
 function AssistantLauncherProvider({
   children
 }) {
-  const [open, setOpen] = useState6(false);
-  const [seed, setSeed] = useState6(null);
+  const [open, setOpen] = useState7(false);
+  const [seed, setSeed] = useState7(null);
   const openAssistant = useCallback4((next) => {
     if (next != null) setSeed(next);
     setOpen(true);
   }, []);
   const closeAssistant = useCallback4(() => setOpen(false), []);
   const clearSeed = useCallback4(() => setSeed(null), []);
-  const value = useMemo2(
+  const value = useMemo3(
     () => ({ open, seed, openAssistant, closeAssistant, clearSeed }),
     [open, seed, openAssistant, closeAssistant, clearSeed]
   );
-  return /* @__PURE__ */ jsx5(AssistantLauncherContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx6(AssistantLauncherContext.Provider, { value, children });
 }
 function useAssistantLauncher() {
   const ctx = useContext2(AssistantLauncherContext);
@@ -2300,7 +2380,7 @@ function useAssistantLauncher() {
 
 // src/assistant/ResizeHandle.tsx
 import { useRef as useRef5 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function ResizeHandle({
   width,
   maxWidth,
@@ -2348,7 +2428,7 @@ function ResizeHandle({
   };
   return (
     // biome-ignore lint/a11y/useSemanticElements: a focusable drag handle is an ARIA window-splitter (role=separator); no native HTML element provides this.
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "div",
       {
         role: "separator",
@@ -2364,7 +2444,7 @@ function ResizeHandle({
         onPointerCancel: endDrag,
         onKeyDown,
         className: "group absolute inset-y-0 left-0 z-10 flex w-2 -translate-x-1/2 cursor-ew-resize touch-none items-center justify-center focus:outline-none",
-        children: /* @__PURE__ */ jsx6(
+        children: /* @__PURE__ */ jsx7(
           "span",
           {
             "aria-hidden": "true",
@@ -2377,7 +2457,7 @@ function ResizeHandle({
 }
 
 // src/assistant/AssistantDock.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function focusableWithin(container) {
   const selector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
   return Array.from(container.querySelectorAll(selector)).filter(
@@ -2429,7 +2509,7 @@ function AssistantDock({
     openAssistant();
   };
   if (!open) {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       "button",
       {
         ref: launcherRef,
@@ -2437,7 +2517,7 @@ function AssistantDock({
         onClick: openDialog,
         "aria-label": "Open assistant",
         className: "fixed right-4 bottom-4 z-40 flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-colors hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-ring",
-        children: /* @__PURE__ */ jsx7(MessageSquare, { className: "h-6 w-6" })
+        children: /* @__PURE__ */ jsx8(MessageSquare, { className: "h-6 w-6" })
       }
     );
   }
@@ -2465,8 +2545,8 @@ function AssistantDock({
       first.focus();
     }
   };
-  return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx8(
       "div",
       {
         "aria-hidden": "true",
@@ -2474,7 +2554,7 @@ function AssistantDock({
         onClick: () => closeAssistant()
       }
     ),
-    /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsxs4(
       "div",
       {
         ref: dialogRef,
@@ -2486,7 +2566,7 @@ function AssistantDock({
         style: isDesktop ? { width: `${width}px` } : void 0,
         className: "fixed inset-y-0 right-0 z-50 flex w-full flex-col border-border border-l shadow-xl focus:outline-none",
         children: [
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             AssistantPanel,
             {
               chat,
@@ -2500,7 +2580,7 @@ function AssistantDock({
             },
             userId ?? "anon"
           ),
-          isDesktop && /* @__PURE__ */ jsx7(
+          isDesktop && /* @__PURE__ */ jsx8(
             ResizeHandle,
             {
               width,

package/dist/{chunk-DEN4GUA7.js → chunk-WEYFEMIN.js}

@@ -43,7 +43,7 @@ function pickDetail(cfg, keys) {
   }
   return Object.keys(out).length > 0 ? out : void 0;
 }
-function describeAction(action) {
+function describeActionBase(action) {
   const rec = asRecord(action);
   const [kind] = Object.keys(rec);
   const cfg = asRecord(rec[kind]);
@@ -134,6 +134,41 @@ function describeAction(action) {
       };
   }
 }
+var MAX_CONFIG_DEPTH = 100;
+function toJsonSafe(value, seen = /* @__PURE__ */ new WeakSet(), depth = 0) {
+  if (value === null) return null;
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (typeof value === "string" || typeof value === "boolean") return value;
+  if (typeof value !== "object") return void 0;
+  if (value instanceof Date) return value.toISOString();
+  if (seen.has(value)) return "[Circular]";
+  if (depth >= MAX_CONFIG_DEPTH) return "[Max depth exceeded]";
+  seen.add(value);
+  let out;
+  if (Array.isArray(value)) {
+    out = value.map((v) => {
+      const s = toJsonSafe(v, seen, depth + 1);
+      return s === void 0 ? null : s;
+    });
+  } else {
+    const obj = {};
+    for (const [k, v] of Object.entries(value)) {
+      const s = toJsonSafe(v, seen, depth + 1);
+      if (s !== void 0) obj[k] = s;
+    }
+    out = obj;
+  }
+  seen.delete(value);
+  return out;
+}
+function withConfig(base, cfg) {
+  return Object.keys(cfg).length > 0 ? { ...base, config: toJsonSafe(cfg) } : base;
+}
+function describeAction(action) {
+  const rec = asRecord(action);
+  const [kind] = Object.keys(rec);
+  return withConfig(describeActionBase(action), asRecord(rec[kind]));
+}
 function describeTrigger(on) {
   const rec = asRecord(on);
   if (rec.provider_event) {
@@ -146,36 +181,46 @@ function describeTrigger(on) {
     if (event) subtitle += ` \xB7 ${event}`;
     if (actions.length > 0) subtitle += ` (${actions.join("/")})`;
     if (repo) subtitle += ` on ${repo}`;
-    return {
-      title: "Trigger",
-      kind: "provider_event",
-      subtitle,
-      provider: connection,
-      hasBranches: false,
-      isRoot: true,
-      tone: "trigger"
-    };
+    return withConfig(
+      {
+        title: "Trigger",
+        kind: "provider_event",
+        subtitle,
+        provider: connection,
+        hasBranches: false,
+        isRoot: true,
+        tone: "trigger"
+      },
+      ev
+    );
   }
   if (rec.schedule) {
     const sch = asRecord(rec.schedule);
     const cron = str(sch.cron);
     const tz = str(sch.timezone);
-    return {
-      title: "Schedule",
-      kind: "schedule",
-      subtitle: cron ? tz ? `${cron} (${tz})` : cron : void 0,
+    return withConfig(
+      {
+        title: "Schedule",
+        kind: "schedule",
+        subtitle: cron ? tz ? `${cron} (${tz})` : cron : void 0,
+        hasBranches: false,
+        isRoot: true,
+        tone: "trigger"
+      },
+      sch
+    );
+  }
+  const [kind] = Object.keys(rec);
+  return withConfig(
+    {
+      title: "Trigger",
+      kind: "trigger",
       hasBranches: false,
       isRoot: true,
       tone: "trigger"
-    };
-  }
-  return {
-    title: "Trigger",
-    kind: "trigger",
-    hasBranches: false,
-    isRoot: true,
-    tone: "trigger"
-  };
+    },
+    asRecord(kind ? rec[kind] : void 0)
+  );
 }
 function buildWorkflowGraph(yaml, options) {
   const reserveRunState = options?.reserveRunState ?? false;

package/dist/globals.css

@@ -317,9 +317,6 @@
   .inset-x-0 {
     inset-inline: calc(var(--spacing) * 0);
   }
-  .inset-x-2 {
-    inset-inline: calc(var(--spacing) * 2);
-  }
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
@@ -831,9 +828,6 @@
   .max-h-\[440px\] {
     max-height: 440px;
   }
-  .max-h-\[min\(18rem\,50vh\)\] {
-    max-height: min(18rem, 50vh);
-  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -2767,6 +2761,9 @@
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pb-2\.5 {
+    padding-bottom: calc(var(--spacing) * 2.5);
+  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
@@ -3497,12 +3494,6 @@
   .ring-\[var\(--md3-outline-variant\)\] {
     --tw-ring-color: var(--md3-outline-variant);
   }
-  .ring-black\/5 {
-    --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
-    }
-  }
   .ring-border {
     --tw-ring-color: var(--color-border);
   }
@@ -5354,6 +5345,11 @@
       }
     }
   }
+  .\[\@media\(hover\:none\)\]\:opacity-100 {
+    @media (hover:none) {
+      opacity: 100%;
+    }
+  }
 }
 :root,
 [data-sandbox-ui],

package/dist/index.js

@@ -63,19 +63,6 @@ import {
   useTotalRunningSessions
 } from "./chunk-WID73FPH.js";
 import "./chunk-2BUPSB7O.js";
-import {
-  TOOL_CATEGORY_ICONS,
-  cn,
-  copyText,
-  formatBytes,
-  formatDuration,
-  formatUptime,
-  getToolCategory,
-  getToolDisplayMetadata,
-  getToolErrorText,
-  timeAgo,
-  truncateText
-} from "./chunk-TK46XFLM.js";
 import {
   OpenUIArtifactRenderer
 } from "./chunk-AZ3AWMTM.js";
@@ -105,6 +92,19 @@ import {
   snapHarnessToModel,
   snapModelToHarness
 } from "./chunk-KOUYJ6QP.js";
+import {
+  TOOL_CATEGORY_ICONS,
+  cn,
+  copyText,
+  formatBytes,
+  formatDuration,
+  formatUptime,
+  getToolCategory,
+  getToolDisplayMetadata,
+  getToolErrorText,
+  timeAgo,
+  truncateText
+} from "./chunk-TK46XFLM.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,

package/dist/styles.css

@@ -317,9 +317,6 @@
   .inset-x-0 {
     inset-inline: calc(var(--spacing) * 0);
   }
-  .inset-x-2 {
-    inset-inline: calc(var(--spacing) * 2);
-  }
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
@@ -831,9 +828,6 @@
   .max-h-\[440px\] {
     max-height: 440px;
   }
-  .max-h-\[min\(18rem\,50vh\)\] {
-    max-height: min(18rem, 50vh);
-  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -2767,6 +2761,9 @@
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pb-2\.5 {
+    padding-bottom: calc(var(--spacing) * 2.5);
+  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
@@ -3497,12 +3494,6 @@
   .ring-\[var\(--md3-outline-variant\)\] {
     --tw-ring-color: var(--md3-outline-variant);
   }
-  .ring-black\/5 {
-    --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
-    }
-  }
   .ring-border {
     --tw-ring-color: var(--color-border);
   }
@@ -5354,6 +5345,11 @@
       }
     }
   }
+  .\[\@media\(hover\:none\)\]\:opacity-100 {
+    @media (hover:none) {
+      opacity: 100%;
+    }
+  }
 }
 :root,
 [data-sandbox-ui],

package/dist/workflows.d.ts

@@ -58,6 +58,14 @@ interface WfNodeData extends Record<string, unknown> {
     path?: string;
     /** Notable config fields for the expand drawer (kept small + stringified). */
     detail?: Record<string, string>;
+    /** The raw, UNTRUNCATED config for this node — the action/trigger config from
+     *  the definition. The compact card reads {@link detail}; a full-detail view
+     *  (e.g. a node drawer) reads this to render every field — the complete prompt,
+     *  all profile/source/input keys — without the card-sized clamp. It is a
+     *  JSON-safe deep copy of the config (cycles and non-JSON values normalized),
+     *  so a consumer can serialize or render it freely. Omitted when the node has
+     *  no config. */
+    config?: Record<string, unknown>;
     /** Connector slug (e.g. `github`) for the provider chip, when one applies. */
     provider?: string;
     /** Small corner tag, e.g. "×3" for a parallel fan-out. */

package/dist/workflows.js

@@ -1,6 +1,6 @@
 import {
   buildWorkflowGraph
-} from "./chunk-DEN4GUA7.js";
+} from "./chunk-WEYFEMIN.js";
 import "./chunk-7JLB7UZ3.js";
 import "./chunk-U67V476Y.js";
 
@@ -27,7 +27,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 function lazyWorkflowGraph() {
   return lazy(
     () => retryImport(
-      () => import("./WorkflowGraph-FSS7GW5O.js").then((m) => ({ default: m.WorkflowGraph }))
+      () => import("./WorkflowGraph-VMG2ZEAN.js").then((m) => ({ default: m.WorkflowGraph }))
     )
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.54.0",
+  "version": "0.56.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",