\n {icon ? (\n {icon}\n ) : null}\n {children}\n \n );\n}\n\nexport interface ThreadBranchSwitcherProps {\n /** 1-based position of the branch currently shown. */\n index: number;\n count: number;\n onPrev?: () => void;\n onNext?: () => void;\n className?: string;\n}\n\n/**\n * Prev/next control for switching between sibling response branches (e.g.\n * regenerated replies) — small chevron buttons flanking a tabular-nums\n * \"2/3\" readout, disabled past either end. The readout crossfades with a\n * short y-shift on change (`AnimatePresence mode=\"popLayout\"`), reduced to\n * an instant swap under `useReducedMotion()`.\n */\nexport function ThreadBranchSwitcher({\n index,\n count,\n onPrev,\n onNext,\n className,\n}: ThreadBranchSwitcherProps) {\n const reduce = useReducedMotion() ?? false;\n\n return (\n \n
\n \n \n \n \n \n {index}/{count}\n \n \n \n = count}\n onClick={onNext}\n className=\"flex h-5 w-5 items-center justify-center rounded hover:bg-[var(--wb-hover)] disabled:pointer-events-none disabled:opacity-30\"\n >\n \n \n \n {suggestions.map((suggestion, i) => (\n \n onSelect?.(suggestion.value)}\n className=\"h-7 rounded-full border border-[var(--wb-border)] px-3 text-[13px] text-muted-foreground transition-colors hover:border-[var(--wb-border-emphasis)] hover:text-foreground\"\n >\n {suggestion.label}\n \n \n ))}\n
\n );\n}\n\nexport type ThreadTaskStatus = \"pending\" | \"active\" | \"done\";\n\nexport interface ThreadTaskListProps {\n title?: ReactNode;\n /** Short counter, e.g. \"2/5\". Swaps with a `popLayout` crossfade when it changes. */\n progress?: ReactNode;\n className?: string;\n children?: ReactNode;\n}\n\n/**\n * Checklist card for a long-running agent task, built on `ThreadCard` so it\n * shares the hairline ring and tint with the file/diff/approval cards. The\n * optional title row pairs a medium-weight label with a tabular-nums\n * progress readout on the trailing edge; the readout crossfades with a\n * short y-shift on change (`AnimatePresence mode=\"popLayout\"`, mirroring\n * `ThreadBranchSwitcher`'s counter), reduced to an opacity-only swap under\n * `useReducedMotion()`. Compose `ThreadTask` rows as `children`.\n */\nexport function ThreadTaskList({ title, progress, className, children }: ThreadTaskListProps) {\n const reduce = useReducedMotion() ?? false;\n\n return (\n \n {title !== undefined ? (\n \n
{title}\n {progress !== undefined ? (\n
\n \n \n {progress}\n \n \n \n ) : null}\n
{children}
\n \n );\n}\n\nexport interface ThreadTaskProps {\n status?: ThreadTaskStatus;\n className?: string;\n children?: ReactNode;\n}\n\n/**\n * Single row inside a `ThreadTaskList` — a 16px status slot followed by the\n * task's label. `pending` is a hollow ring, `active` is a solid blue dot\n * wrapped in a pulsing ring (frozen, not removed, under\n * `useReducedMotion()`) and its label runs through `ThreadShimmerText`,\n * `done` is a check mark. The icon swap itself is a springy scale pop\n * (`SPRING_PANEL`, `AnimatePresence mode=\"wait\"`), reduced to a plain\n * opacity cut. `done` text stays muted rather than a celebratory color —\n * finishing a step should read as quiet progress, not an event.\n */\nexport function ThreadTask({ status = \"pending\", className, children }: ThreadTaskProps) {\n const reduce = useReducedMotion() ?? false;\n\n return (\n \n
\n \n \n {status === \"done\" ? (\n \n ) : status === \"active\" ? (\n \n {reduce ? (\n \n ) : (\n \n )}\n \n \n ) : (\n \n )}\n \n \n \n {status === \"active\" ? (\n
{children}\n ) : (\n
{children}\n )}\n
\n \n \n \n {label}\n {timestamp !== undefined && timestamp !== null ? (\n {timestamp}\n ) : null}\n {onRestore ? (\n \n {restoreLabel}\n \n ) : null}\n \n \n
\n );\n}\n\n/** <0.01 keeps 4 decimal places, otherwise 3 — trailing zeros are trimmed either way (e.g. 0.003 → \"$0.003\", not \"$0.0030\"). */\nfunction formatUsageCost(cost: number): string {\n const decimals = cost < 0.01 ? 4 : 3;\n const trimmed = cost.toFixed(decimals).replace(/0+$/, \"\").replace(/\\.$/, \"\");\n return `$${trimmed}`;\n}\n\n/** K/M abbreviation for a raw token count; values under 1000 render as-is. */\nfunction formatUsageTokenCount(count: number): string {\n if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}M`;\n if (count >= 1000) return `${(count / 1000).toFixed(1)}K`;\n return `${count}`;\n}\n\nexport interface ThreadUsageProps {\n cost?: number;\n inputTokens?: number;\n outputTokens?: number;\n duration?: ReactNode;\n cacheHitRate?: number;\n className?: string;\n children?: ReactNode;\n}\n\n/**\n * Per-message usage/cost line — cost, input/output token counts, duration\n * and cache-hit rate, each shown only when its prop is present and joined\n * by a muted middle dot. Meant to live alongside `ThreadActionBar` in the\n * same hover group; the component itself renders unconditionally, so pass\n * e.g. `\"opacity-0 group-hover/turn:opacity-100\"` in `className` if you want\n * it to reveal on turn hover the way the action bar does.\n */\nexport function ThreadUsage({\n cost,\n inputTokens,\n outputTokens,\n duration,\n cacheHitRate,\n className,\n children,\n}: ThreadUsageProps) {\n const fragments: { key: string; node: ReactNode }[] = [];\n\n if (cost !== undefined) {\n fragments.push({ key: \"cost\", node: formatUsageCost(cost) });\n }\n\n if (inputTokens !== undefined || outputTokens !== undefined) {\n const inStr = inputTokens !== undefined ? `${formatUsageTokenCount(inputTokens)} in` : null;\n const outStr = outputTokens !== undefined ? `${formatUsageTokenCount(outputTokens)} out` : null;\n fragments.push({\n key: \"tokens\",\n node: inStr && outStr ? `${inStr} / ${outStr}` : (inStr ?? outStr),\n });\n }\n\n if (duration !== undefined && duration !== null) {\n fragments.push({ key: \"duration\", node: duration });\n }\n\n if (cacheHitRate !== undefined) {\n fragments.push({ key: \"cache\", node: `cache ${Math.round(cacheHitRate * 100)}%` });\n }\n\n if (children !== undefined && children !== null) {\n fragments.push({ key: \"children\", node: children });\n }\n\n if (fragments.length === 0) return null;\n\n return (\n \n {fragments.map((fragment, i) => (\n \n {i > 0 ? · : null}\n {fragment.node}\n \n ))}\n \n );\n}\n"},{"path":"lib/ease.ts","type":"registry:lib","target":"@lib/ease.ts","content":"// Shared motion tokens. Easing curves mirror the CSS custom properties in\n// globals.css; springs are the canonical physics used across components.\n// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.\n\nexport const EASE_OUT = [0.16, 1, 0.3, 1] as const;\nexport const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;\nexport const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;\n\n/** CSS string form of EASE_OUT for inline style transitions. */\nexport const EASE_OUT_CSS = \"cubic-bezier(0.16, 1, 0.3, 1)\";\n\n/** Press feedback on buttons and other tappable surfaces. */\nexport const SPRING_PRESS = {\n type: \"spring\",\n stiffness: 500,\n damping: 30,\n mass: 0.6,\n} as const;\n\n/** Content swaps — label/icon slots trading places inside a control. */\nexport const SPRING_SWAP = {\n type: \"spring\",\n stiffness: 460,\n damping: 30,\n mass: 0.55,\n} as const;\n\n/** Overlay panel entrances — modals and sheets summoned by pointer. */\nexport const SPRING_PANEL = {\n type: \"spring\",\n stiffness: 420,\n damping: 40,\n mass: 0.5,\n} as const;\n\n/** Shared-layout glides — pills, indicators and panels morphing between positions. */\nexport const SPRING_LAYOUT = {\n type: \"spring\",\n stiffness: 360,\n damping: 32,\n mass: 0.6,\n} as const;\n\n/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */\nexport const SPRING_MOUSE = {\n stiffness: 200,\n damping: 15,\n mass: 0.3,\n} as const;\n"},{"path":"lib/utils.ts","type":"registry:lib","target":"@lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"}]}