kesav

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    draws += 1
    const el = $.ui.resolve(e)
    const columns = e.props.bodyColumns
    const rows = e.props.scroll.bodyRows
    const [repo, marks, edits, current] = [await read($, index), await read($, git), await read($, touched), await read($, view)]
    if (!repo) $.clock.after(0, () => void loadIfMissing($))

    // Docked: the terminal is the transcript beside the pane, the pane, and the divider between.
    // Size the dock once per terminal width, so a width the person drags stays theirs.
    if (e.props.placement === 'dock' && e.viewport?.columns) {
      termColumns = e.viewport.columns + columns + 1
      if (termColumns !== sizedFor && paneWidth() !== undefined) {
        sizedFor = termColumns
        $.clock.after(0, () => void openPane($))
      }
    }

    // The keyboard Client: terminal and desktop draw one; the editor's surfaces fall back to buttons.
    const hasClient = (e.surface === 'terminal' || e.surface === 'desktop') && 'Client' in el
    const nav = (props: NavProps, height: number) =>
      'Client' in el ? <el.Client key="nav" module="./nav.tsx" props={plain(props)} height={height} /> : undefined
    const navBase = {
      columns,
      surface: e.surface === 'desktop' ? ('desktop' as const) : ('terminal' as const),
      cursor: current.cursor,
      cursorAt: current.cursorAt,
      line: current.line,
      lineAt: current.lineAt,
      editing: current.editing,
      notice: current.notice,
    }

    if (current.mode === 'file' && current.openPath && repo) {
      await read($, revision)
      const path = current.openPath
      const doc = await loadDoc($, repo.root, path)
      const isText = doc.kind === 'text' || doc.kind === 'markdown'
      const isWhole = isText && (doc.text?.length ?? 0) <= NAV_MAX_TEXT
      // The Client holds a file up to NAV_MAX_TEXT whole and scrolls it itself; past that, and without a Client, it pages.
      const page: DocPage | undefined = !isText
        ? undefined
        : hasClient && isWhole
          ? { text: doc.text ?? '', startLine: 1, pageCount: 1 }
          : pageOf(doc, current.page)
      const diff = current.showDiff ? await loadDiff($, repo.root, path) : undefined
      let body: ReturnType<typeof nav>
      if (hasClient && doc.kind !== 'image') {
        const shown = isWhole ? { text: doc.text ?? '', startLine: 1, pageCount: 1 } : page
        const file: NavFile = {
          path,
          kind: doc.kind,
          text: shown?.text,
          startLine: shown?.startLine ?? 1,
          page: isWhole ? 0 : Math.min(current.page, (shown?.pageCount ?? 1) - 1),
          pageCount: shown?.pageCount ?? 1,
          lineCount: doc.lineCount,
          size: doc.size,
          mtimeMs: doc.mtimeMs,
          isEditable: isWhole,
          isRaw: current.isRaw,
          showDiff: current.showDiff,
          diff,
          mark: marks[path],
          isTouched: (edits[path] ?? 0) > 0,
        }
        body = nav({ ...navBase, mode: 'file', rows: Math.max(4, rows - FILE_CHROME), file }, Math.max(4, rows - FILE_CHROME))
      }
      return Viewer(el, {
        surface: e.surface,
        columns,
        rows,
        doc,
        page,
        diff,
        view: current,
        mark: marks[path],
        isTouched: (edits[path] ?? 0) > 0,
        repoName: baseName(repo.root),
        body,
        actions: {
          close: () => void closeByUser($),
          back: () => void handleOp($, { op: 'back' }),
          setPage: page => void setView($, v => ({ ...v, page: Math.max(0, page) })),
          toggleRaw: () => void setView($, v => ({ ...v, isRaw: !v.isRaw })),
          toggleDiff: () => void setView($, v => ({ ...v, showDiff: !v.showDiff })),
          reveal: () => {
            void setView($, v => ({
              ...v,
              mode: 'tree',
              filter: '',
              editing: undefined,
              cursor: path,
              cursorAt: v.cursorAt + 1,
              expanded: [...new Set([...v.expanded, ...parentDirs(path)])],
            })).then(() => $.clock.after(50, () => void $.ui.scroll({ to: { key: `row:${path}` }, in: PANE, block: 'center' })))
          },
        },
      })
    }

    const isFiltering = current.filter.trim() !== ''
    const listed = !repo
      ? { rows: [], total: 0 }
      : isFiltering
        ? filterRows(repo, current.filter, marks, edits)
        : { rows: treeRows(repo, new Set(current.expanded), marks, edits), total: 0 }

    let body: ReturnType<typeof nav>
    if (hasClient) {
      const compact = navRows(listed.rows)
      const total = isFiltering ? Math.max(listed.total, listed.rows.length) : listed.rows.length
      const height = Math.max(4, rows - treeChromeRows(rows))
      body = nav(
        {
          ...navBase,
          mode: 'tree',
          rows: height,
          tree: repo ? { rows: compact.rows, more: total - compact.sent, isFiltering, query: current.filter } : undefined,
        },
        height,
      )
    }

    return Tree(el, {
      surface: e.surface,
      columns,
      rows,
      index: repo,
      rows_: hasClient ? [] : listed.rows,
      total: listed.total,
      view: current,
      changedCount: Object.keys(marks).length,
      touchedCount: Object.keys(edits).length,
      body,
      actions: {
        press: row => void handleOp($, row.kind === 'dir' ? { op: 'toggle', path: row.path } : { op: 'open', path: row.path }),
        setFilter: query => void setView($, v => ({ ...v, filter: query })),
        close: () => void closeByUser($),
        collapseAll: () => void setView($, v => ({ ...v, expanded: [], filter: '' })),
        refresh: () => {
          void refreshAll($).then(() => $.ui.toast('repoviewer: refreshed'))
        },
        toggleFollow: () => void toggleFollow($),
        openFirstMatch: () => {
          void (async () => {
            const [latest, now] = [await read($, index), await read($, view)]
            if (!latest || now.filter.trim() === '') return
            const first = filterRows(latest, now.filter, await read($, git), await read($, touched), 1).rows[0]
            if (!first) return
            // Like an editor's quick open, the finder resets once it has opened something: coming
            // back shows the whole tree (the field itself comes back empty, so a kept query would hide files).
            await setView($, v => ({ ...v, filter: '' }))
            await showFile($, first.path)
          })()
        },
      },
    })
  })

