task-band

1import { atom, read, update } from 'claude-code'
2import type { EngineInterface, Register } from 'claude-code'
3
4import type { BandJump, BandTask, TaskStatus } from '../types'
5import { average, C, cellWidth, chipSegs, clampPage, clearFinished, insertOrdered, navLabel, pageOf, paginate, parseNotifications, pushSample, segWidth, statusOf, viewOrder, frameTop, frameBottom, rowPad } from './logic'
6
7const tasks = atom({ plugin: 'task-band', key: 'tasks' } as const, [] as BandTask[])
8const page = atom({ plugin: 'task-band', key: 'page' } as const, 0)
9const jump = atom({ plugin: 'task-band', key: 'jump' } as const, null as BandJump | null)
10const tick = atom({ plugin: 'task-band', key: 'tick' } as const, 0)
11
12const JUMP_MS = 3000
13const FRAME = 4
14let pageCount = 1
15let seq = 0
16type Durations = Record<string, number[]>
17
18async function now($: EngineInterface): Promise<number> {
19  return $.clock.now()
20}
21
22async function entryOrder($: EngineInterface): Promise<number> {
23  const s = ++seq % 1000
24  return (await now($)) + s / 1000
25}
26
27async function flash($: EngineInterface, id: string) {
28  const until = (await now($)) + JUMP_MS
29  await update($, jump, () => ({ id, until }))
30  $.clock.after(JUMP_MS + 50, async () => {
31    const j = await read($, jump)
32    if (j && j.until <= (await now($))) await update($, jump, () => null)
33  })
34}
35
36async function addTask($: EngineInterface, t: BandTask) {
37  await update($, tasks, list => insertOrdered(list ?? [], t))
38  await flash($, t.id)
39}
40
41async function finish($: EngineInterface, match: (t: BandTask) => boolean, status: TaskStatus) {
42  const at = await now($)
43  let hit: BandTask | undefined
44  await update($, tasks, list =>
45    (list ?? []).map(t => {
46      if (t.status !== 'running' || !match(t)) return t
47      hit = { ...t, status, endedAt: at }
48      return hit
49    }),
50  )
51  if (!hit) return
52  await flash($, hit.id)
53  if (hit.kind === 'agent' && status === 'done' && hit.agentType) {
54    const all = ((await $.store.get('durations')) as Durations | undefined) ?? {}
55    all[hit.agentType] = pushSample(all[hit.agentType], at - hit.startedAt)
56    await $.store.set('durations', all)
57  }
58}
59
60async function estimateFor($: EngineInterface, agentType: string): Promise<number | undefined> {
61  const all = (await $.store.get('durations')) as Durations | undefined
62  return average(all?.[agentType])
63}
64
65async function onTick($: EngineInterface) {
66  const list = await read($, tasks)
67  if (list && list.some(t => t.status === 'running')) await update($, tick, n => (n + 1) % 1_000_000)
68}
69
70export const register: Register = on => {
71  on('session.start', async ($, e, next) => {
72    $.clock.every(1000, () => onTick($))
73    return next(e)
74  })
75
76  on('agent.spawn', async ($, e, next) => {
77    const order = await entryOrder($)
78    const r = await next(e)
79    const agentId = (r as { agentId?: string }).agentId
80    if (!agentId) return r
81    const at = await now($)
82    if (e.workflow) {
83      const runId = e.workflow.runId
84      const list = (await read($, tasks)) ?? []
85      if (!list.some(t => t.runId === runId)) {
86        await addTask($, { id: `run:${runId}`, kind: 'wf', label: 'workflow', startedAt: at, order, status: 'running', runId, members: [], finished: [] })
87      }
88      await update($, tasks, l => (l ?? []).map(t => (t.runId === runId ? { ...t, members: [...(t.members ?? []), agentId] } : t)))
89      return r
90    }
91    const agentType = e.subagentType || 'general-purpose'
92    await addTask($, { id: agentId, kind: 'agent', label: e.description || agentType, agentType, startedAt: at, order, status: 'running', estMs: await estimateFor($, agentType) })
93    return r
94  })
95
96  on('tool.call', async ($, e, next) => {
97    const bg = e.tool === 'Bash' || e.tool === 'PowerShell' || e.tool === 'Monitor' || e.tool === 'Workflow'
98    const order = bg && !e.agentId ? await entryOrder($) : undefined
99    const r = await next(e)
100    if (e.agentId || !('result' in r) || !r.result) return r
101    const res = r.result as Record<string, unknown>
102    const at = await now($)
103    if (e.tool === 'Bash' || e.tool === 'PowerShell') {
104      const bgId = res.backgroundTaskId
105      if (typeof bgId === 'string') {
106        const label = (e.description as string | undefined) || String(e.command).split('\n')[0] || e.tool
107        await addTask($, { id: bgId, taskId: bgId, kind: 'sh', label, startedAt: at, order, status: 'running' })
108      }
109    } else if (e.tool === 'Monitor') {
110      const id = res.taskId
111      if (typeof id === 'string') await addTask($, { id, taskId: id, kind: 'mon', label: String(e.description || 'monitor'), startedAt: at, order, status: 'running' })
112    } else if (e.tool === 'Workflow') {
113      const id = res.taskId
114      const runId = typeof res.runId === 'string' ? res.runId : undefined
115      const label = typeof res.workflowName === 'string' ? res.workflowName : 'workflow'
116      if (typeof id !== 'string') return r
117      const list = (await read($, tasks)) ?? []
118      if (runId && list.some(t => t.runId === runId)) {
119        await update($, tasks, l => (l ?? []).map(t => (t.runId === runId ? { ...t, taskId: id, label } : t)))
120      } else {
121        await addTask($, { id, taskId: id, kind: 'wf', label, startedAt: at, order, status: 'running', runId, members: [], finished: [] })
122      }
123    }
124    return r
125  })
126
127  on('turn.complete', async ($, e, next) => {
128    const r = await next(e)
129    const agentId = e.agentId
130    if (!agentId) {
131      await update($, tasks, l => clearFinished(l ?? []))
132      return r
133    }
134    const list = (await read($, tasks)) ?? []
135    const wf = list.find(t => t.status === 'running' && t.members?.includes(agentId) && !t.finished?.includes(agentId))
136    if (wf) {
137      await update($, tasks, l => (l ?? []).map(t => (t.id === wf.id ? { ...t, finished: [...(t.finished ?? []), agentId] } : t)))
138      return r
139    }
140    if (list.some(t => t.id === agentId && t.status === 'running')) {
141      const info = (await $.agent.list().catch(() => [])).find(a => a.id === agentId)
142      if (info && (info.status === 'idle' || info.status === 'waiting')) return r
143      await finish($, t => t.id === agentId, statusOf(info?.status))
144    }
145    return r
146  })
147
148  on('prompt.submit', async ($, e, next) => {
149    if (e.origin?.kind === 'task-notification') {
150      for (const n of parseNotifications(e.text)) {
151        const status = statusOf(n.status)
152        await finish($, t => t.taskId === n.id || t.id === n.id, status)
153      }
154    }
155    return next(e)
156  })
157
158  on('ui.focus', async ($, e, next) => {
159    if (e.component !== 'AbovePrompt' || e.plugin !== 'task-band' || e.origin.kind !== 'person') return next(e)
160    if (e.element === 'prev' || e.element === 'next') {
161      const step = e.element === 'next' ? 1 : -1
162      await update($, jump, () => null)
163      await update($, page, p => clampPage(p + step, pageCount))
164      return {}
165    }
166    return next(e)
167  })
168
169  on('ui.scroll', async ($, e, next) => {
170    if (e.component !== 'AbovePrompt' || e.by === 0) return next(e)
171    const list = (await read($, tasks)) ?? []
172    if (list.length === 0) return next(e)
173    await update($, jump, () => null)
174    await update($, page, p => clampPage(p + (e.by > 0 ? 1 : -1), pageCount))
175    return {}
176  })
177
178  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
179    const list = viewOrder((await read($, tasks)) ?? [])
180    if (e.props.hasSurvey || list.length === 0) return next(e)
181    const [t, p, j, at] = await Promise.all([read($, tick), read($, page), read($, jump), now($)])
182    const chips = list.map(task => chipSegs(task, at, t))
183    const pages = paginate(chips.map(segWidth), e.props.bodyColumns - 1 - FRAME)
184    pageCount = pages.length
185    const jumpIndex = j && j.until > at ? list.findIndex(x => x.id === j.id) : -1
186    const shown = jumpIndex >= 0 ? pageOf(pages, jumpIndex) : clampPage(p, pages.length)
187    const [from, to] = pages[shown] ?? [0, 0]
188    const { Box, Button, Text } = $.ui.resolve(e)
189    const many = pages.length > 1
190
191    const W = e.props.bodyColumns - 1
192    const nav = many ? `‹ ${navLabel(from + 1, to, list.length)} ›  ` : ''
193    const visible = chips.slice(from, to)
194    const used = cellWidth(nav) + visible.reduce((n, segs, i) => n + segWidth(segs) + (i > 0 ? 3 : 0), 0)
195
196    return (
197      <Box flexDirection="column">
198        <Text color={C.faint}>{frameTop(W)}</Text>
199        <Box flexDirection="row">
200          <Text color={C.faint}>│ </Text>
201          {many ? <Button key="prev" label="‹" plain dimColor onPress={() => undefined} /> : null}
202          {many ? <Text> </Text> : null}
203          {many ? <Button key="pos" label={navLabel(from + 1, to, list.length)} plain autoFocus onPress={() => undefined} /> : null}
204          {many ? <Text> </Text> : null}
205          {many ? <Button key="next" label="›" plain dimColor onPress={() => undefined} /> : null}
206          {many ? <Text>  </Text> : null}
207          {visible.map((segs, i) => {
208            const task = list[from + i]
209            const isJump = jumpIndex === from + i
210            return (
211              <Box key={task?.id ?? `c${i}`} flexDirection="row">
212                {i > 0 ? <Text color={C.faint}> │ </Text> : null}
213                {segs.map((s, k) => (
214                  <Text key={`s${k}`} color={s.color} backgroundColor={isJump ? C.hl : undefined} bold={s.bold}>
215                    {s.text}
216                  </Text>
217                ))}
218              </Box>
219            )
220          })}
221          <Text>{rowPad(W, used)}</Text>
222          <Text color={C.faint}> │</Text>
223        </Box>
224        <Text color={C.faint}>{frameBottom(W)}</Text>
225      </Box>
226    )
227  })
228}
229

