@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/run/AgentRunHeader.js

@@ -1,3 +1,4 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AgentModeController } from "../shared/AgentModeController.js";
 import { AgentSaveStatus, AgentOptionsMenu } from "../../../host/ui-slots.js";
 import { ReviewAnswersLink } from "../../../host/ui-slots.js";
@@ -13,33 +14,49 @@ function AgentRunHeader({
   basePath = "/agents",
   currentPath
 }) {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "lg:hidden w-full" }, /* @__PURE__ */ React.createElement(
-    AgentHeaderMobile,
-    {
-      agentId,
-      agentName,
-      basePath,
-      extraActions: /* @__PURE__ */ React.createElement(AgentNewRunButton, { surfaceKey })
-    }
-  )), /* @__PURE__ */ React.createElement("div", { className: "@container/agent-header hidden lg:flex items-center justify-between w-full gap-2 shrink-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement(ChevronLeftTapButton, { variant: "transparent", href: backHref, "aria-label": "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,
-      showNewRunButton: true,
-      showBackButton: true,
-      showVersion: false,
-      showBuiltin: true
-    }
-  )), /* @__PURE__ */ React.createElement("span", { "aria-hidden": true, className: "w-[calc(var(--matrx-tap-gap)/2)] shrink-0" }), /* @__PURE__ */ React.createElement(AgentNewRunButton, { surfaceKey })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-    AgentModeController,
-    {
-      agentId,
-      basePath,
-      currentPath
-    }
-  )), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5 pt-0.5 shrink-0" }, /* @__PURE__ */ React.createElement(AgentSaveStatus, { agentId }), basePath === "/agents" && /* @__PURE__ */ React.createElement(ReviewAnswersLink, { agentId }), /* @__PURE__ */ React.createElement(AgentOptionsMenu, { agentId, basePath }))));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "lg:hidden w-full", children: /* @__PURE__ */ jsx(
+      AgentHeaderMobile,
+      {
+        agentId,
+        agentName,
+        basePath,
+        extraActions: /* @__PURE__ */ jsx(AgentNewRunButton, { surfaceKey })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "@container/agent-header hidden lg:flex items-center justify-between w-full gap-2 shrink-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsx(ChevronLeftTapButton, { variant: "transparent", href: backHref, "aria-label": "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,
+            showNewRunButton: true,
+            showBackButton: true,
+            showVersion: false,
+            showBuiltin: true
+          }
+        ) }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "w-[calc(var(--matrx-tap-gap)/2)] shrink-0" }),
+        /* @__PURE__ */ jsx(AgentNewRunButton, { surfaceKey })
+      ] }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        AgentModeController,
+        {
+          agentId,
+          basePath,
+          currentPath
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 pt-0.5 shrink-0", children: [
+        /* @__PURE__ */ jsx(AgentSaveStatus, { agentId }),
+        basePath === "/agents" && /* @__PURE__ */ jsx(ReviewAnswersLink, { agentId }),
+        /* @__PURE__ */ jsx(AgentOptionsMenu, { agentId, basePath })
+      ] })
+    ] })
+  ] });
 }
 export {
   AgentRunHeader

package/dist/agents/components/run/AgentRunnerPage.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { logFailure } from "../../../ui/expectedRefusal.js";
 import { useEffect, useRef, useState } from "react";
 import { useSearchParams } from "../../../host/navigation.js";
@@ -185,41 +186,56 @@ function AgentRunnerPage({
     surfaceKey
   ]);
   if (initError && !isInitializing) {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center h-full p-6" }, /* @__PURE__ */ React.createElement("div", { className: "max-w-md w-full rounded-lg border border-destructive/40 bg-destructive/5 p-5 flex flex-col gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-destructive" }, /* @__PURE__ */ React.createElement(AlertTriangle, { className: "w-5 h-5" }), /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, "Couldn't reach the agent service")), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-muted-foreground leading-snug" }, initError), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground leading-snug" }, "Your work is safe \u2014 anything you had typed will be restored once the agent loads."), /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        icon: /* @__PURE__ */ React.createElement(RotateCw, null),
-        variant: "primary",
-        className: "self-start",
-        onClick: () => setInitAttempt((n) => n + 1)
-      },
-      "Retry"
-    ), /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: initError })));
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full p-6", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md w-full rounded-lg border border-destructive/40 bg-destructive/5 p-5 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-destructive", children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "w-5 h-5" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Couldn't reach the agent service" })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground leading-snug", children: initError }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-snug", children: "Your work is safe \u2014 anything you had typed will be restored once the agent loads." }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx(RotateCw, {}),
+          variant: "primary",
+          className: "self-start",
+          onClick: () => setInitAttempt((n) => n + 1),
+          children: "Retry"
+        }
+      ),
+      /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: initError })
+    ] }) });
   }
   const activeConversationId = conversationIdFromUrl ?? conversationId;
   const isColdLoadingConversation = !!conversationIdFromUrl && coldLoadingConversationId === conversationIdFromUrl;
   if (isInitializing || !activeConversationId) {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center h-full gap-3 text-muted-foreground" }, /* @__PURE__ */ React.createElement(Loader2, { className: "w-5 h-5 animate-spin text-primary" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, "Loading agent..."));
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center h-full gap-3 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "w-5 h-5 animate-spin text-primary" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Loading agent..." })
+    ] });
   }
   if (conversationIdFromUrl && isColdLoadingConversation) {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex h-full flex-col overflow-hidden bg-textured" }, /* @__PURE__ */ React.createElement(ChatRoomSkeleton, null));
+    return /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col overflow-hidden bg-textured", children: /* @__PURE__ */ jsx(ChatRoomSkeleton, {}) });
   }
