@signalflare-ai/ui 0.5.0

package/dist/ai-message-CV8SBoHM.js

@@ -0,0 +1,286 @@
+"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 { 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 SF_AI_MESSAGE_VARIANTS = { from: {
+	user: {
+		classes: "ml-auto w-full max-w-[70%] justify-end is-user",
+		description: "User message — right-aligned with max width"
+	},
+	assistant: {
+		classes: "w-full is-assistant",
+		description: "Assistant message — full width left-aligned"
+	},
+	system: {
+		classes: "w-full is-system",
+		description: "System message — full width"
+	}
+} };
+var SF_AI_MESSAGE_DEFAULT_VARIANTS = { from: "assistant" };
+/**
+* Root message container. Sets layout, group class, and role context.
+*
+* @example
+* ```tsx
+* <AiMessage from="user">
+*   <AiMessageContent>Hello!</AiMessageContent>
+* </AiMessage>
+* <AiMessage from="assistant">
+*   <AiMessageContent><AiResponse>{text}</AiResponse></AiMessageContent>
+*   <AiMessageToolbar>
+*     <AiActions><AiAction tooltip="Copy">...</AiAction></AiActions>
+*   </AiMessageToolbar>
+* </AiMessage>
+* ```
+*/
+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
+	});
+}
+/**
+* Content bubble. Applies user/assistant bubble styles via group selectors.
+*/
+function AiMessageContent({ children, className, ...props }) {
+	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),
+		...props,
+		children
+	});
+}
+/**
+* Bottom toolbar row for action buttons.
+*/
+function AiMessageToolbar({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex w-full items-center justify-between gap-4", className),
+		...props,
+		children
+	});
+}
+/** Flex row of message action buttons. */
+function AiMessageActions({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-1", className),
+		...props,
+		children
+	});
+}
+/** Single icon action button with optional tooltip. */
+function AiMessageAction({ tooltip, label, children, className, variant = "ghost", size = "sm", ...props }) {
+	const button = /* @__PURE__ */ jsxs(Button, {
+		className: cn("text-sf-subtle hover:text-sf-default", className),
+		size,
+		variant,
+		...props,
+		children: [children, (label ?? tooltip) && /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label ?? tooltip
+		})]
+	});
+	if (tooltip) return /* @__PURE__ */ jsx(Tooltip, {
+		content: tooltip,
+		children: button
+	});
+	return button;
+}
+var AiMessageBranchContext = createContext(null);
+function useAiMessageBranch() {
+	const ctx = useContext(AiMessageBranchContext);
+	if (!ctx) throw new Error("AiMessageBranch sub-components must be used within <AiMessageBranch>");
+	return ctx;
+}
+/**
+* Multi-branch message container. Wraps multiple alternative responses and
+* provides prev/next navigation.
+*/
+function AiMessageBranch({ defaultBranch = 0, onBranchChange, className, ...props }) {
+	const [currentBranch, setCurrentBranch] = useState(defaultBranch);
+	const [branches, setBranches] = useState([]);
+	const handleChange = useCallback((next) => {
+		setCurrentBranch(next);
+		onBranchChange?.(next);
+	}, [onBranchChange]);
+	const goToPrevious = useCallback(() => {
+		handleChange(currentBranch > 0 ? currentBranch - 1 : branches.length - 1);
+	}, [
+		currentBranch,
+		branches.length,
+		handleChange
+	]);
+	const goToNext = useCallback(() => {
+		handleChange(currentBranch < branches.length - 1 ? currentBranch + 1 : 0);
+	}, [
+		currentBranch,
+		branches.length,
+		handleChange
+	]);
+	return /* @__PURE__ */ jsx(AiMessageBranchContext.Provider, {
+		value: {
+			currentBranch,
+			totalBranches: branches.length,
+			goToPrevious,
+			goToNext,
+			branches,
+			setBranches
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("grid w-full gap-2", className),
+			...props
+		})
+	});
+}
+/** Renders only the active branch child. */
+function AiMessageBranchContent({ children, ...props }) {
+	const { currentBranch, setBranches, branches } = useAiMessageBranch();
+	const arr = Array.isArray(children) ? children : [children];
+	useEffect(() => {
+		if (branches.length !== arr.length) setBranches(arr);
+	}, [
+		arr,
+		branches,
+		setBranches
+	]);
+	return arr.map((branch, i) => /* @__PURE__ */ jsx("div", {
+		className: cn("grid gap-2 overflow-hidden", i !== currentBranch && "hidden"),
+		...props,
+		children: branch
+	}, branch?.key ?? i));
+}
+/** Prev/next navigator for branches. Hidden when there's only one branch. */
+function AiMessageBranchSelector({ className, ...props }) {
+	const { totalBranches, currentBranch, goToPrevious, goToNext } = useAiMessageBranch();
+	if (totalBranches <= 1) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-0.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				"aria-label": "Previous branch",
+				disabled: totalBranches <= 1,
+				onClick: goToPrevious,
+				size: "sm",
+				variant: "ghost",
+				children: /* @__PURE__ */ jsx(CaretLeftIcon, { className: "size-3" })
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "tabular-nums text-sf-subtle text-xs",
+				children: [
+					currentBranch + 1,
+					" / ",
+					totalBranches
+				]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				"aria-label": "Next branch",
+				disabled: totalBranches <= 1,
+				onClick: goToNext,
+				size: "sm",
+				variant: "ghost",
+				children: /* @__PURE__ */ jsx(CaretRightIcon, { className: "size-3" })
+			})
+		]
+	});
+}
+var IMAGE_EXTS = new Set([
+	"jpg",
+	"jpeg",
+	"png",
+	"gif",
+	"webp",
+	"svg",
+	"ico"
+]);
+var DOC_EXTS = new Set([
+	"pdf",
+	"doc",
+	"docx",
+	"txt",
+	"md",
+	"rtf"
+]);
+var EXT_RE = /\.[^/.]+$/;
+function fileIcon(filename) {
+	const ext = filename.split(".").pop()?.toLowerCase() ?? "";
+	if (IMAGE_EXTS.has(ext)) return /* @__PURE__ */ jsx(ImageIcon, { className: "size-3.5" });
+	if (DOC_EXTS.has(ext)) return /* @__PURE__ */ jsx(FileTextIcon, { className: "size-3.5" });
+	return /* @__PURE__ */ jsx(FileIcon, { className: "size-3.5" });
+}
+/** Wrapping flex container for attachment chips. */
+function AiMessageAttachments({ children, className, ...props }) {
+	if (!children) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("ml-auto flex w-fit flex-wrap items-start gap-2", className),
+		...props,
+		children
+	});
+}
+/**
+* Single file attachment chip. Shows image thumbnail or file badge.
+*/
+var AiMessageAttachment = memo(({ filename, url, mediaType, onRemove, className, ...props }) => {
+	if (mediaType?.startsWith("image/") && url) return /* @__PURE__ */ jsxs("div", {
+		className: cn("group relative size-24 overflow-hidden rounded-lg", "animate-in fade-in-0 slide-in-from-bottom-2 duration-200", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("img", {
+			alt: filename || "attachment",
+			className: "size-full object-cover",
+			src: url
+		}), onRemove && /* @__PURE__ */ jsx(Button, {
+			"aria-label": "Remove attachment",
+			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",
+			onClick: (e) => {
+				e.stopPropagation();
+				onRemove();
+			},
+			size: "sm",
+			type: "button",
+			variant: "ghost",
+			children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+		})]
+	});
+	const ext = filename.split(".").pop()?.toUpperCase() ?? "FILE";
+	const name = filename.replace(EXT_RE, "");
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group relative inline-flex items-center gap-2 rounded-lg bg-sf-tint/50 px-3 py-2 transition-colors hover:bg-sf-tint", "animate-in fade-in-0 slide-in-from-bottom-2 duration-200", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex size-8 shrink-0 items-center justify-center rounded-md bg-sf-control",
+				children: fileIcon(filename)
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "max-w-[200px] truncate font-medium text-sf-default text-sm",
+					children: name || "File"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "w-fit rounded bg-sf-tint px-1.5 py-0.5 font-semibold text-sf-subtle text-[10px] uppercase",
+					children: ext
+				})]
+			}),
+			onRemove && /* @__PURE__ */ jsx(Button, {
+				"aria-label": "Remove attachment",
+				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",
+				onClick: (e) => {
+					e.stopPropagation();
+					onRemove();
+				},
+				size: "sm",
+				type: "button",
+				variant: "ghost",
+				children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+			})
+		]
+	});
+});
+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-CV8SBoHM.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-message-CV8SBoHM.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 { Tooltip } from \"../tooltip\";\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    <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  );\n}\n\n// ─── AiMessageContent ────────────────────────────────────────────────────────\n\nexport type AiMessageContentProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * Content bubble. Applies user/assistant bubble styles via group selectors.\n */\nexport function AiMessageContent({\n  children,\n  className,\n  ...props\n}: AiMessageContentProps) {\n  return (\n    <div\n      className={cn(\n        \"flex w-fit max-w-full flex-col gap-2 overflow-hidden 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      {children}\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 = /\\.[^/.]+$/;\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-ByYkJ6YP.js

