@signalflare-ai/ui 0.5.0

package/dist/ai-reasoning-UAmNx_LD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-reasoning-UAmNx_LD.js","names":[],"sources":["../src/components/ai-reasoning/ai-reasoning.tsx"],"sourcesContent":["\"use client\";\n\nimport { Collapsible as BaseCollapsible } from \"@base-ui/react/collapsible\";\nimport {\n  BrainIcon,\n  CaretDownIcon,\n  CaretRightIcon,\n  SparkleIcon,\n  SpinnerGapIcon,\n} from \"@phosphor-icons/react\";\nimport type { ComponentProps, ElementType } from \"react\";\nimport {\n  memo,\n  Suspense,\n  lazy,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { AiStatusBadge } from \"../ai-status-badge\";\n\n// Lazy-load Streamdown for markdown rendering in reasoning content.\n// Mirrors the pattern from ai-response.tsx for SSR safety.\ntype StreamdownModule = {\n  default: (props: { children: string; className?: string }) => React.ReactNode;\n};\n\nconst Streamdown = lazy((): Promise<StreamdownModule> => {\n  if (typeof window === \"undefined\") {\n    return Promise.resolve({\n      default: ({ children }: { children: string }) => <span>{children}</span>,\n    });\n  }\n  return import(\"streamdown\").then((sd) => ({\n    default: (props: { children: string; className?: string }) => (\n      <sd.Streamdown {...props} />\n    ),\n  }));\n});\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_REASONING_VARIANTS = {\n  variant: {\n    default: {\n      classes: \"\",\n      description:\n        \"Expandable card with collapsible reasoning text and duration\",\n    },\n    inline: {\n      classes: \"\",\n      description: \"Compact single-line display with left accent border\",\n    },\n    minimal: {\n      classes: \"\",\n      description: \"Pill-shaped status badge\",\n    },\n  },\n} as const;\n\nexport const SF_AI_REASONING_DEFAULT_VARIANTS = {\n  variant: \"default\",\n} as const;\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\n/** Display variant for reasoning rendering. */\nexport type AiReasoningVariant = keyof typeof SF_AI_REASONING_VARIANTS.variant;\n\n/**\n * Structured reasoning part — mirrors the shape of Vercel AI SDK's\n * `ReasoningUIPart` without requiring the `ai` package as a dependency.\n */\nexport interface AiReasoningPart {\n  /** The reasoning text content. */\n  text: string;\n}\n\nexport type AiReasoningProps = Omit<ComponentProps<\"div\">, \"part\"> & {\n  /** Structured reasoning part data. */\n  part: AiReasoningPart;\n  /** Display variant. @default \"default\" */\n  variant?: AiReasoningVariant;\n  /** Whether reasoning is currently streaming. */\n  isStreaming?: boolean;\n  /** Duration in seconds (passed in or self-tracked when streaming). */\n  duration?: number;\n  /** Default expanded state. @default false */\n  defaultExpanded?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Called when open state changes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Delay in ms before auto-closing after streaming ends. Set to 0 to disable. @default 1000 */\n  autoCloseDelay?: number;\n  /**\n   * Custom icon override. Defaults to `SparkleIcon` (streaming) or `BrainIcon` (done).\n   * Use to distinguish observation/reflection blocks from standard reasoning.\n   */\n  icon?: ElementType;\n  /**\n   * Custom label override. Defaults to `\"Thinking...\"` (streaming) or `\"Reasoning\"` (done).\n   * Use to label observational memory blocks: `\"Observing...\"`, `\"Reflecting...\"`, etc.\n   */\n  label?: string;\n  /**\n   * Custom streaming label. When provided, used instead of `label` while `isStreaming` is true.\n   * Falls back to `label`, then to the default `\"Thinking...\"`.\n   */\n  streamingLabel?: string;\n};\n\nexport type AiReasoningGroupProps = Omit<ComponentProps<\"div\">, \"part\"> & {\n  /** Array of reasoning parts. */\n  parts: AiReasoningPart[];\n  /** Whether the last part is currently streaming. */\n  isStreaming?: boolean;\n  /** Total duration in seconds. */\n  totalDuration?: number;\n  /** Default expanded state. @default false */\n  defaultExpanded?: boolean;\n};\n\n// ─── Utilities ───────────────────────────────────────────────────────────────\n\n/** Format seconds into a human-friendly duration string. */\nexport function formatDuration(seconds: number): string {\n  if (seconds < 60) return `${seconds}s`;\n  const mins = Math.floor(seconds / 60);\n  const secs = seconds % 60;\n  return secs > 0 ? `${mins}m ${secs}s` : `${mins}m`;\n}\n\n/** Truncate reasoning text with an ellipsis. */\nexport function truncateReasoning(text: string, maxLength = 100): string {\n  if (text.length <= maxLength) return text;\n  return `${text.slice(0, maxLength).trim()}...`;\n}\n\n/** Extract the first **bold** text from markdown-style reasoning. */\nexport function extractFirstBoldText(text: string): string | null {\n  const match = text.match(/\\*\\*([^*]+)\\*\\*/);\n  return match?.[1]?.trim() ?? null;\n}\n\n// ─── AiReasoning ─────────────────────────────────────────────────────────────\n\n/**\n * Collapsible reasoning block. Supports three display variants:\n * - `\"default\"` — expandable card with auto-open on stream start\n * - `\"inline\"` — compact single-line with left accent border\n * - `\"minimal\"` — pill-shaped status badge\n *\n * @example\n * ```tsx\n * <AiReasoning\n *   part={{ text: \"First I considered the user's intent...\" }}\n *   isStreaming={false}\n *   duration={3}\n * />\n * ```\n */\nexport const AiReasoning = memo(\n  ({\n    part,\n    variant = \"default\",\n    isStreaming = false,\n    duration: durationProp,\n    defaultExpanded = false,\n    open: openProp,\n    onOpenChange,\n    autoCloseDelay = 1000,\n    icon: iconProp,\n    label: labelProp,\n    streamingLabel: streamingLabelProp,\n    className,\n    ...props\n  }: AiReasoningProps) => {\n    const [internalOpen, setInternalOpen] = useState(defaultExpanded);\n    const [hasAutoClosed, setHasAutoClosed] = useState(false);\n    const [userOpened, setUserOpened] = useState(false);\n    const [internalDuration, setInternalDuration] = useState(0);\n    const startTimeRef = useRef<number | null>(null);\n\n    const isControlled = openProp !== undefined;\n    const isOpen = isControlled ? openProp : internalOpen;\n\n    const rawSetIsOpen = isControlled ? onOpenChange : setInternalOpen;\n    const setIsOpen = useCallback(\n      (value: boolean) => {\n        rawSetIsOpen?.(value);\n      },\n      [rawSetIsOpen]\n    );\n\n    const handleUserToggle = useCallback(\n      (value: boolean) => {\n        if (value) setUserOpened(true);\n        setIsOpen(value);\n      },\n      [setIsOpen]\n    );\n\n    const displayDuration = durationProp ?? internalDuration;\n    const reasoningText = part.text || \"\";\n\n    // Resolve custom icon/label (with defaults)\n    // When not streaming, try to extract a dynamic title from first **bold** text\n    const extractedBoldTitle = !isStreaming\n      ? extractFirstBoldText(reasoningText)\n      : null;\n    const dynamicLabel = extractedBoldTitle\n      ? truncateReasoning(extractedBoldTitle, 40)\n      : null;\n    const displayLabel = isStreaming\n      ? (streamingLabelProp ?? labelProp ?? \"Thinking...\")\n      : (labelProp ?? dynamicLabel ?? \"Reasoning\");\n    const ActiveIcon = iconProp ?? (isStreaming ? SparkleIcon : BrainIcon);\n    const StreamIcon = iconProp ?? SparkleIcon;\n    const DoneIcon = iconProp ?? BrainIcon;\n\n    // Track duration while streaming\n    useEffect(() => {\n      if (isStreaming) {\n        if (startTimeRef.current === null) {\n          startTimeRef.current = Date.now();\n        }\n        const interval = setInterval(() => {\n          if (startTimeRef.current) {\n            setInternalDuration(\n              Math.round((Date.now() - startTimeRef.current) / 1000)\n            );\n          }\n        }, 1000);\n        return () => clearInterval(interval);\n      }\n      if (startTimeRef.current !== null) {\n        setInternalDuration(\n          Math.round((Date.now() - startTimeRef.current) / 1000)\n        );\n        startTimeRef.current = null;\n      }\n    }, [isStreaming]);\n\n    // Auto-open on stream start, auto-close when done (unless user opened)\n    useEffect(() => {\n      if (isStreaming && !isOpen) {\n        setUserOpened(false);\n        setIsOpen(true);\n        return;\n      }\n      if (\n        !isStreaming &&\n        isOpen &&\n        !defaultExpanded &&\n        !hasAutoClosed &&\n        !userOpened &&\n        autoCloseDelay > 0\n      ) {\n        const timer = setTimeout(() => {\n          setIsOpen(false);\n          setHasAutoClosed(true);\n        }, autoCloseDelay);\n        return () => clearTimeout(timer);\n      }\n    }, [\n      isStreaming,\n      isOpen,\n      defaultExpanded,\n      hasAutoClosed,\n      userOpened,\n      autoCloseDelay,\n      setIsOpen,\n    ]);\n\n    // ── Minimal ──────────────────────────────────────────────────────────────\n\n    if (variant === \"minimal\") {\n      return (\n        <BaseCollapsible.Root open={isOpen} onOpenChange={handleUserToggle}>\n          <div className={cn(\"my-1.5\", className)} {...props}>\n            <BaseCollapsible.Trigger\n              render={<button type=\"button\" className=\"cursor-pointer\" />}\n            >\n              <AiStatusBadge\n                className=\"py-1\"\n                icon={DoneIcon}\n                label={displayLabel}\n                status={isStreaming ? \"running\" : \"success\"}\n              />\n            </BaseCollapsible.Trigger>\n            <BaseCollapsible.Panel className=\"overflow-hidden\">\n              <div className=\"mx-2 mt-1 rounded-lg bg-sf-tint/50 px-3 py-2\">\n                <Suspense>\n                  <Streamdown className=\"text-sf-subtle text-sm [&>*:first-child]:mt-0 [&>*:last-child]:mb-0\">\n                    {reasoningText}\n                  </Streamdown>\n                </Suspense>\n              </div>\n            </BaseCollapsible.Panel>\n          </div>\n        </BaseCollapsible.Root>\n      );\n    }\n\n    // ── Inline ───────────────────────────────────────────────────────────────\n\n    if (variant === \"inline\") {\n      return (\n        <div\n          className={cn(\n            \"my-1.5 flex items-center gap-2 border-l-2 border-sf-line py-1 pl-2\",\n            \"animate-in fade-in-0 slide-in-from-bottom-1 duration-200\",\n            className\n          )}\n          {...props}\n        >\n          <ActiveIcon className=\"size-3.5 shrink-0 text-sf-subtle\" />\n          <span className=\"text-sm text-sf-subtle\">{displayLabel}</span>\n          {isStreaming ? (\n            <SpinnerGapIcon className=\"size-3.5 animate-spin text-sf-subtle\" />\n          ) : null}\n          {!isStreaming && reasoningText ? (\n            <span className=\"max-w-[300px] truncate text-xs text-sf-subtle/60\">\n              — {truncateReasoning(reasoningText)}\n            </span>\n          ) : null}\n        </div>\n      );\n    }\n\n    // ── Default (compact expandable row) ─────────────────────────────────────\n\n    return (\n      <BaseCollapsible.Root open={isOpen} onOpenChange={handleUserToggle}>\n        <div\n          className={cn(\n            \"my-0.5 flex w-full flex-col\",\n            \"animate-in fade-in-0 duration-150\",\n            className\n          )}\n          {...props}\n        >\n          {/* Trigger — content-width, left-justified */}\n          <BaseCollapsible.Trigger\n            render={\n              <button\n                type=\"button\"\n                className=\"flex w-fit items-center gap-1.5 rounded px-1 py-0.5 text-left transition-colors hover:bg-sf-tint\"\n              />\n            }\n          >\n            {isStreaming ? (\n              <StreamIcon className=\"size-3.5 shrink-0 animate-pulse text-sf-subtle\" />\n            ) : (\n              <DoneIcon className=\"size-3.5 shrink-0 text-sf-subtle\" />\n            )}\n            <span className=\"text-sm text-sf-subtle\">{displayLabel}</span>\n            {isStreaming ? (\n              <SpinnerGapIcon className=\"size-3 shrink-0 animate-spin text-sf-subtle\" />\n            ) : null}\n            {displayDuration > 0 && !isStreaming ? (\n              <span className=\"text-xs tabular-nums text-sf-subtle/60\">\n                {formatDuration(displayDuration)}\n              </span>\n            ) : null}\n            {isOpen ? (\n              <CaretDownIcon className=\"size-3 shrink-0 text-sf-subtle/60\" />\n            ) : (\n              <CaretRightIcon className=\"size-3 shrink-0 text-sf-subtle/60\" />\n            )}\n          </BaseCollapsible.Trigger>\n\n          {/* Detail panel */}\n          <BaseCollapsible.Panel className=\"overflow-hidden\">\n            <div className=\"mt-1 rounded-lg bg-sf-tint/50 px-3 py-2\">\n              <Suspense>\n                <Streamdown className=\"text-sf-subtle text-sm [&>*:first-child]:mt-0 [&>*:last-child]:mb-0\">\n                  {reasoningText || \"*No reasoning content*\"}\n                </Streamdown>\n              </Suspense>\n            </div>\n          </BaseCollapsible.Panel>\n        </div>\n      </BaseCollapsible.Root>\n    );\n  }\n);\n\nAiReasoning.displayName = \"AiReasoning\";\n\n// ─── AiReasoningGroup ────────────────────────────────────────────────────────\n\n/**\n * Renders multiple reasoning steps. Shows a single `<AiReasoning>` directly\n * when only one part is provided. When multiple parts exist, renders a\n * collapsible group with step labels.\n *\n * @example\n * ```tsx\n * <AiReasoningGroup parts={reasoningParts} isStreaming={false} totalDuration={5} />\n * ```\n */\nexport function AiReasoningGroup({\n  parts,\n  isStreaming = false,\n  totalDuration,\n  defaultExpanded = false,\n  className,\n  ...props\n}: AiReasoningGroupProps) {\n  const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n\n  // Single part — render directly\n  if (parts.length === 1 && parts[0]) {\n    const singlePart = parts[0];\n    // Strip `part` from div props spread to avoid collision with HTML `part` attribute\n    const { part: _part, ...restProps } = props as typeof props & {\n      part?: unknown;\n    };\n    return (\n      <AiReasoning\n        part={singlePart}\n        isStreaming={isStreaming}\n        duration={totalDuration}\n        className={className}\n        {...restProps}\n      />\n    );\n  }\n\n  return (\n    <BaseCollapsible.Root open={isExpanded} onOpenChange={setIsExpanded}>\n      <div\n        className={cn(\n          \"my-0.5 flex w-full flex-col\",\n          \"animate-in fade-in-0 duration-150\",\n          className\n        )}\n        {...props}\n      >\n        <BaseCollapsible.Trigger\n          render={\n            <button\n              type=\"button\"\n              className=\"flex w-fit items-center gap-1.5 rounded px-1 py-0.5 text-left transition-colors hover:bg-sf-tint\"\n            />\n          }\n        >\n          {isStreaming ? (\n            <SparkleIcon className=\"size-3.5 shrink-0 animate-pulse text-sf-subtle\" />\n          ) : (\n            <BrainIcon className=\"size-3.5 shrink-0 text-sf-subtle\" />\n          )}\n          <span className=\"text-sm text-sf-subtle\">\n            {isStreaming ? \"Thinking...\" : `${parts.length} reasoning steps`}\n          </span>\n          {isStreaming ? (\n            <SpinnerGapIcon className=\"size-3 shrink-0 animate-spin text-sf-subtle\" />\n          ) : null}\n          {totalDuration && totalDuration > 0 && !isStreaming ? (\n            <span className=\"text-xs tabular-nums text-sf-subtle/60\">\n              {formatDuration(totalDuration)}\n            </span>\n          ) : null}\n          {isExpanded ? (\n            <CaretDownIcon className=\"size-3 shrink-0 text-sf-subtle/60\" />\n          ) : (\n            <CaretRightIcon className=\"size-3 shrink-0 text-sf-subtle/60\" />\n          )}\n        </BaseCollapsible.Trigger>\n\n        <BaseCollapsible.Panel className=\"overflow-hidden\">\n          <div className=\"mt-1 space-y-2 rounded-lg bg-sf-tint/50 px-3 py-2\">\n            {parts.map((partItem, index) => (\n              <div key={index} className=\"text-sm text-sf-subtle\">\n                {parts.length > 1 ? (\n                  <p className=\"mb-0.5 text-[10px] uppercase tracking-wider text-sf-subtle/50\">\n                    Step {index + 1}\n                  </p>\n                ) : null}\n                <Suspense>\n                  <Streamdown className=\"[&>*:first-child]:mt-0 [&>*:last-child]:mb-0\">\n                    {partItem.text || \"*No content*\"}\n                  </Streamdown>\n                </Suspense>\n              </div>\n            ))}\n          </div>\n        </BaseCollapsible.Panel>\n      </div>\n    </BaseCollapsible.Root>\n  );\n}\n"],"mappings":"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"}

