spike-plugin

1import type { Register } from 'claude-code'
2import { Variant } from './variants'
3import { V4, Legend, PANE_ID } from './v4'
4
5let sel = 'v4a1'
6let vp: any = null
7let lastOpen = ''
8let paneCols: number | null = null
9
10function b64(words: number[]): string {
11  const u = new Uint8Array(new Uint32Array(words).buffer)
12  let s = ''
13  for (const b of u) s += String.fromCharCode(b)
14  return btoa(s)
15}
16function gaugeCells(cols: number, frac: number): string {
17  const w: number[] = []
18  for (let i = 0; i < cols; i++) {
19    if (i < Math.round(cols * frac)) w.push(0x2588, 0x33dd55, 0x01000000)
20    else w.push(0x2591, 0x666666, 0x01000000)
21  }
22  return b64(w)
23}
24const BL = [0x20, 0x2581, 0x2582, 0x2583, 0x2584, 0x2585, 0x2586, 0x2587, 0x2588]
25function sparkCells(cols: number, vals: number[]): string {
26  const w: number[] = []
27  for (let r = 0; r < 2; r++) for (let c = 0; c < cols; c++) {
28    const lv = Math.round(vals[c % vals.length] * 16)
29    const inRow = r === 0 ? Math.max(0, lv - 8) : Math.min(8, lv)
30    w.push(BL[inRow], r === 0 ? 0x55aaff : 0x33dd55, 0x01000000)
31  }
32  return b64(w)
33}
34
35const Cap = (el: any, t: string) => <el.Text dimColor>{t}</el.Text>
36
37function S1(el: any, sel = '') {
38  const { Box, Text } = el
39  const badge = (label: string, bg: string) => <Text inverse backgroundColor={bg} bold>{' ' + label + ' '}</Text>
40  const fmt = (label: string, bg: string) => <Box><Text inverse backgroundColor={bg}>{' ' + label + ' '}</Text><Text dimColor>{' bg=' + bg + ' '}</Text><Text color={bg}>{'fg=' + bg}</Text></Box>
41  return (
42    <Box flexDirection="column">
43      {Cap(el, '[S1] verdict badges (inverse+backgroundColor hex) + line 1 + reason line 2')}
44      <Box>{badge('要你決定', '#ff5555')}{badge('疑似卡住', '#f1c40f')}{badge('完成待驗收', '#2ecc71')}{badge('進行中', '#3498db')}<Text>{' gate-sandbox4 │ 實作 │ ██████░░░░ 60% (3/5) │ 12m'}</Text></Box>
45      <Box>{[['要你決定','#ff5555'],['疑似卡住','#f1c40f'],['完成待驗收','#2ecc71'],['進行中','#3498db']].map(([l,c]) => <Text backgroundColor={c} color="#000000" bold>{' ' + l + ' '}</Text>)}<Text dimColor>{'  <- [S1b] backgroundColor + color, NO inverse'}</Text></Box>
46      <Text dimColor>等你選 A 或 B（原因行）</Text>
47      {Cap(el, '[S1] color formats (badge, then fg of same value)')}
48      <Box>
49        {fmt('hex', '#ff5555')}<Text> </Text>{fmt('rgb()', 'rgb(255,85,85)')}<Text> </Text>{fmt('ansi256', 'ansi256(203)')}<Text> </Text>{fmt('red', 'red')}
50      </Box>
51      {Cap(el, '[S1] theme keys (inverse bg, then fg)')}
52      <Box>
53        {['warning', 'permission', 'inactive', 'success', 'error'].map(k => <Box><Text inverse backgroundColor={k}>{' ' + k + ' '}</Text><Text color={k}>{'fg:' + k}</Text><Text> </Text></Box>)}
54      </Box>
55      {sel.includes('x') ? <Box flexDirection="column">{Cap(el, '[S1x] bare inverse+color / bg-only')}
56      <Box><Text inverse color="red">{' red-inverse '}</Text><Text inverse color="#2ecc71">{' hex-inverse '}</Text><Text backgroundColor="#3498db" color="#ffffff">{' bg-only '}</Text></Box></Box> : null}
57    </Box>
58  )
59}
60
61function S2(el: any) {
62  const { Box, Text } = el
63  return (
64    <Box flexDirection="column">
65      <Box flexDirection="row">
66        {['round', 'single', 'double'].map(st => (
67          <Box flexDirection="column" marginRight={1}>
68            {Cap(el, '[S2] ' + st)}
69            <Box borderStyle={st} borderColor="#ff5555" paddingX={1} flexDirection="column"><Text>{'要你決定 │ 實作 │ 60%'}</Text><Text dimColor>等你選 A 或 B</Text></Box>
70          </Box>
71        ))}
72      </Box>
73    </Box>
74  )
75}
76
77function S3(el: any) {
78  const { Box, Text, Raster } = el
79  return (
80    <Box flexDirection="column">
81      {Cap(el, '[S3] Raster 20x1 truecolor gauge, then 20x2 sparkline')}
82      <Box>
83        <Raster key="g1" columns={20} rows={1} cells={gaugeCells(20, 0.6)} />
84        <Text>{' 60% (3/5)'}</Text>
85      </Box>
86      <Raster key="sp" columns={20} rows={2} cells={sparkCells(20, [0.1, 0.3, 0.2, 0.5, 0.8, 0.6, 0.9, 0.7, 0.4, 0.3])} />
87    </Box>
88  )
89}
90
91function S4(el: any) {
92  const { Box, Client } = el
93  return (
94    <Box flexDirection="column">
95      {Cap(el, '[S4] Client module with 1s every spinner')}
96      <Client key="spin" module="./spin.tsx" />
97    </Box>
98  )
99}
100
101function Table(el: any) {
102  const { Box, Text, Raster } = el
103  const W = [14, 10, 10, 8, 8]
104  const row = (cells: string[], hdr: boolean, i: number) => (
105    <Box>
106      {cells.map((c, k) => <Box width={W[k]} flexShrink={0}><Text bold={hdr}>{c}</Text></Box>)}
107      {!hdr ? <Raster key={'rg' + i} columns={10} rows={1} cells={gaugeCells(10, [0.8, 0.5, 0.2][i])} /> : null}
108    </Box>
109  )
110  const rows = [['實作 hand', 'grok-4.7', '實作', '0:15', '—'], ['審查', 'codex', '審查', '3:20', '3m ⏸'], ['工頭', 'sonnet', '等待處置', '12:04', '—']]
111  return (
112    <Box flexDirection="column">
113      <Text dimColor>{'[S5] pane table; vp=' + JSON.stringify(vp) + ' paneBodyColumns=' + paneCols}</Text>
114      <Box borderStyle="round" borderColor="#3498db" flexDirection="column" paddingX={1}>
115        {row(['派工', 'runner', '階段', '經過', '安靜'], true, -1)}
116        {rows.map((r, i) => row(r, false, i))}
117      </Box>
118      <Text dimColor>{'ruler 0123456789012345678901234567890123456789'}</Text>
119      <Text>{'ASCII ref: 12345678901234|grok-4.7  |'}</Text>
120    </Box>
121  )
122}
123
124async function toggle($: any) {
125  const up = (await $.ui.panes()).some((p: any) => p.id === PANE_ID)
126  if (up) { await $.ui.close({ id: PANE_ID }); return 'closed' }
127  const r = await $.ui.open({ id: PANE_ID, title: '圖例', focus: true, closeOnEscape: true })
128  lastOpen = JSON.stringify(r)
129  return 'open ' + lastOpen
130}
131
132export const register: Register = on => {
133  on('session.start', async ($, e, next) => {
134    await $.command.register({ name: 'spike-pane', description: 'open the spike pane' })
135    await $.command.register({ name: 'spike-legend', description: 'toggle the legend pane' })
136    await $.command.register({ name: 'spike-band', description: 'spike-band s123 | s4' })
137    return next(e)
138  })
139  on('command.run', { command: 'spike-pane' }, async ($, e: any) => {
140    const r = await $.ui.open({ id: 'spike', title: 'spike' })
141    return { text: 'presentation=' + JSON.stringify(e.presentation) + ' open=' + JSON.stringify(r) }
142  })
143  on('command.run', { command: 'spike-legend' }, async ($, e: any) => ({ text: 'legend ' + await toggle($) }))
144  on('command.run', { command: 'spike-band' }, async ($, e: any) => {
145    sel = String(e.args ?? '').trim() || 's123'
146    await $.ui.invalidate('ui.render')
147    return { text: 'band sel=' + sel }
148  })
149  on('ui.render', { component: 'AbovePrompt' }, ($, e, next) => {
150    vp = e.viewport ? { c: e.viewport.columns, fs: e.viewport.isFullscreen } : null
151    const el: any = $.ui.resolve(e)
152    const { Box, Text } = el
153    const p: any = e.props
154    return (
155      <Box flexDirection="column">
156        <Text dimColor>{'[band] sel=' + sel + ' bodyColumns=' + p.bodyColumns + ' maxRows=' + p.maxRows + ' vp=' + JSON.stringify(vp)}</Text>
157        {/^v4/.test(sel) ? V4(el, sel, () => { void toggle($) }) : null}
158        {/^v[123]b?$/.test(sel) ? Variant(el, sel, p.bodyColumns) : null}
159        {/^v/.test(sel) ? null : sel.includes('1') ? S1(el, sel) : null}
160        {/^v/.test(sel) ? null : sel.includes('2') ? S2(el) : null}
161        {/^v/.test(sel) ? null : sel.includes('3') ? S3(el) : null}
162        {/^v/.test(sel) ? null : sel.includes('4') ? S4(el) : null}
163      </Box>
164    )
165  })
166  on('ui.render', { component: 'Pane', requestId: 'spike' }, ($, e: any) => {
167    paneCols = e.props?.bodyColumns ?? null
168    return Table($.ui.resolve(e))
169  })
170  on('ui.render', { component: 'Pane', requestId: PANE_ID }, ($, e: any) => Legend($.ui.resolve(e), () => { void $.ui.close({ id: PANE_ID }) }))
171}
172

