clauderipple 0.8.10 → 0.9.0

package/dist/mod/hooks/ui/settings.tsx

@@ -0,0 +1,376 @@
+// Quick settings in the band. Each control applies immediately; the router dashboard owns
+// the full settings page. Setup reuses the judge and keep-warm controls below.
+//
+// The terminal draws 리플이's column (parts.tsx `speak`): one row per setting, its options as ●/○
+// words, then the way out to the dashboard. The desktop draws a capsule of the deep (kit.tsx): 리플이
+// at the head saying in one line what the settings do right now, the two ways out (all settings,
+// close) as drawn buttons at the top right, and four tiles, each a setting with its own picture of
+// how it stands and its control right there, so nothing is a tab away.
+
+import { t } from '../i18n'
+import type { RenderNode } from 'claude-code'
+
+import type { Settings } from '../../types'
+import { CELL_PX, INK, MUTE, SUB, TILE_PX, TONE, tileArt } from './art'
+import type { TileArt } from './art'
+import { capsule, pill, pic, ripple, segmented, slider, toggle, well } from './kit'
+import { action, actions, canDraw, dismiss, segmented as textSegmented, speak, toggle as textToggle } from './parts'
+import type { Els } from './parts'
+import { chOf, displayWidth, textTone } from './theme'
+import type { Frame, SettingsActions, SettingsView } from './view'
+import { isRich } from './view'
+
+/** Every name a row of quick settings or setup shows: the name column is the widest of them. */
+const ROW_NAMES = ['settings.effortAuto', 'settings.lean', 'settings.judge', 'settings.key', 'settings.keepWarm', 'settings.workers', 'settings.mode', 'band.effort', 'band.cache',
+  'workers.rung.light', 'workers.rung.standard', 'workers.rung.hard', 'workers.rung.plan'] as const
+
+/** The name column's width in cells: snug to this language's names, so controls sit close to them. */
+function nameCells(frame: Frame): number {
+  const names = ROW_NAMES.map(key => t(frame.lang, key))
+  return isRich(frame) ? Math.ceil(Math.max(...names.map(chOf))) + 1 : Math.max(...names.map(displayWidth)) + 1
+}
+
+/** A labelled row: name column, the control, an optional quiet hint. */
+export function row(el: Els, frame: Frame, key: string, label: string, control: RenderNode, hint?: string): RenderNode {
+  const { Box, Text } = el
+  return (
+    <Box key={'row-' + key} flexDirection="row" alignItems="center" columnGap={2} flexWrap="wrap">
+      <Box width={nameCells(frame)} flexShrink={0}>
+        <Text dimColor>{label}</Text>
+      </Box>
+      {control}
+      {hint ? <Text dimColor wrap="wrap">{hint}</Text> : null}
+    </Box>
+  )
+}
+
+// ---- The lean: five stops between cheaper and smarter -------------------------------------------
+
+const BIAS: readonly Settings['bias'][] = [-2, -1, 0, 1, 2]
+
+/** Cheaper ○ ○ ● ○ ○ Smarter on the editor; the terminal names the stops (−2 … +2). */
+function biasStops(el: Els, frame: Frame, bias: Settings['bias'], onPick: (bias: Settings['bias']) => void): RenderNode {
+  const { Box, Button, Text } = el
+  const name = (b: number) => (b > 0 ? '+' + b : b < 0 ? '−' + -b : '0')
+  if (!isRich(frame)) return textSegmented(el, frame, 'bias', BIAS.map(b => ({ value: String(b), label: name(b) })), String(bias), picked => onPick(Number(picked) as Settings['bias']))
+  return (
+    <Box flexDirection="row" alignItems="center" columnGap={1}>
+      <Text dimColor>{t(frame.lang, 'settings.cheaper')}</Text>
+      <Box flexDirection="row">
+        {BIAS.map(b => (b === bias ? <Button key={'bias-' + b} plain label="●" onPress={() => onPick(b)} /> : <Button key={'bias-' + b} plain dimColor label="○" onPress={() => onPick(b)} />))}
+      </Box>
+      <Text dimColor>{t(frame.lang, 'settings.smarter')}</Text>
+    </Box>
+  )
+}
+
+// ---- The terminal's rows (setup on the terminal lends them too) ---------------------------------
+
+export function effortRows(el: Els, frame: Frame, d: Settings, a: SettingsActions): RenderNode[] {
+  const out = [row(el, frame, 'auto', t(frame.lang, 'settings.effortAuto'), textToggle(el, frame, 'set-auto', d.effortAuto ? t(frame.lang, 'band.on') : t(frame.lang, 'band.off'), d.effortAuto, () => a.patch({ effortAuto: !d.effortAuto })), t(frame.lang, 'settings.autoHint'))]
+  if (d.effortAuto) out.push(row(el, frame, 'bias', t(frame.lang, 'settings.lean'), biasStops(el, frame, d.bias, bias => a.patch({ bias })), t(frame.lang, 'settings.leanHint')))
+  return out
+}
+
+/** The Jev key field and its test, when TypeSafe's Jev judges and no key is known. */
+function needsKey(view: SettingsView): boolean {
+  return view.settings.judge === 'jev' && view.settings.jevSource === 'typesafe' && !['env', 'file', 'pasted'].includes(view.jev.source ?? '')
+}
+
+export function judgeRows(el: Els, frame: Frame, view: SettingsView, a: SettingsActions): RenderNode[] {
+  const d = view.settings
+  const tone = textTone(frame.appearance)
+  const { Box, Text } = el
+  const out: RenderNode[] = [
+    row(
+      el,
+      frame,
+      'judge',
+      t(frame.lang, 'settings.judge'),
+      textSegmented(
+        el,
+        frame,
+        'judge',
+        [
+          { value: 'haiku', label: t(frame.lang, 'settings.haiku') },
+          { value: 'jev', label: t(frame.lang, 'settings.jev') },
+          { value: 'model', label: t(frame.lang, 'settings.routerModel') },
+        ] as const,
+        d.judge,
+        judge => a.patch({ judge }),
+      ),
+    ),
+  ]
+  if (needsKey(view)) {
+    const jev = view.jev
+    const placeholder = t(frame.lang, 'settings.keyPaste')
+    const field = 'Input' in el ? (
+      <el.Input key="jev-key" placeholder={placeholder} value="" submitLabel={t(frame.lang, 'settings.saveKey')} onSubmit={(key: string) => a.jevKey(key)} />
+    ) : (
+      <Text dimColor>{placeholder}</Text>
+    )
+    const result =
+      jev.test.state === 'testing' ? (
+        <Text dimColor>{t(frame.lang, 'settings.testing')}</Text>
+      ) : jev.test.state === 'ok' ? (
+        <Text color={tone.ok} wrap="wrap">{'✓ ' + (jev.test.message ?? t(frame.lang, 'settings.keyWorks'))}</Text>
+      ) : jev.test.state === 'fail' ? (
+        <Text color={tone.bad} wrap="wrap">{'✕ ' + (jev.test.message ?? t(frame.lang, 'settings.keyRejected'))}</Text>
+      ) : null
+    out.push(
+      row(
+        el,
+        frame,
+        'jev-key',
+        t(frame.lang, 'settings.key'),
+        <Box flexDirection="row" flexWrap="wrap" alignItems="center" columnGap={1} rowGap={1}>
+          {field}
+          {action(el, frame, 'jev-test', t(frame.lang, 'settings.test'), a.testJev, { hotkey: 't' })}
+          {result}
+        </Box>,
+      ),
+    )
+  }
+  return out
+}
+
+/**
+ * The active saved worker set: Base followed by user-named modes. Rungs are edited on the dashboard.
+ */
+export function modeRows(el: Els, frame: Frame, d: Settings, a: SettingsActions): RenderNode[] {
+  const { Text } = el
+  const items = modeItems(frame, d)
+  const current = d.activeMode ?? ''
+  const control = 'Select' in el && a.setMode
+    ? <el.Select key="mode" options={items} value={current} onSelect={(value: string) => a.setMode!(value)} />
+    : <Text>{items.find(item => item.value === current)?.label ?? '—'}</Text>
+  return [row(el, frame, 'mode', t(frame.lang, 'settings.mode'), control)]
+}
+
+export function keepWarmRow(el: Els, frame: Frame, d: Settings, a: SettingsActions): RenderNode {
+  return row(el, frame, 'warm', t(frame.lang, 'settings.keepWarm'), textToggle(el, frame, 'set-warm', d.keepWarm ? t(frame.lang, 'band.on') : t(frame.lang, 'band.off'), d.keepWarm, () => a.patch({ keepWarm: !d.keepWarm })), t(frame.lang, 'settings.keepWarmHint'))
+}
+
+function modeItems(frame: Frame, d: Settings): { value: string; label: string }[] {
+  return [{ value: '', label: t(frame.lang, 'settings.modeNone') }, ...d.modes.map(m => ({ value: m.id, label: m.name }))]
+}
+
+function judgeName(frame: Frame, judge: Settings['judge']): string {
+  return t(frame.lang, judge === 'haiku' ? 'settings.haiku' : judge === 'jev' ? 'settings.jev' : 'settings.routerModel')
+}
+
+// ---- Desktop: the deep's tiles -------------------------------------------------------------------
+//
+// A tile is a setting: its picture (art.ts `tileArt`, how the setting stands, alive while on), its
+// name in bright ink with its switch at the right when it has one, one line on what it does, then
+// its control. The pictures replace the old line icons, which said nothing at 15 px.
+
+/** A tile's edge and glass: light on the water, brighter under the pointer. */
+const TILE_EDGE = 'rgba(255,255,255,0.1)'
+const TILE_EDGE_HOT = 'rgba(255,255,255,0.26)'
+const TILE_GLASS = 'rgba(255,255,255,0.045)'
+const TILE_GLASS_HOT = 'rgba(255,255,255,0.075)'
+/** The least a tile takes, in cells: two side by side from about 84 cells, one a row below. */
+const TILE_MIN = 40
+
+/** Tiles side by side: two when the frame holds two at their least, else one a row. */
+function tilesAcross(frame: Frame): 1 | 2 {
+  return frame.columns >= 2 * TILE_MIN + 6 ? 2 : 1
+}
+
+/** Cells a tile's words and controls have beside its picture, about. */
+function tileInner(frame: Frame): number {
+  const tile = tilesAcross(frame) === 2 ? Math.floor((frame.columns - 5) / 2) : frame.columns - 4
+  return Math.max(18, tile - 3 - Math.ceil(TILE_PX / CELL_PX) - 3)
+}
+
+type Tile = { id: string; art: TileArt; title: string; head?: RenderNode; line: string; body: RenderNode[] }
+
+function tile(el: Els, x: Tile): RenderNode {
+  const { Box, Text } = el
+  return (
+    <Box key={'tile-' + x.id} position="relative" flexDirection="row" alignItems="flex-start" columnGap={2} flexGrow={1} width={0} minWidth={TILE_MIN} paddingX={1.5} paddingY={1} borderStyle="round" borderColor={TILE_EDGE} backgroundColor={TILE_GLASS} hover={{ borderColor: TILE_EDGE_HOT, backgroundColor: TILE_GLASS_HOT }}>
+      {pic(el, 'tile-art-' + x.id, tileArt(x.art), x.title, TILE_PX, TILE_PX)}
+      <Box key={'tile-body-' + x.id} flexDirection="column" rowGap={1} flexGrow={1} flexShrink={1} minWidth={0}>
+        <Box flexDirection="row" alignItems="center" columnGap={1} width="100%" minWidth={0}>
+          <Box flexGrow={1} flexShrink={1} minWidth={0}>
+            <Text bold color={INK} wrap="wrap">{x.title}</Text>
+          </Box>
+          {x.head ?? null}
+        </Box>
+        <Text color={SUB} wrap="wrap">{x.line}</Text>
+        {x.body}
+      </Box>
+    </Box>
+  )
+}
+
+/** A quiet line under a control. */
+function note(el: Els, key: string, text: string, color = MUTE): RenderNode {
+  const { Text } = el
+  return <Text key={key} color={color} wrap="wrap">{text}</Text>
+}
+
+/** Automatic effort: its switch, and while on the lean between cheaper and smarter. */
+export function effortTile(el: Els, frame: Frame, view: SettingsView, a: SettingsActions): RenderNode {
+  const { Box, Text } = el
+  const L = frame.lang
+  const d = view.settings
+  const body = d.effortAuto
+    ? [
+        <Box key="lean" flexDirection="row" alignItems="center" columnGap={1} flexWrap="wrap">
+          <Text color={MUTE}>{t(L, 'settings.cheaper')}</Text>
+          {slider(el, 'bias', BIAS, d.bias, bias => a.patch({ bias }), 3)}
+          <Text color={MUTE}>{t(L, 'settings.smarter')}</Text>
+        </Box>,
+        note(el, 'lean-note', t(L, 'settings.leanHint')),
+      ]
+    : [note(el, 'auto-off', t(L, 'settings.autoOffNote'))]
+  return tile(el, {
+    id: 'effort',
+    art: { kind: 'effort', on: d.effortAuto },
+    title: t(L, 'settings.effortAuto'),
+    head: toggle(el, 'set-auto', d.effortAuto, t(L, d.effortAuto ? 'band.on' : 'band.off'), () => a.patch({ effortAuto: !d.effortAuto })),
+    line: t(L, 'settings.autoLine'),
+    body,
+  })
+}
+
+/** Who judges: Haiku, Jev or a router model; Jev's key field when it needs one. */
+export function judgeTile(el: Els, frame: Frame, view: SettingsView, a: SettingsActions): RenderNode {
+  const { Box, Text } = el
+  const L = frame.lang
+  const d = view.settings
+  const body: RenderNode[] = [
+    segmented(el, 'judge', [
+      { value: 'haiku', label: t(L, 'settings.haiku') },
+      { value: 'jev', label: t(L, 'settings.jev') },
+      { value: 'model', label: t(L, 'settings.routerModel') },
+    ] as const, d.judge, judge => a.patch({ judge }), 'teal'),
+  ]
+  if (d.judge === 'model' && d.judgeModel) body.push(note(el, 'judge-model-name', t(L, 'settings.routerModel') + ' · ' + d.judgeModel))
+  if (needsKey(view)) {
+    const jev = view.jev
+    const placeholder = t(L, 'settings.keyPaste')
+    const field = 'Input' in el
+      ? well(el, 'jev-key', tileInner(frame), <el.Input key="jev-key" placeholder={placeholder} value="" submitLabel={t(L, 'settings.saveKey')} onSubmit={(key: string) => a.jevKey(key)} />, placeholder)
+      : <Text color={MUTE}>{placeholder}</Text>
+    const result =
+      jev.test.state === 'testing' ? <Text color={SUB}>{t(L, 'settings.testing')}</Text>
+        : jev.test.state === 'ok' ? <Text color={TONE.green.text} wrap="wrap">{'✓ ' + (jev.test.message ?? t(L, 'settings.keyWorks'))}</Text>
+          : jev.test.state === 'fail' ? <Text color={TONE.red.text} wrap="wrap">{'✕ ' + (jev.test.message ?? t(L, 'settings.keyRejected'))}</Text>
+            : null
+    body.push(
+      field,
+      <Box key="jev-row" flexDirection="row" flexWrap="wrap" alignItems="center" columnGap={1} rowGap={1}>
+        {pill(el, 'jev-test', t(L, 'settings.test'), 'ghost', a.testJev, 'teal')}
+        {result}
+      </Box>,
+    )
+  }
+  return tile(el, { id: 'judge', art: { kind: 'judge', judge: d.judge }, title: t(L, 'settings.judge'), line: t(L, 'settings.judgeLine'), body })
+}
+
+/** The worker set that is on: Base or a named mode. */
+export function modeTile(el: Els, frame: Frame, view: SettingsView, a: SettingsActions): RenderNode {
+  const L = frame.lang
+  const d = view.settings
+  const items = modeItems(frame, d)
+  const current = d.activeMode ?? ''
+  const control = items.length <= 5 || !('Select' in el)
+    ? segmented(el, 'mode', items, current, id => a.setMode?.(id), 'amber')
+    : <el.Select key="mode" options={items} value={current} onSelect={(value: string) => a.setMode?.(value)} />
+  return tile(el, { id: 'mode', art: { kind: 'mode', on: current !== '' }, title: t(L, 'settings.mode'), line: t(L, 'settings.modeLine'), body: [control] })
+}
+
+/** Keep warm: its switch, and what each ping costs. */
+export function warmTile(el: Els, frame: Frame, view: SettingsView, a: SettingsActions): RenderNode {
+  const L = frame.lang
+  const d = view.settings
+  return tile(el, {
+    id: 'warm',
+    art: { kind: 'warm', on: d.keepWarm },
+    title: t(L, 'settings.keepWarm'),
+    head: toggle(el, 'set-warm', d.keepWarm, t(L, d.keepWarm ? 'band.on' : 'band.off'), () => a.patch({ keepWarm: !d.keepWarm })),
+    line: t(L, 'settings.warmLine'),
+    body: [note(el, 'warm-cost', t(L, 'settings.warmCostShort'))],
+  })
+}
+
+/** What 리플이 says the settings do right now, in a sentence or two. */
+export function settingsSay(frame: Frame, d: Settings): string {
+  const L = frame.lang
+  const effort = d.effortAuto ? t(L, 'settings.sayAuto', { judge: judgeName(frame, d.judge) }) : t(L, 'settings.sayManual')
+  return d.keepWarm ? effort + ' ' + t(L, 'settings.sayWarm') : effort
+}
+
+/** Rows the quick settings take on the desktop, about: for the sea's height. */
+function panelRows(frame: Frame, view: SettingsView): number {
+  return (tilesAcross(frame) === 2 ? 20 : 36) + (needsKey(view) ? 4 : 0)
+}
+
+function settingsDrawn(el: Els, frame: Frame, view: SettingsView, a: SettingsActions): RenderNode {
+  const { Box, Text } = el
+  const L = frame.lang
+  const d = view.settings
+  const face = 48
+  const head = (
+    <Box key="settings-head" flexDirection="row" alignItems="center" columnGap={2} width="100%" minWidth={0}>
+      {ripple(el, 'settings', d.effortAuto ? 'calm' : 'drowsy', t(L, 'band.brand'), face)}
+      <Box key="settings-say" flexDirection="column" flexGrow={1} flexShrink={1} minWidth={0}>
+        <Box flexDirection="row" alignItems="center" columnGap={1} flexWrap="wrap">
+          <Text bold color={INK}>{t(L, 'settings.quick')}</Text>
+          <Text color={MUTE}>{t(L, 'band.brand')}</Text>
+        </Box>
+        <Text color={SUB} wrap="wrap">{settingsSay(frame, d)}</Text>
+      </Box>
+      <Box key="settings-exits" flexDirection="row" alignItems="center" columnGap={1} flexShrink={0}>
+        {pill(el, 'all-settings', t(L, 'settings.openAll'), 'ghost', a.openAllSettings, 'violet', 'open')}
+        {pill(el, 'close', t(L, 'settings.close'), 'ghost', a.close, 'violet', 'close')}
+      </Box>
+    </Box>
+  )
+  const tiles = (
+    <Box key="settings-tiles" flexDirection="row" flexWrap="wrap" columnGap={1} rowGap={1} width="100%" minWidth={0}>
+      {effortTile(el, frame, view, a)}
+      {judgeTile(el, frame, view, a)}
+      {modeTile(el, frame, view, a)}
+      {warmTile(el, frame, view, a)}
+    </Box>
+  )
+  return capsule(el, frame, {
+    key: 'settings',
+    // 리플이 floats on the surface: the wave runs just under the head, the tiles below it.
+    sea: { tone: 'violet', ripples: 'calm', reach: 170, motes: true, wave: 19 * 0.5 + face + 9, at: { x: 1.5 * CELL_PX + face / 2, y: 19 * 0.5 + face / 2 } },
+    rows: panelRows(frame, view),
+    paddingY: 1,
+    gap: 1,
+    children: [head, tiles],
+  })
+}
+
+// ---- The panel ---------------------------------------------------------------------------------
+
+/** Session-time controls only; the full settings live on the router dashboard. */
+export function renderSettings(el: Els, frame: Frame, view: SettingsView, a: SettingsActions): RenderNode {
+  if (canDraw(el, frame)) return settingsDrawn(el, frame, view, a)
+  const { Box } = el
+  const rich = isRich(frame)
+  const close = dismiss(el, frame, 'close', t(frame.lang, 'settings.close'), a.close, 'x')
+  return speak(el, frame, {
+    key: 'settings',
+    face: 'calm',
+    title: t(frame.lang, 'band.brand'),
+    aside: t(frame.lang, 'settings.quick'),
+    blocks: [
+      <Box key="controls" flexDirection="column" rowGap={rich ? 1 : 0}>
+        {effortRows(el, frame, view.settings, a)}
+        {judgeRows(el, frame, view, a)}
+        {modeRows(el, frame, view.settings, a)}
+        {keepWarmRow(el, frame, view.settings, a)}
+      </Box>,
+      actions(el, frame, [action(el, frame, 'all-settings', t(frame.lang, 'settings.openAll'), a.openAllSettings, { hotkey: 's', primary: true }), rich ? '' : close]),
+    ],
+    ...(rich ? { dismiss: close } : {}),
+  })
+}

