parked

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e, next) => {
    // The thread needs a text field, which the mobile surface does not draw.
    if (e.surface === 'mobile') {
      return next(e)
    }

    const table = $.ui.resolve(e)
    const { Box, Button, Input, Text } = table
    // The keyboard view is drawn only where the surface has Client.
    const Client = (await read($, lab)) && 'Client' in table ? table.Client : undefined
    const waiting = await read($, pending)
    const list = await read($, items)
    const openId = await read($, selected)
    const now = await $.clock.now()
    // What is drawn is narrower than the pane by the padding at each side.
    const columns = Math.max(30, (e.props.bodyColumns ?? e.viewport?.columns ?? 60) - 2 * PAD)
    const rule = '─'.repeat(columns)

    const open = list.filter(one => one.status === 'open')
    // Those work is blocked on come first, as `orderOf` has them.
    const asked = open.filter(one => one.kind === 'needs-you')
    const needs = [
      ...asked.filter(one => one.isBlocking === true),
      ...asked.filter(one => one.isBlocking !== true),
    ]
    const toneOf = (one: ParkedItem) => (one.isBlocking === true ? 'error' : 'warning')
    const glyphOf = (one: ParkedItem) => (one.isBlocking === true ? ICON.blocking : ICON.needs)
    const isAnswering = await read($, answering)
    const fyi = open.filter(one => one.kind === 'fyi')
    const done = list.filter(one => one.status === 'done').slice(-10).reverse()
    // The order the list draws in, which Next and Prev walk.
    const order = orderOf(list)
    const item = order.find(one => one.id === openId)
    // A row of the pane's own buttons, one per letter. Claude Code presses one
    // when its letter is typed while the pane has the keyboard (ctrl+x tab),
    // with no click; the press is handed to the keyboard region as that key.
    const legend = (keys: readonly (readonly [string, string])[]) => (
      <Box columnGap={2}>
        {keys.map(([hot, means]) => (
          <Button
            key={`key-${hot}`}
            plain
            dimColor
            hotkey={hot}
            label={means}
            onPress={async () => {
              // While the composer is in use a letter is text for it, never a
              // shortcut: the press means the text field did not get the key.
              if (await read($, typing)) {
                await update($, draft, text => `${text}${hot}`)
              } else {
                await update($, nudge, last => ({ key: hot, n: last.n + 1 }))
              }
            }}
          />
        ))}
      </Box>
    )

    const go = async (id: number) => {
      await update($, back, () => 0)
      await update($, top, () => 0)
      await update($, selected, () => id)
    }

    if (item !== undefined) {
      const at = order.indexOf(item)
      const before = order[at - 1]
      const after = order[at + 1]
      const isOpen = item.status === 'open'
      const thread = item.thread ?? []
      const isWaiting = waiting.includes(item.id)
      const tone = !isOpen ? 'success' : item.kind === 'fyi' ? 'cyan' : toneOf(item)
      const label = !isOpen
        ? `${ICON.done} DONE`
        : item.kind === 'fyi'
          ? `${ICON.fyi} FYI`
          : item.isBlocking === true
            ? `${ICON.blocking} NEEDS ATTENTION · BLOCKING`
            : `${ICON.needs} NEEDS ATTENTION`
      const canAccept = isOpen && item.preferred !== undefined

      // Every row is counted so the tree fits the pane's window exactly: the
      // header, the ticket and the composer stay put, and only the two regions
      // move. Fixed rows: status, title, meta, buttons, rule; then rule and
      // thread heading; then the bordered composer (three rows) and the hint.
      const bodyRows = Math.max(16, e.props.scroll.bodyRows) - 1
      // The note is part of the ticket's own rows, not a row above them.
      const noteRows = 0
      const doneRows = item.resolution !== undefined ? 1 : 0
      // The action buttons wrap in a narrow pane; count the rows they take.
      const actions = [
        canAccept ? 'a: Accept' : '',
        isOpen ? 'd: Done' : 'r: Reopen',
        isOpen ? 'w: Answer' : '',
        (item.refs ?? []).length > 0 ? 'g: Open' : '',
        after !== undefined ? 'n: Next' : '',
        before !== undefined ? 'p: Prev' : '',
        thread.some(one => one.role === 'agent') ? 's: Send' : '',
        'b: Back',
      ].filter(Boolean)
      let buttonRows = 1
      let used = 0

      for (const action of actions) {
        // A button draws as `[ label ]`, with one column between neighbours.
        const width = action.length + 4

        if (used > 0 && used + 1 + width > columns) {
          buttonRows += 1
          used = width
        } else {
          used += (used > 0 ? 1 : 0) + width
        }
      }

      // The keyboard view has six rows beneath its region (actions, composer,
      // send, letter keys), one more than the classic view counts with one
      // button row.
      if (Client !== undefined) {
        buttonRows = 3
      }

      const room = Math.max(6, bodyRows - (4 + buttonRows + noteRows + doneRows + 2 + 4))
      const ticket = ticketLines(item, columns)
      const ticketRows = Math.min(ticket.length, Math.max(3, Math.floor(room * 0.4)))
      const threadRows = Math.max(3, room - ticketRows)
      const talk = threadLines(thread, columns)
      const maxTop = Math.max(0, ticket.length - ticketRows)
      const maxBack = Math.max(0, talk.length - threadRows)
      const topAt = Math.min(await read($, top), maxTop)
      const backAt = Math.min(await read($, back), maxBack)
      const end = talk.length - backAt
      const shown = talk.slice(Math.max(0, end - threadRows), end)
      const ticketStart = 4 + buttonRows + noteRows + doneRows
      layout = { ticketStart, ticketEnd: ticketStart + ticketRows, maxTop, maxBack }

      const more = (above: number, below: number) =>
        [above > 0 ? `↑${above}` : '', below > 0 ? `↓${below}` : ''].filter(Boolean).join(' ')

      // Where the surface has Client, the whole item is one region that owns
      // the keyboard once clicked: ↑ and ↓ move between the tickets, the
      // actions, the composer and Send, and ← and → act on the level in focus.
      // What it posts is answered by the `ui.message` hook.
      if (Client !== undefined) {
        const inner = 5 + noteRows + doneRows
        layout = { ticketStart: inner, ticketEnd: inner + ticketRows, maxTop, maxBack }
        const isTyping = await read($, typing)
        const typed = await read($, draft)

        return (
          <Box flexDirection="column" paddingX={PAD}>
            <Client
              key="detail"
              module="./detail.tsx"
              height={bodyRows - 5}
              props={{
                nudge: await read($, nudge),
                isTyping,
                typingAt: await read($, typingAt),