@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/notifications/ImageArrivalPeekHost.js

@@ -1,5 +1,6 @@
 "use client";
-import React, { useCallback, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
 import { useImageArrivalPeeks } from "./useImageArrivalPeeks.js";
 import { ImageArrivalPeek } from "./ImageArrivalPeek.js";
 import { useOpenImageViewer } from "../../../host/window-openers.js";
@@ -27,22 +28,22 @@ function ImageArrivalPeekHost({
     [openImageViewer]
   );
   if (!isOpen || peeks.length === 0) return null;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: "fixed bottom-4 right-4 z-[9800] flex flex-col-reverse gap-2 pointer-events-none",
       "aria-live": "polite",
-      "aria-label": "New image notifications"
-    },
-    peeks.map((peek) => /* @__PURE__ */ React.createElement("div", { key: peek.peekId, className: "pointer-events-auto" }, /* @__PURE__ */ React.createElement(
-      ImageArrivalPeek,
-      {
-        peekId: peek.peekId,
-        block: peek.block,
-        onDismiss: dismiss,
-        onImageClick: handleImageClick
-      }
-    )))
+      "aria-label": "New image notifications",
+      children: peeks.map((peek) => /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(
+        ImageArrivalPeek,
+        {
+          peekId: peek.peekId,
+          block: peek.block,
+          onDismiss: dismiss,
+          onImageClick: handleImageClick
+        }
+      ) }, peek.peekId))
+    }
   );
 }
 var ImageArrivalPeekHost_default = ImageArrivalPeekHost;

package/dist/agents/components/observational-memory/ObservationalMemoryCore.js

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@ai-matrx/design-system";
 import { MemoryOverviewCard } from "./components/MemoryOverviewCard.js";
 import { MemoryCostCard } from "./components/MemoryCostCard.js";
@@ -21,43 +21,58 @@ function ObservationalMemoryCore({
 }) {
   const has = (id) => sections.includes(id);
   if (layout === "split") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
           "flex flex-col lg:flex-row min-h-0 h-full gap-3 p-3",
           className
-        )
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3 lg:w-[360px] lg:shrink-0 min-w-0" }, has("overview") && /* @__PURE__ */ React.createElement(MemoryOverviewCard, { conversationId }), has("controls") && /* @__PURE__ */ React.createElement("div", { className: "rounded-md border border-border bg-card/60 p-3" }, /* @__PURE__ */ React.createElement(MemoryControls, { conversationId })), has("cost") && /* @__PURE__ */ React.createElement(MemoryCostCard, { conversationId })),
-      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3 flex-1 min-w-0 min-h-0" }, has("timeline") && /* @__PURE__ */ React.createElement(
-        MemoryEventTimeline,
-        {
-          conversationId,
-          className: "min-h-[180px] max-h-[40%]"
-        }
-      ), has("state") && /* @__PURE__ */ React.createElement(
-        MemoryStateInspector,
-        {
-          conversationId,
-          className: "flex-1"
-        }
-      ))
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 lg:w-[360px] lg:shrink-0 min-w-0", children: [
+            has("overview") && /* @__PURE__ */ jsx(MemoryOverviewCard, { conversationId }),
+            has("controls") && /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border bg-card/60 p-3", children: /* @__PURE__ */ jsx(MemoryControls, { conversationId }) }),
+            has("cost") && /* @__PURE__ */ jsx(MemoryCostCard, { conversationId })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 flex-1 min-w-0 min-h-0", children: [
+            has("timeline") && /* @__PURE__ */ jsx(
+              MemoryEventTimeline,
+              {
+                conversationId,
+                className: "min-h-[180px] max-h-[40%]"
+              }
+            ),
+            has("state") && /* @__PURE__ */ jsx(
+              MemoryStateInspector,
+              {
+                conversationId,
+                className: "flex-1"
+              }
+            )
+          ] })
+        ]
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement("div", { className: cn("flex flex-col gap-3 p-3 min-h-0", className) }, has("overview") && /* @__PURE__ */ React.createElement(MemoryOverviewCard, { conversationId }), has("controls") && /* @__PURE__ */ React.createElement("div", { className: "rounded-md border border-border bg-card/60 p-3" }, /* @__PURE__ */ React.createElement(MemoryControls, { conversationId })), has("cost") && /* @__PURE__ */ React.createElement(MemoryCostCard, { conversationId }), has("timeline") && /* @__PURE__ */ React.createElement(
-    MemoryEventTimeline,
-    {
-      conversationId,
-      className: "min-h-[200px]"
-    }
-  ), has("state") && /* @__PURE__ */ React.createElement(
-    MemoryStateInspector,
-    {
-      conversationId,
-      className: "min-h-[260px]"
-    }
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3 p-3 min-h-0", className), children: [
+    has("overview") && /* @__PURE__ */ jsx(MemoryOverviewCard, { conversationId }),
+    has("controls") && /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border bg-card/60 p-3", children: /* @__PURE__ */ jsx(MemoryControls, { conversationId }) }),
+    has("cost") && /* @__PURE__ */ jsx(MemoryCostCard, { conversationId }),
+    has("timeline") && /* @__PURE__ */ jsx(
+      MemoryEventTimeline,
+      {
+        conversationId,
+        className: "min-h-[200px]"
+      }
+    ),
+    has("state") && /* @__PURE__ */ jsx(
+      MemoryStateInspector,
+      {
+        conversationId,
+        className: "min-h-[260px]"
+      }
+    )
+  ] });
 }
 export {
   ObservationalMemoryCore

package/dist/agents/components/observational-memory/components/MemoryControls.js

@@ -1,6 +1,7 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Badge, Button } from "@ai-matrx/design-system/controls";
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { Beaker } from "lucide-react";
 import { Label } from "@ai-matrx/design-system";
 import { Switch } from "../../../../ui/switch.js";
