atlas

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const elements = $.ui.resolve(e)
    const { Box, Button, Code, Markdown, Text } = elements
    paneBody = { columns: e.props.bodyColumns, rows: e.props.scroll.bodyRows }
    // Drawn from what this process kept after a /clear; the host gets it back off the render.
    if (!(await read($, seeded))) $.clock.after(0, () => void reseed($).catch(() => {}))
    const shown = await read($, snapshot)
    const { editing: now, root: base } = shown

    if (now !== null) {
      const rel = relOf(now.path, base)
      if (now.status === 'error' || e.surface !== 'terminal') {
        editorView = null
        return (
          <Box flexDirection="column">
            <Text color="red">{now.message ?? `${program} draws only in Claude Code's terminal.`}</Text>
            <Button key="back" variant="primary" label="Back to files" onPress={() => write($, 'editing', () => null)} />
          </Box>
        )
      }
      const { Client, Raster } = $.ui.resolve(e)
      const view = { columns: e.props.bodyColumns, rows: Math.max(3, e.props.scroll.bodyRows - EDITOR_HEADER_ROWS) }
      editorView = view
      const fits = frame !== null && frame.columns === view.columns && frame.rows === view.rows
      // Ctrl+C and Ctrl+Z never reach the editor (Claude Code keeps them), and
      // Escape hands the keys back to the prompt: these send them instead.
      const send = (text: string) => () => call($, '/text', { text })
      return (
        <Box flexDirection="column">
          <Box flexDirection="row" gap={1}>
            <Button key="esc" label="Esc" onPress={send('\x1b')} />
            <Button key="copy" label="Copy" onPress={send('\x03')} />
            <Button key="undo" label="Undo" onPress={send('\x1a')} />
            <Text wrap="truncate-end">
              <Text bold>{now.status === 'starting' ? `Starting ${program}…` : program}</Text>
              <Text dimColor>{` ${rel} · click the text to type · Ctrl+S save · Ctrl+Q quit`}</Text>
            </Text>
          </Box>
          <Box width={view.columns} height={view.rows}>
            <Raster key="editor" columns={view.columns} rows={view.rows} cells={fits ? (frame as Frame).cells : blankCells(view)} />
            <Box position="absolute" top={0} left={0}>
              <Client key="terminal" module="./terminal.tsx" width={view.columns} height={view.rows} />
            </Box>
          </Box>
        </Box>
      )
    }
    editorView = null

    const hidden = shown.showHidden
    const marks = shown.git
    // Indexed once for this drawing: every folder row asks it below.
    const marksByPath = indexMarks(marks, base)
    const allListings = shown.listings
    const shownListings = hidden
      ? allListings
      : Object.fromEntries(Object.entries(allListings).map(([dir, entries]) => [dir, entries.filter(entry => !isHidden(entry.name))]))
    const tree = rows(base, shownListings, shown.expanded, TREE_LIMITS)
    const hiddenCount = (allListings[base] ?? []).filter(entry => isHidden(entry.name)).length
    const chosen = shown.selected
    const info = shown.details
    const hits = shown.results
    const named = shown.naming
    const line = shown.notice
    const typed = shown.query
    const how = shown.mode
    const pixels = shown.hasPixels
    const width = e.props.bodyColumns
    const isWide = width >= 90
    const treeWidth = isWide ? Math.min(48, Math.floor(width * 0.42)) : width
    const canType = e.surface !== 'mobile' // mobile draws no Input: naming needs one
    const changed = Object.keys(marks).length
    const setMode = async (next: SearchMode) => {
      await write($, 'mode', () => next)
      if (typed.trim()) await search($, typed)
    }
    const toggleHidden = async () => {
      const next = !hidden
      await write($, 'showHidden', () => next)
      try {
        await $.store.set('showHidden', next)
      } catch {}
    }
    const collapseAll = async () => {
      await write($, 'expanded', () => [])
      await remember($)
    }

    let finder = null
    if (e.surface !== 'mobile') {
      const { Input } = $.ui.resolve(e)
      finder = (
        <Box flexDirection="row" gap={1}>
          <Box flexGrow={1} flexShrink={1}>
            <Input key="find" label="⌕ " placeholder={how === 'text' ? 'text inside files under this folder' : 'part of a name under this folder'}
              value={typed} submitLabel="search" onSubmit={value => search($, value)} />
          </Box>
          {how === 'names'
            ? <Text bold inverse>{' names '}</Text>
            : <Button key="mode-names" plain label="names" onPress={() => setMode('names')} />}
          {how === 'text'
            ? <Text bold inverse>{' text '}</Text>
            : <Button key="mode-text" plain label="text" onPress={() => setMode('text')} />}
        </Box>
      )
    }

    let asking = null
    if (named !== null && e.surface !== 'mobile') {
      const { Input } = $.ui.resolve(e)
      const label = named.action === 'rename' ? `Rename ${nameOf(named.target)} to`
        : `New ${named.action} in ${named.target === base ? tilde(base) : relOf(named.target, base)}`
      asking = (
        <Box flexDirection="row" gap={1}>
          <Box flexGrow={1}>
            <Input key="name" label={label} autoFocus value={named.action === 'rename' ? nameOf(named.target) : ''}
              submitLabel={named.action === 'rename' ? 'rename' : 'create'} onSubmit={value => finishNaming($, value)} />
          </Box>
          <Button key="cancel" plain label="Cancel" onPress={() => write($, 'naming', () => null)} />
        </Box>
      )
    }

    let explorer
    if (hits !== null) {
      explorer = (
        <Box flexDirection="column">
          <Box flexDirection="row" gap={1}>
            <Text bold>{`${hits.length}${hits.length === SEARCH_LIMIT ? '+' : ''} found`}</Text>
            <Button key="clear" plain label="Back to the tree" onPress={() => write($, 'results', () => null)} />
          </Box>
          {hits.map((hit, index) => {
            const where = relOf(hit.path, base)
            const key = hit.line === undefined ? `r:${relative(hit.path, base)}` : `r:${relative(hit.path, base)}:${hit.line}`
            return (
              <Box key={`hit-${index}`} flexDirection="column">
                <Button key={key} plain label={hit.line === undefined ? where : `${where}:${hit.line}`} onPress={() => reveal($, hit.path, hit.line)} />
                {hit.text !== undefined && <Text dimColor wrap="truncate-end">{`    ${hit.text}`}</Text>}
              </Box>
            )
          })}
        </Box>
      )
    } else {
      // The focus ring starts in the tree, so the arrows walk it at once.
      const firstEntry = tree.find(row => row.type === 'entry')
      const ringStart = tree.some(row => row.path === chosen) ? chosen : firstEntry?.path
      explorer = (
        <Box flexDirection="column">
          {tree.length === 0 && <Text dimColor>{hiddenCount > 0 ? `Only hidden files here (${hiddenCount}).` : 'This folder is empty.'}</Text>}
          {tree.map(row => {
            const indent = '  '.repeat(row.depth)
            if (row.type === 'more') return <Text key={`more:${relative(row.path, base)}`} dimColor>{`  ${indent}… ${row.hidden} more`}</Text>
            if (row.type === 'cut') return <Text key="cut" dimColor>  … more: close some folders, or use Find</Text>
            const kind = classOf(row.entry.name, row.entry.kind, row.entry.isLink)
            const isChosen = row.path === chosen
            const mark = row.entry.kind === 'dir' ? markFor(marksByPath, row.path) : marks[row.path] ?? null
            return (
              <Box key={`row:${relative(row.path, base)}`} flexDirection="row" hover={{ backgroundColor: '#1c2730' }}>
                <Text color="cyan">{isChosen ? '▌' : ' '}</Text>