clauderipple 0.9.4 → 0.10.0

package/dist/mod/hooks/ui/look.ts

@@ -0,0 +1,129 @@
+// The skin (2026-10-14): which pictures the desktop draws with and what colours its host Text takes.
+// The deep (art.ts) is the first look: dark water on either theme, 리플이's glow, drawn controls in
+// glass. Flat (flat.ts) is the app's own surfaces: a hairline card that follows the theme, the
+// host's own ink, the accent only where something is on. Those two share one layout and change
+// paint alone: every size is art.ts's and every cell count the same under both, so band.tsx's
+// arithmetic and the blank presses laid over the pictures (kit.tsx) hold whatever the skin. The
+// terminal draws text and knows nothing of skins.
+
+import type { Skin } from '../../types'
+import * as deep from './art'
+import type { Glyph, Icon, PillLook, Sea, TileArt, Tone } from './art'
+import { flatPictures } from './flat'
+import { rippleSource } from './parts'
+import type { Face } from './ripple'
+import { textTone } from './theme'
+import type { Appearance } from './theme'
+import type { Frame } from './view'
+
+/** Props a host Text takes for a role on a capsule: a colour of ours, or the host's own ink. */
+export type Word = { color?: string; dimColor?: boolean }
+
+/** Props a Box takes: a capsule, a tile, a control lit under the pointer. */
+export type Surface = { borderStyle?: string; borderColor?: string; backgroundColor?: string; hover?: { borderColor?: string; backgroundColor?: string } }
+
+/** The pictures a skin paints, each at art.ts's size. */
+export type Paint = {
+  /** Every capsule's backdrop, `width` × `height` px; '' when the skin paints none and the Box's own colour shows. */
+  sea: (width: number, height: number, sea: Sea) => string
+  plate: (width: number, height: number) => string
+  switch: (on: boolean, busy?: boolean) => string
+  word: (label: string, on: boolean, busy?: boolean) => { source: string; cells: number }
+  extraHover: (widthPx: number) => string
+  pill: (label: string, look: PillLook, tone?: Tone, glyph?: Glyph) => { source: string; cells: number }
+  segmented: (labels: readonly string[], cells: readonly number[], chosen: number, tone?: Tone, colors?: readonly string[]) => string
+  slider: (count: number, cellsPerStop: number, chosen: number) => string
+  well: (width: number, height: number) => string
+  close: (lit?: boolean) => string
+  meter: (lit: number, look: 'auto' | 'manual' | 'quiet' | 'deciding') => string
+  ring: (percent: number, tone: Tone | 'ink') => string
+  clock: (share: number, tone: Tone | 'soft') => string
+  gauge: (kind: string) => string
+  icon: (icon: Icon, on: boolean, tone?: Tone) => string
+  agents: (count: number, on: boolean) => string
+  rule: () => string
+  tile: (art: TileArt) => string
+  beads: (step: number, total: number) => { source: string; width: number }
+}
+
+export type Pictures = Paint & {
+  /** 리플이's document at `size` px, in the skin's palette (parts.tsx `rippleSource`). */
+  mascot: (face: Face, size: number, percent?: number, dim?: boolean) => string
+}
+
+export type Look = {
+  skin: Skin
+  /** Host Text on a capsule: bright for values, soft for names, quiet for asides. */
+  ink: Word
+  sub: Word
+  mute: Word
+  /** The text colour of a tone: a card's title in its light, a figure gone amber. */
+  tone: (tone: Tone) => string
+  capsule: Surface
+  tile: Surface
+  /** A control under the pointer (kit.tsx `lit`): its hover alone. */
+  lit: Surface
+  art: Pictures
+}
+
+const DEEP_PAINT: Paint = {
+  sea: deep.seaArt, plate: deep.plateArt, switch: deep.switchArt, word: deep.wordArt, extraHover: deep.extraHoverArt,
+  pill: deep.pillArt, segmented: deep.segmentedArt, slider: deep.sliderArt, well: deep.wellArt, close: deep.closeArt,
+  meter: deep.meterArt, ring: deep.ringArt, clock: deep.clockArt, gauge: deep.gaugeArt, icon: deep.iconArt,
+  agents: deep.agentsArt, rule: deep.ruleArt, tile: deep.tileArt, beads: deep.beadsArt,
+}
+
+/** The deep: the capsule's edge a warm grey that reads on a light page and a dark one alike, lights white on the water. */
+const DEEP: Look = {
+  skin: 'deep',
+  ink: { color: deep.INK },
+  sub: { color: deep.SUB },
+  mute: { color: deep.MUTE },
+  tone: tone => deep.TONE[tone].text,
+  capsule: { borderStyle: 'round', borderColor: 'rgba(128,124,116,0.55)' },
+  tile: { borderStyle: 'round', borderColor: 'rgba(255,255,255,0.1)', backgroundColor: 'rgba(255,255,255,0.045)', hover: { borderColor: 'rgba(255,255,255,0.26)', backgroundColor: 'rgba(255,255,255,0.075)' } },
+  lit: { borderStyle: 'round', borderColor: 'rgba(0,0,0,0)', hover: { backgroundColor: 'rgba(255,255,255,0.09)', borderColor: 'rgba(255,255,255,0.16)' } },
+  // 리플이 drawn for the deep: the dark palette, light ink and lavender tone, whatever the theme.
+  art: { ...DEEP_PAINT, mascot: (face, size, percent, dim) => rippleSource(face, size, 'dark', percent, dim) },
+}
+
+/**
+ * Flat: the capsule painted in the app's own surface (flat.ts `sea`, white on a light app as its
+ * prompt box is), edged in a grey that sits on either theme, the host's own ink for values and the
+ * app's quiet text colour for names and asides, and the pictures in the theme's palette. The
+ * host's `dimColor` was too faint to read on a light page (2026-10-16). The engine takes a theme
+ * key, a name or hex here (not the app's CSS variables) and does not say which theme is on, so
+ * with appearance auto the quiet words are a mid tone between the app's two. One per appearance.
+ */
+const FLATS = new Map<Appearance, Look>()
+
+/** The app's quiet text (text-400, read from its stylesheet 2026-10-16) per theme, and between them. */
+const QUIET: Record<Appearance, string> = { light: '#73726c', dark: '#9c9a92', auto: '#86847d' }
+
+function flat(appearance: Appearance): Look {
+  let look = FLATS.get(appearance)
+  if (look) return look
+  const text = textTone(appearance)
+  look = {
+    skin: 'flat',
+    ink: {},
+    sub: { color: QUIET[appearance] },
+    mute: { color: QUIET[appearance] },
+    // One accent: the deep's decorative tones (the judge's teal, the mode's amber) are the accent
+    // here, and amber, red and green stay what they mean.
+    tone: tone => (tone === 'amber' || tone === 'ember' ? text.warn : tone === 'red' ? text.bad : tone === 'green' ? text.ok : text.accent),
+    capsule: { borderStyle: 'round', borderColor: 'rgba(128,124,116,0.3)' },
+    tile: { borderStyle: 'round', borderColor: 'rgba(128,124,116,0.22)', backgroundColor: 'rgba(128,124,116,0.04)', hover: { borderColor: 'rgba(128,124,116,0.4)', backgroundColor: 'rgba(128,124,116,0.08)' } },
+    lit: { borderStyle: 'round', borderColor: 'rgba(0,0,0,0)', hover: { backgroundColor: 'rgba(128,124,116,0.12)', borderColor: 'rgba(0,0,0,0)' } },
+    art: { ...flatPictures(appearance), mascot: (face, size, percent, dim) => rippleSource(face, size, appearance, percent, dim) },
+  }
+  FLATS.set(appearance, look)
+  return look
+}
+
+/**
+ * The look a frame draws in: flat's own surfaces for flat, the deep for everything else.
+ */
+export function lookOf(frame: Frame): Look {
+  return frame.skin === 'flat' ? flat(frame.appearance) : DEEP
+}

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

