bouncer

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const line = await read($, news)
    if (line === null) return next(e)
    const below = await next(e).catch(() => null)
    if (below !== null && holdsBeneath(below)) return below
    const { Box, Text, Button } = $.ui.resolve(e)
    return (
      <Box key="bouncer-wrap" flexDirection="column">
        {below}
        <Box key="bouncer" flexDirection="row" gap={1}>
          <Box key="bouncer-line" flexShrink={1}>
            <Text color="warning" wrap="truncate-end">
              {line}
            </Text>
          </Box>
          <Button key="bouncer-show" label="Show" onPress={() => void openPane($)} />
        </Box>
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const elements = $.ui.resolve(e)
    const { Box, Button, Text } = elements
    const list = await read($, rows)
    const unfolded = await read($, open)
    const at = await read($, checkedAt)
    const checking = await read($, isChecking)
    const columns = e.props.bodyColumns
    const body: RenderNode[] = []
    // Two folders with one name (a copy under development beside the installed one) are two rows: numbered keys, and each shows its folder.
    const twins = new Map<string, number>()
    for (const row of list) twins.set(row.name, (twins.get(row.name) ?? 0) + 1)
    const numbered = new Map<string, number>()
    for (const row of list) {
      const tag = row.ok ? (row.isNew ? 'new' : row.isChanged ? 'changed' : '') : ''
      const nth = (numbered.get(row.name) ?? 0) + 1
      numbered.set(row.name, nth)
      const isTwin = (twins.get(row.name) ?? 0) > 1
      const key = isTwin ? `${row.name}-${nth}` : row.name
      body.push(
        <Box key={`row-${key}`} flexDirection="column">
          <Box key="line" flexDirection="row" gap={1}>
            <Box key="name" flexShrink={0}>
              <Text bold={tag !== ''}>{row.name}</Text>
            </Box>
            {isTwin ? (
              <Box key="folder" flexShrink={1} minWidth={12}>
                <Text dimColor wrap="truncate-start">
                  {row.root}
                </Text>
              </Box>
            ) : null}
            {row.version ? (
              <Box key="version" flexShrink={0}>
                <Text dimColor>{row.version}</Text>
              </Box>
            ) : null}
            {tag !== '' ? (
              <Box key="tag" flexShrink={0}>
                <Text color="warning">{tag}</Text>
              </Box>
            ) : null}
            {row.isLoaded ? (
              <Box key="loaded" flexShrink={0}>
                <Text dimColor>loaded</Text>
              </Box>
            ) : null}
            <Box key="reach" flexDirection="row" flexGrow={1} flexShrink={1} flexWrap="wrap">
              {row.ok ? (
                reachWords(row.reach).map((w, i) => (
                  <Text key={`w-${i}`} color={w.warn ? 'warning' : undefined}>
                    {i === 0 ? w.word : `, ${w.word}`}
                  </Text>
                ))
              ) : (
                <Text color="warning" wrap="truncate-end">{`could not check: ${row.reason}`}</Text>
              )}
            </Box>
            {row.ok ? (
              <Button key={`details-${key}`} label={unfolded === row.root ? 'less' : 'details'} onPress={() => update($, open, was => (was === row.root ? null : row.root))} />
            ) : null}
          </Box>
          {row.ok && unfolded === row.root ? (
            <Box key="details" flexDirection="column" paddingLeft={2}>
              {(row.reach.notes.length === 0 ? ['the validator reported no hooks and no calls'] : row.reach.notes).map((note, i) => (
                <Text key={`note-${i}`} dimColor wrap="wrap">
                  {note}
                </Text>
              ))}
            </Box>
          ) : null}
        </Box>,
      )
    }
    return (
      <Box key="bouncer-pane" flexDirection="column" paddingX={1}>
        <Box key="title" flexDirection="row" gap={1} alignItems="center">
          {columns >= BOLT_COLUMNS.tiny + 37 ? boltSprite(elements, e.surface, { size: 'tiny', pose: 'idle' }, 'title-bolt') : null}
          <Text bold>Bouncer</Text>
        </Box>
        <Box key="sub">
          <Text color="subtle" wrap="wrap">
            {checking ? 'Checking the mods through the validator...' : at === 0 ? 'No check has run yet. /bouncer check runs one.' : `Checked ${list.length} mod${list.length === 1 ? '' : 's'} at ${clockWords(at)}. Facts from the validator, not a verdict; nothing leaves the machine.`}
          </Text>
        </Box>
        <Box key="gap" height={1} />
        {body}
        <Box key="foot" marginTop={1}>
          <Text color="subtle" wrap="wrap">
            In the warning colour: runs programs, runs tools, reaches the network, calls MCP tools, calls the API as you, starts subagents, can type for you, can change tool calls, messages other sessions, changes your settings. Bouncer never blocks, unloads or changes a mod.
          </Text>
        </Box>
      </Box>
    )
  })

export function boltSprite(elements: Elements, surface: string, pick: BoltPick, key = 'bolt'): RenderElement {
  const { Box, Text, Raster } = elements
  const cells = boltOf(pick)
  const columns = cells[0]?.length ?? 0
  if (surface === 'terminal' && Raster !== undefined) {
    return <Raster key={key} columns={columns} rows={cells.length} cells={rasterCells(cells)} />
  }
  const paint = (cell: BoltCell): TextProps => ({
    ...(cell.fg !== undefined ? { color: cell.fg } : {}),
    ...(cell.bg !== undefined ? { backgroundColor: cell.bg } : {}),
  })
  if (surface === 'desktop') {
    return (
      <Box key={key} flexDirection="column" flexShrink={0}>
        {cells.map(line => (
          <Box flexDirection="row" flexWrap="nowrap">
            {line.map(cell =>
              cell.fg === undefined && cell.bg === undefined ? <Box width={1} /> : <Box width={1}><Text {...paint(cell)}>{cell.ch}</Text></Box>,
            )}
          </Box>
        ))}
      </Box>
    )
  }
  return (
    <Box key={key} flexDirection="column" flexShrink={0}>
      {cells.map(line => (
        <Text>
          {boltRuns(line).map(run => {
            const text = run.ch.replace(/ /g, ' ')
            return run.fg === undefined && run.bg === undefined ? text : <Text {...paint(run)}>{text}</Text>
          })}
        </Text>
      ))}
    </Box>
  )
}