whiteboard

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const els = $.ui.resolve(e)
    const { Box, Text, Button, Markdown } = els
    const board = (await read($, history)) ?? EMPTY
    const entry = current(board)
    if (!entry) {
      return (
        <Box flexDirection="column">
          <Text dimColor>{EMPTY_HINT}</Text>
        </Box>
      )
    }

    const language = languageOf(entry)
    const isTerminal = e.surface === 'terminal'
    // The terminal's table carries an Svg that draws nothing there: show the source instead.
    const Svg = !isTerminal && 'Svg' in els ? els.Svg : undefined
    const Image = isTerminal && 'Image' in els ? els.Image : undefined
    const Input = 'Input' in els ? els.Input : undefined
    const isMissing = !(await $.fs.exists(entry.svgPath))
    const isTooLarge = entry.svgBytes > MAX_INLINE_SVG
    const svg = Svg && !isMissing && !isTooLarge ? await $.fs.read(entry.svgPath).catch(() => undefined) : undefined
    const png = Image && entry.pngPath && entry.pngWidth && entry.pngHeight && (await isKitty($)) && (await $.fs.exists(entry.pngPath))
      ? { path: entry.pngPath, width: entry.pngWidth, height: entry.pngHeight }
      : undefined
    const columns = Math.max(10, Math.min(e.props.bodyColumns, 255))
    const view = sourceView(entry.source, language)
    const version = versionInfo(board, entry)
    const isConfirmingShare = (await read($, shareConfirm)) === entry.id
    const note = isMissing
      ? 'Render missing (its files were cleaned up).'
      : Svg && isTooLarge
        ? 'Too large to show inline: press Open to view it.'
        : ''

    return (
      <Box flexDirection="column" gap={1}>
        <Box flexDirection="row" gap={1} flexWrap="wrap">
          <Button key="prev" hotkey="h" plain label="◀" dimColor={board.index <= 0}
            onPress={() => changeBoard($, x => step(x, -1))} />
          <Text>{`${board.index + 1}/${board.entries.length}`}</Text>
          <Button key="next" hotkey="l" plain label="▶" dimColor={board.index >= board.entries.length - 1}
            onPress={() => changeBoard($, x => step(x, 1))} />
          <Text bold>{entry.title}</Text>
          {version.of > 1 ? (
            <Box flexDirection="row" gap={1}>
              <Button key="olderVersion" plain label="‹" dimColor={version.older === undefined}
                onPress={() => (version.older === undefined ? undefined : changeBoard($, x => jumpTo(x, version.older!)))} />
              <Text dimColor>{`v${version.n}/${version.of}`}</Text>
              <Button key="newerVersion" plain label="›" dimColor={version.newer === undefined}
                onPress={() => (version.newer === undefined ? undefined : changeBoard($, x => jumpTo(x, version.newer!)))} />
            </Box>
          ) : null}
        </Box>
        <Box flexDirection="row" gap={1} flexWrap="wrap">
          <Button key="export" label="Export" onPress={async () => $.ui.toast(await exportEntry($, entry).catch((err: unknown) => `Export failed: ${errorText(err)}`))} />
          <Button key="copy" label="Copy" onPress={async p => $.ui.toast(await copyText($, entry.source, p.surface, 'Copied the diagram source.'))} />
          <Button key="copyMd" label="Copy MD" onPress={async p => $.ui.toast(await copyText($, fenceBlock(language, entry.source), p.surface,
            language === 'mermaid' ? 'Copied as a Markdown block: it renders in GitHub, GitLab and Notion.' : 'Copied as a Markdown block.'))} />
          <Button key="share" label="Share" onPress={() => update($, shareConfirm, () => entry.id)} />
          <Button key="open" hotkey="o" label="Open" onPress={async () => {
            const problem = await openEntry($, entry)
            if (problem) $.ui.toast(problem)
          }} />
        </Box>
        {isConfirmingShare ? (
          <Box flexDirection="row" gap={1} flexWrap="wrap">
            <Text>{`Upload '${entry.title}' as a secret GitHub gist? Anyone with the link can see it.`}</Text>
            <Button key="shareYes" variant="primary" label="Upload" onPress={async p => {
              await update($, shareConfirm, () => null)
              $.ui.toast(await shareEntry($, entry, p.surface).catch((err: unknown) => `Share failed: ${errorText(err)}`))
            }} />
            <Button key="shareNo" label="Cancel" onPress={() => update($, shareConfirm, () => null)} />
          </Box>
        ) : null}
        {note ? (
          <Box flexDirection="row" gap={1}>
            <Text dimColor>{note}</Text>
            {isMissing ? <Button key="rerender" label="Re-render" onPress={() => rerender($, entry, settings)} /> : null}
          </Box>
        ) : null}
        {Svg && svg !== undefined
          ? <Svg source={svg} alt={entry.title} />
          : Image && png
            ? <Image key="diagram" source={{ file: png.path, format: 'png' }} columns={columns} rows={imageRows(png.width, png.height, columns)} alt={entry.title} />
            : (
              <Box flexDirection="column">
                <Markdown text={view.text} />
                {view.isTruncated ? <Text dimColor>Source truncated: use Copy or Export for the full text.</Text> : null}
              </Box>
            )}
        {Input ? (
          <Input key="revise" placeholder="Ask Claude to change this diagram…" submitLabel="send"
            onSubmit={value => askToRevise($, entry, value)} />
        ) : null}
      </Box>
    )
  })