@signalflare-ai/ui 0.5.0

package/dist/ai-tool-BGH8nQ_D.js

@@ -0,0 +1,437 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Tooltip } from "./tooltip-Cb7QW-7H.js";
+import { t as Button } from "./button-De0267YU.js";
+import { t as AiStatusBadge } from "./ai-status-badge-WhbKVeqn.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { BrainIcon, CaretDownIcon, ChatCircleIcon, CheckIcon, CircleIcon, CodeIcon, DatabaseIcon, FileTextIcon, GearIcon, GlobeIcon, ImageIcon, LightningIcon, MagnifyingGlassIcon, ShieldWarningIcon, SpinnerGapIcon, TerminalIcon, WarningCircleIcon, XCircleIcon } from "@phosphor-icons/react";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/components/ai-tool/ai-tool.tsx
+var SF_AI_TOOL_VARIANTS = { variant: {
+	default: {
+		classes: "",
+		description: "Expandable card with collapsible input/output sections"
+	},
+	inline: {
+		classes: "",
+		description: "Compact single-line display with left accent border"
+	},
+	minimal: {
+		classes: "",
+		description: "Pill-shaped status badge"
+	}
+} };
+var SF_AI_TOOL_DEFAULT_VARIANTS = { variant: "default" };
+var TOOL_ICONS = {
+	generateSuggestions: BrainIcon,
+	searchDatabase: DatabaseIcon,
+	searchWeb: GlobeIcon,
+	search: MagnifyingGlassIcon,
+	readFile: FileTextIcon,
+	writeFile: FileTextIcon,
+	executeQuery: LightningIcon,
+	analyzeContent: BrainIcon,
+	generateImage: ImageIcon,
+	chat: ChatCircleIcon,
+	runCode: TerminalIcon,
+	settings: GearIcon,
+	code: CodeIcon
+};
+/** Extract the display-friendly tool name from a tool part. */
+function getToolDisplayName(part) {
+	return part.toolName.replace("tool-", "").replace("Tool", "").replace(/([A-Z])/g, " $1").replace(/_/g, " ").replace(/^./, (s) => s.toUpperCase()).trim();
+}
+/** Get the best-matching icon for a tool part. */
+function getToolIcon(part) {
+	if (TOOL_ICONS[part.toolName]) return TOOL_ICONS[part.toolName];
+	const lower = part.toolName.toLowerCase();
+	for (const [key, icon] of Object.entries(TOOL_ICONS)) if (lower.includes(key.toLowerCase())) return icon;
+	return MagnifyingGlassIcon;
+}
+/** Whether the tool is still loading (input phase). */
+function isToolLoading(part) {
+	return part.state === "input-streaming" || part.state === "input-available";
+}
+/** Whether the tool has produced a result. */
+function hasToolResult(part) {
+	return part.state === "output-available";
+}
+/** Whether the output itself contains an error flag. */
+function hasToolOutputError(part) {
+	if (part.state !== "output-available") return false;
+	return part.output?.error === true;
+}
+/** Whether the tool is in any error state. */
+function hasToolError(part) {
+	return part.state === "output-error" || hasToolOutputError(part);
+}
+/** Extract error text from either error state or output.error. */
+function getToolErrorText(part) {
+	if (part.state === "output-error") return part.errorText;
+	if (hasToolOutputError(part)) {
+		const output = part.output;
+		return output.message || output.error || "Tool returned an error";
+	}
+}
+function getStateConfig(part, approvalState) {
+	if (approvalState === "awaiting") return {
+		colorClass: "text-sf-warning",
+		bgClass: "bg-sf-warning/10",
+		icon: ShieldWarningIcon,
+		spin: false,
+		label: "Awaiting Approval"
+	};
+	if (approvalState === "declined") return {
+		colorClass: "text-sf-danger",
+		bgClass: "bg-sf-danger/10",
+		icon: XCircleIcon,
+		spin: false,
+		label: "Declined"
+	};
+	if (hasToolError(part)) return {
+		colorClass: "text-sf-danger",
+		bgClass: "bg-sf-danger/10",
+		icon: WarningCircleIcon,
+		spin: false,
+		label: "Failed"
+	};
+	switch (part.state) {
+		case "input-streaming": return {
+			colorClass: "text-sf-brand",
+			bgClass: "bg-sf-brand/10",
+			icon: CircleIcon,
+			spin: false,
+			label: "Streaming"
+		};
+		case "input-available": return {
+			colorClass: "text-sf-brand",
+			bgClass: "bg-sf-brand/10",
+			icon: SpinnerGapIcon,
+			spin: true,
+			label: "Running"
+		};
+		case "output-available": return {
+			colorClass: "text-sf-success",
+			bgClass: "bg-sf-tint",
+			icon: CheckIcon,
+			spin: false,
+			label: "Complete"
+		};
+		default: return {
+			colorClass: "text-sf-subtle",
+			bgClass: "bg-sf-tint",
+			icon: CircleIcon,
+			spin: false,
+			label: "Pending"
+		};
+	}
+}
+/**
+* Renders a single tool call. Supports three display variants:
+* - `"default"` — expandable card with collapsible input/output
+* - `"inline"` — compact single-line with left accent border
+* - `"minimal"` — pill-shaped status badge
+*
+* @example
+* ```tsx
+* <AiToolCall
+*   part={{ toolCallId: "1", toolName: "web_search", state: "output-available", input: { q: "ts" }, output: "..." }}
+* />
+* ```
+*/
+function AiToolCall({ part, variant = "default", duration, summary, icon: CustomIcon, approvalState, onApprove, onReject, defaultExpanded = false, className, ...props }) {
+	const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+	const IconComponent = CustomIcon ?? getToolIcon(part);
+	const displayName = getToolDisplayName(part);
+	const config = getStateConfig(part, approvalState);
+	const StatusIconEl = config.icon;
+	const errorText = getToolErrorText(part);
+	if (variant === "minimal") {
+		const handleGetToolStatus = () => {
+			if (hasToolError(part)) return "error";
+			if (approvalState === "awaiting") return "idle";
+			if (isToolLoading(part)) return "running";
+			if (hasToolResult(part)) return "success";
+			return "idle";
+		};
+		return /* @__PURE__ */ jsx(AiStatusBadge, {
+			className: cn("my-1.5 py-1", hasToolError(part) && "bg-sf-danger/10", className),
+			icon: IconComponent,
+			label: displayName,
+			status: handleGetToolStatus(),
+			...props
+		});
+	}
+	if (variant === "inline") return /* @__PURE__ */ jsxs("div", {
+		className: cn("my-1 flex w-full items-center gap-2 py-1.5 pl-1", "animate-in fade-in-0 slide-in-from-bottom-1 duration-200", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: cn("shrink-0 rounded-md p-1", config.bgClass),
+				children: /* @__PURE__ */ jsx(IconComponent, { className: cn("size-3.5", config.colorClass) })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("min-w-0 grow truncate text-sm", hasToolError(part) ? "text-sf-danger" : "text-sf-subtle"),
+				children: displayName
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-1.5",
+				children: [
+					duration && hasToolResult(part) ? /* @__PURE__ */ jsxs("span", {
+						className: "text-xs tabular-nums text-sf-subtle",
+						children: [duration, "ms"]
+					}) : null,
+					summary && !hasToolError(part) ? /* @__PURE__ */ jsx("span", {
+						className: "max-w-[160px] truncate text-xs text-sf-subtle",
+						children: summary
+					}) : null,
+					errorText ? /* @__PURE__ */ jsx("span", {
+						className: "max-w-[160px] truncate text-xs text-sf-danger",
+						title: errorText,
+						children: errorText
+					}) : null,
+					approvalState === "awaiting" && (onApprove || onReject) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [onReject && /* @__PURE__ */ jsx(Button, {
+						onClick: onReject,
+						size: "sm",
+						type: "button",
+						variant: "ghost",
+						children: "Reject"
+					}), onApprove && /* @__PURE__ */ jsx(Button, {
+						onClick: onApprove,
+						size: "sm",
+						type: "button",
+						variant: "primary",
+						children: "Approve"
+					})] }) : /* @__PURE__ */ jsx(StatusIconEl, { className: cn("size-3.5", config.colorClass, config.spin && "animate-spin") })
+				]
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		open: isExpanded,
+		onOpenChange: setIsExpanded,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("my-0.5 flex w-full max-w-sm flex-col", "animate-in fade-in-0 duration-150", className),
+			...props,
+			children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
+				render: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cn("flex w-fit items-center gap-1.5 rounded px-1 py-0.5 text-left", "transition-colors hover:bg-sf-tint")
+				}),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate text-sm text-sf-subtle",
+					children: displayName
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-1.5",
+					children: [
+						duration && hasToolResult(part) && !isExpanded ? /* @__PURE__ */ jsxs("span", {
+							className: "text-xs tabular-nums text-sf-subtle",
+							children: [duration, "ms"]
+						}) : null,
+						summary && !isExpanded && !errorText ? /* @__PURE__ */ jsx("span", {
+							className: "max-w-[120px] truncate text-xs text-sf-subtle",
+							children: summary
+						}) : null,
+						/* @__PURE__ */ jsx(StatusIconEl, { className: cn("size-3.5", config.colorClass, config.spin && "animate-spin") }),
+						/* @__PURE__ */ jsx(CaretDownIcon, { className: cn("size-3 text-sf-subtle transition-transform duration-200", !isExpanded && "-rotate-90") })
+					]
+				})]
+			}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+				className: "overflow-hidden",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "mt-1 space-y-2 rounded-lg bg-sf-tint/50 px-3 py-2",
+					children: [
+						part.input && typeof part.input === "object" && Object.keys(part.input).length > 0 ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+							className: "mb-1 text-[10px] uppercase tracking-wider text-sf-subtle",
+							children: "Input"
+						}), /* @__PURE__ */ jsx("pre", {
+							className: "overflow-x-auto rounded bg-sf-recessed p-1.5 font-mono text-xs text-sf-subtle",
+							children: JSON.stringify(part.input, null, 2)
+						})] }) : null,
+						hasToolResult(part) && part.output !== void 0 && !hasToolError(part) ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+							className: "mb-1 text-[10px] uppercase tracking-wider text-sf-subtle",
+							children: "Output"
+						}), /* @__PURE__ */ jsx("pre", {
+							className: "max-h-28 overflow-x-auto overflow-y-auto rounded bg-sf-recessed p-1.5 font-mono text-xs text-sf-subtle",
+							children: typeof part.output === "string" ? part.output : JSON.stringify(part.output, null, 2)
+						})] }) : null,
+						errorText ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("p", {
+							className: "mb-1 flex items-center gap-1 text-[10px] uppercase tracking-wider text-sf-danger",
+							children: [/* @__PURE__ */ jsx(WarningCircleIcon, { className: "size-3" }), "Error"]
+						}), /* @__PURE__ */ jsx("pre", {
+							className: "overflow-x-auto whitespace-pre-wrap rounded bg-sf-danger/10 p-1.5 font-mono text-xs text-sf-danger",
+							children: errorText
+						})] }) : null,
+						approvalState === "awaiting" && (onApprove || onReject) && /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-end gap-2 border-t border-sf-line/20 pt-2",
+							children: [onReject && /* @__PURE__ */ jsx(Button, {
+								onClick: onReject,
+								size: "sm",
+								type: "button",
+								variant: "ghost",
+								children: "Reject"
+							}), onApprove && /* @__PURE__ */ jsx(Button, {
+								onClick: onApprove,
+								size: "sm",
+								type: "button",
+								variant: "primary",
+								children: "Approve"
+							})]
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "font-mono text-[10px] text-sf-subtle/50",
+							children: part.toolCallId
+						})
+					]
+				})
+			})]
+		})
+	});
+}
+/**
+* Collapsible group of tool calls. Shows a summary header with progress
+* counter and stacked tool icons when collapsed. Renders a single tool
+* directly if only one part is provided.
+*
+* @example
+* ```tsx
+* <AiToolCallGroup parts={toolParts} label="3 tools ran" />
+* ```
+*/
+function AiToolCallGroup({ parts, label, durations = {}, summaries = {}, approvalStates = {}, onApprove, onReject, defaultExpanded = false, className, ...props }) {
+	const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+	const completedCount = parts.filter((p) => p.state === "output-available").length;
+	const errorCount = parts.filter(hasToolError).length;
+	const totalCount = parts.length;
+	if (parts.length === 1 && parts[0]) {
+		const singlePart = parts[0];
+		const { part: _part, ...restProps } = props;
+		return /* @__PURE__ */ jsx(AiToolCall, {
+			part: singlePart,
+			duration: durations[singlePart.toolCallId],
+			summary: summaries[singlePart.toolCallId],
+			approvalState: approvalStates[singlePart.toolCallId],
+			onApprove: onApprove ? () => onApprove(singlePart.toolCallId) : void 0,
+			onReject: onReject ? () => onReject(singlePart.toolCallId) : void 0,
+			className,
+			...restProps
+		});
+	}
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		open: isExpanded,
+		onOpenChange: setIsExpanded,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("my-1.5 w-full overflow-hidden rounded-lg bg-sf-tint/50", "animate-in fade-in-0 slide-in-from-bottom-2 duration-200", className),
+			...props,
+			children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
+				render: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "flex w-fit items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-sf-tint"
+				}),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-sm font-medium text-sf-subtle",
+						children: label ?? `${totalCount} tool calls`
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-xs text-sf-subtle",
+						children: [
+							completedCount,
+							"/",
+							totalCount,
+							errorCount > 0 ? /* @__PURE__ */ jsxs("span", {
+								className: "ml-1 text-sf-danger",
+								children: [
+									"(",
+									errorCount,
+									" errors)"
+								]
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [!isExpanded ? /* @__PURE__ */ jsxs("div", {
+							className: "flex -space-x-1",
+							children: [parts.slice(0, 5).map((p) => {
+								const Icon = getToolIcon(p);
+								return /* @__PURE__ */ jsx("div", {
+									className: cn("flex size-6 items-center justify-center rounded-full border-2 border-sf-elevated", p.state === "output-available" && !hasToolError(p) && "bg-sf-tint", isToolLoading(p) && "bg-sf-tint", hasToolError(p) && "bg-sf-danger/20"),
+									children: /* @__PURE__ */ jsx(Icon, { className: "size-3" })
+								}, p.toolCallId);
+							}), parts.length > 5 ? /* @__PURE__ */ jsxs("div", {
+								className: "flex size-6 items-center justify-center rounded-full border-2 border-sf-elevated bg-sf-tint text-[10px] text-sf-subtle",
+								children: ["+", parts.length - 5]
+							}) : null]
+						}) : null, /* @__PURE__ */ jsx(CaretDownIcon, { className: cn("size-4 text-sf-subtle transition-transform duration-200", !isExpanded && "-rotate-90") })]
+					})
+				]
+			}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+				className: "overflow-hidden",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "space-y-2 border-t border-sf-line/20 px-3 pt-1 pb-3",
+					children: parts.map((p) => /* @__PURE__ */ jsx(AiToolCall, {
+						part: p,
+						variant: "inline",
+						duration: durations[p.toolCallId],
+						summary: summaries[p.toolCallId],
+						approvalState: approvalStates[p.toolCallId],
+						onApprove: onApprove ? () => onApprove(p.toolCallId) : void 0,
+						onReject: onReject ? () => onReject(p.toolCallId) : void 0
+					}, p.toolCallId))
+				})
+			})]
+		})
+	});
+}
+/**
+* Horizontal timeline view of tool calls. Each tool is shown as a small
+* icon pill with a tooltip showing its name, duration, and any errors.
+*
+* @example
+* ```tsx
+* <AiToolCallTimeline parts={toolParts} durations={{ id1: 230, id2: 540 }} />
+* ```
+*/
+function AiToolCallTimeline({ parts, durations = {}, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-wrap items-center gap-1 py-2", className),
+		...props,
+		children: parts.map((part, index) => {
+			const IconComponent = getToolIcon(part);
+			const displayName = getToolDisplayName(part);
+			const config = getStateConfig(part);
+			const duration = durations[part.toolCallId];
+			const errorText = getToolErrorText(part);
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ jsx(Tooltip, {
+					content: [
+						displayName,
+						duration ? `${duration}ms` : null,
+						errorText ?? null
+					].filter(Boolean).join(" · "),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: cn("flex cursor-default items-center gap-1.5 rounded-md px-2 py-1 transition-all", config.bgClass),
+						children: [
+							/* @__PURE__ */ jsx(IconComponent, { className: cn("size-3.5", config.colorClass) }),
+							part.state === "input-streaming" ? /* @__PURE__ */ jsx(CircleIcon, { className: cn("size-3 animate-pulse", config.colorClass) }) : null,
+							part.state === "input-available" ? /* @__PURE__ */ jsx(SpinnerGapIcon, { className: cn("size-3 animate-spin", config.colorClass) }) : null,
+							hasToolResult(part) && !hasToolError(part) ? /* @__PURE__ */ jsx(CheckIcon, { className: cn("size-3", config.colorClass) }) : null,
+							hasToolError(part) ? /* @__PURE__ */ jsx(WarningCircleIcon, { className: cn("size-3", config.colorClass) }) : null
+						]
+					})
+				}), index < parts.length - 1 ? /* @__PURE__ */ jsx("div", { className: cn("mx-0.5 h-px w-3", (() => {
+					const nextPart = parts[index + 1];
+					if (!nextPart) return "bg-sf-line";
+					return hasToolResult(nextPart) || isToolLoading(nextPart) ? "bg-sf-success/50" : "bg-sf-line";
+				})()) }) : null]
+			}, part.toolCallId);
+		})
+	});
+}
+//#endregion
+export { SF_AI_TOOL_VARIANTS as a, getToolIcon as c, hasToolResult as d, isToolLoading as f, SF_AI_TOOL_DEFAULT_VARIANTS as i, hasToolError as l, AiToolCallGroup as n, getToolDisplayName as o, AiToolCallTimeline as r, getToolErrorText as s, AiToolCall as t, hasToolOutputError as u };
+
+//# sourceMappingURL=ai-tool-BGH8nQ_D.js.map

