Claude Session

1import { ClaudeHeader } from "@/registry/brainless/claude/claude-header";
2import { ClaudeMessage } from "@/registry/brainless/claude/claude-message";
3import { ClaudeTodoList } from "@/registry/brainless/claude/claude-todo-list";
4import { ClaudeToolCall } from "@/registry/brainless/claude/claude-tool-call";
5import { ClaudeDiff } from "@/registry/brainless/claude/claude-diff";
6import { ClaudePermission } from "@/registry/brainless/claude/claude-permission";
7import { ClaudeThinking } from "@/registry/brainless/claude/claude-thinking";
8import { ClaudePrompt } from "@/registry/brainless/claude/claude-prompt";
9 
10/**
11 * ClaudeSession — a complete Claude Code screen: welcome header, a full turn
12 * (prompt → plan → tool calls → diff → approval → working line) and the pinned
13 * input composer. Everything a Claude Code session shows, as one block.
14 */
15export function ClaudeSession() {
16  return (
17    <div className="space-y-3 font-mono text-[13px] leading-[1.6] text-[#c0caf5]">
18      <ClaudeHeader cwd="~/dev/acme-app" />
19 
20      <div style={{ color: "#e0af68" }}>
21        <span aria-hidden>⚠ </span>3 MCP servers need authentication · run /mcp
22      </div>
23 
24      <div className="space-y-3 pt-1">
25        <ClaudeMessage role="user">
26          add a dark-mode toggle to the settings page and run the tests
27        </ClaudeMessage>
28 
29        <ClaudeMessage>
30          I&apos;ll add the toggle, wire it into the theme provider, then run the
31          suite.
32        </ClaudeMessage>
33 
34        <ClaudeTodoList
35          todos={[
36            { label: "Read the settings page", status: "done" },
37            { label: "Add the dark-mode toggle", status: "active" },
38            { label: "Run the test suite", status: "todo" },
39          ]}
40        />
41 
42        <ClaudeToolCall tool="Read" arg="app/settings/page.tsx" result="Read 48 lines" />
43 
44        <ClaudeDiff
45          file="app/settings/page.tsx"
46          summary="Updated app/settings/page.tsx with 3 additions and 1 removal"
47          lines={[
48            { type: "ctx", n: 11, text: "export function Settings() {" },
49            { type: "del", n: 12, text: "  return <Panel>{sections}</Panel>" },
50            { type: "add", n: 12, text: "  return (" },
51            { type: "add", n: 13, text: "    <Panel header={<ThemeToggle />}>" },
52            { type: "add", n: 14, text: "      {sections}" },
53            { type: "ctx", n: 15, text: "    </Panel>" },
54          ]}
55        />
56 
57        <ClaudeToolCall
58          tool="Bash"
59// … truncated