clauderipple 0.9.2 → 0.9.4

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

@@ -278,6 +278,9 @@ export function plateArt(width: number, height: number): string {
 
 // ---- Controls -----------------------------------------------------------------------------------
 
+/** A drawn control's height, px (kit.tsx holds it too for the wells). */
+export const CONTROL_PX = 26
+
 export const SWITCH_W = 36
 export const SWITCH_H = 22
 
@@ -299,6 +302,18 @@ function lit(on: boolean): string {
   return ' class="' + (on ? 'on' : 'off') + '"'
 }
 
+/**
+ * One cell of the drawn light laid over a control under the pointer (kit.tsx `extraHover`): a thin
+ * white wash, its edges fading, on the water's dark.
+ */
+export function extraHoverArt(widthPx: number): string {
+  return svg(widthPx, CONTROL_PX,
+    '<defs><linearGradient id="f" x1="0" x2="1"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset=".5" stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient>' +
+    '<linearGradient id="v" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#fff" stop-opacity=".12"/><stop offset=".5" stop-color="#fff" stop-opacity=".02"/><stop offset="1" stop-color="#fff" stop-opacity=".12"/></linearGradient></defs>' +
+    '<rect x="0" y="2" width="' + r(widthPx) + '" height="' + r(CONTROL_PX - 4) + '" fill="url(#f)"/>' +
+    '<rect x="2" y="1" width="' + r(Math.max(0, widthPx - 4)) + '" height="' + r(CONTROL_PX - 2) + '" fill="url(#v)"/>')
+}
+
 /** The look of a drawn button: the one thing to press, or a quiet one. */
 export type PillLook = 'primary' | 'ghost'
 
@@ -346,6 +361,37 @@ export function pillArt(label: string, look: PillLook, tone: Tone = 'violet', gl
   return { source: svg(w, h, body), cells }
 }
 
+/**
+ * A word that is itself a control, 26 px high: on, a lit violet pill with the word in white (the
+ * whole capsule's one violet check, on hover a pulse breathing around it); off, a quiet ghost with
+ * the word in soft ink. The deciding pulse rings the lit pill.
+ */
+export function wordArt(label: string, on: boolean, busy = false): { source: string; cells: number } {
+  const t = TONE.violet
+  const size = 12
+  const pad = 11
+  const cells = Math.ceil((labelPx(label, size) + pad * 2) / CELL_PX)
+  const w = cells * CELL_PX
+  const h = 26
+  let body: string
+  let css = ''
+  if (on) {
+    body =
+      '<defs><linearGradient id="g" x1="0" x2="1"><stop offset="0" stop-color="' + t.lo + '"/><stop offset="1" stop-color="' + t.hi + '"/></linearGradient>' +
+      '<filter id="f" x="-30%" y="-60%" width="160%" height="220%"><feGaussianBlur stdDeviation="1.8"/></filter></defs>' +
+      (busy ? '<rect class="pu" x="1" y="1" width="' + r(w - 2) + '" height="' + (h - 2) + '" rx="' + (h / 2 - 1) + '" fill="none" stroke="' + t.hi + '" stroke-width="1.4" filter="url(#f)"/>' : '') +
+      '<rect x="1" y="1" width="' + r(w - 2) + '" height="' + (h - 2) + '" rx="' + (h / 2 - 1) + '" fill="url(#g)"/>' +
+      '<rect x="2" y="1.5" width="' + r(w - 4) + '" height="' + (h / 2 - 2) + '" rx="' + (h / 4) + '" fill="#fff" fill-opacity=".16"/>' +
+      '<text x="' + r(w / 2) + '" y="' + r(h / 2 + size * 0.36) + '" text-anchor="middle" font-size="' + size + '" font-weight="650" fill="' + t.on + '">' + esc(label) + '</text>'
+    css += busy ? '.pu{transform-box:fill-box;transform-origin:center;animation:pu 1.3s ease-in-out infinite}@keyframes pu{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.15;transform:scale(1.06)}}' : ''
+  } else {
+    body =
+      '<rect x="1" y="1" width="' + r(w - 2) + '" height="' + (h - 2) + '" rx="' + (h / 2 - 1) + '" fill="#fff" fill-opacity=".05" stroke="' + HAIR + '" stroke-opacity=".2"/>' +
+      '<text x="' + r(w / 2) + '" y="' + r(h / 2 + size * 0.36) + '" text-anchor="middle" font-size="' + size + '" font-weight="500" fill="' + SOFT + '" opacity=".55">' + esc(label) + '</text>'
+  }
+  return { source: svg(w, h, body, css, lit(on)), cells }
+}
+
 /**
  * A segmented control, its segments `cells` wide each and 26 px high: a dark track, the chosen
  * segment a lit pill in `tone`, the rest named in soft ink. `chosen` −1 lights none.
@@ -431,8 +477,8 @@ export function wellArt(width: number, height: number): string {
 export const CLOSE_PX = 22
 
 /** The way out of a capsule, 22 px: a soft disc with a ×. */
-export function closeArt(): string {
-  return svg(CLOSE_PX, CLOSE_PX, '<circle cx="11" cy="11" r="10" fill="#fff" fill-opacity=".07" stroke="' + HAIR + '" stroke-opacity=".2"/><path d="M7.6 7.6l6.8 6.8M14.4 7.6l-6.8 6.8" stroke="' + LABEL + '" stroke-width="1.6" stroke-linecap="round"/>')
+export function closeArt(lit = false): string {
+  return svg(CLOSE_PX, CLOSE_PX, '<circle cx="11" cy="11" r="10" fill="#fff" fill-opacity="' + (lit ? '.16' : '.07') + '" stroke="' + HAIR + '" stroke-opacity="' + (lit ? '.45' : '.2') + '"/><path d="M7.6 7.6l6.8 6.8M14.4 7.6l-6.8 6.8" stroke="' + LABEL + '" stroke-width="1.6" stroke-linecap="round"/>')
 }
 
 // ---- The band's instruments ---------------------------------------------------------------------
@@ -496,10 +542,23 @@ export function clockArt(share: number, tone: Tone | 'soft'): string {
   return svg(s, s, '<circle cx="' + c + '" cy="' + c + '" r="' + rad + '" fill="none" stroke="' + fill + '" stroke-opacity=".75" stroke-width="1.3"/>' + pie)
 }
 
+/**
+ * The plan limit's window as a small gauge, 16 px, in the idiom of the ring and the clock: a dial
+ * with a needle, the two windows a needle at a different turn (the five-hour one up, the weekly one
+ * leaning right). The window's name and its reset time are in the fact's own tip; a band at 100
+ * columns once cut this fact's name to "g…" (2026-10-14), and the glyph buys the room back.
+ */
+export function gaugeArt(kind: string): string {
+  const stroke = SOFT
+  const arc = '<path d="M1.8 11.4A6.2 6.2 0 0 1 14.2 11.4" fill="none" stroke="' + stroke + '" stroke-opacity=".7" stroke-width="1.3" stroke-linecap="round"/>'
+  const needle = kind === 'seven_day' ? 'M8 11.4L11.4 7.6' : 'M8 11.4L8 6.5'
+  return svg(16, 16, arc + '<path d="' + needle + '" fill="none" stroke="' + stroke + '" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="11.4" r="1.2" fill="' + stroke + '"/>')
+}
+
 export const ICON_PX = 16
 
 /** Line icons of the band's controls, 16 px. */
-export type Icon = 'flame' | 'gear' | 'agents' | 'log'
+export type Icon = 'flame' | 'gear' | 'agents' | 'log' | 'compact' | 'clear'
 
 const FLAME = 'M8.1 14.3c2.8 0 4.5-1.9 4.5-4.4 0-2.8-2.4-4.2-2.8-7.2-1.7 1.1-2.6 2.8-2.5 4.3-1-.4-1.5-1.4-1.6-2.3-1.4 1.3-2 2.9-2 5.2 0 2.5 1.6 4.4 4.4 4.4z'
 
@@ -508,6 +567,10 @@ const ICON: Record<Icon, string> = {
   gear: '<circle cx="8" cy="8" r="2.3"/><path d="M8 1.7v1.8M8 12.5v1.8M1.7 8h1.8M12.5 8h1.8M3.5 3.5l1.3 1.3M11.2 11.2l1.3 1.3M3.5 12.5l1.3-1.3M11.2 4.8l1.3-1.3"/><circle cx="8" cy="8" r="4.8"/>',
   agents: '<circle cx="4.8" cy="5" r="2.1"/><circle cx="11.4" cy="5" r="2.1"/><path d="M1.6 13.4c.4-2.4 1.7-3.6 3.2-3.6s2.8 1.2 3.2 3.6M8.2 13.4c.4-2.4 1.7-3.6 3.2-3.6s2.8 1.2 3.2 3.6"/>',
   log: '<path d="M2.4 3.8h11.2M2.4 8h11.2M2.4 12.2h6.8"/>',
+  // Two arrows coming in from the corners to the middle: the chat drawn down into itself.
+  compact: '<path d="M3.2 3.2L7.1 7.1M7.1 7.1H4.9M7.1 7.1V4.9M12.8 12.8L8.9 8.9M8.9 8.9h2.2M8.9 8.9v2.2"/>',
+  // An eraser laid on its edge, the sleeve band bold, a short line being swept away below.
+  clear: '<path d="M1.33 8.69L5.8 4.94L9.01 8.77L4.55 12.52Z" fill="#fff" fill-opacity=".4" stroke="none"/><path d="M9.45 1.88L12.67 5.71L4.55 12.52L1.33 8.69Z"/><path d="M9.01 8.77L5.8 4.94"/><path d="M3.45 14.3h9.1"/>',
 }
 
 /**

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
@@ -161,9 +169,22 @@ export function pill(el: Els, key: string, label: string, look: PillLook, onPres
 /** Cells the way out takes. */
 export const CLOSE_CELLS = cellsOf(CLOSE_PX + 4)
 
-/** The way out: a soft disc with a ×, `label` its name for a reader that cannot see it. */
+/**
+ * The way out: a soft disc with a ×, `label` its name for a reader that cannot see it. The disc is
+ * its own light under the pointer: `lit`'s rounded box around it read as a second button
+ * (2026-10-14).
+ */
 export function closeButton(el: Els, key: string, label: string, onPress: () => void, scope?: string): RenderNode {
-  return lit(el, key, CLOSE_CELLS, [pic(el, key, closeArt(), label, CLOSE_PX, CLOSE_PX), press(el, key, CLOSE_CELLS * CELL_PX, onPress)], 0.25, scope)
+  const { Box } = el
+  return (
+    <Box key={'hv-' + key} position="relative" flexDirection="row" alignItems="center" justifyContent="center" width={CLOSE_CELLS} flexShrink={0} {...(scope ? { hover: { scope } } : {})}>
+      {pic(el, key, closeArt(), label, CLOSE_PX, CLOSE_PX)}
+      <Box position="absolute" top={0} bottom={0} left={0} right={0} alignItems="center" justifyContent="center" display="none" hover={{ display: 'flex' }}>
+        {pic(el, key + '-lit', closeArt(true), label, CLOSE_PX, CLOSE_PX)}
+      </Box>
+      {press(el, key, CLOSE_CELLS * CELL_PX, onPress)}
+    </Box>
+  )
 }
 
 /** Cells a switch and its word take, their hover's air included. */
@@ -171,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/hooks/workers.ts

@@ -93,8 +93,8 @@ export function scoreModels(raw: unknown): ModelScore[] {
  * Allow-lists name worker agents, and Claude's own models as `general-purpose:<model>`; provider
  * names from settings saved before 2026-10-10 still match.
  */
-export function allowed(candidate: WorkerCandidate, allow: readonly string[]): boolean {
-  return isAllowed(candidateKey(candidate.target), candidate.provider, allow)
+export function allowed(candidate: WorkerCandidate, allow: readonly string[], known: readonly string[] = []): boolean {
+  return isAllowed(candidateKey(candidate.target), candidate.provider, allow, known)
 }
 /** Claude's own models as candidates: general-purpose on each. */
 export function claudeCandidates(): WorkerCandidate[] {
@@ -106,16 +106,16 @@ const BILLINGS: readonly Billing[] = ['free', 'payg', 'subscription']
  * provider can run now, with ladders, billing and cheapest measured cost, then Claude's own
  * models; only the ticked ones (`allow`, empty for every model).
  */
-export function ladderOptionsFrom(raw: unknown, until: number, allow: readonly string[] = []): LadderOptions {
+export function ladderOptionsFrom(raw: unknown, until: number, allow: readonly string[] = [], allowKnown: readonly string[] = []): LadderOptions {
   const root = record(raw)
   const efforts = (value: unknown): Effort[] => list(value).filter((e): e is Effort => EFFORTS.includes(e as Effort))
   const usable = new Set(list(root.providers).flatMap(p => { const v = record(p); return typeof v.name === 'string' && v.usable !== false ? [v.name] : [] }))
-  const known = list(root.providers).length > 0
+  const catalogue = list(root.providers).length > 0
   const scores = scoreModels(root.scores)
   const choices: LadderChoice[] = list(root.agents).flatMap(value => {
     const a = record(value)
     if (typeof a.name !== 'string' || !a.name || typeof a.model !== 'string' || typeof a.provider !== 'string') return []
-    if (known && !usable.has(a.provider)) return []
+    if (catalogue && !usable.has(a.provider)) return []
     const costs = (scores.find(s => s.model === a.model && s.provider === a.provider)?.variants ?? []).flatMap(v => v.costPerTask === null ? [] : [v.costPerTask])
     const billing = BILLINGS.includes(a.billing as Billing) ? a.billing as Billing : 'payg'
     return [{ target: { agent: a.name }, model: a.model, provider: a.provider, billing, efforts: efforts(a.efforts), ...(costs.length ? { cost: Math.min(...costs) } : {}) }]
@@ -125,7 +125,7 @@ export function ladderOptionsFrom(raw: unknown, until: number, allow: readonly s
     if (typeof p.name !== 'string' || typeof p.usable !== 'boolean') return []
     return [[p.name, { usable: p.usable, ...(typeof p.reason === 'string' ? { reason: p.reason } : {}), ...(typeof p.exhaustedUntil === 'number' ? { exhaustedUntil: p.exhaustedUntil } : {}) }]]
   }))
-  return { until, choices: tickedChoices([...choices, ...claudeChoices(efforts(root.claudeEfforts))], allow), providers }
+  return { until, choices: tickedChoices([...choices, ...claudeChoices(efforts(root.claudeEfforts))], allow, allowKnown), providers }
 }
 export function candidateUsable(candidate: WorkerCandidate, settings: Settings, chatgpt: boolean, providers: NonNullable<LadderOptions['providers']> = {}): boolean {
   const live = providers[candidate.provider]
@@ -152,7 +152,7 @@ export const SESSION_MODEL: TierTarget = { agent: 'general-purpose' }
  * The ladder: the verdict's rung, else one rung up, else the session model, never down. Whatever
  * ran instead says why (the fallback toast).
  */
-export function ladderPick(verdict: WorkerVerdict, rule: Rule, settings: Settings, candidates: readonly WorkerCandidate[], chatgpt: boolean, lang: Lang, allow: readonly string[] = [], providers: NonNullable<LadderOptions['providers']> = {}): Resolution {
+export function ladderPick(verdict: WorkerVerdict, rule: Rule, settings: Settings, candidates: readonly WorkerCandidate[], chatgpt: boolean, lang: Lang, allow: readonly string[] = [], providers: NonNullable<LadderOptions['providers']> = {}, known: readonly string[] = []): Resolution {
   const wanted = rungOf(verdict)
   const skipped: NonNullable<Resolution['skipped']> = []
   const reasons: string[] = []
@@ -163,7 +163,7 @@ export function ladderPick(verdict: WorkerVerdict, rule: Rule, settings: Setting
     for (const [index, step] of steps.entries()) {
       const target = step.target
       const candidate = candidateOf(target, candidates)
-      const ticked = target.agent === 'general-purpose' && !target.model || candidate && allowed(candidate, allow)
+      const ticked = target.agent === 'general-purpose' && !target.model || candidate && allowed(candidate, allow, known)
       if (candidate && candidateUsable(candidate, settings, chatgpt, providers) && ticked) {
         return { target: { ...target }, effort: step.effort, rung, position: index + 1, skipped, ...(reasons.length ? { fallbackReason: reasons.join('; ') } : {}) }
       }

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

@@ -1184,6 +1184,16 @@ for (const surface of ['terminal', 'desktop'] as const) test('quick controls sav
   await ui.unmount()
 })
 
+test('ripple-bar says where the line is when the layout is minimal', async ($, on) => {
+  const b = boundaries(on, { layout: 'minimal' })
+  http(on)
+  await start($)
+  const run = () => $.command.run({ command: 'ripple-bar', origin: { kind: 'composer' }, presentation: { isFullscreen: true, columns: 140 }, args: '' })
+  expect((await run()).text).toContain('hidden')
+  expect(b.saved.get('bandHidden')).toBe(true)
+  expect((await run()).text).toContain('Minimal')
+})
+
 for (const surface of ['terminal', 'desktop'] as const) test('quick settings select a saved mode, never edit rungs, on ' + surface, async ($, on) => {
   const b = boundaries(on, { modes: BURN })
   http(on)
@@ -1743,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, '')
@@ -1781,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()
+})