Shows live subagent activity and recent transcripts in a session pane

A collection of personal Claude Code mods by Brad Traversy. These mods add useful session information, interface customizations, safety demonstrations, and verification tools to Claude Code.
Every mod is a small, independent Claude Code plugin written in TypeScript. Install only the ones you want, or run all eight together.
[!IMPORTANT] Mods run inside Claude Code with your user permissions. They can see session events, start processes, access files, and make network requests. Read the source before installing any mod, including these.
A mod is a Claude Code plugin with JavaScript or TypeScript event handlers. Claude Code calls those handlers when something happens, such as:
A handler can observe the event, change it, or handle it completely. That makes mods different from normal settings hooks. A mod can draw interface elements, replace existing tool rows, register slash commands, share state between handlers, and intercept a tool call before it runs.
These mods work in:
Visual elements do not appear in the VS Code chat panel, claude -p, Agent SDK sessions, or cloud sessions. Plugins are not available in WSL sessions opened through the desktop app.
gh auth login, only if you want Verification Ledger to display remote GitHub Actions runsCheck your terminal version:
claude --version
In the desktop Code tab, enter /status and check the Claude Code version.
Run this in your shell:
claude plugin marketplace add bradtraversy/claude-mods
You can also enter this in a Claude Code session:
/plugin marketplace add bradtraversy/claude-mods
Install one mod:
claude plugin install session-hud@traversy-mods
Install all eight:
claude plugin install session-hud@traversy-mods
claude plugin install impact-map@traversy-mods
claude plugin install tool-cards@traversy-mods
claude plugin install safe-shell@traversy-mods
claude plugin install quality-console@traversy-mods
claude plugin install verification-ledger@traversy-mods
claude plugin install agent-pulse@traversy-mods
claude plugin install work-queue@traversy-mods
Inside an interactive session, the same commands start with /plugin install instead of claude plugin install.
Start a new Claude Code session. If a session was already open when you installed or updated a mod, enter:
/reload-plugins
Run /plugin and open the Installed tab to confirm that the mods are enabled.
Claude Code in the terminal and local sessions in the desktop Code tab share user-scoped plugin settings. Install a mod once at user scope and it is available in both places.
For the desktop app:
/reload-plugins, or start a new session after installation./plugin and confirm the mod is listed as active.You can also use the desktop plugin manager. Click the plus button beside the prompt, choose Plugins, and use Manage plugins to enable or disable an installed mod.
| Mod | What it does | How to open or test it |
|---|---|---|
| Session HUD | Shows the current Git branch, context, and weekly usage with detailed session information | Switch branches or click Details beside the context meter |
| Impact Map | Tracks touched files and opens current Git diffs | Select an edited or created file in the Impact Map |
| Tool Cards | Replaces normal tool-use rows with compact status cards | Ask Claude to read a file or run a command |
| Safe Shell | Demonstrates a confirmation gate for a marked Bash command | Ask Claude to run echo __SAFE_SHELL_DEMO__ |
| Quality Console | Validates a local mod from inside Claude Code | Enter /mod-check <path> |
| Verification Ledger | Tracks local checks, Git state, and GitHub Actions | Enter /checks |
| Agent Pulse | Shows live subagent status, activity, elapsed time, and recent transcripts | Ask Claude to use a subagent or enter /agents |
| Work Queue | Groups session tasks by working, blocked, ready, and done | Ask Claude to create tasks or enter /work-queue |
Session HUD draws a compact band above the prompt with:
Working branches appear in green. main and master appear in yellow as a reminder that you are on the default branch. Detached HEAD states are also yellow, and folders outside a Git repository say so directly. Session HUD checks every five seconds, so it also catches branch changes made in the built-in terminal or another terminal. Branches changed by a Claude Bash tool refresh immediately.
The compact Week label shows overall seven-day account usage. Click Details beside it to open Session Details. The pane shows:
Claude Code also counts the current context and shows:
The full breakdown runs only when you click Details or press Refresh. It does not poll in the background. Claude Code provides a reliable total for Messages, but it does not provide a reliable token count for every individual message.
The context percentage uses a configurable personal target. It does not change Claude's actual context window or automatic compaction behavior.
Open Session Details and select Change beside the current target. Enter a value such as 200k, 300k, 750k, or 1m, then press Enter to save it. You can also open Claude Code's /config menu and change Context target there.
The setting is saved with the plugin and applies to future sessions. The default is 300k, and accepted values range from 10k through 10m.
The meter is green below 70 percent, yellow from 70 through 89 percent, and red at 90 percent or higher. Its visual fill stops at 100 percent, but the numeric percentage can go higher.
session-hud.Week label shows your weekly percentage.Details beside the progress bar.Change, enter another context target, and confirm that the percentage updates after the mod reloads.Source: session-hud/hooks/register.tsx
Impact Map opens a pane that records the most recent files Claude touched during the current session.
It labels each file as:
READ when Claude uses the Read toolEDITED when Claude uses the Edit toolCREATED when Claude uses the Write toolThe pane keeps the 14 most recent unique file paths. Reading or changing the same file again moves it to the newest position.
Edited and created files are clickable. Selecting one opens a Diff pane with Claude Code's native unified-diff highlighting. Tracked files use the current working-tree diff against HEAD. Untracked files are shown as newly added files.
The Diff pane reflects the file's current Git state, not a private history of only Claude's edits. If you or another tool changed the same file, those changes appear too. Read-only files are not clickable because they have no change to display.
impact-map./impact-map to reopen it.Claude Code has one docked pane area. If Verification Ledger is also open, the two panes appear as tabs in that area rather than side by side.
Source: impact-map/hooks/register.tsx
Tool Cards replaces Claude Code's standard tool-use row with a bordered card that emphasizes the current state, tool name, and target.
Possible states are:
RUNNINGDONEFAILEDSTOPPEDFor file tools, the card displays the file path. For Bash, it displays the command. It also handles tools that expose a path or pattern field.
tool-cards.RUNNING to DONE.FAILED state.The green DONE label is part of this mod. Disable Tool Cards from /plugin to return to Claude Code's normal tool rows.
Source: tool-cards/hooks/register.tsx
Safe Shell is a harmless demonstration of a tool.check handler. It shows how a mod can stop before a Bash command runs and ask the user to approve or cancel it.
This version looks only for the marker:
__SAFE_SHELL_DEMO__
It does not attempt to identify real dangerous commands. That limited behavior is intentional, so the demo cannot accidentally become a false promise of shell security.
safe-shell. echo __SAFE_SHELL_DEMO__
git status and confirm that Safe Shell does not interfere.Source: safe-shell/hooks/register.ts
Quality Console adds a /mod-check command that runs Claude Code's official static validator against a local mod directory.
Use it from a Claude Code session:
/mod-check /absolute/path/to/a-mod
If you omit the path, it validates the current working directory:
/mod-check
The command displays PASS, FAIL, or ERROR followed by the validator output. Validation checks the manifest, hook events, matchers, API calls, imports, and statically detectable capabilities. It does not execute the mod.
quality-console./mod-check with the absolute path to one of the mod directories.PASS.Example:
/mod-check /path/to/claude-mods/session-hud
Source: quality-console/hooks/register.ts
Verification Ledger opens a Checks pane that combines three kinds of evidence:
Open it with:
/checks
The pane does not open automatically, so it does not compete with Impact Map until you ask for it. When both panes are open, Claude Code places them in tabs within the same docked pane area.
The ledger recognizes common commands in these categories:
npm run verify, pnpm verify, yarn verify, bun verify, and ./scripts/verifycargo test, and go testtsc --noEmit, Mypy, and Pyrightcargo build, and go buildThe command must be run by Claude through its Bash tool. A command run manually in a separate terminal is not a Claude Code event, so the mod cannot observe it.
Verification Ledger stores the latest result in each category for the current session.
PASS means the recognized command completed successfully.FAIL means it returned an error.STALE means files, the current commit, or the recorded session revision changed after the check ran.Local results reset when the mod reloads or a new session starts. The ledger is a live session display, not a permanent audit database.
Remote checks require the GitHub CLI:
gh --version
gh auth status
If needed, authenticate it:
gh auth login
While the Checks pane is open, the mod runs this read-only query for the current commit every 15 seconds:
gh run list --commit <commit-sha> --limit 8 --json name,status,conclusion,url,headSha,workflowName
The pane displays workflow links and the states RUNNING, PASS, FAIL, or SKIPPED. It also shows a toast when a previously running workflow passes or fails.
If gh is missing, not authenticated, or the repository is not hosted on GitHub, the remote section reports that GitHub CI is unavailable. Local checks and Git state still work.
Open verification-ledger/hooks/config.ts:
export const CI_POLL_INTERVAL_MS = 15_000
export const MAX_CI_RUNS = 8
Change the values to control how often the open pane refreshes and how many workflow runs it displays.
verification-ledger in a Git repository./checks.Tests appears with PASS or FAIL./checks and confirm that the earlier result is STALE.RUNNING to its final state.Source: verification-ledger/hooks/register.tsx
Agent Pulse opens an Agents pane when the first subagent starts in the current session. It gives each agent a compact card with:
The pane does not open when a session has no subagents. It also does not take keyboard focus when it opens automatically. Enter /agents whenever you want to open it manually or bring it back after closing it.
Select View on an agent card to replace the list with a compact detail view. The detail view shows the agent type, status, elapsed time, parent agent when present, and up to eight recent transcript messages. Select Back to return to the full list.
Agent Pulse keeps finished agents in the pane for the rest of the current session, even when Claude Code no longer includes them in its live agent list. The history resets when the mod reloads or a new session starts.
Possible states are:
PENDING before work beginsRUNNING while the agent is workingWAITING when it is waiting on another actionIDLE when a teammate is available for more workCOMPLETED after a successful resultFAILED after an error or refusalKILLED after an interrupted runAgent Pulse uses only Claude Code's agent, session, clock, command, and interface APIs. It does not call a model, start a process, read project files, make a network request, or save agent transcripts outside the current session.
Claude Code may deny transcript access for an agent running in another process, a remote workflow agent, or an agent whose saved transcript is no longer available. The card still shows any status and activity that Claude Code reports, and the detail view explains when its transcript cannot be read.
agent-pulse./agents and confirm that the empty state says there are no subagents in the session.Agents pane opens without taking focus.View and confirm that the recent prompt, response, and tool names appear.Back to return to the agent list.Source: agent-pulse/hooks/register.tsx
Work Queue opens a Tasks pane when Claude creates the first task in the current session. It turns Claude's task state into four focused groups:
Working for tasks in progressBlocked for pending tasks with unfinished dependenciesReady for pending tasks that can startDone for completed tasksEach row shows the task subject, owner when one is assigned, and how long it has been in its current state. Select View to see the full description, owner, creation and update times, tasks that block it, and tasks that depend on it. Dependencies are clickable, so you can move through the work graph without leaving the pane.
The pane does not open in an empty session and does not take keyboard focus when it opens automatically. Enter /work-queue to open it manually or bring it back after closing it.
Work Queue observes TaskCreate, TaskUpdate, TaskList, and TaskGet tool calls. It also observes Claude Code's task-created and task-completed lifecycle events, which catches task activity that did not pass through those tools. It never creates, updates, completes, or deletes a task itself.
Task history lives only in memory for the current session. Reloading the mod or starting a new session clears the pane. The mod does not call a model, start a process, read project files, make a network request, or persist task data.
Claude Code does not deliver classic task lifecycle events to user-installed plugins when an organization manages the installation. Normal task tool calls still appear, but a task created in another process may be missing if it produces only a lifecycle event.
work-queue./work-queue and confirm that the empty state says there are no tasks in the session.Working, the dependent task under Blocked, and the remaining task under Ready.View on the blocked task and confirm that the API task appears under Blocked by.Done while the dependent task moves to Ready.Source: work-queue/hooks/register.tsx
The mods have separate responsibilities, so their interface elements do not duplicate each other:
/mod-check.Impact Map, Verification Ledger, Agent Pulse, and Work Queue share Claude Code's single docked pane area as separate tabs. Agent Pulse shows who is working, while Work Queue shows what work exists and what is blocked. All other mods use different interface regions or event types.
You do not need Node.js, a bundler, or a dependency installation. Claude Code loads TypeScript mod files directly and supplies the test runner.
git clone https://github.com/bradtraversy/claude-mods.git
cd claude-mods
claude plugin validate .
claude plugin validate ./session-hud
claude plugin validate ./impact-map
claude plugin validate ./tool-cards
claude plugin validate ./safe-shell
claude plugin validate ./quality-console
claude plugin validate ./verification-ledger
claude plugin validate ./agent-pulse
claude plugin validate ./work-queue
Validation reads the mod without executing it. Review the reported hooks: and calls: lines to see what it handles and which Claude Code APIs it uses.
claude plugin test ./session-hud
claude plugin test ./impact-map
claude plugin test ./tool-cards
claude plugin test ./safe-shell
claude plugin test ./quality-console
claude plugin test ./verification-ledger
claude plugin test ./agent-pulse
claude plugin test ./work-queue
The interface tests mount each visual mod on simulated terminal and desktop surfaces.
claude --plugin-dir ./session-hud
Claude Code watches a directory loaded with --plugin-dir and reloads the hooks module after changes. Run /plugin to confirm that the mod loaded.
You can load multiple development directories by repeating the flag:
claude \
--plugin-dir ./session-hud \
--plugin-dir ./impact-map \
--plugin-dir ./tool-cards
Register the clone itself as a local marketplace:
claude plugin marketplace add /absolute/path/to/claude-mods
Then install any mod from traversy-mods. A marketplace added from a local directory reads these relative plugin directories in place, so edits appear after a new session starts or after /reload-plugins.
This is the easiest development setup for sharing the exact same working directory between terminal sessions and local desktop Code sessions.
Every directory follows the same basic structure:
mod-name/
├── .claude-plugin/
│ ├── plugin.json
│ └── types/
│ ├── .gitignore
│ └── tsconfig.json
├── hooks/
│ ├── hooks.json
│ ├── config.ts # only when the mod has user-editable settings
│ └── register.tsx # register.ts when JSX is not needed
├── tests/
│ └── mod-name.test.ts
└── tsconfig.json
plugin.jsonThe plugin manifest provides the mod name, version, description, and author.
hooks.jsonThis file points Claude Code to the TypeScript module that registers the event handlers.
register.ts or register.tsxThe module imports the Register type from claude-code and exports a register function:
import type { Register } from 'claude-code'
export const register: Register = on => {
on('session.start', ($, event, next) => {
return next(event)
})
}
The Register type comes from declarations generated by Claude Code in .claude-plugin/types/. Those declarations also provide types for $, event, and next, which removes the red lines a
hooks/register.tsx 487 lines1import type {
2 AgentInfo,
3 AgentStatus,
4 EngineInterface,
5 Register,
6 SessionMessage,
7 Timer,
8} from 'claude-code'
9
10const PANE = 'agent-pulse'
11const POLL_INTERVAL_MS = 2_000
12const TRANSCRIPT_LIMIT = 8
13const TRANSCRIPT_TEXT_LIMIT = 600
14
15type AgentRecord = {
16 info: AgentInfo
17 firstSeenAt: number
18 lastChangedAt: number
19 currentTool: string
20 lastTool: string
21}
22
23const records = new Map<string, AgentRecord>()
24let selectedAgentId = ''
25let transcript: SessionMessage[] = []
26let transcriptLoading = false
27let transcriptError = ''
28let currentTime = 0
29let didAutoOpen = false
30let pollTimer: Timer | null = null
31
32function isFinished(status: AgentStatus): boolean {
33 return status === 'completed' || status === 'failed' || status === 'killed'
34}
35
36function statusColor(status: AgentStatus): 'success' | 'error' | 'warning' | 'accent' | 'inactive' {
37 if (status === 'running' || status === 'completed') return 'success'
38 if (status === 'failed' || status === 'killed') return 'error'
39 if (status === 'waiting') return 'warning'
40 if (status === 'idle') return 'inactive'
41 return 'accent'
42}
43
44function statusLabel(status: AgentStatus): string {
45 return status.toUpperCase()
46}
47
48function displayName(info: AgentInfo): string {
49 return info.name || info.description || info.type
50}
51
52function durationLabel(milliseconds: number): string {
53 const seconds = Math.max(0, Math.floor(milliseconds / 1_000))
54 if (seconds < 60) return `${seconds}s`
55
56 const minutes = Math.floor(seconds / 60)
57 if (minutes < 60) return `${minutes}m ${seconds % 60}s`
58
59 const hours = Math.floor(minutes / 60)
60 return `${hours}h ${minutes % 60}m`
61}
62
63function elapsedTime(record: AgentRecord): number {
64 const end = isFinished(record.info.status) ? record.lastChangedAt : currentTime
65 return end - record.firstSeenAt
66}
67
68function normalizeText(text: string): string {
69 const normalized = text.replace(/\s+/g, ' ').trim()
70 if (normalized.length <= TRANSCRIPT_TEXT_LIMIT) return normalized
71 return `${normalized.slice(0, TRANSCRIPT_TEXT_LIMIT - 3)}...`
72}
73
74function countBadgeSvg(activeCount: number, finishedCount: number): string {
75 return [
76 '<svg xmlns="http://www.w3.org/2000/svg" width="190" height="24" viewBox="0 0 190 24">',
77 '<rect width="82" height="24" rx="7" fill="#2b2b2b"/>',
78 '<circle cx="12" cy="12" r="4" fill="#22c55e"/>',
79 '<text x="48" y="16" text-anchor="middle" fill="#f5f5f5" ',
80 'font-family="system-ui, sans-serif" font-size="13" font-weight="600">',
81 `${activeCount} active</text>`,
82 '<rect x="90" width="100" height="24" rx="7" fill="#d4d4d4"/>',
83 '<text x="140" y="16" text-anchor="middle" fill="#171717" ',
84 'font-family="system-ui, sans-serif" font-size="13" font-weight="600">',
85 `${finishedCount} finished</text>`,
86 '</svg>',
87 ].join('')
88}
89
90function sameAgent(left: AgentInfo, right: AgentInfo): boolean {
91 return left.description === right.description
92 && left.type === right.type
93 && left.status === right.status
94 && left.parentId === right.parentId
95 && left.name === right.name
96}
97
98function resetState(): void {
99 records.clear()
100 selectedAgentId = ''
101 transcript = []
102 transcriptLoading = false
103 transcriptError = ''
104 currentTime = 0
105 didAutoOpen = false
106 pollTimer?.cancel()
107 pollTimer = null
108}
109
110function rememberAgent(info: AgentInfo, now: number): boolean {
111 const existing = records.get(info.id)
112
113 if (!existing) {
114 records.set(info.id, {
115 info,
116 firstSeenAt: now,
117 lastChangedAt: now,
118 currentTool: '',
119 lastTool: '',
120 })
121 return true
122 }
123
124 if (!sameAgent(existing.info, info)) {
125 existing.info = info
126 existing.lastChangedAt = now
127 return true
128 }
129
130 return false
131}
132
133async function refreshAgents($: EngineInterface): Promise<void> {
134 const [agents, now] = await Promise.all([$.agent.list(), $.clock.now()])
135 let changed = currentTime !== now
136 currentTime = now
137
138 for (const agent of agents) {
139 changed = rememberAgent(agent, now) || changed
140 }
141
142 if (agents.length > 0 && !didAutoOpen) {
143 didAutoOpen = true
144 void $.ui.open({ id: PANE, title: 'Agents', columns: 58 })
145 }
146
147 if (changed) $.ui.invalidate('ui.render')
148}
149
150async function refreshOpenPane($: EngineInterface): Promise<void> {
151 try {
152 const pane = (await $.ui.panes()).find(item => item.id === PANE)
153 if (!pane?.isPlaced || !pane.isShown) return
154 await refreshAgents($)
155 } catch {
156 // A refresh failure should never affect Claude's work.
157 }
158}
159
160async function loadTranscript($: EngineInterface, agentId: string): Promise<void> {
161 selectedAgentId = agentId
162 transcript = []
163 transcriptError = ''
164 transcriptLoading = true
165 $.ui.invalidate('ui.render')
166
167 try {
168 const result = await $.session.messages({ agentId })
169 if (selectedAgentId !== agentId) return
170
171 if (Array.isArray(result)) {
172 transcript = result.slice(-TRANSCRIPT_LIMIT)
173 } else {
174 transcriptError = result.deny
175 }
176 } catch (error) {
177 if (selectedAgentId !== agentId) return
178 transcriptError = error instanceof Error ? error.message : String(error)
179 } finally {
180 if (selectedAgentId === agentId) {
181 transcriptLoading = false
182 $.ui.invalidate('ui.render')
183 }
184 }
185}
186
187function seedSpawnedAgent(
188 agentId: string,
189 event: {
190 description: string
191 subagentType: string
192 parentAgentId?: string
193 name?: string
194 },
195 now: number,
196): void {
197 rememberAgent({
198 id: agentId,
199 description: event.description,
200 type: event.subagentType,
201 status: 'running',
202 parentId: event.parentAgentId,
203 name: event.name,
204 }, now)
205}
206
207export const register: Register = on => {
208 on('session.start', async ($, event, next) => {
209 resetState()
210 await $.command.register({
211 name: 'agents',
212 description: 'Open the live subagent activity pane',
213 })
214 pollTimer = $.clock.every(POLL_INTERVAL_MS, () => {
215 void refreshOpenPane($)
216 })
217 return next(event)
218 })
219
220 on('session.end', ($, event, next) => {
221 pollTimer?.cancel()
222 pollTimer = null
223 return next(event)
224 })
225
226 on('command.run', { command: 'agents' }, async $ => {
227 await $.ui.open({
228 id: PANE,
229 title: 'Agents',
230 focus: true,
231 closeOnEscape: true,
232 columns: 58,
233 })
234
235 try {
236 await refreshAgents($)
237 } catch {
238 $.ui.invalidate('ui.render')
239 }
240
241 return { text: 'Agent activity pane opened.' }
242 }).catch(() => ({ text: 'Agent Pulse could not open the activity pane.' }))
243
244 on('agent.spawn', async ($, event, next) => {
245 const result = await next(event)
246
247 if ('agentId' in result && result.agentId) {
248 try {
249 const now = await $.clock.now()
250 currentTime = now
251 seedSpawnedAgent(result.agentId, event, now)
252
253 if (!didAutoOpen) {
254 didAutoOpen = true
255 void $.ui.open({ id: PANE, title: 'Agents', columns: 58 })
256 }
257
258 $.ui.invalidate('ui.render')
259 void refreshAgents($)
260 } catch {
261 // Agent monitoring must not interfere with a successful spawn.
262 }
263 }
264
265 return result
266 }).catch(($, event, next) => next(event))
267
268 on('tool.call', async ($, event, next) => {
269 const agentId = event.agentId
270 const record = agentId ? records.get(agentId) : undefined
271
272 if (record) {
273 record.currentTool = event.tool
274 record.lastChangedAt = await $.clock.now()
275 $.ui.invalidate('ui.render')
276 }
277
278 const result = await next(event)
279
280 if (record) {
281 record.currentTool = ''
282 record.lastTool = event.tool
283 record.lastChangedAt = await $.clock.now()
284 $.ui.invalidate('ui.render')
285 void refreshAgents($)
286 }
287
288 return result
289 }).catch(($, event, next) => next(event))
290
291 on('turn.complete', async ($, event, next) => {
292 const result = await next(event)
293 if (!event.agentId) return result
294
295 const record = records.get(event.agentId)
296 if (record) {
297 record.currentTool = ''
298 record.lastChangedAt = await $.clock.now()
299 $.ui.invalidate('ui.render')
300 }
301
302 if (selectedAgentId === event.agentId) void loadTranscript($, event.agentId)
303 void refreshAgents($)
304 return result
305 }).catch(($, event, next) => next(event))
306
307 on('ui.render', { component: 'Pane', requestId: PANE }, ($, event) => {
308 const { Box, Button, Text } = $.ui.resolve(event)
309 const selected = selectedAgentId ? records.get(selectedAgentId) : undefined
310
311 if (selected) {
312 const messages = transcript
313
314 return (
315 <Box flexDirection="column" gap={1}>
316 <Box justifyContent="space-between" alignItems="center" width="100%">
317 <Button
318 key="agent-back"
319 label="Back"
320 plain
321 onPress={() => {
322 selectedAgentId = ''
323 transcript = []
324 transcriptError = ''
325 $.ui.invalidate('ui.render')
326 }}
327 />
328 <Button
329 key="agent-transcript-refresh"
330 label={transcriptLoading ? 'Loading' : 'Refresh'}
331 plain
332 dimColor
333 onPress={() => {
334 void loadTranscript($, selected.info.id)
335 }}
336 />
337 </Box>
338
339 <Box flexDirection="column">
340 <Box justifyContent="space-between" width="100%">
341 <Text bold wrap="truncate">{displayName(selected.info)}</Text>
342 <Text color={statusColor(selected.info.status)} bold>
343 {statusLabel(selected.info.status)}
344 </Text>
345 </Box>
346 <Text dimColor>
347 {selected.info.type} {durationLabel(elapsedTime(selected))}
348 </Text>
349 {selected.info.parentId && (
350 <Text dimColor wrap="truncate">Parent: {selected.info.parentId}</Text>
351 )}
352 {(selected.currentTool || selected.lastTool) && (
353 <Text dimColor>
354 {selected.currentTool ? 'Using' : 'Last tool'}: {selected.currentTool || selected.lastTool}
355 </Text>
356 )}
357 </Box>
358
359 <Text bold>Recent transcript</Text>
360 {transcriptLoading && <Text dimColor>Loading transcript...</Text>}
361 {!transcriptLoading && transcriptError && <Text color="error">{transcriptError}</Text>}
362 {!transcriptLoading && !transcriptError && messages.length === 0 && (
363 <Text dimColor>No transcript is available yet.</Text>
364 )}
365 {!transcriptLoading && !transcriptError && messages.map((message, index) => {
366 const tools = message.toolUses.map(tool => tool.tool).join(', ')
367 const text = normalizeText(message.text)
368
369 return (
370 <Box key={`message-${index}`} flexDirection="column">
371 <Text color={message.role === 'user' ? 'accent' : 'claude'} bold>
372 {message.role === 'user' ? 'Prompt' : 'Agent'}
373 </Text>
374 {text && <Text wrap="wrap">{text}</Text>}
375 {tools && <Text dimColor wrap="wrap">Tools: {tools}</Text>}
376 </Box>
377 )
378 })}
379 </Box>
380 )
381 }
382
383 const agents = [...records.values()].sort((left, right) => {
384 const finishOrder = Number(isFinished(left.info.status)) - Number(isFinished(right.info.status))
385 return finishOrder || right.lastChangedAt - left.lastChangedAt
386 })
387 const activeCount = agents.filter(agent => !isFinished(agent.info.status)).length
388 const finishedCount = agents.length - activeCount
389 const countBadges = event.surface === 'desktop'
390 ? (() => {
391 const { Svg } = $.ui.resolve(event)
392 return (
393 <Svg
394 source={countBadgeSvg(activeCount, finishedCount)}
395 alt={`${activeCount} active, ${finishedCount} finished`}
396 width={190}
397 height={24}
398 />
399 )
400 })()
401 : (
402 <Box gap={1}>
403 <Box
404 key="active-count"
405 backgroundColor="subtle"
406 paddingX={1}
407 >
408 <Text><Text color="success" bold>● {activeCount}</Text> active</Text>
409 </Box>
410 <Box
411 key="finished-count"
412 backgroundColor="inactive"
413 paddingX={1}
414 >
415 <Text color="inverseText"><Text bold>{finishedCount}</Text> finished</Text>
416 </Box>
417 </Box>
418 )
419
420 return (
421 <Box flexDirection="column" gap={1}>
422 <Box justifyContent="space-between" alignItems="center" width="100%">
423 <Text bold>Agent Pulse</Text>
424 <Button
425 key="agent-list-refresh"
426 label="Refresh"
427 plain
428 dimColor
429 onPress={() => {
430 void refreshAgents($)
431 }}
432 />
433 </Box>
434
435 {agents.length === 0 ? (
436 <Box flexDirection="column">
437 <Text dimColor>No subagents in this session.</Text>
438 <Text dimColor>The pane updates when Claude starts one.</Text>
439 </Box>
440 ) : (
441 <>
442 {countBadges}
443 <Box flexDirection="column" gap={1} marginTop={1}>
444 {agents.map(agent => {
445 const activity = agent.currentTool
446 ? `Using ${agent.currentTool}`
447 : agent.lastTool
448 ? `Last tool: ${agent.lastTool}`
449 : agent.info.type
450
451 return (
452 <Box
453 key={`agent-card:${agent.info.id}`}
454 flexDirection="column"
455 borderStyle="round"
456 borderColor={statusColor(agent.info.status)}
457 paddingX={1}
458 >
459 <Box justifyContent="space-between" width="100%">
460 <Text color={statusColor(agent.info.status)} bold>
461 {statusLabel(agent.info.status)}
462 </Text>
463 <Text dimColor>{durationLabel(elapsedTime(agent))}</Text>
464 </Box>
465 <Text bold wrap="truncate">{displayName(agent.info)}</Text>
466 <Box justifyContent="space-between" alignItems="center" width="100%">
467 <Text dimColor wrap="truncate">{activity}</Text>
468 <Button
469 key={`agent-view:${agent.info.id}`}
470 label="View"
471 plain
472 onPress={() => {
473 void loadTranscript($, agent.info.id)
474 }}
475 />
476 </Box>
477 </Box>
478 )
479 })}
480 </Box>
481 </>
482 )}
483 </Box>
484 )
485 })
486}
487