@@ -10,10 +10,13 @@
 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 { Settings, Skin } from '../../types'
+import { SKINS } from '../settings'
+import { CELL_PX, TILE_PX } from './art'
 import type { TileArt } from './art'
 import { capsule, pill, pic, ripple, segmented, slider, toggle, well } from './kit'
+import { lookOf } from './look'
+import type { Word } from './look'
 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'
@@ -21,7 +24,7 @@ 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',
+const ROW_NAMES = ['settings.effortAuto', 'settings.lean', 'settings.judge', 'settings.key', 'settings.keepWarm', 'settings.workers', 'settings.mode', 'settings.skin', '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. */
@@ -73,7 +76,7 @@ export function effortRows(el: Els, frame: Frame, d: Settings, a: SettingsAction
 }
 
 /** The Jev key field and its test, when TypeSafe's Jev judges and no key is known. */
-function needsKey(view: SettingsView): boolean {
+export function needsKey(view: SettingsView): boolean {
   return view.settings.judge === 'jev' && view.settings.jevSource === 'typesafe' && !['env', 'file', 'pasted'].includes(view.jev.source ?? '')
 }
 
@@ -151,7 +154,7 @@ export function keepWarmRow(el: Els, frame: Frame, d: Settings, a: SettingsActio
   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 }[] {
+export 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 }))]
 }
 
