@cntyclub/agent-react 0.9.2 → 0.10.0

package/dist/components/agent-panel.d.ts

@@ -12,11 +12,13 @@ export interface AgentPanelProps {
     onClose: () => void;
     /** Remember a write tool and auto-approve its future prompts. */
     onAlwaysApprove: (toolName: string) => void;
+    /** Message id to render a "New messages" divider before (arrived while closed). */
+    newMessageAnchorId?: string | null;
     className?: string;
 }
 /**
  * The chat surface shared by the popup panel and fullscreen Agent Mode.
  * Header (title, history, new chat, expand/collapse, close) + messages + input.
  */
-export declare function AgentPanel({ agentMode, canToggleAgentMode, chat, className, config, onAlwaysApprove, onClose, onToggleAgentMode, }: AgentPanelProps): React.JSX.Element;
+export declare function AgentPanel({ agentMode, canToggleAgentMode, chat, className, config, newMessageAnchorId, onAlwaysApprove, onClose, onToggleAgentMode, }: AgentPanelProps): React.JSX.Element;
 //# sourceMappingURL=agent-panel.d.ts.map

package/dist/components/agent-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-panel.d.ts","sourceRoot":"","sources":["../../src/components/agent-panel.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAQ5C,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,cAAc,GAAG,gBAAgB,CAAC;IACxC,yCAAyC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,kBAAkB,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iEAAiE;IACjE,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,kBAAkB,EAClB,IAAI,EACJ,SAAS,EACT,MAAM,EACN,eAAe,EACf,OAAO,EACP,iBAAiB,GAClB,EAAE,eAAe,qBAkTjB"}
+{"version":3,"file":"agent-panel.d.ts","sourceRoot":"","sources":["../../src/components/agent-panel.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAQ5C,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,cAAc,GAAG,gBAAgB,CAAC;IACxC,yCAAyC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,kBAAkB,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iEAAiE;IACjE,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,kBAAkB,EAClB,IAAI,EACJ,SAAS,EACT,MAAM,EACN,kBAAkB,EAClB,eAAe,EACf,OAAO,EACP,iBAAiB,GAClB,EAAE,eAAe,qBAsUjB"}

package/dist/components/agent-widget.d.ts

@@ -9,15 +9,15 @@ export interface AgentWidgetProps {
 /**
  * The embeddable Agent Mode widget.
  *
- * - Closed: a floating round button (bottom-right by default).
- * - Open on desktop: a popup panel anchored to the button, with an
- *   "Agent Mode" button that expands to a fullscreen chat. While in the popup,
- *   the widget can navigate the host app to pages related to the tools the
- *   agent uses (via `config.pages` + `config.navigate`).
- * - Open on mobile: fullscreen from the start.
+ * - Closed: a floating round button. While closed, it surfaces what the agent
+ *   is doing — a live "Thinking… / Calling tools…" ticker, an unread badge when
+ *   a reply finished, and an "approval needed" chip when a write is waiting.
+ * - Open on desktop: a popup panel that can expand to fullscreen ("Agent Mode").
+ * - Open on mobile: fullscreen.
  *
- * All colors come from the host app's UI-kit theme tokens, so light/dark mode
- * follows the dashboard automatically.
+ * Open/close and fullscreen transitions are animated (scale from the launcher
+ * corner; size morph between popup and fullscreen). All colors come from the
+ * host app's UI-kit theme tokens.
  */
 export declare function AgentWidget({ config, onOpenChange, open: controlledOpen }: AgentWidgetProps): React.JSX.Element;
 //# sourceMappingURL=agent-widget.d.ts.map

package/dist/components/agent-widget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-widget.d.ts","sourceRoot":"","sources":["../../src/components/agent-widget.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,UAAU,CAAC;AAK1D,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,WAAW,CAAC;IACpB,wCAAwC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,gBAAgB,qBAkI3F"}
+{"version":3,"file":"agent-widget.d.ts","sourceRoot":"","sources":["../../src/components/agent-widget.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,UAAU,CAAC;AAK1D,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,WAAW,CAAC;IACpB,wCAAwC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAQD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,gBAAgB,qBAoQ3F"}

package/dist/index.js

@@ -1,7 +1,8 @@
-import { Button, cn, Tooltip, TooltipTrigger, TooltipContent, ChatMessage, ChatMessageBubble, Markdown, Spinner, Checkbox, Collapsible, CollapsibleTrigger, ChatToolChip, CollapsiblePanel, ChatToolCard, ChatToolCardHeader, ChatToolCardActions, Group, Menu, MenuTrigger, MenuPopup, MenuItem, ChatHeader, ChatHeaderAvatar, ChatHeaderTitle, ChatHeaderActions, Chat, ChatEmptyState, ChatEmptyStateIcon, ChatEmptyStateTitle, ChatEmptyStateDescription, ChatSuggestions, ChatSuggestion, useMediaQuery, TooltipProvider, Fab, DataTablePaged } from '@cntyclub/ui-react';
+import { Button, cn, Tooltip, TooltipTrigger, TooltipContent, ChatMessage, ChatMessageBubble, Markdown, Spinner, Checkbox, Collapsible, CollapsibleTrigger, ChatToolChip, CollapsiblePanel, ChatToolCard, ChatToolCardHeader, ChatToolCardActions, Group, Menu, MenuTrigger, MenuPopup, MenuItem, ChatHeader, ChatHeaderAvatar, ChatHeaderTitle, ChatHeaderActions, Chat, ChatEmptyState, ChatEmptyStateIcon, ChatEmptyStateTitle, ChatEmptyStateDescription, ChatSuggestions, ChatSuggestion, useMediaQuery, TooltipProvider, DataTablePaged } from '@cntyclub/ui-react';
 import { FileTextIcon, XIcon, PaperclipIcon, ArrowUpIcon, CheckIcon, CopyIcon, Maximize2Icon, ListChecksIcon, ChevronDownIcon, ShieldAlertIcon, CheckCheckIcon, UploadCloudIcon, HistoryIcon, SquarePenIcon, Minimize2Icon, Trash2Icon, SparklesIcon, DownloadIcon, CodeIcon } from 'lucide-react';
 import * as React8 from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { motion, AnimatePresence } from 'motion/react';
 
 // src/api-client.ts
 var AgentApiError = class extends Error {
@@ -1042,6 +1043,7 @@ function AgentPanel({
   chat,
   className,
   config,
+  newMessageAnchorId,
   onAlwaysApprove,
   onClose,
   onToggleAgentMode
@@ -1262,9 +1264,30 @@ function AgentPanel({
               suggestion
             )) })
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            groupMessages(chat.messages).map(
-              (item) => item.kind === "tool-activity" ? /* @__PURE__ */ jsx(ChatMessage, { from: "assistant", children: /* @__PURE__ */ jsx(ToolActivityGroup, { describeToolCall: config.describeToolCall, steps: item.steps }) }, item.key) : /* @__PURE__ */ jsx(MessageItem, { message: item.message }, item.key)
-            ),
+            (() => {
+              const grouped = groupMessages(chat.messages);
+              const anchorKey = newMessageAnchorId ? grouped.find(
+                (it) => it.kind !== "tool-activity" && it.message.id === newMessageAnchorId
+              )?.key : void 0;
+              return grouped.map((item) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+                item.key === anchorKey ? /* @__PURE__ */ jsx(NewMessagesDivider, {}) : null,
+                /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    initial: { opacity: 0, y: 8 },
+                    animate: { opacity: 1, y: 0 },
+                    transition: { duration: 0.18, ease: "easeOut" },
+                    children: item.kind === "tool-activity" ? /* @__PURE__ */ jsx(ChatMessage, { from: "assistant", children: /* @__PURE__ */ jsx(
+                      ToolActivityGroup,
+                      {
+                        describeToolCall: config.describeToolCall,
+                        steps: item.steps
+                      }
+                    ) }) : /* @__PURE__ */ jsx(MessageItem, { message: item.message })
+                  }
+                )
+              ] }, item.key));
+            })(),
             chat.pendingApprovals.map((approval) => /* @__PURE__ */ jsx(
               ToolApprovalCard,
               {
@@ -1314,6 +1337,13 @@ function AgentPanel({
     }
   );
 }
+function NewMessagesDivider() {
+  return /* @__PURE__ */ jsxs("div", { className: "my-1 flex items-center gap-2", "aria-label": "New messages", children: [
+    /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
+    /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: "New messages" }),
+    /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
+  ] });
+}
 var OPTIMISTIC_ID_PREFIX = "optimistic-";
 var STREAMING_ID_PREFIX = "streaming-";
 var optimisticCounter = 0;
