@ai-matrx/chat 0.5.0 → 0.5.3

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

@@ -1,8 +1,9 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { formatCount } from "@ai-matrx/kit/format";
 import { useClipboard } from "@ai-matrx/kit/clipboard";
 import { toast } from "../../../../host/notify.js";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { extractErrorMessage } from "@ai-matrx/data/net";
 import {
   Check,
@@ -51,126 +52,170 @@ function MemoryStateInspector({
     if (!autoFetch) return;
     void fetchRow();
   }, [autoFetch, fetchRow]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "flex flex-col min-h-0 h-full rounded-md border border-border bg-card/60",
         className
-      )
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border shrink-0" }, /* @__PURE__ */ React.createElement(Database, { 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 flex-1" }, "Observational memory"), /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: state.status === "loading" ? /* @__PURE__ */ React.createElement(Loader2, { className: "animate-spin" }) : /* @__PURE__ */ React.createElement(RefreshCw, null), onClick: fetchRow, disabled: state.status === "loading" }, "Refresh")),
-    /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-h-0 overflow-y-auto p-3 space-y-3" }, state.status === "idle" && /* @__PURE__ */ React.createElement(EmptyHint, null, "Click refresh to fetch the memory row."), state.status === "loading" && /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center py-8 text-muted-foreground text-xs" }, /* @__PURE__ */ React.createElement(Loader2, { className: "w-4 h-4 mr-2 animate-spin" }), "Loading memory\u2026"), state.status === "error" && /* @__PURE__ */ React.createElement("div", { className: "text-xs bg-destructive/5 border border-destructive/20 text-destructive-ink rounded p-2" }, state.error, /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: state.error })), state.status === "success" && !state.row && /* @__PURE__ */ React.createElement(EmptyHint, null, "No memory row exists for this conversation yet. A row is created on the first memory-enabled turn."), state.status === "success" && state.row && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React.createElement(MemoryRowDetails, { row: state.row })))
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border shrink-0", children: [
+          /* @__PURE__ */ jsx(Database, { className: "w-3.5 h-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider flex-1", children: "Observational memory" }),
+          /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: state.status === "loading" ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : /* @__PURE__ */ jsx(RefreshCw, {}), onClick: fetchRow, disabled: state.status === "loading", children: "Refresh" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 overflow-y-auto p-3 space-y-3", children: [
+          state.status === "idle" && /* @__PURE__ */ jsx(EmptyHint, { children: "Click refresh to fetch the memory row." }),
+          state.status === "loading" && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-8 text-muted-foreground text-xs", children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 mr-2 animate-spin" }),
+            "Loading memory\u2026"
+          ] }),
+          state.status === "error" && /* @__PURE__ */ jsxs("div", { className: "text-xs bg-destructive/5 border border-destructive/20 text-destructive-ink rounded p-2", children: [
+            state.error,
+            /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: state.error })
+          ] }),
+          state.status === "success" && !state.row && /* @__PURE__ */ jsx(EmptyHint, { children: "No memory row exists for this conversation yet. A row is created on the first memory-enabled turn." }),
+          state.status === "success" && state.row && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx(MemoryRowDetails, { row: state.row }) })
+        ] })
+      ]
+    }
   );
 }
 function EmptyHint({ children }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center py-8 gap-2 text-muted-foreground" }, /* @__PURE__ */ React.createElement(Info, { className: "w-8 h-8 opacity-20" }), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-center max-w-sm" }, children));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-8 gap-2 text-muted-foreground", children: [