1type St = { key: string; glyph: string; word: string; color: string; done?: number; total?: number; unfrozen?: number; el?: string; live?: number; stall?: number; dec?: number; nodec?: number; phase?: string; reason?: string }
2const STATES: St[] = [
3  { key: '要你決定', glyph: '▲', word: '要你決定', color: 'warning', done: 3, total: 5, el: '12m', live: 2, dec: 1, phase: '實作', reason: '等你批准：Bash: git commit -m …（2 分）' },
4  { key: '疑似卡住', glyph: '⏸', word: '疑似卡住', color: 'error', done: 3, total: 5, el: '15m', live: 2, stall: 1, phase: '審查', reason: '最久的派工 3 分沒有輸出' },
5  { key: '完成待驗收', glyph: '✓', word: '完成待驗收', color: 'success', done: 5, total: 5, el: '18m', phase: '收尾' },
6  { key: '進行中', glyph: '●', word: '進行中', color: 'suggestion', unfrozen: 2, el: '6m', live: 1, phase: '實作' },
7  { key: '待命', glyph: '◌', word: '待命', color: 'inactive' },
8]
9const PROJ = 'gate-sandbox4'
10
11function Band(el: any, v: string, st: St, cols: number) {
12  const { Box, Text } = el
13  const bar = () => {
14    if (st.total) {
15      const f = '▰'.repeat(st.done!), e = '▱'.repeat(st.total - st.done!)
16      return <Text><Text color="success">{f}</Text><Text color="inactive">{e}</Text><Text>{' ' + st.done + '/' + st.total}</Text></Text>
17    }
18    if (st.unfrozen) return <Text dimColor>{st.unfrozen + ' done*'}</Text>
19    return null
20  }
21  const parts: any[] = []
22  parts.push(<Text bold color={st.color}>{st.glyph + ' ' + st.word}</Text>)
23  if (v !== 'v2') parts.push(<Text>{'  ' + PROJ}</Text>)
24  const b = bar()
25  if (v === 'v2') {
26    if (b) parts.push(<Text>{'  '}{b}{st.phase ? <Text dimColor>{' ' + st.phase}</Text> : null}</Text>)
27  } else {
28    if (st.phase) parts.push(<Text>{'  ' + st.phase}</Text>)
29    if (b) parts.push(<Text>{' '}{b}</Text>)
30  }
31  if (st.el) parts.push(<Text dimColor>{'  ◷ ' + st.el}</Text>)
32  if (st.live) parts.push(<Text>{'  ⚙ ' + st.live}</Text>)
33  if (st.stall) parts.push(<Text color="error">{'  ⏸ ' + st.stall}</Text>)
34  if (st.dec && v !== 'v2') parts.push(<Text color="claude">{'  ◆ ' + st.dec}</Text>)
35  if (st.nodec && v !== 'v2') parts.push(<Text color="inactive">{'  ? ' + st.nodec}</Text>)
36  const withReason = !!st.reason
37  const w = v === 'v3' ? Math.max(10, cols - 4) : cols
38  const inner = (
39    <Box flexDirection="column" width={w}>
40      <Text wrap="truncate">{parts}</Text>
41      {withReason ? <Text wrap="truncate" dimColor>{'  ' + st.reason}</Text> : null}
42    </Box>
43  )
44  return (
45    <Box flexDirection="column" key={st.key}>
46      <Text dimColor>{'[' + v.toUpperCase() + '-' + st.key + ']'}</Text>
47      {v === 'v3' ? <Box borderStyle="round" borderColor={st.color} paddingX={1}>{inner}</Box> : inner}
48    </Box>
49  )
50}
51
52export function Variant(el: any, v: string, cols: number) {
53  const { Box } = el
54  return <Box flexDirection="column">{(v === 'v3b' ? STATES.slice(3) : v === 'v3' ? STATES.slice(0, 3) : STATES).map(s => Band(el, v.slice(0, 2), s, cols))}</Box>
55}
56