@@ -1515,8 +1545,10 @@ function useAgentChat(config) {
     try {
       const { conversations: list } = await client.listConversations();
       setConversations(list);
+      return list;
     } catch (err) {
       handleFailure(err);
+      return [];
     }
   }, [client, handleFailure]);
   const openConversation = React8.useCallback(
@@ -1616,45 +1648,109 @@ function useAlwaysApprove(clientId) {
   );
   return { clearAlwaysApprove, isAlwaysApproved, setAlwaysApprove };
 }
+function isUnreadable(message) {
+  if (message.id.startsWith("streaming-")) return false;
+  return message.role === "assistant" || message.role === "tool";
+}
 function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
+  const behavior = config.behavior ?? {};
+  const position = config.appearance?.position ?? "bottom-right";
+  const isControlled = controlledOpen !== void 0;
+  const storageKey2 = `cc-agent-open:${config.clientId}`;
   const [uncontrolledOpen, setUncontrolledOpen] = React8.useState(false);
   const open = controlledOpen ?? uncontrolledOpen;
+  const persist = React8.useCallback(
+    (next) => {
+      if (isControlled || !behavior.persistOpenState) return;
+      try {
+        window.localStorage.setItem(storageKey2, next ? "1" : "0");
+      } catch {
+      }
+    },
+    [behavior.persistOpenState, isControlled, storageKey2]
+  );
   const setOpen = React8.useCallback(
     (next) => {
       setUncontrolledOpen(next);
+      persist(next);
       onOpenChange?.(next);
     },
-    [onOpenChange]
+    [onOpenChange, persist]
   );
   const [agentMode, setAgentMode] = React8.useState(false);
