sciplot

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Image, Client } = $.ui.resolve(e) as ReturnType<typeof $.ui.resolve> & { Image?: any; Client?: any }
    const plot = await read($, last)
    const working = await read($, busy)
    const plots = (await read($, history)) ?? []
    const props = e.props as { bodyColumns?: number; placement?: 'dock' | 'inline'; scroll?: { bodyRows: number } }
    const body = props.bodyColumns ?? e.viewport?.columns ?? 80
    // Docked, the pane fills its height and the toolbar sits on the bottom row(s).
    const docked = props.placement === 'dock' && !!props.scroll?.bodyRows
    const barRows = body < 64 ? 2 : 1
    const maxRows = docked
      ? Math.max(4, props.scroll!.bodyRows - 1 - barRows - 1)
      : Math.max(6, (e.viewport?.rows ?? 40) - 6)

    if (!plot) {
      return (
        <Box flexDirection="column">
          <Text dimColor>{working ? `Rendering ${working}…` : 'No plot yet. Ask Claude to plot something.'}</Text>
        </Box>
      )
    }

    let png: string | null = null
    try {
      png = ((await $.fs.read(plot.png, { as: 'bytes' })) as { base64: string }).base64
    } catch {
      png = null
    }

    // Terminal cells are about 2.5x as tall as wide (Ghostty/kitty default fonts); 2 left a gap above and below.
    const cell = 2.5
    let columns = Math.max(10, Math.min(255, body - 1))
    let rows = Math.max(4, Math.round((columns * plot.height) / Math.max(1, plot.width) / cell))
    if (rows > maxRows) {
      rows = maxRows
      columns = Math.max(10, Math.min(columns, Math.round((rows * cell * plot.width) / Math.max(1, plot.height))))
    }

    // Plotly figures go live: a headless browser draws them and takes the pointer.
    if (live.plotId && live.plotId !== plot.id) stopLive($)
    const canLive = plot.kind === 'plotly' && !!Image && !!Client && e.surface === 'terminal'
    if (canLive && live.wanted && !live.plotId) void goLive($, plot)
    const isLive = canLive && live.plotId === plot.id
    if (isLive) {
      columns = Math.max(10, Math.min(255, body - 1))
      rows = maxRows
      live.mounted = live.frame ? { cols: columns, rows } : null
    }

    const index = plots.findIndex(p => p.id === plot.id)
    const step = async (delta: number) => {
      const list = (await read($, history)) ?? []
      const current = await read($, last)
      const target = list[list.findIndex(p => p.id === current?.id) + delta]
      if (target) await update($, last, () => target)
    }

    const exportAndReveal = async (fmt: string) => {
      const current = await read($, last)
      if (!current) return
      const done = await ensureFormats($, current, [fmt])
      if (typeof done === 'string') return void $.ui.toast(`Export failed: ${done.split('\n').pop()}`)
      await $.process.run(['open', '-R', done.files[fmt]!])
      $.ui.toast(`Saved ${done.files[fmt]}`)
    }

    return (
      <Box flexDirection="column">
        <Text bold>
          {plot.title} <Text dimColor>{index >= 0 ? `${index + 1}/${plots.length} · ` : ''}{plot.kind}{working ? ` · rendering ${working}…` : ''}</Text>
        </Text>
        {isLive ? (
          <Box flexDirection="column" width={columns} height={rows}>
            {live.frame ? (
              <Image key={LIVE_KEY} source={{ file: live.frame.file, format: 'png', generation: live.frame.generation }} columns={columns} rows={rows} alt={plot.title} />
            ) : (
              <Text dimColor>Starting the live view…</Text>
            )}
            <Box position="absolute" top={0} left={0} width={columns} height={rows}>
              <Client key={`live-${plot.id}`} module="./live.tsx" width={columns} height={rows} />
            </Box>
          </Box>
        ) : Image && png ? (
          // Keep it a direct child of an unsized column: wrapped or in a fixed-height pane it drew clipped or not at all.
          <Image key={`${plot.id}-${columns}x${rows}`} source={{ png }} columns={columns} rows={rows} alt={plot.title} />
        ) : (
          <Text dimColor>{plot.png}</Text>
        )}
        {/* Docked, a fixed-height spacer (not flexGrow in a sized column) pushes the toolbar to the bottom. */}
        {docked && (isLive || (Image && png)) && <Box height={Math.max(0, props.scroll!.bodyRows - 1 - rows - barRows)} />}
        <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
          <Button hotkey="b" onPress={() => step(-1)} dimColor={index <= 0}>←</Button>
          <Button hotkey="n" onPress={() => step(1)} dimColor={index < 0 || index >= plots.length - 1}>→</Button>
          <Button hotkey="p" onPress={() => exportAndReveal('pdf')}>PDF</Button>
          <Button hotkey="s" onPress={() => exportAndReveal('svg')}>SVG</Button>
          <Button hotkey="g" onPress={() => exportAndReveal('png')}>PNG</Button>
          <Button hotkey="d" dimColor onPress={async () => $.ui.toast(await deleteCurrent($))}>Delete</Button>
          {canLive && (
            <Button hotkey="i" onPress={async () => {
              live.wanted = !isLive
              if (isLive) stopLive($)
              $.ui.invalidate('ui.render')
            }}>{isLive ? 'Static' : 'Live'}</Button>
          )}
          {plot.kind === 'plotly' && (
            <Button hotkey="o" onPress={async () => {
              const done = await ensureFormats($, plot, ['html'])
              if (typeof done !== 'string') await $.process.run(['open', done.files.html!])
            }}>Browser</Button>
          )}
        </Box>
      </Box>
    )
  })