package/dist/ai-response-BWoVsNQG.js

@@ -0,0 +1,42 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { Suspense, lazy, memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ai-response/ai-response.tsx
+var SF_AI_RESPONSE_VARIANTS = {};
+var SF_AI_RESPONSE_DEFAULT_VARIANTS = {};
+var Streamdown = lazy(() => {
+	if (typeof window === "undefined") return Promise.resolve({ default: (_props) => null });
+	return Promise.all([import("streamdown"), import("@streamdown/code")]).then(([sd, codePlugin]) => {
+		const plugins = { code: codePlugin.code };
+		return { default: (props) => /* @__PURE__ */ jsx(sd.Streamdown, {
+			plugins,
+			...props
+		}) };
+	});
+});
+/**
+* Renders AI-generated markdown using Streamdown.
+* Supports streaming animation, syntax-highlighted code, tables, and more.
+*
+* Pass `isAnimating={true}` while streaming and `false` once complete to get
+* character-by-character reveal animation.
+*
+* @example
+* ```tsx
+* // Static
+* <AiResponse>{"# Hello\n\nThis is **bold** and _italic_."}</AiResponse>
+*
+* // Streaming
+* <AiResponse isAnimating={isStreaming}>{streamedText}</AiResponse>
+* ```
+*/
+var AiResponse = memo(({ className, ...props }) => /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Streamdown, {
+	className: cn("w-full text-sf-default text-sm", "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className),
+	...props
+}) }), (prev, next) => prev.children === next.children && prev.isAnimating === next.isAnimating);
+AiResponse.displayName = "AiResponse";
+//#endregion
+export { SF_AI_RESPONSE_DEFAULT_VARIANTS as n, SF_AI_RESPONSE_VARIANTS as r, AiResponse as t };
+
+//# sourceMappingURL=ai-response-BWoVsNQG.js.map

