@ai-matrx/chat 0.5.0 → 0.5.3

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

@@ -1,6 +1,6 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Badge } from "@ai-matrx/design-system/controls";
-import React from "react";
 import {
   AlertTriangle,
   Braces,
@@ -65,83 +65,126 @@ function MemoryEventTimeline({
   const events = useAppSelector(
     selectRecentMemoryEvents(conversationId, limit)
   );
-  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(MessageCircle, { 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" }, "Event Timeline"), /* @__PURE__ */ React.createElement("span", { className: "text-[11px] text-muted-foreground" }, events.length, " event", events.length === 1 ? "" : "s")),
-    events.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "flex-1 flex flex-col items-center justify-center gap-2 py-6 text-muted-foreground" }, /* @__PURE__ */ React.createElement(Braces, { className: "w-8 h-8 opacity-20" }), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-center" }, "No memory events yet.", /* @__PURE__ */ React.createElement("br", null), "Events stream in while the conversation is active.")) : /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-h-0 overflow-y-auto" }, /* @__PURE__ */ React.createElement("ul", { className: "divide-y divide-border/40" }, events.map((event) => /* @__PURE__ */ React.createElement(MemoryEventRow, { key: event.id, event }))))
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border shrink-0", children: [
+          /* @__PURE__ */ jsx(MessageCircle, { 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: "Event Timeline" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted-foreground", children: [
+            events.length,
+            " event",
+            events.length === 1 ? "" : "s"
+          ] })
+        ] }),
+        events.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center justify-center gap-2 py-6 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Braces, { className: "w-8 h-8 opacity-20" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-xs text-center", children: [
+            "No memory events yet.",
+            /* @__PURE__ */ jsx("br", {}),
+            "Events stream in while the conversation is active."
+          ] })
+        ] }) : /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border/40", children: events.map((event) => /* @__PURE__ */ jsx(MemoryEventRow, { event }, event.id)) }) })
+      ]
+    }
   );
 }
 function MemoryEventRow({ event }) {
   const { unit } = useCostDisplay();
   const meta = EVENT_META[event.kind];
   const Icon = meta.icon;
-  return /* @__PURE__ */ React.createElement("li", { className: "px-3 py-2 hover:bg-muted/20 transition-colors" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-2" }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cn(
-        "flex items-center justify-center w-6 h-6 rounded shrink-0 mt-0.5",
-        meta.tone
-      )
-    },
-    /* @__PURE__ */ React.createElement(Icon, { className: "w-3.5 h-3.5" })
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0 space-y-0.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-xs" }, /* @__PURE__ */ React.createElement("span", { className: "font-medium text-foreground" }, meta.label), event.bufferKind && /* @__PURE__ */ React.createElement("span", { className: "font-mono text-[10px] text-muted-foreground bg-muted px-1 rounded" }, event.bufferKind), event.phase && /* @__PURE__ */ React.createElement(Badge, { tone: "warning" }, event.phase), event.model && /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: "font-mono text-[10px] text-muted-foreground truncate",
-      title: event.model
-    },
-    event.model
-  ), /* @__PURE__ */ React.createElement("span", { className: "ml-auto text-[10px] text-muted-foreground shrink-0" }, formatRelativeTime(event.receivedAt))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-0.5 text-[11px] text-muted-foreground" }, typeof event.cost === "number" && /* @__PURE__ */ React.createElement(
-    Stat,
-    {
-      label: "cost",
-      value: formatCostUsd(event.cost, unit),
-      mono: true,
-      tone: "emerald"
-    }
-  ), typeof event.inputTokens === "number" && /* @__PURE__ */ React.createElement(
-    Stat,
-    {
-      label: "in",
-      value: formatTokens(event.inputTokens),
-      mono: true
-    }
-  ), typeof event.outputTokens === "number" && /* @__PURE__ */ React.createElement(
-    Stat,
-    {
-      label: "out",
-      value: formatTokens(event.outputTokens),
-      mono: true
-    }
-  ), typeof event.durationMs === "number" && event.durationMs !== null && /* @__PURE__ */ React.createElement(
-    Stat,
-    {
-      label: /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-0.5" }, /* @__PURE__ */ React.createElement(Timer, { className: "w-3 h-3" })),
-      value: formatDurationMs(event.durationMs, { style: "compact" }),
-      mono: true
-    }
-  ), typeof event.observationChars === "number" && /* @__PURE__ */ React.createElement(
-    Stat,
-    {
-      label: "chars",
-      value: formatTokens(event.observationChars),
-      mono: true
-    }
-  ), event.requestId && /* @__PURE__ */ React.createElement(
-    Stat,
-    {
-      label: /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-0.5" }, /* @__PURE__ */ React.createElement(Clock, { className: "w-3 h-3" }), "req"),
-      value: event.requestId.slice(0, 8),
-      mono: true,
-      title: event.requestId
-    }
-  )), event.error && /* @__PURE__ */ React.createElement("div", { className: "text-[11px] text-amber-600 dark:text-amber-400 font-mono whitespace-pre-wrap break-words" }, event.error, /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: event.error })))));
+  return /* @__PURE__ */ jsx("li", { className: "px-3 py-2 hover:bg-muted/20 transition-colors", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center w-6 h-6 rounded shrink-0 mt-0.5",
+          meta.tone
+        ),
+        children: /* @__PURE__ */ jsx(Icon, { className: "w-3.5 h-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 space-y-0.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: meta.label }),
+        event.bufferKind && /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-muted-foreground bg-muted px-1 rounded", children: event.bufferKind }),
+        event.phase && /* @__PURE__ */ jsx(Badge, { tone: "warning", children: event.phase }),
+        event.model && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "font-mono text-[10px] text-muted-foreground truncate",
+            title: event.model,
+            children: event.model
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "ml-auto text-[10px] text-muted-foreground shrink-0", children: formatRelativeTime(event.receivedAt) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-0.5 text-[11px] text-muted-foreground", children: [
+        typeof event.cost === "number" && /* @__PURE__ */ jsx(
+          Stat,
+          {
+            label: "cost",
+            value: formatCostUsd(event.cost, unit),
+            mono: true,
+            tone: "emerald"
+          }
+        ),
+        typeof event.inputTokens === "number" && /* @__PURE__ */ jsx(
+          Stat,
+          {
+            label: "in",
+            value: formatTokens(event.inputTokens),
+            mono: true
+          }
+        ),
+        typeof event.outputTokens === "number" && /* @__PURE__ */ jsx(
+          Stat,
+          {
+            label: "out",
+            value: formatTokens(event.outputTokens),
+            mono: true
+          }
+        ),
+        typeof event.durationMs === "number" && event.durationMs !== null && /* @__PURE__ */ jsx(
+          Stat,
+          {
+            label: /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-0.5", children: /* @__PURE__ */ jsx(Timer, { className: "w-3 h-3" }) }),
+            value: formatDurationMs(event.durationMs, { style: "compact" }),
+            mono: true
+          }
+        ),
+        typeof event.observationChars === "number" && /* @__PURE__ */ jsx(
+          Stat,
+          {
+            label: "chars",
+            value: formatTokens(event.observationChars),
+            mono: true
+          }
+        ),
+        event.requestId && /* @__PURE__ */ jsx(
+          Stat,
+          {
+            label: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-0.5", children: [
+              /* @__PURE__ */ jsx(Clock, { className: "w-3 h-3" }),
+              "req"
+            ] }),
+            value: event.requestId.slice(0, 8),
+            mono: true,
+            title: event.requestId
+          }
+        )
+      ] }),
+      event.error && /* @__PURE__ */ jsxs("div", { className: "text-[11px] text-amber-600 dark:text-amber-400 font-mono whitespace-pre-wrap break-words", children: [
+        event.error,
+        /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: event.error })
+      ] })
+    ] })
+  ] }) });
 }
 function Stat({
   label,
@@ -150,17 +193,23 @@ function Stat({
   tone,
   title
 }) {
-  return /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-0.5", title }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/80" }, label, ":"), /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: cn(
-        mono && "font-mono",
-        tone === "emerald" && "text-emerald-500",
-        !tone && "text-foreground"
-      )
-    },
-    value
-  ));
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-0.5", title, children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/80", children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          mono && "font-mono",
+          tone === "emerald" && "text-emerald-500",
+          !tone && "text-foreground"
+        ),
+        children: value
+      }
+    )
+  ] });
 }
 export {
   MemoryEventTimeline

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

@@ -1,6 +1,6 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Badge } from "@ai-matrx/design-system/controls";
-import React from "react";
 import {
   Activity,
   Brain,
@@ -26,71 +26,105 @@ function MemoryOverviewCard({
   const degraded = useAppSelector(selectMemoryDegraded(conversationId));
   const lastError = useAppSelector(selectMemoryLastError(conversationId));
   const enabled = Boolean(metadata?.enabled);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "rounded-md border border-border bg-card/60 p-3 space-y-2",
         className
-      )
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cn(
-          "flex items-center justify-center w-7 h-7 rounded-md shrink-0",
-          enabled ? "bg-emerald-500/10 text-emerald-500" : "bg-muted text-muted-foreground"
-        )
-      },
-      /* @__PURE__ */ React.createElement(Brain, { className: "w-4 h-4" })
-    ), /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "text-[11px] uppercase tracking-wide text-muted-foreground/80" }, "Observational Memory"), /* @__PURE__ */ React.createElement("div", { className: "text-sm font-medium text-foreground flex items-center gap-1.5" }, enabled ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CheckCircle2, { className: "w-3.5 h-3.5 text-emerald-500" }), /* @__PURE__ */ React.createElement("span", null, "Enabled for this conversation")) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PowerOff, { className: "w-3.5 h-3.5 text-muted-foreground" }), /* @__PURE__ */ React.createElement("span", null, "Disabled"))))), degraded && /* @__PURE__ */ React.createElement("span", { className: "flex shrink-0 items-center gap-1" }, /* @__PURE__ */ React.createElement(
-      Badge,
-      {
-        tone: "warning",
-        title: lastError?.error ?? "A memory operation failed. The conversation continues normally."
-      },
-      "Degraded"
-    ), /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: lastError?.error }))),
-    /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-x-4 gap-y-1 text-xs" }, /* @__PURE__ */ React.createElement(
-      MetaRow,
-      {
-        icon: /* @__PURE__ */ React.createElement(Activity, { className: "w-3 h-3" }),
-        label: "Model",
-        value: metadata?.model ?? "default",
-        mono: true
-      }
-    ), /* @__PURE__ */ React.createElement(
-      MetaRow,
-      {
-        icon: /* @__PURE__ */ React.createElement(Activity, { className: "w-3 h-3" }),
-        label: "Scope",
-        value: metadata?.scope ?? "thread",
-        mono: true
-      }
-    ), /* @__PURE__ */ React.createElement(
-      MetaRow,
-      {
-        icon: /* @__PURE__ */ React.createElement(Clock, { className: "w-3 h-3" }),
-        label: "Enabled",
-        value: metadata?.enabled_at ? `${formatRelativeTime(metadata.enabled_at)} (${formatDateTime(metadata.enabled_at)})` : "\u2014"
-      }
-    ), /* @__PURE__ */ React.createElement(
-      MetaRow,
-      {
-        icon: /* @__PURE__ */ React.createElement(User, { className: "w-3 h-3" }),
-        label: "Enabled by",
-        value: metadata?.enabled_by ?? "\u2014",
-        mono: true
-      }
-    ), metadata?.disabled_at && /* @__PURE__ */ React.createElement(
-      MetaRow,
-      {
-        icon: /* @__PURE__ */ React.createElement(PowerOff, { className: "w-3 h-3" }),
-        label: "Disabled at",
-        value: `${formatRelativeTime(metadata.disabled_at)} (${formatDateTime(metadata.disabled_at)})`
-      }
-    )),
-    degraded && lastError && /* @__PURE__ */ React.createElement("div", { className: "text-[11px] bg-amber-500/5 border border-amber-500/20 text-amber-600 dark:text-amber-400 rounded p-2" }, /* @__PURE__ */ React.createElement("div", { className: "font-medium mb-0.5" }, "Memory error \u2014 conversation continues normally"), /* @__PURE__ */ React.createElement("div", { className: "text-muted-foreground" }, /* @__PURE__ */ React.createElement("span", { className: "font-mono" }, lastError.phase ?? "unknown"), " \xB7 ", lastError.error ?? "No details", /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: lastError.error })))
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex items-center justify-center w-7 h-7 rounded-md shrink-0",
+                  enabled ? "bg-emerald-500/10 text-emerald-500" : "bg-muted text-muted-foreground"
+                ),
+                children: /* @__PURE__ */ jsx(Brain, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-[11px] uppercase tracking-wide text-muted-foreground/80", children: "Observational Memory" }),
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground flex items-center gap-1.5", children: enabled ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(CheckCircle2, { className: "w-3.5 h-3.5 text-emerald-500" }),
+                /* @__PURE__ */ jsx("span", { children: "Enabled for this conversation" })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(PowerOff, { className: "w-3.5 h-3.5 text-muted-foreground" }),
+                /* @__PURE__ */ jsx("span", { children: "Disabled" })
+              ] }) })
+            ] })
+          ] }),
+          degraded && /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Badge,
+              {
+                tone: "warning",
+                title: lastError?.error ?? "A memory operation failed. The conversation continues normally.",
+                children: "Degraded"
+              }
+            ),
+            /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: lastError?.error })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-4 gap-y-1 text-xs", children: [
+          /* @__PURE__ */ jsx(
+            MetaRow,
+            {
+              icon: /* @__PURE__ */ jsx(Activity, { className: "w-3 h-3" }),
+              label: "Model",
+              value: metadata?.model ?? "default",
+              mono: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MetaRow,
+            {
+              icon: /* @__PURE__ */ jsx(Activity, { className: "w-3 h-3" }),
+              label: "Scope",
+              value: metadata?.scope ?? "thread",
+              mono: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MetaRow,
+            {
+              icon: /* @__PURE__ */ jsx(Clock, { className: "w-3 h-3" }),
+              label: "Enabled",
+              value: metadata?.enabled_at ? `${formatRelativeTime(metadata.enabled_at)} (${formatDateTime(metadata.enabled_at)})` : "\u2014"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MetaRow,
+            {
+              icon: /* @__PURE__ */ jsx(User, { className: "w-3 h-3" }),
+              label: "Enabled by",
+              value: metadata?.enabled_by ?? "\u2014",
+              mono: true
+            }
+          ),
+          metadata?.disabled_at && /* @__PURE__ */ jsx(
+            MetaRow,
+            {
+              icon: /* @__PURE__ */ jsx(PowerOff, { className: "w-3 h-3" }),
+              label: "Disabled at",
+              value: `${formatRelativeTime(metadata.disabled_at)} (${formatDateTime(metadata.disabled_at)})`
+            }
+          )
+        ] }),
+        degraded && lastError && /* @__PURE__ */ jsxs("div", { className: "text-[11px] bg-amber-500/5 border border-amber-500/20 text-amber-600 dark:text-amber-400 rounded p-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "font-medium mb-0.5", children: "Memory error \u2014 conversation continues normally" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: lastError.phase ?? "unknown" }),
+            " \xB7 ",
+            lastError.error ?? "No details",
+            /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: lastError.error })
+          ] })
+        ] })
+      ]
+    }
   );
 }
 function MetaRow({
@@ -99,17 +133,24 @@ function MetaRow({
   value,
   mono
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5 min-w-0" }, /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-1 text-muted-foreground/80 shrink-0" }, icon, label, ":"), /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: cn(
-        "truncate text-foreground",
-        mono && "font-mono text-[11px]"
-      ),
-      title: value
-    },
-    value
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-muted-foreground/80 shrink-0", children: [
+      icon,
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "truncate text-foreground",
+          mono && "font-mono text-[11px]"
+        ),
+        title: value,
+        children: value
+      }
+    )
+  ] });
 }
 export {
   MemoryOverviewCard