-  const isDesktop = useMediaQuery("(min-width: 640px)", {
-    defaultSSRValue: true,
-    ssr: true
-  });
+  const isDesktop = useMediaQuery("(min-width: 640px)", { defaultSSRValue: true, ssr: true });
   const fullscreen = !isDesktop || agentMode;
   const chat = useAgentChat(config);
   const alwaysApprove = useAlwaysApprove(config.clientId);
-  const { pendingApprovals, resolveApproval, resolvingApprovalId } = chat;
+  const { messages, pendingApprovals, resolveApproval, resolvingApprovalId, sending } = chat;
+  const bootRef = React8.useRef(false);
+  React8.useEffect(() => {
+    if (isControlled || bootRef.current) return;
+    bootRef.current = true;
+    let cancelled = false;
+    void (async () => {
+      if (behavior.openLastConversation !== false) {
+        const list = await chat.refreshConversations();
+        if (cancelled) return;
+        if (list.length) await chat.openConversation(list[0].id);
+        if (cancelled) return;
+      }
+      let shouldOpen = behavior.initialOpen ?? false;
+      if (behavior.persistOpenState) {
+        try {
+          const stored = window.localStorage.getItem(storageKey2);
+          if (stored !== null) shouldOpen = stored === "1";
+        } catch {
+        }
+      }
+      if (shouldOpen) {
+        setUncontrolledOpen(true);
+        onOpenChange?.(true);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const seenCountRef = React8.useRef(0);
+  const [anchorId, setAnchorId] = React8.useState(null);
+  React8.useEffect(() => {
+    if (open) {
+      if (messages.length > seenCountRef.current) {
+        const firstUnread = messages[seenCountRef.current];
+        setAnchorId(firstUnread && isUnreadable(firstUnread) ? firstUnread.id : null);
+      }
+      seenCountRef.current = messages.length;
+    }
+  }, [open, messages]);
+  const unreadCount = open ? 0 : messages.slice(seenCountRef.current).filter(isUnreadable).length;
+  const workLabel = React8.useMemo(() => {
+    if (!sending) return null;
+    const last = messages[messages.length - 1];
+    if (last?.role === "tool") return "Calling tools\u2026";
+    if (last?.role === "assistant" && (last.tool_calls?.length ?? 0) > 0) return "Calling tools\u2026";
+    return "Thinking\u2026";
+  }, [sending, messages]);
+  const approvalWaiting = pendingApprovals.length > 0;
   const { isAlwaysApproved } = alwaysApprove;
   React8.useEffect(() => {
-    if (!open || resolvingApprovalId) return;
+    if (resolvingApprovalId) return;
     const target = pendingApprovals.find((approval) => isAlwaysApproved(approval.tool_name));
     if (target) void resolveApproval(target.id, true);
-  }, [open, pendingApprovals, resolvingApprovalId, isAlwaysApproved, resolveApproval]);
+  }, [pendingApprovals, resolvingApprovalId, isAlwaysApproved, resolveApproval]);
   const firedWriteIds = React8.useRef(/* @__PURE__ */ new Set());
   const { onWriteSuccess } = config;
   React8.useEffect(() => {
     if (!onWriteSuccess) return;
-    for (const message of chat.messages) {
+    for (const message of messages) {
       if (message.role !== "tool" || !message.is_write || message.tool_status !== "success") continue;
       if (firedWriteIds.current.has(message.id)) continue;
       firedWriteIds.current.add(message.id);
-      const args = findToolArguments(chat.messages, message);
+      const args = findToolArguments(messages, message);
       onWriteSuccess({ arguments: args, toolName: message.tool_name ?? "" });
     }
-  }, [chat.messages, onWriteSuccess]);
+  }, [messages, onWriteSuccess]);
   const lastNavigatedMessageId = React8.useRef(null);
-  const { messages } = chat;
   React8.useEffect(() => {
     if (!open || fullscreen || !config.navigate || !config.pages?.length) return;
     const toolMessages = messages.filter((message) => message.role === "tool");
@@ -1671,65 +1767,133 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
     setOpen(false);
     setAgentMode(false);
   }, [setOpen]);
+  const transformOrigin = position === "bottom-left" ? "bottom left" : "bottom right";
+  const launcherHidden = open || config.appearance?.hideLauncher;
   return /* @__PURE__ */ jsxs(TooltipProvider, { children: [
-    !open && !config.appearance?.hideLauncher ? /* @__PURE__ */ jsx(
-      Fab,
+    /* @__PURE__ */ jsx(AnimatePresence, { children: !launcherHidden ? /* @__PURE__ */ jsxs(
+      motion.div,
       {
-        "aria-label": "Open assistant",
-        onClick: () => setOpen(true),
-        position: config.appearance?.position ?? "bottom-right",
-        children: /* @__PURE__ */ jsx(SparklesIcon, {})
-      }
-    ) : null,
-    open ? fullscreen ? /* @__PURE__ */ jsx(
-      "div",
+        initial: { opacity: 0, scale: 0.6 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.6 },
+        transition: { type: "spring", stiffness: 300, damping: 24 },
+        style: { transformOrigin },
+        className: cn(
+          "fixed z-50 flex flex-col items-end gap-2",
+          position === "bottom-left" ? "bottom-4 left-4 items-start sm:bottom-6 sm:left-6" : "right-4 bottom-4 sm:right-6 sm:bottom-6"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: approvalWaiting ? /* @__PURE__ */ jsx(StatusChip, { tone: "warning", pulse: true, children: "Approval needed" }, "approval") : workLabel ? /* @__PURE__ */ jsx(StatusChip, { tone: "muted", children: workLabel }, workLabel) : null }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Open assistant",
+                onClick: () => setOpen(true),
+                className: "flex size-14 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg outline-none transition-transform hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                children: /* @__PURE__ */ jsx(SparklesIcon, { className: "size-6" })
+              }
+            ),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: unreadCount > 0 ? /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                initial: { scale: 0 },
+                animate: { scale: 1 },
+                exit: { scale: 0 },
+                transition: { type: "spring", stiffness: 500, damping: 20 },
+                className: "absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1 text-xs font-semibold text-destructive-foreground shadow",
+                "aria-label": `${unreadCount} new message${unreadCount === 1 ? "" : "s"}`,
+                children: unreadCount > 9 ? "9+" : unreadCount
+              },
+              "badge"
+            ) : null })
+          ] })
+        ]
+      },
+      "agent-launcher"
+    ) : null }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(
+      motion.div,
       {
-        "aria-modal": "true",
-        className: "fixed inset-0 z-50 flex flex-col bg-background",
-        role: "dialog",
-        children: /* @__PURE__ */ jsx(
-          AgentPanel,
-          {
-            agentMode,
-            canToggleAgentMode: isDesktop,
-            chat,
-            className: "flex-1",
-            config,
-            onAlwaysApprove: alwaysApprove.setAlwaysApprove,
-            onClose: closePanel,
-            onToggleAgentMode: () => setAgentMode((value) => !value)
+        layout: true,
+        initial: { opacity: 0, scale: 0.9 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.9 },
+        transition: { type: "spring", stiffness: 260, damping: 28 },
+        style: {
+          transformOrigin,
+          ...fullscreen ? {} : {
+            height: `min(${config.appearance?.panelHeight ?? 640}px, calc(100dvh - 3rem))`,
+            width: `min(${config.appearance?.panelWidth ?? 400}px, calc(100vw - 2rem))`
           }
-        )
-      }
-    ) : /* @__PURE__ */ jsx(
-      "div",
-      {
+        },
         className: cn(
-          "fixed z-50 flex flex-col overflow-hidden rounded-2xl border border-border shadow-2xl",
-          (config.appearance?.position ?? "bottom-right") === "bottom-left" ? "bottom-4 left-4 sm:bottom-6 sm:left-6" : "right-4 bottom-4 sm:right-6 sm:bottom-6"
+          "fixed z-50 flex flex-col overflow-hidden bg-background",
+          fullscreen ? "inset-0" : cn(
+            "rounded-2xl border border-border shadow-2xl",
+            position === "bottom-left" ? "bottom-4 left-4 sm:bottom-6 sm:left-6" : "right-4 bottom-4 sm:right-6 sm:bottom-6"
+          )
         ),
         role: "dialog",
-        style: {
-          height: `min(${config.appearance?.panelHeight ?? 640}px, calc(100dvh - 3rem))`,
-          width: `min(${config.appearance?.panelWidth ?? 400}px, calc(100vw - 2rem))`
-        },
+        "aria-modal": fullscreen ? "true" : void 0,
         children: /* @__PURE__ */ jsx(
           AgentPanel,
           {
-            agentMode: false,
-            canToggleAgentMode: true,
+            agentMode: fullscreen && agentMode,
+            canToggleAgentMode: isDesktop,
             chat,
             className: "flex-1",
             config,
+            newMessageAnchorId: anchorId,
             onAlwaysApprove: alwaysApprove.setAlwaysApprove,
             onClose: closePanel,
-            onToggleAgentMode: () => setAgentMode(true)
+            onToggleAgentMode: () => setAgentMode((value) => !value)
           }
         )
-      }
-    ) : null
+      },
+      "agent-panel"
+    ) : null })
   ] });
 }