package/dist/ai-response-BWoVsNQG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-response-BWoVsNQG.js","names":[],"sources":["../src/components/ai-response/ai-response.tsx"],"sourcesContent":["\"use client\";\n\nimport type React from \"react\";\nimport { memo, Suspense, lazy } from \"react\";\nimport type { StreamdownProps } from \"streamdown\";\n\nimport { cn } from \"../../utils/cn\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_RESPONSE_VARIANTS = {} as const;\nexport const SF_AI_RESPONSE_DEFAULT_VARIANTS = {} as const;\n\n// Lazy-load Streamdown + the code plugin.\n// Streamdown accesses `document` at module init time, which crashes Astro\n// static builds. We gate the import behind a browser check so it is never\n// evaluated in a Node / SSR context.\ntype StreamdownModule = {\n  default: (props: StreamdownProps) => React.ReactNode;\n};\n\nconst Streamdown = lazy((): Promise<StreamdownModule> => {\n  if (typeof window === \"undefined\") {\n    // SSR: return a no-op placeholder that renders nothing\n    return Promise.resolve({\n      default: (_props: StreamdownProps) => null,\n    });\n  }\n  return Promise.all([import(\"streamdown\"), import(\"@streamdown/code\")]).then(\n    ([sd, codePlugin]) => {\n      const plugins = { code: codePlugin.code };\n      return {\n        default: (props: StreamdownProps) => (\n          <sd.Streamdown plugins={plugins} {...props} />\n        ),\n      };\n    }\n  );\n});\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nexport type AiResponseProps = StreamdownProps & {\n  /** Additional CSS classes. */\n  className?: string;\n};\n\n/**\n * Renders AI-generated markdown using Streamdown.\n * Supports streaming animation, syntax-highlighted code, tables, and more.\n *\n * Pass `isAnimating={true}` while streaming and `false` once complete to get\n * character-by-character reveal animation.\n *\n * @example\n * ```tsx\n * // Static\n * <AiResponse>{\"# Hello\\n\\nThis is **bold** and _italic_.\"}</AiResponse>\n *\n * // Streaming\n * <AiResponse isAnimating={isStreaming}>{streamedText}</AiResponse>\n * ```\n */\nexport const AiResponse = memo(\n  ({ className, ...props }: AiResponseProps) => (\n    <Suspense>\n      <Streamdown\n        className={cn(\n          \"w-full text-sf-default text-sm\",\n          \"[&>*:first-child]:mt-0 [&>*:last-child]:mb-0\",\n          className\n        )}\n        {...props}\n      />\n    </Suspense>\n  ),\n  (prev, next) =>\n    prev.children === next.children && prev.isAnimating === next.isAnimating\n);\n\nAiResponse.displayName = \"AiResponse\";\n"],"mappings":";;;;;AAUA,IAAa,0BAA0B,EAAE;AACzC,IAAa,kCAAkC,EAAE;AAUjD,IAAM,aAAa,WAAsC;AACvD,KAAI,OAAO,WAAW,YAEpB,QAAO,QAAQ,QAAQ,EACrB,UAAU,WAA4B,MACvC,CAAC;AAEJ,QAAO,QAAQ,IAAI,CAAC,OAAO,eAAe,OAAO,oBAAoB,CAAC,CAAC,MACpE,CAAC,IAAI,gBAAgB;EACpB,MAAM,UAAU,EAAE,MAAM,WAAW,MAAM;AACzC,SAAO,EACL,UAAU,UACR,oBAAC,GAAG,YAAJ;GAAwB;GAAS,GAAI;GAAS,CAAA,EAEjD;GAEJ;EACD;;;;;;;;;;;;;;;;;AAyBF,IAAa,aAAa,MACvB,EAAE,WAAW,GAAG,YACf,oBAAC,UAAD,EAAA,UACE,oBAAC,YAAD;CACE,WAAW,GACT,kCACA,gDACA,UACD;CACD,GAAI;CACJ,CAAA,EACO,CAAA,GAEZ,MAAM,SACL,KAAK,aAAa,KAAK,YAAY,KAAK,gBAAgB,KAAK,YAChE;AAED,WAAW,cAAc"}

package/dist/ai-shimmer-BpOmfonu.js

@@ -0,0 +1,43 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+//#region src/components/ai-shimmer/ai-shimmer.tsx
+var SF_AI_SHIMMER_VARIANTS = {};
+var SF_AI_SHIMMER_DEFAULT_VARIANTS = {};
+/**
+* Animated text shimmer effect for AI streaming states.
+* Renders a sweep of light across the text to indicate activity.
+*
+* @example
+* ```tsx
+* <AiShimmer>Thinking...</AiShimmer>
+* <AiShimmer as="span" duration={1.5}>Generating response</AiShimmer>
+* ```
+*/
+function AiShimmerBase({ children, as: Component = "p", className, duration = 2, spread = 2 }) {
+	const MotionComponent = motion.create(Component);
+	const dynamicSpread = useMemo(() => (children?.length ?? 0) * spread, [children, spread]);
+	return /* @__PURE__ */ jsx(MotionComponent, {
+		animate: { backgroundPosition: "0% center" },
+		className: cn("relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent", "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-sf-base),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]", className),
+		initial: { backgroundPosition: "100% center" },
+		style: {
+			"--spread": `${dynamicSpread}px`,
+			backgroundImage: "var(--bg), linear-gradient(var(--color-sf-subtle), var(--color-sf-subtle))"
+		},
+		transition: {
+			repeat: Number.POSITIVE_INFINITY,
+			duration,
+			ease: "linear"
+		},
+		children
+	});
+}
+var AiShimmer = memo(AiShimmerBase);
+AiShimmer.displayName = "AiShimmer";
+//#endregion
+export { SF_AI_SHIMMER_DEFAULT_VARIANTS as n, SF_AI_SHIMMER_VARIANTS as r, AiShimmer as t };
+
+//# sourceMappingURL=ai-shimmer-BpOmfonu.js.map

