@ai-matrx/chat 0.5.0 → 0.5.3

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

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useCostDisplay } from "../../../cost.js";
 import { useMemo } from "react";
 import { useAppSelector } from "../../../../store/hooks.js";
@@ -63,16 +64,39 @@ function SessionStatsPanel({ conversationId }) {
     };
   }, [requests]);
   if (requests.length === 0) {
-    return /* @__PURE__ */ React.createElement(EmptyStats, { text: "No requests yet in this conversation." });
+    return /* @__PURE__ */ jsx(EmptyStats, { text: "No requests yet in this conversation." });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "px-3 py-2 grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 overflow-y-auto h-full" }, /* @__PURE__ */ React.createElement(StatSection, { title: "Rounds" }, /* @__PURE__ */ React.createElement(StatRow, { label: "Total turns", value: stats.totalRounds }), /* @__PURE__ */ React.createElement(StatRow, { label: "Completed", value: stats.completedRounds }), stats.errorRounds > 0 && /* @__PURE__ */ React.createElement(
-    StatRow,
-    {
-      label: "Errored",
-      value: stats.errorRounds,
-      valueClassName: "text-destructive"
-    }
-  ), /* @__PURE__ */ React.createElement(StatRow, { label: "\u03A3 Iterations", value: stats.iterationsSum || "\u2014" })), /* @__PURE__ */ React.createElement(StatSection, { title: "Tokens (all turns)" }, /* @__PURE__ */ React.createElement(StatRow, { label: "Input", value: fmtTokens(stats.totals.input) }), /* @__PURE__ */ React.createElement(StatRow, { label: "Cached", value: fmtTokens(stats.totals.cached) }), /* @__PURE__ */ React.createElement(StatRow, { label: "Output", value: fmtTokens(stats.totals.output) }), /* @__PURE__ */ React.createElement(StatRow, { label: "Total", value: fmtTokens(stats.totals.total) })), /* @__PURE__ */ React.createElement(StatSection, { title: "Cost & duration" }, /* @__PURE__ */ React.createElement(StatRow, { label: "Cost", value: fmtCost(stats.totals.cost, costUnit) }), /* @__PURE__ */ React.createElement(StatRow, { label: "Total", value: fmtMs(stats.totalDurationMs) }), /* @__PURE__ */ React.createElement(StatRow, { label: "API", value: fmtMs(stats.apiDurationMs) }), /* @__PURE__ */ React.createElement(StatRow, { label: "Tools", value: fmtMs(stats.toolDurationMs) })), /* @__PURE__ */ React.createElement(StatSection, { title: "Tool calls" }, /* @__PURE__ */ React.createElement(StatRow, { label: "\u03A3 Tool calls", value: stats.totalToolCalls || "\u2014" }), /* @__PURE__ */ React.createElement(StatRow, { label: "LLM calls", value: stats.totals.requests || "\u2014" })));
+  return /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 overflow-y-auto h-full", children: [
+    /* @__PURE__ */ jsxs(StatSection, { title: "Rounds", children: [
+      /* @__PURE__ */ jsx(StatRow, { label: "Total turns", value: stats.totalRounds }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Completed", value: stats.completedRounds }),
+      stats.errorRounds > 0 && /* @__PURE__ */ jsx(
+        StatRow,
+        {
+          label: "Errored",
+          value: stats.errorRounds,
+          valueClassName: "text-destructive"
+        }
+      ),
+      /* @__PURE__ */ jsx(StatRow, { label: "\u03A3 Iterations", value: stats.iterationsSum || "\u2014" })
+    ] }),
+    /* @__PURE__ */ jsxs(StatSection, { title: "Tokens (all turns)", children: [
+      /* @__PURE__ */ jsx(StatRow, { label: "Input", value: fmtTokens(stats.totals.input) }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Cached", value: fmtTokens(stats.totals.cached) }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Output", value: fmtTokens(stats.totals.output) }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Total", value: fmtTokens(stats.totals.total) })
+    ] }),
+    /* @__PURE__ */ jsxs(StatSection, { title: "Cost & duration", children: [
+      /* @__PURE__ */ jsx(StatRow, { label: "Cost", value: fmtCost(stats.totals.cost, costUnit) }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Total", value: fmtMs(stats.totalDurationMs) }),
+      /* @__PURE__ */ jsx(StatRow, { label: "API", value: fmtMs(stats.apiDurationMs) }),
+      /* @__PURE__ */ jsx(StatRow, { label: "Tools", value: fmtMs(stats.toolDurationMs) })
+    ] }),
+    /* @__PURE__ */ jsxs(StatSection, { title: "Tool calls", children: [
+      /* @__PURE__ */ jsx(StatRow, { label: "\u03A3 Tool calls", value: stats.totalToolCalls || "\u2014" }),
+      /* @__PURE__ */ jsx(StatRow, { label: "LLM calls", value: stats.totals.requests || "\u2014" })
+    ] })
+  ] });
 }
 export {
   SessionStatsPanel

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

@@ -1,7 +1,7 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { formatCost, formatDurationMs } from "@ai-matrx/kit/format";
 import { currentPointsRate } from "../../../cost.js";
-import React from "react";
 import { createSelector } from "@reduxjs/toolkit";
 import { cn } from "@ai-matrx/design-system";
 import { currentCostUnit } from "../../../../host/ui-slots.js";
@@ -75,16 +75,22 @@ function StatRow({
   value,
   valueClassName
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between gap-3 py-0.5 text-[11px]" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, label), /* @__PURE__ */ React.createElement("span", { className: cn("font-mono text-foreground/90", valueClassName) }, value));
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 py-0.5 text-[11px]", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("span", { className: cn("font-mono text-foreground/90", valueClassName), children: value })
+  ] });
 }
 function StatSection({
   title,
   children
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-0.5" }, /* @__PURE__ */ React.createElement("div", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70 pb-0.5 border-b border-border/40 mb-1" }, title), children);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70 pb-0.5 border-b border-border/40 mb-1", children: title }),
+    children
+  ] });
 }
 function EmptyStats({ text }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "p-4 text-xs text-muted-foreground text-center" }, text);
