@horon-ai/react 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,169 @@
-# Temporary Holding Version
+# @horon-ai/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Horon 웹 컴포넌트 라이브러리입니다. Figma `Horon` 파일의 Components 보드(`54:81`)를 그대로
+옮겼고, 동작과 접근성은 [Base UI](https://base-ui.com)(`@base-ui/react`) 하나에만 기댑니다. `cn()`은 Horon 토큰 이름을 아는 tailwind-merge라서, 넘긴 클래스가 컴포넌트의 Figma 기본값(너비, 반경 등)을 덮어씁니다.
+shadcn/ui와 그 CLI는 쓰지 않습니다. 색, 크기, 글자 값은 모두 `@horon-ai/tokens`에서 옵니다.
+
+빌드 산출물 없이 TypeScript 소스를 그대로 배포하므로, 소비하는 쪽 번들러가 소스를 컴파일합니다.
+
+## 설치와 진입 스타일
+
+```json
+{ "dependencies": { "@horon-ai/react": "file:../design/packages/react", "@horon-ai/tokens": "file:../design/packages/tokens" } }
+```
+
+앱 진입 CSS에서 한 번 import합니다. Tailwind CSS v4, Pretendard, Geist Mono, 토큰 `theme.css`,
+유리(liquid glass) 레이어 스타일이 여기서 함께 들어옵니다.
+
+```css
+@import "@horon-ai/react/globals.css";
+@source "../node_modules/@horon-ai/react/src/**/*.{ts,tsx}";
+```
+
+- 다크 모드: 상위 요소에 `class="dark"`를 둡니다. 값은 Figma Components / Dark 보드(`166:1107`)에서 읽었습니다.
+- 플랫폼 글자 크기: 데스크톱 앱은 `data-platform="desktop"`, 모바일 웹은 `data-platform="mobile"`을 둡니다.
+  Typography 보드(`26:2`)의 Web / Desktop / Mobile 값으로 13개 글자 스타일이 바뀝니다.
+- 아이콘: Figma 아이콘은 Phosphor Regular입니다. `@phosphor-icons/react`를 직접 쓰고,
+  Phosphor에 없는 Horon 눈 아이콘만 `HoronIcon`으로 제공합니다.
+
+## 사용
+
+```tsx
+import { Button, Card, Input } from "@horon-ai/react";
+import { Plus } from "@phosphor-icons/react";
+
+<Card title="Inbox Manager" description="6 emails need you." />;
+<Button icon={<Plus />}>New bot</Button>;
+<Input surface="solid" placeholder="Search bots" />;
+```
+
+하위 경로도 됩니다: `@horon-ai/react/components/button`.
+
+## 커서 잔상
+
+마우스나 트랙패드처럼 정밀한 포인터가 있는 데스크톱 환경에서는 화살표 뒤로 흐려지는 잔상 5개가 따라옵니다.
+`@horon-ai/react`를 한 번이라도 import하면 페이지마다 한 번 자동으로 붙습니다. React 컴포넌트를 쓰지 않는
+페이지에서는 `import "@horon-ai/react/cursor-ghost";` 한 줄로 붙입니다.
+
+- 시스템 커서는 숨기지 않습니다. 잔상은 클릭·포커스를 받지 않는 맨 위 겹 레이어이고 `aria-hidden`입니다.
+- 터치·펜처럼 거친 포인터, 동작 줄이기(`prefers-reduced-motion: reduce`) 설정에서는 붙지 않고, 설정이 바뀌면 다시 판단합니다.
+- 흰색을 `difference`로 섞어서 어두운 화면에서는 밝게, 밝은 화면에서는 어둡게 보입니다.
+- 끄려면 그 import보다 먼저 `<html data-horon-cursor="off">`를 둡니다. 값을 바꾸려면 끈 뒤
+  `mountCursorGhost({ ghosts, size, headFollow, smear, color })`를 직접 부르고, 돌려받은 함수로 떼어 냅니다.
+
+## 유리 표면
+
+`LiquidGlass`가 `@horon-ai/tokens`의 `glass.ts` 재질을 그립니다. Flutter의 `HoronLiquidGlass`도 같은 값을 읽으므로
+web, desktop(WebView2, WKWebView), iOS, Android가 같은 모습입니다.
+
+- 배경: 뒤 내용을 흐리게(20px) 하고 채도를 180%로 올립니다.
+- 채움: 호스트가 `glass-clear` / `glass-regular` / `glass-thick`으로 칠합니다.
+- 테두리: 가장자리 안쪽 1px 링으로, 위가 밝고 옆으로 갈수록 옅어집니다. 호스트에는 자기 테두리를 두지 않고,
+  `data-invalid` 상태에서는 링이 위험 색이 됩니다.
+
+유리 컴포넌트는 `LiquidGlass`를 첫 자식으로 둡니다. 굴절은 Safari와 WKWebView에서 그릴 수 없어서 쓰지 않습니다.
+투명도 줄이기 설정이 켜져 있거나 `backdrop-filter`를 지원하지 않으면 흐림 대신 `glass-fill-frost` 채움이 됩니다.
+
+`LiquidGlass`는 **prop을 받지 않습니다**. 유리 높이(`clear` / `regular` / `thick`)는 호스트의 채움 클래스 하나로 정하고,
+레이어에 채움을 칠하지 않습니다. 레이어에 `bg-glass-*`를 얹으면 위의 `glass-fill-frost` 폴백을 Tailwind 유틸리티가
+덮어 투명도 줄이기·미지원 엔진에서 표면이 실제와 다르게 그려집니다. 예전 호출부의 `tier="thick"` 같은 인자는 지웁니다.
+
+레이어는 `absolute; inset: 0`이라 그대로 두면 정적 본문 위로 페인트됩니다. 호스트를 `relative isolate`로 두고
+레이어에 `-z-10`을 주면 호스트 채움 위, 제목·본문 아래로 확정됩니다(`Card`는 이 두 클래스를 스스로 답니다).
+`isolate`를 걸 수 없는 호스트는 본문 요소를 `relative`로 올려 같은 순서를 만듭니다.
+
+## 컴포넌트 (84개)
+
+| 파일 | Figma 노드 | 내용 |
+| --- | --- | --- |
+| `agent-activity` | 108:660 | Thinking, streaming, tool steps and work log. |
+| `agent-lane` | 113:953 | Sub-agent lane card. |
+| `agent-lanes-timeline` | YCO-1 | Timeline of each bot's run spans. |
+| `agent-panel` | 112:797 | Solid agent panel, task composer and picker chips. |
+| `agent-steering-panel` | Y51-1 | Steering panel that redirects a running bot. |
+| `approval-card` | 64:398 | Glass approval card. |
+| `avatar` | 61:347 | Initials, Bot and Image avatar with a live dot. |
+| `badge` | 61:283 | Neutral, Brand, Danger and Solid status pill. |
+| `banner` | 62:318 | Info and Danger glass banner. |
+| `bot-instructions-panel` | YN3-1 | Bot instructions and examples in tabs. |
+| `bot-list-row` | 64:456 | Bot list row with live avatar. |
+| `bot-memory-panel` | ZO2-1 | Bot memory grouped by category. |
+| `bottom-sheet` | 88:808 | Thick-glass bottom sheet; the light board adds frost. |
+| `breadcrumb` | 110:948 | Breadcrumb with workspace tile. |
+| `breadcrumb-header` | U8H-1 | Glass header row with a breadcrumb and optional search and more buttons. |
+| `button` | 55:339 | Primary, Glass, Solid, Danger and Link in three sizes; `href` renders a real link, `type` reaches the button, and a child icon sits on the label's row. |
+| `calendar` | 60:245 | Month grid with single and range selection. |
+| `card` | 63:310 | Solid, thick-glass or frost card: Default, Interactive, Selected. Isolates its own stacking context so the glass layer stays under the body. |
+| `chat-bubble` | 64:359 | Flat Me and Bot chat bubbles. |
+| `chat-controls` | 88:659 | Jump to latest, new messages, voice input. |
+| `checkbox` | 58:217 | Off, On and Mixed checkbox. |
+| `chip` | 61:302 | Clear-glass toggle chip. |
+| `choice-card` | 1VXM-0 | Radio card that picks one of two options. |
+| `code-panel` | 1VV9-0 | Light code panel for settings screens. |
+| `combobox` | — | Searchable picker: type to narrow the list, then pick one item or, with `multiple`, several as chips. `variant="segment"` goes inside an `InputGroup`. |
+| `command-palette` | 110:676 | Frosted command palette; `empty` is the no-match slot. |
+| `composer` | 63:462 | Glass message composer. |
+| `data-table` | 192:9046 | Solid data table with header, tags and footer. |
+| `date-field` | 60:244 | Glass field that opens the calendar. |
+| `dialog` | 63:329 | Thick-glass dialog on a scrim; the light board adds frost. |
+| `directory-card` | 1VJJ-0 | Directory card with a description; the add button shows when `onAdd` is passed. |
+| `document-extract-panel` | YUT-1 | Document viewer beside the extracted fields. |
+| `empty-state` | 64:485 | Mascot empty state. |
+| `field` | 58:163 | Label, control, help and error text. |
+| `file-drop` | 1VWI-0 | Dashed drop zone for files. |
+| `filter-bar` | WLN-1 | Pill filter bar with counts. |
+| `flue-background` | — | Night-and-sky smoke gradient behind glass; `variant` picks the sidebar column or the full auth screen and bends toward the cursor. |
+| `horon-icon` | 256:9116 | The Horon falcon-eye icon. |
+| `horon-wordmark` | 88:808 | UI-size Horon wordmark. |
+| `icon-button` | 57:167 | Primary, Ghost, Glass and Solid icon-only buttons in three sizes, plus a fill-free `quiet` variant that draws only the ink hover/press wash. |
+| `input` | 58:126 | Glass or Solid text input, MD and LG. |
+| `input-group` | 60:429 | Input with a prefix or suffix segment. |
+| `integration-row` | 110:883 | Integration row: connected, reconnect, not connected. |
+| `kbd` | 110:676 | Keyboard hint chip. |
+| `knowledge-base-panel` | XVM-1 | Indexing state of each knowledge source. |
+| `liquid-glass` | 55:339 | The liquid glass layer stack. Takes no props: the host owns the tier class and the `relative isolate` stacking. |
+| `list-detail` | 1W6P-0 | Two-pane layout with a list on the left and detail on the right. |
+| `marketplace-card` | 1VMY-0 | Marketplace card with a description; the install button shows when `onInstall` is passed. |
+| `mcp-server-row` | 1VHS-0 | Connected MCP server row with name, tags and state. |
+| `menu` | 88:495 | Glass menu and solid account/workspace menu. |
+| `message-extras` | 109:667 | Message actions, date separator, attachment, code block. |
+| `modal` | — | Form or long-read window: a fixed header, a body that scrolls on its own and a footer of actions at the right. |
+| `orchestrator-panel` | X01-1 | Lead bot, parallel lanes and a summary. |
+| `page-header` | 88:723 | Glass header with back, title, actions and filter. |
+| `plan-card` | XMH-1 | Card shell that wraps plan steps. |
+| `plan-step` | 191:8296 | Plan step on a rail. |
+| `plugin-row` | 1VKS-0 | Plugin row with name, version, update and an enable switch. |
+| `progress` | 109:733 | 6px progress bar. |
+| `radio-group` | 58:239 | Radio group with 20px radios. |
+| `research-run-panel` | ZUU-1 | Research question, progress and search terms. |
+| `schedule` | 110:765 | Time field, weekday picker and routine schedule card. |
+| `segmented-control` | 62:379 | Glass segmented control. |
+| `select` | 58:162 | Glass or Solid select with a glass list. |
+| `settings-list` | 1VD8-0 | Settings card of label and switch rows split by dividers. |
+| `sidebar` | 88:808 | Thick-glass sidebar with groups, tree and account. |
+| `skeleton` | 109:733 | Placeholder blocks and cards. |
+| `slider` | — | Settings slider: a thin ink track with a white hairline thumb; width comes from the caller. |
+| `source-row` | 114:1287 | Knowledge source with pipeline stages. |
+| `spinner` | 109:733 | Ink spinner in three sizes. |
+| `split-button` | 1VGK-0 | One pill with a primary action and a secondary menu caret. |
+| `switch` | 58:264 | SM, MD, LG and COMPACT switch, with an optional label; the thumb holds its size inside the track. |
+| `tab-bar` | 63:441 | Mobile glass tab bar. |
+| `tabs` | 62:335 | Pill tabs on a glass tray. |
+| `task-row` | 112:939 | Task row: running, review, failed, done. |
+| `textarea` | 58:137 | Glass multi-line input. |
+| `textarea-field` | 60:466 | Labeled textarea with footer and counter. |
+| `toast` | 62:307 | Glass toast with Neutral, Success and Danger tones. |
+| `tool-call` | 186:7811 | Expandable tool call with JSON arguments and result. |
+| `tool-calls-header` | XDG-1 | Title row and tool chips for a group of tool calls. |
+| `tool-permissions` | 1VT5-0 | Per-tool permission list: allow, confirm or off. |
+| `tooltip` | 62:282 | Ink tooltip with an arrow. |
+| `top-bar` | UR5-1 | Mobile app bar with bot avatar, title and subtitle, plus back and overflow when their handlers are passed. |
+| `usage-meter` | 109:733 | Glass usage meter card. |
+| `workspace-menu` | V56-1 | Solid menu to pick a workspace or create one. |
+
+## 검사
+
+```bash
+bun run lint && bun run typecheck   # 이 패키지에서
+bun test                            # 저장소 루트에서, 진입점 재수출 커버리지
+```

package/package.json

@@ -1,6 +1,51 @@
 {
-  "name": "@horon-ai/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@horon-ai/react",
+	"version": "0.1.0",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/horon-ai/design.git",
+		"directory": "packages/react"
+	},
+	"type": "module",
+	"files": [
+		"src",
+		"README.md"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"exports": {
+		".": "./src/index.ts",
+		"./globals.css": "./src/styles/globals.css",
+		"./components/*": "./src/components/*.tsx",
+		"./cursor-ghost": "./src/lib/cursor-ghost.ts",
+		"./package.json": "./package.json"
+	},
+	"scripts": {
+		"lint": "oxlint --deny-warnings .",
+		"lint:fix": "oxlint --fix .",
+		"format": "prettier --write \"**/*.{ts,tsx}\"",
+		"typecheck": "tsc --noEmit"
+	},
+	"dependencies": {
+		"@base-ui/react": "^1.9.0",
+		"@fontsource-variable/geist-mono": "^5.3.0",
+		"@horon-ai/tokens": "0.1.0",
+		"@phosphor-icons/react": "^2.1.10",
+		"@tanstack/react-table": "^9.3.1",
+		"pretendard": "^1.3.9",
+		"tailwind-merge": "^3.7.0"
+	},
+	"peerDependencies": {
+		"react": ">=19",
+		"react-dom": ">=19"
+	},
+	"devDependencies": {
+		"@tailwindcss/vite": "^4",
+		"@types/node": "^24",
+		"@types/react": "^19",
+		"@types/react-dom": "^19",
+		"tailwindcss": "^4",
+		"typescript": "~6.0.3"
+	}
+}

package/src/components/agent-activity.tsx

@@ -0,0 +1,202 @@
+import { CaretDown, CaretRight, CheckCircle, WarningCircle, Wrench } from "@phosphor-icons/react";
+import { type ComponentProps, type ReactNode, useEffect, useRef, useState } from "react";
+
+import { cn } from "../lib/cn";
+import { Spinner } from "./spinner";
+
+/** Figma `Thinking` (Agent activity 108:660): a 69x31 subtle pill with three 7px dots at 35/55/80% ink. */
+export function ThinkingIndicator({ label = "Thinking", className }: { label?: string; className?: string }) {
+  return (
+    <span
+      role="status"
+      aria-label={label}
+      className={cn(
+        "inline-flex h-7.75 w-17.25 items-center justify-center gap-2 rounded-full border border-border-default bg-bg-surface",
+        className,
+      )}
+    >
+      <span className="size-[7px] animate-thinking rounded-full bg-overlay-ink-35" />
+      <span className="size-[7px] animate-thinking rounded-full bg-overlay-ink-55 [animation-delay:150ms]" />
+      <span className="size-[7px] animate-thinking rounded-full bg-overlay-ink-80 [animation-delay:300ms]" />
+    </span>
+  );
+}
+
+/** Characters per second the reveal moves at least; a larger backlog drains faster (about a third of a second). */
+const REVEAL_RATE = 90;
+const BACKLOG_DRAIN = 3;
+
+/** Moves `end` past a high surrogate so an emoji is never cut in half. */
+function codePointEnd(text: string, end: number): number {
+  const code = text.charCodeAt(end - 1);
+  return code >= 0xd800 && code <= 0xdbff ? end + 1 : end;
+}
+
+/**
+ * How much of `text` to show. While `smooth` streaming runs, new characters are revealed a few per frame so
+ * bursty chunks read as steady typing; otherwise, and under reduced motion, everything shows at once.
+ * Text that no longer extends what was shown (a rewrite) restarts from the shared prefix.
+ */
+function useRevealedLength(text: string, smooth: boolean): number {
+  const [shown, setShown] = useState(text.length);
+  const shownRef = useRef(text.length);
+  const previous = useRef(text);
+
+  useEffect(() => {
+    const set = (length: number) => {
+      shownRef.current = length;
+      setShown(length);
+    };
+    let start = Math.min(shownRef.current, text.length);
+    const before = previous.current;
+    previous.current = text;
+    let shared = 0;
+    while (shared < start && text[shared] === before[shared]) shared++;
+    start = shared;
+
+    if (!smooth || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      set(text.length);
+      return undefined;
+    }
+    if (start !== shownRef.current) set(start);
+    if (start >= text.length) return undefined;
+
+    let position = start;
+    let last = performance.now();
+    let frame = requestAnimationFrame(function tick(now) {
+      const seconds = Math.min(0.1, (now - last) / 1000);
+      last = now;
+      const backlog = text.length - position;
+      position = Math.min(text.length, position + Math.max(REVEAL_RATE * seconds, backlog * BACKLOG_DRAIN * seconds));
+      const length = Math.min(text.length, codePointEnd(text, Math.floor(position)));
+      if (length !== shownRef.current) set(length);
+      if (length < text.length) frame = requestAnimationFrame(tick);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [text, smooth]);
+
+  return Math.min(shown, text.length);
+}
+
+export type StreamingTextProps = Omit<ComponentProps<"div">, "className" | "children"> & {
+  /** Everything received so far; pass the growing string as chunks arrive. */
+  text: string;
+  /** True while more text is coming: the caret shows, and the rest is revealed when it turns false. */
+  streaming?: boolean;
+  /** Reveal arriving chunks a few characters per frame instead of in jumps. Off under reduced motion. */
+  smooth?: boolean;
+  className?: string;
+};
+
+/**
+ * Figma `Streaming` (108:660): the bot bubble an answer types into, body-sm text and a 2px ink caret that sits
+ * right after the last character and wraps with it. The caret holds still while characters land and blinks
+ * while waiting for the next chunk; it goes away when the stream ends. Screen readers get the answer once,
+ * when it is complete, instead of every chunk.
+ */
+export function StreamingText({ text, streaming = true, smooth = true, className, ...props }: StreamingTextProps) {
+  const shown = useRevealedLength(text, streaming && smooth);
+  const typing = shown < text.length;
+  return (
+    <div
+      className={cn(
+        "w-fit max-w-full rounded-xl border border-border-default bg-bg-surface px-4 py-3 text-body-sm wrap-break-word whitespace-pre-wrap text-text-primary",
+        className,
+      )}
+      {...props}
+    >
+      <span aria-hidden>{text.slice(0, shown)}</span>
+      {streaming && (
+        <span
+          aria-hidden
+          className={cn(
+            "ml-px inline-block h-[1.15em] w-0.5 rounded-[1px] bg-interactive-primary align-[-0.2em]",
+            !typing && "animate-caret",
+          )}
+        />
+      )}
+      <span className="sr-only" aria-live="polite" aria-busy={streaming}>
+        {streaming ? "" : text}
+      </span>
+    </div>
+  );
+}
+
+export type ToolStepState = "running" | "done" | "failed";
+
+export type ToolStepProps = Omit<ComponentProps<"button">, "className" | "title"> & {
+  state?: ToolStepState;
+  title: ReactNode;
+  detail?: ReactNode;
+  className?: string;
+};
+
+/** Figma `Tool step` (108:660): a flat 12px-radius row with spinner, check or warning, and a caret. */
+export function ToolStep({ state = "running", title, detail, className, ...props }: ToolStepProps) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        "flex w-full min-w-0 motion-press cursor-pointer items-center gap-2.5 rounded-md border border-border-default bg-bg-surface px-2.5 py-2 text-left focus-visible:outline-2 focus-visible:outline-text-brand",
+        className,
+      )}
+      {...props}
+    >
+      {state === "running" && <Spinner size="sm" />}
+      {state === "done" && <CheckCircle aria-hidden className="size-4 shrink-0 text-text-secondary" />}
+      {state === "failed" && <WarningCircle aria-hidden className="size-4 shrink-0 text-text-danger" />}
+      <span className="flex min-w-0 flex-1 flex-col gap-px">
+        <span className={cn("truncate text-label-md", state === "failed" ? "text-text-danger" : "text-text-primary")}>
+          {title}
+        </span>
+        {detail && <span className="truncate text-caption text-text-secondary">{detail}</span>}
+      </span>
+      <CaretRight aria-hidden className="size-3.5 shrink-0 text-text-secondary" />
+    </button>
+  );
+}
+
+export type WorkLogStep = { id: string; title: ReactNode; detail?: ReactNode; running?: boolean };
+
+/** Figma `Work log` (108:660): a flat subtle card with a wrench summary row and compact steps. */
+export function WorkLog({
+  summary,
+  steps,
+  className,
+}: {
+  summary: ReactNode;
+  steps: WorkLogStep[];
+  className?: string;
+}) {
+  return (
+    <details
+      open
+      className={cn(
+        "group flex w-full max-w-85 min-w-0 flex-col motion-details rounded-[16px] border border-border-default bg-bg-surface p-1.5",
+        className,
+      )}
+    >
+      <summary className="flex min-w-0 cursor-pointer list-none items-center gap-2 px-2.5 py-1.5 text-caption text-text-secondary [&::-webkit-details-marker]:hidden">
+        <Wrench aria-hidden className="size-3.5 shrink-0" />
+        <span className="min-w-0 flex-1">{summary}</span>
+        <CaretDown
+          aria-hidden
+          className="size-3.5 shrink-0 transition-transform duration-200 ease-out-quint group-not-open:-rotate-90"
+        />
+      </summary>
+      {steps.map((step) => (
+        <div key={step.id} className="flex items-center gap-2.5 px-2.5 py-1.5">
+          {step.running ? (
+            <Spinner size="xs" />
+          ) : (
+            <CheckCircle aria-hidden className="size-3.5 shrink-0 text-text-secondary" />
+          )}
+          <span className="flex min-w-0 flex-1 flex-col">
+            <span className="truncate text-label-sm text-text-primary">{step.title}</span>
+            {step.detail && <span className="truncate text-caption text-text-secondary">{step.detail}</span>}
+          </span>
+        </div>
+      ))}
+    </details>
+  );
+}

