clauderipple 0.9.3 → 0.9.5

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

@@ -3,8 +3,9 @@
 // Desktop: one capsule of the deep (see "Desktop" below, art.ts and kit.tsx): 리플이 glowing at its
 // left, acting out what the band is doing (thinking while Auto picks, busy while a request is out,
 // drowsy as the cache runs out, asleep once it has, otherwise its idle life), the effort as five
-// bars rising shallow to deep, the context ring, the cache clock in whole minutes, the plan limit and
-// the mode when on, the last route, the judge's reason; then the drawn controls and the way out.
+// bars rising shallow to deep, the context ring, the cache clock in whole minutes, the plan limit
+// (its window a gauge, its name and reset in the tip) and the mode when on, the last route, the
+// judge's reason; then the drawn controls and the way out.
 // What each fact means shows in the reason's place on hover. The terminal draws the same facts as
 // one quiet row of text, without 리플이.
 //
@@ -32,9 +33,9 @@ import type { Lang } from '../i18n'
 import type { RenderChildren, RenderNode } from 'claude-code'
 
 import type { Effort } from '../../types'
-import { AGENTS_W, CELL_PX, DEPTH, ICON_PX, INK, METER_H, METER_W, MUTE, ROW_PX, SUB, TONE, agentsArt, clockArt, iconArt, meterArt, pillArt, plateArt, ringArt, ruleArt, switchArt, textPx } from './art'
+import { AGENTS_W, CELL_PX, DEPTH, ICON_PX, INK, METER_H, METER_W, MUTE, ROW_PX, SUB, TONE, agentsArt, clockArt, gaugeArt, iconArt, meterArt, pillArt, plateArt, ringArt, ruleArt, textPx } from './art'
 import type { Sea, Tone } from './art'
-import { CLOSE_CELLS, capsule, closeButton, lift, lit, pic, pill, press, ripple, rowsOf, segmented, toggle, toggleCells } from './kit'
+import { CLOSE_CELLS, capsule, closeButton, lift, lit, pic, pill, press, ripple, rowsOf, segmented, word, wordCells } from './kit'
 import { textButton } from './parts'
 import type { Els } from './parts'
 import type { Face } from './ripple'
