review-pane

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const elements = $.ui.resolve(e)
    const { Box, Text, Button } = elements
    const Input = 'Input' in elements ? elements.Input : undefined
    const Code = 'Code' in elements ? elements.Code : undefined
    const Markdown = 'Markdown' in elements ? elements.Markdown : undefined
    const Client = 'Client' in elements ? elements.Client : undefined
    const highlight = (await read($, isHighlighted)) && Code !== undefined
    const stored = await read($, lsp)
    // A card kept from an older version of the pane has another shape.
    const card = stored && typeof stored.symbol === 'object' ? stored : null
    const contextMenu = await read($, menu)
    const box = await read($, composer)
    const list = await read($, files)
    const drafts = await read($, comments)
    const root = await read($, cwd)
    const running = await read($, isTurnRunning)
    const width = Math.max(20, e.props.bodyColumns ?? e.viewport?.columns ?? 80)

    if (list.length === 0) {
      return (
        <Box flexDirection="column">
          <Text dimColor>No file changes in this conversation yet.</Text>
          <Text dimColor>Edits Claude makes with Edit/Write show up here.</Text>
        </Box>
      )
    }

    const c = clampCursor(await read($, cursor), list)
    const file = list[c.file]!
    const allRows = rowsOf(file)
    const rows = allRows.slice(0, MAX_ROWS)
    const [lo, hi] = selectedRange(c)
    const isRange = c.anchor !== null
    const fileDrafts = drafts.filter(d => d.path === file.path)
    const gutter = String(Math.max(1, ...rows.map(r => (r.kind === 'hunk' ? 0 : (r.newNo ?? r.oldNo ?? 0))))).length
    const target = describeLines(rows.slice(lo, hi + 1))
    const keySymbol = await cursorSymbol($)

    const fileList: FileListProps = {
      selected: c.file,
      isRunning: running,
      files: list.map((f): FileEntry => {
        const { added, removed } = countChanges(rowsOf(f))
        const shown = relative(f.path, root)
        const cut = shown.lastIndexOf('/') + 1
        return {
          status: f.before === null ? 'A' : f.after === null ? 'D' : 'M',
          dir: shown.slice(0, cut),
          name: shown.slice(cut),
          added,
          removed,
          comments: drafts.filter(d => d.path === f.path).length,
        }
      }),
    }

    const fileButtons = list.map((f, i) => {
      const { added, removed } = countChanges(rowsOf(f))
      const status = f.before === null ? 'A' : f.after === null ? 'D' : 'M'
      const count = drafts.filter(d => d.path === f.path).length
      const label = `${i === c.file ? '▸' : ' '} ${status} ${relative(f.path, root)}  +${added} -${removed}${count ? `  ✎${count}` : ''}`
      return (
        <Button
          key={`file-${i}`}
          plain
          dimColor={i !== c.file}
          label={label.length > width ? `…${label.slice(label.length - width + 1)}` : label}
          onPress={() => selectFile($, i)}
        />
      )
    })

    // ── What sits under a row: its comments, the comment box, a card, a menu.
    const inline = new Map<number, RenderElement[]>()
    const place = (row: number, element: RenderElement) => inline.set(row, [...(inline.get(row) ?? []), element])
    const unplaced: ReviewComment[] = []

    const sendLabel =
      drafts.length === 1 ? '➤ Send comment to Claude' : `➤ Send all ${drafts.length} comments to Claude`
    const editingId = await read($, editing)
    const draftCard = (d: ReviewComment): RenderElement =>
      editingId === d.id && Input ? (
        <Box key={`draft-${d.id}`} flexDirection="column" borderStyle="round" borderColor="blue" paddingX={1}>
          <Text color="blue" bold>{`✎ Editing the comment on ${d.lines}`}</Text>
          <Input
            key={`edit-${d.id}`}
            autoFocus
            submitLabel="save"
            value={editText}
            onInput={(text: string) => {
              editText = text
            }}
            onSubmit={(text: string) => saveEdit($, d.id, text)}
          />
          <Box flexDirection="row" gap={1}>
            <Button key={`save-${d.id}`} variant="primary" label="Save" onPress={() => saveEdit($, d.id, editText)} />
            <Button key={`cancel-${d.id}`} label="Cancel" onPress={() => stopEdit($, d.id)} />
          </Box>
        </Box>
      ) : (
        <Box key={`draft-${d.id}`} flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1}>
          <Text wrap="wrap">
            <Text color="yellow" bold>{`✎ ${d.lines}  `}</Text>
            {d.text}
          </Text>
          <Box flexDirection="row" gap={2}>
            {/* Sends every draft, on every file, as one message. */}
            <Button key={`send-${d.id}`} plain label={sendLabel} onPress={() => sendComments($)} />
            <Button key={`edit-btn-${d.id}`} plain dimColor label="Edit" onPress={() => startEdit($, d.id)} />
            <Button key={`drop-${d.id}`} plain dimColor label="Delete" onPress={() => deleteComment($, d.id)} />
          </Box>
        </Box>
      )
    for (const d of fileDrafts) {
      const at = commentRow(d, rows)
      if (at === undefined) unplaced.push(d)
      else place(at, draftCard(d))
    }

    if (box && Input && rows[box.hi]) {
      place(
        box.hi,
        <Box key="composer" flexDirection="column" borderStyle="round" borderColor="blue" paddingX={1}>
          <Text color="blue" bold>{`✎ Comment on ${describeLines(rows.slice(box.lo, box.hi + 1))}`}</Text>
          <Input
            key="comment"
            autoFocus
            placeholder="Write a comment for Claude, Enter to add"
            submitLabel="add"
            value={composerText}
            onInput={(text: string) => {
              composerText = text
            }}
            onSubmit={(text: string) => addComment($, text)}
          />
          <Box flexDirection="row" gap={1}>
            <Button key="composer-add" variant="primary" label="Add comment" onPress={() => addComment($, composerText)} />
            <Button
              key="composer-cancel"
              label="Cancel"
              onPress={() => closeComposer($, box.hi)}
            />
          </Box>
        </Box>,
      )
    }

    if (card && rows[card.symbol.row]) {
      place(
        card.symbol.row,
        <Box key="card" flexDirection="column" borderStyle="round" borderColor={card.isError ? 'red' : 'cyan'} paddingX={1}>
          <Box flexDirection="row">
            <Box flexGrow={1}>
              <Text bold color="cyan">{`${LSP_LABELS[card.operation]} · ${card.symbol.name}`}</Text>
            </Box>
            <Button key="lsp-close" plain dimColor label="✕" onPress={() => update($, lsp, () => null)} />
          </Box>
          {card.isBusy ? (
            <Text dimColor>Looking it up…</Text>