doc-review

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const [doc, comments, threads, composer, notice, picked] = await Promise.all([
      read($, docA),
      read($, commentsA),
      read($, threadsA),
      read($, composerA),
      read($, noticeA),
      read($, askViaA),
    ])
    const columns = e.props.bodyColumns ?? e.viewport?.columns ?? 80
    lastColumns = columns
    const offset = e.props.scroll?.offset ?? 0
    const common = { doc, comments, threads, composer, notice, columns, approvePhrase, explainModel, askModel, askVia: picked ?? askModel, offset }

    if (e.surface === 'mobile') {
      const t = $.ui.resolve(e)
      return drawPane($, { ...common, t, Input: null })
    }
    const t = $.ui.resolve(e)
    return drawPane($, { ...common, t, Input: t.Input })
  })

function drawPane(
  $: EngineInterface,
  args: {
    t: Table
    Input: ElementConstructor<InputProps> | null
    doc: DocReviewDoc | null
    comments: readonly DocReviewComment[]
    threads: readonly DocReviewThread[]
    composer: DocReviewComposer
    notice: string | null
    /** Cells across the pane's body. */
    columns: number
    approvePhrase: string
    explainModel: string
    /** The configured default for side questions. */
    askModel: string
    /** Where the next side question goes: this session's pick, else askModel. */
    askVia: string
    /** The first row of the tree the pane's window shows. */
    offset: number
  },
): RenderElement {
  const { t, Input, doc, comments, threads, composer, notice } = args
  const { Box, Text, Button, Markdown } = t

  if (!doc) {
    return (
      <Box flexDirection="column">
        <Text dimColor>No document open. Type /{COMMAND} &lt;path&gt; to review a markdown file.</Text>
        <Button key="close" plain hotkey="q" label="close" onPress={() => void $.ui.close({ id: PANE })} />
      </Box>
    )
  }
  if (doc.view === 'diff') return drawDiff($, t, doc, notice)

  // With a text field the composer draws under the block; without one the
  // engine's dialog takes the text.
  const compose = (mode: 'comment' | 'ask', at?: number) => (Input ? openComposer($, mode, at) : composeViaDialog($, mode, args.askVia, at))

  const n = doc.blocks.length
  const { lo, hi } = windowOf(n, doc.cursor)
  const live = comments.filter(c => !c.isOrphan)
  const orphans = comments.filter(c => c.isOrphan)
  const changed = new Set(doc.changed)
  const matched = new Set(doc.search?.matches ?? [])
  const isFinding = composer?.mode === 'find'
  const isNarrow = args.columns < NARROW
  const gutter = isNarrow ? 2 : 3
  const roomFor = (block: DocReviewBlock) => Math.max(10, args.columns - gutter - (block.depth ?? 0) * 2)

  /**
   * A block's actions: always shown on the current block, shown on any other
   * while the pointer is on it. They sit in the blank row under the block, so
   * nothing moves. An item of a tight list has no blank row under it (the
   * next item starts there and would paint over them), so its actions sit at
   * the right end of its own last line instead, drawn over it.
   */
  const actionRow = (i: number, isCurrent: boolean, isTight: boolean) => {
    const at = doc.blocks[i]
    const place = isTight ? { bottom: 0, right: 0 } : { bottom: -1, left: gutter + (at?.depth ?? 0) * 2 }
    return (
      // Unkeyed: a key would make it a hover scope of its own, and a hidden
      // Box is never under the pointer.
      <Box
        position="absolute"
        {...place}
        flexDirection="row"
        {...(isCurrent ? {} : { display: 'none' as const, hover: { display: 'flex' as const } })}
      >
        {isTight && <Text>{'  '}</Text>}
        <Button key={`act-c:${i}`} plain dimColor label="comment" onPress={() => void compose('comment', i)} />
        <Text dimColor> · </Text>
        <Button key={`act-a:${i}`} plain dimColor label="ask" onPress={() => void compose('ask', i)} />
        <Text dimColor> · </Text>
        <Button key={`act-h:${i}`} plain dimColor label="explain" onPress={() => void explain($, args.explainModel, i)} />
      </Box>
    )
  }

  const rows: RenderElement[] = []
  for (let i = lo; i < hi; i += 1) {
    const block = doc.blocks[i]
    if (!block) continue
    const isCurrent = i === doc.cursor
    const isChanged = changed.has(i)
    const own = live.filter(c => c.anchor.blockIndex === i)
    const ownThreads = threads.filter(th => th.anchor.blockIndex === i)
    const indent = (block.depth ?? 0) * 2
    // Items of one list sit tight, as the list would.
    // The current one keeps its gap: its actions sit there.
    const isTight = block.kind === 'item' && doc.blocks[i + 1]?.kind === 'item' && !isCurrent
    const under = gutter + indent

    rows.push(
      <Box key={`blk:${i}`} flexDirection="column" marginBottom={isTight ? 0 : 1}>
        <Box key={`pre:${i}`} position="absolute" top={-BAR_ROWS} left={0} width={1} height={1} />
        <Box flexDirection="row">
          <Box width={gutter}>
            <Button
              key={`b:${i}`}
              plain
              dimColor={!isCurrent && !isChanged}
              label={isCurrent ? '▶' : isChanged ? '+' : '·'}
              hover={{ dimColor: false, bold: true }}
              // A click selects the block; on the current one (Enter after Tab, a second click) it comments.
              onPress={() => void (isCurrent ? compose('comment', i) : setCursor($, i))}
            />
          </Box>
          <Box flexDirection="column" flexGrow={1} flexShrink={1} marginLeft={indent}>
            {drawBody($, t, block, {
              room: roomFor(block),
              pan: isCurrent ? (doc.pan ?? 0) : 0,
              dim: !isCurrent && composer !== null && composer.mode !== 'find',
              isCurrent,
              ...(doc.search && matched.has(i) ? { query: doc.search.query } : {}),
            })}
          </Box>
        </Box>
        {own.map(c => (
          <Box key={`cm:${c.id}`} flexDirection="row" marginLeft={under}>
            <Text color="yellow">✎ </Text>
            <Box flexGrow={1}>
              <Text color="yellow" wrap="wrap">
                {c.text}
              </Text>
            </Box>
            <Button key={`rm:${c.id}`} plain dimColor label="✕" onPress={() => void removeComment($, c.id)} />
          </Box>
        ))}
        {ownThreads.map(th => (
          <Box key={`th:${th.id}`} flexDirection="column" marginLeft={under}>
            <Text color="cyan" wrap="wrap">
              {th.kind === 'explain' ? 'ⓘ' : '?'} {th.question}
              {th.kind === 'explain' && th.model ? ` (${th.model})` : ''}
              {th.kind === 'ask' && th.model
                ? th.alone === 'chosen'
                  ? ` (answered by ${th.model} from the document alone)`
                  : ` (answered by ${th.model} from the document alone: the conversation had no reply yet)`
                : ''}
            </Text>
            {th.status === 'pending' && <Text dimColor>{th.kind === 'explain' ? 'explaining…' : 'asking…'}</Text>}
            {th.status === 'failed' && <Text color="red">could not ask: {th.failure ?? 'unknown'}</Text>}
            {th.status === 'answered' && <Markdown text={capMarkdown(th.answer ?? '')} dimColor />}
            {th.status !== 'pending' && (
              <Box flexDirection="row" gap={1}>
                {th.kind === 'ask' && <Button key={`keep:${th.id}`} plain label="keep as comment" onPress={() => void keepAsComment($, th)} />}
                {th.kind === 'ask' && <Button key={`send:${th.id}`} plain label="send to conversation" onPress={() => void escalate($, th)} />}
                <Button key={`drop:${th.id}`} plain dimColor label="dismiss" onPress={() => void dismissThread($, th.id)} />
                {th.status === 'answered' && th.outputTokens !== undefined && (
                  <Text dimColor>
                    {th.outputTokens} out · {th.cachedTokens ?? 0} cached
                  </Text>
                )}
              </Box>
            )}
          </Box>
        ))}
        {composer && composer.mode !== 'find' && composer.blockIndex === i && Input && (
          <Box flexDirection="row" marginLeft={under} gap={1}>
            <Input

function drawDiff($: EngineInterface, t: Table, doc: DocReviewDoc, notice: string | null): RenderElement {
  const { Box, Text, Button, Code } = t
  const d = diffText(doc.baselineText, doc.text)

  return (
    <Box flexDirection="column">
      <Box flexDirection="row" gap={1}>
        <Text bold>{doc.title}</Text>
        <Box flexShrink={1}>
          <Text dimColor wrap="truncate-middle">
            {doc.path}
          </Text>
        </Box>
      </Box>
      <Text dimColor>
        diff against the version you reviewed
        {d ? ` · +${d.added} −${d.removed} lines · ${doc.changed.length} ${doc.changed.length === 1 ? 'block' : 'blocks'} changed` : ''}
        {doc.revision > 0 ? ` · revision ${doc.revision}` : ''}
      </Text>
      {notice && <Text color="green">{notice}</Text>}
      <Box flexDirection="row" flexWrap="wrap" columnGap={2} marginBottom={1}>
        <Button key="diff" plain hotkey="d" label="document" onPress={() => void toggleView($)} />
        <Button key="next-change" plain hotkey="r" label="next revised" onPress={() => void nextChange($)} />
        <Button key="reviewed" plain hotkey="v" label="mark viewed" onPress={() => void markReviewed($)} />
        <Button key="close" plain hotkey="q" label="close" onPress={() => void $.ui.close({ id: PANE })} />
      </Box>
      {!d && <Text dimColor>The two versions are too long to diff here.</Text>}
      {d && d.hunks.length === 0 && <Text dimColor>No changes since the version you reviewed.</Text>}
      {d &&
        d.hunks.slice(0, MAX_HUNKS).map((hunk, i) => (
          <Box key={`hunk:${i}`} flexDirection="column" marginBottom={1}>
            <Code source={capHunk(hunk)} format="diff" wrap="wrap" />
          </Box>
        ))}
      {d && d.hunks.length > MAX_HUNKS && <Text dimColor>… {d.hunks.length - MAX_HUNKS} more hunks not shown</Text>}
    </Box>
  )
}

function drawStickyBar(
  $: EngineInterface,
  t: Table,
  a: {
    offset: number
    columns: number
    status: string
    hasMatches: boolean
    /** The status row while finding: the match Enter goes to. */
    preview: RenderElement | null
    /** The find field, drawn in the bar while finding. */
    finder: RenderElement | null
    compose: (mode: 'comment' | 'ask') => unknown
    explain: () => void
    submitLabel: string
  },
): RenderElement {
  const { Box, Text, Button } = t
  const blank = ' '.repeat(a.columns)
  return (
    <Box key="sticky-bar" position="absolute" top={a.offset} left={0} width={a.columns} height={BAR_ROWS} flexDirection="column">
      {/* Spaces first, so nothing of the document shows between the buttons. */}
      <Box position="absolute" top={0} left={0} flexDirection="column">
        {Array.from({ length: BAR_ROWS }, (_, k) => (
          <Text key={`bar-blank:${k}`}>{blank}</Text>
        ))}
      </Box>
      {a.preview ?? (
        <Text dimColor wrap="truncate-end">
          {a.status}
        </Text>
      )}
      {a.finder ?? (
      <Box flexDirection="row" columnGap={2} overflow="hidden" height={1}>
        <Button key="bar:next" plain label="next" onPress={() => void moveCursor($, 1)} />
        <Button key="bar:prev" plain label="prev" onPress={() => void moveCursor($, -1)} />
        <Button key="bar:find" plain label="find" onPress={() => void openFind($)} />
        {a.hasMatches && <Button key="bar:find-next" plain label="next match" onPress={() => void findNext($)} />}
        {a.hasMatches && <Button key="bar:find-prev" plain label="prev match" onPress={() => void findPrev($)} />}
        <Button key="bar:comment" plain label="comment" onPress={() => void a.compose('comment')} />
        <Button key="bar:ask" plain label="ask" onPress={() => void a.compose('ask')} />
        <Button key="bar:explain" plain label="explain" onPress={a.explain} />
        <Button key="bar:submit" plain label={a.submitLabel} onPress={() => void submitReview($)} />
        <Button key="bar:top" plain label="top" onPress={() => void moveCursor($, () => 0)} />
      </Box>
      )}
      <Text dimColor wrap="truncate-end">
        {'─'.repeat(a.columns)}
      </Text>
    </Box>
  )
}