cockpit

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    // The pane paints its own ground (Julian 2026-10-04): under a `*-ansi` Claude Code theme the
    // dialog takes an ANSI grey from the terminal's scheme, and neither the rows nor the engine's
    // blue hotkeys read on it. The palette's base, filling the body; text keeps the terminal's
    // foreground. Docked the body is the screen; inline it is what the layout spares.
    const ground = { flexDirection: 'column' as const, backgroundColor: BASE, minHeight: e.props?.scroll?.bodyRows }
    const all = await stored($)

    // Only what is still on disk: a file can be deleted or moved after it was collected, and a
    // button that opens nothing reads as the mod being broken rather than as a missing file.
    // A link is never checked: there is no disk to ask.
    const checked = await Promise.all(
      all.map(async entry =>
        entry.kind === 'link' || (await $.fs.exists(entry.target).catch(() => false)) ? entry : null,
      ),
    )
    const list = checked.filter((entry): entry is Entry => entry !== null)

    // The newest entry doubles as the empty check: `noUncheckedIndexedAccess` types it undefined.
    const newest = list[list.length - 1]
    if (!newest) {
      return (
        <Box {...ground}>
          <Text>Nothing to open yet this session.</Text>
        </Box>
      )
    }
    // A page is as long as the body the surface granted, less the hint rows. Docked (fullscreen
    // from 110 columns) that is floor to ceiling; inline above the prompt it is what the layout
    // spares, which a wrapped prompt shortens. A page taller than the body made the engine scroll
    // it: the hint fell off and the arrows scrolled instead of walking.
    const body = e.props?.scroll?.bodyRows ?? Infinity
    // The Input takes a row off the page while it is up.
    // The pages are cut from `pool`: the list newest first, or the matches best first.
    const pool = filtering && query ? fuzzy(query, list) : list.slice().reverse()
    // Two hint rows only when they cost no entry; tight (inline under a long transcript) the hint is
    // one row of keys, o and f first, the walk after them, no prose (Julian 2026-10-04: the walk is
    // learned once, o and f are rarer). Hidden Buttons would lose their hotkeys, so the keys stay.
    const room = body - (filtering ? 1 : 0)
    const hintRows = room - HINT_ROWS >= Math.min(PER_PAGE, Math.max(1, pool.length)) ? HINT_ROWS : 1
    const perPage = Math.max(1, Math.min(PER_PAGE, room - hintRows))
    const pages = Math.max(1, Math.ceil(pool.length / perPage))
    page = Math.min(page, pages - 1) // a file deleted since can shorten the list under us
    const shown = pool.slice(page * perPage, (page + 1) * perPage)
    const last = shown.length - 1
    focused = Math.min(focused, Math.max(0, last)) // a shorter page than the one the ring was on
    const lastRow = (p: number) => Math.min(perPage, pool.length - p * perPage) - 1

    const startFilter = () => {
      filtering = true
      query = ''
      page = 0
      focused = 0
      $.ui.invalidate('ui.render')
      void $.ui.focus({ requestId: PANE, key: 'q' }).catch(() => null)
    }

    // j past the last row turns to the next page's first; k before the first, to the previous
    // page's last. The list is a ring (Julian, 2026-10-04): past either end it comes round, j
    // from the last entry to page 1's first row, k from the first to the last page's last.
    const down = () => (focused < last ? go($, page, focused + 1) : go($, (page + 1) % pages, 0))
    const up = () => {
      const p = focused > 0 ? page : (page - 1 + pages) % pages
      return go($, p, focused > 0 ? focused - 1 : lastRow(p))
    }
    const turn = (to: number) => () => go($, (to + pages) % pages, 0)

    // A thing that opened takes the person to another app; the pane closes behind it, so they do
    // not come back to a dialog they have to dismiss. A failed open keeps it to pick again.
    const open = (entry: Entry) => () =>
      openerFor($, entry.target)
        .then(cmd => $.process.run(cmd))
        .then(r =>
          r.exitCode === 0
            ? $.ui.close({ id: PANE })
            : $.ui.toast(`could not open ${entry.label} (exit ${r.exitCode})`),
        )
        .catch(() => $.ui.toast(`could not open ${entry.label}`))
    // `o`: the folder of the focused row — a file's parent, a folder itself; a link has none.
    const folderOfRow = () => {
      const entry = shown[focused]
      if (!entry) return
      if (entry.kind === 'link') return $.ui.toast('Links have no folder')
      const target = entry.kind === 'folder' ? entry.target : parentOf(entry.target)
      return open({ ...entry, target, label: target })()
    }

    // The field, while filtering. Its text is drawn back on every change, so a redraw (a new
    // entry arriving) does not empty it. Enter opens the best match; nothing when there is none.
    // Resolved under the surfaces that have an `Input` (mobile does not), as `Image` is below.
    let header = null
    if (filtering && (e.surface === 'terminal' || e.surface === 'desktop' || e.surface === 'vscode')) {
      const { Input } = $.ui.resolve(e)
      header = (
        <Input
          key="q"
          label="find"
          value={query}
          // Short: the hint row says the keys. A long placeholder pushed the Enter label onto a row
          // of its own, and the engine's default label `submit` named nothing this field does.
          placeholder="type to filter"
          submitLabel="open"
          autoFocus
          onInput={(value: string) => {
            query = value
            page = 0
            focused = 0
            $.ui.invalidate('ui.render')
          }}
          onSubmit={() => (pool[0] ? open(pool[0])() : undefined)}
        />
      )
    }

    let inline = null
    // The newest file only, on page 1 only, and not while filtering (the list needs the rows):
    // it is what `openPane` asked rows for. Left out when the body cannot hold it under the rows
    // and the hint: a row is worth more than a preview.
    const roomForImage = body >= shown.length + hintRows + IMAGE_ROWS + 1
    if (page === 0 && !filtering && e.surface === 'terminal' && isPng(newest.target) && roomForImage) {
      // Resolved here, not above: `Image` exists only in the terminal's element table, and
      // narrowing on e.surface is what hands it over. A module has no element globals.
      const { Image } = $.ui.resolve(e)
      const stat = await $.fs.stat(newest.target).catch(() => null)
      if (stat && stat.size <= INLINE_MAX_BYTES) {
        const file = await $.fs.read(newest.target, { as: 'bytes' }).catch(() => null)
        if (file) {
          // A fixed, small box: it is what `openPane` asks rows for, and a terminal cell is about
          // twice as tall as wide, so 3 columns a row keeps a screenshot roughly in proportion.
          const cols = Math.min(IMAGE_ROWS * 3, Math.max(10, (e.props?.bodyColumns ?? 60) - 2))
          inline = (
            <Image
              source={{ png: file.base64 }} // FsBytes is `{ base64 }`, already encoded
              columns={cols}
              rows={IMAGE_ROWS}
              // The engine draws pixels in kitty and Ghostty only; everywhere else, this.
              alt="(image preview needs kitty or Ghostty)"
            />
          )
        }
      }
    }

    if (!pool.length) {
      // A filter that matches nothing: the field stays, so the person can retype or Esc back.
      return (
        <Box {...ground}>
          {header}
          <Text>{`No match for ‹${query}›.`}</Text>
        </Box>
      )
    }

    return (
      <Box {...ground}>
        {header}
        {shown.map((entry, i) => (
          // `autoFocus?: true` is a literal-true type, so `false` is not "off", it is an
          // invalid prop — and one invalid prop refuses the WHOLE tree, not just that element.