@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/run-controls/panels/BackendTargetPanel.js

@@ -1,8 +1,9 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useClipboard } from "@ai-matrx/kit/clipboard";
 import { toast } from "../../../../host/notify.js";
 import { formatDurationSeconds } from "@ai-matrx/kit/format";
-import React, { useState } from "react";
+import { useState } from "react";
 import { Copy, Check } from "lucide-react";
 import { useAppSelector } from "../../../../store/hooks.js";
 import { selectInstanceUIState } from "../../../redux/execution-system/instance-ui-state/instance-ui-state.selectors.js";
@@ -31,49 +32,55 @@ function CopyableValue({
       setTimeout(() => setCopied(false), 1200);
     });
   };
-  return /* @__PURE__ */ React.createElement("span", { className: cn("flex items-center gap-1.5 min-w-0", className) }, /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: cn(
-        "truncate text-[11px] text-foreground",
-        mono && "font-mono"
-      ),
-      title: value
-    },
-    value
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "quiet",
-      icon: copied ? /* @__PURE__ */ React.createElement(Check, null) : /* @__PURE__ */ React.createElement(Copy, null),
-      glyphTone: copied ? "success" : void 0,
-      onClick: handleCopy,
-      title: "Copy",
-      "aria-label": "Copy",
-      className: "shrink-0"
-    }
-  ));
+  return /* @__PURE__ */ jsxs("span", { className: cn("flex items-center gap-1.5 min-w-0", className), children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "truncate text-[11px] text-foreground",
+          mono && "font-mono"
+        ),
+        title: value,
+        children: value
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "quiet",
+        icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}),
+        glyphTone: copied ? "success" : void 0,
+        onClick: handleCopy,
+        title: "Copy",
+        "aria-label": "Copy",
+        className: "shrink-0"
+      }
+    )
+  ] });
 }
 function Row({
   label,
   children
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline gap-3 py-1 border-b border-border/40 last:border-0" }, /* @__PURE__ */ React.createElement("span", { className: "w-32 min-w-32 shrink-0 text-right text-[11px] text-muted-foreground" }, label), /* @__PURE__ */ React.createElement("span", { className: "flex-1 min-w-0 text-[11px] text-foreground break-all" }, children));
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-3 py-1 border-b border-border/40 last:border-0", children: [
+    /* @__PURE__ */ jsx("span", { className: "w-32 min-w-32 shrink-0 text-right text-[11px] text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 text-[11px] text-foreground break-all", children })
+  ] });
 }
 function Pill({
   variant,
   children
 }) {
   const cls = variant === "active" ? "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/30" : variant === "warn" ? "bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/30" : "bg-muted text-muted-foreground border-border";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "span",
     {
       className: cn(
         "inline-flex items-center px-1.5 py-0.5 rounded border text-[10px] font-mono uppercase tracking-wider",
         cls
-      )
-    },
-    children
+      ),
+      children
+    }
   );
 }
 function maskToken(token) {
@@ -100,13 +107,52 @@ function BackendTargetPanel({
   const channel = overrideUrl ? "override" : "global";
   const effectiveUrl = overrideUrl ?? globalBaseUrl ?? "(unconfigured)";
   const tokenStatus = channel === "override" ? overrideToken ? "minted" : "missing" : "n/a";
-  return /* @__PURE__ */ React.createElement("div", { className: "px-3 py-2 space-y-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 flex-wrap" }, /* @__PURE__ */ React.createElement("span", { className: "text-[11px] text-muted-foreground" }, "Channel:"), channel === "override" ? /* @__PURE__ */ React.createElement(Pill, { variant: "active" }, "Sandbox proxy") : /* @__PURE__ */ React.createElement(Pill, { variant: "muted" }, "Cloud server"), /* @__PURE__ */ React.createElement("span", { className: "text-[11px] text-muted-foreground" }, "\xB7"), /* @__PURE__ */ React.createElement("span", { className: "text-[11px] text-muted-foreground" }, "Editor:"), /* @__PURE__ */ React.createElement(Pill, { variant: editorMode === "sandbox" ? "active" : "muted" }, editorMode)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Row, { label: "Effective URL" }, /* @__PURE__ */ React.createElement(CopyableValue, { value: effectiveUrl })), /* @__PURE__ */ React.createElement(Row, { label: "Auth scheme" }, /* @__PURE__ */ React.createElement("span", null, "Bearer (Supabase JWT)"))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70 pb-1 border-b border-border/40 mb-1" }, "Cloud (global)"), /* @__PURE__ */ React.createElement(Row, { label: "Resolved URL" }, globalBaseUrl ? /* @__PURE__ */ React.createElement(CopyableValue, { value: globalBaseUrl }) : /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/60" }, "(none)"))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70 pb-1 border-b border-border/40 mb-1" }, "Per-conversation override"), /* @__PURE__ */ React.createElement(Row, { label: "Override URL" }, overrideUrl ? /* @__PURE__ */ React.createElement(CopyableValue, { value: overrideUrl }) : /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/60" }, "(none)")), /* @__PURE__ */ React.createElement(Row, { label: "Bearer token" }, overrideToken ? /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[11px]" }, maskToken(overrideToken)), /* @__PURE__ */ React.createElement(CopyableValue, { value: overrideToken, mono: true, className: "hidden" })) : /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/60" }, "(none)")), /* @__PURE__ */ React.createElement(Row, { label: "Token status" }, /* @__PURE__ */ React.createElement(
-    Pill,
-    {
-      variant: tokenStatus === "minted" ? "active" : tokenStatus === "missing" ? "warn" : "muted"
-    },
-    tokenStatus
-  )), overrideTokenError && /* @__PURE__ */ React.createElement(Row, { label: "Mint error" }, /* @__PURE__ */ React.createElement("span", { className: "text-amber-600 dark:text-amber-400 break-words" }, overrideTokenError, /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: overrideTokenError })))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70 pb-1 border-b border-border/40 mb-1" }, "Sandbox binding (codeWorkspace)"), /* @__PURE__ */ React.createElement(Row, { label: "Active sandbox id" }, activeSandboxId ? /* @__PURE__ */ React.createElement(CopyableValue, { value: activeSandboxId }) : /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/60" }, "(none)")), /* @__PURE__ */ React.createElement(Row, { label: "Sandbox proxy URL" }, activeSandboxProxyUrl ? /* @__PURE__ */ React.createElement(CopyableValue, { value: activeSandboxProxyUrl }) : /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/60" }, "(orchestrator hasn\u2019t shipped one for this sandbox)"))), /* @__PURE__ */ React.createElement("p", { className: "text-[10px] text-muted-foreground/70 leading-relaxed" }, "Read-only; redirects only this conversation\u2019s ", /* @__PURE__ */ React.createElement("code", null, "/ai/*"), " calls"));
+  return /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: "Channel:" }),
+      channel === "override" ? /* @__PURE__ */ jsx(Pill, { variant: "active", children: "Sandbox proxy" }) : /* @__PURE__ */ jsx(Pill, { variant: "muted", children: "Cloud server" }),
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: "\xB7" }),
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: "Editor:" }),
+      /* @__PURE__ */ jsx(Pill, { variant: editorMode === "sandbox" ? "active" : "muted", children: editorMode })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Row, { label: "Effective URL", children: /* @__PURE__ */ jsx(CopyableValue, { value: effectiveUrl }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Auth scheme", children: /* @__PURE__ */ jsx("span", { children: "Bearer (Supabase JWT)" }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70 pb-1 border-b border-border/40 mb-1", children: "Cloud (global)" }),
+      /* @__PURE__ */ jsx(Row, { label: "Resolved URL", children: globalBaseUrl ? /* @__PURE__ */ jsx(CopyableValue, { value: globalBaseUrl }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "(none)" }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70 pb-1 border-b border-border/40 mb-1", children: "Per-conversation override" }),
+      /* @__PURE__ */ jsx(Row, { label: "Override URL", children: overrideUrl ? /* @__PURE__ */ jsx(CopyableValue, { value: overrideUrl }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "(none)" }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Bearer token", children: overrideToken ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-[11px]", children: maskToken(overrideToken) }),
+        /* @__PURE__ */ jsx(CopyableValue, { value: overrideToken, mono: true, className: "hidden" })
+      ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "(none)" }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Token status", children: /* @__PURE__ */ jsx(
+        Pill,
+        {
+          variant: tokenStatus === "minted" ? "active" : tokenStatus === "missing" ? "warn" : "muted",
+          children: tokenStatus
+        }
+      ) }),
+      overrideTokenError && /* @__PURE__ */ jsx(Row, { label: "Mint error", children: /* @__PURE__ */ jsxs("span", { className: "text-amber-600 dark:text-amber-400 break-words", children: [
+        overrideTokenError,
+        /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: overrideTokenError })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70 pb-1 border-b border-border/40 mb-1", children: "Sandbox binding (codeWorkspace)" }),
+      /* @__PURE__ */ jsx(Row, { label: "Active sandbox id", children: activeSandboxId ? /* @__PURE__ */ jsx(CopyableValue, { value: activeSandboxId }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "(none)" }) }),
+      /* @__PURE__ */ jsx(Row, { label: "Sandbox proxy URL", children: activeSandboxProxyUrl ? /* @__PURE__ */ jsx(CopyableValue, { value: activeSandboxProxyUrl }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "(orchestrator hasn\u2019t shipped one for this sandbox)" }) })
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground/70 leading-relaxed", children: [
+      "Read-only; redirects only this conversation\u2019s ",
+      /* @__PURE__ */ jsx("code", { children: "/ai/*" }),
+      " calls"
+    ] })
+  ] });
 }
 export {
   BackendTargetPanel

package/dist/agents/components/run-controls/panels/ClientMetricsPanel.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useAppSelector } from "../../../../store/hooks.js";
 import { formatFileSize } from "@ai-matrx/kit/format";