+  return /* @__PURE__ */ jsx("div", { className: "p-4 text-xs text-muted-foreground text-center", children: text });
 }
 export {
   EMPTY_REQUEST_LIST,

package/dist/agents/components/send-to-agent/SendToAgentWindow.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { ArrowLeft, Loader2 } from "lucide-react";
 import { useAgentCatalogRows } from "@ai-matrx/agents/catalog/react";
@@ -107,7 +108,7 @@ function SendToAgentWindow({
     group,
     items: options.filter((o) => o.group === group)
   })).filter((g) => g.items.length > 0);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     AgentPickerFrame,
     {
       id: "send-to-agent",
@@ -117,69 +118,100 @@ function SendToAgentWindow({
       onSelect: setAgentId,
       consumerId: PICKER_CONSUMER_ID,
       ...agentId ? {
-        footerLeft: /* @__PURE__ */ React.createElement(
+        footerLeft: /* @__PURE__ */ jsx(
           Button,
           {
-            icon: /* @__PURE__ */ React.createElement(ArrowLeft, null),
+            icon: /* @__PURE__ */ jsx(ArrowLeft, {}),
             variant: "quiet",
             onClick: () => setAgentId(null),
-            disabled: isOpening
-          },
-          "Back"
+            disabled: isOpening,
+            children: "Back"
+          }
         ),
-        footerRight: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button, { variant: "outline", onClick: onClose }, "Cancel"), /* @__PURE__ */ React.createElement(
-          Button,
-          {
-            icon: isOpening ? /* @__PURE__ */ React.createElement(Loader2, { className: "animate-spin" }) : null,
-            variant: "primary",
-            onClick: handleOpen,
-            disabled: load.status !== "ready" || isOpening || !selected
-          },
-          "Open"
-        ))
-      } : {}
-    },
-    agentId ? /* @__PURE__ */ React.createElement("div", { className: "flex h-full min-h-0 w-full min-w-0 flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "flex min-w-0 shrink-0 items-center gap-2 border-b border-border px-4 py-2 text-xs" }, /* @__PURE__ */ React.createElement("span", { className: "truncate font-medium" }, agentName), /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-muted-foreground" }, "\xB7"), /* @__PURE__ */ React.createElement("span", { className: "min-w-0 truncate text-muted-foreground" }, sourceTitle ?? "Response"), /* @__PURE__ */ React.createElement("span", { className: "ml-auto shrink-0 tabular-nums text-muted-foreground" }, formatCount(content.length), " characters")), /* @__PURE__ */ React.createElement("div", { className: "min-h-0 min-w-0 flex-1 overflow-y-auto overflow-x-hidden px-4 py-3" }, load.status === "loading" ? /* @__PURE__ */ React.createElement("div", { className: "flex justify-center py-10" }, /* @__PURE__ */ React.createElement(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" })) : load.status === "error" ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3 py-4 text-sm" }, /* @__PURE__ */ React.createElement("span", { className: "text-destructive" }, load.message, /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: load.message })), /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        variant: "outline",
-        onClick: () => setAttempt((n) => n + 1)
-      },
-      "Try again"
-    )) : /* @__PURE__ */ React.createElement(
-      RadioGroup,
-      {
-        value: selected?.id ?? "",
-        onValueChange: setSelectedId,
-        className: "min-w-0 grid-cols-1 gap-4"
-      },
-      groups.map(({ group, items }) => /* @__PURE__ */ React.createElement("div", { key: group, className: "min-w-0 space-y-1.5" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground" }, GROUP_LABELS[group]), items.map((option) => {
-        const disabled = Boolean(option.disabledReason);
-        const note = option.disabledReason ?? (option.destination.kind === "important-context" && overInlineLimit ? `Over ${formatCount(IMPORTANT_CONTEXT_INLINE_CHARS)} characters: sent as a reference` : void 0);
-        return /* @__PURE__ */ React.createElement(
-          "label",
-          {
-            key: option.id,
-            htmlFor: `send-to-agent-${option.id}`,
-            className: cn(
-              "flex min-w-0 items-start gap-3 rounded-md border border-border p-2.5 transition-colors",
-              disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:bg-accent/50",
-              option.id === selected?.id && "border-primary bg-primary/5"
-            )
-          },
-          /* @__PURE__ */ React.createElement(
-            RadioGroupItem,
+        footerRight: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onClose, children: "Cancel" }),
+          /* @__PURE__ */ jsx(
+            Button,
             {
-              id: `send-to-agent-${option.id}`,
-              value: option.id,
-              disabled,
-              className: "mt-0.5"
+              icon: isOpening ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : null,
+              variant: "primary",
+              onClick: handleOpen,
+              disabled: load.status !== "ready" || isOpening || !selected,
+              children: "Open"
             }
-          ),
-          /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("span", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2 text-sm font-medium" }, /* @__PURE__ */ React.createElement("span", null, option.label), note ? /* @__PURE__ */ React.createElement("span", { className: "text-xs font-normal text-muted-foreground" }, note) : null), option.description ? /* @__PURE__ */ React.createElement("span", { className: "block break-words text-xs text-muted-foreground" }, option.description) : null)
-        );
-      })))
-    ))) : null
+          )
+        ] })
+      } : {},
+      children: agentId ? /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 w-full min-w-0 flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 shrink-0 items-center gap-2 border-b border-border px-4 py-2 text-xs", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: agentName }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: "\xB7" }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-muted-foreground", children: sourceTitle ?? "Response" }),
+          /* @__PURE__ */ jsxs("span", { className: "ml-auto shrink-0 tabular-nums text-muted-foreground", children: [
+            formatCount(content.length),
+            " characters"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 min-w-0 flex-1 overflow-y-auto overflow-x-hidden px-4 py-3", children: load.status === "loading" ? /* @__PURE__ */ jsx("div", { className: "flex justify-center py-10", children: /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) }) : load.status === "error" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-4 text-sm", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-destructive", children: [
+            load.message,
+            /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: load.message })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              onClick: () => setAttempt((n) => n + 1),
+              children: "Try again"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            value: selected?.id ?? "",
+            onValueChange: setSelectedId,
+            className: "min-w-0 grid-cols-1 gap-4",
+            children: groups.map(({ group, items }) => /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: GROUP_LABELS[group] }),
+              items.map((option) => {
+                const disabled = Boolean(option.disabledReason);
+                const note = option.disabledReason ?? (option.destination.kind === "important-context" && overInlineLimit ? `Over ${formatCount(IMPORTANT_CONTEXT_INLINE_CHARS)} characters: sent as a reference` : void 0);
+                return /* @__PURE__ */ jsxs(
+                  "label",
+                  {
+                    htmlFor: `send-to-agent-${option.id}`,
+                    className: cn(
+                      "flex min-w-0 items-start gap-3 rounded-md border border-border p-2.5 transition-colors",
+                      disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:bg-accent/50",
+                      option.id === selected?.id && "border-primary bg-primary/5"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        RadioGroupItem,
+                        {
+                          id: `send-to-agent-${option.id}`,
+                          value: option.id,
+                          disabled,
+                          className: "mt-0.5"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2 text-sm font-medium", children: [
+                          /* @__PURE__ */ jsx("span", { children: option.label }),
+                          note ? /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-muted-foreground", children: note }) : null
+                        ] }),
+                        option.description ? /* @__PURE__ */ jsx("span", { className: "block break-words text-xs text-muted-foreground", children: option.description }) : null
+                      ] })
+                    ]
+                  },
+                  option.id
+                );
+              })
+            ] }, group))
+          }
+        ) })
+      ] }) : null
+    }
   );
 }
 export {

package/dist/agents/components/shared/AgentConversationColumn.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import {
   useState,
   useRef,
@@ -214,7 +215,7 @@ function AgentConversationColumn({
   }, []);
   const edgeScroll = constrainWidth && edgeToEdgeScroll;
   const centerWrap = edgeScroll ? cn(columnClass, ASSISTANT_MESSAGE_COLUMN_INSET_CLASS) : "contents";
-  return /* @__PURE__ */ React.createElement(ConversationAbilitiesProvider, { conversationId: displayId }, /* @__PURE__ */ React.createElement(TranscriptAudienceProvider, { audience }, /* @__PURE__ */ React.createElement(TranscriptLayoutProvider, { layout: resolvedLayout }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(ConversationAbilitiesProvider, { conversationId: displayId, children: /* @__PURE__ */ jsx(TranscriptAudienceProvider, { audience, children: /* @__PURE__ */ jsx(TranscriptLayoutProvider, { layout: resolvedLayout, children: /* @__PURE__ */ jsxs(
     "div",
     {
       "data-chat-column": "",
@@ -227,131 +228,142 @@ function AgentConversationColumn({
         constrainWidth && !edgeScroll && columnClass,
         constrainWidth && !edgeScroll && "pb-2",
         edgeScroll && "w-full pb-2"
-      )
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "relative flex-1 min-h-0" }, showLanding ? /* @__PURE__ */ React.createElement(
-      motion.div,
-      {
-        key: "landing",
-        className: "absolute inset-0 overflow-y-auto",
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        transition: { duration: 0.2 }
-      },
-      landingContent
-    ) : /* @__PURE__ */ React.createElement(
-      motion.div,
-      {
-        key: "conversation",
-        ref: scrollRef,
-        onScroll: handleScroll,
-        className: cn(
-          // A SIZE container: what renders inside (the empty-state hero)
-          // answers the pane's real height — a 438px split pane beside
-          // two others is not a full-height chat.
-          "absolute inset-0 overflow-y-auto pt-12 [container-type:size]",
-          // Edge-to-edge surfaces (chat, agent run, scribe) deliberately
-          // opt into a visible, higher-contrast scrollbar — the column is
-          // a long-form reading surface where finding/grabbing the bar
-          // matters more than the shell's default minimalism.
-          edgeScroll && "scrollbar-contrast"
-        ),
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        transition: { duration: 0.2, delay: 0.05 }
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          ref: contentRef,
-          className: cn(centerWrap, isColdBottomSurface && "min-h-full")
-        },
-        /* @__PURE__ */ React.createElement(
-          OlderMessagesSentinel,
-          {
-            conversationId: displayId,
-            scrollRef,
-            disabled: isColdHistoryRevealLocked,
-            revealStep: CHAT_REVEAL_STEP_GROUPS,
-            pageSize: CHAT_OLDER_PAGE_SIZE,
-            visibleGroupLimitOverride: chatVisibleGroupLimit,
-            onRevealOlderGroups: (count) => {
-              setChatVisibleGroupWindow((current) => ({
-                displayId,
-                limit: current?.displayId === displayId ? current.limit + count : CHAT_INITIAL_VISIBLE_GROUPS + count
-              }));
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-h-0", children: [
+          showLanding ? /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: "absolute inset-0 overflow-y-auto",
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              transition: { duration: 0.2 },
+              children: landingContent
+            },
+            "landing"
+          ) : /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              ref: scrollRef,
+              onScroll: handleScroll,
+              className: cn(
+                // A SIZE container: what renders inside (the empty-state hero)
+                // answers the pane's real height — a 438px split pane beside
+                // two others is not a full-height chat.
+                "absolute inset-0 overflow-y-auto pt-12 [container-type:size]",
+                // Edge-to-edge surfaces (chat, agent run, scribe) deliberately
+                // opt into a visible, higher-contrast scrollbar — the column is
+                // a long-form reading surface where finding/grabbing the bar
+                // matters more than the shell's default minimalism.
+                edgeScroll && "scrollbar-contrast"
+              ),
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              transition: { duration: 0.2, delay: 0.05 },
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ref: contentRef,
+                  className: cn(centerWrap, isColdBottomSurface && "min-h-full"),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      OlderMessagesSentinel,
+                      {
+                        conversationId: displayId,
+                        scrollRef,
+                        disabled: isColdHistoryRevealLocked,
+                        revealStep: CHAT_REVEAL_STEP_GROUPS,
+                        pageSize: CHAT_OLDER_PAGE_SIZE,
+                        visibleGroupLimitOverride: chatVisibleGroupLimit,
+                        onRevealOlderGroups: (count) => {
+                          setChatVisibleGroupWindow((current) => ({
+                            displayId,
+                            limit: current?.displayId === displayId ? current.limit + count : CHAT_INITIAL_VISIBLE_GROUPS + count
+                          }));
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      AgentConversationDisplay,
+                      {
+                        conversationId: displayId,
+                        surfaceKey,
+                        deferColdMarkdown,
+                        bottomPinned: shouldPinColdScroll,
+                        fallbackVisibleGroupLimit: deferColdMarkdown ? chatVisibleGroupLimit ?? CHAT_INITIAL_VISIBLE_GROUPS : null
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      PendingSendMessage,
+                      {
+                        conversationId,
+                        surfaceKey
+                      }
+                    ),
+                    afterMessages
+                  ]
+                }
+              )
+            },
+            "conversation"
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "pointer-events-none absolute bottom-0 left-0 right-0 h-3",
+              style: {
+                background: "linear-gradient(to bottom, transparent, var(--background))"
+              }
             }
-          }
-        ),
-        /* @__PURE__ */ React.createElement(
-          AgentConversationDisplay,
-          {
-            conversationId: displayId,
-            surfaceKey,
-            deferColdMarkdown,
-            bottomPinned: shouldPinColdScroll,
-            fallbackVisibleGroupLimit: deferColdMarkdown ? chatVisibleGroupLimit ?? CHAT_INITIAL_VISIBLE_GROUPS : null
-          }
-        ),
-        /* @__PURE__ */ React.createElement(
-          PendingSendMessage,
+          ),
+          showScrollDown && /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(ArrowDown, {}), onClick: scrollToBottom, title: "Scroll to bottom", "aria-label": "Scroll to bottom", className: "absolute bottom-4 right-4 z-10" }),
+          /* @__PURE__ */ jsx(
+            TranscriptIntegrityCopyButton,
+            {
+              conversationId: displayId,
+              surfaceKey,
+              effectiveVisibleGroupLimit: deferColdMarkdown ? chatVisibleGroupLimit ?? CHAT_INITIAL_VISIBLE_GROUPS : null
+            }
+          )
+        ] }),
+        !showLanding && /* @__PURE__ */ jsxs(
+          motion.div,
           {
-            conversationId,
-            surfaceKey
+            initial: { opacity: 0, y: 24 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.28, ease: [0.32, 0.72, 0, 1] },
+            className: edgeScroll ? cn(
+              columnClass,
+              ASSISTANT_MESSAGE_COLUMN_INSET_CLASS
+            ) : void 0,
+            children: [
+              !hideCreatorPanel && showCreatorPanel && /* @__PURE__ */ jsx(
+                CreatorRunPanel,
+                {
+                  conversationId,
+                  displayConversationId: displayId,
+                  surfaceKey
+                }
+              ),
+              /* @__PURE__ */ jsx(ServerOperationBanner, { conversationId: displayId }),
+              /* @__PURE__ */ jsx(PendingAsksZone, { conversationId: displayId }),
+              /* @__PURE__ */ jsx(ProposedDirectivesZone, { conversationId: displayId }),
+              aboveInput,
+              !hideInput && smartInputProps && /* @__PURE__ */ jsx(
+                SmartAgentInput,
+                {
+                  conversationId,
+                  surfaceKey,
+                  ...smartInputProps
+                }
+              ),
+              belowInput ? /* @__PURE__ */ jsx("div", { className: "px-1 pb-1 text-xs text-muted-foreground", "data-chat-below-input": "", children: belowInput }) : null
+            ]
           }
-        ),
-        afterMessages
-      )
-    ), /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "pointer-events-none absolute bottom-0 left-0 right-0 h-3",
-        style: {
-          background: "linear-gradient(to bottom, transparent, var(--background))"
-        }
-      }
-    ), showScrollDown && /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(ArrowDown, null), onClick: scrollToBottom, title: "Scroll to bottom", "aria-label": "Scroll to bottom", className: "absolute bottom-4 right-4 z-10" }), /* @__PURE__ */ React.createElement(
-      TranscriptIntegrityCopyButton,
-      {
-        conversationId: displayId,
-        surfaceKey,
-        effectiveVisibleGroupLimit: deferColdMarkdown ? chatVisibleGroupLimit ?? CHAT_INITIAL_VISIBLE_GROUPS : null
-      }
-    )),
-    !showLanding && /* @__PURE__ */ React.createElement(
-      motion.div,
-      {
-        initial: { opacity: 0, y: 24 },
-        animate: { opacity: 1, y: 0 },
-        transition: { duration: 0.28, ease: [0.32, 0.72, 0, 1] },
-        className: edgeScroll ? cn(
-          columnClass,
-          ASSISTANT_MESSAGE_COLUMN_INSET_CLASS
-        ) : void 0
-      },
-      !hideCreatorPanel && showCreatorPanel && /* @__PURE__ */ React.createElement(
-        CreatorRunPanel,
-        {
-          conversationId,
-          displayConversationId: displayId,
-          surfaceKey
-        }
-      ),
-      /* @__PURE__ */ React.createElement(ServerOperationBanner, { conversationId: displayId }),
-      /* @__PURE__ */ React.createElement(PendingAsksZone, { conversationId: displayId }),
-      /* @__PURE__ */ React.createElement(ProposedDirectivesZone, { conversationId: displayId }),
-      aboveInput,
-      !hideInput && smartInputProps && /* @__PURE__ */ React.createElement(
-        SmartAgentInput,
-        {
-          conversationId,
-          surfaceKey,
-          ...smartInputProps
-        }
-      ),
-      belowInput ? /* @__PURE__ */ React.createElement("div", { className: "px-1 pb-1 text-xs text-muted-foreground", "data-chat-below-input": "" }, belowInput) : null
-    )
-  ))));
+        )
+      ]
+    }
+  ) }) }) });
 }
 function useDraftSeed(conversationId, seed) {
   const dispatch = useAppDispatch();

package/dist/agents/components/shared/AgentHeader.js

@@ -1,3 +1,4 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AgentSelectorIsland } from "./AgentSelectorIsland.js";
 import { AgentModeController } from "./AgentModeController.js";
 import { AgentSaveStatus, AgentOptionsMenu } from "../../../host/ui-slots.js";
