@tangle-network/agent-app 0.7.1 → 0.7.2

package/dist/web-react/index.d.ts

@@ -75,6 +75,21 @@ interface StreamChatOptions {
  */
 declare function streamChatTurn(opts: StreamChatOptions): Promise<ConsumeChatStreamResult>;
 
+/**
+ * Provider brand marks — real logo path data (simple-icons / SVG Logos, both
+ * CC0) inlined so the picker shows actual provider identity instead of
+ * colored-initial monograms. Providers without a usable mark fall back to a
+ * tinted monogram chip. Aliases (z-ai/zai, moonshot/moonshotai, deepseek_ai)
+ * normalize to one entry.
+ */
+
+interface ProviderLogoProps {
+    provider?: string;
+    size?: number;
+}
+/** Real brand mark when we have one; tinted monogram otherwise. */
+declare function ProviderLogo({ provider, size }: ProviderLogoProps): ReactNode;
+
 interface ChatMessageMetrics {
     modelUsed?: string;
     promptTokens?: number;
@@ -187,4 +202,4 @@ interface ProposalApprovalHandlers {
  */
 declare function ChatMessages({ messages, models, renderMarkdown, renderExtras, userLabel, agentLabel, loading, approval, onToolCallClick, }: ChatMessagesProps): react.JSX.Element;
 
-export { type ChatMessageMetrics, ChatMessages, type ChatMessagesProps, type ChatStreamCallbacks, type ChatStreamToolCall, type ChatStreamToolResult, type ChatToolCallInfo, type ChatUiMessage, type ConsumeChatStreamResult, EffortPicker, type EffortPickerProps, ModelPicker, type ModelPickerProps, type ProposalApprovalHandlers, RunDrillIn, type RunDrillInProps, type StreamChatOptions, type ToolRunRecord, type ToolRunStep, consumeChatStream, dispatchChatStreamLine, formatModelCost, formatTokensPerSecond, pendingApprovalOf, streamChatTurn };
+export { type ChatMessageMetrics, ChatMessages, type ChatMessagesProps, type ChatStreamCallbacks, type ChatStreamToolCall, type ChatStreamToolResult, type ChatToolCallInfo, type ChatUiMessage, type ConsumeChatStreamResult, EffortPicker, type EffortPickerProps, ModelPicker, type ModelPickerProps, type ProposalApprovalHandlers, ProviderLogo, type ProviderLogoProps, RunDrillIn, type RunDrillInProps, type StreamChatOptions, type ToolRunRecord, type ToolRunStep, consumeChatStream, dispatchChatStreamLine, formatModelCost, formatTokensPerSecond, pendingApprovalOf, streamChatTurn };

package/dist/web-react/index.js

@@ -1,6 +1,46 @@
 // src/web-react/index.tsx
 import { useEffect, useMemo, useRef, useState } from "react";
 
+// src/web-react/provider-logo.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var LOGOS = {
+  anthropic: { viewBox: "0 0 24 24", fill: "#D97757", paths: ["M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"] },
+  google: { viewBox: "0 0 24 24", fill: "#8E75B2", paths: ["M11.04 19.32Q12 21.51 12 24q0-2.49.93-4.68.96-2.19 2.58-3.81t3.81-2.55Q21.51 12 24 12q-2.49 0-4.68-.93a12.3 12.3 0 0 1-3.81-2.58 12.3 12.3 0 0 1-2.58-3.81Q12 2.49 12 0q0 2.49-.96 4.68-.93 2.19-2.55 3.81a12.3 12.3 0 0 1-3.81 2.58Q2.49 12 0 12q2.49 0 4.68.96 2.19.93 3.81 2.55t2.55 3.81"] },
+  deepseek: { viewBox: "0 0 24 24", fill: "#4D6BFE", paths: ["M23.748 4.651c-.254-.124-.364.113-.512.233-.051.04-.094.09-.137.137-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.155-.708-.311-.955-.65-.172-.24-.219-.509-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.094.172.187.129.323-.082.28-.18.553-.266.833-.055.179-.137.218-.328.14a5.5 5.5 0 0 1-1.737-1.179c-.857-.828-1.631-1.743-2.597-2.46a12 12 0 0 0-.689-.47c-.985-.957.13-1.743.387-1.836.27-.098.094-.433-.778-.428-.872.003-1.67.295-2.687.685a3 3 0 0 1-.465.136 9.6 9.6 0 0 0-2.883-.101c-1.885.21-3.39 1.1-4.497 2.622C.082 8.776-.231 10.854.152 13.02c.403 2.284 1.568 4.175 3.36 5.653 1.857 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.132-.284 4.994-1.86.47.234.962.328 1.78.398.629.058 1.235-.031 1.705-.129.735-.155.684-.836.418-.961-2.155-1.004-1.682-.595-2.112-.926 1.095-1.295 2.768-3.598 3.284-6.733.05-.346.115-.834.108-1.114-.004-.171.035-.238.23-.257a4.2 4.2 0 0 0 1.545-.475c1.397-.763 1.96-2.016 2.093-3.517.02-.23-.004-.467-.247-.588M11.58 18.168c-2.088-1.642-3.101-2.183-3.52-2.16-.39.024-.32.472-.234.763.09.288.207.487.371.74.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.168-1.361-.801-2.5-1.86-3.301-3.306-.775-1.393-1.225-2.888-1.299-4.482-.02-.385.094-.522.477-.592a4.7 4.7 0 0 1 1.53-.038c2.131.311 3.946 1.264 5.467 2.774.868.86 1.525 1.887 2.202 2.89.72 1.066 1.494 2.082 2.48 2.915.348.291.626.513.892.677-.802.09-2.14.109-3.055-.615zm1.001-6.44a.306.306 0 0 1 .415-.287.3.3 0 0 1 .113.074.3.3 0 0 1 .086.214c0 .17-.136.307-.308.307a.303.303 0 0 1-.306-.307m3.11 1.596c-.2.081-.4.151-.591.16a1.25 1.25 0 0 1-.798-.254c-.274-.23-.47-.358-.551-.758a1.7 1.7 0 0 1 .015-.588c.07-.327-.007-.537-.238-.727-.188-.156-.426-.199-.689-.199a.6.6 0 0 1-.254-.078.253.253 0 0 1-.114-.358 1 1 0 0 1 .192-.21c.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.392.451.462.576.685.915.176.264.336.536.446.848.066.194-.02.353-.25.45"] },
+  mistral: { viewBox: "0 0 24 24", fill: "#FA520F", paths: ["M17.143 3.429v3.428h-3.429v3.429h-3.428V6.857H6.857V3.43H3.43v13.714H0v3.428h10.286v-3.428H6.857v-3.429h3.429v3.429h3.429v-3.429h3.428v3.429h-3.428v3.428H24v-3.428h-3.43V3.429z"] },
+  xai: { viewBox: "0 0 24 24", fill: "#000000", paths: ["M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"] },
+  nvidia: { viewBox: "0 0 24 24", fill: "#76B900", paths: ["M8.948 8.798v-1.43a6.7 6.7 0 0 1 .424-.018c3.922-.124 6.493 3.374 6.493 3.374s-2.774 3.851-5.75 3.851c-.398 0-.787-.062-1.158-.185v-4.346c1.528.185 1.837.857 2.747 2.385l2.04-1.714s-1.492-1.952-4-1.952a6.016 6.016 0 0 0-.796.035m0-4.735v2.138l.424-.027c5.45-.185 9.01 4.47 9.01 4.47s-4.08 4.964-8.33 4.964c-.37 0-.733-.035-1.095-.097v1.325c.3.035.61.062.91.062 3.957 0 6.82-2.023 9.593-4.408.459.371 2.34 1.263 2.73 1.652-2.633 2.208-8.772 3.984-12.253 3.984-.335 0-.653-.018-.971-.053v1.864H24V4.063zm0 10.326v1.131c-3.657-.654-4.673-4.46-4.673-4.46s1.758-1.944 4.673-2.262v1.237H8.94c-1.528-.186-2.73 1.245-2.73 1.245s.68 2.412 2.739 3.11M2.456 10.9s2.164-3.197 6.5-3.533V6.201C4.153 6.59 0 10.653 0 10.653s2.35 6.802 8.948 7.42v-1.237c-4.84-.6-6.492-5.936-6.492-5.936z"] },
+  meta: { viewBox: "0 0 24 24", fill: "#0467DF", paths: ["M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z"] },
+  moonshotai: { viewBox: "0 0 24 24", fill: "#16191E", paths: ["m1.053 16.91 9.538 2.55a21 20.981 0 0 0 .06 2.031l5.956 1.592a12 11.99 0 0 1-15.554-6.172m-1.02-5.79 11.352 3.035a21 20.981 0 0 0-.469 2.01l10.817 2.89a12 11.99 0 0 1-1.845 2.004L.658 15.918a12 11.99 0 0 1-.625-4.796m1.593-5.146L13.573 9.17a21 20.981 0 0 0-1.01 1.874l11.297 3.02a21 20.981 0 0 1-.67 2.362l-11.55-3.087L.125 10.26a12 11.99 0 0 1 1.499-4.285ZM6.067 1.58l11.285 3.016a21 20.981 0 0 0-1.688 1.719l7.824 2.091a21 20.981 0 0 1 .513 2.664L2.107 5.218a12 11.99 0 0 1 3.96-3.638M21.68 4.866 7.222 1.003A12 11.99 0 0 1 21.68 4.866"] },
+  openai: { viewBox: "0 0 256 260", fill: "#10A37F", paths: ["M239.184 106.203a64.72 64.72 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.72 64.72 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.67 64.67 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.77 64.77 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483m-97.56 136.338a48.4 48.4 0 0 1-31.105-11.255l1.535-.87l51.67-29.825a8.6 8.6 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601M37.158 197.93a48.35 48.35 0 0 1-5.781-32.589l1.534.921l51.722 29.826a8.34 8.34 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803M23.549 85.38a48.5 48.5 0 0 1 25.58-21.333v61.39a8.29 8.29 0 0 0 4.195 7.316l62.874 36.272l-21.845 12.636a.82.82 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405zm179.466 41.695l-63.08-36.63L161.73 77.86a.82.82 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.54 8.54 0 0 0-4.4-7.213m21.742-32.69l-1.535-.922l-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.72.72 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391zM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87l-51.67 29.825a8.6 8.6 0 0 0-4.246 7.367zm11.868-25.58L128.067 97.3l28.188 16.218v32.434l-28.086 16.218l-28.188-16.218z"] }
+};
+var ALIASES = {
+  moonshot: "moonshotai",
+  deepseek_ai: "deepseek",
+  "x-ai": "xai",
+  "meta-llama": "meta"
+};
+var MONOGRAM = {
+  cohere: { bg: "#fae8ff", fg: "#c026d3" },
+  groq: { bg: "#fce7f3", fg: "#db2777" },
+  cerebras: { bg: "#ccfbf1", fg: "#0d9488" },
+  zai: { bg: "#ede9fe", fg: "#7c3aed" },
+  "z-ai": { bg: "#ede9fe", fg: "#7c3aed" },
+  tuner: { bg: "#dbeafe", fg: "#2563eb" }
+};
+function ProviderLogo({ provider, size = 16 }) {
+  const key = ALIASES[provider ?? ""] ?? provider ?? "";
+  const logo = LOGOS[key];
+  if (logo) {
+    return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: logo.viewBox, role: "img", "aria-label": key, children: logo.paths.map((d, i) => /* @__PURE__ */ jsx("path", { d, fill: logo.fill }, i)) });
+  }
+  const mono = MONOGRAM[key] ?? { bg: "#f3f4f6", fg: "#6b7280" };
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 16 16", role: "img", "aria-label": key || "model", children: [
+    /* @__PURE__ */ jsx("rect", { width: "16", height: "16", rx: "4", fill: mono.bg }),
+    /* @__PURE__ */ jsx("text", { x: "8", y: "11.6", textAnchor: "middle", fill: mono.fg, fontSize: "9", fontWeight: "700", fontFamily: "system-ui, sans-serif", children: (key || "?").charAt(0).toUpperCase() })
+  ] });
+}
+
 // src/web-react/chat-stream.ts
 function dispatchChatStreamLine(line, cb) {
   let receivedContent = false;
@@ -127,18 +167,18 @@ async function streamChatTurn(opts) {
 }
 
 // src/web-react/index.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ChevronDown({ className }) {
-  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
+  return /* @__PURE__ */ jsx2("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" }) });
 }
 function SearchGlyph({ className }) {
-  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
-    /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+  return /* @__PURE__ */ jsxs2("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ jsx2("path", { d: "m21 21-4.3-4.3" })
   ] });
 }
 function SparkleGlyph({ className }) {
-  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M12 3v3m0 12v3M3 12h3m12 0h3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1m0-12.8-2.1 2.1M7.7 16.3l-2.1 2.1" }) });
+  return /* @__PURE__ */ jsx2("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx2("path", { d: "M12 3v3m0 12v3M3 12h3m12 0h3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1m0-12.8-2.1 2.1M7.7 16.3l-2.1 2.1" }) });
 }
 function useClickOutside(onOutside) {
   const ref = useRef(null);
@@ -177,7 +217,7 @@ function formatContext(len) {
   return `${len} ctx`;
 }
 function SectionHeader({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "px-3 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/70", children });
+  return /* @__PURE__ */ jsx2("div", { className: "px-3 pb-1 pt-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground/70", children });
 }
 function ModelRow({
   model,
@@ -187,19 +227,19 @@ function ModelRow({
 }) {
   const price = formatPrice(model.pricing?.prompt);
   const ctx = formatContext(model.contextLength);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "button",
     {
       type: "button",
       onClick: onSelect,
-      className: `flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition ${selected ? "bg-primary/10 font-medium" : "hover:bg-accent/30"}`,
+      className: `flex w-full items-center gap-2.5 rounded-md px-3 py-2.5 text-left text-sm transition ${selected ? "bg-primary/10 font-medium" : "hover:bg-accent/30"}`,
       children: [
-        renderProviderBadge ? renderProviderBadge(model.provider) : /* @__PURE__ */ jsx(SparkleGlyph, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-        /* @__PURE__ */ jsx("span", { className: "truncate", children: model.name }),
-        !model.supportsTools && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded bg-muted/60 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground", children: "no tools" }),
-        /* @__PURE__ */ jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-2 text-[11px] text-muted-foreground", children: [
-          ctx && /* @__PURE__ */ jsx("span", { children: ctx }),
-          price && /* @__PURE__ */ jsx("span", { children: price })
+        renderProviderBadge ? renderProviderBadge(model.provider) : /* @__PURE__ */ jsx2(ProviderLogo, { provider: model.provider, size: 16 }),
+        /* @__PURE__ */ jsx2("span", { className: "truncate", children: model.name }),
+        !model.supportsTools && /* @__PURE__ */ jsx2("span", { className: "shrink-0 rounded bg-muted/60 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground", children: "no tools" }),
+        /* @__PURE__ */ jsxs2("span", { className: "ml-auto flex shrink-0 items-center gap-2 text-xs text-muted-foreground", children: [
+          ctx && /* @__PURE__ */ jsx2("span", { children: ctx }),
+          price && /* @__PURE__ */ jsx2("span", { children: price })
         ] })
       ]
     }
@@ -237,24 +277,24 @@ function ModelPicker({ value, onChange, models, loading, renderProviderBadge, re
     setOpen(false);
     setQuery("");
   };
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative inline-flex", children: [
-    /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2("div", { ref: containerRef, className: "relative inline-flex", children: [
+    /* @__PURE__ */ jsxs2(
       "button",
       {
         type: "button",
         onClick: () => setOpen((v) => !v),
         className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground transition hover:bg-accent/30",
         children: [
-          selected && renderProviderBadge ? renderProviderBadge(selected.provider) : /* @__PURE__ */ jsx(SparkleGlyph, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-          /* @__PURE__ */ jsx("span", { className: "max-w-[160px] truncate", children: selected?.name ?? value }),
-          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
+          selected ? renderProviderBadge ? renderProviderBadge(selected.provider) : /* @__PURE__ */ jsx2(ProviderLogo, { provider: selected.provider, size: 16 }) : /* @__PURE__ */ jsx2(SparkleGlyph, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx2("span", { className: "max-w-[160px] truncate", children: selected?.name ?? value }),
+          /* @__PURE__ */ jsx2(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full left-0 z-50 mb-2 w-[420px] overflow-hidden rounded-xl border border-border bg-card shadow-lg", children: [
-      /* @__PURE__ */ jsx("div", { className: "border-b border-border px-3 py-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2", children: [
-        /* @__PURE__ */ jsx(SearchGlyph, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-        /* @__PURE__ */ jsx(
+    open && /* @__PURE__ */ jsxs2("div", { className: "absolute bottom-full left-0 z-50 mb-2 w-[420px] overflow-hidden rounded-xl border border-border bg-card shadow-lg", children: [
+      /* @__PURE__ */ jsx2("div", { className: "border-b border-border px-3 py-2", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2", children: [
+        /* @__PURE__ */ jsx2(SearchGlyph, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+        /* @__PURE__ */ jsx2(
           "input",
           {
             ref: inputRef,
@@ -266,20 +306,20 @@ function ModelPicker({ value, onChange, models, loading, renderProviderBadge, re
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsxs("div", { className: "max-h-[400px] overflow-y-auto p-1 pb-2", children: [
-        loading && /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "Loading models..." }),
-        !loading && filtered && /* @__PURE__ */ jsxs(Fragment, { children: [
-          filtered.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "No models match your search" }),
-          filtered.map((m) => /* @__PURE__ */ jsx(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
+      /* @__PURE__ */ jsxs2("div", { className: "max-h-[400px] overflow-y-auto p-1 pb-2", children: [
+        loading && /* @__PURE__ */ jsx2("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "Loading models..." }),
+        !loading && filtered && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          filtered.length === 0 && /* @__PURE__ */ jsx2("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "No models match your search" }),
+          filtered.map((m) => /* @__PURE__ */ jsx2(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
         ] }),
-        !loading && !filtered && /* @__PURE__ */ jsxs(Fragment, { children: [
-          sections.recommended.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(SectionHeader, { children: recommendedLabel }),
-            sections.recommended.map((m) => /* @__PURE__ */ jsx(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
+        !loading && !filtered && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          sections.recommended.length > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2(SectionHeader, { children: recommendedLabel }),
+            sections.recommended.map((m) => /* @__PURE__ */ jsx2(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
           ] }),
-          sections.byProvider.map((g) => /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx(SectionHeader, { children: g.provider }),
-            g.items.map((m) => /* @__PURE__ */ jsx(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
+          sections.byProvider.map((g) => /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2(SectionHeader, { children: g.provider }),
+            g.items.map((m) => /* @__PURE__ */ jsx2(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
           ] }, g.provider))
         ] })
       ] })
@@ -296,8 +336,8 @@ function EffortPicker({ value, onChange }) {
   const [open, setOpen] = useState(false);
   const containerRef = useClickOutside(() => setOpen(false));
   const selected = EFFORT_LEVELS.find((l) => l.id === value) ?? EFFORT_LEVELS[2];
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative inline-flex", children: [
-    /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2("div", { ref: containerRef, className: "relative inline-flex", children: [
+    /* @__PURE__ */ jsxs2(
       "button",
       {
         type: "button",
@@ -305,13 +345,13 @@ function EffortPicker({ value, onChange }) {
         title: "Reasoning effort",
         className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground transition hover:bg-accent/30",
         children: [
-          /* @__PURE__ */ jsx(SparkleGlyph, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-          /* @__PURE__ */ jsx("span", { children: selected.label }),
-          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
+          /* @__PURE__ */ jsx2(SparkleGlyph, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx2("span", { children: selected.label }),
+          /* @__PURE__ */ jsx2(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx("div", { className: "absolute bottom-full left-0 z-50 mb-2 w-36 overflow-hidden rounded-xl border border-border bg-card p-1 shadow-lg", children: EFFORT_LEVELS.map((l) => /* @__PURE__ */ jsx(
+    open && /* @__PURE__ */ jsx2("div", { className: "absolute bottom-full left-0 z-50 mb-2 w-36 overflow-hidden rounded-xl border border-border bg-card p-1 shadow-lg", children: EFFORT_LEVELS.map((l) => /* @__PURE__ */ jsx2(
       "button",
       {
         type: "button",
@@ -327,41 +367,41 @@ function EffortPicker({ value, onChange }) {
   ] });
 }
 function RunDrillIn({ run, onClose }) {
-  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-y-0 right-0 z-50 flex w-[480px] max-w-full flex-col border-l border-border bg-card shadow-xl", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border px-4 py-3", children: [
-      /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("div", { className: "fixed inset-y-0 right-0 z-50 flex w-[480px] max-w-full flex-col border-l border-border bg-card shadow-xl", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 border-b border-border px-4 py-3", children: [
+      /* @__PURE__ */ jsx2(
         "span",
         {
           className: `h-2 w-2 shrink-0 rounded-full ${run.status === "running" ? "bg-yellow-500" : run.status === "error" ? "bg-red-500" : "bg-green-500"}`
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold", children: run.title }),
-        /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-[11px] text-muted-foreground", children: run.toolName })
+      /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx2("p", { className: "truncate text-sm font-semibold", children: run.title }),
+        /* @__PURE__ */ jsx2("p", { className: "truncate font-mono text-[11px] text-muted-foreground", children: run.toolName })
       ] }),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx2(
         "button",
         {
           type: "button",
           onClick: onClose,
           "aria-label": "Close",
           className: "rounded-md p-1.5 text-muted-foreground transition hover:bg-accent/30 hover:text-foreground",
-          children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+          children: /* @__PURE__ */ jsx2("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx2("path", { d: "M18 6 6 18M6 6l12 12" }) })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-3 overflow-y-auto p-4", children: [
-      run.steps.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No steps recorded yet." }),
-      run.steps.map((step, i) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border/60 bg-background", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 border-b border-border/40 px-3 py-1.5", children: [
-          /* @__PURE__ */ jsx("span", { className: `font-mono text-[11px] ${step.status === "error" ? "text-red-600" : "text-muted-foreground"}`, children: step.status === "error" ? "\u2717" : "$" }),
-          /* @__PURE__ */ jsx("code", { className: "min-w-0 flex-1 truncate font-mono text-xs", children: step.label }),
-          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground/60", children: new Date(step.at).toLocaleTimeString() })
+    /* @__PURE__ */ jsxs2("div", { className: "flex-1 space-y-3 overflow-y-auto p-4", children: [
+      run.steps.length === 0 && /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground", children: "No steps recorded yet." }),
+      run.steps.map((step, i) => /* @__PURE__ */ jsxs2("div", { className: "rounded-lg border border-border/60 bg-background", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-2 border-b border-border/40 px-3 py-1.5", children: [
+          /* @__PURE__ */ jsx2("span", { className: `font-mono text-[11px] ${step.status === "error" ? "text-red-600" : "text-muted-foreground"}`, children: step.status === "error" ? "\u2717" : "$" }),
+          /* @__PURE__ */ jsx2("code", { className: "min-w-0 flex-1 truncate font-mono text-xs", children: step.label }),
+          /* @__PURE__ */ jsx2("span", { className: "shrink-0 text-[10px] text-muted-foreground/60", children: new Date(step.at).toLocaleTimeString() })
         ] }),
-        step.detail && /* @__PURE__ */ jsx("pre", { className: "max-h-48 overflow-auto whitespace-pre-wrap px-3 py-2 font-mono text-[11px] leading-relaxed text-muted-foreground", children: step.detail })
+        step.detail && /* @__PURE__ */ jsx2("pre", { className: "max-h-48 overflow-auto whitespace-pre-wrap px-3 py-2 font-mono text-[11px] leading-relaxed text-muted-foreground", children: step.detail })
       ] }, i))
     ] }),
-    /* @__PURE__ */ jsx("p", { className: "border-t border-border px-4 py-2 text-[11px] text-muted-foreground/60", children: "Readonly drill-in. Follow up in the main chat." })
+    /* @__PURE__ */ jsx2("p", { className: "border-t border-border px-4 py-2 text-[11px] text-muted-foreground/60", children: "Readonly drill-in. Follow up in the main chat." })
   ] });
 }
 function pendingApprovalOf(call) {
@@ -374,19 +414,19 @@ function ToolChips({
   approval,
   onClick
 }) {
-  return /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-col gap-1", children: toolCalls.map((tc) => {
+  return /* @__PURE__ */ jsx2("div", { className: "mt-2 flex flex-col gap-1", children: toolCalls.map((tc) => {
     const pending = tc.status === "done" ? pendingApprovalOf(tc) : null;
     if (pending) {
-      return /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsxs2(
         "div",
         {
           className: "inline-flex w-fit items-center gap-2 rounded-md bg-amber-500/10 px-2.5 py-1 text-xs text-amber-700",
           children: [
-            /* @__PURE__ */ jsx("span", { className: "font-mono opacity-70", children: "\u23F8" }),
-            /* @__PURE__ */ jsx("span", { className: "font-medium", children: tc.name }),
-            /* @__PURE__ */ jsx("span", { className: "opacity-60", children: "awaiting approval" }),
-            approval && /* @__PURE__ */ jsxs("span", { className: "ml-1 inline-flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2("span", { className: "font-mono opacity-70", children: "\u23F8" }),
+            /* @__PURE__ */ jsx2("span", { className: "font-medium", children: tc.name }),
+            /* @__PURE__ */ jsx2("span", { className: "opacity-60", children: "awaiting approval" }),
+            approval && /* @__PURE__ */ jsxs2("span", { className: "ml-1 inline-flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx2(
                 "button",
                 {
                   type: "button",
@@ -395,7 +435,7 @@ function ToolChips({
                   children: "Approve"
                 }
               ),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2(
                 "button",
                 {
                   type: "button",
@@ -411,15 +451,15 @@ function ToolChips({
       );
     }
     const Tag = onClick ? "button" : "div";
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs2(
       Tag,
       {
         ...onClick ? { type: "button", onClick: () => onClick(tc) } : {},
         className: `inline-flex w-fit items-center gap-2 rounded-md px-2.5 py-1 text-xs ${tc.status === "running" ? "bg-yellow-500/10 text-yellow-700" : tc.status === "error" ? "bg-red-500/10 text-red-700" : "bg-green-500/10 text-green-700"} ${onClick ? "cursor-pointer transition hover:ring-1 hover:ring-border" : ""}`,
         children: [
-          /* @__PURE__ */ jsx("span", { className: "font-mono opacity-70", children: tc.status === "running" ? "\u26A1" : tc.status === "error" ? "\u2717" : "\u2713" }),
-          /* @__PURE__ */ jsx("span", { className: "font-medium", children: tc.name }),
-          /* @__PURE__ */ jsx("span", { className: "opacity-60", children: tc.status === "running" ? "running\u2026" : tc.status === "error" ? "failed" : "done" })
+          /* @__PURE__ */ jsx2("span", { className: "font-mono opacity-70", children: tc.status === "running" ? "\u26A1" : tc.status === "error" ? "\u2717" : "\u2713" }),
+          /* @__PURE__ */ jsx2("span", { className: "font-medium", children: tc.name }),
+          /* @__PURE__ */ jsx2("span", { className: "opacity-60", children: tc.status === "running" ? "running\u2026" : tc.status === "error" ? "failed" : "done" })
         ]
       },
       tc.id
@@ -437,36 +477,36 @@ function ChatMessages({
   approval,
   onToolCallClick
 }) {
-  const renderBody = renderMarkdown ?? ((content) => /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap", children: content }));
+  const renderBody = renderMarkdown ?? ((content) => /* @__PURE__ */ jsx2("p", { className: "whitespace-pre-wrap", children: content }));
   const lastIsUser = messages[messages.length - 1]?.role === "user";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
     messages.map(
-      (msg) => msg.role === "user" ? /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: /* @__PURE__ */ jsxs("div", { className: "ml-auto w-fit max-w-[85%]", children: [
-        /* @__PURE__ */ jsx("p", { className: "mb-1 text-right text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/60", children: userLabel }),
-        /* @__PURE__ */ jsx("div", { className: "rounded-2xl rounded-tr-md bg-primary/10 px-4 py-2.5 text-base leading-relaxed", children: /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap", children: msg.content }) })
-      ] }) }, msg.id) : /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-baseline gap-2 text-[11px] tracking-wide text-muted-foreground/60", children: [
-          /* @__PURE__ */ jsx("span", { className: "font-semibold uppercase", children: agentLabel }),
-          msg.modelUsed && /* @__PURE__ */ jsx("span", { className: "font-mono normal-case", children: msg.modelUsed }),
-          formatTokensPerSecond(msg) && /* @__PURE__ */ jsx("span", { children: formatTokensPerSecond(msg) }),
-          formatModelCost(msg, models) && /* @__PURE__ */ jsx("span", { children: formatModelCost(msg, models) })
+      (msg) => msg.role === "user" ? /* @__PURE__ */ jsx2("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: /* @__PURE__ */ jsxs2("div", { className: "ml-auto w-fit max-w-[85%]", children: [
+        /* @__PURE__ */ jsx2("p", { className: "mb-1 text-right text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/60", children: userLabel }),
+        /* @__PURE__ */ jsx2("div", { className: "rounded-2xl rounded-tr-md bg-primary/10 px-4 py-2.5 text-base leading-relaxed", children: /* @__PURE__ */ jsx2("p", { className: "whitespace-pre-wrap", children: msg.content }) })
+      ] }) }, msg.id) : /* @__PURE__ */ jsxs2("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "mb-1 flex items-baseline gap-2 text-[11px] tracking-wide text-muted-foreground/60", children: [
+          /* @__PURE__ */ jsx2("span", { className: "font-semibold uppercase", children: agentLabel }),
+          msg.modelUsed && /* @__PURE__ */ jsx2("span", { className: "font-mono normal-case", children: msg.modelUsed }),
+          formatTokensPerSecond(msg) && /* @__PURE__ */ jsx2("span", { children: formatTokensPerSecond(msg) }),
+          formatModelCost(msg, models) && /* @__PURE__ */ jsx2("span", { children: formatModelCost(msg, models) })
         ] }),
-        msg.reasoning && /* @__PURE__ */ jsxs(
+        msg.reasoning && /* @__PURE__ */ jsxs2(
           "details",
           {
             className: "mb-2 rounded-md border border-border/40 bg-muted/30 px-3 py-2",
             open: !msg.content,
             children: [
-              /* @__PURE__ */ jsxs("summary", { className: "cursor-pointer select-none text-xs font-medium text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs2("summary", { className: "cursor-pointer select-none text-xs font-medium text-muted-foreground", children: [
                 msg.content ? "Thinking\u2026" : "Thinking",
-                !msg.content && /* @__PURE__ */ jsx("span", { className: "ml-1 inline-block animate-pulse", children: "\u25CF" })
+                !msg.content && /* @__PURE__ */ jsx2("span", { className: "ml-1 inline-block animate-pulse", children: "\u25CF" })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "mt-2 max-h-48 overflow-y-auto whitespace-pre-wrap text-sm text-muted-foreground/80", children: msg.reasoning })
+              /* @__PURE__ */ jsx2("div", { className: "mt-2 max-h-48 overflow-y-auto whitespace-pre-wrap text-sm text-muted-foreground/80", children: msg.reasoning })
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "text-base leading-[1.75]", children: renderBody(msg.content) }),
-        msg.toolCalls && msg.toolCalls.length > 0 && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2("div", { className: "text-base leading-[1.75]", children: renderBody(msg.content) }),
+        msg.toolCalls && msg.toolCalls.length > 0 && /* @__PURE__ */ jsx2(
           ToolChips,
           {
             toolCalls: msg.toolCalls,
@@ -477,10 +517,10 @@ function ChatMessages({
         renderExtras?.(msg)
       ] }, msg.id)
     ),
-    loading && lastIsUser && /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/60", children: agentLabel }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-base text-muted-foreground", children: [
-        /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", strokeLinecap: "round" }) }),
+    loading && lastIsUser && /* @__PURE__ */ jsxs2("div", { className: "mx-auto w-full max-w-3xl px-6 py-3", children: [
+      /* @__PURE__ */ jsx2("p", { className: "mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/60", children: agentLabel }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-base text-muted-foreground", children: [
+        /* @__PURE__ */ jsx2("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: /* @__PURE__ */ jsx2("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", strokeLinecap: "round" }) }),
         "Thinking..."
       ] })
     ] })
@@ -490,6 +530,7 @@ export {
   ChatMessages,
   EffortPicker,
   ModelPicker,
+  ProviderLogo,
   RunDrillIn,
   consumeChatStream,
   dispatchChatStreamLine,

package/dist/web-react/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/web-react/index.tsx","../../src/web-react/chat-stream.ts"],"sourcesContent":["/**\n * `@tangle-network/agent-app/web-react` — the shared chat-shell components\n * every agent app's web UI hand-rolls: a model picker over the runtime's\n * model catalogue, a reasoning-effort selector, and a message thread with\n * User/Agent identity, per-message model + cost + tokens/sec metrics, tool\n * chips, and a collapsible thinking section.\n *\n * Works for BOTH chat shapes: router-backed copilots (LoopEvents from\n * `runtime/openai-stream`) and sandbox-backed chats — the thread renders\n * `ChatUiMessage`s; how they're produced is the app's business.\n *\n * Styling contract: Tailwind classes against the shared design tokens\n * (`bg-card`, `border-border`, `text-muted-foreground`, `bg-primary`, …) that\n * Tangle app shells define. No icon library — the few glyphs are inline SVGs.\n * Markdown and provider logos are injected (`renderMarkdown`,\n * `renderProviderBadge`) so this package stays dependency-free beyond React.\n */\n\nimport { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'\n\nexport * from './chat-stream'\nimport type { CatalogModel } from '../runtime/model-catalog'\n\n// ── shared glyphs (no icon-library dependency) ────────────────────────────\n\nfunction ChevronDown({ className }: { className?: string }) {\n  return (\n    <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  )\n}\n\nfunction SearchGlyph({ className }: { className?: string }) {\n  return (\n    <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <circle cx=\"11\" cy=\"11\" r=\"8\" />\n      <path d=\"m21 21-4.3-4.3\" />\n    </svg>\n  )\n}\n\nfunction SparkleGlyph({ className }: { className?: string }) {\n  return (\n    <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <path d=\"M12 3v3m0 12v3M3 12h3m12 0h3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1m0-12.8-2.1 2.1M7.7 16.3l-2.1 2.1\" />\n    </svg>\n  )\n}\n\n/** Close an absolutely-positioned popover on outside mousedown. */\nfunction useClickOutside(onOutside: () => void) {\n  const ref = useRef<HTMLDivElement>(null)\n  useEffect(() => {\n    function handler(e: MouseEvent) {\n      if (ref.current && !ref.current.contains(e.target as Node)) onOutside()\n    }\n    document.addEventListener('mousedown', handler)\n    return () => document.removeEventListener('mousedown', handler)\n  })\n  return ref\n}\n\n// ── metrics helpers ───────────────────────────────────────────────────────\n\nexport interface ChatMessageMetrics {\n  modelUsed?: string\n  promptTokens?: number\n  completionTokens?: number\n  durationMs?: number\n}\n\n/** \"$0.0042\" from token counts × catalogue per-token pricing; null when unknown. */\nexport function formatModelCost(msg: ChatMessageMetrics, models: CatalogModel[]): string | null {\n  if (msg.promptTokens == null && msg.completionTokens == null) return null\n  const pricing = models.find((m) => m.id === msg.modelUsed)?.pricing\n  if (!pricing) return null\n  const cost =\n    (msg.promptTokens ?? 0) * Number(pricing.prompt ?? 0) +\n    (msg.completionTokens ?? 0) * Number(pricing.completion ?? 0)\n  if (!isFinite(cost) || cost <= 0) return null\n  return cost < 0.01 ? `$${cost.toFixed(4)}` : `$${cost.toFixed(2)}`\n}\n\n/** \"38 tok/s\" from completion tokens over first-token→end duration; null when unknown. */\nexport function formatTokensPerSecond(msg: ChatMessageMetrics): string | null {\n  if (msg.completionTokens == null || !msg.durationMs) return null\n  return `${Math.round(msg.completionTokens / (msg.durationMs / 1000))} tok/s`\n}\n\n// ── ModelPicker ───────────────────────────────────────────────────────────\n\nexport interface ModelPickerProps {\n  value: string\n  onChange: (id: string) => void\n  /** Catalogue models — from `GET`ing the app's catalogue route (see\n   *  `runtime/model-catalog`), plus any product-specific entries appended. */\n  models: CatalogModel[]\n  loading?: boolean\n  /** Render a provider logo/badge; default is a generic sparkle. */\n  renderProviderBadge?: (provider: string) => ReactNode\n  /** Section label for `featured` models. */\n  recommendedLabel?: string\n}\n\nfunction formatPrice(p?: string): string | undefined {\n  if (!p) return undefined\n  const n = Number(p)\n  if (isNaN(n) || n === 0) return undefined\n  const perM = n * 1_000_000\n  return perM >= 1 ? `$${perM.toFixed(0)}/M` : `$${perM.toFixed(2)}/M`\n}\n\nfunction formatContext(len?: number): string | undefined {\n  if (!len) return undefined\n  if (len >= 1_000_000) return `${(len / 1_000_000).toFixed(1)}M ctx`\n  if (len >= 1_000) return `${Math.round(len / 1_000)}K ctx`\n  return `${len} ctx`\n}\n\nfunction SectionHeader({ children }: { children: ReactNode }) {\n  return (\n    <div className=\"px-3 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/70\">\n      {children}\n    </div>\n  )\n}\n\nfunction ModelRow({\n  model,\n  selected,\n  onSelect,\n  renderProviderBadge,\n}: {\n  model: CatalogModel\n  selected: boolean\n  onSelect: () => void\n  renderProviderBadge?: (provider: string) => ReactNode\n}) {\n  const price = formatPrice(model.pricing?.prompt)\n  const ctx = formatContext(model.contextLength)\n  return (\n    <button\n      type=\"button\"\n      onClick={onSelect}\n      className={`flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition ${\n        selected ? 'bg-primary/10 font-medium' : 'hover:bg-accent/30'\n      }`}\n    >\n      {renderProviderBadge ? renderProviderBadge(model.provider) : <SparkleGlyph className=\"h-3.5 w-3.5 text-muted-foreground\" />}\n      <span className=\"truncate\">{model.name}</span>\n      {!model.supportsTools && (\n        <span className=\"shrink-0 rounded bg-muted/60 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground\">\n          no tools\n        </span>\n      )}\n      <span className=\"ml-auto flex shrink-0 items-center gap-2 text-[11px] text-muted-foreground\">\n        {ctx && <span>{ctx}</span>}\n        {price && <span>{price}</span>}\n      </span>\n    </button>\n  )\n}\n\n/**\n * Searchable model picker pill + popover: a featured/recommended section\n * first, then per-provider groups in catalogue order (the server already\n * sorts providers by tier).\n */\nexport function ModelPicker({ value, onChange, models, loading, renderProviderBadge, recommendedLabel = 'Recommended' }: ModelPickerProps) {\n  const [open, setOpen] = useState(false)\n  const [query, setQuery] = useState('')\n  const containerRef = useClickOutside(() => setOpen(false))\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  useEffect(() => {\n    if (open) inputRef.current?.focus()\n  }, [open])\n\n  const selected = models.find((m) => m.id === value)\n\n  const filtered = useMemo(() => {\n    const q = query.trim().toLowerCase()\n    if (!q) return null\n    return models.filter(\n      (m) =>\n        m.id.toLowerCase().includes(q) ||\n        m.name.toLowerCase().includes(q) ||\n        (m.description?.toLowerCase() ?? '').includes(q) ||\n        m.provider.toLowerCase().includes(q),\n    )\n  }, [models, query])\n\n  const sections = useMemo(() => {\n    const recommended = models.filter((m) => m.featured)\n    const byProvider: Array<{ provider: string; items: CatalogModel[] }> = []\n    for (const m of models) {\n      if (m.featured) continue\n      const last = byProvider[byProvider.length - 1]\n      if (last && last.provider === m.provider) last.items.push(m)\n      else byProvider.push({ provider: m.provider, items: [m] })\n    }\n    return { recommended, byProvider }\n  }, [models])\n\n  const select = (id: string) => {\n    onChange(id)\n    setOpen(false)\n    setQuery('')\n  }\n\n  return (\n    <div ref={containerRef} className=\"relative inline-flex\">\n      <button\n        type=\"button\"\n        onClick={() => setOpen((v) => !v)}\n        className=\"inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground transition hover:bg-accent/30\"\n      >\n        {selected && renderProviderBadge ? renderProviderBadge(selected.provider) : <SparkleGlyph className=\"h-3.5 w-3.5 text-muted-foreground\" />}\n        <span className=\"max-w-[160px] truncate\">{selected?.name ?? value}</span>\n        <ChevronDown className=\"h-3.5 w-3.5 text-muted-foreground\" />\n      </button>\n\n      {open && (\n        <div className=\"absolute bottom-full left-0 z-50 mb-2 w-[420px] overflow-hidden rounded-xl border border-border bg-card shadow-lg\">\n          <div className=\"border-b border-border px-3 py-2\">\n            <div className=\"flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2\">\n              <SearchGlyph className=\"h-3.5 w-3.5 text-muted-foreground\" />\n              <input\n                ref={inputRef}\n                type=\"text\"\n                value={query}\n                onChange={(e) => setQuery(e.target.value)}\n                placeholder=\"Search models...\"\n                className=\"flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground\"\n              />\n            </div>\n          </div>\n          <div className=\"max-h-[400px] overflow-y-auto p-1 pb-2\">\n            {loading && <div className=\"px-3 py-4 text-center text-sm text-muted-foreground\">Loading models...</div>}\n            {!loading && filtered && (\n              <>\n                {filtered.length === 0 && (\n                  <div className=\"px-3 py-4 text-center text-sm text-muted-foreground\">No models match your search</div>\n                )}\n                {filtered.map((m) => (\n                  <ModelRow key={m.id} model={m} selected={m.id === value} onSelect={() => select(m.id)} renderProviderBadge={renderProviderBadge} />\n                ))}\n              </>\n            )}\n            {!loading && !filtered && (\n              <>\n                {sections.recommended.length > 0 && (\n                  <>\n                    <SectionHeader>{recommendedLabel}</SectionHeader>\n                    {sections.recommended.map((m) => (\n                      <ModelRow key={m.id} model={m} selected={m.id === value} onSelect={() => select(m.id)} renderProviderBadge={renderProviderBadge} />\n                    ))}\n                  </>\n                )}\n                {sections.byProvider.map((g) => (\n                  <div key={g.provider}>\n                    <SectionHeader>{g.provider}</SectionHeader>\n                    {g.items.map((m) => (\n                      <ModelRow key={m.id} model={m} selected={m.id === value} onSelect={() => select(m.id)} renderProviderBadge={renderProviderBadge} />\n                    ))}\n                  </div>\n                ))}\n              </>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\n// ── EffortPicker ──────────────────────────────────────────────────────────\n\nconst EFFORT_LEVELS = [\n  { id: 'off', label: 'Off' },\n  { id: 'low', label: 'Low' },\n  { id: 'medium', label: 'Medium' },\n  { id: 'high', label: 'High' },\n] as const\n\nexport interface EffortPickerProps {\n  value: string\n  onChange: (id: string) => void\n}\n\n/** Reasoning-effort selector pill, styled to match {@link ModelPicker}. Show\n *  it only when the selected model `supportsReasoning`. */\nexport function EffortPicker({ value, onChange }: EffortPickerProps) {\n  const [open, setOpen] = useState(false)\n  const containerRef = useClickOutside(() => setOpen(false))\n  const selected = EFFORT_LEVELS.find((l) => l.id === value) ?? EFFORT_LEVELS[2]\n\n  return (\n    <div ref={containerRef} className=\"relative inline-flex\">\n      <button\n        type=\"button\"\n        onClick={() => setOpen((v) => !v)}\n        title=\"Reasoning effort\"\n        className=\"inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground transition hover:bg-accent/30\"\n      >\n        <SparkleGlyph className=\"h-3.5 w-3.5 text-muted-foreground\" />\n        <span>{selected.label}</span>\n        <ChevronDown className=\"h-3.5 w-3.5 text-muted-foreground\" />\n      </button>\n      {open && (\n        <div className=\"absolute bottom-full left-0 z-50 mb-2 w-36 overflow-hidden rounded-xl border border-border bg-card p-1 shadow-lg\">\n          {EFFORT_LEVELS.map((l) => (\n            <button\n              key={l.id}\n              type=\"button\"\n              onClick={() => {\n                onChange(l.id)\n                setOpen(false)\n              }}\n              className={`flex w-full items-center rounded-md px-3 py-2 text-left text-sm transition ${\n                l.id === value ? 'bg-primary/10 font-medium' : 'hover:bg-accent/30'\n              }`}\n            >\n              {l.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\n// ── Tool run drill-in (retained runs) ─────────────────────────────────────\n\n/** One step of a retained tool run (e.g. a sandbox command + its output). */\nexport interface ToolRunStep {\n  at: string\n  label: string\n  detail?: string\n  status?: 'ok' | 'error'\n}\n\n/** A retained tool run keyed by the parent message's toolCallId. The product\n *  persists these server-side (fail-closed: only ids its own loop created)\n *  and serves them to the drill-in panel. */\nexport interface ToolRunRecord {\n  toolCallId: string\n  toolName: string\n  title: string\n  status: 'running' | 'complete' | 'error'\n  steps: ToolRunStep[]\n}\n\nexport interface RunDrillInProps {\n  run: ToolRunRecord\n  onClose: () => void\n}\n\n/**\n * Readonly side panel showing a retained tool run's transcript — the\n * \"drill into what the sandbox actually did\" view. Follow-ups happen in the\n * main chat, never here.\n */\nexport function RunDrillIn({ run, onClose }: RunDrillInProps) {\n  return (\n    <div className=\"fixed inset-y-0 right-0 z-50 flex w-[480px] max-w-full flex-col border-l border-border bg-card shadow-xl\">\n      <div className=\"flex items-center gap-2 border-b border-border px-4 py-3\">\n        <span\n          className={`h-2 w-2 shrink-0 rounded-full ${\n            run.status === 'running' ? 'bg-yellow-500' : run.status === 'error' ? 'bg-red-500' : 'bg-green-500'\n          }`}\n        />\n        <div className=\"min-w-0 flex-1\">\n          <p className=\"truncate text-sm font-semibold\">{run.title}</p>\n          <p className=\"truncate font-mono text-[11px] text-muted-foreground\">{run.toolName}</p>\n        </div>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          aria-label=\"Close\"\n          className=\"rounded-md p-1.5 text-muted-foreground transition hover:bg-accent/30 hover:text-foreground\"\n        >\n          <svg className=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n            <path d=\"M18 6 6 18M6 6l12 12\" />\n          </svg>\n        </button>\n      </div>\n      <div className=\"flex-1 space-y-3 overflow-y-auto p-4\">\n        {run.steps.length === 0 && (\n          <p className=\"text-sm text-muted-foreground\">No steps recorded yet.</p>\n        )}\n        {run.steps.map((step, i) => (\n          <div key={i} className=\"rounded-lg border border-border/60 bg-background\">\n            <div className=\"flex items-baseline gap-2 border-b border-border/40 px-3 py-1.5\">\n              <span className={`font-mono text-[11px] ${step.status === 'error' ? 'text-red-600' : 'text-muted-foreground'}`}>\n                {step.status === 'error' ? '✗' : '$'}\n              </span>\n              <code className=\"min-w-0 flex-1 truncate font-mono text-xs\">{step.label}</code>\n              <span className=\"shrink-0 text-[10px] text-muted-foreground/60\">\n                {new Date(step.at).toLocaleTimeString()}\n              </span>\n            </div>\n            {step.detail && (\n              <pre className=\"max-h-48 overflow-auto whitespace-pre-wrap px-3 py-2 font-mono text-[11px] leading-relaxed text-muted-foreground\">\n                {step.detail}\n              </pre>\n            )}\n          </div>\n        ))}\n      </div>\n      <p className=\"border-t border-border px-4 py-2 text-[11px] text-muted-foreground/60\">\n        Readonly drill-in. Follow up in the main chat.\n      </p>\n    </div>\n  )\n}\n\n// ── ChatMessages ──────────────────────────────────────────────────────────\n\nexport interface ChatToolCallInfo {\n  id: string\n  name: string\n  status: 'running' | 'done' | 'error'\n  /** The tool outcome (`{ok, result}` shape). When `result.status` is\n   *  'queued_for_approval' the chip renders the approval state. */\n  result?: unknown\n}\n\n/** Extract `{proposalId, status}` from a tool outcome when it is a proposal\n *  awaiting human approval; null otherwise. */\nexport function pendingApprovalOf(call: ChatToolCallInfo): { proposalId: string } | null {\n  const outcome = call.result as { ok?: boolean; result?: { status?: string; proposalId?: string } } | undefined\n  if (!outcome?.ok || outcome.result?.status !== 'queued_for_approval' || !outcome.result.proposalId) return null\n  return { proposalId: outcome.result.proposalId }\n}\n\nexport interface ChatUiMessage extends ChatMessageMetrics {\n  id: string\n  role: 'user' | 'assistant' | 'system'\n  content: string\n  reasoning?: string\n  toolCalls?: ChatToolCallInfo[]\n}\n\nexport interface ChatMessagesProps {\n  messages: ChatUiMessage[]\n  /** Catalogue models, for per-message cost from pricing. Pass [] to skip cost. */\n  models?: CatalogModel[]\n  /** Markdown renderer for assistant content; default renders pre-wrapped text. */\n  renderMarkdown?: (content: string) => ReactNode\n  /** Extra per-message content (artifacts, custom panels) appended after the body. */\n  renderExtras?: (message: ChatUiMessage) => ReactNode\n  userLabel?: string\n  agentLabel?: string\n  /** Render the trailing \"agent is thinking\" row. */\n  loading?: boolean\n  /** Approve/Reject handlers for proposals awaiting approval. When omitted the\n   *  chip still shows \"awaiting approval\" but without action buttons. */\n  approval?: ProposalApprovalHandlers\n  /** Make tool chips clickable (e.g. open a {@link RunDrillIn} panel). */\n  onToolCallClick?: (call: ChatToolCallInfo, message: ChatUiMessage) => void\n}\n\nexport interface ProposalApprovalHandlers {\n  onApprove: (proposalId: string, toolCallId: string) => void | Promise<void>\n  onReject: (proposalId: string, toolCallId: string) => void | Promise<void>\n}\n\nfunction ToolChips({\n  toolCalls,\n  approval,\n  onClick,\n}: {\n  toolCalls: ChatToolCallInfo[]\n  approval?: ProposalApprovalHandlers\n  onClick?: (call: ChatToolCallInfo) => void\n}) {\n  return (\n    <div className=\"mt-2 flex flex-col gap-1\">\n      {toolCalls.map((tc) => {\n        const pending = tc.status === 'done' ? pendingApprovalOf(tc) : null\n        if (pending) {\n          return (\n            <div\n              key={tc.id}\n              className=\"inline-flex w-fit items-center gap-2 rounded-md bg-amber-500/10 px-2.5 py-1 text-xs text-amber-700\"\n            >\n              <span className=\"font-mono opacity-70\">⏸</span>\n              <span className=\"font-medium\">{tc.name}</span>\n              <span className=\"opacity-60\">awaiting approval</span>\n              {approval && (\n                <span className=\"ml-1 inline-flex items-center gap-1\">\n                  <button\n                    type=\"button\"\n                    onClick={() => approval.onApprove(pending.proposalId, tc.id)}\n                    className=\"rounded bg-green-600/90 px-2 py-0.5 text-[11px] font-semibold text-white transition hover:bg-green-600\"\n                  >\n                    Approve\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={() => approval.onReject(pending.proposalId, tc.id)}\n                    className=\"rounded border border-border bg-card px-2 py-0.5 text-[11px] font-medium text-foreground transition hover:bg-accent/30\"\n                  >\n                    Reject\n                  </button>\n                </span>\n              )}\n            </div>\n          )\n        }\n        const Tag = onClick ? 'button' : 'div'\n        return (\n          <Tag\n            key={tc.id}\n            {...(onClick ? { type: 'button' as const, onClick: () => onClick(tc) } : {})}\n            className={`inline-flex w-fit items-center gap-2 rounded-md px-2.5 py-1 text-xs ${\n              tc.status === 'running'\n                ? 'bg-yellow-500/10 text-yellow-700'\n                : tc.status === 'error'\n                  ? 'bg-red-500/10 text-red-700'\n                  : 'bg-green-500/10 text-green-700'\n            } ${onClick ? 'cursor-pointer transition hover:ring-1 hover:ring-border' : ''}`}\n          >\n            <span className=\"font-mono opacity-70\">{tc.status === 'running' ? '⚡' : tc.status === 'error' ? '✗' : '✓'}</span>\n            <span className=\"font-medium\">{tc.name}</span>\n            <span className=\"opacity-60\">{tc.status === 'running' ? 'running…' : tc.status === 'error' ? 'failed' : 'done'}</span>\n          </Tag>\n        )\n      })}\n    </div>\n  )\n}\n\n/**\n * The message thread: one centered column; user messages are right-aligned\n * bubbles with a User label; agent messages carry an Agent meta line with\n * model id, tokens/sec, and cost, plus a collapsible thinking section and\n * tool-call chips.\n */\nexport function ChatMessages({\n  messages,\n  models = [],\n  renderMarkdown,\n  renderExtras,\n  userLabel = 'User',\n  agentLabel = 'Agent',\n  loading,\n  approval,\n  onToolCallClick,\n}: ChatMessagesProps) {\n  const renderBody = renderMarkdown ?? ((content: string) => <p className=\"whitespace-pre-wrap\">{content}</p>)\n  const lastIsUser = messages[messages.length - 1]?.role === 'user'\n  return (\n    <>\n      {messages.map((msg) =>\n        msg.role === 'user' ? (\n          <div key={msg.id} className=\"mx-auto w-full max-w-3xl px-6 py-3\">\n            <div className=\"ml-auto w-fit max-w-[85%]\">\n              <p className=\"mb-1 text-right text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/60\">\n                {userLabel}\n              </p>\n              <div className=\"rounded-2xl rounded-tr-md bg-primary/10 px-4 py-2.5 text-base leading-relaxed\">\n                <p className=\"whitespace-pre-wrap\">{msg.content}</p>\n              </div>\n            </div>\n          </div>\n        ) : (\n          <div key={msg.id} className=\"mx-auto w-full max-w-3xl px-6 py-3\">\n            <div className=\"mb-1 flex items-baseline gap-2 text-[11px] tracking-wide text-muted-foreground/60\">\n              <span className=\"font-semibold uppercase\">{agentLabel}</span>\n              {msg.modelUsed && <span className=\"font-mono normal-case\">{msg.modelUsed}</span>}\n              {formatTokensPerSecond(msg) && <span>{formatTokensPerSecond(msg)}</span>}\n              {formatModelCost(msg, models) && <span>{formatModelCost(msg, models)}</span>}\n            </div>\n            {msg.reasoning && (\n              <details\n                className=\"mb-2 rounded-md border border-border/40 bg-muted/30 px-3 py-2\"\n                open={!msg.content}\n              >\n                <summary className=\"cursor-pointer select-none text-xs font-medium text-muted-foreground\">\n                  {msg.content ? 'Thinking…' : 'Thinking'}\n                  {!msg.content && <span className=\"ml-1 inline-block animate-pulse\">●</span>}\n                </summary>\n                <div className=\"mt-2 max-h-48 overflow-y-auto whitespace-pre-wrap text-sm text-muted-foreground/80\">\n                  {msg.reasoning}\n                </div>\n              </details>\n            )}\n            <div className=\"text-base leading-[1.75]\">{renderBody(msg.content)}</div>\n            {msg.toolCalls && msg.toolCalls.length > 0 && (\n              <ToolChips\n                toolCalls={msg.toolCalls}\n                approval={approval}\n                onClick={onToolCallClick ? (tc) => onToolCallClick(tc, msg) : undefined}\n              />\n            )}\n            {renderExtras?.(msg)}\n          </div>\n        ),\n      )}\n      {loading && lastIsUser && (\n        <div className=\"mx-auto w-full max-w-3xl px-6 py-3\">\n          <p className=\"mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/60\">{agentLabel}</p>\n          <div className=\"flex items-center gap-2 text-base text-muted-foreground\">\n            <svg className=\"h-4 w-4 animate-spin\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" aria-hidden>\n              <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" strokeLinecap=\"round\" />\n            </svg>\n            Thinking...\n          </div>\n        </div>\n      )}\n    </>\n  )\n}\n","/**\n * Client-side chat-stream consumption — the NDJSON parse loop every agent\n * app's chat UI hand-rolls (and breaks). Normalizes the three line shapes the\n * agent-app chat routes emit:\n *\n *   {kind:'event', event:{type:'text'|'reasoning'|'tool_call'|'usage', ...}}\n *   {kind:'tool_result', toolCallId, toolName, label, outcome}\n *   {type:'turn'|'metadata'|'error'|'turn_status', ...}          (route-level)\n *\n * Replayed lines carry an extra `seq` — transparently ignored. Works for\n * router-backed and sandbox-backed chats alike: anything producing these\n * lines (live pump, queued follow, resume replay) feeds the same callbacks.\n */\n\nexport interface ChatStreamToolCall {\n  toolCallId?: string\n  toolName: string\n  args: Record<string, unknown>\n}\n\nexport interface ChatStreamToolResult {\n  toolCallId?: string\n  toolName?: string\n  label?: string\n  outcome: { ok: boolean; result?: unknown; code?: string; message?: string }\n}\n\nexport interface ChatStreamCallbacks {\n  onTurnId?: (turnId: string) => void\n  onText?: (delta: string) => void\n  onReasoning?: (delta: string) => void\n  onToolCall?: (call: ChatStreamToolCall) => void\n  onToolResult?: (result: ChatStreamToolResult) => void\n  onUsage?: (usage: { promptTokens: number; completionTokens: number }) => void\n  onMetadata?: (data: Record<string, unknown>) => void\n  /** A loop-level error event (the turn failed server-side). */\n  onErrorEvent?: (message: string) => void\n}\n\nexport interface ConsumeChatStreamResult {\n  turnId: string | null\n  /** True when any text/reasoning/tool activity was received. */\n  receivedContent: boolean\n}\n\n/** Parse one NDJSON line into the callbacks. Exposed for tests. */\nexport function dispatchChatStreamLine(line: string, cb: ChatStreamCallbacks): {\n  turnId?: string\n  receivedContent: boolean\n} {\n  let receivedContent = false\n  let turnId: string | undefined\n  if (!line.trim()) return { receivedContent }\n  let parsed: Record<string, unknown>\n  try {\n    parsed = JSON.parse(line) as Record<string, unknown>\n  } catch {\n    return { receivedContent } // tolerate a torn line\n  }\n\n  if (parsed.kind === 'tool_result') {\n    cb.onToolResult?.({\n      toolCallId: parsed.toolCallId as string | undefined,\n      toolName: parsed.toolName as string | undefined,\n      label: parsed.label as string | undefined,\n      outcome: (parsed.outcome ?? parsed.result) as ChatStreamToolResult['outcome'],\n    })\n    return { receivedContent: true }\n  }\n\n  const evt = (parsed.kind === 'event' ? parsed.event : parsed) as Record<string, unknown>\n  if (!evt || typeof evt !== 'object') return { receivedContent }\n\n  switch (evt.type) {\n    case 'turn':\n      if (typeof evt.turnId === 'string') turnId = evt.turnId\n      break\n    case 'text':\n      if (typeof evt.text === 'string') {\n        cb.onText?.(evt.text)\n        receivedContent = true\n      }\n      break\n    case 'reasoning':\n      if (typeof evt.text === 'string') {\n        cb.onReasoning?.(evt.text)\n        receivedContent = true\n      }\n      break\n    case 'tool_call': {\n      const call = (evt.call ?? evt) as Record<string, unknown>\n      cb.onToolCall?.({\n        toolCallId: (call.toolCallId ?? call.id) as string | undefined,\n        toolName: String(call.toolName ?? call.name ?? 'unknown'),\n        args: (call.args ?? {}) as Record<string, unknown>,\n      })\n      receivedContent = true\n      break\n    }\n    case 'tool_result':\n      cb.onToolResult?.({\n        toolCallId: evt.toolCallId as string | undefined,\n        toolName: evt.toolName as string | undefined,\n        label: evt.label as string | undefined,\n        outcome: (evt.outcome ?? evt.result) as ChatStreamToolResult['outcome'],\n      })\n      receivedContent = true\n      break\n    case 'usage': {\n      const u = evt.usage as { promptTokens?: number; completionTokens?: number } | undefined\n      if (u) cb.onUsage?.({ promptTokens: u.promptTokens ?? 0, completionTokens: u.completionTokens ?? 0 })\n      break\n    }\n    case 'metadata':\n      cb.onMetadata?.((evt.data ?? {}) as Record<string, unknown>)\n      break\n    case 'error':\n      cb.onErrorEvent?.(String(evt.details ?? evt.error ?? 'Unknown stream error'))\n      break\n    default:\n      break // turn_status and unknown line types are non-content\n  }\n  return { turnId, receivedContent }\n}\n\n/** Drain one NDJSON body into the callbacks. Throws on transport failure\n *  (caller decides whether to resume). */\nexport async function consumeChatStream(\n  body: ReadableStream<Uint8Array>,\n  cb: ChatStreamCallbacks,\n): Promise<ConsumeChatStreamResult> {\n  const reader = body.getReader()\n  const decoder = new TextDecoder()\n  let buffer = ''\n  let turnId: string | null = null\n  let receivedContent = false\n\n  const handle = (line: string) => {\n    const r = dispatchChatStreamLine(line, cb)\n    if (r.turnId) {\n      turnId = r.turnId\n      cb.onTurnId?.(r.turnId)\n    }\n    if (r.receivedContent) receivedContent = true\n  }\n\n  for (;;) {\n    const { done, value } = await reader.read()\n    if (done) {\n      if (buffer.trim()) handle(buffer)\n      break\n    }\n    buffer += decoder.decode(value, { stream: true })\n    const lines = buffer.split('\\n')\n    buffer = lines.pop() ?? ''\n    for (const line of lines) handle(line)\n  }\n  return { turnId, receivedContent }\n}\n\nexport interface StreamChatOptions {\n  /** Start the turn (POST the chat request); must return a streaming Response. */\n  start: () => Promise<Response>\n  /** Re-attach to a turn after a transport drop (GET the resume route). */\n  resume?: (turnId: string, fromSeq: number) => Promise<Response>\n  callbacks: ChatStreamCallbacks\n  /** Called before a resume replays from 0 so the UI can reset accumulated\n   *  turn state (text, reasoning, tool chips). */\n  onResetForResume?: () => void\n}\n\n/**\n * Run one chat turn with automatic single-shot resume: if the transport drops\n * mid-turn and the server announced a turnId, reset and replay the buffered\n * turn. Server-side the turn keeps running either way (queued runner).\n */\nexport async function streamChatTurn(opts: StreamChatOptions): Promise<ConsumeChatStreamResult> {\n  const res = await opts.start()\n  if (!res.ok || !res.body) {\n    const err = await res.json().catch(() => ({ error: `HTTP ${res.status}` })) as { error?: string }\n    throw new Error(err.error ?? `HTTP ${res.status}`)\n  }\n  let turnId: string | null = null\n  const cb: ChatStreamCallbacks = {\n    ...opts.callbacks,\n    onTurnId: (id) => {\n      turnId = id\n      opts.callbacks.onTurnId?.(id)\n    },\n  }\n  try {\n    return await consumeChatStream(res.body, cb)\n  } catch (transportErr) {\n    if (!turnId || !opts.resume) throw transportErr\n    opts.onResetForResume?.()\n    const resumed = await opts.resume(turnId, 0)\n    if (!resumed.ok || !resumed.body) throw transportErr\n    return await consumeChatStream(resumed.body, cb)\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/web-react/index.tsx","../../src/web-react/provider-logo.tsx","../../src/web-react/chat-stream.ts"],"sourcesContent":["/**\n * `@tangle-network/agent-app/web-react` — the shared chat-shell components\n * every agent app's web UI hand-rolls: a model picker over the runtime's\n * model catalogue, a reasoning-effort selector, and a message thread with\n * User/Agent identity, per-message model + cost + tokens/sec metrics, tool\n * chips, and a collapsible thinking section.\n *\n * Works for BOTH chat shapes: router-backed copilots (LoopEvents from\n * `runtime/openai-stream`) and sandbox-backed chats — the thread renders\n * `ChatUiMessage`s; how they're produced is the app's business.\n *\n * Styling contract: Tailwind classes against the shared design tokens\n * (`bg-card`, `border-border`, `text-muted-foreground`, `bg-primary`, …) that\n * Tangle app shells define. No icon library — the few glyphs are inline SVGs.\n * Markdown and provider logos are injected (`renderMarkdown`,\n * `renderProviderBadge`) so this package stays dependency-free beyond React.\n */\n\nimport { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'\nimport { ProviderLogo } from './provider-logo'\n\nexport * from './chat-stream'\nexport * from './provider-logo'\nimport type { CatalogModel } from '../runtime/model-catalog'\n\n// ── shared glyphs (no icon-library dependency) ────────────────────────────\n\nfunction ChevronDown({ className }: { className?: string }) {\n  return (\n    <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  )\n}\n\nfunction SearchGlyph({ className }: { className?: string }) {\n  return (\n    <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <circle cx=\"11\" cy=\"11\" r=\"8\" />\n      <path d=\"m21 21-4.3-4.3\" />\n    </svg>\n  )\n}\n\nfunction SparkleGlyph({ className }: { className?: string }) {\n  return (\n    <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <path d=\"M12 3v3m0 12v3M3 12h3m12 0h3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1m0-12.8-2.1 2.1M7.7 16.3l-2.1 2.1\" />\n    </svg>\n  )\n}\n\n/** Close an absolutely-positioned popover on outside mousedown. */\nfunction useClickOutside(onOutside: () => void) {\n  const ref = useRef<HTMLDivElement>(null)\n  useEffect(() => {\n    function handler(e: MouseEvent) {\n      if (ref.current && !ref.current.contains(e.target as Node)) onOutside()\n    }\n    document.addEventListener('mousedown', handler)\n    return () => document.removeEventListener('mousedown', handler)\n  })\n  return ref\n}\n\n// ── metrics helpers ───────────────────────────────────────────────────────\n\nexport interface ChatMessageMetrics {\n  modelUsed?: string\n  promptTokens?: number\n  completionTokens?: number\n  durationMs?: number\n}\n\n/** \"$0.0042\" from token counts × catalogue per-token pricing; null when unknown. */\nexport function formatModelCost(msg: ChatMessageMetrics, models: CatalogModel[]): string | null {\n  if (msg.promptTokens == null && msg.completionTokens == null) return null\n  const pricing = models.find((m) => m.id === msg.modelUsed)?.pricing\n  if (!pricing) return null\n  const cost =\n    (msg.promptTokens ?? 0) * Number(pricing.prompt ?? 0) +\n    (msg.completionTokens ?? 0) * Number(pricing.completion ?? 0)\n  if (!isFinite(cost) || cost <= 0) return null\n  return cost < 0.01 ? `$${cost.toFixed(4)}` : `$${cost.toFixed(2)}`\n}\n\n/** \"38 tok/s\" from completion tokens over first-token→end duration; null when unknown. */\nexport function formatTokensPerSecond(msg: ChatMessageMetrics): string | null {\n  if (msg.completionTokens == null || !msg.durationMs) return null\n  return `${Math.round(msg.completionTokens / (msg.durationMs / 1000))} tok/s`\n}\n\n// ── ModelPicker ───────────────────────────────────────────────────────────\n\nexport interface ModelPickerProps {\n  value: string\n  onChange: (id: string) => void\n  /** Catalogue models — from `GET`ing the app's catalogue route (see\n   *  `runtime/model-catalog`), plus any product-specific entries appended. */\n  models: CatalogModel[]\n  loading?: boolean\n  /** Render a provider logo/badge; default is a generic sparkle. */\n  renderProviderBadge?: (provider: string) => ReactNode\n  /** Section label for `featured` models. */\n  recommendedLabel?: string\n}\n\nfunction formatPrice(p?: string): string | undefined {\n  if (!p) return undefined\n  const n = Number(p)\n  if (isNaN(n) || n === 0) return undefined\n  const perM = n * 1_000_000\n  return perM >= 1 ? `$${perM.toFixed(0)}/M` : `$${perM.toFixed(2)}/M`\n}\n\nfunction formatContext(len?: number): string | undefined {\n  if (!len) return undefined\n  if (len >= 1_000_000) return `${(len / 1_000_000).toFixed(1)}M ctx`\n  if (len >= 1_000) return `${Math.round(len / 1_000)}K ctx`\n  return `${len} ctx`\n}\n\nfunction SectionHeader({ children }: { children: ReactNode }) {\n  return (\n    <div className=\"px-3 pb-1 pt-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground/70\">\n      {children}\n    </div>\n  )\n}\n\nfunction ModelRow({\n  model,\n  selected,\n  onSelect,\n  renderProviderBadge,\n}: {\n  model: CatalogModel\n  selected: boolean\n  onSelect: () => void\n  renderProviderBadge?: (provider: string) => ReactNode\n}) {\n  const price = formatPrice(model.pricing?.prompt)\n  const ctx = formatContext(model.contextLength)\n  return (\n    <button\n      type=\"button\"\n      onClick={onSelect}\n      className={`flex w-full items-center gap-2.5 rounded-md px-3 py-2.5 text-left text-sm transition ${\n        selected ? 'bg-primary/10 font-medium' : 'hover:bg-accent/30'\n      }`}\n    >\n      {renderProviderBadge ? renderProviderBadge(model.provider) : <ProviderLogo provider={model.provider} size={16} />}\n      <span className=\"truncate\">{model.name}</span>\n      {!model.supportsTools && (\n        <span className=\"shrink-0 rounded bg-muted/60 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground\">\n          no tools\n        </span>\n      )}\n      <span className=\"ml-auto flex shrink-0 items-center gap-2 text-xs text-muted-foreground\">\n        {ctx && <span>{ctx}</span>}\n        {price && <span>{price}</span>}\n      </span>\n    </button>\n  )\n}\n\n/**\n * Searchable model picker pill + popover: a featured/recommended section\n * first, then per-provider groups in catalogue order (the server already\n * sorts providers by tier).\n */\nexport function ModelPicker({ value, onChange, models, loading, renderProviderBadge, recommendedLabel = 'Recommended' }: ModelPickerProps) {\n  const [open, setOpen] = useState(false)\n  const [query, setQuery] = useState('')\n  const containerRef = useClickOutside(() => setOpen(false))\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  useEffect(() => {\n    if (open) inputRef.current?.focus()\n  }, [open])\n\n  const selected = models.find((m) => m.id === value)\n\n  const filtered = useMemo(() => {\n    const q = query.trim().toLowerCase()\n    if (!q) return null\n    return models.filter(\n      (m) =>\n        m.id.toLowerCase().includes(q) ||\n        m.name.toLowerCase().includes(q) ||\n        (m.description?.toLowerCase() ?? '').includes(q) ||\n        m.provider.toLowerCase().includes(q),\n    )\n  }, [models, query])\n\n  const sections = useMemo(() => {\n    const recommended = models.filter((m) => m.featured)\n    const byProvider: Array<{ provider: string; items: CatalogModel[] }> = []\n    for (const m of models) {\n      if (m.featured) continue\n      const last = byProvider[byProvider.length - 1]\n      if (last && last.provider === m.provider) last.items.push(m)\n      else byProvider.push({ provider: m.provider, items: [m] })\n    }\n    return { recommended, byProvider }\n  }, [models])\n\n  const select = (id: string) => {\n    onChange(id)\n    setOpen(false)\n    setQuery('')\n  }\n\n  return (\n    <div ref={containerRef} className=\"relative inline-flex\">\n      <button\n        type=\"button\"\n        onClick={() => setOpen((v) => !v)}\n        className=\"inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground transition hover:bg-accent/30\"\n      >\n        {selected ? (renderProviderBadge ? renderProviderBadge(selected.provider) : <ProviderLogo provider={selected.provider} size={16} />) : <SparkleGlyph className=\"h-3.5 w-3.5 text-muted-foreground\" />}\n        <span className=\"max-w-[160px] truncate\">{selected?.name ?? value}</span>\n        <ChevronDown className=\"h-3.5 w-3.5 text-muted-foreground\" />\n      </button>\n\n      {open && (\n        <div className=\"absolute bottom-full left-0 z-50 mb-2 w-[420px] overflow-hidden rounded-xl border border-border bg-card shadow-lg\">\n          <div className=\"border-b border-border px-3 py-2\">\n            <div className=\"flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2\">\n              <SearchGlyph className=\"h-3.5 w-3.5 text-muted-foreground\" />\n              <input\n                ref={inputRef}\n                type=\"text\"\n                value={query}\n                onChange={(e) => setQuery(e.target.value)}\n                placeholder=\"Search models...\"\n                className=\"flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground\"\n              />\n            </div>\n          </div>\n          <div className=\"max-h-[400px] overflow-y-auto p-1 pb-2\">\n            {loading && <div className=\"px-3 py-4 text-center text-sm text-muted-foreground\">Loading models...</div>}\n            {!loading && filtered && (\n              <>\n                {filtered.length === 0 && (\n                  <div className=\"px-3 py-4 text-center text-sm text-muted-foreground\">No models match your search</div>\n                )}\n                {filtered.map((m) => (\n                  <ModelRow key={m.id} model={m} selected={m.id === value} onSelect={() => select(m.id)} renderProviderBadge={renderProviderBadge} />\n                ))}\n              </>\n            )}\n            {!loading && !filtered && (\n              <>\n                {sections.recommended.length > 0 && (\n                  <>\n                    <SectionHeader>{recommendedLabel}</SectionHeader>\n                    {sections.recommended.map((m) => (\n                      <ModelRow key={m.id} model={m} selected={m.id === value} onSelect={() => select(m.id)} renderProviderBadge={renderProviderBadge} />\n                    ))}\n                  </>\n                )}\n                {sections.byProvider.map((g) => (\n                  <div key={g.provider}>\n                    <SectionHeader>{g.provider}</SectionHeader>\n                    {g.items.map((m) => (\n                      <ModelRow key={m.id} model={m} selected={m.id === value} onSelect={() => select(m.id)} renderProviderBadge={renderProviderBadge} />\n                    ))}\n                  </div>\n                ))}\n              </>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\n// ── EffortPicker ──────────────────────────────────────────────────────────\n\nconst EFFORT_LEVELS = [\n  { id: 'off', label: 'Off' },\n  { id: 'low', label: 'Low' },\n  { id: 'medium', label: 'Medium' },\n  { id: 'high', label: 'High' },\n] as const\n\nexport interface EffortPickerProps {\n  value: string\n  onChange: (id: string) => void\n}\n\n/** Reasoning-effort selector pill, styled to match {@link ModelPicker}. Show\n *  it only when the selected model `supportsReasoning`. */\nexport function EffortPicker({ value, onChange }: EffortPickerProps) {\n  const [open, setOpen] = useState(false)\n  const containerRef = useClickOutside(() => setOpen(false))\n  const selected = EFFORT_LEVELS.find((l) => l.id === value) ?? EFFORT_LEVELS[2]\n\n  return (\n    <div ref={containerRef} className=\"relative inline-flex\">\n      <button\n        type=\"button\"\n        onClick={() => setOpen((v) => !v)}\n        title=\"Reasoning effort\"\n        className=\"inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground transition hover:bg-accent/30\"\n      >\n        <SparkleGlyph className=\"h-3.5 w-3.5 text-muted-foreground\" />\n        <span>{selected.label}</span>\n        <ChevronDown className=\"h-3.5 w-3.5 text-muted-foreground\" />\n      </button>\n      {open && (\n        <div className=\"absolute bottom-full left-0 z-50 mb-2 w-36 overflow-hidden rounded-xl border border-border bg-card p-1 shadow-lg\">\n          {EFFORT_LEVELS.map((l) => (\n            <button\n              key={l.id}\n              type=\"button\"\n              onClick={() => {\n                onChange(l.id)\n                setOpen(false)\n              }}\n              className={`flex w-full items-center rounded-md px-3 py-2 text-left text-sm transition ${\n                l.id === value ? 'bg-primary/10 font-medium' : 'hover:bg-accent/30'\n              }`}\n            >\n              {l.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\n// ── Tool run drill-in (retained runs) ─────────────────────────────────────\n\n/** One step of a retained tool run (e.g. a sandbox command + its output). */\nexport interface ToolRunStep {\n  at: string\n  label: string\n  detail?: string\n  status?: 'ok' | 'error'\n}\n\n/** A retained tool run keyed by the parent message's toolCallId. The product\n *  persists these server-side (fail-closed: only ids its own loop created)\n *  and serves them to the drill-in panel. */\nexport interface ToolRunRecord {\n  toolCallId: string\n  toolName: string\n  title: string\n  status: 'running' | 'complete' | 'error'\n  steps: ToolRunStep[]\n}\n\nexport interface RunDrillInProps {\n  run: ToolRunRecord\n  onClose: () => void\n}\n\n/**\n * Readonly side panel showing a retained tool run's transcript — the\n * \"drill into what the sandbox actually did\" view. Follow-ups happen in the\n * main chat, never here.\n */\nexport function RunDrillIn({ run, onClose }: RunDrillInProps) {\n  return (\n    <div className=\"fixed inset-y-0 right-0 z-50 flex w-[480px] max-w-full flex-col border-l border-border bg-card shadow-xl\">\n      <div className=\"flex items-center gap-2 border-b border-border px-4 py-3\">\n        <span\n          className={`h-2 w-2 shrink-0 rounded-full ${\n            run.status === 'running' ? 'bg-yellow-500' : run.status === 'error' ? 'bg-red-500' : 'bg-green-500'\n          }`}\n        />\n        <div className=\"min-w-0 flex-1\">\n          <p className=\"truncate text-sm font-semibold\">{run.title}</p>\n          <p className=\"truncate font-mono text-[11px] text-muted-foreground\">{run.toolName}</p>\n        </div>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          aria-label=\"Close\"\n          className=\"rounded-md p-1.5 text-muted-foreground transition hover:bg-accent/30 hover:text-foreground\"\n        >\n          <svg className=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n            <path d=\"M18 6 6 18M6 6l12 12\" />\n          </svg>\n        </button>\n      </div>\n      <div className=\"flex-1 space-y-3 overflow-y-auto p-4\">\n        {run.steps.length === 0 && (\n          <p className=\"text-sm text-muted-foreground\">No steps recorded yet.</p>\n        )}\n        {run.steps.map((step, i) => (\n          <div key={i} className=\"rounded-lg border border-border/60 bg-background\">\n            <div className=\"flex items-baseline gap-2 border-b border-border/40 px-3 py-1.5\">\n              <span className={`font-mono text-[11px] ${step.status === 'error' ? 'text-red-600' : 'text-muted-foreground'}`}>\n                {step.status === 'error' ? '✗' : '$'}\n              </span>\n              <code className=\"min-w-0 flex-1 truncate font-mono text-xs\">{step.label}</code>\n              <span className=\"shrink-0 text-[10px] text-muted-foreground/60\">\n                {new Date(step.at).toLocaleTimeString()}\n              </span>\n            </div>\n            {step.detail && (\n              <pre className=\"max-h-48 overflow-auto whitespace-pre-wrap px-3 py-2 font-mono text-[11px] leading-relaxed text-muted-foreground\">\n                {step.detail}\n              </pre>\n            )}\n          </div>\n        ))}\n      </div>\n      <p className=\"border-t border-border px-4 py-2 text-[11px] text-muted-foreground/60\">\n        Readonly drill-in. Follow up in the main chat.\n      </p>\n    </div>\n  )\n}\n\n// ── ChatMessages ──────────────────────────────────────────────────────────\n\nexport interface ChatToolCallInfo {\n  id: string\n  name: string\n  status: 'running' | 'done' | 'error'\n  /** The tool outcome (`{ok, result}` shape). When `result.status` is\n   *  'queued_for_approval' the chip renders the approval state. */\n  result?: unknown\n}\n\n/** Extract `{proposalId, status}` from a tool outcome when it is a proposal\n *  awaiting human approval; null otherwise. */\nexport function pendingApprovalOf(call: ChatToolCallInfo): { proposalId: string } | null {\n  const outcome = call.result as { ok?: boolean; result?: { status?: string; proposalId?: string } } | undefined\n  if (!outcome?.ok || outcome.result?.status !== 'queued_for_approval' || !outcome.result.proposalId) return null\n  return { proposalId: outcome.result.proposalId }\n}\n\nexport interface ChatUiMessage extends ChatMessageMetrics {\n  id: string\n  role: 'user' | 'assistant' | 'system'\n  content: string\n  reasoning?: string\n  toolCalls?: ChatToolCallInfo[]\n}\n\nexport interface ChatMessagesProps {\n  messages: ChatUiMessage[]\n  /** Catalogue models, for per-message cost from pricing. Pass [] to skip cost. */\n  models?: CatalogModel[]\n  /** Markdown renderer for assistant content; default renders pre-wrapped text. */\n  renderMarkdown?: (content: string) => ReactNode\n  /** Extra per-message content (artifacts, custom panels) appended after the body. */\n  renderExtras?: (message: ChatUiMessage) => ReactNode\n  userLabel?: string\n  agentLabel?: string\n  /** Render the trailing \"agent is thinking\" row. */\n  loading?: boolean\n  /** Approve/Reject handlers for proposals awaiting approval. When omitted the\n   *  chip still shows \"awaiting approval\" but without action buttons. */\n  approval?: ProposalApprovalHandlers\n  /** Make tool chips clickable (e.g. open a {@link RunDrillIn} panel). */\n  onToolCallClick?: (call: ChatToolCallInfo, message: ChatUiMessage) => void\n}\n\nexport interface ProposalApprovalHandlers {\n  onApprove: (proposalId: string, toolCallId: string) => void | Promise<void>\n  onReject: (proposalId: string, toolCallId: string) => void | Promise<void>\n}\n\nfunction ToolChips({\n  toolCalls,\n  approval,\n  onClick,\n}: {\n  toolCalls: ChatToolCallInfo[]\n  approval?: ProposalApprovalHandlers\n  onClick?: (call: ChatToolCallInfo) => void\n}) {\n  return (\n    <div className=\"mt-2 flex flex-col gap-1\">\n      {toolCalls.map((tc) => {\n        const pending = tc.status === 'done' ? pendingApprovalOf(tc) : null\n        if (pending) {\n          return (\n            <div\n              key={tc.id}\n              className=\"inline-flex w-fit items-center gap-2 rounded-md bg-amber-500/10 px-2.5 py-1 text-xs text-amber-700\"\n            >\n              <span className=\"font-mono opacity-70\">⏸</span>\n              <span className=\"font-medium\">{tc.name}</span>\n              <span className=\"opacity-60\">awaiting approval</span>\n              {approval && (\n                <span className=\"ml-1 inline-flex items-center gap-1\">\n                  <button\n                    type=\"button\"\n                    onClick={() => approval.onApprove(pending.proposalId, tc.id)}\n                    className=\"rounded bg-green-600/90 px-2 py-0.5 text-[11px] font-semibold text-white transition hover:bg-green-600\"\n                  >\n                    Approve\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={() => approval.onReject(pending.proposalId, tc.id)}\n                    className=\"rounded border border-border bg-card px-2 py-0.5 text-[11px] font-medium text-foreground transition hover:bg-accent/30\"\n                  >\n                    Reject\n                  </button>\n                </span>\n              )}\n            </div>\n          )\n        }\n        const Tag = onClick ? 'button' : 'div'\n        return (\n          <Tag\n            key={tc.id}\n            {...(onClick ? { type: 'button' as const, onClick: () => onClick(tc) } : {})}\n            className={`inline-flex w-fit items-center gap-2 rounded-md px-2.5 py-1 text-xs ${\n              tc.status === 'running'\n                ? 'bg-yellow-500/10 text-yellow-700'\n                : tc.status === 'error'\n                  ? 'bg-red-500/10 text-red-700'\n                  : 'bg-green-500/10 text-green-700'\n            } ${onClick ? 'cursor-pointer transition hover:ring-1 hover:ring-border' : ''}`}\n          >\n            <span className=\"font-mono opacity-70\">{tc.status === 'running' ? '⚡' : tc.status === 'error' ? '✗' : '✓'}</span>\n            <span className=\"font-medium\">{tc.name}</span>\n            <span className=\"opacity-60\">{tc.status === 'running' ? 'running…' : tc.status === 'error' ? 'failed' : 'done'}</span>\n          </Tag>\n        )\n      })}\n    </div>\n  )\n}\n\n/**\n * The message thread: one centered column; user messages are right-aligned\n * bubbles with a User label; agent messages carry an Agent meta line with\n * model id, tokens/sec, and cost, plus a collapsible thinking section and\n * tool-call chips.\n */\nexport function ChatMessages({\n  messages,\n  models = [],\n  renderMarkdown,\n  renderExtras,\n  userLabel = 'User',\n  agentLabel = 'Agent',\n  loading,\n  approval,\n  onToolCallClick,\n}: ChatMessagesProps) {\n  const renderBody = renderMarkdown ?? ((content: string) => <p className=\"whitespace-pre-wrap\">{content}</p>)\n  const lastIsUser = messages[messages.length - 1]?.role === 'user'\n  return (\n    <>\n      {messages.map((msg) =>\n        msg.role === 'user' ? (\n          <div key={msg.id} className=\"mx-auto w-full max-w-3xl px-6 py-3\">\n            <div className=\"ml-auto w-fit max-w-[85%]\">\n              <p className=\"mb-1 text-right text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/60\">\n                {userLabel}\n              </p>\n              <div className=\"rounded-2xl rounded-tr-md bg-primary/10 px-4 py-2.5 text-base leading-relaxed\">\n                <p className=\"whitespace-pre-wrap\">{msg.content}</p>\n              </div>\n            </div>\n          </div>\n        ) : (\n          <div key={msg.id} className=\"mx-auto w-full max-w-3xl px-6 py-3\">\n            <div className=\"mb-1 flex items-baseline gap-2 text-[11px] tracking-wide text-muted-foreground/60\">\n              <span className=\"font-semibold uppercase\">{agentLabel}</span>\n              {msg.modelUsed && <span className=\"font-mono normal-case\">{msg.modelUsed}</span>}\n              {formatTokensPerSecond(msg) && <span>{formatTokensPerSecond(msg)}</span>}\n              {formatModelCost(msg, models) && <span>{formatModelCost(msg, models)}</span>}\n            </div>\n            {msg.reasoning && (\n              <details\n                className=\"mb-2 rounded-md border border-border/40 bg-muted/30 px-3 py-2\"\n                open={!msg.content}\n              >\n                <summary className=\"cursor-pointer select-none text-xs font-medium text-muted-foreground\">\n                  {msg.content ? 'Thinking…' : 'Thinking'}\n                  {!msg.content && <span className=\"ml-1 inline-block animate-pulse\">●</span>}\n                </summary>\n                <div className=\"mt-2 max-h-48 overflow-y-auto whitespace-pre-wrap text-sm text-muted-foreground/80\">\n                  {msg.reasoning}\n                </div>\n              </details>\n            )}\n            <div className=\"text-base leading-[1.75]\">{renderBody(msg.content)}</div>\n            {msg.toolCalls && msg.toolCalls.length > 0 && (\n              <ToolChips\n                toolCalls={msg.toolCalls}\n                approval={approval}\n                onClick={onToolCallClick ? (tc) => onToolCallClick(tc, msg) : undefined}\n              />\n            )}\n            {renderExtras?.(msg)}\n          </div>\n        ),\n      )}\n      {loading && lastIsUser && (\n        <div className=\"mx-auto w-full max-w-3xl px-6 py-3\">\n          <p className=\"mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/60\">{agentLabel}</p>\n          <div className=\"flex items-center gap-2 text-base text-muted-foreground\">\n            <svg className=\"h-4 w-4 animate-spin\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" aria-hidden>\n              <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" strokeLinecap=\"round\" />\n            </svg>\n            Thinking...\n          </div>\n        </div>\n      )}\n    </>\n  )\n}\n","/**\n * Provider brand marks — real logo path data (simple-icons / SVG Logos, both\n * CC0) inlined so the picker shows actual provider identity instead of\n * colored-initial monograms. Providers without a usable mark fall back to a\n * tinted monogram chip. Aliases (z-ai/zai, moonshot/moonshotai, deepseek_ai)\n * normalize to one entry.\n */\n\nimport type { ReactNode } from 'react'\n\ninterface LogoDef {\n  viewBox: string\n  fill: string\n  paths: string[]\n}\n\nconst LOGOS: Record<string, LogoDef> = {\n  anthropic: { viewBox: '0 0 24 24', fill: '#D97757', paths: [\"M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z\"] },\n  google: { viewBox: '0 0 24 24', fill: '#8E75B2', paths: [\"M11.04 19.32Q12 21.51 12 24q0-2.49.93-4.68.96-2.19 2.58-3.81t3.81-2.55Q21.51 12 24 12q-2.49 0-4.68-.93a12.3 12.3 0 0 1-3.81-2.58 12.3 12.3 0 0 1-2.58-3.81Q12 2.49 12 0q0 2.49-.96 4.68-.93 2.19-2.55 3.81a12.3 12.3 0 0 1-3.81 2.58Q2.49 12 0 12q2.49 0 4.68.96 2.19.93 3.81 2.55t2.55 3.81\"] },\n  deepseek: { viewBox: '0 0 24 24', fill: '#4D6BFE', paths: [\"M23.748 4.651c-.254-.124-.364.113-.512.233-.051.04-.094.09-.137.137-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.155-.708-.311-.955-.65-.172-.24-.219-.509-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.094.172.187.129.323-.082.28-.18.553-.266.833-.055.179-.137.218-.328.14a5.5 5.5 0 0 1-1.737-1.179c-.857-.828-1.631-1.743-2.597-2.46a12 12 0 0 0-.689-.47c-.985-.957.13-1.743.387-1.836.27-.098.094-.433-.778-.428-.872.003-1.67.295-2.687.685a3 3 0 0 1-.465.136 9.6 9.6 0 0 0-2.883-.101c-1.885.21-3.39 1.1-4.497 2.622C.082 8.776-.231 10.854.152 13.02c.403 2.284 1.568 4.175 3.36 5.653 1.857 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.132-.284 4.994-1.86.47.234.962.328 1.78.398.629.058 1.235-.031 1.705-.129.735-.155.684-.836.418-.961-2.155-1.004-1.682-.595-2.112-.926 1.095-1.295 2.768-3.598 3.284-6.733.05-.346.115-.834.108-1.114-.004-.171.035-.238.23-.257a4.2 4.2 0 0 0 1.545-.475c1.397-.763 1.96-2.016 2.093-3.517.02-.23-.004-.467-.247-.588M11.58 18.168c-2.088-1.642-3.101-2.183-3.52-2.16-.39.024-.32.472-.234.763.09.288.207.487.371.74.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.168-1.361-.801-2.5-1.86-3.301-3.306-.775-1.393-1.225-2.888-1.299-4.482-.02-.385.094-.522.477-.592a4.7 4.7 0 0 1 1.53-.038c2.131.311 3.946 1.264 5.467 2.774.868.86 1.525 1.887 2.202 2.89.72 1.066 1.494 2.082 2.48 2.915.348.291.626.513.892.677-.802.09-2.14.109-3.055-.615zm1.001-6.44a.306.306 0 0 1 .415-.287.3.3 0 0 1 .113.074.3.3 0 0 1 .086.214c0 .17-.136.307-.308.307a.303.303 0 0 1-.306-.307m3.11 1.596c-.2.081-.4.151-.591.16a1.25 1.25 0 0 1-.798-.254c-.274-.23-.47-.358-.551-.758a1.7 1.7 0 0 1 .015-.588c.07-.327-.007-.537-.238-.727-.188-.156-.426-.199-.689-.199a.6.6 0 0 1-.254-.078.253.253 0 0 1-.114-.358 1 1 0 0 1 .192-.21c.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.392.451.462.576.685.915.176.264.336.536.446.848.066.194-.02.353-.25.45\"] },\n  mistral: { viewBox: '0 0 24 24', fill: '#FA520F', paths: [\"M17.143 3.429v3.428h-3.429v3.429h-3.428V6.857H6.857V3.43H3.43v13.714H0v3.428h10.286v-3.428H6.857v-3.429h3.429v3.429h3.429v-3.429h3.428v3.429h-3.428v3.428H24v-3.428h-3.43V3.429z\"] },\n  xai: { viewBox: '0 0 24 24', fill: '#000000', paths: [\"M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z\"] },\n  nvidia: { viewBox: '0 0 24 24', fill: '#76B900', paths: [\"M8.948 8.798v-1.43a6.7 6.7 0 0 1 .424-.018c3.922-.124 6.493 3.374 6.493 3.374s-2.774 3.851-5.75 3.851c-.398 0-.787-.062-1.158-.185v-4.346c1.528.185 1.837.857 2.747 2.385l2.04-1.714s-1.492-1.952-4-1.952a6.016 6.016 0 0 0-.796.035m0-4.735v2.138l.424-.027c5.45-.185 9.01 4.47 9.01 4.47s-4.08 4.964-8.33 4.964c-.37 0-.733-.035-1.095-.097v1.325c.3.035.61.062.91.062 3.957 0 6.82-2.023 9.593-4.408.459.371 2.34 1.263 2.73 1.652-2.633 2.208-8.772 3.984-12.253 3.984-.335 0-.653-.018-.971-.053v1.864H24V4.063zm0 10.326v1.131c-3.657-.654-4.673-4.46-4.673-4.46s1.758-1.944 4.673-2.262v1.237H8.94c-1.528-.186-2.73 1.245-2.73 1.245s.68 2.412 2.739 3.11M2.456 10.9s2.164-3.197 6.5-3.533V6.201C4.153 6.59 0 10.653 0 10.653s2.35 6.802 8.948 7.42v-1.237c-4.84-.6-6.492-5.936-6.492-5.936z\"] },\n  meta: { viewBox: '0 0 24 24', fill: '#0467DF', paths: [\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"] },\n  moonshotai: { viewBox: '0 0 24 24', fill: '#16191E', paths: [\"m1.053 16.91 9.538 2.55a21 20.981 0 0 0 .06 2.031l5.956 1.592a12 11.99 0 0 1-15.554-6.172m-1.02-5.79 11.352 3.035a21 20.981 0 0 0-.469 2.01l10.817 2.89a12 11.99 0 0 1-1.845 2.004L.658 15.918a12 11.99 0 0 1-.625-4.796m1.593-5.146L13.573 9.17a21 20.981 0 0 0-1.01 1.874l11.297 3.02a21 20.981 0 0 1-.67 2.362l-11.55-3.087L.125 10.26a12 11.99 0 0 1 1.499-4.285ZM6.067 1.58l11.285 3.016a21 20.981 0 0 0-1.688 1.719l7.824 2.091a21 20.981 0 0 1 .513 2.664L2.107 5.218a12 11.99 0 0 1 3.96-3.638M21.68 4.866 7.222 1.003A12 11.99 0 0 1 21.68 4.866\"] },\n  openai: { viewBox: '0 0 256 260', fill: '#10A37F', paths: [\"M239.184 106.203a64.72 64.72 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.72 64.72 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.67 64.67 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.77 64.77 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483m-97.56 136.338a48.4 48.4 0 0 1-31.105-11.255l1.535-.87l51.67-29.825a8.6 8.6 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601M37.158 197.93a48.35 48.35 0 0 1-5.781-32.589l1.534.921l51.722 29.826a8.34 8.34 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803M23.549 85.38a48.5 48.5 0 0 1 25.58-21.333v61.39a8.29 8.29 0 0 0 4.195 7.316l62.874 36.272l-21.845 12.636a.82.82 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405zm179.466 41.695l-63.08-36.63L161.73 77.86a.82.82 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.54 8.54 0 0 0-4.4-7.213m21.742-32.69l-1.535-.922l-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.72.72 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391zM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87l-51.67 29.825a8.6 8.6 0 0 0-4.246 7.367zm11.868-25.58L128.067 97.3l28.188 16.218v32.434l-28.086 16.218l-28.188-16.218z\"] },\n}\n\nconst ALIASES: Record<string, string> = {\n  moonshot: 'moonshotai',\n  deepseek_ai: 'deepseek',\n  'x-ai': 'xai',\n  'meta-llama': 'meta',\n}\n\nconst MONOGRAM: Record<string, { bg: string; fg: string }> = {\n  cohere: { bg: '#fae8ff', fg: '#c026d3' },\n  groq: { bg: '#fce7f3', fg: '#db2777' },\n  cerebras: { bg: '#ccfbf1', fg: '#0d9488' },\n  zai: { bg: '#ede9fe', fg: '#7c3aed' },\n  'z-ai': { bg: '#ede9fe', fg: '#7c3aed' },\n  tuner: { bg: '#dbeafe', fg: '#2563eb' },\n}\n\nexport interface ProviderLogoProps {\n  provider?: string\n  size?: number\n}\n\n/** Real brand mark when we have one; tinted monogram otherwise. */\nexport function ProviderLogo({ provider, size = 16 }: ProviderLogoProps): ReactNode {\n  const key = ALIASES[provider ?? ''] ?? provider ?? ''\n  const logo = LOGOS[key]\n  if (logo) {\n    return (\n      <svg width={size} height={size} viewBox={logo.viewBox} role=\"img\" aria-label={key}>\n        {logo.paths.map((d, i) => (\n          <path key={i} d={d} fill={logo.fill} />\n        ))}\n      </svg>\n    )\n  }\n  const mono = MONOGRAM[key] ?? { bg: '#f3f4f6', fg: '#6b7280' }\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 16 16\" role=\"img\" aria-label={key || 'model'}>\n      <rect width=\"16\" height=\"16\" rx=\"4\" fill={mono.bg} />\n      <text x=\"8\" y=\"11.6\" textAnchor=\"middle\" fill={mono.fg} fontSize=\"9\" fontWeight=\"700\" fontFamily=\"system-ui, sans-serif\">\n        {(key || '?').charAt(0).toUpperCase()}\n      </text>\n    </svg>\n  )\n}\n","/**\n * Client-side chat-stream consumption — the NDJSON parse loop every agent\n * app's chat UI hand-rolls (and breaks). Normalizes the three line shapes the\n * agent-app chat routes emit:\n *\n *   {kind:'event', event:{type:'text'|'reasoning'|'tool_call'|'usage', ...}}\n *   {kind:'tool_result', toolCallId, toolName, label, outcome}\n *   {type:'turn'|'metadata'|'error'|'turn_status', ...}          (route-level)\n *\n * Replayed lines carry an extra `seq` — transparently ignored. Works for\n * router-backed and sandbox-backed chats alike: anything producing these\n * lines (live pump, queued follow, resume replay) feeds the same callbacks.\n */\n\nexport interface ChatStreamToolCall {\n  toolCallId?: string\n  toolName: string\n  args: Record<string, unknown>\n}\n\nexport interface ChatStreamToolResult {\n  toolCallId?: string\n  toolName?: string\n  label?: string\n  outcome: { ok: boolean; result?: unknown; code?: string; message?: string }\n}\n\nexport interface ChatStreamCallbacks {\n  onTurnId?: (turnId: string) => void\n  onText?: (delta: string) => void\n  onReasoning?: (delta: string) => void\n  onToolCall?: (call: ChatStreamToolCall) => void\n  onToolResult?: (result: ChatStreamToolResult) => void\n  onUsage?: (usage: { promptTokens: number; completionTokens: number }) => void\n  onMetadata?: (data: Record<string, unknown>) => void\n  /** A loop-level error event (the turn failed server-side). */\n  onErrorEvent?: (message: string) => void\n}\n\nexport interface ConsumeChatStreamResult {\n  turnId: string | null\n  /** True when any text/reasoning/tool activity was received. */\n  receivedContent: boolean\n}\n\n/** Parse one NDJSON line into the callbacks. Exposed for tests. */\nexport function dispatchChatStreamLine(line: string, cb: ChatStreamCallbacks): {\n  turnId?: string\n  receivedContent: boolean\n} {\n  let receivedContent = false\n  let turnId: string | undefined\n  if (!line.trim()) return { receivedContent }\n  let parsed: Record<string, unknown>\n  try {\n    parsed = JSON.parse(line) as Record<string, unknown>\n  } catch {\n    return { receivedContent } // tolerate a torn line\n  }\n\n  if (parsed.kind === 'tool_result') {\n    cb.onToolResult?.({\n      toolCallId: parsed.toolCallId as string | undefined,\n      toolName: parsed.toolName as string | undefined,\n      label: parsed.label as string | undefined,\n      outcome: (parsed.outcome ?? parsed.result) as ChatStreamToolResult['outcome'],\n    })\n    return { receivedContent: true }\n  }\n\n  const evt = (parsed.kind === 'event' ? parsed.event : parsed) as Record<string, unknown>\n  if (!evt || typeof evt !== 'object') return { receivedContent }\n\n  switch (evt.type) {\n    case 'turn':\n      if (typeof evt.turnId === 'string') turnId = evt.turnId\n      break\n    case 'text':\n      if (typeof evt.text === 'string') {\n        cb.onText?.(evt.text)\n        receivedContent = true\n      }\n      break\n    case 'reasoning':\n      if (typeof evt.text === 'string') {\n        cb.onReasoning?.(evt.text)\n        receivedContent = true\n      }\n      break\n    case 'tool_call': {\n      const call = (evt.call ?? evt) as Record<string, unknown>\n      cb.onToolCall?.({\n        toolCallId: (call.toolCallId ?? call.id) as string | undefined,\n        toolName: String(call.toolName ?? call.name ?? 'unknown'),\n        args: (call.args ?? {}) as Record<string, unknown>,\n      })\n      receivedContent = true\n      break\n    }\n    case 'tool_result':\n      cb.onToolResult?.({\n        toolCallId: evt.toolCallId as string | undefined,\n        toolName: evt.toolName as string | undefined,\n        label: evt.label as string | undefined,\n        outcome: (evt.outcome ?? evt.result) as ChatStreamToolResult['outcome'],\n      })\n      receivedContent = true\n      break\n    case 'usage': {\n      const u = evt.usage as { promptTokens?: number; completionTokens?: number } | undefined\n      if (u) cb.onUsage?.({ promptTokens: u.promptTokens ?? 0, completionTokens: u.completionTokens ?? 0 })\n      break\n    }\n    case 'metadata':\n      cb.onMetadata?.((evt.data ?? {}) as Record<string, unknown>)\n      break\n    case 'error':\n      cb.onErrorEvent?.(String(evt.details ?? evt.error ?? 'Unknown stream error'))\n      break\n    default:\n      break // turn_status and unknown line types are non-content\n  }\n  return { turnId, receivedContent }\n}\n\n/** Drain one NDJSON body into the callbacks. Throws on transport failure\n *  (caller decides whether to resume). */\nexport async function consumeChatStream(\n  body: ReadableStream<Uint8Array>,\n  cb: ChatStreamCallbacks,\n): Promise<ConsumeChatStreamResult> {\n  const reader = body.getReader()\n  const decoder = new TextDecoder()\n  let buffer = ''\n  let turnId: string | null = null\n  let receivedContent = false\n\n  const handle = (line: string) => {\n    const r = dispatchChatStreamLine(line, cb)\n    if (r.turnId) {\n      turnId = r.turnId\n      cb.onTurnId?.(r.turnId)\n    }\n    if (r.receivedContent) receivedContent = true\n  }\n\n  for (;;) {\n    const { done, value } = await reader.read()\n    if (done) {\n      if (buffer.trim()) handle(buffer)\n      break\n    }\n    buffer += decoder.decode(value, { stream: true })\n    const lines = buffer.split('\\n')\n    buffer = lines.pop() ?? ''\n    for (const line of lines) handle(line)\n  }\n  return { turnId, receivedContent }\n}\n\nexport interface StreamChatOptions {\n  /** Start the turn (POST the chat request); must return a streaming Response. */\n  start: () => Promise<Response>\n  /** Re-attach to a turn after a transport drop (GET the resume route). */\n  resume?: (turnId: string, fromSeq: number) => Promise<Response>\n  callbacks: ChatStreamCallbacks\n  /** Called before a resume replays from 0 so the UI can reset accumulated\n   *  turn state (text, reasoning, tool chips). */\n  onResetForResume?: () => void\n}\n\n/**\n * Run one chat turn with automatic single-shot resume: if the transport drops\n * mid-turn and the server announced a turnId, reset and replay the buffered\n * turn. Server-side the turn keeps running either way (queued runner).\n */\nexport async function streamChatTurn(opts: StreamChatOptions): Promise<ConsumeChatStreamResult> {\n  const res = await opts.start()\n  if (!res.ok || !res.body) {\n    const err = await res.json().catch(() => ({ error: `HTTP ${res.status}` })) as { error?: string }\n    throw new Error(err.error ?? `HTTP ${res.status}`)\n  }\n  let turnId: string | null = null\n  const cb: ChatStreamCallbacks = {\n    ...opts.callbacks,\n    onTurnId: (id) => {\n      turnId = id\n      opts.callbacks.onTurnId?.(id)\n    },\n  }\n  try {\n    return await consumeChatStream(res.body, cb)\n  } catch (transportErr) {\n    if (!turnId || !opts.resume) throw transportErr\n    opts.onResetForResume?.()\n    const resumed = await opts.resume(turnId, 0)\n    if (!resumed.ok || !resumed.body) throw transportErr\n    return await consumeChatStream(resumed.body, cb)\n  }\n}\n"],"mappings":"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","names":["jsx","jsxs"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/agent-app",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "packageManager": "pnpm@10.33.4",
   "description": "Application-shell framework for Tangle agent products: a bounded tool loop, the structured agent\u2192app tool side channel, integration-hub client, per-workspace billing, and crypto \u2014 composed over the Tangle agent substrate through typed seams.",
   "keywords": [