diff --git a/.changeset/now-ring.md b/.changeset/now-ring.md
new file mode 100644
index 0000000..e2a7ddb
--- /dev/null
+++ b/.changeset/now-ring.md
@@ -0,0 +1,5 @@
+---
+"ftw-webapp": patch
+---
+
+Now draws your home as the phone app does: what the home uses sits in the middle of a ring, and the sun, the battery, the grid and the car sit in the corners as plain text. Each one lights the part of the ring that faces it, longer with more power, and a soft light runs along it toward the home or away from it. Only readings the box confirms live glow or move; old readings show as still grey arcs. Tap a corner or the middle to open it, as before. The first load is about 5 kB smaller.
diff --git a/src/lib/state/flow.ts b/src/lib/state/flow.ts
index b8891f1..1a6a8b3 100644
--- a/src/lib/state/flow.ts
+++ b/src/lib/state/flow.ts
@@ -1,17 +1,24 @@
-/* From a site snapshot to the energy-flow component's planets.
+/* From a site snapshot to the planets of the box's energy-flow component.
  *
  * The box's own dashboard builds this list in web/app.js from /api/status.
  * Frozen fields on the 1 Hz stream are the fallback: five aggregates, no
- * names, no kWh today. Same component, same corners and colours — "same
- * views" only holds if the caller speaks to it the same way.
+ * names, no kWh today. Same corners, colours and words as the box — "same
+ * views" only holds if both build them the same way. Now folds them into
+ * the ring's nodes (ring.ts).
  *
- * The component knows nothing about field ids or HTTP. Everything it is
- * told is decided here, which is what makes this file worth testing.
+ * Nothing downstream knows about field ids or HTTP. Everything it is told
+ * is decided here, which is what makes this file worth testing.
  */
 
 import { withControlMarks, type ControlMark } from '$vendor/ftw/control-feedback.js'
 import { FID } from '$lib/format/explanation'
-import { FLOW_IDLE_W } from '$vendor/ftw/ftw-energy-flow.js'
+
+/**
+ * At or below this a flow is idle: no light, no arc. The box's component
+ * uses the same 42 W, and a test holds the two equal, so the first frame
+ * need not load that whole component for one number.
+ */
+export const FLOW_IDLE_W = 42
 
 export interface FlowDailyPart {
   text: string
@@ -43,7 +50,8 @@ export interface FlowPlanet {
 }
 
 export interface FlowReadings {
-  load: number
+  /** The home's use in kW, or null when the box sends no such reading. */
+  load: number | null
   planets: FlowPlanet[]
   selfPoweredPctToday?: number | null
 }
@@ -192,7 +200,8 @@ export function flowReadings(fields: ReadonlyMap<number, number>): FlowReadings
     })
   }
 
