fault-lacquer

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const list = await read($, tiles)
    const isOn = await read($, band)
    if (!isOn || list.length === 0) {
      if (bandSite !== null && bandSite.requestId === e.requestId) bandSite = null
      return next(e)
    }
    const t = await read($, totals)
    // One row here: the mods beneath get the rest of the band.
    const below = await next({ ...e, props: { ...e.props, maxRows: Math.max(0, e.props.maxRows - 1) } })
    const { Box, Text } = $.ui.resolve(e)
    if (e.surface !== 'terminal') {
      return (
        <Box flexDirection="column">
          <Text>◈ kintsugi: {statsLine(sessionStats(list, t))}</Text>
          {below}
        </Box>
      )
    }
    const { Raster } = $.ui.resolve(e)
    const columns = Math.max(20, Math.min(512, e.props.bodyColumns))
    bandSite = { requestId: e.requestId, columns }
    const cells = bandCells(list, columns, { now: Date.now(), frame }, sessionStats(list, t)).encode()
    return (
      <Box flexDirection="column">
        <Raster key={BAND_KEY} columns={columns} rows={1} cells={cells} />
        {below}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const list = await read($, tiles)
    const s = sessionStats(list, await read($, totals))
    const { Box, Text } = $.ui.resolve(e)
    if (list.length === 0) {
      paneSite = null
      return (
        <Box flexDirection="column">
          <Text bold>Kintsugi</Text>
          <Text dimColor>Nothing has broken yet. When an operation fails its tile cracks; the run that fixes it mends the crack in gold.</Text>
        </Box>
      )
    }
    const broken = list.filter(t => t.state === 'cracked').map(t => t.label)
    if (e.surface !== 'terminal') {
      paneSite = null
      return (
        <Box flexDirection="column">
          <Text bold>Kintsugi</Text>
          <Text>{statsLine(s)}</Text>
          {list.map(t => (
            <Text key={t.key}>
              {t.state === 'gold' ? '◆ mended' : '× broken'} · {t.label} · failed {t.fails}×
            </Text>
          ))}
        </Box>
      )
    }
    const { Raster } = $.ui.resolve(e)
    // The pane's own body, less the header and the legend lines: never the whole terminal.
    const bodyRows = e.props.scroll?.bodyRows ?? Math.floor((e.viewport?.rows ?? 40) / 3)
    const maxRows = Math.max(TILE_MIN_ROWS, bodyRows - 4)
    const layout = wallLayout(list.length, e.props.bodyColumns, maxRows)
    paneSite = { requestId: e.requestId, layout, maxRows }
    const cells = wallCells(list, layout, { now: Date.now(), frame }).encode()
    return (
      <Box flexDirection="column">
        <Text bold color="yellow">
          ◈ KINTSUGI · {statsLine(s)}
        </Text>
        <Raster key={WALL_KEY} columns={layout.columns} rows={layout.rows} cells={cells} />
        {layout.shown < list.length && <Text dimColor>{list.length - layout.shown} older tiles not shown.</Text>}
        <Text dimColor>
          Lacquer tile = an operation that failed. White cracks: still broken. Gold seams: a later run fixed it. × failures ◆ repairs.
        </Text>
        {broken.length > 0 && <Text color="red">still broken: {broken.slice(0, 8).join(' · ')}</Text>}
      </Box>
    )
  })