@tangle-network/ui 1.0.0

package/src/run/expanded-tool-detail.stories.tsx

@@ -0,0 +1,182 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ExpandedToolDetail } from './expanded-tool-detail'
+import type { ToolPart } from '../types/parts'
+
+const NOW = Date.now()
+
+// -- Fixtures --
+
+const bashPart: ToolPart = {
+  type: 'tool',
+  id: 'etd-bash-1',
+  tool: 'bash',
+  state: {
+    status: 'completed',
+    input: { command: 'pnpm test --run --reporter=verbose 2>&1 | tail -30' },
+    output: `> sandbox-ui@0.4.0 test\n> vitest run --reporter=verbose\n\n stdout | src/utils/format.test.ts\n\n ✓ src/utils/format.test.ts (4)\n   ✓ formatDuration returns ms for values under 1000\n   ✓ formatDuration returns seconds for values 1000-59999\n   ✓ formatDuration returns minutes for large values\n   ✓ truncateText trims at word boundary\n\n ✓ src/utils/tool-display.test.ts (11)\n   ✓ getToolCategory maps bash correctly\n   ✓ getToolCategory maps read correctly\n   ✓ getToolDisplayMetadata builds bash title\n   ✓ getToolDisplayMetadata builds file path\n   ... (8 more)\n\nTest Files  2 passed (2)\n     Tests  15 passed (15)\n  Duration  1.42s`,
+    time: { start: NOW - 3800, end: NOW - 2380 },
+  },
+}
+
+const bashError: ToolPart = {
+  type: 'tool',
+  id: 'etd-bash-error',
+  tool: 'bash',
+  state: {
+    status: 'error',
+    input: { command: 'pnpm test --run' },
+    error: `FAIL src/components/RunGroup.test.tsx\n  ● RunGroup › renders tool parts\n\n    TypeError: Cannot read properties of undefined (reading 'map')\n\n      40 |   const allParts = useMemo(() => {\n      41 |     const parts = []\n    > 42 |     for (const msg of run.messages.map(m => m.id)) {\n         |                                        ^\n      43 |       const msgParts = partMap[msg] ?? []\n\n      at RunGroup (src/run/run-group.tsx:42:40)`,
+    time: { start: NOW - 2100, end: NOW - 1600 },
+  },
+}
+
+const readFilePart: ToolPart = {
+  type: 'tool',
+  id: 'etd-read-1',
+  tool: 'read',
+  state: {
+    status: 'completed',
+    input: { file_path: '/home/user/project/src/run/run-group.tsx' },
+    output: `import { memo, useMemo, type ReactNode } from 'react'\nimport type { Run } from '../types/run'\nimport type { SessionPart } from '../types/parts'\n\nexport interface RunGroupProps {\n  run: Run\n  partMap: Record<string, SessionPart[]>\n  collapsed: boolean\n  onToggle: () => void\n}\n\nexport const RunGroup = memo(({ run, partMap, collapsed, onToggle }: RunGroupProps) => {\n  const allParts = useMemo(() => {\n    const parts: Array<{ part: SessionPart; msgId: string; index: number }> = []\n    for (const msg of run.messages) {\n      const msgParts = partMap[msg.id] ?? []\n      msgParts.forEach((part, index) => parts.push({ part, msgId: msg.id, index }))\n    }\n    return parts\n  }, [run.messages, partMap])\n  // ...\n})`,
+    time: { start: NOW - 1200, end: NOW - 1140 },
+  },
+}
+
+const writeFilePart: ToolPart = {
+  type: 'tool',
+  id: 'etd-write-1',
+  tool: 'write',
+  state: {
+    status: 'completed',
+    input: {
+      file_path: '/home/user/project/src/utils/format.ts',
+      content: `export function formatDuration(ms: number): string {\n  if (ms < 1000) return \`\${ms}ms\`\n  if (ms < 60_000) return \`\${(ms / 1000).toFixed(1)}s\`\n  const m = Math.floor(ms / 60_000)\n  const s = Math.floor((ms % 60_000) / 1000)\n  return \`\${m}m \${s}s\`\n}\n\nexport function truncateText(text: string, maxLength: number): string {\n  if (text.length <= maxLength) return text\n  const truncated = text.slice(0, maxLength)\n  const lastSpace = truncated.lastIndexOf(' ')\n  return (lastSpace > maxLength * 0.8 ? truncated.slice(0, lastSpace) : truncated) + '…'\n}`,
+    },
+    output: 'File written successfully.',
+    time: { start: NOW - 900, end: NOW - 855 },
+  },
+}
+
+const webSearchPart: ToolPart = {
+  type: 'tool',
+  id: 'etd-web-1',
+  tool: 'web_search',
+  state: {
+    status: 'completed',
+    input: { query: 'vitest mock module hoisting typescript esm' },
+    output: JSON.stringify({
+      results: [
+        {
+          title: 'Mocking | Vitest',
+          url: 'https://vitest.dev/guide/mocking',
+          snippet: 'Vitest supports mocking modules and auto-mocking via vi.mock(). Module mocks are hoisted to the top of the file.',
+        },
+        {
+          title: 'vi.mock() | Vitest API',
+          url: 'https://vitest.dev/api/vi#vi-mock',
+          snippet: 'Mocks a module. Calls to vi.mock are hoisted before any import statements.',
+        },
+        {
+          title: 'ESM module mocking with Vitest',
+          url: 'https://github.com/vitest-dev/vitest/discussions/1204',
+          snippet: 'When using ESM, vi.mock must be called in the same file as the import you want to mock.',
+        },
+      ],
+    }, null, 2),
+    time: { start: NOW - 2800, end: NOW - 1900 },
+  },
+}
+
+const grepPart: ToolPart = {
+  type: 'tool',
+  id: 'etd-grep-1',
+  tool: 'grep',
+  state: {
+    status: 'completed',
+    input: { pattern: 'partMap\\[', path: 'src/' },
+    output: `src/run/run-group.tsx:184:      const msgParts = partMap[msg.id] ?? []\nsrc/run/run-group.tsx:291:        key={key}\nsrc/hooks/useRunGroup.ts:44:    setPartMap(prev => ({ ...prev, [msgId]: parts }))`,
+    time: { start: NOW - 600, end: NOW - 560 },
+  },
+}
+
+const runningPart: ToolPart = {
+  type: 'tool',
+  id: 'etd-running',
+  tool: 'bash',
+  state: {
+    status: 'running',
+    input: { command: 'pnpm build --no-cache' },
+    time: { start: NOW - 8000 },
+  },
+}
+
+const genericPart: ToolPart = {
+  type: 'tool',
+  id: 'etd-generic',
+  tool: 'custom_tool',
+  state: {
+    status: 'completed',
+    input: { sessionId: 'sess_abc123', action: 'snapshot', format: 'json' },
+    output: { snapshotId: 'snap_xyz789', size: 1048576, timestamp: NOW - 500 },
+    time: { start: NOW - 1500, end: NOW - 1200 },
+  },
+}
+
+// --
+
+const meta: Meta<typeof ExpandedToolDetail> = {
+  title: 'Run/ExpandedToolDetail',
+  component: ExpandedToolDetail,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: { default: 'dark' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ExpandedToolDetail>
+
+const wrap = (children: React.ReactNode) => (
+  <div className="p-6 max-w-2xl">{children}</div>
+)
+
+export const BashCommand: Story = {
+  args: { part: bashPart },
+  render: (args) => wrap(<ExpandedToolDetail {...args} />),
+}
+
+export const BashError: Story = {
+  args: { part: bashError },
+  render: (args) => wrap(<ExpandedToolDetail {...args} />),
+}
+
+export const ReadFile: Story = {
+  args: { part: readFilePart },
+  render: (args) => wrap(<ExpandedToolDetail {...args} />),
+}
+
+export const WriteFile: Story = {
+  args: { part: writeFilePart },
+  render: (args) => wrap(<ExpandedToolDetail {...args} />),
+}
+
+export const WebSearch: Story = {
+  args: { part: webSearchPart },
+  render: (args) => wrap(<ExpandedToolDetail {...args} />),
+}
+
+export const GrepResults: Story = {
+  args: { part: grepPart },
+  render: (args) => wrap(<ExpandedToolDetail {...args} />),
+}
+
+export const Running: Story = {
+  args: { part: runningPart },
+  render: (args) => wrap(<ExpandedToolDetail {...args} />),
+}
+
+export const GenericFallback: Story = {
+  name: 'Generic (fallback view)',
+  args: { part: genericPart },
+  render: (args) => wrap(<ExpandedToolDetail {...args} />),
+}

package/src/run/expanded-tool-detail.tsx

@@ -0,0 +1,186 @@
+import { memo } from "react";
+import {
+  ArrowRight,
+  ArrowLeft,
+  AlertCircle,
+  Loader2,
+  FileText,
+} from "lucide-react";
+import type { ToolPart } from "../types/parts";
+import { getToolDisplayMetadata } from "../utils/tool-display";
+import { CommandPreview } from "../tool-previews/command-preview";
+import { WriteFilePreview } from "../tool-previews/write-file-preview";
+import { CodeBlock } from "../markdown/code-block";
+import { GrepResultsPreview } from "../tool-previews/grep-results-preview";
+import { GlobResultsPreview } from "../tool-previews/glob-results-preview";
+import { WebSearchPreview } from "../tool-previews/web-search-preview";
+import { QuestionPreview } from "../tool-previews/question-preview";
+import { DiffPreview } from "../tool-previews/diff-preview";
+import { cn } from "../lib/utils";
+
+export interface ExpandedToolDetailProps {
+  part: ToolPart;
+}
+
+const EXT_LANG: Record<string, string> = {
+  ts: "typescript", tsx: "tsx", js: "javascript", jsx: "jsx",
+  rs: "rust", py: "python", go: "go", rb: "ruby",
+  json: "json", yaml: "yaml", yml: "yaml", toml: "toml",
+  md: "markdown", css: "css", scss: "scss", html: "html",
+  sh: "bash", bash: "bash", zsh: "bash", sql: "sql",
+  sol: "solidity", proto: "protobuf",
+};
+
+function langFromPath(path?: string): string | undefined {
+  if (!path) return undefined;
+  const ext = path.split(".").pop()?.toLowerCase();
+  return ext ? EXT_LANG[ext] : undefined;
+}
+
+/** Format an unknown value as a displayable string. */
+function formatOutput(value: unknown): string {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+/**
+ * Renders full tool details when a tool item is expanded.
+ * Dispatches to specialised previews (CommandPreview, WriteFilePreview)
+ * or falls back to a generic input/output code view.
+ */
+export const ExpandedToolDetail = memo(({ part }: ExpandedToolDetailProps) => {
+  const meta = getToolDisplayMetadata(part);
+  const { status, input, output, error } = part.state;
+
+  // Specialised previews
+  if (meta.displayVariant === "command") {
+    return <CommandPreview part={part} />;
+  }
+
+  if (meta.displayVariant === "write-file") {
+    return <WriteFilePreview part={part} />;
+  }
+
+  if (meta.displayVariant === "grep") {
+    return <GrepResultsPreview part={part} />;
+  }
+
+  if (meta.displayVariant === "glob") {
+    return <GlobResultsPreview part={part} />;
+  }
+
+  if (meta.displayVariant === "web-search") {
+    return <WebSearchPreview part={part} />;
+  }
+
+  if (meta.displayVariant === "question") {
+    return <QuestionPreview part={part} />;
+  }
+
+  if (meta.displayVariant === "diff") {
+    return <DiffPreview part={part} />;
+  }
+
+  if (meta.displayVariant === "read-file") {
+    return (
+      <div className="overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)]">
+        <div className="flex items-center gap-2.5 border-b border-border bg-card px-3 py-2">
+          <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--border-accent)] bg-muted text-primary">
+            <FileText className="h-3.5 w-3.5" />
+          </div>
+          <div className="min-w-0 flex items-center gap-2">
+            <span className="text-xs font-semibold text-foreground">Read file</span>
+            {meta.targetPath ? (
+              <span className="truncate text-xs font-mono text-muted-foreground">{meta.targetPath}</span>
+            ) : null}
+          </div>
+        </div>
+        <div className="space-y-2 px-3 py-2.5">
+          {typeof output === "string" ? (
+            <CodeBlock code={output} language={langFromPath(meta.targetPath) ?? "text"} className="rounded-[var(--radius-md)]" />
+          ) : (
+            <div className="rounded-[var(--radius-md)] border border-dashed border-border bg-muted px-3 py-4 text-sm text-muted-foreground">
+              No readable file content was returned.
+            </div>
+          )}
+          {error ? (
+            <div className="rounded-[var(--radius-md)] border border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-3 py-3 text-sm text-[var(--surface-danger-text)]">
+              {error}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+
+  // Generic fallback — show input/output/error
+  const inputStr = formatOutput(input);
+  const outputStr = formatOutput(output);
+
+  return (
+    <div className="space-y-3">
+      {/* Input */}
+      {inputStr && (
+        <div className="overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card">
+          <div className="flex items-center gap-2 border-b border-border bg-background px-3 py-2">
+            <ArrowRight className="h-3 w-3 text-primary" />
+            <span className="text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground">
+              Input
+            </span>
+          </div>
+          <CodeBlock code={inputStr} language="json" className="rounded-none border-0" />
+        </div>
+      )}
+
+      {/* Output */}
+      {status === "completed" && outputStr && (
+        <div className="overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card">
+          <div className="flex items-center gap-2 border-b border-border bg-background px-3 py-2">
+            <ArrowLeft className="h-3 w-3 text-primary" />
+            <span className="text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground">
+              Output
+            </span>
+          </div>
+          <CodeBlock
+            code={
+              outputStr.length > 2000
+                ? outputStr.slice(0, 2000) + "\n...(truncated)"
+                : outputStr
+            }
+            language="json"
+            className="rounded-none border-0"
+          />
+        </div>
+      )}
+
+      {/* Error */}
+      {error && (
+        <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--surface-danger-border)]">
+          <div className="flex items-center gap-2 border-b border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-3 py-2">
+            <AlertCircle className="h-3 w-3 text-[var(--surface-danger-text)]" />
+            <span className="text-xs font-medium uppercase tracking-[0.08em] text-[var(--surface-danger-text)]">
+              Error
+            </span>
+          </div>
+          <pre className="bg-[var(--surface-danger-bg)] p-3 text-xs font-mono whitespace-pre-wrap break-all text-[var(--surface-danger-text)]">
+            {error}
+          </pre>
+        </div>
+      )}
+
+      {/* Running state */}
+      {(status === "pending" || status === "running") && (
+        <div className="flex items-center gap-2 rounded-[var(--radius-md)] border border-border bg-muted px-3 py-3 text-xs text-muted-foreground">
+          <Loader2 className={cn("h-3 w-3 animate-spin text-primary")} />
+          Running…
+        </div>
+      )}
+    </div>
+  );
+});
+ExpandedToolDetail.displayName = "ExpandedToolDetail";

package/src/run/index.ts

@@ -0,0 +1,13 @@
+export { RunGroup, type RunGroupProps } from "./run-group";
+export { InlineToolItem, type InlineToolItemProps } from "./inline-tool-item";
+export {
+  InlineThinkingItem,
+  type InlineThinkingItemProps,
+} from "./inline-thinking-item";
+export {
+  ExpandedToolDetail,
+  type ExpandedToolDetailProps,
+} from "./expanded-tool-detail";
+export { LiveDuration } from "./run-item-primitives";
+export { ToolCallStep, ToolCallGroup, type ToolCallStepProps, type ToolCallGroupProps, type ToolCallType, type ToolCallStatus } from "./tool-call-step";
+export { ToolCallFeed, parseToolEvent, type ToolCallFeedProps, type ToolCallData, type FeedSegment } from "./tool-call-feed";

package/src/run/inline-thinking-item.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { InlineThinkingItem } from './inline-thinking-item'
+import type { ReasoningPart } from '../types/parts'
+
+const NOW = Date.now()
+
+// -- Fixtures --
+
+const thinkingComplete: ReasoningPart = {
+  type: 'reasoning',
+  text: `The user wants me to fix the failing test in \`src/utils/format.test.ts\`. Let me read the test file first to understand what's expected, then look at the implementation.
+
+The error says "Cannot read properties of undefined (reading 'map')" at line 42. This usually means the data array is undefined — likely an async fetch that hasn't resolved yet.
+
+I should:
+1. Read the failing test file
+2. Read the implementation
+3. Check if there's a missing await or an unhandled promise
+4. Fix the issue and re-run tests to confirm`,
+  time: { start: NOW - 12400, end: NOW - 6800 },
+}
+
+const thinkingActive: ReasoningPart = {
+  type: 'reasoning',
+  text: `I need to carefully think about the approach here. The test is expecting...`,
+  time: { start: NOW - 3000 },
+}
+
+const thinkingShort: ReasoningPart = {
+  type: 'reasoning',
+  text: 'Read the file, check the types, apply the fix.',
+  time: { start: NOW - 800, end: NOW - 500 },
+}
+
+const thinkingLong: ReasoningPart = {
+  type: 'reasoning',
+  text: `This is a complex TypeScript type error. Let me trace through the issue systematically.
+
+The component \`RunGroup\` accepts a \`partMap\` of type \`Record<string, SessionPart[]>\`. When we flatten the parts, we iterate \`run.messages\` and look up each message ID in the map. The issue is that \`run.messages\` contains message IDs that might not exist in \`partMap\` yet — this happens during streaming when parts arrive before the message index is updated.
+
+The fix is straightforward: add a null-coalescing fallback (\`?? []\`) when accessing \`partMap[msg.id]\`. This is already present in the code, so the bug must be elsewhere.
+
+Looking more carefully at the type definitions... \`SessionMessage\` has an \`id\` field of type \`string\`, but the \`partMap\` key is constructed from \`message.messageId\` in some callsites and \`message.id\` in others. That's the mismatch.
+
+I'll grep for all callsites to confirm before patching.`,
+  time: { start: NOW - 18000, end: NOW - 9000 },
+}
+
+const thinkingEmpty: ReasoningPart = {
+  type: 'reasoning',
+  text: '',
+  time: { start: NOW - 400, end: NOW - 200 },
+}
+
+// --
+
+const meta: Meta<typeof InlineThinkingItem> = {
+  title: 'Run/InlineThinkingItem',
+  component: InlineThinkingItem,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: { default: 'dark' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof InlineThinkingItem>
+
+export const Complete: Story = {
+  args: { part: thinkingComplete, defaultOpen: false, autoCollapse: false },
+  render: (args) => (
+    <div className="p-6 max-w-2xl">
+      <InlineThinkingItem {...args} />
+    </div>
+  ),
+}
+
+export const CompleteOpen: Story = {
+  name: 'Complete (expanded)',
+  args: { part: thinkingComplete, defaultOpen: true, autoCollapse: false },
+  render: (args) => (
+    <div className="p-6 max-w-2xl">
+      <InlineThinkingItem {...args} />
+    </div>
+  ),
+}
+
+export const Active: Story = {
+  name: 'Active (streaming)',
+  args: { part: thinkingActive, defaultOpen: true, autoCollapse: false },
+  render: (args) => (
+    <div className="p-6 max-w-2xl">
+      <InlineThinkingItem {...args} />
+    </div>
+  ),
+}
+
+export const ShortReasoning: Story = {
+  args: { part: thinkingShort, defaultOpen: false, autoCollapse: false },
+  render: (args) => (
+    <div className="p-6 max-w-2xl">
+      <InlineThinkingItem {...args} />
+    </div>
+  ),
+}
+
+export const LongReasoning: Story = {
+  args: { part: thinkingLong, defaultOpen: true, autoCollapse: false },
+  render: (args) => (
+    <div className="p-6 max-w-2xl">
+      <InlineThinkingItem {...args} />
+    </div>
+  ),
+}
+
+export const EmptyText: Story = {
+  args: { part: thinkingEmpty, defaultOpen: true, autoCollapse: false },
+  render: (args) => (
+    <div className="p-6 max-w-2xl">
+      <InlineThinkingItem {...args} />
+    </div>
+  ),
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="p-6 max-w-2xl space-y-3">
+      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1">Active</p>
+      <InlineThinkingItem part={thinkingActive} defaultOpen={true} autoCollapse={false} />
+      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1 pt-2">Complete (collapsed)</p>
+      <InlineThinkingItem part={thinkingComplete} defaultOpen={false} autoCollapse={false} />
+      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1 pt-2">Complete (expanded)</p>
+      <InlineThinkingItem part={thinkingLong} defaultOpen={true} autoCollapse={false} />
+    </div>
+  ),
+}

package/src/run/inline-thinking-item.tsx

@@ -0,0 +1,120 @@
+import { memo, useEffect, useRef, useState } from "react";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { Brain, ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import { formatDuration, truncateText } from "../utils/format";
+import type { ReasoningPart } from "../types/parts";
+import { Markdown } from "../markdown/markdown";
+import { LiveDuration } from "./run-item-primitives";
+
+export interface InlineThinkingItemProps {
+  part: ReasoningPart;
+  defaultOpen?: boolean;
+  autoCollapse?: boolean;
+  className?: string;
+  contentClassName?: string;
+}
+
+export const InlineThinkingItem = memo(
+  ({
+    part,
+    defaultOpen = false,
+    autoCollapse = true,
+    className,
+    contentClassName,
+  }: InlineThinkingItemProps) => {
+    const [open, setOpen] = useState(defaultOpen);
+    const autoCollapsedRef = useRef(false);
+
+    const startTime = part.time?.start;
+    const endTime = part.time?.end;
+    const durationMs = startTime && endTime ? endTime - startTime : undefined;
+    const isActive = startTime != null && endTime == null;
+    const preview = part.text ? truncateText(part.text, 120) : undefined;
+
+    useEffect(() => {
+      if (isActive) {
+        autoCollapsedRef.current = false;
+        setOpen(true);
+        return;
+      }
+
+      if (autoCollapse && !autoCollapsedRef.current && durationMs != null) {
+        const timer = window.setTimeout(() => {
+          setOpen(false);
+          autoCollapsedRef.current = true;
+        }, 900);
+
+        return () => window.clearTimeout(timer);
+      }
+    }, [autoCollapse, durationMs, isActive]);
+
+    return (
+      <Collapsible.Root open={open} onOpenChange={setOpen}>
+        <div
+          className={cn(
+            "overflow-hidden rounded-[var(--radius-lg)] border bg-card transition-colors",
+            isActive
+              ? "border-[var(--border-accent)]"
+              : "border-border hover:border-[var(--border-accent)]",
+            className,
+          )}
+        >
+          <Collapsible.Trigger asChild>
+            <button
+              className="flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm cursor-pointer"
+            >
+              <div
+                className={cn(
+                  "flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border",
+                  isActive
+                    ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary"
+                    : "border-border bg-muted text-muted-foreground",
+                )}
+              >
+                <Brain className={cn("h-3 w-3 shrink-0", isActive && "animate-pulse")} />
+              </div>
+
+              <p className="min-w-0 flex-1 truncate font-[var(--font-sans)] text-muted-foreground">
+                {preview ?? (isActive ? "Thinking…" : "Reasoning")}
+              </p>
+
+              <div className="flex shrink-0 items-center gap-2">
+                {isActive && startTime ? <LiveDuration startTime={startTime} /> : null}
+                {!isActive && durationMs != null ? (
+                  <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
+                    {formatDuration(durationMs)}
+                  </span>
+                ) : null}
+                <ChevronRight
+                  className={cn(
+                    "h-3 w-3 text-muted-foreground transition-transform shrink-0",
+                    open && "rotate-90",
+                  )}
+                />
+              </div>
+            </button>
+          </Collapsible.Trigger>
+
+          <Collapsible.Content className="overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
+            {part.text ? (
+              <div
+                className={cn(
+                  "max-h-60 overflow-y-auto border-t border-border bg-muted px-3 py-3 text-sm leading-relaxed text-muted-foreground",
+                  contentClassName,
+                )}
+              >
+                <Markdown>{part.text}</Markdown>
+              </div>
+            ) : (
+              <div className="border-t border-border bg-muted px-3 py-2.5 text-xs text-muted-foreground">
+                No reasoning text provided.
+              </div>
+            )}
+          </Collapsible.Content>
+        </div>
+      </Collapsible.Root>
+    );
+  },
+);
+InlineThinkingItem.displayName = "InlineThinkingItem";