@signalflare-ai/ui 1.0.0 → 1.2.0

package/dist/{ai-agent-card-BXHwhWAU.js.map → ai-agent-card-BR2NIYhi.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ai-agent-card-BXHwhWAU.js","names":[],"sources":["../src/components/ai-agent-card/ai-agent-card.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  BrainIcon,\n  CheckCircleIcon,\n  CircleIcon,\n  CodeIcon,\n  MagnifyingGlassIcon,\n  RobotIcon,\n  SpinnerGapIcon,\n  WrenchIcon,\n  XCircleIcon,\n} from \"@phosphor-icons/react\";\nimport type { ComponentProps, ElementType } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_AGENT_CARD_VARIANTS = {\n  status: {\n    idle: { classes: \"\", description: \"Agent is idle, not yet started\" },\n    running: { classes: \"\", description: \"Agent is actively working\" },\n    completed: { classes: \"\", description: \"Agent finished successfully\" },\n    error: { classes: \"\", description: \"Agent encountered an error\" },\n  },\n  size: {\n    sm: { classes: \"\", description: \"Compact card for dense grids\" },\n    md: { classes: \"\", description: \"Default card size\" },\n  },\n} as const;\n\nexport const SF_AI_AGENT_CARD_DEFAULT_VARIANTS = {\n  status: \"idle\",\n  size: \"md\",\n} as const;\n\nexport type SFAiAgentCardStatus = keyof typeof SF_AI_AGENT_CARD_VARIANTS.status;\nexport type SFAiAgentCardSize = keyof typeof SF_AI_AGENT_CARD_VARIANTS.size;\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type AiAgentCardProps = Omit<ComponentProps<\"button\">, \"children\"> & {\n  /** Human-readable agent name (e.g. \"Explore\", \"Execute\"). */\n  name: string;\n  /** Agent type ID — used for icon mapping. */\n  agentType?: string;\n  /** Current status. @default \"idle\" */\n  status?: SFAiAgentCardStatus;\n  /** Model ID being used (e.g. \"claude-haiku-3.5\"). */\n  modelId?: string;\n  /** What the agent is currently doing. */\n  currentTask?: string;\n  /** Total elapsed duration in ms. */\n  duration?: number;\n  /** Number of tool calls made. */\n  toolCallCount?: number;\n  /** Whether this card is currently selected/active. */\n  selected?: boolean;\n  /** Custom icon override. */\n  icon?: ElementType;\n  /** Card size. @default \"md\" */\n  size?: SFAiAgentCardSize;\n};\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\nconst AGENT_TYPE_ICONS: Record<string, ElementType> = {\n  explore: MagnifyingGlassIcon,\n  search: MagnifyingGlassIcon,\n  execute: CodeIcon,\n  code: CodeIcon,\n  plan: BrainIcon,\n  think: BrainIcon,\n  tool: WrenchIcon,\n  build: WrenchIcon,\n};\n\nfunction getAgentIcon(\n  agentType?: string,\n  customIcon?: ElementType\n): ElementType {\n  if (customIcon) return customIcon;\n  if (agentType) {\n    const lower = agentType.toLowerCase();\n    for (const [key, icon] of Object.entries(AGENT_TYPE_ICONS)) {\n      if (lower.includes(key)) return icon;\n    }\n  }\n  return RobotIcon;\n}\n\nfunction formatDuration(ms: number): string {\n  if (ms < 1000) return `${ms}ms`;\n  const s = Math.round(ms / 100) / 10;\n  if (s < 60) return `${s}s`;\n  const m = Math.floor(s / 60);\n  const rem = Math.round(s % 60);\n  return `${m}m ${rem}s`;\n}\n\nfunction getModelShortName(modelId?: string): string {\n  if (!modelId) return \"\";\n  return (\n    modelId\n      .split(\"/\")\n      .pop()\n      ?.replace(/^claude-/, \"\")\n      .replace(/-\\d+$/, \"\") ?? modelId\n  );\n}\n\n// ─── Status decorations ───────────────────────────────────────────────────────\n\nconst STATUS_DOT: Record<SFAiAgentCardStatus, string> = {\n  idle: \"bg-sf-fill\",\n  running: \"bg-sf-brand animate-pulse\",\n  completed: \"bg-sf-success\",\n  error: \"bg-sf-danger\",\n};\n\nfunction StatusIcon({\n  status,\n  size = 14,\n}: {\n  status: SFAiAgentCardStatus;\n  size?: number;\n}) {\n  switch (status) {\n    case \"running\":\n      return (\n        <SpinnerGapIcon size={size} className=\"animate-spin text-sf-brand\" />\n      );\n    case \"completed\":\n      return <CheckCircleIcon size={size} className=\"text-sf-success\" />;\n    case \"error\":\n      return <XCircleIcon size={size} className=\"text-sf-danger\" />;\n    default:\n      return <CircleIcon size={size} className=\"text-sf-inactive\" />;\n  }\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * `AiAgentCard` — compact card showing one agent's status in a commander dashboard.\n *\n * Displays: agent icon, name, status indicator, current task, model, duration,\n * and tool call count. Clickable for selection.\n *\n * @example\n * ```tsx\n * <AiAgentCard\n *   name=\"Explore\"\n *   agentType=\"explore\"\n *   status=\"running\"\n *   modelId=\"claude-haiku-3.5\"\n *   currentTask=\"Scanning auth files...\"\n *   duration={4200}\n *   toolCallCount={3}\n *   selected\n *   onClick={handleSelect}\n * />\n * ```\n */\nexport const AiAgentCard = forwardRef<HTMLButtonElement, AiAgentCardProps>(\n  (\n    {\n      name,\n      agentType,\n      status = SF_AI_AGENT_CARD_DEFAULT_VARIANTS.status,\n      modelId,\n      currentTask,\n      duration,\n      toolCallCount,\n      selected,\n      icon,\n      size = SF_AI_AGENT_CARD_DEFAULT_VARIANTS.size,\n      className,\n      onClick,\n      ...props\n    },\n    ref\n  ) => {\n    const Icon = getAgentIcon(agentType, icon);\n    const modelShort = getModelShortName(modelId);\n    const isSm = size === \"sm\";\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        onClick={onClick}\n        className={cn(\n          \"group flex flex-col gap-2 rounded-xl border text-left transition-all\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sf-ring focus-visible:ring-offset-1\",\n          isSm ? \"p-2.5\" : \"p-3.5\",\n          selected\n            ? \"border-sf-line bg-sf-recessed shadow-sm\"\n            : \"border-sf-line bg-sf-elevated hover:border-sf-line hover:bg-sf-tint\",\n          !onClick && \"cursor-default\",\n          className\n        )}\n        {...props}\n      >\n        {/* Header row */}\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex items-center gap-2 min-w-0\">\n            {/* Agent icon */}\n            <div\n              className={cn(\n                \"flex shrink-0 items-center justify-center rounded-lg\",\n                isSm ? \"size-6\" : \"size-8\",\n                status === \"running\"\n                  ? \"bg-sf-brand/10 text-sf-brand\"\n                  : status === \"completed\"\n                    ? \"bg-sf-tint text-sf-success\"\n                    : status === \"error\"\n                      ? \"bg-sf-tint text-sf-danger\"\n                      : \"bg-sf-fill text-sf-subtle\"\n              )}\n            >\n              <Icon size={isSm ? 12 : 16} />\n            </div>\n\n            {/* Name */}\n            <span\n              className={cn(\n                \"truncate font-medium text-sf-default\",\n                isSm ? \"text-xs\" : \"text-sm\"\n              )}\n            >\n              {name}\n            </span>\n          </div>\n\n          {/* Status icon */}\n          <StatusIcon status={status} size={isSm ? 12 : 14} />\n        </div>\n\n        {/* Current task */}\n        {currentTask && (\n          <p\n            className={cn(\n              \"truncate text-sf-subtle leading-snug\",\n              isSm ? \"text-[10px]\" : \"text-xs\"\n            )}\n          >\n            {currentTask}\n          </p>\n        )}\n\n        {/* Footer row: model + stats */}\n        {!isSm && (\n          <div className=\"flex items-center justify-between gap-2\">\n            <div className=\"flex items-center gap-1.5\">\n              {/* Status dot + model */}\n              <span\n                className={cn(\n                  \"size-1.5 shrink-0 rounded-full\",\n                  STATUS_DOT[status]\n                )}\n              />\n              {modelShort && (\n                <span className=\"font-mono text-[10px] text-sf-inactive\">\n                  {modelShort}\n                </span>\n              )}\n            </div>\n\n            <div className=\"flex items-center gap-2 text-[10px] text-sf-subtle\">\n              {typeof toolCallCount === \"number\" && toolCallCount > 0 && (\n                <span className=\"flex items-center gap-0.5\">\n                  <WrenchIcon size={9} />\n                  {toolCallCount}\n                </span>\n              )}\n              {typeof duration === \"number\" && (\n                <span>{formatDuration(duration)}</span>\n              )}\n            </div>\n          </div>\n        )}\n      </button>\n    );\n  }\n);\n\nAiAgentCard.displayName = \"AiAgentCard\";\n"],"mappings":"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"}
+{"version":3,"file":"ai-agent-card-BR2NIYhi.js","names":[],"sources":["../src/components/ai-agent-card/ai-agent-card.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  BrainIcon,\n  CheckCircleIcon,\n  CircleIcon,\n  CodeIcon,\n  MagnifyingGlassIcon,\n  RobotIcon,\n  SpinnerGapIcon,\n  WrenchIcon,\n  XCircleIcon,\n} from \"@phosphor-icons/react\";\nimport type { ComponentProps, ElementType } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_AGENT_CARD_VARIANTS = {\n  status: {\n    idle: { classes: \"\", description: \"Agent is idle, not yet started\" },\n    running: { classes: \"\", description: \"Agent is actively working\" },\n    completed: { classes: \"\", description: \"Agent finished successfully\" },\n    error: { classes: \"\", description: \"Agent encountered an error\" },\n  },\n  size: {\n    sm: { classes: \"\", description: \"Compact card for dense grids\" },\n    md: { classes: \"\", description: \"Default card size\" },\n  },\n} as const;\n\nexport const SF_AI_AGENT_CARD_DEFAULT_VARIANTS = {\n  status: \"idle\",\n  size: \"md\",\n} as const;\n\nexport type SFAiAgentCardStatus = keyof typeof SF_AI_AGENT_CARD_VARIANTS.status;\nexport type SFAiAgentCardSize = keyof typeof SF_AI_AGENT_CARD_VARIANTS.size;\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type AiAgentCardProps = Omit<ComponentProps<\"button\">, \"children\"> & {\n  /** Human-readable agent name (e.g. \"Explore\", \"Execute\"). */\n  name: string;\n  /** Agent type ID — used for icon mapping. */\n  agentType?: string;\n  /** Current status. @default \"idle\" */\n  status?: SFAiAgentCardStatus;\n  /** Model ID being used (e.g. \"claude-haiku-3.5\"). */\n  modelId?: string;\n  /** What the agent is currently doing. */\n  currentTask?: string;\n  /** Total elapsed duration in ms. */\n  duration?: number;\n  /** Number of tool calls made. */\n  toolCallCount?: number;\n  /** Whether this card is currently selected/active. */\n  selected?: boolean;\n  /** Custom icon override. */\n  icon?: ElementType;\n  /** Card size. @default \"md\" */\n  size?: SFAiAgentCardSize;\n};\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\nconst AGENT_TYPE_ICONS: Record<string, ElementType> = {\n  explore: MagnifyingGlassIcon,\n  search: MagnifyingGlassIcon,\n  execute: CodeIcon,\n  code: CodeIcon,\n  plan: BrainIcon,\n  think: BrainIcon,\n  tool: WrenchIcon,\n  build: WrenchIcon,\n};\n\nfunction getAgentIcon(\n  agentType?: string,\n  customIcon?: ElementType\n): ElementType {\n  if (customIcon) return customIcon;\n  if (agentType) {\n    const lower = agentType.toLowerCase();\n    for (const [key, icon] of Object.entries(AGENT_TYPE_ICONS)) {\n      if (lower.includes(key)) return icon;\n    }\n  }\n  return RobotIcon;\n}\n\nfunction formatDuration(ms: number): string {\n  if (ms < 1000) return `${ms}ms`;\n  const s = Math.round(ms / 100) / 10;\n  if (s < 60) return `${s}s`;\n  const m = Math.floor(s / 60);\n  const rem = Math.round(s % 60);\n  return `${m}m ${rem}s`;\n}\n\nfunction getModelShortName(modelId?: string): string {\n  if (!modelId) return \"\";\n  return (\n    modelId\n      .split(\"/\")\n      .pop()\n      ?.replace(/^claude-/, \"\")\n      .replace(/-\\d+$/, \"\") ?? modelId\n  );\n}\n\n// ─── Status decorations ───────────────────────────────────────────────────────\n\nconst STATUS_DOT: Record<SFAiAgentCardStatus, string> = {\n  idle: \"bg-sf-fill\",\n  running: \"bg-sf-brand animate-pulse\",\n  completed: \"bg-sf-success\",\n  error: \"bg-sf-danger\",\n};\n\nfunction StatusIcon({\n  status,\n  size = 14,\n}: {\n  status: SFAiAgentCardStatus;\n  size?: number;\n}) {\n  switch (status) {\n    case \"running\":\n      return (\n        <SpinnerGapIcon size={size} className=\"animate-spin text-sf-brand\" />\n      );\n    case \"completed\":\n      return <CheckCircleIcon size={size} className=\"text-sf-success\" />;\n    case \"error\":\n      return <XCircleIcon size={size} className=\"text-sf-danger\" />;\n    default:\n      return <CircleIcon size={size} className=\"text-sf-inactive\" />;\n  }\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * `AiAgentCard` — compact card showing one agent's status in a commander dashboard.\n *\n * Displays: agent icon, name, status indicator, current task, model, duration,\n * and tool call count. Clickable for selection.\n *\n * @example\n * ```tsx\n * <AiAgentCard\n *   name=\"Explore\"\n *   agentType=\"explore\"\n *   status=\"running\"\n *   modelId=\"claude-haiku-3.5\"\n *   currentTask=\"Scanning auth files...\"\n *   duration={4200}\n *   toolCallCount={3}\n *   selected\n *   onClick={handleSelect}\n * />\n * ```\n */\nexport const AiAgentCard = forwardRef<HTMLButtonElement, AiAgentCardProps>(\n  (\n    {\n      name,\n      agentType,\n      status = SF_AI_AGENT_CARD_DEFAULT_VARIANTS.status,\n      modelId,\n      currentTask,\n      duration,\n      toolCallCount,\n      selected,\n      icon,\n      size = SF_AI_AGENT_CARD_DEFAULT_VARIANTS.size,\n      className,\n      onClick,\n      ...props\n    },\n    ref\n  ) => {\n    const Icon = getAgentIcon(agentType, icon);\n    const modelShort = getModelShortName(modelId);\n    const isSm = size === \"sm\";\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        onClick={onClick}\n        className={cn(\n          \"group flex flex-col gap-2 rounded-xl border text-left transition-all\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sf-ring focus-visible:ring-offset-1\",\n          isSm ? \"p-2.5\" : \"p-3.5\",\n          selected\n            ? \"border-sf-line bg-sf-recessed shadow-sm\"\n            : \"border-sf-line bg-sf-elevated hover:border-sf-line hover:bg-sf-tint\",\n          !onClick && \"cursor-default\",\n          className\n        )}\n        {...props}\n      >\n        {/* Header row */}\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex items-center gap-2 min-w-0\">\n            {/* Agent icon */}\n            <div\n              className={cn(\n                \"flex shrink-0 items-center justify-center rounded-lg\",\n                isSm ? \"size-6\" : \"size-8\",\n                status === \"running\"\n                  ? \"bg-sf-brand/10 text-sf-brand\"\n                  : status === \"completed\"\n                    ? \"bg-sf-tint text-sf-success\"\n                    : status === \"error\"\n                      ? \"bg-sf-tint text-sf-danger\"\n                      : \"bg-sf-fill text-sf-subtle\"\n              )}\n            >\n              <Icon size={isSm ? 12 : 16} />\n            </div>\n\n            {/* Name */}\n            <span\n              className={cn(\n                \"truncate font-medium text-sf-default\",\n                isSm ? \"text-xs\" : \"text-sm\"\n              )}\n            >\n              {name}\n            </span>\n          </div>\n\n          {/* Status icon */}\n          <StatusIcon status={status} size={isSm ? 12 : 14} />\n        </div>\n\n        {/* Current task */}\n        {currentTask && (\n          <p\n            className={cn(\n              \"truncate text-sf-subtle leading-snug\",\n              isSm ? \"text-[10px]\" : \"text-xs\"\n            )}\n          >\n            {currentTask}\n          </p>\n        )}\n\n        {/* Footer row: model + stats */}\n        {!isSm && (\n          <div className=\"flex items-center justify-between gap-2\">\n            <div className=\"flex items-center gap-1.5\">\n              {/* Status dot + model */}\n              <span\n                className={cn(\n                  \"size-1.5 shrink-0 rounded-full\",\n                  STATUS_DOT[status]\n                )}\n              />\n              {modelShort && (\n                <span className=\"font-mono text-[10px] text-sf-inactive\">\n                  {modelShort}\n                </span>\n              )}\n            </div>\n\n            <div className=\"flex items-center gap-2 text-[10px] text-sf-subtle\">\n              {typeof toolCallCount === \"number\" && toolCallCount > 0 && (\n                <span className=\"flex items-center gap-0.5\">\n                  <WrenchIcon size={9} />\n                  {toolCallCount}\n                </span>\n              )}\n              {typeof duration === \"number\" && (\n                <span>{formatDuration(duration)}</span>\n              )}\n            </div>\n          </div>\n        )}\n      </button>\n    );\n  }\n);\n\nAiAgentCard.displayName = \"AiAgentCard\";\n"],"mappings":"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"}