1type St = { key: string; glyph: string; word: string; color: string; done?: number; total?: number; el?: string; live?: number; stall?: number; dec?: number; unfrozen?: number }
2export const STATES: St[] = [
3  { key: '要你決定', glyph: '▲', word: '要你決定', color: 'warning', done: 3, total: 5, el: '12m', live: 2, dec: 1 },
4  { key: '疑似卡住', glyph: '⏸', word: '疑似卡住', color: 'error', done: 3, total: 5, el: '15m', live: 2, stall: 1 },
5  { key: '完成待驗收', glyph: '✓', word: '完成待驗收', color: 'success', done: 5, total: 5, el: '18m' },
6  { key: '進行中', glyph: '●', word: '進行中', color: 'suggestion', unfrozen: 2, el: '6m', live: 1 },
7  { key: '待命', glyph: '◌', word: '待命', color: 'inactive' },
8]
9
10export const PANE_ID = 'legend'
11
12function Line(el: any, v: string, st: St, onInfo: () => void, hoverTip: boolean) {
13  const { Box, Text, Button } = el
14  const bar = st.total
15    ? <Text><Text color="success">{'▰'.repeat(st.done!)}</Text><Text color="inactive">{'▱'.repeat(st.total - st.done!)}</Text>{' ' + st.done + '/' + st.total}</Text>
16    : st.unfrozen ? <Text dimColor>{st.unfrozen + ' done*'}</Text> : null
17  const glyph = <Text bold color={st.color}>{st.glyph}</Text>
18  return (
19    <Box flexDirection="column" key={'l' + st.key}>
20      {v === 'v4a1' ? null : <Text dimColor>{'[' + v.toUpperCase() + '-' + st.key + ']'}</Text>}
21      <Box>
22        {hoverTip
23          ? <Box key={'h' + st.key}>{glyph}<Box position="absolute" top={-1} left={2} display="none" hover={{ display: 'flex' }}><Text bold color={st.color}>{'(' + st.key + ')'}</Text></Box></Box>
24          : glyph}
25        {v === 'v4a' || v === 'v4a1' ? <Text bold color={st.color}>{' ' + st.word}</Text> : null}
26        {bar ? <Text>{'  '}{bar}</Text> : null}
27        {st.el ? <Text dimColor>{'  ◷ ' + st.el}</Text> : null}
28        {st.live ? <Text>{'  ⚙ ' + st.live}</Text> : null}
29        {st.stall ? <Text color="error">{'  ⏸ ' + st.stall}</Text> : null}
30        {st.dec ? <Text color="claude">{'  ◆ ' + st.dec}</Text> : null}
31        <Text>{'  '}</Text>
32        <Button key={'i' + st.key} plain dimColor autoFocus hotkey="i" onPress={onInfo}>ⓘ</Button>
33      </Box>
34    </Box>
35  )
36}
37
38export function V4(el: any, v: string, onInfo: () => void) {
39  const { Box } = el
40  const list = v === 'v4a1' ? STATES.slice(0, 1) : STATES
41  return <Box flexDirection="column">{list.map((s, i) => Line(el, v, s, onInfo, i === 0 && v === 'v4a1'))}</Box>
42}
43
44export function Legend(el: any, onClose: () => void) {
45  const { Box, Text, Button } = el
46  const leg: [string, string, string][] = [
47    ['▲', 'warning', '要你決定：有一件事卡在你的批准或選擇'],
48    ['⏸', 'error', '疑似卡住：派工太久沒輸出（行尾 ⏸n = 卡住數）'],
49    ['✓', 'success', '完成待驗收：做完了，等你看過'],
50    ['●', 'suggestion', '進行中：正常跑，不用管'],
51    ['◌', 'inactive', '待命：沒有任務在跑'],
52    ['▰▱', 'success', '進度條：已完成 / 總數'],
53    ['◷', '', '經過時間'],
54    ['⚙', '', '正在跑的派工數'],
55    ['◆', 'claude', '待你決定的事項數'],
56    ['?', 'inactive', '未知狀態（資料不足）'],
57  ]
58  const W = [7, 64]
59  const D = [12, 12, 12, 8, 8]
60  const drows = [['grok-4.7', '實作 hand', '實作', '0:15', '—'], ['codex', '審查', '審查', '3:20', '3m ⏸'], ['sonnet', '工頭', '等待處置', '12:04', '—']]
61  const cell = (c: string, w: number, bold = false, color?: string) => <Box width={w} flexShrink={0}><Text bold={bold} color={color}>{c}</Text></Box>
62  return (
63    <Box flexDirection="column" paddingX={1}>
64      <Box><Text bold>圖例</Text><Text>{'  '}</Text><Button plain dimColor role="dismiss" hotkey="x" onPress={onClose}>[ 關閉 ✕ ]</Button></Box>
65      <Box>{cell('符號', W[0], true)}{cell('意思', W[1], true)}</Box>
66      {leg.map(([g, c, m]) => <Box key={g}>{cell(g, W[0], true, c || undefined)}{cell(m, W[1])}</Box>)}
67      <Text> </Text>
68      <Text bold>目前</Text>
69      <Box><Text bold color="warning">▲ 要你決定</Text></Box>
70      <Text>{'專案  gate-sandbox4    階段  實作'}</Text>
71      <Text>{'原因  等你批准：Bash: git commit -m …（2 分）'}</Text>
72      <Text> </Text>
73      <Box>{['runner', '角色', '階段', '經過', '安靜'].map((h, k) => cell(h, D[k], true))}</Box>
74      {drows.map(r => <Box key={r[0]}>{r.map((c, k) => cell(c, D[k]))}</Box>)}
75    </Box>
76  )
77}
78

1const FR = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
2export default function Spin(_p: any, s: any) {
3  const { Box, Text } = s.elements
4  if (s.state === undefined) { s.setState(0); s.every(1000, () => s.setState(((s.state ?? 0) + 1) % FR.length)) }
5  const i = s.state ?? 0
6  const blink = i % 2 === 0
7  return (
8    <Box flexDirection="column">
9      <Box>
10        <Text inverse backgroundColor="#ff5555" bold>{' 要你決定 '}</Text>
11        <Text>{' gate-sandbox4 │ 實作 │ ██████░░░░ 60% (3/5) │ 12m '}</Text>
12        <Text color={blink ? 'warning' : undefined} dimColor={!blink}>{FR[i]}</Text>
13        <Text dimColor>{' tick=' + i + ' cols=' + s.columns}</Text>
14      </Box>
15      <Text dimColor>等你選 A 或 B</Text>
16    </Box>
17  )
18}
19