package/dist/ai-shimmer-BpOmfonu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-shimmer-BpOmfonu.js","names":[],"sources":["../src/components/ai-shimmer/ai-shimmer.tsx"],"sourcesContent":["\"use client\";\n\nimport { motion } from \"motion/react\";\nimport {\n  type CSSProperties,\n  type ElementType,\n  type JSX,\n  memo,\n  useMemo,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_SHIMMER_VARIANTS = {} as const;\nexport const SF_AI_SHIMMER_DEFAULT_VARIANTS = {} as const;\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nexport interface AiShimmerProps {\n  /** Text content to animate. */\n  children: string;\n  /** HTML element or component to render as. @default \"p\" */\n  as?: ElementType;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Animation duration in seconds. @default 2 */\n  duration?: number;\n  /** Shimmer width multiplier relative to text length. @default 2 */\n  spread?: number;\n}\n\n/**\n * Animated text shimmer effect for AI streaming states.\n * Renders a sweep of light across the text to indicate activity.\n *\n * @example\n * ```tsx\n * <AiShimmer>Thinking...</AiShimmer>\n * <AiShimmer as=\"span\" duration={1.5}>Generating response</AiShimmer>\n * ```\n */\nfunction AiShimmerBase({\n  children,\n  as: Component = \"p\",\n  className,\n  duration = 2,\n  spread = 2,\n}: AiShimmerProps) {\n  const MotionComponent = motion.create(\n    Component as keyof JSX.IntrinsicElements\n  );\n  const dynamicSpread = useMemo(\n    () => (children?.length ?? 0) * spread,\n    [children, spread]\n  );\n\n  return (\n    <MotionComponent\n      animate={{ backgroundPosition: \"0% center\" }}\n      className={cn(\n        \"relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent\",\n        \"[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-sf-base),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]\",\n        className\n      )}\n      initial={{ backgroundPosition: \"100% center\" }}\n      style={\n        {\n          \"--spread\": `${dynamicSpread}px`,\n          backgroundImage:\n            \"var(--bg), linear-gradient(var(--color-sf-subtle), var(--color-sf-subtle))\",\n        } as CSSProperties\n      }\n      transition={{\n        repeat: Number.POSITIVE_INFINITY,\n        duration,\n        ease: \"linear\",\n      }}\n    >\n      {children}\n    </MotionComponent>\n  );\n}\n\nexport const AiShimmer = memo(AiShimmerBase);\nAiShimmer.displayName = \"AiShimmer\";\n"],"mappings":";;;;;;AAeA,IAAa,yBAAyB,EAAE;AACxC,IAAa,iCAAiC,EAAE;;;;;;;;;;;AA2BhD,SAAS,cAAc,EACrB,UACA,IAAI,YAAY,KAChB,WACA,WAAW,GACX,SAAS,KACQ;CACjB,MAAM,kBAAkB,OAAO,OAC7B,UACD;CACD,MAAM,gBAAgB,eACb,UAAU,UAAU,KAAK,QAChC,CAAC,UAAU,OAAO,CACnB;AAED,QACE,oBAAC,iBAAD;EACE,SAAS,EAAE,oBAAoB,aAAa;EAC5C,WAAW,GACT,kFACA,4JACA,UACD;EACD,SAAS,EAAE,oBAAoB,eAAe;EAC9C,OACE;GACE,YAAY,GAAG,cAAc;GAC7B,iBACE;GACH;EAEH,YAAY;GACV,QAAQ,OAAO;GACf;GACA,MAAM;GACP;EAEA;EACe,CAAA;;AAItB,IAAa,YAAY,KAAK,cAAc;AAC5C,UAAU,cAAc"}

package/dist/ai-status-badge-WhbKVeqn.js

@@ -0,0 +1,63 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, SpinnerGapIcon, XIcon } from "@phosphor-icons/react";
+//#region src/components/ai-status-badge/ai-status-badge.tsx
+var SF_AI_STATUS_BADGE_VARIANTS = { status: {
+	idle: {
+		classes: "",
+		description: "Default idle state — no status icon shown"
+	},
+	running: {
+		classes: "",
+		description: "Actively running — spinner icon shown"
+	},
+	success: {
+		classes: "",
+		description: "Completed successfully — check icon shown"
+	},
+	error: {
+		classes: "",
+		description: "Failed with an error — X icon shown"
+	}
+} };
+var SF_AI_STATUS_BADGE_DEFAULT_VARIANTS = { status: "idle" };
+function StatusIcon({ status }) {
+	switch (status) {
+		case "running": return /* @__PURE__ */ jsx(SpinnerGapIcon, { className: "size-3 animate-spin text-sf-brand" });
+		case "success": return /* @__PURE__ */ jsx(CheckIcon, { className: "size-3 text-sf-success" });
+		case "error": return /* @__PURE__ */ jsx(XIcon, { className: "size-3 text-sf-danger" });
+		default: return null;
+	}
+}
+/**
+* Compact pill-shaped badge showing an icon, label, and a status indicator.
+* Used by minimal variants of AiToolCall and AiReasoning.
+*
+* @example
+* ```tsx
+* <AiStatusBadge icon={MagnifyingGlassIcon} label="web_search" status="running" />
+* ```
+*/
+function AiStatusBadge({ icon: Icon, label, status = "idle", info, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("mx-2 inline-flex cursor-default items-center gap-1.5 rounded-full bg-sf-tint/50 px-2 py-0.5 text-xs", "animate-in fade-in-0 slide-in-from-bottom-1 duration-200", className),
+		...props,
+		children: [
+			Icon ? /* @__PURE__ */ jsx(Icon, { className: "size-3 text-sf-subtle" }) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "text-sf-subtle",
+				children: label
+			}),
+			info ? /* @__PURE__ */ jsx("span", {
+				className: "text-sf-subtle/60",
+				children: info
+			}) : null,
+			/* @__PURE__ */ jsx(StatusIcon, { status })
+		]
+	});
+}
+//#endregion
+export { SF_AI_STATUS_BADGE_DEFAULT_VARIANTS as n, SF_AI_STATUS_BADGE_VARIANTS as r, AiStatusBadge as t };
+
+//# sourceMappingURL=ai-status-badge-WhbKVeqn.js.map

