sleight

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const els = $.ui.resolve(e)
    const { Box, Text, Button } = els
    paneSurface = e.surface
    paneColumns = Math.max(8, Math.min(120, e.props.bodyColumns ?? 48))
    // The rows the surface gave the pane: about a third of the terminal inline,
    // its full height docked. A picture sized to more pushes the buttons and
    // log out of view.
    paneRows = Math.max(10, Math.min(40, e.props.scroll?.bodyRows ?? Math.floor((e.viewport?.rows ?? 30) / 2)))

    const [entries, shot, status, isStopped] = await Promise.all([read($, log), read($, frame), read($, view), read($, stopped)])

    const picture = (() => {
      if (!shot) return <Text dimColor>No picture yet. It appears after Claude uses an app, or press Refresh.</Text>
      if (e.surface === 'terminal' && 'Raster' in els && shot.cells) {
        const { Raster } = els as any
        return <Raster key="frame" columns={shot.columns} rows={shot.rows} cells={shot.cells} />
      }
      if ('Svg' in els && shot.image) {
        const { Svg } = els as any
        const w = 320
        const h = Math.round((shot.height / shot.width) * w)
        const source =
          `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">` +
          `<image href="data:${shot.image.mime};base64,${shot.image.base64}" width="${w}" height="${h}"/></svg>`
        return <Svg source={source} alt={`Screenshot of ${shot.app}`} width={w} height={h} />
      }
      return <Text dimColor>{`${shot.app}: picture not shown on this surface. Press Refresh.`}</Text>
    })()

    const statusLine =
      status.kind === 'snapshotting' ? `Refreshing ${status.app}…`
      : status.kind === 'error' ? `Couldn't refresh: ${status.message}`
      : shot ? `${shot.app} at ${shot.at}`
      : ''
    // Size the log to the rows the pane shows, not the whole terminal: picture,
    // status line, buttons and the "Actions" heading take the rest.
    const bodyRows = e.props.scroll?.bodyRows ?? e.viewport?.rows ?? 30
    const room = Math.max(3, bodyRows - (shot?.rows ?? 1) - 4)
    const mark = { running: '…', done: '✓', error: '✗', refused: '⊘' } as const

    return (
      <Box flexDirection="column">
        {picture}
        <Text dimColor>{isStopped ? 'Stopped until your next message.' : statusLine}</Text>
        <Box flexDirection="row">
          <Button
            key="refresh"
            label={turnRunning ? 'Refresh (after this turn)' : 'Refresh'}
            hotkey="r"
            onPress={() => {
              if (turnRunning || !lastApp) return
              const app = lastApp
              void snapshot($, app).then(() => endEngineTurn($, 'Stop'))
            }}
          />
          <Button
            key="stop"
            label="Stop"
            hotkey="s"
            onPress={() => {
              void update($, stopped, () => true)
              void endEngineTurn($, 'Interrupt')
              $.ui.status('sleight · stopped')
            }}
          />
        </Box>
        <Text bold>Actions</Text>
        {entries.length === 0 && <Text dimColor>None yet.</Text>}
        {/* Newest first, so the latest action stays visible however short the pane is. */}
        {entries.slice(-room).reverse().map(entry => (
          <Text dimColor={entry.status === 'done'} wrap="truncate-end">
            {`${mark[entry.status]} ${entry.at} ${entry.app ? `${entry.app}: ` : ''}${entry.title}`}
          </Text>
        ))}
      </Box>
    )
  })