@signalflare-ai/ui 1.1.0 → 1.3.0

package/dist/{ai-message-BjnFznXy.js → ai-message-Ci3gwM7G.js}

@@ -1,11 +1,13 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
-import { t as Tooltip } from "./tooltip-Cb7QW-7H.js";
-import { t as Button } from "./button-De0267YU.js";
+import { t as cn } from "./cn-CmAOpn49.js";
+import { t as Text } from "./text-iQ0YUFNg.js";
+import { t as Tooltip } from "./tooltip-uobk6Oh-.js";
+import { t as Button } from "./button-BHOgXJRU.js";
 import { createContext, memo, useCallback, useContext, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CaretLeftIcon, CaretRightIcon, FileIcon, FileTextIcon, ImageIcon, XIcon } from "@phosphor-icons/react";
 //#region src/components/ai-message/ai-message.tsx
+var AiMessageContext = createContext(null);
 var SF_AI_MESSAGE_VARIANTS = { from: {
 	user: {
 		classes: "ml-auto w-full max-w-[70%] justify-end is-user",
@@ -38,19 +40,36 @@ var SF_AI_MESSAGE_DEFAULT_VARIANTS = { from: "assistant" };
 * ```
 */
 function AiMessage({ className, from, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("group flex flex-col gap-2 p-4", SF_AI_MESSAGE_VARIANTS.from[from].classes, className),
-		...props
+	return /* @__PURE__ */ jsx(AiMessageContext.Provider, {
+		value: { from },
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("group flex flex-col gap-2 p-4", SF_AI_MESSAGE_VARIANTS.from[from].classes, className),
+			...props
+		})
 	});
 }
 /**
+* Detects if children is plain text (string or number) suitable for shrink wrapping.
+*/
+function isPlainText(children) {
+	return typeof children === "string" || typeof children === "number";
+}
+/**
 * Content bubble. Applies user/assistant bubble styles via group selectors.
+*
+* For user messages with plain text content, uses `Text wrap="shrink"` so short
+* messages don't stretch to the full 70% container width.
 */
 function AiMessageContent({ children, className, ...props }) {
+	const shouldShrink = useContext(AiMessageContext)?.from === "user" && isPlainText(children);
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex w-fit max-w-full flex-col gap-2 overflow-hidden text-sm", "group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-sf-control group-[.is-user]:px-4 group-[.is-user]:py-3", "group-[.is-assistant]:text-sf-default", className),
+		className: cn("flex w-fit max-w-full flex-col gap-2 overflow-hidden whitespace-pre-wrap text-sm", "group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-sf-control group-[.is-user]:px-4 group-[.is-user]:py-3", "group-[.is-assistant]:text-sf-default", className),
 		...props,
-		children
+		children: shouldShrink ? /* @__PURE__ */ jsx(Text, {
+			wrap: "shrink",
+			as: "span",
+			children
+		}) : children
 	});
 }
 /**
@@ -204,7 +223,7 @@ var DOC_EXTS = new Set([
 	"md",
 	"rtf"
 ]);
-var EXT_RE = /\.[^/.]+$/;
+var EXT_RE = /\.[^/.]+$/u;
 function fileIcon(filename) {
 	const ext = filename.split(".").pop()?.toLowerCase() ?? "";
 	if (IMAGE_EXTS.has(ext)) return /* @__PURE__ */ jsx(ImageIcon, { className: "size-3.5" });
@@ -283,4 +302,4 @@ AiMessageAttachment.displayName = "AiMessageAttachment";
 //#endregion
 export { AiMessageAttachments as a, AiMessageBranchSelector as c, SF_AI_MESSAGE_DEFAULT_VARIANTS as d, SF_AI_MESSAGE_VARIANTS as f, AiMessageAttachment as i, AiMessageContent as l, AiMessageAction as n, AiMessageBranch as o, AiMessageActions as r, AiMessageBranchContent as s, AiMessage as t, AiMessageToolbar as u };
 
-//# sourceMappingURL=ai-message-BjnFznXy.js.map
+//# sourceMappingURL=ai-message-Ci3gwM7G.js.map

package/dist/ai-message-Ci3gwM7G.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-message-Ci3gwM7G.js","names":[],"sources":["../src/components/ai-message/ai-message.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  FileIcon,\n  FileTextIcon,\n  ImageIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n  XIcon,\n} from \"@phosphor-icons/react\";\nimport type {\n  ComponentProps,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n} from \"react\";\nimport {\n  createContext,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../button\";\nimport { Text } from \"../text\";\nimport { Tooltip } from \"../tooltip\";\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ninterface AiMessageContextValue {\n  from: SFAiMessageFrom;\n}\n\nconst AiMessageContext = createContext<AiMessageContextValue | null>(null);\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_MESSAGE_VARIANTS = {\n  from: {\n    user: {\n      classes: \"ml-auto w-full max-w-[70%] justify-end is-user\",\n      description: \"User message — right-aligned with max width\",\n    },\n    assistant: {\n      classes: \"w-full is-assistant\",\n      description: \"Assistant message — full width left-aligned\",\n    },\n    system: {\n      classes: \"w-full is-system\",\n      description: \"System message — full width\",\n    },\n  },\n} as const;\n\nexport const SF_AI_MESSAGE_DEFAULT_VARIANTS = {\n  from: \"assistant\",\n} as const;\n\nexport type SFAiMessageFrom = keyof typeof SF_AI_MESSAGE_VARIANTS.from;\n\n// ─── AiMessage ───────────────────────────────────────────────────────────────\n\nexport type AiMessageProps = HTMLAttributes<HTMLDivElement> & {\n  /** Message sender role — controls layout and group class. */\n  from: SFAiMessageFrom;\n};\n\n/**\n * Root message container. Sets layout, group class, and role context.\n *\n * @example\n * ```tsx\n * <AiMessage from=\"user\">\n *   <AiMessageContent>Hello!</AiMessageContent>\n * </AiMessage>\n * <AiMessage from=\"assistant\">\n *   <AiMessageContent><AiResponse>{text}</AiResponse></AiMessageContent>\n *   <AiMessageToolbar>\n *     <AiActions><AiAction tooltip=\"Copy\">...</AiAction></AiActions>\n *   </AiMessageToolbar>\n * </AiMessage>\n * ```\n */\nexport function AiMessage({ className, from, ...props }: AiMessageProps) {\n  return (\n    <AiMessageContext.Provider value={{ from }}>\n      <div\n        className={cn(\n          \"group flex flex-col gap-2 p-4\",\n          SF_AI_MESSAGE_VARIANTS.from[from].classes,\n          className\n        )}\n        {...props}\n      />\n    </AiMessageContext.Provider>\n  );\n}\n\n// ─── AiMessageContent ────────────────────────────────────────────────────────\n\nexport type AiMessageContentProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * Detects if children is plain text (string or number) suitable for shrink wrapping.\n */\nfunction isPlainText(children: ReactNode): children is string | number {\n  return typeof children === \"string\" || typeof children === \"number\";\n}\n\n/**\n * Content bubble. Applies user/assistant bubble styles via group selectors.\n *\n * For user messages with plain text content, uses `Text wrap=\"shrink\"` so short\n * messages don't stretch to the full 70% container width.\n */\nexport function AiMessageContent({\n  children,\n  className,\n  ...props\n}: AiMessageContentProps) {\n  const isUserBubble = useContext(AiMessageContext)?.from === \"user\";\n  const shouldShrink = isUserBubble && isPlainText(children);\n\n  return (\n    <div\n      className={cn(\n        \"flex w-fit max-w-full flex-col gap-2 overflow-hidden whitespace-pre-wrap text-sm\",\n        // User bubble\n        \"group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-sf-control group-[.is-user]:px-4 group-[.is-user]:py-3\",\n        // Assistant text\n        \"group-[.is-assistant]:text-sf-default\",\n        className\n      )}\n      {...props}\n    >\n      {shouldShrink ? (\n        <Text wrap=\"shrink\" as=\"span\">\n          {children}\n        </Text>\n      ) : (\n        children\n      )}\n    </div>\n  );\n}\n\n// ─── AiMessageToolbar ────────────────────────────────────────────────────────\n\nexport type AiMessageToolbarProps = ComponentProps<\"div\">;\n\n/**\n * Bottom toolbar row for action buttons.\n */\nexport function AiMessageToolbar({\n  className,\n  children,\n  ...props\n}: AiMessageToolbarProps) {\n  return (\n    <div\n      className={cn(\n        \"flex w-full items-center justify-between gap-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ─── AiMessageActions ────────────────────────────────────────────────────────\n\nexport type AiMessageActionsProps = ComponentProps<\"div\">;\n\n/** Flex row of message action buttons. */\nexport function AiMessageActions({\n  className,\n  children,\n  ...props\n}: AiMessageActionsProps) {\n  return (\n    <div className={cn(\"flex items-center gap-1\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\n// ─── AiMessageAction ─────────────────────────────────────────────────────────\n\nexport type AiMessageActionProps = ComponentProps<typeof Button> & {\n  /** Tooltip text and accessible label. */\n  tooltip?: string;\n  /** Override accessible label separately from tooltip. */\n  label?: string;\n};\n\n/** Single icon action button with optional tooltip. */\nexport function AiMessageAction({\n  tooltip,\n  label,\n  children,\n  className,\n  variant = \"ghost\",\n  size = \"sm\",\n  ...props\n}: AiMessageActionProps) {\n  const button = (\n    <Button\n      className={cn(\"text-sf-subtle hover:text-sf-default\", className)}\n      size={size}\n      variant={variant}\n      {...props}\n    >\n      {children}\n      {(label ?? tooltip) && (\n        <span className=\"sr-only\">{label ?? tooltip}</span>\n      )}\n    </Button>\n  );\n\n  if (tooltip) {\n    return <Tooltip content={tooltip}>{button}</Tooltip>;\n  }\n  return button;\n}\n\n// ─── Branch context ───────────────────────────────────────────────────────────\n\ninterface AiMessageBranchContextValue {\n  currentBranch: number;\n  totalBranches: number;\n  goToPrevious: () => void;\n  goToNext: () => void;\n  branches: ReactElement[];\n  setBranches: (branches: ReactElement[]) => void;\n}\n\nconst AiMessageBranchContext =\n  createContext<AiMessageBranchContextValue | null>(null);\n\nfunction useAiMessageBranch() {\n  const ctx = useContext(AiMessageBranchContext);\n  if (!ctx)\n    throw new Error(\n      \"AiMessageBranch sub-components must be used within <AiMessageBranch>\"\n    );\n  return ctx;\n}\n\n// ─── AiMessageBranch ─────────────────────────────────────────────────────────\n\nexport type AiMessageBranchProps = HTMLAttributes<HTMLDivElement> & {\n  defaultBranch?: number;\n  onBranchChange?: (index: number) => void;\n};\n\n/**\n * Multi-branch message container. Wraps multiple alternative responses and\n * provides prev/next navigation.\n */\nexport function AiMessageBranch({\n  defaultBranch = 0,\n  onBranchChange,\n  className,\n  ...props\n}: AiMessageBranchProps) {\n  const [currentBranch, setCurrentBranch] = useState(defaultBranch);\n  const [branches, setBranches] = useState<ReactElement[]>([]);\n\n  const handleChange = useCallback(\n    (next: number) => {\n      setCurrentBranch(next);\n      onBranchChange?.(next);\n    },\n    [onBranchChange]\n  );\n\n  const goToPrevious = useCallback(() => {\n    handleChange(currentBranch > 0 ? currentBranch - 1 : branches.length - 1);\n  }, [currentBranch, branches.length, handleChange]);\n\n  const goToNext = useCallback(() => {\n    handleChange(currentBranch < branches.length - 1 ? currentBranch + 1 : 0);\n  }, [currentBranch, branches.length, handleChange]);\n\n  return (\n    <AiMessageBranchContext.Provider\n      value={{\n        currentBranch,\n        totalBranches: branches.length,\n        goToPrevious,\n        goToNext,\n        branches,\n        setBranches,\n      }}\n    >\n      <div className={cn(\"grid w-full gap-2\", className)} {...props} />\n    </AiMessageBranchContext.Provider>\n  );\n}\n\n// ─── AiMessageBranchContent ──────────────────────────────────────────────────\n\nexport type AiMessageBranchContentProps = HTMLAttributes<HTMLDivElement>;\n\n/** Renders only the active branch child. */\nexport function AiMessageBranchContent({\n  children,\n  ...props\n}: AiMessageBranchContentProps) {\n  const { currentBranch, setBranches, branches } = useAiMessageBranch();\n  const arr = Array.isArray(children) ? children : [children];\n\n  useEffect(() => {\n    if (branches.length !== arr.length) setBranches(arr as ReactElement[]);\n  }, [arr, branches, setBranches]);\n\n  return arr.map((branch, i) => (\n    <div\n      className={cn(\n        \"grid gap-2 overflow-hidden\",\n        i !== currentBranch && \"hidden\"\n      )}\n      key={(branch as ReactElement)?.key ?? i}\n      {...props}\n    >\n      {branch}\n    </div>\n  ));\n}\n\n// ─── AiMessageBranchSelector ─────────────────────────────────────────────────\n\nexport type AiMessageBranchSelectorProps = ComponentProps<\"div\">;\n\n/** Prev/next navigator for branches. Hidden when there's only one branch. */\nexport function AiMessageBranchSelector({\n  className,\n  ...props\n}: AiMessageBranchSelectorProps) {\n  const { totalBranches, currentBranch, goToPrevious, goToNext } =\n    useAiMessageBranch();\n\n  if (totalBranches <= 1) return null;\n\n  return (\n    <div className={cn(\"flex items-center gap-0.5\", className)} {...props}>\n      <Button\n        aria-label=\"Previous branch\"\n        disabled={totalBranches <= 1}\n        onClick={goToPrevious}\n        size=\"sm\"\n        variant=\"ghost\"\n      >\n        <CaretLeftIcon className=\"size-3\" />\n      </Button>\n      <span className=\"tabular-nums text-sf-subtle text-xs\">\n        {currentBranch + 1} / {totalBranches}\n      </span>\n      <Button\n        aria-label=\"Next branch\"\n        disabled={totalBranches <= 1}\n        onClick={goToNext}\n        size=\"sm\"\n        variant=\"ghost\"\n      >\n        <CaretRightIcon className=\"size-3\" />\n      </Button>\n    </div>\n  );\n}\n\n// ─── Attachment helpers ───────────────────────────────────────────────────────\n\nconst IMAGE_EXTS = new Set([\"jpg\", \"jpeg\", \"png\", \"gif\", \"webp\", \"svg\", \"ico\"]);\nconst DOC_EXTS = new Set([\"pdf\", \"doc\", \"docx\", \"txt\", \"md\", \"rtf\"]);\nconst EXT_RE = /\\.[^/.]+$/u;\n\nfunction fileIcon(filename: string): ReactNode {\n  const ext = filename.split(\".\").pop()?.toLowerCase() ?? \"\";\n  if (IMAGE_EXTS.has(ext)) return <ImageIcon className=\"size-3.5\" />;\n  if (DOC_EXTS.has(ext)) return <FileTextIcon className=\"size-3.5\" />;\n  return <FileIcon className=\"size-3.5\" />;\n}\n\n// ─── AiMessageAttachments ────────────────────────────────────────────────────\n\nexport type AiMessageAttachmentsProps = ComponentProps<\"div\">;\n\n/** Wrapping flex container for attachment chips. */\nexport function AiMessageAttachments({\n  children,\n  className,\n  ...props\n}: AiMessageAttachmentsProps) {\n  if (!children) return null;\n  return (\n    <div\n      className={cn(\n        \"ml-auto flex w-fit flex-wrap items-start gap-2\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ─── AiMessageAttachment ─────────────────────────────────────────────────────\n\nexport type AiMessageAttachmentProps = HTMLAttributes<HTMLDivElement> & {\n  /** Filename for display and icon selection. */\n  filename: string;\n  /** Object URL or data URL for images. */\n  url?: string;\n  /** MIME type — used to detect images. */\n  mediaType?: string;\n  /** Called when the remove button is clicked. */\n  onRemove?: () => void;\n};\n\n/**\n * Single file attachment chip. Shows image thumbnail or file badge.\n */\nexport const AiMessageAttachment = memo(\n  ({\n    filename,\n    url,\n    mediaType,\n    onRemove,\n    className,\n    ...props\n  }: AiMessageAttachmentProps) => {\n    const isImage = mediaType?.startsWith(\"image/\") && url;\n\n    if (isImage) {\n      return (\n        <div\n          className={cn(\n            \"group relative size-24 overflow-hidden rounded-lg\",\n            \"animate-in fade-in-0 slide-in-from-bottom-2 duration-200\",\n            className\n          )}\n          {...props}\n        >\n          <img\n            alt={filename || \"attachment\"}\n            className=\"size-full object-cover\"\n            src={url}\n          />\n          {onRemove && (\n            <Button\n              aria-label=\"Remove attachment\"\n              className=\"absolute top-2 right-2 size-6 rounded-full bg-sf-overlay/80 p-0 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onRemove();\n              }}\n              size=\"sm\"\n              type=\"button\"\n              variant=\"ghost\"\n            >\n              <XIcon className=\"size-3\" />\n            </Button>\n          )}\n        </div>\n      );\n    }\n\n    const ext = filename.split(\".\").pop()?.toUpperCase() ?? \"FILE\";\n    const name = filename.replace(EXT_RE, \"\");\n\n    return (\n      <div\n        className={cn(\n          \"group relative inline-flex items-center gap-2 rounded-lg bg-sf-tint/50 px-3 py-2 transition-colors hover:bg-sf-tint\",\n          \"animate-in fade-in-0 slide-in-from-bottom-2 duration-200\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"flex size-8 shrink-0 items-center justify-center rounded-md bg-sf-control\">\n          {fileIcon(filename)}\n        </div>\n        <div className=\"flex flex-col\">\n          <span className=\"max-w-[200px] truncate font-medium text-sf-default text-sm\">\n            {name || \"File\"}\n          </span>\n          <span className=\"w-fit rounded bg-sf-tint px-1.5 py-0.5 font-semibold text-sf-subtle text-[10px] uppercase\">\n            {ext}\n          </span>\n        </div>\n        {onRemove && (\n          <Button\n            aria-label=\"Remove attachment\"\n            className=\"absolute top-1 right-1 size-5 rounded-full bg-sf-overlay/80 p-0 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100\"\n            onClick={(e) => {\n              e.stopPropagation();\n              onRemove();\n            }}\n            size=\"sm\"\n            type=\"button\"\n            variant=\"ghost\"\n          >\n            <XIcon className=\"size-3\" />\n          </Button>\n        )}\n      </div>\n    );\n  }\n);\n\nAiMessageAttachment.displayName = \"AiMessageAttachment\";\n"],"mappings":"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"}

package/dist/{ai-mission-header-08__gULL.js → ai-mission-header-CaBc19-t.js}

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
+import { t as cn } from "./cn-CmAOpn49.js";
 import { forwardRef, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckCircleIcon, ClockIcon, CoinsIcon, CpuIcon, SpinnerGapIcon, StopCircleIcon, UsersIcon } from "@phosphor-icons/react";
@@ -168,4 +168,4 @@ AiMissionHeader.displayName = "AiMissionHeader";
 //#endregion
 export { SF_AI_MISSION_HEADER_DEFAULT_VARIANTS as n, SF_AI_MISSION_HEADER_VARIANTS as r, AiMissionHeader as t };
 
-//# sourceMappingURL=ai-mission-header-08__gULL.js.map
+//# sourceMappingURL=ai-mission-header-CaBc19-t.js.map

package/dist/{ai-mission-header-08__gULL.js.map → ai-mission-header-CaBc19-t.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ai-mission-header-08__gULL.js","names":[],"sources":["../src/components/ai-mission-header/ai-mission-header.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  CheckCircleIcon,\n  ClockIcon,\n  CoinsIcon,\n  CpuIcon,\n  SpinnerGapIcon,\n  StopCircleIcon,\n  UsersIcon,\n} from \"@phosphor-icons/react\";\nimport type { ComponentProps } from \"react\";\nimport { forwardRef, useEffect, useState } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport type { AgentTaskList, AgentUsage } from \"../use-agent-harness\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_MISSION_HEADER_VARIANTS = {\n  variant: {\n    default: { classes: \"\", description: \"Full header with all stats\" },\n    compact: { classes: \"\", description: \"Single-row compact header\" },\n  },\n} as const;\n\nexport const SF_AI_MISSION_HEADER_DEFAULT_VARIANTS = {\n  variant: \"default\",\n} as const;\n\nexport type SFAiMissionHeaderVariant =\n  keyof typeof SF_AI_MISSION_HEADER_VARIANTS.variant;\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type AiMissionHeaderProps = Omit<ComponentProps<\"div\">, \"title\"> & {\n  /** The mission goal or title. */\n  title?: string;\n  /** Task list for progress calculation. */\n  taskList?: AgentTaskList | null;\n  /** Token/cost usage summary. */\n  usage?: AgentUsage | null;\n  /** Number of agents currently active. */\n  activeAgentCount?: number;\n  /** Total number of agents that have run or are running. */\n  totalAgentCount?: number;\n  /** Wall-clock ms when the mission started. */\n  startedAt?: number;\n  /** Wall-clock ms when the mission ended. Undefined while still running. */\n  endedAt?: number;\n  /** Whether the mission is currently running. */\n  isRunning?: boolean;\n  /** Called when the user clicks the abort/stop button. */\n  onAbort?: () => void;\n  /** Display variant. @default \"default\" */\n  variant?: SFAiMissionHeaderVariant;\n};\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\nfunction formatElapsed(ms: number): string {\n  const s = Math.floor(ms / 1000);\n  if (s < 60) return `${s}s`;\n  const m = Math.floor(s / 60);\n  const rem = s % 60;\n  return `${m}m ${rem.toString().padStart(2, \"0\")}s`;\n}\n\nfunction formatCost(cost: number): string {\n  if (cost < 0.01) return `${(cost * 100).toFixed(2)}¢`;\n  return `$${cost.toFixed(4)}`;\n}\n\nfunction formatTokens(n: number): string {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;\n  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;\n  return String(n);\n}\n\n/** Live elapsed time that ticks every ~500ms while running. */\nfunction useElapsed(startedAt?: number, endedAt?: number, isRunning = false) {\n  const [elapsed, setElapsed] = useState<number>(\n    startedAt ? (endedAt ?? Date.now()) - startedAt : 0\n  );\n\n  useEffect(() => {\n    if (!startedAt || !isRunning) {\n      if (startedAt) setElapsed((endedAt ?? Date.now()) - startedAt);\n      return;\n    }\n\n    // Tick at 2Hz — efficient for a human-readable seconds display\n    const id = setInterval(() => {\n      setElapsed(Date.now() - startedAt);\n    }, 500);\n    return () => clearInterval(id);\n  }, [startedAt, endedAt, isRunning]);\n\n  return elapsed;\n}\n\n// ─── Progress bar ─────────────────────────────────────────────────────────────\n\nfunction MissionProgress({ taskList }: { taskList?: AgentTaskList | null }) {\n  if (!taskList?.tasks.length) return null;\n\n  const total = taskList.tasks.length;\n  const done = taskList.tasks.filter(\n    (t) => t.status === \"completed\" || t.status === \"cancelled\"\n  ).length;\n  const inProgress = taskList.tasks.filter(\n    (t) => t.status === \"in_progress\"\n  ).length;\n  const pct = total > 0 ? Math.round((done / total) * 100) : 0;\n  const activePct = total > 0 ? Math.round((inProgress / total) * 100) : 0;\n\n  return (\n    <div className=\"flex items-center gap-3\">\n      {/* Bar */}\n      <div className=\"relative h-1.5 flex-1 overflow-hidden rounded-full bg-sf-fill\">\n        {/* Active (in-progress) ghost — slightly ahead of done */}\n        {activePct > 0 && (\n          <div\n            className=\"absolute inset-y-0 left-0 rounded-full bg-sf-brand/30 transition-[width] duration-500\"\n            style={{ width: `${pct + activePct}%` }}\n          />\n        )}\n        {/* Done */}\n        <div\n          className=\"absolute inset-y-0 left-0 rounded-full bg-sf-brand transition-[width] duration-500\"\n          style={{ width: `${pct}%` }}\n        />\n      </div>\n      {/* Fraction */}\n      <span className=\"shrink-0 tabular-nums text-[11px] text-sf-subtle\">\n        {done}/{total}\n      </span>\n    </div>\n  );\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * `AiMissionHeader` — top bar for the Commander dashboard.\n *\n * Shows: mission title, progress bar (from task list), agent count,\n * live elapsed time, token usage, and an abort button while running.\n *\n * @example\n * ```tsx\n * <AiMissionHeader\n *   title=\"Refactor auth module\"\n *   taskList={state.taskList}\n *   usage={state.usage}\n *   activeAgentCount={activeAgents.length}\n *   totalAgentCount={allAgents.length}\n *   startedAt={state.missionStartedAt}\n *   isRunning={state.isRunning}\n *   onAbort={abort}\n * />\n * ```\n */\nexport const AiMissionHeader = forwardRef<HTMLDivElement, AiMissionHeaderProps>(\n  (\n    {\n      title,\n      taskList,\n      usage,\n      activeAgentCount,\n      totalAgentCount,\n      startedAt,\n      endedAt,\n      isRunning = false,\n      onAbort,\n      variant = SF_AI_MISSION_HEADER_DEFAULT_VARIANTS.variant,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const elapsed = useElapsed(startedAt, endedAt, isRunning);\n    const isCompact = variant === \"compact\";\n\n    const statusLabel = isRunning\n      ? \"Running\"\n      : startedAt && endedAt\n        ? \"Completed\"\n        : startedAt\n          ? \"Paused\"\n          : \"Idle\";\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-col gap-2 border-b border-sf-line bg-sf-base px-4 py-3\",\n          isCompact && \"flex-row items-center gap-4 py-2\",\n          className\n        )}\n        {...props}\n      >\n        {/* Top row: title + status + abort */}\n        <div className=\"flex items-center justify-between gap-3\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            {/* Status icon */}\n            {isRunning ? (\n              <SpinnerGapIcon\n                size={14}\n                className=\"shrink-0 animate-spin text-sf-brand\"\n              />\n            ) : startedAt && endedAt ? (\n              <CheckCircleIcon size={14} className=\"shrink-0 text-sf-success\" />\n            ) : (\n              <CpuIcon size={14} className=\"shrink-0 text-sf-subtle\" />\n            )}\n\n            {/* Title */}\n            {title ? (\n              <h2 className=\"truncate text-sm font-semibold text-sf-default\">\n                {title}\n              </h2>\n            ) : (\n              <span className=\"text-sm font-medium text-sf-subtle\">\n                {statusLabel}\n              </span>\n            )}\n          </div>\n\n          {/* Right: stats + abort */}\n          <div className=\"flex shrink-0 items-center gap-3\">\n            {/* Agent count */}\n            {(activeAgentCount !== undefined ||\n              totalAgentCount !== undefined) && (\n              <div className=\"flex items-center gap-1 text-[11px] text-sf-subtle\">\n                <UsersIcon size={11} />\n                <span className=\"tabular-nums\">\n                  {activeAgentCount !== undefined &&\n                  totalAgentCount !== undefined\n                    ? `${activeAgentCount}/${totalAgentCount}`\n                    : (activeAgentCount ?? totalAgentCount)}\n                </span>\n              </div>\n            )}\n\n            {/* Elapsed time */}\n            {startedAt && (\n              <div className=\"flex items-center gap-1 text-[11px] text-sf-subtle\">\n                <ClockIcon size={11} />\n                <span className=\"tabular-nums\">{formatElapsed(elapsed)}</span>\n              </div>\n            )}\n\n            {/* Token cost */}\n            {usage?.cost !== undefined && usage.cost > 0 && (\n              <div className=\"flex items-center gap-1 text-[11px] text-sf-subtle\">\n                <CoinsIcon size={11} />\n                <span className=\"tabular-nums\">{formatCost(usage.cost)}</span>\n              </div>\n            )}\n\n            {/* Tokens */}\n            {usage?.totalTokens !== undefined && (\n              <span className=\"tabular-nums text-[11px] text-sf-subtle\">\n                {formatTokens(usage.totalTokens)} tok\n              </span>\n            )}\n\n            {/* Abort */}\n            {isRunning && onAbort && (\n              <button\n                type=\"button\"\n                aria-label=\"Abort mission\"\n                onClick={onAbort}\n                className={cn(\n                  \"flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium\",\n                  \"text-sf-danger transition-colors hover:bg-sf-danger/10\",\n                  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sf-ring\"\n                )}\n              >\n                <StopCircleIcon size={11} />\n                Stop\n              </button>\n            )}\n          </div>\n        </div>\n\n        {/* Progress bar (only in default variant) */}\n        {!isCompact && <MissionProgress taskList={taskList} />}\n      </div>\n    );\n  }\n);\n\nAiMissionHeader.displayName = \"AiMissionHeader\";\n"],"mappings":"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"}
+{"version":3,"file":"ai-mission-header-CaBc19-t.js","names":[],"sources":["../src/components/ai-mission-header/ai-mission-header.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  CheckCircleIcon,\n  ClockIcon,\n  CoinsIcon,\n  CpuIcon,\n  SpinnerGapIcon,\n  StopCircleIcon,\n  UsersIcon,\n} from \"@phosphor-icons/react\";\nimport type { ComponentProps } from \"react\";\nimport { forwardRef, useEffect, useState } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport type { AgentTaskList, AgentUsage } from \"../use-agent-harness\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_MISSION_HEADER_VARIANTS = {\n  variant: {\n    default: { classes: \"\", description: \"Full header with all stats\" },\n    compact: { classes: \"\", description: \"Single-row compact header\" },\n  },\n} as const;\n\nexport const SF_AI_MISSION_HEADER_DEFAULT_VARIANTS = {\n  variant: \"default\",\n} as const;\n\nexport type SFAiMissionHeaderVariant =\n  keyof typeof SF_AI_MISSION_HEADER_VARIANTS.variant;\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type AiMissionHeaderProps = Omit<ComponentProps<\"div\">, \"title\"> & {\n  /** The mission goal or title. */\n  title?: string;\n  /** Task list for progress calculation. */\n  taskList?: AgentTaskList | null;\n  /** Token/cost usage summary. */\n  usage?: AgentUsage | null;\n  /** Number of agents currently active. */\n  activeAgentCount?: number;\n  /** Total number of agents that have run or are running. */\n  totalAgentCount?: number;\n  /** Wall-clock ms when the mission started. */\n  startedAt?: number;\n  /** Wall-clock ms when the mission ended. Undefined while still running. */\n  endedAt?: number;\n  /** Whether the mission is currently running. */\n  isRunning?: boolean;\n  /** Called when the user clicks the abort/stop button. */\n  onAbort?: () => void;\n  /** Display variant. @default \"default\" */\n  variant?: SFAiMissionHeaderVariant;\n};\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\nfunction formatElapsed(ms: number): string {\n  const s = Math.floor(ms / 1000);\n  if (s < 60) return `${s}s`;\n  const m = Math.floor(s / 60);\n  const rem = s % 60;\n  return `${m}m ${rem.toString().padStart(2, \"0\")}s`;\n}\n\nfunction formatCost(cost: number): string {\n  if (cost < 0.01) return `${(cost * 100).toFixed(2)}¢`;\n  return `$${cost.toFixed(4)}`;\n}\n\nfunction formatTokens(n: number): string {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;\n  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;\n  return String(n);\n}\n\n/** Live elapsed time that ticks every ~500ms while running. */\nfunction useElapsed(startedAt?: number, endedAt?: number, isRunning = false) {\n  const [elapsed, setElapsed] = useState<number>(\n    startedAt ? (endedAt ?? Date.now()) - startedAt : 0\n  );\n\n  useEffect(() => {\n    if (!startedAt || !isRunning) {\n      if (startedAt) setElapsed((endedAt ?? Date.now()) - startedAt);\n      return;\n    }\n\n    // Tick at 2Hz — efficient for a human-readable seconds display\n    const id = setInterval(() => {\n      setElapsed(Date.now() - startedAt);\n    }, 500);\n    return () => clearInterval(id);\n  }, [startedAt, endedAt, isRunning]);\n\n  return elapsed;\n}\n\n// ─── Progress bar ─────────────────────────────────────────────────────────────\n\nfunction MissionProgress({ taskList }: { taskList?: AgentTaskList | null }) {\n  if (!taskList?.tasks.length) return null;\n\n  const total = taskList.tasks.length;\n  const done = taskList.tasks.filter(\n    (t) => t.status === \"completed\" || t.status === \"cancelled\"\n  ).length;\n  const inProgress = taskList.tasks.filter(\n    (t) => t.status === \"in_progress\"\n  ).length;\n  const pct = total > 0 ? Math.round((done / total) * 100) : 0;\n  const activePct = total > 0 ? Math.round((inProgress / total) * 100) : 0;\n\n  return (\n    <div className=\"flex items-center gap-3\">\n      {/* Bar */}\n      <div className=\"relative h-1.5 flex-1 overflow-hidden rounded-full bg-sf-fill\">\n        {/* Active (in-progress) ghost — slightly ahead of done */}\n        {activePct > 0 && (\n          <div\n            className=\"absolute inset-y-0 left-0 rounded-full bg-sf-brand/30 transition-[width] duration-500\"\n            style={{ width: `${pct + activePct}%` }}\n          />\n        )}\n        {/* Done */}\n        <div\n          className=\"absolute inset-y-0 left-0 rounded-full bg-sf-brand transition-[width] duration-500\"\n          style={{ width: `${pct}%` }}\n        />\n      </div>\n      {/* Fraction */}\n      <span className=\"shrink-0 tabular-nums text-[11px] text-sf-subtle\">\n        {done}/{total}\n      </span>\n    </div>\n  );\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * `AiMissionHeader` — top bar for the Commander dashboard.\n *\n * Shows: mission title, progress bar (from task list), agent count,\n * live elapsed time, token usage, and an abort button while running.\n *\n * @example\n * ```tsx\n * <AiMissionHeader\n *   title=\"Refactor auth module\"\n *   taskList={state.taskList}\n *   usage={state.usage}\n *   activeAgentCount={activeAgents.length}\n *   totalAgentCount={allAgents.length}\n *   startedAt={state.missionStartedAt}\n *   isRunning={state.isRunning}\n *   onAbort={abort}\n * />\n * ```\n */\nexport const AiMissionHeader = forwardRef<HTMLDivElement, AiMissionHeaderProps>(\n  (\n    {\n      title,\n      taskList,\n      usage,\n      activeAgentCount,\n      totalAgentCount,\n      startedAt,\n      endedAt,\n      isRunning = false,\n      onAbort,\n      variant = SF_AI_MISSION_HEADER_DEFAULT_VARIANTS.variant,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const elapsed = useElapsed(startedAt, endedAt, isRunning);\n    const isCompact = variant === \"compact\";\n\n    const statusLabel = isRunning\n      ? \"Running\"\n      : startedAt && endedAt\n        ? \"Completed\"\n        : startedAt\n          ? \"Paused\"\n          : \"Idle\";\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-col gap-2 border-b border-sf-line bg-sf-base px-4 py-3\",\n          isCompact && \"flex-row items-center gap-4 py-2\",\n          className\n        )}\n        {...props}\n      >\n        {/* Top row: title + status + abort */}\n        <div className=\"flex items-center justify-between gap-3\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            {/* Status icon */}\n            {isRunning ? (\n              <SpinnerGapIcon\n                size={14}\n                className=\"shrink-0 animate-spin text-sf-brand\"\n              />\n            ) : startedAt && endedAt ? (\n              <CheckCircleIcon size={14} className=\"shrink-0 text-sf-success\" />\n            ) : (\n              <CpuIcon size={14} className=\"shrink-0 text-sf-subtle\" />\n            )}\n\n            {/* Title */}\n            {title ? (\n              <h2 className=\"truncate text-sm font-semibold text-sf-default\">\n                {title}\n              </h2>\n            ) : (\n              <span className=\"text-sm font-medium text-sf-subtle\">\n                {statusLabel}\n              </span>\n            )}\n          </div>\n\n          {/* Right: stats + abort */}\n          <div className=\"flex shrink-0 items-center gap-3\">\n            {/* Agent count */}\n            {(activeAgentCount !== undefined ||\n              totalAgentCount !== undefined) && (\n              <div className=\"flex items-center gap-1 text-[11px] text-sf-subtle\">\n                <UsersIcon size={11} />\n                <span className=\"tabular-nums\">\n                  {activeAgentCount !== undefined &&\n                  totalAgentCount !== undefined\n                    ? `${activeAgentCount}/${totalAgentCount}`\n                    : (activeAgentCount ?? totalAgentCount)}\n                </span>\n              </div>\n            )}\n\n            {/* Elapsed time */}\n            {startedAt && (\n              <div className=\"flex items-center gap-1 text-[11px] text-sf-subtle\">\n                <ClockIcon size={11} />\n                <span className=\"tabular-nums\">{formatElapsed(elapsed)}</span>\n              </div>\n            )}\n\n            {/* Token cost */}\n            {usage?.cost !== undefined && usage.cost > 0 && (\n              <div className=\"flex items-center gap-1 text-[11px] text-sf-subtle\">\n                <CoinsIcon size={11} />\n                <span className=\"tabular-nums\">{formatCost(usage.cost)}</span>\n              </div>\n            )}\n\n            {/* Tokens */}\n            {usage?.totalTokens !== undefined && (\n              <span className=\"tabular-nums text-[11px] text-sf-subtle\">\n                {formatTokens(usage.totalTokens)} tok\n              </span>\n            )}\n\n            {/* Abort */}\n            {isRunning && onAbort && (\n              <button\n                type=\"button\"\n                aria-label=\"Abort mission\"\n                onClick={onAbort}\n                className={cn(\n                  \"flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium\",\n                  \"text-sf-danger transition-colors hover:bg-sf-danger/10\",\n                  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sf-ring\"\n                )}\n              >\n                <StopCircleIcon size={11} />\n                Stop\n              </button>\n            )}\n          </div>\n        </div>\n\n        {/* Progress bar (only in default variant) */}\n        {!isCompact && <MissionProgress taskList={taskList} />}\n      </div>\n    );\n  }\n);\n\nAiMissionHeader.displayName = \"AiMissionHeader\";\n"],"mappings":"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"}

