@tangle-network/agent-app 0.45.47 → 0.45.49

package/dist/assistant/index.js

@@ -1,15 +1,15 @@
 import {
   ChatComposer,
+  ChatEmptyState,
   ChatMessages
-} from "../chunk-ZX5UT4HF.js";
+} from "../chunk-ZAKKG6WI.js";
 import "../chunk-FBVLEGEG.js";
-import "../chunk-54FYYXAX.js";
+import "../chunk-ENLRJYVW.js";
 import "../chunk-GEYACSFW.js";
 import {
-  ModelPicker,
-  OVERLAY_SHADOW,
-  ProviderLogo
-} from "../chunk-GNPN6ED4.js";
+  ModelPicker
+} from "../chunk-CJHIAZKK.js";
+import "../chunk-MLG6XKPV.js";
 import "../chunk-BATKJP3P.js";
 import {
   AsyncView
@@ -703,7 +703,7 @@ function describeProposal(proposal) {
       if (args.product != null)
         fields.push({ label: "Product", value: str(args.product) });
       if (args.budgetUsd != null)
-        fields.push({ label: "Budget (USD)", value: str(args.budgetUsd) });
+        fields.push({ label: "Budget", value: `$${str(args.budgetUsd)}` });
       return { title: "Create API key", preview: null, fields };
     }
     case "revoke_api_key":
@@ -960,7 +960,7 @@ function applyStreamEvent(state, event) {
           {
             id: `cap-${event.data.turnId}`,
             role: "status",
-            text: "Paused after a lot of steps \u2014 continue when you're ready and I'll pick up where I left off."
+            text: "Paused at the step limit \u2014 continue when you're ready and I'll pick up where I left off."
           }
         ]);
       }
@@ -1691,7 +1691,7 @@ import {
 
 // src/assistant/AssistantPanel.tsx
 import { History, MessageSquarePlus, Minus, Plus, X } from "lucide-react";
-import { useEffect as useEffect6, useMemo as useMemo3, useRef as useRef6, useState as useState6 } from "react";
+import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, useRef as useRef6, useState as useState6 } from "react";
 
 // src/assistant/AssistantHistory.tsx
 import { Search, Trash2 } from "lucide-react";
@@ -1705,7 +1705,18 @@ function timeAgo(ts) {
   const mins = Math.floor(secs / 60);
   if (mins < 60) return `${mins}m ago`;
   const hrs = Math.floor(mins / 60);
-  return `${hrs}h ago`;
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  if (days < 7) return `${days}d ago`;
+  const weeks = Math.floor(days / 7);
+  if (weeks < 5) return `${weeks}w ago`;
+  const date = new Date(ts);
+  const sameYear = date.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear();
+  return date.toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric",
+    ...sameYear ? {} : { year: "numeric" }
+  });
 }
 
 // src/assistant/AssistantHistory.tsx
@@ -1770,6 +1781,42 @@ function AssistantHistory({
       {
         state,
         loadingLabel: "Loading\u2026",
+        renderError: ({ message, retry }) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "alert",
+            className: "flex flex-col items-center justify-center gap-2 px-4 py-10 text-center",
+            children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  className: "h-4 w-4 text-destructive",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "9" }),
+                    /* @__PURE__ */ jsx2("path", { d: "M12 8v4m0 4h.01" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx2("p", { className: "max-w-md text-destructive text-sm", children: message }),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  onClick: retry,
+                  className: "rounded border border-destructive/40 bg-card px-2 py-0.5 font-medium text-xs text-destructive transition hover:bg-destructive/10",
+                  children: "Retry"
+                }
+              )
+            ]
+          }
+        ),
         empty: {
           title: trimmed ? "No conversations match your search." : "No past conversations yet.",
           description: trimmed ? void 0 : "Your chats with the assistant will appear here."
@@ -1798,7 +1845,7 @@ function AssistantHistory({
                           children: title
                         }
                       ),
-                      ms != null && /* @__PURE__ */ jsx2("span", { className: "text-[11px] text-muted-foreground", children: timeAgo(ms) })
+                      ms != null && /* @__PURE__ */ jsx2("span", { className: "text-xs text-muted-foreground", children: timeAgo(ms) })
                     ]
                   }
                 ),
