timeline

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Button, Text } = $.ui.resolve(e)
    // A reload empties the module's own variables while the store keeps its
    // summaries, and a draw can be the first thing to run after one — so the
    // drawing loads them itself rather than trusting a command to have run.
    const storeKey = await loadStore($, language)
    await readMeter($)
    // The transcript is fetched only when a turn has changed it. A
    // redraw because the marker moved reuses the rows it already has, so
    // scrolling does not pull the whole session across on every step.
    let rows: Row[]
    let size: string
    if (cache === null) {
      const messages = await $.session.messages()
      if ('deny' in messages) {
        return <Text color="text" dimColor>cannot read this session</Text>
      }
      rows = rowsCached(messages)
      size = tailOf(messages)
    } else {
      rows = cache.rows
      size = cache.tail
    }
    // Read so that bumping it redraws this pane alone.
    await read($, drawAtom)
    isOpen = true
    // The maps may just have caught up with rows that reported before them.
    recompute()
    loop($)
    const nowAt = markedN
    drawnMark = nowAt
    // The pane's own body, not `e.viewport`: that is the conversation's width,
    // and sizing by it cut every line for a column twice as wide as the pane.
    // Less the pane's right pad, the card's border and its padding.
    const width = Math.max(20, (e.props.bodyColumns ?? 60) - 5)
    // What is left to write, counting a row that has only its ask: the trigger
    // below and the footer both read this, and counting only rows with nothing
    // at all meant a half-written row never asked for its other half.
    const unsummarised = rows.filter(
      r => summaries[r.key] === undefined
        || (doReplies && summaries[r.key]?.did === '' && r.body.trim() !== ''),
    ).length

    // Drawing the pane is the signal that someone is reading it, and the only
    // one that holds across a reload, a reopen and a new turn alike. The fill
    // is not awaited: the tree goes back now with the asks as written, and the
    // summaries land on the redraw its own invalidate causes. `filling` and
    // the missing count bound it — once nothing is missing, no call runs.
    if (unsummarised > 0 && !filling) {
      void runFill($, rows, storeKey, language, size, doReplies).catch(() => undefined)
    }

    // For each row, the last tool call of the rows before it: one pass.
    let lastTool: string | undefined
    const above = rows.map(r => {
      const before = lastTool
      lastTool = r.toolIds.at(-1) ?? lastTool

      return before
    })

    // Not every surface has a text field; where there is none the box is not
    // drawn and `/timeline find <words>` still searches.
    const table = $.ui.resolve(e)
    const Input = 'Input' in table ? table.Input : undefined
    const shown = isFinding && matches !== null
      ? matches.map(n => rows[n - 1]).filter((r): r is Row => r !== undefined)
      : rows
    shownOrder = shown.map(r => r.n)
    isPaneFocused = e.props.isFocused === true
    // The window is meant to stay at the head while the box is up. If the
    // engine moved it all the same (to show the ring), it is put back.
    if (isFinding && (e.props.scroll?.offset ?? 0) !== 0 && !isResetting) {
      isResetting = true
      $.clock.after(0, () => {
        void $.ui.scroll({ in: PANE, to: 'start' }).catch(() => undefined).then(() => {
          isResetting = false
        })
      })
    }
    paneRows = e.props.scroll?.bodyRows ?? paneRows
    // A card's rows: its border, the gap above it, its title and what is
    // drawn under that. The same lines the card draws below.
    heights = !isFinding ? [] : shown.map(row => {
      const summary = summaries[row.key]
      const did = !doReplies
        ? null
        : summary?.did || (summary !== undefined ? pendingOf(row, isRunning && row.n === rows.length, filling) : null)
      const errors = doReplies ? Math.min(2, row.errors.length) + (row.errors.length > 2 ? 1 : 0) : 0

      return 4
        + (did === null ? 0 : wrapCells(`  → ${did}`, width).length)
        + (doReplies && row.facts.length > 0 ? wrapCells(`  ${row.facts.join(' · ')}`, width).length : 0)
        + errors
    })
    if (isFinding) {
      // A window that grew, or cards that got shorter, can leave the first
      // card past where the last one would sit at the bottom.
      findTop = Math.min(findTop, lastTop(heights, paneRows - HEAD_ROWS))
      drawnCount = fitCount(heights, findTop, paneRows - HEAD_ROWS)
    }
    const status = isSearching
      ? 'searching…'
      : matches === null
        ? 'Enter searches by meaning'
        : matches.length === 0
          ? `nothing matches "${head(query, 24)}"`
          : `${matches.length} match${matches.length > 1 ? 'es' : ''}, best first — click one to jump to it`

    const { left, right } = meterParts(meter)
    const run = (parts: Part[], at: string) => parts.map((part, i) => (
      <Text key={`${at}${i}`} color={part.color} bold={part.bold}>{part.text}</Text>
    ))

    return (
      <Box flexDirection="column" paddingRight={1}>
        {/* How much of the context window and of the rate windows is used:
            figures only, coloured as they near the edge. */}
        {(left.length > 0 || right.length > 0) && (
          <Box flexDirection="row" justifyContent="space-between" paddingX={2}>
            <Box flexDirection="row">{run(left, 'ml')}</Box>
            <Box flexDirection="row">{run(right, 'mr')}</Box>
          </Box>
        )}
        {isFinding && Input !== undefined && (
          <Box flexDirection="column">
            <Box borderStyle="round" borderColor="claude" paddingX={1}>
              <Input
                key="find"
                label="Find"
                placeholder="describe the turn you are looking for"
                value={query}
                submitLabel="search"
                autoFocus
                onSubmit={(value: string) => {
                  void runFind($, rows, value)
                }}
              />
            </Box>
            {/* The command that closes it is the one thing here to act on, so
                it is the one thing in the accent. */}
            <Box paddingX={2}>
              <Text color="inactive">{status}</Text>
            </Box>
            {/* The way out of the results that needs no typing: back to every
                card, the box left open. A primary Button is drawn in the
                accent, `[ so ]`. The box itself shuts with the command. */}
            <Box flexDirection="row" paddingX={2} gap={1}>
              {matches !== null && (
                <Button
                  key="find-back"
                  variant="primary"
                  label="back to timeline"
                  onPress={() => {
                    void runFind($, rows, '')
                  }}
                />
              )}
              {matches !== null && <Text color="inactive">·</Text>}
              <Text color="claude" bold>/timeline find</Text>