@@ -165,11 +168,6 @@ function judgeName(frame: Frame, judge: Settings['judge']): string {
 // 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
 
@@ -186,19 +184,21 @@ function tileInner(frame: Frame): number {
 
 type Tile = { id: string; art: TileArt; title: string; head?: RenderNode; line: string; body: RenderNode[] }
 
-function tile(el: Els, x: Tile): RenderNode {
+/** A tile in the skin's edge and glass (look.ts `tile`). */
+function tile(el: Els, frame: Frame, x: Tile): RenderNode {
   const { Box, Text } = el
+  const k = lookOf(frame)
   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-' + x.id} position="relative" flexDirection="row" alignItems="flex-start" columnGap={2} flexGrow={1} width={0} minWidth={TILE_MIN} paddingX={1.5} paddingY={1} {...k.tile}>
+      {pic(el, 'tile-art-' + x.id, k.art.tile(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>
+            <Text bold {...k.ink} wrap="wrap">{x.title}</Text>
           </Box>
           {x.head ?? null}
         </Box>
-        <Text color={SUB} wrap="wrap">{x.line}</Text>
+        <Text {...k.sub} wrap="wrap">{x.line}</Text>
         {x.body}
       </Box>
     </Box>
@@ -206,9 +206,9 @@ function tile(el: Els, x: Tile): RenderNode {
 }
 
 /** A quiet line under a control. */
-function note(el: Els, key: string, text: string, color = MUTE): RenderNode {
+function note(el: Els, frame: Frame, key: string, text: string, word?: Word): RenderNode {
   const { Text } = el
-  return <Text key={key} color={color} wrap="wrap">{text}</Text>
+  return <Text key={key} {...(word ?? lookOf(frame).mute)} wrap="wrap">{text}</Text>
 }
 
 /** Automatic effort: its switch, and while on the lean between cheaper and smarter. */
@@ -216,21 +216,22 @@ export function effortTile(el: Els, frame: Frame, view: SettingsView, a: Setting
   const { Box, Text } = el
   const L = frame.lang
   const d = view.settings
+  const k = lookOf(frame)
   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>
+          <Text {...k.mute}>{t(L, 'settings.cheaper')}</Text>
+          {slider(el, frame, 'bias', BIAS, d.bias, bias => a.patch({ bias }), 3)}
+          <Text {...k.mute}>{t(L, 'settings.smarter')}</Text>
         </Box>,
-        note(el, 'lean-note', t(L, 'settings.leanHint')),
+        note(el, frame, 'lean-note', t(L, 'settings.leanHint')),
       ]
-    : [note(el, 'auto-off', t(L, 'settings.autoOffNote'))]
-  return tile(el, {
+    : [note(el, frame, 'auto-off', t(L, 'settings.autoOffNote'))]
+  return tile(el, frame, {
     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 })),
+    head: toggle(el, frame, 'set-auto', d.effortAuto, t(L, d.effortAuto ? 'band.on' : 'band.off'), () => a.patch({ effortAuto: !d.effortAuto })),
     line: t(L, 'settings.autoLine'),
     body,
   })
@@ -241,34 +242,35 @@ export function judgeTile(el: Els, frame: Frame, view: SettingsView, a: Settings
   const { Box, Text } = el
   const L = frame.lang
   const d = view.settings
+  const k = lookOf(frame)
   const body: RenderNode[] = [
-    segmented(el, 'judge', [
+    segmented(el, frame, '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 (d.judge === 'model' && d.judgeModel) body.push(note(el, frame, '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>
+      ? well(el, frame, '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 {...k.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>
+      jev.test.state === 'testing' ? <Text {...k.sub}>{t(L, 'settings.testing')}</Text>
+        : jev.test.state === 'ok' ? <Text color={k.tone('green')} wrap="wrap">{'✓ ' + (jev.test.message ?? t(L, 'settings.keyWorks'))}</Text>
+          : jev.test.state === 'fail' ? <Text color={k.tone('red')} 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')}
+        {pill(el, frame, '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 })
+  return tile(el, frame, { 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. */
@@ -278,22 +280,43 @@ export function modeTile(el: Els, frame: Frame, view: SettingsView, a: SettingsA
   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')
+    ? segmented(el, frame, '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] })
+  return tile(el, frame, { 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, {
+  return tile(el, frame, {
     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 })),
+    head: toggle(el, frame, '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'))],
+    body: [note(el, frame, 'warm-cost', t(L, 'settings.warmCostShort'))],
+  })
+}
+
+/** The two skins by name, in the order they are offered. */
+function skinOptions(frame: Frame): { value: Skin; label: string }[] {
+  return SKINS.map(skin => ({ value: skin, label: t(frame.lang, skin === 'deep' ? 'settings.skinDeep' : 'settings.skinFlat') }))
+}
+
+/**
+ * The skin: how the desktop draws the band and the cards (look.ts), picked here or on the
+ * dashboard's Look card. Only the desktop shows it: the terminal draws text whatever it is.
+ */
+export function skinTile(el: Els, frame: Frame, view: SettingsView, a: SettingsActions): RenderNode {
+  const L = frame.lang
+  const d = view.settings
+  return tile(el, frame, {
+    id: 'skin',
+    art: { kind: 'skin', skin: d.skin },
+    title: t(L, 'settings.skin'),
+    line: t(L, 'settings.skinLine'),
+    body: [segmented(el, frame, 'skin', skinOptions(frame), d.skin, skin => a.patch({ skin }))],
   })
 }
 
@@ -304,29 +327,30 @@ export function settingsSay(frame: Frame, d: Settings): string {
   return d.keepWarm ? effort + ' ' + t(L, 'settings.sayWarm') : effort
 }
 
-/** Rows the quick settings take on the desktop, about: for the sea's height. */
+/** Rows the quick settings take on the desktop, about: for the sea's height (five tiles, three rows of two or five of one). */
 function panelRows(frame: Frame, view: SettingsView): number {
-  return (tilesAcross(frame) === 2 ? 20 : 36) + (needsKey(view) ? 4 : 0)
+  return (tilesAcross(frame) === 2 ? 30 : 45) + (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 k = lookOf(frame)
   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)}
+      {ripple(el, frame, '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>
+          <Text bold {...k.ink}>{t(L, 'settings.quick')}</Text>
+          <Text {...k.mute}>{t(L, 'band.brand')}</Text>
         </Box>
-        <Text color={SUB} wrap="wrap">{settingsSay(frame, d)}</Text>
+        <Text {...k.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')}
+        {pill(el, frame, 'all-settings', t(L, 'settings.openAll'), 'ghost', a.openAllSettings, 'violet', 'open')}
+        {pill(el, frame, 'close', t(L, 'settings.close'), 'ghost', a.close, 'violet', 'close')}
       </Box>
     </Box>
   )
@@ -336,6 +360,7 @@ function settingsDrawn(el: Els, frame: Frame, view: SettingsView, a: SettingsAct
       {judgeTile(el, frame, view, a)}
       {modeTile(el, frame, view, a)}
       {warmTile(el, frame, view, a)}
+      {skinTile(el, frame, view, a)}
     </Box>
   )
   return capsule(el, frame, {

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

@@ -10,7 +10,8 @@ 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 { CELL_PX } from './art'
+import { lookOf } from './look'
 import { capsule, pic, pill, ripple } from './kit'
 import { GREET_SIZE, action, actions, canDraw, speak } from './parts'
 import type { Els } from './parts'
@@ -19,14 +20,14 @@ import { chOf } from './theme'
 import type { Frame, SettingsActions, SettingsView, SetupActions, SetupView } from './view'
 import { targetLabel } from './view'
 
-const STEPS = [
+export 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 {
+export 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(' · ')
 }
@@ -73,7 +74,8 @@ export function renderSetup(el: Els, frame: Frame, view: SetupView, a: SetupActi
     // 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 k = lookOf(frame)
+    const beads = k.art.beads(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 })],
@@ -87,8 +89,8 @@ export function renderSetup(el: Els, frame: Frame, view: SetupView, a: SetupActi
           <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 width={nameCells} flexShrink={0}><Text {...k.mute}>{name}</Text></Box>
+                <Text {...k.ink} wrap="wrap">{value}</Text>
               </Box>
             ))}
           </Box>,
@@ -100,7 +102,7 @@ export function renderSetup(el: Els, frame: Frame, view: SetupView, a: SetupActi
             </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')
+    const next = done ? pill(el, frame, 'finish', t(L, 'setup.start'), 'primary', a.finish, 'green', 'next') : pill(el, frame, '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 } },
@@ -109,21 +111,21 @@ export function renderSetup(el: Els, frame: Frame, view: SetupView, a: SetupActi
       gap: 1,
       children: [
         <Box key="setup-head" flexDirection="row" alignItems="center" columnGap={2} width="100%" minWidth={0}>
-          {ripple(el, 'setup', face, title, GREET_SIZE)}
+          {ripple(el, frame, '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>
+              <Text bold {...(done ? { color: k.tone('green') } : k.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>
+            <Text {...k.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)}
+          {!done && view.step === 2 ? pill(el, frame, 'all-settings', t(L, 'settings.openAll'), 'ghost', a.openAllSettings, 'violet', 'open') : null}
+          {done || view.step > 1 ? pill(el, frame, 'back', t(L, 'setup.back'), 'ghost', a.back, 'violet', 'back') : null}
+          {done ? null : pill(el, frame, 'skip', t(L, 'setup.skip'), 'ghost', a.skip)}
         </Box>,
       ],
     })

package/dist/mod/hooks/ui/theme.ts

@@ -84,10 +84,13 @@ export function textTone(appearance: Appearance): typeof TEXT {
 const KNOWN: Record<string, string> = {
   anthropic: '#d97757',
   chatgpt: '#10a37f',
+  google: '#4285f4',
   'google-gemini': '#4285f4',
   deepseek: '#4d6bfe',
   'opencode-go': '#9333ea',
   'opencode-zen': '#9333ea',
+  // xAI's mark is black on white; silver reads on the band's dark capsule.
+  grok: '#a8a29e',
 }
 const PALETTE = ['#0891b2', '#db2777', '#7c3aed', '#0d9488', '#c026d3', '#4f46e5', '#0284c7', '#be185d']
 

package/dist/mod/hooks/ui/tools.ts

@@ -0,0 +1,124 @@
+// A subagent's tool calls as the Agents pane words them: one short line of each call's input, and a
+// run of calls headed in one line the way the Claude app heads it ("명령어 7개 실행함, 파일 1개를
+// 편집함"). Pure, so the tests can call it.
+//
+// The phone app's host words a run the same way (packages/remote/src/tool-details.ts
+// `activitySummary`). The mod cannot import it: Claude Code loads the mod as its own folder
+// (dist/mod in an npm install, scripts/build-npm.mjs), with no packages/remote beside it. So the
+// rules are kept here too: kinds in the order they first appear, a file read or edited counted once,
+// five or more kinds cut to the first three and the rest counted.
+
+import { t } from '../i18n.ts'
+import type { Lang } from '../i18n.ts'
+
+/** Where the session runs and the user's home, to say paths short: relative to the one, `~` for the other. */
+export type Place = { cwd?: string; home?: string }
+
+/** One tool call as the pane holds it (view.ts AgentEntry's tool kind). */
+export type ToolCall = { id: string; tool: string; detail: string; state: 'running' | 'ok' | 'error' }
+
+type Activity = 'command' | 'read' | 'edit' | 'search' | 'web' | 'agent' | 'other'
+
+export function activityOf(tool: string): Activity {
+  if (['Bash', 'BashOutput', 'KillShell'].includes(tool)) return 'command'
+  if (tool === 'Read') return 'read'
+  if (['Edit', 'MultiEdit', 'Write', 'NotebookEdit'].includes(tool)) return 'edit'
+  if (['Grep', 'Glob', 'LS'].includes(tool)) return 'search'
+  if (['WebSearch', 'WebFetch'].includes(tool)) return 'web'
+  if (['Task', 'Agent'].includes(tool)) return 'agent'
+  return 'other'
+}
+
+/** A directory without its trailing slash; nothing for one that cannot shorten a path (`/`, `~`). */
+function dir(path: string | undefined): string | undefined {
+  const bare = path?.replace(/\/+$/, '')
+  return bare && bare.startsWith('/') ? bare : undefined
+}
+
+/** A path relative to the session's folder, else under `~`, else as given. */
+export function shortPath(path: string, place: Place): string {
+  const cwd = dir(place.cwd)
+  const home = dir(place.home)
+  if (cwd) {
+    if (path === cwd) return '.'
+    if (path.startsWith(cwd + '/')) return path.slice(cwd.length + 1)
+  }
+  if (home) {
+    if (path === home) return '~'
+    if (path.startsWith(home + '/')) return '~' + path.slice(home.length)
+  }
+  return path
+}
+
+function escape(text: string): string {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+/** Every absolute path in a command said short, as shortPath says one. */
+function shortPaths(text: string, place: Place): string {
+  let out = text
+  const cwd = dir(place.cwd)
+  const home = dir(place.home)
+  if (cwd) out = out.replace(new RegExp(escape(cwd) + '(/|(?![\\w.-]))', 'g'), (_m, slash: string) => slash ? '' : '.')
+  if (home) out = out.replace(new RegExp(escape(home) + '(?=/|(?![\\w.-]))', 'g'), '~')
+  return out
+}
+
+/** A `cd <dir> &&` (or `;`, or a line of its own) at the head of a command: it says nothing about what it does. */
+const CD = /^\s*cd\s+(?:"[^"]*"|'[^']*'|[^\s;&|]+)\s*(?:&&|;|\n)\s*/
+
+/** A command as a line: without the `cd` it opens with, its first line only, its paths short. */
+export function commandLine(command: string, place: Place = {}): string {
+  let rest = command
+  for (let i = 0; i < 3 && CD.test(rest); i++) rest = rest.replace(CD, '')
+  const first = rest.split('\n').find(line => line.trim()) ?? ''
+  return shortPaths(first.trim(), place)
+}
+
+function text(value: unknown): string {
+  return typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)
+}
+
+function firstLine(value: string): string {
+  return (value.split('\n').find(line => line.trim()) ?? '').trim()
+}
+
+/**
+ * A tool call's input in one line: a command's own description when it gave one, else the command;
+ * a file's path; a search's pattern (and where). Paths short, multi-line input its first line.
+ */
+export function toolDetail(tool: string, input: Readonly<Record<string, unknown>>, place: Place = {}): string {
+  if (tool === 'Bash') {
+    const description = firstLine(text(input.description))
+    if (description) return description
+    return commandLine(text(input.command), place)
+  }
+  if (tool === 'Grep' || tool === 'Glob') {
+    const where = text(input.path)
+    return [firstLine(text(input.pattern)), where ? shortPath(where, place) : ''].filter(Boolean).join(' · ')
+  }
+  const path = text(input.file_path ?? input.notebook_path ?? input.path)
+  if (path) return shortPath(firstLine(path), place)
+  const detail = input.command ?? input.pattern ?? input.query ?? input.url ?? input.description ?? input.prompt ?? ''
+  return shortPaths(firstLine(text(detail)), place)
+}
+
+/** A run's head in one line, and how many of its calls failed. */
+export function runSummary(run: readonly ToolCall[], lang: Lang): { text: string; failed: number } {
+  const counts = new Map<Activity, number>()
+  const files = new Set<string>()
+  for (const call of run) {
+    const kind = activityOf(call.tool)
+    const file = (kind === 'read' || kind === 'edit') && call.detail ? kind + ':' + call.detail : ''
+    if (!file || !files.has(file)) counts.set(kind, (counts.get(kind) ?? 0) + 1)
+    if (file) files.add(file)
+  }
+  const word = (key: string, count: number) => t(lang, 'agents.act.' + key + (count === 1 ? 'One' : ''), { count })
+  const parts = [...counts]
+  const shown = parts.length >= 5 ? parts.slice(0, 3) : parts
+  const rest = parts.slice(shown.length).reduce((sum, [, n]) => sum + n, 0)
+  return {
+    text: [...shown.map(([kind, n]) => word(kind, n)), ...(rest ? [word('more', rest)] : [])].join(', '),
+    failed: run.filter(call => call.state === 'error').length,
+  }
+}