package/dist/ai-status-badge-WhbKVeqn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-status-badge-WhbKVeqn.js","names":[],"sources":["../src/components/ai-status-badge/ai-status-badge.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckIcon, SpinnerGapIcon, XIcon } from \"@phosphor-icons/react\";\nimport type { ComponentProps, ElementType } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_STATUS_BADGE_VARIANTS = {\n  status: {\n    idle: {\n      classes: \"\",\n      description: \"Default idle state — no status icon shown\",\n    },\n    running: {\n      classes: \"\",\n      description: \"Actively running — spinner icon shown\",\n    },\n    success: {\n      classes: \"\",\n      description: \"Completed successfully — check icon shown\",\n    },\n    error: {\n      classes: \"\",\n      description: \"Failed with an error — X icon shown\",\n    },\n  },\n} as const;\n\nexport const SF_AI_STATUS_BADGE_DEFAULT_VARIANTS = {\n  status: \"idle\",\n} as const;\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport type AiStatusBadgeStatus =\n  keyof typeof SF_AI_STATUS_BADGE_VARIANTS.status;\n\nexport type AiStatusBadgeProps = ComponentProps<\"div\"> & {\n  /** Icon component rendered on the left. */\n  icon?: ElementType;\n  /** Label text displayed in the badge. */\n  label: string;\n  /** Current status — determines the status icon on the right. @default \"idle\" */\n  status?: AiStatusBadgeStatus;\n  /** Additional info text (e.g. \"2/3\") shown after the label. */\n  info?: string;\n};\n\n// ─── Helpers ─────────────────────────────────────────────────────────────────\n\nfunction StatusIcon({ status }: { status: AiStatusBadgeStatus }) {\n  switch (status) {\n    case \"running\":\n      return <SpinnerGapIcon className=\"size-3 animate-spin text-sf-brand\" />;\n    case \"success\":\n      return <CheckIcon className=\"size-3 text-sf-success\" />;\n    case \"error\":\n      return <XIcon className=\"size-3 text-sf-danger\" />;\n    default:\n      return null;\n  }\n}\n\n// ─── AiStatusBadge ───────────────────────────────────────────────────────────\n\n/**\n * Compact pill-shaped badge showing an icon, label, and a status indicator.\n * Used by minimal variants of AiToolCall and AiReasoning.\n *\n * @example\n * ```tsx\n * <AiStatusBadge icon={MagnifyingGlassIcon} label=\"web_search\" status=\"running\" />\n * ```\n */\nexport function AiStatusBadge({\n  icon: Icon,\n  label,\n  status = \"idle\",\n  info,\n  className,\n  ...props\n}: AiStatusBadgeProps) {\n  return (\n    <div\n      className={cn(\n        \"mx-2 inline-flex cursor-default items-center gap-1.5 rounded-full bg-sf-tint/50 px-2 py-0.5 text-xs\",\n        \"animate-in fade-in-0 slide-in-from-bottom-1 duration-200\",\n        className\n      )}\n      {...props}\n    >\n      {Icon ? <Icon className=\"size-3 text-sf-subtle\" /> : null}\n      <span className=\"text-sf-subtle\">{label}</span>\n      {info ? <span className=\"text-sf-subtle/60\">{info}</span> : null}\n      <StatusIcon status={status} />\n    </div>\n  );\n}\n"],"mappings":";;;;;AASA,IAAa,8BAA8B,EACzC,QAAQ;CACN,MAAM;EACJ,SAAS;EACT,aAAa;EACd;CACD,SAAS;EACP,SAAS;EACT,aAAa;EACd;CACD,SAAS;EACP,SAAS;EACT,aAAa;EACd;CACD,OAAO;EACL,SAAS;EACT,aAAa;EACd;CACF,EACF;AAED,IAAa,sCAAsC,EACjD,QAAQ,QACT;AAoBD,SAAS,WAAW,EAAE,UAA2C;AAC/D,SAAQ,QAAR;EACE,KAAK,UACH,QAAO,oBAAC,gBAAD,EAAgB,WAAU,qCAAsC,CAAA;EACzE,KAAK,UACH,QAAO,oBAAC,WAAD,EAAW,WAAU,0BAA2B,CAAA;EACzD,KAAK,QACH,QAAO,oBAAC,OAAD,EAAO,WAAU,yBAA0B,CAAA;EACpD,QACE,QAAO;;;;;;;;;;;;AAeb,SAAgB,cAAc,EAC5B,MAAM,MACN,OACA,SAAS,QACT,MACA,WACA,GAAG,SACkB;AACrB,QACE,qBAAC,OAAD;EACE,WAAW,GACT,uGACA,4DACA,UACD;EACD,GAAI;YANN;GAQG,OAAO,oBAAC,MAAD,EAAM,WAAU,yBAA0B,CAAA,GAAG;GACrD,oBAAC,QAAD;IAAM,WAAU;cAAkB;IAAa,CAAA;GAC9C,OAAO,oBAAC,QAAD;IAAM,WAAU;cAAqB;IAAY,CAAA,GAAG;GAC5D,oBAAC,YAAD,EAAoB,QAAU,CAAA;GAC1B"}

package/dist/ai-streaming-text-ClL7FwvD.js

@@ -0,0 +1,81 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/ai-streaming-text/ai-streaming-text.tsx
+var SF_AI_STREAMING_TEXT_VARIANTS = {};
+var SF_AI_STREAMING_TEXT_DEFAULT_VARIANTS = {};
+/**
+* Buffers incoming text and releases it character-by-character for a smooth
+* typing effect. Pass the full (possibly incomplete) text and whether streaming
+* is active — get back the display-ready substring.
+*
+* @example
+* ```tsx
+* function StreamingMessage({ text, isStreaming }) {
+*   const displayText = useAiStreamingText(text, { isStreaming });
+*   return <AiResponse>{displayText}</AiResponse>;
+* }
+* ```
+*/
+function useAiStreamingText(text, options = {}) {
+	const { isStreaming = false, charsPerTick = 10, tickInterval = 16, flushOnStop = true } = options;
+	const [displayText, setDisplayText] = useState(text);
+	const targetRef = useRef(text);
+	const posRef = useRef(text.length);
+	const rafRef = useRef(null);
+	const lastTickRef = useRef(0);
+	useEffect(() => {
+		targetRef.current = text;
+	}, [text]);
+	useEffect(() => {
+		if (!isStreaming) {
+			if (flushOnStop) {
+				setDisplayText(text);
+				posRef.current = text.length;
+			}
+			return;
+		}
+		const animate = (timestamp) => {
+			const target = targetRef.current;
+			const pos = posRef.current;
+			if (pos >= target.length) {
+				rafRef.current = requestAnimationFrame(animate);
+				return;
+			}
+			if (timestamp - lastTickRef.current < tickInterval) {
+				rafRef.current = requestAnimationFrame(animate);
+				return;
+			}
+			lastTickRef.current = timestamp;
+			const newPos = Math.min(pos + charsPerTick, target.length);
+			posRef.current = newPos;
+			setDisplayText(target.slice(0, newPos));
+			rafRef.current = requestAnimationFrame(animate);
+		};
+		rafRef.current = requestAnimationFrame(animate);
+		return () => {
+			if (rafRef.current) cancelAnimationFrame(rafRef.current);
+		};
+	}, [
+		isStreaming,
+		charsPerTick,
+		tickInterval,
+		flushOnStop,
+		text
+	]);
+	useEffect(() => {
+		if (!isStreaming && flushOnStop && displayText !== text) {
+			setDisplayText(text);
+			posRef.current = text.length;
+		}
+	}, [
+		isStreaming,
+		flushOnStop,
+		text,
+		displayText
+	]);
+	return displayText;
+}
+//#endregion
+export { SF_AI_STREAMING_TEXT_VARIANTS as n, useAiStreamingText as r, SF_AI_STREAMING_TEXT_DEFAULT_VARIANTS as t };
+
+//# sourceMappingURL=ai-streaming-text-ClL7FwvD.js.map

