@signalflare-ai/ui 1.1.0 → 1.3.0

package/dist/ai-agent-card-CByAUe0q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-agent-card-CByAUe0q.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-/u, \"\")\n      .replace(/-\\d+$/u, \"\") ?? 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-Ci8N70a7.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 cn } from "./cn-CmAOpn49.js";
+import { t as Button } from "./button-BHOgXJRU.js";
 import { useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckCircleIcon, ListChecksIcon, ProhibitIcon, ShieldCheckIcon } from "@phosphor-icons/react";
@@ -153,6 +153,7 @@ function AiApproval({ kind = "tool", status = "pending", title, description, ico
 			}),
 			children,
 			isPending && showFeedback && /* @__PURE__ */ jsx("textarea", {
+				"aria-label": "Optional feedback",
 				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",
 				onChange: (e) => setFeedback(e.target.value),
 				placeholder: "Optional feedback…",
@@ -181,4 +182,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-Ci8N70a7.js.map

package/dist/{ai-approval-aa0qvjFN.js.map → ai-approval-Ci8N70a7.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-Ci8N70a7.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          aria-label=\"Optional feedback\"\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":"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"}

package/dist/{ai-code-block-BgtIxtZZ.js → ai-code-block-P9TJHvaC.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 cn } from "./cn-CmAOpn49.js";
+import { t as Button } from "./button-BHOgXJRU.js";
+import { t as highlightToLines } from "./highlight-to-react-DN9dUCS2.js";
 import { createContext, memo, useContext, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { highlight } from "sugar-high";
@@ -21,52 +21,50 @@ var AiCodeBlockContext = createContext({ code: "" });
 * </AiCodeBlock>
 * ```
 */
-var AiCodeBlock = memo(({ code, language, showLineNumbers = false, className, children, ...props }) => {
+var AiCodeBlockBase = memo(({ code, language, showLineNumbers = false, className, children, ...props }) => {
 	const highlightedLines = highlightToLines(highlight(code));
+	const hasInlineOverlay = !language && Boolean(children);
 	return /* @__PURE__ */ jsx(AiCodeBlockContext.Provider, {
 		value: { code },
 		children: /* @__PURE__ */ jsxs("div", {
 			className: cn("relative w-full overflow-hidden rounded-lg border border-sf-line bg-sf-recessed font-mono text-sm text-sf-default", className),
 			...props,
-			children: [
-				language && /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center justify-between border-b border-sf-line px-4 py-2",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "text-sf-subtle text-xs",
-						children: language
-					}), children && /* @__PURE__ */ jsx("div", {
-						className: "flex items-center gap-2",
-						children
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "overflow-x-auto",
-					children: /* @__PURE__ */ jsx("table", {
-						className: "w-full border-collapse",
-						children: /* @__PURE__ */ jsx("tbody", { children: highlightedLines.map((line, i) => /* @__PURE__ */ jsxs("tr", {
-							className: "leading-6",
-							children: [showLineNumbers && /* @__PURE__ */ jsx("td", {
-								className: "select-none pr-4 pl-4 text-right text-sf-inactive",
-								children: i + 1
-							}), /* @__PURE__ */ jsx("td", {
-								className: cn("pr-4", !showLineNumbers && "px-4"),
-								children: /* @__PURE__ */ jsx("pre", {
-									className: "whitespace-pre",
-									children: line
-								})
-							})]
-						}, i)) })
-					})
-				}),
-				!language && children && /* @__PURE__ */ jsx("div", {
-					className: "absolute top-2 right-2 flex items-center gap-2",
+			children: [language ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between border-b border-sf-line px-4 py-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sf-subtle text-xs",
+					children: language
+				}), children && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-2",
 					children
+				})]
+			}) : hasInlineOverlay && /* @__PURE__ */ jsx("div", {
+				className: "absolute top-0 right-2 z-10 flex h-6 items-center gap-2",
+				children
+			}), /* @__PURE__ */ jsx("div", {
+				className: "overflow-x-auto",
+				children: /* @__PURE__ */ jsx("table", {
+					className: "w-full border-collapse",
+					children: /* @__PURE__ */ jsx("tbody", { children: highlightedLines.map((line, i) => /* @__PURE__ */ jsxs("tr", {
+						className: "leading-6",
+						children: [showLineNumbers && /* @__PURE__ */ jsx("td", {
+							className: "select-none pr-4 pl-4 text-right text-sf-inactive",
+							children: i + 1
+						}), /* @__PURE__ */ jsx("td", {
+							className: cn("pr-4", !showLineNumbers && "px-4", hasInlineOverlay && i === 0 && "pr-14"),
+							children: /* @__PURE__ */ jsx("pre", {
+								className: "whitespace-pre",
+								children: line
+							})
+						})]
+					}, i)) })
 				})
-			]
+			})]
 		})
 	});
 }, (prev, next) => prev.code === next.code && prev.language === next.language && prev.showLineNumbers === next.showLineNumbers);
-AiCodeBlock.displayName = "AiCodeBlock";
+AiCodeBlockBase.displayName = "AiCodeBlock";
+var AiCodeBlock = Object.assign(AiCodeBlockBase, { CopyButton: AiCodeBlockCopyButton });
 /**
 * Copy-to-clipboard button for use inside `AiCodeBlock`.
 * Must be a descendant of `AiCodeBlock` to access the code via context.
@@ -107,4 +105,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-P9TJHvaC.js.map

package/dist/ai-code-block-P9TJHvaC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-code-block-P9TJHvaC.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 */\nconst AiCodeBlockBase = memo(\n  ({\n    code,\n    language,\n    showLineNumbers = false,\n    className,\n    children,\n    ...props\n  }: AiCodeBlockProps) => {\n    const highlightedLines = highlightToLines(highlight(code));\n    const hasInlineOverlay = !language && Boolean(children);\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            hasInlineOverlay && (\n              <div className=\"absolute top-0 right-2 z-10 flex h-6 items-center gap-2\">\n                {children}\n              </div>\n            )\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\n                      className={cn(\n                        \"pr-4\",\n                        !showLineNumbers && \"px-4\",\n                        hasInlineOverlay && i === 0 && \"pr-14\"\n                      )}\n                    >\n                      <pre className=\"whitespace-pre\">{line}</pre>\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\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\nAiCodeBlockBase.displayName = \"AiCodeBlock\";\n\n// Export AiCodeBlock with CopyButton sub-component (for registry detection)\nexport const AiCodeBlock = Object.assign(AiCodeBlockBase, {\n  CopyButton: AiCodeBlockCopyButton,\n});\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,CAAC;AAC1C,IAAa,oCAAoC,CAAC;AAQlD,IAAM,qBAAqB,cAAuC,EAAE,MAAM,GAAG,CAAC;;;;;;;;;;;;;AA2B9E,IAAM,kBAAkB,MACrB,EACC,MACA,UACA,kBAAkB,OAClB,WACA,UACA,GAAG,YACmB;CACtB,MAAM,mBAAmB,iBAAiB,UAAU,IAAI,CAAC;CACzD,MAAM,mBAAmB,CAAC,YAAY,QAAQ,QAAQ;CAEtD,OACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO,EAAE,KAAK;YACzC,qBAAC,OAAD;GACE,WAAW,GACT,qHACA,SACF;GACA,GAAI;aALN,CAOG,WACC,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KAAM,WAAU;eAA0B;IAAe,CAAA,GACxD,YACC,oBAAC,OAAD;KAAK,WAAU;KAA2B;IAAc,CAAA,CAEvD;QAEL,oBACE,oBAAC,OAAD;IAAK,WAAU;IACZ;GACE,CAAA,GAGT,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,SAAD;KAAO,WAAU;eACf,oBAAC,SAAD,EAAA,UACG,iBAAiB,KAAK,MAAM,MAE3B,qBAAC,MAAD;MAAY,WAAU;gBAAtB,CACG,mBACC,oBAAC,MAAD;OAAI,WAAU;iBACX,IAAI;MACH,CAAA,GAEN,oBAAC,MAAD;OACE,WAAW,GACT,QACA,CAAC,mBAAmB,QACpB,oBAAoB,MAAM,KAAK,OACjC;iBAEA,oBAAC,OAAD;QAAK,WAAU;kBAAkB;OAAU,CAAA;MACzC,CAAA,CACF;QAfK,CAeL,CACL,EACI,CAAA;IACF,CAAA;GACJ,CAAA,CACF;;CACsB,CAAA;AAEjC,IACC,MAAM,SACL,KAAK,SAAS,KAAK,QACnB,KAAK,aAAa,KAAK,YACvB,KAAK,oBAAoB,KAAK,eAClC;AAEA,gBAAgB,cAAc;AAG9B,IAAa,cAAc,OAAO,OAAO,iBAAiB,EACxD,YAAY,sBACd,CAAC;;;;;;;;;;;;AAwBD,SAAgB,sBAAsB,EACpC,QACA,SACA,UAAU,KACV,UACA,WACA,OAAO,MACP,UAAU,SACV,GAAG,SAC0B;CAC7B,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,EAAE,SAAS,WAAW,kBAAkB;CAE9C,MAAM,aAAa,YAAY;EAC7B,IAAI,OAAO,cAAc,eAAe,CAAC,UAAU,WAAW,WAAW;GACvE,0BAAU,IAAI,MAAM,6BAA6B,CAAC;GAClD;EACF;EACA,IAAI;GACF,MAAM,UAAU,UAAU,UAAU,IAAI;GACxC,UAAU,IAAI;GACd,SAAS;GACT,iBAAiB,UAAU,KAAK,GAAG,OAAO;EAC5C,SAAS,KAAK;GACZ,UAAU,GAAY;EACxB;CACF;CAEA,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,YAAY,SAAS;EACnC,SAAS;EACH;EACG;EACT,GAAI;YAEH,aAAa,SAAS,WAAW;CAC5B,CAAA;AAEZ"}

package/dist/ai-conversation-Qslfdi1t.js

@@ -0,0 +1,228 @@
+"use client";
+import { t as cn } from "./cn-CmAOpn49.js";
+import { a as prepare, t as layout } from "./layout-CWBE0qwx.js";
+import { t as Button } from "./button-BHOgXJRU.js";
+import { forwardRef, useCallback, useEffect, useLayoutEffect, 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 [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]);
+	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,
+		anchorTo: "end",
+		followOnAppend: "smooth",
+		scrollEndThreshold: stickThreshold
+	});
+	useEffect(() => {
+		if (containerWidth > 0) virtualizer.measure();
+	}, [
+		containerWidth,
+		items,
+		virtualizer,
+		fontsReady
+	]);
+	const virtualItems = virtualizer.getVirtualItems();
+	const totalSize = virtualizer.getTotalSize();
+	useEffect(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		const check = () => {
+			setIsAtBottom(virtualizer.isAtEnd(stickThreshold));
+		};
+		check();
+		el.addEventListener("scroll", check, { passive: true });
+		return () => el.removeEventListener("scroll", check);
+	}, [
+		scrollRef,
+		stickThreshold,
+		virtualizer
+	]);
+	useEffect(() => {
+		setIsAtBottom(virtualizer.isAtEnd(stickThreshold));
+	}, [
+		totalSize,
+		stickThreshold,
+		virtualizer
+	]);
+	const scrollToBottom = useCallback((behavior = "smooth") => {
+		if (items.length === 0) return;
+		virtualizer.scrollToEnd({ 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-Qslfdi1t.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-conversation-Qslfdi1t.js","names":[],"sources":["../src/components/ai-conversation/ai-conversation.tsx","../src/components/ai-conversation/measurement-constants.ts"],"sourcesContent":["\"use client\";\n\nimport { layout, prepare } from \"@chenglou/pretext\";\nimport { ArrowDownIcon } from \"@phosphor-icons/react\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport type { Virtualizer, VirtualItem } from \"@tanstack/react-virtual\";\nimport type { ComponentProps, ReactNode, RefObject } from \"react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\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**: Uses TanStack Virtual's end-anchored mode\n * (`anchorTo: \"end\"` + `followOnAppend`). When the user is within\n * `stickThreshold` of the bottom, streaming growth of the last message keeps\n * the viewport pinned and newly appended messages auto-follow. When the user\n * scrolls up to read history, both disengage until they return to the bottom.\n * Prepending older history keeps the currently-visible message stable.\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\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  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    // Chat/streaming scroll physics (TanStack Virtual end-anchored mode):\n    // - `anchorTo: \"end\"` keeps the viewport pinned to the bottom when the\n    //   last message grows token-by-token, and keeps the currently-visible\n    //   message stable when older history is prepended.\n    // - `followOnAppend` auto-scrolls to newly appended messages, but only\n    //   when the user was already within `scrollEndThreshold` of the end —\n    //   users reading history are never yanked down.\n    // A stable `getItemKey` (above) is required for prepend stability.\n    anchorTo: \"end\",\n    followOnAppend: \"smooth\",\n    scrollEndThreshold: stickThreshold,\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  const virtualItems = virtualizer.getVirtualItems();\n  const totalSize = virtualizer.getTotalSize();\n\n  // Track \"at end\" using the virtualizer's own end-distance math so the\n  // \"scroll to bottom\" affordance shares the exact threshold that drives\n  // `followOnAppend`. `anchorTo: \"end\"` already pins the viewport when the\n  // last item grows or items are appended — no manual scrollTop bookkeeping.\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    const check = () => {\n      setIsAtBottom(virtualizer.isAtEnd(stickThreshold));\n    };\n\n    check();\n    el.addEventListener(\"scroll\", check, { passive: true });\n    return () => el.removeEventListener(\"scroll\", check);\n  }, [scrollRef, stickThreshold, virtualizer]);\n\n  // Re-evaluate \"at end\" whenever the content size changes (streaming growth,\n  // collapsible expand) so the scroll button visibility stays accurate even\n  // without a user scroll event.\n  useEffect(() => {\n    setIsAtBottom(virtualizer.isAtEnd(stickThreshold));\n  }, [totalSize, stickThreshold, virtualizer]);\n\n  const scrollToBottom = useCallback(\n    (behavior: ScrollBehavior = \"smooth\") => {\n      if (items.length === 0) return;\n      virtualizer.scrollToEnd({ 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":";;;;;;;;;AAoBA,IAAa,8BAA8B,CAAC;AAC5C,IAAa,sCAAsC,CAAC;;;;;;;;;;;;;;;;AAqBpD,IAAa,iBAAiB,YAC3B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,GAAG,mCAAmC,SAAS;EAC1D,MAAK;EACL,aAAU;EACV,cAAW;EACX,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,eAAe,cAAc;;;;AAS7B,SAAgB,sBAAsB,EACpC,WACA,UACA,GAAG,SAC0B;CAC7B,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,6CAA6C,SAAS;EACpE,GAAI;EAEH;CACE,CAAA;AAET;;;;;AAkBA,SAAgB,2BAA2B,EACzC,WACA,YAAY,KACZ,WACA,SACA,GAAG,SAC+B;CAClC,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,gBAAgB;EACd,MAAM,KAAK,WAAW;EACtB,IAAI,CAAC,IAAI;EAET,MAAM,cAAc;GAElB,QADuB,GAAG,eAAe,GAAG,YAAY,GAAG,eAClC,SAAS;EACpC;EAEA,MAAM;EACN,GAAG,iBAAiB,UAAU,OAAO,EAAE,SAAS,KAAK,CAAC;EACtD,aAAa,GAAG,oBAAoB,UAAU,KAAK;CACrD,GAAG,CAAC,WAAW,SAAS,CAAC;CAEzB,MAAM,cAAc,aACjB,MAA2C;EAC1C,WAAW,SAAS,SAAS;GAC3B,KAAK,UAAU,QAAQ;GACvB,UAAU;EACZ,CAAC;EACD,UAAU,CAAC;CACb,GACA,CAAC,WAAW,OAAO,CACrB;CAEA,IAAI,aAAa,CAAC,MAAM,OAAO;CAE/B,OACE,oBAAC,QAAD;EACE,cAAW;EACX,WAAW,GACT,sEACA,SACF;EACA,SAAS;EACT,MAAK;EACL,SAAQ;EACR,GAAI;YAEJ,oBAAC,eAAD,EAAe,WAAU,SAAU,CAAA;CAC7B,CAAA;AAEZ;AAiKA,IAAM,4BADQ,OAAO,WAAW,cACU,YAAY;AAEtD,SAAgB,2BAA2B,EACzC,WACA,OACA,eAAe,IACf,WAAW,GACX,iBAAiB,MACqD;CACtE,MAAM,CAAC,YAAY,iBAAiB,SAAS,IAAI;CAGjD,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,CAAC;CAMtD,MAAM,CAAC,YAAY,iBAAiB,eAAe;EACjD,IAAI,OAAO,aAAa,aAAa,OAAO;EAG5C,OAAO,SAAS,OAAO,WAAW;CACpC,CAAC;CAED,gBAAgB;EACd,IAAI,YAAY;EAChB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,OAAO;GACtD,cAAc,IAAI;GAClB;EACF;EACA,IAAI,YAAY;EAChB,SAAS,MAAM,MAAM,WAAW;GAC9B,IAAI,CAAC,WAAW,cAAc,IAAI;EACpC,CAAC;EACD,aAAa;GACX,YAAY;EACd;CACF,GAAG,CAAC,UAAU,CAAC;CAEf,gCAAgC;EAC9B,MAAM,KAAK,UAAU;EACrB,IAAI,CAAC,IAAI;EAET,MAAM,oBAAoB;GAGxB,MAAM,QAAQ,OAAO,iBAAiB,EAAE;GACxC,MAAM,UAAU,WAAW,MAAM,WAAW,KAAK;GACjD,MAAM,WAAW,WAAW,MAAM,YAAY,KAAK;GACnD,kBAAkB,GAAG,cAAc,UAAU,QAAQ;EACvD;EAEA,YAAY;EAEZ,MAAM,WAAW,IAAI,eAAe,WAAW;EAC/C,SAAS,QAAQ,EAAE;EAEnB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,cAAc,eAAe;EACjC,OAAO,MAAM;EACb,wBAAwB,UAAU;EAClC,eAAe,UAAU;GACvB,MAAM,OAAO,MAAM;GACnB,IAAI,CAAC,MAAM,WAAW,kBAAkB,GACtC,OAAO;GAET,MAAM,EACJ,MACA,OAAO,mBACP,aAAa,IACb,UAAU,GACV,gBAAgB,GAChB,oBAAoB,GACpB,WAAW,GACX,aAAa,UACb,YAAY,aACV,KAAK;GAGT,MAAM,eAAe,KAAK,IACxB,IACA,KAAK,MAAM,iBAAiB,aAAa,IAAI,iBAC/C;GAEA,IAAI;IAEF,MAAM,EAAE,WAAW,OADF,QAAQ,MAAM,MAAM;KAAE;KAAY;IAAU,CACnC,GAAU,cAAc,UAAU;IAC5D,OAAO,SAAS,UAAU;GAC5B,QAAQ;IACN,OAAO;GACT;EACF;EACA;EACA,aAAa,UAAU,MAAM,QAAQ,OAAO;EAS5C,UAAU;EACV,gBAAgB;EAChB,oBAAoB;CACtB,CAAC;CAKD,gBAAgB;EACd,IAAI,iBAAiB,GACnB,YAAY,QAAQ;CAExB,GAAG;EAAC;EAAgB;EAAO;EAAa;CAAU,CAAC;CAEnD,MAAM,eAAe,YAAY,gBAAgB;CACjD,MAAM,YAAY,YAAY,aAAa;CAM3C,gBAAgB;EACd,MAAM,KAAK,UAAU;EACrB,IAAI,CAAC,IAAI;EAET,MAAM,cAAc;GAClB,cAAc,YAAY,QAAQ,cAAc,CAAC;EACnD;EAEA,MAAM;EACN,GAAG,iBAAiB,UAAU,OAAO,EAAE,SAAS,KAAK,CAAC;EACtD,aAAa,GAAG,oBAAoB,UAAU,KAAK;CACrD,GAAG;EAAC;EAAW;EAAgB;CAAW,CAAC;CAK3C,gBAAgB;EACd,cAAc,YAAY,QAAQ,cAAc,CAAC;CACnD,GAAG;EAAC;EAAW;EAAgB;CAAW,CAAC;CAE3C,MAAM,iBAAiB,aACpB,WAA2B,aAAa;EACvC,IAAI,MAAM,WAAW,GAAG;EACxB,YAAY,YAAY,EAAE,SAAS,CAAC;CACtC,GACA,CAAC,aAAa,MAAM,MAAM,CAC5B;CAEA,MAAM,aAAa,aAChB,SAA6B;EAC5B,IAAI,MAAM,YAAY,eAAe,IAAI;CAC3C,GACA,CAAC,WAAW,CACd;CAeA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA,eAlBoB,aACnB,UAA+D;GAE9D,IADa,MAAM,QACT,SACR,OAAO;GAET,OAAO;EACT,GACA,CAAC,OAAO,UAAU,CAUlB;CACF;AACF;;;;;;;;;;;;;;;ACjeA,IAAa,qBACX;;AAGF,IAAa,4BAA4B;;AAGzC,IAAa,4BAA4B;;AAGzC,IAAa,gCAAgC;;AAG7C,IAAa,8BAA8B;;AAG3C,IAAa,iCAAiC;;AAG9C,IAAa,qCAAqC;;AAGlD,IAAa,mCAAmC;;AAGhD,IAAa,4BAA4B"}

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

@@ -1,5 +1,6 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
+import { t as cn } from "./cn-CmAOpn49.js";
+import { t as Text } from "./text-iQ0YUFNg.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-B_9vtGK3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-info-banner-B_9vtGK3.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;CAAuB;CACzD,OAAO;EAAE,SAAS;EAAI,aAAa;CAAe;CAClD,QAAQ;EACN,SAAS;EACT,aAAa;CACf;AACF,EACF;AAEA,IAAa,qCAAqC,EAChD,OAAO,OACT;AAiBA,IAAM,eAGF;CACF,MAAM;EACJ,MAAM;EACN,eAAe;EACf,iBAAiB;CACnB;CACA,OAAO;EACL,MAAM;EACN,eAAe;EACf,iBAAiB;CACnB;CACA,QAAQ;EACN,MAAM;EACN,eAAe;EACf,iBAAiB;CACnB;AACF;;;;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,aAAa,EAC3B,QAAQ,QACR,MACA,UACA,WACA,GAAG,SACiB;CACpB,MAAM,SAAS,aAAa;CAC5B,MAAM,gBAAgB,QAAQ,OAAO;CAErC,OACE,qBAAC,OAAD;EACE,WAAW,GACT,+DACA,OAAO,iBACP,SACF;EACA,MAAM,UAAU,UAAU,UAAU;EACpC,GAAI;YAPN,CASE,oBAAC,eAAD,EACE,WAAW,GAAG,qBAAqB,OAAO,aAAa,EACxD,CAAA,GACD,oBAAC,MAAD;GAAM,MAAK;GAAK,SAAQ;GAAY,MAAK;GAAU,IAAG;GACnD;EACG,CAAA,CACH;;AAET;AAEA,aAAa,cAAc"}