@@ -52,61 +53,96 @@ function MemoryControls({
     [dispatch]
   );
   const isCompact = variant === "compact";
-  return /* @__PURE__ */ React.createElement("div", { className: cn("space-y-2", className) }, !isCompact && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(Beaker, { className: "w-3.5 h-3.5 text-muted-foreground" }), /* @__PURE__ */ React.createElement("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider" }, "Observational Memory (admin)")), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between py-1" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement(
-    Label,
-    {
-      htmlFor: `mem-toggle-${conversationId}`,
-      className: "text-xs text-muted-foreground cursor-pointer"
-    },
-    "Memory for this conversation"
-  ), !isCompact && /* @__PURE__ */ React.createElement("div", { className: "text-[10px] text-muted-foreground/70 mt-0.5" }, "Runs in the background; billed apart from the turn")), /* @__PURE__ */ React.createElement(
-    Switch,
-    {
-      id: `mem-toggle-${conversationId}`,
-      checked: effectiveEnabled,
-      onCheckedChange: handleToggle,
-      className: "origin-right"
-    }
-  )), toggleRequested && /* @__PURE__ */ React.createElement(Badge, { tone: toggleTarget ? "success" : "warning" }, `${toggleTarget ? "Enable" : "Disable"} queued \u2014 rides the next turn`), !isCompact && persistedMeta && /* @__PURE__ */ React.createElement("div", { className: "text-[10px] text-muted-foreground space-y-0.5 rounded bg-muted/10 px-2 py-1.5 border border-border/50" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ React.createElement("span", null, "Persisted"), /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: cn(
-        "font-mono",
-        persistedMeta.enabled ? "text-emerald-500" : "text-muted-foreground"
-      )
-    },
-    persistedMeta.enabled ? "enabled" : "disabled"
-  )), persistedMeta.model && /* @__PURE__ */ React.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ React.createElement("span", null, "Model"), /* @__PURE__ */ React.createElement("span", { className: "font-mono text-foreground truncate ml-2" }, persistedMeta.model)), persistedMeta.scope && /* @__PURE__ */ React.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ React.createElement("span", null, "Scope"), /* @__PURE__ */ React.createElement("span", { className: "font-mono text-foreground" }, persistedMeta.scope))), !isCompact && /* @__PURE__ */ React.createElement(Separator, { className: "!my-2" }), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cn(
-        "space-y-1.5",
-        !toggleRequested && !isPersistedEnabled && "opacity-60"
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
+    !isCompact && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Beaker, { className: "w-3.5 h-3.5 text-muted-foreground" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Observational Memory (admin)" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx(
+          Label,
+          {
+            htmlFor: `mem-toggle-${conversationId}`,
+            className: "text-xs text-muted-foreground cursor-pointer",
+            children: "Memory for this conversation"
+          }
+        ),
+        !isCompact && /* @__PURE__ */ jsx("div", { className: "text-[10px] text-muted-foreground/70 mt-0.5", children: "Runs in the background; billed apart from the turn" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          id: `mem-toggle-${conversationId}`,
+          checked: effectiveEnabled,
+          onCheckedChange: handleToggle,
+          className: "origin-right"
+        }
       )
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between gap-2" }, /* @__PURE__ */ React.createElement(Label, { className: "text-xs text-muted-foreground shrink-0" }, "Scope"), /* @__PURE__ */ React.createElement("div", { className: "flex rounded border border-input bg-background overflow-hidden" }, /* @__PURE__ */ React.createElement(
-      ScopeButton,
-      {
-        active: memoryScope === "thread",
-        onClick: () => handleScopeChange("thread")
-      },
-      "thread"
-    ), /* @__PURE__ */ React.createElement(
-      ScopeButton,
+    ] }),
+    toggleRequested && /* @__PURE__ */ jsx(Badge, { tone: toggleTarget ? "success" : "warning", children: `${toggleTarget ? "Enable" : "Disable"} queued \u2014 rides the next turn` }),
+    !isCompact && persistedMeta && /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-muted-foreground space-y-0.5 rounded bg-muted/10 px-2 py-1.5 border border-border/50", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx("span", { children: "Persisted" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "font-mono",
+              persistedMeta.enabled ? "text-emerald-500" : "text-muted-foreground"
+            ),
+            children: persistedMeta.enabled ? "enabled" : "disabled"
+          }
+        )
+      ] }),
+      persistedMeta.model && /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx("span", { children: "Model" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground truncate ml-2", children: persistedMeta.model })
+      ] }),
+      persistedMeta.scope && /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx("span", { children: "Scope" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground", children: persistedMeta.scope })
+      ] })
+    ] }),
+    !isCompact && /* @__PURE__ */ jsx(Separator, { className: "!my-2" }),
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        active: memoryScope === "resource",
-        onClick: () => handleScopeChange("resource")
-      },
-      "resource"
-    )))
-  ));
+        className: cn(
+          "space-y-1.5",
+          !toggleRequested && !isPersistedEnabled && "opacity-60"
+        ),
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-xs text-muted-foreground shrink-0", children: "Scope" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex rounded border border-input bg-background overflow-hidden", children: [
+            /* @__PURE__ */ jsx(
+              ScopeButton,
+              {
+                active: memoryScope === "thread",
+                onClick: () => handleScopeChange("thread"),
+                children: "thread"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ScopeButton,
+              {
+                active: memoryScope === "resource",
+                onClick: () => handleScopeChange("resource"),
+                children: "resource"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
 }
 function ScopeButton({
   active,
   onClick,
   children
 }) {
-  return /* @__PURE__ */ React.createElement(Button, { variant: "quiet", pressed: !!active, onClick }, children);
+  return /* @__PURE__ */ jsx(Button, { variant: "quiet", pressed: !!active, onClick, children });
 }
 export {
   MemoryControls

package/dist/agents/components/observational-memory/components/MemoryCostCard.js

@@ -1,5 +1,6 @@
 "use client";
-import React, { useCallback, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from "react";
 import { Gauge, RefreshCw, Zap } from "lucide-react";
 import { cn } from "@ai-matrx/design-system";
 import { useAppDispatch, useAppSelector } from "../../../../store/hooks.js";
@@ -47,81 +48,129 @@ function MemoryCostCard({
   }, [conversationId, autoFetch, dispatch]);
   const breakdown = summary?.by_event_type ?? {};
   const breakdownKeys = Object.keys(breakdown).sort();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "rounded-md border border-border bg-card/60 p-3 space-y-3",
         className
-      )
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center w-7 h-7 rounded-md bg-amber-500/10 text-amber-500" }, /* @__PURE__ */ React.createElement(Gauge, { className: "w-4 h-4" })), /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "text-[11px] uppercase tracking-wide text-muted-foreground/80" }, "Memory Cost (infrastructure)"), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-muted-foreground truncate" }, "Not in the conversation's total cost")), /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(RefreshCw, null), onClick: handleRefresh, disabled: isLoading, title: "Refresh from DB" }, "Refresh")),
-    fetchState?.status === "error" && /* @__PURE__ */ React.createElement("div", { className: "text-[11px] bg-destructive/5 border border-destructive/20 text-destructive-ink rounded p-2" }, fetchState.error ?? "Failed to load memory cost.", /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: fetchState.error })),
-    /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground/60 mb-1.5" }, "Server rollup ", summary ? "" : "(not loaded)"), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-4 gap-2" }, /* @__PURE__ */ React.createElement(
-      CostStat,
-      {
-        label: "Total",
-        value: formatCostUsd(summary?.total_cost, unit),
-        tone: "emerald"
-      }
-    ), /* @__PURE__ */ React.createElement(
-      CostStat,
-      {
-        label: "Events",
-        value: summary?.event_count != null ? String(summary.event_count) : "\u2014"
-      }
-    ), /* @__PURE__ */ React.createElement(
-      CostStat,
-      {
-        label: "Input tokens",
-        value: formatTokens(summary?.total_input_tokens)
-      }
-    ), /* @__PURE__ */ React.createElement(
-      CostStat,
-      {
-        label: "Output tokens",
-        value: formatTokens(summary?.total_output_tokens)
-      }
-    ))),
-    counters && counters.totalEvents > 0 && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground/60 mb-1.5 flex items-center gap-1" }, /* @__PURE__ */ React.createElement(Zap, { className: "w-3 h-3 text-blue-500" }), "Live this session"), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-4 gap-2" }, /* @__PURE__ */ React.createElement(
-      CostStat,
-      {
-        label: "Total",
-        value: formatCostUsd(counters.totalCost, unit),
-        tone: "blue"
-      }
-    ), /* @__PURE__ */ React.createElement(CostStat, { label: "Events", value: String(counters.totalEvents) }), /* @__PURE__ */ React.createElement(
-      CostStat,
-      {
-        label: "Input tokens",
-        value: formatTokens(counters.totalInputTokens)
-      }
-    ), /* @__PURE__ */ React.createElement(
-      CostStat,
-      {
-        label: "Output tokens",
-        value: formatTokens(counters.totalOutputTokens)
-      }
-    ))),
-    breakdownKeys.length > 0 && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground/60 mb-1" }, "Breakdown by event type"), /* @__PURE__ */ React.createElement("div", { className: "rounded border border-border/60 overflow-hidden" }, /* @__PURE__ */ React.createElement("table", { className: cn("text-[11px]", MOBILE_TABLE) }, /* @__PURE__ */ React.createElement("thead", { className: "bg-muted/30 text-muted-foreground" }, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", { className: cn("text-left font-medium px-2 py-1", MOBILE_TABLE_FROZEN_HEAD) }, "Type"), /* @__PURE__ */ React.createElement("th", { className: cn("text-right font-medium px-2 py-1", MOBILE_TABLE_CELL) }, "Count"), /* @__PURE__ */ React.createElement("th", { className: cn("text-right font-medium px-2 py-1", MOBILE_TABLE_CELL) }, "Cost"), /* @__PURE__ */ React.createElement("th", { className: cn("text-right font-medium px-2 py-1", MOBILE_TABLE_CELL) }, "In"), /* @__PURE__ */ React.createElement("th", { className: cn("text-right font-medium px-2 py-1", MOBILE_TABLE_CELL) }, "Out"))), /* @__PURE__ */ React.createElement("tbody", null, breakdownKeys.map((key) => {
-      const row = breakdown[key] ?? EMPTY_BREAKDOWN_ROW;
-      const count = toNum(row.count);
-      const cost = toNum(row.cost);
-      const inTokens = toNum(row.input_tokens);
-      const outTokens = toNum(row.output_tokens);
-      return /* @__PURE__ */ React.createElement(
-        "tr",
-        {
-          key,
-          className: "border-t border-border/40 hover:bg-muted/20"
-        },
-        /* @__PURE__ */ React.createElement("td", { className: cn("px-2 py-1 font-mono", MOBILE_TABLE_FROZEN_CELL) }, key),
-        /* @__PURE__ */ React.createElement("td", { className: cn("px-2 py-1 text-right font-mono", MOBILE_TABLE_CELL) }, count ?? "\u2014"),
-        /* @__PURE__ */ React.createElement("td", { className: cn("px-2 py-1 text-right font-mono text-foreground", MOBILE_TABLE_CELL) }, formatCostUsd(cost, unit)),
-        /* @__PURE__ */ React.createElement("td", { className: cn("px-2 py-1 text-right font-mono text-muted-foreground", MOBILE_TABLE_CELL) }, formatTokens(inTokens)),
-        /* @__PURE__ */ React.createElement("td", { className: cn("px-2 py-1 text-right font-mono text-muted-foreground", MOBILE_TABLE_CELL) }, formatTokens(outTokens))
-      );
-    })))))
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-7 h-7 rounded-md bg-amber-500/10 text-amber-500", children: /* @__PURE__ */ jsx(Gauge, { className: "w-4 h-4" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-[11px] uppercase tracking-wide text-muted-foreground/80", children: "Memory Cost (infrastructure)" }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground truncate", children: "Not in the conversation's total cost" })
+          ] }),
+          /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(RefreshCw, {}), onClick: handleRefresh, disabled: isLoading, title: "Refresh from DB", children: "Refresh" })
+        ] }),
+        fetchState?.status === "error" && /* @__PURE__ */ jsxs("div", { className: "text-[11px] bg-destructive/5 border border-destructive/20 text-destructive-ink rounded p-2", children: [
+          fetchState.error ?? "Failed to load memory cost.",
+          /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: fetchState.error })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground/60 mb-1.5", children: [
+            "Server rollup ",
+            summary ? "" : "(not loaded)"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-2", children: [
+            /* @__PURE__ */ jsx(
+              CostStat,
+              {
+                label: "Total",
+                value: formatCostUsd(summary?.total_cost, unit),
+                tone: "emerald"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              CostStat,
+              {
+                label: "Events",
+                value: summary?.event_count != null ? String(summary.event_count) : "\u2014"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              CostStat,
+              {
+                label: "Input tokens",
+                value: formatTokens(summary?.total_input_tokens)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              CostStat,
+              {
+                label: "Output tokens",
+                value: formatTokens(summary?.total_output_tokens)
+              }
+            )
+          ] })
+        ] }),
+        counters && counters.totalEvents > 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground/60 mb-1.5 flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(Zap, { className: "w-3 h-3 text-blue-500" }),
+            "Live this session"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-2", children: [
+            /* @__PURE__ */ jsx(
+              CostStat,
+              {
+                label: "Total",
+                value: formatCostUsd(counters.totalCost, unit),
+                tone: "blue"
+              }
+            ),
+            /* @__PURE__ */ jsx(CostStat, { label: "Events", value: String(counters.totalEvents) }),
+            /* @__PURE__ */ jsx(
+              CostStat,
+              {
+                label: "Input tokens",
+                value: formatTokens(counters.totalInputTokens)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              CostStat,
+              {
+                label: "Output tokens",
+                value: formatTokens(counters.totalOutputTokens)
+              }
+            )
+          ] })
+        ] }),
+        breakdownKeys.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground/60 mb-1", children: "Breakdown by event type" }),
+          /* @__PURE__ */ jsx("div", { className: "rounded border border-border/60 overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: cn("text-[11px]", MOBILE_TABLE), children: [
+            /* @__PURE__ */ jsx("thead", { className: "bg-muted/30 text-muted-foreground", children: /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("th", { className: cn("text-left font-medium px-2 py-1", MOBILE_TABLE_FROZEN_HEAD), children: "Type" }),
+              /* @__PURE__ */ jsx("th", { className: cn("text-right font-medium px-2 py-1", MOBILE_TABLE_CELL), children: "Count" }),
+              /* @__PURE__ */ jsx("th", { className: cn("text-right font-medium px-2 py-1", MOBILE_TABLE_CELL), children: "Cost" }),
+              /* @__PURE__ */ jsx("th", { className: cn("text-right font-medium px-2 py-1", MOBILE_TABLE_CELL), children: "In" }),
+              /* @__PURE__ */ jsx("th", { className: cn("text-right font-medium px-2 py-1", MOBILE_TABLE_CELL), children: "Out" })
+            ] }) }),
+            /* @__PURE__ */ jsx("tbody", { children: breakdownKeys.map((key) => {
+              const row = breakdown[key] ?? EMPTY_BREAKDOWN_ROW;
+              const count = toNum(row.count);
+              const cost = toNum(row.cost);
+              const inTokens = toNum(row.input_tokens);
+              const outTokens = toNum(row.output_tokens);
+              return /* @__PURE__ */ jsxs(
+                "tr",
+                {
+                  className: "border-t border-border/40 hover:bg-muted/20",
+                  children: [
+                    /* @__PURE__ */ jsx("td", { className: cn("px-2 py-1 font-mono", MOBILE_TABLE_FROZEN_CELL), children: key }),
+                    /* @__PURE__ */ jsx("td", { className: cn("px-2 py-1 text-right font-mono", MOBILE_TABLE_CELL), children: count ?? "\u2014" }),
+                    /* @__PURE__ */ jsx("td", { className: cn("px-2 py-1 text-right font-mono text-foreground", MOBILE_TABLE_CELL), children: formatCostUsd(cost, unit) }),
+                    /* @__PURE__ */ jsx("td", { className: cn("px-2 py-1 text-right font-mono text-muted-foreground", MOBILE_TABLE_CELL), children: formatTokens(inTokens) }),
+                    /* @__PURE__ */ jsx("td", { className: cn("px-2 py-1 text-right font-mono text-muted-foreground", MOBILE_TABLE_CELL), children: formatTokens(outTokens) })
+                  ]
+                },
+                key
+              );
+            }) })
+          ] }) })
+        ] })
+      ]
+    }
   );
 }
 function toNum(v) {
@@ -137,19 +186,22 @@ function CostStat({
   value,
   tone
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "rounded border border-border/60 bg-muted/10 px-2 py-1.5" }, /* @__PURE__ */ React.createElement("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground/70 truncate" }, label), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cn(
-        "text-xs font-mono font-medium truncate",
-        tone === "emerald" && "text-emerald-500",
-        tone === "blue" && "text-blue-500",
-        !tone && "text-foreground"
-      ),
-      title: value
-    },
-    value
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: "rounded border border-border/60 bg-muted/10 px-2 py-1.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground/70 truncate", children: label }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "text-xs font-mono font-medium truncate",
+          tone === "emerald" && "text-emerald-500",
+          tone === "blue" && "text-blue-500",
+          !tone && "text-foreground"
+        ),
+        title: value,
+        children: value
+      }
+    )
+  ] });
 }
 export {
   MemoryCostCard