package/dist/{ai-part-group-DBtgTgAn.js → ai-part-group-Dx1Mr92B.js}

@@ -1,7 +1,7 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
-import { d as hasToolResult, l as hasToolError } from "./ai-tool-Cn1O4xjP.js";
-import { t as TextRoll } from "./text-roll-BZ3I1umc.js";
+import { t as cn } from "./cn-CmAOpn49.js";
+import { d as hasToolResult, l as hasToolError } from "./ai-tool-CfRcwmHT.js";
+import { t as TextRoll } from "./text-roll-C3U2jd2u.js";
 import { Children, isValidElement, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CaretDownIcon, SpinnerGapIcon } from "@phosphor-icons/react";
@@ -123,6 +123,7 @@ function TitledSummary({ snapshot, defaultOpen, className, ...props }) {
 			children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
 				render: /* @__PURE__ */ jsx("button", {
 					type: "button",
+					"aria-label": snapshot.title,
 					className: cn("flex w-fit items-center gap-1.5 rounded px-1 py-0.5 text-left", "transition-colors hover:bg-sf-tint")
 				}),
 				children: [
@@ -274,4 +275,4 @@ function groupParts(parts, options = {}) {
 //#endregion
 export { getAiPartGroupSnapshot as n, groupParts as r, AiPartGroup as t };
 
-//# sourceMappingURL=ai-part-group-DBtgTgAn.js.map
+//# sourceMappingURL=ai-part-group-Dx1Mr92B.js.map

package/dist/ai-part-group-Dx1Mr92B.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-part-group-Dx1Mr92B.js","names":[],"sources":["../src/components/ai-part-group/ai-part-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { Collapsible as BaseCollapsible } from \"@base-ui/react/collapsible\";\nimport { CaretDownIcon, SpinnerGapIcon } from \"@phosphor-icons/react\";\nimport type { ComponentProps, ReactElement, ReactNode } from \"react\";\nimport { Children, isValidElement, useState } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { type AiToolPart, hasToolError, hasToolResult } from \"../ai-tool\";\nimport { TextRoll } from \"../text-roll\";\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\ntype FrozenStep = {\n  kind: \"tool\" | \"reasoning\";\n  name: string;\n  ok: boolean;\n  duration?: number;\n};\n\ntype FrozenSnapshot = {\n  title: string;\n  steps: FrozenStep[];\n  errorCount: number;\n  totalDuration: number;\n};\n\n// Module-level snapshot cache. Survives re-renders within the page session.\n// Keyed by `groupKey` — usually the parent message id.\nconst snapshotCache = new Map<string, FrozenSnapshot>();\n\n/** Test-only escape hatch for clearing the snapshot cache. */\nexport function _clearAiPartGroupCache() {\n  snapshotCache.clear();\n}\n\n/**\n * Reads the frozen snapshot for a group, or `undefined` if it hasn't completed\n * yet. Useful for consumers driving custom layouts.\n */\nexport function getAiPartGroupSnapshot(\n  groupKey: string\n): FrozenSnapshot | undefined {\n  return snapshotCache.get(groupKey);\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nexport type AiPartGroupProps = Omit<ComponentProps<\"div\">, \"title\"> & {\n  /**\n   * Stable identifier — usually the parent message id. Required so the group\n   * can persist its frozen snapshot across re-mounts (scroll-back into a\n   * virtualized list re-renders without restarting animations).\n   */\n  groupKey: string;\n  /**\n   * Set to `true` once the parent stream has finished. Triggers the group to\n   * snapshot its current children and from then on render only the static\n   * collapsed summary — ephemeral children never re-mount.\n   */\n  complete?: boolean;\n  /**\n   * Max number of live ephemeral rows visible at once during streaming.\n   * Older rows fall off the top. Pinned rows (errors / user-expanded) render\n   * above the live window and do not count toward this cap.\n   * @default 3\n   */\n  max?: number;\n  /**\n   * Title shown in the collapsed summary line. Falls back to the first\n   * reasoning text snippet, then to a step count.\n   */\n  title?: string;\n  /** Child ephemeral rows (`AiToolCall variant=\"ephemeral\"`, `AiReasoning variant=\"ephemeral\"`). */\n  children?: ReactNode;\n};\n\n/**\n * Groups streaming ephemeral activity (tool calls + reasoning) into a single\n * rolling window during streaming, then collapses to a frozen summary line\n * once the parent message completes.\n *\n * Behavior:\n * - **Streaming:** shows the most recent `max` (default 3) ephemeral children.\n *   Pinned rows (errors / user-expanded) sit above the live window.\n * - **Completed:** writes a snapshot keyed by `groupKey`, unmounts ephemeral\n *   children entirely, and renders a static `▸ {title} · N steps` line.\n * - **Re-mount after completion:** always renders the cached snapshot — no\n *   animations, no `useEffect` re-runs, no tool re-execution risk.\n *\n * @example\n * ```tsx\n * <AiPartGroup\n *   groupKey={message.id}\n *   complete={message.status === \"complete\"}\n *   title={message.reasoningSummary}\n *   max={3}\n * >\n *   {message.parts.map((p) =>\n *     p.type === \"reasoning\"\n *       ? <AiReasoning key={p.id} variant=\"ephemeral\" part={p} />\n *       : <AiToolCall  key={p.toolCallId} variant=\"ephemeral\" part={p} />\n *   )}\n * </AiPartGroup>\n * ```\n */\nexport function AiPartGroup({\n  groupKey,\n  complete = false,\n  max = 3,\n  title,\n  children,\n  className,\n  ...props\n}: AiPartGroupProps) {\n  const cached = snapshotCache.get(groupKey);\n\n  // Cache hit: always render the frozen snapshot, never re-mount ephemerals.\n  // This is the scroll-back-into-an-old-message path.\n  if (cached) {\n    return (\n      <TitledSummary\n        snapshot={cached}\n        className={className}\n        defaultOpen={false}\n        {...props}\n      />\n    );\n  }\n\n  // First-time completion: derive a snapshot, persist it, render frozen.\n  if (complete) {\n    const snapshot = deriveSnapshot(children, title);\n    snapshotCache.set(groupKey, snapshot);\n    return (\n      <TitledSummary\n        snapshot={snapshot}\n        className={className}\n        defaultOpen={false}\n        {...props}\n      />\n    );\n  }\n\n  // Streaming: persistent title row + rolling window of the latest `max` children.\n  // oxlint-disable-next-line no-react-children\n  const allChildren = Children.toArray(children).filter(isValidElement);\n  const live = allChildren.slice(Math.max(0, allChildren.length - max));\n  const liveTitle = title?.trim() || deriveLiveTitle(allChildren);\n  const stepCount = allChildren.length;\n\n  return (\n    <LiveGroup\n      className={className}\n      liveRows={live}\n      stepCount={stepCount}\n      title={liveTitle}\n      {...props}\n    />\n  );\n}\n\nAiPartGroup.displayName = \"AiPartGroup\";\n\n// ─── Live group (streaming) ──────────────────────────────────────────────────\n\nfunction LiveGroup({\n  title,\n  liveRows,\n  stepCount,\n  className,\n  ...props\n}: {\n  title: string;\n  liveRows: ReactElement[];\n  stepCount: number;\n} & Omit<ComponentProps<\"div\">, \"title\">) {\n  // During streaming the group is always open — the caret is purely decorative\n  // so the frozen/live states share a visual footprint (no layout jump on settle).\n  const stepLabel = stepCount === 1 ? \"step\" : \"steps\";\n\n  return (\n    <div\n      className={cn(\"flex flex-col\", className)}\n      data-streaming=\"true\"\n      {...props}\n    >\n      <div\n        className={cn(\"flex w-fit items-center gap-1.5 rounded px-1 py-0.5\")}\n      >\n        <SpinnerGapIcon className=\"size-3.5 shrink-0 animate-spin text-sf-subtle\" />\n        <span className=\"min-w-0 truncate text-sm text-sf-default\">\n          <TextRoll\n            duration={0.3}\n            getEnterDelay={(i) => i * 0.03}\n            getExitDelay={(i) => i * 0.03 + 0.12}\n            key={title}\n          >\n            {title}\n          </TextRoll>\n        </span>\n        {stepCount > 0 ? (\n          <span className=\"text-xs tabular-nums text-sf-subtle/60\">\n            {stepCount} {stepLabel}\n          </span>\n        ) : null}\n        <CaretDownIcon className=\"size-3 shrink-0 text-sf-subtle/60\" />\n      </div>\n      {liveRows.length > 0 ? (\n        <div className=\"ml-[0.3125rem] flex flex-col gap-0.5 border-l border-sf-line/40 pl-3\">\n          {liveRows}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n// ─── Frozen summary (titled) ─────────────────────────────────────────────────\n\nfunction TitledSummary({\n  snapshot,\n  defaultOpen,\n  className,\n  ...props\n}: {\n  snapshot: FrozenSnapshot;\n  defaultOpen: boolean;\n} & Omit<ComponentProps<\"div\">, \"title\">) {\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n  const stepLabel = snapshot.steps.length === 1 ? \"step\" : \"steps\";\n\n  return (\n    <BaseCollapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n      <div\n        className={cn(\"flex flex-col\", className)}\n        data-streaming=\"false\"\n        {...props}\n      >\n        <BaseCollapsible.Trigger\n          render={\n            <button\n              type=\"button\"\n              aria-label={snapshot.title}\n              className={cn(\n                \"flex w-fit items-center gap-1.5 rounded px-1 py-0.5 text-left\",\n                \"transition-colors hover:bg-sf-tint\"\n              )}\n            />\n          }\n        >\n          <span\n            aria-hidden\n            className={cn(\n              \"size-1.5 shrink-0 rounded-full bg-current\",\n              snapshot.errorCount > 0 ? \"text-sf-danger\" : \"text-sf-success\"\n            )}\n          />\n          <span className=\"min-w-0 truncate text-sm text-sf-subtle\">\n            {snapshot.title}\n          </span>\n          <span className=\"text-xs tabular-nums text-sf-subtle/60\">\n            {snapshot.steps.length} {stepLabel}\n            {snapshot.errorCount > 0 ? ` · ${snapshot.errorCount} error` : \"\"}\n          </span>\n          <CaretDownIcon\n            className={cn(\n              \"size-3 shrink-0 text-sf-subtle/60 transition-transform duration-200\",\n              !isOpen && \"-rotate-90\"\n            )}\n          />\n        </BaseCollapsible.Trigger>\n\n        <BaseCollapsible.Panel className=\"overflow-hidden\">\n          <ul className=\"mt-1 ml-[0.3125rem] flex flex-col gap-0.5 border-l border-sf-line/40 pl-3\">\n            {snapshot.steps.map((step, i) => (\n              <li\n                className=\"flex items-center gap-1.5 text-xs text-sf-subtle\"\n                key={`${step.kind}-${i}-${step.name}`}\n              >\n                <span\n                  aria-hidden\n                  className={cn(\n                    \"size-1.5 shrink-0 rounded-full bg-current\",\n                    step.ok ? \"text-sf-success\" : \"text-sf-danger\"\n                  )}\n                />\n                <span className=\"min-w-0 truncate\">{step.name}</span>\n                {step.duration ? (\n                  <span className=\"tabular-nums text-sf-subtle/60\">\n                    {step.duration}ms\n                  </span>\n                ) : null}\n              </li>\n            ))}\n          </ul>\n        </BaseCollapsible.Panel>\n      </div>\n    </BaseCollapsible.Root>\n  );\n}\n\nfunction deriveLiveTitle(elements: ReactElement[]): string {\n  for (const el of elements as ChildLike[]) {\n    const part = el.props.part as\n      | { text?: string; summary?: string }\n      | undefined;\n    const text = part?.summary ?? part?.text;\n    if (text) return truncate(text, 60);\n  }\n  return \"Working…\";\n}\n\n// ─── Snapshot derivation ─────────────────────────────────────────────────────\n\ntype ChildLike = ReactElement<{\n  part?: AiToolPart | { text?: string; summary?: string; name?: string };\n  duration?: number;\n}>;\n\nfunction deriveSnapshot(\n  children: ReactNode,\n  explicitTitle: string | undefined\n): FrozenSnapshot {\n  // oxlint-disable-next-line no-react-children\n  const elements = Children.toArray(children).filter(\n    isValidElement\n  ) as ChildLike[];\n\n  const steps: FrozenStep[] = [];\n  let errorCount = 0;\n  let totalDuration = 0;\n  let firstReasoningSnippet: string | undefined;\n\n  for (const el of elements) {\n    const kind = inferKind(el);\n    const part = el.props.part as\n      | (AiToolPart & { text?: string; summary?: string; name?: string })\n      | undefined;\n    const duration = el.props.duration;\n    if (typeof duration === \"number\") totalDuration += duration;\n\n    if (kind === \"tool\") {\n      const toolPart = part as AiToolPart | undefined;\n      const ok = toolPart ? !hasToolError(toolPart) : true;\n      const settled = toolPart ? hasToolResult(toolPart) : true;\n      if (!ok) errorCount += 1;\n      steps.push({\n        kind: \"tool\",\n        name: toolPart?.toolName ?? \"tool\",\n        ok: ok && settled,\n        duration,\n      });\n    } else {\n      const text =\n        (part?.summary as string | undefined) ??\n        (part?.text as string | undefined);\n      if (!firstReasoningSnippet && text) {\n        firstReasoningSnippet = text;\n      }\n      steps.push({\n        kind: \"reasoning\",\n        name: text ? truncate(text, 60) : \"Thinking\",\n        ok: true,\n        duration,\n      });\n    }\n  }\n\n  const title =\n    explicitTitle?.trim() ||\n    (firstReasoningSnippet && truncate(firstReasoningSnippet, 60)) ||\n    `${steps.length} ${steps.length === 1 ? \"step\" : \"steps\"}`;\n\n  return { title, steps, errorCount, totalDuration };\n}\n\nfunction inferKind(el: ChildLike): \"tool\" | \"reasoning\" {\n  // Best-effort: check common indicators. Tool parts have `toolName`/`toolCallId`.\n  // Reasoning parts have `text`.\n  const part = el.props.part as Record<string, unknown> | undefined;\n  if (part && typeof part === \"object\") {\n    if (\"toolName\" in part || \"toolCallId\" in part) return \"tool\";\n    if (\"text\" in part || \"summary\" in part) return \"reasoning\";\n  }\n  // Fallback: inspect displayName.\n  const displayName =\n    (el.type as { displayName?: string; name?: string } | undefined)\n      ?.displayName ??\n    (el.type as { displayName?: string; name?: string } | undefined)?.name ??\n    \"\";\n  if (displayName.includes(\"Tool\")) return \"tool\";\n  return \"reasoning\";\n}\n\nfunction truncate(s: string, n: number): string {\n  if (s.length <= n) return s;\n  return `${s.slice(0, n - 1).trimEnd()}…`;\n}\n\n// ─── groupParts ──────────────────────────────────────────────────────\n\n/**\n * A message part that is either narrative text or an \"activity\" (reasoning or\n * tool call). Consumers pass parts shaped like this — the helper does not read\n * any field other than `type`.\n */\nexport type GroupablePart =\n  | { type: \"text\"; [key: string]: unknown }\n  | { type: \"reasoning\"; [key: string]: unknown }\n  | { type: \"tool-call\" | \"tool-result\" | string; [key: string]: unknown };\n\n/** Emitted by {@link groupParts}. */\nexport type PartChunk<TPart = GroupablePart> =\n  | { kind: \"text\"; parts: TPart[] }\n  | { kind: \"activity\"; parts: TPart[] };\n\n/**\n * Split a message's parts into alternating `text` and `activity` chunks so each\n * contiguous run of reasoning/tool parts can be rendered inside its own\n * {@link AiPartGroup}, with narrative text rendered between them.\n *\n * @example\n * ```tsx\n * {groupParts(message.parts).map((chunk, i) =>\n *   chunk.kind === \"text\" ? (\n *     <AiMessageContent key={i}>{joinText(chunk.parts)}</AiMessageContent>\n *   ) : (\n *     <AiPartGroup\n *       key={i}\n *       groupKey={`${message.id}:activity:${i}`}\n *       complete={!message.isStreaming}\n *     >\n *       {chunk.parts.map(renderActivityPart)}\n *     </AiPartGroup>\n *   )\n * )}\n * ```\n */\nexport function groupParts<TPart extends { type: string }>(\n  parts: readonly TPart[],\n  options: {\n    /** Which `type` values count as \"activity\". Defaults to reasoning + tool parts. */\n    isActivity?: (part: TPart) => boolean;\n  } = {}\n): PartChunk<TPart>[] {\n  const isActivity =\n    options.isActivity ??\n    ((p: TPart) => {\n      const t = p.type;\n      return (\n        t === \"reasoning\" ||\n        t === \"tool-call\" ||\n        t === \"tool-result\" ||\n        t.startsWith(\"tool-\")\n      );\n    });\n\n  const chunks: PartChunk<TPart>[] = [];\n  for (const part of parts) {\n    const kind: PartChunk<TPart>[\"kind\"] = isActivity(part)\n      ? \"activity\"\n      : \"text\";\n    const last = chunks.at(-1);\n    if (last && last.kind === kind) {\n      last.parts.push(part);\n    } else {\n      chunks.push({ kind, parts: [part] });\n    }\n  }\n  return chunks;\n}\n"],"mappings":";;;;;;;;;AA6BA,IAAM,gCAAgB,IAAI,IAA4B;;;;;AAWtD,SAAgB,uBACd,UAC4B;CAC5B,OAAO,cAAc,IAAI,QAAQ;AACnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,SAAgB,YAAY,EAC1B,UACA,WAAW,OACX,MAAM,GACN,OACA,UACA,WACA,GAAG,SACgB;CACnB,MAAM,SAAS,cAAc,IAAI,QAAQ;CAIzC,IAAI,QACF,OACE,oBAAC,eAAD;EACE,UAAU;EACC;EACX,aAAa;EACb,GAAI;CACL,CAAA;CAKL,IAAI,UAAU;EACZ,MAAM,WAAW,eAAe,UAAU,KAAK;EAC/C,cAAc,IAAI,UAAU,QAAQ;EACpC,OACE,oBAAC,eAAD;GACY;GACC;GACX,aAAa;GACb,GAAI;EACL,CAAA;CAEL;CAIA,MAAM,cAAc,SAAS,QAAQ,QAAQ,EAAE,OAAO,cAAc;CACpE,MAAM,OAAO,YAAY,MAAM,KAAK,IAAI,GAAG,YAAY,SAAS,GAAG,CAAC;CACpE,MAAM,YAAY,OAAO,KAAK,KAAK,gBAAgB,WAAW;CAC9D,MAAM,YAAY,YAAY;CAE9B,OACE,oBAAC,WAAD;EACa;EACX,UAAU;EACC;EACX,OAAO;EACP,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc;AAI1B,SAAS,UAAU,EACjB,OACA,UACA,WACA,WACA,GAAG,SAKqC;CAGxC,MAAM,YAAY,cAAc,IAAI,SAAS;CAE7C,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,iBAAiB,SAAS;EACxC,kBAAe;EACf,GAAI;YAHN,CAKE,qBAAC,OAAD;GACE,WAAW,GAAG,qDAAqD;aADrE;IAGE,oBAAC,gBAAD,EAAgB,WAAU,gDAAiD,CAAA;IAC3E,oBAAC,QAAD;KAAM,WAAU;eACd,oBAAC,UAAD;MACE,UAAU;MACV,gBAAgB,MAAM,IAAI;MAC1B,eAAe,MAAM,IAAI,MAAO;gBAG/B;KACO,GAHH,KAGG;IACN,CAAA;IACL,YAAY,IACX,qBAAC,QAAD;KAAM,WAAU;eAAhB;MACG;MAAU;MAAE;KACT;SACJ;IACJ,oBAAC,eAAD,EAAe,WAAU,oCAAqC,CAAA;GAC3D;MACJ,SAAS,SAAS,IACjB,oBAAC,OAAD;GAAK,WAAU;aACZ;EACE,CAAA,IACH,IACD;;AAET;AAIA,SAAS,cAAc,EACrB,UACA,aACA,WACA,GAAG,SAIqC;CACxC,MAAM,CAAC,QAAQ,aAAa,SAAS,WAAW;CAChD,MAAM,YAAY,SAAS,MAAM,WAAW,IAAI,SAAS;CAEzD,OACE,oBAAC,YAAgB,MAAjB;EAAsB,MAAM;EAAQ,cAAc;YAChD,qBAAC,OAAD;GACE,WAAW,GAAG,iBAAiB,SAAS;GACxC,kBAAe;GACf,GAAI;aAHN,CAKE,qBAAC,YAAgB,SAAjB;IACE,QACE,oBAAC,UAAD;KACE,MAAK;KACL,cAAY,SAAS;KACrB,WAAW,GACT,iEACA,oCACF;IACD,CAAA;cATL;KAYE,oBAAC,QAAD;MACE,eAAA;MACA,WAAW,GACT,6CACA,SAAS,aAAa,IAAI,mBAAmB,iBAC/C;KACD,CAAA;KACD,oBAAC,QAAD;MAAM,WAAU;gBACb,SAAS;KACN,CAAA;KACN,qBAAC,QAAD;MAAM,WAAU;gBAAhB;OACG,SAAS,MAAM;OAAO;OAAE;OACxB,SAAS,aAAa,IAAI,MAAM,SAAS,WAAW,UAAU;MAC3D;;KACN,oBAAC,eAAD,EACE,WAAW,GACT,uEACA,CAAC,UAAU,YACb,EACD,CAAA;IACsB;OAEzB,oBAAC,YAAgB,OAAjB;IAAuB,WAAU;cAC/B,oBAAC,MAAD;KAAI,WAAU;eACX,SAAS,MAAM,KAAK,MAAM,MACzB,qBAAC,MAAD;MACE,WAAU;gBADZ;OAIE,oBAAC,QAAD;QACE,eAAA;QACA,WAAW,GACT,6CACA,KAAK,KAAK,oBAAoB,gBAChC;OACD,CAAA;OACD,oBAAC,QAAD;QAAM,WAAU;kBAAoB,KAAK;OAAW,CAAA;OACnD,KAAK,WACJ,qBAAC,QAAD;QAAM,WAAU;kBAAhB,CACG,KAAK,UAAS,IACX;YACJ;MACF;QAfG,GAAG,KAAK,KAAK,GAAG,EAAE,GAAG,KAAK,MAe7B,CACL;IACC,CAAA;GACiB,CAAA,CACpB;;CACe,CAAA;AAE1B;AAEA,SAAS,gBAAgB,UAAkC;CACzD,KAAK,MAAM,MAAM,UAAyB;EACxC,MAAM,OAAO,GAAG,MAAM;EAGtB,MAAM,OAAO,MAAM,WAAW,MAAM;EACpC,IAAI,MAAM,OAAO,SAAS,MAAM,EAAE;CACpC;CACA,OAAO;AACT;AASA,SAAS,eACP,UACA,eACgB;CAEhB,MAAM,WAAW,SAAS,QAAQ,QAAQ,EAAE,OAC1C,cACF;CAEA,MAAM,QAAsB,CAAC;CAC7B,IAAI,aAAa;CACjB,IAAI,gBAAgB;CACpB,IAAI;CAEJ,KAAK,MAAM,MAAM,UAAU;EACzB,MAAM,OAAO,UAAU,EAAE;EACzB,MAAM,OAAO,GAAG,MAAM;EAGtB,MAAM,WAAW,GAAG,MAAM;EAC1B,IAAI,OAAO,aAAa,UAAU,iBAAiB;EAEnD,IAAI,SAAS,QAAQ;GACnB,MAAM,WAAW;GACjB,MAAM,KAAK,WAAW,CAAC,aAAa,QAAQ,IAAI;GAChD,MAAM,UAAU,WAAW,cAAc,QAAQ,IAAI;GACrD,IAAI,CAAC,IAAI,cAAc;GACvB,MAAM,KAAK;IACT,MAAM;IACN,MAAM,UAAU,YAAY;IAC5B,IAAI,MAAM;IACV;GACF,CAAC;EACH,OAAO;GACL,MAAM,OACH,MAAM,WACN,MAAM;GACT,IAAI,CAAC,yBAAyB,MAC5B,wBAAwB;GAE1B,MAAM,KAAK;IACT,MAAM;IACN,MAAM,OAAO,SAAS,MAAM,EAAE,IAAI;IAClC,IAAI;IACJ;GACF,CAAC;EACH;CACF;CAOA,OAAO;EAAE,OAJP,eAAe,KAAK,KACnB,yBAAyB,SAAS,uBAAuB,EAAE,KAC5D,GAAG,MAAM,OAAO,GAAG,MAAM,WAAW,IAAI,SAAS;EAEnC;EAAO;EAAY;CAAc;AACnD;AAEA,SAAS,UAAU,IAAqC;CAGtD,MAAM,OAAO,GAAG,MAAM;CACtB,IAAI,QAAQ,OAAO,SAAS,UAAU;EACpC,IAAI,cAAc,QAAQ,gBAAgB,MAAM,OAAO;EACvD,IAAI,UAAU,QAAQ,aAAa,MAAM,OAAO;CAClD;CAOA,KAJG,GAAG,MACA,eACH,GAAG,MAA8D,QAClE,IACc,SAAS,MAAM,GAAG,OAAO;CACzC,OAAO;AACT;AAEA,SAAS,SAAS,GAAW,GAAmB;CAC9C,IAAI,EAAE,UAAU,GAAG,OAAO;CAC1B,OAAO,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,QAAQ,EAAE;AACxC;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,WACd,OACA,UAGI,CAAC,GACe;CACpB,MAAM,aACJ,QAAQ,gBACN,MAAa;EACb,MAAM,IAAI,EAAE;EACZ,OACE,MAAM,eACN,MAAM,eACN,MAAM,iBACN,EAAE,WAAW,OAAO;CAExB;CAEF,MAAM,SAA6B,CAAC;CACpC,KAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,OAAiC,WAAW,IAAI,IAClD,aACA;EACJ,MAAM,OAAO,OAAO,GAAG,EAAE;EACzB,IAAI,QAAQ,KAAK,SAAS,MACxB,KAAK,MAAM,KAAK,IAAI;OAEpB,OAAO,KAAK;GAAE;GAAM,OAAO,CAAC,IAAI;EAAE,CAAC;CAEvC;CACA,OAAO;AACT"}

package/dist/{ai-prompt-input-CuluUzpf.js → ai-prompt-input-Bm4XoSj2.js}

@@ -1,7 +1,8 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
-import { t as Tooltip } from "./tooltip-Cb7QW-7H.js";
-import { t as Button } from "./button-De0267YU.js";
+import { t as cn } from "./cn-CmAOpn49.js";
+import { n as layoutWithLines, o as prepareWithSegments } from "./layout-CWBE0qwx.js";
+import { t as Tooltip } from "./tooltip-uobk6Oh-.js";
+import { t as Button } from "./button-BHOgXJRU.js";
 import { Fragment, createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowUpIcon, ArrowsClockwiseIcon, CaretDownIcon, CheckIcon, FileIcon, FileTextIcon, ImageIcon, MicrophoneIcon, PaperclipIcon, PlusIcon, SpinnerGapIcon, SquareIcon, XIcon } from "@phosphor-icons/react";
@@ -370,7 +371,7 @@ var Store = class {
 	}
 };
 //#endregion
