file-radar

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const text = r.text
    if ((await isHostedNow($, r)) || r.look.place !== 'top' || text === null || e.props.hasSurvey) return next(e)
    const below = await next(e)
    const { Box, Text } = $.ui.resolve(e)
    return withReadout({ Box: Box as Make['Box'], Text: Text as Make['Text'] }, below, r.name, text, r.look, e.props.isWorking, e.surface === 'terminal' ? r.glyphs : 'full')
  })

export function withReadout(make: Make, below: RenderElement | null | undefined, name: string, text: string, look: Look, isWorking = false, glyphs: IconGlyphs = 'full'): RenderElement {
  if (isWorking && look.whileWorking === 'hide') return below ?? make.Box({ children: [] })
  const piece = pieceElement(make, { name, text, color: look.color }, look, isWorking && look.whileWorking === 'dim', glyphs)
  const justify = justifyOf(look.align)
  const ownRow = (key: string) => make.Box({ key, flexDirection: 'row', justifyContent: justify, children: [make.Text({ wrap: 'wrap', children: [piece] })] })

  const isOurs = below !== null && below !== undefined && below.type === 'Box' && keyOf(below) === BAND_KEY
  const rest: RenderNode[] = isOurs ? [...(below.children ?? [])] : isEmpty(below) ? [] : [below as RenderElement]

  if (look.layout === 'merged') {
    const at = rest.findIndex(n => keyOf(n) === ROW_KEY)
    const row = at >= 0 ? rest[at] : undefined
    if (row !== undefined && typeof row !== 'string' && row.type === 'Box') {
      const line = row.children?.[0]
      if (line !== undefined && typeof line !== 'string' && line.type === 'Text') {
        const sep = make.Text({ dimColor: true, children: [separatorOf(look)] })
        const joined = make.Text({ ...line.props, children: [piece, sep, ...(line.children ?? [])] })
        rest[at] = make.Box({ ...row.props, children: [joined] })
        return make.Box({ key: BAND_KEY, flexDirection: 'column', children: rest })
      }
    }
    return make.Box({ key: BAND_KEY, flexDirection: 'column', children: [ownRow(ROW_KEY), ...rest] })
  }
  return make.Box({ key: BAND_KEY, flexDirection: 'column', children: [ownRow(`${ROW_KEY}:${name}`), ...rest] })
}

function pieceElement(make: Make, p: Piece, look: Look, isDimmed: boolean, glyphs: IconGlyphs = 'full'): RenderElement {
  const text = pieceText(p.name, p.text, look, glyphs)
  return make.Text({ ...pieceProps(p.color, look, isDimmed), children: [look.style === 'pills' ? ` ${text} ` : text] })
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const files = await read($, filesAtom)
    const list = sorted(files)
    const t = totals(files)
    const mode: GlyphMode = e.surface === 'terminal' ? glyphMode : 'full'
    const width = Math.max(40, e.props.bodyColumns)
    const pathWidth = Math.max(14, width - 38)
    const paneRows = e.props.scroll.bodyRows > 0 ? e.props.scroll.bodyRows : (e.viewport?.rows ?? 30)
    let room = Math.max(4, paneRows - 5)
    const rows: JSX.Element[] = []
    let shown = 0
    for (const stat of list) {
      const notes = flags(stat)
      const need = notes.length > 0 ? 2 : 1
      if (room < need) break
      room -= need
      shown += 1
      const delta = stat.edits === 0 ? '' : `+${stat.added} −${stat.removed}`
      const by = stat.byAgent ? (stat.byMain ? 'M+A' : 'A') : 'M'
      rows.push(
        <Text wrap="truncate-end">
          {fitPath(stat.path, pathWidth).padEnd(pathWidth)}
          {String(stat.reads).padStart(4)}
          {String(stat.edits).padStart(4)}
          {String(stat.searches).padStart(4)}
          <Text color={stat.edits > 0 ? 'cyan' : undefined}>{delta.padStart(12)}</Text>
          <Text dimColor>
            {'  '}
            {hhmm(stat.last)} {by}
          </Text>
        </Text>,
      )
      if (notes.length > 0) rows.push(<Text color="yellow" wrap="wrap">{`  ${glyphOf('warn', mode)} ${notes.join(' · ')}`}</Text>)
    }
    return (
      <Box flexDirection="column">
        <Box gap={1}>
          <Box flexGrow={1} flexShrink={1}>
            <Text wrap="wrap">
              <Text bold>{RADAR_GLYPH[mode === 'full' ? 0 : 1]} File radar</Text>
              <Text dimColor>
                {' '}
                · {t.files} files · {t.edited} edited · +{t.added} −{t.removed}
              </Text>
            </Text>
          </Box>
          <Button key="clear" label="Clear" dimColor onPress={() => detach(clearAll($))} />
          <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
        </Box>
        {list.length === 0 ? (
          <Text dimColor wrap="wrap">Nothing read, edited or searched yet this session: files appear here as Claude uses them.</Text>
        ) : (
          <Text dimColor>{`${'file'.padEnd(pathWidth)}   R   E   S         +/−  last  by`}</Text>
        )}
        {rows}
        {shown < list.length && <Text dimColor>… {list.length - shown} more (enlarge the pane)</Text>}
      </Box>
    )
  })

  const sep = () => make.Text({ dimColor: true, children: [separatorOf(look)] })