xcode-mods

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || e.surface === 'mobile') return next(e)
    const t = await read($, target)
    const b = await read($, build)
    const err = await read($, error)
    const ts = await read($, tests)
    const r = await read($, run)
    // Still connecting: awaitServer reports if it never does.
    if (!t && (!err || isNotConnected(err))) return next(e)
    const { Box, Text, Select, Button } = $.ui.resolve(e)
    const now = await $.clock.now()
    const errors = b.issues.filter(i => i.severity === 'error').length
    const warnings = b.issues.length - errors
    const failedTests = ts.tests.filter(x => x.state === 'failed').length
    const act = activity(b, ts, r, now)
    const openTab = (v: XcodeTab) => async () => {
      await $.ui.open({ id: PANE, title: 'Xcode' })
      await selectTab($, v)
    }

    return (
      <Box flexDirection="row" gap={1}>
        <Text dimColor></Text>
        {err && <Text color="red">{err}</Text>}
        {t && (
          <Select
            key="scheme"
            value={t.scheme}
            options={(t.schemes.length ? t.schemes : [t.scheme ?? '—']).map(s => ({ value: s }))}
            onSelect={(v: string) => void switchTo($, 'XcodeSwitchScheme', { workspaceIdentifier: t.workspace, schemeName: v })}
          />
        )}
        {t && <Text dimColor>▸</Text>}
        {t && (
          <Select
            key="destination"
            value={t.destination}
            options={(t.destinations.length ? t.destinations : [t.destination ?? '—']).map(d => ({ value: d }))}
            onSelect={(v: string) =>
              void switchTo($, 'XcodeSwitchRunDestination', { workspaceIdentifier: t.workspace, displayTitle: v })
            }
          />
        )}
        {act && <Text dimColor>│</Text>}
        {act && <Text color={act.color} dimColor={act.color === undefined}>{act.text}</Text>}
        {(errors > 0 || warnings > 0 || failedTests > 0) && <Text dimColor>│</Text>}
        {errors > 0 && <Button key="band-errors" plain label={`⛔${errors}`} onPress={openTab('build')} />}
        {warnings > 0 && <Button key="band-warnings" plain label={`⚠${warnings}`} onPress={openTab('build')} />}
        {failedTests > 0 && <Button key="band-tests" plain label={`✗${failedTests}`} onPress={openTab('tests')} />}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const p = await read($, preview)
    const columns = Math.max(10, e.props.bodyColumns - 2)
    const rows = Math.max(6, (e.viewport?.rows ?? 40) - 9)

    const snap = p.history[p.index]
    const status = p.rendering ? (
      <Text color="yellow">◐ Rendering {p.rendering.split('/').at(-1)}…</Text>
    ) : null
    if (!snap) {
      return (
        <Box flexDirection="column">
          {status ?? <Text dimColor>No preview yet. /preview [file.swift]</Text>}
          {p.error && <Text color="red">{p.error}</Text>}
        </Box>
      )
    }
    const caption = (
      <Text dimColor wrap="truncate-end">
        {snap.name}{snap.device ? ` · ${snap.device}` : ''} · {p.index + 1}/{p.history.length}
      </Text>
    )
    const controls = (
      // Two rows, not flexWrap: wrapped rows lose mouse hit-testing.
      <Box flexDirection="column">
        <Box flexDirection="row" gap={1}>
          {snap.source && <Button key="rerender" label="↻ Re-render (r)" hotkey="r" variant="primary" onPress={() => void renderPreview($, snap.source!)} />}
          <Button key="ask" label="✦ Ask Claude (x)" hotkey="x" onPress={() => void askAboutSnapshot($, snap)} />
        </Box>
        <Box flexDirection="row" gap={1}>
          <Button key="prev" label="◀ (h)" hotkey="h" onPress={() => void update($, preview, (v): CanvasPreview => ({ ...v, index: Math.max(0, v.index - 1) }))} />
          <Button key="next" label="▶ (l)" hotkey="l" onPress={() => void update($, preview, (v): CanvasPreview => ({ ...v, index: Math.min(v.history.length - 1, v.index + 1) }))} />
          <Button key="open" label="Open (o)" hotkey="o" onPress={() => void $.process.run(['open', snap.path])} />
        </Box>
      </Box>
    )

    let image
    if (e.surface === 'terminal') {
      const { Image } = $.ui.resolve(e)
      const box = fitImage(snap.width, snap.height, columns, rows)
      image = (
        <Image key="snapshot" source={{ file: snap.path, format: 'png', generation: p.generation * 100 + p.index }}
          columns={box.columns} rows={box.rows} alt={`${snap.name} preview (needs kitty/Ghostty): ${snap.path}`} />
      )
    } else if (e.surface !== 'mobile' && snap.jpeg) {
      const { Svg } = $.ui.resolve(e)
      const width = DESKTOP_WIDTH
      const height = snap.width > 0 ? Math.round((width * snap.height) / snap.width) : Math.round(width * 2)
      const svg =
        `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">` +
        `<image href="data:image/jpeg;base64,${snap.jpeg}" width="${width}" height="${height}"/></svg>`
      image = <Svg source={svg} alt={`${snap.name} preview`} width={width} height={height} />
    } else {
      image = <Text dimColor>{snap.path}</Text>
    }

    return (
      <Box flexDirection="column">
        {caption}
        {controls}
        {status}
        {p.error && <Text color="red">{p.error}</Text>}
        {image}
      </Box>
    )
  })