package/dist/ai-streaming-text-ClL7FwvD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-streaming-text-ClL7FwvD.js","names":[],"sources":["../src/components/ai-streaming-text/ai-streaming-text.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_STREAMING_TEXT_VARIANTS = {} as const;\nexport const SF_AI_STREAMING_TEXT_DEFAULT_VARIANTS = {} as const;\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface UseAiStreamingTextOptions {\n  /** Whether content is actively streaming. @default false */\n  isStreaming?: boolean;\n  /** Characters to release per animation frame tick. @default 10 */\n  charsPerTick?: number;\n  /** Milliseconds between releases (~16ms = 60fps). @default 16 */\n  tickInterval?: number;\n  /** Immediately flush all text when streaming stops. @default true */\n  flushOnStop?: boolean;\n}\n\n// ─── Hook ────────────────────────────────────────────────────────────────────\n\n/**\n * Buffers incoming text and releases it character-by-character for a smooth\n * typing effect. Pass the full (possibly incomplete) text and whether streaming\n * is active — get back the display-ready substring.\n *\n * @example\n * ```tsx\n * function StreamingMessage({ text, isStreaming }) {\n *   const displayText = useAiStreamingText(text, { isStreaming });\n *   return <AiResponse>{displayText}</AiResponse>;\n * }\n * ```\n */\nexport function useAiStreamingText(\n  text: string,\n  options: UseAiStreamingTextOptions = {}\n): string {\n  const {\n    isStreaming = false,\n    charsPerTick = 10,\n    tickInterval = 16,\n    flushOnStop = true,\n  } = options;\n\n  const [displayText, setDisplayText] = useState(text);\n  const targetRef = useRef(text);\n  const posRef = useRef(text.length);\n  const rafRef = useRef<number | null>(null);\n  const lastTickRef = useRef(0);\n\n  useEffect(() => {\n    targetRef.current = text;\n  }, [text]);\n\n  useEffect(() => {\n    if (!isStreaming) {\n      if (flushOnStop) {\n        setDisplayText(text);\n        posRef.current = text.length;\n      }\n      return;\n    }\n\n    const animate = (timestamp: number) => {\n      const target = targetRef.current;\n      const pos = posRef.current;\n\n      if (pos >= target.length) {\n        rafRef.current = requestAnimationFrame(animate);\n        return;\n      }\n\n      if (timestamp - lastTickRef.current < tickInterval) {\n        rafRef.current = requestAnimationFrame(animate);\n        return;\n      }\n      lastTickRef.current = timestamp;\n\n      const newPos = Math.min(pos + charsPerTick, target.length);\n      posRef.current = newPos;\n      setDisplayText(target.slice(0, newPos));\n      rafRef.current = requestAnimationFrame(animate);\n    };\n\n    rafRef.current = requestAnimationFrame(animate);\n    return () => {\n      if (rafRef.current) cancelAnimationFrame(rafRef.current);\n    };\n  }, [isStreaming, charsPerTick, tickInterval, flushOnStop, text]);\n\n  useEffect(() => {\n    if (!isStreaming && flushOnStop && displayText !== text) {\n      setDisplayText(text);\n      posRef.current = text.length;\n    }\n  }, [isStreaming, flushOnStop, text, displayText]);\n\n  return displayText;\n}\n"],"mappings":";;;AAMA,IAAa,gCAAgC,EAAE;AAC/C,IAAa,wCAAwC,EAAE;;;;;;;;;;;;;;AA8BvD,SAAgB,mBACd,MACA,UAAqC,EAAE,EAC/B;CACR,MAAM,EACJ,cAAc,OACd,eAAe,IACf,eAAe,IACf,cAAc,SACZ;CAEJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,YAAY,OAAO,KAAK;CAC9B,MAAM,SAAS,OAAO,KAAK,OAAO;CAClC,MAAM,SAAS,OAAsB,KAAK;CAC1C,MAAM,cAAc,OAAO,EAAE;AAE7B,iBAAgB;AACd,YAAU,UAAU;IACnB,CAAC,KAAK,CAAC;AAEV,iBAAgB;AACd,MAAI,CAAC,aAAa;AAChB,OAAI,aAAa;AACf,mBAAe,KAAK;AACpB,WAAO,UAAU,KAAK;;AAExB;;EAGF,MAAM,WAAW,cAAsB;GACrC,MAAM,SAAS,UAAU;GACzB,MAAM,MAAM,OAAO;AAEnB,OAAI,OAAO,OAAO,QAAQ;AACxB,WAAO,UAAU,sBAAsB,QAAQ;AAC/C;;AAGF,OAAI,YAAY,YAAY,UAAU,cAAc;AAClD,WAAO,UAAU,sBAAsB,QAAQ;AAC/C;;AAEF,eAAY,UAAU;GAEtB,MAAM,SAAS,KAAK,IAAI,MAAM,cAAc,OAAO,OAAO;AAC1D,UAAO,UAAU;AACjB,kBAAe,OAAO,MAAM,GAAG,OAAO,CAAC;AACvC,UAAO,UAAU,sBAAsB,QAAQ;;AAGjD,SAAO,UAAU,sBAAsB,QAAQ;AAC/C,eAAa;AACX,OAAI,OAAO,QAAS,sBAAqB,OAAO,QAAQ;;IAEzD;EAAC;EAAa;EAAc;EAAc;EAAa;EAAK,CAAC;AAEhE,iBAAgB;AACd,MAAI,CAAC,eAAe,eAAe,gBAAgB,MAAM;AACvD,kBAAe,KAAK;AACpB,UAAO,UAAU,KAAK;;IAEvB;EAAC;EAAa;EAAa;EAAM;EAAY,CAAC;AAEjD,QAAO"}

package/dist/ai-subagent-BruGN1UE.js

@@ -0,0 +1,133 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CaretDownIcon, CheckCircleIcon, RobotIcon, SpinnerGapIcon, XCircleIcon } from "@phosphor-icons/react";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/components/ai-subagent/ai-subagent.tsx
+var SF_AI_SUBAGENT_VARIANTS = { status: {
+	running: {
+		classes: "",
+		description: "Subagent is actively processing"
+	},
+	completed: {
+		classes: "",
+		description: "Subagent finished successfully"
+	},
+	error: {
+		classes: "",
+		description: "Subagent encountered an error"
+	}
+} };
+var SF_AI_SUBAGENT_DEFAULT_VARIANTS = { status: "running" };
+var STATUS_CONFIG = {
+	running: {
+		icon: SpinnerGapIcon,
+		className: "text-sf-brand animate-spin",
+		label: "Running"
+	},
+	completed: {
+		icon: CheckCircleIcon,
+		className: "text-sf-success",
+		label: "Completed"
+	},
+	error: {
+		icon: XCircleIcon,
+		className: "text-sf-danger",
+		label: "Error"
+	}
+};
+function formatDuration(ms) {
+	if (ms < 1e3) return `${ms}ms`;
+	const s = Math.floor(ms / 1e3);
+	if (s < 60) return `${s}s`;
+	const m = Math.floor(s / 60);
+	const remaining = s % 60;
+	return remaining > 0 ? `${m}m ${remaining}s` : `${m}m`;
+}
+/**
+* Collapsible wrapper for nested subagent activity. Shows the subagent name,
+* status, model, and duration in a header, with all subagent output (text,
+* tool calls, etc.) in a collapsible body.
+*
+* Maps to harness events: `subagent_start`, `subagent_text_delta`,
+* `subagent_tool_start`, `subagent_tool_end`, `subagent_end`,
+* `subagent_model_changed`.
+*
+* @example
+* ```tsx
+* <AiSubagent
+*   name="Explore"
+*   agentType="explore"
+*   status="running"
+*   modelId="claude-haiku-3.5"
+*   defaultExpanded
+* >
+*   <AiResponse isAnimating>{streamingText}</AiResponse>
+*   <AiToolCallGroup tools={toolCalls} />
+* </AiSubagent>
+* ```
+*/
+function AiSubagent({ agentType, name, status = "running", modelId, duration, icon, defaultExpanded = true, open: controlledOpen, onOpenChange, children, className, ...props }) {
+	const [internalOpen, setInternalOpen] = useState(defaultExpanded);
+	const isControlled = controlledOpen !== void 0;
+	const isOpen = isControlled ? controlledOpen : internalOpen;
+	const handleOpenChange = (nextOpen) => {
+		if (!isControlled) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	};
+	const IconComponent = icon ?? RobotIcon;
+	const statusConfig = STATUS_CONFIG[status];
+	const StatusIcon = statusConfig.icon;
+	const displayName = name ?? agentType ?? "Subagent";
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		defaultOpen: defaultExpanded,
+		onOpenChange: handleOpenChange,
+		open: isOpen,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("flex flex-col overflow-hidden rounded-lg", className),
+			...props,
+			children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
+				className: "flex w-fit items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-sf-tint",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "flex size-5 shrink-0 items-center justify-center rounded bg-sf-tint text-sf-subtle",
+						children: /* @__PURE__ */ jsx(IconComponent, { className: "size-3.5" })
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 grow items-center gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-sm font-medium text-sf-default",
+							children: displayName
+						}), modelId && /* @__PURE__ */ jsx("span", {
+							className: "truncate rounded bg-sf-tint px-1.5 py-0.5 font-mono text-[10px] text-sf-subtle",
+							children: modelId
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex shrink-0 items-center gap-2",
+						children: [
+							duration !== void 0 && /* @__PURE__ */ jsx("span", {
+								className: "text-xs tabular-nums text-sf-subtle",
+								children: formatDuration(duration)
+							}),
+							/* @__PURE__ */ jsx(StatusIcon, { className: cn("size-3.5", statusConfig.className) }),
+							/* @__PURE__ */ jsx(CaretDownIcon, { className: cn("size-3 text-sf-subtle transition-transform duration-200", isOpen && "rotate-180") })
+						]
+					})
+				]
+			}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+				className: "overflow-hidden [&[data-ending-style]]:h-0 [&[data-starting-style]]:h-0",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-2 bg-sf-tint/50 px-3 py-2.5",
+					children
+				})
+			})]
+		})
+	});
+}
+AiSubagent.displayName = "AiSubagent";
+//#endregion
+export { SF_AI_SUBAGENT_DEFAULT_VARIANTS as n, SF_AI_SUBAGENT_VARIANTS as r, AiSubagent as t };
+
+//# sourceMappingURL=ai-subagent-BruGN1UE.js.map

