md

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e, next) => {
    if (e.surface === 'mobile') return next(e)
    if (e.surface === 'vscode') return next(e)
    const E = $.ui.resolve(e)
    const { Box, Text, Button, Input, Client } = E
    const doc = await read($, docAtom)
    const picker = await read($, pickerAtom)
    if (picker) {
      const cwd = await $.session.cwd()
      const label = (f: string | null) =>
        f === null ? 'Untitled draft  · unsaved' : relative(f, cwd) + (picker.files.indexOf(f) < picker.recent ? '  · recent' : '')
      const entries = [...(picker.hasDraft ? [null] : []), ...picker.files]
      const matches = entries.filter(f => fuzzy(picker.filter, label(f))).slice(0, 15)
      return (
        <Box flexDirection="column">
          <Input
            key="pick-filter"
            label="Open"
            value={picker.filter}
            placeholder="type to filter, or a path"
            submitLabel="open"
            autoFocus
            onInput={v => void update($, pickerAtom, p => p && { ...p, filter: v })}
            onSubmit={v => void (matches.length ? openPicked($, matches[0] ?? null) : newFile($, v))}
          />
          <Button
            key="pick-new"
            label={picker.filter.trim() ? `+ New file ${markdownName(picker.filter)}` : '+ New file'}
            plain
            onPress={() => void newFile($, picker.filter)}
          />
          {matches.map((f, i) => (
            <Button
              key={'pick-' + i}
              label={label(f)}
              plain
              onPress={() => void openPicked($, f)}
            />
          ))}
          {matches.length === 0 && <Text dimColor>No markdown files match. Enter creates {markdownName(picker.filter)}.</Text>}
          <Button
            key="pick-cancel"
            label="cancel"
            plain
            dimColor
            onPress={() => void (async () => {
              await update($, pickerAtom, () => null)
              if (!(await read($, docAtom))) await $.ui.close({ id: PANE })
            })()}
          />
        </Box>
      )
    }
    if (!doc) return <Text dimColor>No file open. Run /md to pick one.</Text>

    const comments = await read($, commentsAtom)
    const cursor = await read($, cursorAtom)
    const col = await read($, colAtom)
    const mark = await read($, markAtom)
    const mode = await read($, modeAtom)
    const draft = await read($, draftAtom)
    const writing = await read($, writingAtom)
    const reader = await read($, readerAtom)
    const changed = new Set(await read($, changedAtom))
    const cwd = await $.session.cwd()
    const total = doc.lines.length
    const sel = ordered(mark, { line: cursor, col })
    const excerpt = sel ? textBetween(doc.lines, sel[0], sel[1]) : null
    const short = (t: string, n: number) => (t.length > n ? t.slice(0, n - 1).replace(/\s+/g, ' ') + '…' : t.replace(/\s+/g, ' '))
    const open = comments.filter(c => c.status !== 'resolved')
    const here = comments.filter(c => c.status !== 'resolved' && c.start <= cursor && cursor <= c.end)
    const suggested = (await read($, suggestionsAtom)).flatMap(s => {
      const span = locate(doc.lines, s)
      return span ? [{ s, span }] : []
    })
    const suggestedHere = suggested.filter(({ span }) => span[0].line <= cursor && cursor <= span[1].line)
    const focus = await read($, focusAtom)
    const pixels = await pixelsAvailable($)
    const words = countWords(doc.lines.join('\n'))
    const bodyRows = e.props.scroll.bodyRows || 20
    const page = Math.max(5, bodyRows - 8)

    const move = (to: number) => placeCaret($, { line: Math.max(1, Math.min(total, to)), col: 0 }, false)
    // The toolbar's prompts type into the pane's Input, never a draft
    const setMode = async (m: Mode) => {
      await update($, draftAtom, () => null)
      await update($, modeAtom, () => m)
    }
    const nextComment = () => {
      const after = open.map(c => c.start).filter(s => s > cursor).sort((a, b) => a - b)
      const first = open.map(c => c.start).sort((a, b) => a - b)
      return move(after[0] ?? first[0] ?? cursor)
    }

    const key = (k: string, label: string, onPress: () => unknown) => (
      <Button key={'k-' + k} hotkey={k} label={label} plain dimColor onPress={() => void onPress()} />
    )

    const header = (
      <Box flexDirection="row" columnGap={2}>
        <Text bold wrap="truncate-start">{doc.path ? relative(doc.path, cwd) : docName(null)}</Text>
        <Text dimColor>
          {excerpt ? `“${short(excerpt, 24)}” · ${countWords(excerpt)} of ${words} words` : `${cursor}:${col + 1} · ${words} words`} ·{' '}
          {open.length} open
          {changed.size > 0 ? ` · ${changed.size} changed` : ''}
          {suggested.length > 0 ? ` · ${suggested.length} suggested` : ''}
          {doc.path === null ? (writing ? ' · ✎ Claude is writing…' : ' · unsaved, /md save <path>') : ''}
        </Text>
      </Box>
    )

    const toolbar = (
      <Box flexDirection="column">
        <Box flexDirection="row" columnGap={2}>
          {key('j', '↓', () => move(cursor + 1))}
          {key('k', '↑', () => move(cursor - 1))}
          {key('f', 'pg↓', () => move(cursor + page))}
          {key('b', 'pg↑', () => move(cursor - page))}
          {key('v', mark ? 'clear' : 'select', () => update($, markAtom, m => (m ? null : { line: cursor, col })))}
          {key('o', 'copy', () => copyOut($))}
          {key('i', 'image', () => pasteImage($))}
          {key('z', focus ? 'unfocus' : 'focus', async () => {
            await update($, focusAtom, v => !v)
            await keepVisible($)
          })}
          {key('n', 'next', nextComment)}
          {key('r', 'read', async () => {
            const blocks = blocksOf(doc.lines)
            await update($, readTopAtom, () => blocks[blockAt(blocks, cursor)]?.start ?? 1)
            await update($, readerAtom, () => true)
          })}
        </Box>
        <Box flexDirection="row" columnGap={2}>
          {key('c', 'comment', () => setMode('comment'))}
          {key('a', 'ask', () => setMode('ask'))}
          {key('x', 'send all', async () => {
            if (open.length === 0) return $.ui.toast('No open comments to send.')
            void $.prompt.submit({ text: reviewPrompt(doc.path, doc.lines, open), asUser: true })
            $.ui.toast(`Sent ${open.length} comment(s) to Claude.`)
          })}
          {key('s', 'resolve', () =>
            saveComments($, comments.map(c => (here.some(h => h.id === c.id) ? { ...c, status: 'resolved' } : c))),
          )}
          {key('u', 'undo', () => undo($))}
          {key('q', 'close', () => $.ui.close({ id: PANE }))}
        </Box>
      </Box>
    )

    const prompts = {
      comment: { label: excerpt ? `Note on “${short(excerpt, 22)}”` : `Comment on line ${cursor}`, submit: 'save' },
      ask: { label: excerpt ? `Ask about “${short(excerpt, 22)}”` : `Ask Claude about line ${cursor}`, submit: 'send' },
    }
    const active = mode === 'review' ? null : prompts[mode]
    const input =
      active &&
      (draft !== null ? (
        <Text key={'draft-' + mode} wrap="truncate-start">
          <Text bold>{active.label}: </Text>
          {draft}

function drawPreview(E: PaneElements, key: string, p: Preview, alt: string) {
  const { Image, Raster } = E as unknown as {
    Image: (props: Record<string, unknown>) => ReturnType<PaneElements['Text']>
    Raster: (props: Record<string, unknown>) => ReturnType<PaneElements['Text']>
  }
  return p.kind === 'pixels'
    ? <Image key={key} source={{ file: p.file, format: 'png', generation: p.generation }} columns={p.columns} rows={p.rows} alt={alt || 'image'} />
    : <Raster key={key} columns={p.columns} rows={p.rows} cells={p.cells} />
}