package/dist/{ai-approval-aa0qvjFN.js → ai-approval-Ba7mrKba.js}

@@ -1,6 +1,6 @@
 "use client";
 import { t as cn } from "./cn-YROP2_ox.js";
-import { t as Button } from "./button-De0267YU.js";
+import { t as Button } from "./button-CO6-qPax.js";
 import { useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckCircleIcon, ListChecksIcon, ProhibitIcon, ShieldCheckIcon } from "@phosphor-icons/react";
@@ -181,4 +181,4 @@ AiApproval.displayName = "AiApproval";
 //#endregion
 export { SF_AI_APPROVAL_DEFAULT_VARIANTS as n, SF_AI_APPROVAL_VARIANTS as r, AiApproval as t };
 
-//# sourceMappingURL=ai-approval-aa0qvjFN.js.map
+//# sourceMappingURL=ai-approval-Ba7mrKba.js.map

package/dist/{ai-approval-aa0qvjFN.js.map → ai-approval-Ba7mrKba.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ai-approval-aa0qvjFN.js","names":[],"sources":["../src/components/ai-approval/ai-approval.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  CheckCircleIcon,\n  ProhibitIcon,\n  ShieldCheckIcon,\n  ListChecksIcon,\n} from \"@phosphor-icons/react\";\nimport type { ElementType, HTMLAttributes, ReactNode } from \"react\";\nimport { useCallback, useState } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../button\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_APPROVAL_VARIANTS = {\n  kind: {\n    tool: { classes: \"\", description: \"Tool call approval\" },\n    plan: { classes: \"\", description: \"Plan approval\" },\n  },\n  status: {\n    pending: { classes: \"\", description: \"Awaiting user decision\" },\n    approved: { classes: \"\", description: \"Approved by user\" },\n    rejected: { classes: \"\", description: \"Rejected by user\" },\n  },\n} as const;\n\nexport const SF_AI_APPROVAL_DEFAULT_VARIANTS = {\n  kind: \"tool\",\n  status: \"pending\",\n} as const;\n\nexport type SFAiApprovalKind = keyof typeof SF_AI_APPROVAL_VARIANTS.kind;\nexport type SFAiApprovalStatus = keyof typeof SF_AI_APPROVAL_VARIANTS.status;\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type AiApprovalItem = {\n  id: string;\n  label: string;\n  description?: string;\n};\n\nexport type AiApprovalProps = Omit<HTMLAttributes<HTMLDivElement>, \"title\"> & {\n  /** Approval kind — `\"tool\"` for individual tool calls, `\"plan\"` for multi-step plans. */\n  kind?: SFAiApprovalKind;\n  /** Current approval status. */\n  status?: SFAiApprovalStatus;\n  /** Title text shown in the header. */\n  title: string;\n  /** Optional description below the title. */\n  description?: string;\n  /** Custom icon. Defaults to shield (tool) or list (plan). */\n  icon?: ElementType;\n  /**\n   * For plan approvals: list of steps/items in the plan.\n   * For tool approvals: can show tool name, parameters, etc.\n   */\n  items?: AiApprovalItem[];\n  /** Called when user approves. */\n  onApprove?: () => void;\n  /** Called when user rejects. Receives optional feedback string. */\n  onReject?: (feedback?: string) => void;\n  /** Label for the approve button. Default: `\"Approve\"`. */\n  approveLabel?: string;\n  /** Label for the reject button. Default: `\"Reject\"`. */\n  rejectLabel?: string;\n  /** Show a text input for rejection feedback. Default: `false`. */\n  showFeedback?: boolean;\n  /** Content rendered below items and above the action buttons. */\n  children?: ReactNode;\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nconst KIND_ICONS: Record<SFAiApprovalKind, ElementType> = {\n  tool: ShieldCheckIcon,\n  plan: ListChecksIcon,\n};\n\nconst STATUS_CONFIG: Record<\n  SFAiApprovalStatus,\n  { icon: ElementType; label: string; className: string }\n> = {\n  pending: {\n    icon: ShieldCheckIcon,\n    label: \"Awaiting approval\",\n    className: \"text-sf-subtle\",\n  },\n  approved: {\n    icon: CheckCircleIcon,\n    label: \"Approved\",\n    className: \"text-sf-success\",\n  },\n  rejected: {\n    icon: ProhibitIcon,\n    label: \"Rejected\",\n    className: \"text-sf-danger\",\n  },\n};\n\n/**\n * Approval card for tool calls and plan submissions.\n *\n * Maps to harness events: `tool_approval_required`, `plan_approval_required`,\n * `plan_approved`.\n *\n * @example\n * ```tsx\n * <AiApproval\n *   kind=\"tool\"\n *   title=\"Execute shell command\"\n *   description=\"rm -rf /tmp/cache\"\n *   onApprove={() => harness.respondToToolApproval({ decision: 'approve' })}\n *   onReject={() => harness.respondToToolApproval({ decision: 'decline' })}\n * />\n *\n * <AiApproval\n *   kind=\"plan\"\n *   title=\"Deployment plan\"\n *   items={[\n *     { id: \"1\", label: \"Run tests\" },\n *     { id: \"2\", label: \"Build production bundle\" },\n *     { id: \"3\", label: \"Deploy to staging\" },\n *   ]}\n *   showFeedback\n *   onApprove={() => harness.respondToPlanApproval({ planId, response: { action: 'approved' } })}\n *   onReject={(feedback) => harness.respondToPlanApproval({ planId, response: { action: 'rejected', feedback } })}\n * />\n * ```\n */\nexport function AiApproval({\n  kind = \"tool\",\n  status = \"pending\",\n  title,\n  description,\n  icon,\n  items,\n  onApprove,\n  onReject,\n  approveLabel = \"Approve\",\n  rejectLabel = \"Reject\",\n  showFeedback = false,\n  children,\n  className,\n  ...props\n}: AiApprovalProps) {\n  const [feedback, setFeedback] = useState(\"\");\n  const isPending = status === \"pending\";\n\n  const IconComponent = icon ?? KIND_ICONS[kind];\n  const statusConfig = STATUS_CONFIG[status];\n  const StatusIcon = statusConfig.icon;\n\n  const handleReject = useCallback(() => {\n    onReject?.(showFeedback ? feedback : undefined);\n  }, [onReject, showFeedback, feedback]);\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col gap-2.5 rounded-lg border border-sf-line bg-sf-elevated p-3\",\n        !isPending && \"opacity-75\",\n        className\n      )}\n      {...props}\n    >\n      {/* Header */}\n      <div className=\"flex items-start gap-2.5\">\n        <div\n          className={cn(\n            \"mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-md\",\n            isPending ? \"bg-sf-brand/10 text-sf-brand\" : statusConfig.className\n          )}\n        >\n          {isPending ? (\n            <IconComponent className=\"size-4\" weight=\"bold\" />\n          ) : (\n            <StatusIcon className=\"size-4\" weight=\"bold\" />\n          )}\n        </div>\n        <div className=\"flex min-w-0 flex-col gap-0.5\">\n          <span className=\"text-sm font-medium text-sf-default\">{title}</span>\n          {description && (\n            <span className=\"text-xs text-sf-subtle\">{description}</span>\n          )}\n        </div>\n        {!isPending && (\n          <span\n            className={cn(\n              \"ml-auto shrink-0 text-xs font-medium\",\n              statusConfig.className\n            )}\n          >\n            {statusConfig.label}\n          </span>\n        )}\n      </div>\n\n      {/* Items (plan steps / tool details) */}\n      {items && items.length > 0 && (\n        <div className=\"flex flex-col gap-1 pl-8\">\n          {items.map((item, index) => (\n            <div key={item.id} className=\"flex items-start gap-2 text-xs\">\n              <span className=\"mt-px shrink-0 font-mono text-sf-subtle\">\n                {index + 1}.\n              </span>\n              <div className=\"flex min-w-0 flex-col\">\n                <span className=\"text-sf-default\">{item.label}</span>\n                {item.description && (\n                  <span className=\"text-sf-subtle\">{item.description}</span>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {children}\n\n      {/* Feedback input */}\n      {isPending && showFeedback && (\n        <textarea\n          className=\"mx-0 min-h-[60px] resize-none rounded-md border border-sf-line bg-sf-base px-2.5 py-1.5 text-xs text-sf-default outline-none placeholder:text-sf-inactive focus:border-sf-ring\"\n          onChange={(e) => setFeedback(e.target.value)}\n          placeholder=\"Optional feedback…\"\n          value={feedback}\n        />\n      )}\n\n      {/* Action buttons */}\n      {isPending && (\n        <div className=\"flex items-center justify-end gap-2\">\n          <Button\n            onClick={handleReject}\n            size=\"sm\"\n            type=\"button\"\n            variant=\"ghost\"\n          >\n            {rejectLabel}\n          </Button>\n          <Button onClick={onApprove} size=\"sm\" type=\"button\" variant=\"primary\">\n            {approveLabel}\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n}\n\nAiApproval.displayName = \"AiApproval\";\n"],"mappings":";;;;;;;AAgBA,IAAa,0BAA0B;CACrC,MAAM;EACJ,MAAM;GAAE,SAAS;GAAI,aAAa;GAAsB;EACxD,MAAM;GAAE,SAAS;GAAI,aAAa;GAAiB;EACpD;CACD,QAAQ;EACN,SAAS;GAAE,SAAS;GAAI,aAAa;GAA0B;EAC/D,UAAU;GAAE,SAAS;GAAI,aAAa;GAAoB;EAC1D,UAAU;GAAE,SAAS;GAAI,aAAa;GAAoB;EAC3D;CACF;AAED,IAAa,kCAAkC;CAC7C,MAAM;CACN,QAAQ;CACT;AA6CD,IAAM,aAAoD;CACxD,MAAM;CACN,MAAM;CACP;AAED,IAAM,gBAGF;CACF,SAAS;EACP,MAAM;EACN,OAAO;EACP,WAAW;EACZ;CACD,UAAU;EACR,MAAM;EACN,OAAO;EACP,WAAW;EACZ;CACD,UAAU;EACR,MAAM;EACN,OAAO;EACP,WAAW;EACZ;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCD,SAAgB,WAAW,EACzB,OAAO,QACP,SAAS,WACT,OACA,aACA,MACA,OACA,WACA,UACA,eAAe,WACf,cAAc,UACd,eAAe,OACf,UACA,WACA,GAAG,SACe;CAClB,MAAM,CAAC,UAAU,eAAe,SAAS,GAAG;CAC5C,MAAM,YAAY,WAAW;CAE7B,MAAM,gBAAgB,QAAQ,WAAW;CACzC,MAAM,eAAe,cAAc;CACnC,MAAM,aAAa,aAAa;CAEhC,MAAM,eAAe,kBAAkB;AACrC,aAAW,eAAe,WAAW,KAAA,EAAU;IAC9C;EAAC;EAAU;EAAc;EAAS,CAAC;AAEtC,QACE,qBAAC,OAAD;EACE,WAAW,GACT,6EACA,CAAC,aAAa,cACd,UACD;EACD,GAAI;YANN;GASE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,OAAD;MACE,WAAW,GACT,sEACA,YAAY,iCAAiC,aAAa,UAC3D;gBAEA,YACC,oBAAC,eAAD;OAAe,WAAU;OAAS,QAAO;OAAS,CAAA,GAElD,oBAAC,YAAD;OAAY,WAAU;OAAS,QAAO;OAAS,CAAA;MAE7C,CAAA;KACN,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,QAAD;OAAM,WAAU;iBAAuC;OAAa,CAAA,EACnE,eACC,oBAAC,QAAD;OAAM,WAAU;iBAA0B;OAAmB,CAAA,CAE3D;;KACL,CAAC,aACA,oBAAC,QAAD;MACE,WAAW,GACT,wCACA,aAAa,UACd;gBAEA,aAAa;MACT,CAAA;KAEL;;GAGL,SAAS,MAAM,SAAS,KACvB,oBAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,MAAM,UAChB,qBAAC,OAAD;KAAmB,WAAU;eAA7B,CACE,qBAAC,QAAD;MAAM,WAAU;gBAAhB,CACG,QAAQ,GAAE,IACN;SACP,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,QAAD;OAAM,WAAU;iBAAmB,KAAK;OAAa,CAAA,EACpD,KAAK,eACJ,oBAAC,QAAD;OAAM,WAAU;iBAAkB,KAAK;OAAmB,CAAA,CAExD;QACF;OAVI,KAAK,GAUT,CACN;IACE,CAAA;GAGP;GAGA,aAAa,gBACZ,oBAAC,YAAD;IACE,WAAU;IACV,WAAW,MAAM,YAAY,EAAE,OAAO,MAAM;IAC5C,aAAY;IACZ,OAAO;IACP,CAAA;GAIH,aACC,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,SAAS;KACT,MAAK;KACL,MAAK;KACL,SAAQ;eAEP;KACM,CAAA,EACT,oBAAC,QAAD;KAAQ,SAAS;KAAW,MAAK;KAAK,MAAK;KAAS,SAAQ;eACzD;KACM,CAAA,CACL;;GAEJ;;;AAIV,WAAW,cAAc"}
+{"version":3,"file":"ai-approval-Ba7mrKba.js","names":[],"sources":["../src/components/ai-approval/ai-approval.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  CheckCircleIcon,\n  ProhibitIcon,\n  ShieldCheckIcon,\n  ListChecksIcon,\n} from \"@phosphor-icons/react\";\nimport type { ElementType, HTMLAttributes, ReactNode } from \"react\";\nimport { useCallback, useState } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../button\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_APPROVAL_VARIANTS = {\n  kind: {\n    tool: { classes: \"\", description: \"Tool call approval\" },\n    plan: { classes: \"\", description: \"Plan approval\" },\n  },\n  status: {\n    pending: { classes: \"\", description: \"Awaiting user decision\" },\n    approved: { classes: \"\", description: \"Approved by user\" },\n    rejected: { classes: \"\", description: \"Rejected by user\" },\n  },\n} as const;\n\nexport const SF_AI_APPROVAL_DEFAULT_VARIANTS = {\n  kind: \"tool\",\n  status: \"pending\",\n} as const;\n\nexport type SFAiApprovalKind = keyof typeof SF_AI_APPROVAL_VARIANTS.kind;\nexport type SFAiApprovalStatus = keyof typeof SF_AI_APPROVAL_VARIANTS.status;\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type AiApprovalItem = {\n  id: string;\n  label: string;\n  description?: string;\n};\n\nexport type AiApprovalProps = Omit<HTMLAttributes<HTMLDivElement>, \"title\"> & {\n  /** Approval kind — `\"tool\"` for individual tool calls, `\"plan\"` for multi-step plans. */\n  kind?: SFAiApprovalKind;\n  /** Current approval status. */\n  status?: SFAiApprovalStatus;\n  /** Title text shown in the header. */\n  title: string;\n  /** Optional description below the title. */\n  description?: string;\n  /** Custom icon. Defaults to shield (tool) or list (plan). */\n  icon?: ElementType;\n  /**\n   * For plan approvals: list of steps/items in the plan.\n   * For tool approvals: can show tool name, parameters, etc.\n   */\n  items?: AiApprovalItem[];\n  /** Called when user approves. */\n  onApprove?: () => void;\n  /** Called when user rejects. Receives optional feedback string. */\n  onReject?: (feedback?: string) => void;\n  /** Label for the approve button. Default: `\"Approve\"`. */\n  approveLabel?: string;\n  /** Label for the reject button. Default: `\"Reject\"`. */\n  rejectLabel?: string;\n  /** Show a text input for rejection feedback. Default: `false`. */\n  showFeedback?: boolean;\n  /** Content rendered below items and above the action buttons. */\n  children?: ReactNode;\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nconst KIND_ICONS: Record<SFAiApprovalKind, ElementType> = {\n  tool: ShieldCheckIcon,\n  plan: ListChecksIcon,\n};\n\nconst STATUS_CONFIG: Record<\n  SFAiApprovalStatus,\n  { icon: ElementType; label: string; className: string }\n> = {\n  pending: {\n    icon: ShieldCheckIcon,\n    label: \"Awaiting approval\",\n    className: \"text-sf-subtle\",\n  },\n  approved: {\n    icon: CheckCircleIcon,\n    label: \"Approved\",\n    className: \"text-sf-success\",\n  },\n  rejected: {\n    icon: ProhibitIcon,\n    label: \"Rejected\",\n    className: \"text-sf-danger\",\n  },\n};\n\n/**\n * Approval card for tool calls and plan submissions.\n *\n * Maps to harness events: `tool_approval_required`, `plan_approval_required`,\n * `plan_approved`.\n *\n * @example\n * ```tsx\n * <AiApproval\n *   kind=\"tool\"\n *   title=\"Execute shell command\"\n *   description=\"rm -rf /tmp/cache\"\n *   onApprove={() => harness.respondToToolApproval({ decision: 'approve' })}\n *   onReject={() => harness.respondToToolApproval({ decision: 'decline' })}\n * />\n *\n * <AiApproval\n *   kind=\"plan\"\n *   title=\"Deployment plan\"\n *   items={[\n *     { id: \"1\", label: \"Run tests\" },\n *     { id: \"2\", label: \"Build production bundle\" },\n *     { id: \"3\", label: \"Deploy to staging\" },\n *   ]}\n *   showFeedback\n *   onApprove={() => harness.respondToPlanApproval({ planId, response: { action: 'approved' } })}\n *   onReject={(feedback) => harness.respondToPlanApproval({ planId, response: { action: 'rejected', feedback } })}\n * />\n * ```\n */\nexport function AiApproval({\n  kind = \"tool\",\n  status = \"pending\",\n  title,\n  description,\n  icon,\n  items,\n  onApprove,\n  onReject,\n  approveLabel = \"Approve\",\n  rejectLabel = \"Reject\",\n  showFeedback = false,\n  children,\n  className,\n  ...props\n}: AiApprovalProps) {\n  const [feedback, setFeedback] = useState(\"\");\n  const isPending = status === \"pending\";\n\n  const IconComponent = icon ?? KIND_ICONS[kind];\n  const statusConfig = STATUS_CONFIG[status];\n  const StatusIcon = statusConfig.icon;\n\n  const handleReject = useCallback(() => {\n    onReject?.(showFeedback ? feedback : undefined);\n  }, [onReject, showFeedback, feedback]);\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col gap-2.5 rounded-lg border border-sf-line bg-sf-elevated p-3\",\n        !isPending && \"opacity-75\",\n        className\n      )}\n      {...props}\n    >\n      {/* Header */}\n      <div className=\"flex items-start gap-2.5\">\n        <div\n          className={cn(\n            \"mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-md\",\n            isPending ? \"bg-sf-brand/10 text-sf-brand\" : statusConfig.className\n          )}\n        >\n          {isPending ? (\n            <IconComponent className=\"size-4\" weight=\"bold\" />\n          ) : (\n            <StatusIcon className=\"size-4\" weight=\"bold\" />\n          )}\n        </div>\n        <div className=\"flex min-w-0 flex-col gap-0.5\">\n          <span className=\"text-sm font-medium text-sf-default\">{title}</span>\n          {description && (\n            <span className=\"text-xs text-sf-subtle\">{description}</span>\n          )}\n        </div>\n        {!isPending && (\n          <span\n            className={cn(\n              \"ml-auto shrink-0 text-xs font-medium\",\n              statusConfig.className\n            )}\n          >\n            {statusConfig.label}\n          </span>\n        )}\n      </div>\n\n      {/* Items (plan steps / tool details) */}\n      {items && items.length > 0 && (\n        <div className=\"flex flex-col gap-1 pl-8\">\n          {items.map((item, index) => (\n            <div key={item.id} className=\"flex items-start gap-2 text-xs\">\n              <span className=\"mt-px shrink-0 font-mono text-sf-subtle\">\n                {index + 1}.\n              </span>\n              <div className=\"flex min-w-0 flex-col\">\n                <span className=\"text-sf-default\">{item.label}</span>\n                {item.description && (\n                  <span className=\"text-sf-subtle\">{item.description}</span>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {children}\n\n      {/* Feedback input */}\n      {isPending && showFeedback && (\n        <textarea\n          className=\"mx-0 min-h-[60px] resize-none rounded-md border border-sf-line bg-sf-base px-2.5 py-1.5 text-xs text-sf-default outline-none placeholder:text-sf-inactive focus:border-sf-ring\"\n          onChange={(e) => setFeedback(e.target.value)}\n          placeholder=\"Optional feedback…\"\n          value={feedback}\n        />\n      )}\n\n      {/* Action buttons */}\n      {isPending && (\n        <div className=\"flex items-center justify-end gap-2\">\n          <Button\n            onClick={handleReject}\n            size=\"sm\"\n            type=\"button\"\n            variant=\"ghost\"\n          >\n            {rejectLabel}\n          </Button>\n          <Button onClick={onApprove} size=\"sm\" type=\"button\" variant=\"primary\">\n            {approveLabel}\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n}\n\nAiApproval.displayName = \"AiApproval\";\n"],"mappings":";;;;;;;AAgBA,IAAa,0BAA0B;CACrC,MAAM;EACJ,MAAM;GAAE,SAAS;GAAI,aAAa;GAAsB;EACxD,MAAM;GAAE,SAAS;GAAI,aAAa;GAAiB;EACpD;CACD,QAAQ;EACN,SAAS;GAAE,SAAS;GAAI,aAAa;GAA0B;EAC/D,UAAU;GAAE,SAAS;GAAI,aAAa;GAAoB;EAC1D,UAAU;GAAE,SAAS;GAAI,aAAa;GAAoB;EAC3D;CACF;AAED,IAAa,kCAAkC;CAC7C,MAAM;CACN,QAAQ;CACT;AA6CD,IAAM,aAAoD;CACxD,MAAM;CACN,MAAM;CACP;AAED,IAAM,gBAGF;CACF,SAAS;EACP,MAAM;EACN,OAAO;EACP,WAAW;EACZ;CACD,UAAU;EACR,MAAM;EACN,OAAO;EACP,WAAW;EACZ;CACD,UAAU;EACR,MAAM;EACN,OAAO;EACP,WAAW;EACZ;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCD,SAAgB,WAAW,EACzB,OAAO,QACP,SAAS,WACT,OACA,aACA,MACA,OACA,WACA,UACA,eAAe,WACf,cAAc,UACd,eAAe,OACf,UACA,WACA,GAAG,SACe;CAClB,MAAM,CAAC,UAAU,eAAe,SAAS,GAAG;CAC5C,MAAM,YAAY,WAAW;CAE7B,MAAM,gBAAgB,QAAQ,WAAW;CACzC,MAAM,eAAe,cAAc;CACnC,MAAM,aAAa,aAAa;CAEhC,MAAM,eAAe,kBAAkB;AACrC,aAAW,eAAe,WAAW,KAAA,EAAU;IAC9C;EAAC;EAAU;EAAc;EAAS,CAAC;AAEtC,QACE,qBAAC,OAAD;EACE,WAAW,GACT,6EACA,CAAC,aAAa,cACd,UACD;EACD,GAAI;YANN;GASE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,OAAD;MACE,WAAW,GACT,sEACA,YAAY,iCAAiC,aAAa,UAC3D;gBAEA,YACC,oBAAC,eAAD;OAAe,WAAU;OAAS,QAAO;OAAS,CAAA,GAElD,oBAAC,YAAD;OAAY,WAAU;OAAS,QAAO;OAAS,CAAA;MAE7C,CAAA;KACN,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,QAAD;OAAM,WAAU;iBAAuC;OAAa,CAAA,EACnE,eACC,oBAAC,QAAD;OAAM,WAAU;iBAA0B;OAAmB,CAAA,CAE3D;;KACL,CAAC,aACA,oBAAC,QAAD;MACE,WAAW,GACT,wCACA,aAAa,UACd;gBAEA,aAAa;MACT,CAAA;KAEL;;GAGL,SAAS,MAAM,SAAS,KACvB,oBAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,MAAM,UAChB,qBAAC,OAAD;KAAmB,WAAU;eAA7B,CACE,qBAAC,QAAD;MAAM,WAAU;gBAAhB,CACG,QAAQ,GAAE,IACN;SACP,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,QAAD;OAAM,WAAU;iBAAmB,KAAK;OAAa,CAAA,EACpD,KAAK,eACJ,oBAAC,QAAD;OAAM,WAAU;iBAAkB,KAAK;OAAmB,CAAA,CAExD;QACF;OAVI,KAAK,GAUT,CACN;IACE,CAAA;GAGP;GAGA,aAAa,gBACZ,oBAAC,YAAD;IACE,WAAU;IACV,WAAW,MAAM,YAAY,EAAE,OAAO,MAAM;IAC5C,aAAY;IACZ,OAAO;IACP,CAAA;GAIH,aACC,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,SAAS;KACT,MAAK;KACL,MAAK;KACL,SAAQ;eAEP;KACM,CAAA,EACT,oBAAC,QAAD;KAAQ,SAAS;KAAW,MAAK;KAAK,MAAK;KAAS,SAAQ;eACzD;KACM,CAAA,CACL;;GAEJ;;;AAIV,WAAW,cAAc"}