package/dist/ai-tool-BGH8nQ_D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-tool-BGH8nQ_D.js","names":[],"sources":["../src/components/ai-tool/ai-tool.tsx"],"sourcesContent":["\"use client\";\n\nimport { Collapsible as BaseCollapsible } from \"@base-ui/react/collapsible\";\nimport {\n  CaretDownIcon,\n  CheckIcon,\n  CircleIcon,\n  CodeIcon,\n  DatabaseIcon,\n  FileTextIcon,\n  GearIcon,\n  GlobeIcon,\n  ImageIcon,\n  LightningIcon,\n  MagnifyingGlassIcon,\n  ChatCircleIcon,\n  SpinnerGapIcon,\n  TerminalIcon,\n  WarningCircleIcon,\n  XCircleIcon,\n  ShieldWarningIcon,\n  BrainIcon,\n} from \"@phosphor-icons/react\";\nimport type { ComponentProps, ElementType } from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { AiStatusBadge, type AiStatusBadgeStatus } from \"../ai-status-badge\";\nimport { Button } from \"../button\";\nimport { Tooltip } from \"../tooltip\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_TOOL_VARIANTS = {\n  variant: {\n    default: {\n      classes: \"\",\n      description: \"Expandable card with collapsible input/output sections\",\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_TOOL_DEFAULT_VARIANTS = {\n  variant: \"default\",\n} as const;\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\n/** Tool execution state — matches Vercel AI SDK ToolUIPart[\"state\"]. */\nexport type AiToolState =\n  | \"input-streaming\"\n  | \"input-available\"\n  | \"approval-requested\"\n  | \"approval-responded\"\n  | \"output-available\"\n  | \"output-error\"\n  | \"output-denied\";\n\n/** Display variant for tool call rendering. */\nexport type AiToolCallVariant = keyof typeof SF_AI_TOOL_VARIANTS.variant;\n\n/** Approval state for tools requiring user confirmation. */\nexport type AiToolApprovalState =\n  | \"awaiting\"\n  | \"approved\"\n  | \"declined\"\n  | undefined;\n\n/**\n * Structured tool part — mirrors the shape of Vercel AI SDK's `ToolUIPart`\n * without requiring the `ai` package as a dependency.\n */\nexport interface AiToolPart {\n  /** Tool call identifier. */\n  toolCallId: string;\n  /** Tool name or type identifier. */\n  toolName: string;\n  /** Current execution state. */\n  state: AiToolState;\n  /** Tool input parameters. */\n  input?: unknown;\n  /** Tool output result. */\n  output?: unknown;\n  /** Error text when state is \"output-error\". */\n  errorText?: string;\n}\n\nexport type AiToolCallProps = Omit<ComponentProps<\"div\">, \"part\"> & {\n  /** Structured tool part data. */\n  part: AiToolPart;\n  /** Display variant. @default \"default\" */\n  variant?: AiToolCallVariant;\n  /** Duration in milliseconds. */\n  duration?: number;\n  /** Summary text shown alongside the tool name. */\n  summary?: string;\n  /** Custom icon override. */\n  icon?: ElementType;\n  /** Approval state for tools requiring confirmation. */\n  approvalState?: AiToolApprovalState;\n  /** Called when user approves a tool call (only relevant when `approvalState=\"awaiting\"`). */\n  onApprove?: () => void;\n  /** Called when user rejects a tool call (only relevant when `approvalState=\"awaiting\"`). */\n  onReject?: () => void;\n  /** Default expanded state for the collapsible. @default false */\n  defaultExpanded?: boolean;\n};\n\nexport type AiToolCallGroupProps = Omit<ComponentProps<\"div\">, \"part\"> & {\n  /** Array of tool parts. */\n  parts: AiToolPart[];\n  /** Group label. */\n  label?: string;\n  /** Duration map keyed by toolCallId. */\n  durations?: Record<string, number>;\n  /** Summary map keyed by toolCallId. */\n  summaries?: Record<string, string>;\n  /** Approval states map keyed by toolCallId. */\n  approvalStates?: Record<string, AiToolApprovalState>;\n  /** Called when user approves a tool call. Receives the `toolCallId`. */\n  onApprove?: (toolCallId: string) => void;\n  /** Called when user rejects a tool call. Receives the `toolCallId`. */\n  onReject?: (toolCallId: string) => void;\n  /** Default expanded state. @default false */\n  defaultExpanded?: boolean;\n};\n\nexport type AiToolCallTimelineProps = ComponentProps<\"div\"> & {\n  /** Array of tool parts. */\n  parts: AiToolPart[];\n  /** Duration map keyed by toolCallId. */\n  durations?: Record<string, number>;\n};\n\n// ─── Icon Map ────────────────────────────────────────────────────────────────\n\nconst TOOL_ICONS: Record<string, ElementType> = {\n  generateSuggestions: BrainIcon,\n  searchDatabase: DatabaseIcon,\n  searchWeb: GlobeIcon,\n  search: MagnifyingGlassIcon,\n  readFile: FileTextIcon,\n  writeFile: FileTextIcon,\n  executeQuery: LightningIcon,\n  analyzeContent: BrainIcon,\n  generateImage: ImageIcon,\n  chat: ChatCircleIcon,\n  runCode: TerminalIcon,\n  settings: GearIcon,\n  code: CodeIcon,\n};\n\n// ─── Utilities ───────────────────────────────────────────────────────────────\n\n/** Extract the display-friendly tool name from a tool part. */\nexport function getToolDisplayName(part: AiToolPart): string {\n  return part.toolName\n    .replace(\"tool-\", \"\")\n    .replace(\"Tool\", \"\")\n    .replace(/([A-Z])/g, \" $1\")\n    .replace(/_/g, \" \")\n    .replace(/^./, (s) => s.toUpperCase())\n    .trim();\n}\n\n/** Get the best-matching icon for a tool part. */\nexport function getToolIcon(part: AiToolPart): ElementType {\n  if (TOOL_ICONS[part.toolName]) return TOOL_ICONS[part.toolName];\n\n  const lower = part.toolName.toLowerCase();\n  for (const [key, icon] of Object.entries(TOOL_ICONS)) {\n    if (lower.includes(key.toLowerCase())) return icon;\n  }\n\n  return MagnifyingGlassIcon;\n}\n\n/** Whether the tool is still loading (input phase). */\nexport function isToolLoading(part: AiToolPart): boolean {\n  return part.state === \"input-streaming\" || part.state === \"input-available\";\n}\n\n/** Whether the tool has produced a result. */\nexport function hasToolResult(part: AiToolPart): boolean {\n  return part.state === \"output-available\";\n}\n\n/** Whether the output itself contains an error flag. */\nexport function hasToolOutputError(part: AiToolPart): boolean {\n  if (part.state !== \"output-available\") return false;\n  const output = part.output as Record<string, unknown> | undefined;\n  return output?.error === true;\n}\n\n/** Whether the tool is in any error state. */\nexport function hasToolError(part: AiToolPart): boolean {\n  return part.state === \"output-error\" || hasToolOutputError(part);\n}\n\n/** Extract error text from either error state or output.error. */\nexport function getToolErrorText(part: AiToolPart): string | undefined {\n  if (part.state === \"output-error\") return part.errorText;\n  if (hasToolOutputError(part)) {\n    const output = part.output as Record<string, unknown>;\n    return (\n      (output.message as string) ||\n      (output.error as string) ||\n      \"Tool returned an error\"\n    );\n  }\n  return undefined;\n}\n\n// ─── State Config ────────────────────────────────────────────────────────────\n\ninterface StateConfig {\n  colorClass: string;\n  bgClass: string;\n  icon: ElementType;\n  spin: boolean;\n  label: string;\n}\n\nfunction getStateConfig(\n  part: AiToolPart,\n  approvalState?: AiToolApprovalState\n): StateConfig {\n  if (approvalState === \"awaiting\") {\n    return {\n      colorClass: \"text-sf-warning\",\n      bgClass: \"bg-sf-warning/10\",\n      icon: ShieldWarningIcon,\n      spin: false,\n      label: \"Awaiting Approval\",\n    };\n  }\n\n  if (approvalState === \"declined\") {\n    return {\n      colorClass: \"text-sf-danger\",\n      bgClass: \"bg-sf-danger/10\",\n      icon: XCircleIcon,\n      spin: false,\n      label: \"Declined\",\n    };\n  }\n\n  if (hasToolError(part)) {\n    return {\n      colorClass: \"text-sf-danger\",\n      bgClass: \"bg-sf-danger/10\",\n      icon: WarningCircleIcon,\n      spin: false,\n      label: \"Failed\",\n    };\n  }\n\n  switch (part.state) {\n    case \"input-streaming\":\n      return {\n        colorClass: \"text-sf-brand\",\n        bgClass: \"bg-sf-brand/10\",\n        icon: CircleIcon,\n        spin: false,\n        label: \"Streaming\",\n      };\n    case \"input-available\":\n      return {\n        colorClass: \"text-sf-brand\",\n        bgClass: \"bg-sf-brand/10\",\n        icon: SpinnerGapIcon,\n        spin: true,\n        label: \"Running\",\n      };\n    case \"output-available\":\n      return {\n        colorClass: \"text-sf-success\",\n        bgClass: \"bg-sf-tint\",\n        icon: CheckIcon,\n        spin: false,\n        label: \"Complete\",\n      };\n    default:\n      return {\n        colorClass: \"text-sf-subtle\",\n        bgClass: \"bg-sf-tint\",\n        icon: CircleIcon,\n        spin: false,\n        label: \"Pending\",\n      };\n  }\n}\n\n// ─── AiToolCall ──────────────────────────────────────────────────────────────\n\n/**\n * Renders a single tool call. Supports three display variants:\n * - `\"default\"` — expandable card with collapsible input/output\n * - `\"inline\"` — compact single-line with left accent border\n * - `\"minimal\"` — pill-shaped status badge\n *\n * @example\n * ```tsx\n * <AiToolCall\n *   part={{ toolCallId: \"1\", toolName: \"web_search\", state: \"output-available\", input: { q: \"ts\" }, output: \"...\" }}\n * />\n * ```\n */\nexport function AiToolCall({\n  part,\n  variant = \"default\",\n  duration,\n  summary,\n  icon: CustomIcon,\n  approvalState,\n  onApprove,\n  onReject,\n  defaultExpanded = false,\n  className,\n  ...props\n}: AiToolCallProps) {\n  const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n\n  const IconComponent = CustomIcon ?? getToolIcon(part);\n  const displayName = getToolDisplayName(part);\n  const config = getStateConfig(part, approvalState);\n  const StatusIconEl = config.icon;\n  const errorText = getToolErrorText(part);\n\n  // ── Minimal ────────────────────────────────────────────────────────────────\n\n  if (variant === \"minimal\") {\n    const handleGetToolStatus = (): AiStatusBadgeStatus => {\n      if (hasToolError(part)) return \"error\";\n      if (approvalState === \"awaiting\") return \"idle\";\n      if (isToolLoading(part)) return \"running\";\n      if (hasToolResult(part)) return \"success\";\n      return \"idle\";\n    };\n\n    return (\n      <AiStatusBadge\n        className={cn(\n          \"my-1.5 py-1\",\n          hasToolError(part) && \"bg-sf-danger/10\",\n          className\n        )}\n        icon={IconComponent}\n        label={displayName}\n        status={handleGetToolStatus()}\n        {...props}\n      />\n    );\n  }\n\n  // ── Inline ─────────────────────────────────────────────────────────────────\n\n  if (variant === \"inline\") {\n    return (\n      <div\n        className={cn(\n          \"my-1 flex w-full items-center gap-2 py-1.5 pl-1\",\n          \"animate-in fade-in-0 slide-in-from-bottom-1 duration-200\",\n          className\n        )}\n        {...props}\n      >\n        <div className={cn(\"shrink-0 rounded-md p-1\", config.bgClass)}>\n          <IconComponent className={cn(\"size-3.5\", config.colorClass)} />\n        </div>\n        <span\n          className={cn(\n            \"min-w-0 grow truncate text-sm\",\n            hasToolError(part) ? \"text-sf-danger\" : \"text-sf-subtle\"\n          )}\n        >\n          {displayName}\n        </span>\n        {/* Right-aligned meta group */}\n        <div className=\"flex shrink-0 items-center gap-1.5\">\n          {duration && hasToolResult(part) ? (\n            <span className=\"text-xs tabular-nums text-sf-subtle\">\n              {duration}ms\n            </span>\n          ) : null}\n          {summary && !hasToolError(part) ? (\n            <span className=\"max-w-[160px] truncate text-xs text-sf-subtle\">\n              {summary}\n            </span>\n          ) : null}\n          {errorText ? (\n            <span\n              className=\"max-w-[160px] truncate text-xs text-sf-danger\"\n              title={errorText}\n            >\n              {errorText}\n            </span>\n          ) : null}\n          {approvalState === \"awaiting\" && (onApprove || onReject) ? (\n            <>\n              {onReject && (\n                <Button\n                  onClick={onReject}\n                  size=\"sm\"\n                  type=\"button\"\n                  variant=\"ghost\"\n                >\n                  Reject\n                </Button>\n              )}\n              {onApprove && (\n                <Button\n                  onClick={onApprove}\n                  size=\"sm\"\n                  type=\"button\"\n                  variant=\"primary\"\n                >\n                  Approve\n                </Button>\n              )}\n            </>\n          ) : (\n            <StatusIconEl\n              className={cn(\n                \"size-3.5\",\n                config.colorClass,\n                config.spin && \"animate-spin\"\n              )}\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  // ── Default (compact expandable row) ─────────────────────────────────────\n\n  return (\n    <BaseCollapsible.Root open={isExpanded} onOpenChange={setIsExpanded}>\n      <div\n        className={cn(\n          \"my-0.5 flex w-full max-w-sm flex-col\",\n          \"animate-in fade-in-0 duration-150\",\n          className\n        )}\n        {...props}\n      >\n        {/* Trigger — content-width: name + meta + caret */}\n        <BaseCollapsible.Trigger\n          render={\n            <button\n              type=\"button\"\n              className={cn(\n                \"flex w-fit items-center gap-1.5 rounded px-1 py-0.5 text-left\",\n                \"transition-colors hover:bg-sf-tint\"\n              )}\n            />\n          }\n        >\n          <span className=\"min-w-0 truncate text-sm text-sf-subtle\">\n            {displayName}\n          </span>\n          {/* Meta group — part of the content-width trigger */}\n          <div className=\"flex shrink-0 items-center gap-1.5\">\n            {duration && hasToolResult(part) && !isExpanded ? (\n              <span className=\"text-xs tabular-nums text-sf-subtle\">\n                {duration}ms\n              </span>\n            ) : null}\n            {summary && !isExpanded && !errorText ? (\n              <span className=\"max-w-[120px] truncate text-xs text-sf-subtle\">\n                {summary}\n              </span>\n            ) : null}\n            <StatusIconEl\n              className={cn(\n                \"size-3.5\",\n                config.colorClass,\n                config.spin && \"animate-spin\"\n              )}\n            />\n            <CaretDownIcon\n              className={cn(\n                \"size-3 text-sf-subtle transition-transform duration-200\",\n                !isExpanded && \"-rotate-90\"\n              )}\n            />\n          </div>\n        </BaseCollapsible.Trigger>\n\n        {/* Detail panel */}\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            {/* Input */}\n            {part.input &&\n            typeof part.input === \"object\" &&\n            Object.keys(part.input as object).length > 0 ? (\n              <div>\n                <p className=\"mb-1 text-[10px] uppercase tracking-wider text-sf-subtle\">\n                  Input\n                </p>\n                <pre className=\"overflow-x-auto rounded bg-sf-recessed p-1.5 font-mono text-xs text-sf-subtle\">\n                  {JSON.stringify(\n                    part.input as Record<string, unknown>,\n                    null,\n                    2\n                  )}\n                </pre>\n              </div>\n            ) : null}\n\n            {/* Output */}\n            {hasToolResult(part) &&\n            part.output !== undefined &&\n            !hasToolError(part) ? (\n              <div>\n                <p className=\"mb-1 text-[10px] uppercase tracking-wider text-sf-subtle\">\n                  Output\n                </p>\n                <pre className=\"max-h-28 overflow-x-auto overflow-y-auto rounded bg-sf-recessed p-1.5 font-mono text-xs text-sf-subtle\">\n                  {typeof part.output === \"string\"\n                    ? part.output\n                    : JSON.stringify(\n                        part.output as Record<string, unknown>,\n                        null,\n                        2\n                      )}\n                </pre>\n              </div>\n            ) : null}\n\n            {/* Error */}\n            {errorText ? (\n              <div>\n                <p className=\"mb-1 flex items-center gap-1 text-[10px] uppercase tracking-wider text-sf-danger\">\n                  <WarningCircleIcon className=\"size-3\" />\n                  Error\n                </p>\n                <pre className=\"overflow-x-auto whitespace-pre-wrap rounded bg-sf-danger/10 p-1.5 font-mono text-xs text-sf-danger\">\n                  {errorText}\n                </pre>\n              </div>\n            ) : null}\n\n            {/* Approval actions */}\n            {approvalState === \"awaiting\" && (onApprove || onReject) && (\n              <div className=\"flex items-center justify-end gap-2 border-t border-sf-line/20 pt-2\">\n                {onReject && (\n                  <Button\n                    onClick={onReject}\n                    size=\"sm\"\n                    type=\"button\"\n                    variant=\"ghost\"\n                  >\n                    Reject\n                  </Button>\n                )}\n                {onApprove && (\n                  <Button\n                    onClick={onApprove}\n                    size=\"sm\"\n                    type=\"button\"\n                    variant=\"primary\"\n                  >\n                    Approve\n                  </Button>\n                )}\n              </div>\n            )}\n\n            {/* Tool call ID */}\n            <p className=\"font-mono text-[10px] text-sf-subtle/50\">\n              {part.toolCallId}\n            </p>\n          </div>\n        </BaseCollapsible.Panel>\n      </div>\n    </BaseCollapsible.Root>\n  );\n}\n\n// ─── AiToolCallGroup ─────────────────────────────────────────────────────────\n\n/**\n * Collapsible group of tool calls. Shows a summary header with progress\n * counter and stacked tool icons when collapsed. Renders a single tool\n * directly if only one part is provided.\n *\n * @example\n * ```tsx\n * <AiToolCallGroup parts={toolParts} label=\"3 tools ran\" />\n * ```\n */\nexport function AiToolCallGroup({\n  parts,\n  label,\n  durations = {},\n  summaries = {},\n  approvalStates = {},\n  onApprove,\n  onReject,\n  defaultExpanded = false,\n  className,\n  ...props\n}: AiToolCallGroupProps) {\n  const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n\n  const completedCount = parts.filter(\n    (p) => p.state === \"output-available\"\n  ).length;\n  const errorCount = parts.filter(hasToolError).length;\n  const totalCount = parts.length;\n\n  // Single item — 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      <AiToolCall\n        part={singlePart}\n        duration={durations[singlePart.toolCallId]}\n        summary={summaries[singlePart.toolCallId]}\n        approvalState={approvalStates[singlePart.toolCallId]}\n        onApprove={\n          onApprove ? () => onApprove(singlePart.toolCallId) : undefined\n        }\n        onReject={onReject ? () => onReject(singlePart.toolCallId) : undefined}\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-1.5 w-full overflow-hidden rounded-lg bg-sf-tint/50\",\n          \"animate-in fade-in-0 slide-in-from-bottom-2 duration-200\",\n          className\n        )}\n        {...props}\n      >\n        <BaseCollapsible.Trigger\n          render={\n            <button\n              type=\"button\"\n              className=\"flex w-fit items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-sf-tint\"\n            />\n          }\n        >\n          <span className=\"text-sm font-medium text-sf-subtle\">\n            {label ?? `${totalCount} tool calls`}\n          </span>\n          <span className=\"text-xs text-sf-subtle\">\n            {completedCount}/{totalCount}\n            {errorCount > 0 ? (\n              <span className=\"ml-1 text-sf-danger\">({errorCount} errors)</span>\n            ) : null}\n          </span>\n\n          <div className=\"flex items-center gap-2\">\n            {/* Tool icon stack when collapsed */}\n            {!isExpanded ? (\n              <div className=\"flex -space-x-1\">\n                {parts.slice(0, 5).map((p) => {\n                  const Icon = getToolIcon(p);\n                  return (\n                    <div\n                      key={p.toolCallId}\n                      className={cn(\n                        \"flex size-6 items-center justify-center rounded-full border-2 border-sf-elevated\",\n                        p.state === \"output-available\" &&\n                          !hasToolError(p) &&\n                          \"bg-sf-tint\",\n                        isToolLoading(p) && \"bg-sf-tint\",\n                        hasToolError(p) && \"bg-sf-danger/20\"\n                      )}\n                    >\n                      <Icon className=\"size-3\" />\n                    </div>\n                  );\n                })}\n                {parts.length > 5 ? (\n                  <div className=\"flex size-6 items-center justify-center rounded-full border-2 border-sf-elevated bg-sf-tint text-[10px] text-sf-subtle\">\n                    +{parts.length - 5}\n                  </div>\n                ) : null}\n              </div>\n            ) : null}\n            <CaretDownIcon\n              className={cn(\n                \"size-4 text-sf-subtle transition-transform duration-200\",\n                !isExpanded && \"-rotate-90\"\n              )}\n            />\n          </div>\n        </BaseCollapsible.Trigger>\n\n        <BaseCollapsible.Panel className=\"overflow-hidden\">\n          <div className=\"space-y-2 border-t border-sf-line/20 px-3 pt-1 pb-3\">\n            {parts.map((p) => (\n              <AiToolCall\n                key={p.toolCallId}\n                part={p}\n                variant=\"inline\"\n                duration={durations[p.toolCallId]}\n                summary={summaries[p.toolCallId]}\n                approvalState={approvalStates[p.toolCallId]}\n                onApprove={\n                  onApprove ? () => onApprove(p.toolCallId) : undefined\n                }\n                onReject={onReject ? () => onReject(p.toolCallId) : undefined}\n              />\n            ))}\n          </div>\n        </BaseCollapsible.Panel>\n      </div>\n    </BaseCollapsible.Root>\n  );\n}\n\n// ─── AiToolCallTimeline ──────────────────────────────────────────────────────\n\n/**\n * Horizontal timeline view of tool calls. Each tool is shown as a small\n * icon pill with a tooltip showing its name, duration, and any errors.\n *\n * @example\n * ```tsx\n * <AiToolCallTimeline parts={toolParts} durations={{ id1: 230, id2: 540 }} />\n * ```\n */\nexport function AiToolCallTimeline({\n  parts,\n  durations = {},\n  className,\n  ...props\n}: AiToolCallTimelineProps) {\n  return (\n    <div\n      className={cn(\"flex flex-wrap items-center gap-1 py-2\", className)}\n      {...props}\n    >\n      {parts.map((part, index) => {\n        const IconComponent = getToolIcon(part);\n        const displayName = getToolDisplayName(part);\n        const config = getStateConfig(part);\n        const duration = durations[part.toolCallId];\n        const errorText = getToolErrorText(part);\n\n        const tooltipLines = [\n          displayName,\n          duration ? `${duration}ms` : null,\n          errorText ?? null,\n        ]\n          .filter(Boolean)\n          .join(\" · \");\n\n        return (\n          <div key={part.toolCallId} className=\"flex items-center\">\n            <Tooltip content={tooltipLines}>\n              <div\n                className={cn(\n                  \"flex cursor-default items-center gap-1.5 rounded-md px-2 py-1 transition-all\",\n                  config.bgClass\n                )}\n              >\n                <IconComponent className={cn(\"size-3.5\", config.colorClass)} />\n                {part.state === \"input-streaming\" ? (\n                  <CircleIcon\n                    className={cn(\"size-3 animate-pulse\", config.colorClass)}\n                  />\n                ) : null}\n                {part.state === \"input-available\" ? (\n                  <SpinnerGapIcon\n                    className={cn(\"size-3 animate-spin\", config.colorClass)}\n                  />\n                ) : null}\n                {hasToolResult(part) && !hasToolError(part) ? (\n                  <CheckIcon className={cn(\"size-3\", config.colorClass)} />\n                ) : null}\n                {hasToolError(part) ? (\n                  <WarningCircleIcon\n                    className={cn(\"size-3\", config.colorClass)}\n                  />\n                ) : null}\n              </div>\n            </Tooltip>\n\n            {/* Connector line */}\n            {index < parts.length - 1 ? (\n              <div\n                className={cn(\n                  \"mx-0.5 h-px w-3\",\n                  (() => {\n                    const nextPart = parts[index + 1];\n                    if (!nextPart) return \"bg-sf-line\";\n                    return hasToolResult(nextPart) || isToolLoading(nextPart)\n                      ? \"bg-sf-success/50\"\n                      : \"bg-sf-line\";\n                  })()\n                )}\n              />\n            ) : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/ai-usage-bar-BI-p-JBk.js