1import type { BandTask, TaskStatus } from '../types'
2
3export const C = {
4  fg: '#2d2a24',
5  dim: '#6b675e',
6  faint: '#b9b5a3',
7  green: '#3f8a3a',
8  red: '#b8322b',
9  hl: '#e6e2bf',
10}
11
12export type Seg = { text: string; color?: string; bg?: string; bold?: boolean }
13
14export const GAUGE = 8
15export const LABEL_MAX = 18
16export const MIN_SAMPLES = 3
17export const EST_CAP = 95
18const SPIN = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
19const SEP = ' │ '
20const THAI_ZERO = /[ัิ-ฺ็-๎]/u
21
22export function cellWidth(s: string): number {
23  let n = 0
24  for (const ch of s) if (!THAI_ZERO.test(ch)) n++
25  return n
26}
27
28export function fitCells(s: string, max: number): string {
29  if (cellWidth(s) <= max) return s
30  let out = ''
31  for (const ch of s) {
32    if (cellWidth(out + ch) > max - 1) break
33    out += ch
34  }
35  return `${out}…`
36}
37
38export function clock(ms: number): string {
39  const s = Math.max(0, Math.floor(ms / 1000))
40  const h = Math.floor(s / 3600)
41  const m = Math.floor((s % 3600) / 60)
42  const sec = String(s % 60).padStart(2, '0')
43  return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${sec}` : `${m}:${sec}`
44}
45
46export function average(samples: number[] | undefined): number | undefined {
47  if (!samples || samples.length < MIN_SAMPLES) return undefined
48  return samples.reduce((a, b) => a + b, 0) / samples.length
49}
50
51export function pushSample(samples: number[] | undefined, ms: number): number[] {
52  return [...(samples ?? []), ms].slice(-10)
53}
54
55export function estimate(elapsed: number, estMs: number | undefined): number | undefined {
56  if (!estMs || estMs <= 0) return undefined
57  return Math.min(EST_CAP, Math.round((elapsed / estMs) * 100))
58}
59
60function bar(fill: number, color: string): Seg[] {
61  const n = Math.max(0, Math.min(GAUGE, Math.round(fill * GAUGE)))
62  return [{ text: '━'.repeat(n), color }, { text: '─'.repeat(GAUGE - n), color: C.faint }]
63}
64
65function sweep(tick: number): Seg[] {
66  const pos = tick % (GAUGE - 1)
67  return [
68    { text: '─'.repeat(pos), color: C.faint },
69    { text: '━━', color: C.fg },
70    { text: '─'.repeat(GAUGE - 2 - pos), color: C.faint },
71  ]
72}
73
74export function chipSegs(t: BandTask, now: number, tick: number): Seg[] {
75  const elapsed = (t.endedAt ?? now) - t.startedAt
76  const head: Seg[] =
77    t.status === 'done'
78      ? [{ text: '✓ ', color: C.green }]
79      : t.status === 'fail'
80        ? [{ text: '✗ ', color: C.red }]
81        : [{ text: `${SPIN[tick % SPIN.length]} `, color: C.fg }]
82  head.push({ text: `${t.kind} `, color: C.dim }, { text: `${fitCells(t.label, LABEL_MAX)} `, color: C.fg })
83
84  const total = t.members?.length ?? 0
85  const done = t.finished?.length ?? 0
86  const count = t.kind === 'wf' && total > 0 ? `${t.status === 'done' ? total : done}/${total}` : undefined
87
88  if (t.status === 'done') {
89    return [...head, ...bar(1, C.green), { text: ` ${count ?? '100%'}`, color: C.green }]
90  }
91  if (t.status === 'fail') {
92    const fill = total > 0 ? done / total : (estimate(elapsed, t.estMs) ?? 50) / 100
93    return [...head, ...bar(fill, C.red), { text: ' fail', color: C.red }, { text: ` ${clock(elapsed)}`, color: C.dim }]
94  }
95  if (count) {
96    return [...head, ...bar(done / total, C.fg), { text: ` ${count}`, color: C.fg }, { text: ` ${clock(elapsed)}`, color: C.dim }]
97  }
98  const pct = t.kind === 'agent' ? estimate(elapsed, t.estMs) : undefined
99  if (pct !== undefined) {
100    return [...head, ...bar(pct / 100, C.fg), { text: ` ~${pct}%`, color: C.dim }, { text: ` ${clock(elapsed)}`, color: C.dim }]
101  }
102  return [...head, ...sweep(tick), { text: ` ${clock(elapsed)}`, color: C.dim }]
103}
104
105export function segWidth(segs: Seg[]): number {
106  return segs.reduce((n, s) => n + cellWidth(s.text), 0)
107}
108
109export const MAX_PER_PAGE = 3
110
111export function navLabel(first: number, last: number, total: number): string {
112  return first === last ? `${first}/${total}` : `${first}-${last}/${total}`
113}
114
115export function navWidth(total: number): number {
116  return cellWidth(`‹ ${navLabel(total, total, total)} ›  `) + 2
117}
118
119export function paginate(widths: number[], columns: number): Array<[number, number]> {
120  const room = columns - navWidth(widths.length) - 1
121  const pages: Array<[number, number]> = []
122  let i = 0
123  while (i < widths.length) {
124    let used = widths[i] ?? 0
125    let j = i + 1
126    while (j < widths.length && j - i < MAX_PER_PAGE && used + SEP.length + (widths[j] ?? 0) <= room) {
127      used += SEP.length + (widths[j] ?? 0)
128      j++
129    }
130    pages.push([i, j])
131    i = j
132  }
133  return pages
134}
135
136export function pageOf(pages: Array<[number, number]>, index: number): number {
137  const p = pages.findIndex(([a, b]) => index >= a && index < b)
138  return p < 0 ? 0 : p
139}
140
141export function clampPage(page: number, count: number): number {
142  return Math.max(0, Math.min(page, count - 1))
143}
144
145export function parseNotifications(text: string): Array<{ id: string; status: string }> {
146  const out: Array<{ id: string; status: string }> = []
147  const blocks = text.match(/<task-notification>[\s\S]*?<\/task-notification>/g) ?? []
148  for (const b of blocks) {
149    const id = b.match(/<task-id>([^<]+)<\/task-id>/)?.[1]?.trim()
150    const status = b.match(/<status>([^<]+)<\/status>/)?.[1]?.trim()
151    if (id && status) out.push({ id, status })
152  }
153  return out
154}
155
156export function statusOf(word: string | undefined): TaskStatus {
157  if (word === 'failed' || word === 'killed' || word === 'error' || word === 'stopped') return 'fail'
158  return 'done'
159}
160
161export function insertOrdered(list: BandTask[], t: BandTask): BandTask[] {
162  return [...list.filter(x => x.id !== t.id), t].sort((a, b) => (a.order ?? a.startedAt) - (b.order ?? b.startedAt))
163}
164
165export function viewOrder(list: BandTask[]): BandTask[] {
166  return [...list.filter(t => t.status === 'running'), ...list.filter(t => t.status !== 'running')]
167}
168
169export function clearFinished(tasks: BandTask[]): BandTask[] {
170  return tasks.filter(t => t.status === 'running')
171}
172
173export const TITLE = 'งานเบื้องหลัง'
174
175export function frameTop(width: number): string {
176  const head = `┌─ ${TITLE} `
177  return head + '─'.repeat(Math.max(0, width - cellWidth(head) - 1)) + '┐'
178}
179
180export function frameBottom(width: number): string {
181  return '└' + '─'.repeat(Math.max(0, width - 2)) + '┘'
182}
183
184export function rowPad(width: number, used: number): string {
185  return ' '.repeat(Math.max(0, width - 4 - used))
186}
187

1export type TaskKind = 'agent' | 'wf' | 'sh' | 'mon'
2export type TaskStatus = 'running' | 'done' | 'fail'
3
4export type BandTask = {
5  id: string
6  kind: TaskKind
7  label: string
8  startedAt: number
9  status: TaskStatus
10  endedAt?: number
11  order?: number
12  taskId?: string
13  agentType?: string
14  estMs?: number
15  runId?: string
16  members?: string[]
17  finished?: string[]
18}
19
20export type BandJump = { id: string; until: number }
21
22declare module 'claude-code' {
23  interface PluginState {
24    'task-band': {
25      tasks: BandTask[]
26      page: number
27      jump: BandJump | null
28      tick: number
29    }
30  }
31}
32