open-tray

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const elements = $.ui.resolve(e)
    const { Box, Text, Button } = elements
    // Typing in the pane is the terminal's; elsewhere, Claude adds the items.
    const Input = 'Input' in elements ? elements.Input : null
    // Pictures are cells on the terminal alone; other surfaces get a line instead.
    const Raster = e.surface === 'terminal' && 'Raster' in elements ? elements.Raster : null
    const columns = e.props.bodyColumns
    const now = await $.clock.now()
    const r = await read($, related)
    const showing = await read($, tab)
    const rc = await read($, recaps)
    const done = await read($, work)
    const isAuto = await read($, autoRecap)
    const ls = await read($, lists)
    const lui = await read($, listsUi)
    const open = ls.all.reduce((n, l) => n + l.items.filter(it => !it.isDone).length, 0)
    const sound = await read($, playing)
    const kept = await read($, stash)
    const toReview = kept.filter(it => it.section === 'review' && !it.isReviewed).length
    // In the Stash tab, a stashed file's sound plays under its own row.
    const isPlayingStashed = showing === 'stash' && Boolean(sound && kept.some(it => it.path === sound.target))
    await read($, tick) // Redraws the player's clock each second while it plays.
    const step = rc.isWriting ? await read($, spin) : 0 // Moves the recap's bar while it is written.
    const writingFor = rc.isWriting && rc.startedAt ? `${Math.max(0, Math.round((now - rc.startedAt) / 1000))}s` : ''
    // Haiku's word that the newest recap no longer holds; nothing while one is being written.
    const behind = rc.list.length > 0 && !rc.isWriting ? (rc.staleWhy ?? '') : ''

    // Under the transcript a pane gets few rows: the header and tabs share one, and the controls come first.
    const isTight = e.props.placement === 'inline' || (e.props.scroll?.bodyRows ?? 40) < 20
    const gap = isTight ? 0 : 1
    // Keys work once the person has given the pane the keyboard (a click); until then no "1:" label promises them.
    const hot = (key: string) => (e.props.isFocused ? key : undefined)
    // "Waiting on you" is a checklist like any other, so a tick in Recap and one in Lists are the same tick.
    const waitingList = ls.all.find(l => l.title.toLowerCase() === WAITING_LIST.toLowerCase())
    const waitingItem = (text: string) => waitingList?.items.find(it => it.text.toLowerCase() === text.trim().toLowerCase())

    const title = (text: string, count?: number | string) => {
      const tail = count === undefined ? '' : ` ${count}`
      return (
        <Box flexDirection="row" marginTop={gap}>
          <Text color={THEME.grid}>{'▸ '}</Text>
          <Text bold color={THEME.chrome}>{text.toUpperCase()}</Text>
          <Text color={THEME.faint}>{`${tail} `}</Text>
          <Text color={THEME.rule}>{'─'.repeat(Math.max(0, columns - text.length - tail.length - 3))}</Text>
        </Box>
      )
    }

    // A checkbox that says who ticked it: Claude's spark in orange, the person's figure in green.
    const tickBox = (key: string, it: { isDone: boolean; doneBy: CheckItem['doneBy'] } | undefined, onPress: () => void) => {
      const by = TICKED[it?.doneBy ?? 'you']
      return (
        <Button key={key} plain onPress={onPress}>
          {' ['}
          {it?.isDone ? <Text color={by.color}>{by.mark}</Text> : ' '}
          {'] '}
        </Button>
      )
    }

    const brand = (
      <Box flexDirection="row">
        <Text color={THEME.grid}>{'▚▞ '}</Text>
        {[...NAME].map((letter, i) => (
          <Text bold color={NAME_COLORS[i % NAME_COLORS.length]}>{letter}</Text>
        ))}
      </Box>
    )
    // The area shows only as the Related heading on the Tray tab; the corner says whether the keys work.
    const chip = <Text color={THEME.faint}>{e.props.isFocused ? 'PLAYER 1 READY' : 'CTRL+X TAB FOR KEYS'}</Text>

    // RECAP's news (new, being written) goes at the end of the row, so no tab moves when it comes or goes.
    const tabs = (
      <Box flexDirection="row" marginTop={isTight ? 0 : 1}>
        <Text color={THEME.accent}>{showing === 'tray' ? '▸' : ' '}</Text>
        <Button key="tab-tray" plain hotkey={hot('1')} dimColor={showing !== 'tray'} label="TRAY   " onPress={() => void showTab($, 'tray')} />
        <Text color={THEME.accent}>{showing === 'recap' ? '▸' : ' '}</Text>
        {/* Stale: the tab's own name turns amber; the Recap tab says why. */}
        {behind && !rc.isNew ? (
          <Button key="tab-recap" plain hotkey={hot('2')} onPress={() => void showTab($, 'recap')}>
            <Text color={THEME.warn} bold={showing === 'recap'}>{'RECAP'}</Text>
            {'   '}
          </Button>
        ) : (
          <Button key="tab-recap" plain hotkey={hot('2')} dimColor={showing !== 'recap'} label="RECAP   " onPress={() => void showTab($, 'recap')} />
        )}
        <Text color={THEME.accent}>{showing === 'lists' ? '▸' : ' '}</Text>
        <Button key="tab-lists" plain hotkey={hot('3')} dimColor={showing !== 'lists'} label="LISTS" onPress={() => void showTab($, 'lists')} />
        <Text color={THEME.faint}>{open > 0 ? ` ${open} left   ` : '   '}</Text>
        <Text color={THEME.accent}>{showing === 'stash' ? '▸' : ' '}</Text>
        <Button key="tab-stash" plain hotkey={hot('4')} dimColor={showing !== 'stash'} label="STASH" onPress={() => void showTab($, 'stash')} />
        <Text color={THEME.accent}>{toReview > 0 ? ` ${toReview}${columns >= 66 ? ' to review' : ''}` : ''}</Text>
        {rc.isWriting ? (
          <Box flexDirection="row">
            <Text color={THEME.accent}>{`   ${spinner(step)}`}</Text>
            <Text color={THEME.faint}>{showing === 'recap' ? ' writing' : ` writing recap ${writingFor}`}</Text>
          </Box>
        ) : rc.isNew ? (
          <Box flexDirection="row">
            <Text color={THEME.accent}>{' ●'}</Text>
            <Text color={THEME.faint}>{' new recap'}</Text>
          </Box>
        ) : null}
      </Box>
    )

    const top = isTight ? (
      <Box flexDirection="row" justifyContent="space-between" width={columns}>
        <Box flexDirection="row">
          {brand}
          <Text>{'  '}</Text>
          {tabs}
        </Box>
        {chip}
      </Box>
    ) : (
      <Box flexDirection="column" width={columns}>
        <Box flexDirection="row" justifyContent="space-between" width={columns}>
          {brand}
          {chip}
        </Box>
        {tabs}
      </Box>
    )

    const body =
      showing === 'recap' ? drawRecap() : showing === 'lists' ? drawLists() : showing === 'stash' ? await drawStash() : await drawTray()

    return (
      <Box flexDirection="column" width={columns}>
        {top}
        {sound && !isPlayingStashed && drawPlayer(sound)}
        {body}
      </Box>
    )

    // The player card, `width` cells wide: the pane's, or a stashed file's indented spot.
    function drawPlayer(p: NonNullable<typeof sound>, width = columns) {
      const inner = Math.max(10, width - 4)
      const at = positionOf(p, now)
      const time = p.duration ? `${clockText(at)} / ${clockText(p.duration)}` : clockText(at)
      const filled = p.duration ? Math.round(inner * Math.min(1, at / p.duration)) : 0
      const isPaused = p.startedAt === null
      const fits = (seconds: number) => p.duration === null || p.duration > seconds * 2
      return (
        <Box flexDirection="column" borderStyle="double" borderColor={THEME.accent} paddingX={1} marginTop={gap} width={width}>
          <Box flexDirection="row" justifyContent="space-between" width={inner}>
            <Text bold color={THEME.chrome}>{isPaused ? 'PAUSED' : 'NOW PLAYING'}</Text>
            {/* The corner ×: stops it and puts the card away. */}
            <Box flexDirection="row">
              <Text color={THEME.sub}>{time}</Text>
              <Text>{'  '}</Text>
              <Button key="stop" plain label="×" onPress={() => void stopSound($)} />
            </Box>
          </Box>
          <Text color={KIND_COLORS.audio}>{`♪ ${clip(p.label, inner - 2)}`}</Text>
          {p.duration ? (
            <Box flexDirection="row">
              {filled > 0 && <Text color={THEME.accent}>{'█'.repeat(filled)}</Text>}