simpane

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const seen = await read($, screen)
    const live = await read($, isLive)
    const lines = await read($, logs)

    if (e.surface === 'terminal') {
      const { Box, Button, Image, Text } = $.ui.resolve(e)
      const room = { columns: Math.max(8, e.props.bodyColumns - 1), rows: Math.max(6, (e.viewport?.rows ?? 40) - (lines === null ? 9 : 9 + PANE_LOG_LINES)) }
      const box = seen.shot === null || seen.shot.width === 0 ? null : fit(seen.shot.width, seen.shot.height, room)

      return (
        <Box flexDirection="column">
          {seen.status === 'unavailable' && <Text dimColor>simpane needs macOS with Xcode's command line tools.</Text>}
          {seen.status === 'unknown' && <Text dimColor>Looking for a booted simulator…</Text>}
          {seen.status === 'absent' && (
            <Box flexDirection="column">
              <Text dimColor>No simulator is booted.</Text>
              {seen.candidates.map((device, at) => (
                <Button
                  key={`boot-${device.udid}`}
                  hotkey={String(at + 1)}
                  plain
                  label={`Boot ${device.name} (${device.runtime})`}
                  onPress={async () => {
                    chosen.udid = device.udid
                    await simctl($, ['boot', device.udid], 120_000)
                    await simctl($, ['bootstatus', device.udid], 180_000)
                    await refresh($)
                  }}
                />
              ))}
              <Button key="refresh" hotkey="r" plain label="Look again" onPress={() => refresh($)} />
            </Box>
          )}
          {seen.status === 'ready' && (
            <Box flexDirection="column">
              <Text bold>{seen.device?.name ?? ''}</Text>
              <Text dimColor>{[seen.device?.runtime, seen.appearance, seen.textSize === '' ? '' : `text ${seen.textSize}`].filter(Boolean).join(' · ')}</Text>
              {seen.shot !== null && box !== null && (
                <Image
                  key="screen"
                  source={{ file: seen.shot.smallPath, format: 'png', generation: seen.shot.generation }}
                  columns={box.columns}
                  rows={box.rows}
                  alt={`Screenshot saved to ${seen.shot.path}`}
                />
              )}
              {seen.shot === null && <Text color="warning">The screenshot could not be taken.</Text>}
              <Text dimColor>{seen.app === null ? 'None of your own apps is running.' : `${seen.app.name} · ${seen.app.bundleId}`}</Text>
              <Box flexDirection="row" gap={2} flexWrap="wrap" marginTop={1}>
                <Button key="refresh" hotkey="r" plain label="Refresh" onPress={() => refresh($)} />
                <Button key="live" hotkey="l" plain label={live ? 'Live on' : 'Live off'} onPress={() => update($, isLive, lives => !lives)} />
                <Button
                  key="appearance"
                  hotkey="a"
                  plain
                  label={seen.appearance === 'dark' ? 'Light' : 'Dark'}
                  onPress={async () => {
                    await simctl($, ['ui', seen.device?.udid ?? 'booted', 'appearance', seen.appearance === 'dark' ? 'light' : 'dark'])
                    await refresh($)
                  }}
                />
                <Button
                  key="bigger"
                  hotkey="u"
                  plain
                  label="Text +"
                  onPress={async () => {
                    await simctl($, ['ui', seen.device?.udid ?? 'booted', 'content_size', 'increment'])
                    await refresh($)
                  }}
                />
                <Button
                  key="smaller"
                  hotkey="d"
                  plain
                  label="Text −"
                  onPress={async () => {
                    await simctl($, ['ui', seen.device?.udid ?? 'booted', 'content_size', 'decrement'])
                    await refresh($)
                  }}
                />
              </Box>
              <Box flexDirection="row" gap={2} flexWrap="wrap">
                <Button
                  key="send"
                  hotkey="s"
                  plain
                  label="Send to Claude"
                  onPress={async () => {
                    const fresh = await refresh($)

                    if (fresh.shot !== null) {
                      await $.prompt.fill({ text: `Look at the simulator screenshot at ${fresh.shot.smallPath} `, mode: 'insert' })
                    }
                  }}
                />
                <Button
                  key="logs"
                  hotkey="g"
                  plain
                  label={lines === null ? 'Logs' : 'Hide logs'}
                  onPress={async () => {
                    if (lines !== null || seen.device === null || seen.app === null) {
                      await update($, logs, () => null)
                    } else {
                      await update($, logs, () => ['Reading…'])
                      const found = await appLogs($, seen.device, seen.app, 60, null)
                      await update($, logs, () => found ?? ['The log could not be read.'])
                    }
                  }}
                />
                {seen.devices.length > 1 && (
                  <Button
                    key="device"
                    hotkey="n"
                    plain
                    label="Next device"
                    onPress={async () => {
                      const at = seen.devices.findIndex(one => one.udid === seen.device?.udid)
                      chosen.udid = seen.devices[(at + 1) % seen.devices.length]?.udid ?? null
                      await refresh($)
                    }}
                  />
                )}
              </Box>
              {lines !== null && (
                <Box flexDirection="column" marginTop={1}>
                  <Text bold>{`Logs · last minute${seen.app === null ? '' : ` · ${seen.app.name}`}`}</Text>
                  {lines.length === 0 && <Text dimColor>Nothing logged by the app.</Text>}
                  {lines.slice(-PANE_LOG_LINES).map(line => (
                    <Text wrap="truncate-end" color={/ (error|fault): /.test(line) ? 'error' : undefined}>
                      {line.split('\n')[0] ?? ''}
                    </Text>
                  ))}
                </Box>
              )}
            </Box>
          )}
        </Box>
      )
    }

    // Other surfaces draw no pictures from a file: the facts and the path stand in.
    const { Box, Text } = $.ui.resolve(e)

    return (
      <Box flexDirection="column">
        {seen.status === 'unavailable' && <Text dimColor>simpane needs macOS with Xcode's command line tools.</Text>}
        {(seen.status === 'absent' || seen.status === 'unknown') && <Text dimColor>No simulator is booted.</Text>}
        {seen.status === 'ready' && (
          <Box flexDirection="column">
            <Text bold>{seen.device?.name ?? ''}</Text>
            <Text dimColor>{[seen.device?.runtime, seen.appearance, seen.textSize === '' ? '' : `text ${seen.textSize}`].filter(Boolean).join(' · ')}</Text>
            <Text dimColor>{seen.app === null ? 'None of your own apps is running.' : `${seen.app.name} · ${seen.app.bundleId}`}</Text>
            {seen.shot !== null && <Text>{`Screenshot: ${seen.shot.path}`}</Text>}
            <Text dimColor>The live picture is drawn in a terminal that shows images (Ghostty, kitty). Ask Claude to look at the simulator from here.</Text>
          </Box>
        )}
      </Box>