+    /* @__PURE__ */ jsx(Info, { className: "w-8 h-8 opacity-20" }),
+    /* @__PURE__ */ jsx("div", { className: "text-xs text-center max-w-sm", children })
+  ] });
 }
 function MemoryRowDetails({ row }) {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BufferedObservationsView, { value: row.buffered_observations }), /* @__PURE__ */ React.createElement(
-    TextPayload,
-    {
-      title: "Active observations",
-      subtitle: "Consolidated text injected into every turn's system prompt",
-      icon: /* @__PURE__ */ React.createElement(FileText, { className: "w-3.5 h-3.5 text-emerald-500" }),
-      text: row.active_observations,
-      maxHeightClass: "max-h-80"
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-2" }, /* @__PURE__ */ React.createElement(
-    StatTile,
-    {
-      label: "Generation",
-      value: String(row.generation_count),
-      tone: "emerald"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    StatTile,
-    {
-      label: "Observation tokens",
-      value: formatTokens(row.observation_token_count)
-    }
-  ), /* @__PURE__ */ React.createElement(
-    StatTile,
-    {
-      label: "Pending tokens",
-      value: formatTokens(row.pending_message_tokens)
-    }
-  ), /* @__PURE__ */ React.createElement(
-    StatTile,
-    {
-      label: "Reflected lines",
-      value: formatTokens(row.reflected_observation_line_count)
-    }
-  )), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-x-4 gap-y-1 text-[11px]" }, /* @__PURE__ */ React.createElement(KeyValue, { label: "Scope", value: row.scope, mono: true }), /* @__PURE__ */ React.createElement(
-    KeyValue,
-    {
-      label: "Last observed",
-      value: row.last_observed_at ? `${formatRelativeTime(row.last_observed_at)} \xB7 ${formatDateTime(
-        row.last_observed_at
-      )}` : "\u2014"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    KeyValue,
-    {
-      label: "Buffering observation",
-      value: row.is_buffering_observation ? "yes" : "no",
-      tone: row.is_buffering_observation ? "emerald" : void 0
-    }
-  ), /* @__PURE__ */ React.createElement(
-    KeyValue,
-    {
-      label: "Buffering reflection",
-      value: row.is_buffering_reflection ? "yes" : "no",
-      tone: row.is_buffering_reflection ? "emerald" : void 0
-    }
-  ), /* @__PURE__ */ React.createElement(
-    KeyValue,
-    {
-      label: "Updated",
-      value: `${formatRelativeTime(row.updated_at)} \xB7 ${formatDateTime(row.updated_at)}`
-    }
-  ), /* @__PURE__ */ React.createElement(
-    KeyValue,
-    {
-      label: "Created",
-      value: `${formatRelativeTime(row.created_at)} \xB7 ${formatDateTime(row.created_at)}`
-    }
-  )), row.current_task && /* @__PURE__ */ React.createElement(
-    TextPayload,
-    {
-      title: "Current task",
-      subtitle: "Latest distilled task the user is working on",
-      text: row.current_task
-    }
-  ), row.suggested_response && /* @__PURE__ */ React.createElement(
-    TextPayload,
-    {
-      title: "Suggested response",
-      subtitle: "Observer's proposed next-turn nudge",
-      text: row.suggested_response
-    }
-  ), row.buffered_reflection && /* @__PURE__ */ React.createElement(
-    TextPayload,
-    {
-      title: "Buffered reflection",
-      subtitle: "Pending Reflector compression queued for the next run",
-      text: row.buffered_reflection
-    }
-  ), /* @__PURE__ */ React.createElement(ObservedMessageIds, { value: row.observed_message_ids }), /* @__PURE__ */ React.createElement(
-    KeyValueBlock,
-    {
-      title: "Config",
-      subtitle: "Per-conversation memory config overrides",
-      value: row.config
-    }
-  ), /* @__PURE__ */ React.createElement(
-    KeyValueBlock,
-    {
-      title: "Metadata",
-      subtitle: "Free-form metadata on the memory row",
-      value: row.metadata
-    }
-  ));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BufferedObservationsView, { value: row.buffered_observations }),
+    /* @__PURE__ */ jsx(
+      TextPayload,
+      {
+        title: "Active observations",
+        subtitle: "Consolidated text injected into every turn's system prompt",
+        icon: /* @__PURE__ */ jsx(FileText, { className: "w-3.5 h-3.5 text-emerald-500" }),
+        text: row.active_observations,
+        maxHeightClass: "max-h-80"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-2", children: [
+      /* @__PURE__ */ jsx(
+        StatTile,
+        {
+          label: "Generation",
+          value: String(row.generation_count),
+          tone: "emerald"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatTile,
+        {
+          label: "Observation tokens",
+          value: formatTokens(row.observation_token_count)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatTile,
+        {
+          label: "Pending tokens",
+          value: formatTokens(row.pending_message_tokens)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatTile,
+        {
+          label: "Reflected lines",
+          value: formatTokens(row.reflected_observation_line_count)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-4 gap-y-1 text-[11px]", children: [
+      /* @__PURE__ */ jsx(KeyValue, { label: "Scope", value: row.scope, mono: true }),
+      /* @__PURE__ */ jsx(
+        KeyValue,
+        {
+          label: "Last observed",
+          value: row.last_observed_at ? `${formatRelativeTime(row.last_observed_at)} \xB7 ${formatDateTime(
+            row.last_observed_at
+          )}` : "\u2014"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        KeyValue,
+        {
+          label: "Buffering observation",
+          value: row.is_buffering_observation ? "yes" : "no",
+          tone: row.is_buffering_observation ? "emerald" : void 0
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        KeyValue,
+        {
+          label: "Buffering reflection",
+          value: row.is_buffering_reflection ? "yes" : "no",
+          tone: row.is_buffering_reflection ? "emerald" : void 0
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        KeyValue,
+        {
+          label: "Updated",
+          value: `${formatRelativeTime(row.updated_at)} \xB7 ${formatDateTime(row.updated_at)}`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        KeyValue,
+        {
+          label: "Created",
+          value: `${formatRelativeTime(row.created_at)} \xB7 ${formatDateTime(row.created_at)}`
+        }
+      )
+    ] }),
+    row.current_task && /* @__PURE__ */ jsx(
+      TextPayload,
+      {
+        title: "Current task",
+        subtitle: "Latest distilled task the user is working on",
+        text: row.current_task
+      }
+    ),
+    row.suggested_response && /* @__PURE__ */ jsx(
+      TextPayload,
+      {
+        title: "Suggested response",
+        subtitle: "Observer's proposed next-turn nudge",
+        text: row.suggested_response
+      }
+    ),
+    row.buffered_reflection && /* @__PURE__ */ jsx(
+      TextPayload,
+      {
+        title: "Buffered reflection",
+        subtitle: "Pending Reflector compression queued for the next run",
+        text: row.buffered_reflection
+      }
+    ),
+    /* @__PURE__ */ jsx(ObservedMessageIds, { value: row.observed_message_ids }),
+    /* @__PURE__ */ jsx(
+      KeyValueBlock,
+      {
+        title: "Config",
+        subtitle: "Per-conversation memory config overrides",
+        value: row.config
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      KeyValueBlock,
+      {
+        title: "Metadata",
+        subtitle: "Free-form metadata on the memory row",
+        value: row.metadata
+      }
+    )
+  ] });
 }
 function BufferedObservationsView({ value }) {
   const cycles = useMemo(() => {
@@ -182,16 +227,39 @@ function BufferedObservationsView({ value }) {
     });
   }, [value]);
   if (cycles.length === 0) {
-    return /* @__PURE__ */ React.createElement("div", { className: "rounded border border-border/60 bg-background/50 overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5 px-2 py-1 bg-amber-500/5 border-b border-border/60" }, /* @__PURE__ */ React.createElement(Layers, { className: "w-3.5 h-3.5 text-amber-500" }), /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "text-[11px] font-medium text-foreground" }, "Buffered observation cycles"), /* @__PURE__ */ React.createElement("div", { className: "text-[10px] text-muted-foreground truncate" }, "Latest async observer chunks awaiting promotion"))), /* @__PURE__ */ React.createElement("div", { className: "p-3 text-[11px] text-muted-foreground italic" }, "No buffered cycles. Anything observed has already been promoted into active observations."));
+    return /* @__PURE__ */ jsxs("div", { className: "rounded border border-border/60 bg-background/50 overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-2 py-1 bg-amber-500/5 border-b border-border/60", children: [
+        /* @__PURE__ */ jsx(Layers, { className: "w-3.5 h-3.5 text-amber-500" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium text-foreground", children: "Buffered observation cycles" }),
+          /* @__PURE__ */ jsx("div", { className: "text-[10px] text-muted-foreground truncate", children: "Latest async observer chunks awaiting promotion" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "p-3 text-[11px] text-muted-foreground italic", children: "No buffered cycles. Anything observed has already been promoted into active observations." })
+    ] });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "rounded border border-amber-500/30 bg-background/50 overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5 px-2 py-1 bg-amber-500/10 border-b border-amber-500/20" }, /* @__PURE__ */ React.createElement(Layers, { className: "w-3.5 h-3.5 text-amber-500" }), /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "text-[11px] font-medium text-foreground" }, "Buffered observation cycles"), /* @__PURE__ */ React.createElement("div", { className: "text-[10px] text-muted-foreground truncate" }, "Newest first \xB7 awaiting promotion into active observations")), /* @__PURE__ */ React.createElement("span", { className: "text-[10px] font-mono text-muted-foreground shrink-0" }, cycles.length, " cycle", cycles.length === 1 ? "" : "s")), /* @__PURE__ */ React.createElement("div", { className: "p-2 flex flex-col gap-2" }, cycles.map((cycle, idx) => /* @__PURE__ */ React.createElement(
-    BufferedObservationCard,
-    {
-      key: cycle.cycle_id ?? `cycle-${idx}`,
-      cycle,
-      defaultOpen: idx === 0
-    }
-  ))));
+  return /* @__PURE__ */ jsxs("div", { className: "rounded border border-amber-500/30 bg-background/50 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-2 py-1 bg-amber-500/10 border-b border-amber-500/20", children: [
+      /* @__PURE__ */ jsx(Layers, { className: "w-3.5 h-3.5 text-amber-500" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium text-foreground", children: "Buffered observation cycles" }),
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] text-muted-foreground truncate", children: "Newest first \xB7 awaiting promotion into active observations" })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-mono text-muted-foreground shrink-0", children: [
+        cycles.length,
+        " cycle",
+        cycles.length === 1 ? "" : "s"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "p-2 flex flex-col gap-2", children: cycles.map((cycle, idx) => /* @__PURE__ */ jsx(
+      BufferedObservationCard,
+      {
+        cycle,
+        defaultOpen: idx === 0
+      },
+      cycle.cycle_id ?? `cycle-${idx}`
+    )) })
+  ] });
 }
 function BufferedObservationCard({
   cycle,
@@ -211,49 +279,109 @@ function BufferedObservationCard({
     setTimeout(() => setCopied(false), 1500);
   }, [text, hasText]);
   const messageIds = Array.isArray(cycle.message_ids) ? cycle.message_ids.filter((v) => typeof v === "string") : [];
-  return /* @__PURE__ */ React.createElement("div", { className: "rounded border border-border/60 bg-background overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-1.5 px-2 py-1.5 bg-muted/20 hover:bg-muted/30 transition-colors" }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => setOpen((v) => !v),
-      className: "flex-1 min-w-0 flex items-start gap-1.5 text-left",
-      "aria-expanded": open
-    },
-    /* @__PURE__ */ React.createElement(
-      ChevronRight,
-      {
-        className: cn(
-          "w-3 h-3 mt-0.5 text-muted-foreground transition-transform shrink-0",
-          open && "rotate-90"
-        )
-      }
-    ),
-    /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5 flex-wrap" }, /* @__PURE__ */ React.createElement(Hammer, { className: "w-3 h-3 text-amber-500 shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-[11px] font-medium text-foreground" }, cycle.thread_title || "Cycle"), cycle.cycle_id && /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: "font-mono text-[10px] text-muted-foreground/70",
-        title: cycle.cycle_id
-      },
-      cycle.cycle_id.slice(0, 8)
-    ), cycle.created_at && /* @__PURE__ */ React.createElement("span", { className: "text-[10px] text-muted-foreground" }, formatRelativeTime(cycle.created_at))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-x-2 gap-y-0.5 text-[10px] text-muted-foreground/80 mt-0.5" }, cycle.message_count != null && /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", { className: "text-foreground/70 font-mono" }, cycle.message_count), " ", "msg"), messageIds.length > 0 && cycle.message_count !== messageIds.length && /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", { className: "text-foreground/70 font-mono" }, messageIds.length), " ", "ids"), cycle.observation_tokens != null && /* @__PURE__ */ React.createElement("span", null, "obs", " ", /* @__PURE__ */ React.createElement("span", { className: "text-emerald-500 font-mono" }, formatTokens(cycle.observation_tokens)), "t"), cycle.message_tokens != null && /* @__PURE__ */ React.createElement("span", null, "in", " ", /* @__PURE__ */ React.createElement("span", { className: "text-foreground/70 font-mono" }, formatTokens(cycle.message_tokens)), "t"), hasText && /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", { className: "text-foreground/70 font-mono" }, formatCount(text.length)), " ", "chars")))
-  ), hasText && /* @__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 observations", "aria-label": "Copy observations", className: "mt-0.5 shrink-0" })), open && /* @__PURE__ */ React.createElement("div", { className: "border-t border-border/60" }, hasText ? /* @__PURE__ */ React.createElement("pre", { className: "p-2 text-[11px] font-mono text-foreground whitespace-pre-wrap break-words max-h-96 overflow-y-auto leading-relaxed bg-background" }, text) : /* @__PURE__ */ React.createElement("div", { className: "p-2 text-[11px] text-muted-foreground italic" }, "(no observation text in this cycle)"), (cycle.current_task || cycle.suggested_continuation || messageIds.length > 0) && /* @__PURE__ */ React.createElement("div", { className: "border-t border-border/60 bg-muted/10 px-2 py-1.5 flex flex-col gap-1.5 text-[10px]" }, cycle.current_task && /* @__PURE__ */ React.createElement(CycleAside, { label: "Task", value: cycle.current_task }), cycle.suggested_continuation && /* @__PURE__ */ React.createElement(
-    CycleAside,
-    {
-      label: "Suggested",
-      value: cycle.suggested_continuation
-    }
-  ), messageIds.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "flex gap-1.5 min-w-0" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground shrink-0" }, "Messages:"), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1 min-w-0" }, messageIds.map((id) => /* @__PURE__ */ React.createElement(
-    "code",
-    {
-      key: id,
-      className: "font-mono text-[10px] px-1 py-0.5 rounded bg-muted/40 text-muted-foreground",
-      title: id
-    },
-    id.startsWith("om-") ? id : id.slice(0, 8)
-  )))))));
+  return /* @__PURE__ */ jsxs("div", { className: "rounded border border-border/60 bg-background overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5 px-2 py-1.5 bg-muted/20 hover:bg-muted/30 transition-colors", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setOpen((v) => !v),
+          className: "flex-1 min-w-0 flex items-start gap-1.5 text-left",
+          "aria-expanded": open,
+          children: [
+            /* @__PURE__ */ jsx(
+              ChevronRight,
+              {
+                className: cn(
+                  "w-3 h-3 mt-0.5 text-muted-foreground transition-transform shrink-0",
+                  open && "rotate-90"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+                /* @__PURE__ */ jsx(Hammer, { className: "w-3 h-3 text-amber-500 shrink-0" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-foreground", children: cycle.thread_title || "Cycle" }),
+                cycle.cycle_id && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "font-mono text-[10px] text-muted-foreground/70",
+                    title: cycle.cycle_id,
+                    children: cycle.cycle_id.slice(0, 8)
+                  }
+                ),
+                cycle.created_at && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatRelativeTime(cycle.created_at) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-2 gap-y-0.5 text-[10px] text-muted-foreground/80 mt-0.5", children: [
+                cycle.message_count != null && /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-foreground/70 font-mono", children: cycle.message_count }),
+                  " ",
+                  "msg"
+                ] }),
+                messageIds.length > 0 && cycle.message_count !== messageIds.length && /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-foreground/70 font-mono", children: messageIds.length }),
+                  " ",
+                  "ids"
+                ] }),
+                cycle.observation_tokens != null && /* @__PURE__ */ jsxs("span", { children: [
+                  "obs",
+                  " ",
+                  /* @__PURE__ */ jsx("span", { className: "text-emerald-500 font-mono", children: formatTokens(cycle.observation_tokens) }),
+                  "t"
+                ] }),
+                cycle.message_tokens != null && /* @__PURE__ */ jsxs("span", { children: [
+                  "in",
+                  " ",
+                  /* @__PURE__ */ jsx("span", { className: "text-foreground/70 font-mono", children: formatTokens(cycle.message_tokens) }),
+                  "t"
+                ] }),
+                hasText && /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-foreground/70 font-mono", children: formatCount(text.length) }),
+                  " ",
+                  "chars"
+                ] })
+              ] })
+            ] })
+          ]
+        }
+      ),
+      hasText && /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), glyphTone: copied ? "success" : void 0, onClick: handleCopy, title: "Copy observations", "aria-label": "Copy observations", className: "mt-0.5 shrink-0" })
+    ] }),
+    open && /* @__PURE__ */ jsxs("div", { className: "border-t border-border/60", children: [
+      hasText ? /* @__PURE__ */ jsx("pre", { className: "p-2 text-[11px] font-mono text-foreground whitespace-pre-wrap break-words max-h-96 overflow-y-auto leading-relaxed bg-background", children: text }) : /* @__PURE__ */ jsx("div", { className: "p-2 text-[11px] text-muted-foreground italic", children: "(no observation text in this cycle)" }),
+      (cycle.current_task || cycle.suggested_continuation || messageIds.length > 0) && /* @__PURE__ */ jsxs("div", { className: "border-t border-border/60 bg-muted/10 px-2 py-1.5 flex flex-col gap-1.5 text-[10px]", children: [
+        cycle.current_task && /* @__PURE__ */ jsx(CycleAside, { label: "Task", value: cycle.current_task }),
+        cycle.suggested_continuation && /* @__PURE__ */ jsx(
+          CycleAside,
+          {
+            label: "Suggested",
+            value: cycle.suggested_continuation
+          }
+        ),
+        messageIds.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground shrink-0", children: "Messages:" }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 min-w-0", children: messageIds.map((id) => /* @__PURE__ */ jsx(
+            "code",
+            {
+              className: "font-mono text-[10px] px-1 py-0.5 rounded bg-muted/40 text-muted-foreground",
+              title: id,
+              children: id.startsWith("om-") ? id : id.slice(0, 8)
+            },
+            id
+          )) })
+        ] })
+      ] })
+    ] })
+  ] });
 }
 function CycleAside({ label, value }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex gap-1.5 min-w-0" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground shrink-0" }, label, ":"), /* @__PURE__ */ React.createElement("span", { className: "text-foreground/90 break-words" }, value));
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 min-w-0", children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground shrink-0", children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "text-foreground/90 break-words", children: value })
+  ] });
 }
 function ObservedMessageIds({ value }) {
   const ids = useMemo(() => {
@@ -262,26 +390,29 @@ function ObservedMessageIds({ value }) {
   }, [value]);
   const [open, setOpen] = useState(false);
   if (ids.length === 0) return null;
-  return /* @__PURE__ */ React.createElement("div", { className: "rounded border border-border/60 bg-background/50 overflow-hidden" }, /* @__PURE__ */ React.createElement(
-    DisclosureHeader,
-    {
-      className: "w-full",
-      open,
-      onClick: () => setOpen((v) => !v),
-      icon: /* @__PURE__ */ React.createElement(MessageSquare, null),
-      title: "Observed messages",
-      line: "Message IDs already fed into memory",
-      end: ids.length
-    }
-  ), open && /* @__PURE__ */ React.createElement("div", { className: "p-2 max-h-48 overflow-y-auto bg-background/50" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1" }, ids.map((id) => /* @__PURE__ */ React.createElement(
-    "code",
-    {
-      key: id,
-      className: "font-mono text-[10px] px-1.5 py-0.5 rounded bg-muted/40 text-muted-foreground hover:text-foreground",
-      title: id
-    },
-    id.startsWith("om-") ? id : id.slice(0, 8)
-  )))));
+  return /* @__PURE__ */ jsxs("div", { className: "rounded border border-border/60 bg-background/50 overflow-hidden", children: [
+    /* @__PURE__ */ jsx(
+      DisclosureHeader,
+      {
+        className: "w-full",
+        open,
+        onClick: () => setOpen((v) => !v),
+        icon: /* @__PURE__ */ jsx(MessageSquare, {}),
+        title: "Observed messages",
+        line: "Message IDs already fed into memory",
+        end: ids.length
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { className: "p-2 max-h-48 overflow-y-auto bg-background/50", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: ids.map((id) => /* @__PURE__ */ jsx(
+      "code",
+      {
+        className: "font-mono text-[10px] px-1.5 py-0.5 rounded bg-muted/40 text-muted-foreground hover:text-foreground",
+        title: id,
+        children: id.startsWith("om-") ? id : id.slice(0, 8)
+      },
+      id
+    )) }) })
+  ] });
 }
 function KeyValueBlock({
   title,
@@ -293,7 +424,19 @@ function KeyValueBlock({
     return Object.entries(value);
   }, [value]);
   if (entries.length === 0) return null;
-  return /* @__PURE__ */ React.createElement("div", { className: "rounded border border-border/60 bg-background/50 overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "px-2 py-1 bg-muted/20 border-b border-border/60" }, /* @__PURE__ */ React.createElement("div", { className: "text-[11px] font-medium text-foreground" }, title), /* @__PURE__ */ React.createElement("div", { className: "text-[10px] text-muted-foreground truncate" }, subtitle)), /* @__PURE__ */ React.createElement("div", { className: "p-2 flex flex-col gap-1 text-[11px]" }, entries.map(([key, val]) => /* @__PURE__ */ React.createElement("div", { key, className: "flex gap-2 min-w-0" }, /* @__PURE__ */ React.createElement("span", { className: "font-mono text-muted-foreground shrink-0" }, key, ":"), /* @__PURE__ */ React.createElement("span", { className: "font-mono text-foreground break-all min-w-0" }, formatScalar(val))))));
+  return /* @__PURE__ */ jsxs("div", { className: "rounded border border-border/60 bg-background/50 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-2 py-1 bg-muted/20 border-b border-border/60", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium text-foreground", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "text-[10px] text-muted-foreground truncate", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "p-2 flex flex-col gap-1 text-[11px]", children: entries.map(([key, val]) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2 min-w-0", children: [
+      /* @__PURE__ */ jsxs("span", { className: "font-mono text-muted-foreground shrink-0", children: [
+        key,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground break-all min-w-0", children: formatScalar(val) })
+    ] }, key)) })
+  ] });
 }
 function formatScalar(value) {
   if (value === null) return "null";
@@ -313,17 +456,20 @@ function StatTile({
   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 && "text-foreground"
-      )
-    },
-    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 && "text-foreground"
+        ),
+        children: value
+      }
+    )
+  ] });
 }
 function KeyValue({
   label,
@@ -331,19 +477,25 @@ function KeyValue({
   mono,
   tone
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex gap-1.5 min-w-0" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/80 shrink-0" }, label, ":"), /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: cn(
-        "truncate",
-        mono && "font-mono text-[11px]",
-        tone === "emerald" && "text-emerald-500",
-        !tone && "text-foreground"
-      ),
-      title: value
-    },
-    value
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 min-w-0", children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/80 shrink-0", children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "truncate",
+          mono && "font-mono text-[11px]",
+          tone === "emerald" && "text-emerald-500",
+          !tone && "text-foreground"
+        ),
+        title: value,
+        children: value
+      }
+    )
+  ] });
 }
 function TextPayload({
   title,
@@ -363,16 +515,32 @@ function TextPayload({
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
   }, [text]);
-  return /* @__PURE__ */ React.createElement("div", { className: "rounded border border-border/60 bg-background/50 overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5 px-2 py-1 bg-muted/20 border-b border-border/60" }, icon, /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "text-[11px] font-medium text-foreground" }, title), /* @__PURE__ */ React.createElement("div", { className: "text-[10px] text-muted-foreground truncate" }, subtitle)), hasText && text && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "text-[10px] font-mono text-muted-foreground shrink-0" }, formatCount(text.length), " chars"), /* @__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" }))), hasText ? /* @__PURE__ */ React.createElement(
-    "pre",
-    {
-      className: cn(
-        "p-2 text-[11px] font-mono text-foreground whitespace-pre-wrap break-words overflow-y-auto leading-relaxed",
-        maxHeightClass
-      )
-    },
-    text
-  ) : /* @__PURE__ */ React.createElement("div", { className: "p-2 text-[11px] text-muted-foreground italic" }, "(empty)"));
+  return /* @__PURE__ */ jsxs("div", { className: "rounded border border-border/60 bg-background/50 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-2 py-1 bg-muted/20 border-b border-border/60", children: [
+      icon,
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium text-foreground", children: title }),
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] text-muted-foreground truncate", children: subtitle })
+      ] }),
+      hasText && text && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-mono text-muted-foreground shrink-0", children: [
+          formatCount(text.length),
+          " chars"
+        ] }),
+        /* @__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" })
+      ] })
+    ] }),
+    hasText ? /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: cn(
+          "p-2 text-[11px] font-mono text-foreground whitespace-pre-wrap break-words overflow-y-auto leading-relaxed",
+          maxHeightClass
+        ),
+        children: text
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "p-2 text-[11px] text-muted-foreground italic", children: "(empty)" })
+  ] });
 }
 export {
   MemoryStateInspector