-  const body = /* @__PURE__ */ React.createElement("div", { className: "relative flex flex-col h-full overflow-hidden" }, /* @__PURE__ */ React.createElement(DebugSessionActivator, null), /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-hidden flex justify-center min-w-0" }, /* @__PURE__ */ React.createElement(
-    AgentConversationColumn,
-    {
-      conversationId: activeConversationId,
-      surfaceKey,
-      constrainWidth: true,
-      edgeToEdgeScroll: true,
-      deferColdMarkdown: !!conversationIdFromUrl,
-      smartInputProps: {
-        // The page-size composer (composer/FEATURE.md). The agent is the
-        // route's — this page runs ONE agent — so no agent switch is
-        // offered (the pill is a plain label).
-        composer: { size: "page", mode: composerMode }
+  const body = /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col h-full overflow-hidden", children: [
+    /* @__PURE__ */ jsx(DebugSessionActivator, {}),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden flex justify-center min-w-0", children: /* @__PURE__ */ jsx(
+      AgentConversationColumn,
+      {
+        conversationId: activeConversationId,
+        surfaceKey,
+        constrainWidth: true,
+        edgeToEdgeScroll: true,
+        deferColdMarkdown: !!conversationIdFromUrl,
+        smartInputProps: {
+          // The page-size composer (composer/FEATURE.md). The agent is the
+          // route's — this page runs ONE agent — so no agent switch is
+          // offered (the pill is a plain label).
+          composer: { size: "page", mode: composerMode }
+        }
       }
-    }
-  )));
+    ) })
+  ] });
   if (!isAgentRunSurface) return body;
   const getSurfaceWriteHandlers = () => {
     const handlers = {
@@ -298,15 +314,15 @@ ${text}` : text;
     });
     return handlers;
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     SurfaceRuntimeProvider,
     {
       surfaceName: "matrx-user/agent-run",
       getScope: getAgentRunScope,
       getWriteHandlers: getSurfaceWriteHandlers,
-      ownConversationId: activeConversationId
-    },
-    body
+      ownConversationId: activeConversationId,
+      children: body
+    }
   );
 }
 export {

package/dist/agents/components/run/AgentStatusIndicator.js

@@ -1,11 +1,12 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { ShimmerText } from "@ai-matrx/rich-content/utils/lifted/ShimmerText";
 function AgentStatusIndicator({
   message,
   compact = false
 }) {
   const displayMessage = message ?? "Processing...";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ShimmerText,
     {
       text: displayMessage,

package/dist/agents/components/run/AssistantError.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Link } from "../../../host/navigation.js";
 import { AlertCircle, RotateCw, Loader2, ArrowRight } from "lucide-react";
@@ -61,33 +62,66 @@ function AssistantError({
     ] : []
   ] : [];
   const hasDetails = typeof detail === "string" && detail.length > 0 && detail !== shownMessage || typeof errorType === "string" && errorType.length > 0 || code != null;
-  return /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-x-2.5 gap-y-1" }, /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-1.5 text-destructive/90" }, /* @__PURE__ */ React.createElement(AlertCircle, { className: "h-3.5 w-3.5 shrink-0" }), shownMessage, /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: shownMessage })), errorType && RECOVERY_DOORS[errorType] && /* @__PURE__ */ React.createElement(
-    Link,
-    {
-      href: RECOVERY_DOORS[errorType].href,
-      className: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-primary-ink hover:bg-primary/10"
-    },
-    RECOVERY_DOORS[errorType].label,
-    /* @__PURE__ */ React.createElement(ArrowRight, { className: "h-3 w-3" }),
-    /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, null)
-  ), extraDoors.map((d) => /* @__PURE__ */ React.createElement(
-    Link,
-    {
-      key: d.href,
-      href: d.href,
-      className: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-primary-ink hover:bg-primary/10"
-    },
-    d.label,
-    /* @__PURE__ */ React.createElement(ArrowRight, { className: "h-3 w-3" })
-  )), door && /* @__PURE__ */ React.createElement(
-    Link,
-    {
-      href: door.href,
-      className: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-primary-ink hover:bg-primary/10"
-    },
-    door.label,
-    /* @__PURE__ */ React.createElement(ArrowRight, { className: "h-3 w-3" })
-  ), retry && /* @__PURE__ */ React.createElement(Button, { variant: "outline", icon: retrying ? /* @__PURE__ */ React.createElement(Loader2, { className: "animate-spin" }) : /* @__PURE__ */ React.createElement(RotateCw, null), disabled: retrying, onClick: retry }, retrying ? "Retrying\u2026" : "Retry"), hasDetails && /* @__PURE__ */ React.createElement(Button, { variant: "link", onClick: () => setShowDetails((v) => !v) }, showDetails ? "Hide details" : "Details")), hasDetails && showDetails && /* @__PURE__ */ React.createElement("div", { className: "mt-1 flex flex-col gap-0.5 rounded bg-muted/50 px-2 py-1.5 font-mono text-[11px] leading-relaxed text-muted-foreground" }, (errorType || code != null) && /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-x-3" }, errorType && /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/60" }, "type: "), errorType, /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: errorType })), code != null && /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/60" }, "code: "), code)), typeof detail === "string" && detail.length > 0 && detail !== shownMessage && /* @__PURE__ */ React.createElement("span", { className: "whitespace-pre-wrap break-words" }, detail)));
+  return /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2.5 gap-y-1", children: [
+      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-destructive/90", children: [
+        /* @__PURE__ */ jsx(AlertCircle, { className: "h-3.5 w-3.5 shrink-0" }),
+        shownMessage,
+        /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: shownMessage })
+      ] }),
+      errorType && RECOVERY_DOORS[errorType] && /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: RECOVERY_DOORS[errorType].href,
+          className: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-primary-ink hover:bg-primary/10",
+          children: [
+            RECOVERY_DOORS[errorType].label,
+            /* @__PURE__ */ jsx(ArrowRight, { className: "h-3 w-3" }),
+            /* @__PURE__ */ jsx(ErrorAlchemyMenu, {})
+          ]
+        }
+      ),
+      extraDoors.map((d) => /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: d.href,
+          className: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-primary-ink hover:bg-primary/10",
+          children: [
+            d.label,
+            /* @__PURE__ */ jsx(ArrowRight, { className: "h-3 w-3" })
+          ]
+        },
+        d.href
+      )),
+      door && /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: door.href,
+          className: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-primary-ink hover:bg-primary/10",
+          children: [
+            door.label,
+            /* @__PURE__ */ jsx(ArrowRight, { className: "h-3 w-3" })
+          ]
+        }
+      ),
+      retry && /* @__PURE__ */ jsx(Button, { variant: "outline", icon: retrying ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : /* @__PURE__ */ jsx(RotateCw, {}), disabled: retrying, onClick: retry, children: retrying ? "Retrying\u2026" : "Retry" }),
+      hasDetails && /* @__PURE__ */ jsx(Button, { variant: "link", onClick: () => setShowDetails((v) => !v), children: showDetails ? "Hide details" : "Details" })
+    ] }),
+    hasDetails && showDetails && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-col gap-0.5 rounded bg-muted/50 px-2 py-1.5 font-mono text-[11px] leading-relaxed text-muted-foreground", children: [
+      (errorType || code != null) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-3", children: [
+        errorType && /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "type: " }),
+          errorType,
+          /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: errorType })
+        ] }),
+        code != null && /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "code: " }),
+          code
+        ] })
+      ] }),
+      typeof detail === "string" && detail.length > 0 && detail !== shownMessage && /* @__PURE__ */ jsx("span", { className: "whitespace-pre-wrap break-words", children: detail })
+    ] })
+  ] });
 }
 export {
   AssistantError

package/dist/agents/components/run/AssistantWarning.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { AlertTriangle } from "lucide-react";
 import { Button } from "@ai-matrx/design-system/controls";
@@ -8,7 +9,7 @@ import { incompleteLabel } from "../../redux/execution-system/messages/turn-outc
 function AssistantWarning({ warning }) {
   const [showDetails, setShowDetails] = useState(false);
   if (isAnswerKeptWarning(warning)) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       IncompleteNote,
       {
         label: incompleteLabel(warning.code),
@@ -21,7 +22,22 @@ function AssistantWarning({ warning }) {
   const hasDetails = Boolean(
     detail && (detail !== message || warning.code)
   );
-  return /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-x-2.5 gap-y-1" }, /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-1.5 text-amber-700 dark:text-amber-400" }, /* @__PURE__ */ React.createElement(AlertTriangle, { className: "h-3.5 w-3.5 shrink-0" }), message), hasDetails && /* @__PURE__ */ React.createElement(Button, { variant: "link", onClick: () => setShowDetails((value) => !value) }, showDetails ? "Hide details" : "Details")), hasDetails && showDetails && /* @__PURE__ */ React.createElement("div", { className: "mt-1 flex flex-col gap-0.5 rounded bg-amber-500/10 px-2 py-1.5 font-mono text-[11px] leading-relaxed text-muted-foreground" }, warning.code && /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/60" }, "code: "), warning.code), detail && detail !== message && /* @__PURE__ */ React.createElement("span", { className: "whitespace-pre-wrap break-words" }, detail)));
+  return /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2.5 gap-y-1", children: [
+      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-amber-700 dark:text-amber-400", children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3.5 w-3.5 shrink-0" }),
+        message
+      ] }),
+      hasDetails && /* @__PURE__ */ jsx(Button, { variant: "link", onClick: () => setShowDetails((value) => !value), children: showDetails ? "Hide details" : "Details" })
+    ] }),
+    hasDetails && showDetails && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-col gap-0.5 rounded bg-amber-500/10 px-2 py-1.5 font-mono text-[11px] leading-relaxed text-muted-foreground", children: [
+      warning.code && /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "code: " }),
+        warning.code
+      ] }),
+      detail && detail !== message && /* @__PURE__ */ jsx("span", { className: "whitespace-pre-wrap break-words", children: detail })
+    ] })
+  ] });
 }
 export {
   AssistantWarning

package/dist/agents/components/run/GenerationJobCard.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { Clapperboard } from "lucide-react";
 import { Progress } from "@ai-matrx/design-system";
@@ -86,7 +87,7 @@ function GenerationJobCard({
     typeof aspect === "string" && aspect ? aspect : null,
     describeEstimate(estimate, unit)
   ].filter(Boolean);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       role: "status",
@@ -95,11 +96,23 @@ function GenerationJobCard({
       className: cn(
         "w-full max-w-md rounded-lg border border-border bg-card p-3 text-sm",
         className
-      )
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex min-w-0 items-center gap-2" }, /* @__PURE__ */ React.createElement(Clapperboard, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ React.createElement("span", { className: "min-w-0 truncate" }, /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, "Generating a video"), job.modelLabel && /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, " \xB7 ", job.modelLabel)), elapsed && /* @__PURE__ */ React.createElement("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-muted-foreground" }, elapsed)),
-    /* @__PURE__ */ React.createElement(Progress, { value: null, "aria-label": "Generating a video", className: "mt-2 h-1.5" }),
-    /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-xs text-muted-foreground", "data-testid": "generation-job-facts" }, facts.join(" \xB7 "))
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Clapperboard, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 truncate", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Generating a video" }),
+            job.modelLabel && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+              " \xB7 ",
+              job.modelLabel
+            ] })
+          ] }),
+          elapsed && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-muted-foreground", children: elapsed })
+        ] }),
+        /* @__PURE__ */ jsx(Progress, { value: null, "aria-label": "Generating a video", className: "mt-2 h-1.5" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", "data-testid": "generation-job-facts", children: facts.join(" \xB7 ") })
+      ]
+    }
   );
 }
 export {

package/dist/agents/components/run/IncompleteNote.js

@@ -1,10 +1,20 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { AlertTriangle } from "lucide-react";
 import { Button } from "@ai-matrx/design-system/controls";
 function IncompleteNote({ label, detail }) {
   const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ React.createElement("div", { className: "mt-1 text-xs", "data-testid": "incomplete-note" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-x-2.5 gap-y-1" }, /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-1.5 text-amber-700 dark:text-amber-400" }, /* @__PURE__ */ React.createElement(AlertTriangle, { className: "h-3.5 w-3.5 shrink-0" }), label), detail && /* @__PURE__ */ React.createElement(Button, { variant: "link", onClick: () => setOpen((v) => !v) }, open ? "Hide details" : "Details")), detail && open && /* @__PURE__ */ React.createElement("div", { className: "mt-1 rounded bg-amber-500/10 px-2 py-1.5 text-[11px] leading-relaxed text-muted-foreground" }, detail));
+  return /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs", "data-testid": "incomplete-note", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2.5 gap-y-1", children: [
+      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-amber-700 dark:text-amber-400", children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3.5 w-3.5 shrink-0" }),
+        label
+      ] }),
+      detail && /* @__PURE__ */ jsx(Button, { variant: "link", onClick: () => setOpen((v) => !v), children: open ? "Hide details" : "Details" })
+    ] }),
+    detail && open && /* @__PURE__ */ jsx("div", { className: "mt-1 rounded bg-amber-500/10 px-2 py-1.5 text-[11px] leading-relaxed text-muted-foreground", children: detail })
+  ] });
 }
 export {
   IncompleteNote

package/dist/agents/components/run/RunJobWorkingLine.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { ShimmerText } from "@ai-matrx/rich-content/utils/lifted/ShimmerText";
 import { useAppSelector } from "../../../store/hooks.js";
@@ -23,22 +24,24 @@ function RunJobWorkingLine({
   if (!job) return null;
   const started = startedAt ? Date.parse(startedAt) : NaN;
   const elapsed = Number.isFinite(started) ? formatDurationMs(now - started) : null;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className,
       role: "status",
       "aria-live": "polite",
-      "data-run-job": job.kind
-    },
-    /* @__PURE__ */ React.createElement(
-      ShimmerText,
-      {
-        text: runJobLabel(job.kind, job.modelLabel),
-        className: "text-sm"
-      }
-    ),
-    elapsed && /* @__PURE__ */ React.createElement("span", { className: "ml-2 text-xs tabular-nums text-muted-foreground" }, elapsed)
+      "data-run-job": job.kind,
+      children: [
+        /* @__PURE__ */ jsx(
+          ShimmerText,
+          {
+            text: runJobLabel(job.kind, job.modelLabel),
+            className: "text-sm"
+          }
+        ),
+        elapsed && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs tabular-nums text-muted-foreground", children: elapsed })
+      ]
+    }
   );
 }
 function useIsRunJob(requestId) {

package/dist/agents/components/run/run-sidebar/SidebarHeader.js

@@ -1,3 +1,4 @@
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Link } from "../../../../host/navigation.js";
 import { AgentSelectorIsland } from "../../shared/AgentSelectorIsland.js";
 import {
@@ -16,27 +17,33 @@ function SidebarHeader({
   basePath = "/agents",
   backHref
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center shrink-0 w-full h-10" }, /* @__PURE__ */ React.createElement(Link, { href: backHref ?? basePath, "aria-label": "Back to Agents" }, /* @__PURE__ */ React.createElement(ChevronLeftTapButton, null)), /* @__PURE__ */ React.createElement(
-    SearchGroup,
-    {
-      id: "agent-run-header-search-group",
-      expand: false,
-      placeholder: "Search...",
-      fill: true,
-      className: "flex-1"
-    },
-    /* @__PURE__ */ React.createElement(
-      AgentSelectorIsland,
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center shrink-0 w-full h-10", children: [
+    /* @__PURE__ */ jsx(Link, { href: backHref ?? basePath, "aria-label": "Back to Agents", children: /* @__PURE__ */ jsx(ChevronLeftTapButton, {}) }),
+    /* @__PURE__ */ jsxs(
+      SearchGroup,
       {
-        agentId,
-        initialName: "Run Agent",
-        triggerSlot: /* @__PURE__ */ React.createElement(PowerTapButton, { variant: "group" }),
-        basePath
+        id: "agent-run-header-search-group",
+        expand: false,
+        placeholder: "Search...",
+        fill: true,
+        className: "flex-1",
+        children: [
+          /* @__PURE__ */ jsx(
+            AgentSelectorIsland,
+            {
+              agentId,
+              initialName: "Run Agent",
+              triggerSlot: /* @__PURE__ */ jsx(PowerTapButton, { variant: "group" }),
+              basePath
+            }
+          ),
+          /* @__PURE__ */ jsx(SearchGroupTrigger, { id: "agent-run-header-search-group" }),
+          /* @__PURE__ */ jsx(PanelLeftTapButton, { variant: "group", onClick: () => onToggleSidebar() })
+        ]
       }
     ),
-    /* @__PURE__ */ React.createElement(SearchGroupTrigger, { id: "agent-run-header-search-group" }),
-    /* @__PURE__ */ React.createElement(PanelLeftTapButton, { variant: "group", onClick: () => onToggleSidebar() })
-  ), /* @__PURE__ */ React.createElement(AgentNewRunButton, { surfaceKey }));
+    /* @__PURE__ */ jsx(AgentNewRunButton, { surfaceKey })
+  ] });
 }
 export {
   SidebarHeader