@@ -1826,6 +1873,7 @@ function AssistantHistory({
 
 // src/assistant/ProposalCard.tsx
 import { useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
+import { ProviderIcon } from "@tangle-network/sandbox-ui/integrations";
 
 // src/assistant/provider-label.ts
 var PROVIDER_LABELS = {
@@ -1844,6 +1892,7 @@ function providerLabel(provider) {
 
 // src/assistant/ProposalCard.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var EYEBROW_CLASS = "text-xs font-semibold uppercase tracking-[0.05em] text-muted-foreground";
 function ProposalCard({
   proposal,
   confirming,
@@ -1859,14 +1908,13 @@ function ProposalCard({
   const isWorkflow = view.preview?.kind === "workflow";
   const showGraph = isWorkflow && !!renderGraph;
   return /* @__PURE__ */ jsxs2("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__ */ jsxs2("div", { className: "flex gap-2 text-xs", children: [
-      /* @__PURE__ */ jsx3("dt", { className: "shrink-0 text-muted-foreground", children: f.label }),
+    /* @__PURE__ */ jsx3("p", { className: "font-semibold text-[15px] text-foreground", children: view.title }),
+    view.fields.length > 0 && /* @__PURE__ */ jsx3("dl", { className: "mt-2 space-y-1", children: view.fields.map((f) => /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-[auto_1fr] gap-x-3 text-xs", children: [
+      /* @__PURE__ */ jsx3("dt", { className: "text-muted-foreground", children: f.label }),
       /* @__PURE__ */ jsx3("dd", { className: "truncate text-foreground", title: f.value, children: f.value })
     ] }, f.label)) }),
     view.skills && view.skills.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "mt-2", children: [
-      /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "New skills" }),
+      /* @__PURE__ */ jsx3("p", { className: EYEBROW_CLASS, children: "New skills" }),
       /* @__PURE__ */ jsx3("ul", { className: "mt-1 space-y-0.5", children: view.skills.map((s) => /* @__PURE__ */ jsxs2("li", { className: "text-foreground text-xs", children: [
         /* @__PURE__ */ jsx3("span", { className: "font-medium", children: s.name }),
         s.description ? /* @__PURE__ */ jsxs2("span", { className: "text-muted-foreground", children: [
@@ -1877,14 +1925,15 @@ function ProposalCard({
     ] }),
     view.preview && /* @__PURE__ */ jsxs2("div", { className: "mt-2", children: [
       /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: view.preview.label }),
+        /* @__PURE__ */ jsx3("p", { className: EYEBROW_CLASS, children: view.preview.label }),
         showGraph && /* @__PURE__ */ jsxs2("div", { className: "flex gap-2 text-xs", children: [
           /* @__PURE__ */ jsx3(
             "button",
             {
               type: "button",
               onClick: () => setTab("graph"),
-              className: tab === "graph" ? "text-foreground" : "text-muted-foreground",
+              "aria-pressed": tab === "graph",
+              className: tab === "graph" ? "font-medium text-foreground underline decoration-primary underline-offset-4" : "text-muted-foreground hover:text-foreground",
               children: "Graph"
             }
           ),
@@ -1893,16 +1942,22 @@ function ProposalCard({
             {
               type: "button",
               onClick: () => setTab("yaml"),
-              className: tab === "yaml" ? "text-foreground" : "text-muted-foreground",
+              "aria-pressed": tab === "yaml",
+              className: tab === "yaml" ? "font-medium text-foreground underline decoration-primary underline-offset-4" : "text-muted-foreground hover:text-foreground",
               children: "YAML"
             }
           )
         ] })
       ] }),
-      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-secondary p-2 text-xs", children: /* @__PURE__ */ jsx3("code", { children: view.preview.content }) })
+      showGraph && tab === "graph" ? /* @__PURE__ */ jsx3("div", { className: "mt-1 h-64 overflow-hidden rounded border border-border", children: renderGraph?.(view.preview.content) }) : (
+        // max-h fits a whole number of lines at text-xs' 16px leading —
+        // 1px border + 8px top padding, 12 lines = 202px — so the scroll
+        // cut lands on a line boundary, never mid-glyph.
+        /* @__PURE__ */ jsx3("pre", { className: "mt-1 max-h-[202px] overflow-auto rounded border border-border bg-secondary p-2 font-mono text-xs tabular-nums", children: /* @__PURE__ */ jsx3("code", { children: view.preview.content }) })
+      )
     ] }),
     proposal.requirements && proposal.requirements.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "mt-3 rounded border border-border p-2", children: [
-      /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Integrations" }),
+      /* @__PURE__ */ jsx3("p", { className: EYEBROW_CLASS, children: "Integrations" }),
       /* @__PURE__ */ jsx3("ul", { className: "mt-1 space-y-1", children: proposal.requirements.map((r) => /* @__PURE__ */ jsx3(
         RequirementRow,
         {
@@ -1913,7 +1968,7 @@ 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__ */ jsx3("p", { className: "mt-1 text-muted-foreground text-xs", children: "Connect the items above, then confirm." })
     ] }),
     proposal.retryError && /* @__PURE__ */ jsx3("p", { role: "alert", className: "mt-2 text-destructive text-xs", children: proposal.retryError }),
     /* @__PURE__ */ jsxs2("div", { className: "mt-3 flex gap-2", children: [
@@ -1923,7 +1978,7 @@ function ProposalCard({
           type: "button",
           onClick: onConfirm,
           disabled: confirming || !proposal.proposalId,
-          className: "rounded bg-primary px-3 py-1.5 text-primary-foreground text-sm disabled:opacity-50",
+          className: "rounded-md bg-primary px-3 py-1.5 font-medium text-primary-foreground text-sm disabled:opacity-50",
           children: confirming ? "Confirming\u2026" : "Confirm"
         }
       ),
@@ -1933,7 +1988,7 @@ function ProposalCard({
           type: "button",
           onClick: onCancel,
           disabled: confirming,
-          className: "rounded border border-border px-3 py-1.5 text-foreground text-sm disabled:opacity-50",
+          className: "rounded-md border border-border px-3 py-1.5 font-medium text-foreground text-sm disabled:opacity-50",
           children: "Cancel"
         }
       )
@@ -2001,10 +2056,17 @@ function RequirementRow({
   } catch {
     providerIcon = null;
   }
-  return /* @__PURE__ */ jsxs2("li", { className: "flex items-center justify-between gap-2 text-xs", children: [
+  return /* @__PURE__ */ jsxs2("li", { className: "flex items-center justify-between gap-2 text-sm", children: [
     /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-center gap-2", children: [
-      providerIcon ?? /* @__PURE__ */ jsx3(ProviderLogo, { provider: req.provider, size: 16 }),
-      /* @__PURE__ */ jsx3("span", { className: "truncate text-foreground", children: kindLabel }),
+      providerIcon ?? /* @__PURE__ */ jsx3(
+        ProviderIcon,
+        {
+          id: req.provider,
+          size: 16,
+          className: "rounded-[4px]"
+        }
+      ),
+      /* @__PURE__ */ jsx3("span", { className: "truncate font-medium text-foreground", children: kindLabel }),
       /* @__PURE__ */ jsxs2("span", { className: "flex shrink-0 items-center gap-1", children: [
         /* @__PURE__ */ jsx3(
           "span",
@@ -2028,7 +2090,7 @@ function RequirementRow({
         type: "button",
         onClick: handleConnect,
         disabled: connecting,
-        className: "shrink-0 rounded border border-primary px-2 py-0.5 font-medium text-primary transition-colors hover:bg-primary/10 disabled:opacity-50",
+        className: "shrink-0 rounded border border-primary px-2 py-0.5 font-medium text-primary text-sm transition-colors hover:bg-primary/10 disabled:opacity-50",
         children: connecting ? isApp ? "Installing\u2026" : "Connecting\u2026" : isApp ? "Install" : "Connect"
       }
     )
@@ -2036,6 +2098,7 @@ function RequirementRow({
 }
 
 // src/assistant/transcript.tsx
+import { Check } from "lucide-react";
 import { useCallback as useCallback3, useMemo as useMemo2 } from "react";
 import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function assistantIsThinking(state) {
@@ -2053,13 +2116,18 @@ function adaptToolResult(outcome) {
   return { ok: false, message: outcome.error?.message, code: outcome.error?.code };
 }
 function adaptTranscript(view) {
-  const messages = [];
+  const blocks = [];
   const confirmedResults = /* @__PURE__ */ new Map();
+  let run = [];
+  const flushRun = () => {
+    if (run.length > 0) blocks.push({ kind: "run", messages: run });
+    run = [];
+  };
   let turn = null;
   let currentTurnAssistant = null;
   const openTurn = (id) => {
     const message = { id, role: "assistant", content: "", segments: [] };
-    messages.push(message);
+    run.push(message);
     turn = message;
     currentTurnAssistant = message;
     return message;
@@ -2073,7 +2141,7 @@ ${text}` : text;
   };
   for (const msg of view.messages) {
     if (msg.role === "user") {
-      messages.push({ id: msg.id, role: "user", content: msg.text });
+      run.push({ id: msg.id, role: "user", content: msg.text });
       turn = null;
       currentTurnAssistant = null;
     } else if (msg.role === "assistant") {
@@ -2097,7 +2165,8 @@ ${text}` : text;
         }
       });
     } else {
-      messages.push({ id: msg.id, role: "system", content: msg.text });
+      flushRun();
+      blocks.push({ kind: "status", id: msg.id, text: msg.text });
       if (msg.result) confirmedResults.set(msg.id, msg.result);
       turn = null;
     }
@@ -2123,9 +2192,24 @@ ${text}` : text;
         currentTurnAssistant.durationMs = view.usage.durationMs;
     }
   }
+  flushRun();
   const isEmptyShell = (m) => m.role === "assistant" && m.content === "" && (m.segments?.length ?? 0) === 0 && m.reasoning == null && m.modelUsed == null && m.completionTokens == null && m.promptTokens == null && m.durationMs == null && m.id !== proposalHostId;
+  const kept = [];
+  const messages = [];
+  for (const block of blocks) {
+    if (block.kind === "status") {
+      kept.push(block);
+      continue;
+    }
+    const visible = block.messages.filter((m) => !isEmptyShell(m));
+    if (visible.length > 0) {
+      kept.push({ kind: "run", messages: visible });
+      messages.push(...visible);
+    }
+  }
   return {
-    messages: messages.filter((m) => !isEmptyShell(m)),
+    blocks: kept,
+    messages,
     proposalHostId,
     metricsHostId: currentTurnAssistant && !isEmptyShell(currentTurnAssistant) ? currentTurnAssistant.id : null,
     confirmedResults
@@ -2140,6 +2224,20 @@ function ProposalSlot({
 }) {
   return /* @__PURE__ */ jsx4(Fragment, { children: render(proposal) });
 }
+function StatusRow({
+  text,
+  result,
+  renderConfirmedResult
+}) {
+  const confirmed = result && renderConfirmedResult ? renderConfirmedResult(result) : null;
+  return /* @__PURE__ */ jsxs3("div", { className: "mx-auto w-full max-w-3xl px-6 py-1", children: [
+    /* @__PURE__ */ jsxs3("p", { className: "flex items-center justify-center gap-1.5 text-center text-muted-foreground text-xs", children: [
+      /* @__PURE__ */ jsx4(Check, { "aria-hidden": "true", className: "h-3.5 w-3.5 shrink-0" }),
+      text
+    ] }),
+    confirmed ? /* @__PURE__ */ jsx4("div", { className: "mt-3", children: confirmed }) : null
+  ] });
+}
 function AssistantTranscript({
   view,
   renderMarkdown,
@@ -2147,7 +2245,7 @@ function AssistantTranscript({
   renderConfirmedResult,
   emptyState
 }) {
-  const { messages, proposalHostId, metricsHostId, confirmedResults } = useMemo2(
+  const { blocks, proposalHostId, metricsHostId, confirmedResults } = useMemo2(
     () => adaptTranscript(view),
     [view]
   );
@@ -2155,43 +2253,51 @@ function AssistantTranscript({
     (content) => renderMarkdown ? renderMarkdown(content) : content,
     [renderMarkdown]
   );
-  if (messages.length === 0 && !view.isStreaming) {
+  if (blocks.length === 0 && !view.isStreaming) {
     return /* @__PURE__ */ jsx4(Fragment, { children: emptyState });
   }
-  return /* @__PURE__ */ jsx4(
-    ChatMessages,
-    {
-      messages,
-      loading: view.isStreaming,
-      agentLabel: "Assistant",
-      renderMarkdown: markdown,
-      toolRenderers,
-      renderEmpty: () => /* @__PURE__ */ jsx4(Fragment, { children: emptyState }),
-      renderExtras: (message) => {
-        const proposals = message.id === proposalHostId && view.pendingProposals.length > 0 ? /* @__PURE__ */ jsx4("div", { className: "mt-3 flex flex-col gap-3", children: view.pendingProposals.map((proposal) => /* @__PURE__ */ jsx4(
-          ProposalSlot,
-          {
-            proposal,
-            render: view.renderProposal
-          },
-          proposal.callId
-        )) }) : null;
-        const confirmed = confirmedResults.get(message.id);
-        const confirmedNode = confirmed && renderConfirmedResult ? renderConfirmedResult(confirmed) : null;
-        const confirmedCard = confirmedNode ? /* @__PURE__ */ jsx4("div", { className: "mt-3", children: confirmedNode }) : null;
-        const cost = message.id === metricsHostId && !view.isStreaming && view.usage?.costUsd != null && !view.usage.replayed ? /* @__PURE__ */ jsxs3("p", { className: "mt-1 text-[11px] text-muted-foreground", children: [
-          formatTurnCost(view.usage.costUsd),
-          " this turn"
-        ] }) : null;
-        if (!proposals && !cost && !confirmedCard) return null;
-        return /* @__PURE__ */ jsxs3(Fragment, { children: [
-          confirmedCard,
-          proposals,
-          cost
-        ] });
-      }
-    }
-  );
+  const extras = (message) => {
+    const proposals = message.id === proposalHostId && view.pendingProposals.length > 0 ? /* @__PURE__ */ jsx4("div", { className: "mt-3 flex flex-col gap-3", children: view.pendingProposals.map((proposal) => /* @__PURE__ */ jsx4(
+      ProposalSlot,
+      {
+        proposal,
+        render: view.renderProposal
+      },
+      proposal.callId
+    )) }) : null;
+    const cost = message.id === metricsHostId && !view.isStreaming && view.usage?.costUsd != null && !view.usage.replayed ? /* @__PURE__ */ jsxs3("p", { className: "mt-1 text-xs text-muted-foreground", children: [
+      formatTurnCost(view.usage.costUsd),
+      " this turn"
+    ] }) : null;
+    if (!proposals && !cost) return null;
+    return /* @__PURE__ */ jsxs3(Fragment, { children: [
+      proposals,
+      cost
+    ] });
+  };
+  return /* @__PURE__ */ jsx4(Fragment, { children: blocks.map(
+    (block, i) => block.kind === "status" ? /* @__PURE__ */ jsx4(
+      StatusRow,
+      {
+        text: block.text,
+        result: confirmedResults.get(block.id),
+        renderConfirmedResult
+      },
+      block.id
+    ) : /* @__PURE__ */ jsx4(
+      ChatMessages,
+      {
+        messages: block.messages,
+        loading: view.isStreaming && i === blocks.length - 1,
+        agentLabel: "Assistant",
+        chrome: "quiet",
+        renderMarkdown: markdown,
+        toolRenderers,
+        renderExtras: extras
+      },
+      i
+    )
+  ) });
 }
 
 // src/assistant/usePanelPrefs.ts
@@ -2338,7 +2444,11 @@ function useStickToBottom(ref, { enabled, contentSignature, streamingId, threadI
 
 // src/assistant/AssistantPanel.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var EMPTY_STATE = "Ask me to create a workflow, check your usage, or manage your API keys.";
+var EMPTY_DOORS = [
+  { label: "Create a workflow", seed: "Create a workflow that " },
+  { label: "Check usage", seed: "What did my workflows cost this week?" },
+  { label: "Manage API keys", seed: "Create an API key named " }
+];
 function defaultFormatMoney(usd) {
   if (usd == null) return "\u2014";
   return new Intl.NumberFormat("en-US", {
@@ -2400,6 +2510,7 @@ function AssistantPanel({
   const models = useAssistantModels();
   const threads = useAssistantThreads(userId);
   const font = useFontScale();
+  const [doorSeed, setDoorSeed] = useState6(null);
   const [view, setView] = useState6("chat");
   const historyButtonRef = useRef6(null);
   const logRef = useRef6(null);
@@ -2447,12 +2558,16 @@ function AssistantPanel({
     state.status,
     state.pendingProposals
   ]);
+  const emptyThread = state.messages.length === 0 && state.status !== "streaming";
   const { onScroll: handleConversationScroll } = useStickToBottom(logRef, {
-    enabled: view === "chat",
+    enabled: view === "chat" && !emptyThread,
     contentSignature,
     streamingId: state.streamingId,
     threadId: state.threadId
   });
+  useLayoutEffect2(() => {
+    if (emptyThread && logRef.current) logRef.current.scrollTop = 0;
+  }, [emptyThread]);
   const effectiveBalance = state.usage?.balanceUsd ?? balanceUsd;
   const errorView = state.error ? presentError(state.error.code, state.error.message) : null;
   const low = isLowBalance(effectiveBalance) && !errorView;
@@ -2509,8 +2624,8 @@ function AssistantPanel({
     /* @__PURE__ */ jsx5("div", { className: "border-border border-b", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-2 px-4 pt-3 pb-2.5", children: [
       /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-col", children: [
         /* @__PURE__ */ jsxs4("div", { className: "flex items-baseline gap-2", children: [
-          /* @__PURE__ */ jsx5("span", { className: "font-medium text-foreground text-sm", children: "Assistant" }),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx5("span", { className: "font-semibold text-[15px] text-foreground", children: "Assistant" }),
+          effectiveBalance != null && /* @__PURE__ */ jsx5(
             "span",
             {
               "aria-label": "Your credit balance",
@@ -2639,7 +2754,18 @@ function AssistantPanel({
               renderMarkdown,
               toolRenderers,
               renderConfirmedResult,
-              emptyState: /* @__PURE__ */ jsx5("p", { className: "px-4 py-8 text-center text-muted-foreground text-sm", children: EMPTY_STATE })
+              emptyState: /* @__PURE__ */ jsx5(
+                ChatEmptyState,
+                {
+                  productName: "Assistant",
+                  headline: "Ask the assistant to do something",
+                  subline: "Create workflows, check usage, or manage API keys \u2014 I'll pause for approval before anything changes.",
+                  doors: EMPTY_DOORS.map((door) => ({
+                    label: door.label,
+                    onSelect: () => setDoorSeed(door.seed)
+                  }))
+                }
+              )
             }
           ) })
         )
@@ -2649,21 +2775,37 @@ function AssistantPanel({
       "div",
       {
         role: "alert",
-        className: "mx-4 mb-2 rounded-lg border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm",
+        className: "mx-4 mb-2 flex items-start gap-2.5 rounded-lg border border-destructive/40 bg-destructive/5 px-3 py-2.5 text-destructive text-sm",
         children: [
-          /* @__PURE__ */ jsx5("p", { className: "text-foreground", children: errorView.message }),
-          errorView.cta && /* @__PURE__ */ jsxs4(
-            "button",
+          /* @__PURE__ */ jsxs4(
+            "svg",
             {
-              type: "button",
-              onClick: () => navigate?.(errorView.cta?.to ?? ""),
-              className: "mt-1 text-primary text-xs",
+              className: "mt-0.5 h-4 w-4 shrink-0",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
               children: [
-                errorView.cta.label,
-                " \u2192"
+                /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "9" }),
+                /* @__PURE__ */ jsx5("path", { d: "M12 8v4m0 4h.01" })
               ]
             }
-          )
+          ),
+          /* @__PURE__ */ jsxs4("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx5("p", { children: errorView.message }),
+            errorView.cta && /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                onClick: () => navigate?.(errorView.cta?.to ?? ""),
+                className: "mt-1.5 rounded border border-destructive/40 bg-card px-2 py-0.5 font-medium text-xs text-destructive transition hover:bg-destructive/10",
+                children: errorView.cta.label
+              }
+            )
+          ] })
         ]
       }
     ),
@@ -2692,7 +2834,7 @@ function AssistantPanel({
         role: "status",
         className: "mx-4 mb-2 flex items-center gap-3 rounded-lg border border-border bg-secondary px-3 py-2 text-sm",
         children: [
-          /* @__PURE__ */ jsx5("p", { className: "min-w-0 flex-1 text-foreground", children: "Paused after a lot of steps." }),
+          /* @__PURE__ */ jsx5("p", { className: "min-w-0 flex-1 text-foreground", children: "Paused at the step limit." }),
           /* @__PURE__ */ jsx5(
             "button",
             {
@@ -2721,9 +2863,12 @@ function AssistantPanel({
           onCancel: chat.stop,
           isStreaming: streaming,
           disabled: chat.restoring || state.status === "awaiting_confirm",
-          placeholder: "Message the assistant\u2026",
-          seed: composerSeed,
-          onSeedApplied: onComposerSeedApplied,
+          placeholder: state.status === "awaiting_confirm" ? "Confirm or cancel the proposal above to continue" : "Message the assistant\u2026",
+          seed: doorSeed ?? composerSeed,
+          onSeedApplied: () => {
+            setDoorSeed(null);
+            onComposerSeedApplied?.();
+          },
           onAttach: composerAttachments?.onAttach,
           onAttachFolder: composerAttachments?.onAttachFolder,
           pendingFiles: composerAttachments?.pendingFiles,
@@ -2934,7 +3079,7 @@ function AssistantDock({
         type: "button",
         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-raised transition-colors hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-ring",
+        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-[var(--shadow-overlay)] transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring",
         children: /* @__PURE__ */ jsx8(MessageSquare, { className: "h-6 w-6" })
       }
     );
@@ -2982,7 +3127,7 @@ function AssistantDock({
         tabIndex: -1,
         onKeyDown: trapTab,
         style: isDesktop ? { width: `${width}px` } : void 0,
-        className: `fixed inset-y-0 right-0 z-50 flex w-full flex-col border-card-edge border-l ${OVERLAY_SHADOW} focus:outline-none`,
+        className: "fixed inset-y-0 right-0 z-50 flex w-full flex-col border-card-edge border-l shadow-[var(--shadow-overlay)] focus:outline-none",
         children: [
           /* @__PURE__ */ jsx8(
             AssistantPanel,