pulse-filetree

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e, next) => {
    if (e.surface !== 'terminal' && e.surface !== 'desktop') return next(e)
    if (e.surface === 'terminal' && e.props.placement === 'inline') {
      noDock = true
      void $.ui.close({ id: PANE }).catch(() => undefined)
      const { Box: Empty } = $.ui.resolve(e)
      return <Empty />
    }
    const isDesktop = e.surface === 'desktop'
    const unicode = glyphSetting === 'plain' || (glyphSetting === 'auto' && (noNerd || isDesktop))
    const { Box, Text, Button, Input, Client } = $.ui.resolve(e)
    const t = await get($)
    const theme: Theme = (await $.state.get(THEME)).value ?? DEFAULT_THEME
    const palette: Palette = buildPalette(theme, isDesktop)
    // The desktop tab never hands the wheel or the scrollbar drag to the pane, so
    // there it draws every row and lets the engine scroll the body.
    nativeScroll = isDesktop
    const button = (b: ButtonProps) => <Client key={`button-${b.id}`} module="./button.tsx" props={{ id: b.id, label: b.label, dim: b.dim } satisfies ButtonProps} />
    // What the hovered button does, beside the title, when it fits in the columns the title
    // and whatever else shares its row leave; the buttons are Clients only so that they can
    // say when the pointer is over them.
    const hint = (buttons: { id: string; hint: string }[], used: number) => {
      const text = buttons.find(b => b.id === hovered)?.hint
      if (!text) return null
      const room = e.props.bodyColumns - used - 2
      return text.length <= room ? <Text color={palette.muted}>{`${text} `}</Text> : null
    }
    const divider = (columns: number) => <Text color={palette.faint} wrap="truncate-end">{'─'.repeat(Math.max(1, columns))}</Text>
    if (t.preview) {
      if (previewed?.path !== t.preview) await loadPreview($, t.preview)
      const p = previewed
      const markdown = /\.(md|markdown|mdx)$/i.test(t.preview)
      const all = (p?.text ?? '').split('\n').length
      previewRows = nativeScroll ? all : Math.max(4, (e.props.scroll?.bodyRows ?? 40) - (p?.note ? 2 : 1))
      const win = previewLines(p?.text ?? '', nativeScroll ? 0 : Math.min(t.previewTop, Math.max(0, all - previewRows)), previewRows, markdown)
      const name = t.preview !== t.root && inside(t.root, t.preview) ? relative(t.root, t.preview) : shortPath(t.preview)
      const backLabel = isDesktop ? 'Close preview' : unicode ? '← files' : '\u{f004d} files'
      const external = { id: 'external', label: isDesktop ? 'Open in default app' : unicode ? '↗ open' : '\u{f08e} open', dim: true, hint: 'open in default app' }
      return (
        <Box flexDirection="column" minHeight={Math.max(1, e.props.scroll?.bodyRows ?? 1)} backgroundColor={theme.bg || undefined}>
          <Box flexDirection="row">
            <Button key="back" plain label={backLabel} onPress={() => void closePreview($)} />
            <Text> </Text>
            <Box flexShrink={1} flexGrow={1}>
              <Text bold color={palette.text} wrap="truncate-start">
                {name}
              </Text>
            </Box>
            {hint([external], widthOf(backLabel) + 2 + widthOf(name) + widthOf(external.label))}
            {button(external)}
          </Box>
          {p?.note ? <Text color={palette.muted}>{p.note}</Text> : null}
          {isDesktop && divider(e.props.bodyColumns)}
          <Client
            key="rows"
            module="./rows.tsx"
            props={{ rows: [], active: '', activeBg: palette.cursorBg, hoverBg: palette.hoverBg, tones: palette.shimmer, pointer: false, preview: { text: win.text, path: t.preview, startLine: win.top + 1, markdown } } satisfies RowsProps}
          />
        </Box>
      )
    }
    const now = await $.clock.now()
    const live = (await activities($)).filter(a => now - a.at < (a.state === 'running' ? RUNNING_MAX_MS : ACTIVITY_TTL_MS))
    const latest = [...live].reverse().find(a => a.state === 'running') ?? live[live.length - 1]
    const bright = new Set(t.flashOn ? t.flash : [])
    const dimmed = new Set(t.flashOn ? t.flashDim : [])
    const ignored = new Set(t.ignored)
    const untracked = new Set(t.untrackedDirs)
    const width = Math.max(24, e.props.bodyColumns)
    const rows = visibleRows(t)

    // The controls. Labels say what a press does; all are drawn alike, so state is read from
    // the label. The desktop puts Go up and Reload beside the search field and the view
    // toggles on a row of their own; the terminal puts every control on a row that wraps.
    // Follow cwd shows only while the tree is not following, and Clear selection sits beside
    // the selection in the footer.
    const say = (text: string) => (isDesktop ? text.charAt(0).toUpperCase() + text.slice(1) : text)
    const columnLabel = showAge ? 'ages' : 'dates'
    const sizeLabel = t.showSize ? `show ${columnLabel}` : 'show sizes'
    const upButton = { id: 'up', label: say('go up'), dim: true, hint: 'parent folder' }
    const reloadButton = { id: 'refresh', label: say('reload'), dim: true, hint: 'reload tree and git' }
    const viewButtons = [
      { id: 'hidden', label: say(t.showHidden ? 'hide dotfiles' : 'show dotfiles'), dim: true, hint: t.showHidden ? 'hide hidden files' : 'show hidden files' },
      { id: 'size', label: say(sizeLabel), dim: true, hint: sizeLabel },
      { id: 'collapse', label: isDesktop ? 'Collapse all' : 'collapse', dim: true, hint: 'collapse all' },
      ...(follow ? [] : [{ id: 'cwd', label: say('follow cwd'), dim: true, hint: 'follow the cwd' }]),
    ]
    const clearSelectionButton = { id: 'unselect', label: isDesktop ? 'Clear selection' : 'unselect', dim: true, hint: 'clear selection' }
    const toolbarButtons = isDesktop ? viewButtons : [upButton, reloadButton, ...viewButtons]
    const allButtons = [upButton, reloadButton, ...viewButtons, ...(t.selected ? [clearSelectionButton] : [])]
    // How many rows the terminal's toolbar wraps to, filled greedily as the row lays out:
    // each label, and the dot between two labels, a column apart.
    const toolbarRows = (() => {
      if (isDesktop) return 0
      const itemWidths = toolbarButtons.flatMap((b, index) => (index === 0 ? [widthOf(b.label)] : [1, widthOf(b.label)]))
      let lines = 1
      let used = -1
      for (const itemWidth of itemWidths) {
        if (used >= 0 && used + 1 + itemWidth > width) {
          lines += 1
          used = itemWidth
        } else used = used < 0 ? itemWidth : used + 1 + itemWidth
      }
      return lines
    })()

    const fixed = 2 + toolbarRows + (t.top ? (t.branch ? 1 : 0) : showHints ? 1 : 0) + (t.selected || latest ? 1 : 0)
    const room = nativeScroll ? Math.max(1, rows.length) : Math.max(5, (e.props.scroll?.bodyRows ?? 40) - fixed)
    const isLit = (id: string) => bright.has(id) || dimmed.has(id)
    const focus = followClaude && t.flashOn ? ([...t.flash].reverse().find(id => id !== BRANCH_ROW) ?? t.cursor) : t.cursor
    const at = Math.max(0, rows.findIndex(r => r.node.id === focus))
    const lit = followClaude && t.flashOn ? rows.findIndex(r => isLit(r.node.id)) : -1
    const cap = Math.max(1, Math.floor(room / 3))
    let from = Math.max(0, Math.min(lit >= 0 && at - lit < room - 2 ? Math.max(0, lit - 1) : at - Math.floor(room / 2), rows.length - room))
    let pinned = !nativeScroll && followClaude && t.flashOn ? rows.slice(0, from).filter(r => isLit(r.node.id)).slice(-cap) : []
    if (pinned.length) {
      const rest = Math.max(3, room - pinned.length)
      from = Math.max(0, Math.min(at - Math.floor(rest / 2), rows.length - rest))
      pinned = rows.slice(0, from).filter(r => isLit(r.node.id)).slice(-cap)
    }
    const max = Math.max(0, rows.length - room)
    if (t.scroll !== null) {
      from = Math.max(0, Math.min(t.scroll, max))
      pinned = []
    }
    view = { from, max }
    const shown = rows.slice(from, from + room - pinned.length)
    if (t.showSize) wantSizes($, [...pinned, ...shown].filter(r => r.node.kind === 'dir' && !(r.node.id in t.dirSizes)).map(r => r.node.id))
    const totals: [number, number] = t.top ? (t.diff[t.root] ?? [0, 0]) : [0, 0]
    const isBarShown = !nativeScroll && rows.length > shown.length + pinned.length
    const isNarrow = width < NARROW_COLUMNS
    const countSegs = (counts: [number, number, number] | undefined): Seg[] => {
      if (!counts) return []
      const out: Seg[] = []
      if (counts[0] > 0) out.push({ t: ` ?${counts[0]}`, c: palette.added })
      if (counts[1] > 0) out.push({ t: ` M${counts[1]}`, c: palette.modified })
      if (counts[2] > 0) out.push({ t: ` D${counts[2]}`, c: palette.deleted })
      return out
    }
    const lineSegs = (loc: [number, number] | undefined): Seg[] => {
      if (!loc) return []
      const out: Seg[] = []
      if (loc[0] > 0) out.push({ t: ` +${loc[0]}`, c: palette.addedLines })
      if (loc[1] > 0) out.push({ t: ` -${loc[1]}`, c: palette.deletedLines })
      return out
    }
    const rootCounts = t.top ? countSegs(t.counts[t.root]) : []
    const repoName = t.top ? (t.top.split('/').pop() ?? t.top) : t.root.split('/').pop() || t.root
    const subPath = t.top ? t.prefix.replace(/\/$/, '') : ''
    const header = [repoName, subPath].filter(Boolean).join('/')

    // Every row's trailing cells, first, so the main column can be as wide as its widest cell
    // and line up down the tree: a detail cell (a folder's file counts, or line counts beside
    // sizes), the main cell (date, age, size, or the line counts of a file or folder) and the
    // git status mark. A narrow pane leaves a folder's line counts to the summary, so names
    // keep room, and shows the folder's file counts in the main cell instead.
    type Cells = { detail: Seg[]; main: Seg[]; mark: Seg; isDate: boolean }
    const cellsOf = (r: (typeof rows)[number]): Cells => {
      const n = r.node
      const status = t.git[n.id] ?? (underAny(dirname(n.id), untracked, t.root) ? '?' : undefined)