export function Viewer(el: ElementTable, ctx: ViewerCtx): RenderElement {
  const { Box, Text, Button, Code, Markdown } = el
  const { doc, view, mark, actions } = ctx
  const columns = Math.max(20, Math.floor(ctx.columns) || 20)
  const pageCount = ctx.page?.pageCount ?? 1
  const current = Math.min(Math.max(view.page, 0), Math.max(0, pageCount - 1))
  const isText = doc.kind === 'text' || doc.kind === 'markdown'
  const isMarkdown = doc.kind === 'markdown'
  // A deleted file has no content to show, only its diff. Keep the toggle
  // reachable while the diff is showing so the person can always get out.
  const hasDiffMark = mark !== undefined && mark !== '?'
  const canDiff = (isText || doc.kind === 'missing') && (hasDiffMark || view.showDiff)
  const showingDiff = canDiff && view.showDiff
  const isPaged = isText && !showingDiff && pageCount > 1

  // 1. Header, the file's tab: back, the file name bold, git mark, touched dot; our close button at
  // the right (the engine's own dim ✕ covers the last two cells of this row, so it stops short of
  // them and the two read as one `close ✕`). One cell in from the divider, as the tree's chrome is.
  const hasClose = columns >= 28
  const tail = (mark ? 2 : 0) + (ctx.isTouched ? 2 : 0)
  const base = doc.path.slice(doc.path.lastIndexOf('/') + 1)
  const baseRoom = Math.max(6, columns - PAD - BACK_WIDTH - 1 - tail - (hasClose ? CLOSE_RESERVE : PAD))
  const header = (
    <Box flexDirection="row" justifyContent="space-between" paddingLeft={PAD} paddingRight={hasClose ? 2 : PAD}>
      <Box flexDirection="row" gap={1}>
        <Button key="back" label="‹ back" plain dimColor onPress={() => actions.back()} />
        <Text bold wrap="truncate-end">{middle(base, baseRoom)}</Text>
        {mark ? <Text {...markStyle(mark)}>{mark}</Text> : null}
        {ctx.isTouched ? <Text color="magenta">●</Text> : null}
      </Box>
      {hasClose ? <Button key="close" plain role="dismiss" label="close" onPress={() => actions.close()} /> : null}
    </Box>
  )

  // 2. Breadcrumb: repo › folders, dim, the last crumb a touch stronger.
  const crumbs = [...(ctx.repoName ? [ctx.repoName] : []), ...doc.path.split('/').slice(0, -1)]
  const crumbRoom = Math.max(4, columns - PAD * 2)
  const crumbText = middle(crumbs.length > 0 ? crumbs.join(' › ') : '·', crumbRoom)
  const breadcrumb = (
    <Box paddingLeft={PAD}>
      <Text dimColor wrap="truncate-end">{crumbText}</Text>
    </Box>
  )

  // 3. Toolbar (only the buttons that apply) with the file's facts at its right edge when they fit.
  const parts: string[] = []
  if (isText) {
    parts.push(`${doc.lineCount} ${doc.lineCount === 1 ? 'line' : 'lines'}`)
    parts.push(formatSize(doc.size))
    const language = languageOf(doc.path)
    if (language) parts.push(language)
    if (isPaged) parts.push(`page ${current + 1}/${pageCount}`)
  } else if (doc.kind === 'image') {
    parts.push('png image', formatSize(doc.size))
  } else if (doc.kind === 'binary' || doc.kind === 'too-large') {
    parts.push(formatSize(doc.size))
  } else if (doc.kind === 'missing') {
    parts.push('not on disk')
  }
  if (showingDiff) {
    if (ctx.diff) {
      const { add, del } = countDiff(ctx.diff.hunks)
      parts.push(`diff vs HEAD +${add} −${del}`)
    } else {
      parts.push('diff vs HEAD')
    }
  }
  const metaText = parts.join(' · ')

  const buttons: RenderElement[] = []
  const labels: string[] = []
  const add = (key: string, label: string, onPress: () => void) => {
    labels.push(label)
    buttons.push(<Button key={key} label={label} plain dimColor onPress={onPress} />)
  }
  if (isPaged && current > 0) add('prev', '‹ prev', () => actions.setPage(current - 1))
  if (isPaged && current < pageCount - 1) add('next', 'next ›', () => actions.setPage(current + 1))
  if (isMarkdown && !showingDiff) add('raw', view.isRaw ? 'rendered' : 'raw', () => actions.toggleRaw())
  if (canDiff) add('diff', showingDiff ? 'file' : 'diff', () => actions.toggleDiff())
  add('reveal', 'reveal', () => actions.reveal())
  const buttonsWidth = labels.reduce((w, l) => w + l.length, 0) + 3 * (labels.length - 1)
  const metaRoom = columns - PAD * 2 - buttonsWidth - 3
  const toolbar = (
    <Box flexDirection="row" justifyContent="space-between" paddingX={PAD}>
      <Box flexDirection="row" flexWrap="wrap" columnGap={3}>
        {buttons}
      </Box>
      {metaRoom >= 8 ? <Text dimColor wrap="truncate-end">{middle(metaText, metaRoom)}</Text> : null}
    </Box>
  )

  // 4. Body.
  let body: RenderElement
  let footer: string | undefined
  if (showingDiff) {
    if (ctx.diff && ctx.diff.hunks.trim() !== '') {
      body = <Code source={clean(ctx.diff.hunks)} format="diff" wrap="truncate-end" />
      if (ctx.diff.isTruncated) footer = '… diff truncated'
    } else {
      body = <Text dimColor>No changes against HEAD.</Text>
    }
  } else if (doc.kind === 'missing') {
    body = <Text dimColor wrap="truncate-end">{doc.error ?? 'File not found.'}</Text>
  } else if (doc.kind === 'too-large') {
    body = <Text dimColor>Too large to show ({formatSize(doc.size)}; the limit is 4.0 MB).</Text>
  } else if (doc.kind === 'binary') {
    body = <Text dimColor>Binary file, not shown.</Text>
  } else if (doc.kind === 'image') {
    if (ctx.surface === 'terminal' && 'Image' in el && doc.absPath) {
      const { Image } = el
      body = (
        <Image
          key="image"
          source={{ file: doc.absPath, format: 'png', generation: Math.floor(doc.mtimeMs) }}
          columns={Math.min(255, Math.max(1, Math.floor(columns)))}
          rows={Math.min(255, Math.max(1, Math.floor(ctx.rows) - CHROME_ROWS))}
          alt={doc.path}
        />
      )
    } else {
      body = <Text dimColor>Image preview is only available in the terminal.</Text>
    }
  } else if (!ctx.page) {
    body = <Text dimColor>Loading…</Text>
  } else if (ctx.page.text === '') {
    body = <Text dimColor>Empty file.</Text>
  } else if (isMarkdown && !view.isRaw) {
    body = <Markdown text={clean(ctx.page.text)} />
  } else {
    body = (
      <Code
        source={clean(ctx.page.text)}
        {...(isMarkdown ? { language: 'markdown', wrap: 'wrap' as const } : { path: doc.path, wrap: 'truncate-end' as const })}
        startLine={ctx.page.startLine}
      />
    )
  }

  // 5. Footer when paged.
  if (isPaged && ctx.page && !footer) {
    const first = ctx.page.startLine
    const last = first + Math.max(1, countLines(ctx.page.text)) - 1
    footer = `lines ${first}–${last} of ${doc.lineCount}`
  }

  if (ctx.body) {
    return (
      <Box flexDirection="column">
        {header}
        {breadcrumb}
        {toolbar}
        {ctx.body}
      </Box>
    )
  }

  return (
    <Box flexDirection="column">
      {header}
      {breadcrumb}

export function Tree(el: ElementTable, ctx: TreeCtx): RenderElement {
  const { Box, Text, Button } = el
  const W = Math.max(1, ctx.columns)
  const { index, view, actions } = ctx
  const isFilter = view.filter.trim() !== ''

  // 1. Header: repo folder bold, branch dim, our close button at the right (the engine's own dim
  // ✕ is drawn over the last two cells of this row, so the button stops short of them and the two
  // read as one `close ✕`). Then the counts, dim. Everything sits one cell in from the divider,
  // lined up with the tree's chevrons.
  const hasClose = W >= 28
  const left = Math.max(4, W - PAD - (hasClose ? CLOSE_RESERVE : PAD))
  let header: RenderElement
  let counts: RenderElement | undefined
  if (index) {
    const name = fit(repoName(index.root), left)
    const branchRoom = left - strWidth(name) - 3
    const branch = index.isGit && index.branch && branchRoom >= 4 ? fit(index.branch, branchRoom) : ''
    header = (
      <Text wrap="truncate-end">
        <Text bold>{name}</Text>
        {branch ? <Text dimColor>{` ⎇ ${branch}`}</Text> : null}
      </Text>
    )
    const bits = [`${n(index.files.length)}${index.isTruncated ? '+' : ''} files`]
    if (ctx.changedCount > 0) bits.push(`${n(ctx.changedCount)} changed`)
    if (ctx.touchedCount > 0) bits.push(`${n(ctx.touchedCount)} edited by Claude`)
    counts = (
      <Box paddingLeft={PAD}>
        <Text dimColor wrap="truncate-end">
          {fit(bits.join(' · '), W - PAD * 2)}
        </Text>
      </Box>
    )
  } else {
    header = <Text bold>Repo</Text>
  }
  const top = (
    <Box flexDirection="row" justifyContent="space-between" paddingLeft={PAD} paddingRight={hasClose ? 2 : PAD}>
      {header}
      {hasClose ? <Button key="close" plain role="dismiss" label="close" onPress={() => actions.close()} /> : null}
    </Box>
  )

  // 2. Finder: a search field. Boxed (three rows) when the pane is tall enough to spare them.
  const isBoxed = hasBoxedFinder(ctx.rows)
  let finder: RenderElement | undefined
  if ('Input' in el) {
    const { Input } = el
    // The field sits alone in a column box that grows, so it stretches across the whole box: a click
    // anywhere in the row focuses it (a field beside a glyph in a row box took only its text's cells).
    // autoFocus: after ctrl+x tab, a click on the pane or `/files`, the ring starts on the finder.
    const field = (
      <Input
        key="filter"
        placeholder="Filter files…"
        value={view.filter}
        autoFocus
        onInput={(value: string) => actions.setFilter(value)}
        onSubmit={() => actions.openFirstMatch()}
      />
    )
    finder = isBoxed ? (
      <Box paddingX={PAD}>
        <Box key="finder" flexGrow={1} borderStyle="round" borderDimColor paddingX={1} gap={1} hover={{ borderDimColor: false }}>
          <Text dimColor>⌕</Text>
          <Box flexGrow={1} flexDirection="column">
            {field}
          </Box>
        </Box>
      </Box>
    ) : (
      <Box paddingLeft={PAD} gap={1}>
        <Text dimColor>⌕</Text>
        <Box flexGrow={1} flexDirection="column">
          {field}
        </Box>
      </Box>
    )
  }

  // 3. Toolbar: secondary actions, dim until pointed at or focused.
  const collapseLabel = W >= 44 ? 'collapse all' : 'collapse'
  const toolbar = (
    <Box flexDirection="row" columnGap={3} flexWrap="wrap" paddingLeft={PAD}>
      <Button key="tb:refresh" plain dimColor label="refresh" onPress={() => actions.refresh()} />
      <Button key="tb:collapse" plain dimColor label={collapseLabel} onPress={() => actions.collapseAll()} />
      <Button
        key="tb:follow"
        plain
        dimColor={!view.follow}
        label={`follow ${view.follow ? 'on' : 'off'}`}
        onPress={() => actions.toggleFollow()}
      />
    </Box>
  )

  // 4. Body: rows or an empty state.
  const body: RenderElement[] = []
  const shown = ctx.rows_
  let drawn = 0
  if (!index) {
    body.push(<Text dimColor>Loading files…</Text>)
  } else if (shown.length === 0) {
    if (isFilter) {
      body.push(<Text dimColor wrap="truncate-end">{fit(`No files match "${view.filter}"`, W)}</Text>)
    } else if (index.files.length === 0) {
      body.push(<Text dimColor>No files in this repo.</Text>)
    } else {
      body.push(<Text dimColor>Nothing to show.</Text>)
    }
  } else {
    if (isFilter) {
      const matches = Math.max(ctx.total, shown.length)
      const info = `${n(matches)} match${matches === 1 ? '' : 'es'}`
      body.push(<Text dimColor>{fit(info, W)}</Text>)
    }
    let budget = ROW_CHAR_BUDGET
    for (const row of shown) {
      if (drawn >= MAX_ROWS) break
      const rendered = Row(el, ctx, row, isFilter)
      budget -= JSON.stringify(rendered).length
      if (budget < 0) break
      body.push(rendered)
      drawn++
    }
    const total = isFilter ? Math.max(ctx.total, shown.length) : shown.length
    const more = total - drawn
    if (more > 0) {
      const text = isFilter ? `… ${n(more)} more · keep typing to narrow` : `… ${n(more)} more`
      body.push(<Text dimColor>{fit(text, W)}</Text>)
    }
  }

  // 5. Hint.
  const hintFull = '↑↓ move · ⏎ open · ctrl+x tab focus'
  const hint = strWidth(hintFull) <= W ? hintFull : fit('↑↓ move · ⏎ open', W)

  if (ctx.body) {
    return (
      <Box flexDirection="column">
        {top}
        {counts}
        {finder}
        {toolbar}
        {ctx.tools && ctx.tools.length > 0 ? (
          <Box flexDirection="row" flexWrap="wrap" columnGap={2}>
            {ctx.tools}
          </Box>
        ) : null}
        {ctx.body}
      </Box>
    )
  }

  return (
    <Box flexDirection="column">
      {top}
      {counts}
      {finder}