package/dist/ai-subagent-BruGN1UE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-subagent-BruGN1UE.js","names":[],"sources":["../src/components/ai-subagent/ai-subagent.tsx"],"sourcesContent":["\"use client\";\n\nimport { Collapsible as BaseCollapsible } from \"@base-ui/react/collapsible\";\nimport {\n  RobotIcon,\n  CaretDownIcon,\n  SpinnerGapIcon,\n  CheckCircleIcon,\n  XCircleIcon,\n} from \"@phosphor-icons/react\";\nimport type { ElementType, HTMLAttributes, ReactNode } from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_SUBAGENT_VARIANTS = {\n  status: {\n    running: { classes: \"\", description: \"Subagent is actively processing\" },\n    completed: { classes: \"\", description: \"Subagent finished successfully\" },\n    error: { classes: \"\", description: \"Subagent encountered an error\" },\n  },\n} as const;\n\nexport const SF_AI_SUBAGENT_DEFAULT_VARIANTS = {\n  status: \"running\",\n} as const;\n\nexport type SFAiSubagentStatus = keyof typeof SF_AI_SUBAGENT_VARIANTS.status;\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type AiSubagentProps = HTMLAttributes<HTMLDivElement> & {\n  /** Subagent type ID (e.g. `\"explore\"`, `\"execute\"`). */\n  agentType?: string;\n  /** Human-readable name for this subagent. */\n  name?: string;\n  /** Current status. */\n  status?: SFAiSubagentStatus;\n  /** Current model ID being used (e.g. `\"claude-haiku-3.5\"`). */\n  modelId?: string;\n  /** Duration in milliseconds. */\n  duration?: number;\n  /** Custom icon. Defaults to `RobotIcon`. */\n  icon?: ElementType;\n  /** Whether the subagent content is expanded by default. */\n  defaultExpanded?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Called when open state changes. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Content rendered inside the collapsible body — typically streaming text,\n   * tool calls, and other nested agent output.\n   */\n  children?: ReactNode;\n};\n\n// ─── Status config ────────────────────────────────────────────────────────────\n\nconst STATUS_CONFIG: Record<\n  SFAiSubagentStatus,\n  {\n    icon: ElementType;\n    className: string;\n    label: string;\n  }\n> = {\n  running: {\n    icon: SpinnerGapIcon,\n    className: \"text-sf-brand animate-spin\",\n    label: \"Running\",\n  },\n  completed: {\n    icon: CheckCircleIcon,\n    className: \"text-sf-success\",\n    label: \"Completed\",\n  },\n  error: {\n    icon: XCircleIcon,\n    className: \"text-sf-danger\",\n    label: \"Error\",\n  },\n};\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\nfunction formatDuration(ms: number): string {\n  if (ms < 1000) return `${ms}ms`;\n  const s = Math.floor(ms / 1000);\n  if (s < 60) return `${s}s`;\n  const m = Math.floor(s / 60);\n  const remaining = s % 60;\n  return remaining > 0 ? `${m}m ${remaining}s` : `${m}m`;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Collapsible wrapper for nested subagent activity. Shows the subagent name,\n * status, model, and duration in a header, with all subagent output (text,\n * tool calls, etc.) in a collapsible body.\n *\n * Maps to harness events: `subagent_start`, `subagent_text_delta`,\n * `subagent_tool_start`, `subagent_tool_end`, `subagent_end`,\n * `subagent_model_changed`.\n *\n * @example\n * ```tsx\n * <AiSubagent\n *   name=\"Explore\"\n *   agentType=\"explore\"\n *   status=\"running\"\n *   modelId=\"claude-haiku-3.5\"\n *   defaultExpanded\n * >\n *   <AiResponse isAnimating>{streamingText}</AiResponse>\n *   <AiToolCallGroup tools={toolCalls} />\n * </AiSubagent>\n * ```\n */\nexport function AiSubagent({\n  agentType,\n  name,\n  status = \"running\",\n  modelId,\n  duration,\n  icon,\n  defaultExpanded = true,\n  open: controlledOpen,\n  onOpenChange,\n  children,\n  className,\n  ...props\n}: AiSubagentProps) {\n  const [internalOpen, setInternalOpen] = useState(defaultExpanded);\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  const handleOpenChange = (nextOpen: boolean) => {\n    if (!isControlled) setInternalOpen(nextOpen);\n    onOpenChange?.(nextOpen);\n  };\n\n  const IconComponent = icon ?? RobotIcon;\n  const statusConfig = STATUS_CONFIG[status];\n  const StatusIcon = statusConfig.icon;\n  const displayName = name ?? agentType ?? \"Subagent\";\n\n  return (\n    <BaseCollapsible.Root\n      defaultOpen={defaultExpanded}\n      onOpenChange={handleOpenChange}\n      open={isOpen}\n    >\n      <div\n        className={cn(\"flex flex-col overflow-hidden rounded-lg\", className)}\n        {...props}\n      >\n        {/* Header / trigger */}\n        <BaseCollapsible.Trigger className=\"flex w-fit items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-sf-tint\">\n          {/* Agent icon */}\n          <div className=\"flex size-5 shrink-0 items-center justify-center rounded bg-sf-tint text-sf-subtle\">\n            <IconComponent className=\"size-3.5\" />\n          </div>\n\n          {/* Name + model */}\n          <div className=\"flex min-w-0 grow items-center gap-2\">\n            <span className=\"text-sm font-medium text-sf-default\">\n              {displayName}\n            </span>\n            {modelId && (\n              <span className=\"truncate rounded bg-sf-tint px-1.5 py-0.5 font-mono text-[10px] text-sf-subtle\">\n                {modelId}\n              </span>\n            )}\n          </div>\n\n          {/* Status + duration + caret */}\n          <div className=\"flex shrink-0 items-center gap-2\">\n            {duration !== undefined && (\n              <span className=\"text-xs tabular-nums text-sf-subtle\">\n                {formatDuration(duration)}\n              </span>\n            )}\n            <StatusIcon className={cn(\"size-3.5\", statusConfig.className)} />\n            <CaretDownIcon\n              className={cn(\n                \"size-3 text-sf-subtle transition-transform duration-200\",\n                isOpen && \"rotate-180\"\n              )}\n            />\n          </div>\n        </BaseCollapsible.Trigger>\n\n        {/* Collapsible content */}\n        <BaseCollapsible.Panel className=\"overflow-hidden [&[data-ending-style]]:h-0 [&[data-starting-style]]:h-0\">\n          <div className=\"flex flex-col gap-2 bg-sf-tint/50 px-3 py-2.5\">\n            {children}\n          </div>\n        </BaseCollapsible.Panel>\n      </div>\n    </BaseCollapsible.Root>\n  );\n}\n\nAiSubagent.displayName = \"AiSubagent\";\n"],"mappings":";;;;;;;AAiBA,IAAa,0BAA0B,EACrC,QAAQ;CACN,SAAS;EAAE,SAAS;EAAI,aAAa;EAAmC;CACxE,WAAW;EAAE,SAAS;EAAI,aAAa;EAAkC;CACzE,OAAO;EAAE,SAAS;EAAI,aAAa;EAAiC;CACrE,EACF;AAED,IAAa,kCAAkC,EAC7C,QAAQ,WACT;AAkCD,IAAM,gBAOF;CACF,SAAS;EACP,MAAM;EACN,WAAW;EACX,OAAO;EACR;CACD,WAAW;EACT,MAAM;EACN,WAAW;EACX,OAAO;EACR;CACD,OAAO;EACL,MAAM;EACN,WAAW;EACX,OAAO;EACR;CACF;AAID,SAAS,eAAe,IAAoB;AAC1C,KAAI,KAAK,IAAM,QAAO,GAAG,GAAG;CAC5B,MAAM,IAAI,KAAK,MAAM,KAAK,IAAK;AAC/B,KAAI,IAAI,GAAI,QAAO,GAAG,EAAE;CACxB,MAAM,IAAI,KAAK,MAAM,IAAI,GAAG;CAC5B,MAAM,YAAY,IAAI;AACtB,QAAO,YAAY,IAAI,GAAG,EAAE,IAAI,UAAU,KAAK,GAAG,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;AA4BtD,SAAgB,WAAW,EACzB,WACA,MACA,SAAS,WACT,SACA,UACA,MACA,kBAAkB,MAClB,MAAM,gBACN,cACA,UACA,WACA,GAAG,SACe;CAClB,MAAM,CAAC,cAAc,mBAAmB,SAAS,gBAAgB;CACjE,MAAM,eAAe,mBAAmB,KAAA;CACxC,MAAM,SAAS,eAAe,iBAAiB;CAE/C,MAAM,oBAAoB,aAAsB;AAC9C,MAAI,CAAC,aAAc,iBAAgB,SAAS;AAC5C,iBAAe,SAAS;;CAG1B,MAAM,gBAAgB,QAAQ;CAC9B,MAAM,eAAe,cAAc;CACnC,MAAM,aAAa,aAAa;CAChC,MAAM,cAAc,QAAQ,aAAa;AAEzC,QACE,oBAAC,YAAgB,MAAjB;EACE,aAAa;EACb,cAAc;EACd,MAAM;YAEN,qBAAC,OAAD;GACE,WAAW,GAAG,4CAA4C,UAAU;GACpE,GAAI;aAFN,CAKE,qBAAC,YAAgB,SAAjB;IAAyB,WAAU;cAAnC;KAEE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,eAAD,EAAe,WAAU,YAAa,CAAA;MAClC,CAAA;KAGN,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,QAAD;OAAM,WAAU;iBACb;OACI,CAAA,EACN,WACC,oBAAC,QAAD;OAAM,WAAU;iBACb;OACI,CAAA,CAEL;;KAGN,qBAAC,OAAD;MAAK,WAAU;gBAAf;OACG,aAAa,KAAA,KACZ,oBAAC,QAAD;QAAM,WAAU;kBACb,eAAe,SAAS;QACpB,CAAA;OAET,oBAAC,YAAD,EAAY,WAAW,GAAG,YAAY,aAAa,UAAU,EAAI,CAAA;OACjE,oBAAC,eAAD,EACE,WAAW,GACT,2DACA,UAAU,aACX,EACD,CAAA;OACE;;KACkB;OAG1B,oBAAC,YAAgB,OAAjB;IAAuB,WAAU;cAC/B,oBAAC,OAAD;KAAK,WAAU;KACZ;KACG,CAAA;IACgB,CAAA,CACpB;;EACe,CAAA;;AAI3B,WAAW,cAAc"}

