unpaged

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const list = await read($, armed)
    if (list.length === 0 || e.props.hasSurvey) return next(e)
    const theirs = await next(e)
    const covered = await read($, replying)
    const { Box, Text, Button } = $.ui.resolve(e)
    const unread = list.reduce((n, c) => n + c.unread, 0)
    const button = (key: string, label: string, hotkey: string, onPress: () => void) =>
      Button({ key, label, hotkey, plain: true, onPress })
    const ours =
      list.length === 1
        ? Box({
            flexDirection: 'row',
            columnGap: 2,
            children: [
              Text({ color: dotColor(list[0]), children: ['●'] }),
              Text({ bold: true, children: ['Listening'] }),
              Text({ wrap: 'truncate-end', children: [list[0].title] }),
              Text({ dimColor: true, children: [`·  ${statusLabel(list[0], e.props.isWorking, covered.includes(list[0].documentId))}`] }),
              button('open', 'open', '1', () => void openCanvas($, list[0].documentId)),
              button('stop', 'stop', '2', () => void stop($, list[0].documentId)),
            ],
          })
        : Box({
            flexDirection: 'row',
            columnGap: 2,
            children: [
              Text({ color: unread > 0 ? 'yellow' : list.some(c => c.state === 'connected') ? 'green' : 'gray', children: ['●'] }),
              Text({ bold: true, children: ['Listening'] }),
              Text({ children: [`on ${list.length} canvases`] }),
              Text({ dimColor: true, children: [`·  ${unread > 0 ? `${unread} new` : 'no new comments'}${e.props.isWorking && covered.length > 0 ? '  ·  replying on the canvas' : ''}`] }),
              button('canvases', 'canvases', '1', () => void $.ui.open({ id: PANE, title: 'Listening', focus: true, closeOnEscape: true })),
              button('stop-all', 'stop all', '2', () => void stopAll($)),
            ],
          })
    const children = typeof theirs === 'object' && theirs !== null ? [theirs, ours] : [ours]
    return Box({ flexDirection: 'column', children })
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const list = await read($, armed)
    const covered = await read($, replying)
    const { Box, Text, Button } = $.ui.resolve(e)
    if (list.length === 0) return Box({ children: [Text({ dimColor: true, children: ['Nothing is armed in this session.'] })] })
    return Box({
      flexDirection: 'column',
      children: list.map(canvas =>
        Box({
          flexDirection: 'row',
          columnGap: 2,
          children: [
            Text({ color: dotColor(canvas), children: ['●'] }),
            Text({ wrap: 'truncate-end', children: [canvas.title] }),
            Text({ dimColor: true, children: [statusLabel(canvas, false, covered.includes(canvas.documentId))] }),
            Button({ key: `open-${canvas.documentId}`, label: 'open', onPress: () => void openCanvas($, canvas.documentId) }),
            Button({
              key: `stop-${canvas.documentId}`,
              label: 'stop',
              onPress: () => {
                void stop($, canvas.documentId).then(() => (canvases.size === 0 ? $.ui.close({ id: PANE }) : undefined))
              },
            }),
          ],
        }),
      ),
    })
  })