team

1import { atom, read, update } from 'claude-code'
2import type { Register } from 'claude-code'
3
4import type { Preview, RoleId, Run, TurnCost } from '../types'
5
6// yskills' digital team, drawn from what Claude Code already does: the session itself is the
7// Project Manager, each subagent it starts is a teammate in a role. A band above the prompt shows who is
8// working; /team opens a pane with each role's task and a Watch link to what is being built.
9const runs = atom({ plugin: 'team', key: 'runs' } as const, [] as Run[])
10const isLeadWorking = atom({ plugin: 'team', key: 'isLeadWorking' } as const, false)
11const preview = atom({ plugin: 'team', key: 'preview' } as const, null as Preview | null)
12const last = atom({ plugin: 'team', key: 'last' } as const, null as TurnCost | null)
13
14const PANE = 'team'
15const KEPT_RUNS = 40
16
17// The nine roles HQ and the thread titles use. The session itself is the Project Manager.
18export const ROLES: { id: RoleId; name: string; agents: RegExp }[] = [
19  { id: 'pm', name: 'Project Manager', agents: /^planner$|^architect$|^plan$/i },
20  { id: 'researcher', name: 'Researcher', agents: /^$/ },
21  { id: 'designer', name: 'Designer', agents: /design-critic|a11y/i },
22  { id: 'programmer', name: 'Programmer', agents: /^$/ },
23  { id: 'tester', name: 'Tester', agents: /evaluator|e2e/i },
24  { id: 'reviewer', name: 'Reviewer', agents: /code-reviewer|typescript-reviewer|vue-reviewer|database-reviewer|silent-failure/i },
25  { id: 'security', name: 'Security', agents: /security|red-team/i },
26  { id: 'legal', name: 'Legal', agents: /legal/i },
27  { id: 'marketer', name: 'Marketer', agents: /seo/i },
28]
29
30const RESEARCH = /^researcher|research|competitor/i
31
32export function roleOf(agent: string, description = ''): RoleId {
33  // Security and legal first so "security-reviewer" and "legal-reviewer" don't land in Reviewer;
34  // anything unknown is a Programmer.
35  for (const id of ['security', 'legal', 'designer', 'tester', 'reviewer', 'marketer', 'pm'] as const) {
36    if (ROLES.find(r => r.id === id)!.agents.test(agent)) return id
37  }
38  return RESEARCH.test(description) ? 'researcher' : 'programmer'
39}
40
41// A dev server, a Worker preview or a page the test browser opened: what the team is building.
42const PREVIEW_URL = /https?:\/\/(?:localhost|127\.0\.0\.1)(?::\d+)?[^\s'"<>)]*|https:\/\/[\w.-]+\.workers\.dev[^\s'"<>)]*/
43export const findPreview = (text: string) => text.match(PREVIEW_URL)?.[0]?.replace(/[.,;:]+$/, '')
44
45const k = (n: number) => `${Math.round(n / 1000)}k`
46// The band and the pane must never hold up Claude's work: a failed write leaves old rows showing.
47const quiet = () => undefined
48
49export const register: Register = on => {
50  on('session.start', async ($, e, next) => {
51    await $.command.register({ name: 'team', description: 'Show your team: who works on what, and a Watch link' })
52    return next(e)
53  })
54
55  on('command.run', { command: 'team' }, async $ => {
56    await $.ui.open({ id: PANE, title: 'Team' })
57    return { text: 'Team pane opened.' }
58  })
59
60  on('prompt.submit', async ($, e, next) => {
61    await update($, runs, list => list.filter(r => !r.isDone)).catch(quiet)
62    await update($, isLeadWorking, () => true).catch(quiet)
63    return next(e)
64  }).catch(($, e, next) => next(e))
65
66  on('agent.spawn', async ($, e, next) => {
67    const result = await next(e)
68    if (result.agentId) {
69      const agent = e.subagentType || 'general-purpose'
70      const run: Run = { id: result.agentId, role: roleOf(agent, e.description), agent, task: e.description, isDone: false }
71      await update($, runs, list => [...list, run].slice(-KEPT_RUNS)).catch(quiet)
72    }
73    return result
74  }).catch(($, e, next) => next(e))
75
76  on('tool.call', async ($, e, next) => {
77    const ran = await next(e)
78    // Only the test browser and a command that starts a server (dev, preview, wrangler) set it,
79    // so a curl or a test log doesn't move the Watch link.
80    const isServer = e.tool === 'Bash' && /\b(dev|preview|serve|start|wrangler)\b/.test(String((e as { command?: unknown }).command ?? ''))
81    const url =
82      e.tool.endsWith('browser_navigate') && typeof (e as { url?: unknown }).url === 'string'
83        ? (e as { url: string }).url
84        : isServer && !ran.deny ? findPreview(ran.text ?? '') : undefined
85    if (url) await update($, preview, () => ({ url, from: e.tool === 'Bash' ? 'dev server' : 'test browser' })).catch(quiet)
86    return ran
87  }).catch(($, e, next) => next(e))
88
89  on('turn.complete', async ($, e, next) => {
90    if (e.agentId) {
91      await update($, runs, list => list.map(r => (r.id === e.agentId ? { ...r, isDone: true } : r))).catch(quiet)
92      const run = (await read($, runs)).find(r => r.id === e.agentId)
93      if (run) $.ui.toast(`${ROLES.find(r => r.id === run.role)?.name}: finished ${run.task}`)
94    } else {
95      await update($, isLeadWorking, () => false).catch(quiet)
96      if (e.usage) {
97        const u = e.usage
98        const cost: TurnCost = {
99          tokens: u.input_tokens + u.cache_read_input_tokens + u.cache_creation_input_tokens + u.output_tokens,
100          cacheRead: u.cache_read_input_tokens,
101        }
102        await update($, last, () => cost).catch(quiet)
103      }
104    }
105    return next(e)
106  })
107
108  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
109    const list = await read($, runs)
110    const lead = await read($, isLeadWorking)
111    const cost = await read($, last)
112    if (e.props.hasSurvey || (list.length === 0 && cost === null)) return next(e)
113
114    const { Box, Text } = $.ui.resolve(e)
115    const busy = new Set(list.filter(r => !r.isDone).map(r => r.role))
116    if (lead) busy.add('pm')
117    const shown = ROLES.filter(r => busy.has(r.id) || list.some(x => x.role === r.id))
118
119    return (
120      <Box flexDirection="column">
121        <Text>
122          {shown.map(r => `${busy.has(r.id) ? '●' : '○'} ${r.name}`).join('   ')}
123          <Text dimColor>   /team for details</Text>
124        </Text>
125        {cost && (
126          <Text dimColor>
127            Last turn: {k(cost.tokens)} tokens, {k(cost.cacheRead)} of them re-read context
128          </Text>
129        )}
130      </Box>
131    )
132  })
133
134  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
135    const { Box, Text, Link } = $.ui.resolve(e)
136    const list = await read($, runs)
137    const lead = await read($, isLeadWorking)
138    const live = await read($, preview)
139
140    return (
141      <Box flexDirection="column">
142        {ROLES.map(role => {
143          const mine = list.filter(r => r.role === role.id)
144          const now = mine.filter(r => !r.isDone)
145          const isWorking = role.id === 'pm' ? lead || now.length > 0 : now.length > 0
146          const task = now[0]?.task ?? (role.id === 'pm' ? (lead ? 'Working on your request' : 'Waiting for you') : mine.at(-1)?.task)
147          return (
148            <Box key={role.id} flexDirection="column" marginBottom={1}>
149              <Text bold={isWorking} dimColor={!isWorking}>
150                {isWorking ? '●' : '○'} {role.name}
151                {now.length > 1 ? ` (${now.length})` : ''}
152              </Text>
153              <Text dimColor>  {task ?? 'idle'}{!isWorking && mine.length > 0 && role.id !== 'pm' ? ' (done)' : ''}</Text>
154            </Box>
155          )
156        })}
157        {live ? (
158          <Text>
159            Watch ({live.from}): <Link href={live.url} label={live.url} />
160          </Text>
161        ) : (
162          <Text dimColor>Watch: nothing running yet. A dev server or the test browser shows up here.</Text>
163        )}
164      </Box>
165    )
166  })
167}
168

1export type RoleId = 'pm' | 'researcher' | 'designer' | 'programmer' | 'tester' | 'reviewer' | 'security' | 'legal' | 'marketer'
2export type Run = { id: string; role: RoleId; agent: string; task: string; isDone: boolean }
3export type Preview = { url: string; from: string }
4export type TurnCost = { tokens: number; cacheRead: number }
5
6declare module 'claude-code' {
7  interface PluginState {
8    team: { runs: Run[]; isLeadWorking: boolean; preview: Preview | null; last: TurnCost | null }
9  }
10}
11