chat-board

1import type { Register } from 'claude-code'
2import { update } from 'claude-code'
3
4// The latest messages of one chat channel, read from the local chat log with the
5// chat client's own `read --local`, so no server has to be running. The pane
6// redraws every two seconds. A channels button lists the channels on disk; a press
7// on one shows it. Toggled by `enabled` and set by `channel` (the first one shown) and
8// `nick` in settings.json pluginConfigs["chat-board"].options.
9
10const PANE = 'chat-board'
11// The input is its own pane, under the messages, so scrolling the messages never moves it.
12const SAY = 'chat-board-say'
13const TOOL = 'show_chat_board'
14const READ = 'read_chat_board'
15const SHOWN = 20
16const picked = { plugin: 'chat-board', key: 'channel' } as const
17const listing = { plugin: 'chat-board', key: 'listing' } as const
18// How many messages beyond the last SHOWN the pane has been asked to load, ten at a press.
19const extra = { plugin: 'chat-board', key: 'extra' } as const
20const MORE = 10
21
22type Message = { time: string; nick: string; text: string; at: number }
23
24// How long before today a message was sent, in days, months or years: "1 day ago",
25// "2 months ago". Nothing for a message from today, which shows its time alone.
26function agoOf(at: number, nowSeconds: number): string | null {
27  const day = 86400
28  const days = Math.floor(nowSeconds / day) - Math.floor(at / day)
29  if (!Number.isFinite(days) || days < 1) return null
30  const plural = (count: number, unit: string) => `${count} ${unit}${count === 1 ? '' : 's'} ago`
31  if (days < 30) return plural(days, 'day')
32  if (days < 365) return plural(Math.floor(days / 30), 'month')
33  return plural(Math.floor(days / 365), 'year')
34}
35
36// One `MSG #chan <id> <unix-time> <nick> :<text>` line of the chat client's output.
37function messagesOf(output: string): Message[] {
38  return output
39    .split('\n')
40    .map(line => /^MSG (\S+) (\d+) (\d+) (\S+) :(.*)$/.exec(line))
41    .filter((match): match is RegExpExecArray => match !== null)
42    .map(match => {
43      const when = new Date(Number(match[3]) * 1000)
44      const time = `${String(when.getUTCHours()).padStart(2, '0')}:${String(when.getUTCMinutes()).padStart(2, '0')}`
45      return { time, nick: match[4] ?? '', text: match[5] ?? '', at: Number(match[3]) }
46    })
47}
48
49// Each nick's colour: the same nick always gets the same one, picked from the palette
50// by a hash of its name, so the colours look random but need no stored state.
51// Thirty-two hex colours, evenly spread round the hue wheel at one lightness, so each is
52// distinct and all are readable on a dark ground.
53const NICK_COLORS = ["#eb7070","#eb8770","#eb9e70","#ebb570","#ebcc70","#ebe370","#dbeb70","#c4eb70","#adeb70","#96eb70","#80eb70","#70eb78","#70eb8f","#70eba6","#70ebbd","#70ebd4","#70ebeb","#70d4eb","#70bdeb","#70a6eb","#708feb","#7078eb","#8070eb","#9670eb","#ad70eb","#c470eb","#db70eb","#eb70e3","#eb70cc","#eb70b5","#eb709e","#eb7087"]
54function colorOf(nick: string): string {
55  let hash = 0
56  for (const ch of nick) hash = (hash * 31 + ch.charCodeAt(0)) >>> 0
57  return NICK_COLORS[hash % NICK_COLORS.length] ?? 'cyan'
58}
59
60// Every nick in view, posting or mentioned, in the order first seen.
61function nicksIn(messages: Message[]): string[] {
62  const seen = new Set<string>()
63  for (const message of messages) {
64    seen.add(message.nick)
65    for (const piece of piecesOf(message.text)) if (piece.nick) seen.add(piece.nick)
66  }
67  return [...seen]
68}
69
70// A message's text as pieces: a mention (`@nick`) carries its nick, so it is drawn in
71// that nick's colour; the rest is plain.
72function piecesOf(text: string): { text: string; nick?: string }[] {
73  const pieces: { text: string; nick?: string }[] = []
74  let last = 0
75  for (const match of text.matchAll(/@([A-Za-z0-9_.-]+)/g)) {
76    const at = match.index ?? 0
77    if (at > last) pieces.push({ text: text.slice(last, at) })
78    pieces.push({ text: match[0], nick: match[1] })
79    last = at + match[0].length
80  }
81  if (last < text.length) pieces.push({ text: text.slice(last) })
82  return pieces
83}
84
85// The chat client's binary in the shared bin the installer puts it in.
86function clientPath(home: string, xdg: string): string {
87  const bin = xdg ? `${xdg}/tsch-ai-skills/bin` : `${home}/.config/tsch-ai-skills/bin`
88  return `${bin}/chat-client-rs`
89}
90
91// The chat home: the channel logs and the server's port live here.
92function chatHomeOf(home: string, xdg: string): string {
93  return `${xdg || `${home}/.config`}/tsch-ai-skills/chat`
94}
95
96// The server the chat client's session names, as `host:port`, or null.
97function serverOf(output: string): string | null {
98  const line = output.split('\n').find(text => text.startsWith('server='))
99  return line ? line.slice('server='.length).trim() : null
100}
101
102// The server this machine runs, from the port it wrote to the chat home. The plugin's own
103// process has no session id, so `session show` would name the shared session's server
104// instead; that is the fallback only.
105async function addressOf(
106  $: { fs: { exists: (path: string) => Promise<boolean>; read: (path: string) => Promise<string> }; process: { run: (argv: string[]) => Promise<{ exitCode: number; stdout: string; stderr: string }> } },
107  home: string,
108  xdg: string,
109): Promise<string | null> {
110  const portFile = `${chatHomeOf(home, xdg)}/server.port`
111  if (await $.fs.exists(portFile)) {
112    const port = (await $.fs.read(portFile)).trim()
113    if (port !== '') return `127.0.0.1:${port}`
114  }
115  return serverOf((await $.process.run([clientPath(home, xdg), 'session', 'show'])).stdout)
116}
117
118// Whether something accepts a TCP connection at `address`. One second at most, so an
119// offline server costs the pane a second; the client's own probe retries for far longer.
120async function reachable(address: string, run: (argv: string[]) => Promise<{ exitCode: number }>): Promise<boolean> {
121  const colon = address.lastIndexOf(':')
122  const host = address.slice(0, colon)
123  const port = address.slice(colon + 1)
124  const result = await run(['timeout', '1', 'bash', '-c', 'exec 3<>"/dev/tcp/$1/$2"', 'probe', host, port])
125  return result.exitCode === 0
126}
127
128// The channels with a log on disk, by name, sorted: the channel logs are `<chan>.log`.
129async function channelsOf(
130  $: { fs: { exists: (path: string) => Promise<boolean>; list: (path?: string) => Promise<{ name: string; kind: string }[]> } },
131  dir: string,
132): Promise<string[]> {
133  if (!(await $.fs.exists(dir))) return []
134  return (await $.fs.list(dir))
135    .filter(entry => entry.kind === 'file' && entry.name.endsWith('.log'))
136    .map(entry => entry.name.replace(/\.log$/, ''))
137    .sort()
138}
139
140// The redraw timer's cancel handle, kept so a re-registered session replaces the
141// timer rather than adding a second one.
142let tick: { cancel: () => void } | undefined
143
144export const register: Register = (on, options) => {
145  if (options.enabled === false) return
146  const channel = String(options.channel ?? '') || '#ops'
147  // The nick the person's own lines go out under, from the `nick` option.
148  const nick = String(options.nick ?? '') || 'tschallacka'
149
150  on('session.start', async ($, e, next) => {
151    await $.command.register({
152      name: 'chat-board',
153      description: 'Show the latest messages of the chat channel in a pane; `/chat-board close` hides it',
154    })
155    await $.tool.register({
156      name: TOOL,
157      description: 'Show the latest messages of the chat channel to the person, in a pane, and return them as text.',
158      inputSchema: { type: 'object', properties: {} },
159    })
160    await $.tool.register({
161      name: READ,
162      description: 'Read the channel the chat board shows and its latest messages, as text, without opening the pane.',
163      inputSchema: { type: 'object', properties: {} },
164    })
165    tick?.cancel()
166    // Every five seconds: often enough for the status line to notice a server coming
167    // online, rarely enough that the pane does not flicker.
168    tick = $.clock.every(5000, () => $.ui.invalidate('ui.render'))
169    return next(e)
170  })
171
172  on('command.run', { command: 'chat-board' }, async ($, e) => {
173    if (e.args.trim().toLowerCase() === 'close') {
174      await $.ui.close({ id: SAY })
175      await $.ui.close({ id: PANE })
176      return { text: 'Chat board closed.' }
177    }
178    await $.ui.open({ id: PANE, title: `Chat ${channel}` })
179    await $.ui.open({ id: SAY, title: 'Say', rows: 3 })
180    return { text: 'Chat board opened.' }
181  })
182
183  on('tool.call', { tool: `mcp__chat-board__${TOOL}` }, async ($) => {
184    const home = (await $.env.get('HOME')) ?? ''
185    const xdg = (await $.env.get('XDG_CONFIG_HOME')) ?? ''
186    const { value: current } = await $.state.get(picked)
187    const shown = current ?? channel
188    const run = await $.process.run([clientPath(home, xdg), 'read', '--local', '--chan', shown, '--since', '0'])
189    const recent = messagesOf(run.stdout).slice(-SHOWN)
190    await $.ui.open({ id: PANE, title: `Chat ${shown}` })
191    await $.ui.open({ id: SAY, title: 'Say', rows: 3 })
192
193    return {
194      result: [
195        `Latest messages in ${shown}:`,
196        ...recent.map(message => `${message.time} ${message.nick}: ${message.text}`),
197      ].join('\n'),
198    }
199  })
200
201  // The agent's read of the channel the board shows. Read-only; the pane is not opened.
202  on('tool.call', { tool: `mcp__chat-board__${READ}` }, async $ => {
203    const home = (await $.env.get('HOME')) ?? ''
204    const xdg = (await $.env.get('XDG_CONFIG_HOME')) ?? ''
205    const { value: current } = await $.state.get(picked)
206    const shown = current ?? channel
207    const run = await $.process.run([clientPath(home, xdg), 'read', '--local', '--chan', shown, '--since', '0'])
208    const recent = messagesOf(run.stdout).slice(-SHOWN)
209    // The text the person has highlighted in the pane, when they have.
210    const live = await $.ui.selection().catch(() => undefined)
211    const address = await addressOf($, home, xdg)
212    const online = address ? await reachable(address, argv => $.process.run(argv)) : false
213
214    return {
215      result: [
216        `Server modified IRC, ${address ?? 'no server set'} ${online ? 'online' : 'offline'}`,
217        `Channel shown: ${shown}`,
218        `Highlighted in the board: ${live?.text ?? 'none'}`,
219        `Latest messages in ${shown}:`,
220        ...recent.map(message => `${message.time} ${message.nick}: ${message.text}`),
221      ].join('\n'),
222    }
223  })
224
225  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
226    const { Box, Button, Text } = $.ui.resolve(e)
227    const home = (await $.env.get('HOME')) ?? ''
228    const xdg = (await $.env.get('XDG_CONFIG_HOME')) ?? ''
229    const { value: choice } = await $.state.get(picked)
230    const { value: browsing } = await $.state.get(listing)
231    const { value: loaded } = await $.state.get(extra)
232    const current = choice ?? channel
233    const run = await $.process.run([clientPath(home, xdg), 'read', '--local', '--chan', current, '--since', '0'])
234    const all = messagesOf(run.stdout)
235    const shownCount = SHOWN + (loaded ?? 0)
236    const recent = all.slice(-shownCount)
237    const earlier = all.length > recent.length
238    // A nick's colour is its place in the channel's log, the order it first speaks or is
239    // mentioned: the log only grows at the end, so no nick ever moves to another colour.
240    const order = nicksIn(all)
241    const colorOfNick = (nick: string) => {
242      const place = order.indexOf(nick)
243      // Stepping eleven places round the palette (coprime with its 32) puts nicks that first
244      // appear one after another far apart on the hue wheel, rather than side by side.
245      return place >= 0 ? NICK_COLORS[(place * 11) % NICK_COLORS.length] ?? 'cyan' : colorOf(nick)
246    }
247    // The clock comes from the system, as the CI board's does: the plugin runtime's own
248    // Date.now is not trusted for this.
249    const nowSeconds = Number((await $.process.run(['date', '+%s'])).stdout.trim())
250    const address = await addressOf($, home, xdg)
251    const online = address ? await reachable(address, argv => $.process.run(argv)) : false
252    const channels = await channelsOf($, `${chatHomeOf(home, xdg)}/channels`)
253
254    return (
255      <Box flexDirection="column" height="100%">
256        <Box flexDirection="row" justifyContent="space-between">
257          <Text bold inverse>
258            {browsing ? 'Channels' : `Chat ${current}`}
259          </Text>
260          <Box flexDirection="row">
261            <Button variant={browsing ? 'primary' : undefined} onPress={() => update($, listing, () => !(browsing ?? false))}>
262              {browsing ? 'back to chat' : 'channels'}
263            </Button>
264            <Text> </Text>
265            <Button
266              role="dismiss"
267              onPress={async () => {
268                await $.ui.close({ id: SAY })
269                await $.ui.close({ id: PANE })
270              }}
271            >
272              Close
273            </Button>
274          </Box>
275        </Box>
276        <Text> </Text>
277        {browsing ? (
278          <Box flexDirection="column">
279            {channels.length === 0 && <Text dimColor>No channels on this machine yet.</Text>}
280            {channels.map(name => (
281              <Button
282                key={name}
283                variant={name === current ? 'primary' : undefined}
284                onPress={() => {
285                  update($, picked, () => name)
286                  update($, listing, () => false)
287                  update($, extra, () => 0)
288                }}
289              >
290                {name}
291              </Button>
292            ))}
293          </Box>
294        ) : (
295          <Box flexDirection="column" height="100%">
296            {/* The messages take the room the input leaves, and clip to it, so the input stays
297                in view however long the log is. */}
298            <Box flexDirection="column" flexGrow={1} overflow="hidden">
299            <Text>
300              {`Server modified IRC, ${address ?? 'no server set'} `}
301              <Text color={online ? 'green' : 'red'}>{online ? '[online]' : '[offline]'}</Text>
302            </Text>
303            <Text> </Text>
304            <Button
305              variant={earlier ? 'primary' : undefined}
306              onPress={() => {
307                if (earlier) update($, extra, () => (loaded ?? 0) + MORE)
308              }}
309            >
310              {earlier ? `load ${MORE} earlier messages` : 'no earlier messages'}
311            </Button>
312            {recent.length === 0 && <Text dimColor>No messages in this channel yet.</Text>}
313            {recent.map((message, index) => (
314              <Text key={index}>
315                <Text dimColor>{`${message.time} `}</Text>
316                {Number.isFinite(nowSeconds) && agoOf(message.at, nowSeconds) && (
317                  <Text dimColor italic>{`${agoOf(message.at, nowSeconds)}  `}</Text>
318                )}
319                <Text bold color={colorOfNick(message.nick)}>{`<${message.nick}> `}</Text>
320                {piecesOf(message.text).map((piece, part) => (
321                  <Text key={part} bold={piece.nick !== undefined} color={piece.nick ? colorOfNick(piece.nick) : undefined}>
322                    {piece.text}
323                  </Text>
324                ))}
325              </Text>
326            ))}
327            </Box>
328          </Box>
329        )}
330      </Box>
331    )
332  })
333
334  // The input pane: the line the person types goes to the channel under their own nick.
335  on('ui.render', { component: 'Pane', requestId: SAY }, async ($, e) => {
336    const { Box, Input } = $.ui.resolve(e)
337    const home = (await $.env.get('HOME')) ?? ''
338    const xdg = (await $.env.get('XDG_CONFIG_HOME')) ?? ''
339    const { value: choice } = await $.state.get(picked)
340    const current = choice ?? channel
341    const address = await addressOf($, home, xdg)
342    const online = address ? await reachable(address, argv => $.process.run(argv)) : false
343
344    const say = (text: string) => {
345      const line = text.trim()
346      if (line === '') return
347      $.process
348        .run([clientPath(home, xdg), 'send', '--chan', current, '--nick', nick, '--text', line])
349        .then(() => $.ui.invalidate('ui.render'))
350        .catch(() => $.ui.invalidate('ui.render'))
351    }
352
353    return (
354      <Box borderStyle="round" borderColor={online ? 'green' : 'gray'} paddingX={1}>
355        <Input
356          key="chat-say"
357          label={`${nick} > `}
358          placeholder={`message ${current}`}
359          submitLabel="send"
360          onSubmit={say}
361        />
362      </Box>
363    )
364  })
365}
366

1// The channel the board shows, by name, once the person has picked one from the channel
2// list (null: the channel in the `channel` option), and whether the channel list is open.
3declare module 'claude-code' {
4  interface PluginState {
5    'chat-board': { channel: string | null; listing: boolean; extra: number }
6  }
7}
8