-  return { load: (fields.get(FID.LOAD_W) ?? 0) / 1000, planets }
+  const loadW = fields.get(FID.LOAD_W)
+  return { load: loadW === undefined ? null : loadW / 1000, planets }
 }
 
 /**
@@ -428,13 +437,14 @@ export function flowReadingsFromStatus(status: SiteStatus, live = true): FlowRea
     }
   }
 
+  const loadW = num(status.load_w)
   let selfPoweredPctToday: number | null = null
   if (loadKwhTotal > 0.001) {
     selfPoweredPctToday = Math.max(0, Math.min(100, (1 - importKwh / loadKwhTotal) * 100))
   }
 
   return {
-    load: (num(status.load_w) ?? 0) / 1000,
+    load: loadW === null ? null : loadW / 1000,
     planets: withControlMarks(planets, status.control_feedback, live),
     selfPoweredPctToday,
   }
diff --git a/src/lib/state/ring-motion.test.ts b/src/lib/state/ring-motion.test.ts
new file mode 100644
index 0000000..fe9c1f7
--- /dev/null
+++ b/src/lib/state/ring-motion.test.ts
@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest'
+import { ArcMotion, Follow, wave, waveSpeed, type ArcTarget } from './ring-motion'
+
+const target = (p: Partial<ArcTarget> = {}): ArcTarget => ({
+  kw: 2, live: true, flowing: true, towardHome: true, fill: 0.5, ...p,
+})
+
+/** Steps an arc at 60 frames a second from `from` to `to` seconds. */
+function run(m: ArcMotion, t: ArcTarget, from: number, to: number, reduce = false) {
+  let f = m.step(t, from, reduce)
+  for (let s = from; s <= to; s += 1 / 60) f = m.step(t, s, reduce)
+  return f
+}
+
+describe('the light on an arc', () => {
+  it('never glows on an arc that has never been live', () => {
+    const t = target({ live: false })
+    const f = run(new ArcMotion(t, 0), t, 0, 3)
+    expect(f.light).toBe(0)
+    expect(f.phase).toBe(0)
+  })
+
+  it('opens live data at full light without a flash', () => {
+    const f = new ArcMotion(target(), 0).step(target(), 0, false)
+    expect(f.light).toBe(1)
+  })
+
+  it('cools to ink within a second and a half once the box stops confirming it', () => {
+    const m = new ArcMotion(target(), 0)
+    run(m, target(), 0, 1)
+    const quiet = target({ live: false })
+    expect(run(m, quiet, 1, 1.2).light).toBeGreaterThan(0.4)
+    expect(run(m, quiet, 1.2, 2.6).light).toBeLessThan(0.05)
+  })
+
+  it('does not cool on screen after going quiet while nothing was drawn', () => {
+    const m = new ArcMotion(target(), 0)
+    m.step(target(), 0, false)
+    expect(m.step(target({ live: false }), 5, false).light).toBe(0)
+  })
+
+  it('runs the wave only while live, and not at all under reduced motion', () => {
+    const live = run(new ArcMotion(target(), 0), target(), 0, 1)
+    expect(live.phase).toBeGreaterThan(0.5)
+    const still = run(new ArcMotion(target(), 0), target(), 0, 1, true)
+    expect(still.phase).toBe(0)
+  })
+
+  it('grows the arc to a new reading without overshoot', () => {
+    const m = new ArcMotion(target({ fill: 0.2 }), 0)
+    let most = 0
+    for (let s = 0; s < 3; s += 1 / 60) most = Math.max(most, m.step(target({ fill: 0.8 }), s, false).fill)
+    expect(most).toBeLessThanOrEqual(0.8 + 1e-9)
+    expect(most).toBeGreaterThan(0.79)
+  })
+
+  it('snaps to a new reading under reduced motion', () => {
+    const m = new ArcMotion(target({ fill: 0.2 }), 0)
+    expect(m.step(target({ fill: 0.8 }), 0.1, true).fill).toBe(0.8)
+  })
+})
+
+describe('the wave', () => {
+  it('crests at 1 and dips to 0.45', () => {
+    expect(wave(0, 0)).toBeCloseTo(1)
+    expect(wave(15, 0)).toBeCloseTo(0.45)
+  })
+
+  it('runs faster with power, never racing', () => {
+    expect(waveSpeed(0.1)).toBeCloseTo(19.2, 0)
+    expect(waveSpeed(1)).toBeCloseTo(31.4, 0)
+    expect(waveSpeed(10)).toBeCloseTo(51.6, 0)
+  })
+
+  it('follows a step as one long frame lands where many short ones do', () => {
+    const a = new Follow(0)
+    const b = new Follow(0)
+    a.step(1, 1, 0.4)
+    for (let i = 0; i < 100; i++) b.step(1, 0.01, 0.4)
+    expect(a.value).toBeCloseTo(b.value, 6)
+  })
+})
diff --git a/src/lib/state/ring-motion.ts b/src/lib/state/ring-motion.ts
new file mode 100644
index 0000000..4960bfa
--- /dev/null
+++ b/src/lib/state/ring-motion.ts
@@ -0,0 +1,181 @@
+/* How the ring's light moves, frame to frame.
+ *
+ * Plain values stepped once per frame, so a test can run them without a
+ * screen. The constants are the iOS app's (Flow.swift): a change belongs in
+ * both, or the phone and the browser stop showing the same house.
+ *
+ * Light means live. An arc glows and its wave runs only while the box
+ * confirms the reading; when it stops, the glow cools like a CRT and the
+ * arc goes to ink. An arc that has never been live never glows, so a cache
+ * opens still.
+ */
+
+/** Pixels from one crest of the light to the next. */
+export const WAVELENGTH = 30
+
+/** How fast the light runs from source to sink, in px a second: 19 at
+ *  0.1 kW, 31 at 1 kW, 52 at 10 kW. Faster with power, never racing. */
+export function waveSpeed(kw: number): number {
+  return 16 + 22 * Math.log10(1 + 4 * Math.abs(kw))
+}
+
+/** Brightness along an arc, from 0.45 to 1: soft crests a wavelength apart.
+ *  `s` is px from the source, `phase` is wavelengths the light has run. */
+export function wave(s: number, phase: number): number {
+  const c = (1 + Math.cos(2 * Math.PI * (s / WAVELENGTH - phase))) / 2
+  return 0.45 + 0.55 * c * c * c
+}
+
+/** A value that follows its target as a critically damped spring with time
+ *  constant `tau`: it swells to a new value and never overshoots. Stepped
+ *  exactly, so a long frame lands where many short ones would. */
+export class Follow {
+  velocity = 0
+  constructor(public value: number) {}
+
+  step(target: number, dt: number, tau: number): void {
+    if (dt <= 0) return
+    if (tau <= 0) return this.snap(target)
+    const w = 1 / tau
+    const e = this.value - target
+    const k = Math.exp(-w * dt)
+    const a = this.velocity + w * e
+    this.value = target + (e + a * dt) * k
+    this.velocity = (this.velocity - w * a * dt) * k
+  }
+
+  snap(target: number): void {
+    this.value = target
+    this.velocity = 0
+  }
+}
+
+/** The phosphor, from 0 (ink, still) to 1 (live). It ignites on a spring
+ *  (response 0.35 s, damping 0.85) and decays exponentially (τ 0.4 s) while
+ *  its wave slows to rest in 0.35 s. Instant under reduced motion. */
+export class Light {
+  static readonly decay = 0.4
+  static readonly rest = 0.35
+  static readonly response = 0.35
+  static readonly damping = 0.85
+
+  private since: number
+  private level0: number
+  private motion0: number
+
+  constructor(public live: boolean, t: number) {
+    this.since = t
+    this.level0 = live ? 1 : 0
+    this.motion0 = this.level0
+  }
+
+  set(live: boolean, t: number, instant = false): void {
+    if (live === this.live) return
+    const target = live ? 1 : 0
+    this.level0 = instant ? target : this.level(t)
+    this.motion0 = instant ? target : this.motion(t)
+    this.since = t
+    this.live = live
+  }
+
+  /** The glow, the wave's depth and the core's strength. */
+  level(t: number): number {
+    const dt = Math.max(0, t - this.since)
+    return this.live ? 1 - (1 - this.level0) * Light.residual(dt) : this.level0 * Math.exp(-dt / Light.decay)
+  }
+
+  /** How fast the wave runs, as a share of its speed. */
+  motion(t: number): number {
+    const dt = Math.max(0, t - this.since)
+    if (this.live) return Math.min(1, 1 - (1 - this.motion0) * Light.residual(dt))
+    const k = 1 - Math.min(1, dt / Light.rest)
+    return this.motion0 * k * k
+  }
+
+  /** What is left of a step after `t` seconds on the spring. */
+  static residual(t: number): number {
+    const w = (2 * Math.PI) / Light.response
+    const z = Light.damping
+    const wd = w * Math.sqrt(1 - z * z)
+    return Math.exp(-z * w * t) * (Math.cos(wd * t) + ((z * w) / wd) * Math.sin(wd * t))
+  }
+}
+
+/** What one arc shows for one node's reading. */
+export interface ArcTarget {
+  /** Magnitude, never signed. */
+  kw: number
+  live: boolean
+  flowing: boolean
+  /** The light runs toward the home: clockwise. */
+  towardHome: boolean
+  /** How much of its quarter the arc lights, 0 to 1. */
+  fill: number
+}
+
+/** One arc's look in one frame. */
+export interface ArcFrame {
+  /** Wavelengths the light has run, source to sink. */
+  phase: number
+  /** The phosphor: the glow's strength and the wave's depth. */
+  light: number
+  /** 0 for a flowing arc, 1 for a node at rest. */
+  idle: number
+  /** The share of its quarter the arc lights. */
+  fill: number
+}
+
+export const alpha = (f: ArcFrame) => 0.35 + 0.65 * Math.min(1, f.light)
+export const depth = (f: ArcFrame) => Math.min(1, f.light)
+
+/** One arc over time: its fill and speed follow the readings (τ 0.4 s), its
+ *  light ignites and decays, its wave runs at the speed the power gives. */
+export class ArcMotion {
+  static readonly tau = 0.4
+  /** Longer than this between two frames, nothing was drawn: the page was
+   *  away or the loop rested. */
+  static readonly gap = 0.5
+
+  private speed: Follow
+  private idle: Follow
+  private fill: Follow
+  private light: Light
+  private phase = 0
+  private last: number
+
+  /** The first frame: everything where the reading puts it, with no ignite,
+   *  so a page that opens on live data does not flash. */
+  constructor(target: ArcTarget, t: number) {
+    this.speed = new Follow(waveSpeed(target.kw))
+    this.idle = new Follow(target.flowing ? 0 : 1)
+    this.fill = new Follow(target.fill)
+    this.light = new Light(target.live, t)
+    this.last = t
+  }
+
+  step(target: ArcTarget, t: number, reduceMotion: boolean): ArcFrame {
+    const dt = Math.max(0, t - this.last)
+    this.last = Math.max(this.last, t)
+    // A reading that stopped being live while nothing was drawn went out at
+    // a moment nobody saw, so it never cools on screen afterwards.
+    this.light.set(target.live, t, reduceMotion || (!target.live && dt > ArcMotion.gap))
+    const v = waveSpeed(target.kw)
+    const rest = target.flowing ? 0 : 1
+    if (reduceMotion) {
+      this.speed.snap(v)
+      this.idle.snap(rest)
+      this.fill.snap(target.fill)
+    } else {
+      this.speed.step(v, dt, ArcMotion.tau)
+      this.idle.step(rest, dt, ArcMotion.tau / 2)
+      this.fill.step(target.fill, dt, ArcMotion.tau)
+      this.phase = ((this.phase + (this.speed.value * this.light.motion(t) * dt) / WAVELENGTH) % 1_000)
+    }
+    return {
+      phase: this.phase,
+      light: this.light.level(t),
+      idle: Math.min(1, Math.max(0, this.idle.value)),
+      fill: Math.min(1, Math.max(0, this.fill.value)),
+    }
+  }
+}
diff --git a/src/lib/state/ring.test.ts b/src/lib/state/ring.test.ts
new file mode 100644
index 0000000..6805372
--- /dev/null
+++ b/src/lib/state/ring.test.ts
@@ -0,0 +1,223 @@
+import { describe, expect, it } from 'vitest'
+import {
+  doing, flowHeight, labelHeight, nodeWidth, quantised, quantisedHolding, ringArc, ringFill, ringGeometry, ringKey, ringReadings,
+  ringSpot, type RingReading,
+} from './ring'
+import { FLOW_IDLE_W, flowReadingsFromStatus, type FlowPlanet, type FlowReadings } from './flow'
+import { FLOW_IDLE_W as BOX_IDLE_W } from '$vendor/ftw/ftw-energy-flow.js'
+
+const planet = (p: Partial<FlowPlanet> & Pick<FlowPlanet, 'id' | 'role'>): FlowPlanet => ({
+  corner: 'top-left', title: '', kw: 0, toHub: true, color: '', sub: '', ...p,
+})
+
+const node = (rs: RingReading[], n: RingReading['node']) => rs.find((r) => r.node === n)
+
+describe('the ring’s nodes', () => {
+  it('calls a flow idle where the box does', () => {
+    expect(FLOW_IDLE_W).toBe(BOX_IDLE_W)
+  })
+
+  it('always draws the grid and the home, and other kinds only when present', () => {
+    const rs = ringReadings({ load: 0.5, planets: [planet({ id: 'grid', role: 'grid', kw: 1, toHub: true })] }, true)
+    expect(rs.map((r) => r.node)).toEqual(['home', 'grid'])
+  })
+
+  it('folds several batteries into one node by their signed sum', () => {
+    // Two packs discharging 1 kW each and a third charging 0.5 kW: the home
+    // gets 1.5 kW. Magnitudes alone would add to 2.5 kW of charge.
+    const r: FlowReadings = {
+      load: 2,
+      planets: [
+        planet({ id: 'grid', role: 'grid', kw: 0, toHub: true }),
+        planet({ id: 'bat-a', role: 'battery', name: 'a', kw: 1, toHub: true, soc: 40 }),
+        planet({ id: 'bat-b', role: 'battery', name: 'b', kw: 1, toHub: true, soc: 60 }),
+        planet({ id: 'bat-c', role: 'battery', name: 'c', kw: 0.5, toHub: false, soc: null }),
+      ],
+    }
+    const bat = node(ringReadings(r, true), 'battery')!
+    expect(bat.watts).toBeCloseTo(1500)
+    expect(bat.word).toBe('giving power')
+    expect(bat.towardHome).toBe(true)
+    expect(bat.color).toBe('var(--energy-gives)')
+    expect(bat.levelPct).toBe(50)
+    expect(bat.scope).toEqual({ role: 'battery', name: null, id: 'agg-battery' })
+  })
+
+  it('folds batteries the same way from the box’s snapshot, where watts are signed', () => {
+    const rs = ringReadings(flowReadingsFromStatus({
+      grid_w: 0, load_w: 2_000,
+      drivers: { a: { status: 'ok', bat_w: -1_000, bat_soc: 0.4 }, b: { status: 'ok', bat_w: 500, bat_soc: 0.6 } },
+    }), true)
+    const bat = node(rs, 'battery')!
+    expect([bat.watts, bat.word, bat.towardHome, bat.levelPct]).toEqual([500, 'giving power', true, 50])
+  })
+
+  it('does not call a sum live when one device of the kind has no reading', () => {
+    const rs = ringReadings(flowReadingsFromStatus({
+      grid_w: 0, load_w: 500,
+      drivers: { a: { status: 'ok', bat_w: -1_000 }, b: { status: 'ok', bat_w: 0 } },
+      control_feedback: [{ driver: 'b', kind: 'battery', status: 'no_contact', reason: 'readings_lost', severity: 'info', evidence: 'accepted', readings_fresh: false }],
+    }), true)
+    const bat = node(rs, 'battery')!
+    expect(bat.watts).toBe(1_000)
+    expect(bat.live).toBe(false)
+  })
+
+  it('opens nothing from a placeholder the box would not open', () => {
+    const rs = ringReadings({
+      load: 1,
+      planets: [
+        planet({ id: 'grid', role: 'grid', kw: 1 }),
+        planet({ id: 'control-battery-x', role: 'battery', name: 'x', placeholder: true, sub: 'no data' }),
+      ],
+    }, true)
+    expect(node(rs, 'battery')!.scope).toBeNull()
+    const marked = ringReadings({
+      load: 1,
+      planets: [planet({ id: 'control-battery-x', role: 'battery', name: 'x', placeholder: true, controlMark: { tone: 'alarm', label: 'Lost' } })],
+    }, true)
+    expect(node(marked, 'battery')!.scope).toEqual({ role: 'battery', name: 'x', id: 'control-battery-x' })
+  })
+
+  it('shows the home as unknown when the box sends no use, not as a live 0 W', () => {
+    const home = node(ringReadings(flowReadingsFromStatus({ grid_w: 100 }), true), 'home')!
+    expect(home.watts).toBeNull()
+    expect(home.live).toBe(false)
+    expect(home.word).toBe('no reading')
+  })
+
+  it('treats a reading that is not a number as none', () => {
+    const rs = ringReadings({ load: 1, planets: [planet({ id: 'grid', role: 'grid' }), planet({ id: 'pv', role: 'pv', kw: Number.NaN })] }, true)
+    expect(node(rs, 'solar')!.watts).toBeNull()
+  })
+
+  it('names the grid buying or selling, one colour both ways, never a sign', () => {
+    const buy = node(ringReadings({ load: 1, planets: [planet({ id: 'grid', role: 'grid', kw: 2, toHub: true })] }, true), 'grid')!
+    const sell = node(ringReadings({ load: 1, planets: [planet({ id: 'grid', role: 'grid', kw: 2, toHub: false })] }, true), 'grid')!
+    expect([buy.word, buy.watts, buy.towardHome]).toEqual(['buying', 2000, true])
+    expect([sell.word, sell.watts, sell.towardHome]).toEqual(['selling', 2000, false])
+    expect(buy.color).toBe(sell.color)
+  })
+
+  it('says a meter it cannot read has no reading, and does not claim it live', () => {
+    const g = node(ringReadings({ load: 1, planets: [planet({ id: 'grid', role: 'grid', sub: 'no data', clickable: false })] }, true), 'grid')!
+    expect(g.watts).toBeNull()
+    expect(g.word).toBe('no reading')
+    expect(g.live).toBe(false)
+    expect(g.scope).toBeNull()
+  })
+
+  it('carries the cache as not live', () => {
+    const rs = ringReadings({ load: 1, planets: [planet({ id: 'grid', role: 'grid', kw: 1 })] }, false)
+    expect(rs.every((r) => !r.live)).toBe(true)
+  })
+
+  it('keeps one charger’s name, so a tap opens that charger', () => {
+    const rs = ringReadings(flowReadingsFromStatus({ grid_w: 0, load_w: 500, drivers: { easee: { status: 'ok', ev_w: 7200 } } }), true)
+    expect(node(rs, 'car')!.scope).toEqual({ role: 'ev', name: 'easee', id: 'ev-easee' })
+    expect(node(rs, 'car')!.word).toBe('charging')
+  })
+
+  it('takes the strongest control mark of a kind', () => {
+    const rs = ringReadings({
+      load: 1,
+      planets: [
+        planet({ id: 'grid', role: 'grid' }),
+        planet({ id: 'bat-a', role: 'battery', controlMark: { tone: 'warning', label: 'a' } }),
+        planet({ id: 'bat-b', role: 'battery', controlMark: { tone: 'alarm', label: 'b' } }),
+      ],
+    }, true)
+    expect(node(rs, 'battery')!.mark).toEqual({ tone: 'alarm', label: '1 device needs attention' })
+  })
+
+  it('keeps an observe-only battery from opening controls', () => {
+    const rs = ringReadings(flowReadingsFromStatus({ grid_w: 0, load_w: 500, drivers: { a: { status: 'ok', bat_w: 0, observe_only: true } } }), true)
+    expect(node(rs, 'battery')!.scope).toBeNull()
+  })
+})
+
+describe('where the nodes sit', () => {
+  it('puts a node whose partner across the middle is missing on the axis', () => {
+    const all = ['solar', 'battery', 'home', 'grid', 'car'] as const
+    expect(all.map((n) => ringSpot(n, all))).toEqual(['topLeading', 'topTrailing', 'center', 'bottomLeading', 'bottomTrailing'])
+    expect(ringSpot('solar', ['solar', 'home', 'grid', 'car'])).toBe('top')
+    expect(ringSpot('grid', ['solar', 'battery', 'home', 'grid'])).toBe('bottom')
+  })
+
+  it('gives each node the quarter facing it, lit from the middle out', () => {
+    expect(ringArc('topLeading', 1)).toEqual({ track: [187, 263], lit: [187, 263] })
+    expect(ringArc('bottomTrailing', 0.5).lit).toEqual([26, 64])
+    expect(ringArc('top', 0).lit).toBeNull()
+  })
+
+  it('lights a fifth at 0.6 kW, half at 1.8 kW and nine tenths at 6 kW', () => {
+    expect(ringFill(0.04)).toBe(0)
+    expect(ringFill(0.05)).toBe(0.12)
+    expect(ringFill(0.6)).toBeCloseTo(0.21, 2)
+    expect(ringFill(1.8)).toBeCloseTo(0.51, 2)
+    expect(ringFill(6)).toBeCloseTo(0.91, 2)
+    expect(ringFill(-6)).toBe(ringFill(6))
+  })
+})
+
+describe('the room it takes', () => {
+  it('keeps every corner label clear of the ring at phone and desktop widths', () => {
+    for (const width of [320, 351, 390, 600]) {
+      const height = flowHeight(width, false)
+      const label = labelHeight()
+      const g = ringGeometry(width, height, label, nodeWidth(width), false)
+      expect(g.labelScale).toBe(1)
+      // A corner label's inner corner is at least 10 px outside the ring.
+      const dx = width / 2 - nodeWidth(width)
+      const dy = g.box / 2 - label
+      expect(Math.hypot(dx, dy)).toBeGreaterThanOrEqual(g.radius + g.thickness / 2 + 10 - 0.01)
+      expect(height).toBeGreaterThanOrEqual(232)
+      expect(height).toBeLessThanOrEqual(420)
+    }
+  })
+
+  it('keeps the whole ring and its glow inside the flow at any width', () => {
+    for (const width of [320, 560, 580, 600, 700, 900]) {
+      for (const axis of [false, true]) {
+        const height = flowHeight(width, axis)
+        const g = ringGeometry(width, height, labelHeight(), nodeWidth(width), axis)
+        expect(g.diameter + 3 * g.thickness, `${width} px, axis ${axis}`).toBeLessThanOrEqual(height)
+      }
+    }
+  })
+
+  it('shrinks the labels rather than let them touch the least ring', () => {
+    const g = ringGeometry(320, 240, labelHeight(), nodeWidth(320), true)
+    expect(g.diameter).toBe(120)
+    expect(g.labelScale).toBeLessThan(1)
+    expect(g.labelScale).toBeGreaterThanOrEqual(0.7)
+  })
+})
+
+describe('the figures', () => {
+  it('rolls in steps of 10 W, 0.1 kW and 1 kW', () => {
+    expect(quantised(634)).toBe(630)
+    expect(quantised(7_240)).toBe(7_200)
+    expect(quantised(11_600)).toBe(12_000)
+  })
+
+  it('holds still on a rounding edge', () => {
+    let shown = quantisedHolding(1_450, null)
+    for (const w of [1_440, 1_460, 1_449]) shown = quantisedHolding(w, shown)
+    expect(shown).toBe(1_500)
+    expect(quantisedHolding(1_380, shown)).toBe(1_400)
+  })
+
+  it('keys a reading by what it draws, so a 1 W wobble is the same ring', () => {
+    const at = (w: number) => ringReadings({ load: 1, planets: [planet({ id: 'grid', role: 'grid', kw: w / 1000 })] }, true)
+    expect(ringKey(at(1_401))).toBe(ringKey(at(1_402)))
+    expect(ringKey(at(1_401))).not.toBe(ringKey(at(1_480)))
+  })
+
+  it('writes what a node does with its level', () => {
+    const r = { word: 'charging', levelPct: 68 } as RingReading
+    expect(doing(r)).toBe('Charging · 68%')
+    expect(doing({ ...r, levelPct: null })).toBe('Charging')
+    expect(doing({ ...r, word: '', levelPct: null })).toBe(' ')
+  })
+})
diff --git a/src/lib/state/ring.ts b/src/lib/state/ring.ts
new file mode 100644
index 0000000..c620ff9
--- /dev/null
+++ b/src/lib/state/ring.ts
@@ -0,0 +1,375 @@
+/* The ring on Now, as the iOS app draws it (Ring / Quiet, chosen by Fredrik
+ * on 24 October 2026).
+ *
+ * The home's use sits in the middle of a ring. The sun is top left, the
+ * battery top right, the grid bottom left and the car bottom right, each as
+ * text on the ground. Each one owns the quarter of the ring that faces it,
+ * and its arc lights from that quarter's middle out, longer with more power.
+ * A node whose partner across the middle is missing moves onto the middle
+ * axis, so a home with no car is a Y.
+ *
+ * Everything here is a plain function of the readings and the room, so the
+ * drawing and its tests agree. The numbers are the phone's: the iOS app's
+ * NowFlow.swift and Flow.swift, and a change to one belongs in both.
+ */
+
+import type { ControlMark, ControlScope } from '$vendor/ftw/control-feedback.js'
+import { FLOW_IDLE_W, type FlowPlanet, type FlowReadings } from './flow'
+
+export type RingNode = 'solar' | 'battery' | 'home' | 'grid' | 'car'
+
+export type RingSpot = 'topLeading' | 'topTrailing' | 'bottomLeading' | 'bottomTrailing' | 'top' | 'bottom' | 'center'
+
+/** One node as Now draws it. */
+export interface RingReading {
+  node: RingNode
+  /** Watts as shown, never signed: the direction is in `word`. Null when
+   *  the box sends no such reading. */
+  watts: number | null
+  /** What it does, lower case: making, charging, buying, using… */
+  word: string
+  /** Its energy's colour, for its name and arc while live. */
+  color: string
+  /** Power flows toward the home. Decides which way the light runs. */
+  towardHome: boolean
+  /** The battery's charge, or the car's level, in percent. */
+  levelPct: number | null
+  /** The box confirms this reading live. Only then does anything glow or move. */
+  live: boolean
+  /** Core's warning or alarm on this node, or null while all is well. */
+  mark: ControlMark | null
+  /** What a tap opens, or null where there is nothing to open. */
+  scope: ControlScope | null
+}
+
+/** Above the idle line: worth a beam of light. */
+export function flowing(r: RingReading): boolean {
+  return (r.watts ?? 0) > FLOW_IDLE_W
+}
+
+export const NODE_TITLE: Record<RingNode, string> = {
+  solar: 'Solar',
+  battery: 'Battery',
+  home: 'Usage',
+  grid: 'Grid',
+  car: 'Car',
+}
+
+/** The order Now draws its nodes in, as the phone does. */
+const ORDER: RingNode[] = ['solar', 'battery', 'home', 'grid', 'car']
+
+const ROLE: Record<Exclude<RingNode, 'home'>, FlowPlanet['role']> = {
+  solar: 'pv',
+  battery: 'battery',
+  grid: 'grid',
+  car: 'ev',
+}
+
+const idle = (w: number) => Math.abs(w) <= FLOW_IDLE_W
+
+/** A planet that only holds a place: no reading behind it. */
+const empty = (p: FlowPlanet) => p.placeholder === true || p.sub === 'no data' || !Number.isFinite(p.kw)
+
+/** The box's hero's rule for a planet that opens something: a control mark
+ *  always does, a placeholder never does otherwise. */
+const opens = (p: FlowPlanet) => p.clickable !== false && (!!p.controlMark || (!p.placeholder && !!p.role))
+
+/** Several devices of one kind fold into one node, as on the phone. */
+function fold(node: Exclude<RingNode, 'home'>, first: FlowPlanet, group: FlowPlanet[], live: boolean): RingReading {
+  const real = group.filter((p) => !empty(p))
+  const scope: ControlScope | null = !group.some(opens)
+    ? null
+    : group.length === 1
+      ? { role: first.role, name: first.name ?? null, id: first.id }
+      : { role: first.role, name: null, id: `agg-${first.role}` }
+  const mark = strongest(group)
+  // A sum with a device missing is not the whole reading, so it is not live.
+  const base = { node, mark, scope, live: live && real.length === group.length }
+  if (real.length === 0) {
+    return { ...base, watts: null, word: 'no reading', color: color(node, 0), towardHome: node !== 'car', levelPct: null }
+  }
+  // Signed into the home's side of each device: what a battery takes is
+  // positive, as is what the grid sells to the home. The planets carry a
+  // magnitude and a direction, so the sign is rebuilt from both.
+  const signed = real.reduce((sum, p) => {
+    const kw = Math.abs(p.kw) * 1000
+    switch (node) {
+      case 'solar': return sum + p.kw * 1000
+      case 'battery': return sum + (p.toHub ? -kw : kw)
+      case 'grid': return sum + (p.toHub ? kw : -kw)
+      case 'car': return sum + kw
+    }
+  }, 0)
+  const socs = real.map((p) => p.soc).filter((s): s is number => typeof s === 'number' && Number.isFinite(s))
+  const level = node === 'battery'
+    ? (socs.length ? Math.round(socs.reduce((a, b) => a + b, 0) / socs.length) : null)
+    : node === 'car' && socs.length === 1 && socs[0] !== undefined ? Math.round(socs[0]) : null
+  return {
+    ...base,
+    watts: Math.abs(signed),
+    word: word(node, signed),
+    color: color(node, signed),
+    towardHome: node === 'battery' ? signed < 0 : node === 'grid' ? signed >= 0 : node === 'solar',
+    levelPct: level,
+  }
+}
+
+function word(node: RingNode, w: number): string {
+  switch (node) {
+    case 'solar': return idle(w) ? 'resting' : 'making'
+    case 'battery': return idle(w) ? 'resting' : w > 0 ? 'charging' : 'giving power'
+    case 'grid': return idle(w) ? 'balanced' : w > 0 ? 'buying' : 'selling'
+    case 'car': return idle(w) ? 'resting' : 'charging'
+    case 'home': return 'using'
+  }
+}
+
+/** The node's own colour: its kind, and for the battery which way it runs. */
+function color(node: RingNode, w: number): string {
+  switch (node) {
+    case 'solar': return 'var(--energy-generation)'
+    case 'battery': return !idle(w) && w < 0 ? 'var(--energy-gives)' : 'var(--energy-storage)'
+    case 'grid': return 'var(--energy-import)'
+    case 'car': return 'var(--energy-mobility)'
+    case 'home': return 'var(--fg)'
+  }
+}
+
+function strongest(group: FlowPlanet[]): ControlMark | null {
+  const marks = group.map((p) => p.controlMark).filter((m): m is ControlMark => !!m)
+  if (!marks.length) return null
+  const tone = marks.some((m) => m.tone === 'alarm') ? 'alarm' : 'warning'
+  const n = marks.filter((m) => m.tone === tone).length
+  const [only] = marks
+  return {
+    tone,
+    label: only && marks.length === 1 ? only.label : `${n} ${n === 1 ? 'device needs' : 'devices need'} attention`,
+  }
+}
+
+/**
+ * Now's nodes from the readings the hero used to take.
+ *
+ * The grid and the home are always drawn, so a missing meter reads as
+ * unknown. Any other kind appears only when the box has a device of it.
+ */
+export function ringReadings(r: FlowReadings, live: boolean): RingReading[] {
+  const out: RingReading[] = []
+  for (const node of ORDER) {
+    if (node === 'home') {
+      const load = r.load
+      const known = load !== null && Number.isFinite(load)
+      out.push({
+        node, watts: known ? Math.max(0, load * 1000) : null, word: known ? 'using' : 'no reading',
+        color: color('home', 0), towardHome: false, levelPct: null, live: live && known, mark: null,
+        scope: { role: 'load' },
+      })
+      continue
+    }
+    const group = r.planets.filter((p) => p.role === ROLE[node])
+    const [first] = group
+    if (!first) continue
+    out.push(fold(node, first, group, live))
+  }
+  return out
+}
+
+// ---------- where each node sits ----------
+
+export function ringSpot(node: RingNode, nodes: readonly RingNode[]): RingSpot {
+  const has = (n: RingNode) => nodes.includes(n)
+  switch (node) {
+    case 'home': return 'center'
+    case 'solar': return has('battery') ? 'topLeading' : 'top'
+    case 'battery': return has('solar') ? 'topTrailing' : 'top'
+    case 'grid': return has('car') ? 'bottomLeading' : 'bottom'
+    case 'car': return has('grid') ? 'bottomTrailing' : 'bottom'
+  }
+}
+
+export const onAxis = (s: RingSpot) => s === 'top' || s === 'bottom'
+
+/** Degrees left open between two quarters of the ring. */
+export const RING_GAP = 14
+
+/**
+ * The middle of a node's arc, in degrees clockwise from three o'clock with y
+ * down, as a canvas draws: the quarter facing its corner, or straight up or
+ * down for a node on the axis.
+ */
+export function ringAngle(spot: RingSpot): number {
+  switch (spot) {
+    case 'topLeading': return 225
+    case 'topTrailing': return 315
+    case 'bottomTrailing': return 45
+    case 'bottomLeading': return 135
+    case 'top': return 270
+    case 'bottom': return 90
+    case 'center': return 0
+  }
+}
+
+export interface RingArc {
+  /** The whole quarter the node may light. */
+  track: [number, number]
+  /** The part it lights, centred in it, or null at rest. */
+  lit: [number, number] | null
+}
+
+/** A node's arc: a stronger flow grows both ways, so the quarter's middle
+ *  always faces the node. */
+export function ringArc(spot: RingSpot, fill: number): RingArc {
+  const mid = ringAngle(spot)
+  const half = (90 - RING_GAP) / 2
+  const f = Math.min(1, Math.max(0, fill))
+  return {
+    track: [mid - half, mid + half],
+    lit: f > 0.001 ? [mid - half * f, mid + half * f] : null,
+  }
+}
+
+/**
+ * How much of its quarter a node's arc lights: none at rest, a fifth at
+ * 0.6 kW, half at 1.8 kW, nine tenths at 6 kW. One curve for every node, so
+ * arcs compare across the ring, and it saturates, so an 11 kW charger never
+ * swallows the rest.
+ */
+export function ringFill(kw: number): number {
+  const a = Math.abs(kw)
+  if (!Number.isFinite(a) || a * 1000 <= FLOW_IDLE_W) return 0
+  return Math.min(1, Math.max(0.12, 1 - Math.exp(-a / 2.5)))
+}
+
+// ---------- the room it takes ----------
+
+/** A corner label's type, in CSS pixels: name, figure, word. */
+export const LABEL_TYPE = { name: 15, figure: 30, unit: 15, word: 14 } as const
+
+/** A corner label's height for its three rows. */
+export function labelHeight(t: { name: number; figure: number; word: number } = LABEL_TYPE): number {
+  return Math.min(t.name, 18) * 1.3 + t.figure * 1.2 + t.word * 1.3 + 2
+}
+
+/** A corner label's width: 38 % of the flow, from 92 px to 140 px. */
+export function nodeWidth(width: number): number {
+  return Math.min(140, Math.max(92, width * 0.38))
+}
+
+export interface RingGeometry {
+  cx: number
+  cy: number
+  /** Through the middle of the arcs. */
+  diameter: number
+  radius: number
+  thickness: number
+  /** The hub's circle inside it. */
+  hub: number
+  /** The height of the box whose corners hold the labels. */
+  box: number
+  /** What the labels are drawn at, of their size: 1 unless they would touch the least ring. */
+  labelScale: number
+}
+
+/** Below it the home's figure has no room. */
+export const LEAST_RING = 120
+const LEAST_SCALE = 0.7
+
+const thick = (d: number) => Math.max(7, Math.round(d * 0.042))
+
+/** The height the ring itself takes: its stroke and the glow around it,
+ *  1.4 strokes either side of the middle of the arc. */
+const ringRoom = (d: number) => d + 3 * thick(d)
+
+/** How far above the middle a corner label's inner edge clears the ring. */
+function clearance(d: number, dx: number): number {
+  const reach = d / 2 + thick(d) / 2 + 10
+  return dx < reach ? Math.sqrt(reach * reach - dx * dx) : 0
+}
+
+/**
+ * The largest ring, up to 62 % of the width and 300 px, whose corner labels
+ * clear it by 10 px, with the labels in the corners of a box just tall
+ * enough for that. Where even the least ring leaves too little height the
+ * labels shrink rather than touch it.
+ */
+export function ringGeometry(width: number, height: number, label: number, labelWidth: number, axis: boolean): RingGeometry {
+  const dx = axis ? 0 : Math.max(0, width / 2 - labelWidth)
+  const box = (d: number) => 2 * (clearance(d, dx) + label)
+  let d = Math.min(width * 0.62, 300)
+  while (d > LEAST_RING && (box(d) > height || ringRoom(d) > height)) d = Math.max(LEAST_RING, d - 2)
+  const room = height / 2 - clearance(d, dx)
+  const labelScale = box(d) > height && label > 0 ? Math.min(1, Math.max(LEAST_SCALE, room / label)) : 1
+  return {
+    cx: width / 2,
+    cy: height / 2,
+    diameter: d,
+    radius: d / 2,
+    thickness: thick(d),
+    hub: d * 0.62,
+    // Where the labels sit beside the ring, the box still spans it, so they
+    // keep to its corners rather than meet in the middle.
+    box: Math.min(height, Math.max(2 * (clearance(d, dx) + label * labelScale), ringRoom(d))),
+    labelScale,
+  }
+}
+
+/**
+ * The flow's height for its width: what the largest ring and its labels
+ * need, or the ring alone where the labels sit beside it, from 232 px to
+ * 420 px. A function of the width and the home's shape
+ * alone, so nothing on the page moves when a reading arrives.
+ */
+export function flowHeight(width: number, axis: boolean, label = labelHeight()): number {
+  const dx = axis ? 0 : Math.max(0, width / 2 - nodeWidth(width))
+  const d = Math.min(width * 0.62, 300)
+  return Math.min(420, Math.max(232, Math.ceil(Math.max(2 * (clearance(d, dx) + label), ringRoom(d)))))
+}
+
+// ---------- the figures ----------
+
+/** The figure's step at a reading: 10 W, 100 W or 1 kW. */
+function step(watts: number): number {
+  const a = Math.abs(watts)
+  return a < 995 ? 10 : a < 9_950 ? 100 : 1_000
+}
+
+/**
+ * A figure on Now: 10 W steps under 1 kW, 0.1 kW to 10 kW, whole kW past
+ * that. It changes when the digits on screen change, and not every second.
+ */
+export function quantised(watts: number): number {
+  if (!Number.isFinite(watts)) return 0
+  return Math.round(watts / step(watts)) * step(watts)
+}
+
+/**
+ * A figure that holds still on a rounding edge: the one shown stays until
+ * the reading moves more than 60 % of a step away from it, so 1.45 kW read
+ * as 1.5, 1.4 and 1.5 again shows 1.5 throughout.
+ */
+export function quantisedHolding(watts: number, shown: number | null | undefined): number {
+  const next = quantised(watts)
+  if (shown == null || !Number.isFinite(shown) || !Number.isFinite(watts)) return next
+  return Math.abs(watts - shown) > 0.6 * Math.max(step(shown), step(watts)) ? next : shown
+}
+
+/** What a node does, under its figure: "Charging · 68%", or a space when
+ *  there is nothing yet, so the row keeps its height. */
+export function doing(r: RingReading): string {
+  const w = r.word.charAt(0).toUpperCase() + r.word.slice(1)
+  if (r.levelPct == null) return w || ' '
+  const pct = `${Math.round(r.levelPct)}%`
+  return w ? `${w} · ${pct}` : pct
+}
+
+/**
+ * What a reading looks like on screen, as one string: the figures as they
+ * are drawn, not the watts behind them. Two ticks with the same key draw the
+ * same ring, so a 1 W wobble repaints nothing.
+ */
+export function ringKey(readings: readonly RingReading[]): string {
+  return JSON.stringify(readings.map((r) => [
+    r.node, r.watts === null ? null : quantised(r.watts), r.word, r.color, r.towardHome,
+    r.levelPct === null ? null : Math.round(r.levelPct), r.live, r.mark, r.scope,
+  ]))
+}
diff --git a/src/views/EnergyRing.marks.svelte.test.ts b/src/views/EnergyRing.marks.svelte.test.ts
new file mode 100644
index 0000000..1538105
--- /dev/null
+++ b/src/views/EnergyRing.marks.svelte.test.ts
@@ -0,0 +1,45 @@
+import {test,expect,afterEach} from 'vitest'
+import {render} from '@testing-library/svelte'
+import EnergyRing from './EnergyRing.svelte'
+import {flowReadingsFromStatus, type SiteStatus} from '$lib/state/flow'
+import {ringReadings} from '$lib/state/ring'
+
+HTMLCanvasElement.prototype.getContext = (() => null) as never
+
+const row=(extra:Record<string,unknown>)=>({driver:'battery',kind:'battery',status:'following',reason:'power_observed',severity:'info',evidence:'measured',readings_fresh:true,...extra})
+
+const battery=(status:SiteStatus,live=true)=>{
+ document.body.replaceChildren()
+ render(EnergyRing,{props:{readings:ringReadings(flowReadingsFromStatus(status,live),live)}})
+ return document.querySelector<HTMLElement>('[data-node="battery"]')!
+}
+
+afterEach(()=>document.body.replaceChildren())
+
+test('a folded node cannot hide an offline sibling alarm or claim its old watts',()=>{
+ const node=battery({grid_w:1000,load_w:500,drivers:{a:{status:'ok',bat_w:1000},b:{status:'offline',bat_w:5000}},control_feedback:[
+  row({driver:'a',evidence:'confirmed'}),
+  row({driver:'b',status:'no_contact',reason:'readings_lost',severity:'alarm',evidence:'accepted',readings_fresh:false,actual_w:null}),
+ ]})
+ expect(node.querySelector('.mark')?.getAttribute('data-tone')).toBe('alarm')
+ expect(node.textContent).not.toContain('6.0 kW')
+ // One pack is missing, so the sum is not the whole reading.
+ expect(node.getAttribute('aria-label')).toMatch(/not live/)
+})
+
+test('the ring marks only what needs a look and stays quiet otherwise',()=>{
+ const update=(extra:Record<string,unknown>,live=true)=>
+  battery({grid_w:0,load_w:500,drivers:{battery:{status:'ok',bat_w:-500}},control_feedback:[row(extra)]},live)
+ let node=update({evidence:'confirmed'})
+ expect(node.querySelector('.mark')).toBeNull()
+ node=update({status:'waiting',reason:'waiting_response',evidence:'accepted'})
+ expect(node.querySelector('.mark')).toBeNull()
+ node=update({status:'not_following',reason:'setpoint_changed',severity:'warning'})
+ expect(node.querySelector('.mark')?.getAttribute('data-tone')).toBe('warning')
+ expect(node.getAttribute('aria-label')).toContain('Not following')
+ node=update({status:'not_following',reason:'device_fault',severity:'alarm'})
+ expect(node.querySelector('.mark')?.getAttribute('data-tone')).toBe('alarm')
+ // A cached snapshot raises no alarm it cannot stand behind.
+ node=update({status:'no_contact',reason:'readings_lost',severity:'alarm'},false)
+ expect(node.querySelector('.mark')).toBeNull()
+})
diff --git a/src/views/EnergyRing.svelte b/src/views/EnergyRing.svelte
new file mode 100644
index 0000000..f95ebf8
--- /dev/null
+++ b/src/views/EnergyRing.svelte
@@ -0,0 +1,685 @@
+<!--
+  The home and what flows through it, as the iOS app draws Now (Ring /
+  Quiet, chosen by Fredrik on 24 October 2026): the home's use in the middle
+  of a ring, each other node as text on the ground in its corner, and the
+  quarter of the ring that faces it lit from its middle out, longer with
+  more power. A soft wave of light runs along a lit arc, clockwise for power
+  coming into the home and the other way for power leaving it.
+
+  Light means live. Only a reading the box confirms live glows or moves; a
+  cached or quiet arc is a faint still arc in ink, and a node at rest shows
+  only its quarter's track. The loop runs only while an arc is live and
+  flowing, or for a moment after a change so an arc can grow or cool, and
+  only while this view is on screen. Under reduced motion the light holds
+  still and a chevron on the arc says which way it flows.
+-->
+<script lang="ts">
+  import { onMount, untrack } from 'svelte'
+  import type { ControlScope } from '$vendor/ftw/control-feedback.js'
+  import { formatPower } from '$lib/format/power'
+  import {
+    NODE_TITLE, doing, flowHeight, flowing, labelHeight, nodeWidth, onAxis, quantised, quantisedHolding,
+    ringArc, ringFill, ringGeometry, ringSpot, type RingNode, type RingReading, type RingSpot,
+  } from '$lib/state/ring'
+  import { ArcMotion, WAVELENGTH, alpha, depth, wave, type ArcFrame, type ArcTarget } from '$lib/state/ring-motion'
+
+  interface Props {
+    readings: RingReading[]
+    /** Whether this view is the one on screen. Hidden, nothing draws. */
+    active?: boolean
+    /** A tap on a node, with the scope the box's own hero would send. */
+    onopen?: (scope: ControlScope) => void
+  }
+
+  let { readings, active = true, onopen }: Props = $props()
+
+  let width = $state(0)
+  // jsdom and a first frame before layout have no width; draw a phone's.
+  const w = $derived(width > 0 ? width : 360)
+  const nodes = $derived(readings.map((r) => r.node))
+  const axis = $derived(nodes.some((n) => onAxis(ringSpot(n, nodes))))
+  const height = $derived(flowHeight(w, axis))
+  const labelW = $derived(nodeWidth(w))
+  const ring = $derived(ringGeometry(w, height, labelHeight(), labelW, axis))
+  const corners = $derived(
+    readings.filter((r) => r.node !== 'home').map((r) => ({ r, spot: ringSpot(r.node, nodes) }))
+  )
+  const home = $derived(readings.find((r) => r.node === 'home'))
+  const anyLive = $derived(readings.some((r) => r.live))
+
+  // ---------- figures ----------
+
+  /** The figure on screen per node, held on a rounding edge. Not state: it
+   *  only remembers what was last shown. */
+  const held = new Map<RingNode, number>()
+  function figure(r: RingReading) {
+    if (r.watts == null) {
+      held.delete(r.node)
+      return null
+    }
+    const shown = quantisedHolding(r.watts, held.get(r.node))
+    held.set(r.node, shown)
+    return formatPower(shown)
+  }
+
+  function spoken(r: RingReading): string {
+    const parts = [NODE_TITLE[r.node]]
+    if (r.watts != null) {
+      const f = formatPower(quantised(r.watts))
+      parts.push(`${f.text} ${f.unit}`)
+    }
+    parts.push(r.word)
+    if (r.levelPct != null) parts.push(`${Math.round(r.levelPct)}%`)
+    parts.push(r.live ? 'live' : 'not live')
+    if (r.mark) parts.push(r.mark.label)
+    return parts.join(', ')
+  }
+
+  function open(r: RingReading) {
+    if (r.scope) onopen?.(r.scope)
+  }
+
+  // ---------- the ring ----------
+
+  interface Arc {
+    node: RingNode
+    spot: RingSpot
+    color: string
+    target: ArcTarget
+  }
+
+  const arcs = $derived<Arc[]>(
+    corners.map(({ r, spot }) => {
+      // The figure as drawn, so a 1 W wobble is the same drawing.
+      const kw = (r.watts !== null && Number.isFinite(r.watts) ? quantised(r.watts) : 0) / 1000
+      return {
+        node: r.node,
+        spot,
+        color: r.color,
+        target: { kw, live: r.live, flowing: flowing(r), towardHome: r.towardHome, fill: ringFill(kw) },
+      }
+    })
+  )
+  const drawn = $derived(JSON.stringify(arcs))
+
+  let root = $state<HTMLDivElement | undefined>()
+  let canvas = $state<HTMLCanvasElement | undefined>()
+  const motions = new Map<RingNode, ArcMotion>()
+  let frameId = 0
+  let settleUntil = 0
+  let reduceMotion = false
+  let reduceTransparency = false
+  let pageVisible = true
+  let onScreen = true
+
+  /** Long enough for an arc to grow (τ 0.4 s) and a glow to cool. */
+  const SETTLE_MS = 2_400
+
+  type RGBA = [number, number, number, number]
+  let ink: RGBA = [238, 243, 255, 1]
+  let ink2: RGBA = [154, 165, 184, 1]
+  let dark = true
+  const colors = new Map<string, RGBA>()
+
+  /** One small canvas to read colours with, made once. */
+  let probe: CanvasRenderingContext2D | null | undefined
+
+  /** A colour as numbers, for a canvas that cannot read tokens. */
+  function parse(css: string, fallback: RGBA): RGBA {
+    if (!canvas) return fallback
+    const style = getComputedStyle(canvas)
+    const value = css.replace(/var\((--[\w-]+)\)/g, (_, name: string) => style.getPropertyValue(name).trim())
+    probe ??= document.createElement('canvas').getContext('2d')
+    if (!probe || !value) return fallback
+    // A value the canvas cannot read leaves the one before it in place.
+    const unset = '#010203'
+    probe.fillStyle = unset
+    probe.fillStyle = value
+    const out = String(probe.fillStyle)
+    if (out === unset) return fallback
+    const hex = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(out)
+    if (hex) {
+      const [, r = '0', g = '0', b = '0'] = hex
+      return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16), 1]
+    }
+    const rgb = /rgba?\(([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*([\d.]+))?\)/.exec(out)
+    if (rgb) {
+      const [, r = '0', g = '0', b = '0', a = '1'] = rgb
+      return [+r, +g, +b, +a]
+    }
+    return fallback
+  }
+
+  /** The theme's ink and ground, read again when the theme changes. */
+  function resolveTheme() {
+    ink = parse('var(--fg)', ink)
+    ink2 = parse('var(--fg-dim)', ink2)
+    const ground = parse('var(--surface)', [5, 8, 15, 1])
+    dark = 0.2126 * ground[0] + 0.7152 * ground[1] + 0.0722 * ground[2] < 128
+    colors.clear()
+  }
+
+  /** An arc's colour, read once per theme. */
+  function hueOf(css: string): RGBA {
+    let c = colors.get(css)
+    if (!c) colors.set(css, (c = parse(css, ink)))
+    return c
+  }
+
+  const rgba = (c: RGBA, opacity = 1) => `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${Math.max(0, Math.min(1, c[3] * opacity))})`
+  function mix(a: RGBA, b: RGBA, k: number): RGBA {
+    const t = Math.min(1, Math.max(0, k))
+    return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t, a[3] + (b[3] - a[3]) * t]
+  }
+
+  const rad = (deg: number) => (deg * Math.PI) / 180
+
+  function running(now: number): boolean {
+    if (!active || !pageVisible || !onScreen || reduceMotion) return false
+    return now < settleUntil || arcs.some((a) => a.target.live && a.target.flowing)
+  }
+
+  /** Draw now, and keep drawing while something moves. */
+  function kick() {
+    if (!active || frameId || typeof requestAnimationFrame !== 'function') return
+    frameId = requestAnimationFrame(tick)
+  }
+
+  function tick() {
+    frameId = 0
+    if (!active) return
+    const now = performance.now()
+    draw(now / 1000)
+    if (running(now)) frameId = requestAnimationFrame(tick)
+  }
+
+  function draw(t: number) {
+    const ctx = canvas?.getContext('2d')
+    if (!canvas || !ctx) return
+    const g = ring
+    const dpr = window.devicePixelRatio || 1
+    const pw = Math.round(w * dpr)
+    const ph = Math.round(height * dpr)
+    if (canvas.width !== pw || canvas.height !== ph) {
+      canvas.width = pw
+      canvas.height = ph
+    }
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    ctx.clearRect(0, 0, w, height)
+    ctx.lineCap = 'round'
+    ctx.lineWidth = g.thickness
+
+    const path = (range: [number, number]) => {
+      ctx.beginPath()
+      ctx.arc(g.cx, g.cy, g.radius, rad(range[0]), rad(range[1]), false)
+    }
+
+    // Each node's quarter, the track its arc lights.
+    ctx.strokeStyle = rgba(ink, dark ? 0.13 : 0.09)
+    for (const a of arcs) {
+      path(ringArc(a.spot, 1).track)
+      ctx.stroke()
+    }
+
+    const glows = dark && !reduceTransparency
+    const cap = ((g.thickness / 2 / g.radius) * 180) / Math.PI
+    for (const a of arcs) {
+      let m = motions.get(a.node)
+      if (!m) motions.set(a.node, (m = new ArcMotion(a.target, t)))
+      const f = m.step(a.target, t, reduceMotion)
+      const k = 1 - f.idle
+      const lit = ringArc(a.spot, f.fill).lit
+      if (k <= 0.01 || !lit) continue
+      const hue = hueOf(a.color)
+      if (glows && f.light > 0.004) {
+        for (const [wide, strength] of [[2.8, 0.12], [1.8, 0.25]] as const) {
+          ctx.lineWidth = g.thickness * wide
+          ctx.strokeStyle = rgba(hue, strength * f.light * k)
+          path(lit)
+          ctx.stroke()
+        }
+        ctx.lineWidth = g.thickness
+      }
+      // Light means live: the arc's colour while the box confirms it, ink
+      // once it does not, crossing over as the phosphor ignites or cools.
+      const color = mix(ink2, hue, f.light)
+      // With no glow, full-strength colour says live alone: the wave runs
+      // shallower and the arc keeps its colour between crests.
+      ctx.strokeStyle = gradient(ctx, lit, a.target.towardHome, f, color, k, cap, glows ? 1 : 0.35)
+      path(lit)
+      ctx.stroke()
+      if (reduceMotion && a.target.flowing) chevron(ctx, lit, a.target.towardHome, alpha(f) * k)
+    }
+  }
+
+  /**
+   * The core's brightness along the arc as a conic gradient that starts
+   * `lead` degrees before the arc's first angle, so the round cap there
+   * takes the arc's first colour. Stops sit ten to a wavelength, close
+   * enough that a crest running past keeps its height within 4 %.
+   */
+  function gradient(ctx: CanvasRenderingContext2D, lit: [number, number], clockwise: boolean, f: ArcFrame, color: RGBA, k: number, lead: number, scale: number): CanvasGradient | string {
+    const span = lit[1] - lit[0]
+    const strength = (deg: number) => {
+      // From where the light starts: the first angle when it runs
+      // clockwise, the last when it runs back.
+      const s = ((clockwise ? deg : span - deg) * ring.radius * Math.PI) / 180
+      return alpha(f) * (1 - depth(f) * scale * (1 - wave(s, f.phase))) * k
+    }
+    if (typeof ctx.createConicGradient !== 'function') return rgba(color, strength(span / 2))
+    const grad = ctx.createConicGradient(rad(lit[0] - lead), ring.cx, ring.cy)
+    const at = (deg: number) => (deg + lead) / 360
+    grad.addColorStop(0, rgba(color, strength(0)))
+    grad.addColorStop(at(0), rgba(color, strength(0)))
+    const perDegree = (ring.radius * Math.PI) / 180
+    if (depth(f) * scale > 0.001 && span * perDegree > 1) {
+      const step = WAVELENGTH / 10 / perDegree
+      for (let d = step; d < span; d += step) grad.addColorStop(at(d), rgba(color, strength(d)))
+    }
+    grad.addColorStop(at(span), rgba(color, strength(span)))
+    // Past the arc only the end's round cap is drawn; it keeps the end's colour.
+    grad.addColorStop(1, rgba(color, strength(span)))
+    return grad
+  }
+
+  /** A still chevron at the middle of an arc, pointing the way the light
+   *  would run, in ink. */
+  function chevron(ctx: CanvasRenderingContext2D, lit: [number, number], clockwise: boolean, opacity: number) {
+    const g = ring
+    const mid = rad((lit[0] + lit[1]) / 2)
+    const cx = g.cx + g.radius * Math.cos(mid)
+    const cy = g.cy + g.radius * Math.sin(mid)
+    const dir = clockwise ? 1 : -1
+    const ux = -Math.sin(mid) * dir
+    const uy = Math.cos(mid) * dir
+    const size = Math.max(6, g.thickness * 0.6 + 3)
+    ctx.save()
+    ctx.lineWidth = 1.75
+    ctx.lineJoin = 'round'
+    ctx.strokeStyle = rgba(ink, opacity)
+    ctx.beginPath()
+    ctx.moveTo(cx - ux * size - uy * size, cy - uy * size + ux * size)
+    ctx.lineTo(cx + ux * size * 0.6, cy + uy * size * 0.6)
+    ctx.lineTo(cx - ux * size + uy * size, cy - uy * size - ux * size)
+    ctx.stroke()
+    ctx.restore()
+  }
+
+  // A change to what is drawn, or to the room, plays for a moment. Kept by
+  // value: a prop can signal with nothing changed, and a 1 Hz tick that
+  // changes nothing must draw nothing.
+  let played = ''
+  $effect(() => {
+    const key = `${drawn}|${w}|${height}`
+    if (!active || !canvas) {
+      played = ''
+      return
+    }
+    if (key === played) return
+    played = key
+    untrack(() => {
+      settleUntil = performance.now() + SETTLE_MS
+      kick()
+    })
+  })
+
+  onMount(() => {
+    const media = (q: string) => (typeof matchMedia === 'function' ? matchMedia(q) : null)
+    const motion = media('(prefers-reduced-motion: reduce)')
+    const transparency = media('(prefers-reduced-transparency: reduce)')
+    const scheme = media('(prefers-color-scheme: dark)')
+    const sync = () => {
+      reduceMotion = motion?.matches ?? false
+      reduceTransparency = transparency?.matches ?? false
+      pageVisible = document.visibilityState !== 'hidden'
+      resolveTheme()
+      kick()
+    }
+    sync()
+    for (const m of [motion, transparency, scheme]) m?.addEventListener('change', sync)
+    document.addEventListener('visibilitychange', sync)
+    // The theme switch writes data-theme on <html>.
+    const theme = typeof MutationObserver === 'function' ? new MutationObserver(sync) : null
+    theme?.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })
+    const seen = typeof IntersectionObserver === 'function' && canvas
+      ? new IntersectionObserver(([e]) => {
+          onScreen = e?.isIntersecting ?? true
+          kick()
+        })
+      : null
+    if (canvas) seen?.observe(canvas)
+    // Guarded rather than bound: a test's DOM has no ResizeObserver.
+    const size = typeof ResizeObserver === 'function'
+      ? new ResizeObserver(([e]) => {
+          // Hidden, the view measures 0; keep the width it had.
+          if (e && e.contentRect.width > 0) width = e.contentRect.width
+        })
+      : null
+    if (root) {
+      if (root.clientWidth > 0) width = root.clientWidth
+      size?.observe(root)
+    }
+    return () => {
+      size?.disconnect()
+      for (const m of [motion, transparency, scheme]) m?.removeEventListener('change', sync)
+      document.removeEventListener('visibilitychange', sync)
+      theme?.disconnect()
+      seen?.disconnect()
+      if (frameId) cancelAnimationFrame(frameId)
+      frameId = 0
+    }
+  })
+
+  const ALIGN: Record<RingSpot, string> = {
+    topLeading: 'top: 0; left: 0; text-align: left; align-items: flex-start',
+    topTrailing: 'top: 0; right: 0; text-align: right; align-items: flex-end',
+    bottomLeading: 'bottom: 0; left: 0; text-align: left; align-items: flex-start',
+    bottomTrailing: 'bottom: 0; right: 0; text-align: right; align-items: flex-end',
+    top: 'top: 0; left: 50%; transform: translateX(-50%); text-align: center; align-items: center',
+    bottom: 'bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; align-items: center',
+    center: '',
+  }
+  const trailing = (s: RingSpot) => s === 'topTrailing' || s === 'bottomTrailing'
+
+  const batteryStep = (pct: number | null) => {
+    const p = pct ?? 50
+    return p >= 88 ? 4 : p >= 63 ? 3 : p >= 38 ? 2 : p >= 13 ? 1 : 0
+  }
+</script>
+
+{#snippet symbol(r: RingReading)}
+  <svg class="symbol" viewBox="0 0 16 16" aria-hidden="true">
+    {#if r.node === 'solar'}
+      <circle cx="8" cy="8" r="3.2" fill="currentColor" />
+      <g stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+        <path d="M8 1.2v1.6M8 13.2v1.6M1.2 8h1.6M13.2 8h1.6M3.2 3.2l1.1 1.1M11.7 11.7l1.1 1.1M3.2 12.8l1.1-1.1M11.7 4.3l1.1-1.1" />
+      </g>
+    {:else if r.node === 'battery'}
+      <rect x="1" y="4.5" width="12" height="7" rx="2" fill="none" stroke="currentColor" stroke-width="1.3" />
+      <rect x="13.6" y="6.6" width="1.4" height="2.8" rx="0.6" fill="currentColor" />
+      {#if batteryStep(r.levelPct) > 0}
+        <rect x="2.6" y="6.1" width={8.8 * batteryStep(r.levelPct) / 4} height="3.8" rx="0.8" fill="currentColor" />
+      {/if}
+    {:else if r.node === 'grid'}
+      <path d="M9.2 1 3.5 9h4l-1 6 5.9-8.2H8.3z" fill="currentColor" />
+    {:else if r.node === 'car'}
+      <path d="M2.6 8.2 4 4.9c.3-.7.9-1.1 1.6-1.1h4.8c.7 0 1.3.4 1.6 1.1l1.4 3.3c.6.3 1 .9 1 1.6v2.1c0 .4-.3.7-.7.7H14v.9c0 .5-.4.9-.9.9h-.6c-.5 0-.9-.4-.9-.9v-.9H4.4v.9c0 .5-.4.9-.9.9h-.6c-.5 0-.9-.4-.9-.9v-.9h-.3c-.4 0-.7-.3-.7-.7V9.8c0-.7.4-1.3 1-1.6zm1.6-.4h7.6l-1-2.4c-.1-.2-.3-.3-.5-.3H5.7c-.2 0-.4.1-.5.3zM4.4 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm7.2 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" fill="currentColor" />
+    {/if}
+  </svg>
+{/snippet}
+
+{#snippet mark(r: RingReading)}
+  {#if r.mark}
+    <svg class="mark" viewBox="-12 -12 24 24" data-tone={r.mark.tone} aria-hidden="true">
+      <title>{r.mark.label}</title>
+      {#if r.mark.tone === 'alarm'}
+        <circle r="9" fill="var(--alarm)" />
+        <path d="M0 -4.5 V1.2 M0 4.2 V4.4" stroke="var(--surface)" stroke-width="2.2" stroke-linecap="round" />
+      {:else}
+        <path d="M0 -9 L9.5 7.5 H-9.5 Z" fill="var(--alarm)" stroke-linejoin="round" />
+        <path d="M0 -3.2 V1.8 M0 4.6 V4.8" stroke="var(--surface)" stroke-width="2" stroke-linecap="round" />
+      {/if}
+    </svg>
+  {/if}
+{/snippet}
+
+{#snippet label(r: RingReading, spot: RingSpot)}
+  {@const f = figure(r)}
+  <span class="name" style:color={r.live ? r.color : 'var(--fg-dim)'}>
+    {#if !trailing(spot)}{@render symbol(r)}{/if}
+    <span>{NODE_TITLE[r.node]}</span>
+    {#if trailing(spot)}{@render symbol(r)}{/if}
+    {@render mark(r)}
+  </span>
+  <span class="figure" class:quiet={r.watts == null || !r.live}>
+    {#if f}{f.text}{' '}<span class="unit">{f.unit}</span>{:else}—{/if}
+  </span>
+  <span class="word" class:quiet={!r.live}>{doing(r)}</span>
+  <span class="lock" aria-hidden="true"></span>
+{/snippet}
+
+<div
+  class="ring"
+  bind:this={root}
+  style:height="{height}px"
+  style:--scale={ring.labelScale}
+  data-live={anyLive}
+>
+  <canvas bind:this={canvas} style:width="{w}px" style:height="{height}px" aria-hidden="true"></canvas>
+
+  <div class="box" style:top="{ring.cy - ring.box / 2}px" style:height="{ring.box}px">
+    {#each corners as { r, spot } (r.node)}
+      {#if r.scope}
+        <button
+          type="button"
+          class="node"
+          data-node={r.node}
+          style="{ALIGN[spot]}; width: {labelW}px"
+          aria-label={spoken(r)}
+          onclick={() => open(r)}
+        >
+          {@render label(r, spot)}
+        </button>
+      {:else}
+        <div class="node" data-node={r.node} style="{ALIGN[spot]}; width: {labelW}px" role="group" aria-label={spoken(r)}>
+          {@render label(r, spot)}
+        </div>
+      {/if}
+    {/each}
+  </div>
+
+  {#if home}
+    {@const f = figure(home)}
+    <button
+      type="button"
+      class="hub"
+      data-node="home"
+      style:left="{ring.cx - ring.hub / 2}px"
+      style:top="{ring.cy - ring.hub / 2}px"
+      style:width="{ring.hub}px"
+      style:height="{ring.hub}px"
+      style:--figure="{Math.min(44, ring.hub * 0.38)}px"
+      style:--word="{Math.min(13, ring.hub * 0.12)}px"
+      aria-label={spoken(home)}
+      onclick={() => open(home)}
+    >
+      {#if ring.hub >= 110}
+        <svg class="house" viewBox="0 0 16 16" aria-hidden="true">
+          <path d="M8 1.6 1.3 7.3c-.4.3-.1.9.4.9H3v5.6c0 .4.3.7.7.7h2.8V10.4h3v4.1h2.8c.4 0 .7-.3.7-.7V8.2h1.3c.5 0 .8-.6.4-.9z" fill="currentColor" />
+        </svg>
+      {/if}
+      <span class="hub-figure" class:quiet={home.watts == null || !home.live}>{f ? f.text : '—'}</span>
+      <span class="hub-unit">{f ? f.unit : 'W'}</span>
+      <span class="hub-name">{NODE_TITLE.home}</span>
+      <span class="lock" aria-hidden="true"></span>
+    </button>
+  {/if}
+</div>
+
+<style>
+  .ring {
+    position: relative;
+    width: 100%;
+    --scale: 1;
+  }
+
+  canvas {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .box {
+    position: absolute;
+    left: 0;
+    right: 0;
+  }
+
+  /* Text on the ground: no box, three fixed rows, so nothing moves when a
+     word or a level arrives. */
+  .node {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    padding: 0;
+    background: none;
+    border: 0;
+    color: var(--fg);
+    font: inherit;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  div.node {
+    cursor: default;
+  }
+
+  .name {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: calc(15px * var(--scale));
+    font-weight: 600;
+    line-height: 1.3;
+    white-space: nowrap;
+  }
+
+  .symbol {
+    width: 1em;
+    height: 1em;
+    flex: none;
+  }
+
+  .mark {
+    width: 1em;
+    height: 1em;
+    flex: none;
+  }
+
+  .figure {
+    font-size: calc(30px * var(--scale));
+    font-weight: 500;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    color: var(--fg);
+  }
+
+  .figure.quiet {
+    color: var(--fg-dim);
+  }
+
+  .unit {
+    font-size: calc(15px * var(--scale));
+    font-weight: 500;
+    letter-spacing: 0;
+    color: var(--fg-dim);
+  }
+
+  .word {
+    font-size: calc(14px * var(--scale));
+    line-height: 1.3;
+    color: var(--fg-dim);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  .word.quiet {
+    color: var(--fg-muted);
+  }
+
+  /* The home in the middle of the ring, everything it uses right now,
+     inside a thin circle of ink. */
+  .hub {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0 10px;
+    border-radius: 50%;
+    border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
+    background: none;
+    color: var(--fg);
+    font: inherit;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .house {
+    width: calc(var(--word) + 3px);
+    height: calc(var(--word) + 3px);
+    color: var(--fg-dim);
+    margin-bottom: 2px;
+  }
+
+  .hub-figure {
+    font-size: var(--figure);
+    font-weight: 500;
+    line-height: 1.05;
+    letter-spacing: -1px;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .hub-figure.quiet {
+    color: var(--fg-dim);
+  }
+
+  .hub-unit {
+    font-size: var(--word);
+    font-weight: 500;
+    color: var(--fg-dim);
+  }
+
+  .hub-name {
+    font-size: var(--word);
+    color: var(--fg-dim);
+  }
+
+  /* The lock-on: four 7 px corner brackets close on what is pressed, from
+     1.15× to its size. Also the keyboard's focus mark. */
+  .lock {
+    position: absolute;
+    inset: -6px;
+    pointer-events: none;
+    opacity: 0;
+    transform: scale(1.15);
+    transition: opacity var(--motion-base) var(--ease), transform var(--motion-base) var(--ease);
+    --c: var(--fg);
+    background:
+      linear-gradient(var(--c), var(--c)) top left / 7px 1px no-repeat,
+      linear-gradient(var(--c), var(--c)) top left / 1px 7px no-repeat,
+      linear-gradient(var(--c), var(--c)) top right / 7px 1px no-repeat,
+      linear-gradient(var(--c), var(--c)) top right / 1px 7px no-repeat,
+      linear-gradient(var(--c), var(--c)) bottom left / 7px 1px no-repeat,
+      linear-gradient(var(--c), var(--c)) bottom left / 1px 7px no-repeat,
+      linear-gradient(var(--c), var(--c)) bottom right / 7px 1px no-repeat,
+      linear-gradient(var(--c), var(--c)) bottom right / 1px 7px no-repeat;
+  }
+
+  .hub .lock {
+    inset: 8%;
+  }
+
+  button:active .lock,
+  button:focus-visible .lock {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  button:focus-visible {
+    outline: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .lock {
+      transition: none;
+    }
+  }
+</style>
diff --git a/src/views/EnergyRing.svelte.test.ts b/src/views/EnergyRing.svelte.test.ts
new file mode 100644
index 0000000..80e62af
--- /dev/null
+++ b/src/views/EnergyRing.svelte.test.ts
@@ -0,0 +1,196 @@
+/* The ring on Now, on what a person can do with it and what it costs.
+ *
+ * jsdom has no canvas, so the drawing itself is checked in a browser; here
+ * the nodes, their doors, the live switch and the frame loop. */
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { render } from '@testing-library/svelte'
+import { tick } from 'svelte'
+import EnergyRing from './EnergyRing.svelte'
+import { ringReadings, type RingReading } from '$lib/state/ring'
+import { flowReadingsFromStatus } from '$lib/state/flow'
+
+HTMLCanvasElement.prototype.getContext = (() => null) as never
+
+const house = (live = true): RingReading[] =>
+  ringReadings(
+    flowReadingsFromStatus({
+      grid_w: 2_000,
+      load_w: 3_700,
+      drivers: { sungrow: { status: 'ok', pv_w: -1_100, bat_w: 0, bat_soc: 0.62 }, easee: { status: 'ok', ev_w: 7_300 } },
+    }),
+    live
+  )
+
+describe('the ring', () => {
+  afterEach(() => {
+    document.body.replaceChildren()
+    vi.unstubAllGlobals()
+    vi.restoreAllMocks()
+    HTMLCanvasElement.prototype.getContext = (() => null) as never
+    Object.defineProperty(document, 'visibilityState', { value: 'visible', configurable: true })
+    document.documentElement.removeAttribute('style')
+  })
+
+  it('draws each node as text on the ground with the home in the middle', () => {
+    render(EnergyRing, { props: { readings: house() } })
+    const text = (n: string) => document.querySelector(`[data-node="${n}"]`)?.textContent?.replace(/\s+/g, ' ').trim()
+    expect(text('solar')).toBe('Solar 1.1 kW Making')
+    expect(text('battery')).toBe('Battery 0 W Resting · 62%')
+    expect(text('grid')).toBe('Grid 2.0 kW Buying')
+    expect(text('car')).toBe('Car 7.3 kW Charging')
+    expect(text('home')).toBe('3.7 kW Usage')
+  })
+
+  it('opens what a tap on a node names', () => {
+    const onopen = vi.fn()
+    render(EnergyRing, { props: { readings: house(), onopen } })
+    ;(document.querySelector('[data-node="car"]') as HTMLElement).click()
+    ;(document.querySelector('[data-node="home"]') as HTMLElement).click()
+    expect(onopen.mock.calls).toEqual([[{ role: 'ev', name: 'easee', id: 'ev-easee' }], [{ role: 'load' }]])
+  })
+
+  it('says live only for readings the box confirms', () => {
+    render(EnergyRing, { props: { readings: house(false) } })
+    const ring = document.querySelector('.ring')!
+    expect(ring.getAttribute('data-live')).toBe('false')
+    expect(document.querySelector('[data-node="solar"]')!.getAttribute('aria-label')).toMatch(/not live$/)
+  })
+
+  it('asks for no frame when a tick changes nothing, and for one when it does', async () => {
+    // A cached house: nothing glows or runs, so the loop rests once a change
+    // has played. A live flowing arc keeps it running, as on the phone.
+    const frames = vi.fn((_: FrameRequestCallback) => 1)
+    vi.stubGlobal('requestAnimationFrame', frames)
+    vi.stubGlobal('cancelAnimationFrame', vi.fn())
+    const view = render(EnergyRing, { props: { readings: house(false), active: true } })
+    await tick()
+    expect(frames).toHaveBeenCalledTimes(1)
+    // Past the moment a change plays for, the frame asks for no other.
+    vi.spyOn(performance, 'now').mockReturnValue(performance.now() + 10_000)
+    frames.mock.calls[0]![0](0)
+    expect(frames).toHaveBeenCalledTimes(1)
+    frames.mockClear()
+
+    await view.rerender({ readings: house(false), active: true })
+    await tick()
+    expect(frames, 'an unchanged reading started the loop').not.toHaveBeenCalled()
+
+    const next = house(false)
+    const car = next.findIndex((r) => r.node === 'car')
+    next[car] = { ...next[car]!, watts: 3_000 }
+    await view.rerender({ readings: next, active: true })
+    await tick()
+    expect(frames).toHaveBeenCalledTimes(1)
+  })
+
+  it('draws nothing while hidden', async () => {
+    const frames = vi.fn(() => 1)
+    vi.stubGlobal('requestAnimationFrame', frames)
+    vi.stubGlobal('cancelAnimationFrame', vi.fn())
+    const view = render(EnergyRing, { props: { readings: house(), active: false } })
+    await tick()
+    await view.rerender({ readings: house(false), active: false })
+    await tick()
+    expect(frames).not.toHaveBeenCalled()
+  })
+
+  it('keeps running while a live arc flows, and rests when the page or the view goes away', async () => {
+    const frames = stubFrames()
+    const later = performance.now() + 10_000
+    const view = render(EnergyRing, { props: { readings: house(), active: true } })
+    await tick()
+    vi.spyOn(performance, 'now').mockReturnValue(later)
+    frames.run()
+    expect(frames.asked(), 'a live flowing arc stopped its light').toBe(1)
+
+    visibility('hidden')
+    frames.run()
+    expect(frames.asked(), 'the loop ran on a hidden page').toBe(0)
+    visibility('visible')
+    expect(frames.asked()).toBe(1)
+
+    await view.rerender({ readings: house(), active: false })
+    frames.run()
+    expect(frames.asked(), 'the loop ran behind another tab').toBe(0)
+  })
+
+  it('glows only while live, and draws a cache in ink', async () => {
+    // The page's ink and the sun's colour, as the theme would give them.
+    document.documentElement.style.setProperty('--fg-dim', '#9aa5b8')
+    document.documentElement.style.setProperty('--energy-generation', '#ffe14d')
+    const strokes = recordStrokes()
+    const frames = stubFrames()
+    const view = render(EnergyRing, { props: { readings: house(), active: true } })
+    await tick()
+    frames.run()
+    expect(strokes.wide(), 'a live arc did not glow').toBeGreaterThan(0)
+    expect(strokes.colours.has('rgba(255, 225, 77)'), 'a live sun was not in its colour').toBe(true)
+
+    strokes.clear()
+    await view.rerender({ readings: house(false), active: true })
+    await tick()
+    // Well past the cooling, the light is out.
+    vi.spyOn(performance, 'now').mockReturnValue(performance.now() + 10_000)
+    frames.run()
+    expect(strokes.list.length, 'nothing was drawn').toBeGreaterThan(0)
+    expect(strokes.wide(), 'a cached arc glowed').toBe(0)
+    expect(Math.max(...strokes.stops), 'a cached arc kept its full strength').toBeLessThanOrEqual(0.35 + 1e-6)
+    expect([...strokes.colours], 'a cached arc kept its colour').toEqual(['rgba(154, 165, 184)'])
+  })
+})
+
+/** A frame queue the test drives by hand. */
+function stubFrames() {
+  let queue: FrameRequestCallback[] = []
+  vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => (queue.push(cb), queue.length))
+  vi.stubGlobal('cancelAnimationFrame', () => { queue = [] })
+  return {
+    asked: () => queue.length,
+    run() {
+      const now = queue
+      queue = []
+      for (const cb of now) cb(0)
+    },
+  }
+}
+
+function visibility(state: DocumentVisibilityState) {
+  Object.defineProperty(document, 'visibilityState', { value: state, configurable: true })
+  document.dispatchEvent(new Event('visibilitychange'))
+}
+
+/** A 2D context that keeps each stroke's width and each colour stop's alpha. */
+function recordStrokes() {
+  const list: { width: number }[] = []
+  const stops: number[] = []
+  const colours = new Set<string>()
+  const alphaOf = (c: string) => Number(/,\s*([\d.]+)\)$/.exec(c)?.[1] ?? 1)
+  const ctx = {
+    lineWidth: 1, strokeStyle: '' as unknown, fillStyle: '#000', lineCap: '', lineJoin: '',
+    setTransform() {}, clearRect() {}, beginPath() {}, arc() {}, moveTo() {}, lineTo() {}, save() {}, restore() {},
+    stroke() { list.push({ width: this.lineWidth }) },
+    createConicGradient() {
+      return {
+        addColorStop: (_: number, c: string) => {
+          stops.push(alphaOf(c))
+          colours.add(c.replace(/,\s*[\d.]+\)$/, ')'))
+        },
+      }
+    },
+  }
+  HTMLCanvasElement.prototype.getContext = (() => ctx) as never
+  return {
+    list,
+    stops,
+    /** The colours of the stops, without their alpha. */
+    colours,
+    /** Strokes wider than an arc: the glow. */
+    wide: () => list.filter((s) => s.width > 20).length,
+    clear() {
+      list.length = 0
+      stops.length = 0
+      colours.clear()
+    },
+  }
+}
diff --git a/src/views/EvPanel.svelte.test.ts b/src/views/EvPanel.svelte.test.ts
index 21c4d3d..46c03f4 100644
--- a/src/views/EvPanel.svelte.test.ts
+++ b/src/views/EvPanel.svelte.test.ts
@@ -47,6 +47,13 @@ async function streaming(): Promise<SiteStore> {
   return site
 }
 
+/** A tap on a node of the ring, as a finger makes it. */
+function tap(node: string) {
+  const el = document.querySelector<HTMLElement>(`[data-node="${node}"]`)
+  expect(el, `no ${node} on the ring`).not.toBeNull()
+  el!.click()
+}
+
 describe('the charger behind its bubble', () => {
   afterEach(() => {
     document.body.replaceChildren()
@@ -62,11 +69,7 @@ describe('the charger behind its bubble', () => {
     render(Now, { props: { site } })
     await vi.advanceTimersByTimeAsync(50)
 
-    const hero = document.querySelector('ftw-energy-flow')!
-    expect(hero).not.toBeNull()
-    hero.dispatchEvent(
-      new CustomEvent('ftw-planet-click', { detail: { role: 'ev', id: 'ev' }, bubbles: true })
-    )
+    tap('car')
     await vi.advanceTimersByTimeAsync(500)
 
     const sheet = document.querySelector('[role="dialog"]')
@@ -87,9 +90,7 @@ describe('the charger behind its bubble', () => {
     render(Now, { props: { site } })
     await vi.advanceTimersByTimeAsync(50)
 
-    document
-      .querySelector('ftw-energy-flow')!
-      .dispatchEvent(new CustomEvent('ftw-planet-click', { detail: { role: 'battery' } }))
+    tap('battery')
     await vi.advanceTimersByTimeAsync(100)
 
     // The battery opens its live line, not the charger's controls.
@@ -106,9 +107,7 @@ describe('the charger behind its bubble', () => {
     const api = vi.spyOn(site, 'api')
     render(Now, { props: { site } })
     await vi.advanceTimersByTimeAsync(50)
-    document.querySelector('ftw-energy-flow')!.dispatchEvent(
-      new CustomEvent('ftw-planet-click', { detail: { role: 'ev' }, bubbles: true })
-    )
+    tap('car')
     await vi.advanceTimersByTimeAsync(50)
     const sheet = document.querySelector('[role="dialog"]')!
     expect(sheet.textContent).toContain('Connecting to your box.')
@@ -129,9 +128,7 @@ describe('the charger behind its bubble', () => {
     const api = vi.spyOn(site, 'api')
     render(Now, { props: { site } })
     await vi.advanceTimersByTimeAsync(50)
-    document.querySelector('ftw-energy-flow')!.dispatchEvent(
-      new CustomEvent('ftw-planet-click', { detail: { role: 'ev' }, bubbles: true })
-    )
+    tap('car')
     await vi.advanceTimersByTimeAsync(50)
     expect(document.querySelector('[role="dialog"]')?.textContent).toContain('Charging controls are not available from this box yet.')
     expect(document.querySelector('[role="dialog"]')?.textContent).toContain('Open the box’s own page')
@@ -153,9 +150,7 @@ describe('the charger behind its bubble', () => {
     const command = vi.spyOn(site, 'command')
     render(Now, { props: { site } })
     await vi.advanceTimersByTimeAsync(50)
-    document.querySelector('ftw-energy-flow')!.dispatchEvent(
-      new CustomEvent('ftw-planet-click', { detail: { role: 'ev' }, bubbles: true })
-    )
+    tap('car')
     await vi.advanceTimersByTimeAsync(500)
     const sheet = document.querySelector('[role="dialog"]')!
     expect(sheet.textContent).toContain('Your box is busy')
@@ -174,11 +169,7 @@ describe('the charger behind its bubble', () => {
     render(Now, { props: { site } })
     await vi.advanceTimersByTimeAsync(50)
 
-    const open = () => {
-      document
-        .querySelector('ftw-energy-flow')!
-        .dispatchEvent(new CustomEvent('ftw-planet-click', { detail: { role: 'ev' } }))
-    }
+    const open = () => tap('car')
 
     open()
     await vi.advanceTimersByTimeAsync(100)
diff --git a/src/views/LivePanel.svelte.test.ts b/src/views/LivePanel.svelte.test.ts
index 3d62bc0..e404069 100644
--- a/src/views/LivePanel.svelte.test.ts
+++ b/src/views/LivePanel.svelte.test.ts
@@ -37,10 +37,10 @@ async function streaming(): Promise<SiteStore> {
   return site
 }
 
+/** A tap on the ring's node for this role. */
 function openBubble(role: string) {
-  document
-    .querySelector('ftw-energy-flow')!
-    .dispatchEvent(new CustomEvent('ftw-planet-click', { detail: { role }, bubbles: true }))
+  const node = ({ pv: 'solar', load: 'home' } as Record<string, string>)[role] ?? role
+  document.querySelector<HTMLElement>(`[data-node="${node}"]`)!.click()
 }
 
 describe('a live line behind a bubble', () => {
diff --git a/src/views/Now.control-proof.svelte.test.ts b/src/views/Now.control-proof.svelte.test.ts
index d46e914..18b4765 100644
--- a/src/views/Now.control-proof.svelte.test.ts
+++ b/src/views/Now.control-proof.svelte.test.ts
@@ -27,9 +27,10 @@ test('opens the device panel with the answer first and keeps an open receipt thr
     const view=render(Now,{props:{site}})
     for(let i=0;i<200;i++){box.tick(20);await vi.advanceTimersByTimeAsync(20)}
     expect(view.queryByText('Are we in control?')).toBeNull()
-    const flow=document.querySelector('ftw-energy-flow')!
-    const button=flow.shadowRoot!.querySelector('.ef-layer[aria-hidden="false"] [data-role="battery"]')!
+    const button=document.querySelector<HTMLElement>('[data-node="battery"]')!
     expect(button.getAttribute('aria-label')).not.toMatch(/tier/i)
+    // Core's alarm on the charger reaches the ring from the box's snapshot.
+    expect(document.querySelector('[data-node="car"] .mark')?.getAttribute('data-tone')).toBe('alarm')
     button.dispatchEvent(new MouseEvent('click',{bubbles:true}))
     await vi.advanceTimersByTimeAsync(10)
     const dialog=document.querySelector('[role="dialog"]')!
@@ -60,7 +61,7 @@ test('an EV tap goes straight to charging controls even when status carries evid
  try {
   site.connect(new LoopbackCarrier(box,{latencyMs:0}));render(Now,{props:{site}});
   for(let i=0;i<200;i++){box.tick(20);await vi.advanceTimersByTimeAsync(20)}
-  document.querySelector('ftw-energy-flow')!.dispatchEvent(new CustomEvent('ftw-planet-click',{detail:{role:'ev',name:'easee'},bubbles:true}));
+  document.querySelector<HTMLElement>('[data-node="car"]')!.click();
   for(let i=0;i<200;i++){box.tick(20);await vi.advanceTimersByTimeAsync(20)}
   const dialog=document.querySelector('[role="dialog"]')!;
   expect(dialog?.getAttribute('aria-label')).toBe('EV charger');
diff --git a/src/views/Now.svelte b/src/views/Now.svelte
index 3bdb0bb..81ce7dd 100644
--- a/src/views/Now.svelte
+++ b/src/views/Now.svelte
@@ -8,12 +8,10 @@
 -->
 <script lang="ts">
   import { controlForPlanet, type ControlScope } from '$vendor/ftw/control-feedback.js'
-  // The box's own hero component, vendored verbatim. Importing registers
-  // <ftw-energy-flow>; the app and the on-box dashboard render one file.
   import { onMount, untrack } from 'svelte'
-  import '$vendor/ftw/ftw-energy-flow.js'
-  import type { FtwEnergyFlowElement } from '$vendor/ftw/ftw-energy-flow.js'
   import { flowReadings, flowReadingsFromStatus, withLoadpointEv, type SiteStatus } from '$lib/state/flow'
+  import { ringKey, ringReadings, type RingReading } from '$lib/state/ring'
+  import EnergyRing from './EnergyRing.svelte'
   import { explain } from '$lib/format/explanation'
   import { CAP_API_PASSTHROUGH } from '$lib/protocol/contract'
   import LivePanel, { type LiveRole } from './LivePanel.svelte'
@@ -126,24 +124,20 @@
     status && (statusLive || !live) ? flowReadingsFromStatus(status, statusLive) : flowReadings(flowFields)
   )
 
-  let flow = $state<FtwEnergyFlowElement | null>(null)
-  let lastFlow: FtwEnergyFlowElement | null = null
-  let lastReadings: typeof liveReadings | null = null
-
-  // The component takes data by method, the way the dashboard feeds it.
-  // An effect rather than an attribute because setReadings() is the
-  // component's whole API, and inventing a second one would fork it. Only
-  // while this view is the one on screen — fed hidden it is 1 Hz of work
-  // nobody can see — and because the effect reads the fields as they are
-  // when `active` returns, coming back starts from the present.
+  // The ring's nodes, replaced only when what they show changes: the
+  // figures as drawn, not the watts behind them. Only while
+  // this view is the one on screen — fed hidden it is 1 Hz of work nobody
+  // can see — and because the effect reads the fields as they are when
+  // `active` returns, coming back starts from the present.
+  let ring = $state.raw<RingReading[]>([])
+  let ringShown = ''
   $effect(() => {
-    const readings = liveReadings
-    if (!active || !flow || (flow === lastFlow && readings === lastReadings)) return
-    // The component retains an omitted daily share. Clear it when only
-    // telemetry totals remain, so old status details cannot survive fallback.
-    flow.setReadings({ ...readings, selfPoweredPctToday: readings.selfPoweredPctToday ?? null })
-    lastFlow = flow
-    lastReadings = readings
+    if (!active) return
+    const next = ringReadings(liveReadings, live)
+    const key = ringKey(next)
+    if (key === ringShown) return
+    ringShown = key
+    ring = next
   })
 
   /** The charger's sheet, opened by a tap on its bubble. Loaded on demand
@@ -219,19 +213,6 @@
     else if (scope.role && LIVE_ROLES.has(scope.role) && live) liveRole = scope.role as LiveRole
   }
 
-  // Preserve a charger tap while the saved home reconnects. The panel shows
-  // connection progress, then checks the capabilities the box reports.
-  $effect(() => {
-    const el = flow
-    if (!el) return
-    const onPlanet = (e: Event) => {
-      const scope = (e as CustomEvent<ControlScope>).detail ?? {}
-      openPlanetControls(scope)
-    }
-    el.addEventListener('ftw-planet-click', onPlanet)
-    return () => el.removeEventListener('ftw-planet-click', onPlanet)
-  })
-
   // A newly mounted dialog can still pull the scroller to itself on some
   // WebKits. Hold the house where it was for that frame.
   $effect(() => {
@@ -353,10 +334,10 @@
   </section>
 
   <div class="flow">
-    <!-- static is the honesty switch: a cached view holds still, because a
-         moving particle claims power is flowing at this very moment. -->
-    <ftw-energy-flow bind:this={flow} embedded static={live && active ? undefined : true}
-    ></ftw-energy-flow>
+    <!-- A tap opens the node: the charger's sheet for the car, a live line
+         for the rest. It works while the saved home reconnects; the panel
+         shows the progress, then checks what the box can do. -->
+    <EnergyRing readings={ring} {active} onopen={openPlanetControls} />
     {#if status && !statusLive}
       <p class="note" role="status">Device details are out of date.{live ? ' Showing live totals.' : ''}</p>
     {/if}
diff --git a/src/views/Now.svelte.test.ts b/src/views/Now.svelte.test.ts
index 48e0250..9da20f3 100644
--- a/src/views/Now.svelte.test.ts
+++ b/src/views/Now.svelte.test.ts
@@ -6,8 +6,8 @@
  * keeps the particles moving over readings a minute old, and a wire enum
  * reads as a fault code on the one screen that promises nothing is wrong.
  *
- * Everything is real: a Session, a SimBox, the loopback carrier, the box's
- * own <ftw-energy-flow>. Only the feed call is a spy.
+ * Everything is real: a Session, a SimBox, the loopback carrier and the
+ * ring. What the ring is fed is read off the page.
  */
 
 import { describe, it, expect, vi, afterEach } from 'vitest'
@@ -16,15 +16,29 @@ import Now from './Now.svelte'
 import { SiteStore } from '$lib/state/site.svelte'
 import { LoopbackCarrier } from '$lib/carrier/loopback'
 import { SimBox } from '$lib/sim/box'
-import type { FtwEnergyFlowElement } from '$vendor/ftw/ftw-energy-flow.js'
 import { decodeFrame } from '$lib/protocol/frame'
-import { flowReadings, type FlowReadings } from '$lib/state/flow'
 
 /** Fixed so the simulated house is the same every run. */
 const NOON = new Date(2026, 6, 15, 12, 0, 0).getTime()
 
-function flowEl(): FtwEnergyFlowElement | null {
-  return document.querySelector('ftw-energy-flow')
+function ringEl(): HTMLElement | null {
+  return document.querySelector('.ring')
+}
+
+/** What the ring says, as a person reads it. */
+const ringText = () => ringEl()?.textContent?.replace(/\s+/g, ' ').trim() ?? ''
+
+/** Counts every change to the ring's page, so a feed shows up as work. */
+function watchRing(): { count: () => number; stop: () => void } {
+  let n = 0
+  const seen = new MutationObserver((records) => {
+    n += records.length
+  })
+  seen.observe(ringEl()!, { subtree: true, childList: true, characterData: true, attributes: true })
+  return {
+    count: () => (n += seen.takeRecords().length),
+    stop: () => seen.disconnect(),
+  }
 }
 
 describe('the Now screen', () => {
@@ -69,10 +83,10 @@ describe('the Now screen', () => {
     site.connect(new LoopbackCarrier(box, { latencyMs: 0 }))
 
     render(Now, { props: { site, active: true } })
-    for (let i = 0; i < 100 && !flowEl(); i++) await vi.advanceTimersByTimeAsync(20)
+    for (let i = 0; i < 100 && ringEl()?.dataset.live !== 'true'; i++) await vi.advanceTimersByTimeAsync(20)
 
-    expect(flowEl(), 'the house never drew at all').not.toBeNull()
-    expect(flowEl()!.hasAttribute('static'), 'a live stream was drawn still').toBe(false)
+    expect(ringEl(), 'the house never drew at all').not.toBeNull()
+    expect(ringEl()!.dataset.live, 'a live stream was drawn still').toBe('true')
 
     box.faults = { ...box.faults, sourceStates: { 'inverter.sungrow': 'stale' } }
     box.tick(1_000)
@@ -82,15 +96,12 @@ describe('the Now screen', () => {
       'streaming'
     )
     expect(site.srcState).not.toBe('live')
-    expect(
-      flowEl()!.hasAttribute('static'),
-      'particles kept flowing over readings that are not current'
-    ).toBe(true)
+    expect(ringEl()!.dataset.live, 'light kept running over readings that are not current').toBe('false')
   })
 
-  it('does not feed the diagram while hidden, and catches up on return', async () => {
+  it('does not feed the ring while hidden, and catches up on return', async () => {
     // Now stays mounted behind the other tabs, hidden by the shell. The
-    // stream keeps arriving either way; pushing it into a display:none SVG
+    // stream keeps arriving either way; pushing it into a display:none ring
     // at 1 Hz is work nobody can see. Coming back must start from the
     // present, not replay what was skipped.
     vi.useFakeTimers()
@@ -100,29 +111,30 @@ describe('the Now screen', () => {
     const site = new SiteStore('test')
     site.connect(new LoopbackCarrier(box, { latencyMs: 0 }))
 
-    const { rerender } = render(Now, { props: { site, active: false } })
-    for (let i = 0; i < 100 && !flowEl(); i++) await vi.advanceTimersByTimeAsync(20)
-    expect(flowEl()).not.toBeNull()
-    expect(flowEl()!.hasAttribute('static'), 'the hidden particle loop was still running').toBe(
-      true
-    )
-
-    const fed = vi.spyOn(flowEl()!, 'setReadings')
+    const { rerender } = render(Now, { props: { site, active: true } })
+    for (let i = 0; i < 100 && !/Usage/.test(ringText()); i++) await vi.advanceTimersByTimeAsync(20)
+    await rerender({ active: false })
+    await vi.advanceTimersByTimeAsync(20)
+    const before = ringText()
+    const work = watchRing()
 
-    // Ten seconds of live power into a view another tab is covering.
+    // An hour of changed power into a view another tab is covering.
+    vi.setSystemTime(NOON + 3_600_000)
     for (let i = 0; i < 10; i++) {
       box.tick()
       await vi.advanceTimersByTimeAsync(1_000)
     }
-    expect(fed, 'a hidden SVG was fed at 1 Hz').not.toHaveBeenCalled()
+    expect(work.count(), 'a hidden ring was fed at 1 Hz').toBe(0)
+    expect(ringText()).toBe(before)
 
     await rerender({ active: true })
     await vi.advanceTimersByTimeAsync(20)
-    expect(fed, 'coming back never caught the view up').toHaveBeenCalled()
-    expect(flowEl()!.hasAttribute('static'), 'the live view stayed frozen on return').toBe(false)
+    expect(ringText(), 'coming back never caught the view up').not.toBe(before)
+    expect(ringEl()!.dataset.live, 'the live view stayed still on return').toBe('true')
+    work.stop()
   })
 
-  it('does not rebuild the diagram for an unchanged cadence tick', async () => {
+  it('does not touch the ring for an unchanged cadence tick', async () => {
     vi.useFakeTimers()
     vi.setSystemTime(NOON)
 
@@ -137,16 +149,15 @@ describe('the Now screen', () => {
     const site = new SiteStore('test')
     site.connect(new LoopbackCarrier(box, { latencyMs: 0 }))
     render(Now, { props: { site, active: true } })
-    for (let i = 0; i < 100 && (!flowEl() || site.session.phase !== 'streaming'); i++) {
+    for (let i = 0; i < 100 && (!/Usage/.test(ringText()) || site.session.phase !== 'streaming'); i++) {
       await vi.advanceTimersByTimeAsync(20)
     }
     await vi.advanceTimersByTimeAsync(20)
 
-    const fed = vi.spyOn(flowEl()!, 'setReadings')
     vi.setSystemTime(NOON)
     box.tick(0)
     await vi.advanceTimersByTimeAsync(100)
-    fed.mockClear()
+    const work = watchRing()
     types.length = 0
 
     vi.setSystemTime(NOON)
@@ -157,37 +168,13 @@ describe('the Now screen', () => {
     // Only these three message types can replace the telemetry being tested.
     const telemetry = types.filter(t => t === 'snap' || t === 'delta' || t === 'tick')
     expect(telemetry, 'the simulator sent changed readings, so this is not a tick').toEqual(['tick'])
-    expect(fed, 'an unchanged 1 Hz tick rebuilt the full shadow DOM').not.toHaveBeenCalled()
+    expect(work.count(), 'an unchanged 1 Hz tick changed the ring').toBe(0)
 
     vi.setSystemTime(NOON + 3_600_000)
     box.tick()
     await vi.advanceTimersByTimeAsync(100)
-    expect(fed, 'a changed reading did not reach the diagram').toHaveBeenCalledTimes(1)
-  })
-
-  it('draws kWh today on the hero once the dashboard snapshot arrives', async () => {
-    // Frozen fields are five aggregates. The box page is per-driver planets
-    // plus today's totals, from GET /api/status. This is the feed that makes
-    // those two screens the same diagram.
-    vi.useFakeTimers()
-    vi.setSystemTime(NOON)
-
-    const box = new SimBox({ now: () => Date.now() })
-    const site = new SiteStore('test')
-    site.connect(new LoopbackCarrier(box, { latencyMs: 0 }))
-    render(Now, { props: { site, active: true } })
-    for (let i = 0; i < 100 && !flowEl(); i++) await vi.advanceTimersByTimeAsync(20)
-    expect(flowEl()).not.toBeNull()
-    box.tick(1_000)
-
-    const fed = vi.spyOn(flowEl()!, 'setReadings')
-    await vi.advanceTimersByTimeAsync(2_200)
-
-    const rich = fed.mock.calls
-      .map((c) => c[0] as { selfPoweredPctToday?: number | null; planets?: { id: string }[] })
-      .find((r) => r.selfPoweredPctToday != null)
-    expect(rich, 'the dashboard snapshot never reached the hero').toBeTruthy()
-    expect(rich!.planets?.some((p) => p.id === 'pv-sungrow')).toBe(true)
+    expect(work.count(), 'a changed reading did not reach the ring').toBeGreaterThan(0)
+    work.stop()
   })
 
   it('uses fresh telemetry after a status failure and restores details when status recovers', async () => {
@@ -196,12 +183,25 @@ describe('the Now screen', () => {
     const box = new SimBox({ now: () => Date.now() })
     const serve = box.api.serve.bind(box.api)
     let failStatus = false
+    // The box's snapshot carries a warning on the battery and a house use of
+    // its own. Only the snapshot says either, so the ring shows which source
+    // drew the house.
+    const warning = { driver: 'lynx', kind: 'battery', status: 'not_following', reason: 'setpoint_changed', severity: 'warning', evidence: 'accepted', readings_fresh: true }
     vi.spyOn(box.api, 'serve').mockImplementation(req => {
-      if (req.path === '/api/status' && failStatus) {
+      if (req.path !== '/api/status') return serve(req)
+      if (failStatus) {
         return { status: 503, contentType: 'application/json', body: new TextEncoder().encode('{}') }
       }
-      return serve(req)
+      const res = serve(req)
+      if ('code' in res) return res
+      const body = JSON.parse(new TextDecoder().decode(res.body)) as Record<string, unknown>
+      // Copied into this realm's Uint8Array, or the frame encoder sees an
+      // array of numbers rather than bytes.
+      const bytes = Uint8Array.from(new TextEncoder().encode(JSON.stringify({ ...body, load_w: 12_345, control_feedback: [warning] })))
+      return { ...res, body: bytes }
     })
+    const marked = () => document.querySelector('[data-node="battery"] .mark') !== null
+    const fromSnapshot = () => /12 kW/.test(document.querySelector('[data-node="home"]')?.textContent ?? '')
     const site = new SiteStore('test')
     site.connect(new LoopbackCarrier(box, { latencyMs: 0 }))
     const view = render(Now, { props: { site } })
@@ -210,7 +210,8 @@ describe('the Now screen', () => {
       await vi.advanceTimersByTimeAsync(20)
     }
     expect(document.querySelector('.card.fuse')?.textContent).toContain('Live safety')
-    const fed = vi.spyOn(flowEl()!, 'setReadings')
+    expect(marked(), 'the box snapshot never reached the ring').toBe(true)
+    expect(fromSnapshot()).toBe(true)
 
     failStatus = true
     for (let i = 0; i < 4; i++) {
@@ -218,12 +219,9 @@ describe('the Now screen', () => {
       await vi.advanceTimersByTimeAsync(1_000)
     }
     expect(site.srcState).toBe('live')
-    expect(flowEl()!.shadowRoot!.textContent, 'old daily share remained in the live diagram').not.toContain('SELF-POWERED TODAY')
-    const fallback = fed.mock.lastCall?.[0] as FlowReadings
-    expect(fallback, 'stale status still supplied the diagram').toEqual({
-      ...flowReadings(site.session.fields), selfPoweredPctToday: null,
-    })
-    expect(flowEl()!.hasAttribute('static'), 'fresh telemetry should keep moving').toBe(false)
+    expect(ringEl()!.dataset.live, 'fresh telemetry should keep moving').toBe('true')
+    expect(marked(), 'a stale snapshot still drew the ring').toBe(false)
+    expect(fromSnapshot(), 'a stale snapshot still drew the ring').toBe(false)
     expect(document.body.textContent).toContain('Device details are out of date. Showing live totals.')
     expect(document.querySelector('.card.fuse')?.textContent).not.toContain('Live safety')
     expect(document.querySelector('.card.fuse time')?.getAttribute('datetime')).toBeTruthy()
@@ -234,10 +232,9 @@ describe('the Now screen', () => {
       box.tick(1_000)
       await vi.advanceTimersByTimeAsync(1_000)
     }
-    const recovered = fed.mock.lastCall?.[0] as FlowReadings
-    expect(recovered.planets.some(p => p.id === 'pv-sungrow')).toBe(true)
-    expect(recovered.selfPoweredPctToday).not.toBeNull()
-    expect(flowEl()!.shadowRoot!.textContent).toContain('SELF-POWERED TODAY')
+    expect(ringEl()!.dataset.live).toBe('true')
+    expect(marked(), 'the recovered snapshot did not reach the ring').toBe(true)
+    expect(fromSnapshot()).toBe(true)
     expect(document.body.textContent).not.toContain('Device details are out of date')
     expect(document.querySelector('.card.fuse')?.textContent).toContain('Live safety')
     expect(document.querySelector('#today-title')?.textContent).toBe('Today')
diff --git a/tests/control-proof-bubbles.test.ts b/tests/control-proof-bubbles.test.ts
deleted file mode 100644
index 4e73154..0000000
--- a/tests/control-proof-bubbles.test.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {test,expect,vi} from 'vitest'
-import '$vendor/ftw/ftw-energy-flow.js'
-import type {FtwEnergyFlowElement} from '$vendor/ftw/ftw-energy-flow.js'
-import {flowReadingsFromStatus} from '$lib/state/flow'
-
-const row=(extra:Record<string,unknown>)=>({driver:'battery',kind:'battery',status:'following',reason:'power_observed',severity:'info',evidence:'measured',readings_fresh:true,...extra})
-
-test('a combined bubble cannot hide an offline sibling alarm or claim its old watts',async()=>{
- const el=document.createElement('ftw-energy-flow') as FtwEnergyFlowElement
- document.body.append(el)
- try {
-  el.setReadings(flowReadingsFromStatus({grid_w:1000,load_w:500,drivers:{a:{status:'ok',bat_w:1000},b:{status:'offline',bat_w:5000}},control_feedback:[
-   row({driver:'a',evidence:'confirmed'}),
-   row({driver:'b',status:'no_contact',reason:'readings_lost',severity:'alarm',evidence:'accepted',readings_fresh:false,actual_w:null}),
-  ]}))
-  await vi.waitFor(()=>expect(el.shadowRoot!.querySelector('.ef-control-mark[data-tone="alarm"]')).not.toBeNull())
-  const combined=el.shadowRoot!.querySelector('.ef-layer-agg [data-role="battery"]')!
-  expect(combined.querySelector('.ef-control-mark[data-tone="alarm"]')).not.toBeNull()
-  expect(combined.textContent).not.toContain('6.00 kW')
-  expect(el.shadowRoot!.querySelector('.ef-layer[aria-hidden="true"] [tabindex="0"]')).toBeNull()
- } finally {el.remove()}
-})
-
-test('the overview marks only what needs a look and stays quiet otherwise',async()=>{
- const el=document.createElement('ftw-energy-flow') as FtwEnergyFlowElement
- document.body.append(el)
- const update=async(extra:Record<string,unknown>,live=true)=>{
-  el.setReadings(flowReadingsFromStatus({grid_w:0,load_w:500,drivers:{battery:{status:'ok',bat_w:-500}},control_feedback:[row(extra)]},live))
-  await vi.waitFor(()=>expect(el.shadowRoot!.querySelector('[data-role="battery"]')).not.toBeNull())
-  await new Promise(resolve=>requestAnimationFrame(resolve))
-  return el.shadowRoot!.querySelector('.ef-layer[aria-hidden="false"] [data-role="battery"]')!
- }
- try {
-  let node=await update({evidence:'confirmed'})
-  expect(node.querySelector('.ef-control-mark')).toBeNull()
-  expect(node.getAttribute('aria-label')).not.toMatch(/tier/i)
-  node=await update({status:'waiting',reason:'waiting_response',evidence:'accepted'})
-  expect(node.querySelector('.ef-control-mark')).toBeNull()
-  node=await update({status:'not_following',reason:'setpoint_changed',severity:'warning'})
-  expect(node.querySelector('.ef-control-mark[data-tone="warning"]')).not.toBeNull()
-  expect(node.getAttribute('aria-label')).toContain('Not following')
-  node=await update({status:'not_following',reason:'device_fault',severity:'alarm'})
-  expect(node.querySelector('.ef-control-mark[data-tone="alarm"]')).not.toBeNull()
-  node=await update({status:'no_contact',reason:'readings_lost',severity:'alarm'},false)
-  expect(node.querySelector('.ef-control-mark')).toBeNull()
- } finally {el.remove()}
-})