package/dist/ai-suggestion-CNsCZj5P.js

@@ -0,0 +1,55 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Button } from "./button-De0267YU.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ai-suggestion/ai-suggestion.tsx
+var SF_AI_SUGGESTION_VARIANTS = {};
+var SF_AI_SUGGESTION_DEFAULT_VARIANTS = {};
+/**
+* Horizontally scrollable container for suggestion pills.
+* Position it relative to your prompt input (e.g. `bottom-full`).
+*
+* @example
+* ```tsx
+* <div className="relative">
+*   <AiSuggestions>
+*     <AiSuggestion suggestion="Summarize this" onClick={handleSuggestion} />
+*     <AiSuggestion suggestion="Explain in simple terms" onClick={handleSuggestion} />
+*   </AiSuggestions>
+*   <AiPromptInput ... />
+* </div>
+* ```
+*/
+function AiSuggestions({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex w-full flex-nowrap items-center gap-2 overflow-x-auto px-3 py-2", "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden", className),
+		...props,
+		children
+	});
+}
+/**
+* A single suggestion pill button.
+*
+* @example
+* ```tsx
+* <AiSuggestion
+*   suggestion="What can you help me with?"
+*   onClick={(s) => setInput(s)}
+* />
+* ```
+*/
+function AiSuggestion({ suggestion, onClick, className, variant = "secondary", size = "sm", children, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		className: cn("shrink-0 rounded-full px-4", className),
+		onClick: () => onClick?.(suggestion),
+		size,
+		type: "button",
+		variant,
+		...props,
+		children: children ?? suggestion
+	});
+}
+//#endregion
+export { SF_AI_SUGGESTION_VARIANTS as i, AiSuggestions as n, SF_AI_SUGGESTION_DEFAULT_VARIANTS as r, AiSuggestion as t };
+
+//# sourceMappingURL=ai-suggestion-CNsCZj5P.js.map

package/dist/ai-suggestion-CNsCZj5P.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-suggestion-CNsCZj5P.js","names":[],"sources":["../src/components/ai-suggestion/ai-suggestion.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../button\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_SUGGESTION_VARIANTS = {} as const;\nexport const SF_AI_SUGGESTION_DEFAULT_VARIANTS = {} as const;\n\n// ─── AiSuggestions ───────────────────────────────────────────────────────────\n\nexport type AiSuggestionsProps = ComponentProps<\"div\">;\n\n/**\n * Horizontally scrollable container for suggestion pills.\n * Position it relative to your prompt input (e.g. `bottom-full`).\n *\n * @example\n * ```tsx\n * <div className=\"relative\">\n *   <AiSuggestions>\n *     <AiSuggestion suggestion=\"Summarize this\" onClick={handleSuggestion} />\n *     <AiSuggestion suggestion=\"Explain in simple terms\" onClick={handleSuggestion} />\n *   </AiSuggestions>\n *   <AiPromptInput ... />\n * </div>\n * ```\n */\nexport function AiSuggestions({\n  className,\n  children,\n  ...props\n}: AiSuggestionsProps) {\n  return (\n    <div\n      className={cn(\n        \"flex w-full flex-nowrap items-center gap-2 overflow-x-auto px-3 py-2\",\n        // hide scrollbar cross-browser\n        \"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ─── AiSuggestion ────────────────────────────────────────────────────────────\n\nexport type AiSuggestionProps = Omit<\n  ComponentProps<typeof Button>,\n  \"onClick\" | \"shape\"\n> & {\n  /** The suggestion text — used as button label if no children provided. */\n  suggestion: string;\n  /** Called with the suggestion string when clicked. */\n  onClick?: (suggestion: string) => void;\n};\n\n/**\n * A single suggestion pill button.\n *\n * @example\n * ```tsx\n * <AiSuggestion\n *   suggestion=\"What can you help me with?\"\n *   onClick={(s) => setInput(s)}\n * />\n * ```\n */\nexport function AiSuggestion({\n  suggestion,\n  onClick,\n  className,\n  variant = \"secondary\",\n  size = \"sm\",\n  children,\n  ...props\n}: AiSuggestionProps) {\n  return (\n    <Button\n      className={cn(\"shrink-0 rounded-full px-4\", className)}\n      onClick={() => onClick?.(suggestion)}\n      size={size}\n      type=\"button\"\n      variant={variant}\n      {...props}\n    >\n      {children ?? suggestion}\n    </Button>\n  );\n}\n"],"mappings":";;;;;AASA,IAAa,4BAA4B,EAAE;AAC3C,IAAa,oCAAoC,EAAE;;;;;;;;;;;;;;;;AAqBnD,SAAgB,cAAc,EAC5B,WACA,UACA,GAAG,SACkB;AACrB,QACE,oBAAC,OAAD;EACE,WAAW,GACT,wEAEA,wDACA,UACD;EACD,GAAI;EAEH;EACG,CAAA;;;;;;;;;;;;;AA2BV,SAAgB,aAAa,EAC3B,YACA,SACA,WACA,UAAU,aACV,OAAO,MACP,UACA,GAAG,SACiB;AACpB,QACE,oBAAC,QAAD;EACE,WAAW,GAAG,8BAA8B,UAAU;EACtD,eAAe,UAAU,WAAW;EAC9B;EACN,MAAK;EACI;EACT,GAAI;YAEH,YAAY;EACN,CAAA"}