@@ -0,0 +1,70 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LightningIcon } from "@phosphor-icons/react";
+//#region src/components/ai-usage-bar/ai-usage-bar.tsx
+var SF_AI_USAGE_BAR_VARIANTS = {};
+var SF_AI_USAGE_BAR_DEFAULT_VARIANTS = {};
+function formatTokens(count) {
+	if (count >= 1e6) return `${(count / 1e6).toFixed(1)}M`;
+	if (count >= 1e3) return `${(count / 1e3).toFixed(1)}k`;
+	return count.toString();
+}
+function formatCost(usd) {
+	if (usd < .01) return `<$0.01`;
+	return `$${usd.toFixed(2)}`;
+}
+/**
+* Compact token usage display bar. Shows input/output token counts, total,
+* optional cost, and model identifier.
+*
+* Maps to harness event: `usage_update`.
+*
+* @example
+* ```tsx
+* <AiUsageBar
+*   inputTokens={1234}
+*   outputTokens={567}
+*   cost={0.02}
+*   modelId="claude-sonnet-4"
+* />
+* ```
+*/
+function AiUsageBar({ inputTokens, outputTokens, totalTokens, cost, modelId, icon, className, ...props }) {
+	const IconComponent = icon ?? LightningIcon;
+	const computed = (inputTokens ?? 0) + (outputTokens ?? 0);
+	const total = totalTokens ?? (computed > 0 ? computed : void 0);
+	if (!(inputTokens !== void 0 || outputTokens !== void 0 || total !== void 0) && cost === void 0 && !modelId) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-3 px-3 py-1 text-[11px] tabular-nums text-sf-subtle", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(IconComponent, { className: "size-3 shrink-0" }),
+			inputTokens !== void 0 && /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sf-inactive",
+				children: "in "
+			}), formatTokens(inputTokens)] }),
+			outputTokens !== void 0 && /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sf-inactive",
+				children: "out "
+			}), formatTokens(outputTokens)] }),
+			total !== void 0 && /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sf-inactive",
+				children: "total "
+			}), formatTokens(total)] }),
+			cost !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: "text-sf-subtle",
+				children: formatCost(cost)
+			}),
+			modelId && /* @__PURE__ */ jsx("span", {
+				className: "ml-auto truncate font-mono text-sf-inactive",
+				children: modelId
+			})
+		]
+	});
+}
+AiUsageBar.displayName = "AiUsageBar";
+//#endregion
+export { SF_AI_USAGE_BAR_DEFAULT_VARIANTS as n, SF_AI_USAGE_BAR_VARIANTS as r, AiUsageBar as t };
+
+//# sourceMappingURL=ai-usage-bar-BI-p-JBk.js.map

