canvas

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Markdown } = $.ui.resolve(e)
    const list = await read($, entries)
    const pos = await read($, cursor)
    const index = Math.min(Math.max(0, pos ?? list.length - 1), list.length - 1)
    const entry = list[index]
    const isFull = (e.surface === 'terminal' ? glyphMode : 'full') === 'full'
    if (entry === undefined) {
      return (
        <Box flexDirection="column">
          <Text dimColor>Nothing on the canvas yet. Claude draws here with show_svg and shows documents with show_markdown.</Text>
          <Box marginTop={1}>
            <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
          </Box>
        </Box>
      )
    }

    let body
    if (entry.kind === 'markdown') {
      body = <Markdown text={entry.source} />
    } else if (e.surface === 'terminal') {
      const labels = svgLabels(entry.source)
      body = (
        <Box flexDirection="column">
          <Text>{entry.caption ?? entry.title}</Text>
          {labels !== '' && <Text dimColor>Labels: {labels}</Text>}
          <Text color="yellow">
            {isFull ? '▢' : '□'} SVG drawing ({fmtChars(entry.source.length)} chars): open the desktop app to see this drawing.
          </Text>
        </Box>
      )
    } else {
      const { Svg } = $.ui.resolve(e)
      body = (
        <Box flexDirection="column">
          <Svg source={entry.source} alt={entry.caption ?? entry.title} isInteractive />
          {entry.caption !== undefined && <Text dimColor>{entry.caption}</Text>}
        </Box>
      )
    }

    const isFirst = index === 0
    const isLast = index === list.length - 1
    return (
      <Box flexDirection="column">
        <Text wrap="wrap">
          <Text bold>{entry.title}</Text>
          <Text dimColor>
            {'  '}
            {index + 1}/{list.length} · {clock(entry.at)}
          </Text>
        </Text>
        <Box marginTop={1} flexDirection="column">
          {body}
        </Box>
        <Box marginTop={1} gap={1}>
          <Button key="prev" hotkey="p" label={isFull ? '◀' : '◄'} dimColor={isFirst} onPress={() => void step($, -1)} />
          <Button key="next" hotkey="n" label={isFull ? '▶' : '►'} dimColor={isLast} onPress={() => void step($, 1)} />
          <Button key="copy" hotkey="c" label="Copy source" onPress={press => void copySource($, press)} />
          <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
        </Box>
      </Box>
    )
  })