@@ -0,0 +1,171 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.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";
+//#region src/components/ai-mission-header/ai-mission-header.tsx
+var SF_AI_MISSION_HEADER_VARIANTS = { variant: {
+	default: {
+		classes: "",
+		description: "Full header with all stats"
+	},
+	compact: {
+		classes: "",
+		description: "Single-row compact header"
+	}
+} };
+var SF_AI_MISSION_HEADER_DEFAULT_VARIANTS = { variant: "default" };
+function formatElapsed(ms) {
+	const s = Math.floor(ms / 1e3);
+	if (s < 60) return `${s}s`;
+	return `${Math.floor(s / 60)}m ${(s % 60).toString().padStart(2, "0")}s`;
+}
+function formatCost(cost) {
+	if (cost < .01) return `${(cost * 100).toFixed(2)}¢`;
+	return `$${cost.toFixed(4)}`;
+}
+function formatTokens(n) {
+	if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+	if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+	return String(n);
+}
+/** Live elapsed time that ticks every ~500ms while running. */
+function useElapsed(startedAt, endedAt, isRunning = false) {
+	const [elapsed, setElapsed] = useState(startedAt ? (endedAt ?? Date.now()) - startedAt : 0);
+	useEffect(() => {
+		if (!startedAt || !isRunning) {
+			if (startedAt) setElapsed((endedAt ?? Date.now()) - startedAt);
+			return;
+		}
+		const id = setInterval(() => {
+			setElapsed(Date.now() - startedAt);
+		}, 500);
+		return () => clearInterval(id);
+	}, [
+		startedAt,
+		endedAt,
+		isRunning
+	]);
+	return elapsed;
+}
+function MissionProgress({ taskList }) {
+	if (!taskList?.tasks.length) return null;
+	const total = taskList.tasks.length;
+	const done = taskList.tasks.filter((t) => t.status === "completed" || t.status === "cancelled").length;
+	const inProgress = taskList.tasks.filter((t) => t.status === "in_progress").length;
+	const pct = total > 0 ? Math.round(done / total * 100) : 0;
+	const activePct = total > 0 ? Math.round(inProgress / total * 100) : 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative h-1.5 flex-1 overflow-hidden rounded-full bg-sf-fill",
+			children: [activePct > 0 && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-y-0 left-0 rounded-full bg-sf-brand/30 transition-[width] duration-500",
+				style: { width: `${pct + activePct}%` }
+			}), /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-y-0 left-0 rounded-full bg-sf-brand transition-[width] duration-500",
+				style: { width: `${pct}%` }
+			})]
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "shrink-0 tabular-nums text-[11px] text-sf-subtle",
+			children: [
+				done,
+				"/",
+				total
+			]
+		})]
+	});
+}
+/**
+* `AiMissionHeader` — top bar for the Commander dashboard.
+*
+* Shows: mission title, progress bar (from task list), agent count,
+* live elapsed time, token usage, and an abort button while running.
+*
+* @example
+* ```tsx
+* <AiMissionHeader
+*   title="Refactor auth module"
+*   taskList={state.taskList}
+*   usage={state.usage}
+*   activeAgentCount={activeAgents.length}
+*   totalAgentCount={allAgents.length}
+*   startedAt={state.missionStartedAt}
+*   isRunning={state.isRunning}
+*   onAbort={abort}
+* />
+* ```
+*/
+var AiMissionHeader = forwardRef(({ title, taskList, usage, activeAgentCount, totalAgentCount, startedAt, endedAt, isRunning = false, onAbort, variant = SF_AI_MISSION_HEADER_DEFAULT_VARIANTS.variant, className, ...props }, ref) => {
+	const elapsed = useElapsed(startedAt, endedAt, isRunning);
+	const isCompact = variant === "compact";
+	const statusLabel = isRunning ? "Running" : startedAt && endedAt ? "Completed" : startedAt ? "Paused" : "Idle";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("flex flex-col gap-2 border-b border-sf-line bg-sf-base px-4 py-3", isCompact && "flex-row items-center gap-4 py-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [isRunning ? /* @__PURE__ */ jsx(SpinnerGapIcon, {
+					size: 14,
+					className: "shrink-0 animate-spin text-sf-brand"
+				}) : startedAt && endedAt ? /* @__PURE__ */ jsx(CheckCircleIcon, {
+					size: 14,
+					className: "shrink-0 text-sf-success"
+				}) : /* @__PURE__ */ jsx(CpuIcon, {
+					size: 14,
+					className: "shrink-0 text-sf-subtle"
+				}), title ? /* @__PURE__ */ jsx("h2", {
+					className: "truncate text-sm font-semibold text-sf-default",
+					children: title
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium text-sf-subtle",
+					children: statusLabel
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-3",
+				children: [
+					(activeAgentCount !== void 0 || totalAgentCount !== void 0) && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1 text-[11px] text-sf-subtle",
+						children: [/* @__PURE__ */ jsx(UsersIcon, { size: 11 }), /* @__PURE__ */ jsx("span", {
+							className: "tabular-nums",
+							children: activeAgentCount !== void 0 && totalAgentCount !== void 0 ? `${activeAgentCount}/${totalAgentCount}` : activeAgentCount ?? totalAgentCount
+						})]
+					}),
+					startedAt && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1 text-[11px] text-sf-subtle",
+						children: [/* @__PURE__ */ jsx(ClockIcon, { size: 11 }), /* @__PURE__ */ jsx("span", {
+							className: "tabular-nums",
+							children: formatElapsed(elapsed)
+						})]
+					}),
+					usage?.cost !== void 0 && usage.cost > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1 text-[11px] text-sf-subtle",
+						children: [/* @__PURE__ */ jsx(CoinsIcon, { size: 11 }), /* @__PURE__ */ jsx("span", {
+							className: "tabular-nums",
+							children: formatCost(usage.cost)
+						})]
+					}),
+					usage?.totalTokens !== void 0 && /* @__PURE__ */ jsxs("span", {
+						className: "tabular-nums text-[11px] text-sf-subtle",
+						children: [formatTokens(usage.totalTokens), " tok"]
+					}),
+					isRunning && onAbort && /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"aria-label": "Abort mission",
+						onClick: onAbort,
+						className: cn("flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium", "text-sf-danger transition-colors hover:bg-sf-danger/10", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sf-ring"),
+						children: [/* @__PURE__ */ jsx(StopCircleIcon, { size: 11 }), "Stop"]
+					})
+				]
+			})]
+		}), !isCompact && /* @__PURE__ */ jsx(MissionProgress, { taskList })]
+	});
+});
+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-ByYkJ6YP.js.map

package/dist/ai-mission-header-ByYkJ6YP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-mission-header-ByYkJ6YP.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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"}