package/src/components/agent-lane.tsx

@@ -0,0 +1,80 @@
+import { CheckCircle, WarningCircle } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { Spinner } from "./spinner";
+
+export type AgentLaneStatus = "running" | "done" | "failed";
+
+export type AgentLaneProps = {
+  status: AgentLaneStatus;
+  bot: { initial: string; name: ReactNode };
+  /** Duration, such as "1.9s". */
+  elapsed?: ReactNode;
+  task: ReactNode;
+  /** 14px tool icon and source, such as "Notion · Q3 metrics dashboard". */
+  tool?: { icon: ReactNode; label: ReactNode };
+  /** Latest output, or the error when failed. */
+  output?: ReactNode;
+  /** Usage caption, such as "2.6k tokens". */
+  usage?: ReactNode;
+  className?: string;
+};
+
+const botTile: Record<AgentLaneStatus, string> = {
+  running: "bg-sky-400",
+  done: "bg-sky-600",
+  failed: "bg-sky-800",
+};
+
+/** Figma `Agent lane` (Agent orchestrator 113:953): one sub-agent's card in a fan-out, flat subtle with a red rim on failure. */
+export function AgentLane({ status, bot, elapsed, task, tool, output, usage, className }: AgentLaneProps) {
+  return (
+    <div
+      className={cn(
+        "flex min-w-0 flex-col gap-1.5 rounded-2xl border bg-bg-surface px-4 py-3 motion-colors",
+        status === "failed" ? "border-border-danger" : "border-border-default",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2 text-caption text-text-secondary">
+        {/* live-pulse draws its ring in currentColor, so the running wrapper carries the tile's sky tone. */}
+        <span className={cn("shrink-0 rounded-[5px]", status === "running" && "animate-live-pulse text-sky-400")}>
+          <span
+            className={cn(
+              "flex size-4.5 items-center justify-center rounded-[5px] text-label-sm text-text-inverse motion-colors",
+              botTile[status],
+            )}
+          >
+            {bot.initial}
+          </span>
+        </span>
+        <span className="min-w-0 flex-1 truncate">{bot.name}</span>
+        <span className="flex size-3.5 shrink-0 items-center justify-center">
+          {status === "running" && <Spinner size={12} />}
+          {status === "done" && <CheckCircle aria-hidden className="size-3.5" />}
+          {status === "failed" && <WarningCircle aria-hidden className="size-3.5 text-text-danger" />}
+        </span>
+        {elapsed && <span className="shrink-0 tabular-nums">{elapsed}</span>}
+      </div>
+      <p className="min-w-0 text-label-lg wrap-break-word text-text-primary">{task}</p>
+      {tool && (
+        <div className="flex items-center gap-1.5 text-caption text-text-secondary [&>svg]:size-3.5">
+          {tool.icon}
+          <span className="truncate">{tool.label}</span>
+        </div>
+      )}
+      {output && (
+        <p
+          className={cn(
+            "min-w-0 text-body-sm wrap-break-word",
+            status === "failed" ? "text-text-danger" : "text-text-primary",
+          )}
+        >
+          {output}
+        </p>
+      )}
+      {usage && <p className="text-caption text-text-secondary">{usage}</p>}
+    </div>
+  );
+}