clauderipple 0.9.4 → 0.10.0

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

@@ -32,16 +32,18 @@ import { t } from '../i18n'
 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, gaugeArt, iconArt, meterArt, pillArt, plateArt, ringArt, ruleArt, textPx } from './art'
+import type { Effort, LimitItem } from '../../types'
+import { AGENTS_W, CELL_PX, DEPTH, ICON_PX, METER_H, METER_W, MUTE, ROW_PX, SUB, TONE, barArt, textPx } from './art'
+import { lookOf } from './look'
+import type { Word } from './look'
 import type { Sea, Tone } from './art'
-import { CLOSE_CELLS, capsule, closeButton, lift, lit, pic, pill, press, ripple, rowsOf, segmented, word, wordCells } from './kit'
+import { CLOSE_CELLS, capsule, closeButton, hoverLight, 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'
 import { cacheTone, chOf, clip, contextTone, displayWidth, limitTone, providerColor, textTone } from './theme'
-import type { BandActions, DashboardView, Frame } from './view'
-import { EFFORTS, compactNumber, effortIndex, effortLabel, effortName, isRich, limitName, minutesLeft, modelName, resetsLabel, seconds } from './view'
+import type { BandActions, DashboardView, Frame, LimitGroup } from './view'
+import { EFFORTS, compactNumber, effortIndex, effortLabel, effortName, isRich, limitGroupName, limitGroups, limitItemName, limitItemTip, limitName, minutesLeft, modelName, narrowLimitGroups, resetsLabel, seconds } from './view'
 
 /** Growing ripples: low → max. */
 const RIPPLE_CHAR = ['·', '∘', '○', '◎', '◉']
@@ -88,7 +90,7 @@ const WHY_CELLS = 28
 type Run = { text: string; color?: string; dim?: boolean; bold?: boolean }
 
 /** One fact of the band: a slot of fixed width holding a glyph, a value and quiet trailing runs. */
-type Fact = {
+export type Fact = {
   key: string
   /** Cells the slot takes, whatever it shows. */
   width: number
@@ -130,7 +132,7 @@ function effortWords(lang: Lang, rich: boolean): string[] {
 
 // ---- Facts -------------------------------------------------------------------------------------
 
-function effortFact(frame: Frame, view: DashboardView, onPress: () => void): Fact {
+export function effortFact(frame: Frame, view: DashboardView, onPress: () => void): Fact {
   const rich = isRich(frame)
   const accent = textTone(frame.appearance).accent
   const { level, mode, why } = view.effort
@@ -173,7 +175,7 @@ export function modeLabel(name: string): string {
  * The active operating mode, when one is on: "Mode Burn GPT" in the accent, its slot the same
  * width whatever the name (cut past MODE_CELLS), the whole name in the hover card.
  */
-function modeFact(frame: Frame, view: DashboardView): Fact | null {
+export function modeFact(frame: Frame, view: DashboardView): Fact | null {
   if (!view.mode) return null
   const rich = isRich(frame)
   const name = t(frame.lang, 'band.mode')
@@ -189,7 +191,7 @@ function pie(frac: number): string {
   return frac > 0.875 ? '●' : frac > 0.625 ? '◕' : frac > 0.375 ? '◑' : frac > 0.125 ? '◔' : '○'
 }
 
-function cacheFact(frame: Frame, view: DashboardView): Fact | null {
+export function cacheFact(frame: Frame, view: DashboardView): Fact | null {
   if (view.hide.includes('timer')) return null
   const accent = textTone(frame.appearance).accent
   const cache = view.cache
@@ -215,7 +217,7 @@ function cacheFact(frame: Frame, view: DashboardView): Fact | null {
   return { key: 'cache', width: Math.ceil(chOf(name) + 1 + Math.max(...words.map(chOf))), label: { text: name, dim: true }, value, card: [tip] }
 }
 
-function contextFact(frame: Frame, view: DashboardView): Fact | null {
+export function contextFact(frame: Frame, view: DashboardView): Fact | null {
   const ctx = view.context
   if (!ctx || !view.extras.includes('context')) return null
   const tone = contextTone(ctx.percent, view.swampAt)
@@ -228,7 +230,7 @@ function contextFact(frame: Frame, view: DashboardView): Fact | null {
   return { key: 'context', width, ...(rich ? { label: { text: name, dim: true } } : {}), value, card: [t(frame.lang, 'band.contextAlt', { value: Math.round(ctx.percent) + '%', window: compactNumber(ctx.window), tokens: compactNumber(ctx.tokens) })] }
 }
 
-function limitFact(frame: Frame, view: DashboardView): Fact | null {
+export function limitFact(frame: Frame, view: DashboardView): Fact | null {
   const limit = view.limit
   if (!limit || !view.extras.includes('limits')) return null
   const tone = limitTone(limit.percent)
@@ -252,7 +254,7 @@ function limitFact(frame: Frame, view: DashboardView): Fact | null {
 }
 
 /** The last route in `room` cells, or the router's notice; null when there is neither or no room. */
-function routeFact(frame: Frame, view: DashboardView, room: number, onPress: () => void): Fact | null {
+export function routeFact(frame: Frame, view: DashboardView, room: number, onPress: () => void): Fact | null {
   const rich = isRich(frame)
   if (view.hide.includes('route') || room < (rich ? RICH_ROUTE_MIN : ROUTE_MIN)) return null
   const r = view.route
@@ -352,6 +354,9 @@ function factsFor(frame: Frame, view: DashboardView, actions: BandActions, room:
 // model the way into the log); the judge's reason in what is left. Then the controls, each lit
 // under the pointer: Handoff when advised, Auto's switch, keep-warm's flame, the agents, settings,
 // and the way out. Pointing at a fact shows what it means in the reason's place.
+// With the `limits` extra on and any window known, a second row under the first (starting where
+// the effort does) gauges every plan window — Claude's, then each ChatGPT account's — and the
+// first row's limit fact steps aside for the route.
 
 /** 리플이 in the band, px: the mini drawing (ripple.ts), a little taller than a line of text. */
 export const BAND_RIPPLE = 24
@@ -406,12 +411,14 @@ function drawnFact(el: Els, key: string, cells: number, children: RenderNode[],
 }
 
 /** A figure's colour by its tone: bright ink while all is well, amber, then red. */
-function figure(tone: 'ink' | 'ok' | 'warn' | 'bad'): string {
-  return tone === 'warn' ? TONE.amber.text : tone === 'bad' ? TONE.red.text : INK
+function figure(frame: Frame, tone: 'ink' | 'ok' | 'warn' | 'bad'): Word {
+  const k = lookOf(frame)
+  return tone === 'warn' ? { color: k.tone('amber') } : tone === 'bad' ? { color: k.tone('red') } : k.ink
 }
 
 function effortDrawn(el: Els, frame: Frame, view: DashboardView, actions: BandActions): DrawnFact {
   const { Box, Text } = el
+  const k = lookOf(frame)
   const { level, mode } = view.effort
   const idx = effortIndex(level)
   const word = mode === 'deciding' ? t(frame.lang, 'band.deciding') : level ? effortName(level, frame.lang) : '—'
@@ -425,9 +432,9 @@ function effortDrawn(el: Els, frame: Frame, view: DashboardView, actions: BandAc
     'effort',
     cells,
     [
-      pic(el, 'meter', meterArt(mode === 'deciding' ? 5 : idx + 1, look), t(frame.lang, 'band.effort'), METER_W, METER_H),
+      pic(el, 'meter', k.art.meter(mode === 'deciding' ? 5 : idx + 1, look), t(frame.lang, 'band.effort'), METER_W, METER_H),
       <Box key="effort-word" flexShrink={0}>
-        <Text bold color={mode === 'deciding' ? TONE.violet.text : look === 'quiet' ? MUTE : INK}>{word}</Text>
+        <Text bold {...(mode === 'deciding' ? { color: k.tone('violet') } : look === 'quiet' ? k.mute : k.ink)}>{word}</Text>
       </Box>,
       press(el, 'effort', cells * CELL_PX, actions.toggleEffortMenu),
     ],
@@ -443,8 +450,8 @@ function contextDrawn(el: Els, frame: Frame, view: DashboardView): DrawnFact | n
   const tip = contextFact(frame, view)?.card?.join(' · ')
   const cells = Math.ceil((16 + CELL_PX + textPx('100%')) / CELL_PX)
   return drawnFact(el, 'context', cells, [
-    pic(el, 'ring', ringArt(ctx.percent, tone === 'ink' ? 'ink' : tone === 'warn' ? 'amber' : 'red'), t(frame.lang, 'band.context'), 16, 16),
-    <Text key="ctx-value" color={figure(tone)}>{Math.round(ctx.percent) + '%'}</Text>,
+    pic(el, 'ring', lookOf(frame).art.ring(ctx.percent, tone === 'ink' ? 'ink' : tone === 'warn' ? 'amber' : 'red'), t(frame.lang, 'band.context'), 16, 16),
+    <Text key="ctx-value" {...figure(frame, tone)}>{Math.round(ctx.percent) + '%'}</Text>,
   ], tip)
 }
 
@@ -455,6 +462,7 @@ function cacheDrawn(el: Els, frame: Frame, view: DashboardView): DrawnFact | nul
   const left = cache ? cache.expiresAt - frame.now : 0
   const shown = cache && left > 0 ? Math.ceil(left / 60_000) : 0
   const held = view.warm.on && !view.warm.stopped
+  const k = lookOf(frame)
   const drowsy = !!cache && shown > 0 && !held && shown * 60_000 <= Math.min(DROWSY_MS, cache.ttlMs / 5)
   const tone: Tone | 'soft' = shown === 0 ? 'soft' : drowsy ? 'amber' : held ? 'violet' : 'soft'
   const text = cache ? minutesLeft(left, frame.lang) : '—'
@@ -462,8 +470,8 @@ function cacheDrawn(el: Els, frame: Frame, view: DashboardView): DrawnFact | nul
   const cells = Math.ceil((16 + CELL_PX + Math.max(...words.map(textPx))) / CELL_PX)
   const tip = cacheFact(frame, view)?.card?.join(' · ')
   return drawnFact(el, 'cache', cells, [
-    pic(el, 'clock', clockArt(cache ? (shown * 60_000) / cache.ttlMs : 0, tone), t(frame.lang, 'band.cache'), 16, 16),
-    <Text key="cache-value" color={drowsy ? TONE.amber.text : shown === 0 ? MUTE : held ? TONE.violet.text : INK}>{text}</Text>,
+    pic(el, 'clock', k.art.clock(cache ? (shown * 60_000) / cache.ttlMs : 0, tone), t(frame.lang, 'band.cache'), 16, 16),
+    <Text key="cache-value" {...(drowsy ? { color: k.tone('amber') } : shown === 0 ? k.mute : held ? { color: k.tone('violet') } : k.ink)}>{text}</Text>,
   ], tip)
 }
 
@@ -478,9 +486,9 @@ function limitDrawn(el: Els, frame: Frame, view: DashboardView): DrawnFact | nul
   // 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, [
-    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> : '',
+    pic(el, 'limit', lookOf(frame).art.gauge(limit.kind), t(frame.lang, 'band.limit'), 16, 16),
+    <Text key="limit-value" {...figure(frame, limitTone(limit.percent))}>{Math.round(limit.percent) + '%'}</Text>,
+    limit.save ? <Text key="limit-save" color={lookOf(frame).tone('violet')}>{save}</Text> : '',
   ], limitFact(frame, view)?.card?.join(' · '))
 }
 
@@ -488,15 +496,161 @@ function modeDrawn(el: Els, frame: Frame, view: DashboardView): DrawnFact | null
   if (!view.mode) return null
   const { Text } = el
   // One slot whatever the name (cut past MODE_CELLS; Latin capitals run ~1.1 ch).
-  const amber = TONE.amber.text
+  const amber = lookOf(frame).tone('amber')
   return drawnFact(el, 'mode', 2 + Math.ceil(MODE_CELLS * 1.1), [<Text key="mode-mark" color={amber}>◆</Text>, <Text key="mode-name" color={amber}>{modeLabel(view.mode)}</Text>], t(frame.lang, 'band.modeTip', { name: view.mode }))
 }
 
+// ---- Limits row ----------------------------------------------------------------------------------
+//
+// The capsule's second row, under the first and starting where the effort does (a CREST_CELLS
+// indent): every plan window as a small gauge — Claude's 5-hour, weekly and per-model weeklies,
+// then each ChatGPT account's. A thinner row than the first (a line of text or so); the reset is
+// in the hover tip, which shows in the first row's tip place (see whyDrawn). Widths alone decide,
+// never values: the bar is one width, the figure's slot fits "100%", and only the name takes what
+// it takes (a changing figure never moves a neighbour). Narrow, the GPT accounts go first (the
+// last one first), then the per-model windows; what is left not fitting means no second row, and
+// the first row keeps its limit fact as before.
+
+/** A limit window's bar, px: beside each window's name and figure, in the row's own line. */
+const BAR_W = 36
+const BAR_H = 6
+/** The air between the row's groups, in cells (a rule stands in it, as on the first row). */
+const LIMITS_GAP = 2
+
+/** Cells a window's figure takes: whatever it shows, the slot fits the widest ("100%"). */
+function figureCells(): number {
+  return Math.ceil(textPx('100%') / CELL_PX)
+}
+
+/**
+ * How much each window takes, widest first; the row takes the first that fits all its groups.
+ * `gauge`: name, bar, figure. `figures`: name and figure. `compact`: a group's figures alone,
+ * "1 / 88 / 2%" in its windows' order (the menu-bar and old footer idiom), each in its own tone, the
+ * names and resets in the group's tip. At ~100 columns four providers fit only compact
+ * (2026-10-15: Claude, GPT, Gemini and Go took ~207 cells as gauges against 96).
+ */
+type LimitDensity = 'gauge' | 'figures' | 'compact'
+const DENSITIES: readonly LimitDensity[] = ['gauge', 'figures', 'compact']
+
+/** Cells one window takes at a density (compact: its number's slot and the separator after it). */
+function limitItemCells(item: LimitItem, density: LimitDensity, lang: Lang): number {
+  // A figure's slot and the " / " after it, in fractions of a cell: summed per group, then rounded up.
+  // Two digits: a window at 100% is spent and runs into the air after its group, which is wider.
+  if (density === 'compact') return textPx('00 / ') / CELL_PX
+  const name = Math.ceil(textPx(limitItemName(item, lang)) / CELL_PX) + 1
+  return name + (density === 'gauge' ? Math.ceil(BAR_W / CELL_PX) + 1 : 0) + figureCells()
+}
+
+function limitItemDrawn(el: Els, frame: Frame, item: LimitItem, key: string, tip: string, density: Exclude<LimitDensity, 'compact'>): DrawnFact {
+  const { Text } = el
+  const tone = limitTone(item.percent)
+  const name = limitItemName(item, frame.lang)
+  return drawnFact(
+    el,
+    key,
+    limitItemCells(item, density, frame.lang),
+    [
+      <Text key="limit-name" {...lookOf(frame).mute}>{name}</Text>,
+      density === 'gauge' ? pic(el, key + '-bar', barArt(item.percent, tone === 'ink' ? 'ink' : tone === 'warn' ? 'amber' : 'red'), name, BAR_W, BAR_H) : '',
+      <Text key="limit-value" {...figure(frame, tone)}>{Math.round(item.percent) + '%'}</Text>,
+    ],
+    tip,
+  )
+}
+
+/** A group's windows as one run of figures, "1 / 88 / 2%", each figure in its own tone. */
+function compactDrawn(el: Els, frame: Frame, group: LimitGroup, key: string, tip: string, lang: Lang): DrawnFact {
+  const { Text } = el
+  const runs: RenderNode[] = []
+  group.items.forEach((item, i) => {
+    runs.push(<Text key={'n' + i} {...figure(frame, limitTone(item.percent))}>{String(Math.round(item.percent))}</Text>)
+    runs.push(<Text key={'s' + i} {...lookOf(frame).mute}>{i < group.items.length - 1 ? ' / ' : '%'}</Text>)
+  })
+  const cells = Math.ceil(group.items.reduce((n, item) => n + limitItemCells(item, 'compact', lang), 0))
+  return drawnFact(el, key, cells, [<Text key="limit-figures">{runs}</Text>], tip)
+}
+
+/** Save mode's word after Claude's windows while it is on (it holds Auto down until Claude's reset). */
+function saveWord(group: LimitGroup, save: boolean, lang: Lang): string {
+  return save && (group.type === 'anthropic' || group.provider === 'claude') ? t(lang, 'band.save') : ''
+}
+
+/** Cells a group takes at a density: its head (the provider's dot and short name), its windows, save's word. */
+function limitGroupCells(group: LimitGroup, name: string, lang: Lang, density: LimitDensity, save = false): number {
+  const head = Math.ceil(textPx('•') / CELL_PX) + 1 + Math.ceil(textPx(name) / CELL_PX)
+  const items = Math.ceil(group.items.reduce((n, item) => n + limitItemCells(item, density, lang), 0))
+  const gaps = density === 'compact' ? 0 : Math.max(0, group.items.length - 1)
+  const word = saveWord(group, save, lang)
+  return head + 1 + items + gaps + (word ? 1 + Math.ceil(textPx(word) / CELL_PX) : 0)
+}
+
+function limitGroupDrawn(el: Els, frame: Frame, group: LimitGroup, name: string, save: boolean, density: LimitDensity): { node: RenderNode; tips: { key: string; text: string }[] } {
+  const { Box, Text } = el
+  const dot = providerColor(group.type ?? group.provider)
+  const word = saveWord(group, save, frame.lang)
+  const tipOf = (item: LimitItem) => limitItemTip(item, name, frame.lang, frame.now)
+  // Compact: one figure run for the group, its tip naming every window in turn.
+  const items = density === 'compact'
+    ? [compactDrawn(el, frame, group, 'limits-' + group.key, group.items.map(tipOf).join(' · '), frame.lang)]
+    : group.items.map((item, ii) => limitItemDrawn(el, frame, item, 'limits-' + group.key + '-' + ii, tipOf(item), density))
+  return {
+    node: (
+      <Box key={'limits-' + group.key} flexDirection="row" alignItems="center" columnGap={1} flexShrink={0}>
+        <Text key="limits-dot" color={dot}>•</Text>
+        <Text key="limits-name" {...lookOf(frame).sub}>{name}</Text>
+        {items.map(f => f.node)}
+        {word ? <Text key="limits-save" color={TONE.violet.text}>{word}</Text> : null}
+      </Box>
+    ),
+    tips: items.map(f => ({ key: f.key, text: f.tip! })),
+  }
+}
+
+/**
+ * The second row, or null: no `limits` extra, no windows at all, or not even Claude's own windows
+ * fitting. Narrow, the scoped windows (Fable, 3P, …) go first, then a later provider's secondary
+ * accounts (the last one first), then a later provider's whole group — Claude's own group stays to
+ * the last. A provider with several accounts numbers them ("GPT 1", "GPT 2"); the number is the
+ * account's, not its place in this row, so it holds even when only one of them fits.
+ */
+function limitsRowDrawn(el: Els, frame: Frame, view: DashboardView, budget: number): { node: RenderNode; tips: { key: string; text: string }[] } | null {
+  const { Box } = el
+  const items = view.limits ?? []
+  if (!items.length || !view.extras.includes('limits')) return null
+  const all = limitGroups(items)
+  // Numbering follows the whole set of accounts a provider has, decided before any narrowing.
+  const accounts = new Map<string, number>()
+  for (const g of all) accounts.set(g.provider, (accounts.get(g.provider) ?? 0) + 1)
+  const numbered = (g: LimitGroup) => (accounts.get(g.provider) ?? 1) > 1
+  // Save mode's word sat beside the first row's limit; with this row drawn it follows Claude's windows.
+  const save = !!view.limit?.save
+  const width = (density: LimitDensity) => (gs: readonly LimitGroup[]) => gs.reduce((n, g) => n + limitGroupCells(g, limitGroupName(g, numbered(g)), frame.lang, density, save), 0) + RULE_CELLS * Math.max(0, gs.length - 1) + LIMITS_GAP * Math.max(0, 2 * gs.length - 2)
+  // Every provider at the roomiest density that holds them all; past compact, windows and then
+  // groups give way (narrowLimitGroups), compact as the row is then.
+  const density = DENSITIES.find(d => width(d)(all) <= budget) ?? 'compact'
+  const groups = narrowLimitGroups(all, budget, width(density))
+  if (!groups) return null
+  const drawn = groups.map(g => limitGroupDrawn(el, frame, g, limitGroupName(g, numbered(g)), save, density))
+  const children: RenderNode[] = []
+  drawn.forEach((d, i) => {
+    if (i > 0) children.push(rule(el, frame, 'limits-' + groups[i]!.key))
+    children.push(d.node)
+  })
+  return {
+    node: (
+      <Box key="band-limits" flexDirection="row" alignItems="center" columnGap={LIMITS_GAP} paddingLeft={CREST_CELLS} paddingTop={0.5}>
+        {children}
+      </Box>
+    ),
+    tips: drawn.flatMap(d => d.tips),
+  }
+}
+
 /**
  * The routed model as the band names it: what was asked dropped, and Claude's ids by their
  * family and version ("claude-opus-5-5" → "Opus 5.5"); the whole route is in the tip.
  */
-function routeName(model: string): string {
+export function routeName(model: string): string {
   return modelName(model.replace(/\s*\(.*\)$/, ''))
 }
 
@@ -509,28 +663,41 @@ function routeDrawn(el: Els, frame: Frame, view: DashboardView, actions: BandAct
     if (!view.notice) return ''
     return (
       <Box key="fact-route" position="relative" flexShrink={1} minWidth={0} overflow="hidden">
-        <Text color={MUTE} wrap="truncate">{view.notice.replace(/^ClaudeRipple:\s*/, '')}</Text>
+        <Text {...lookOf(frame).mute} wrap="truncate">{view.notice.replace(/^ClaudeRipple:\s*/, '')}</Text>
       </Box>
     )
   }
   const tone = r.cachePct !== undefined ? cacheTone(r.cachePct) : 'ok'
-  const tip = routeFact(frame, view, 200, actions.toggleLog)?.card?.join(' · ')
+  const k = lookOf(frame)
+  const name = routeName(r.model)
+  const tail = !r.ok ? (r.resent ? t(frame.lang, 'band.resent', { status: r.status }) : r.status) : r.cachePct !== undefined ? r.cachePct + '%' : ''
+  // The light is as wide as what it holds (its air, the dot, the name, the figure), giving way only
+  // when the row has less, and the blank press laid over it is that wide too: a press wider is cut
+  // with an ellipsis (three dark dots on flat's light page), and a narrower one lights a smaller box
+  // inside the route's own light (2026-10-16).
+  const width = Math.max(Math.min(ROUTE_ROOM, room), Math.ceil(1 + cells(frame, '•') + 0.5 + cells(frame, name) + (tail ? 0.5 + cells(frame, tail) : 0)))
+  // The route is a button (it opens the log), so it lights under the pointer like the controls do.
+  // It has no tip: the light says it is a button, and its card is what the log shows (asked 2026-10-14).
   return (
-    <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') } } : {})}>
+    // The slot keeps no width of the value's (what the band holds never depends on one); the light
+    // inside it is as wide as the value.
+    <Box key="fact-route" flexDirection="row" flexShrink={1} minWidth={Math.min(ROUTE_ROOM, room)} overflow="hidden">
+    <Box key="route-light" position="relative" flexDirection="row" alignItems="center" columnGap={0.5} paddingX={0.5} width={width} flexShrink={1} minWidth={0} overflow="hidden" {...hoverLight(frame)}>
       <Box flexShrink={0}>
-        {r.ok ? <Text color={r.resent ? MUTE : providerColor(r.provider)}>{r.resent ? '↻' : '•'}</Text> : <Text color={TONE.red.text}>✕</Text>}
+        {r.ok ? <Text {...(r.resent ? k.mute : { color: providerColor(r.provider) })}>{r.resent ? '↻' : '•'}</Text> : <Text color={k.tone('red')}>✕</Text>}
       </Box>
       <Box flexShrink={1} minWidth={0}>
-        <Text color={SUB} wrap="truncate">{routeName(r.model)}</Text>
+        <Text {...k.sub} wrap="truncate">{name}</Text>
       </Box>
       <Box flexShrink={0}>
         {!r.ok ? (
-          <Text color={r.resent ? MUTE : TONE.red.text}>{r.resent ? t(frame.lang, 'band.resent', { status: r.status }) : r.status}</Text>
+          <Text {...(r.resent ? k.mute : { color: k.tone('red') })}>{r.resent ? t(frame.lang, 'band.resent', { status: r.status }) : r.status}</Text>
         ) : r.cachePct !== undefined ? (
-          <Text color={tone === 'ok' ? TONE.green.text : figure(tone === 'warn' ? 'warn' : 'bad')}>{r.cachePct + '%'}</Text>
+          <Text {...(tone === 'ok' ? { color: k.tone('green') } : figure(frame, tone === 'warn' ? 'warn' : 'bad'))}>{r.cachePct + '%'}</Text>
         ) : null}
       </Box>
-      {press(el, 'route', Math.max(40, frame.columns) * CELL_PX * 0.4, actions.toggleLog)}
+      {press(el, 'route', width * CELL_PX, actions.toggleLog)}
+    </Box>
     </Box>
   )
 }
@@ -540,42 +707,42 @@ function routeDrawn(el: Els, frame: Frame, view: DashboardView, actions: BandAct
  * 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
+ * Each tip is placed absolutely over the row from column `left` to `right` columns short of its end
+ * (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.
+ * in a zero-width box never showed. Covering the facts while a tip shows is expected.
+ *
+ * The tips are the row's own children with no Box spanning them: the pointer on an absolute Box is
+ * on its parent, so a standing layer over the facts took every hover and press from what lay under
+ * it (2026-10-14, the route stopped opening the log). A tip resting `display: "none"` takes no
+ * pointer. Tips 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 }[], at: number): RenderNode {
+function whyDrawn(el: Els, frame: Frame, tips: { key: string; text: string }[], at: number, right: number): RenderNode[] {
   const { Box, Text } = el
-  // Placed Box offsets are whole cells; the layer starts at the first cell past 리플이 and the effort.
+  // Placed Box offsets are whole cells; a tip 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="absolute" top={0} bottom={0} left={left} right={0} minWidth={0} overflow="hidden">
-      {tips.map(tip => (
-        <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>
-          <Box position="relative" flexShrink={1} minWidth={0}>
-            {lift(el)}
-            <Text color={INK} wrap="truncate">{tip.text}</Text>
-          </Box>
-        </Box>
-      ))}
+  return tips.map(tip => (
+    <Box position="absolute" top={0} bottom={0} left={left} right={Math.ceil(right)} display="none" hover={{ scope: tipScope(tip.key), display: 'flex' }} overflow="hidden">
+      <Box position="absolute" top={0} left={0}>
+        {pic(el, 'tip-plate-' + tip.key, lookOf(frame).art.plate(width, ROW_PX), tip.text, width, ROW_PX)}
+      </Box>
+      <Box position="relative" flexShrink={1} minWidth={0}>
+        {lift(el)}
+        <Text {...lookOf(frame).ink} wrap="truncate">{tip.text}</Text>
+      </Box>
     </Box>
-  )
+  ))
 }
 
 /** A thin rule between the band's groups. */
-function rule(el: Els, key: string): RenderNode {
+function rule(el: Els, frame: Frame, key: string): RenderNode {
   const { Box } = el
   return (
     <Box key={'rule-' + key} width={RULE_CELLS} flexShrink={0} alignItems="center">
-      {pic(el, 'rule-' + key, ruleArt(), '|', 9, 16)}
+      {pic(el, 'rule-' + key, lookOf(frame).art.rule(), '|', 9, 16)}
     </Box>
   )
 }
@@ -583,7 +750,7 @@ function rule(el: Els, key: string): RenderNode {
 type DrawnControl = { key: string; cells: number; node: RenderNode; tip: string }
 
 /** An icon control, lit under the pointer: its picture, its word when the band has room, its press. */
-function iconControl(el: Els, key: string, source: string, artPx: number, alt: string, tip: string, onPress: () => void, label?: string, color = SUB): DrawnControl {
+function iconControl(el: Els, frame: Frame, key: string, source: string, artPx: number, alt: string, tip: string, onPress: () => void, label?: string, word?: Word): DrawnControl {
   const { Text } = el
   const pad = label ? 0.5 : 0.25
   const cells = Math.ceil((artPx + (label ? CELL_PX + chOf(label) * CELL_PX * 1.04 : 0)) / CELL_PX + pad * 2)
@@ -591,7 +758,7 @@ function iconControl(el: Els, key: string, source: string, artPx: number, alt: s
     key,
     cells,
     tip,
-    node: lit(el, key, cells, [pic(el, key, source, alt, artPx, 16), label ? <Text key={key + '-word'} color={color}>{label}</Text> : '', press(el, key, cells * CELL_PX, onPress)], pad, tipScope(key)),
+    node: lit(el, frame, key, cells, [pic(el, key, source, alt, artPx, 16), label ? <Text key={key + '-word'} {...(word ?? lookOf(frame).sub)}>{label}</Text> : '', press(el, key, cells * CELL_PX, onPress)], pad, tipScope(key)),
   }
 }
 
@@ -599,30 +766,31 @@ function iconControl(el: Els, key: string, source: string, artPx: number, alt: s
 function controlsDrawn(el: Els, frame: Frame, view: DashboardView, actions: BandActions, words: readonly string[]): DrawnControl[] {
   const L = frame.lang
   const out: DrawnControl[] = []
+  const k = lookOf(frame)
   const state = (on: boolean) => t(L, on ? 'band.on' : 'band.off')
   if (view.handoff !== 'off') {
     const advised = view.handoff === 'advised'
     const label = t(L, 'band.handoff')
     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') })
+    out.push({ key: 'handoff', cells: k.art.pill(label, look, 'violet').cells + 1, node: pill(el, frame, '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({ key: 'auto', cells: wordCells(autoLabel), node: word(el, 'auto', view.auto, autoLabel, actions.toggleAuto, view.effort.mode === 'deciding', tipScope('auto')), tip: autoTip })
+  out.push({ key: 'auto', cells: wordCells(frame, autoLabel), node: word(el, frame, '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))
+  out.push(iconControl(el, frame, 'warm', k.art.icon('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 ? { color: k.tone('amber') } : k.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))
+  out.push(iconControl(el, frame, 'agents', k.art.agents(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 ? k.ink : k.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))
+  out.push(iconControl(el, frame, 'compact', k.art.icon('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))
+  out.push(iconControl(el, frame, 'clear', k.art.icon('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))
+  out.push(iconControl(el, frame, 'settings', k.art.icon('gear', false), ICON_PX, settingsLabel, t(L, 'band.settingsAlt'), actions.openSettings, words.includes('settings') ? settingsLabel : undefined))
   return out
 }
 
@@ -631,8 +799,8 @@ 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}>
-      {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)}
+      {word(el, frame, 'pick-auto', view.auto, t(frame.lang, 'band.auto'), actions.toggleAuto)}
+      {segmented(el, frame, 'pick', EFFORTS.map(effort => ({ value: effort, label: effortName(effort, frame.lang) })), current, effort => actions.pickEffort(effort), 'violet', DEPTH)}
     </Box>
   )
 }
@@ -647,7 +815,10 @@ function bandDrawn(el: Els, frame: Frame, view: DashboardView, actions: BandActi
   // then the quietest facts go.
   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)
+  // The second row is decided before the first row's budget: when it draws, the first row's limit
+  // fact steps aside and the route takes its room.
+  const limitsRow = limitsRowDrawn(el, frame, view, cols - CREST_CELLS)
+  const optional = [modeDrawn(el, frame, view), contextDrawn(el, frame, view), cacheDrawn(el, frame, view), ...(limitsRow ? [] : [limitDrawn(el, frame, view)])].filter((f): f is DrawnFact => f !== null)
   // 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]
@@ -681,40 +852,49 @@ function bandDrawn(el: Els, frame: Frame, view: DashboardView, actions: BandActi
   }
   const controls = controlsDrawn(el, frame, view, actions, words)
   const tips = [effort, ...facts].filter(f => f.tip).map(f => ({ key: f.key, text: f.tip! }))
-  const routeTip = route > 0 && view.route ? routeFact(frame, view, 200, actions.toggleLog)?.card?.join(' · ') : undefined
-  if (routeTip) tips.push({ key: 'route', text: routeTip })
+  if (limitsRow) for (const tip of limitsRow.tips) tips.push(tip)
   for (const c of controls) if (c.key !== 'handoff') tips.push({ key: c.key, text: c.tip })
   if (actions.hide) tips.push({ key: 'hide', text: t(frame.lang, 'band.hideBand') })
   const crest = (
     <Box key="band-crest" width={CREST_CELLS} flexShrink={0} alignItems="center">
-      {ripple(el, 'band-' + mood.face + (mood.dim ? '-dim' : ''), mood.face, 'ClaudeRipple', BAND_RIPPLE, undefined, mood.dim)}
+      {ripple(el, frame, 'band-' + mood.face + (mood.dim ? '-dim' : ''), mood.face, 'ClaudeRipple', BAND_RIPPLE, undefined, mood.dim)}
     </Box>
   )
   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}>
+      {/* The facts keep their own width (the drop rules above already made them fit); the route
+          follows them directly, and what the row leaves free is after it, before the controls. The
+          route is what gives way, down to its own minimum, truncating the model's name: a facts box
+          allowed to shrink let the route draw over them, and a facts box that grew left a short
+          model name far right with a gap before it (2026-10-14). */}
+      <Box key="band-facts" flexDirection="row" alignItems="center" columnGap={DRAWN_GAP} flexShrink={0}>
         {crest}
         {effort.node}
-        {ruled && facts.length ? rule(el, 'facts') : null}
+        {ruled && facts.length ? rule(el, frame, 'facts') : null}
         {facts.map(f => f.node)}
-        {ruled && routeNode ? rule(el, 'route') : null}
-        {routeNode}
-        {whyDrawn(el, frame, tips, CREST_CELLS + DRAWN_GAP + effort.cells + DRAWN_GAP)}
       </Box>
+      {routeNode ? (
+        <Box key="band-route" flexDirection="row" alignItems="center" columnGap={DRAWN_GAP} marginLeft={DRAWN_GAP} flexShrink={1} minWidth={0}>
+          {ruled ? rule(el, frame, 'route') : null}
+          {routeNode}
+        </Box>
+      ) : null}
+      <Box key="band-free" flexGrow={1} flexShrink={1} minWidth={0} />
+      {whyDrawn(el, frame, tips, CREST_CELLS + DRAWN_GAP + effort.cells + DRAWN_GAP, controlCells + close + 0.5)}
       <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}
+        {actions.hide ? closeButton(el, frame, 'hide', t(frame.lang, 'band.hideBand'), () => actions.hide!(), tipScope('hide')) : null}
       </Box>
     </Box>
   )
   return capsule(el, frame, {
     key: 'band',
     sea: { ...bandSea(mood), reach: 120, at: { x: PAD_X * CELL_PX + (CREST_CELLS * CELL_PX) / 2, y: PAD_Y * ROW_PX * 0.5 + ROW_H / 2 } },
-    rows: view.effortMenu ? 3.4 : 1.8,
+    rows: view.effortMenu ? (limitsRow ? 4.6 : 3.4) : limitsRow ? 3 : 1.8,
     paddingX: PAD_X,
     paddingY: PAD_Y,
-    children: [row, view.effortMenu ? effortMenuDrawn(el, frame, view, actions) : ''],
+    children: [row, ...(limitsRow ? [limitsRow.node] : []), view.effortMenu ? effortMenuDrawn(el, frame, view, actions) : ''],
   })
 }
 
@@ -823,7 +1003,8 @@ export function besideBand(frame: Frame): number {
 
 /** The dashboard band, `frame.columns` being its own width (see besideBand). */
 export function renderBand(el: Els, frame: Frame, view: DashboardView, actions: BandActions): RenderNode {
-  return isRich(frame) && 'Svg' in el ? bandDrawn(el, frame, view, actions) : bandText(el, frame, view, actions)
+  if (!isRich(frame) || !('Svg' in el)) return bandText(el, frame, view, actions)
+  return bandDrawn(el, frame, view, actions)
 }
 
 // ---- Minimal: the footer -----------------------------------------------------------------------