@@ -12,35 +13,52 @@ function AgentHeader({
   basePath = "/agents",
   currentPath
 }) {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "w-full @min-[44rem]/shell-header:hidden" }, /* @__PURE__ */ React.createElement(
-    AgentHeaderMobile,
-    {
-      agentId,
-      agentName,
-      basePath
-    }
-  )), /* @__PURE__ */ React.createElement("div", { className: "@container/agent-header hidden @min-[44rem]/shell-header:flex items-center justify-between w-full gap-0 px-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex min-w-0 items-center" }, /* @__PURE__ */ React.createElement(ChevronLeftTapButton, { variant: "transparent", href: backHref, ariaLabel: "Back to Agents" }), /* @__PURE__ */ React.createElement("div", { className: "flex min-w-0 items-center ps-[calc(var(--matrx-tap-gap)/2)]" }, /* @__PURE__ */ React.createElement(
-    AgentSelectorIsland,
-    {
-      agentId,
-      initialName: agentName,
-      basePath,
-      showVersion: false
-    }
-  ))), /* @__PURE__ */ React.createElement(
-    AgentModeController,
-    {
-      agentId,
-      basePath,
-      currentPath
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex items-center shrink-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex h-[var(--matrx-tap-wide-size)] items-center gap-1.5 pe-[calc(var(--matrx-tap-gap)/2)]" }, /* @__PURE__ */ React.createElement(
-    AgentSaveStatus,
-    {
-      agentId,
-      versionClassName: "hidden @min-[40rem]/agent-header:inline"
-    }
-  ), basePath === "/agents" && /* @__PURE__ */ React.createElement(ReviewAnswersLink, { agentId }), /* @__PURE__ */ React.createElement("span", { className: "hidden @min-[40rem]/agent-header:contents" }, /* @__PURE__ */ React.createElement(AgentReferenceCopyButton, { agentId, agentName }))), /* @__PURE__ */ React.createElement(AgentOptionsMenu, { agentId, basePath }))));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "w-full @min-[44rem]/shell-header:hidden", children: /* @__PURE__ */ jsx(
+      AgentHeaderMobile,
+      {
+        agentId,
+        agentName,
+        basePath
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "@container/agent-header hidden @min-[44rem]/shell-header:flex items-center justify-between w-full gap-0 px-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center", children: [
+        /* @__PURE__ */ jsx(ChevronLeftTapButton, { variant: "transparent", href: backHref, ariaLabel: "Back to Agents" }),
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center ps-[calc(var(--matrx-tap-gap)/2)]", children: /* @__PURE__ */ jsx(
+          AgentSelectorIsland,
+          {
+            agentId,
+            initialName: agentName,
+            basePath,
+            showVersion: false
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        AgentModeController,
+        {
+          agentId,
+          basePath,
+          currentPath
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center shrink-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex h-[var(--matrx-tap-wide-size)] items-center gap-1.5 pe-[calc(var(--matrx-tap-gap)/2)]", children: [
+          /* @__PURE__ */ jsx(
+            AgentSaveStatus,
+            {
+              agentId,
+              versionClassName: "hidden @min-[40rem]/agent-header:inline"
+            }
+          ),
+          basePath === "/agents" && /* @__PURE__ */ jsx(ReviewAnswersLink, { agentId }),
+          /* @__PURE__ */ jsx("span", { className: "hidden @min-[40rem]/agent-header:contents", children: /* @__PURE__ */ jsx(AgentReferenceCopyButton, { agentId, agentName }) })
+        ] }),
+        /* @__PURE__ */ jsx(AgentOptionsMenu, { agentId, basePath })
+      ] })
+    ] })
+  ] });
 }
 export {
   AgentHeader