showrunner-mod

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import type {
5  Loaded,
6  PullRequest,
7  SessionInfo,
8  Sibling,
9  Status,
10  Thread,
11  TicketView,
12} from '../types'
13
14const info = atom({ plugin: 'showrunner-mod', key: 'info' } as const, null)
15const ticket = atom({ plugin: 'showrunner-mod', key: 'ticket' } as const, null)
16
17const pr = atom({ plugin: 'showrunner-mod', key: 'pr' } as const, null)
18
19const moduleTags = { plugin: 'monorepo-touched', key: 'tags' } as const
20
21/** The band's colors, each toned a little toward a dark background. */
22const PALETTE = {
23  text: '#F3F4F6',
24  project: tone('#7C3AED'),
25  task: tone('#2563EB'),
26  adhoc: tone('#475569'),
27  session: tone('#F59E0B'),
28  ok: tone('#22C55E'),
29  bad: tone('#DC2626'),
30  warn: tone('#D97706'),
31  idle: tone('#94A3B8'),
32  prOpen: tone('#16A34A'),
33  prFailing: tone('#DC2626'),
34  prPending: tone('#D97706'),
35  prMerged: tone('#8B5CF6'),
36  prDraft: tone('#6B7280'),
37  linear: tone('#5E6AD2'),
38  border: tone('#22D3EE'),
39} as const
40
41const TICKET_PANE = 'ticket'
42const PR_PANE = 'pr'
43
44// Tools that wait on the person even when permissions are skipped.
45const ASKS_PERSON = new Set(['AskUserQuestion', 'ExitPlanMode'])
46
47const REFRESH_MS = 30_000
48
49let tmuxName: string | undefined
50let reported: Status | undefined
51let conversation: string | undefined
52
53/** Keep the session record on the conversation this session runs, so a
54 * recreated session resumes it (it changes on /clear). */
55async function syncConversation($: EngineInterface) {
56  if (tmuxName === undefined) return
57  const id = await $.session.id()
58  if (id === conversation) return
59  conversation = id
60  await $.process
61    .run(['showrunner', 'session', 'set-conversation', tmuxName, id])
62    .catch(() => undefined)
63}
64
65/** Whether an answer ends by asking the person something they need to
66 * answer: only a closing `?` is worth a quick check by the small model. */
67async function asksPerson($: EngineInterface, answer: string): Promise<boolean> {
68  const tail = answerTail(answer)
69  if (!tail.includes('?')) return false
70  const verdict = await $.model
71    .classify(
72      `Does this end of an assistant's reply ask the user one or more questions they need to answer before work can continue? Offers like "Want me to …?" count only if the reply waits on the answer.\n\n${tail}`,
73      ['asks', 'done'],
74    )
75    .catch(() => undefined)
76  return verdict === 'asks'
77}
78
79async function loadPr($: EngineInterface) {
80  if (tmuxName === undefined) return
81  await update($, pr, (): Loaded<PullRequest> => ({ status: 'loading' }))
82  const ran = await $.process
83    .run(['showrunner', 'session', 'pr', tmuxName], { timeoutMs: 30_000 })
84    .catch(() => undefined)
85  const view: Loaded<PullRequest> =
86    ran?.exitCode === 0
87      ? { status: 'ready', value: JSON.parse(ran.stdout) }
88      : {
89          status: 'error',
90          message: failure(ran?.stderr),
91        }
92  await update($, pr, () => view)
93}
94
95async function sendThreadsToClaude($: EngineInterface, threads: Thread[]) {
96  const text = threads
97    .map(
98      t =>
99        `- ${t.path}${t.line ? `:${t.line}` : ''} (${t.author ?? 'reviewer'}): ${firstParagraph(t.body)}`,
100    )
101    .join('\n')
102  await $.prompt.fill({
103    text: `Address these unresolved review comments on the PR:\n${text}\n`,
104    mode: 'insert',
105  })
106}
107
108async function report($: EngineInterface, status: Status) {
109  if (tmuxName === undefined || status === reported) return
110  reported = status
111  await $.process
112    .run(['tmux', 'set-environment', '-t', tmuxName, 'CM_STATUS', status])
113    .catch(() => undefined)
114}
115
116async function refresh($: EngineInterface) {
117  if (tmuxName === undefined) return
118  const ran = await $.process
119    .run(['showrunner', 'session', 'info', tmuxName], { timeoutMs: 20_000 })
120    .catch(() => undefined)
121  if (ran?.exitCode !== 0) return
122  const parsed = JSON.parse(ran.stdout) as SessionInfo
123  await update($, info, () => parsed)
124}
125
126/** What a failed `showrunner` call says, or that showrunner needs updating. */
127function failure(stderr: string | undefined): string {
128  const message = stderr?.replace(/^Error: /, '').trim()
129  if (message?.includes('unknown session command')) {
130    return 'This needs a newer showrunner (0.29.5 or later): update it and try again.'
131  }
132  return message || 'showrunner did not answer'
133}
134
135async function loadTicket($: EngineInterface) {
136  if (tmuxName === undefined) return
137  await update($, ticket, (): TicketView => ({ status: 'loading' }))
138  const ran = await $.process
139    .run(['showrunner', 'session', 'ticket', tmuxName], { timeoutMs: 20_000 })
140    .catch(() => undefined)
141  const view: TicketView =
142    ran?.exitCode === 0
143      ? { status: 'ready', ticket: JSON.parse(ran.stdout) }
144      : {
145          status: 'error',
146          message: failure(ran?.stderr),
147        }
148  await update($, ticket, () => view)
149}
150
151export const register: Register = on => {
152  tmuxName = undefined
153  reported = undefined
154  conversation = undefined
155
156  on('session.start', async ($, e, next) => {
157    const started = await next(e)
158    if (!e.isInteractive) return started
159
160    const pane = await $.env.get('TMUX_PANE')
161    if (pane === undefined) return started
162    const ran = await $.process
163      .run(['tmux', 'display-message', '-p', '-t', pane, '#S'])
164      .catch(() => undefined)
165    const name = ran?.stdout.trim()
166    if (!name?.startsWith('cm__')) return started
167
168    tmuxName = name
169    await $.command
170      .register({ name: 'ticket', description: "Show this task's Linear ticket in a pane" })
171      .catch(() => undefined)
172    await $.command
173      .register({ name: 'pr', description: "Show this task's PR: checks and open review comments" })
174      .catch(() => undefined)
175    await syncConversation($)
176    await report($, 'waiting_input')
177    void refresh($)
178    $.clock.every(REFRESH_MS, () => void refresh($))
179    return started
180  })
181
182  on('command.run', { command: 'ticket' }, async $ => {
183    const current = await read($, info)
184    const id = current?.linear ? linearId(current.linear) : undefined
185    if (id === undefined) return { text: 'No Linear ticket is linked to this task.' }
186    await $.ui.open({ id: TICKET_PANE, title: id, columns: 72, closeOnEscape: true })
187    void loadTicket($)
188    return { text: `Opened ${id}.` }
189  })
190
191  on('ui.render', { component: 'Pane', requestId: TICKET_PANE }, async ($, e) => {
192    const { Box, Link, Markdown, Text } = $.ui.resolve(e)
193    const view = await read($, ticket)
194    if (view === null || view.status === 'loading') {
195      return <Text color="subtle">Loading ticket…</Text>
196    }
197    if (view.status === 'error') {
198      return <Text color="error">{view.message}</Text>
199    }
200    const t = view.ticket
201    const comments = t.comments.nodes
202    return (
203      <Box flexDirection="column" gap={1} paddingX={1}>
204        <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
205          <Link href={t.url}>
206            <Pill Text={Text} bg={tone(t.state.color)} fg={PALETTE.text} bold>
207              {ticketGlyph(t.state.type)} {t.identifier} · {t.state.name}
208            </Pill>
209          </Link>
210          {t.labels.nodes.map(label => (
211            <Text key={label.name} color={label.color}>
212              ● {label.name}
213            </Text>
214          ))}
215        </Box>
216        <Text bold>{t.title}</Text>
217        <Text color="subtle">
218          {t.assignee ? `👤 ${t.assignee.displayName}` : '👤 unassigned'}
219          {t.priorityLabel !== 'No priority' ? `  ⚑ ${t.priorityLabel}` : ''}
220          {t.creator ? `  ✎ ${t.creator.displayName}` : ''}
221        </Text>
222        <Markdown text={t.description?.trim() || '_No description._'} />
223        {comments.length > 0 ? (
224          <Box flexDirection="column" gap={1}>
225            <Text bold color="claude">
226              💬 {comments.length} comment{comments.length === 1 ? '' : 's'}
227            </Text>
228            {comments.map(comment => (
229              <Box key={comment.createdAt} flexDirection="column">
230                <Text color="subtle">
231                  {comment.user?.displayName ?? 'someone'} · {comment.createdAt.slice(0, 10)}
232                </Text>
233                <Markdown text={comment.body} />
234              </Box>
235            ))}
236          </Box>
237        ) : null}
238      </Box>
239    )
240  })
241
242  on('command.run', { command: 'pr' }, async $ => {
243    const current = await read($, info)
244    if (current === null || current.task === null) return { text: 'Adhoc sessions have no PR.' }
245    await $.ui.open({ id: PR_PANE, title: 'PR', columns: 80, closeOnEscape: true })
246    void loadPr($)
247    return { text: 'Opened the PR pane.' }
248  })
249
250  on('ui.render', { component: 'Pane', requestId: PR_PANE }, async ($, e) => {
251    const { Box, Button, Link, Markdown, Text } = $.ui.resolve(e)
252    const view = await read($, pr)
253    if (view === null || view.status === 'loading') {
254      return <Text color="subtle">Loading PR…</Text>
255    }
256    if (view.status === 'error') {
257      return <Text color="error">{view.message}</Text>
258    }
259    const p = view.value
260    const count = (state: string) => p.checks.filter(c => c.state === state).length
261    const attention = p.checks.filter(c => c.state === 'fail' || c.state === 'pending')
262    const checksState = count('fail') > 0 ? 'failing' : count('pending') > 0 ? 'pending' : null
263    return (
264      <Box flexDirection="column" gap={1} paddingX={1}>
265        <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
266          <Link href={p.url}>
267            <Pill Text={Text} bg={prColor(p.state, checksState)} fg={PALETTE.text} bold>
268              {prIcon(p.state, checksState)} PR #{p.number} {p.state}
269            </Pill>
270          </Link>
271          {p.review ? <Text color={reviewColor(p.review)}>{reviewLabel(p.review)}</Text> : null}
272          <Text>
273            <Text color="diffAdded" bold>
274              +{p.additions}
275            </Text>{' '}
276            <Text color="diffRemoved" bold>
277              −{p.deletions}
278            </Text>
279            <Text color="subtle"> in {p.changed_files} files</Text>
280          </Text>
281        </Box>
282        <Text bold>{p.title}</Text>
283        <Text>
284          <Text color={PALETTE.ok}>✓ {count('pass')} passed</Text>
285          <Text color="subtle"> · </Text>
286          <Text color={PALETTE.bad}>✗ {count('fail')} failed</Text>
287          <Text color="subtle"> · </Text>
288          <Text color={PALETTE.warn}>◷ {count('pending')} pending</Text>
289          <Text color="subtle"> · ⤼ {count('skipped')} skipped</Text>
290        </Text>
291        {attention.map((check, i) => (
292          <Text key={`check-${i}`}>
293            <Text color={check.state === 'fail' ? PALETTE.bad : PALETTE.warn}>
294              {check.state === 'fail' ? '✗' : '◷'}{' '}
295            </Text>
296            {check.url ? (
297              <Link href={check.url}>{check.name ?? 'check'}</Link>
298            ) : (
299              <Text>{check.name ?? 'check'}</Text>
300            )}
301          </Text>
302        ))}
303        <Box flexDirection="row" columnGap={1}>
304          <Text bold color="claude">
305            💬 {p.threads.length} unresolved review comment{p.threads.length === 1 ? '' : 's'}
306          </Text>
307          {p.threads.length > 0 ? (
308            <Button
309              key="send"
310              label="Send to Claude"
311              onPress={() => sendThreadsToClaude($, p.threads)}
312            />
313          ) : null}
314          <Button key="refresh" label="Refresh" onPress={() => loadPr($)} />
315        </Box>
316        {p.threads.map((thread, i) => (
317          <Box key={`thread-${i}`} flexDirection="column">
318            <Text>
319              <Link href={thread.url}>
320                {thread.path.split('/').pop()}
321                {thread.line ? `:${thread.line}` : ''}
322              </Link>
323              <Text color="subtle"> · {thread.author ?? 'reviewer'}</Text>
324            </Text>
325            <Markdown text={firstParagraph(thread.body)} />
326          </Box>
327        ))}
328      </Box>
329    )
330  })
331
332  on('session.end', async ($, e, next) => {
333    if (tmuxName !== undefined) {
334      await $.process
335        .run(['tmux', 'set-environment', '-u', '-t', tmuxName, 'CM_STATUS'])
336        .catch(() => undefined)
337    }
338    return next(e)
339  })
340
341  on('turn.start', async ($, e, next) => {
342    await report($, 'running')
343    await syncConversation($)
344    return next(e)
345  })
346
347  on('turn.complete', async ($, e, next) => {
348    if (e.agentId === undefined) {
349      const asks = e.reason === 'answer' && (await asksPerson($, e.answer))
350      await report($, asks ? 'waiting_permission' : 'waiting_input')
351      void refresh($)
352    }
353    return next(e)
354  })
355
356  on('tool.check', async ($, e, next) => {
357    const verdict = await next(e)
358    if (verdict.decision === 'ask') await report($, 'waiting_permission')
359    return verdict
360  }).catch(($, e, next) => next(e))
361
362  on('tool.call', async ($, e, next) => {
363    if (ASKS_PERSON.has(e.tool)) await report($, 'waiting_permission')
364    const ran = await next(e)
365    if (reported === 'waiting_permission') await report($, 'running')
366    return ran
367  }).catch(($, e, next) => next(e))
368
369  on('ui.render', { component: 'PromptHint' }, async ($, e, next) => {
370    const hint = await next(e)
371    const current = await read($, info)
372    if (current === null) return hint
373
374    const { Box, Link, Text } = $.ui.resolve(e)
375    const diff = current.task_diff ?? current.session_diff
376    const isAdhoc = current.task === null
377    const ticket = current.linear ? linearId(current.linear) : undefined
378    const ticketState = current.linear_state ?? undefined
379    const { value: tags } = await $.state.get(moduleTags)
380
381    return (
382      <Box flexDirection="column">
383        {hint}
384        <Box flexDirection="row" flexWrap="wrap">
385          <Box
386            flexDirection="row"
387            flexWrap="wrap"
388            columnGap={1}
389            borderStyle="round"
390            borderColor={PALETTE.border}
391            paddingX={1}
392          >
393            <Pill Text={Text} bg={PALETTE.project} fg={PALETTE.text} bold>
394              ⌂ {current.project}
395            </Pill>
396            <Pill Text={Text} bg={isAdhoc ? PALETTE.adhoc : PALETTE.task} fg={PALETTE.text} bold>
397              {isAdhoc ? '✦ adhoc' : `◆ ${current.task}`}
398            </Pill>
399            <Text color={PALETTE.session} bold>
400              ▸ {current.session}
401            </Text>
402            {diff && diff.added + diff.removed > 0 ? (
403              <Text>
404                <Text color="diffAdded" bold>
405                  +{diff.added}
406                </Text>{' '}
407                <Text color="diffRemoved" bold>
408                  −{diff.removed}
409                </Text>
410              </Text>
411            ) : null}
412            {current.pr ? (
413              <Link href={current.pr.url}>
414                <Pill
415                  Text={Text}
416                  bg={prColor(current.pr.state, current.pr.checks)}
417                  fg={PALETTE.text}
418                  bold
419                >
420                  {prIcon(current.pr.state, current.pr.checks)} PR {prNumber(current.pr.url)}{' '}
421                  {current.pr.state}
422                </Pill>
423              </Link>
424            ) : null}
425            {ticket && current.linear ? (
426              <Link href={current.linear}>
427                <Pill
428                  Text={Text}
429                  bg={ticketState ? tone(ticketState.color) : PALETTE.linear}
430                  fg={PALETTE.text}
431                  bold
432                >
433                  {ticketGlyph(ticketState?.type)} {ticket}
434                  {ticketState ? ` · ${ticketState.name}` : ''}
435                </Pill>
436              </Link>
437            ) : null}
438            {current.siblings.map(sibling => (
439              <Text key={sibling.name}>
440                <Text color={statusColor(sibling)}>{statusGlyph(sibling)}</Text>
441                <Text color="subtle"> {sibling.name}</Text>
442              </Text>
443            ))}
444          </Box>
445          {tags?.length ? (
446            <Box flexDirection="row" flexWrap="wrap" columnGap={1} paddingX={1} paddingY={1}>
447              {tags.map(tag => (
448                <Text key={tag.label}>
449                  <Pill Text={Text} bg={tag.background} fg={tag.text} bold>
450                    {tag.label}
451                  </Pill>
452                  {tag.added > 0 ? <Text color="diffAdded">{` +${tag.added}`}</Text> : null}
453                  {tag.removed > 0 ? <Text color="diffRemoved">{` −${tag.removed}`}</Text> : null}
454                </Text>
455              ))}
456            </Box>
457          ) : null}
458        </Box>
459      </Box>
460    )
461  })
462}
463
464function Pill({
465  Text,
466  bg,
467  fg,
468  bold,
469  children,
470}: {
471  Text: any
472  bg: string
473  fg: string
474  bold?: boolean
475  children?: unknown
476}) {
477  return (
478    <Text backgroundColor={bg} color={fg} bold={bold}>
479      {' '}
480      {children}{' '}
481    </Text>
482  )
483}
484
485/** The last stretch of an answer, code blocks left out. */
486function answerTail(answer: string): string {
487  return answer
488    .replace(/```[\s\S]*?```/g, '')
489    .trim()
490    .slice(-800)
491}
492
493function reviewLabel(review: string): string {
494  switch (review) {
495    case 'APPROVED':
496      return '✓ approved'
497    case 'CHANGES_REQUESTED':
498      return '✗ changes requested'
499    default:
500      return '◷ review required'
501  }
502}
503
504function reviewColor(review: string): string {
505  if (review === 'APPROVED') return PALETTE.ok
506  if (review === 'CHANGES_REQUESTED') return PALETTE.bad
507  return PALETTE.warn
508}
509
510/** A review comment's text without bot footers, badges and HTML. */
511function firstParagraph(body: string): string {
512  return body
513    .split(/\n\s*\n/)
514    .filter(part => !/^\s*(\[!\[|<|!\[)/.test(part))
515    .slice(0, 2)
516    .join('\n\n')
517    .trim()
518}
519
520function statusGlyph(sibling: Sibling): string {
521  switch (sibling.status) {
522    case 'running':
523      return '●'
524    case 'waiting_permission':
525      return '▲'
526    case 'waiting_input':
527      return '○'
528    default:
529      return '·'
530  }
531}
532
533function statusColor(sibling: Sibling): string {
534  switch (sibling.status) {
535    case 'running':
536      return PALETTE.ok
537    case 'waiting_permission':
538      return PALETTE.warn
539    case 'waiting_input':
540      return PALETTE.idle
541    default:
542      return 'subtle'
543  }
544}
545
546function prColor(state: string, checks: string | null): string {
547  if (state === 'merged') return PALETTE.prMerged
548  if (state === 'closed' || checks === 'failing') return PALETTE.prFailing
549  if (state === 'draft') return PALETTE.prDraft
550  if (checks === 'pending') return PALETTE.prPending
551  return PALETTE.prOpen
552}
553
554function prIcon(state: string, checks: string | null): string {
555  if (state === 'merged') return '⇄'
556  if (state === 'closed') return '✕'
557  if (checks === 'failing') return '✗'
558  if (checks === 'pending') return '◷'
559  return '✓'
560}
561
562function prNumber(url: string): string {
563  return `#${url.split('/').pop()}`
564}
565
566function linearId(url: string): string | undefined {
567  return url.match(/\/issue\/([A-Za-z]+-\d+)/)?.[1]?.toUpperCase()
568}
569
570/** Linear's workflow state types, drawn the way Linear's own icons read. */
571function ticketGlyph(type: string | undefined): string {
572  switch (type) {
573    case 'completed':
574      return '✔'
575    case 'canceled':
576      return '✕'
577    case 'started':
578      return '◐'
579    case 'unstarted':
580      return '○'
581    case 'backlog':
582    case 'triage':
583      return '◌'
584    default:
585      return '◇'
586  }
587}
588
589/** A `#rrggbb` color blended a little (22%) toward a dark background. */
590function tone(hex: string): string {
591  const rgb = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
592  if (!rgb) return hex
593  const base = [0x1f, 0x20, 0x23]
594  return (
595    '#' +
596    rgb
597      .slice(1)
598      .map((c, i) => Math.round(parseInt(c, 16) * 0.78 + base[i]! * 0.22))
599      .map(v => v.toString(16).padStart(2, '0'))
600      .join('')
601  )
602}
603

1export type Status = 'running' | 'waiting_input' | 'waiting_permission'
2
3export type Diff = { added: number; removed: number }
4
5export type Sibling = { name: string; agent: string; status: Status | null }
6
7export type SessionInfo = {
8  project: string
9  task: string | null
10  session: string
11  branch: string | null
12  base_branch?: string
13  linear?: string | null
14  linear_state?: TicketState | null
15  task_diff?: Diff | null
16  session_diff: Diff | null
17  pr?: { url: string; state: string; checks: string | null; review: string | null } | null
18  siblings: Sibling[]
19}
20
21export type TicketState = { name: string; color: string; type: string }
22
23export type Ticket = {
24  identifier: string
25  title: string
26  url: string
27  description: string | null
28  priorityLabel: string
29  state: TicketState
30  assignee: { displayName: string } | null
31  creator: { displayName: string } | null
32  labels: { nodes: { name: string; color: string }[] }
33  comments: { nodes: { body: string; createdAt: string; user: { displayName: string } | null }[] }
34}
35
36export type Check = {
37  name: string | null
38  state: 'pass' | 'fail' | 'pending' | 'skipped'
39  url: string | null
40}
41
42export type Thread = {
43  path: string
44  line: number | null
45  author: string | null
46  body: string
47  url: string
48}
49
50export type PullRequest = {
51  number: number
52  title: string
53  url: string
54  state: 'open' | 'draft' | 'merged' | 'closed'
55  review: string | null
56  additions: number
57  deletions: number
58  changed_files: number
59  checks: Check[]
60  threads: Thread[]
61}
62
63export type Loaded<T> =
64  { status: 'loading' } | { status: 'error'; message: string } | { status: 'ready'; value: T }
65
66export type TicketView =
67  { status: 'loading' } | { status: 'error'; message: string } | { status: 'ready'; ticket: Ticket }
68
69/** Tags the monorepo-touched mod publishes, drawn beside the band. */
70export type ModuleTag = { label: string; background: string; text: string; added: number; removed: number }
71
72declare module 'claude-code' {
73  interface PluginState {
74    'showrunner-mod': {
75      info: SessionInfo | null
76      ticket: TicketView | null
77      pr: Loaded<PullRequest> | null
78    }
79    'monorepo-touched': { tags: ModuleTag[] | null }
80  }
81}
82