-//#region ../../node_modules/.bun/@tanstack+react-store@0.11.0+21ccd8898788a04d/node_modules/@tanstack/react-store/dist/useSelector.js
+//#region ../../node_modules/.bun/@tanstack+react-store@0.11.0+7492c01c6988791b/node_modules/@tanstack/react-store/dist/useSelector.js
 function defaultCompare(a, b) {
 	return a === b;
 }
@@ -404,7 +405,7 @@ function useSelector(source, selector = (s) => s, options) {
 	return useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, selector, compare);
 }
 //#endregion
-//#region ../../node_modules/.bun/@tanstack+react-store@0.11.0+21ccd8898788a04d/node_modules/@tanstack/react-store/dist/useStore.js
+//#region ../../node_modules/.bun/@tanstack+react-store@0.11.0+7492c01c6988791b/node_modules/@tanstack/react-store/dist/useStore.js
 /**
 * Deprecated alias for {@link useSelector}.
 *
@@ -506,14 +507,14 @@ function createPromptInputRequestController(options = {}) {
 		},
 		insertTag(tag, range) {
 			request.setState((prev) => {
-				const mention = tag.mention ?? `@${tag.label.replace(/\s+/g, "-").toLowerCase()}`;
+				const mention = tag.mention ?? `@${tag.label.replace(/\s+/gu, "-").toLowerCase()}`;
 				const text = prev.text ?? "";
 				const start = range?.start ?? text.length;
 				const end = range?.end ?? text.length;
 				const prefix = text.slice(0, start);
 				const suffix = text.slice(end);
-				const needsPrefixSpace = prefix.length > 0 && !/\s$/.test(prefix);
-				const needsSuffixSpace = suffix.length > 0 && !/^\s/.test(suffix);
+				const needsPrefixSpace = prefix.length > 0 && !/\s$/u.test(prefix);
+				const needsSuffixSpace = suffix.length > 0 && !/^\s/u.test(suffix);
 				const nextText = `${prefix}${needsPrefixSpace ? " " : ""}${mention}${needsSuffixSpace ? " " : ""}${suffix}`;
 				const nextTag = {
 					...tag,
@@ -718,7 +719,7 @@ var usePromptInputAttachments = () => {
 /** Convert a blob URL to a base64 data URL for serialization. */
 async function convertBlobToDataUrl(url) {
 	const blob = await (await fetch(url)).blob();
-	return new Promise((resolve, reject) => {
+	return await new Promise((resolve, reject) => {
 		const reader = new FileReader();
 		reader.addEventListener("loadend", () => resolve(reader.result));
 		reader.addEventListener("error", () => reject(/* @__PURE__ */ new Error("FileReader error")));
@@ -745,7 +746,7 @@ function makeAttachmentId() {
 * </PromptInput>
 * ```
 */
-function PromptInput({ className, accept, multiple, globalDrop, maxFiles, maxFileSize, onError, onSubmit, children, backLayer, backLayerTitle = "Context", backLayerOpen, onBackLayerOpenChange, autoOpenBackLayerWhen, ...props }) {
+function PromptInput({ className, accept, multiple, globalDrop, maxFiles, maxFileSize, onError, onSubmit, children, backLayer, backLayerTitle = "Context", backLayerStatus = "idle", backLayerOpen, onBackLayerOpenChange, autoOpenBackLayerWhen, ...props }) {
 	const hasBackLayer = backLayer !== void 0;
 	const controller = useOptionalPromptInputController();
 	const requestCtrl = useOptionalPromptInputRequestController();
@@ -886,7 +887,9 @@ function PromptInput({ className, accept, multiple, globalDrop, maxFiles, maxFil
 	const handleSubmit = (event) => {
 		event.preventDefault();
 		const form = event.currentTarget;
-		const text = requestCtrl ? requestCtrl.request.state.text : usingProvider ? controller.textInput.value : new FormData(form).get("message") || "";
+		const text = requestCtrl ? requestCtrl.request.state.text : usingProvider ? controller.textInput.value : (() => {
+			return new FormData(form).get("message") || "";
+		})();
 		if (!usingProvider) form.reset();
 		const doSubmit = async () => {
 			const convertedFiles = await Promise.all(files.map(async (item) => {
@@ -921,9 +924,19 @@ function PromptInput({ className, accept, multiple, globalDrop, maxFiles, maxFil
 				className: "flex w-full items-center justify-between gap-2 px-3 py-2 text-left",
 				onClick: () => onBackLayerOpenChange?.(!isBackLayerOpen),
 				type: "button",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-sm font-medium text-sf-subtle uppercase tracking-wide select-none",
-					children: backLayerTitle
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-1.5 text-sm font-medium text-sf-subtle uppercase tracking-wide select-none",
+					children: [
+						backLayerStatus === "running" ? /* @__PURE__ */ jsx(SpinnerGapIcon, {
+							className: "size-3.5 animate-spin",
+							"aria-hidden": "true"
+						}) : null,
+						backLayerStatus === "error" ? /* @__PURE__ */ jsx(XIcon, {
+							className: "size-3.5 text-sf-danger",
+							"aria-hidden": "true"
+						}) : null,
+						backLayerTitle
+					]
 				}), /* @__PURE__ */ jsx(CaretDownIcon, { className: cn("size-3.5 text-sf-subtle transition-transform duration-200", isBackLayerOpen && "rotate-180") })]
 			}),
 			/* @__PURE__ */ jsx(PromptInputBackLayerPanel, {
@@ -1066,10 +1079,10 @@ var PromptInputTextarea = ({ onChange, className, placeholder = "What would you
 		...controlledProps
 	});
 };
-var getTagMention = (tag) => tag.mention ?? `@${tag.label.replace(/\s+/g, "-").toLowerCase()}`;
+var getTagMention = (tag) => tag.mention ?? `@${tag.label.replace(/\s+/gu, "-").toLowerCase()}`;
 var findMentionAtCursor = (text, cursor) => {
 	const beforeCursor = text.slice(0, cursor);
-	const match = /(^|\s)@([\w-]*)$/.exec(beforeCursor);
+	const match = /(^|\s)@([\w-]*)$/u.exec(beforeCursor);
 	if (!match) return null;
 	return {
 		start: cursor - match[0].trimStart().length,
@@ -1110,43 +1123,19 @@ var getTextareaCursorPosition = (textarea, wrapper) => {
 		top: 0
 	};
 	const computed = window.getComputedStyle(textarea);
-	const mirror = document.createElement("div");
-	const marker = document.createElement("span");
 	const wrapperRect = wrapper.getBoundingClientRect();
-	for (const property of [
-		"borderBottomWidth",
-		"borderLeftWidth",
-		"borderRightWidth",
-		"borderTopWidth",
-		"boxSizing",
-		"fontFamily",
-		"fontSize",
-		"fontStyle",
-		"fontWeight",
-		"letterSpacing",
-		"lineHeight",
-		"paddingBottom",
-		"paddingLeft",
-		"paddingRight",
-		"paddingTop",
-		"textTransform",
-		"width",
-		"wordSpacing"
-	]) mirror.style[property] = computed[property];
-	mirror.style.position = "absolute";
-	mirror.style.visibility = "hidden";
-	mirror.style.whiteSpace = "pre-wrap";
-	mirror.style.overflowWrap = "break-word";
-	mirror.textContent = textarea.value.slice(0, textarea.selectionStart);
-	marker.textContent = "​";
-	mirror.append(marker);
-	document.body.append(mirror);
-	const markerRect = marker.getBoundingClientRect();
-	const top = markerRect.top - mirror.getBoundingClientRect().top + textarea.offsetTop - 6;
-	const left = Math.min(Math.max(markerRect.left - mirror.getBoundingClientRect().left + textarea.offsetLeft, 12), Math.max(wrapperRect.width - 300, 12));
-	mirror.remove();
+	const paddingLeft = parseFloat(computed.paddingLeft) || 0;
+	const paddingTop = parseFloat(computed.paddingTop) || 0;
+	const contentWidth = Math.max(1, textarea.clientWidth - paddingLeft - (parseFloat(computed.paddingRight) || 0));
+	const lineHeightPx = parseFloat(computed.lineHeight) || 20;
+	const font = computed.font || `${computed.fontStyle} ${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`;
+	const result = layoutWithLines(prepareWithSegments(textarea.value.slice(0, textarea.selectionStart), font, { whiteSpace: "pre-wrap" }), contentWidth, lineHeightPx);
+	const lineCount = result.lines.length || 1;
+	const lastLine = result.lines[result.lines.length - 1];
+	const lastLineWidth = lastLine ? lastLine.width : 0;
+	const top = (lineCount - 1) * lineHeightPx + paddingTop + textarea.offsetTop - 6;
 	return {
-		left,
+		left: Math.min(Math.max(lastLineWidth + paddingLeft + textarea.offsetLeft, 12), Math.max(wrapperRect.width - 300, 12)),
 		top
 	};
 };
@@ -1585,9 +1574,9 @@ var PromptInputCompactCycle = ({ options, value, onChange, "aria-label": ariaLab
 	const enabledOptions = options.filter((o) => !o.disabled);
 	if (enabledOptions.length === 0) return null;
 	const currentIndex = options.findIndex((o) => o.value === value);
-	const current = currentIndex !== -1 ? options[currentIndex] : enabledOptions[0];
+	const current = currentIndex === -1 ? enabledOptions[0] : options[currentIndex];
 	const advance = (direction) => {
-		const start = currentIndex !== -1 ? currentIndex : -direction;
+		const start = currentIndex === -1 ? -direction : currentIndex;
 		const len = options.length;
 		for (let step = 1; step <= len; step++) {
 			const candidate = options[(start + direction * step + len * len) % len];
@@ -1730,7 +1719,7 @@ function PromptInputAttachment({ data, className, ...props }) {
 		})]
 	});
 	const ext = data.filename.split(".").pop()?.toUpperCase() ?? "FILE";
-	const name = data.filename.replace(/\.[^/.]+$/, "");
+	const name = data.filename.replace(/\.[^/.]+$/u, "");
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("group relative inline-flex h-8 items-center gap-2 rounded-md bg-sf-tint/50 px-2 text-sm", className),
 		...props,
@@ -1993,4 +1982,4 @@ PromptInput.Attachment = PromptInputAttachment;
 //#endregion
 export { SF_AI_PROMPT_INPUT_DEFAULT_VARIANTS as A, useRequestField as B, PromptInputSpeechButton as C, PromptInputTextarea as D, PromptInputTags as E, PromptInputRequestControllerProvider as F, createPromptInputRequestController as I, useDisplayField as L, usePromptInputAttachments as M, usePromptInputController as N, PromptInputToolbar as O, useProviderAttachments as P, useOptionalPromptInputRequestController as R, PromptInputProvider as S, PromptInputTag as T, useSetRequestField as V, PromptInputModeCycle as _, PromptInputActionMenuItem as a, PromptInputModelCycle as b, PromptInputAttachButton as c, PromptInputBackLayer as d, PromptInputBody as f, PromptInputEditor as g, PromptInputCompactSelect as h, PromptInputActionMenuContent as i, SF_AI_PROMPT_INPUT_VARIANTS as j, PromptInputTools as k, PromptInputAttachment as l, PromptInputCompactCycle as m, PromptInputActionAddAttachments as n, PromptInputActionMenuTrigger as o, PromptInputButton as p, PromptInputActionMenu as r, PromptInputAddTagButton as s, PromptInput as t, PromptInputAttachments as u, PromptInputModeSelect as v, PromptInputSubmit as w, PromptInputModelSelect as x, PromptInputModeSelector as y, usePromptInputRequestController as z };
 
-//# sourceMappingURL=ai-prompt-input-CuluUzpf.js.map
+//# sourceMappingURL=ai-prompt-input-Bm4XoSj2.js.map