package/dist/mod/hooks/ui/setup.tsx

@@ -0,0 +1,148 @@
+// First run: three short steps (who judges, workers on the dashboard, keep warm) and a
+// done card. Shown once, in the band; detailed settings live on the router dashboard.
+//
+// 리플이 asks each step as a card asks: the step's question is the title, the steps beside it, one
+// line of why, the step's control, then Next and the quiet ways back or out. It asks who should
+// judge, waits calmly, and is pleased when all is set. The terminal draws 리플이's column (parts.tsx
+// `speak`); the desktop a capsule of the deep, its controls the quick settings' own tiles.
+
+import { t } from '../i18n'
+import type { RenderNode } from 'claude-code'
+import { RUNGS } from '../settings'
+
+import { CELL_PX, INK, MUTE, SUB, TONE, beadsArt } from './art'
+import { capsule, pic, pill, ripple } from './kit'
+import { GREET_SIZE, action, actions, canDraw, speak } from './parts'
+import type { Els } from './parts'
+import { judgeRows, judgeTile, keepWarmRow, row, warmTile } from './settings'
+import { chOf } from './theme'
+import type { Frame, SettingsActions, SettingsView, SetupActions, SetupView } from './view'
+import { targetLabel } from './view'
+
+const STEPS = [
+  { title: 'setup.judgeTitle', blurb: 'setup.judgeBlurb' },
+  { title: 'setup.workersTitle', blurb: 'setup.workersNote' },
+  { title: 'setup.cacheTitle', blurb: 'setup.cacheBlurb' },
+] as const
+
+/** `Sol · Astra · …`: the four workers' models, lowest first. */
+function workersSummary(lang: Frame['lang'], d: SetupView['draft']): string {
+  const general = d.rules.general
+  return RUNGS.map(rung => general.rungs[rung]?.map(step => targetLabel(step.target, lang)).join(' → ') || '—').join(' · ')
+}
+
+/** The steps as rings, the current one filled: ● ○ ○. */
+function dots(step: number): string {
+  return [1, 2, 3].map(i => (i <= step ? '●' : '○')).join(' ')
+}
+
+/** The first-run setup in the band. */
+export function renderSetup(el: Els, frame: Frame, view: SetupView, a: SetupActions): RenderNode {
+  const { Text } = el
+  // Setup lends the same small controls its draft and handlers.
+  const asSettings: SettingsView = { settings: view.draft, jev: view.jev }
+  const asActions: SettingsActions = { ...a, close: () => undefined }
+  const d = view.draft
+  const done = view.step === 4
+  const step = done ? null : STEPS[view.step - 1]!
+  const body: RenderNode[] = done
+    ? [
+        row(el, frame, 'sum-effort', t(frame.lang, 'band.effort'), <Text wrap="wrap">{t(frame.lang, 'setup.effortSummary', { state: t(frame.lang, d.effortAuto ? 'band.on' : 'band.off').toLowerCase(), judge: d.judge === 'haiku' ? t(frame.lang, 'settings.haiku') : d.judge === 'jev' ? t(frame.lang, 'settings.jev') : d.judgeModel })}</Text>),
+        row(el, frame, 'sum-workers', t(frame.lang, 'settings.workers'), <Text wrap="wrap">{workersSummary(frame.lang, d)}</Text>),
+        row(el, frame, 'sum-cache', t(frame.lang, 'band.cache'), <Text wrap="wrap">{d.keepWarm ? t(frame.lang, 'setup.cacheSummary', { hours: d.keepWarmHours }) : t(frame.lang, 'setup.cacheOff')}</Text>),
+      ]
+    : view.step === 1
+      ? judgeRows(el, frame, asSettings, asActions)
+      : view.step === 2
+        ? [] // Its line says it all: workers start on Auto, the rest is on the dashboard.
+        : [keepWarmRow(el, frame, view.draft, asActions)]
+  const { Box } = el
+  const buttons = done
+    ? [action(el, frame, 'finish', t(frame.lang, 'setup.start'), a.finish, { hotkey: 'g', primary: true }), action(el, frame, 'back', t(frame.lang, 'setup.back'), a.back, { hotkey: 'b' })]
+    : [
+        action(el, frame, 'next', view.step === 3 ? t(frame.lang, 'setup.finish') : t(frame.lang, 'setup.next'), a.next, { hotkey: 'n', primary: true }),
+        view.step === 2 ? action(el, frame, 'all-settings', t(frame.lang, 'settings.openAll'), a.openAllSettings, { hotkey: 's' }) : '',
+        view.step > 1 ? action(el, frame, 'back', t(frame.lang, 'setup.back'), a.back, { hotkey: 'b' }) : '',
+        action(el, frame, 'skip', t(frame.lang, 'setup.skip'), a.skip, { hotkey: 'k' }),
+      ]
+  const face = done ? 'pleased' : view.step === 1 ? 'asking' : 'calm'
+  // It greets first; the first step's question is its one row (who judges).
+  const title = done ? t(frame.lang, 'setup.ready') : view.step === 1 ? t(frame.lang, 'setup.welcome') : t(frame.lang, step!.title)
+  const line = done ? t(frame.lang, 'setup.changeDashboard') : t(frame.lang, step!.blurb)
+  if (canDraw(el, frame)) {
+    // The desktop: a capsule of the deep, the step's control the quick settings' own tile (who
+    // judges, keep warm), what was chosen when done, Next lit and the rest ghost buttons.
+    const L = frame.lang
+    const beads = beadsArt(view.step, 3)
+    const summary = done
+      ? [
+          [t(L, 'band.effort'), t(L, 'setup.effortSummary', { state: t(L, d.effortAuto ? 'band.on' : 'band.off').toLowerCase(), judge: d.judge === 'haiku' ? t(L, 'settings.haiku') : d.judge === 'jev' ? t(L, 'settings.jev') : d.judgeModel })],
+          [t(L, 'settings.workers'), workersSummary(L, d)],
+          [t(L, 'band.cache'), d.keepWarm ? t(L, 'setup.cacheSummary', { hours: d.keepWarmHours }) : t(L, 'setup.cacheOff')],
+        ]
+      : []
+    const nameCells = Math.ceil(Math.max(0, ...summary.map(([name]) => chOf(name!)))) + 1
+    const content = done
+      ? [
+          <Box key="summary" flexDirection="column" rowGap={1} paddingLeft={Math.ceil(GREET_SIZE / CELL_PX) + 2}>
+            {summary.map(([name, value], i) => (
+              <Box key={'sum-' + i} flexDirection="row" columnGap={2} alignItems="flex-start">
+                <Box width={nameCells} flexShrink={0}><Text color={MUTE}>{name}</Text></Box>
+                <Text color={INK} wrap="wrap">{value}</Text>
+              </Box>
+            ))}
+          </Box>,
+        ]
+      : view.step === 1 || view.step === 3
+        ? [
+            <Box key="step-tile" flexDirection="row" width="100%" minWidth={0}>
+              {view.step === 1 ? judgeTile(el, frame, asSettings, asActions) : warmTile(el, frame, asSettings, asActions)}
+            </Box>,
+          ]
+        : []
+    const next = done ? pill(el, 'finish', t(L, 'setup.start'), 'primary', a.finish, 'green', 'next') : pill(el, 'next', view.step === 3 ? t(L, 'setup.finish') : t(L, 'setup.next'), 'primary', a.next, 'violet', 'next')
+    return capsule(el, frame, {
+      key: 'setup',
+      sea: { tone: done ? 'green' : 'violet', ripples: 'calm', reach: 170, motes: true, wave: 19 * 0.5 + GREET_SIZE + 9, ...(done ? { tick: true, weather: 'sparkles' as const } : {}), at: { x: 1.5 * CELL_PX + GREET_SIZE / 2, y: 19 * 0.5 + GREET_SIZE / 2 } },
+      rows: 8 + (done ? 6 : view.step === 1 ? 12 : view.step === 3 ? 8 : 0) + (frame.columns < 70 ? 4 : 0),
+      paddingY: 1,
+      gap: 1,
+      children: [
+        <Box key="setup-head" flexDirection="row" alignItems="center" columnGap={2} width="100%" minWidth={0}>
+          {ripple(el, 'setup', face, title, GREET_SIZE)}
+          <Box flexDirection="column" flexGrow={1} flexShrink={1} minWidth={0}>
+            <Box flexDirection="row" alignItems="center" columnGap={2} flexWrap="wrap">
+              <Text bold color={done ? TONE.green.text : INK} wrap="wrap">{title}</Text>
+              {done ? null : pic(el, 'setup-beads', beads.source, view.step + ' / 3', beads.width, 16)}
+            </Box>
+            <Text color={SUB} wrap="wrap">{line}</Text>
+          </Box>
+        </Box>,
+        ...content,
+        <Box key="actions" flexDirection="row" alignItems="center" columnGap={1} flexWrap="wrap" rowGap={1}>
+          {next}
+          {!done && view.step === 2 ? pill(el, 'all-settings', t(L, 'settings.openAll'), 'ghost', a.openAllSettings, 'violet', 'open') : null}
+          {done || view.step > 1 ? pill(el, 'back', t(L, 'setup.back'), 'ghost', a.back, 'violet', 'back') : null}
+          {done ? null : pill(el, 'skip', t(L, 'setup.skip'), 'ghost', a.skip)}
+        </Box>,
+      ],
+    })
+  }
+  return speak(el, frame, {
+    key: 'setup',
+    face,
+    // It greets here, the first thing a new session shows: at its greeting size.
+    size: GREET_SIZE,
+    title,
+    aside: done ? '' : dots(view.step),
+    line,
+    blocks: [
+      body.length ? (
+        <Box key="body" flexDirection="column">
+          {body}
+        </Box>
+      ) : '',
+      actions(el, frame, buttons),
+    ],
+  })
+}