repo-map

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const inf = await read($, info)
    const v = await read($, view)
    const s = await read($, stats)
    const r = repo
    if (r === null || inf.version === 0) {
      if (building === null) $.clock.after(0, () => void ensureMap($, false).catch(() => undefined))
      return (
        <Box flexDirection="column">
          <Text dimColor>Building the map…</Text>
          <Box marginTop={1}>
            <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
          </Box>
        </Box>
      )
    }
    const now = await $.clock.now()
    const width = Math.max(30, e.props.bodyColumns - 2)
    const all = [...r.files.values()]
    const files = v.filter.trim() === '' ? all : selectFiles(all, { query: v.filter }).map(x => x.file)
    const open = new Set(v.filter.trim() === '' ? v.open : files.flatMap(f => f.path.split('/').slice(0, -1).map((_, i, parts) => parts.slice(0, i + 1).join('/'))))
    const { rows, isCut } = treeRows(files, open, 300)
    const saved = Math.max(0, s.readTokens - s.answerTokens)
    const selected = v.selected === null ? undefined : r.files.get(v.selected)
    const nameRoom = Math.max(12, width - 34)
    const clip = (t: string) => (t.length > nameRoom ? `${t.slice(0, nameRoom - 1)}…` : t)
    let field = null
    if (e.surface !== 'mobile') {
      const { Input } = $.ui.resolve(e)
      field = (
        <Input
          key="filter"
          label="Filter "
          placeholder="path or symbol words"
          value={v.filter}
          onSubmit={value => void update($, view, (x): RepoMapView => ({ ...x, filter: value.trim(), selected: null }))}
        />
      )
    }

    return (
      <Box flexDirection="column">
        <Text wrap="wrap">
          <Text bold>{rootName(r.root)}</Text>
          <Text dimColor>
            {' '}
            · {plural(inf.files, 'file')} · {plural(inf.symbols, 'symbol')}
            {inf.pending > 0 ? ` · ${fmtCount(inf.pending)} to read` : ''} · listed {agoText(now - (inf.listedAt ?? now))} ago
          </Text>
        </Text>
        <Text dimColor wrap="wrap">
          {s.calls === 0
            ? 'Claude has not asked for the map yet this session.'
            : `${plural(s.calls, 'answer')}: ≈${fmtTokens(s.answerTokens)} tokens vs ≈${fmtTokens(s.readTokens)} to Read their files · saved ≈${fmtTokens(saved)}`}
        </Text>
        {inf.note !== null && <Text color="yellow" wrap="wrap">{glyphOf('warn', e.surface === 'terminal' ? glyphMode : 'full')} {inf.note}</Text>}
        {field !== null && <Box marginTop={1}>{field}</Box>}
        <Box flexDirection="column" marginTop={1}>
          {rows.length === 0 && <Text dimColor>{v.filter === '' ? 'No files.' : `Nothing matches "${v.filter}".`}</Text>}
          {rows.map(row => {
            const pad = '  '.repeat(row.depth)
            if (row.kind === 'dir') {
              return (
                <Button
                  key={`d:${row.path}`}
                  plain
                  label={`${pad}${row.isOpen ? '▼' : '►'} ${clip(row.name)}/  ${fmtCount(row.files)} files · ${fmtCount(row.syms)} sym`}
                  onPress={() => void toggleOpen($, row.path)}
                />
              )
            }
            const isSel = selected !== undefined && selected.path === row.path
            return (
              <Box key={`r:${row.path}`} flexDirection="column">
                <Button
                  key={`f:${row.path}`}
                  plain
                  dimColor={!isSel}
                  label={`${pad}  ${clip(row.name)}  ${fmtSize(row.size)}${row.syms > 0 ? ` · ${row.syms} sym` : ''}`}
                  onPress={() => void selectFile($, row.path)}
                />
                {isSel &&
                  (selected.syms === null || selected.syms.length === 0 ? (
                    <Text dimColor>{`${pad}    ${selected.syms === null ? 'no symbols for this kind of file' : 'no symbols found'}`}</Text>
                  ) : (
                    symbolLines(selected.syms)
                      .slice(0, 80)
                      .map((line, i) => (
                        <Text key={`s:${row.path}:${i}`} color="cyan" wrap="truncate-end">
                          {`${pad}    ${line}`}
                        </Text>
                      ))
                  ))}
              </Box>
            )
          })}
          {isCut && <Text dimColor>… more rows: filter or collapse folders</Text>}
        </Box>
        <Box marginTop={1} gap={1}>
          <Button key="refresh" hotkey="r" label="Refresh" onPress={() => void refreshNow($)} />
          <Button key="collapse" hotkey="c" label="Collapse all" onPress={() => void update($, view, (x): RepoMapView => ({ ...x, open: [], selected: null }))} />
          {v.filter !== '' && <Button key="clear" hotkey="f" label="Clear filter" onPress={() => void update($, view, (x): RepoMapView => ({ ...x, filter: '' }))} />}
          <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
        </Box>
      </Box>
    )
  })