package/dist/{ai-code-block-BgtIxtZZ.js → ai-code-block-CZtoL73R.js}

@@ -1,7 +1,7 @@
 "use client";
 import { t as cn } from "./cn-YROP2_ox.js";
-import { t as Button } from "./button-De0267YU.js";
-import { t as highlightToLines } from "./highlight-to-react-ClEfL81q.js";
+import { t as Button } from "./button-CO6-qPax.js";
+import { t as highlightToLines } from "./highlight-to-react-D0Yav4jk.js";
 import { createContext, memo, useContext, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { highlight } from "sugar-high";
@@ -107,4 +107,4 @@ function AiCodeBlockCopyButton({ onCopy, onError, timeout = 2e3, children, class
 //#endregion
 export { SF_AI_CODE_BLOCK_VARIANTS as i, AiCodeBlockCopyButton as n, SF_AI_CODE_BLOCK_DEFAULT_VARIANTS as r, AiCodeBlock as t };
 
-//# sourceMappingURL=ai-code-block-BgtIxtZZ.js.map
+//# sourceMappingURL=ai-code-block-CZtoL73R.js.map

package/dist/{ai-code-block-BgtIxtZZ.js.map → ai-code-block-CZtoL73R.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ai-code-block-BgtIxtZZ.js","names":[],"sources":["../src/components/ai-code-block/ai-code-block.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, HTMLAttributes, ReactNode } from \"react\";\nimport { createContext, memo, useContext, useState } from \"react\";\nimport { highlight } from \"sugar-high\";\n\nimport { cn } from \"../../utils/cn\";\nimport { highlightToLines } from \"../../utils/highlight-to-react\";\nimport { Button } from \"../button\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_CODE_BLOCK_VARIANTS = {} as const;\nexport const SF_AI_CODE_BLOCK_DEFAULT_VARIANTS = {} as const;\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ninterface AiCodeBlockContextValue {\n  code: string;\n}\n\nconst AiCodeBlockContext = createContext<AiCodeBlockContextValue>({ code: \"\" });\n\n// ─── AiCodeBlock ─────────────────────────────────────────────────────────────\n\nexport type AiCodeBlockProps = HTMLAttributes<HTMLDivElement> & {\n  /** The raw code string to display and make copyable. */\n  code: string;\n  /** Language identifier for syntax highlighting (display only, no highlighting applied). */\n  language?: string;\n  /** Show line numbers. @default false */\n  showLineNumbers?: boolean;\n  /** Extra content rendered in the top-right overlay (e.g. copy button). */\n  children?: ReactNode;\n};\n\n/**\n * Displays a code block with monospace formatting and an optional copy button.\n * Does not include a syntax highlighter — avoids the heavy `react-syntax-highlighter`\n * dependency. Wrap with `AiCodeBlockCopyButton` for clipboard support.\n *\n * @example\n * ```tsx\n * <AiCodeBlock code={`const x = 1;`} language=\"ts\">\n *   <AiCodeBlockCopyButton />\n * </AiCodeBlock>\n * ```\n */\nexport const AiCodeBlock = memo(\n  ({\n    code,\n    language,\n    showLineNumbers = false,\n    className,\n    children,\n    ...props\n  }: AiCodeBlockProps) => {\n    const highlightedLines = highlightToLines(highlight(code));\n\n    return (\n      <AiCodeBlockContext.Provider value={{ code }}>\n        <div\n          className={cn(\n            \"relative w-full overflow-hidden rounded-lg border border-sf-line bg-sf-recessed font-mono text-sm text-sf-default\",\n            className\n          )}\n          {...props}\n        >\n          {language && (\n            <div className=\"flex items-center justify-between border-b border-sf-line px-4 py-2\">\n              <span className=\"text-sf-subtle text-xs\">{language}</span>\n              {children && (\n                <div className=\"flex items-center gap-2\">{children}</div>\n              )}\n            </div>\n          )}\n          <div className=\"overflow-x-auto\">\n            <table className=\"w-full border-collapse\">\n              <tbody>\n                {highlightedLines.map((line, i) => (\n                  // biome-ignore lint/suspicious/noArrayIndexKey: line index is stable\n                  <tr key={i} className=\"leading-6\">\n                    {showLineNumbers && (\n                      <td className=\"select-none pr-4 pl-4 text-right text-sf-inactive\">\n                        {i + 1}\n                      </td>\n                    )}\n                    <td className={cn(\"pr-4\", !showLineNumbers && \"px-4\")}>\n                      <pre className=\"whitespace-pre\">{line}</pre>\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n          {!language && children && (\n            <div className=\"absolute top-2 right-2 flex items-center gap-2\">\n              {children}\n            </div>\n          )}\n        </div>\n      </AiCodeBlockContext.Provider>\n    );\n  },\n  (prev, next) =>\n    prev.code === next.code &&\n    prev.language === next.language &&\n    prev.showLineNumbers === next.showLineNumbers\n);\n\nAiCodeBlock.displayName = \"AiCodeBlock\";\n\n// ─── AiCodeBlockCopyButton ───────────────────────────────────────────────────\n\nexport type AiCodeBlockCopyButtonProps = ComponentProps<typeof Button> & {\n  /** Called after a successful copy. */\n  onCopy?: () => void;\n  /** Called if the clipboard API is unavailable or errors. */\n  onError?: (error: Error) => void;\n  /** How long (ms) to show the \"copied\" state. @default 2000 */\n  timeout?: number;\n};\n\n/**\n * Copy-to-clipboard button for use inside `AiCodeBlock`.\n * Must be a descendant of `AiCodeBlock` to access the code via context.\n *\n * @example\n * ```tsx\n * <AiCodeBlock code=\"const x = 1;\" language=\"ts\">\n *   <AiCodeBlockCopyButton />\n * </AiCodeBlock>\n * ```\n */\nexport function AiCodeBlockCopyButton({\n  onCopy,\n  onError,\n  timeout = 2000,\n  children,\n  className,\n  size = \"sm\",\n  variant = \"ghost\",\n  ...props\n}: AiCodeBlockCopyButtonProps) {\n  const [copied, setCopied] = useState(false);\n  const { code } = useContext(AiCodeBlockContext);\n\n  const handleCopy = async () => {\n    if (typeof navigator === \"undefined\" || !navigator.clipboard?.writeText) {\n      onError?.(new Error(\"Clipboard API not available\"));\n      return;\n    }\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      onCopy?.();\n      setTimeout(() => setCopied(false), timeout);\n    } catch (err) {\n      onError?.(err as Error);\n    }\n  };\n\n  return (\n    <Button\n      className={cn(\"shrink-0\", className)}\n      onClick={handleCopy}\n      size={size}\n      variant={variant}\n      {...props}\n    >\n      {children ?? (copied ? \"Copied\" : \"Copy\")}\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;AAYA,IAAa,4BAA4B,EAAE;AAC3C,IAAa,oCAAoC,EAAE;AAQnD,IAAM,qBAAqB,cAAuC,EAAE,MAAM,IAAI,CAAC;;;;;;;;;;;;;AA2B/E,IAAa,cAAc,MACxB,EACC,MACA,UACA,kBAAkB,OAClB,WACA,UACA,GAAG,YACmB;CACtB,MAAM,mBAAmB,iBAAiB,UAAU,KAAK,CAAC;AAE1D,QACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO,EAAE,MAAM;YAC1C,qBAAC,OAAD;GACE,WAAW,GACT,qHACA,UACD;GACD,GAAI;aALN;IAOG,YACC,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,QAAD;MAAM,WAAU;gBAA0B;MAAgB,CAAA,EACzD,YACC,oBAAC,OAAD;MAAK,WAAU;MAA2B;MAAe,CAAA,CAEvD;;IAER,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,SAAD;MAAO,WAAU;gBACf,oBAAC,SAAD,EAAA,UACG,iBAAiB,KAAK,MAAM,MAE3B,qBAAC,MAAD;OAAY,WAAU;iBAAtB,CACG,mBACC,oBAAC,MAAD;QAAI,WAAU;kBACX,IAAI;QACF,CAAA,EAEP,oBAAC,MAAD;QAAI,WAAW,GAAG,QAAQ,CAAC,mBAAmB,OAAO;kBACnD,oBAAC,OAAD;SAAK,WAAU;mBAAkB;SAAW,CAAA;QACzC,CAAA,CACF;SATI,EASJ,CACL,EACI,CAAA;MACF,CAAA;KACJ,CAAA;IACL,CAAC,YAAY,YACZ,oBAAC,OAAD;KAAK,WAAU;KACZ;KACG,CAAA;IAEJ;;EACsB,CAAA;IAGjC,MAAM,SACL,KAAK,SAAS,KAAK,QACnB,KAAK,aAAa,KAAK,YACvB,KAAK,oBAAoB,KAAK,gBACjC;AAED,YAAY,cAAc;;;;;;;;;;;;AAwB1B,SAAgB,sBAAsB,EACpC,QACA,SACA,UAAU,KACV,UACA,WACA,OAAO,MACP,UAAU,SACV,GAAG,SAC0B;CAC7B,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,EAAE,SAAS,WAAW,mBAAmB;CAE/C,MAAM,aAAa,YAAY;AAC7B,MAAI,OAAO,cAAc,eAAe,CAAC,UAAU,WAAW,WAAW;AACvE,6BAAU,IAAI,MAAM,8BAA8B,CAAC;AACnD;;AAEF,MAAI;AACF,SAAM,UAAU,UAAU,UAAU,KAAK;AACzC,aAAU,KAAK;AACf,aAAU;AACV,oBAAiB,UAAU,MAAM,EAAE,QAAQ;WACpC,KAAK;AACZ,aAAU,IAAa;;;AAI3B,QACE,oBAAC,QAAD;EACE,WAAW,GAAG,YAAY,UAAU;EACpC,SAAS;EACH;EACG;EACT,GAAI;YAEH,aAAa,SAAS,WAAW;EAC3B,CAAA"}
+{"version":3,"file":"ai-code-block-CZtoL73R.js","names":[],"sources":["../src/components/ai-code-block/ai-code-block.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, HTMLAttributes, ReactNode } from \"react\";\nimport { createContext, memo, useContext, useState } from \"react\";\nimport { highlight } from \"sugar-high\";\n\nimport { cn } from \"../../utils/cn\";\nimport { highlightToLines } from \"../../utils/highlight-to-react\";\nimport { Button } from \"../button\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_CODE_BLOCK_VARIANTS = {} as const;\nexport const SF_AI_CODE_BLOCK_DEFAULT_VARIANTS = {} as const;\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ninterface AiCodeBlockContextValue {\n  code: string;\n}\n\nconst AiCodeBlockContext = createContext<AiCodeBlockContextValue>({ code: \"\" });\n\n// ─── AiCodeBlock ─────────────────────────────────────────────────────────────\n\nexport type AiCodeBlockProps = HTMLAttributes<HTMLDivElement> & {\n  /** The raw code string to display and make copyable. */\n  code: string;\n  /** Language identifier for syntax highlighting (display only, no highlighting applied). */\n  language?: string;\n  /** Show line numbers. @default false */\n  showLineNumbers?: boolean;\n  /** Extra content rendered in the top-right overlay (e.g. copy button). */\n  children?: ReactNode;\n};\n\n/**\n * Displays a code block with monospace formatting and an optional copy button.\n * Does not include a syntax highlighter — avoids the heavy `react-syntax-highlighter`\n * dependency. Wrap with `AiCodeBlockCopyButton` for clipboard support.\n *\n * @example\n * ```tsx\n * <AiCodeBlock code={`const x = 1;`} language=\"ts\">\n *   <AiCodeBlockCopyButton />\n * </AiCodeBlock>\n * ```\n */\nexport const AiCodeBlock = memo(\n  ({\n    code,\n    language,\n    showLineNumbers = false,\n    className,\n    children,\n    ...props\n  }: AiCodeBlockProps) => {\n    const highlightedLines = highlightToLines(highlight(code));\n\n    return (\n      <AiCodeBlockContext.Provider value={{ code }}>\n        <div\n          className={cn(\n            \"relative w-full overflow-hidden rounded-lg border border-sf-line bg-sf-recessed font-mono text-sm text-sf-default\",\n            className\n          )}\n          {...props}\n        >\n          {language && (\n            <div className=\"flex items-center justify-between border-b border-sf-line px-4 py-2\">\n              <span className=\"text-sf-subtle text-xs\">{language}</span>\n              {children && (\n                <div className=\"flex items-center gap-2\">{children}</div>\n              )}\n            </div>\n          )}\n          <div className=\"overflow-x-auto\">\n            <table className=\"w-full border-collapse\">\n              <tbody>\n                {highlightedLines.map((line, i) => (\n                  // biome-ignore lint/suspicious/noArrayIndexKey: line index is stable\n                  <tr key={i} className=\"leading-6\">\n                    {showLineNumbers && (\n                      <td className=\"select-none pr-4 pl-4 text-right text-sf-inactive\">\n                        {i + 1}\n                      </td>\n                    )}\n                    <td className={cn(\"pr-4\", !showLineNumbers && \"px-4\")}>\n                      <pre className=\"whitespace-pre\">{line}</pre>\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n          {!language && children && (\n            <div className=\"absolute top-2 right-2 flex items-center gap-2\">\n              {children}\n            </div>\n          )}\n        </div>\n      </AiCodeBlockContext.Provider>\n    );\n  },\n  (prev, next) =>\n    prev.code === next.code &&\n    prev.language === next.language &&\n    prev.showLineNumbers === next.showLineNumbers\n);\n\nAiCodeBlock.displayName = \"AiCodeBlock\";\n\n// ─── AiCodeBlockCopyButton ───────────────────────────────────────────────────\n\nexport type AiCodeBlockCopyButtonProps = ComponentProps<typeof Button> & {\n  /** Called after a successful copy. */\n  onCopy?: () => void;\n  /** Called if the clipboard API is unavailable or errors. */\n  onError?: (error: Error) => void;\n  /** How long (ms) to show the \"copied\" state. @default 2000 */\n  timeout?: number;\n};\n\n/**\n * Copy-to-clipboard button for use inside `AiCodeBlock`.\n * Must be a descendant of `AiCodeBlock` to access the code via context.\n *\n * @example\n * ```tsx\n * <AiCodeBlock code=\"const x = 1;\" language=\"ts\">\n *   <AiCodeBlockCopyButton />\n * </AiCodeBlock>\n * ```\n */\nexport function AiCodeBlockCopyButton({\n  onCopy,\n  onError,\n  timeout = 2000,\n  children,\n  className,\n  size = \"sm\",\n  variant = \"ghost\",\n  ...props\n}: AiCodeBlockCopyButtonProps) {\n  const [copied, setCopied] = useState(false);\n  const { code } = useContext(AiCodeBlockContext);\n\n  const handleCopy = async () => {\n    if (typeof navigator === \"undefined\" || !navigator.clipboard?.writeText) {\n      onError?.(new Error(\"Clipboard API not available\"));\n      return;\n    }\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      onCopy?.();\n      setTimeout(() => setCopied(false), timeout);\n    } catch (err) {\n      onError?.(err as Error);\n    }\n  };\n\n  return (\n    <Button\n      className={cn(\"shrink-0\", className)}\n      onClick={handleCopy}\n      size={size}\n      variant={variant}\n      {...props}\n    >\n      {children ?? (copied ? \"Copied\" : \"Copy\")}\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;AAYA,IAAa,4BAA4B,EAAE;AAC3C,IAAa,oCAAoC,EAAE;AAQnD,IAAM,qBAAqB,cAAuC,EAAE,MAAM,IAAI,CAAC;;;;;;;;;;;;;AA2B/E,IAAa,cAAc,MACxB,EACC,MACA,UACA,kBAAkB,OAClB,WACA,UACA,GAAG,YACmB;CACtB,MAAM,mBAAmB,iBAAiB,UAAU,KAAK,CAAC;AAE1D,QACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO,EAAE,MAAM;YAC1C,qBAAC,OAAD;GACE,WAAW,GACT,qHACA,UACD;GACD,GAAI;aALN;IAOG,YACC,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,QAAD;MAAM,WAAU;gBAA0B;MAAgB,CAAA,EACzD,YACC,oBAAC,OAAD;MAAK,WAAU;MAA2B;MAAe,CAAA,CAEvD;;IAER,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,SAAD;MAAO,WAAU;gBACf,oBAAC,SAAD,EAAA,UACG,iBAAiB,KAAK,MAAM,MAE3B,qBAAC,MAAD;OAAY,WAAU;iBAAtB,CACG,mBACC,oBAAC,MAAD;QAAI,WAAU;kBACX,IAAI;QACF,CAAA,EAEP,oBAAC,MAAD;QAAI,WAAW,GAAG,QAAQ,CAAC,mBAAmB,OAAO;kBACnD,oBAAC,OAAD;SAAK,WAAU;mBAAkB;SAAW,CAAA;QACzC,CAAA,CACF;SATI,EASJ,CACL,EACI,CAAA;MACF,CAAA;KACJ,CAAA;IACL,CAAC,YAAY,YACZ,oBAAC,OAAD;KAAK,WAAU;KACZ;KACG,CAAA;IAEJ;;EACsB,CAAA;IAGjC,MAAM,SACL,KAAK,SAAS,KAAK,QACnB,KAAK,aAAa,KAAK,YACvB,KAAK,oBAAoB,KAAK,gBACjC;AAED,YAAY,cAAc;;;;;;;;;;;;AAwB1B,SAAgB,sBAAsB,EACpC,QACA,SACA,UAAU,KACV,UACA,WACA,OAAO,MACP,UAAU,SACV,GAAG,SAC0B;CAC7B,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,EAAE,SAAS,WAAW,mBAAmB;CAE/C,MAAM,aAAa,YAAY;AAC7B,MAAI,OAAO,cAAc,eAAe,CAAC,UAAU,WAAW,WAAW;AACvE,6BAAU,IAAI,MAAM,8BAA8B,CAAC;AACnD;;AAEF,MAAI;AACF,SAAM,UAAU,UAAU,UAAU,KAAK;AACzC,aAAU,KAAK;AACf,aAAU;AACV,oBAAiB,UAAU,MAAM,EAAE,QAAQ;WACpC,KAAK;AACZ,aAAU,IAAa;;;AAI3B,QACE,oBAAC,QAAD;EACE,WAAW,GAAG,YAAY,UAAU;EACpC,SAAS;EACH;EACG;EACT,GAAI;YAEH,aAAa,SAAS,WAAW;EAC3B,CAAA"}

package/dist/ai-conversation-Cc7WlaBg.js

@@ -0,0 +1,242 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { a as prepare, t as layout } from "./layout-DJHMMap2.js";
+import { t as Button } from "./button-CO6-qPax.js";
+import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { ArrowDownIcon } from "@phosphor-icons/react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/components/ai-conversation/ai-conversation.tsx
+var SF_AI_CONVERSATION_VARIANTS = {};
+var SF_AI_CONVERSATION_DEFAULT_VARIANTS = {};
+/**
+* Outer scroll container for a conversation. Sticks to the bottom as new
+* messages are added. Pair with `AiConversationContent` and optionally
+* `AiConversationScrollButton`.
+*
+* @example
+* ```tsx
+* <AiConversation ref={scrollRef}>
+*   <AiConversationContent>
+*     {messages.map(m => <AiMessage key={m.id} from={m.role}>...</AiMessage>)}
+*   </AiConversationContent>
+*   <AiConversationScrollButton scrollRef={scrollRef} />
+* </AiConversation>
+* ```
+*/
+var AiConversation = forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("relative flex-1 overflow-y-auto", className),
+		role: "log",
+		"aria-live": "polite",
+		"aria-label": "Conversation",
+		...props,
+		children
+	});
+});
+AiConversation.displayName = "AiConversation";
+/**
+* Inner content wrapper with padding. Place message components inside here.
+*/
+function AiConversationContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-0 overscroll-y-none p-4", className),
+		...props,
+		children
+	});
+}
+/**
+* Floating "scroll to bottom" button. Appears when the user has scrolled up
+* more than `threshold` pixels from the bottom.
+*/
+function AiConversationScrollButton({ scrollRef, threshold = 100, className, onClick, ...props }) {
+	const [show, setShow] = useState(false);
+	useEffect(() => {
+		const el = scrollRef?.current;
+		if (!el) return;
+		const check = () => {
+			setShow(el.scrollHeight - el.scrollTop - el.clientHeight > threshold);
+		};
+		check();
+		el.addEventListener("scroll", check, { passive: true });
+		return () => el.removeEventListener("scroll", check);
+	}, [scrollRef, threshold]);
+	const handleClick = useCallback((e) => {
+		scrollRef?.current?.scrollTo({
+			top: scrollRef.current.scrollHeight,
+			behavior: "smooth"
+		});
+		onClick?.(e);
+	}, [scrollRef, onClick]);
+	if (scrollRef && !show) return null;
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": "Scroll to bottom",
+		className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full shadow-md", className),
+		onClick: handleClick,
+		size: "sm",
+		variant: "secondary",
+		...props,
+		children: /* @__PURE__ */ jsx(ArrowDownIcon, { className: "size-4" })
+	});
+}
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function useConversationVirtualizer({ scrollRef, items, estimateSize = 80, overscan = 8, stickThreshold = 40 }) {
+	const [isAtBottom, setIsAtBottom] = useState(true);
+	const isAtBottomRef = useRef(true);
+	const prevCountRef = useRef(items.length);
+	const [containerWidth, setContainerWidth] = useState(0);
+	const [fontsReady, setFontsReady] = useState(() => {
+		if (typeof document === "undefined") return true;
+		return document.fonts?.status === "loaded";
+	});
+	useEffect(() => {
+		if (fontsReady) return;
+		if (typeof document === "undefined" || !document.fonts) {
+			setFontsReady(true);
+			return;
+		}
+		let cancelled = false;
+		document.fonts.ready.then(() => {
+			if (!cancelled) setFontsReady(true);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [fontsReady]);
+	useIsomorphicLayoutEffect(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		const updateWidth = () => {
+			const style = window.getComputedStyle(el);
+			const padLeft = parseFloat(style.paddingLeft) || 0;
+			const padRight = parseFloat(style.paddingRight) || 0;
+			setContainerWidth(el.clientWidth - padLeft - padRight);
+		};
+		updateWidth();
+		const observer = new ResizeObserver(updateWidth);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [scrollRef]);
+	useEffect(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		const check = () => {
+			const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= stickThreshold;
+			isAtBottomRef.current = atBottom;
+			setIsAtBottom(atBottom);
+		};
+		check();
+		el.addEventListener("scroll", check, { passive: true });
+		return () => el.removeEventListener("scroll", check);
+	}, [scrollRef, stickThreshold]);
+	const prevTotalSizeRef = useRef(0);
+	const virtualizer = useVirtualizer({
+		count: items.length,
+		getScrollElement: () => scrollRef.current,
+		estimateSize: (index) => {
+			const item = items[index];
+			if (!item?.measure || containerWidth <= 0) return estimateSize;
+			const { text, font = "14px sans-serif", lineHeight = 20, padding = 0, widthFraction = 1, horizontalPadding = 0, gapAfter = 0, whiteSpace = "normal", wordBreak = "normal" } = item.measure;
+			const contentWidth = Math.max(40, Math.floor(containerWidth * widthFraction) - horizontalPadding);
+			try {
+				const { height } = layout(prepare(text, font, {
+					whiteSpace,
+					wordBreak
+				}), contentWidth, lineHeight);
+				return height + padding + gapAfter;
+			} catch {
+				return estimateSize;
+			}
+		},
+		overscan,
+		getItemKey: (index) => items[index]?.key ?? index
+	});
+	useEffect(() => {
+		if (containerWidth > 0) virtualizer.measure();
+	}, [
+		containerWidth,
+		items,
+		virtualizer,
+		fontsReady
+	]);
+	virtualizer.shouldAdjustScrollPositionOnItemSizeChange = () => isAtBottomRef.current;
+	const virtualItems = virtualizer.getVirtualItems();
+	const totalSize = virtualizer.getTotalSize();
+	useEffect(() => {
+		const count = items.length;
+		if (count > prevCountRef.current && isAtBottomRef.current) requestAnimationFrame(() => {
+			virtualizer.scrollToIndex(count - 1, {
+				align: "end",
+				behavior: "smooth"
+			});
+		});
+		prevCountRef.current = count;
+	}, [items.length, virtualizer]);
+	useEffect(() => {
+		const prev = prevTotalSizeRef.current;
+		prevTotalSizeRef.current = totalSize;
+		if (!isAtBottomRef.current || totalSize <= prev) return;
+		const el = scrollRef.current;
+		if (!el) return;
+		const dist = el.scrollHeight - el.scrollTop - el.clientHeight;
+		if (dist > 1 && dist < 300) el.scrollTop = el.scrollHeight - el.clientHeight;
+	}, [totalSize, scrollRef]);
+	const scrollToBottom = useCallback((behavior = "smooth") => {
+		if (items.length === 0) return;
+		virtualizer.scrollToIndex(items.length - 1, {
+			align: "end",
+			behavior
+		});
+	}, [virtualizer, items.length]);
+	const measureRef = useCallback((node) => {
+		if (node) virtualizer.measureElement(node);
+	}, [virtualizer]);
+	return {
+		virtualizer,
+		virtualItems,
+		totalSize,
+		isAtBottom,
+		scrollToBottom,
+		measureRef,
+		getMeasureRef: useCallback((index) => {
+			if (items[index]?.measure) return null;
+			return measureRef;
+		}, [items, measureRef])
+	};
+}
+//#endregion
+//#region src/components/ai-conversation/measurement-constants.ts
+/**
+* Shared pretext measurement constants for `useConversationVirtualizer`.
+*
+* These match the rendered styling of `<AiMessage>` + `<AiMessageContent>`
+* (text-sm = 14px / line-height 20px, user bubble `max-w-[70%]` with `px-4 py-3`).
+*
+* Anywhere that builds `ConversationItem.measure` for plain-text AI chat messages
+* should import from here so calibration stays in one place. If production CSS
+* for `<AiMessage>` ever changes (font size, padding, bubble width), update these
+* constants — pretext predictions will then automatically follow.
+*/
+/** CSS `font` shorthand matching `text-sm` rendering. */
+var SF_AI_MEASURE_FONT = "14px \"Inter\", ui-sans-serif, system-ui, sans-serif";
+/** Line height in pixels, matching `text-sm`. */
+var SF_AI_MEASURE_LINE_HEIGHT = 20;
+/** User bubbles: `max-w-[70%]`. */
+var SF_AI_USER_WIDTH_FRACTION = .7;
+/** User bubbles: `px-4` → 16px × 2 horizontal padding. */
+var SF_AI_USER_HORIZONTAL_PADDING = 32;
+/** User bubbles: `py-3` → 12px × 2 vertical padding. */
+var SF_AI_USER_VERTICAL_PADDING = 24;
+/** Assistant text: full width column, no bubble. */
+var SF_AI_ASSISTANT_WIDTH_FRACTION = 1;
+/** Assistant text: no horizontal padding inside the bubble. */
+var SF_AI_ASSISTANT_HORIZONTAL_PADDING = 0;
+/** Assistant text: no vertical padding inside the bubble. */
+var SF_AI_ASSISTANT_VERTICAL_PADDING = 0;
+/** Default gap between conversation items. */
+var SF_AI_DEFAULT_MESSAGE_GAP = 12;
+//#endregion
+export { SF_AI_MEASURE_FONT as a, SF_AI_USER_VERTICAL_PADDING as c, AiConversationContent as d, AiConversationScrollButton as f, useConversationVirtualizer as h, SF_AI_DEFAULT_MESSAGE_GAP as i, SF_AI_USER_WIDTH_FRACTION as l, SF_AI_CONVERSATION_VARIANTS as m, SF_AI_ASSISTANT_VERTICAL_PADDING as n, SF_AI_MEASURE_LINE_HEIGHT as o, SF_AI_CONVERSATION_DEFAULT_VARIANTS as p, SF_AI_ASSISTANT_WIDTH_FRACTION as r, SF_AI_USER_HORIZONTAL_PADDING as s, SF_AI_ASSISTANT_HORIZONTAL_PADDING as t, AiConversation as u };
+
+//# sourceMappingURL=ai-conversation-Cc7WlaBg.js.map

package/dist/ai-conversation-Cc7WlaBg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-conversation-Cc7WlaBg.js","names":[],"sources":["../src/components/ai-conversation/ai-conversation.tsx","../src/components/ai-conversation/measurement-constants.ts"],"sourcesContent":["\"use client\";\n\nimport { ArrowDownIcon } from \"@phosphor-icons/react\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport type { Virtualizer, VirtualItem } from \"@tanstack/react-virtual\";\nimport { layout, prepare } from \"@chenglou/pretext\";\nimport type { ComponentProps, ReactNode, RefObject } from \"react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\nimport { Button } from \"../button\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_CONVERSATION_VARIANTS = {} as const;\nexport const SF_AI_CONVERSATION_DEFAULT_VARIANTS = {} as const;\n\n// ─── AiConversation ──────────────────────────────────────────────────────────\n\nexport type AiConversationProps = ComponentProps<\"div\">;\n\n/**\n * Outer scroll container for a conversation. Sticks to the bottom as new\n * messages are added. Pair with `AiConversationContent` and optionally\n * `AiConversationScrollButton`.\n *\n * @example\n * ```tsx\n * <AiConversation ref={scrollRef}>\n *   <AiConversationContent>\n *     {messages.map(m => <AiMessage key={m.id} from={m.role}>...</AiMessage>)}\n *   </AiConversationContent>\n *   <AiConversationScrollButton scrollRef={scrollRef} />\n * </AiConversation>\n * ```\n */\nexport const AiConversation = forwardRef<HTMLDivElement, AiConversationProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"relative flex-1 overflow-y-auto\", className)}\n        role=\"log\"\n        aria-live=\"polite\"\n        aria-label=\"Conversation\"\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nAiConversation.displayName = \"AiConversation\";\n\n// ─── AiConversationContent ───────────────────────────────────────────────────\n\nexport type AiConversationContentProps = ComponentProps<\"div\">;\n\n/**\n * Inner content wrapper with padding. Place message components inside here.\n */\nexport function AiConversationContent({\n  className,\n  children,\n  ...props\n}: AiConversationContentProps) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-0 overscroll-y-none p-4\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ─── AiConversationScrollButton ──────────────────────────────────────────────\n\nexport type AiConversationScrollButtonProps = ComponentProps<typeof Button> & {\n  /**\n   * Ref to the scroll container (the `AiConversation` element).\n   * When omitted, the button is always visible.\n   */\n  scrollRef?: RefObject<HTMLElement | null>;\n  /** Scroll threshold in pixels from bottom to show the button. @default 100 */\n  threshold?: number;\n};\n\n/**\n * Floating \"scroll to bottom\" button. Appears when the user has scrolled up\n * more than `threshold` pixels from the bottom.\n */\nexport function AiConversationScrollButton({\n  scrollRef,\n  threshold = 100,\n  className,\n  onClick,\n  ...props\n}: AiConversationScrollButtonProps) {\n  const [show, setShow] = useState(false);\n\n  useEffect(() => {\n    const el = scrollRef?.current;\n    if (!el) return;\n\n    const check = () => {\n      const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;\n      setShow(distFromBottom > threshold);\n    };\n\n    check();\n    el.addEventListener(\"scroll\", check, { passive: true });\n    return () => el.removeEventListener(\"scroll\", check);\n  }, [scrollRef, threshold]);\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      scrollRef?.current?.scrollTo({\n        top: scrollRef.current.scrollHeight,\n        behavior: \"smooth\",\n      });\n      onClick?.(e);\n    },\n    [scrollRef, onClick]\n  );\n\n  if (scrollRef && !show) return null;\n\n  return (\n    <Button\n      aria-label=\"Scroll to bottom\"\n      className={cn(\n        \"absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full shadow-md\",\n        className\n      )}\n      onClick={handleClick}\n      size=\"sm\"\n      variant=\"secondary\"\n      {...props}\n    >\n      <ArrowDownIcon className=\"size-4\" />\n    </Button>\n  );\n}\n\n// ─── Virtualized Conversation ────────────────────────────────────────────────\n\n/** Measurement spec for predictive height calculation using pretext. */\nexport interface ConversationItemMeasureSpec {\n  /** Text content to measure */\n  text: string;\n  /** CSS font shorthand (e.g. \"14px Inter, sans-serif\"). Auto-detected if omitted. */\n  font?: string;\n  /** Line height in pixels. Auto-detected if omitted. */\n  lineHeight?: number;\n  /** Additional vertical padding (top + bottom) in pixels @default 0 */\n  padding?: number;\n  /**\n   * Fraction of column width this item occupies (0-1). Used to compute the\n   * actual content width for items that are constrained (e.g. user message\n   * bubbles at max-w-[70%]). @default 1\n   */\n  widthFraction?: number;\n  /**\n   * Horizontal padding (left + right) inside the content box, subtracted from\n   * the available width before line wrapping. @default 0\n   */\n  horizontalPadding?: number;\n  /**\n   * Margin below this item (gap to next item). @default 0\n   */\n  gapAfter?: number;\n  /**\n   * White-space handling — must match the rendered CSS. Use `\"pre-wrap\"` when\n   * the rendered content preserves explicit newlines (e.g. plain text inside\n   * a <pre> or `whitespace-pre-wrap` div). @default \"normal\"\n   */\n  whiteSpace?: \"normal\" | \"pre-wrap\";\n  /**\n   * Word-break handling — match CSS `word-break`. Use `\"keep-all\"` for CJK\n   * text that should not break mid-word. @default \"normal\"\n   */\n  wordBreak?: \"normal\" | \"keep-all\";\n}\n\n/** A single item in the virtualized conversation list. */\nexport interface ConversationItem {\n  /** Unique key for this item. */\n  key: string;\n  /**\n   * Render the item content. The virtualizer handles measurement and\n   * positioning on the wrapper — just return the content.\n   */\n  render: () => ReactNode;\n  /**\n   * Optional predictive height measurement. When provided, the virtualizer\n   * uses pretext to compute exact height without DOM measurement, eliminating\n   * layout shift during streaming. Falls back to estimateSize + DOM measurement\n   * when omitted.\n   *\n   * **Attach this only when rendering plain text** (no markdown). If your\n   * `render` output uses `<AiResponse>` or any rich-content component whose\n   * blocks have varying typography (headings, code, lists, blockquotes), omit\n   * `measure` to let the virtualizer use DOM measurement instead. Pretext\n   * predicts heights from a single (font, line-height) pair and cannot\n   * accurately model multi-block markdown.\n   *\n   * Plain-text + `measure` gives jitter-free virtualization (no estimate-then-\n   * adjust feedback loop). Rich content + DOM measurement is rendering-correct\n   * but slightly less smooth on first paint.\n   *\n   * For streaming items, update `measure.text` as text grows so the virtualizer\n   * can recalculate height per tick (rebuild the `items` array with the latest\n   * text on each token arrival).\n   */\n  measure?: ConversationItemMeasureSpec;\n}\n\nexport interface UseConversationVirtualizerOptions {\n  /** Ref to the scroll container element. */\n  scrollRef: RefObject<HTMLElement | null>;\n  /** The conversation items to virtualize. */\n  items: ConversationItem[];\n  /**\n   * Estimated height of a single item in pixels.\n   * Used before measurement. Doesn't need to be exact.\n   * @default 80\n   */\n  estimateSize?: number;\n  /**\n   * Number of items to render beyond the visible area.\n   * @default 8\n   */\n  overscan?: number;\n  /**\n   * Pixel distance from bottom to consider \"at bottom\" for stick-to-bottom.\n   * @default 40\n   */\n  stickThreshold?: number;\n}\n\nexport interface UseConversationVirtualizerReturn {\n  /** The TanStack virtualizer instance. */\n  virtualizer: Virtualizer<HTMLElement, Element>;\n  /** The virtual items to render. */\n  virtualItems: VirtualItem[];\n  /** Total measured/estimated height of all items. */\n  totalSize: number;\n  /** Whether the user is currently at the bottom of the conversation. */\n  isAtBottom: boolean;\n  /** Smoothly scroll to the bottom. */\n  scrollToBottom: (behavior?: ScrollBehavior) => void;\n  /**\n   * Get the measurement ref for a virtual item by index.\n   * @deprecated Use `getMeasureRef(index)` instead to respect predictive heights.\n   */\n  measureRef: (node: HTMLElement | null) => void;\n  /**\n   * Get the measurement ref for a specific item index.\n   * Returns `null` for items with predictive height (no DOM measurement needed),\n   * or the measurement callback for legacy items.\n   */\n  getMeasureRef: (index: number) => ((node: HTMLElement | null) => void) | null;\n}\n\n/**\n * `useConversationVirtualizer` — virtualizes a conversation list with\n * dynamic item heights and automatic stick-to-bottom behavior.\n *\n * Built on `@tanstack/react-virtual`. Items are measured dynamically via\n * `ResizeObserver`, so tool calls expanding, subagents collapsing, and\n * streaming text growing all work correctly.\n *\n * **Stick-to-bottom**: When the user is scrolled to (or near) the bottom,\n * new items and item resizes automatically keep the viewport pinned to the\n * bottom. When the user scrolls up, stick-to-bottom disengages until they\n * scroll back down.\n *\n * @example\n * ```tsx\n * const { virtualItems, totalSize, measureRef, isAtBottom, scrollToBottom } =\n *   useConversationVirtualizer({ scrollRef, items });\n *\n * return (\n *   <AiConversation ref={scrollRef}>\n *     <div style={{ height: totalSize, position: \"relative\" }}>\n *       {virtualItems.map((vi) => {\n *         const item = items[vi.index];\n *         return (\n *           <div key={item.key} ref={measureRef} data-index={vi.index}\n *             style={{ position: \"absolute\", top: vi.start, width: \"100%\" }}>\n *             {item.render()}\n *           </div>\n *         );\n *       })}\n *     </div>\n *     {!isAtBottom && <button onClick={() => scrollToBottom()}>↓</button>}\n *   </AiConversation>\n * );\n * ```\n */\nconst isSSR = typeof window === \"undefined\";\nconst useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;\n\nexport function useConversationVirtualizer({\n  scrollRef,\n  items,\n  estimateSize = 80,\n  overscan = 8,\n  stickThreshold = 40,\n}: UseConversationVirtualizerOptions): UseConversationVirtualizerReturn {\n  const [isAtBottom, setIsAtBottom] = useState(true);\n  const isAtBottomRef = useRef(true);\n  const prevCountRef = useRef(items.length);\n\n  // Track container width for predictive height calculation\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  // Track whether webfonts are ready. Pretext measures via canvas which uses\n  // the browser font engine — if Inter (or any custom font) hasn't loaded\n  // yet, the canvas falls back to system-ui and predictions diverge from the\n  // rendered DOM. Once fonts.ready resolves we re-trigger measurement.\n  const [fontsReady, setFontsReady] = useState(() => {\n    if (typeof document === \"undefined\") return true;\n    // `document.fonts.status === \"loaded\"` means all current FontFaces are\n    // loaded. If still \"loading\" we wait for fonts.ready below.\n    return document.fonts?.status === \"loaded\";\n  });\n\n  useEffect(() => {\n    if (fontsReady) return;\n    if (typeof document === \"undefined\" || !document.fonts) {\n      setFontsReady(true);\n      return;\n    }\n    let cancelled = false;\n    document.fonts.ready.then(() => {\n      if (!cancelled) setFontsReady(true);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [fontsReady]);\n\n  useIsomorphicLayoutEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    const updateWidth = () => {\n      // clientWidth excludes scrollbars but includes padding.\n      // Subtract horizontal padding to get the actual content width.\n      const style = window.getComputedStyle(el);\n      const padLeft = parseFloat(style.paddingLeft) || 0;\n      const padRight = parseFloat(style.paddingRight) || 0;\n      setContainerWidth(el.clientWidth - padLeft - padRight);\n    };\n\n    updateWidth();\n\n    const observer = new ResizeObserver(updateWidth);\n    observer.observe(el);\n\n    return () => observer.disconnect();\n  }, [scrollRef]);\n\n  // Track whether user is at the bottom\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    const check = () => {\n      const dist = el.scrollHeight - el.scrollTop - el.clientHeight;\n      const atBottom = dist <= stickThreshold;\n      isAtBottomRef.current = atBottom;\n      setIsAtBottom(atBottom);\n    };\n\n    check();\n    el.addEventListener(\"scroll\", check, { passive: true });\n    return () => el.removeEventListener(\"scroll\", check);\n  }, [scrollRef, stickThreshold]);\n\n  // Track the previous totalSize so we can detect growth from item resizes\n  const prevTotalSizeRef = useRef(0);\n\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => scrollRef.current as HTMLElement | null,\n    estimateSize: (index) => {\n      const item = items[index];\n      if (!item?.measure || containerWidth <= 0) {\n        return estimateSize;\n      }\n      const {\n        text,\n        font = \"14px sans-serif\",\n        lineHeight = 20,\n        padding = 0,\n        widthFraction = 1,\n        horizontalPadding = 0,\n        gapAfter = 0,\n        whiteSpace = \"normal\",\n        wordBreak = \"normal\",\n      } = item.measure;\n\n      // Apply the same width constraints as the rendered message bubble.\n      const contentWidth = Math.max(\n        40,\n        Math.floor(containerWidth * widthFraction) - horizontalPadding\n      );\n\n      try {\n        const prepared = prepare(text, font, { whiteSpace, wordBreak });\n        const { height } = layout(prepared, contentWidth, lineHeight);\n        return height + padding + gapAfter;\n      } catch {\n        return estimateSize;\n      }\n    },\n    overscan,\n    getItemKey: (index) => items[index]?.key ?? index,\n  });\n\n  // When container width, item measurement specs, or font-readiness change,\n  // force TanStack to recompute sizes through `estimateSize`. For predictive\n  // rows this calls pretext again and still skips DOM measurement.\n  useEffect(() => {\n    if (containerWidth > 0) {\n      virtualizer.measure();\n    }\n  }, [containerWidth, items, virtualizer, fontsReady]);\n\n  // When items resize (streaming text, collapsible expand) and we're at\n  // bottom, adjust scroll so the bottom stays pinned.\n  virtualizer.shouldAdjustScrollPositionOnItemSizeChange = () =>\n    isAtBottomRef.current;\n\n  const virtualItems = virtualizer.getVirtualItems();\n  const totalSize = virtualizer.getTotalSize();\n\n  // When new items are added and we're at bottom, scroll to the end\n  useEffect(() => {\n    const count = items.length;\n    if (count > prevCountRef.current && isAtBottomRef.current) {\n      requestAnimationFrame(() => {\n        virtualizer.scrollToIndex(count - 1, {\n          align: \"end\",\n          behavior: \"smooth\",\n        });\n      });\n    }\n    prevCountRef.current = count;\n  }, [items.length, virtualizer]);\n\n  // When totalSize grows (item content expanded, streaming text grew)\n  // and we're stuck to bottom, smoothly follow by scrolling down.\n  // This complements shouldAdjustScrollPositionOnItemSizeChange which\n  // handles the instantaneous adjustment — this handles the smooth follow.\n  useEffect(() => {\n    const prev = prevTotalSizeRef.current;\n    prevTotalSizeRef.current = totalSize;\n\n    if (!isAtBottomRef.current || totalSize <= prev) return;\n\n    const el = scrollRef.current;\n    if (!el) return;\n\n    // Only nudge if we're slightly off — the shouldAdjust callback handles\n    // most cases, but measurement batching can leave a small gap.\n    const dist = el.scrollHeight - el.scrollTop - el.clientHeight;\n    if (dist > 1 && dist < 300) {\n      el.scrollTop = el.scrollHeight - el.clientHeight;\n    }\n  }, [totalSize, scrollRef]);\n\n  const scrollToBottom = useCallback(\n    (behavior: ScrollBehavior = \"smooth\") => {\n      if (items.length === 0) return;\n      virtualizer.scrollToIndex(items.length - 1, { align: \"end\", behavior });\n    },\n    [virtualizer, items.length]\n  );\n\n  const measureRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (node) virtualizer.measureElement(node);\n    },\n    [virtualizer]\n  );\n\n  // For items with predictive height, return null so TanStack doesn't remeasure.\n  // For legacy items without measure spec, return the measurement callback.\n  const getMeasureRef = useCallback(\n    (index: number): ((node: HTMLElement | null) => void) | null => {\n      const item = items[index];\n      if (item?.measure) {\n        return null; // Predicted height — no DOM measurement needed\n      }\n      return measureRef;\n    },\n    [items, measureRef]\n  );\n\n  return {\n    virtualizer,\n    virtualItems,\n    totalSize,\n    isAtBottom,\n    scrollToBottom,\n    measureRef,\n    getMeasureRef,\n  };\n}\n","/**\n * Shared pretext measurement constants for `useConversationVirtualizer`.\n *\n * These match the rendered styling of `<AiMessage>` + `<AiMessageContent>`\n * (text-sm = 14px / line-height 20px, user bubble `max-w-[70%]` with `px-4 py-3`).\n *\n * Anywhere that builds `ConversationItem.measure` for plain-text AI chat messages\n * should import from here so calibration stays in one place. If production CSS\n * for `<AiMessage>` ever changes (font size, padding, bubble width), update these\n * constants — pretext predictions will then automatically follow.\n */\n\n/** CSS `font` shorthand matching `text-sm` rendering. */\nexport const SF_AI_MEASURE_FONT =\n  '14px \"Inter\", ui-sans-serif, system-ui, sans-serif';\n\n/** Line height in pixels, matching `text-sm`. */\nexport const SF_AI_MEASURE_LINE_HEIGHT = 20;\n\n/** User bubbles: `max-w-[70%]`. */\nexport const SF_AI_USER_WIDTH_FRACTION = 0.7;\n\n/** User bubbles: `px-4` → 16px × 2 horizontal padding. */\nexport const SF_AI_USER_HORIZONTAL_PADDING = 32;\n\n/** User bubbles: `py-3` → 12px × 2 vertical padding. */\nexport const SF_AI_USER_VERTICAL_PADDING = 24;\n\n/** Assistant text: full width column, no bubble. */\nexport const SF_AI_ASSISTANT_WIDTH_FRACTION = 1;\n\n/** Assistant text: no horizontal padding inside the bubble. */\nexport const SF_AI_ASSISTANT_HORIZONTAL_PADDING = 0;\n\n/** Assistant text: no vertical padding inside the bubble. */\nexport const SF_AI_ASSISTANT_VERTICAL_PADDING = 0;\n\n/** Default gap between conversation items. */\nexport const SF_AI_DEFAULT_MESSAGE_GAP = 12;\n"],"mappings":"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"}

