@wrongstack/webui 0.273.0 → 0.273.1

package/dist/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/wrongstack.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>WrongStack WebUI</title>
-    <script type="module" crossorigin src="/assets/index-CM62rXoC.js"></script>
+    <script type="module" crossorigin src="/assets/index-D0dNaLPf.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-QTnfLwEv.js">
     <link rel="modulepreload" crossorigin href="/assets/vendor-P9eRrO6V.js">
     <link rel="stylesheet" crossorigin href="/assets/vendor-Doh9e_v3.css">

package/dist/index.js

@@ -185,7 +185,7 @@ function httpOriginForAuth() {
 }
 
 // src/lib/ws-client.ts
-var WrongStackWebSocketClient = class {
+var WrongStackWebSocketClient = class _WrongStackWebSocketClient {
   ws = null;
   url;
   handlers = /* @__PURE__ */ new Map();
@@ -195,6 +195,14 @@ var WrongStackWebSocketClient = class {
   shouldReconnect = true;
   reconnectTimer = null;
   messageQueue = [];
+  // Cap on the offline-queue depth. Past this, send() drops the OLDEST
+  // queued message before appending the new one (FIFO drop). Bounds
+  // memory under long disconnects and prevents stale commands from
+  // flooding the server on reconnect -- a 50k-deep queue of stale
+  // user_messages re-firing on next open would just confuse the model
+  // and waste its context window. 1000 is a generous budget for a
+  // genuine reconnect window (typical reconnect <10s; <50 msg/s).
+  static MAX_QUEUED_MESSAGES = 1e3;
   pendingConfirms = /* @__PURE__ */ new Map();
   sessionId = null;
   /** Stored last close reason / error message so the UI can show "what
@@ -440,6 +448,18 @@ var WrongStackWebSocketClient = class {
     if (this.ws?.readyState === WebSocket.OPEN) {
       this.ws.send(JSON.stringify(message));
     } else {
+      if (this.messageQueue.length >= _WrongStackWebSocketClient.MAX_QUEUED_MESSAGES) {
+        const dropped = this.messageQueue.shift();
+        if (dropped) {
+          console.warn(JSON.stringify({
+            level: "warn",
+            event: "ws_client.message_queue_full",
+            cap: _WrongStackWebSocketClient.MAX_QUEUED_MESSAGES,
+            droppedType: dropped.type,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString()
+          }));
+        }
+      }
       this.messageQueue.push(message);
     }
   }
@@ -742,6 +762,7 @@ var WrongStackWebSocketClient = class {
       clearTimeout(this.reconnectTimer);
       this.reconnectTimer = null;
     }
+    this.messageQueue.length = 0;
     this.ws?.close();
     this.ws = null;
   }
@@ -1536,6 +1557,10 @@ function pushTimeline(timeline, event) {
 function bumpSparkline(bins) {
   return [bins[0] + 1, ...bins.slice(0, SPARKLINE_BINS - 1)];
 }
+function clampContextPct(pct) {
+  if (!Number.isFinite(pct)) return 0;
+  return Math.max(0, Math.min(100, pct));
+}
 var useFleetStore = create10()((set, get) => ({
   agents: /* @__PURE__ */ new Map(),
   leaderId: void 0,
@@ -1703,7 +1728,7 @@ var useFleetStore = create10()((set, get) => ({
         });
         break;
       case "ctx_pct":
-        next.ctxPct = Math.round(Math.max(0, e.load ?? 0) * 100);
+        next.ctxPct = clampContextPct(Math.round(Math.max(0, e.load ?? 0) * 100));
         next.ctxTokens = e.tokens ?? next.ctxTokens;
         next.maxContext = e.maxContext ?? next.maxContext;
         if (next.ctxPct >= 80 && !next.budgetWarning) {
@@ -2033,6 +2058,10 @@ var useFileStore = create17()((set, get) => ({
 
 // src/stores/viz-store.ts
 import { create as create18 } from "zustand";
+function contextPctFromLoad(load) {
+  const value = typeof load === "number" && Number.isFinite(load) ? load : 0;
+  return Math.max(0, Math.min(100, Math.round(value * 100)));
+}
 function inferKind(event, isTarget = false) {
   if (isTarget && event.target) {
     if (event.kind === "agent:tool") return "tool";
@@ -2472,7 +2501,7 @@ function wsToVizEvent(wsType, payload) {
             timestamp: Date.now(),
             source: agentId,
             target: "session",
-            label: `ctx ${Math.round((payload.load ?? 0) * 100)}%`,
+            label: `ctx ${contextPctFromLoad(payload.load)}%`,
             magnitude: payload.tokens ?? 0,
             data: payload,
             color: NODE_COLORS.agent,
@@ -2570,7 +2599,6 @@ function wsToVizEvent(wsType, payload) {
       };
     }
     case "ctx.pct": {
-      const load = payload.load ?? 0;
       const tokens = payload.tokens ?? 0;
       return {
         id: nextId(),
@@ -2578,7 +2606,7 @@ function wsToVizEvent(wsType, payload) {
         timestamp: Date.now(),
         source: "leader",
         target: "session",
-        label: `ctx ${Math.round(load * 100)}%`,
+        label: `ctx ${contextPctFromLoad(payload.load)}%`,
         magnitude: tokens,
         data: payload,
         color: NODE_COLORS.agent,
@@ -2710,6 +2738,20 @@ function deriveMonitorStats(sessions) {
   }
   return { clientCounts, totalAgents, activeAgents, aggregate };
 }
+function clampCtxPct(pct) {
+  if (pct === void 0) return void 0;
+  if (!Number.isFinite(pct)) return 0;
+  return Math.max(0, Math.min(100, Math.round(pct)));
+}
+function normalizeLiveSessions(sessions) {
+  return sessions.map((session) => ({
+    ...session,
+    agents: session.agents.map((agent) => ({
+      ...agent,
+      ctxPct: clampCtxPct(agent.ctxPct)
+    }))
+  }));
+}
 var mailActivitySeq = 0;
 var useMonitorStore = create19()((set) => ({
   clientCounts: { tui: 0, webui: 0, repl: 0 },
@@ -2724,11 +2766,14 @@ var useMonitorStore = create19()((set) => ({
   aggregate: { toolCalls: 0, costUsd: 0, tokensIn: 0, tokensOut: 0 },
   lastUpdated: Date.now(),
   setClientCounts: (counts) => set({ clientCounts: counts, lastUpdated: Date.now() }),
-  setLiveSessions: (sessions) => set({
-    liveSessions: sessions,
-    ...deriveMonitorStats(sessions),
-    lastUpdated: Date.now()
-  }),
+  setLiveSessions: (sessions) => {
+    const normalized = normalizeLiveSessions(sessions);
+    set({
+      liveSessions: normalized,
+      ...deriveMonitorStats(normalized),
+      lastUpdated: Date.now()
+    });
+  },
   addMailActivity: (activity) => set((state) => ({
     mailActivity: [{ ...activity, seq: activity.seq ?? ++mailActivitySeq }, ...state.mailActivity].slice(0, 50),
     lastUpdated: Date.now()
@@ -3661,10 +3706,18 @@ function handleContextCompacted(msg) {
 function handleCompactionFailed(msg) {
   pipeViz2(msg);
   const payload = msg.payload;
-  const load = payload.maxContext > 0 ? Math.round(payload.tokens / payload.maxContext * 100) : 0;
+  let load;
+  let label;
+  if (payload.budget && payload.budget.availableInputTokens > 0) {
+    load = Math.min(100, Math.max(0, Math.round(payload.budget.load * 100)));
+    label = "input budget";
+  } else {
+    load = payload.maxContext > 0 ? Math.min(100, Math.max(0, Math.round(payload.tokens / payload.maxContext * 100))) : 0;
+    label = "context";
+  }
   useChatStore.getState().addMessage({
     role: "assistant",
-    content: `Compaction failed at ${payload.level} (${load}% context): ${payload.message}`,
+    content: `Compaction failed at ${payload.level} (${load}% ${label}): ${payload.message}`,
     isError: payload.fatal
   });
   toast.error(`Compaction failed: ${payload.message}`);
@@ -11545,6 +11598,10 @@ function getTextColor(pct) {
   if (pct >= 60) return "text-[hsl(var(--warning))]";
   return "text-[hsl(var(--success))]";
 }
+function clampPct(pct) {
+  if (!Number.isFinite(pct)) return 0;
+  return Math.max(0, Math.min(100, pct));
+}
 function ContextBar({
   pct,
   tokens,
@@ -11554,7 +11611,7 @@ function ContextBar({
   className,
   onClick
 }) {
-  const clamped = Math.max(0, Math.min(200, pct));
+  const clamped = clampPct(pct);
   const eighths = Math.round(clamped / 100 * segments * 8);
   const bars = [];
   let remaining = eighths;
@@ -11563,7 +11620,7 @@ function ContextBar({
     bars.push({ fill: segFill });
     remaining -= segFill;
   }
-  const pctText = pct >= 100 ? `${Math.round(pct)}%+` : `${Math.round(pct)}%`;
+  const pctText = `${Math.round(clamped)}%`;
   const tokenText = showTokens && tokens !== void 0 && maxTokens !== void 0 && maxTokens > 0 ? ` ${fmtTok(tokens)}/${fmtTok(maxTokens)}` : "";
   return /* @__PURE__ */ jsxs28(
     "span",
@@ -11571,8 +11628,8 @@ function ContextBar({
       className: cn(
         "inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[11px] font-mono font-medium shrink-0",
         onClick && "cursor-pointer hover:ring-1 hover:ring-ring transition-shadow",
-        getTextColor(pct),
-        pct >= 75 ? "bg-red-500/10" : pct >= 60 ? "bg-amber-500/10" : "bg-emerald-500/10",
+        getTextColor(clamped),
+        clamped >= 75 ? "bg-red-500/10" : clamped >= 60 ? "bg-amber-500/10" : "bg-emerald-500/10",
         className
       ),
       title: (tokens !== void 0 && maxTokens !== void 0 ? `Context window: ${tokens.toLocaleString()} / ${maxTokens.toLocaleString()} tokens (${pctText})` : `Context window: ${pctText}`) + (onClick ? " \u2014 click for breakdown" : ""),
@@ -11595,7 +11652,7 @@ function ContextBar({
           {
             className: cn(
               "tabular-nums w-[0.55em] text-center",
-              b.fill > 0 ? getTextColor(pct) : "text-muted-foreground/30"
+              b.fill > 0 ? getTextColor(clamped) : "text-muted-foreground/30"
             ),
             children: SEGMENT_FILL[b.fill] ?? " "
           },
@@ -11615,8 +11672,8 @@ function ContextFillBar({
   className,
   onClick
 }) {
-  const clamped = Math.max(0, Math.min(200, pct));
-  const pctText = pct > 100 ? `${Math.round(pct)}%+` : `${Math.round(pct)}%`;
+  const clamped = clampPct(pct);
+  const pctText = `${Math.round(clamped)}%`;
   const tokenText = showTokens && tokens !== void 0 && maxTokens !== void 0 && maxTokens > 0 ? ` ${fmtTok(tokens)}/${fmtTok(maxTokens)}` : "";
   return /* @__PURE__ */ jsxs28(
     "span",
@@ -11644,14 +11701,14 @@ function ContextFillBar({
         /* @__PURE__ */ jsx31("span", { className: "h-1.5 w-16 overflow-hidden rounded-full bg-muted shrink-0", children: /* @__PURE__ */ jsx31(
           "span",
           {
-            className: cn("h-full rounded-full transition-all duration-300", getColor(pct)),
+            className: cn("h-full rounded-full transition-all duration-300", getColor(clamped)),
             style: { width: `${Math.max(2, clamped)}%` }
           }
         ) }),
         /* @__PURE__ */ jsx31(
           "span",
           {
-            className: cn("text-[11px] font-mono tabular-nums font-medium", getTextColor(pct)),
+            className: cn("text-[11px] font-mono tabular-nums font-medium", getTextColor(clamped)),
             children: pctText
           }
         ),
@@ -14156,7 +14213,7 @@ function ChatView() {
     document.addEventListener("open:context-breakdown", handler);
     return () => document.removeEventListener("open:context-breakdown", handler);
   }, []);
-  const ctxPct = maxContext > 0 && lastInputTokens > 0 ? Math.round(lastInputTokens / maxContext * 100) : 0;
+  const ctxPct = maxContext > 0 && lastInputTokens > 0 ? Math.min(100, Math.round(lastInputTokens / maxContext * 100)) : 0;
   const _ctxTone = ctxPct >= 85 ? "bg-red-500/15 text-red-600 dark:text-red-400" : ctxPct >= 70 ? "bg-amber-500/15 text-amber-600 dark:text-amber-400" : "bg-muted text-muted-foreground";
   const [pinnedToBottom, setPinnedToBottom] = useState33(true);
   const [unreadCount, setUnreadCount] = useState33(0);
@@ -20874,6 +20931,7 @@ function AgentDetail({
   const [copied, setCopied] = useState47(false);
   const leaderId = useFleetStore((s) => s.leaderId);
   const isLeader = agent.id === leaderId;
+  const ctxPct = Math.min(100, Math.max(0, agent.ctxPct));
   const handleCopy = useCallback24(async (text) => {
     try {
       await navigator.clipboard.writeText(text);
@@ -20882,7 +20940,7 @@ function AgentDetail({
     } catch {
     }
   }, []);
-  const ctxTone = agent.ctxPct >= 85 ? "bg-red-500/15 text-red-600 dark:text-red-400" : agent.ctxPct >= 70 ? "bg-amber-500/15 text-amber-600 dark:text-amber-400" : "bg-muted text-muted-foreground";
+  const ctxTone = ctxPct >= 85 ? "bg-red-500/15 text-red-600 dark:text-red-400" : ctxPct >= 70 ? "bg-amber-500/15 text-amber-600 dark:text-amber-400" : "bg-muted text-muted-foreground";
   return /* @__PURE__ */ jsx76("div", { className: "fixed inset-0 z-50 flex items-start justify-center pt-[10vh] bg-black/40 backdrop-blur-sm", children: /* @__PURE__ */ jsxs69("div", { className: "w-full max-w-xl max-h-[80vh] overflow-y-auto rounded-xl border bg-card shadow-2xl", children: [
     /* @__PURE__ */ jsxs69(
       "div",
@@ -20972,7 +21030,7 @@ function AgentDetail({
         /* @__PURE__ */ jsxs69("div", { className: "flex items-center justify-between text-[10px]", children: [
           /* @__PURE__ */ jsx76("span", { className: "text-muted-foreground", children: "Context window" }),
           /* @__PURE__ */ jsxs69("span", { className: cn("tabular font-medium", ctxTone.replace(/bg-\S+\s*/g, "")), children: [
-            agent.ctxPct,
+            ctxPct,
             "%"
           ] })
         ] }),
@@ -20981,9 +21039,9 @@ function AgentDetail({
           {
             className: cn(
               "h-full rounded-full transition-all",
-              agent.ctxPct >= 85 ? "bg-destructive" : agent.ctxPct >= 70 ? "bg-[hsl(var(--warning))]" : "bg-primary"
+              ctxPct >= 85 ? "bg-destructive" : ctxPct >= 70 ? "bg-[hsl(var(--warning))]" : "bg-primary"
             ),
-            style: { width: `${Math.min(200, Math.max(2, agent.ctxPct))}%` }
+            style: { width: `${Math.max(2, ctxPct)}%` }
           }
         ) }),
         /* @__PURE__ */ jsxs69("div", { className: "text-[10px] text-muted-foreground tabular text-right", children: [
@@ -21094,6 +21152,7 @@ function AgentCard({
   const meta2 = STATUS_META2[a.status];
   const active = a.status === "running";
   const tool = a.currentTool ?? a.lastTool;
+  const ctxPct = Math.min(100, Math.max(0, a.ctxPct));
   return /* @__PURE__ */ jsxs69(
     "button",
     {
@@ -21143,18 +21202,18 @@ function AgentCard({
             ]
           }
         ),
-        active && a.maxContext > 0 && /* @__PURE__ */ jsxs69("div", { className: "flex items-center gap-1", title: `Context ${a.ctxPct}%`, children: [
+        active && a.maxContext > 0 && /* @__PURE__ */ jsxs69("div", { className: "flex items-center gap-1", title: `Context ${ctxPct}%`, children: [
           /* @__PURE__ */ jsx76("div", { className: "h-1 flex-1 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx76(
             "div",
             {
               className: cn(
                 "h-full rounded-full transition-all",
-                a.ctxPct >= 85 ? "bg-destructive" : a.ctxPct >= 70 ? "bg-[hsl(var(--warning))]" : "bg-primary"
+                ctxPct >= 85 ? "bg-destructive" : ctxPct >= 70 ? "bg-[hsl(var(--warning))]" : "bg-primary"
               ),
-              style: { width: `${Math.min(200, Math.max(2, a.ctxPct))}%` }
+              style: { width: `${Math.max(2, ctxPct)}%` }
             }
           ) }),
-          /* @__PURE__ */ jsx76("span", { className: "tabular text-[9px] text-muted-foreground", children: a.maxContext > 0 ? `${a.ctxPct}%` : "\u2014" })
+          /* @__PURE__ */ jsx76("span", { className: "tabular text-[9px] text-muted-foreground", children: a.maxContext > 0 ? `${ctxPct}%` : "\u2014" })
         ] }),
         a.error && /* @__PURE__ */ jsx76(
           "div",
@@ -21920,7 +21979,7 @@ function SessionPanel() {
     () => Array.from(fleetAgents.values()).filter((a) => a.status === "running").length,
     [fleetAgents]
   );
-  const ctxPct = maxContext > 0 && lastInputTokens > 0 ? Math.round(lastInputTokens / maxContext * 100) : 0;
+  const ctxPct = maxContext > 0 && lastInputTokens > 0 ? Math.min(100, Math.round(lastInputTokens / maxContext * 100)) : 0;
   const pinnedRows = pinnedIds.map((id) => messages.find((m) => m.id === id)).filter((m) => !!m && m.content.length > 0);
   const send = (msg) => getWSClient(wsUrl)?.send?.(msg);
   return /* @__PURE__ */ jsxs74("div", { className: "flex-1 overflow-y-auto", children: [
@@ -25037,6 +25096,7 @@ function FleetAgentDetailPanel({
   const [showFullToolLog, setShowFullToolLog] = useState60(false);
   const meta2 = STATUS_META6[agent.status];
   const active = agent.status === "running";
+  const ctxPct = Math.min(100, Math.max(0, agent.ctxPct));
   const handleCopy = useCallback35(async (text) => {
     try {
       await navigator.clipboard.writeText(text);
@@ -25155,13 +25215,13 @@ function FleetAgentDetailPanel({
               {
                 className: cn(
                   "h-full rounded-full transition-all",
-                  agent.ctxPct >= 85 ? "bg-destructive" : agent.ctxPct >= 70 ? "bg-amber-500" : "bg-emerald-500"
+                  ctxPct >= 85 ? "bg-destructive" : ctxPct >= 70 ? "bg-amber-500" : "bg-emerald-500"
                 ),
-                style: { width: `${Math.min(200, agent.ctxPct)}%` }
+                style: { width: `${ctxPct}%` }
               }
             ) }),
             /* @__PURE__ */ jsxs89("span", { className: "text-[10px] text-muted-foreground tabular-nums font-mono", children: [
-              agent.ctxPct,
+              ctxPct,
               "% used"
             ] })
           ] })
@@ -25295,6 +25355,7 @@ function FleetAgentRow({
 }) {
   const meta2 = STATUS_META6[agent.status];
   const active = agent.status === "running";
+  const ctxPct = Math.min(100, Math.max(0, agent.ctxPct));
   return /* @__PURE__ */ jsxs89(
     "button",
     {
@@ -25331,12 +25392,12 @@ function FleetAgentRow({
             {
               className: cn(
                 "h-full rounded-full transition-all",
-                agent.ctxPct >= 85 ? "bg-destructive" : agent.ctxPct >= 70 ? "bg-amber-500" : "bg-emerald-500"
+                ctxPct >= 85 ? "bg-destructive" : ctxPct >= 70 ? "bg-amber-500" : "bg-emerald-500"
               ),
-              style: { width: `${Math.min(200, agent.ctxPct)}%` }
+              style: { width: `${ctxPct}%` }
             }
           ) }),
-          /* @__PURE__ */ jsx96("span", { className: "text-[9px] tabular-nums text-muted-foreground font-mono leading-none", children: agent.maxContext > 0 ? `${agent.ctxPct}%` : "\u2014" })
+          /* @__PURE__ */ jsx96("span", { className: "text-[9px] tabular-nums text-muted-foreground font-mono leading-none", children: agent.maxContext > 0 ? `${ctxPct}%` : "\u2014" })
         ] }),
         /* @__PURE__ */ jsx96("span", { className: "tabular-nums text-[10px] text-muted-foreground", children: agent.extensions > 0 ? `\u26A1\xD7${agent.extensions}` : "\u2014" }),
         /* @__PURE__ */ jsx96("span", { className: "text-[9px] text-destructive truncate", title: agent.failureReason, children: agent.failureReason ?? "" })
@@ -27758,6 +27819,9 @@ function feedColor(kind) {
 
 // src/components/OfficeMapCanvas.tsx
 import { Fragment as Fragment22, jsx as jsx104, jsxs as jsxs97 } from "react/jsx-runtime";
+function clampCtxPct2(value) {
+  return Math.min(100, Math.max(0, value ?? 0));
+}
 function StatusLED({ status, small, activity = 0 }) {
   const size = small ? "w-2 h-2" : "w-3 h-3";
   const glowRadius = small ? 4 + activity * 4 : 6 + activity * 6;
@@ -28061,6 +28125,7 @@ function AgentNode({ data }) {
   const isError = data.status === "error";
   const isCompleted = data.status === "completed";
   const color = data.color || "#06b6d4";
+  const ctxPct = clampCtxPct2(data.ctxPct);
   return /* @__PURE__ */ jsxs97("div", { className: cn(
     "rounded-lg border p-3 min-w-[150px] transition-all backdrop-blur-sm",
     isActive && "border-cyan-500/50 bg-cyan-500/10 shadow-lg shadow-cyan-500/10",
@@ -28102,15 +28167,15 @@ function AgentNode({ data }) {
         ] })
       ] })
     ] }),
-    data.ctxPct != null && data.ctxPct > 0 && /* @__PURE__ */ jsxs97("div", { className: "mb-1", children: [
+    ctxPct > 0 && /* @__PURE__ */ jsxs97("div", { className: "mb-1", children: [
       /* @__PURE__ */ jsxs97("div", { className: "flex justify-between text-[8px] text-gray-500 mb-0.5", children: [
         /* @__PURE__ */ jsx104("span", { children: "ctx" }),
-        /* @__PURE__ */ jsxs97("span", { className: cn("font-mono", data.ctxPct >= 90 ? "text-red-400" : data.ctxPct >= 70 ? "text-amber-400" : "text-gray-400"), children: [
-          data.ctxPct,
+        /* @__PURE__ */ jsxs97("span", { className: cn("font-mono", ctxPct >= 90 ? "text-red-400" : ctxPct >= 70 ? "text-amber-400" : "text-gray-400"), children: [
+          ctxPct,
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ jsx104("div", { className: "h-1 rounded-full bg-slate-700/60 overflow-hidden", children: /* @__PURE__ */ jsx104("div", { className: cn("h-full", data.ctxPct >= 90 ? "bg-red-500" : data.ctxPct >= 70 ? "bg-amber-500" : "bg-cyan-500"), style: { width: `${Math.min(100, data.ctxPct)}%` } }) })
+      /* @__PURE__ */ jsx104("div", { className: "h-1 rounded-full bg-slate-700/60 overflow-hidden", children: /* @__PURE__ */ jsx104("div", { className: cn("h-full", ctxPct >= 90 ? "bg-red-500" : ctxPct >= 70 ? "bg-amber-500" : "bg-cyan-500"), style: { width: `${ctxPct}%` } }) })
     ] }),
     data.lastActivityAt && /* @__PURE__ */ jsxs97("div", { className: cn("flex items-center gap-1 text-[8px]", isActive ? "text-gray-600" : "text-gray-500"), children: [
       isCompleted && /* @__PURE__ */ jsx104("span", { className: "text-emerald-500/70", children: "\u2713 done \xB7" }),
@@ -29067,6 +29132,7 @@ function OfficeMapCanvas() {
             const isAgent = d.kind === "agent";
             const isClient = d.kind === "webui" || d.kind === "tui" || d.kind === "repl";
             const tokTotal = (d.tokensIn || 0) + (d.tokensOut || 0);
+            const ctxPct = clampCtxPct2(d.ctxPct);
             return /* @__PURE__ */ jsxs97("div", { className: "space-y-1.5 text-xs", children: [
               /* @__PURE__ */ jsx104(
                 Row,
@@ -29090,7 +29156,7 @@ function OfficeMapCanvas() {
                 /* @__PURE__ */ jsx104(Row, { k: "Tokens in", v: fmtCompact(d.tokensIn) }),
                 /* @__PURE__ */ jsx104(Row, { k: "Tokens out", v: fmtCompact(d.tokensOut) }),
                 /* @__PURE__ */ jsx104(Row, { k: "Tokens total", v: fmtCompact(tokTotal) }),
-                d.ctxPct != null && d.ctxPct > 0 && /* @__PURE__ */ jsx104(Row, { k: "Context", v: `${d.ctxPct}%`, accent: d.ctxPct >= 90 ? "text-destructive" : d.ctxPct >= 70 ? "text-amber-600 dark:text-amber-400" : "text-foreground/70" }),
+                ctxPct > 0 && /* @__PURE__ */ jsx104(Row, { k: "Context", v: `${ctxPct}%`, accent: ctxPct >= 90 ? "text-destructive" : ctxPct >= 70 ? "text-amber-600 dark:text-amber-400" : "text-foreground/70" }),
                 /* @__PURE__ */ jsx104(Row, { k: "Cost", v: `$${(d.costUsd || 0).toFixed(4)}`, accent: "text-emerald-600 dark:text-emerald-400" }),
                 d.lastActivityAt && /* @__PURE__ */ jsx104(Row, { k: "Last seen", v: fmtAgo2(d.lastActivityAt, now), accent: "text-muted-foreground" })
               ] }),