package/dist/ai-usage-bar-BI-p-JBk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-usage-bar-BI-p-JBk.js","names":[],"sources":["../src/components/ai-usage-bar/ai-usage-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport { LightningIcon } from \"@phosphor-icons/react\";\nimport type { ElementType, HTMLAttributes } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_USAGE_BAR_VARIANTS = {} as const;\nexport const SF_AI_USAGE_BAR_DEFAULT_VARIANTS = {} as const;\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type AiUsageBarProps = HTMLAttributes<HTMLDivElement> & {\n  /** Input/prompt token count. */\n  inputTokens?: number;\n  /** Output/completion token count. */\n  outputTokens?: number;\n  /** Total token count. Computed from input + output if not provided. */\n  totalTokens?: number;\n  /** Estimated cost in USD. */\n  cost?: number;\n  /** Model ID being used (shown as label). */\n  modelId?: string;\n  /** Custom icon. Defaults to `LightningIcon`. */\n  icon?: ElementType;\n};\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\nfunction formatTokens(count: number): string {\n  if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}M`;\n  if (count >= 1000) return `${(count / 1000).toFixed(1)}k`;\n  return count.toString();\n}\n\nfunction formatCost(usd: number): string {\n  if (usd < 0.01) return `<$0.01`;\n  return `$${usd.toFixed(2)}`;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Compact token usage display bar. Shows input/output token counts, total,\n * optional cost, and model identifier.\n *\n * Maps to harness event: `usage_update`.\n *\n * @example\n * ```tsx\n * <AiUsageBar\n *   inputTokens={1234}\n *   outputTokens={567}\n *   cost={0.02}\n *   modelId=\"claude-sonnet-4\"\n * />\n * ```\n */\nexport function AiUsageBar({\n  inputTokens,\n  outputTokens,\n  totalTokens,\n  cost,\n  modelId,\n  icon,\n  className,\n  ...props\n}: AiUsageBarProps) {\n  const IconComponent = icon ?? LightningIcon;\n  const computed = (inputTokens ?? 0) + (outputTokens ?? 0);\n  const total = totalTokens ?? (computed > 0 ? computed : undefined);\n  const hasTokens =\n    inputTokens !== undefined ||\n    outputTokens !== undefined ||\n    total !== undefined;\n\n  if (!hasTokens && cost === undefined && !modelId) return null;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-3 px-3 py-1 text-[11px] tabular-nums text-sf-subtle\",\n        className\n      )}\n      {...props}\n    >\n      <IconComponent className=\"size-3 shrink-0\" />\n\n      {inputTokens !== undefined && (\n        <span>\n          <span className=\"text-sf-inactive\">in </span>\n          {formatTokens(inputTokens)}\n        </span>\n      )}\n      {outputTokens !== undefined && (\n        <span>\n          <span className=\"text-sf-inactive\">out </span>\n          {formatTokens(outputTokens)}\n        </span>\n      )}\n      {total !== undefined && (\n        <span>\n          <span className=\"text-sf-inactive\">total </span>\n          {formatTokens(total)}\n        </span>\n      )}\n      {cost !== undefined && (\n        <span className=\"text-sf-subtle\">{formatCost(cost)}</span>\n      )}\n      {modelId && (\n        <span className=\"ml-auto truncate font-mono text-sf-inactive\">\n          {modelId}\n        </span>\n      )}\n    </div>\n  );\n}\n\nAiUsageBar.displayName = \"AiUsageBar\";\n"],"mappings":";;;;;AASA,IAAa,2BAA2B,EAAE;AAC1C,IAAa,mCAAmC,EAAE;AAqBlD,SAAS,aAAa,OAAuB;AAC3C,KAAI,SAAS,IAAW,QAAO,IAAI,QAAQ,KAAW,QAAQ,EAAE,CAAC;AACjE,KAAI,SAAS,IAAM,QAAO,IAAI,QAAQ,KAAM,QAAQ,EAAE,CAAC;AACvD,QAAO,MAAM,UAAU;;AAGzB,SAAS,WAAW,KAAqB;AACvC,KAAI,MAAM,IAAM,QAAO;AACvB,QAAO,IAAI,IAAI,QAAQ,EAAE;;;;;;;;;;;;;;;;;;AAqB3B,SAAgB,WAAW,EACzB,aACA,cACA,aACA,MACA,SACA,MACA,WACA,GAAG,SACe;CAClB,MAAM,gBAAgB,QAAQ;CAC9B,MAAM,YAAY,eAAe,MAAM,gBAAgB;CACvD,MAAM,QAAQ,gBAAgB,WAAW,IAAI,WAAW,KAAA;AAMxD,KAAI,EAJF,gBAAgB,KAAA,KAChB,iBAAiB,KAAA,KACjB,UAAU,KAAA,MAEM,SAAS,KAAA,KAAa,CAAC,QAAS,QAAO;AAEzD,QACE,qBAAC,OAAD;EACE,WAAW,GACT,6EACA,UACD;EACD,GAAI;YALN;GAOE,oBAAC,eAAD,EAAe,WAAU,mBAAoB,CAAA;GAE5C,gBAAgB,KAAA,KACf,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;cAAmB;IAAU,CAAA,EAC5C,aAAa,YAAY,CACrB,EAAA,CAAA;GAER,iBAAiB,KAAA,KAChB,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;cAAmB;IAAW,CAAA,EAC7C,aAAa,aAAa,CACtB,EAAA,CAAA;GAER,UAAU,KAAA,KACT,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;cAAmB;IAAa,CAAA,EAC/C,aAAa,MAAM,CACf,EAAA,CAAA;GAER,SAAS,KAAA,KACR,oBAAC,QAAD;IAAM,WAAU;cAAkB,WAAW,KAAK;IAAQ,CAAA;GAE3D,WACC,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA;GAEL;;;AAIV,WAAW,cAAc"}