package/dist/{ai-info-banner-uFxHHwBA.js → ai-info-banner-C7EWPBj7.js}

@@ -1,5 +1,6 @@
 "use client";
 import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Text } from "./text-Cqryz7rk.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowsClockwiseIcon, InfoIcon, WarningCircleIcon } from "@phosphor-icons/react";
 //#region src/components/ai-info-banner/ai-info-banner.tsx
@@ -63,8 +64,11 @@ function AiInfoBanner({ level = "info", icon, children, className, ...props }) {
 		className: cn("flex items-center justify-center gap-2 border-y px-4 py-1.5", config.borderClassName, className),
 		role: level === "error" ? "alert" : "status",
 		...props,
-		children: [/* @__PURE__ */ jsx(IconComponent, { className: cn("size-3.5 shrink-0", config.iconClassName) }), /* @__PURE__ */ jsx("span", {
-			className: "text-xs text-sf-subtle",
+		children: [/* @__PURE__ */ jsx(IconComponent, { className: cn("size-3.5 shrink-0", config.iconClassName) }), /* @__PURE__ */ jsx(Text, {
+			size: "xs",
+			variant: "secondary",
+			wrap: "balance",
+			as: "span",
 			children
 		})]
 	});
@@ -73,4 +77,4 @@ AiInfoBanner.displayName = "AiInfoBanner";
 //#endregion
 export { SF_AI_INFO_BANNER_DEFAULT_VARIANTS as n, SF_AI_INFO_BANNER_VARIANTS as r, AiInfoBanner as t };
 
-//# sourceMappingURL=ai-info-banner-uFxHHwBA.js.map
+//# sourceMappingURL=ai-info-banner-C7EWPBj7.js.map

package/dist/ai-info-banner-C7EWPBj7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-info-banner-C7EWPBj7.js","names":[],"sources":["../src/components/ai-info-banner/ai-info-banner.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  InfoIcon,\n  WarningCircleIcon,\n  ArrowsClockwiseIcon,\n} from \"@phosphor-icons/react\";\nimport type { ElementType, HTMLAttributes, ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Text } from \"../text\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_INFO_BANNER_VARIANTS = {\n  level: {\n    info: { classes: \"\", description: \"Informational notice\" },\n    error: { classes: \"\", description: \"Error notice\" },\n    change: {\n      classes: \"\",\n      description: \"State change notice (model/mode switch)\",\n    },\n  },\n} as const;\n\nexport const SF_AI_INFO_BANNER_DEFAULT_VARIANTS = {\n  level: \"info\",\n} as const;\n\nexport type SFAiInfoBannerLevel = keyof typeof SF_AI_INFO_BANNER_VARIANTS.level;\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type AiInfoBannerProps = HTMLAttributes<HTMLDivElement> & {\n  /** Banner level controls icon and color treatment. */\n  level?: SFAiInfoBannerLevel;\n  /** Custom icon override. */\n  icon?: ElementType;\n  /** Content to display. */\n  children: ReactNode;\n};\n\n// ─── Level config ─────────────────────────────────────────────────────────────\n\nconst LEVEL_CONFIG: Record<\n  SFAiInfoBannerLevel,\n  { icon: ElementType; iconClassName: string; borderClassName: string }\n> = {\n  info: {\n    icon: InfoIcon,\n    iconClassName: \"text-sf-info\",\n    borderClassName: \"border-sf-info/20\",\n  },\n  error: {\n    icon: WarningCircleIcon,\n    iconClassName: \"text-sf-danger\",\n    borderClassName: \"border-sf-danger/20\",\n  },\n  change: {\n    icon: ArrowsClockwiseIcon,\n    iconClassName: \"text-sf-subtle\",\n    borderClassName: \"border-sf-line\",\n  },\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Inline conversation banner for system notices. Renders as a compact,\n * horizontally centered divider-like notice rather than a chat bubble.\n *\n * Maps to harness events: `error`, `info`, `mode_changed`, `model_changed`.\n *\n * @example\n * ```tsx\n * <AiInfoBanner level=\"error\">\n *   Connection lost. Retrying in 3s…\n * </AiInfoBanner>\n *\n * <AiInfoBanner level=\"change\">\n *   Switched to claude-opus-4-6\n * </AiInfoBanner>\n *\n * <AiInfoBanner level=\"info\">\n *   Follow-up queued — will send after current response\n * </AiInfoBanner>\n * ```\n */\nexport function AiInfoBanner({\n  level = \"info\",\n  icon,\n  children,\n  className,\n  ...props\n}: AiInfoBannerProps) {\n  const config = LEVEL_CONFIG[level];\n  const IconComponent = icon ?? config.icon;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-2 border-y px-4 py-1.5\",\n        config.borderClassName,\n        className\n      )}\n      role={level === \"error\" ? \"alert\" : \"status\"}\n      {...props}\n    >\n      <IconComponent\n        className={cn(\"size-3.5 shrink-0\", config.iconClassName)}\n      />\n      <Text size=\"xs\" variant=\"secondary\" wrap=\"balance\" as=\"span\">\n        {children}\n      </Text>\n    </div>\n  );\n}\n\nAiInfoBanner.displayName = \"AiInfoBanner\";\n"],"mappings":";;;;;;AAcA,IAAa,6BAA6B,EACxC,OAAO;CACL,MAAM;EAAE,SAAS;EAAI,aAAa;EAAwB;CAC1D,OAAO;EAAE,SAAS;EAAI,aAAa;EAAgB;CACnD,QAAQ;EACN,SAAS;EACT,aAAa;EACd;CACF,EACF;AAED,IAAa,qCAAqC,EAChD,OAAO,QACR;AAiBD,IAAM,eAGF;CACF,MAAM;EACJ,MAAM;EACN,eAAe;EACf,iBAAiB;EAClB;CACD,OAAO;EACL,MAAM;EACN,eAAe;EACf,iBAAiB;EAClB;CACD,QAAQ;EACN,MAAM;EACN,eAAe;EACf,iBAAiB;EAClB;CACF;;;;;;;;;;;;;;;;;;;;;;AAyBD,SAAgB,aAAa,EAC3B,QAAQ,QACR,MACA,UACA,WACA,GAAG,SACiB;CACpB,MAAM,SAAS,aAAa;CAC5B,MAAM,gBAAgB,QAAQ,OAAO;AAErC,QACE,qBAAC,OAAD;EACE,WAAW,GACT,+DACA,OAAO,iBACP,UACD;EACD,MAAM,UAAU,UAAU,UAAU;EACpC,GAAI;YAPN,CASE,oBAAC,eAAD,EACE,WAAW,GAAG,qBAAqB,OAAO,cAAc,EACxD,CAAA,EACF,oBAAC,MAAD;GAAM,MAAK;GAAK,SAAQ;GAAY,MAAK;GAAU,IAAG;GACnD;GACI,CAAA,CACH;;;AAIV,aAAa,cAAc"}

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

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