file-explorer

  on('ui.render', { component: 'Pane', requestId: EXPLORER }, async ($, e) => {
    const els = $.ui.resolve(e)
    const { Box, Text } = els
    const Input = e.surface === 'mobile' ? undefined : $.ui.resolve(e).Input
    const width = Math.max(20, e.props.bodyColumns)
    const rows = Math.max(8, e.props.scroll.bodyRows)
    layout.isSplit = width >= SPLIT_MIN_COLUMNS
    if (!layout.isSplit) return drawSidebar($, els, Input, width, undefined)

    const sidebar = clamp(Math.floor(width * 0.32), 26, 44)
    layout.sidebarColumns = sidebar
    return (
      <Box flexDirection="row">
        {await drawSidebar($, els, Input, sidebar, rows)}
        <Box width={1} marginRight={1}>
          <Text dimColor>{Array.from({ length: rows }, () => '│').join('\n')}</Text>
        </Box>
        {await drawPreview($, els, width - sidebar - 2, rows, false, e.surface)}
      </Box>
    )
  })

async function drawSidebar(
  $: EngineInterface,
  els: Elements,
  Input: InputElement,
  width: number,
  rows: number | undefined,
): Promise<RenderElement> {
  const { Box, Text, Button } = els
  const dir = await read($, root)
  const current = await read($, view)
  const list = await read($, changes)
  const edited = new Set(await read($, touched))
  const chosen = await read($, selected)
  const against = await read($, base)

  let lines: { key: string; node: () => RenderElement }[] = []
  const isHidingIgnored = await read($, hideIgnored)
  // The tabs and the list's scroll Buttons, measured and packed into rows
  // that fit the sidebar: a Button pushed off the edge loses its hotkey.
  const isRoomy = width >= 44
  type Tab = { key: string; cells: number; draw: () => RenderElement }
  const tab = (key: ExplorerView, label: string, hotkey: string): Tab => ({
    key,
    cells: buttonCells(label, true),
    draw: () => (
      <Button key={`tab:${key}`} label={label} plain hotkey={hotkey} dimColor={current === key ? undefined : true}
        onPress={async () => {
          await update($, view, () => key)
          // The search tab is for typing: its field takes the focus, and only then.
          if (key === 'search') await focusOn($, 'search-input')
        }} />
    ),
  })
  const tabItems: Tab[] = [
    tab('files', 'Files', 'f'),
    tab('changes', `${isRoomy ? 'Changes' : 'Chg'} ${list.length}`, 'c'),
    tab('history', isRoomy ? 'History' : 'Log', 'h'),
    tab('search', isRoomy ? 'Search' : 'Find', 's'),
    tab('outline', isRoomy ? 'Outline' : 'Out', 't'),
    {
      key: 'ignored',
      cells: buttonCells('⊘', true),
      draw: () => (
        <Button key="ignored" label="⊘" plain hotkey="g" dimColor={isHidingIgnored ? undefined : true}
          onPress={() => update($, hideIgnored, now => !now)} />
      ),
    },
    {
      key: 'help',
      cells: buttonCells('?', true),
      draw: () => <Button key="help" label="?" plain hotkey="i" onPress={() => toggleHelp($)} />,
    },
  ]
  // Always drawn in the split view, dim when the list fits: these sit
  // before the search field, and a control appearing or vanishing there as
  // results change moved the focus off the field mid-typing.
  if (rows !== undefined) {
    tabItems.push({
      key: 'list:up',
      cells: buttonCells('▲', false),
      draw: () => (
        <Button key="list:up" label="▲" plain dimColor={isOver ? undefined : true}
          onPress={() => scroll(-Math.max(1, room - 2))} />
      ),
    })
    tabItems.push({
      key: 'list:down',
      cells: buttonCells('▼', false),
      draw: () => (
        <Button key="list:down" label="▼" plain dimColor={isOver ? undefined : true}
          onPress={() => scroll(Math.max(1, room - 2))} />
      ),
    })
  }
  const tabRows = packRows(tabItems, Math.max(8, width))
  let fixed = 1 + tabRows.length
  const extra: RenderElement[] = []

  if (current === 'search') {
    const found = await read($, search)
    fixed += 3
    if (Input === undefined) extra.push(<Text dimColor>Search needs a surface with text input.</Text>)
    if (found.mode === 'files') {
      lines = found.files.map(path => {
        const icon = iconFor(baseName(path), false, false, layout.icons)
        const room = width - 2 - iconWidth(icon, layout.icons)
        const label = fit(baseName(path), room)
        const rest = room - label.length - 1
        return {
          key: path,
          node: () => (
            <Box key={`line:${path}`} flexDirection="row">
              <Text color="blue">{path === chosen ? '▌' : ' '}</Text>
              {icon.glyph !== '' && <Text color={icon.color}>{icon.glyph}</Text>}
              <Button key={`found:${path}`} label={label} plain onPress={() => openFound($, path)} />
              {parentOf(path) !== '' && rest > 3 && <Text dimColor> {fit(parentOf(path), rest)}</Text>}
            </Box>
          ),
        }
      })
    } else {
      let lastPath = ''
      const pattern = compileQuery(found.query, found)
      const counts = new Map<string, number>()
      for (const hit of found.hits) counts.set(hit.path, (counts.get(hit.path) ?? 0) + 1)
      for (const hit of found.hits) {
        if (hit.path !== lastPath) {
          lastPath = hit.path
          const icon = iconFor(baseName(hit.path), false, false, layout.icons)
          const count = ` ${counts.get(hit.path) ?? 0}`
          const room = width - 1 - iconWidth(icon, layout.icons) - count.length
          lines.push({
            key: `file:${hit.path}`,
            node: () => (
              <Box key={`hits:${hit.path}`} flexDirection="row">
                <Text color="blue">{hit.path === chosen ? '▌' : ' '}</Text>
                {icon.glyph !== '' && <Text color={icon.color}>{icon.glyph}</Text>}
                <Button key={`hitfile:${hit.path}`} label={fit(hit.path, room)} plain onPress={() => openHit($, hit)} />
                <Box flexGrow={1} />
                <Text dimColor>{count}</Text>
              </Box>
            ),
          })
        }
        const number = String(hit.line)
        const room = width - 4 - number.length
        lines.push({
          key: `${hit.path}:${hit.line}:${hit.column}`,
          node: () => {
            const piece = excerpt(hit.text, matchSpan(hit.text, pattern), room)
            return (
            <Box key={`hitline:${hit.path}:${hit.line}:${hit.column}`} flexDirection="row">
              <Text>{'   '}</Text>
              <Button key={`hit:${hit.path}:${hit.line}:${hit.column}`} label={number} plain dimColor onPress={() => openHit($, hit)} />
              <Text> {piece.before}</Text>
              <Text color="black" backgroundColor="yellow">{piece.hit}</Text>
              <Text>{piece.after}</Text>
            </Box>
            )
          },
        })
      }
    }
  } else if (current === 'history') {
    const narrowed = await read($, historyOf)
    const ofFile = narrowed === '' ? [] : await read($, fileHistory)
    const commits: (ExplorerCommit & { path?: string })[] = narrowed === '' ? await read($, history) : ofFile
    if (narrowed !== '') {
      extra.push(
        <Box key="history:of" flexDirection="row">
          <Text color="blue">{fit(`⌚ ${narrowed}`, Math.max(4, width - 6))}</Text>
          <Box flexGrow={1} />
          <Button key="history:all" label="✕" plain onPress={() => update($, historyOf, () => '')} />
        </Box>,
      )
    }
    if (commits.length === 0) extra.push(<Text dimColor>No commits.</Text>)
    lines = commits.map(commit => {
      const room = width - commit.short.length - 2
      const subject = fit(commit.subject, room)

async function drawSearchControls(
  $: EngineInterface,
  els: Elements,
  Input: InputElement,
  width: number,
): Promise<RenderElement> {
  const { Box, Text, Button } = els
  const found = await read($, search)
  const isText = found.mode === 'text'
  const setMode = (mode: 'files' | 'text') => async () => {
    await update($, search, now => ({ ...now, mode }))
    const now = await read($, search)
    if (mode === 'files') await searchFiles($, now.query)
    else if (now.hits.length === 0) await searchText($, now.query)
  }
  return (
    <Box flexDirection="column">
      <Box flexDirection="row" gap={1}>
        <Button key="search:files" label="Name" plain dimColor={isText ? true : undefined} onPress={setMode('files')} />
        <Button key="search:text" label="Text" plain dimColor={isText ? undefined : true} onPress={setMode('text')} />
        {isText && (
          <Button key="search:case" label="Aa" plain dimColor={found.isCaseSensitive ? undefined : true}
            onPress={() => toggleSearchFlag($, 'isCaseSensitive')} />
        )}
        {isText && (
          <Button key="search:regex" label=".*" plain dimColor={found.isRegex ? undefined : true}
            onPress={() => toggleSearchFlag($, 'isRegex')} />
        )}
      </Box>
      {Input !== undefined && (
        <Input
          key="search-input"
          placeholder={isText ? 'text in files (Enter)' : 'file name'}
          onInput={async (value: string) => {
            if (isText) await update($, search, now => ({ ...now, query: value }))
            else await searchFiles($, value)
            // Keep typing in the field however much the results moved around it.
            await $.ui.focus({ requestId: EXPLORER, key: 'search-input' }).catch(() => undefined)
          }}
          onSubmit={async (value: string) => {
            if (isText) {
              await searchText($, value)
              const first = (await read($, search)).hits[0]
              if (first !== undefined) await focusOn($, `hit:${first.path}:${first.line}:${first.column}`)
              return
            }
            await searchFiles($, value)
            const first = (await read($, search)).files[0]
            if (first !== undefined) await openFound($, first)
          }}
        />
      )}
      <Text dimColor>{fit(found.note || (isText ? 'ripgrep, ignore files honoured' : 'fuzzy, as you type'), width)}</Text>
    </Box>
  )
}

async function drawPreview(
  $: EngineInterface,
  els: Elements,
  width: number,
  rows: number | undefined,
  isOwnPane: boolean,
  surface: RenderSurface,
): Promise<RenderElement> {
  const { Box, Text, Button, Code, Markdown } = els
  const shown = await read($, preview)
  if (shown === null) {
    return (
      <Box flexDirection="column" flexGrow={1}>
        <Text dimColor>Select a file in the explorer.</Text>
      </Box>
    )
  }
  const list = await read($, changes)
  const against = await read($, base)
  const at = list.findIndex(one => one.path === shown.path)
  const change = list[at]
  const verb = against.head === undefined ? 'vs' : 'in'
  const step = (by: number) => {
    const target = at < 0 ? list[0] : list[(at + by + list.length) % list.length]
    if (target !== undefined) void showPath($, target.path, { mode: 'diff' })
  }

  // Each hunk is a label row and its lines; the file is its lines.
  const hunks = shown.mode === 'diff' ? splitHunks(shown.diff) : []
  const isSource = shown.mode === 'file' || shown.mode === 'rendered'
  const fileLines = isSource && shown.text !== '' ? shown.text.replace(/\n$/, '').split('\n') : []
  const hunkRows = hunks.map(hunk => hunk.body.replace(/\n$/, '').split('\n').length)
  // A data file: each table or tree row one terminal row, cut, never wrapped.
  const parsed = shown.mode === 'data' && shown.text !== '' ? dataFor(shown) : undefined
  const tree = parsed?.kind === 'tree' ? await read($, dataView) : undefined
  const nodes = parsed?.kind === 'tree' && tree !== undefined
    ? jsonRows(parsed.root, new Set(tree.path === shown.path ? tree.toggled : []), 2, MAX_DATA_ROWS)
    : []
  const pick = tree !== undefined && tree.path === shown.path ? tree.pick : ''
  const dataTotal = parsed === undefined ? 0 : parsed.kind === 'table' ? parsed.lines.length : parsed.kind === 'tree' ? nodes.length : 1
  const total = shown.mode === 'data' ? dataTotal : isSource ? fileLines.length : hunkRows.reduce((sum, n) => sum + n, 0)
  const blamed = await read($, blame)
  const blameOf = blamed !== null && blamed.path === shown.path && shown.mode === 'file' ? blamed : undefined
  // Blame lines up beside the source one row a line: no wrapping under it.
  const isWrapped = (await read($, wrapLines)) && blameOf === undefined
  const blameCells = blameOf === undefined ? 0 : width >= 70 ? 24 : 8
  const isTable = parsed?.kind === 'table'
  const shift = isWrapped && !isTable ? 0 : await read($, sideways)
  const isMd = isMarkdown(shown.path)
  const isDataFile = isData(shown.path)
  const lineRoomEstimate = Math.max(10, width - String(Math.max(total, 1)).length * (shown.mode === 'diff' ? 2 : 1) - 6)
  const tableWidest = parsed?.kind === 'table' ? widest(parsed.lines.map(one => one.text)) : 0
  const canShiftEstimate =
    (isTable && tableWidest > width - 2) ||
    (!isWrapped &&
      (shown.mode === 'file' || shown.mode === 'diff') &&
      widest(isSource ? fileLines : hunks.map(hunk => hunk.body).join('\n').split('\n')) > lineRoomEstimate)

  // The toolbar, each Button with the cells it draws in, packed into rows
  // that fit: a row that overflowed dropped its last Buttons, hotkeys and all.
  type Tool = { key: string; cells: number; draw: () => RenderElement }
  const tool = (key: string, label: string, hotkey: string | undefined, draw: () => RenderElement): Tool => ({
    key,
    cells: buttonCells(label, hotkey !== undefined),
    draw,
  })
  const tools: Tool[] = []
  // Placeholders for closures defined once the window is known.
  const late: { scroll: (by: number) => unknown; slide: (by: number) => unknown; isOver: boolean; room: number; shift: number } = {
    scroll: () => undefined,
    slide: () => undefined,
    isOver: false,
    room: 1,
    shift,
  }
  if (shown.isOnDisk && isMd) {
    tools.push(tool('mode:rendered', 'Preview', 'm', () => (
      <Button key="mode:rendered" label="Preview" plain hotkey="m" dimColor={shown.mode === 'rendered' ? undefined : true}
        onPress={() => showPath($, shown.path, { mode: 'rendered' })} />
    )))
  }
  if (shown.isOnDisk && isDataFile) {
    const label = isDelimited(shown.path) ? 'Table' : 'Tree'
    tools.push(tool('mode:data', label, 'm', () => (
      <Button key="mode:data" label={label} plain hotkey="m" dimColor={shown.mode === 'data' ? undefined : true}
        onPress={() => showPath($, shown.path, { mode: 'data' })} />
    )))
  }
  if (shown.isOnDisk && (isMd || isDataFile || shown.isChanged)) {
    const label = isMd || isDataFile ? 'Source' : 'File'
    tools.push(tool('mode:file', label, 'o', () => (
      <Button key="mode:file" label={label} plain hotkey="o" dimColor={shown.mode === 'file' ? undefined : true}
        onPress={() => showPath($, shown.path, { mode: 'file' })} />
    )))
  }
  if (shown.isChanged) {
    tools.push(tool('mode:diff', 'Diff', 'd', () => (
      <Button key="mode:diff" label="Diff" plain hotkey="d" dimColor={shown.mode === 'diff' ? undefined : true}
        onPress={() => showPath($, shown.path, { mode: 'diff' })} />
    )))
  }
  // Always drawn, dim when there is nowhere to go, so the toolbar's
  // Buttons never shift under the focus as the content changes.
  tools.push(tool('up', '▲', 'k', () => (
    <Button key="up" label="▲" plain hotkey="k" dimColor={late.isOver ? undefined : true}
      onPress={() => late.scroll(-Math.max(1, Math.floor(late.room / 2)))} />
  )))
  tools.push(tool('down', '▼', 'j', () => (
    <Button key="down" label="▼" plain hotkey="j" dimColor={late.isOver ? undefined : true}
      onPress={() => late.scroll(Math.max(1, Math.floor(late.room / 2)))} />
  )))
  if (list.length > 0) {
    tools.push(tool('prev', '‹', 'p', () => <Button key="prev" label="‹" plain hotkey="p" onPress={() => step(-1)} />))
    tools.push(tool('next', '›', 'n', () => <Button key="next" label="›" plain hotkey="n" onPress={() => step(1)} />))
  }
  tools.push(tool('wrap', '↩', 'w', () => (
    <Button key="wrap" label="↩" plain hotkey="w" dimColor={isWrapped ? undefined : true}
      onPress={() => update($, wrapLines, now => !now)} />
  )))
  if (canShiftEstimate) {
    tools.push(tool('left', '◀', undefined, () => (
      <Button key="left" label="◀" plain dimColor={late.shift === 0 ? true : undefined} onPress={() => late.slide(-1)} />
    )))
    tools.push(tool('right', '▶', undefined, () => <Button key="right" label="▶" plain onPress={() => late.slide(1)} />))
  }
  if (shown.isHelp !== true) {
    tools.push(tool('quote', '❝', 'q', () => <Button key="quote" label="❝" plain hotkey="q" onPress={() => quoteSelection($, shown.path)} />))
    tools.push(tool('ref', '#', 'r', () => <Button key="ref" label="#" plain hotkey="r" onPress={() => referenceLines($, shown)} />))
    tools.push(tool('copy', '⧉', 'y', () => (
      <Button key="copy" label="⧉" plain hotkey="y" onPress={press => copyPath($, shown.path, press.surface)} />
    )))
    const isPinned = (await read($, pins)).includes(shown.path)
    tools.push(tool('pin', '★', 'b', () => (
      <Button key="pin" label={isPinned ? '★' : '☆'} plain hotkey="b" onPress={() => togglePin($, shown.path)} />
    )))
    const isRepo = (await read($, gitError)) !== 'Not a git repository'
    if (isRepo) {
      tools.push(tool('log', 'Log', 'l', () => <Button key="log" label="Log" plain hotkey="l" onPress={() => showFileLog($, shown.path)} />))
    }
    if (isRepo && shown.isOnDisk) {
      tools.push(tool('blame', 'Blame', 'a', () => (
        <Button key="blame" label="Blame" plain hotkey="a" dimColor={blameOf === undefined ? true : undefined}
          onPress={() => toggleBlame($, shown.path)} />
      )))
    }
  }
  if (isOwnPane) {
    tools.push(tool('mention', '@', undefined, () => <Button key="mention" label="@" plain onPress={() => mention($, shown.path)} />))
    tools.push(tool('close', '✕', undefined, () => (
      <Button key="close" label="✕" plain role="dismiss" onPress={() => $.ui.close({ id: PREVIEW })} />
    )))
  }
  const toolRows = packRows(tools, Math.max(8, width - 1))
  const hasStatus = shown.isChanged || total > 0 || shown.size !== undefined
  const nowMs = await clockNow($)
  const ageText = shown.mtimeMs === undefined ? '' : formatAge(shown.mtimeMs, nowMs)
  const fixed = 1 + toolRows.length + (hasStatus ? 1 : 0) + (shown.note !== '' ? 1 : 0) + (pick !== '' ? 1 : 0)
  const room = rows === undefined ? total : Math.max(1, rows - fixed)

  // The rows each unit takes: a line wrapped into the room beside its gutter