@@ -21,7 +22,7 @@ function ClientMetricsPanel({
   const request = useAppSelector(selector);
   const metrics = request?.clientMetrics ?? null;
   if (!metrics) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       EmptyStats,
       {
         text: (
@@ -31,38 +32,69 @@ function ClientMetricsPanel({
       }
     );
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "px-3 py-2 grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 overflow-y-auto h-full" }, /* @__PURE__ */ React.createElement(StatSection, { title: "Timing" }, /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "Internal latency",
-      value: fmtMs(metrics.internalLatencyMs)
-    }
-  ), /* @__PURE__ */ React.createElement(StatRow, { label: "TTFT", value: fmtMs(metrics.ttftMs) }), /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "Stream duration",
-      value: fmtMs(metrics.streamDurationMs)
-    }
-  ), /* @__PURE__ */ React.createElement(StatRow, { label: "Render delay", value: fmtMs(metrics.renderDelayMs) }), /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "Total client",
-      value: fmtMs(metrics.totalClientDurationMs)
-    }
-  )), /* @__PURE__ */ React.createElement(StatSection, { title: "Payload" }, /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "Accumulated text",
-      value: formatFileSize(metrics.accumulatedTextBytes)
-    }
-  ), /* @__PURE__ */ React.createElement(StatRow, { label: "Total", value: formatFileSize(metrics.totalPayloadBytes) })), /* @__PURE__ */ React.createElement(StatSection, { title: "Event counts" }, /* @__PURE__ */ React.createElement(StatRow, { label: "Total", value: metrics.totalEvents }), /* @__PURE__ */ React.createElement(StatRow, { label: "Chunks", value: metrics.chunkEvents }), /* @__PURE__ */ React.createElement(StatRow, { label: "Reasoning", value: metrics.reasoningChunkEvents }), /* @__PURE__ */ React.createElement(StatRow, { label: "Phases", value: metrics.phaseEvents }), /* @__PURE__ */ React.createElement(StatRow, { label: "Tool events", value: metrics.toolEvents }), /* @__PURE__ */ React.createElement(StatRow, { label: "Render blocks", value: metrics.renderBlockEvents })), /* @__PURE__ */ React.createElement(StatSection, { title: "Records" }, /* @__PURE__ */ React.createElement(StatRow, { label: "Init", value: metrics.initEvents }), /* @__PURE__ */ React.createElement(StatRow, { label: "Completion", value: metrics.completionEvents }), /* @__PURE__ */ React.createElement(StatRow, { label: "Data", value: metrics.dataEvents }), /* @__PURE__ */ React.createElement(StatRow, { label: "Reserved", value: metrics.recordReservedEvents }), /* @__PURE__ */ React.createElement(StatRow, { label: "Updated", value: metrics.recordUpdateEvents }), /* @__PURE__ */ React.createElement(StatRow, { label: "FS Changes", value: metrics.resourceChangedEvents }), metrics.warningEvents > 0 && /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "Warnings",
-      value: metrics.warningEvents,
-      valueClassName: "text-amber-500"
-    }
-  ), metrics.infoEvents > 0 && /* @__PURE__ */ React.createElement(StatRow, { label: "Info", value: metrics.infoEvents }), metrics.otherEvents > 0 && /* @__PURE__ */ React.createElement(StatRow, { label: "Other", value: metrics.otherEvents })));
+  return /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 overflow-y-auto h-full", children: [
+    /* @__PURE__ */ jsxs(StatSection, { title: "Timing", children: [
+      /* @__PURE__ */ jsx(
+        StatRow,
+        {
+          label: "Internal latency",
+          value: fmtMs(metrics.internalLatencyMs)
+        }
+      ),
+      /* @__PURE__ */ jsx(StatRow, { label: "TTFT", value: fmtMs(metrics.ttftMs) }),
+      /* @__PURE__ */ jsx(
+        StatRow,
+        {
+          label: "Stream duration",
+          value: fmtMs(metrics.streamDurationMs)
+        }
+      ),
+      /* @__PURE__ */ jsx(StatRow, { label: "Render delay", value: fmtMs(metrics.renderDelayMs) }),
+      /* @__PURE__ */ jsx(
+        StatRow,
+        {
+          label: "Total client",
+          value: fmtMs(metrics.totalClientDurationMs)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(StatSection, { title: "Payload", children: [
+      /* @__PURE__ */ jsx(
+        StatRow,
+        {
+          label: "Accumulated text",
+          value: formatFileSize(metrics.accumulatedTextBytes)
+        }
+      ),
+      /* @__PURE__ */ jsx(StatRow, { label: "Total", value: formatFileSize(metrics.totalPayloadBytes) })
+    ] }),
+    /* @__PURE__ */ jsxs(StatSection, { title: "Event counts", children: [
+      /* @__PURE__ */ jsx(StatRow, { label: "Total", value: metrics.totalEvents }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Chunks", value: metrics.chunkEvents }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Reasoning", value: metrics.reasoningChunkEvents }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Phases", value: metrics.phaseEvents }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Tool events", value: metrics.toolEvents }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Render blocks", value: metrics.renderBlockEvents })
+    ] }),
+    /* @__PURE__ */ jsxs(StatSection, { title: "Records", children: [
+      /* @__PURE__ */ jsx(StatRow, { label: "Init", value: metrics.initEvents }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Completion", value: metrics.completionEvents }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Data", value: metrics.dataEvents }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Reserved", value: metrics.recordReservedEvents }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Updated", value: metrics.recordUpdateEvents }),
+      /* @__PURE__ */ jsx(StatRow, { label: "FS Changes", value: metrics.resourceChangedEvents }),
+      metrics.warningEvents > 0 && /* @__PURE__ */ jsx(
+        StatRow,
+        {
+          label: "Warnings",
+          value: metrics.warningEvents,
+          valueClassName: "text-amber-500"
+        }
+      ),
+      metrics.infoEvents > 0 && /* @__PURE__ */ jsx(StatRow, { label: "Info", value: metrics.infoEvents }),
+      metrics.otherEvents > 0 && /* @__PURE__ */ jsx(StatRow, { label: "Other", value: metrics.otherEvents })
+    ] })
+  ] });
 }
 export {
   ClientMetricsPanel

package/dist/agents/components/run-controls/panels/ModelContextPanel.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { formatDurationSeconds, formatCount } from "@ai-matrx/kit/format";
 import { useEffect, useMemo, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../../../store/hooks.js";
@@ -68,7 +69,7 @@ function ModelContextPanel({ conversationId }) {
     return () => controller.abort();
   }, [canLoad, conversationId, dispatch, readAttempt]);
   if (!state && (organizationState === "required" || organizationState === "unavailable")) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       OrganizationContextNotice,
       {
         compact: true,
@@ -80,7 +81,7 @@ function ModelContextPanel({ conversationId }) {
     );
   }
   if (!state && contextReadError) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ReadFailure,
       {
         error: contextReadError,
@@ -93,7 +94,7 @@ function ModelContextPanel({ conversationId }) {
     );
   }
   if (!state) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       EmptyStats,
       {
         text: organizationState === "resolving" ? "Reading this conversation's context\u2026" : "No context measurements yet. Fire a turn to populate."
@@ -103,41 +104,64 @@ function ModelContextPanel({ conversationId }) {
   const fillPct = Math.round(fillRatio * 100);
   const fillTone = fillRatio < 0.6 ? "text-emerald-500" : fillRatio < 0.85 ? "text-amber-500" : "text-rose-500";
   const fillBar = fillRatio < 0.6 ? "bg-emerald-500" : fillRatio < 0.85 ? "bg-amber-500" : "bg-rose-500";
-  return /* @__PURE__ */ React.createElement("div", { className: "px-3 py-2 grid grid-cols-1 gap-y-3 overflow-y-auto h-full" }, /* @__PURE__ */ React.createElement(StatSection, { title: "Now" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between text-[11px]" }, /* @__PURE__ */ React.createElement("span", { className: cn("font-mono tabular-nums", fillTone) }, fillPct, "% full"), /* @__PURE__ */ React.createElement("span", { className: "font-mono tabular-nums text-muted-foreground" }, fmtTokens(estTokens), " / ", fmtTokens(DEFAULT_CONTEXT_WINDOW_TOKENS), " ", "est tokens")), /* @__PURE__ */ React.createElement("div", { className: "h-1.5 w-full rounded-full bg-muted overflow-hidden" }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cn("h-full transition-all duration-300", fillBar),
-      style: { width: `${fillPct}%` }
-    }
-  )), /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "Last request",
-      value: `${fmtTokens(state.lastRequestInputTokens)} in \xB7 ${fmtTokens(
-        state.lastRequestCachedTokens
-      )} cached \xB7 ${fmtTokens(state.lastRequestOutputTokens)} out`
-    }
-  ), /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "Visible to model",
-      value: `${fmtTokens(state.totalCharsVisibleToModel)} chars \xB7 ${state.messageCountVisible} messages`
-    }
-  ), /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "Cache",
-      value: cacheAlive ? `alive (${formatSecs(cacheSecs)} left)` : "expired / unknown",
-      valueClassName: cacheAlive ? "text-emerald-500" : "text-muted-foreground"
-    }
-  ), state.measuredAt && /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "Measured at",
-      value: new Date(state.measuredAt).toLocaleTimeString(),
-      valueClassName: "text-muted-foreground"
-    }
-  )), /* @__PURE__ */ React.createElement(StatSection, { title: "What just happened" }, trim ? /* @__PURE__ */ React.createElement(TrimSummaryView, { trim }) : /* @__PURE__ */ React.createElement("p", { className: "text-[11px] text-muted-foreground/80" }, "No trim activity recorded for this turn.")), /* @__PURE__ */ React.createElement(StatSection, { title: "Raw provider usage" }, rawUsage && Object.keys(rawUsage).length > 0 ? /* @__PURE__ */ React.createElement("pre", { className: "text-[10px] leading-snug bg-muted/40 rounded p-2 overflow-x-auto font-mono" }, JSON.stringify(rawUsage, null, 2)) : /* @__PURE__ */ React.createElement("p", { className: "text-[11px] text-muted-foreground/80" }, "No raw provider usage available \u2014 try a turn that returns a real response.")));
+  return /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 grid grid-cols-1 gap-y-3 overflow-y-auto h-full", children: [
+    /* @__PURE__ */ jsxs(StatSection, { title: "Now", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-[11px]", children: [
+        /* @__PURE__ */ jsxs("span", { className: cn("font-mono tabular-nums", fillTone), children: [
+          fillPct,
+          "% full"
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "font-mono tabular-nums text-muted-foreground", children: [
+          fmtTokens(estTokens),
+          " / ",
+          fmtTokens(DEFAULT_CONTEXT_WINDOW_TOKENS),
+          " ",
+          "est tokens"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full rounded-full bg-muted overflow-hidden", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("h-full transition-all duration-300", fillBar),
+          style: { width: `${fillPct}%` }
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        StatRow,
+        {
+          label: "Last request",
+          value: `${fmtTokens(state.lastRequestInputTokens)} in \xB7 ${fmtTokens(
+            state.lastRequestCachedTokens
+          )} cached \xB7 ${fmtTokens(state.lastRequestOutputTokens)} out`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatRow,
+        {
+          label: "Visible to model",
+          value: `${fmtTokens(state.totalCharsVisibleToModel)} chars \xB7 ${state.messageCountVisible} messages`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatRow,
+        {
+          label: "Cache",
+          value: cacheAlive ? `alive (${formatSecs(cacheSecs)} left)` : "expired / unknown",
+          valueClassName: cacheAlive ? "text-emerald-500" : "text-muted-foreground"
+        }
+      ),
+      state.measuredAt && /* @__PURE__ */ jsx(
+        StatRow,
+        {
+          label: "Measured at",
+          value: new Date(state.measuredAt).toLocaleTimeString(),
+          valueClassName: "text-muted-foreground"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(StatSection, { title: "What just happened", children: trim ? /* @__PURE__ */ jsx(TrimSummaryView, { trim }) : /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground/80", children: "No trim activity recorded for this turn." }) }),
+    /* @__PURE__ */ jsx(StatSection, { title: "Raw provider usage", children: rawUsage && Object.keys(rawUsage).length > 0 ? /* @__PURE__ */ jsx("pre", { className: "text-[10px] leading-snug bg-muted/40 rounded p-2 overflow-x-auto font-mono", children: JSON.stringify(rawUsage, null, 2) }) : /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground/80", children: "No raw provider usage available \u2014 try a turn that returns a real response." }) })
+  ] });
 }
 function TrimSummaryView({ trim }) {
   if (!trim) return null;
@@ -145,14 +169,38 @@ function TrimSummaryView({ trim }) {
   const rewrittenCount = trim.blocks_rewritten ?? 0;
   const freed = trim.freed_chars ?? 0;
   const rewrittenBlocks = trim.rewritten_blocks ?? [];
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "Outcome",
-      value: skipped ? `skipped (${skipped})` : `${rewrittenCount} block(s) rewritten`,
-      valueClassName: skipped ? "text-amber-500" : rewrittenCount > 0 ? "text-emerald-500" : "text-muted-foreground"
-    }
-  ), rewrittenCount > 0 && /* @__PURE__ */ React.createElement(StatRow, { label: "Freed", value: `${formatCount(freed)} chars` }), rewrittenBlocks.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "text-[10px] font-mono text-muted-foreground space-y-0.5 mt-1" }, rewrittenBlocks.slice(0, 8).map((b) => /* @__PURE__ */ React.createElement("div", { key: `${b.message_position}:${b.call_id}`, className: "truncate" }, "pos ", b.message_position, " \xB7 ", b.tool_name, " (", b.tier, ") \xB7", " ", formatCount(b.before_chars), " \u2192 ", formatCount(b.after_chars))), rewrittenBlocks.length > 8 && /* @__PURE__ */ React.createElement("div", { className: "italic" }, "\u2026and ", rewrittenBlocks.length - 8, " more")), skipped === "cache_protect" && /* @__PURE__ */ React.createElement("p", { className: "text-[10px] text-muted-foreground/80 mt-1" }, "Cache protected; retries at 5K tokens saved or cache expiry"));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      StatRow,
+      {
+        label: "Outcome",
+        value: skipped ? `skipped (${skipped})` : `${rewrittenCount} block(s) rewritten`,
+        valueClassName: skipped ? "text-amber-500" : rewrittenCount > 0 ? "text-emerald-500" : "text-muted-foreground"
+      }
+    ),
+    rewrittenCount > 0 && /* @__PURE__ */ jsx(StatRow, { label: "Freed", value: `${formatCount(freed)} chars` }),
+    rewrittenBlocks.length > 0 && /* @__PURE__ */ jsxs("div", { className: "text-[10px] font-mono text-muted-foreground space-y-0.5 mt-1", children: [
+      rewrittenBlocks.slice(0, 8).map((b) => /* @__PURE__ */ jsxs("div", { className: "truncate", children: [
+        "pos ",
+        b.message_position,
+        " \xB7 ",
+        b.tool_name,
+        " (",
+        b.tier,
+        ") \xB7",
+        " ",
+        formatCount(b.before_chars),
+        " \u2192 ",
+        formatCount(b.after_chars)
+      ] }, `${b.message_position}:${b.call_id}`)),
+      rewrittenBlocks.length > 8 && /* @__PURE__ */ jsxs("div", { className: "italic", children: [
+        "\u2026and ",
+        rewrittenBlocks.length - 8,
+        " more"
+      ] })
+    ] }),
+    skipped === "cache_protect" && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground/80 mt-1", children: "Cache protected; retries at 5K tokens saved or cache expiry" })
+  ] });
 }
 function formatSecs(secs) {
   if (secs <= 0) return "expired";

package/dist/agents/components/run-controls/panels/RequestStatsPanel.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCostDisplay } from "../../../cost.js";
 import { useMemo } from "react";
 import { useAppSelector } from "../../../../store/hooks.js";
@@ -24,7 +25,7 @@ function RequestStatsPanel({
   );
   const request = useAppSelector(selector);
   if (!request) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       EmptyStats,
       {
         text: (
@@ -39,58 +40,86 @@ function RequestStatsPanel({
   const timing = result?.timing_stats ?? void 0;
   const toolStats = result?.tool_call_stats ?? void 0;
   const isComplete = request.status === "complete" || request.status === "error";
-  return /* @__PURE__ */ React.createElement("div", { className: "px-3 py-2 grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 overflow-y-auto h-full" }, /* @__PURE__ */ React.createElement(StatSection, { title: "Status" }, /* @__PURE__ */ React.createElement(StatRow, { label: "Request", value: request.status }), /* @__PURE__ */ React.createElement(StatRow, { label: "Finish reason", value: result?.finish_reason ?? "\u2014" }), /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "Iterations",
-      value: result?.iterations != null ? String(result.iterations) : "\u2014"
-    }
-  ), request.error && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "Error",
-      value: `[${request.error.error_type}${request.error.code ? `:${request.error.code}` : ""}] ${request.error.message}`,
-      valueClassName: "text-destructive text-[10px]"
-    }
-  ), request.error.user_message && /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "User message",
-      value: request.error.user_message,
-      valueClassName: "text-destructive text-[10px]"
-    }
-  ))), /* @__PURE__ */ React.createElement(StatSection, { title: "Tokens" }, /* @__PURE__ */ React.createElement(StatRow, { label: "Input", value: fmtTokens(usage?.input_tokens) }), /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "Cached in",
-      value: fmtTokens(usage?.cached_input_tokens)
-    }
-  ), /* @__PURE__ */ React.createElement(StatRow, { label: "Output", value: fmtTokens(usage?.output_tokens) }), /* @__PURE__ */ React.createElement(StatRow, { label: "Total", value: fmtTokens(usage?.total_tokens) })), /* @__PURE__ */ React.createElement(StatSection, { title: "Cost & duration" }, /* @__PURE__ */ React.createElement(StatRow, { label: "Cost", value: fmtCost(usage?.total_cost, costUnit) }), /* @__PURE__ */ React.createElement(StatRow, { label: "Total", value: fmtServerSeconds(timing?.total_duration) }), /* @__PURE__ */ React.createElement(StatRow, { label: "API", value: fmtServerSeconds(timing?.api_duration) }), /* @__PURE__ */ React.createElement(StatRow, { label: "Tools", value: fmtServerSeconds(timing?.tool_duration) })), /* @__PURE__ */ React.createElement(StatSection, { title: "Tools" }, /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "Tool calls",
-      value: toolStats?.total_tool_calls != null ? String(toolStats.total_tool_calls) : "\u2014"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "Iters w/ tools",
-      value: toolStats?.iterations_with_tools != null ? String(toolStats.iterations_with_tools) : "\u2014"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "Tool types",
-      value: toolStats?.by_tool ? Object.keys(toolStats.by_tool).length : "\u2014"
-    }
-  ), !isComplete && /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "State",
-      value: "streaming\u2026",
-      valueClassName: "text-blue-500 text-[10px]"
-    }
-  )));
+  return /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 overflow-y-auto h-full", children: [
+    /* @__PURE__ */ jsxs(StatSection, { title: "Status", children: [
+      /* @__PURE__ */ jsx(StatRow, { label: "Request", value: request.status }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Finish reason", value: result?.finish_reason ?? "\u2014" }),
+      /* @__PURE__ */ jsx(
+        StatRow,
+        {
+          label: "Iterations",
+          value: result?.iterations != null ? String(result.iterations) : "\u2014"
+        }
+      ),
+      request.error && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          StatRow,
+          {
+            label: "Error",
+            value: `[${request.error.error_type}${request.error.code ? `:${request.error.code}` : ""}] ${request.error.message}`,
+            valueClassName: "text-destructive text-[10px]"
+          }
+        ),
+        request.error.user_message && /* @__PURE__ */ jsx(
+          StatRow,
+          {
+            label: "User message",
+            value: request.error.user_message,
+            valueClassName: "text-destructive text-[10px]"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(StatSection, { title: "Tokens", children: [
+      /* @__PURE__ */ jsx(StatRow, { label: "Input", value: fmtTokens(usage?.input_tokens) }),
+      /* @__PURE__ */ jsx(
+        StatRow,
+        {
+          label: "Cached in",
+          value: fmtTokens(usage?.cached_input_tokens)
+        }
+      ),
+      /* @__PURE__ */ jsx(StatRow, { label: "Output", value: fmtTokens(usage?.output_tokens) }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Total", value: fmtTokens(usage?.total_tokens) })
+    ] }),
+    /* @__PURE__ */ jsxs(StatSection, { title: "Cost & duration", children: [
+      /* @__PURE__ */ jsx(StatRow, { label: "Cost", value: fmtCost(usage?.total_cost, costUnit) }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Total", value: fmtServerSeconds(timing?.total_duration) }),
+      /* @__PURE__ */ jsx(StatRow, { label: "API", value: fmtServerSeconds(timing?.api_duration) }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Tools", value: fmtServerSeconds(timing?.tool_duration) })
+    ] }),
+    /* @__PURE__ */ jsxs(StatSection, { title: "Tools", children: [
+      /* @__PURE__ */ jsx(
+        StatRow,
+        {
+          label: "Tool calls",
+          value: toolStats?.total_tool_calls != null ? String(toolStats.total_tool_calls) : "\u2014"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatRow,
+        {
+          label: "Iters w/ tools",
+          value: toolStats?.iterations_with_tools != null ? String(toolStats.iterations_with_tools) : "\u2014"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatRow,
+        {
+          label: "Tool types",
+          value: toolStats?.by_tool ? Object.keys(toolStats.by_tool).length : "\u2014"
+        }
+      ),
+      !isComplete && /* @__PURE__ */ jsx(
+        StatRow,
+        {
+          label: "State",
+          value: "streaming\u2026",
+          valueClassName: "text-blue-500 text-[10px]"
+        }
+      )
+    ] })
+  ] });
 }
 export {
   RequestStatsPanel