@@ -284,31 +285,31 @@ function routeFact(frame: Frame, view: DashboardView, room: number, onPress: ()
 // ---- Controls ----------------------------------------------------------------------------------
 
 /**
- * A control: its label, the terminal's hotkey, and whether it is on (a toggle that is on, an open
- * pane, the advised Handoff). The terminal says it in the label (● / ○), as its plain Buttons take
- * no colour.
+ * A control: its label, the hotkey, and whether it is on (a toggle that is on, an open pane, the
+ * advised Handoff). The terminal says it in the label (● / ○), as its plain Buttons take no colour.
  */
 type Control = { key: string; label: string; hotkey: string; onPress: () => void; on: boolean; count?: string }
 
 function controls(frame: Frame, view: DashboardView, actions: BandActions): Control[] {
-  const rich = isRich(frame)
   const L = frame.lang
-  const mark = (on: boolean) => (rich ? '' : on ? ' ●' : ' ○')
+  const mark = (on: boolean) => (on ? ' ●' : ' ○')
   const out: Control[] = []
   // Handoff comes and goes; first in the row, it moves nothing when it does.
   if (view.handoff !== 'off') {
     const advised = view.handoff === 'advised'
-    out.push({ key: 'handoff', label: t(L, 'band.handoff') + (!rich && advised ? ' ◆' : ''), hotkey: 'h', onPress: actions.handoff, on: advised })
+    out.push({ key: 'handoff', label: t(L, 'band.handoff') + (!isRich(frame) && advised ? ' ◆' : ''), hotkey: 'h', onPress: actions.handoff, on: advised })
   }
   out.push(
     { key: 'auto', label: t(L, 'band.auto') + mark(view.auto), hotkey: 'a', onPress: actions.toggleAuto, on: view.auto },
     { key: 'warm', label: t(L, 'band.warm') + mark(view.warm.on), hotkey: 'w', onPress: actions.toggleWarm, on: view.warm.on },
     // The desktop opens the log from the route itself (its value is that button), so it has no Log of its own.
-    ...(rich ? [] : [{ key: 'log', label: t(L, 'band.log') + mark(view.logOpen), hotkey: 'l', onPress: actions.toggleLog, on: view.logOpen }]),
+    ...(!isRich(frame) ? [{ key: 'log', label: t(L, 'band.log') + mark(view.logOpen), hotkey: 'l', onPress: actions.toggleLog, on: view.logOpen }] : []),
     // The count has a slot of its own (desktop) or is always a number (terminal): no width change.
-    { key: 'agents', label: t(L, 'band.agents') + (rich ? '' : ' ' + (view.agents.live || '·')) + mark(view.agentsOpen), hotkey: 'g', onPress: actions.toggleAgents, on: view.agentsOpen, ...(rich ? { count: view.agents.live > 0 ? String(view.agents.live) : '' } : {}) },
+    { key: 'agents', label: t(L, 'band.agents') + (isRich(frame) ? '' : ' ' + (view.agents.live || '·')) + mark(view.agentsOpen), hotkey: 'g', onPress: actions.toggleAgents, on: view.agentsOpen, ...(isRich(frame) ? { count: view.agents.live > 0 ? String(view.agents.live) : '' } : {}) },
+    // The desktop's Clear asks first (a card of its own, "clear" in bandPriority); Compact opens its note bar.
+    ...(isRich(frame) ? [{ key: 'compact', label: t(L, 'band.compact'), hotkey: 'c', onPress: actions.compact, on: false }, { key: 'clear', label: t(L, 'band.clear'), hotkey: 'x', onPress: actions.clear, on: false }] : []),
     // A word on the desktop: the host's 14 px font draws ⚙ as a small ring that reads as "o".
-    { key: 'settings', label: rich ? t(L, 'band.settings') : '⚙', hotkey: 's', onPress: actions.openSettings, on: false },
+    { key: 'settings', label: isRich(frame) ? t(L, 'band.settings') : '⚙', hotkey: 's', onPress: actions.openSettings, on: false },
   )
   return out
 }
@@ -358,16 +359,19 @@ export const BAND_RIPPLE = 24
 export const CREST_CELLS = 4
 /** The row's height, px: a pill's, whether or not one shows, so Handoff never moves the band. */
 const ROW_H = 26
+// Fact and control widths alone decide the row, never a value, so a changing figure never moves its
+// neighbours. The air between facts and between controls is trimmed below what reads as a whole cell
+// (the limit's word became a gauge for the same reason): at 100 columns a route name of 13
+// characters ("glm-5.3-flash") must draw whole beside everything else, and a loose gap ate the
+// route's room and cut it (2026-10-14).
 /** The air between facts, in cells (the host takes fractions of a cell). */
-const DRAWN_GAP = 1.25
+const DRAWN_GAP = 0.2
 /** A rule between the band's groups, in cells. */
 const RULE_CELLS = 1
 /** The room the route is counted at (a model name and its hit); it takes more when the row has it. */
-const ROUTE_ROOM = 10
+const ROUTE_ROOM = 14
 /** The controls whose words go first when the band is narrow, in that order; Auto's goes last. */
-const WORDLESS = ['settings', 'agents', 'warm'] as const
-/** Cells Auto's switch takes without its word. */
-const SWITCH_ONLY = Math.ceil(36 / CELL_PX) + 1
+const WORDLESS = ['clear', 'compact', 'settings', 'agents', 'warm'] as const
 /** The capsule's own air, in cells across and rows down. */
 const PAD_X = 1
 const PAD_Y = 0.5
@@ -467,12 +471,14 @@ function limitDrawn(el: Els, frame: Frame, view: DashboardView): DrawnFact | nul
   const limit = view.limit
   if (!limit || !view.extras.includes('limits')) return null
   const { Text } = el
-  const names = [limitName('five_hour', frame.lang), limitName('seven_day', frame.lang)]
   const save = t(frame.lang, 'band.save')
-  // Save's word is counted whether it shows or not: turning save mode on moves nothing.
-  const cells = Math.ceil((Math.max(...names.map(textPx)) + CELL_PX + textPx('100%') + CELL_PX + textPx(save)) / CELL_PX)
+  // The window is a gauge (art.ts), not its word: at 100 columns the name "주간"/"Weekly" was cut
+  // to "g…" beside the route, and the window's name and reset stay in the tip (2026-10-14). Save's
+  // word takes room only while save mode is on: reserved always, it cost the limit its place on a
+  // band near 95 columns (2026-10-14).
+  const cells = Math.ceil((16 + CELL_PX + textPx('100%') + (limit.save ? CELL_PX + textPx(save) : 0)) / CELL_PX)
   return drawnFact(el, 'limit', cells, [
-    <Text key="limit-name" color={SUB}>{limitName(limit.kind, frame.lang)}</Text>,
+    pic(el, 'limit', gaugeArt(limit.kind), t(frame.lang, 'band.limit'), 16, 16),
     <Text key="limit-value" color={figure(limitTone(limit.percent))}>{Math.round(limit.percent) + '%'}</Text>,
     limit.save ? <Text key="limit-save" color={TONE.violet.text}>{save}</Text> : '',
   ], limitFact(frame, view)?.card?.join(' · '))
@@ -495,7 +501,7 @@ function routeName(model: string): string {
 }
 
 /** The last route: where it went (the provider's dot), the model, its cache hit; the way into the log. */
-function routeDrawn(el: Els, frame: Frame, view: DashboardView, actions: BandActions): RenderNode {
+function routeDrawn(el: Els, frame: Frame, view: DashboardView, actions: BandActions, room: number): RenderNode {
   const { Box, Text } = el
   if (view.hide.includes('route')) return ''
   const r = view.route
@@ -510,7 +516,7 @@ function routeDrawn(el: Els, frame: Frame, view: DashboardView, actions: BandAct
   const tone = r.cachePct !== undefined ? cacheTone(r.cachePct) : 'ok'
   const tip = routeFact(frame, view, 200, actions.toggleLog)?.card?.join(' · ')
   return (
-    <Box key="fact-route" position="relative" flexDirection="row" alignItems="center" columnGap={1} flexShrink={1} minWidth={ROUTE_ROOM} overflow="hidden" {...(tip ? { hover: { scope: tipScope('route') } } : {})}>
+    <Box key="fact-route" position="relative" flexDirection="row" alignItems="center" columnGap={0.5} flexShrink={1} minWidth={Math.min(ROUTE_ROOM, room)} overflow="hidden" {...(tip ? { hover: { scope: tipScope('route') } } : {})}>
       <Box flexShrink={0}>
         {r.ok ? <Text color={r.resent ? MUTE : providerColor(r.provider)}>{r.resent ? '↻' : '•'}</Text> : <Text color={TONE.red.text}>✕</Text>}
       </Box>
@@ -533,14 +539,24 @@ function routeDrawn(el: Els, frame: Frame, view: DashboardView, actions: BandAct
  * What the row leaves, blank, and each fact's or control's tip laid over it on hover. The judge's
  * reason is no longer written here (cut to a word or two it said nothing, 2026-10-13); it is in the
  * effort's tip.
+ *
+ * The layer is placed absolutely over the facts (columns `left` to the facts' right edge, which is
+ * just before the controls) rather than drawn in what the row leaves free: at the band's real width
+ * (2026-10-14: 100 columns with every fact and control drawn) nothing is left free, and a tip drawn
+ * in a zero-width box never showed. Covering the facts while a tip shows is expected. The tips rest
+ * `display: "none"` (so they take no pointer) and carry no `key`: a keyed Box drawn `display: "none"`
+ * is refused as a hover scope (the pointer could never be over it), so each tip reveals through its
+ * own `hover.scope`, which the fact's or control's hover lights.
  */
-function whyDrawn(el: Els, frame: Frame, tips: { key: string; text: string }[]): RenderNode {
+function whyDrawn(el: Els, frame: Frame, tips: { key: string; text: string }[], at: number): RenderNode {
   const { Box, Text } = el
+  // Placed Box offsets are whole cells; the layer starts at the first cell past 리플이 and the effort.
+  const left = Math.ceil(at)
   const width = Math.max(40, frame.columns) * CELL_PX
   return (
-    <Box key="band-why" position="relative" flexDirection="row" flexGrow={1} flexShrink={1} width={0} minWidth={0} overflow="hidden">
+    <Box key="band-why" position="absolute" top={0} bottom={0} left={left} right={0} minWidth={0} overflow="hidden">
       {tips.map(tip => (
-        <Box key={'tip-' + tip.key} position="absolute" top={0} bottom={0} left={0} right={0} display="none" hover={{ scope: tipScope(tip.key), display: 'flex' }} overflow="hidden">
+        <Box position="absolute" top={0} bottom={0} left={0} right={0} display="none" hover={{ scope: tipScope(tip.key), display: 'flex' }} overflow="hidden">
           <Box position="absolute" top={0} left={0}>
             {pic(el, 'tip-plate-' + tip.key, plateArt(width, ROW_PX), tip.text, width, ROW_PX)}
           </Box>
@@ -590,17 +606,21 @@ function controlsDrawn(el: Els, frame: Frame, view: DashboardView, actions: Band
     const look = advised ? 'primary' : 'ghost'
     out.push({ key: 'handoff', cells: pillArt(label, look, 'violet').cells + 1, node: pill(el, 'handoff', label, look, actions.handoff, 'violet'), tip: t(L, 'alerts.handoffTitle') })
   }
+  // Auto's word is the control (art.ts `wordArt`): lit violet while on, a quiet ghost while off,
+  // pulsing while the judge decides. No switch: the state is in the word's own light (2026-10-14).
   const autoLabel = t(L, 'band.auto')
   const autoTip = t(L, 'band.effortAutoAlt', { state: state(view.auto) }) + ' · ' + t(L, 'settings.autoLine')
-  out.push(words.includes('auto')
-    ? { key: 'auto', cells: toggleCells(autoLabel), node: toggle(el, 'auto', view.auto, autoLabel, actions.toggleAuto, view.effort.mode === 'deciding', tipScope('auto')), tip: autoTip }
-    : { key: 'auto', cells: SWITCH_ONLY, node: lit(el, 'auto', SWITCH_ONLY, [pic(el, 'auto', switchArt(view.auto, view.effort.mode === 'deciding'), autoLabel, 36, 22), press(el, 'auto', SWITCH_ONLY * CELL_PX, actions.toggleAuto)], 0.25, tipScope('auto')), tip: autoTip })
+  out.push({ key: 'auto', cells: wordCells(autoLabel), node: word(el, 'auto', view.auto, autoLabel, actions.toggleAuto, view.effort.mode === 'deciding', tipScope('auto')), tip: autoTip })
   const warmLabel = t(L, 'band.warm')
   out.push(iconControl(el, 'warm', iconArt('flame', view.warm.on, 'amber'), ICON_PX, warmLabel, t(L, 'band.warmAlt', { state: state(view.warm.on) }) + ' · ' + t(L, view.warm.here ? 'band.warmHere' : 'settings.warmLine'), actions.toggleWarm, words.includes('warm') ? warmLabel : undefined, view.warm.on ? TONE.amber.text : SUB))
   const agentsLabel = t(L, 'band.agents')
   const live = view.agents.live
   // The live count sits on the icon's shoulder, in one picture of one width: no width change.
   out.push(iconControl(el, 'agents', agentsArt(live, view.agentsOpen || live > 0), AGENTS_W, live > 0 ? agentsLabel + ' ' + live : agentsLabel, t(L, 'band.agentsAlt', { count: live }), actions.toggleAgents, words.includes('agents') ? agentsLabel : undefined, view.agentsOpen ? INK : SUB))
+  const compactLabel = t(L, 'band.compact')
+  out.push(iconControl(el, 'compact', iconArt('compact', false), ICON_PX, compactLabel, t(L, 'band.compactAlt'), actions.compact, words.includes('compact') ? compactLabel : undefined))
+  const clearLabel = t(L, 'band.clear')
+  out.push(iconControl(el, 'clear', iconArt('clear', false), ICON_PX, clearLabel, t(L, 'band.clearAlt'), actions.clear, words.includes('clear') ? clearLabel : undefined))
   const settingsLabel = t(L, 'band.settings')
   out.push(iconControl(el, 'settings', iconArt('gear', false), ICON_PX, settingsLabel, t(L, 'band.settingsAlt'), actions.openSettings, words.includes('settings') ? settingsLabel : undefined))
   return out
@@ -611,7 +631,7 @@ function effortMenuDrawn(el: Els, frame: Frame, view: DashboardView, actions: Ba
   const current = view.effort.mode === 'manual' || view.effort.mode === 'off' ? view.effort.level : null
   return (
     <Box key="effort-menu" flexDirection="row" alignItems="center" flexWrap="wrap" columnGap={2} rowGap={1} paddingTop={1} paddingLeft={CREST_CELLS}>
-      {toggle(el, 'pick-auto', view.auto, t(frame.lang, 'band.auto'), actions.toggleAuto)}
+      {word(el, 'pick-auto', view.auto, t(frame.lang, 'band.auto'), actions.toggleAuto)}
       {segmented(el, 'pick', EFFORTS.map(effort => ({ value: effort, label: effortName(effort, frame.lang) })), current, effort => actions.pickEffort(effort), 'violet', DEPTH)}
     </Box>
   )
@@ -628,10 +648,17 @@ function bandDrawn(el: Els, frame: Frame, view: DashboardView, actions: BandActi
   const close = actions.hide ? CLOSE_CELLS : 0
   const effort = effortDrawn(el, frame, view, actions)
   const optional = [modeDrawn(el, frame, view), contextDrawn(el, frame, view), cacheDrawn(el, frame, view), limitDrawn(el, frame, view)].filter((f): f is DrawnFact => f !== null)
-  let words: readonly string[] = ['auto', ...WORDLESS]
+  // The Auto word is its control: it never loses its shape, so no word of it is dropped, and the
+  // spare words (the icons' beside it) go first when the row narrows.
+  let words: readonly string[] = [...WORDLESS]
   // Counted with Handoff in its place whether it shows or not, and the route at a fixed room
   // (a long model name is cut, a short one leaves air): what the band holds never depends on a value.
-  const counted = (w: readonly string[]) => controlsDrawn(el, frame, { ...view, handoff: 'advised' }, actions, w).reduce((n, c) => n + c.cells + 0.5, 0)
+  // The air between controls is the row's own columnGap (a fraction of a cell, as the facts' air),
+  // and the hide button a half-separator of its own.
+  const counted = (w: readonly string[]) => {
+    const list = controlsDrawn(el, frame, { ...view, handoff: 'advised' }, actions, w)
+    return list.reduce((n, c) => n + c.cells, 0) + 0.15 * (list.length - 1) + (actions.hide ? 0.15 : 0)
+  }
   let controlCells = counted(words)
   let route = view.hide.includes('route') ? 0 : ROUTE_ROOM
   let ruled = true
@@ -639,16 +666,17 @@ function bandDrawn(el: Els, frame: Frame, view: DashboardView, actions: BandActi
   const rules = (facts: DrawnFact[]) => (ruled ? (facts.length ? RULE_CELLS + DRAWN_GAP : 0) + (route ? RULE_CELLS + DRAWN_GAP : 0) : 0)
   const need = (facts: DrawnFact[]) => CREST_CELLS + DRAWN_GAP + effort.cells + DRAWN_GAP + rules(facts) + span(facts) + (route ? route + DRAWN_GAP : 0) + controlCells + close + 1
   let facts = optional
-  // Narrow, things go in this order until the row fits: the controls' words (settings, agents,
-  // keep-warm), the rules, the standing facts (the plan limit, the mode, context), Auto's word, then
-  // the route and last the cache. A changing figure outlasts a standing state.
-  for (const drop of [...WORDLESS, 'rules', 'limit', 'mode', 'context', 'auto', 'route', 'cache']) {
+  // Narrow, things go in this order until the row fits: the icons' words (clear, compact,
+  // settings, agents, keep-warm), the rules, then the route draws in to its least, then the mode
+  // and the context chip, last the cache. The limit and the new icons stay (2026-10-14: the band
+  // sits at its ~100-column maximum and must hold everything there, Handoff with the rest).
+  for (const drop of [...WORDLESS, 'rules', 'route', 'mode', 'context', 'cache']) {
     if (need(facts) <= cols) break
-    if ((WORDLESS as readonly string[]).includes(drop) || drop === 'auto') {
+    if ((WORDLESS as readonly string[]).includes(drop)) {
       words = words.filter(w => w !== drop)
       controlCells = counted(words)
     } else if (drop === 'rules') ruled = false
-    else if (drop === 'route') route = 0
+    else if (drop === 'route') route = RICH_ROUTE_MIN
     else facts = facts.filter(f => f.key !== drop)
   }
   const controls = controlsDrawn(el, frame, view, actions, words)
@@ -662,7 +690,7 @@ function bandDrawn(el: Els, frame: Frame, view: DashboardView, actions: BandActi
       {ripple(el, 'band-' + mood.face + (mood.dim ? '-dim' : ''), mood.face, 'ClaudeRipple', BAND_RIPPLE, undefined, mood.dim)}
     </Box>
   )
-  const routeNode = route > 0 ? routeDrawn(el, frame, view, actions) : ''
+  const routeNode = route > 0 ? routeDrawn(el, frame, view, actions, route) : ''
   const row = (
     <Box key="band-row" flexDirection="row" alignItems="center" width="100%" minWidth={0} height={rowsOf(ROW_H)}>
       <Box key="band-facts" flexDirection="row" alignItems="center" columnGap={DRAWN_GAP} flexGrow={1} flexShrink={1} width={0} minWidth={0}>
@@ -672,9 +700,9 @@ function bandDrawn(el: Els, frame: Frame, view: DashboardView, actions: BandActi
         {facts.map(f => f.node)}
         {ruled && routeNode ? rule(el, 'route') : null}
         {routeNode}
-        {whyDrawn(el, frame, tips)}
+        {whyDrawn(el, frame, tips, CREST_CELLS + DRAWN_GAP + effort.cells + DRAWN_GAP)}
       </Box>
-      <Box key="band-controls" flexDirection="row" alignItems="center" columnGap={0.5} flexShrink={0} marginLeft={1}>
+      <Box key="band-controls" flexDirection="row" alignItems="center" columnGap={0.15} flexShrink={0} marginLeft={0.5}>
         {controls.map(c => c.node)}
         {actions.hide ? closeButton(el, 'hide', t(frame.lang, 'band.hideBand'), () => actions.hide!(), tipScope('hide')) : null}
       </Box>

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

@@ -22,7 +22,7 @@ import { rippleSource } from './parts'
 import type { Els } from './parts'
 import type { Face } from './ripple'
 import type { Frame } from './view'
-import { CELL_PX, CLOSE_PX, INK, ROW_PX, SUB, SWITCH_H, SWITCH_W, WELL_PX, closeArt, labelPx, pillArt, seaArt, segmentedArt, sliderArt, switchArt, wellArt } from './art'
+import { CELL_PX, CLOSE_PX, INK, ROW_PX, SUB, SWITCH_H, SWITCH_W, WELL_PX, closeArt, extraHoverArt, labelPx, pillArt, seaArt, segmentedArt, sliderArt, switchArt, wellArt, wordArt } from './art'
 import type { Glyph, PillLook, Sea, Tone } from './art'
 import { chOf } from './theme'
 
@@ -35,7 +35,7 @@ const EDGE = 'rgba(128,124,116,0.55)'
 /** A control under the pointer: a soft light on the water. */
 const HOVER = 'rgba(255,255,255,0.09)'
 const HOVER_EDGE = 'rgba(255,255,255,0.16)'
-/** A drawn control's height, px: pills, segments. */
+/** A drawn control's height, px: pills, segments (art.ts holds the same figure). */
 const CONTROL_PX = 26
 
 /** Cells a run of px takes, rounded up. */
@@ -116,6 +116,14 @@ export function lit(el: Els, key: string, cells: number, children: RenderNode[],
   )
 }
 
+/** The drawn light over `cells`, in absolute Boxes of whole cells each. */
+function extraHover(el: Els, cells: number): RenderNode[] {
+  const { Box } = el
+  const parts: RenderNode[] = []
+  for (let i = 0; i < cells; i++) parts.push(<Box key={'extra-' + i} position="absolute" top={0} bottom={0} left={i} width={1}>{pic(el, 'extra-' + i, extraHoverArt(CELL_PX), '', CELL_PX, CONTROL_PX)}</Box>)
+  return parts
+}
+
 /**
  * A capsule: a rounded Box edged in violet light, the deep (art.ts `seaArt`) painted behind it from
  * its top left, and everything it holds in one positioned layer above the sea. `rows` is about how
@@ -184,6 +192,30 @@ export function toggleCells(label: string): number {
   return Math.ceil((SWITCH_W + CELL_PX + chOf(label) * CELL_PX * 1.1) / CELL_PX) + 1
 }
 
+/** Cells the Auto word takes as its own control: its picture's width (the pill's own air drawn in). */
+export function wordCells(label: string): number {
+  return wordArt(label, true).cells
+}
+
+/**
+ * The Auto word as the control itself (art.ts `wordArt`): lit violet while Auto is on, a quiet
+ * ghost while off, pulsing while the judge decides; the whole pressable.
+ */
+export function word(el: Els, key: string, on: boolean, label: string, onPress: () => void, busy = false, scope?: string): RenderNode {
+  const { Box } = el
+  const art = wordArt(label, on, busy)
+  return (
+    <Box key={(on ? 'word-on-' : 'ghost-') + key} position="relative" width={art.cells} height={rowsOf(CONTROL_PX)} flexShrink={0} alignItems="center" justifyContent="center">
+      {pic(el, key, art.source, label, art.cells * CELL_PX, CONTROL_PX)}
+      <Box position="absolute" top={0} bottom={0} left={0} right={0} display="none" hover={{ scope }}>
+        {lift(el)}
+        {extraHover(el, art.cells)}
+      </Box>
+      {press(el, key, art.cells * CELL_PX, onPress)}
+    </Box>
+  )
+}
+
 /** A switch and its word (On / Off), the whole pressable; lit while on. */
 export function toggle(el: Els, key: string, on: boolean, label: string, onPress: () => void, busy = false, scope?: string): RenderNode {
   const { Text } = el

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

@@ -95,6 +95,7 @@ export type BandActions = {
   toggleAuto: () => void
   toggleWarm: () => void
   compact: () => void
+  clear: () => void
   handoff: () => void
   toggleLog: () => void
   toggleAgents: () => void
@@ -125,11 +126,15 @@ export type AlertView =
   | { kind: 'result'; stage: ResultStage; handoffKind?: HandoffKind; detail?: string }
   /** Compact with an optional note of what to keep. */
   | { kind: 'compactNote'; draft: string }
+  /** The band's Clear asks before the conversation is started over. */
+  | { kind: 'clear' }
   /** Quick or full handoff, and what happens after. */
   | { kind: 'handoffChoice'; handoffKind: HandoffKind; after: Settings['handoffAfter'] }
 
 export type AlertActions = {
   compact: (note?: string) => void
+  /** Runs the conversation's clear, from the Clear confirm card. */
+  clear: () => void
   /** Opens the handoff choice bar. */
   handoff: () => void
   dismiss: () => void

package/dist/mod/tests/register.test.tsx

@@ -1753,14 +1753,16 @@ test('every band control changes the next drawing, and a toggle says its state o
   http(on)
   await start($)
   await b.clock.advance(3000)
-  // The terminal says it in the label (● / ○); the desktop in the control's drawing: a switch's lit
-  // track, a lit icon, each picture marked `on` or `off` at its root.
+  // The terminal says it in the label (● / ○); the desktop in the control's drawing: a lit icon,
+  // a lit word, each picture marked `on` or `off` at its root.
   const desktopState = (n: unknown) => {
     const drawing = JSON.stringify(n ?? '')
     return /<svg[^>]* class=\\"on\\"/.test(drawing) ? 'on' : /<svg[^>]* class=\\"off\\"/.test(drawing) ? 'off' : 'other'
   }
   const state = async (ui: Awaited<ReturnType<typeof band>>, key: string, surface: string) =>
-    surface === 'desktop' ? desktopState(await ui.find({ type: 'Box', key: 'hv-' + key })) : (n => /●/.test(String(n?.props.label)) ? 'on' : /○/.test(String(n?.props.label)) ? 'off' : 'other')(await ui.find({ type: 'Button', key }))
+    surface === 'desktop'
+      ? desktopState(await ui.find({ type: 'Box', key: key === 'auto' ? 'word-on-auto' : 'hv-' + key }) ?? await ui.find({ type: 'Box', key: 'ghost-' + key }))
+      : (n => /●/.test(String(n?.props.label)) ? 'on' : /○/.test(String(n?.props.label)) ? 'off' : 'other')(await ui.find({ type: 'Button', key }))
   for (const surface of ['terminal', 'desktop'] as const) {
     const ui = await band($, surface)
     const drawn = async () => JSON.stringify(await ui.drawn()).replace(/"handle":\d+/g, '')
@@ -1791,3 +1793,29 @@ test('every band control changes the next drawing, and a toggle says its state o
     await ui.unmount()
   }
 })
+
+// 2026-10-14: the band's Clear icon asks before it runs /clear; Cancel leaves the chat alone.
+test('the band Clear asks first, and confirming runs the clear once', async ($, on) => {
+  const b = boundaries(on)
+  http(on)
+  const commands: string[] = []
+  on('command.run', { command: 'clear' }, () => { commands.push('clear'); return {} })
+  await start($)
+  const ui = await band($, 'desktop')
+  expect(await ui.find({ key: 'clear' })).toBeDefined()
+  await ui.press({ key: 'clear' })
+  expect(commands).toEqual([])
+  expect(await ui.find({ type: 'Text', text: 'Start this conversation over?' })).toBeDefined()
+  expect(await ui.find({ type: 'Text', text: /context is emptied/ })).toBeDefined()
+  // Cancel keeps the conversation and closes the card.
+  await ui.press({ key: 'dismiss' })
+  expect(commands).toEqual([])
+  expect(await ui.find({ type: 'Text', text: 'Start this conversation over?' })).toBeUndefined()
+  // The main action runs the clear once.
+  await ui.press({ key: 'clear' })
+  await ui.press({ key: 'clear-go' })
+  await b.clock.advance(3000)
+  expect(commands).toEqual(['clear'])
+  expect(await ui.find({ type: 'Text', text: 'Start this conversation over?' })).toBeUndefined()
+  await ui.unmount()
+})