session-pane

1import { atom, read, update } from 'claude-code'
2import type { Register } from 'claude-code'
3
4import type { Call } from '../types'
5
6const PANE = 'session-pane'
7const files = atom({ plugin: 'session-pane', key: 'files' } as const, [])
8const calls = atom({ plugin: 'session-pane', key: 'calls' } as const, [])
9
10const WRITERS = new Set(['Edit', 'Write', 'MultiEdit', 'NotebookEdit'])
11
12function labelOf(input: Record<string, unknown>): string {
13  const raw = input.file_path ?? input.notebook_path ?? input.command ?? input.pattern ?? input.description ?? ''
14  return String(raw).replace(/\s+/g, ' ').slice(0, 60)
15}
16
17function relative(path: string, cwd: string): string {
18  return path.startsWith(cwd + '/') ? path.slice(cwd.length + 1) : path
19}
20
21// Groups paths by folder so the pane reads as a tree, folders sorted.
22function treeRows(paths: string[]): Array<{ text: string; isFolder: boolean }> {
23  const byFolder = new Map<string, string[]>()
24
25  for (const path of paths) {
26    const cut = path.lastIndexOf('/')
27    const folder = cut === -1 ? '.' : path.slice(0, cut)
28    byFolder.set(folder, [...(byFolder.get(folder) ?? []), path.slice(cut + 1)])
29  }
30
31  return [...byFolder.keys()].sort().flatMap(folder => [
32    { text: `${folder}/`, isFolder: true },
33    ...byFolder.get(folder)!.sort().map(name => ({ text: `  ${name}`, isFolder: false })),
34  ])
35}
36
37export const register: Register = on => {
38  let cwd = ''
39
40  on('session.start', async ($, e, next) => {
41    cwd = e.cwd
42    await $.command.register({
43      name: 'session-pane',
44      description: 'Show files changed this session and the latest tool calls',
45    })
46
47    return next(e)
48  })
49
50  on('command.run', { command: 'session-pane' }, async $ => {
51    await $.ui.open({ id: PANE, title: 'Session' })
52
53    return { text: 'Session pane opened.' }
54  })
55
56  on('tool.call', async ($, e, next) => {
57    const input = e as unknown as Record<string, unknown>
58    const call: Call = { id: e.tool_use_id, tool: e.tool, label: labelOf(input), isDone: false, isError: false }
59    await update($, calls, list => [...list, call].slice(-50))
60
61    const ran = await next(e)
62    const isError = ran.deny !== undefined || ran.isError === true
63    await update($, calls, list =>
64      list.map(one => (one.id === call.id ? { ...one, isDone: true, isError } : one)),
65    )
66
67    const path = input.file_path ?? input.notebook_path
68
69    if (WRITERS.has(e.tool) && !isError && typeof path === 'string') {
70      const shown = relative(path, cwd)
71      await update($, files, list => (list.includes(shown) ? list : [...list, shown]))
72    }
73
74    return ran
75  }).catch(($, e, next) => next(e))
76
77  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
78    const { Box, Text } = $.ui.resolve(e)
79    const changed = await read($, files)
80    const recent = await read($, calls)
81    const rows = Math.max(6, (e.viewport?.rows ?? 24) - 6)
82    const callRoom = Math.min(10, Math.floor(rows / 2))
83    const fileRows = treeRows(changed).slice(0, rows - callRoom)
84
85    return (
86      <Box flexDirection="column">
87        <Text bold>Changed ({changed.length})</Text>
88        {changed.length === 0 && <Text dimColor>No edits yet.</Text>}
89        {fileRows.map(row => (
90          <Text color={row.isFolder ? 'cyan' : undefined} dimColor={row.isFolder}>
91            {row.text}
92          </Text>
93        ))}
94        <Text> </Text>
95        <Text bold>Latest tool calls</Text>
96        {recent.length === 0 && <Text dimColor>None yet.</Text>}
97        {recent.slice(-callRoom).map(call => (
98          <Text color={call.isError ? 'red' : call.isDone ? undefined : 'yellow'} dimColor={call.isDone && !call.isError}>
99            {call.tool} {call.label}
100          </Text>
101        ))}
102      </Box>
103    )
104  })
105}
106

1export type Call = { id: string; tool: string; label: string; isDone: boolean; isError: boolean }
2
3declare module 'claude-code' {
4  interface PluginState {
5    'session-pane': { files: string[]; calls: Call[] }
6  }
7}
8