+function StatusChip({
+  children,
+  tone,
+  pulse
+}) {
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      layout: true,
+      initial: { opacity: 0, y: 6, scale: 0.9 },
+      animate: { opacity: 1, y: 0, scale: 1 },
+      exit: { opacity: 0, y: 6, scale: 0.9 },
+      transition: { duration: 0.18 },
+      className: cn(
+        "flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium shadow-sm",
+        tone === "warning" ? "border-warning bg-warning-surface text-warning-foreground" : "border-border bg-card text-secondary-foreground"
+      ),
+      children: [
+        pulse ? /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-warning-foreground" }) : /* @__PURE__ */ jsxs("span", { className: "flex gap-0.5", children: [
+          /* @__PURE__ */ jsx(Dot, { delay: 0 }),
+          /* @__PURE__ */ jsx(Dot, { delay: 0.15 }),
+          /* @__PURE__ */ jsx(Dot, { delay: 0.3 })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function Dot({ delay }) {
+  return /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: "size-1.5 rounded-full bg-current opacity-60",
+      animate: { opacity: [0.2, 1, 0.2] },
+      transition: { duration: 1, repeat: Infinity, delay }
+    }
+  );
+}
 function findToolArguments(messages, toolMessage) {
   if (!toolMessage.tool_call_id) return {};
   for (let index = messages.length - 1; index >= 0; index -= 1) {