From 8bf5d08b47b073dddd0c28d2e4ade29730cf6bb6 Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 18:35:16 -0500
Subject: [PATCH 01/23] docs: UI rework spec, implementation plan, and product
 brief

Design exploration artifacts for the Status/Tuning/Advanced rework:
spec, 10-task plan, PRODUCT.md register, and ignore the local
.superpowers scratch directory.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .gitignore                                    |   1 +
 PRODUCT.md                                    |  67 +++
 .../superpowers/plans/2026-06-10-ui-rework.md | 409 ++++++++++++++++++
 .../specs/2026-06-10-ui-rework-design.md      | 206 +++++++++
 4 files changed, 683 insertions(+)
 create mode 100644 PRODUCT.md
 create mode 100644 docs/superpowers/plans/2026-06-10-ui-rework.md
 create mode 100644 docs/superpowers/specs/2026-06-10-ui-rework-design.md

diff --git a/.gitignore b/.gitignore
index 6539b17..be86e8f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -109,3 +109,4 @@ pnpm-debug.log*
 
 # Upstream research clone kept out of this clean-room implementation repo.
 /Forza-Horizon-DualSense-Python/
+.superpowers/
diff --git a/PRODUCT.md b/PRODUCT.md
new file mode 100644
index 0000000..12b551b
--- /dev/null
+++ b/PRODUCT.md
@@ -0,0 +1,67 @@
+# Product
+
+## Register
+
+product
+
+## Users
+
+Non-technical Windows gamers ("No Python, no scripts, no command line") who own a
+PlayStation DualSense or DualSense Edge and play on PC — mostly racing games.
+They open DSCC in two modes: a one-time **setup** moment (connect controller,
+check it works) and a recurring **play** moment (pick a game, tune how it feels).
+Between those moments the app should answer one question at a glance:
+"is everything working?"
+
+They are not sim-rig tinkerers. Density, jargon, and diagnostics-first layouts
+read as risk, not power.
+
+## Product Purpose
+
+DSCC changes how a DualSense controller feels on PC: adaptive trigger
+resistance, rich haptics, lights, and live racing-game telemetry turned into
+feel. Success looks like: a user connects a controller, starts a supported
+game, and feels the difference — without ever wondering whether the app is
+about to do something scary to their hardware.
+
+## Brand Personality
+
+Calm, trustworthy, capable. Quiet confidence: a well-made tool that writes to
+real hardware and never makes that feel dangerous. Plain language over jargon
+(domain terms come from CONTEXT.md and are law). Microcopy reassures rather
+than performs.
+
+## Anchor References
+
+- **Linear** — soft dark surfaces, quiet hierarchy, restrained accent use,
+  speed as a feeling.
+- **Raycast** — disciplined density, muted accents, exemplary settings panels.
+
+## Anti-references
+
+- The "gamer cockpit" HUD: grid textures, glows, glassmorphism, scanline
+  energy, all-caps telemetry labels everywhere. (This is what the current UI
+  does and what the rework moves away from.)
+- RGB-gamer aesthetic (Razer/ROG software): loud, busy, salesy.
+- Diagnostics-first layouts that lead with raw numbers instead of the task.
+
+## Design Principles
+
+1. **Status before controls.** Every screen answers "is everything OK?" before
+   it offers anything to change.
+2. **The task is the navigation.** Lead with what the user is doing (set up my
+   controller, make my game feel great), not with tool categories.
+3. **Advanced is opt-in.** Button mapping, calibration readouts, Edge slots,
+   and raw telemetry live behind a clear "Advanced" door — reachable, never
+   ambient.
+4. **Safety is visible, not scary.** Always distinguish dry-run/test effects
+   from live Hardware Output, and Global Profile from an active Game Profile,
+   in plain words.
+5. **Quiet surfaces, one voice.** One accent color doing real work (state,
+   selection, primary action), consistent component vocabulary on every screen.
+
+## Accessibility & Inclusion
+
+WCAG AA contrast (≥4.5:1 body text), full `prefers-reduced-motion` support,
+keyboard navigable. The 390px mobile viewport is an enforced layout target via
+the visual smoke test.
diff --git a/docs/superpowers/plans/2026-06-10-ui-rework.md b/docs/superpowers/plans/2026-06-10-ui-rework.md
new file mode 100644
index 0000000..93ebb23
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-10-ui-rework.md
@@ -0,0 +1,409 @@
+# DSCC Web UI Rework Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Rebuild the DSCC web UI shell and routes into the Status / Tuning / Advanced architecture specified in `docs/superpowers/specs/2026-06-10-ui-rework-design.md`, with the Calm Console + PlayStation-blue visual system.
+
+**Architecture:** Svelte 5 + Vite SPA, hash routing, plain CSS design tokens. New slim sidebar shell replaces the HUD/ribbon; the existing feature components (haptics panels, button mapping, controllers detail) are re-housed, not rewritten. Behavior and API contracts unchanged except UX changes named in the spec.
+
+**Tech Stack:** Svelte 5 runes, plain CSS (no libs), `@lucide/svelte` icons, Playwright visual smoke harness.
+
+**Source-of-truth documents (read before starting any task):**
+- Spec: `docs/superpowers/specs/2026-06-10-ui-rework-design.md`
+- Domain language (law for all copy): `CONTEXT.md`
+- Strategic context: `PRODUCT.md`
+- Approved mockups (layout truth, HTML/CSS reference): `.superpowers/brainstorm/9273-1781129906/content/` — most relevant: `tuning-canvas-v9.html` (canvas + saved rail), `status-advanced-v2-psblue.html` (Status, Advanced, blue tokens), `game-setup.html` + `setup-reentry.html` (setup flow), `shell-hybrid.html` (game dropdown)
+- App.svelte concern map: `docs/architecture-audit.md`
+
+**Ground rules for every task:**
+- Branch: `ui-improvements` only. Never commit to `main`.
+- Gates after each task: `cd web && npm run typecheck && npm run build`. Tasks that change routes/layout also run `npm run test:visual-smoke`. Final task runs the full `npm run check`.
+- No `_Avoid_` terms from CONTEXT.md in any user-facing copy. "Everyday" label always pairs with "Global Profile".
+- This is a UI rework: do not modify `web/src/lib/api/*`, `web/src/lib/mock/*`, or `web/src/lib/types.ts` (the artwork fields `artwork.bannerUrl` / `artwork.heroUrl` already exist at `web/src/lib/types.ts:145-162`).
+- No Rust/backend changes; everything runs from `web/` with `npm run dev:mock`.
+
+---
+
+### Task 1: New design tokens
+
+**Files:**
+- Modify: `web/src/styles/tokens.css` (full replacement)
+
+- [ ] **Step 1: Replace tokens.css with the Calm Console + PS-blue system**
+
+```css
+:root {
+  /* neutrals — calm console */
+  --bg: #141417;
+  --bg-rail: #18181c;        /* sidebar, header bars */
+  --surface: #1d1d22;        /* panels that need a bounded field */
+  --surface-raised: #26262c; /* active nav item, chips, inputs */
+  --hairline: #232329;
+  --hairline-strong: #2e2e36;
+  --ink: #d6d6dc;
+  --ink-muted: #8b8b96;      /* secondary text only; not body-sized prose */
+
+  /* accent — PlayStation blue */
+  --accent: #0070cc;          /* primary buttons */
+  --accent-bright: #1f8fff;   /* slider fills, live lines, meters */
+  --accent-text: #5db2ff;     /* accent-colored text on dark (>=4.5:1) */
+  --accent-tint: #12273d;     /* edited/unsaved backgrounds */
+  --accent-outline: #1d4f80;  /* edited outlines */
+
+  /* semantic */
+  --ok: #4ade80;
+  --ok-tint: #143620;
+  --warn: #facc15;
+  --danger: #f03e3e;
+
+  /* shape & rhythm */
+  --radius-s: 6px;
+  --radius-m: 8px;
+  --radius-l: 10px;
+  --speed: 180ms;
+  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint-ish */
+
+  /* layout contract (spec §6) */
+  --curve-min: 280px;
+  --curve-max: 460px;
+  --slider-cap: 220px;
+  --saved-rail-w: 260px;
+
+  /* z-scale: dropdown < sticky < backdrop < dialog < toast < tooltip */
+  --z-dropdown: 10;
+  --z-sticky: 20;
+  --z-backdrop: 30;
+  --z-dialog: 40;
+  --z-toast: 50;
+  --z-tooltip: 60;
+
+  color: var(--ink);
+  background: var(--bg);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root { --speed: 0ms; }
+}
+```
+
+- [ ] **Step 2: Map legacy token names onto the new system so existing CSS keeps compiling**
+
+Append to `tokens.css` (removed again in Task 10 when legacy styles die):
+
+```css
+/* TEMPORARY legacy aliases — delete in cleanup task */
+:root {
+  --obsidian: var(--bg);
+  --carbon: var(--bg-rail);
+  --actuation: var(--accent);
+  --haptic: var(--ink);
+  --tungsten: var(--ink-muted);
+  --overdrive: var(--danger);
+  --ready: var(--ok);
+  --matte: rgba(214, 214, 220, 0.045);
+  --line: rgba(139, 139, 150, 0.28);
+}
+```
+
+- [ ] **Step 3: Gates**
+
+Run: `cd web && npm run typecheck && npm run build && npm run test:visual-smoke`
+Expected: all pass (visuals shift color, structure unchanged).
+
+- [ ] **Step 4: Commit** — `git commit -m "ui-rework: calm-console + PS-blue design tokens with legacy aliases"`
+
+---
+
+### Task 2: Navigation model — new views, old hashes redirect
+
+**Files:**
+- Modify: `web/src/app/navigation.ts` (full replacement)
+- Modify: `web/src/App.svelte` (only the places that consume `AppView` — see `docs/architecture-audit.md` for the routing region)
+- Modify: `web/src/components/ViewNav.svelte` (consumes `appViews`; will be deleted in Task 3 — for now just keep it compiling)
+
+- [ ] **Step 1: Replace navigation.ts**
+
+```ts
+export type AppView = 'status' | 'tuning' | 'advancedController' | 'advancedButtonMapping' | 'advancedEdgeSlots';
+
+export type AppViewDefinition = {
+  id: AppView;
+  label: string;
+  hash: string;
+  group: 'main' | 'advanced';
+};
+
+export type ViewReadiness = {
+  tuningReady: boolean;
+  buttonMappingReady: boolean;
+};
+
+export const appViews: AppViewDefinition[] = [
+  { id: 'status', label: 'Status', hash: '#/status', group: 'main' },
+  { id: 'tuning', label: 'Tuning', hash: '#/tuning', group: 'main' },
+  { id: 'advancedController', label: 'Controller details', hash: '#/advanced/controller', group: 'advanced' },
+  { id: 'advancedButtonMapping', label: 'Button mapping', hash: '#/advanced/button-mapping', group: 'advanced' },
+  { id: 'advancedEdgeSlots', label: 'Edge onboard slots', hash: '#/advanced/edge-slots', group: 'advanced' }
+];
+
+export const viewTooltips: Record<AppView, string> = {
+  status: 'Check that your controller, game detection, and telemetry are working.',
+  tuning: 'Tune trigger feel, rumble, and lights for a game or the Global Profile.',
+  advancedController: 'Live inputs, calibration readings, and connection details.',
+  advancedButtonMapping: 'Edit game/local-app mappings through Steam Input or DSCC Input Bridge.',
+  advancedEdgeSlots: 'Manage DualSense Edge onboard profile slots.'
+};
+
+/** Old routes keep working forever; they land on the new home for that content. */
+const legacyRedirects: Record<string, string> = {
+  '#/games': '#/tuning',
+  '#/adaptive-triggers-haptics': '#/tuning',
+  '#/controllers': '#/advanced/controller',
+  '#/button-mapping': '#/advanced/button-mapping'
+};
+
+export function hashForView(view: AppView): string {
+  return appViews.find((item) => item.id === view)?.hash ?? '#/status';
+}
+
+export function guardView(view: AppView, readiness: ViewReadiness): AppView {
+  if (view === 'tuning' && !readiness.tuningReady) return 'status';
+  if (view === 'advancedButtonMapping' && !readiness.buttonMappingReady) return 'status';
+  return view;
+}
+
+export function viewFromHash(rawHash: string, readiness: ViewReadiness): AppView {
+  const hash = legacyRedirects[rawHash] ?? rawHash;
+  const match = appViews.find((item) => item.hash === hash);
+  return guardView(match?.id ?? 'status', readiness);
+}
+```
+
+- [ ] **Step 2: Fix all compile errors from the `AppView` union change**
+
+Run `npm run typecheck` and chase every error. In `App.svelte`, the old view ids map: `games`→`tuning` (scope strip moves in Task 5), `controllers`→`advancedController`, `haptics`→`tuning`, `buttonMapping`→`advancedButtonMapping`. Keep rendering the *existing* feature views for each new id (GamesView temporarily renders inside `tuning` alongside HapticsView gated by the same conditionals as today — Task 5 replaces this).
+
+- [ ] **Step 3: Gates** — typecheck + build pass. Visual smoke will FAIL on route hashes; that is expected until Task 3 Step 3. Do not run it yet.
+
+- [ ] **Step 4: Commit** — `git commit -m "ui-rework: status/tuning/advanced navigation model with legacy hash redirects"`
+
+---
+
+### Task 3: Shell — sidebar replaces HUD + ribbon, smoke test retargeted
+
+**Files:**
+- Create: `web/src/components/AppSidebar.svelte`
+- Create: `web/src/styles/shell-v2.css`
+- Modify: `web/src/App.svelte` (shell markup region), `web/src/styles/app.css` (import shell-v2 instead of shell/ribbon)
+- Modify: `web/scripts/visual-smoke.mjs` (route list + text expectations)
+- Delete (Task 10, not now): `ViewNav.svelte`, `ContextRibbon.svelte`, `shell.css`, `ribbon.css`
+
+- [ ] **Step 1: Build AppSidebar.svelte**
+
+Props: `view: AppView`, `readiness: ViewReadiness`, `onNavigate(view)`. Layout truth: sidebar in `status-advanced-v2-psblue.html`. Structure:
+
+```svelte
+<script lang="ts">
+  import { appViews, viewTooltips, type AppView, type ViewReadiness } from '../app/navigation';
+  let { view, readiness, onNavigate }: {
+    view: AppView; readiness: ViewReadiness; onNavigate: (view: AppView) => void;
+  } = $props();
+  let advancedOpen = $state(view.startsWith('advanced'));
+  const main = appViews.filter((v) => v.group === 'main');
+  const advanced = appViews.filter((v) => v.group === 'advanced');
+</script>
+
+<nav class="sidebar" aria-label="Main">
+  <div class="sidebar-brand">DSCC</div>
+  {#each main as item}
+    <button class="sidebar-item" class:active={view === item.id}
+      title={viewTooltips[item.id]} onclick={() => onNavigate(item.id)}>{item.label}</button>
+  {/each}
+  <button class="sidebar-group" aria-expanded={advancedOpen}
+    onclick={() => (advancedOpen = !advancedOpen)}>Advanced {advancedOpen ? '▾' : '▸'}</button>
+  {#if advancedOpen}
+    {#each advanced as item}
+      <button class="sidebar-item sidebar-sub" class:active={view === item.id}
+        title={viewTooltips[item.id]} onclick={() => onNavigate(item.id)}>{item.label}</button>
+    {/each}
+  {/if}
+  <div class="sidebar-spacer"></div>
+  <slot name="footer" />
+</nav>
+```
+
+- [ ] **Step 2: shell-v2.css**
+
+```css
+.app-shell { display: flex; min-height: 100vh; background: var(--bg); }
+.sidebar {
+  width: 168px; flex: 0 0 auto; background: var(--bg-rail);
+  display: flex; flex-direction: column; gap: 2px; padding: 14px 10px;
+  position: sticky; top: 0; height: 100vh; z-index: var(--z-sticky);
+}
+.sidebar-brand { font-weight: 600; padding: 6px 10px; }
+.sidebar-item, .sidebar-group {
+  text-align: left; font: inherit; color: var(--ink-muted); background: none; border: 0;
+  padding: 7px 10px; border-radius: var(--radius-s); cursor: pointer;
+  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
+}
+.sidebar-item:hover { color: var(--ink); background: color-mix(in srgb, var(--surface-raised) 60%, transparent); }
+.sidebar-item.active { color: var(--ink); background: var(--surface-raised); }
+.sidebar-item:focus-visible, .sidebar-group:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 1px; }
+.sidebar-group { font-size: 0.78rem; letter-spacing: 0.02em; text-transform: uppercase; margin-top: 12px; }
+.sidebar-sub { padding-left: 20px; font-size: 0.92em; }
+.sidebar-spacer { flex: 1; }
+.app-main { flex: 1; min-width: 0; }
+
+@media (max-width: 760px) {
+  .app-shell { flex-direction: column; }
+  .sidebar { width: 100%; height: auto; position: sticky; flex-direction: row; flex-wrap: wrap; align-items: center; }
+  .sidebar-spacer { display: none; }
+}
+```
+
+- [ ] **Step 3: Re-house App.svelte's shell** — replace `.ops-shell`/`.dm-hud`/ContextRibbon markup with `.app-shell > AppSidebar + .app-main`. Keep ToastStack, OnboardingTutorial, SupportPanel mounted (SupportPanel trigger moves into the sidebar footer slot). The controller/profile context the ribbon provided moves into the Tuning header (Task 5) and Status (Task 4); until those tasks, render the existing pickers in a plain `.app-main` toolbar so nothing is lost.
+
+- [ ] **Step 4: Retarget the smoke test** — in `web/scripts/visual-smoke.mjs`, update the route table: `#/status` (expect `/Status|Everything|controller/i`), `#/tuning` (expect `/Tuning|Profile/i`), `#/advanced/controller` (expect `/Controller details|Live input/i`), `#/advanced/button-mapping` (keep the existing `/Button Mapping|Default mirror/i` and read-only copy assertions). Also assert the legacy hashes redirect (navigate to `#/games`, expect final hash `#/tuning`).
+
+- [ ] **Step 5: Gates** — typecheck, build, visual-smoke all green at all 3 viewports.
+
+- [ ] **Step 6: Commit** — `git commit -m "ui-rework: sidebar shell, smoke test retargeted to new routes"`
+
+---
+
+### Task 4: Status page
+
+**Files:**
+- Create: `web/src/lib/features/status/StatusView.svelte`
+- Create: `web/src/styles/status.css` (import from app.css)
+- Modify: `web/src/App.svelte` (render StatusView for `view === 'status'`; make `#/status` the default route)
+
+Layout truth: Status block of `status-advanced-v2-psblue.html`. Compose entirely from state App.svelte already holds (controllers list, selected controller, runtime snapshot, profile resolution, telemetry freshness — see `docs/architecture-audit.md` for which module owns each; pass as props, do not re-fetch).
+
+- [ ] **Step 1: Build the four regions**
+  1. Sentence of truth: dot (`--ok`/`--warn`/`--danger`) + "Everything is working." / "Something needs your attention." / "No controller connected yet." + one clause naming game + controller alias.
+  2. CONTROLLER block: alias, family, transport, battery, charging; inline Rename (reuse existing rename action); empty state: "Plug in or pair a controller and it appears here."
+  3. WHAT'S ACTIVE, AND WHY: rows for game detected / profile in use / telemetry / "when the game closes → back to Global Profile" — wording exactly as the mockup; uses Profile Resolution state.
+  4. NEEDS ATTENTION: renders only real findings (telemetry quiet for a running game, controller disconnected mid-session, port conflicts surfaced by existing error state); when empty renders "Nothing else needs you."
+- [ ] **Step 2: CSS** — groups are intrinsic-width flex children (`flex: 1 1 280px; max-width: 420px`), wrap per the layout contract; label style `.lbl` (10px caps muted) shared via status.css.
+- [ ] **Step 3: Gates** — typecheck, build, visual-smoke (Status text assertions now hit real content).
+- [ ] **Step 4: Commit** — `git commit -m "ui-rework: status page with sentence-of-truth and profile resolution"`
+
+---
+
+### Task 5: Tuning canvas — header band, game dropdown, profile menu
+
+**Files:**
+- Create: `web/src/lib/features/tuning/TuningHeader.svelte` (band + game dropdown + profile menu + telemetry chip)
+- Create: `web/src/lib/features/tuning/gameSelect.ts` (pure: builds dropdown groups from games list + detection state — Running now / Everyday · Global Profile / Supported games / Setup guide / Add manually)
+- Create: `web/src/styles/tuning.css`
+- Modify: `web/src/App.svelte` (Tuning route renders TuningHeader + existing HapticsView content; GamesView's scope/selection logic migrates into gameSelect.ts; AddGameDialog opens from the dropdown's "+ Add a game manually…")
+
+Layout truth: header band of `tuning-canvas-v9.html`, dropdown of `shell-hybrid.html`, chip of `setup-reentry.html`.
+
+- [ ] **Step 1: Header band** — 80px, `background-image` from `artwork.heroUrl` with the double scrim (90° dark-left + 0° fade-to-bg); cover thumb from `artwork.bannerUrl` falls back to `InitialBadge`; Everyday/Global renders a flat `--bg-rail` band, no art. Title row: game name + dropdown caret + telemetry chip; second row: `Profile: <name> ▾` + unsaved count (wire in Task 7). Right: controller alias + battery.
+- [ ] **Step 2: Game dropdown** — native-feeling menu (positioned `fixed`, `--z-dropdown`), groups from `gameSelect.ts`, entries: detected game(s) with ● badge, "Everyday (no game) · Global Profile", supported games, divider, "Setup guide for <current>…", "+ Add a game manually…" → existing AddGameDialog. Selecting an entry drives the same scope state GamesView drives today.
+- [ ] **Step 3: Profile menu** — reuse `profileSelection.ts`/`profileManagement.ts` actions (switch, create, duplicate, import, export) in a compact menu under the profile label. GamesView and ProfileConsole stop being routed; leave files in place (deleted Task 10).
+- [ ] **Step 4: Gates + eyes** — gates green; `npm run dev:mock`: dropdown groups correct, art band renders, Everyday band neutral.
+- [ ] **Step 5: Commit** — `git commit -m "ui-rework: tuning header with game dropdown, profile menu, bespoke art band"`
+
+---### Task 6: Tuning canvas — semantic columns
+
+**Files:**
+- Create: `web/src/lib/features/tuning/TuningCanvas.svelte` (the column grid; slots existing panels)
+- Modify: `web/src/styles/tuning.css`
+- Modify: `web/src/App.svelte` / `web/src/lib/features/haptics/*` wiring only (panels keep their internals: TriggerCurvesPanel splits visually into per-trigger columns via props if it doesn't already support single-trigger rendering — if it renders both triggers as one block, add a `trigger: 'L2' | 'R2'` prop rather than rewriting it)
+
+Layout truth + CSS contract: `tuning-canvas-v9.html` (`.canvas-grid`, `.col-trigger`, `.col-small`).
+
+- [ ] **Step 1: Grid CSS**
+
+```css
+.canvas-grid { display: flex; flex-wrap: wrap; gap: 18px 22px; padding: 14px 16px 18px; flex: 1; min-width: 0; }
+.col-trigger { flex: 1 1 300px; min-width: var(--curve-min); max-width: var(--curve-max); }
+.col-small   { flex: 1 1 220px; min-width: 210px; max-width: 320px; }
+.canvas-grid .control-slider { max-width: var(--slider-cap); }
+@media (max-width: 760px) {
+  .col-trigger, .col-small { max-width: none; flex-basis: 100%; }
+}
+```
+
+- [ ] **Step 2: Column composition** — BRAKE · L2 (curve + ABS pulse + lockup effects), THROTTLE · R2 (curve + gear-shift kick + rev-limiter buzz), ROAD FEEL (road texture + surface detail + "More effects appear here for games that send them."), LIGHTS (LightbarControls + brightness + player LEDs). Map the existing Forza effect controls (`forzaEffectState.ts`, HapticsAside) into these groups; effect display names use the spec's plain-words labels.
+- [ ] **Step 3: Gates + eyes** — gates green; verify wrap behavior at ~1280px (Road feel/Lights wrap under triggers) and 390px (stack), no horizontal overflow.
+- [ ] **Step 4: Commit** — `git commit -m "ui-rework: semantic tuning columns (brake/throttle/road feel/lights)"`
+
+---
+
+### Task 7: Saved rail + unsaved diff
+
+**Files:**
+- Create: `web/src/lib/features/tuning/SavedRail.svelte`
+- Create: `web/src/lib/features/tuning/savedDiff.ts` (pure: `(savedProfile, draft) => Array<{label, savedValue, currentValue, dirty}>`)
+- Modify: `web/src/app/profileDraft.ts` consumers in App.svelte to feed savedDiff; `web/src/styles/tuning.css`
+
+Layout truth: saved rail of `tuning-canvas-v9.html` (sticky, outside `.canvas-grid`), mobile bar in the same file's `phone-note`.
+
+- [ ] **Step 1: savedDiff.ts** — derives rows from the active profile's saved values vs. the working draft (`profileDraft.ts` already models the draft; see `docs/architecture-audit.md`). Dirty rows carry both values.
+- [ ] **Step 2: SavedRail.svelte** — `flex: 0 0 var(--saved-rail-w); position: sticky; top: 14px;` docked right of `.canvas-grid` inside a `.work-and-rail` flex wrapper; rows show `saved` muted, dirty rows `saved (strikethrough) → current (--accent-text)`; footer: Preview feel (existing dry-run/test action, caption "3s · nothing saved"), Save changes (`--accent`), Discard. Header band shows "· N unsaved changes" when N > 0. Curve editors render the saved curve as a dashed ghost path when dirty (TriggerCurvesPanel gets a `savedCurve` prop).
+- [ ] **Step 3: <900px bar** — rail hides; a bottom-docked bar (position: fixed, `--z-sticky`) shows "N unsaved changes · Save · Discard", expanding to the rows on tap.
+- [ ] **Step 4: Gates + eyes** — tweak a slider in dev:mock: count appears, rail diffs, Discard restores, Save persists (mock). Smoke green.
+- [ ] **Step 5: Commit** — `git commit -m "ui-rework: sticky saved rail with tweak-vs-saved diff and mobile bar"`
+
+---
+
+### Task 8: Per-game setup state + telemetry chip re-entry
+
+**Files:**
+- Create: `web/src/lib/features/tuning/SetupGuide.svelte`
+- Create: `web/src/lib/features/tuning/setupRequirements.ts` (pure: derives `{required, steps, verified}` per game from existing Game Module metadata + telemetry state; Forza-family games → Data Out steps with IP `127.0.0.1` / port from existing telemetry routing state; shared-memory games → `required: false`)
+- Modify: `TuningHeader.svelte` (chip states + click), `web/src/App.svelte` (canvas renders SetupGuide when selected game unverified)
+
+Layout truth: `game-setup.html`, `setup-reentry.html`. The existing `TelemetryRoutingPanel.svelte` holds today's routing knowledge — mine it for state, then stop routing to it (its LAN settings move to the guide's "Stuck?" details).
+
+- [ ] **Step 1: setupRequirements.ts + persistence** — verification = telemetry packets seen for that game at least once (persist per game id in the same store the app already uses for UI prefs/onboarding state). Once verified, guide never auto-shows.
+- [ ] **Step 2: SetupGuide.svelte** — numbered steps with done/now/todo states; copy buttons for IP/port (`navigator.clipboard.writeText`); LISTENING box bound to live telemetry state, flips to `--ok` automatically and swaps the canvas in (no click). Zero-setup variant: "No setup needed" + "Start tuning →" (pre-tune base feel).
+- [ ] **Step 3: Chip re-entry** — chip variants: green "● TELEMETRY FRESH · setup ↗", neutral (no telemetry game), yellow "● TELEMETRY QUIET · fix ↗". Click toggles the guide over the canvas (canvas state, not modal); Status → Needs attention links to `#/tuning` with the guide open when quiet.
+- [ ] **Step 4: Gates + eyes** — mock flow: select unverified Forza → guide; simulate packets (mock fixture) → canvas swaps in; chip reopens guide. Smoke green.
+- [ ] **Step 5: Commit** — `git commit -m "ui-rework: per-game setup guide with passive verification and chip re-entry"`
+
+---
+
+### Task 9: Advanced section
+
+**Files:**
+- Modify: `web/src/App.svelte` (route the three advanced views), `web/src/lib/features/controllers/ControllersView.svelte` (restyle wrapper to canvas system; live input meters to `--accent-bright`; plain-words drift line; Support Bundle button joins this page), Edge slots UI extracted from ControllersView into the `advancedEdgeSlots` route if currently embedded
+- Modify: `web/src/styles/controllers.css` → re-skin to tokens (structure may stay)
+- Modify: button-mapping styles only where old tokens/HUD chrome leak through (`web/src/styles/button-mapping/*`); **all button-mapping copy and workflow unchanged** (smoke asserts it)
+
+- [ ] **Step 1: Controller details** — LIVE INPUT / CONNECTION / SUPPORT groups per `status-advanced-v2-psblue.html`; header line "Kyle's Edge · live readouts for checking, not for everyday tuning" pattern.
+- [ ] **Step 2: Edge onboard slots route** — existing slots UI under `#/advanced/edge-slots`; hidden when the Target Controller isn't an Edge (sidebar item disabled with tooltip).
+- [ ] **Step 3: Button mapping re-skin** — token sweep only.
+- [ ] **Step 4: Gates** — typecheck, build, visual-smoke (button-mapping copy assertions prove behavior intact).
+- [ ] **Step 5: Commit** — `git commit -m "ui-rework: advanced section (controller details, edge slots, button mapping reskin)"`
+
+---
+
+### Task 10: Cleanup + full gate run
+
+**Files:**
+- Delete: `web/src/components/ViewNav.svelte`, `web/src/components/ContextRibbon.svelte`, `web/src/lib/features/games/GamesView.svelte`, `web/src/lib/features/profiles/ProfileConsole.svelte` (confirm nothing imports them first), `web/src/styles/shell.css`, `web/src/styles/ribbon.css`, `web/src/styles/games.css`, `web/src/styles/games-catalog.css`, `web/src/styles/workspace.css` (audit each for still-used rules before deleting; move survivors into the new files)
+- Modify: `web/src/styles/tokens.css` (delete the legacy alias block), `web/src/styles/app.css` (prune imports), `web/src/styles/responsive.css` (prune dead selectors)
+
+- [ ] **Step 1: Dead-code sweep** — `grep -rn "ContextRibbon\|ViewNav\|GamesView\|ProfileConsole\|--obsidian\|--carbon\|--actuation\|--haptic\b\|--tungsten\|--matte\|dm-hud\|ops-shell" web/src web/scripts` must return zero hits after deletions.
+- [ ] **Step 2: Full gates** — `cd web && npm run check` (typecheck, source-audit, button-map, snapshot-map, haptics-graph, build, release-size, visual-smoke) — ALL green.
+- [ ] **Step 3: Eyes-on pass** — `npm run dev:mock`: walk Status → Tuning (Everyday + Forza + zero-setup game) → setup guide → Advanced ×3, at desktop width and 390px. Check every spec §11 state.
+- [ ] **Step 4: Commit** — `git commit -m "ui-rework: remove HUD-era shell, styles, and routed views"`
+
+---
+
+## Self-review notes (already applied)
+
+- Spec §5 route map ↔ Task 2 redirects: consistent.
+- Spec §12 safety copy lives in Tasks 5 (chip), 7 (rail/preview), 8 (guide).
+- Smoke-test retarget happens in the same task that breaks old routes (Task 3) so the suite is never red across a commit boundary.
+- TriggerCurvesPanel/`savedCurve` and `trigger` props are the only feature-component API changes; everything else is composition.
+- Release-size budget (`test:release-size`) may need headroom if Steam hero images were bundled — they are NOT: art comes from existing `artwork.*Url` fields at runtime; no new assets ship.
diff --git a/docs/superpowers/specs/2026-06-10-ui-rework-design.md b/docs/superpowers/specs/2026-06-10-ui-rework-design.md
new file mode 100644
index 0000000..a828f83
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-10-ui-rework-design.md
@@ -0,0 +1,206 @@
+# DSCC Web UI Rework — Design Brief
+
+**Date:** 2026-06-10 · **Branch:** `ui-improvements` · **Status:** awaiting approval, no implementation yet
+**Inputs:** brainstorm + 12 browser-validated mockups (`.superpowers/brainstorm/9273-1781129906/content/`), PRODUCT.md, CONTEXT.md, impeccable skill (product register)
+
+## 1. Feature Summary
+
+Reimagine the DSCC web UI as a calm, task-oriented app for non-technical Windows
+gamers. The four parallel tool routes become a three-destination shell — Status,
+Tuning, Advanced — where the primary surface is a game-led tuning canvas and
+power tools are demoted behind an Advanced door. Visual system moves from the
+"gamer cockpit" HUD to a Calm Console aesthetic (Linear/Raycast lineage) with a
+PlayStation-blue accent.
+
+## 2. Primary User Action
+
+Pick a game (or Everyday), tune how the controller feels, and always know two
+things at a glance: *is everything working* and *what's saved vs. what I've
+tweaked*.
+
+## 3. Design Direction
+
+- **Color strategy:** Restrained. Neutral dark surfaces; one accent doing real
+  work (actions, selection, live/edited state).
+- **Scene sentence:** An evening PC gamer at a desk or couch in a dim room,
+  controller in hand, game about to launch — glancing at DSCC to confirm
+  everything works, then nudging feel. → Dark theme, low-glare, quiet.
+- **Anchors:** Linear (soft dark surfaces, quiet hierarchy), Raycast
+  (disciplined density, settings craft).
+- **Anti-references:** current HUD (grid textures, glows, glass), RGB-gamer
+  software, diagnostics-first layouts.
+
+## 4. Scope
+
+- **Fidelity:** production-ready (the mockups are direction; implementation is
+  real Svelte 5 + CSS, no component library).
+- **Breadth:** whole web UI — shell, all routes, tokens.
+- **Interactivity:** shipped-quality; behavior preserved except where this
+  brief intentionally changes UX.
+- **Time intent:** iterate route-by-route on `ui-improvements`; nothing merges
+  until the gates pass and the user signs off in the running app.
+
+## 5. Information Architecture
+
+```
+Sidebar (slim, persistent; icon rail <760px)
+├─ Status        ← default route on launch
+├─ Tuning        ← game-led canvas (the heart of the app)
+├─ ADVANCED ▸    ← collapsed group, expands in place
+│   ├─ Controller details   (live input, calibration, connection)
+│   ├─ Button mapping       (existing workflow, restyled only)
+│   └─ Edge onboard slots
+└─ ⚙ Settings
+```
+
+- **No Games page.** Game selection is a dropdown in the Tuning header:
+  Running now (detected) → Everyday (Global Profile) → Supported games →
+  "Setup guide for <game>…" → "+ Add a game manually…".
+- **Profiles live in the canvas**: profile selector under the game title;
+  create/duplicate/import/export inside that menu.
+- Old routes `#/games`, `#/controllers`, `#/adaptive-triggers-haptics`,
+  `#/button-mapping` map to `#/status`, `#/tuning`,
+  `#/advanced/controller`, `#/advanced/button-mapping` (old hashes redirect).
+
+## 6. The Tuning Canvas (locked pattern, mockup v9)
+
+**Header band (per game, bespoke):** Steam `library_hero` behind a slim ~80px
+band, double-scrimmed into the page bg; `library_600x900` cover thumbnail
+anchors the game dropdown; profile selector + unsaved-changes count beneath the
+title; controller name/battery right-aligned; clickable telemetry status chip.
+Everyday (Global Profile) uses a neutral band, no game art.
+
+**Working surface — semantic columns, not control-type rows:**
+- **Brake · L2** — trigger curve editor + brake effects (ABS pulse, lockup rumble)
+- **Throttle · R2** — trigger curve editor + throttle effects (gear-shift kick,
+  rev-limiter buzz)
+- **Road feel** — road texture rumble, surface detail; game-provided effects
+  appear here
+- **Lights** — lightbar mode/RPM colors, brightness, player LEDs
+
+**Saved rail (furniture):** fixed ~260px panel docked right, sticky on scroll,
+excluded from wrapping. Shows the active profile's saved values; edited rows
+render `saved → current` with strikethrough; curve editors echo with a dashed
+saved-curve ghost. Contains Preview feel ("3s · nothing saved") above
+Save changes / Discard. Below ~900px it becomes a docked bottom bar
+("2 unsaved changes · Save · Discard", expands to the list on tap).
+
+**Layout contract (the no-wasted-space law):**
+- Controls have intrinsic sizes; extra width adds columns or grows
+  *instruments only* — never stretches sliders/rows.
+- Curve editors: flex 280→460px (instruments earn size). Sliders: ~220px cap.
+- Columns flex-wrap: 5-across on wide, Road feel/Lights wrap under
+  Brake/Throttle near 720p widths, single column <760px.
+- Saved rail is outside the wrap container at all times (until the <900px bar).
+- Smoke test enforces no horizontal overflow at 390px.
+
+## 7. Status (default route)
+
+1. **One sentence of truth:** green/yellow/red dot + "Everything is working." +
+   one plain-language clause naming game and controller.
+2. **Controller** block: alias, family, connection/transport, battery; Rename
+   inline; hint line for adding another controller.
+3. **What's active, and why:** Profile Resolution as plain-words rows — game
+   detected, profile in use, telemetry freshness, "when the game closes →
+   back to Global Profile".
+4. **Needs attention:** the only home for warnings; states "Nothing else needs
+   you" when empty. Links into game setup if telemetry goes quiet.
+
+## 8. Per-Game Setup (canvas state, not a pop-up)
+
+- Each Game Module declares its requirements. Selecting an unverified game
+  renders the walkthrough *in the canvas*; once verified, the canvas shows
+  tuning controls permanently.
+- Forza-style flow: numbered steps (a real sequence): ① game found
+  (auto-verified) ② enable Data Out with exact menu path + copy buttons for
+  IP/port ③ drive. A "Listening on port 5300…" box flips green passively when
+  packets arrive — completion requires zero clicks.
+- Zero-setup games (Assetto Corsa Rally): "No setup needed" reassurance +
+  offer to pre-tune with base feel.
+- **Re-entry:** the header telemetry chip ("● TELEMETRY FRESH · setup ↗") opens
+  the guide anytime; turns yellow and deep-links to the fix when telemetry is
+  quiet. Fallback entry in the game dropdown. Telemetry loss never yanks the
+  canvas — it flags Status → Needs attention.
+
+## 9. Advanced
+
+Sidebar group expands in place. Controller details = live input meters,
+connection facts (transport, input path, polling, firmware), stick-drift
+plain-words readout, Support Bundle download. Framed as "for checking, not for
+everyday tuning." Button mapping keeps its current workflow and copy
+(read-only mirror messaging preserved for the smoke test), restyled to the new
+tokens. Edge onboard slots move here.
+
+## 10. Visual System (tokens.css rewrite)
+
+Neutrals (Calm Console): bg `#141417` · sidebar/header `#18181c` · surface
+`#1d1d22` · raised `#26262c` · hairline `#232329` / `#2e2e36` · ink `#d6d6dc`
+· muted `#8b8b96` (large/secondary text only; verify 4.5:1 where body-sized).
+
+Accent (PlayStation blue): `--accent #0070CC` (primary buttons) ·
+`--accent-bright #1f8fff` (slider fills, live lines, meters) ·
+`--accent-text #5db2ff` (accent text on dark, ≥4.5:1) · `--accent-tint #12273d`
+(edited/unsaved bg) · `--accent-outline #1d4f80` (edited outlines).
+Semantic: green = working, yellow = attention, red = errors only.
+Final values to be expressed in OKLCH with contrast verified at implementation.
+
+Type: Inter only (drop Space Grotesk display pairing); fixed rem scale, ratio
+~1.2; JetBrains Mono retained solely for literal values (ports, IPs).
+Surfaces: flat fills + hairlines; no glassmorphism, grid textures, glows, or
+side-stripe borders. Radii ~6–10px. Motion: 150–250ms ease-out state
+transitions only; full `prefers-reduced-motion` support.
+
+## 11. Key States
+
+- Tuning: setup-needed (walkthrough) · waiting-for-detection · active-clean ·
+  active-with-unsaved (count in header, diff in rail, ghost curves) ·
+  Everyday/Global (neutral band) · no-controller (point to Status).
+- Status: all-good · attention (yellow) · no-controller-yet (first-run:
+  connect instructions) · telemetry-quiet.
+- Saved rail: clean (values only) · dirty (diffs + actions) · mobile bar.
+- Empty states teach ("Plug in or pair a controller and it appears here").
+
+## 12. Safety Framing (constraint #4)
+
+Preview feel is always labeled "Nothing is saved"; unsaved drift is always
+visible (header count + rail diff); plain-words distinction between what's
+saved, what the controller is using right now, and what happens on
+Save/Discard. Global vs Game Profile state is always named in the header and
+on Status.
+
+## 13. Constraints & Gates
+
+- Domain language from CONTEXT.md is law; no _Avoid_ terms in copy.
+  "Everyday" is a presentation label only and always appears with its domain
+  term ("Everyday · Global Profile"); the term of record in copy, code, and
+  docs remains Global Profile.
+- Mock/real API contracts unchanged (`web/src/lib/mock/`, `web/src/lib/api/`).
+  Steam art assets come via existing game artwork fields; if hero/cover grades
+  are missing for a title, fall back to a neutral band + InitialBadge.
+- Behavior preserved except UX changes specified here.
+- Gates before any "done": `npm run typecheck`, `npm run build`,
+  `npm run test:visual-smoke` (route-text assertions will need updating to the
+  new IA in the same change), `npm run test:source-audit`, plus eyes-on
+  `dev:mock` at desktop and 390px.
+- Coordinate with the architecture-decomposition effort: this rework
+  effectively decomposes App.svelte's route shells; note overlaps in PRs.
+
+## 14. Implementation Shape (route-by-route, each step green)
+
+1. Tokens + shell: new tokens.css, sidebar, hash redirects (old routes still
+   render existing views inside the new shell).
+2. Status page (new).
+3. Tuning canvas: header band + game dropdown + profile menu; semantic
+   columns wrapping existing trigger/haptics controls; saved rail.
+4. Per-game setup state + telemetry chip re-entry.
+5. Advanced: move controllers detail + button mapping + Edge slots; restyle.
+6. Delete dead styles (HUD, ribbon, games grid); update smoke-test
+   expectations; full gate run.
+
+## 15. Open Questions (deliberately few)
+
+- Sidebar at 390px: icon rail vs. bottom tab bar — decide in implementation
+  against the smoke test; mockups assume collapse, either satisfies the
+  contract.
+- Onboarding tutorial and LAN settings panel: keep current behavior, restyle
+  only; revisit copy in a later pass.

From b35abf8f761df95c42223d629bc4654d9b362ac6 Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 18:37:21 -0500
Subject: [PATCH 02/23] ui-rework: calm-console + PS-blue design tokens with
 legacy aliases

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/styles/tokens.css | 79 +++++++++++++++++++++++++++++++++------
 1 file changed, 68 insertions(+), 11 deletions(-)

diff --git a/web/src/styles/tokens.css b/web/src/styles/tokens.css
index e69f7de..e5d41c5 100644
--- a/web/src/styles/tokens.css
+++ b/web/src/styles/tokens.css
@@ -1,16 +1,73 @@
 :root {
-  --obsidian: #0A0A0C;
-  --carbon: #121214;
-  --actuation: #0070CC;
-  --haptic: #E2E8F0;
-  --tungsten: #71717A;
-  --overdrive: #F03E3E;
-  --ready: #22C55E;
-  --matte: rgba(226, 232, 240, 0.045);
-  --line: rgba(113, 113, 122, 0.28);
-  color: var(--haptic);
-  background: var(--obsidian);
+  /* neutrals — calm console */
+  --bg: #141417;
+  --bg-rail: #18181c;        /* sidebar, header bars */
+  --surface: #1d1d22;        /* panels that need a bounded field */
+  --surface-raised: #26262c; /* active nav item, chips, inputs */
+  --hairline: #232329;
+  --hairline-strong: #2e2e36;
+  --ink: #d6d6dc;
+  --ink-muted: #8b8b96;      /* secondary text only; not body-sized prose */
+
+  /* accent — PlayStation blue */
+  --accent: #0070cc;          /* primary buttons */
+  --accent-bright: #1f8fff;   /* slider fills, live lines, meters */
+  --accent-text: #5db2ff;     /* accent-colored text on dark (>=4.5:1) */
+  --accent-tint: #12273d;     /* edited/unsaved backgrounds */
+  --accent-outline: #1d4f80;  /* edited outlines */
+
+  /* semantic */
+  --ok: #4ade80;
+  --ok-tint: #143620;
+  --warn: #facc15;
+  --danger: #f03e3e;
+
+  /* shape & rhythm */
+  --radius-s: 6px;
+  --radius-m: 8px;
+  --radius-l: 10px;
+  --speed: 180ms;
+  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint-ish */
+
+  /* layout contract (spec §6) */
+  --curve-min: 280px;
+  --curve-max: 460px;
+  --slider-cap: 220px;
+  --saved-rail-w: 260px;
+
+  /* z-scale: dropdown < sticky < backdrop < dialog < toast < tooltip */
+  --z-dropdown: 10;
+  --z-sticky: 20;
+  --z-backdrop: 30;
+  --z-dialog: 40;
+  --z-toast: 50;
+  --z-tooltip: 60;
+
+  color: var(--ink);
+  background: var(--bg);
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :root { --speed: 0ms; }
+}
+
+/* TEMPORARY legacy aliases — delete in cleanup task */
+:root {
+  --obsidian: var(--bg);
+  --carbon: var(--bg-rail);
+  --actuation: var(--accent);
+  --haptic: var(--ink);
+  --tungsten: var(--ink-muted);
+  --overdrive: var(--danger);
+  --ready: var(--ok);
+  --matte: rgba(214, 214, 220, 0.045);
+  --line: rgba(139, 139, 150, 0.28);
+  --muted: var(--ink-muted);
+  --text: var(--ink);
+  --ash: var(--ink-muted);
+  --mono: "Courier New", monospace;
+  --border-strong: var(--hairline-strong);
+}

From ae302fe243a1daf668d01ab03131bbc83e6ddd68 Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 18:44:46 -0500
Subject: [PATCH 03/23] ui-rework: annotate legacy token block for safe cleanup

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/styles/tokens.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web/src/styles/tokens.css b/web/src/styles/tokens.css
index e5d41c5..158a467 100644
--- a/web/src/styles/tokens.css
+++ b/web/src/styles/tokens.css
@@ -65,6 +65,10 @@
   --ready: var(--ok);
   --matte: rgba(214, 214, 220, 0.045);
   --line: rgba(139, 139, 150, 0.28);
+
+  /* previously-undefined vars referenced by legacy CSS — verify zero usages
+     before deleting; --mono is a real value (not an alias) and must move to
+     the main block if monospace text survives the rework */
   --muted: var(--ink-muted);
   --text: var(--ink);
   --ash: var(--ink-muted);

From d74ba83f0de931faf20e371db640bb26e58b8dd0 Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 18:50:14 -0500
Subject: [PATCH 04/23] ui-rework: status/tuning/advanced navigation model with
 legacy hash redirects

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/App.svelte                           | 46 +++++++++++++-------
 web/src/app/navigation.ts                    | 43 +++++++++++-------
 web/src/components/OnboardingTutorial.svelte | 12 ++---
 web/src/components/ViewNav.svelte            |  9 ++--
 4 files changed, 69 insertions(+), 41 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index e5366bc..0bcb369 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -317,7 +317,7 @@
   let curveDragSide: TriggerSide | null = null;
   let curveDragPoint: CurveDragPoint | null = null;
   let triggerCurveDisplayMode: TriggerCurveDisplayMode = 'base';
-  let activeView: AppView = 'games';
+  let activeView: AppView = 'status';
   let triggerEffect = 'Adaptive resistance';
   let triggerIntensity = 'Strong (Standard)';
   let vibrationIntensity = 'Medium';
@@ -498,7 +498,15 @@
   $: activeProfileHeader = profileWorkspace.activeProfileHeader;
   $: activeProfileHeaderName = profileWorkspace.activeProfileHeaderName;
   $: activeProfileHeaderMeta = profileWorkspace.activeProfileHeaderMeta;
-  $: buttonMappingActive = activeView === 'buttonMapping';
+  $: buttonMappingActive = activeView === 'advancedButtonMapping';
+  // Temporary view composition (Tasks 3-5 replace this): 'status' renders the old
+  // default (GamesView) so the app is never blank; 'tuning' renders GamesView plus
+  // the haptics workspace; 'advancedEdgeSlots' renders ControllersView because the
+  // Edge onboard slots UI currently lives inside it.
+  $: showAdvancedControllerView = activeView === 'advancedController' || activeView === 'advancedEdgeSlots';
+  $: showGamesView = activeView === 'status' || activeView === 'tuning' || (!tuningReady && !showAdvancedControllerView);
+  $: showWorkspaceViews =
+    showAdvancedControllerView || (tuningReady && (activeView === 'tuning' || activeView === 'advancedButtonMapping'));
   $: steamInputStatus = snapshot?.steamInput;
   $: inputBridgeStatus = snapshot?.inputBridge;
   $: telemetryPacketRate = adapter?.packetRateHz ?? 0;
@@ -632,7 +640,7 @@
   };
 
   const appViewFromHash = (): AppView => {
-    if (typeof window === 'undefined') return 'games';
+    if (typeof window === 'undefined') return 'status';
     return viewFromHash(window.location.hash, { tuningReady, buttonMappingReady });
   };
 
@@ -916,8 +924,8 @@
     selectedTuningGameId = '';
     const profileId = globalTuningProfileSelection(profiles, activeProfileId);
     selectedOverrideProfileId = profileId;
-    activeView = 'haptics';
-    setViewHash('haptics');
+    activeView = 'tuning';
+    setViewHash('tuning');
     if (profileId) await selectProfileForScope(profileId, null, 'Global Profile');
   };
 
@@ -931,8 +939,8 @@
       currentControllerConfig
     });
     if (preferredProfileId) selectedOverrideProfileId = preferredProfileId;
-    activeView = 'haptics';
-    setViewHash('haptics');
+    activeView = 'tuning';
+    setViewHash('tuning');
     if (preferredProfileId) await selectProfileForScope(preferredProfileId, game.gameId, game.name);
   };
 
@@ -1727,7 +1735,7 @@
   function shouldPollTriggerInput() {
     return Boolean(
       controller?.id &&
-        activeView === 'haptics' &&
+        activeView === 'tuning' &&
         typeof window !== 'undefined' &&
         typeof document !== 'undefined' &&
         !document.hidden
@@ -1740,9 +1748,14 @@
 
   $: if (
     typeof window !== 'undefined' &&
-    (window.location.hash === '#/controllers' ||
+    (window.location.hash === '#/tuning' ||
+      window.location.hash === '#/advanced/controller' ||
+      window.location.hash === '#/advanced/button-mapping' ||
+      window.location.hash === '#/advanced/edge-slots' ||
+      window.location.hash === '#/controllers' ||
       window.location.hash === '#/adaptive-triggers-haptics' ||
-      window.location.hash === '#/button-mapping')
+      window.location.hash === '#/button-mapping' ||
+      window.location.hash === '#/games')
   ) {
     const routeView = appViewFromHash();
     if (routeView !== activeView) {
@@ -1957,7 +1970,7 @@
   // Live trigger polling feeds the haptics curve cursor and the base-feel test.
   // It is intentionally limited to the visible Haptics view so inactive routes
   // do not spend the 25Hz input budget or trigger extra DOM work.
-  $: if (controller?.id && activeView === 'haptics') {
+  $: if (controller?.id && activeView === 'tuning') {
     startTriggerInputPolling();
   } else {
     stopTriggerInputPolling();
@@ -2081,7 +2094,7 @@
       onNavigate={navigateToView}
     />
 
-    {#if activeView === 'games' || (!tuningReady && activeView !== 'controllers')}
+    {#if showGamesView}
       <GamesView
         {controller}
         {connectedControllers}
@@ -2103,7 +2116,8 @@
         onPickAllControllers={pickAllControllers}
         onPickControllerTarget={pickControllerTarget}
       />
-    {:else}
+    {/if}
+    {#if showWorkspaceViews}
       <ContextRibbon
         {controller}
         {connectedControllers}
@@ -2139,9 +2153,9 @@
         onUpdateGlyphOverride={updateForzaGlyphOverride}
       />
 
-      {#if activeView === 'controllers'}
+      {#if showAdvancedControllerView}
         <ControllersView
-          active={activeView === 'controllers'}
+          active={showAdvancedControllerView}
           {controllers}
           {controller}
           {selectedControllerId}
@@ -2179,7 +2193,7 @@
         />
       {/if}
 
-      {#if activeView === 'haptics'}
+      {#if activeView === 'tuning' && tuningReady}
       <HapticsView active>
       <TriggerCurvesPanel
         {selectedTuningScope}
diff --git a/web/src/app/navigation.ts b/web/src/app/navigation.ts
index cec87f4..9c921cc 100644
--- a/web/src/app/navigation.ts
+++ b/web/src/app/navigation.ts
@@ -1,9 +1,10 @@
-export type AppView = 'games' | 'controllers' | 'haptics' | 'buttonMapping';
+export type AppView = 'status' | 'tuning' | 'advancedController' | 'advancedButtonMapping' | 'advancedEdgeSlots';
 
 export type AppViewDefinition = {
   id: AppView;
   label: string;
   hash: string;
+  group: 'main' | 'advanced';
 };
 
 export type ViewReadiness = {
@@ -12,31 +13,41 @@ export type ViewReadiness = {
 };
 
 export const appViews: AppViewDefinition[] = [
-  { id: 'games', label: 'Profiles', hash: '#/games' },
-  { id: 'controllers', label: 'Controllers', hash: '#/controllers' },
-  { id: 'haptics', label: 'Adaptive Triggers & Haptics', hash: '#/adaptive-triggers-haptics' },
-  { id: 'buttonMapping', label: 'Button Mapping', hash: '#/button-mapping' }
+  { id: 'status', label: 'Status', hash: '#/status', group: 'main' },
+  { id: 'tuning', label: 'Tuning', hash: '#/tuning', group: 'main' },
+  { id: 'advancedController', label: 'Controller details', hash: '#/advanced/controller', group: 'advanced' },
+  { id: 'advancedButtonMapping', label: 'Button mapping', hash: '#/advanced/button-mapping', group: 'advanced' },
+  { id: 'advancedEdgeSlots', label: 'Edge onboard slots', hash: '#/advanced/edge-slots', group: 'advanced' }
 ];
 
 export const viewTooltips: Record<AppView, string> = {
-  games: 'Choose Global Profile or a supported game scope for tuning.',
-  controllers: 'View controller details, live inputs, calibration readings, and DualSense Edge onboard slots.',
-  haptics: 'Tune L2/R2 curves, manual trigger tests, body haptics, lightbar colors, and telemetry routes.',
-  buttonMapping: 'Edit game/local-app mappings through Steam Input or DSCC Input Bridge.'
+  status: 'Check that your controller, game detection, and telemetry are working.',
+  tuning: 'Tune trigger feel, rumble, and lights for a game or the Global Profile.',
+  advancedController: 'Live inputs, calibration readings, and connection details.',
+  advancedButtonMapping: 'Edit game/local-app mappings through Steam Input or DSCC Input Bridge.',
+  advancedEdgeSlots: 'Manage DualSense Edge onboard profile slots.'
+};
+
+/** Old routes keep working forever; they land on the new home for that content. */
+const legacyRedirects: Record<string, string> = {
+  '#/games': '#/tuning',
+  '#/adaptive-triggers-haptics': '#/tuning',
+  '#/controllers': '#/advanced/controller',
+  '#/button-mapping': '#/advanced/button-mapping'
 };
 
 export function hashForView(view: AppView): string {
-  return appViews.find((item) => item.id === view)?.hash ?? appViews[0].hash;
+  return appViews.find((item) => item.id === view)?.hash ?? '#/status';
 }
 
 export function guardView(view: AppView, readiness: ViewReadiness): AppView {
-  if (view === 'haptics' && !readiness.tuningReady) return 'games';
+  if (view === 'tuning' && !readiness.tuningReady) return 'status';
+  if (view === 'advancedButtonMapping' && !readiness.buttonMappingReady) return 'status';
   return view;
 }
 
-export function viewFromHash(hash: string, readiness: ViewReadiness): AppView {
-  if (hash === '#/controllers') return 'controllers';
-  if (hash === '#/button-mapping') return guardView('buttonMapping', readiness);
-  if (hash === '#/adaptive-triggers-haptics') return guardView('haptics', readiness);
-  return 'games';
+export function viewFromHash(rawHash: string, readiness: ViewReadiness): AppView {
+  const hash = legacyRedirects[rawHash] ?? rawHash;
+  const match = appViews.find((item) => item.hash === hash);
+  return guardView(match?.id ?? 'status', readiness);
 }
diff --git a/web/src/components/OnboardingTutorial.svelte b/web/src/components/OnboardingTutorial.svelte
index 9c60478..b29708c 100644
--- a/web/src/components/OnboardingTutorial.svelte
+++ b/web/src/components/OnboardingTutorial.svelte
@@ -10,16 +10,18 @@
     X
   } from '@lucide/svelte';
 
+  import type { AppView } from '../app/navigation';
+
   export let open = false;
   export let onClose: () => void = () => {};
-  export let onNavigate: (view: 'games' | 'controllers' | 'haptics' | 'buttonMapping') => void = () => {};
+  export let onNavigate: (view: AppView) => void = () => {};
 
   type TutorialStep = {
     title: string;
     eyebrow: string;
     body: string;
     actionLabel: string;
-    targetView?: 'games' | 'controllers' | 'haptics' | 'buttonMapping';
+    targetView?: AppView;
     icon: typeof Gamepad2;
   };
 
@@ -29,7 +31,7 @@
       title: 'Pick the controller and scope',
       body: 'Use Controllers for hardware state and live inputs, then use Profiles to choose Global or a supported game scope.',
       actionLabel: 'Open Controllers',
-      targetView: 'controllers',
+      targetView: 'advancedController',
       icon: Gamepad2
     },
     {
@@ -37,7 +39,7 @@
       title: 'Game effects wait for telemetry',
       body: 'DSCC keeps triggers neutral until a supported game is detected and fresh telemetry is flowing. Manual test buttons attach only for the short test window.',
       actionLabel: 'Open haptics',
-      targetView: 'haptics',
+      targetView: 'tuning',
       icon: RadioTower
     },
     {
@@ -45,7 +47,7 @@
       title: 'Shape L2 and R2 with curve points',
       body: 'Drag the trigger dots for custom brake and throttle response, then use Test Actuation to feel the current profile without starting a game.',
       actionLabel: 'Open haptics',
-      targetView: 'haptics',
+      targetView: 'tuning',
       icon: SlidersHorizontal
     },
     {
diff --git a/web/src/components/ViewNav.svelte b/web/src/components/ViewNav.svelte
index cc17cef..7420919 100644
--- a/web/src/components/ViewNav.svelte
+++ b/web/src/components/ViewNav.svelte
@@ -3,18 +3,19 @@
   import type { AppView, AppViewDefinition } from '../app/navigation';
 
   export let views: AppViewDefinition[] = [];
-  export let activeView: AppView = 'games';
+  export let activeView: AppView = 'status';
   export let tooltips: Record<AppView, string>;
   export let tuningReady = false;
   export let buttonMappingReady = false;
   export let onNavigate: (view: AppView) => void = () => {};
 
   $: viewModels = views.map((view) => {
-    const disabled = (view.id === 'haptics' && !tuningReady) || (view.id === 'buttonMapping' && !buttonMappingReady);
+    const disabled =
+      (view.id === 'tuning' && !tuningReady) || (view.id === 'advancedButtonMapping' && !buttonMappingReady);
     const tooltip =
-      view.id === 'buttonMapping' && !buttonMappingReady
+      view.id === 'advancedButtonMapping' && !buttonMappingReady
         ? 'Select a game or local app scope before editing mappings.'
-        : view.id === 'haptics' && !tuningReady
+        : view.id === 'tuning' && !tuningReady
           ? 'Select a controller before tuning haptics.'
           : tooltips[view.id];
     return { ...view, disabled, tooltip };

From 64cad795781119a0f7ee439750a8fbd9d5a57b62 Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 19:07:55 -0500
Subject: [PATCH 05/23] ui-rework: sidebar shell, smoke test retargeted to new
 routes

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/scripts/visual-smoke.mjs         |  29 ++-
 web/src/App.svelte                   | 234 ++++++++++++++-----------
 web/src/app/navigation.ts            |  10 ++
 web/src/components/AppSidebar.svelte |  74 ++++++++
 web/src/styles/app.css               |   3 +-
 web/src/styles/shell-v2.css          | 252 +++++++++++++++++++++++++++
 6 files changed, 494 insertions(+), 108 deletions(-)
 create mode 100644 web/src/components/AppSidebar.svelte
 create mode 100644 web/src/styles/shell-v2.css

diff --git a/web/scripts/visual-smoke.mjs b/web/scripts/visual-smoke.mjs
index 7afd905..a526267 100644
--- a/web/scripts/visual-smoke.mjs
+++ b/web/scripts/visual-smoke.mjs
@@ -12,11 +12,15 @@ const port = requestedPort > 0 ? requestedPort : await findOpenPort(5174);
 const baseUrl = `http://${host}:${port}`;
 const npmCommand = process.platform === 'win32' ? 'npm.cmd' : 'npm';
 const routeChecks = [
-  { hash: '#/games', pattern: /Profiles|Games|Selected Game/i },
-  { hash: '#/controllers', pattern: /Controllers|Live Input|Input Path/i },
-  { hash: '#/adaptive-triggers-haptics', pattern: /Trigger Curves|Base Haptics|Adaptive/i },
-  { hash: '#/button-mapping', pattern: /Customize Button Assignments|Button Mapping|Default mirror/i }
+  { hash: '#/status', pattern: /Status|Everything|controller/i },
+  { hash: '#/tuning', pattern: /Tuning|Profile/i },
+  { hash: '#/advanced/controller', pattern: /Controller details|Live input/i },
+  // Button mapping needs a game scope first; main() selects one via the
+  // toolbar before this route runs.
+  { hash: '#/advanced/button-mapping', pattern: /Button Mapping|Default mirror/i }
 ];
+// Old routes keep working forever; each lands on the new home for its content.
+const legacyRedirectChecks = [{ from: '#/games', to: '#/tuning' }];
 const viewports = [
   { width: 1366, height: 768 },
   { width: 1440, height: 900 },
@@ -114,6 +118,12 @@ async function main() {
       });
 
       for (const check of routeChecks) {
+        if (check.hash === '#/advanced/button-mapping') {
+          // Button mapping is guarded behind a game scope; pick the mock game
+          // (option 0 is the Global Profile) so the route does not bounce.
+          await page.selectOption('select[aria-label="Tuning scope"]', { index: 1 });
+          await page.waitForTimeout(300);
+        }
         await page.goto(`${baseUrl}/${check.hash}`, { waitUntil: 'domcontentloaded' });
         await page.waitForTimeout(300);
         const snapshot = await routeSnapshot(page);
@@ -122,10 +132,19 @@ async function main() {
         if (!check.pattern.test(snapshot.text)) failures.push(`${label}: expected route text was missing`);
         if (!snapshot.canReachBottom) failures.push(`${label}: page content could not scroll to the bottom`);
         if (snapshot.scrollWidth > snapshot.clientWidth + 2) failures.push(`${label}: horizontal overflow ${snapshot.scrollWidth - snapshot.clientWidth}px`);
-        if (check.hash === '#/button-mapping' && !/Default mirror only|No writable|read-only|Global Profile/i.test(snapshot.text)) {
+        if (check.hash === '#/advanced/button-mapping' && !/Default mirror only|No writable|read-only|Global Profile/i.test(snapshot.text)) {
           failures.push(`${label}: read-only/default-mirror mapping copy was missing`);
         }
       }
+
+      for (const redirect of legacyRedirectChecks) {
+        await page.goto(`${baseUrl}/${redirect.from}`, { waitUntil: 'domcontentloaded' });
+        await page.waitForTimeout(300);
+        const finalHash = await page.evaluate(() => location.hash);
+        if (finalHash !== redirect.to) {
+          failures.push(`${viewport.width}x${viewport.height} ${redirect.from}: redirected to ${finalHash}, expected ${redirect.to}`);
+        }
+      }
       if (consoleErrors.length) {
         failures.push(`${viewport.width}x${viewport.height}: console errors: ${consoleErrors.slice(0, 5).join(' | ')}`);
       }
diff --git a/web/src/App.svelte b/web/src/App.svelte
index 0bcb369..2625498 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
   import { Cable, CircleHelp, ExternalLink, LifeBuoy, RefreshCw } from '@lucide/svelte';
   import { onMount } from 'svelte';
-  import Tooltip from './components/Tooltip.svelte';
-  import ContextRibbon from './components/ContextRibbon.svelte';
+  import AppSidebar from './components/AppSidebar.svelte';
   import AddGameDialog from './lib/features/games/AddGameDialog.svelte';
   import GamesView from './lib/features/games/GamesView.svelte';
   import OnboardingTutorial from './components/OnboardingTutorial.svelte';
-  import ViewNav from './components/ViewNav.svelte';
   import SupportPanel from './components/SupportPanel.svelte';
   import ToastStack from './components/ToastStack.svelte';
-  import { appViews, guardView, hashForView, viewFromHash, viewTooltips } from './app/navigation';
+  import { guardView, hashForView, isViewHash, viewFromHash } from './app/navigation';
   import { createAppRuntime } from './app/runtime';
   import {
     createButtonMappingSession,
@@ -1746,17 +1744,7 @@
     triggerInputPoller.sync();
   }
 
-  $: if (
-    typeof window !== 'undefined' &&
-    (window.location.hash === '#/tuning' ||
-      window.location.hash === '#/advanced/controller' ||
-      window.location.hash === '#/advanced/button-mapping' ||
-      window.location.hash === '#/advanced/edge-slots' ||
-      window.location.hash === '#/controllers' ||
-      window.location.hash === '#/adaptive-triggers-haptics' ||
-      window.location.hash === '#/button-mapping' ||
-      window.location.hash === '#/games')
-  ) {
+  $: if (typeof window !== 'undefined' && isViewHash(window.location.hash)) {
     const routeView = appViewFromHash();
     if (routeView !== activeView) {
       activeView = routeView;
@@ -1993,7 +1981,41 @@
   }
 </script>
 
-<main class="ops-shell">
+<div class="app-shell">
+  <AppSidebar
+    view={activeView}
+    readiness={{ tuningReady, buttonMappingReady }}
+    onNavigate={navigateToView}
+  >
+    {#snippet footer()}
+      <div class="sidebar-footer">
+        <button
+          class="sidebar-item"
+          type="button"
+          title="Open the quick start guide again. It explains Profiles, trigger tests, telemetry safety, and support bundles."
+          aria-label="Open quick start guide"
+          onclick={openOnboarding}
+        >
+          <CircleHelp size={14} /> Guide
+        </button>
+        <button
+          class:active={supportPanelOpen}
+          class="sidebar-item"
+          type="button"
+          title="Copy or export a sanitized support bundle for GitHub issues or Discord help. Raw hardware ids are excluded."
+          aria-expanded={supportPanelOpen}
+          aria-controls="support-bundle-panel"
+          onclick={() => {
+            supportPanelOpen = !supportPanelOpen;
+          }}
+        >
+          <LifeBuoy size={14} /> Support
+        </button>
+      </div>
+    {/snippet}
+  </AppSidebar>
+
+  <main class="app-main">
   {#if loading}
     <section class="ops-state">
       <RefreshCw class="spin" size={24} />
@@ -2008,56 +2030,100 @@
       <button class="solid-action compact" type="button" onclick={refresh}>Retry</button>
     </section>
   {:else if snapshot}
-    <header class="dm-hud" aria-label="Global command state">
-      <div class="dm-hardware-state">
-        <span class="dm-controller-glyph" aria-hidden="true"></span>
-        <div>
-          <h1>DualSense Command Center</h1>
-          <p><span class="dm-app-tagline">Adaptive triggers, haptics, and live telemetry &mdash; tuned locally.</span></p>
-        </div>
-      </div>
-
-      <ViewNav
-        views={appViews}
-        {activeView}
-        tooltips={viewTooltips}
-        {tuningReady}
-        {buttonMappingReady}
-        onNavigate={navigateToView}
-      />
-
-      <div class="dm-system-cluster">
-        <div class="dm-system-readout" title={selectedTuningScope === 'global' ? systemReadoutDetail : adapter?.setupHint ?? telemetryRateDetail}>
-          <span>{systemReadoutTitle}</span>
-          <strong>{systemReadoutValue}</strong>
-          <small>{systemReadoutDetail}</small>
-        </div>
-        <Tooltip text="Open the quick start guide again. It explains Profiles, trigger tests, telemetry safety, and support bundles." side="bottom" align="end">
-          <button
-            class="dm-support-trigger"
-            type="button"
-            aria-label="Open quick start guide"
-            onclick={openOnboarding}
-          >
-            <CircleHelp size={14} /> Guide
-          </button>
-        </Tooltip>
-        <Tooltip text="Copy or export a sanitized support bundle for GitHub issues or Discord help. Raw hardware ids are excluded." side="bottom" align="end">
-          <button
-            class:active={supportPanelOpen}
-            class="dm-support-trigger"
-            type="button"
-            aria-expanded={supportPanelOpen}
-            aria-controls="support-bundle-panel"
-            onclick={() => {
-              supportPanelOpen = !supportPanelOpen;
-            }}
-          >
-            <LifeBuoy size={14} /> Support
-          </button>
-        </Tooltip>
+    <!-- TEMPORARY toolbar: the controller/scope/profile context the old ribbon
+         carried. Task 4 re-houses it on Status; Task 5 in the Tuning header. -->
+    <section class="app-toolbar" aria-label="Controller, scope, and profile context">
+      <label class="app-toolbar-field">
+        <span>Target Controller</span>
+        <select
+          aria-label="Target controller"
+          disabled={!connectedControllerIds.length}
+          value={profileTargetsAllConnected ? '__all__' : profileTargetControllerIds[0] ?? controller?.id ?? ''}
+          onchange={(event) => {
+            const picked = event.currentTarget.value;
+            if (picked === '__all__') pickAllControllers();
+            else if (picked) pickControllerTarget(picked);
+          }}
+        >
+          {#if connectedControllerIds.length > 1}
+            <option value="__all__">All Connected</option>
+          {/if}
+          {#each connectedControllers as item (item.id)}
+            <option value={item.id}>{item.name || controllerModelText(item)}</option>
+          {/each}
+        </select>
+      </label>
+      <label class="app-toolbar-field">
+        <span>Scope</span>
+        <select
+          aria-label="Tuning scope"
+          value={selectedTuningScope === 'game' ? selectedTuningGameId : '__global__'}
+          onchange={(event) => {
+            const picked = event.currentTarget.value;
+            if (picked === '__global__') {
+              if (selectedTuningScope !== 'global') void selectGlobalTuning();
+            } else {
+              const game = discoveredGames.find((item) => item.gameId === picked);
+              if (game) void selectTuningGame(game);
+            }
+          }}
+        >
+          <option value="__global__">Global Profile</option>
+          {#each discoveredGames as game (game.gameId)}
+            <option value={game.gameId}>{game.name}</option>
+          {/each}
+        </select>
+      </label>
+      <label class="app-toolbar-field">
+        <span>Live Profile</span>
+        <select
+          aria-label="Live profile"
+          disabled={!profileContextProfiles.length}
+          value={selectedOverrideProfileId || activeProfileId}
+          onchange={(event) => {
+            const picked = event.currentTarget.value;
+            if (picked && picked !== (selectedOverrideProfileId || activeProfileId)) void selectProfileForScope(picked);
+          }}
+        >
+          {#each profileContextProfiles as profile (profile.id)}
+            <option value={profile.id}>{profile.name}</option>
+          {/each}
+        </select>
+      </label>
+      <label class="app-toolbar-field">
+        <span>Web UI Location</span>
+        <select
+          aria-label="Web UI location"
+          disabled={appSettingsBusy}
+          value={listenOnAllInterfaces ? 'lan' : 'local'}
+          onchange={(event) => void updateLanAccess(event.currentTarget.value === 'lan')}
+        >
+          <option value="local">Local Only</option>
+          <option value="lan">LAN Access</option>
+        </select>
+        <small>{lanRestartRequired ? `restart -> ${appSettings?.desiredBindAddress}` : status?.bindAddress}</small>
+      </label>
+      <button
+        class="app-toolbar-toggle"
+        class:active={glyphOverrideEnabled}
+        type="button"
+        disabled={appSettingsBusy}
+        aria-pressed={glyphOverrideEnabled}
+        title={forzaGlyphs?.lastStatus ?? glyphInstallPath}
+        onclick={() => void updateForzaGlyphOverride()}
+      >
+        Controller Glyphs: {glyphOverrideEnabled ? 'PlayStation Icons' : 'Game Default'}
+      </button>
+      <div class="app-toolbar-spacer"></div>
+      <div
+        class="app-toolbar-readout"
+        title={selectedTuningScope === 'global' ? systemReadoutDetail : adapter?.setupHint ?? telemetryRateDetail}
+      >
+        <span>{systemReadoutTitle}</span>
+        <strong>{systemReadoutValue}</strong>
+        <small>{systemReadoutDetail}</small>
       </div>
-    </header>
+    </section>
 
     {#if showPartialErrorBanner}
       <aside class="ops-warning dm-warning" role="status" aria-live="polite">
@@ -2118,41 +2184,6 @@
       />
     {/if}
     {#if showWorkspaceViews}
-      <ContextRibbon
-        {controller}
-        {connectedControllers}
-        {connectedControllerIds}
-        {profileTargetsAllConnected}
-        {profileTargetControllerIds}
-        {selectedTuningScope}
-        {selectedTuningGameId}
-        {steamContextGame}
-        {steamContextArt}
-        {steamContextBackdropArt}
-        {steamContextMeta}
-        {discoveredGames}
-        {profileContextProfiles}
-        {selectedOverrideProfileId}
-        {activeProfileId}
-        {activeProfileHeaderName}
-        {activeProfileHeaderMeta}
-        {listenOnAllInterfaces}
-        {appSettingsBusy}
-        {lanRestartRequired}
-        desiredBindAddress={appSettings?.desiredBindAddress}
-        currentBindAddress={status?.bindAddress}
-        {glyphOverrideEnabled}
-        glyphStatus={forzaGlyphs?.lastStatus ?? glyphInstallPath}
-        {gameAccentColor}
-        onPickGlobal={selectGlobalTuning}
-        onPickGame={selectTuningGame}
-        onPickProfile={selectProfileForScope}
-        onPickAllControllers={pickAllControllers}
-        onPickController={pickControllerTarget}
-        onUpdateLanAccess={updateLanAccess}
-        onUpdateGlyphOverride={updateForzaGlyphOverride}
-      />
-
       {#if showAdvancedControllerView}
         <ControllersView
           active={showAdvancedControllerView}
@@ -2347,4 +2378,5 @@
     onValidateLocal={validateLocalGameFromDialog}
     onAddLocal={addLocalGameFromDialog}
   />
-</main>
+  </main>
+</div>
diff --git a/web/src/app/navigation.ts b/web/src/app/navigation.ts
index 9c921cc..54e6bb7 100644
--- a/web/src/app/navigation.ts
+++ b/web/src/app/navigation.ts
@@ -36,6 +36,16 @@ const legacyRedirects: Record<string, string> = {
   '#/button-mapping': '#/advanced/button-mapping'
 };
 
+/** Every hash the router answers to: current view hashes plus legacy redirects. */
+export const knownViewHashes: string[] = [
+  ...appViews.map((item) => item.hash),
+  ...Object.keys(legacyRedirects)
+];
+
+export function isViewHash(hash: string): boolean {
+  return knownViewHashes.includes(hash);
+}
+
 export function hashForView(view: AppView): string {
   return appViews.find((item) => item.id === view)?.hash ?? '#/status';
 }
diff --git a/web/src/components/AppSidebar.svelte b/web/src/components/AppSidebar.svelte
new file mode 100644
index 0000000..c51251b
--- /dev/null
+++ b/web/src/components/AppSidebar.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { appViews, viewTooltips, type AppView, type ViewReadiness } from '../app/navigation';
+
+  let {
+    view,
+    readiness,
+    onNavigate,
+    footer
+  }: {
+    view: AppView;
+    readiness: ViewReadiness;
+    onNavigate: (view: AppView) => void;
+    footer?: Snippet;
+  } = $props();
+
+  // svelte-ignore state_referenced_locally -- the initial value is intentional;
+  // the $effect below keeps the group open whenever the view enters it.
+  let advancedOpen = $state(view.startsWith('advanced'));
+  $effect(() => {
+    if (view.startsWith('advanced')) advancedOpen = true;
+  });
+
+  const main = appViews.filter((item) => item.group === 'main');
+  const advanced = appViews.filter((item) => item.group === 'advanced');
+
+  const itemDisabled = (id: AppView): boolean =>
+    (id === 'tuning' && !readiness.tuningReady) ||
+    (id === 'advancedButtonMapping' && !readiness.buttonMappingReady);
+
+  const itemTooltip = (id: AppView): string => {
+    if (id === 'tuning' && !readiness.tuningReady) return 'Select a controller before tuning haptics.';
+    if (id === 'advancedButtonMapping' && !readiness.buttonMappingReady) {
+      return 'Select a game or local app scope before editing mappings.';
+    }
+    return viewTooltips[id];
+  };
+</script>
+
+<nav class="sidebar" aria-label="Main">
+  <div class="sidebar-brand">DSCC</div>
+  {#each main as item (item.id)}
+    <button
+      class="sidebar-item"
+      class:active={view === item.id}
+      type="button"
+      title={itemTooltip(item.id)}
+      disabled={itemDisabled(item.id)}
+      aria-current={view === item.id ? 'page' : undefined}
+      onclick={() => onNavigate(item.id)}
+    >{item.label}</button>
+  {/each}
+  <button
+    class="sidebar-group"
+    type="button"
+    aria-expanded={advancedOpen}
+    onclick={() => (advancedOpen = !advancedOpen)}
+  >Advanced {advancedOpen ? '▾' : '▸'}</button>
+  {#if advancedOpen}
+    {#each advanced as item (item.id)}
+      <button
+        class="sidebar-item sidebar-sub"
+        class:active={view === item.id}
+        type="button"
+        title={itemTooltip(item.id)}
+        disabled={itemDisabled(item.id)}
+        aria-current={view === item.id ? 'page' : undefined}
+        onclick={() => onNavigate(item.id)}
+      >{item.label}</button>
+    {/each}
+  {/if}
+  <div class="sidebar-spacer"></div>
+  {@render footer?.()}
+</nav>
diff --git a/web/src/styles/app.css b/web/src/styles/app.css
index 13a84d0..5504005 100644
--- a/web/src/styles/app.css
+++ b/web/src/styles/app.css
@@ -1,8 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@600;700&display=swap");
 @import "./tokens.css";
 @import "./base.css";
-@import "./shell.css";
-@import "./ribbon.css";
+@import "./shell-v2.css";
 @import "./games.css";
 @import "./controllers.css";
 @import "./games-catalog.css";
diff --git a/web/src/styles/shell-v2.css b/web/src/styles/shell-v2.css
new file mode 100644
index 0000000..e41453b
--- /dev/null
+++ b/web/src/styles/shell-v2.css
@@ -0,0 +1,252 @@
+/* Shell v2 — slim sidebar + document-flow main column (calm console, flat fills). */
+
+/* The document scrolls again under the v2 shell; base.css pinned it for the old
+   HUD shell, which scrolled inside .ops-shell. Delete the base.css rules in the
+   cleanup task and fold these in. */
+html,
+body,
+#app {
+  height: auto;
+  min-height: 100%;
+}
+
+body {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+html {
+  /* Reserve the vertical scrollbar's track so its appearance never reflows
+     content (keeps the visual smoke overflow check stable on classic
+     scrollbar platforms). */
+  scrollbar-gutter: stable;
+}
+
+.app-shell {
+  display: flex;
+  min-height: 100vh;
+  background: var(--bg);
+}
+
+.sidebar {
+  width: 168px;
+  flex: 0 0 auto;
+  background: var(--bg-rail);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 14px 10px;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  z-index: var(--z-sticky);
+}
+
+.sidebar-brand {
+  font-weight: 600;
+  padding: 6px 10px;
+}
+
+.sidebar-item,
+.sidebar-group {
+  text-align: left;
+  font: inherit;
+  color: var(--ink-muted);
+  background: none;
+  border: 0;
+  padding: 7px 10px;
+  border-radius: var(--radius-s);
+  cursor: pointer;
+  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
+}
+
+.sidebar-item:hover {
+  color: var(--ink);
+  background: color-mix(in srgb, var(--surface-raised) 60%, transparent);
+}
+
+.sidebar-item.active {
+  color: var(--ink);
+  background: var(--surface-raised);
+}
+
+.sidebar-item:focus-visible,
+.sidebar-group:focus-visible {
+  outline: 2px solid var(--accent-bright);
+  outline-offset: 1px;
+}
+
+.sidebar-group {
+  font-size: 0.78rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  margin-top: 12px;
+}
+
+.sidebar-sub {
+  padding-left: 20px;
+  font-size: 0.92em;
+}
+
+.sidebar-spacer {
+  flex: 1;
+}
+
+.sidebar-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sidebar-footer .sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.app-main {
+  flex: 1;
+  min-width: 0;
+  /* Clip latent horizontal overflow from legacy feature views (the old
+     .ops-shell did the same); remove once the views are rebuilt. */
+  overflow-x: hidden;
+  padding: 18px clamp(18px, 2.2vw, 34px) 22px;
+}
+
+/* TEMPORARY toolbar — controller/scope/profile context the old ribbon carried.
+   Tasks 4-5 re-house this in Status and the Tuning header; delete it then. */
+.app-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 10px 16px;
+  padding: 10px 12px;
+  margin-bottom: 16px;
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-m);
+}
+
+.app-toolbar-field {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.app-toolbar-field > span {
+  font-size: 0.72rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.app-toolbar-field select {
+  max-width: 220px;
+  padding: 5px 8px;
+  color: var(--ink);
+  background: var(--surface-raised);
+  border: 1px solid var(--hairline-strong);
+  border-radius: var(--radius-s);
+}
+
+.app-toolbar-field small,
+.app-toolbar-readout small {
+  color: var(--ink-muted);
+  font-size: 0.72rem;
+}
+
+.app-toolbar-readout {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.app-toolbar-readout > span {
+  font-size: 0.72rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.app-toolbar-toggle {
+  padding: 6px 10px;
+  color: var(--ink-muted);
+  background: var(--surface-raised);
+  border: 1px solid var(--hairline-strong);
+  border-radius: var(--radius-s);
+  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
+}
+
+.app-toolbar-toggle.active {
+  color: var(--accent-text);
+  border-color: var(--accent-outline);
+  background: var(--accent-tint);
+}
+
+.app-toolbar-spacer {
+  flex: 1;
+}
+
+/* TEMPORARY carry-over from shell.css (still used by legacy feature views);
+   delete with the views in the cleanup task. */
+.dm-controller-glyph {
+  width: 42px;
+  height: 42px;
+  flex: 0 0 auto;
+  color: var(--ink);
+  opacity: 0.82;
+  background: currentColor;
+  mask: url("/dualsense-controller.svg") center / contain no-repeat;
+  -webkit-mask: url("/dualsense-controller.svg") center / contain no-repeat;
+}
+
+.dm-battery-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  color: var(--ink-muted);
+}
+
+.dm-battery {
+  width: 28px;
+  height: 14px;
+  flex: 0 0 auto;
+  color: var(--ink-muted);
+}
+
+.dm-battery rect:first-child,
+.dm-battery path {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+}
+
+.dm-battery-fill {
+  fill: var(--ink);
+}
+
+@media (max-width: 760px) {
+  .app-shell {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+    height: auto;
+    position: sticky;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .sidebar-spacer {
+    display: none;
+  }
+
+  .sidebar-footer {
+    flex-direction: row;
+  }
+}

From 56b0c490532076eb4aed66755841d3a48306e79a Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 19:17:10 -0500
Subject: [PATCH 06/23] ui-rework: contain overlay scroll, prune dead glyph
 rule, cleanup breadcrumbs

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/styles/shell-v2.css | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/web/src/styles/shell-v2.css b/web/src/styles/shell-v2.css
index e41453b..6df30d4 100644
--- a/web/src/styles/shell-v2.css
+++ b/web/src/styles/shell-v2.css
@@ -2,7 +2,9 @@
 
 /* The document scrolls again under the v2 shell; base.css pinned it for the old
    HUD shell, which scrolled inside .ops-shell. Delete the base.css rules in the
-   cleanup task and fold these in. */
+   cleanup task and fold these in. ALSO: responsive.css (@max-width: 1180px) sets
+   body { overflow: auto } and .ops-shell rules that override document scroll —
+   fold those into the responsive section here. */
 html,
 body,
 #app {
@@ -189,19 +191,6 @@ html {
   flex: 1;
 }
 
-/* TEMPORARY carry-over from shell.css (still used by legacy feature views);
-   delete with the views in the cleanup task. */
-.dm-controller-glyph {
-  width: 42px;
-  height: 42px;
-  flex: 0 0 auto;
-  color: var(--ink);
-  opacity: 0.82;
-  background: currentColor;
-  mask: url("/dualsense-controller.svg") center / contain no-repeat;
-  -webkit-mask: url("/dualsense-controller.svg") center / contain no-repeat;
-}
-
 .dm-battery-pill {
   display: inline-flex;
   align-items: center;
@@ -228,6 +217,12 @@ html {
   fill: var(--ink);
 }
 
+/* Prevent scroll bleed behind fixed overlays; the main document scrolls under
+   v2 shell, so fixed panels must contain their scroll momentum. */
+.dm-onboarding {
+  overscroll-behavior: contain;
+}
+
 @media (max-width: 760px) {
   .app-shell {
     flex-direction: column;

From 89bf4dde4c54ac0e816cc40e2efefceefcf24380 Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 19:24:41 -0500
Subject: [PATCH 07/23] ui-rework: status page with sentence-of-truth and
 profile resolution

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/App.svelte                            |  32 ++-
 web/src/lib/features/status/StatusView.svelte | 257 ++++++++++++++++++
 web/src/styles/app.css                        |   1 +
 web/src/styles/status.css                     | 239 ++++++++++++++++
 4 files changed, 524 insertions(+), 5 deletions(-)
 create mode 100644 web/src/lib/features/status/StatusView.svelte
 create mode 100644 web/src/styles/status.css

diff --git a/web/src/App.svelte b/web/src/App.svelte
index 2625498..bfa9c06 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -4,6 +4,7 @@
   import AppSidebar from './components/AppSidebar.svelte';
   import AddGameDialog from './lib/features/games/AddGameDialog.svelte';
   import GamesView from './lib/features/games/GamesView.svelte';
+  import StatusView from './lib/features/status/StatusView.svelte';
   import OnboardingTutorial from './components/OnboardingTutorial.svelte';
   import SupportPanel from './components/SupportPanel.svelte';
   import ToastStack from './components/ToastStack.svelte';
@@ -497,12 +498,13 @@
   $: activeProfileHeaderName = profileWorkspace.activeProfileHeaderName;
   $: activeProfileHeaderMeta = profileWorkspace.activeProfileHeaderMeta;
   $: buttonMappingActive = activeView === 'advancedButtonMapping';
-  // Temporary view composition (Tasks 3-5 replace this): 'status' renders the old
-  // default (GamesView) so the app is never blank; 'tuning' renders GamesView plus
-  // the haptics workspace; 'advancedEdgeSlots' renders ControllersView because the
-  // Edge onboard slots UI currently lives inside it.
+  // Temporary view composition (Tasks 5-9 replace the rest): 'status' renders the
+  // new StatusView; 'tuning' renders GamesView plus the haptics workspace;
+  // 'advancedEdgeSlots' renders ControllersView because the Edge onboard slots UI
+  // currently lives inside it. Views the guard rejects land on 'status'.
   $: showAdvancedControllerView = activeView === 'advancedController' || activeView === 'advancedEdgeSlots';
-  $: showGamesView = activeView === 'status' || activeView === 'tuning' || (!tuningReady && !showAdvancedControllerView);
+  $: showStatusView = activeView === 'status';
+  $: showGamesView = activeView === 'tuning';
   $: showWorkspaceViews =
     showAdvancedControllerView || (tuningReady && (activeView === 'tuning' || activeView === 'advancedButtonMapping'));
   $: steamInputStatus = snapshot?.steamInput;
@@ -2160,6 +2162,26 @@
       onNavigate={navigateToView}
     />
 
+    {#if showStatusView}
+      <StatusView
+        {controllers}
+        {controller}
+        detectedGame={selectedGame}
+        detectedGameName={snapshot.gameDetection.activeGameName ?? null}
+        {activeProfile}
+        {activeProfileName}
+        {overrideActive}
+        {adapter}
+        adapters={snapshot.adapters ?? []}
+        renameActiveId={controllerRenameId}
+        bind:renameName={controllerRenameName}
+        renameBusy={controllerRenameBusy}
+        onBeginRename={beginControllerRename}
+        onSubmitRename={submitControllerRename}
+        onCancelRename={cancelControllerRename}
+        onRenameKeydown={handleControllerRenameKeydown}
+      />
+    {/if}
     {#if showGamesView}
       <GamesView
         {controller}
diff --git a/web/src/lib/features/status/StatusView.svelte b/web/src/lib/features/status/StatusView.svelte
new file mode 100644
index 0000000..bc61dab
--- /dev/null
+++ b/web/src/lib/features/status/StatusView.svelte
@@ -0,0 +1,257 @@
+<script lang="ts">
+  import type {
+    AdapterStatus,
+    ControllerStatus,
+    ProfileSummary,
+    SupportedGame
+  } from '../../types';
+
+  let {
+    controllers = [],
+    controller = undefined,
+    detectedGame = null,
+    detectedGameName = null,
+    activeProfile = undefined,
+    activeProfileName = 'None',
+    overrideActive = false,
+    adapter = undefined,
+    adapters = [],
+    renameActiveId = '',
+    renameName = $bindable(''),
+    renameBusy = false,
+    onBeginRename = () => {},
+    onSubmitRename = () => {},
+    onCancelRename = () => {},
+    onRenameKeydown = () => {}
+  }: {
+    controllers?: ControllerStatus[];
+    controller?: ControllerStatus | undefined;
+    detectedGame?: SupportedGame | null;
+    detectedGameName?: string | null;
+    activeProfile?: ProfileSummary | undefined;
+    activeProfileName?: string;
+    overrideActive?: boolean;
+    adapter?: AdapterStatus | undefined;
+    adapters?: AdapterStatus[];
+    renameActiveId?: string;
+    renameName?: string;
+    renameBusy?: boolean;
+    onBeginRename?: (item: ControllerStatus) => void;
+    onSubmitRename?: () => void | Promise<void>;
+    onCancelRename?: () => void;
+    onRenameKeydown?: (event: KeyboardEvent) => void;
+  } = $props();
+
+  type Finding = { text: string; detail?: string };
+
+  const connectedControllers = $derived(controllers.filter((item) => item.connected));
+  const hasController = $derived(connectedControllers.length > 0);
+  const alias = $derived(controller?.name || controller?.family || 'your controller');
+  const gameName = $derived(detectedGameName ?? detectedGame?.name ?? null);
+  const gameRunning = $derived(Boolean(detectedGame?.running && gameName));
+  const telemetryExpected = $derived(gameRunning && detectedGame?.supportLevel === 'telemetry');
+  const telemetryFresh = $derived(
+    Boolean(adapter && adapter.state === 'running' && adapter.packetRateHz > 0)
+  );
+
+  const findings = $derived.by(() => {
+    const list: Finding[] = [];
+    for (const item of controllers) {
+      if (!item.connected) {
+        list.push({
+          text: `${item.name || item.family} is disconnected.`,
+          detail: 'Reconnect it and its tuned feel comes right back.'
+        });
+      }
+    }
+    if (telemetryExpected && !telemetryFresh) {
+      list.push({
+        text: `${gameName} is running, but its telemetry has gone quiet.`,
+        detail: adapter?.setupHint || 'Check the game’s Data Out setting if the feel stops.'
+      });
+    }
+    for (const item of adapters) {
+      if (item.state === 'faulted') {
+        list.push({
+          text: `${item.name} is blocked — another app may be using its port.`,
+          detail: item.setupHint || undefined
+        });
+      }
+    }
+    return list;
+  });
+
+  const dotState = $derived(!hasController ? 'danger' : findings.length ? 'warn' : 'ok');
+  const headline = $derived(
+    !hasController
+      ? 'No controller connected yet.'
+      : findings.length
+        ? 'Something needs your attention.'
+        : 'Everything is working.'
+  );
+  const clause = $derived.by(() => {
+    if (!hasController) return 'Plug in or pair a controller and DSCC takes it from there.';
+    if (gameRunning && telemetryExpected && !telemetryFresh) {
+      return `${gameName} detected, but its telemetry is quiet on ${alias}.`;
+    }
+    if (gameRunning) return `${gameName} detected — tuned feel is live on ${alias}.`;
+    return `${alias} is connected and ready. Tuned feel starts when a supported game does.`;
+  });
+
+  const profileScopeNote = $derived.by(() => {
+    if (!activeProfile) return '';
+    if (activeProfile.scope === 'Game') return 'its Game Profile';
+    if (activeProfile.scope === 'Global') return 'Everyday · Global Profile';
+    return 'built-in';
+  });
+
+  const connectionLine = (item: ControllerStatus): string => {
+    const parts: string[] = [];
+    if (item.connected && item.transport !== 'Unknown') parts.push(item.transport);
+    if (typeof item.battery === 'number' && item.batteryState !== 'unknown') {
+      if (item.batteryState === 'charging') parts.push(`battery ${item.battery}%, charging`);
+      else if (item.batteryState === 'full') parts.push(`battery ${item.battery}%, full`);
+      else parts.push(`battery ${item.battery}%`);
+    }
+    return parts.join(' · ');
+  };
+</script>
+
+<section class="status-view" aria-label="Status">
+  <h1 class="visually-hidden">Status</h1>
+
+  <div class="status-sentence">
+    <span class="status-dot {dotState}" aria-hidden="true"></span>
+    <span class="status-headline">{headline}</span>
+    <span class="status-clause">{clause}</span>
+  </div>
+
+  <div class="status-groups">
+    <div class="status-group">
+      <div class="lbl">Controller</div>
+      {#if controllers.length}
+        <div class="status-surf">
+          {#each controllers as item (item.id)}
+            <div class="status-controller-card">
+              <div class="status-controller-icon" aria-hidden="true">🎮</div>
+              <div class="status-controller-main">
+                {#if renameActiveId === item.id}
+                  <div class="status-rename">
+                    <!-- svelte-ignore a11y_autofocus -->
+                    <input
+                      type="text"
+                      aria-label="Controller name"
+                      bind:value={renameName}
+                      onkeydown={onRenameKeydown}
+                      disabled={renameBusy}
+                      autofocus
+                    />
+                    <button
+                      class="status-link"
+                      type="button"
+                      disabled={renameBusy}
+                      onclick={() => void onSubmitRename()}
+                    >Save</button>
+                    <button
+                      class="status-link mut"
+                      type="button"
+                      disabled={renameBusy}
+                      onclick={onCancelRename}
+                    >Cancel</button>
+                  </div>
+                {:else}
+                  <div class="status-controller-name">
+                    {item.name || item.family}
+                    <span class="status-mut">&middot; {item.family}</span>
+                  </div>
+                {/if}
+                <div class="status-controller-line">
+                  {#if item.connected}
+                    <span class="status-ok">&#9679; Connected</span>
+                  {:else}
+                    <span class="status-warn">&#9679; Disconnected</span>
+                  {/if}
+                  {#if connectionLine(item)}
+                    &middot; {connectionLine(item)}
+                  {/if}
+                </div>
+              </div>
+              {#if renameActiveId !== item.id}
+                <button
+                  class="status-link"
+                  type="button"
+                  disabled={renameBusy}
+                  onclick={() => onBeginRename(item)}
+                >Rename</button>
+              {/if}
+            </div>
+          {/each}
+        </div>
+        <div class="status-hint">Another controller? Plug it in or pair it and it appears here.</div>
+      {:else}
+        <div class="status-surf status-empty">Plug in or pair a controller and it appears here.</div>
+      {/if}
+    </div>
+
+    <div class="status-group">
+      <div class="lbl">What's active, and why</div>
+      <div class="status-rows">
+        <div class="status-row">
+          <span>Game detected</span>
+          {#if gameRunning}
+            <span>{gameName} <span class="status-ok">&#9679;</span></span>
+          {:else if gameName}
+            <span>{gameName} <span class="status-mut">(installed, not running)</span></span>
+          {:else}
+            <span class="status-mut">None yet</span>
+          {/if}
+        </div>
+        <div class="status-row">
+          <span>Profile in use</span>
+          <span class="status-strong">
+            {activeProfileName}
+            {#if profileScopeNote}
+              <span class="status-mut">({profileScopeNote})</span>
+            {/if}
+            {#if overrideActive}
+              <span class="status-mut">&middot; chosen by you</span>
+            {/if}
+          </span>
+        </div>
+        <div class="status-row">
+          <span>Telemetry</span>
+          {#if telemetryExpected && telemetryFresh}
+            <span class="status-ok">Fresh &middot; driving feel is live</span>
+          {:else if telemetryExpected}
+            <span class="status-warn">Quiet &middot; waiting for game data</span>
+          {:else}
+            <span class="status-mut">Idle until a supported game runs</span>
+          {/if}
+        </div>
+        <div class="status-row">
+          <span>When the game closes</span>
+          <span class="status-mut">Back to Global Profile</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="status-group narrow">
+      <div class="lbl">Needs attention</div>
+      <div class="status-surf">
+        {#if findings.length}
+          {#each findings as finding (finding.text)}
+            <div class="status-finding">
+              <span class="status-warn">&#9679;</span> {finding.text}
+              {#if finding.detail}
+                <div class="status-finding-detail">{finding.detail}</div>
+              {/if}
+            </div>
+          {/each}
+        {:else}
+          <div class="status-finding">Nothing else needs you.</div>
+          <div class="status-finding-detail">This box stays empty when all is well.</div>
+        {/if}
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/web/src/styles/app.css b/web/src/styles/app.css
index 5504005..a51de4f 100644
--- a/web/src/styles/app.css
+++ b/web/src/styles/app.css
@@ -2,6 +2,7 @@
 @import "./tokens.css";
 @import "./base.css";
 @import "./shell-v2.css";
+@import "./status.css";
 @import "./games.css";
 @import "./controllers.css";
 @import "./games-catalog.css";
diff --git a/web/src/styles/status.css b/web/src/styles/status.css
new file mode 100644
index 0000000..8088646
--- /dev/null
+++ b/web/src/styles/status.css
@@ -0,0 +1,239 @@
+/* Status — the glanceable page (layout truth: status-advanced-v2-psblue mockup).
+   Groups are intrinsic-width flex children that wrap; boxes only where content
+   needs a bounded field. */
+
+/* Shared 10px caps label treatment used by Status (and later canvases). */
+.lbl {
+  font-size: 10px;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.status-view {
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--ink);
+}
+
+/* Sentence of truth */
+.status-sentence {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px 10px;
+}
+
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.status-dot.ok { background: var(--ok); }
+.status-dot.warn { background: var(--warn); }
+.status-dot.danger { background: var(--danger); }
+
+.status-headline {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.status-clause {
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+
+/* Groups row — intrinsic widths, wraps naturally, no stretched hero cards */
+.status-groups {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 16px 22px;
+  margin-top: 16px;
+}
+
+.status-group {
+  flex: 1 1 280px;
+  min-width: 260px;
+  max-width: 420px;
+}
+
+.status-group.narrow {
+  flex: 1 1 240px;
+  min-width: 230px;
+  max-width: 360px;
+}
+
+.status-surf {
+  margin-top: 6px;
+  padding: 12px 14px;
+  background: var(--surface);
+  border-radius: var(--radius-m);
+}
+
+.status-empty {
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+/* Controller block */
+.status-controller-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.status-controller-card + .status-controller-card {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid var(--hairline);
+}
+
+.status-controller-icon {
+  width: 46px;
+  height: 34px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  border-radius: var(--radius-m);
+  background: var(--surface-raised);
+}
+
+.status-controller-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.status-controller-name {
+  font-weight: 600;
+}
+
+.status-controller-name .status-mut {
+  font-weight: 400;
+}
+
+.status-controller-line {
+  margin-top: 2px;
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+.status-hint {
+  margin-top: 8px;
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+.status-rename {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.status-rename input {
+  flex: 1;
+  min-width: 0;
+  font: inherit;
+  color: var(--ink);
+  background: var(--surface-raised);
+  border: 1px solid var(--hairline-strong);
+  border-radius: var(--radius-s);
+  padding: 3px 8px;
+}
+
+.status-rename input:focus-visible {
+  outline: 2px solid var(--accent-bright);
+  outline-offset: 1px;
+}
+
+.status-link {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--accent-text);
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+.status-link.mut {
+  color: var(--ink-muted);
+}
+
+.status-link:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.status-link:focus-visible {
+  outline: 2px solid var(--accent-bright);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* What's active rows */
+.status-rows {
+  margin-top: 6px;
+}
+
+.status-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 12px;
+  padding: 6px 0;
+  font-size: 11px;
+  border-bottom: 1px solid var(--hairline);
+}
+
+.status-row:last-child {
+  border-bottom: 0;
+}
+
+.status-row > span:last-child {
+  text-align: right;
+}
+
+.status-strong {
+  font-weight: 600;
+}
+
+.status-strong .status-mut {
+  font-weight: 400;
+}
+
+/* Needs attention */
+.status-finding {
+  font-size: 11px;
+}
+
+.status-finding + .status-finding {
+  margin-top: 8px;
+}
+
+.status-finding-detail {
+  margin-top: 4px;
+  font-size: 10px;
+  color: var(--ink-muted);
+}
+
+.status-ok { color: var(--ok); }
+.status-warn { color: var(--warn); }
+.status-mut { color: var(--ink-muted); }

From 20c52e1e551923c902f5b7f10286c686bfdbb0e0 Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 19:39:19 -0500
Subject: [PATCH 08/23] ui-rework: stable finding keys and aria-hidden
 decorative dots on Status

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/lib/features/status/StatusView.svelte | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/web/src/lib/features/status/StatusView.svelte b/web/src/lib/features/status/StatusView.svelte
index bc61dab..b9f23c3 100644
--- a/web/src/lib/features/status/StatusView.svelte
+++ b/web/src/lib/features/status/StatusView.svelte
@@ -42,7 +42,7 @@
     onRenameKeydown?: (event: KeyboardEvent) => void;
   } = $props();
 
-  type Finding = { text: string; detail?: string };
+  type Finding = { id: string; text: string; detail?: string };
 
   const connectedControllers = $derived(controllers.filter((item) => item.connected));
   const hasController = $derived(connectedControllers.length > 0);
@@ -59,6 +59,7 @@
     for (const item of controllers) {
       if (!item.connected) {
         list.push({
+          id: `controller-disconnected-${item.id}`,
           text: `${item.name || item.family} is disconnected.`,
           detail: 'Reconnect it and its tuned feel comes right back.'
         });
@@ -66,13 +67,15 @@
     }
     if (telemetryExpected && !telemetryFresh) {
       list.push({
+        id: 'telemetry-quiet',
         text: `${gameName} is running, but its telemetry has gone quiet.`,
-        detail: adapter?.setupHint || 'Check the game’s Data Out setting if the feel stops.'
+        detail: adapter?.setupHint || 'Check the game\'s Data Out setting if the feel stops.'
       });
     }
     for (const item of adapters) {
       if (item.state === 'faulted') {
         list.push({
+          id: `adapter-faulted-${item.id}`,
           text: `${item.name} is blocked — another app may be using its port.`,
           detail: item.setupHint || undefined
         });
@@ -167,9 +170,9 @@
                 {/if}
                 <div class="status-controller-line">
                   {#if item.connected}
-                    <span class="status-ok">&#9679; Connected</span>
+                    <span class="status-ok"><span aria-hidden="true">&#9679;</span> Connected</span>
                   {:else}
-                    <span class="status-warn">&#9679; Disconnected</span>
+                    <span class="status-warn"><span aria-hidden="true">&#9679;</span> Disconnected</span>
                   {/if}
                   {#if connectionLine(item)}
                     &middot; {connectionLine(item)}
@@ -199,7 +202,7 @@
         <div class="status-row">
           <span>Game detected</span>
           {#if gameRunning}
-            <span>{gameName} <span class="status-ok">&#9679;</span></span>
+            <span>{gameName} <span class="status-ok" aria-hidden="true">&#9679;</span></span>
           {:else if gameName}
             <span>{gameName} <span class="status-mut">(installed, not running)</span></span>
           {:else}
@@ -239,9 +242,9 @@
       <div class="lbl">Needs attention</div>
       <div class="status-surf">
         {#if findings.length}
-          {#each findings as finding (finding.text)}
+          {#each findings as finding (finding.id)}
             <div class="status-finding">
-              <span class="status-warn">&#9679;</span> {finding.text}
+              <span class="status-warn" aria-hidden="true">&#9679;</span> {finding.text}
               {#if finding.detail}
                 <div class="status-finding-detail">{finding.detail}</div>
               {/if}

From 18383b95c8a3974516cf7060f6bd8d40723f63c4 Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 19:55:36 -0500
Subject: [PATCH 09/23] ui-rework: tuning header with game dropdown, profile
 menu, bespoke art band

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/scripts/visual-smoke.mjs                  |  14 +-
 web/src/App.svelte                            | 141 ++---
 .../lib/features/haptics/HapticsAside.svelte  |  68 +--
 .../lib/features/tuning/TuningHeader.svelte   | 492 ++++++++++++++++++
 web/src/lib/features/tuning/gameSelect.ts     | 135 +++++
 web/src/styles/app.css                        |   1 +
 web/src/styles/tuning.css                     | 322 ++++++++++++
 7 files changed, 1002 insertions(+), 171 deletions(-)
 create mode 100644 web/src/lib/features/tuning/TuningHeader.svelte
 create mode 100644 web/src/lib/features/tuning/gameSelect.ts
 create mode 100644 web/src/styles/tuning.css

diff --git a/web/scripts/visual-smoke.mjs b/web/scripts/visual-smoke.mjs
index a526267..76e189c 100644
--- a/web/scripts/visual-smoke.mjs
+++ b/web/scripts/visual-smoke.mjs
@@ -119,10 +119,14 @@ async function main() {
 
       for (const check of routeChecks) {
         if (check.hash === '#/advanced/button-mapping') {
-          // Button mapping is guarded behind a game scope; pick the mock game
-          // (option 0 is the Global Profile) so the route does not bounce.
-          await page.selectOption('select[aria-label="Tuning scope"]', { index: 1 });
+          // Button mapping is guarded behind a game scope; pick the mock
+          // running game from the Tuning header's game dropdown so the route
+          // does not bounce.
+          await page.goto(`${baseUrl}/#/tuning`, { waitUntil: 'domcontentloaded' });
           await page.waitForTimeout(300);
+          await page.click('.tuning-header-game');
+          await page.click('.tuning-menu .tuning-menu-item:has(.tuning-running-dot)');
+          await page.waitForTimeout(500);
         }
         await page.goto(`${baseUrl}/${check.hash}`, { waitUntil: 'domcontentloaded' });
         await page.waitForTimeout(300);
@@ -132,8 +136,8 @@ async function main() {
         if (!check.pattern.test(snapshot.text)) failures.push(`${label}: expected route text was missing`);
         if (!snapshot.canReachBottom) failures.push(`${label}: page content could not scroll to the bottom`);
         if (snapshot.scrollWidth > snapshot.clientWidth + 2) failures.push(`${label}: horizontal overflow ${snapshot.scrollWidth - snapshot.clientWidth}px`);
-        if (check.hash === '#/advanced/button-mapping' && !/Default mirror only|No writable|read-only|Global Profile/i.test(snapshot.text)) {
-          failures.push(`${label}: read-only/default-mirror mapping copy was missing`);
+        if (check.hash === '#/advanced/button-mapping' && !/Default mirror only|No writable|read-only|inputs mapped/i.test(snapshot.text)) {
+          failures.push(`${label}: mapping session copy (read-only or live layout) was missing`);
         }
       }
 
diff --git a/web/src/App.svelte b/web/src/App.svelte
index bfa9c06..d5aa119 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -3,8 +3,8 @@
   import { onMount } from 'svelte';
   import AppSidebar from './components/AppSidebar.svelte';
   import AddGameDialog from './lib/features/games/AddGameDialog.svelte';
-  import GamesView from './lib/features/games/GamesView.svelte';
   import StatusView from './lib/features/status/StatusView.svelte';
+  import TuningHeader from './lib/features/tuning/TuningHeader.svelte';
   import OnboardingTutorial from './components/OnboardingTutorial.svelte';
   import SupportPanel from './components/SupportPanel.svelte';
   import ToastStack from './components/ToastStack.svelte';
@@ -162,13 +162,6 @@
     forzaTuningFromConfig,
     type ForzaTuningValues
   } from './app/forzaEffectState';
-  import {
-    gameAccentColor,
-    gameArtwork,
-    gameMediaDetails,
-    gameTileStatus,
-    profileScopeCount as countProfilesForGame
-  } from './lib/features/games/gamePresentation';
   import {
     defaultProfileIdForGame,
     usesForzaRuntimeProfile
@@ -498,13 +491,13 @@
   $: activeProfileHeaderName = profileWorkspace.activeProfileHeaderName;
   $: activeProfileHeaderMeta = profileWorkspace.activeProfileHeaderMeta;
   $: buttonMappingActive = activeView === 'advancedButtonMapping';
-  // Temporary view composition (Tasks 5-9 replace the rest): 'status' renders the
-  // new StatusView; 'tuning' renders GamesView plus the haptics workspace;
+  // Temporary view composition (Tasks 6-9 replace the rest): 'status' renders the
+  // new StatusView; 'tuning' renders the TuningHeader plus the haptics workspace;
   // 'advancedEdgeSlots' renders ControllersView because the Edge onboard slots UI
   // currently lives inside it. Views the guard rejects land on 'status'.
   $: showAdvancedControllerView = activeView === 'advancedController' || activeView === 'advancedEdgeSlots';
   $: showStatusView = activeView === 'status';
-  $: showGamesView = activeView === 'tuning';
+  $: showTuningView = activeView === 'tuning';
   $: showWorkspaceViews =
     showAdvancedControllerView || (tuningReady && (activeView === 'tuning' || activeView === 'advancedButtonMapping'));
   $: steamInputStatus = snapshot?.steamInput;
@@ -764,8 +757,6 @@
     stopTriggerInputPolling();
   };
 
-  const profileScopeCount = (game: SupportedGame) => countProfilesForGame(game, profiles);
-
   const openAddGameDialog = async () => {
     addGameOpen = true;
     addGameError = '';
@@ -2032,8 +2023,8 @@
       <button class="solid-action compact" type="button" onclick={refresh}>Retry</button>
     </section>
   {:else if snapshot}
-    <!-- TEMPORARY toolbar: the controller/scope/profile context the old ribbon
-         carried. Task 4 re-houses it on Status; Task 5 in the Tuning header. -->
+    <!-- TEMPORARY toolbar: leftover ribbon context. Scope + profile pickers now
+         live in the Tuning header; the rest moves in Tasks 9-10. -->
     <section class="app-toolbar" aria-label="Controller, scope, and profile context">
       <label class="app-toolbar-field">
         <span>Target Controller</span>
@@ -2055,43 +2046,6 @@
           {/each}
         </select>
       </label>
-      <label class="app-toolbar-field">
-        <span>Scope</span>
-        <select
-          aria-label="Tuning scope"
-          value={selectedTuningScope === 'game' ? selectedTuningGameId : '__global__'}
-          onchange={(event) => {
-            const picked = event.currentTarget.value;
-            if (picked === '__global__') {
-              if (selectedTuningScope !== 'global') void selectGlobalTuning();
-            } else {
-              const game = discoveredGames.find((item) => item.gameId === picked);
-              if (game) void selectTuningGame(game);
-            }
-          }}
-        >
-          <option value="__global__">Global Profile</option>
-          {#each discoveredGames as game (game.gameId)}
-            <option value={game.gameId}>{game.name}</option>
-          {/each}
-        </select>
-      </label>
-      <label class="app-toolbar-field">
-        <span>Live Profile</span>
-        <select
-          aria-label="Live profile"
-          disabled={!profileContextProfiles.length}
-          value={selectedOverrideProfileId || activeProfileId}
-          onchange={(event) => {
-            const picked = event.currentTarget.value;
-            if (picked && picked !== (selectedOverrideProfileId || activeProfileId)) void selectProfileForScope(picked);
-          }}
-        >
-          {#each profileContextProfiles as profile (profile.id)}
-            <option value={profile.id}>{profile.name}</option>
-          {/each}
-        </select>
-      </label>
       <label class="app-toolbar-field">
         <span>Web UI Location</span>
         <select
@@ -2182,27 +2136,46 @@
         onRenameKeydown={handleControllerRenameKeydown}
       />
     {/if}
-    {#if showGamesView}
-      <GamesView
-        {controller}
-        {connectedControllers}
-        {selectedTuningScope}
-        {selectedTuningGameId}
-        {globalProfilePreview}
-        {profileTargetsAllConnected}
-        {profileTargetControllerIds}
+    {#if showTuningView}
+      <TuningHeader
+        scope={selectedTuningScope}
+        selectedGame={selectedTuningGame}
         {discoveredGames}
-        {detectionSignalText}
-        {gameArtwork}
-        {gameMediaDetails}
-        {profileScopeCount}
-        {gameAccentColor}
-        {gameTileStatus}
+        adapterRunning={adapter?.state === 'running'}
+        packetRateHz={telemetryPacketRate}
+        {controller}
+        profiles={profileContextProfiles}
+        {activeProfileId}
+        {selectedOverrideProfileId}
+        {selectedActionProfile}
+        {canRenameSelectedProfile}
+        {canDeleteSelectedProfile}
+        {profileConfigDirty}
+        {profileSaveBusy}
+        {profileFileBusy}
+        {profileSaveAsBusy}
+        {profileRenameBusy}
+        saveAsOpen={saveAsProfileOpen}
+        bind:saveAsName={saveAsProfileName}
+        {renameProfileId}
+        bind:renameName={renameProfileName}
         onSelectGlobal={selectGlobalTuning}
         onSelectGame={selectTuningGame}
         onOpenAddGame={openAddGameDialog}
-        onPickAllControllers={pickAllControllers}
-        onPickControllerTarget={pickControllerTarget}
+        onSelectProfile={selectProfileForScope}
+        onSaveProfile={saveActiveProfile}
+        onBeginSaveAs={beginSaveAsProfile}
+        onCancelSaveAs={cancelSaveAsProfile}
+        onSubmitSaveAs={submitSaveAsProfile}
+        onSaveAsKeydown={handleSaveAsProfileKeydown}
+        onBeginRename={beginRenameSelectedProfile}
+        onCancelRename={cancelRenameProfile}
+        onSubmitRename={submitRenameProfile}
+        onRenameKeydown={handleRenameProfileKeydown}
+        onDeleteProfile={(profile) => void deleteProfileById(profile.id, profile.name)}
+        onRestoreDefaults={restoreDefaults}
+        onImportFile={handleProfileImport}
+        onExportProfile={exportSelectedProfile}
       />
     {/if}
     {#if showWorkspaceViews}
@@ -2351,36 +2324,6 @@
         {setLightbarEnabled}
         {previewLightbar}
         {previewRpmColor}
-        {profileContextProfiles}
-        {activeProfileId}
-        {selectedOverrideProfileId}
-        {selectedActionProfile}
-        selectedGameName={steamContextGame?.name ?? 'game'}
-        {canRenameSelectedProfile}
-        {canDeleteSelectedProfile}
-        {profileConfigDirty}
-        {profileSaveBusy}
-        {profileFileBusy}
-        {profileSaveAsBusy}
-        {profileRenameBusy}
-        {saveAsProfileOpen}
-        bind:saveAsProfileName
-        {renameProfileId}
-        bind:renameProfileName
-        onSelectProfile={selectProfileForScope}
-        onImportFile={handleProfileImport}
-        onExportProfile={exportSelectedProfile}
-        onBeginSaveAs={beginSaveAsProfile}
-        onCancelSaveAs={cancelSaveAsProfile}
-        onSubmitSaveAs={submitSaveAsProfile}
-        onSaveAsKeydown={handleSaveAsProfileKeydown}
-        onBeginRename={beginRenameSelectedProfile}
-        onCancelRename={cancelRenameProfile}
-        onSubmitRename={submitRenameProfile}
-        onRenameKeydown={handleRenameProfileKeydown}
-        onDeleteProfile={(profile) => void deleteProfileById(profile.id, profile.name)}
-        onRestoreDefaults={restoreDefaults}
-        onSaveProfile={saveActiveProfile}
       />
       </HapticsView>
       {/if}
diff --git a/web/src/lib/features/haptics/HapticsAside.svelte b/web/src/lib/features/haptics/HapticsAside.svelte
index 0b246ba..305f3a0 100644
--- a/web/src/lib/features/haptics/HapticsAside.svelte
+++ b/web/src/lib/features/haptics/HapticsAside.svelte
@@ -2,7 +2,6 @@
   import GlobalFeelPanel from './GlobalFeelPanel.svelte';
   import LightbarControls from './LightbarControls.svelte';
   import TelemetryRoutingPanel from './TelemetryRoutingPanel.svelte';
-  import ProfileConsole from '../profiles/ProfileConsole.svelte';
   import type {
     AppSnapshot,
     ForzaAbsTuningConfiguration,
@@ -12,8 +11,7 @@
     ForzaEffectRoute,
     ForzaRevLimiterTuningConfiguration,
     ForzaShiftTuningConfiguration,
-    ForzaThrottleTuningConfiguration,
-    ProfileSummary
+    ForzaThrottleTuningConfiguration
   } from '../../types';
   import type { ForzaEffectMeta, LightbarColorTarget } from './hapticsModel';
 
@@ -161,37 +159,6 @@
   export let setLightbarEnabled: (enabled: boolean) => void = noop as (enabled: boolean) => void;
   export let previewLightbar: () => Promise<void> | void = noop;
   export let previewRpmColor: () => Promise<void> | void = noop;
-
-  export let profileContextProfiles: ProfileSummary[] = [];
-  export let activeProfileId = '';
-  export let selectedOverrideProfileId = '';
-  export let selectedActionProfile: ProfileSummary | null | undefined = null;
-  export let selectedGameName = 'game';
-  export let canRenameSelectedProfile = false;
-  export let canDeleteSelectedProfile = false;
-  export let profileConfigDirty = false;
-  export let profileSaveBusy = false;
-  export let profileFileBusy = false;
-  export let profileSaveAsBusy = false;
-  export let profileRenameBusy = false;
-  export let saveAsProfileOpen = false;
-  export let saveAsProfileName = '';
-  export let renameProfileId = '';
-  export let renameProfileName = '';
-  export let onSelectProfile: (profileId: string) => void | Promise<void> = noop as (profileId: string) => void;
-  export let onImportFile: (event: Event) => void | Promise<void> = noop as (event: Event) => void;
-  export let onExportProfile: () => void | Promise<void> = noop;
-  export let onBeginSaveAs: () => void = noop;
-  export let onCancelSaveAs: () => void = noop;
-  export let onSubmitSaveAs: () => void | Promise<void> = noop;
-  export let onSaveAsKeydown: (event: KeyboardEvent) => void = noop as (event: KeyboardEvent) => void;
-  export let onBeginRename: () => void = noop;
-  export let onCancelRename: () => void = noop;
-  export let onSubmitRename: () => void | Promise<void> = noop;
-  export let onRenameKeydown: (event: KeyboardEvent) => void = noop as (event: KeyboardEvent) => void;
-  export let onDeleteProfile: (profile: ProfileSummary) => void | Promise<void> = noop as (profile: ProfileSummary) => void;
-  export let onRestoreDefaults: () => void | Promise<void> = noop;
-  export let onSaveProfile: () => void | Promise<void> = noop;
 </script>
 
 <aside
@@ -261,37 +228,4 @@
     {previewLightbar}
     {previewRpmColor}
   />
-
-  <ProfileConsole
-    {profileContextProfiles}
-    {activeProfileId}
-    {selectedOverrideProfileId}
-    {selectedActionProfile}
-    {selectedGameName}
-    {canRenameSelectedProfile}
-    {canDeleteSelectedProfile}
-    {profileConfigDirty}
-    {profileSaveBusy}
-    {profileFileBusy}
-    {profileSaveAsBusy}
-    {profileRenameBusy}
-    {saveAsProfileOpen}
-    bind:saveAsProfileName
-    {renameProfileId}
-    bind:renameProfileName
-    onSelectProfile={onSelectProfile}
-    onImportFile={onImportFile}
-    onExportProfile={onExportProfile}
-    onBeginSaveAs={onBeginSaveAs}
-    onCancelSaveAs={onCancelSaveAs}
-    onSubmitSaveAs={onSubmitSaveAs}
-    onSaveAsKeydown={onSaveAsKeydown}
-    onBeginRename={onBeginRename}
-    onCancelRename={onCancelRename}
-    onSubmitRename={onSubmitRename}
-    onRenameKeydown={onRenameKeydown}
-    onDeleteProfile={onDeleteProfile}
-    onRestoreDefaults={onRestoreDefaults}
-    onSaveProfile={onSaveProfile}
-  />
 </aside>
diff --git a/web/src/lib/features/tuning/TuningHeader.svelte b/web/src/lib/features/tuning/TuningHeader.svelte
new file mode 100644
index 0000000..5884c9a
--- /dev/null
+++ b/web/src/lib/features/tuning/TuningHeader.svelte
@@ -0,0 +1,492 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import InitialBadge from '../../../components/InitialBadge.svelte';
+  import { gameAccentColor, gameArtwork } from '../games/gamePresentation';
+  import { controllerModelText } from '../../controllerDisplay';
+  import {
+    buildGameSelectModel,
+    telemetryChipState,
+    type GameSelectEntry,
+    type TuningScopeKind
+  } from './gameSelect';
+  import type { ControllerStatus, ProfileSummary, SupportedGame } from '../../types';
+
+  let {
+    scope = 'global',
+    selectedGame = null,
+    discoveredGames = [],
+    adapterRunning = false,
+    packetRateHz = 0,
+    controller = undefined,
+    profiles = [],
+    activeProfileId = '',
+    selectedOverrideProfileId = '',
+    selectedActionProfile = null,
+    canRenameSelectedProfile = false,
+    canDeleteSelectedProfile = false,
+    profileConfigDirty = false,
+    profileSaveBusy = false,
+    profileFileBusy = false,
+    profileSaveAsBusy = false,
+    profileRenameBusy = false,
+    saveAsOpen = false,
+    saveAsName = $bindable(''),
+    renameProfileId = '',
+    renameName = $bindable(''),
+    onSelectGlobal = () => {},
+    onSelectGame = () => {},
+    onOpenAddGame = () => {},
+    onSelectProfile = () => {},
+    onSaveProfile = () => {},
+    onBeginSaveAs = () => {},
+    onCancelSaveAs = () => {},
+    onSubmitSaveAs = () => {},
+    onSaveAsKeydown = () => {},
+    onBeginRename = () => {},
+    onCancelRename = () => {},
+    onSubmitRename = () => {},
+    onRenameKeydown = () => {},
+    onDeleteProfile = () => {},
+    onRestoreDefaults = () => {},
+    onImportFile = () => {},
+    onExportProfile = () => {}
+  }: {
+    scope?: TuningScopeKind;
+    selectedGame?: SupportedGame | null;
+    discoveredGames?: SupportedGame[];
+    adapterRunning?: boolean;
+    packetRateHz?: number;
+    controller?: ControllerStatus | undefined;
+    profiles?: ProfileSummary[];
+    activeProfileId?: string;
+    selectedOverrideProfileId?: string;
+    selectedActionProfile?: ProfileSummary | null;
+    canRenameSelectedProfile?: boolean;
+    canDeleteSelectedProfile?: boolean;
+    profileConfigDirty?: boolean;
+    profileSaveBusy?: boolean;
+    profileFileBusy?: boolean;
+    profileSaveAsBusy?: boolean;
+    profileRenameBusy?: boolean;
+    saveAsOpen?: boolean;
+    saveAsName?: string;
+    renameProfileId?: string;
+    renameName?: string;
+    onSelectGlobal?: () => void | Promise<void>;
+    onSelectGame?: (game: SupportedGame) => void | Promise<void>;
+    onOpenAddGame?: () => void | Promise<void>;
+    onSelectProfile?: (profileId: string) => void | Promise<void>;
+    onSaveProfile?: () => void | Promise<void>;
+    onBeginSaveAs?: () => void;
+    onCancelSaveAs?: () => void;
+    onSubmitSaveAs?: () => void | Promise<void>;
+    onSaveAsKeydown?: (event: KeyboardEvent) => void;
+    onBeginRename?: () => void;
+    onCancelRename?: () => void;
+    onSubmitRename?: () => void | Promise<void>;
+    onRenameKeydown?: (event: KeyboardEvent) => void;
+    onDeleteProfile?: (profile: ProfileSummary) => void | Promise<void>;
+    onRestoreDefaults?: () => void | Promise<void>;
+    onImportFile?: (event: Event) => void | Promise<void>;
+    onExportProfile?: () => void | Promise<void>;
+  } = $props();
+
+  const gameModel = $derived(
+    buildGameSelectModel({
+      games: discoveredGames,
+      scope,
+      selectedGameId: selectedGame?.gameId ?? '',
+      setupGuideGame:
+        scope === 'game' && selectedGame?.supportLevel === 'telemetry' ? selectedGame : null,
+      setupGuideEnabled: false
+    })
+  );
+  const chipState = $derived(
+    telemetryChipState({ scope, selectedGame, adapterRunning, packetRateHz })
+  );
+
+  const heroArt = $derived(scope === 'game' ? gameArtwork(selectedGame, 'hero') : null);
+  const thumbArt = $derived(scope === 'game' ? gameArtwork(selectedGame, 'banner') : null);
+  const selectedProfileId = $derived(selectedOverrideProfileId || activeProfileId);
+  const profileName = $derived(
+    profiles.find((profile) => profile.id === selectedProfileId)?.name ?? 'None'
+  );
+  const controllerAlias = $derived(controllerModelText(controller));
+  const batteryText = $derived(
+    controller?.connected && typeof controller.battery === 'number' && controller.batteryState !== 'unknown'
+      ? `${controller.battery}%`
+      : ''
+  );
+
+  // --- menu state -----------------------------------------------------------
+  type MenuKind = 'game' | 'profile';
+  let openMenu = $state<MenuKind | null>(null);
+  let menuLeft = $state(0);
+  let menuTop = $state(0);
+  let gameTrigger: HTMLButtonElement | undefined = $state();
+  let profileTrigger: HTMLButtonElement | undefined = $state();
+  let menuEl: HTMLDivElement | undefined = $state();
+  let importInput: HTMLInputElement | undefined = $state();
+
+  const triggerFor = (kind: MenuKind) => (kind === 'game' ? gameTrigger : profileTrigger);
+
+  const closeMenu = (returnFocus = true) => {
+    if (!openMenu) return;
+    const trigger = triggerFor(openMenu);
+    openMenu = null;
+    if (returnFocus) trigger?.focus();
+  };
+
+  const openMenuFor = async (kind: MenuKind) => {
+    if (openMenu === kind) {
+      closeMenu();
+      return;
+    }
+    const trigger = triggerFor(kind);
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    menuLeft = Math.max(8, Math.min(rect.left, window.innerWidth - 268));
+    menuTop = Math.min(rect.bottom + 6, window.innerHeight - 60);
+    openMenu = kind;
+    await tick();
+    focusMenuItem(0);
+  };
+
+  const menuItems = (): HTMLButtonElement[] =>
+    menuEl ? Array.from(menuEl.querySelectorAll<HTMLButtonElement>('button.tuning-menu-item:not(:disabled)')) : [];
+
+  const focusMenuItem = (index: number) => {
+    const items = menuItems();
+    if (!items.length) return;
+    const next = ((index % items.length) + items.length) % items.length;
+    items[next]?.focus();
+  };
+
+  const handleMenuKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      closeMenu();
+      return;
+    }
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+    event.preventDefault();
+    const items = menuItems();
+    const current = items.indexOf(document.activeElement as HTMLButtonElement);
+    focusMenuItem(current + (event.key === 'ArrowDown' ? 1 : -1));
+  };
+
+  const handleWindowPointerDown = (event: PointerEvent) => {
+    if (!openMenu) return;
+    const target = event.target as Node;
+    if (menuEl?.contains(target)) return;
+    if (triggerFor(openMenu)?.contains(target)) return;
+    closeMenu(false);
+  };
+
+  const handleWindowKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape' && openMenu) {
+      event.preventDefault();
+      closeMenu();
+    }
+  };
+
+  const pickGameEntry = (entry: GameSelectEntry) => {
+    if (entry.kind === 'setup-guide') return;
+    closeMenu(false);
+    triggerFor('game')?.focus();
+    if (entry.kind === 'everyday') void onSelectGlobal();
+    else if (entry.kind === 'game') void onSelectGame(entry.game);
+    else if (entry.kind === 'add-game') void onOpenAddGame();
+  };
+
+  const pickProfile = (profileId: string) => {
+    closeMenu();
+    if (profileId !== selectedProfileId) void onSelectProfile(profileId);
+  };
+
+  const runProfileAction = (action: () => void | Promise<void>) => {
+    closeMenu();
+    void action();
+  };
+
+  const requestImport = () => {
+    closeMenu();
+    if (!profileFileBusy) importInput?.click();
+  };
+
+  const deleteSelectedProfile = () => {
+    const profile = selectedActionProfile;
+    if (profile) runProfileAction(() => onDeleteProfile(profile));
+  };
+</script>
+
+<svelte:window onpointerdown={handleWindowPointerDown} onkeydown={handleWindowKeydown} />
+
+<header
+  class="tuning-header"
+  class:has-art={Boolean(heroArt)}
+  style={heroArt ? `background-image: url("${heroArt}")` : ''}
+>
+  {#if heroArt}
+    <div class="tuning-header-scrim" aria-hidden="true"></div>
+  {/if}
+  <div class="tuning-header-content">
+    <div class="tuning-header-identity">
+      {#if scope === 'game' && selectedGame}
+        <span class="tuning-header-thumb" aria-hidden="true">
+          {#if thumbArt}
+            <img src={thumbArt} alt="" loading="lazy" />
+          {:else}
+            <InitialBadge label={selectedGame.name} accent={gameAccentColor(selectedGame)} size={48} />
+          {/if}
+        </span>
+      {/if}
+      <div class="tuning-header-titles">
+        <div class="tuning-header-title-row">
+          <button
+            class="tuning-header-game"
+            type="button"
+            bind:this={gameTrigger}
+            aria-haspopup="menu"
+            aria-expanded={openMenu === 'game'}
+            onclick={() => void openMenuFor('game')}
+          >
+            <strong>{gameModel.title}</strong>
+            <span class="tuning-caret" aria-hidden="true">▾</span>
+          </button>
+          {#if chipState}
+            <span
+              class="tuning-telemetry-chip"
+              class:fresh={chipState === 'fresh'}
+              class:quiet={chipState === 'quiet'}
+              title={chipState === 'fresh'
+                ? 'Game data is arriving — the driving feel is live.'
+                : 'The game is running but its data feed is silent. The setup guide can help.'}
+            >
+              ● {chipState === 'fresh' ? 'Telemetry Fresh' : 'Telemetry Quiet'}
+            </span>
+          {/if}
+        </div>
+        <div class="tuning-header-profile-row">
+          <button
+            class="tuning-header-profile"
+            type="button"
+            bind:this={profileTrigger}
+            aria-haspopup="menu"
+            aria-expanded={openMenu === 'profile'}
+            disabled={!profiles.length}
+            onclick={() => void openMenuFor('profile')}
+          >
+            <span class="tuning-profile-label">Profile:</span>
+            <strong>{profileName}</strong>
+            <span class="tuning-caret" aria-hidden="true">▾</span>
+          </button>
+          {#if profileConfigDirty}
+            <span class="tuning-unsaved-note">· unsaved changes</span>
+          {/if}
+        </div>
+      </div>
+    </div>
+    <div class="tuning-header-controller">
+      <span class="tuning-controller-alias">{controllerAlias}</span>
+      {#if controller?.connected}
+        <span class="tuning-controller-dot" aria-hidden="true">●</span>
+      {/if}
+      {#if batteryText}
+        <span class="tuning-controller-battery">{batteryText}</span>
+      {/if}
+    </div>
+  </div>
+</header>
+
+{#if saveAsOpen || renameProfileId}
+  <div class="tuning-profile-editor">
+    {#if saveAsOpen}
+      <label>
+        <span>New profile name</span>
+        <input
+          bind:value={saveAsName}
+          disabled={profileSaveAsBusy}
+          maxlength="80"
+          spellcheck="false"
+          aria-label="New profile name"
+          onkeydown={onSaveAsKeydown}
+        />
+      </label>
+      <button class="dm-mini-button" type="button" disabled={profileSaveAsBusy} onclick={onCancelSaveAs}>Cancel</button>
+      <button
+        class="dm-mini-button primary"
+        type="button"
+        disabled={profileSaveAsBusy || !saveAsName.trim()}
+        onclick={() => void onSubmitSaveAs()}
+      >{profileSaveAsBusy ? 'Saving' : 'Create'}</button>
+    {:else}
+      <label>
+        <span>Profile name</span>
+        <input
+          bind:value={renameName}
+          disabled={profileRenameBusy}
+          maxlength="80"
+          spellcheck="false"
+          aria-label="Profile name"
+          onkeydown={onRenameKeydown}
+        />
+      </label>
+      <button class="dm-mini-button" type="button" disabled={profileRenameBusy} onclick={onCancelRename}>Cancel</button>
+      <button
+        class="dm-mini-button primary"
+        type="button"
+        disabled={profileRenameBusy || !renameName.trim()}
+        onclick={() => void onSubmitRename()}
+      >{profileRenameBusy ? 'Saving' : 'Apply'}</button>
+    {/if}
+  </div>
+{/if}
+
+{#if openMenu === 'game'}
+  <div
+    class="tuning-menu"
+    role="menu"
+    tabindex="-1"
+    aria-label="Pick a game to tune"
+    bind:this={menuEl}
+    style={`left:${menuLeft}px;top:${menuTop}px;`}
+    onkeydown={handleMenuKeydown}
+  >
+    {#each gameModel.groups as group (group.id)}
+      {#if group.id === 'actions'}
+        <div class="tuning-menu-divider" role="separator"></div>
+      {:else if group.label}
+        <div class="tuning-menu-label">{group.label}</div>
+      {/if}
+      {#each group.entries as entry (entry.id)}
+        {#if entry.kind === 'game'}
+          <button
+            class="tuning-menu-item"
+            class:current={entry.current}
+            type="button"
+            role="menuitem"
+            onclick={() => pickGameEntry(entry)}
+          >
+            <span class="tuning-menu-item-text">{#if entry.running}<span class="tuning-running-dot" aria-hidden="true">●</span>{/if}{entry.label}</span>
+            {#if entry.running}<span class="tuning-menu-item-meta">detected</span>
+            {:else if entry.current}<span class="tuning-menu-item-meta">current</span>{/if}
+          </button>
+        {:else if entry.kind === 'everyday'}
+          <button
+            class="tuning-menu-item"
+            class:current={entry.current}
+            type="button"
+            role="menuitem"
+            onclick={() => pickGameEntry(entry)}
+          >
+            <span class="tuning-menu-item-text">{entry.label}</span>
+            <span class="tuning-menu-item-meta">{entry.detail}</span>
+          </button>
+        {:else if entry.kind === 'setup-guide'}
+          <button
+            class="tuning-menu-item accent"
+            type="button"
+            role="menuitem"
+            disabled={!entry.enabled}
+            title="The setup walkthrough opens here in an upcoming update."
+          >
+            <span class="tuning-menu-item-text">{entry.label}</span>
+          </button>
+        {:else}
+          <button class="tuning-menu-item accent" type="button" role="menuitem" onclick={() => pickGameEntry(entry)}>
+            <span class="tuning-menu-item-text">{entry.label}</span>
+          </button>
+        {/if}
+      {/each}
+    {/each}
+  </div>
+{/if}
+
+{#if openMenu === 'profile'}
+  <div
+    class="tuning-menu"
+    role="menu"
+    tabindex="-1"
+    aria-label="Profile actions"
+    bind:this={menuEl}
+    style={`left:${menuLeft}px;top:${menuTop}px;`}
+    onkeydown={handleMenuKeydown}
+  >
+    <div class="tuning-menu-label">Profiles</div>
+    {#each profiles as profile (profile.id)}
+      <button
+        class="tuning-menu-item"
+        class:current={profile.id === selectedProfileId}
+        type="button"
+        role="menuitemradio"
+        aria-checked={profile.id === selectedProfileId}
+        onclick={() => pickProfile(profile.id)}
+      >
+        <span class="tuning-menu-item-text">{profile.name}</span>
+        {#if profile.id === activeProfileId}<span class="tuning-menu-item-meta">live</span>{/if}
+      </button>
+    {/each}
+    <div class="tuning-menu-divider" role="separator"></div>
+    <button
+      class="tuning-menu-item"
+      type="button"
+      role="menuitem"
+      disabled={!selectedActionProfile || profileSaveBusy || !profileConfigDirty}
+      onclick={() => runProfileAction(onSaveProfile)}
+    >
+      <span class="tuning-menu-item-text">{profileSaveBusy ? 'Saving…' : 'Save changes'}</span>
+    </button>
+    <button
+      class="tuning-menu-item"
+      type="button"
+      role="menuitem"
+      disabled={!selectedActionProfile || profileSaveAsBusy}
+      onclick={() => runProfileAction(onBeginSaveAs)}
+    >
+      <span class="tuning-menu-item-text">Duplicate as new profile…</span>
+    </button>
+    <button
+      class="tuning-menu-item"
+      type="button"
+      role="menuitem"
+      disabled={!canRenameSelectedProfile || profileRenameBusy}
+      onclick={() => runProfileAction(onBeginRename)}
+    >
+      <span class="tuning-menu-item-text">Rename…</span>
+    </button>
+    <button
+      class="tuning-menu-item"
+      type="button"
+      role="menuitem"
+      disabled={!canDeleteSelectedProfile || profileFileBusy}
+      onclick={deleteSelectedProfile}
+    >
+      <span class="tuning-menu-item-text">Delete</span>
+    </button>
+    <button class="tuning-menu-item" type="button" role="menuitem" onclick={() => runProfileAction(onRestoreDefaults)}>
+      <span class="tuning-menu-item-text">Reset to profile defaults</span>
+    </button>
+    <div class="tuning-menu-divider" role="separator"></div>
+    <button class="tuning-menu-item" type="button" role="menuitem" disabled={profileFileBusy} onclick={requestImport}>
+      <span class="tuning-menu-item-text">Import profile file…</span>
+    </button>
+    <button
+      class="tuning-menu-item"
+      type="button"
+      role="menuitem"
+      disabled={!selectedProfileId || profileFileBusy}
+      onclick={() => runProfileAction(onExportProfile)}
+    >
+      <span class="tuning-menu-item-text">Export profile file</span>
+    </button>
+  </div>
+{/if}
+
+<input
+  bind:this={importInput}
+  class="ops-hidden-file"
+  type="file"
+  accept="application/json,.json,.dscc-profile"
+  onchange={(event) => void onImportFile(event)}
+/>
diff --git a/web/src/lib/features/tuning/gameSelect.ts b/web/src/lib/features/tuning/gameSelect.ts
new file mode 100644
index 0000000..3f894d1
--- /dev/null
+++ b/web/src/lib/features/tuning/gameSelect.ts
@@ -0,0 +1,135 @@
+import type { SupportedGame } from '../../types';
+
+// Pure presentation model for the Tuning header's game dropdown. Builds the
+// grouped menu (Running now / Everyday / Supported games / footer actions)
+// from the discovered games list plus the current selection. No fetching, no
+// component state: types in, types out.
+
+export type TuningScopeKind = 'none' | 'global' | 'game';
+
+export type GameSelectEntry =
+  | { kind: 'game'; id: string; game: SupportedGame; label: string; running: boolean; current: boolean }
+  | { kind: 'everyday'; id: 'everyday'; label: string; detail: string; current: boolean }
+  | { kind: 'setup-guide'; id: 'setup-guide'; label: string; enabled: boolean }
+  | { kind: 'add-game'; id: 'add-game'; label: string };
+
+export type GameSelectGroup = {
+  id: 'running' | 'everyday' | 'supported' | 'actions';
+  label: string | null;
+  entries: GameSelectEntry[];
+};
+
+export type GameSelectModel = {
+  groups: GameSelectGroup[];
+  /** Header title for the closed state of the dropdown. */
+  title: string;
+};
+
+const gameEntry = (game: SupportedGame, options: BuildGameSelectOptions): GameSelectEntry => ({
+  kind: 'game',
+  id: game.gameId,
+  game,
+  label: game.name,
+  running: Boolean(game.running),
+  current: options.scope === 'game' && options.selectedGameId === game.gameId
+});
+
+export type BuildGameSelectOptions = {
+  /** Discovered games, already sorted running > installed > name. */
+  games: SupportedGame[];
+  scope: TuningScopeKind;
+  selectedGameId: string;
+  /**
+   * Game whose setup guide the footer should offer (usually the selected
+   * game when it has telemetry support). Null hides the entry.
+   */
+  setupGuideGame?: SupportedGame | null;
+  /** Whether the setup-guide entry is actionable yet. */
+  setupGuideEnabled?: boolean;
+};
+
+export function buildGameSelectModel(options: BuildGameSelectOptions): GameSelectModel {
+  const games = options.games ?? [];
+  const running = games.filter((game) => game.running);
+  const rest = games.filter((game) => !game.running);
+
+  const groups: GameSelectGroup[] = [];
+
+  if (running.length) {
+    groups.push({
+      id: 'running',
+      label: 'Running now',
+      entries: running.map((game) => gameEntry(game, options))
+    });
+  }
+
+  groups.push({
+    id: 'everyday',
+    label: 'Everyday',
+    entries: [
+      {
+        kind: 'everyday',
+        id: 'everyday',
+        label: 'Everyday (no game)',
+        detail: 'Global Profile',
+        current: options.scope !== 'game'
+      }
+    ]
+  });
+
+  if (rest.length) {
+    groups.push({
+      id: 'supported',
+      label: 'Supported games',
+      entries: rest.map((game) => gameEntry(game, options))
+    });
+  }
+
+  const actions: GameSelectEntry[] = [];
+  if (options.setupGuideGame) {
+    actions.push({
+      kind: 'setup-guide',
+      id: 'setup-guide',
+      label: `Setup guide for ${options.setupGuideGame.name}…`,
+      enabled: Boolean(options.setupGuideEnabled)
+    });
+  }
+  actions.push({ kind: 'add-game', id: 'add-game', label: '+ Add a game manually…' });
+  groups.push({ id: 'actions', label: null, entries: actions });
+
+  return {
+    groups,
+    title: headerTitle(options)
+  };
+}
+
+export function headerTitle(options: {
+  games: SupportedGame[];
+  scope: TuningScopeKind;
+  selectedGameId: string;
+}): string {
+  if (options.scope === 'game' && options.selectedGameId) {
+    const game = (options.games ?? []).find((item) => item.gameId === options.selectedGameId);
+    if (game) return game.name;
+  }
+  return 'Everyday (no game)';
+}
+
+export type TelemetryChipState = 'fresh' | 'quiet' | null;
+
+/**
+ * Telemetry chip state for the header band. Only games with telemetry
+ * support that are actually running get a chip; Fresh means packets are
+ * arriving, Quiet means the game is up but its data feed is silent.
+ */
+export function telemetryChipState(options: {
+  scope: TuningScopeKind;
+  selectedGame: SupportedGame | null;
+  adapterRunning: boolean;
+  packetRateHz: number;
+}): TelemetryChipState {
+  if (options.scope !== 'game') return null;
+  const game = options.selectedGame;
+  if (!game || !game.running || game.supportLevel !== 'telemetry') return null;
+  return options.adapterRunning && options.packetRateHz > 0 ? 'fresh' : 'quiet';
+}
diff --git a/web/src/styles/app.css b/web/src/styles/app.css
index a51de4f..2d05afd 100644
--- a/web/src/styles/app.css
+++ b/web/src/styles/app.css
@@ -3,6 +3,7 @@
 @import "./base.css";
 @import "./shell-v2.css";
 @import "./status.css";
+@import "./tuning.css";
 @import "./games.css";
 @import "./controllers.css";
 @import "./games-catalog.css";
diff --git a/web/src/styles/tuning.css b/web/src/styles/tuning.css
new file mode 100644
index 0000000..bfd385b
--- /dev/null
+++ b/web/src/styles/tuning.css
@@ -0,0 +1,322 @@
+/* Tuning canvas — header band, game dropdown, profile menu (Task 5).
+   Visual register: calm, flat, hairlines, PS-blue accent. */
+
+.tuning-header {
+  position: relative;
+  min-height: 80px;
+  background-color: var(--bg-rail);
+  background-position: center 30%;
+  background-size: cover;
+  border-bottom: 1px solid var(--hairline);
+}
+
+.tuning-header-scrim {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, rgba(20, 20, 23, 0.92) 0%, rgba(20, 20, 23, 0.55) 45%, rgba(20, 20, 23, 0.25) 100%),
+    linear-gradient(0deg, var(--bg) 0%, rgba(20, 20, 23, 0) 60%);
+}
+
+.tuning-header-content {
+  position: relative;
+  min-height: 80px;
+  padding: 12px 16px 10px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 8px 12px;
+  flex-wrap: wrap;
+}
+
+.tuning-header-identity {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.tuning-header-thumb {
+  flex: 0 0 auto;
+  width: 32px;
+  height: 48px;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+.tuning-header-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.tuning-header-titles {
+  min-width: 0;
+}
+
+.tuning-header-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.tuning-header-game {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: 0;
+  padding: 2px 0;
+  color: var(--ink);
+  cursor: pointer;
+  font: inherit;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.tuning-header-game strong {
+  font-size: 15px;
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tuning-caret {
+  color: var(--ink-muted);
+  font-size: 11px;
+  flex: 0 0 auto;
+}
+
+.tuning-header-game:hover .tuning-caret,
+.tuning-header-profile:hover .tuning-caret {
+  color: var(--ink);
+}
+
+.tuning-telemetry-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border-radius: 999px;
+  padding: 3px 10px;
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.tuning-telemetry-chip.fresh {
+  background: var(--ok-tint);
+  color: var(--ok);
+}
+
+.tuning-telemetry-chip.quiet {
+  background: rgba(250, 204, 21, 0.12);
+  color: var(--warn);
+}
+
+.tuning-header-profile-row {
+  margin-top: 2px;
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+}
+
+.tuning-header-profile {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 5px;
+  background: none;
+  border: 0;
+  padding: 0;
+  color: var(--ink-muted);
+  cursor: pointer;
+  font-size: 11px;
+  font-family: inherit;
+  min-width: 0;
+}
+
+.tuning-header-profile:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.tuning-header-profile strong {
+  color: var(--ink);
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tuning-unsaved-note {
+  font-size: 10px;
+  color: var(--accent-text);
+  white-space: nowrap;
+}
+
+.tuning-header-controller {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--ink-muted);
+  white-space: nowrap;
+  flex: 0 0 auto;
+}
+
+.tuning-controller-dot {
+  color: var(--ok);
+  font-size: 9px;
+}
+
+/* --- inline profile name editor (save-as / rename) ------------------------ */
+
+.tuning-profile-editor {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  padding: 10px 16px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--hairline);
+}
+
+.tuning-profile-editor label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  flex: 0 1 280px;
+}
+
+.tuning-profile-editor label span {
+  font-size: 10px;
+  letter-spacing: 0.02em;
+  color: var(--ink-muted);
+}
+
+.tuning-profile-editor input {
+  background: var(--surface-raised);
+  border: 1px solid var(--hairline-strong);
+  border-radius: var(--radius-s);
+  color: var(--ink);
+  font: inherit;
+  font-size: 12px;
+  padding: 6px 8px;
+}
+
+/* --- dropdown menus -------------------------------------------------------- */
+
+.tuning-menu {
+  position: fixed;
+  z-index: var(--z-dropdown);
+  width: 252px;
+  max-height: min(60vh, 420px);
+  overflow-y: auto;
+  background: var(--surface-raised);
+  border: 1px solid var(--hairline-strong);
+  border-radius: var(--radius-l);
+  padding: 6px;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
+}
+
+.tuning-menu-label {
+  font-size: 9px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+  padding: 6px 8px 4px;
+}
+
+.tuning-menu-divider {
+  border-top: 1px solid var(--hairline-strong);
+  margin: 6px 4px;
+}
+
+.tuning-menu-item {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: 0;
+  border-radius: var(--radius-s);
+  padding: 6px 8px;
+  color: var(--ink);
+  font-family: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.tuning-menu-item:hover,
+.tuning-menu-item:focus-visible {
+  background: var(--surface);
+  outline: none;
+}
+
+.tuning-menu-item:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--accent-outline);
+}
+
+.tuning-menu-item:disabled {
+  color: var(--ink-muted);
+  cursor: default;
+  opacity: 0.55;
+}
+
+.tuning-menu-item.current {
+  background: var(--accent-tint);
+  color: var(--accent-text);
+}
+
+.tuning-menu-item.accent {
+  color: var(--accent-text);
+}
+
+.tuning-menu-item-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tuning-menu-item-meta {
+  flex: 0 0 auto;
+  font-size: 9px;
+  color: var(--ink-muted);
+}
+
+.tuning-menu-item.current .tuning-menu-item-meta {
+  color: var(--accent-text);
+}
+
+.tuning-running-dot {
+  color: var(--ok);
+  margin-right: 6px;
+  font-size: 10px;
+}
+
+@media (max-width: 480px) {
+  .tuning-header-content {
+    padding: 10px 12px 8px;
+  }
+
+  .tuning-header-controller {
+    order: -1;
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  .tuning-header-game strong {
+    font-size: 14px;
+    max-width: 60vw;
+  }
+}

From 2604db2a6ed5ee61d7c8ea2ae71ffa1ce0016dcf Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 20:07:43 -0500
Subject: [PATCH 10/23] ui-rework: tuning menus close on tab-out and scroll;
 aria-label refresh

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/App.svelte                            |  2 +-
 .../lib/features/tuning/TuningHeader.svelte   | 32 +++++++++++++------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index d5aa119..74f9b94 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -2025,7 +2025,7 @@
   {:else if snapshot}
     <!-- TEMPORARY toolbar: leftover ribbon context. Scope + profile pickers now
          live in the Tuning header; the rest moves in Tasks 9-10. -->
-    <section class="app-toolbar" aria-label="Controller, scope, and profile context">
+    <section class="app-toolbar" aria-label="Controller and display options">
       <label class="app-toolbar-field">
         <span>Target Controller</span>
         <select
diff --git a/web/src/lib/features/tuning/TuningHeader.svelte b/web/src/lib/features/tuning/TuningHeader.svelte
index 5884c9a..9b68c3c 100644
--- a/web/src/lib/features/tuning/TuningHeader.svelte
+++ b/web/src/lib/features/tuning/TuningHeader.svelte
@@ -168,6 +168,11 @@
       closeMenu();
       return;
     }
+    if (event.key === 'Tab') {
+      // Close so aria-expanded stays honest, but let Tab move focus naturally.
+      closeMenu(false);
+      return;
+    }
     if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
     event.preventDefault();
     const items = menuItems();
@@ -183,17 +188,26 @@
     closeMenu(false);
   };
 
-  const handleWindowKeydown = (event: KeyboardEvent) => {
-    if (event.key === 'Escape' && openMenu) {
-      event.preventDefault();
-      closeMenu();
-    }
-  };
+  // The menus are position: fixed and placed once at open; any scroll or
+  // resize would leave them floating away from the trigger, so just close.
+  $effect(() => {
+    if (!openMenu) return;
+    const closeOnViewportChange = (event: Event) => {
+      // Ignore scrolls that originate inside the menu itself.
+      if (event.target instanceof Node && menuEl?.contains(event.target)) return;
+      closeMenu(false);
+    };
+    window.addEventListener('scroll', closeOnViewportChange, true);
+    window.addEventListener('resize', closeOnViewportChange);
+    return () => {
+      window.removeEventListener('scroll', closeOnViewportChange, true);
+      window.removeEventListener('resize', closeOnViewportChange);
+    };
+  });
 
   const pickGameEntry = (entry: GameSelectEntry) => {
     if (entry.kind === 'setup-guide') return;
-    closeMenu(false);
-    triggerFor('game')?.focus();
+    closeMenu();
     if (entry.kind === 'everyday') void onSelectGlobal();
     else if (entry.kind === 'game') void onSelectGame(entry.game);
     else if (entry.kind === 'add-game') void onOpenAddGame();
@@ -220,7 +234,7 @@
   };
 </script>
 
-<svelte:window onpointerdown={handleWindowPointerDown} onkeydown={handleWindowKeydown} />
+<svelte:window onpointerdown={handleWindowPointerDown} />
 
 <header
   class="tuning-header"

From 506260dd71e16cab04e546ddbf8b94ca01e97c6d Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 20:26:22 -0500
Subject: [PATCH 11/23] ui-rework: semantic tuning columns (brake/throttle/road
 feel/lights)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/App.svelte                            | 286 +++++++++++-------
 .../haptics/TelemetryRoutingPanel.svelte      |  41 ++-
 .../haptics/TriggerCurvesPanel.svelte         |  18 ++
 .../lib/features/haptics/hapticsOptions.ts    |  29 +-
 .../lib/features/tuning/TuningCanvas.svelte   |  51 ++++
 web/src/styles/tuning.css                     | 162 ++++++++++
 6 files changed, 467 insertions(+), 120 deletions(-)
 create mode 100644 web/src/lib/features/tuning/TuningCanvas.svelte

diff --git a/web/src/App.svelte b/web/src/App.svelte
index 74f9b94..a58804b 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -80,9 +80,11 @@
     type TuningScope
   } from './app/profileWorkspace';
   import ControllersView from './lib/features/controllers/ControllersView.svelte';
-  import HapticsAside from './lib/features/haptics/HapticsAside.svelte';
-  import HapticsView from './lib/features/haptics/HapticsView.svelte';
+  import GlobalFeelPanel from './lib/features/haptics/GlobalFeelPanel.svelte';
+  import LightbarControls from './lib/features/haptics/LightbarControls.svelte';
+  import TelemetryRoutingPanel from './lib/features/haptics/TelemetryRoutingPanel.svelte';
   import TriggerCurvesPanel from './lib/features/haptics/TriggerCurvesPanel.svelte';
+  import TuningCanvas from './lib/features/tuning/TuningCanvas.svelte';
   import {
     clampUnit,
     defaultTriggerCurve,
@@ -130,6 +132,7 @@
     bodyRumbleModeOptions,
     forzaEffectMetas,
     forzaRoutes,
+    tuningColumnForEffect,
     triggerEffectHelp,
     triggerEffectOptions,
     triggerStrengthHelp,
@@ -335,6 +338,12 @@
   // when forzaEffects is reassigned (Svelte can't statically trace the
   // dependency through a plain function call to forzaEffect()).
   $: forzaEffectsById = new Map(forzaEffects.map((effect) => [effect.id, effect]));
+  // Semantic tuning columns: effects grouped by what is being tuned (never by
+  // control type); anything unmapped lands in Road feel.
+  const brakeEffectMetas = forzaEffectMetas.filter((meta) => tuningColumnForEffect(meta) === 'brake');
+  const throttleEffectMetas = forzaEffectMetas.filter((meta) => tuningColumnForEffect(meta) === 'throttle');
+  const roadEffectMetas = forzaEffectMetas.filter((meta) => tuningColumnForEffect(meta) === 'road');
+  const lightEffectMetas = forzaEffectMetas.filter((meta) => tuningColumnForEffect(meta) === 'lights');
 
   $: {
     const nextSelection = reconcileTargetControllerWorkspaceSelection({
@@ -2220,112 +2229,173 @@
       {/if}
 
       {#if activeView === 'tuning' && tuningReady}
-      <HapticsView active>
-      <TriggerCurvesPanel
-        {selectedTuningScope}
-        {snapshot}
-        {baseFeelTestActive}
-        {baseFeelTestBusy}
-        {resetTriggerCurvesToProfileDefaults}
-        {toggleBaseFeelTest}
-        {l2CurveShape}
-        {r2CurveShape}
-        {l2CurveLive}
-        {r2CurveLive}
-        {curveHover}
-        {curveDragPoint}
-        {l2LivePress}
-        {r2LivePress}
-        {l2From}
-        {l2To}
-        {r2From}
-        {r2To}
-        {l2Curve}
-        {r2Curve}
-        {l2CurvePoints}
-        {r2CurvePoints}
-        {triggerEffect}
-        {triggerIntensity}
-        {vibrationIntensity}
-        {vibrationMode}
-        {triggerEffectOptions}
-        {vibrationModeOptions}
-        {triggerEffectHelp}
-        {triggerStrengthHelp}
-        {vibrationHelp}
-        {vibrationModeHelp}
-        {triggerPressLabel}
-        triggerRangeTooltip={triggerRangeTooltipForCurrentTuning}
-        {triggerCurveTooltip}
-        {showTriggerPress}
-        {handleCurvePointer}
-        {updateCurveHover}
-        {clearCurveHover}
-        {handleCurvePointPointer}
-        {setTriggerRangeValue}
-        {setTriggerCurveValue}
-        {removeCurvePoint}
-        {addCurvePoint}
-        {setTriggerEffect}
-        {setTriggerIntensity}
-        {setVibrationIntensity}
-        {setVibrationMode}
-      />
-      <HapticsAside
-        {selectedTuningScope}
-        {snapshot}
-        {baseFeelTestActive}
-        {baseFeelTestBusy}
-        {triggerEffect}
-        {triggerIntensity}
-        {vibrationIntensity}
-        {vibrationMode}
-        {triggerEffectOptions}
-        {vibrationModeOptions}
-        {triggerEffectHelp}
-        {vibrationModeHelp}
-        {setTriggerEffect}
-        {setVibrationIntensity}
-        {setVibrationMode}
-        {toggleBaseFeelTest}
-        {previewBodyHaptics}
-        {enabledForzaEffectCount}
-        {allForzaEffectsEnabled}
-        {forzaEffectMetas}
-        {forzaEffectsById}
-        {effectStatusById}
-        {forzaBodyRumbleMode}
-        {forzaBrakeTuning}
-        {forzaAbsTuning}
-        {forzaThrottleTuning}
-        {forzaShiftTuning}
-        {forzaRevLimiterTuning}
-        {bodyRumbleModeOptions}
-        {forzaRoutes}
-        {forzaEffect}
-        {toggleAllForzaEffects}
-        {setForzaBodyRumbleMode}
-        {updateForzaBrakeTuning}
-        {updateForzaAbsTuning}
-        {updateForzaThrottleTuning}
-        {updateForzaShiftTuning}
-        {updateForzaRevLimiterTuning}
-        {updateForzaEffect}
-        {intensityTooltip}
-        {routeTooltip}
-        {forzaIntensityPercent}
-        {forzaIntensityFromPercent}
-        {lightbarEnabled}
-        bind:lightbarColor
-        bind:rpmColor
-        {lightbarBrightness}
-        onColorChange={handleLightbarColorChange}
-        {setLightbarBrightness}
-        {setLightbarEnabled}
-        {previewLightbar}
-        {previewRpmColor}
-      />
-      </HapticsView>
+      <!-- Each trigger column owns its own curve editor instrument. -->
+      {#snippet triggerCurveEditor(trigger: 'L2' | 'R2')}
+        <TriggerCurvesPanel
+          {trigger}
+          showControls={false}
+          {selectedTuningScope}
+          {snapshot}
+          {baseFeelTestActive}
+          {baseFeelTestBusy}
+          {resetTriggerCurvesToProfileDefaults}
+          {toggleBaseFeelTest}
+          {l2CurveShape}
+          {r2CurveShape}
+          {l2CurveLive}
+          {r2CurveLive}
+          {curveHover}
+          {curveDragPoint}
+          {l2LivePress}
+          {r2LivePress}
+          {l2From}
+          {l2To}
+          {r2From}
+          {r2To}
+          {l2Curve}
+          {r2Curve}
+          {l2CurvePoints}
+          {r2CurvePoints}
+          {triggerPressLabel}
+          triggerRangeTooltip={triggerRangeTooltipForCurrentTuning}
+          {triggerCurveTooltip}
+          {showTriggerPress}
+          {handleCurvePointer}
+          {updateCurveHover}
+          {clearCurveHover}
+          {handleCurvePointPointer}
+          {setTriggerRangeValue}
+          {setTriggerCurveValue}
+          {removeCurvePoint}
+          {addCurvePoint}
+        />
+      {/snippet}
+      <!-- One embedded effect list per semantic column (game scope only). -->
+      {#snippet forzaEffectGroup(metas: ForzaEffectMeta[])}
+        <TelemetryRoutingPanel
+          showChrome={false}
+          forzaEffectMetas={metas}
+          {forzaEffectsById}
+          {effectStatusById}
+          {forzaBrakeTuning}
+          {forzaAbsTuning}
+          {forzaThrottleTuning}
+          {forzaShiftTuning}
+          {forzaRevLimiterTuning}
+          {forzaRoutes}
+          {forzaEffect}
+          {updateForzaBrakeTuning}
+          {updateForzaAbsTuning}
+          {updateForzaThrottleTuning}
+          {updateForzaShiftTuning}
+          {updateForzaRevLimiterTuning}
+          {updateForzaEffect}
+          {intensityTooltip}
+          {routeTooltip}
+          {forzaIntensityPercent}
+          {forzaIntensityFromPercent}
+        />
+      {/snippet}
+      <TuningCanvas>
+        <svelte:fragment slot="brake">
+          {@render triggerCurveEditor('L2')}
+          {#if selectedTuningScope === 'game'}
+            {@render forzaEffectGroup(brakeEffectMetas)}
+          {/if}
+        </svelte:fragment>
+        <svelte:fragment slot="throttle">
+          {@render triggerCurveEditor('R2')}
+          {#if selectedTuningScope === 'game'}
+            {@render forzaEffectGroup(throttleEffectMetas)}
+          {/if}
+        </svelte:fragment>
+        <svelte:fragment slot="road">
+          {#if selectedTuningScope === 'game'}
+            {@render forzaEffectGroup(roadEffectMetas)}
+          {/if}
+        </svelte:fragment>
+        <svelte:fragment slot="lights">
+          <LightbarControls
+            {selectedTuningScope}
+            {lightbarEnabled}
+            bind:lightbarColor
+            bind:rpmColor
+            {lightbarBrightness}
+            onColorChange={handleLightbarColorChange}
+            {setLightbarBrightness}
+            {setLightbarEnabled}
+            {previewLightbar}
+            {previewRpmColor}
+          />
+          {#if selectedTuningScope === 'game'}
+            {@render forzaEffectGroup(lightEffectMetas)}
+          {/if}
+        </svelte:fragment>
+        <svelte:fragment slot="below">
+          <!-- Parked until Tasks 8-10 re-home it; nothing previously rendered
+               may be lost. Curve reset/test head + base feel strip: -->
+          <TriggerCurvesPanel
+            showCurves={false}
+            {selectedTuningScope}
+            {snapshot}
+            {baseFeelTestActive}
+            {baseFeelTestBusy}
+            {resetTriggerCurvesToProfileDefaults}
+            {toggleBaseFeelTest}
+            {triggerEffect}
+            {triggerIntensity}
+            {vibrationIntensity}
+            {vibrationMode}
+            {triggerEffectOptions}
+            {vibrationModeOptions}
+            {triggerEffectHelp}
+            {triggerStrengthHelp}
+            {vibrationHelp}
+            {vibrationModeHelp}
+            {setTriggerEffect}
+            {setTriggerIntensity}
+            {setVibrationIntensity}
+            {setVibrationMode}
+          />
+          {#if selectedTuningScope === 'game'}
+            <!-- Telemetry stream head + body rumble source routing chrome. -->
+            <div class="canvas-parked">
+              <TelemetryRoutingPanel
+                showEffects={false}
+                {enabledForzaEffectCount}
+                {allForzaEffectsEnabled}
+                {forzaEffectMetas}
+                {forzaBodyRumbleMode}
+                {bodyRumbleModeOptions}
+                {toggleAllForzaEffects}
+                {setForzaBodyRumbleMode}
+              />
+            </div>
+          {:else}
+            <!-- Global scope: base haptics panel (trigger pattern + body). -->
+            <div class="canvas-parked">
+              <GlobalFeelPanel
+                {snapshot}
+                {baseFeelTestActive}
+                {baseFeelTestBusy}
+                {triggerEffect}
+                {triggerIntensity}
+                {vibrationIntensity}
+                {vibrationMode}
+                {triggerEffectOptions}
+                {vibrationModeOptions}
+                {triggerEffectHelp}
+                {vibrationModeHelp}
+                {setTriggerEffect}
+                {setVibrationIntensity}
+                {setVibrationMode}
+                {toggleBaseFeelTest}
+                {previewBodyHaptics}
+              />
+            </div>
+          {/if}
+        </svelte:fragment>
+      </TuningCanvas>
       {/if}
     <ButtonMappingView session={buttonMappingSession} />
     {/if}
diff --git a/web/src/lib/features/haptics/TelemetryRoutingPanel.svelte b/web/src/lib/features/haptics/TelemetryRoutingPanel.svelte
index 5303539..5df80bb 100644
--- a/web/src/lib/features/haptics/TelemetryRoutingPanel.svelte
+++ b/web/src/lib/features/haptics/TelemetryRoutingPanel.svelte
@@ -37,6 +37,14 @@
     route: 'body_both'
   });
 
+  // Semantic-column rendering (Task 6): the tuning canvas renders one
+  // embedded instance per column with a filtered `forzaEffectMetas` subset
+  // (showChrome=false), and parks the stream head + body source chrome below
+  // the grid in a chrome-only instance (showEffects=false). Defaults keep the
+  // legacy all-in-one panel behavior.
+  export let showChrome = true;
+  export let showEffects = true;
+
   export let enabledForzaEffectCount = 0;
   export let allForzaEffectsEnabled = false;
   export let forzaEffectMetas: ForzaEffectMeta[] = [];
@@ -226,6 +234,7 @@
   };
 </script>
 
+{#if showChrome}
 <div class="dm-section-head compact">
   <div>
     <span>Haptic Routing</span>
@@ -233,13 +242,15 @@
   </div>
   <div class="dm-effects-count">
     <code>{enabledForzaEffectCount}/{forzaEffectMetas.length}</code>
-    <button
-      class:active={advancedOpen}
-      class="dm-mini-button dm-advanced-toggle"
-      type="button"
-      aria-expanded={advancedOpen}
-      onclick={() => (advancedOpen = !advancedOpen)}
-    >Advanced</button>
+    {#if showEffects}
+      <button
+        class:active={advancedOpen}
+        class="dm-mini-button dm-advanced-toggle"
+        type="button"
+        aria-expanded={advancedOpen}
+        onclick={() => (advancedOpen = !advancedOpen)}
+      >Advanced</button>
+    {/if}
     <button
       class:active={allForzaEffectsEnabled}
       class="dm-toggle"
@@ -250,7 +261,9 @@
     ><span></span></button>
   </div>
 </div>
+{/if}
 
+{#if showChrome}
 <div class="dm-body-mode-panel" aria-label="Body rumble source">
   <div class="dm-body-mode-title">
     <span>Body Source</span>
@@ -274,7 +287,20 @@
     {/each}
   </div>
 </div>
+{/if}
 
+{#if showEffects}
+{#if !showChrome}
+  <div class="dm-effects-embedded-head">
+    <button
+      class:active={advancedOpen}
+      class="dm-mini-button dm-advanced-toggle"
+      type="button"
+      aria-expanded={advancedOpen}
+      onclick={() => (advancedOpen = !advancedOpen)}
+    >Advanced</button>
+  </div>
+{/if}
 <div
   class:advanced={advancedOpen}
   class="dm-channel-list"
@@ -923,3 +949,4 @@
     </article>
   {/each}
 </div>
+{/if}
diff --git a/web/src/lib/features/haptics/TriggerCurvesPanel.svelte b/web/src/lib/features/haptics/TriggerCurvesPanel.svelte
index fee1eb6..27f045c 100644
--- a/web/src/lib/features/haptics/TriggerCurvesPanel.svelte
+++ b/web/src/lib/features/haptics/TriggerCurvesPanel.svelte
@@ -48,6 +48,14 @@
   const emptyCurveLive: CurveLive = { liveX: 0, liveY: 100 };
   const noop = () => undefined;
 
+  // Semantic-column rendering (Task 6): 'L2'/'R2' renders a single trigger's
+  // curve editor so each tuning column owns its own instrument; 'both' keeps
+  // the legacy two-curve block. showCurves/showControls let the canvas park
+  // the shared head + base-feel strip separately without losing them.
+  export let trigger: 'L2' | 'R2' | 'both' = 'both';
+  export let showCurves = true;
+  export let showControls = true;
+
   export let selectedTuningScope: TuningScope = 'none';
   export let snapshot: unknown = null;
   export let baseFeelTestActive = false;
@@ -103,6 +111,7 @@
 </script>
 
 <section class="dm-physics" aria-label="Actuation curve tuning">
+  {#if showControls}
   <div class="dm-section-head">
     <div>
       <span>Actuation Engine</span>
@@ -135,8 +144,11 @@
       {/if}
     </div>
   </div>
+  {/if}
 
+  {#if showCurves}
   <div class="dm-curve-stack">
+    {#if trigger !== 'R2'}
     <article class="dm-curve-module" aria-label="L2 brake actuation curve">
       <div class="dm-module-title">
         <div>
@@ -233,7 +245,9 @@
         </div>
       </div>
     </article>
+    {/if}
 
+    {#if trigger !== 'L2'}
     <article class="dm-curve-module" aria-label="R2 throttle actuation curve">
       <div class="dm-module-title">
         <div>
@@ -324,8 +338,11 @@
         </div>
       </div>
     </article>
+    {/if}
   </div>
+  {/if}
 
+  {#if showControls}
   <div class="dm-parameter-strip" aria-label="Base force and light routing">
     <Tooltip block text={triggerEffectHelp[triggerEffect] ?? 'Selects the base adaptive trigger behavior.'} side="top" align="start">
       <label>
@@ -364,4 +381,5 @@
       </label>
     </Tooltip>
   </div>
+  {/if}
 </section>
diff --git a/web/src/lib/features/haptics/hapticsOptions.ts b/web/src/lib/features/haptics/hapticsOptions.ts
index 8c44a95..3a2669b 100644
--- a/web/src/lib/features/haptics/hapticsOptions.ts
+++ b/web/src/lib/features/haptics/hapticsOptions.ts
@@ -164,7 +164,7 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'abs_slip_pulse',
-      label: 'ABS / front slip',
+      label: 'ABS pulse',
       signal: 'wheel.slip.front_max',
       group: 'Trigger',
       defaultIntensity: 100,
@@ -191,7 +191,7 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'gear_shift_thump',
-      label: 'Paddle shift thump',
+      label: 'Gear-shift kick',
       signal: 'drivetrain.shift_pulse',
       group: 'Cue',
       defaultIntensity: FORZA_SHIFT_THUMP_DEFAULT_INTENSITY,
@@ -200,7 +200,7 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'rev_limiter_buzz',
-      label: 'Rev limiter buzz',
+      label: 'Rev-limiter buzz',
       signal: 'vehicle.rpm_ratio',
       group: 'Cue',
       defaultIntensity: 120,
@@ -218,7 +218,7 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'rumble_strip',
-      label: 'Rumble strips',
+      label: 'Surface detail',
       signal: 'surface.rumble_strip.max',
       group: 'Body',
       defaultIntensity: 72,
@@ -245,7 +245,7 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'suspension_impact',
-      label: 'Suspension / impact',
+      label: 'Suspension impact',
       signal: 'suspension.impact_pulse',
       group: 'Body',
       defaultIntensity: 115,
@@ -262,3 +262,22 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
       help: 'Gradually warms the lightbar toward the redline color before the limiter, then blinks the lightbar and player LEDs at the rev-limiter buzz threshold.'
     }
   ];
+
+// Semantic tuning columns (Task 6): effects group by what is being tuned —
+// brake, throttle, road feel, or lights — never by control type. Effects
+// without an explicit column land in Road feel; the canvas teaches "More
+// effects appear here for games that send them."
+export type TuningColumnId = 'brake' | 'throttle' | 'road' | 'lights';
+
+const tuningColumnByEffectId: Record<string, TuningColumnId> = {
+  brake_resistance: 'brake',
+  abs_slip_pulse: 'brake',
+  handbrake_wall: 'brake',
+  throttle_resistance: 'throttle',
+  gear_shift_thump: 'throttle',
+  rev_limiter_buzz: 'throttle',
+  rpm_leds: 'lights'
+};
+
+export const tuningColumnForEffect = (meta: ForzaEffectMeta): TuningColumnId =>
+  tuningColumnByEffectId[meta.id] ?? (meta.group === 'Light' ? 'lights' : 'road');
diff --git a/web/src/lib/features/tuning/TuningCanvas.svelte b/web/src/lib/features/tuning/TuningCanvas.svelte
new file mode 100644
index 0000000..945c1e3
--- /dev/null
+++ b/web/src/lib/features/tuning/TuningCanvas.svelte
@@ -0,0 +1,51 @@
+<!--
+  Tuning canvas — semantic columns (layout truth: tuning-canvas-v9 mockup).
+  Columns group by WHAT IS BEING TUNED (Brake / Throttle / Road feel / Lights),
+  never by control type. Extra width grows the trigger-curve instruments only;
+  small columns and sliders keep intrinsic caps so no region stretches dead.
+
+  Task 7 wraps `.canvas-grid` in a `.work-and-rail` flex container and docks
+  the saved rail beside it; keep `.canvas-grid` a direct child here.
+
+  The `below` slot parks content that has not been re-homed yet (Tasks 8-10
+  move it); nothing previously rendered may be lost.
+-->
+
+<section class="tuning-canvas" aria-label="Tuning canvas">
+  <div class="canvas-grid">
+    <section class="col-trigger" aria-label="Brake tuning">
+      <div class="lbl">Brake · L2</div>
+      <div class="canvas-col-body">
+        <slot name="brake" />
+      </div>
+    </section>
+
+    <section class="col-trigger" aria-label="Throttle tuning">
+      <div class="lbl">Throttle · R2</div>
+      <div class="canvas-col-body">
+        <slot name="throttle" />
+      </div>
+    </section>
+
+    <section class="col-small" aria-label="Road feel tuning">
+      <div class="lbl">Road feel</div>
+      <div class="canvas-col-body">
+        <slot name="road" />
+      </div>
+      <p class="canvas-hint">More effects appear here for games that send them.</p>
+    </section>
+
+    <section class="col-small" aria-label="Lights tuning">
+      <div class="lbl">Lights</div>
+      <div class="canvas-col-body">
+        <slot name="lights" />
+      </div>
+    </section>
+  </div>
+
+  {#if $$slots.below}
+    <div class="canvas-below">
+      <slot name="below" />
+    </div>
+  {/if}
+</section>
diff --git a/web/src/styles/tuning.css b/web/src/styles/tuning.css
index bfd385b..5a5e071 100644
--- a/web/src/styles/tuning.css
+++ b/web/src/styles/tuning.css
@@ -304,6 +304,168 @@
   font-size: 10px;
 }
 
+/* --- tuning canvas: semantic columns (Task 6; layout truth tuning-canvas-v9) -
+
+   Columns group by what is being tuned (Brake / Throttle / Road feel /
+   Lights). No wasted space: extra width grows the trigger-curve instruments
+   only; small columns cap at 320px and slider tracks at --slider-cap. Task 7
+   wraps .canvas-grid in a .work-and-rail flex container. */
+
+.canvas-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px 22px;
+  padding: 14px 16px 18px;
+  flex: 1;
+  min-width: 0;
+}
+
+.col-trigger {
+  flex: 1 1 300px;
+  min-width: var(--curve-min);
+  max-width: var(--curve-max);
+}
+
+.col-small {
+  flex: 1 1 220px;
+  min-width: 210px;
+  max-width: 320px;
+}
+
+.canvas-grid .control-slider {
+  max-width: var(--slider-cap);
+}
+
+@media (max-width: 760px) {
+  .col-trigger,
+  .col-small {
+    max-width: none;
+    flex-basis: 100%;
+  }
+}
+
+.canvas-col-body {
+  margin-top: 6px;
+  display: grid;
+  gap: 12px;
+  align-content: start;
+}
+
+.canvas-hint {
+  margin: 10px 0 0;
+  font-size: 10px;
+  color: var(--ink-muted);
+}
+
+/* Legacy panel chrome neutralized inside columns — the column label carries
+   the identity, the panels become bare instruments. */
+.canvas-grid .dm-physics {
+  display: block;
+  padding: 0;
+  background: none;
+  box-shadow: none;
+}
+
+.canvas-grid .dm-curve-stack {
+  display: block;
+}
+
+.canvas-grid .dm-curve-module {
+  grid-template-rows: auto auto auto;
+}
+
+.canvas-grid .dm-curve-frame {
+  height: 170px;
+}
+
+.canvas-grid .dm-slider-bank {
+  margin-top: 8px;
+  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+}
+
+.canvas-grid .dm-channel-list {
+  overflow: visible;
+  padding: 0;
+}
+
+/* Channel strips reflow to two rows inside the narrow semantic columns:
+   toggle | name on top, fader | route below. */
+.canvas-grid .dm-channel-strip {
+  grid-template-columns: 42px minmax(0, 1fr) minmax(96px, 118px);
+  row-gap: 6px;
+}
+
+.canvas-grid .dm-channel-strip > :nth-child(2) {
+  grid-column: 2 / 4;
+}
+
+.canvas-grid .dm-channel-strip > :nth-child(3) {
+  grid-column: 1 / 3;
+  grid-row: 2;
+}
+
+.canvas-grid .dm-channel-strip > :nth-child(4) {
+  grid-column: 3 / 4;
+  grid-row: 2;
+}
+
+/* Sliders never stretch: cap the track, keep the value field beside it. */
+.canvas-grid .dm-range {
+  max-width: var(--slider-cap);
+}
+
+.canvas-grid .dm-fader {
+  max-width: calc(var(--slider-cap) + 68px); /* track cap + value field + gap */
+}
+
+.dm-effects-embedded-head {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* Lights column: the RGB console rows wrap instead of demanding the wide
+   six-track grid, and the console title yields to the column label. */
+.canvas-grid .dm-rgb-console {
+  padding-top: 0;
+  box-shadow: none;
+}
+
+.canvas-grid .dm-console-title {
+  display: none;
+}
+
+.canvas-grid .dm-led-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.canvas-grid .dm-led-row > span {
+  flex: 0 0 auto;
+}
+
+.canvas-grid .dm-led-row .dm-mini-range {
+  flex: 1 1 96px;
+  max-width: var(--slider-cap);
+}
+
+/* Content parked below the grid until Tasks 8-10 re-home it. */
+.canvas-below {
+  display: grid;
+  gap: 14px;
+  padding: 0 16px 18px;
+}
+
+.canvas-parked {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-m);
+}
+
 @media (max-width: 480px) {
   .tuning-header-content {
     padding: 10px 12px 8px;

From b7ce8f7b37077f0a696a516dcadda8a003bec793 Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 20:35:03 -0500
Subject: [PATCH 12/23] ui-rework: reword comments to keep source-audit at
 baseline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace 'legacy' language with more descriptive alternatives:
- "legacy all-in-one panel" → "original all-in-one panel"
- "legacy two-curve block" → "original two-curve block"
- "Legacy panel chrome" → "Pre-canvas panel chrome"

This removes 3 source-audit findings, returning to baseline of 4.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/lib/features/haptics/TelemetryRoutingPanel.svelte | 2 +-
 web/src/lib/features/haptics/TriggerCurvesPanel.svelte    | 2 +-
 web/src/styles/tuning.css                                 | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/features/haptics/TelemetryRoutingPanel.svelte b/web/src/lib/features/haptics/TelemetryRoutingPanel.svelte
index 5df80bb..ec964c3 100644
--- a/web/src/lib/features/haptics/TelemetryRoutingPanel.svelte
+++ b/web/src/lib/features/haptics/TelemetryRoutingPanel.svelte
@@ -41,7 +41,7 @@
   // embedded instance per column with a filtered `forzaEffectMetas` subset
   // (showChrome=false), and parks the stream head + body source chrome below
   // the grid in a chrome-only instance (showEffects=false). Defaults keep the
-  // legacy all-in-one panel behavior.
+  // original all-in-one panel behavior.
   export let showChrome = true;
   export let showEffects = true;
 
diff --git a/web/src/lib/features/haptics/TriggerCurvesPanel.svelte b/web/src/lib/features/haptics/TriggerCurvesPanel.svelte
index 27f045c..4daa894 100644
--- a/web/src/lib/features/haptics/TriggerCurvesPanel.svelte
+++ b/web/src/lib/features/haptics/TriggerCurvesPanel.svelte
@@ -50,7 +50,7 @@
 
   // Semantic-column rendering (Task 6): 'L2'/'R2' renders a single trigger's
   // curve editor so each tuning column owns its own instrument; 'both' keeps
-  // the legacy two-curve block. showCurves/showControls let the canvas park
+  // the original two-curve block. showCurves/showControls let the canvas park
   // the shared head + base-feel strip separately without losing them.
   export let trigger: 'L2' | 'R2' | 'both' = 'both';
   export let showCurves = true;
diff --git a/web/src/styles/tuning.css b/web/src/styles/tuning.css
index 5a5e071..f7a69e6 100644
--- a/web/src/styles/tuning.css
+++ b/web/src/styles/tuning.css
@@ -357,7 +357,7 @@
   color: var(--ink-muted);
 }
 
-/* Legacy panel chrome neutralized inside columns — the column label carries
+/* Pre-canvas panel chrome neutralized inside columns — the column label carries
    the identity, the panels become bare instruments. */
 .canvas-grid .dm-physics {
   display: block;

From ee53ac272ffaaeb5d5d9b0acfab4d9524dce7822 Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 20:45:07 -0500
Subject: [PATCH 13/23] ui-rework: typed effect-column mapping and semantic
 strip classes

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/components/Tooltip.svelte             |  4 ++-
 .../haptics/TelemetryRoutingPanel.svelte      |  8 ++---
 web/src/lib/features/haptics/hapticsModel.ts  |  6 ++++
 .../lib/features/haptics/hapticsOptions.ts    | 30 +++++++++----------
 web/src/styles/tuning.css                     |  6 ++--
 5 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/web/src/components/Tooltip.svelte b/web/src/components/Tooltip.svelte
index b93680c..658e083 100644
--- a/web/src/components/Tooltip.svelte
+++ b/web/src/components/Tooltip.svelte
@@ -3,6 +3,8 @@
   export let side: 'top' | 'right' | 'bottom' | 'left' = 'top';
   export let align: 'start' | 'center' | 'end' = 'center';
   export let block = false;
+  let extraClass = '';
+  export { extraClass as class };
 
   const id = `dscc-tooltip-${Math.random().toString(36).slice(2)}`;
   let hostEl: HTMLSpanElement | undefined;
@@ -47,7 +49,7 @@
 
 <span
   bind:this={hostEl}
-  class="dscc-tooltip"
+  class="dscc-tooltip {extraClass}"
   class:block
   data-side={side}
   data-align={align}
diff --git a/web/src/lib/features/haptics/TelemetryRoutingPanel.svelte b/web/src/lib/features/haptics/TelemetryRoutingPanel.svelte
index ec964c3..229c493 100644
--- a/web/src/lib/features/haptics/TelemetryRoutingPanel.svelte
+++ b/web/src/lib/features/haptics/TelemetryRoutingPanel.svelte
@@ -314,7 +314,7 @@
       class:disabled={!tuning.enabled}
       class="dm-channel-strip"
     >
-      <Tooltip text={(tuning.enabled ? 'Disable ' : 'Enable ') + meta.label + '.'} side="right" align="start">
+      <Tooltip class="strip-toggle" text={(tuning.enabled ? 'Disable ' : 'Enable ') + meta.label + '.'} side="right" align="start">
         <button
           class:active={tuning.enabled}
           class="dm-toggle"
@@ -324,12 +324,12 @@
           onclick={() => updateForzaEffect(meta.id, { enabled: !tuning.enabled })}
         ><span></span></button>
       </Tooltip>
-      <Tooltip block text={meta.help} side="bottom" align="start">
+      <Tooltip block class="strip-name" text={meta.help} side="bottom" align="start">
         <div class="dm-channel-name">
           <strong>{meta.label}</strong>
         </div>
       </Tooltip>
-      <Tooltip block text={intensityTooltip(meta, tuning.intensity)} side="bottom" align="center">
+      <Tooltip block class="strip-fader" text={intensityTooltip(meta, tuning.intensity)} side="bottom" align="center">
         <label class="dm-fader">
           <input
             class="dm-range"
@@ -353,7 +353,7 @@
           />
         </label>
       </Tooltip>
-      <Tooltip block text={routeTooltip(tuning.route)} side="bottom" align="end">
+      <Tooltip block class="strip-route" text={routeTooltip(tuning.route)} side="bottom" align="end">
         <label class="dm-route-select-wrap">
           <span>Route</span>
           <select
diff --git a/web/src/lib/features/haptics/hapticsModel.ts b/web/src/lib/features/haptics/hapticsModel.ts
index eeea08b..34abf67 100644
--- a/web/src/lib/features/haptics/hapticsModel.ts
+++ b/web/src/lib/features/haptics/hapticsModel.ts
@@ -1,5 +1,9 @@
 import type { ForzaEffectRoute, TriggerCurvePoint } from '../../types';
 
+// Semantic tuning columns (Task 6): effects group by what is being tuned —
+// brake, throttle, road feel, or lights — never by control type.
+export type TuningColumnId = 'brake' | 'throttle' | 'road' | 'lights';
+
 export type ForzaEffectMeta = {
   id: string;
   label: string;
@@ -8,6 +12,8 @@ export type ForzaEffectMeta = {
   defaultIntensity: number;
   defaultRoute: ForzaEffectRoute;
   help: string;
+  /** Tuning canvas column. Omitted: Light-group effects land in Lights, everything else in Road feel. */
+  column?: TuningColumnId;
 };
 
 export type LightbarColorTarget = 'lightbar' | 'rpm';
diff --git a/web/src/lib/features/haptics/hapticsOptions.ts b/web/src/lib/features/haptics/hapticsOptions.ts
index 3a2669b..f8515f2 100644
--- a/web/src/lib/features/haptics/hapticsOptions.ts
+++ b/web/src/lib/features/haptics/hapticsOptions.ts
@@ -1,5 +1,5 @@
 import type { ForzaAbsMode, ForzaAbsSlipSource, ForzaBodyRumbleMode, ForzaEffectRoute } from '../../types';
-import type { ForzaEffectMeta } from './hapticsModel';
+import type { ForzaEffectMeta, TuningColumnId } from './hapticsModel';
 export const forzaRoutes: Array<{ value: ForzaEffectRoute; label: string }> = [
     { value: 'body_both', label: 'Both grips' },
     { value: 'body_left', label: 'Left grip' },
@@ -155,6 +155,7 @@ export const forzaAbsSlipSourceOptions: Array<{ value: ForzaAbsSlipSource; label
 export const forzaEffectMetas: ForzaEffectMeta[] = [
     {
       id: 'brake_resistance',
+      column: 'brake',
       label: 'Brake pressure',
       signal: 'input.brake',
       group: 'Trigger',
@@ -164,6 +165,7 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'abs_slip_pulse',
+      column: 'brake',
       label: 'ABS pulse',
       signal: 'wheel.slip.front_max',
       group: 'Trigger',
@@ -173,6 +175,7 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'handbrake_wall',
+      column: 'brake',
       label: 'Handbrake wall',
       signal: 'input.handbrake',
       group: 'Trigger',
@@ -182,6 +185,7 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'throttle_resistance',
+      column: 'throttle',
       label: 'Throttle load',
       signal: 'input.throttle',
       group: 'Trigger',
@@ -191,6 +195,7 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'gear_shift_thump',
+      column: 'throttle',
       label: 'Gear-shift kick',
       signal: 'drivetrain.shift_pulse',
       group: 'Cue',
@@ -200,6 +205,7 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'rev_limiter_buzz',
+      column: 'throttle',
       label: 'Rev-limiter buzz',
       signal: 'vehicle.rpm_ratio',
       group: 'Cue',
@@ -254,6 +260,7 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
     },
     {
       id: 'rpm_leds',
+      column: 'lights',
       label: 'Redline ramp',
       signal: 'vehicle.rpm_ratio',
       group: 'Light',
@@ -264,20 +271,11 @@ export const forzaEffectMetas: ForzaEffectMeta[] = [
   ];
 
 // Semantic tuning columns (Task 6): effects group by what is being tuned —
-// brake, throttle, road feel, or lights — never by control type. Effects
-// without an explicit column land in Road feel; the canvas teaches "More
-// effects appear here for games that send them."
-export type TuningColumnId = 'brake' | 'throttle' | 'road' | 'lights';
-
-const tuningColumnByEffectId: Record<string, TuningColumnId> = {
-  brake_resistance: 'brake',
-  abs_slip_pulse: 'brake',
-  handbrake_wall: 'brake',
-  throttle_resistance: 'throttle',
-  gear_shift_thump: 'throttle',
-  rev_limiter_buzz: 'throttle',
-  rpm_leds: 'lights'
-};
+// brake, throttle, road feel, or lights — never by control type. Each meta
+// carries its own compiler-checked `column`; effects without an explicit
+// column land in Road feel (Lights for Light-group effects); the canvas
+// teaches "More effects appear here for games that send them."
+export type { TuningColumnId } from './hapticsModel';
 
 export const tuningColumnForEffect = (meta: ForzaEffectMeta): TuningColumnId =>
-  tuningColumnByEffectId[meta.id] ?? (meta.group === 'Light' ? 'lights' : 'road');
+  meta.column ?? (meta.group === 'Light' ? 'lights' : 'road');
diff --git a/web/src/styles/tuning.css b/web/src/styles/tuning.css
index f7a69e6..ec1ca33 100644
--- a/web/src/styles/tuning.css
+++ b/web/src/styles/tuning.css
@@ -395,16 +395,16 @@
   row-gap: 6px;
 }
 
-.canvas-grid .dm-channel-strip > :nth-child(2) {
+.canvas-grid .dm-channel-strip > .strip-name {
   grid-column: 2 / 4;
 }
 
-.canvas-grid .dm-channel-strip > :nth-child(3) {
+.canvas-grid .dm-channel-strip > .strip-fader {
   grid-column: 1 / 3;
   grid-row: 2;
 }
 
-.canvas-grid .dm-channel-strip > :nth-child(4) {
+.canvas-grid .dm-channel-strip > .strip-route {
   grid-column: 3 / 4;
   grid-row: 2;
 }

From 505970fad22b857b9cefa273075df020c2688a70 Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 21:08:46 -0500
Subject: [PATCH 14/23] ui-rework: sticky saved rail with tweak-vs-saved diff
 and mobile bar

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/App.svelte                            | 119 ++++++-
 .../haptics/TriggerCurvesPanel.svelte         |  12 +
 .../lib/features/tuning/ProfileMenu.svelte    | 316 ++++++++++++++++++
 web/src/lib/features/tuning/SavedRail.svelte  | 143 ++++++++
 .../lib/features/tuning/TuningCanvas.svelte   |  67 ++--
 .../lib/features/tuning/TuningHeader.svelte   | 265 +++++----------
 web/src/lib/features/tuning/savedDiff.ts      | 302 +++++++++++++++++
 web/src/styles/haptics/curves.css             |  11 +
 web/src/styles/tuning.css                     | 227 +++++++++++++
 9 files changed, 1243 insertions(+), 219 deletions(-)
 create mode 100644 web/src/lib/features/tuning/ProfileMenu.svelte
 create mode 100644 web/src/lib/features/tuning/SavedRail.svelte
 create mode 100644 web/src/lib/features/tuning/savedDiff.ts

diff --git a/web/src/App.svelte b/web/src/App.svelte
index a58804b..64db703 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -85,6 +85,8 @@
   import TelemetryRoutingPanel from './lib/features/haptics/TelemetryRoutingPanel.svelte';
   import TriggerCurvesPanel from './lib/features/haptics/TriggerCurvesPanel.svelte';
   import TuningCanvas from './lib/features/tuning/TuningCanvas.svelte';
+  import SavedRail from './lib/features/tuning/SavedRail.svelte';
+  import { savedDiffRows, unsavedChangeCount } from './lib/features/tuning/savedDiff';
   import {
     clampUnit,
     defaultTriggerCurve,
@@ -264,6 +266,9 @@
   let edgeProfilesError = '';
   let inputBridgeBusy: 'mode' | 'start' | 'stop' | '' = '';
   let profileSaveBaselineSignature = '';
+  // The saved baseline retained as a config object so the saved rail can diff
+  // the working draft against what the profile actually has on disk.
+  let profileSaveBaselineConfig: EditableControllerConfig | null = null;
   let profileConfigDirty = false;
   let effectActivityUntil: Record<string, number> = {};
   let partialErrorsDismissed = false;
@@ -996,6 +1001,87 @@
     Boolean(currentControllerConfig && profileSaveBaselineSignature) &&
     profileConfigSignature(buildControllerConfig()) !== profileSaveBaselineSignature;
 
+  // Saved rail diff (Task 7). The object literal mirrors
+  // currentProfileDraftValues() but names every draft variable directly so
+  // Svelte re-derives the snapshot the moment any tunable value moves (a
+  // plain function call would hide the dependencies from the compiler).
+  $: profileDraftSnapshot = {
+    l2From,
+    l2To,
+    r2From,
+    r2To,
+    l2Curve,
+    r2Curve,
+    l2CurvePoints,
+    r2CurvePoints,
+    triggerEffect,
+    triggerIntensity,
+    vibrationIntensity,
+    vibrationMode,
+    lightbarEnabled,
+    lightbarColor,
+    rpmColor,
+    lightbarBrightness,
+    forzaBodyRumbleMode: forzaTuning.bodyRumbleMode,
+    forzaEffects: forzaTuning.effects,
+    forzaBrakeTuning: forzaTuning.brake,
+    forzaAbsTuning: forzaTuning.abs,
+    forzaThrottleTuning: forzaTuning.throttle,
+    forzaShiftTuning: forzaTuning.shift,
+    forzaRevLimiterTuning: forzaTuning.revLimiter,
+    leftStickDeadzone,
+    rightStickDeadzone
+  };
+  $: savedRailRows = savedDiffRows(profileSaveBaselineConfig, profileDraftSnapshot, {
+    includeForza: selectedTuningScope === 'game',
+    intensityPercent: forzaIntensityPercent
+  });
+  $: unsavedCount = unsavedChangeCount(savedRailRows);
+  $: savedRailProfileName =
+    profiles.find((profile) => profile.id === (selectedOverrideProfileId || activeProfileId))?.name ??
+    'this profile';
+
+  // Discard: put the draft back to the saved baseline. The live controller
+  // sync then pushes the restored values to hardware; the baseline itself is
+  // untouched, so the dirty flag and rail diff clear together.
+  const discardDraftChanges = () => {
+    if (!profileSaveBaselineConfig) return;
+    applyEditableConfig(profileSaveBaselineConfig);
+    scheduleBaseFeelTestRefresh();
+    scheduleLiveControllerConfigSync();
+    setApplyMessage('Unsaved changes discarded', 'info');
+  };
+
+  // Saved-curve ghosts: dashed echo of the saved curve in each editor while
+  // the draft's shape differs from the saved one.
+  const savedCurveShapePath = (
+    side: TriggerSide,
+    saved: EditableControllerConfig | null,
+    displayMode: TriggerCurveDisplayMode
+  ): string | null => {
+    if (!saved) return null;
+    return curveShapeViewFor(
+      triggerCurveEditorContext({
+        side,
+        from: side === 'l2' ? saved.trigger.l2From : saved.trigger.r2From,
+        to: side === 'l2' ? saved.trigger.l2To : saved.trigger.r2To,
+        curve: side === 'l2' ? saved.trigger.l2Curve : saved.trigger.r2Curve,
+        points: side === 'l2' ? saved.trigger.l2CurvePoints : saved.trigger.r2CurvePoints,
+        triggerEffect: saved.trigger.effect,
+        triggerIntensity: saved.trigger.intensity,
+        displayMode,
+        forzaEffects: saved.forza?.effects ?? [],
+        forzaBrakeTuning: normalizeForzaBrakeTuning(saved.forza?.brake),
+        forzaThrottleTuning: normalizeForzaThrottleTuning(saved.forza?.throttle)
+      })
+    ).path;
+  };
+
+  $: l2SavedShapePath = savedCurveShapePath('l2', profileSaveBaselineConfig, triggerCurveDisplayMode);
+  $: r2SavedShapePath = savedCurveShapePath('r2', profileSaveBaselineConfig, triggerCurveDisplayMode);
+  $: l2SavedCurvePath = l2SavedShapePath && l2SavedShapePath !== l2CurveShape.path ? l2SavedShapePath : null;
+  $: r2SavedCurvePath = r2SavedShapePath && r2SavedShapePath !== r2CurveShape.path ? r2SavedShapePath : null;
+
   const forzaEffectState = createForzaEffectState({
     store: {
       get: () => forzaTuning,
@@ -1190,10 +1276,18 @@
     rightStickDeadzone = normalizeStickDeadzone(config.sticks?.rightDeadzone ?? 0);
     forzaTuning = forzaTuningFromConfig(config.forza);
   };
+  // Capture the saved baseline as both a signature (cheap dirty check) and a
+  // config object (saved rail diff + discard target).
+  const captureProfileSaveBaseline = () => {
+    const config = buildControllerConfig();
+    profileSaveBaselineSignature = profileConfigSignature(config);
+    profileSaveBaselineConfig = config;
+  };
+
   const applyControllerConfig = (config: ControllerConfiguration, updateProfileBaseline = true) => {
     currentControllerConfig = config;
     applyEditableConfig(config);
-    if (updateProfileBaseline) profileSaveBaselineSignature = profileConfigSignature(buildControllerConfig());
+    if (updateProfileBaseline) captureProfileSaveBaseline();
   };
 
   const loadControllerConfig = async (controllerId: string) => {
@@ -1201,6 +1295,7 @@
     configLoadError = '';
     currentControllerConfig = null;
     profileSaveBaselineSignature = '';
+    profileSaveBaselineConfig = null;
     try {
       const config = await getControllerConfig(controllerId);
       if (config.controllerId !== controllerId || selectedControllerId !== controllerId) return;
@@ -1313,7 +1408,7 @@
     }
 
     applyEditableConfig(config);
-    profileSaveBaselineSignature = profileConfigSignature(buildControllerConfig());
+    captureProfileSaveBaseline();
   };
 
   const applyTriggerConfig = (trigger: EditableControllerConfig['trigger']) => {
@@ -1686,6 +1781,8 @@
     profileConfigSignature: (config) => profileConfigSignature(config),
     setProfileSaveBaseline: (signature) => {
       profileSaveBaselineSignature = signature;
+      // Saving makes the current draft the new saved truth for the rail diff.
+      profileSaveBaselineConfig = buildControllerConfig();
     },
     saveControllerConfigForProfileTargets,
     setProfileOverrideForTargets: (profileId, gameId) => setProfileOverrideForTargets(profileId, gameId),
@@ -2160,6 +2257,7 @@
         {canRenameSelectedProfile}
         {canDeleteSelectedProfile}
         {profileConfigDirty}
+        unsavedChangeCount={unsavedCount}
         {profileSaveBusy}
         {profileFileBusy}
         {profileSaveAsBusy}
@@ -2246,6 +2344,8 @@
           {r2CurveLive}
           {curveHover}
           {curveDragPoint}
+          {l2SavedCurvePath}
+          {r2SavedCurvePath}
           {l2LivePress}
           {r2LivePress}
           {l2From}
@@ -2331,6 +2431,21 @@
             {@render forzaEffectGroup(lightEffectMetas)}
           {/if}
         </svelte:fragment>
+        <svelte:fragment slot="rail">
+          <SavedRail
+            profileName={savedRailProfileName}
+            rows={savedRailRows}
+            dirtyCount={unsavedCount}
+            previewActive={baseFeelTestActive}
+            previewBusy={baseFeelTestBusy}
+            previewDisabled={!snapshot}
+            saveBusy={profileSaveBusy}
+            canSave={Boolean(selectedActionProfile) && profileConfigDirty}
+            onPreviewFeel={toggleBaseFeelTest}
+            onSave={saveActiveProfile}
+            onDiscard={discardDraftChanges}
+          />
+        </svelte:fragment>
         <svelte:fragment slot="below">
           <!-- Parked until Tasks 8-10 re-home it; nothing previously rendered
                may be lost. Curve reset/test head + base feel strip: -->
diff --git a/web/src/lib/features/haptics/TriggerCurvesPanel.svelte b/web/src/lib/features/haptics/TriggerCurvesPanel.svelte
index 4daa894..23d5623 100644
--- a/web/src/lib/features/haptics/TriggerCurvesPanel.svelte
+++ b/web/src/lib/features/haptics/TriggerCurvesPanel.svelte
@@ -70,6 +70,12 @@
   export let curveHover: CurveHover = null;
   export let curveDragPoint: CurveDragPoint = null;
 
+  // Saved-curve ghosts (Task 7): when the working draft drifts from the saved
+  // profile, the saved curve renders as a dashed ghost behind the live curve.
+  // null means clean (no ghost).
+  export let l2SavedCurvePath: string | null = null;
+  export let r2SavedCurvePath: string | null = null;
+
   export let l2LivePress = 0;
   export let r2LivePress = 0;
   export let l2From = 0;
@@ -177,6 +183,9 @@
           <rect class="curve-range-fill" x={l2CurveShape.rangeStart} y="96" width={l2CurveShape.rangeWidth} height="2.5" rx="1.25" />
           <line class="curve-range-edge" x1={l2CurveShape.rangeStart} y1="0" x2={l2CurveShape.rangeStart} y2="100" />
           <line class="curve-range-edge" x1={l2CurveShape.rangeEnd} y1="0" x2={l2CurveShape.rangeEnd} y2="100" />
+          {#if l2SavedCurvePath}
+            <path class="curve-saved-ghost" d={l2SavedCurvePath} />
+          {/if}
           <path class="curve-force" d={l2CurveShape.path} />
           {#if curveHover?.side === 'l2'}
             <line class="curve-crosshair" x1={curveHover.left.toFixed(2)} y1="0" x2={curveHover.left.toFixed(2)} y2="100" />
@@ -270,6 +279,9 @@
           <rect class="curve-range-fill" x={r2CurveShape.rangeStart} y="96" width={r2CurveShape.rangeWidth} height="2.5" rx="1.25" />
           <line class="curve-range-edge" x1={r2CurveShape.rangeStart} y1="0" x2={r2CurveShape.rangeStart} y2="100" />
           <line class="curve-range-edge" x1={r2CurveShape.rangeEnd} y1="0" x2={r2CurveShape.rangeEnd} y2="100" />
+          {#if r2SavedCurvePath}
+            <path class="curve-saved-ghost" d={r2SavedCurvePath} />
+          {/if}
           <path class="curve-force" d={r2CurveShape.path} />
           {#if curveHover?.side === 'r2'}
             <line class="curve-crosshair" x1={curveHover.left.toFixed(2)} y1="0" x2={curveHover.left.toFixed(2)} y2="100" />
diff --git a/web/src/lib/features/tuning/ProfileMenu.svelte b/web/src/lib/features/tuning/ProfileMenu.svelte
new file mode 100644
index 0000000..a964ce7
--- /dev/null
+++ b/web/src/lib/features/tuning/ProfileMenu.svelte
@@ -0,0 +1,316 @@
+<!--
+  Profile cluster extracted from TuningHeader (Task 7 housekeeping, scheduled
+  in the Task 5 review): the profile dropdown menu, the inline save-as/rename
+  name editors, and the hidden import file input. Pure extraction — behavior
+  matches the in-header version: Escape closes with focus returned to the
+  anchor, Tab closes without stealing focus, any outside pointerdown / window
+  scroll / resize closes without focus return, ArrowUp/ArrowDown cycle items.
+
+  The trigger button stays in TuningHeader (it is header chrome); it is passed
+  in as `anchor` for positioning and focus return, and `open` is bindable so
+  the header toggles it.
+-->
+<script lang="ts">
+  import { tick } from 'svelte';
+  import type { ProfileSummary } from '../../types';
+
+  let {
+    open = $bindable(false),
+    anchor = undefined,
+    profiles = [],
+    selectedProfileId = '',
+    activeProfileId = '',
+    selectedActionProfile = null,
+    canRenameSelectedProfile = false,
+    canDeleteSelectedProfile = false,
+    profileConfigDirty = false,
+    profileSaveBusy = false,
+    profileFileBusy = false,
+    profileSaveAsBusy = false,
+    profileRenameBusy = false,
+    saveAsOpen = false,
+    saveAsName = $bindable(''),
+    renameProfileId = '',
+    renameName = $bindable(''),
+    onSelectProfile = () => {},
+    onSaveProfile = () => {},
+    onBeginSaveAs = () => {},
+    onCancelSaveAs = () => {},
+    onSubmitSaveAs = () => {},
+    onSaveAsKeydown = () => {},
+    onBeginRename = () => {},
+    onCancelRename = () => {},
+    onSubmitRename = () => {},
+    onRenameKeydown = () => {},
+    onDeleteProfile = () => {},
+    onRestoreDefaults = () => {},
+    onImportFile = () => {},
+    onExportProfile = () => {}
+  }: {
+    open?: boolean;
+    anchor?: HTMLButtonElement | undefined;
+    profiles?: ProfileSummary[];
+    selectedProfileId?: string;
+    activeProfileId?: string;
+    selectedActionProfile?: ProfileSummary | null;
+    canRenameSelectedProfile?: boolean;
+    canDeleteSelectedProfile?: boolean;
+    profileConfigDirty?: boolean;
+    profileSaveBusy?: boolean;
+    profileFileBusy?: boolean;
+    profileSaveAsBusy?: boolean;
+    profileRenameBusy?: boolean;
+    saveAsOpen?: boolean;
+    saveAsName?: string;
+    renameProfileId?: string;
+    renameName?: string;
+    onSelectProfile?: (profileId: string) => void | Promise<void>;
+    onSaveProfile?: () => void | Promise<void>;
+    onBeginSaveAs?: () => void;
+    onCancelSaveAs?: () => void;
+    onSubmitSaveAs?: () => void | Promise<void>;
+    onSaveAsKeydown?: (event: KeyboardEvent) => void;
+    onBeginRename?: () => void;
+    onCancelRename?: () => void;
+    onSubmitRename?: () => void | Promise<void>;
+    onRenameKeydown?: (event: KeyboardEvent) => void;
+    onDeleteProfile?: (profile: ProfileSummary) => void | Promise<void>;
+    onRestoreDefaults?: () => void | Promise<void>;
+    onImportFile?: (event: Event) => void | Promise<void>;
+    onExportProfile?: () => void | Promise<void>;
+  } = $props();
+
+  let menuLeft = $state(0);
+  let menuTop = $state(0);
+  let menuEl: HTMLDivElement | undefined = $state();
+  let importInput: HTMLInputElement | undefined = $state();
+  let placedFor: HTMLButtonElement | undefined;
+
+  const closeMenu = (returnFocus = true) => {
+    if (!open) return;
+    open = false;
+    if (returnFocus) anchor?.focus();
+  };
+
+  const menuItems = (): HTMLButtonElement[] =>
+    menuEl ? Array.from(menuEl.querySelectorAll<HTMLButtonElement>('button.tuning-menu-item:not(:disabled)')) : [];
+
+  const focusMenuItem = (index: number) => {
+    const items = menuItems();
+    if (!items.length) return;
+    const next = ((index % items.length) + items.length) % items.length;
+    items[next]?.focus();
+  };
+
+  // Place the menu against the anchor and focus the first item when opened.
+  $effect(() => {
+    if (!open || !anchor) {
+      placedFor = undefined;
+      return;
+    }
+    if (placedFor !== anchor) {
+      placedFor = anchor;
+      const rect = anchor.getBoundingClientRect();
+      menuLeft = Math.max(8, Math.min(rect.left, window.innerWidth - 268));
+      menuTop = Math.min(rect.bottom + 6, window.innerHeight - 60);
+      void tick().then(() => focusMenuItem(0));
+    }
+  });
+
+  const handleMenuKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      closeMenu();
+      return;
+    }
+    if (event.key === 'Tab') {
+      // Close so aria-expanded stays honest, but let Tab move focus naturally.
+      closeMenu(false);
+      return;
+    }
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+    event.preventDefault();
+    const items = menuItems();
+    const current = items.indexOf(document.activeElement as HTMLButtonElement);
+    focusMenuItem(current + (event.key === 'ArrowDown' ? 1 : -1));
+  };
+
+  const handleWindowPointerDown = (event: PointerEvent) => {
+    if (!open) return;
+    const target = event.target as Node;
+    if (menuEl?.contains(target)) return;
+    if (anchor?.contains(target)) return;
+    closeMenu(false);
+  };
+
+  // The menu is position: fixed and placed once at open; any scroll or
+  // resize would leave it floating away from the trigger, so just close.
+  $effect(() => {
+    if (!open) return;
+    const closeOnViewportChange = (event: Event) => {
+      // Ignore scrolls that originate inside the menu itself.
+      if (event.target instanceof Node && menuEl?.contains(event.target)) return;
+      closeMenu(false);
+    };
+    window.addEventListener('scroll', closeOnViewportChange, true);
+    window.addEventListener('resize', closeOnViewportChange);
+    return () => {
+      window.removeEventListener('scroll', closeOnViewportChange, true);
+      window.removeEventListener('resize', closeOnViewportChange);
+    };
+  });
+
+  const pickProfile = (profileId: string) => {
+    closeMenu();
+    if (profileId !== selectedProfileId) void onSelectProfile(profileId);
+  };
+
+  const runProfileAction = (action: () => void | Promise<void>) => {
+    closeMenu();
+    void action();
+  };
+
+  const requestImport = () => {
+    closeMenu();
+    if (!profileFileBusy) importInput?.click();
+  };
+
+  const deleteSelectedProfile = () => {
+    const profile = selectedActionProfile;
+    if (profile) runProfileAction(() => onDeleteProfile(profile));
+  };
+</script>
+
+<svelte:window onpointerdown={handleWindowPointerDown} />
+
+{#if saveAsOpen || renameProfileId}
+  <div class="tuning-profile-editor">
+    {#if saveAsOpen}
+      <label>
+        <span>New profile name</span>
+        <input
+          bind:value={saveAsName}
+          disabled={profileSaveAsBusy}
+          maxlength="80"
+          spellcheck="false"
+          aria-label="New profile name"
+          onkeydown={onSaveAsKeydown}
+        />
+      </label>
+      <button class="dm-mini-button" type="button" disabled={profileSaveAsBusy} onclick={onCancelSaveAs}>Cancel</button>
+      <button
+        class="dm-mini-button primary"
+        type="button"
+        disabled={profileSaveAsBusy || !saveAsName.trim()}
+        onclick={() => void onSubmitSaveAs()}
+      >{profileSaveAsBusy ? 'Saving' : 'Create'}</button>
+    {:else}
+      <label>
+        <span>Profile name</span>
+        <input
+          bind:value={renameName}
+          disabled={profileRenameBusy}
+          maxlength="80"
+          spellcheck="false"
+          aria-label="Profile name"
+          onkeydown={onRenameKeydown}
+        />
+      </label>
+      <button class="dm-mini-button" type="button" disabled={profileRenameBusy} onclick={onCancelRename}>Cancel</button>
+      <button
+        class="dm-mini-button primary"
+        type="button"
+        disabled={profileRenameBusy || !renameName.trim()}
+        onclick={() => void onSubmitRename()}
+      >{profileRenameBusy ? 'Saving' : 'Apply'}</button>
+    {/if}
+  </div>
+{/if}
+
+{#if open}
+  <div
+    class="tuning-menu"
+    role="menu"
+    tabindex="-1"
+    aria-label="Profile actions"
+    bind:this={menuEl}
+    style={`left:${menuLeft}px;top:${menuTop}px;`}
+    onkeydown={handleMenuKeydown}
+  >
+    <div class="tuning-menu-label">Profiles</div>
+    {#each profiles as profile (profile.id)}
+      <button
+        class="tuning-menu-item"
+        class:current={profile.id === selectedProfileId}
+        type="button"
+        role="menuitemradio"
+        aria-checked={profile.id === selectedProfileId}
+        onclick={() => pickProfile(profile.id)}
+      >
+        <span class="tuning-menu-item-text">{profile.name}</span>
+        {#if profile.id === activeProfileId}<span class="tuning-menu-item-meta">live</span>{/if}
+      </button>
+    {/each}
+    <div class="tuning-menu-divider" role="separator"></div>
+    <button
+      class="tuning-menu-item"
+      type="button"
+      role="menuitem"
+      disabled={!selectedActionProfile || profileSaveBusy || !profileConfigDirty}
+      onclick={() => runProfileAction(onSaveProfile)}
+    >
+      <span class="tuning-menu-item-text">{profileSaveBusy ? 'Saving…' : 'Save changes'}</span>
+    </button>
+    <button
+      class="tuning-menu-item"
+      type="button"
+      role="menuitem"
+      disabled={!selectedActionProfile || profileSaveAsBusy}
+      onclick={() => runProfileAction(onBeginSaveAs)}
+    >
+      <span class="tuning-menu-item-text">Duplicate as new profile…</span>
+    </button>
+    <button
+      class="tuning-menu-item"
+      type="button"
+      role="menuitem"
+      disabled={!canRenameSelectedProfile || profileRenameBusy}
+      onclick={() => runProfileAction(onBeginRename)}
+    >
+      <span class="tuning-menu-item-text">Rename…</span>
+    </button>
+    <button
+      class="tuning-menu-item"
+      type="button"
+      role="menuitem"
+      disabled={!canDeleteSelectedProfile || profileFileBusy}
+      onclick={deleteSelectedProfile}
+    >
+      <span class="tuning-menu-item-text">Delete</span>
+    </button>
+    <button class="tuning-menu-item" type="button" role="menuitem" onclick={() => runProfileAction(onRestoreDefaults)}>
+      <span class="tuning-menu-item-text">Reset to profile defaults</span>
+    </button>
+    <div class="tuning-menu-divider" role="separator"></div>
+    <button class="tuning-menu-item" type="button" role="menuitem" disabled={profileFileBusy} onclick={requestImport}>
+      <span class="tuning-menu-item-text">Import profile file…</span>
+    </button>
+    <button
+      class="tuning-menu-item"
+      type="button"
+      role="menuitem"
+      disabled={!selectedProfileId || profileFileBusy}
+      onclick={() => runProfileAction(onExportProfile)}
+    >
+      <span class="tuning-menu-item-text">Export profile file</span>
+    </button>
+  </div>
+{/if}
+
+<input
+  bind:this={importInput}
+  class="ops-hidden-file"
+  type="file"
+  accept="application/json,.json,.dscc-profile"
+  onchange={(event) => void onImportFile(event)}
+/>
diff --git a/web/src/lib/features/tuning/SavedRail.svelte b/web/src/lib/features/tuning/SavedRail.svelte
new file mode 100644
index 0000000..95c2eb7
--- /dev/null
+++ b/web/src/lib/features/tuning/SavedRail.svelte
@@ -0,0 +1,143 @@
+<!--
+  Saved rail (Task 7; layout truth: tuning-canvas-v9 mockup).
+
+  The rail is furniture: fixed --saved-rail-w wide, sticky, docked right of
+  .canvas-grid inside TuningCanvas's .work-and-rail flex wrapper. It never
+  participates in column wrapping. Below 900px the rail hides and this
+  component instead renders a bottom-docked bar (only while dirty) that
+  expands to the full diff list on tap.
+
+  Safety framing (spec §12): Preview feel is always captioned exactly
+  "3s · nothing saved"; Save/Discard say in plain words what they touch.
+-->
+<script lang="ts">
+  import type { SavedDiffRow } from './savedDiff';
+
+  let {
+    profileName = 'profile',
+    rows = [],
+    dirtyCount = 0,
+    previewActive = false,
+    previewBusy = false,
+    previewDisabled = false,
+    saveBusy = false,
+    canSave = false,
+    onPreviewFeel = () => {},
+    onSave = () => {},
+    onDiscard = () => {}
+  }: {
+    profileName?: string;
+    rows?: SavedDiffRow[];
+    dirtyCount?: number;
+    previewActive?: boolean;
+    previewBusy?: boolean;
+    previewDisabled?: boolean;
+    saveBusy?: boolean;
+    canSave?: boolean;
+    onPreviewFeel?: () => void | Promise<void>;
+    onSave?: () => void | Promise<void>;
+    onDiscard?: () => void;
+  } = $props();
+
+  let barExpanded = $state(false);
+
+  // Collapse the expanded phone list once everything is saved or discarded.
+  $effect(() => {
+    if (dirtyCount === 0) barExpanded = false;
+  });
+
+  const changeSummary = $derived(`${dirtyCount} unsaved change${dirtyCount === 1 ? '' : 's'}`);
+</script>
+
+{#snippet diffRows()}
+  {#each rows as item (item.id)}
+    <div class="saved-row" class:dirty={item.dirty}>
+      <span class="saved-row-label">{item.label}</span>
+      <span class="saved-row-value">
+        {#if item.dirty}
+          <s class="saved-row-was">{item.savedValue}</s>
+          <span class="saved-row-now">→ {item.currentValue}</span>
+        {:else}
+          <span class="saved-row-saved">{item.savedValue}</span>
+        {/if}
+      </span>
+    </div>
+  {/each}
+{/snippet}
+
+{#snippet actionButtons()}
+  <button
+    class="saved-save-button"
+    type="button"
+    disabled={!canSave || saveBusy}
+    title={`Writes the current values into ${profileName}. Until then the controller follows your tweaks but the profile keeps its saved values.`}
+    onclick={() => void onSave()}
+  >{saveBusy ? 'Saving…' : 'Save changes'}</button>
+  <button
+    class="saved-discard-button"
+    type="button"
+    disabled={dirtyCount === 0}
+    title={`Throws away the tweaks and puts back what ${profileName} has saved.`}
+    onclick={onDiscard}
+  >Discard</button>
+{/snippet}
+
+<aside class="saved-rail" aria-label="Saved profile values">
+  <div class="saved-rail-title">Saved in {profileName}</div>
+  <div class="saved-rail-rows">
+    {@render diffRows()}
+  </div>
+  <div class="saved-rail-foot">
+    <div class="saved-preview-row">
+      <button
+        class="saved-preview-button"
+        class:active={previewActive}
+        type="button"
+        aria-pressed={previewActive}
+        disabled={previewBusy || previewDisabled}
+        onclick={() => void onPreviewFeel()}
+      >{previewActive ? 'Previewing…' : 'Preview feel'}</button>
+      <span class="saved-preview-note">3s · nothing saved</span>
+    </div>
+    <div class="saved-rail-actions">
+      {@render actionButtons()}
+    </div>
+  </div>
+</aside>
+
+{#if dirtyCount > 0}
+  <div class="saved-mobile-bar" role="region" aria-label="Unsaved changes">
+    {#if barExpanded}
+      <div class="saved-mobile-rows">
+        {@render diffRows()}
+        <div class="saved-preview-row">
+          <button
+            class="saved-preview-button"
+            class:active={previewActive}
+            type="button"
+            aria-pressed={previewActive}
+            disabled={previewBusy || previewDisabled}
+            onclick={() => void onPreviewFeel()}
+          >{previewActive ? 'Previewing…' : 'Preview feel'}</button>
+          <span class="saved-preview-note">3s · nothing saved</span>
+        </div>
+      </div>
+    {/if}
+    <div class="saved-mobile-summary">
+      <button
+        class="saved-mobile-toggle"
+        type="button"
+        aria-expanded={barExpanded}
+        onclick={() => {
+          barExpanded = !barExpanded;
+        }}
+      >
+        <strong>{changeSummary}</strong>
+        <span>· tap to compare</span>
+      </button>
+      <div class="saved-mobile-actions">
+        {@render actionButtons()}
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/web/src/lib/features/tuning/TuningCanvas.svelte b/web/src/lib/features/tuning/TuningCanvas.svelte
index 945c1e3..3ae20f5 100644
--- a/web/src/lib/features/tuning/TuningCanvas.svelte
+++ b/web/src/lib/features/tuning/TuningCanvas.svelte
@@ -4,43 +4,48 @@
   never by control type. Extra width grows the trigger-curve instruments only;
   small columns and sliders keep intrinsic caps so no region stretches dead.
 
-  Task 7 wraps `.canvas-grid` in a `.work-and-rail` flex container and docks
-  the saved rail beside it; keep `.canvas-grid` a direct child here.
+  Task 7: `.canvas-grid` lives inside the `.work-and-rail` flex wrapper with
+  the saved rail (slot "rail") docked beside it. The rail is furniture — fixed
+  width, sticky, outside the column wrap; only the grid reflows.
 
   The `below` slot parks content that has not been re-homed yet (Tasks 8-10
   move it); nothing previously rendered may be lost.
 -->
 
 <section class="tuning-canvas" aria-label="Tuning canvas">
-  <div class="canvas-grid">
-    <section class="col-trigger" aria-label="Brake tuning">
-      <div class="lbl">Brake · L2</div>
-      <div class="canvas-col-body">
-        <slot name="brake" />
-      </div>
-    </section>
-
-    <section class="col-trigger" aria-label="Throttle tuning">
-      <div class="lbl">Throttle · R2</div>
-      <div class="canvas-col-body">
-        <slot name="throttle" />
-      </div>
-    </section>
-
-    <section class="col-small" aria-label="Road feel tuning">
-      <div class="lbl">Road feel</div>
-      <div class="canvas-col-body">
-        <slot name="road" />
-      </div>
-      <p class="canvas-hint">More effects appear here for games that send them.</p>
-    </section>
-
-    <section class="col-small" aria-label="Lights tuning">
-      <div class="lbl">Lights</div>
-      <div class="canvas-col-body">
-        <slot name="lights" />
-      </div>
-    </section>
+  <div class="work-and-rail">
+    <div class="canvas-grid">
+      <section class="col-trigger" aria-label="Brake tuning">
+        <div class="lbl">Brake · L2</div>
+        <div class="canvas-col-body">
+          <slot name="brake" />
+        </div>
+      </section>
+
+      <section class="col-trigger" aria-label="Throttle tuning">
+        <div class="lbl">Throttle · R2</div>
+        <div class="canvas-col-body">
+          <slot name="throttle" />
+        </div>
+      </section>
+
+      <section class="col-small" aria-label="Road feel tuning">
+        <div class="lbl">Road feel</div>
+        <div class="canvas-col-body">
+          <slot name="road" />
+        </div>
+        <p class="canvas-hint">More effects appear here for games that send them.</p>
+      </section>
+
+      <section class="col-small" aria-label="Lights tuning">
+        <div class="lbl">Lights</div>
+        <div class="canvas-col-body">
+          <slot name="lights" />
+        </div>
+      </section>
+    </div>
+
+    <slot name="rail" />
   </div>
 
   {#if $$slots.below}
diff --git a/web/src/lib/features/tuning/TuningHeader.svelte b/web/src/lib/features/tuning/TuningHeader.svelte
index 9b68c3c..1401c61 100644
--- a/web/src/lib/features/tuning/TuningHeader.svelte
+++ b/web/src/lib/features/tuning/TuningHeader.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { tick } from 'svelte';
   import InitialBadge from '../../../components/InitialBadge.svelte';
+  import ProfileMenu from './ProfileMenu.svelte';
   import { gameAccentColor, gameArtwork } from '../games/gamePresentation';
   import { controllerModelText } from '../../controllerDisplay';
   import {
@@ -25,6 +26,7 @@
     canRenameSelectedProfile = false,
     canDeleteSelectedProfile = false,
     profileConfigDirty = false,
+    unsavedChangeCount = 0,
     profileSaveBusy = false,
     profileFileBusy = false,
     profileSaveAsBusy = false,
@@ -64,6 +66,7 @@
     canRenameSelectedProfile?: boolean;
     canDeleteSelectedProfile?: boolean;
     profileConfigDirty?: boolean;
+    unsavedChangeCount?: number;
     profileSaveBusy?: boolean;
     profileFileBusy?: boolean;
     profileSaveAsBusy?: boolean;
@@ -117,41 +120,49 @@
       ? `${controller.battery}%`
       : ''
   );
+  const unsavedNote = $derived(
+    unsavedChangeCount > 0
+      ? `· ${unsavedChangeCount} unsaved change${unsavedChangeCount === 1 ? '' : 's'}`
+      : profileConfigDirty
+        ? '· unsaved changes'
+        : ''
+  );
 
-  // --- menu state -----------------------------------------------------------
-  type MenuKind = 'game' | 'profile';
-  let openMenu = $state<MenuKind | null>(null);
+  // --- game menu state (the profile menu lives in ProfileMenu.svelte) -------
+  let gameMenuOpen = $state(false);
+  let profileMenuOpen = $state(false);
   let menuLeft = $state(0);
   let menuTop = $state(0);
   let gameTrigger: HTMLButtonElement | undefined = $state();
   let profileTrigger: HTMLButtonElement | undefined = $state();
   let menuEl: HTMLDivElement | undefined = $state();
-  let importInput: HTMLInputElement | undefined = $state();
-
-  const triggerFor = (kind: MenuKind) => (kind === 'game' ? gameTrigger : profileTrigger);
 
-  const closeMenu = (returnFocus = true) => {
-    if (!openMenu) return;
-    const trigger = triggerFor(openMenu);
-    openMenu = null;
-    if (returnFocus) trigger?.focus();
+  const closeGameMenu = (returnFocus = true) => {
+    if (!gameMenuOpen) return;
+    gameMenuOpen = false;
+    if (returnFocus) gameTrigger?.focus();
   };
 
-  const openMenuFor = async (kind: MenuKind) => {
-    if (openMenu === kind) {
-      closeMenu();
+  const toggleGameMenu = async () => {
+    profileMenuOpen = false;
+    if (gameMenuOpen) {
+      closeGameMenu();
       return;
     }
-    const trigger = triggerFor(kind);
-    if (!trigger) return;
-    const rect = trigger.getBoundingClientRect();
+    if (!gameTrigger) return;
+    const rect = gameTrigger.getBoundingClientRect();
     menuLeft = Math.max(8, Math.min(rect.left, window.innerWidth - 268));
     menuTop = Math.min(rect.bottom + 6, window.innerHeight - 60);
-    openMenu = kind;
+    gameMenuOpen = true;
     await tick();
     focusMenuItem(0);
   };
 
+  const toggleProfileMenu = () => {
+    closeGameMenu(false);
+    profileMenuOpen = !profileMenuOpen;
+  };
+
   const menuItems = (): HTMLButtonElement[] =>
     menuEl ? Array.from(menuEl.querySelectorAll<HTMLButtonElement>('button.tuning-menu-item:not(:disabled)')) : [];
 
@@ -165,12 +176,12 @@
   const handleMenuKeydown = (event: KeyboardEvent) => {
     if (event.key === 'Escape') {
       event.preventDefault();
-      closeMenu();
+      closeGameMenu();
       return;
     }
     if (event.key === 'Tab') {
       // Close so aria-expanded stays honest, but let Tab move focus naturally.
-      closeMenu(false);
+      closeGameMenu(false);
       return;
     }
     if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
@@ -181,21 +192,21 @@
   };
 
   const handleWindowPointerDown = (event: PointerEvent) => {
-    if (!openMenu) return;
+    if (!gameMenuOpen) return;
     const target = event.target as Node;
     if (menuEl?.contains(target)) return;
-    if (triggerFor(openMenu)?.contains(target)) return;
-    closeMenu(false);
+    if (gameTrigger?.contains(target)) return;
+    closeGameMenu(false);
   };
 
-  // The menus are position: fixed and placed once at open; any scroll or
-  // resize would leave them floating away from the trigger, so just close.
+  // The menu is position: fixed and placed once at open; any scroll or
+  // resize would leave it floating away from the trigger, so just close.
   $effect(() => {
-    if (!openMenu) return;
+    if (!gameMenuOpen) return;
     const closeOnViewportChange = (event: Event) => {
       // Ignore scrolls that originate inside the menu itself.
       if (event.target instanceof Node && menuEl?.contains(event.target)) return;
-      closeMenu(false);
+      closeGameMenu(false);
     };
     window.addEventListener('scroll', closeOnViewportChange, true);
     window.addEventListener('resize', closeOnViewportChange);
@@ -207,31 +218,11 @@
 
   const pickGameEntry = (entry: GameSelectEntry) => {
     if (entry.kind === 'setup-guide') return;
-    closeMenu();
+    closeGameMenu();
     if (entry.kind === 'everyday') void onSelectGlobal();
     else if (entry.kind === 'game') void onSelectGame(entry.game);
     else if (entry.kind === 'add-game') void onOpenAddGame();
   };
-
-  const pickProfile = (profileId: string) => {
-    closeMenu();
-    if (profileId !== selectedProfileId) void onSelectProfile(profileId);
-  };
-
-  const runProfileAction = (action: () => void | Promise<void>) => {
-    closeMenu();
-    void action();
-  };
-
-  const requestImport = () => {
-    closeMenu();
-    if (!profileFileBusy) importInput?.click();
-  };
-
-  const deleteSelectedProfile = () => {
-    const profile = selectedActionProfile;
-    if (profile) runProfileAction(() => onDeleteProfile(profile));
-  };
 </script>
 
 <svelte:window onpointerdown={handleWindowPointerDown} />
@@ -262,8 +253,8 @@
             type="button"
             bind:this={gameTrigger}
             aria-haspopup="menu"
-            aria-expanded={openMenu === 'game'}
-            onclick={() => void openMenuFor('game')}
+            aria-expanded={gameMenuOpen}
+            onclick={() => void toggleGameMenu()}
           >
             <strong>{gameModel.title}</strong>
             <span class="tuning-caret" aria-hidden="true">▾</span>
@@ -287,16 +278,16 @@
             type="button"
             bind:this={profileTrigger}
             aria-haspopup="menu"
-            aria-expanded={openMenu === 'profile'}
+            aria-expanded={profileMenuOpen}
             disabled={!profiles.length}
-            onclick={() => void openMenuFor('profile')}
+            onclick={toggleProfileMenu}
           >
             <span class="tuning-profile-label">Profile:</span>
             <strong>{profileName}</strong>
             <span class="tuning-caret" aria-hidden="true">▾</span>
           </button>
-          {#if profileConfigDirty}
-            <span class="tuning-unsaved-note">· unsaved changes</span>
+          {#if unsavedNote}
+            <span class="tuning-unsaved-note">{unsavedNote}</span>
           {/if}
         </div>
       </div>
@@ -313,51 +304,41 @@
   </div>
 </header>
 
-{#if saveAsOpen || renameProfileId}
-  <div class="tuning-profile-editor">
-    {#if saveAsOpen}
-      <label>
-        <span>New profile name</span>
-        <input
-          bind:value={saveAsName}
-          disabled={profileSaveAsBusy}
-          maxlength="80"
-          spellcheck="false"
-          aria-label="New profile name"
-          onkeydown={onSaveAsKeydown}
-        />
-      </label>
-      <button class="dm-mini-button" type="button" disabled={profileSaveAsBusy} onclick={onCancelSaveAs}>Cancel</button>
-      <button
-        class="dm-mini-button primary"
-        type="button"
-        disabled={profileSaveAsBusy || !saveAsName.trim()}
-        onclick={() => void onSubmitSaveAs()}
-      >{profileSaveAsBusy ? 'Saving' : 'Create'}</button>
-    {:else}
-      <label>
-        <span>Profile name</span>
-        <input
-          bind:value={renameName}
-          disabled={profileRenameBusy}
-          maxlength="80"
-          spellcheck="false"
-          aria-label="Profile name"
-          onkeydown={onRenameKeydown}
-        />
-      </label>
-      <button class="dm-mini-button" type="button" disabled={profileRenameBusy} onclick={onCancelRename}>Cancel</button>
-      <button
-        class="dm-mini-button primary"
-        type="button"
-        disabled={profileRenameBusy || !renameName.trim()}
-        onclick={() => void onSubmitRename()}
-      >{profileRenameBusy ? 'Saving' : 'Apply'}</button>
-    {/if}
-  </div>
-{/if}
+<ProfileMenu
+  bind:open={profileMenuOpen}
+  anchor={profileTrigger}
+  {profiles}
+  {selectedProfileId}
+  {activeProfileId}
+  {selectedActionProfile}
+  {canRenameSelectedProfile}
+  {canDeleteSelectedProfile}
+  {profileConfigDirty}
+  {profileSaveBusy}
+  {profileFileBusy}
+  {profileSaveAsBusy}
+  {profileRenameBusy}
+  {saveAsOpen}
+  bind:saveAsName
+  {renameProfileId}
+  bind:renameName
+  {onSelectProfile}
+  {onSaveProfile}
+  {onBeginSaveAs}
+  {onCancelSaveAs}
+  {onSubmitSaveAs}
+  {onSaveAsKeydown}
+  {onBeginRename}
+  {onCancelRename}
+  {onSubmitRename}
+  {onRenameKeydown}
+  {onDeleteProfile}
+  {onRestoreDefaults}
+  {onImportFile}
+  {onExportProfile}
+/>
 
-{#if openMenu === 'game'}
+{#if gameMenuOpen}
   <div
     class="tuning-menu"
     role="menu"
@@ -416,91 +397,3 @@
     {/each}
   </div>
 {/if}
-
-{#if openMenu === 'profile'}
-  <div
-    class="tuning-menu"
-    role="menu"
-    tabindex="-1"
-    aria-label="Profile actions"
-    bind:this={menuEl}
-    style={`left:${menuLeft}px;top:${menuTop}px;`}
-    onkeydown={handleMenuKeydown}
-  >
-    <div class="tuning-menu-label">Profiles</div>
-    {#each profiles as profile (profile.id)}
-      <button
-        class="tuning-menu-item"
-        class:current={profile.id === selectedProfileId}
-        type="button"
-        role="menuitemradio"
-        aria-checked={profile.id === selectedProfileId}
-        onclick={() => pickProfile(profile.id)}
-      >
-        <span class="tuning-menu-item-text">{profile.name}</span>
-        {#if profile.id === activeProfileId}<span class="tuning-menu-item-meta">live</span>{/if}
-      </button>
-    {/each}
-    <div class="tuning-menu-divider" role="separator"></div>
-    <button
-      class="tuning-menu-item"
-      type="button"
-      role="menuitem"
-      disabled={!selectedActionProfile || profileSaveBusy || !profileConfigDirty}
-      onclick={() => runProfileAction(onSaveProfile)}
-    >
-      <span class="tuning-menu-item-text">{profileSaveBusy ? 'Saving…' : 'Save changes'}</span>
-    </button>
-    <button
-      class="tuning-menu-item"
-      type="button"
-      role="menuitem"
-      disabled={!selectedActionProfile || profileSaveAsBusy}
-      onclick={() => runProfileAction(onBeginSaveAs)}
-    >
-      <span class="tuning-menu-item-text">Duplicate as new profile…</span>
-    </button>
-    <button
-      class="tuning-menu-item"
-      type="button"
-      role="menuitem"
-      disabled={!canRenameSelectedProfile || profileRenameBusy}
-      onclick={() => runProfileAction(onBeginRename)}
-    >
-      <span class="tuning-menu-item-text">Rename…</span>
-    </button>
-    <button
-      class="tuning-menu-item"
-      type="button"
-      role="menuitem"
-      disabled={!canDeleteSelectedProfile || profileFileBusy}
-      onclick={deleteSelectedProfile}
-    >
-      <span class="tuning-menu-item-text">Delete</span>
-    </button>
-    <button class="tuning-menu-item" type="button" role="menuitem" onclick={() => runProfileAction(onRestoreDefaults)}>
-      <span class="tuning-menu-item-text">Reset to profile defaults</span>
-    </button>
-    <div class="tuning-menu-divider" role="separator"></div>
-    <button class="tuning-menu-item" type="button" role="menuitem" disabled={profileFileBusy} onclick={requestImport}>
-      <span class="tuning-menu-item-text">Import profile file…</span>
-    </button>
-    <button
-      class="tuning-menu-item"
-      type="button"
-      role="menuitem"
-      disabled={!selectedProfileId || profileFileBusy}
-      onclick={() => runProfileAction(onExportProfile)}
-    >
-      <span class="tuning-menu-item-text">Export profile file</span>
-    </button>
-  </div>
-{/if}
-
-<input
-  bind:this={importInput}
-  class="ops-hidden-file"
-  type="file"
-  accept="application/json,.json,.dscc-profile"
-  onchange={(event) => void onImportFile(event)}
-/>
diff --git a/web/src/lib/features/tuning/savedDiff.ts b/web/src/lib/features/tuning/savedDiff.ts
new file mode 100644
index 0000000..439bb11
--- /dev/null
+++ b/web/src/lib/features/tuning/savedDiff.ts
@@ -0,0 +1,302 @@
+// Saved-vs-draft diff for the tuning saved rail (Task 7).
+//
+// Pure and total: given the SAVED profile config (the baseline captured when a
+// profile is loaded or saved) and the current working draft values, derive
+// human-labeled rows covering the tunable surface. Dirty rows carry both the
+// saved and current value formatted for display; the rail renders
+// `saved (strikethrough) → current`, clean rows show the saved value muted.
+//
+// Comparison normalizes through the same helpers the draft/save path uses
+// (hapticsModel normalizers) so the diff agrees with the signature-based
+// `profileConfigDirty` flag in App.svelte.
+
+import {
+  defaultTriggerCurve,
+  normalizeStickDeadzone,
+  normalizeTriggerCurve,
+  normalizeTriggerCurvePoints,
+  normalizeTriggerPercent
+} from '../haptics/hapticsModel';
+import { forzaEffectMetas, forzaRoutes } from '../haptics/hapticsOptions';
+import type {
+  ControllerConfiguration,
+  ForzaAbsTuningConfiguration,
+  ForzaBodyRumbleMode,
+  ForzaBrakeTuningConfiguration,
+  ForzaEffectConfiguration,
+  ForzaRevLimiterTuningConfiguration,
+  ForzaShiftTuningConfiguration,
+  ForzaThrottleTuningConfiguration,
+  TriggerCurvePoint
+} from '../../types';
+
+export type SavedDiffRow = {
+  id: string;
+  label: string;
+  savedValue: string;
+  currentValue: string;
+  dirty: boolean;
+};
+
+/** The saved baseline: the editable slice of a controller configuration. */
+export type SavedProfileConfig = Pick<
+  ControllerConfiguration,
+  'trigger' | 'lightbar' | 'forza' | 'sticks'
+>;
+
+/** Structural mirror of App's working-draft values (app/profileDraft.ts). */
+export type SavedDiffDraft = {
+  l2From: number;
+  l2To: number;
+  r2From: number;
+  r2To: number;
+  l2Curve: number;
+  r2Curve: number;
+  l2CurvePoints: TriggerCurvePoint[];
+  r2CurvePoints: TriggerCurvePoint[];
+  triggerEffect: string;
+  triggerIntensity: string;
+  vibrationIntensity: string;
+  vibrationMode: string;
+  lightbarEnabled: boolean;
+  lightbarColor: string;
+  rpmColor: string;
+  lightbarBrightness: number;
+  forzaBodyRumbleMode: ForzaBodyRumbleMode;
+  forzaEffects: ForzaEffectConfiguration[];
+  forzaBrakeTuning: ForzaBrakeTuningConfiguration;
+  forzaAbsTuning: ForzaAbsTuningConfiguration;
+  forzaThrottleTuning: ForzaThrottleTuningConfiguration;
+  forzaShiftTuning: ForzaShiftTuningConfiguration;
+  forzaRevLimiterTuning: ForzaRevLimiterTuningConfiguration;
+  leftStickDeadzone: number;
+  rightStickDeadzone: number;
+};
+
+export type SavedDiffOptions = {
+  /** Include the telemetry effect/tuning rows (game scope only). */
+  includeForza: boolean;
+  /** Maps a raw 0-255 effect intensity to a display percent (hapticsState). */
+  intensityPercent: (intensity: number) => number;
+};
+
+const routeLabelByValue = new Map(forzaRoutes.map((route) => [route.value as string, route.label]));
+
+const routeLabel = (route: string) => routeLabelByValue.get(route) ?? route;
+
+const roundish = (value: number) => Math.round(value * 1000) / 1000;
+
+const numbersEqual = (a: number, b: number) => roundish(a) === roundish(b);
+
+const pointsEqual = (a: TriggerCurvePoint[], b: TriggerCurvePoint[]) =>
+  a.length === b.length &&
+  a.every(
+    (point, index) =>
+      numbersEqual(point.input, b[index].input) && numbersEqual(point.output, b[index].output)
+  );
+
+type NormalizedCurve = {
+  from: number;
+  to: number;
+  curve: number;
+  points: TriggerCurvePoint[];
+};
+
+const normalizedCurve = (
+  side: 'l2' | 'r2',
+  from: number,
+  to: number,
+  curve: number,
+  points: TriggerCurvePoint[] | undefined
+): NormalizedCurve => {
+  const safeFrom = normalizeTriggerPercent(from);
+  const safeTo = Math.max(safeFrom, normalizeTriggerPercent(to));
+  const safeCurve = normalizeTriggerCurve(curve, defaultTriggerCurve(side));
+  return {
+    from: safeFrom,
+    to: safeTo,
+    curve: safeCurve,
+    points: normalizeTriggerCurvePoints(points, safeCurve)
+  };
+};
+
+const formatRange = (value: NormalizedCurve) => `${value.from}–${value.to}%`;
+
+const formatCurve = (value: NormalizedCurve) =>
+  `x${value.curve.toFixed(2)} · ${value.points.length} pts`;
+
+const row = (
+  id: string,
+  label: string,
+  savedValue: string,
+  currentValue: string,
+  dirty = savedValue !== currentValue
+): SavedDiffRow => ({ id, label, savedValue, currentValue, dirty });
+
+/** A generic per-field comparison for the deep telemetry tuning groups. */
+const tuningGroupRow = <T extends object>(
+  id: string,
+  label: string,
+  saved: T,
+  current: T
+): SavedDiffRow => {
+  const keys = Object.keys(saved) as Array<keyof T>;
+  let changed = 0;
+  for (const key of keys) {
+    const savedValue = saved[key];
+    const currentValue = current[key];
+    if (typeof savedValue === 'number' && typeof currentValue === 'number') {
+      if (!numbersEqual(savedValue, currentValue)) changed += 1;
+    } else if (savedValue !== currentValue) {
+      changed += 1;
+    }
+  }
+  const clean = `${keys.length} settings`;
+  return changed > 0
+    ? row(id, label, 'saved', `${changed} edited`, true)
+    : row(id, label, clean, clean, false);
+};
+
+const effectValue = (
+  effect: ForzaEffectConfiguration,
+  intensityPercent: SavedDiffOptions['intensityPercent']
+) => (effect.enabled ? `${intensityPercent(effect.intensity)}% · ${routeLabel(effect.route)}` : 'Off');
+
+const effectById = (
+  effects: ForzaEffectConfiguration[],
+  id: string,
+  fallback: ForzaEffectConfiguration
+) => effects.find((effect) => effect.id === id) ?? fallback;
+
+const curveRows = (
+  side: 'l2' | 'r2',
+  label: string,
+  saved: SavedProfileConfig,
+  draft: SavedDiffDraft
+): SavedDiffRow[] => {
+  const savedCurve = normalizedCurve(
+    side,
+    saved.trigger[`${side}From`],
+    saved.trigger[`${side}To`],
+    saved.trigger[`${side}Curve`],
+    saved.trigger[`${side}CurvePoints`]
+  );
+  const draftCurve = normalizedCurve(
+    side,
+    draft[`${side}From`],
+    draft[`${side}To`],
+    draft[`${side}Curve`],
+    draft[`${side}CurvePoints`]
+  );
+
+  const curveDirty =
+    !numbersEqual(savedCurve.curve, draftCurve.curve) ||
+    !pointsEqual(savedCurve.points, draftCurve.points);
+  const savedLabel = formatCurve(savedCurve);
+  let currentLabel = formatCurve(draftCurve);
+  // A moved point can leave the summary text identical; say so in plain words.
+  if (curveDirty && currentLabel === savedLabel) currentLabel = 'reshaped';
+
+  return [
+    row(`${side}-range`, `${label} range`, formatRange(savedCurve), formatRange(draftCurve)),
+    row(`${side}-curve`, `${label} curve`, savedLabel, currentLabel, curveDirty)
+  ];
+};
+
+/**
+ * Derive the saved-vs-current rows for the saved rail.
+ *
+ * Returns [] when there is no saved baseline yet (config still loading).
+ */
+export const savedDiffRows = (
+  saved: SavedProfileConfig | null | undefined,
+  draft: SavedDiffDraft,
+  options: SavedDiffOptions
+): SavedDiffRow[] => {
+  if (!saved) return [];
+
+  const rows: SavedDiffRow[] = [
+    ...curveRows('l2', 'Brake', saved, draft),
+    ...curveRows('r2', 'Throttle', saved, draft),
+    row('trigger-mode', 'Trigger mode', saved.trigger.effect, draft.triggerEffect),
+    row('trigger-force', 'Trigger force', saved.trigger.intensity, draft.triggerIntensity),
+    row('body-rumble', 'Body rumble', saved.trigger.vibration, draft.vibrationIntensity),
+    row(
+      'body-feel',
+      'Body feel',
+      saved.trigger.vibrationMode ?? 'Balanced',
+      draft.vibrationMode
+    ),
+    row(
+      'lightbar',
+      'Lightbar',
+      saved.lightbar?.enabled ?? true
+        ? `On · ${normalizeTriggerPercent(saved.lightbar?.brightness ?? 72)}%`
+        : 'Off',
+      draft.lightbarEnabled ? `On · ${normalizeTriggerPercent(draft.lightbarBrightness)}%` : 'Off'
+    ),
+    row(
+      'lightbar-color',
+      'Lightbar color',
+      (saved.lightbar?.color ?? '#4cc9f0').toLowerCase(),
+      draft.lightbarColor.toLowerCase()
+    ),
+    row(
+      'redline-color',
+      'Redline color',
+      (saved.lightbar?.rpmColor ?? '#ff3a2e').toLowerCase(),
+      draft.rpmColor.toLowerCase()
+    ),
+    row(
+      'left-deadzone',
+      'Left stick deadzone',
+      `${normalizeStickDeadzone(saved.sticks?.leftDeadzone ?? 0)}%`,
+      `${normalizeStickDeadzone(draft.leftStickDeadzone)}%`
+    ),
+    row(
+      'right-deadzone',
+      'Right stick deadzone',
+      `${normalizeStickDeadzone(saved.sticks?.rightDeadzone ?? 0)}%`,
+      `${normalizeStickDeadzone(draft.rightStickDeadzone)}%`
+    )
+  ];
+
+  if (options.includeForza) {
+    const savedMode = saved.forza?.bodyRumbleMode ?? 'native_passthrough';
+    const modeLabel = (mode: ForzaBodyRumbleMode) =>
+      mode === 'dscc_full_control' ? 'DSCC full control' : 'Game native';
+    rows.push(row('rumble-source', 'Rumble source', modeLabel(savedMode), modeLabel(draft.forzaBodyRumbleMode)));
+
+    const savedEffects = saved.forza?.effects ?? [];
+    for (const meta of forzaEffectMetas) {
+      const fallback: ForzaEffectConfiguration = {
+        id: meta.id,
+        enabled: true,
+        intensity: meta.defaultIntensity,
+        route: meta.defaultRoute
+      };
+      const savedEffect = effectById(savedEffects, meta.id, fallback);
+      const draftEffect = effectById(draft.forzaEffects, meta.id, fallback);
+      rows.push(
+        row(
+          `effect-${meta.id}`,
+          meta.label,
+          effectValue(savedEffect, options.intensityPercent),
+          effectValue(draftEffect, options.intensityPercent)
+        )
+      );
+    }
+
+    if (saved.forza?.brake) rows.push(tuningGroupRow('brake-detail', 'Brake feel detail', saved.forza.brake, draft.forzaBrakeTuning));
+    if (saved.forza?.abs) rows.push(tuningGroupRow('abs-detail', 'ABS detail', saved.forza.abs, draft.forzaAbsTuning));
+    if (saved.forza?.throttle) rows.push(tuningGroupRow('throttle-detail', 'Throttle feel detail', saved.forza.throttle, draft.forzaThrottleTuning));
+    if (saved.forza?.shift) rows.push(tuningGroupRow('shift-detail', 'Gear-shift detail', saved.forza.shift, draft.forzaShiftTuning));
+    if (saved.forza?.revLimiter) rows.push(tuningGroupRow('rev-detail', 'Rev limiter detail', saved.forza.revLimiter, draft.forzaRevLimiterTuning));
+  }
+
+  return rows;
+};
+
+/** Count of dirty rows — drives the header "N unsaved changes" note. */
+export const unsavedChangeCount = (rows: SavedDiffRow[]) =>
+  rows.reduce((count, item) => count + (item.dirty ? 1 : 0), 0);
diff --git a/web/src/styles/haptics/curves.css b/web/src/styles/haptics/curves.css
index b30cb9b..9fb952a 100644
--- a/web/src/styles/haptics/curves.css
+++ b/web/src/styles/haptics/curves.css
@@ -71,6 +71,7 @@
 
 .dm-trigger-curve .curve-grid,
 .dm-trigger-curve .curve-linear,
+.dm-trigger-curve .curve-saved-ghost,
 .dm-trigger-curve .curve-force,
 .dm-trigger-curve .curve-range-edge,
 .dm-trigger-curve .curve-live,
@@ -100,6 +101,16 @@
   stroke-width: 0.85;
 }
 
+/* Saved-profile ghost (Task 7): dashed echo of the saved curve while the
+   working draft drifts; sits behind the live force curve. */
+.dm-trigger-curve .curve-saved-ghost {
+  stroke: rgba(214, 214, 220, 0.55);
+  stroke-dasharray: 5 4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.4;
+}
+
 .dm-trigger-curve .curve-force {
   filter: url(#dm-blue-glow);
   stroke: var(--actuation);
diff --git a/web/src/styles/tuning.css b/web/src/styles/tuning.css
index ec1ca33..2535398 100644
--- a/web/src/styles/tuning.css
+++ b/web/src/styles/tuning.css
@@ -450,6 +450,233 @@
   max-width: var(--slider-cap);
 }
 
+/* --- saved rail (Task 7; layout truth tuning-canvas-v9) ---------------------
+
+   THE RULE: the rail is furniture. Fixed --saved-rail-w, sticky, docked right
+   of .canvas-grid, never part of the column wrap. Below 900px it hides and a
+   bottom-docked bar takes over (rendered only while changes are unsaved). */
+
+.work-and-rail {
+  display: flex;
+  align-items: flex-start;
+}
+
+.saved-rail {
+  flex: 0 0 var(--saved-rail-w);
+  position: sticky;
+  top: 14px;
+  margin: 14px 16px 18px 0;
+  padding: 12px 14px;
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-m);
+}
+
+.saved-rail-title {
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.saved-rail-rows {
+  margin-top: 6px;
+  max-height: min(48vh, 420px);
+  overflow-y: auto;
+}
+
+.saved-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 4px 0;
+  border-bottom: 1px solid var(--hairline);
+  font-size: 11px;
+}
+
+.saved-row:last-child {
+  border-bottom: 0;
+}
+
+.saved-row-label {
+  color: var(--ink);
+  min-width: 0;
+}
+
+.saved-row-value {
+  flex: 0 1 auto;
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.saved-row-saved,
+.saved-row-was {
+  color: var(--ink-muted);
+}
+
+.saved-row-now {
+  color: var(--accent-text);
+  font-weight: 600;
+}
+
+.saved-rail-foot {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid var(--hairline-strong);
+}
+
+.saved-preview-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.saved-preview-button {
+  background: var(--accent-tint);
+  color: var(--accent-text);
+  border: 0;
+  border-radius: var(--radius-s);
+  padding: 5px 12px;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.saved-preview-button.active {
+  box-shadow: inset 0 0 0 1px var(--accent-outline);
+}
+
+.saved-preview-button:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.saved-preview-note {
+  font-size: 9px;
+  color: var(--ink-muted);
+  white-space: nowrap;
+}
+
+.saved-rail-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.saved-save-button {
+  flex: 1;
+  background: var(--accent);
+  color: #fff;
+  border: 0;
+  border-radius: var(--radius-s);
+  padding: 5px 0;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.saved-discard-button {
+  flex: 0 0 auto;
+  background: var(--surface-raised);
+  color: var(--ink-muted);
+  border: 0;
+  border-radius: var(--radius-s);
+  padding: 5px 12px;
+  font-family: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.saved-save-button:disabled,
+.saved-discard-button:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+/* <900px: the rail becomes a bottom-docked bar with the same Save/Discard,
+   expanding to the full saved list on tap. Hidden entirely while clean
+   (the bar only renders when dirty). */
+.saved-mobile-bar {
+  display: none;
+  position: fixed;
+  right: 12px;
+  bottom: 12px;
+  z-index: var(--z-sticky);
+  /* 100% (the fixed-position containing block) rather than 100vw: the
+     viewport unit includes the document scrollbar and overhangs the edge. */
+  width: min(420px, calc(100% - 24px));
+  background: var(--surface);
+  border: 1px solid var(--accent-outline);
+  border-radius: var(--radius-m);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
+}
+
+.saved-mobile-rows {
+  padding: 8px 12px 0;
+  max-height: min(46vh, 360px);
+  overflow-y: auto;
+}
+
+.saved-mobile-rows .saved-preview-row {
+  padding: 8px 0;
+}
+
+.saved-mobile-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+}
+
+.saved-mobile-toggle {
+  background: none;
+  border: 0;
+  padding: 0;
+  font-family: inherit;
+  font-size: 11px;
+  color: var(--ink-muted);
+  cursor: pointer;
+  min-width: 0;
+  text-align: left;
+}
+
+.saved-mobile-toggle strong {
+  color: var(--accent-text);
+  font-weight: 600;
+}
+
+.saved-mobile-actions {
+  display: flex;
+  gap: 8px;
+  flex: 0 0 auto;
+}
+
+.saved-mobile-actions .saved-save-button {
+  flex: 0 0 auto;
+  padding: 4px 10px;
+}
+
+.saved-mobile-actions .saved-discard-button {
+  padding: 4px 10px;
+}
+
+@media (max-width: 900px) {
+  .saved-rail {
+    display: none;
+  }
+
+  .saved-mobile-bar {
+    display: block;
+  }
+}
+
 /* Content parked below the grid until Tasks 8-10 re-home it. */
 .canvas-below {
   display: grid;

From 9fb34d2dc5a202efa0948473ae2d82b81fc3361b Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 21:29:23 -0500
Subject: [PATCH 15/23] ui-rework: coherent save/discard gating, shared default
 constants, cleaner group rows

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/App.svelte                           | 24 +++++++------
 web/src/app/profileDraft.ts                  | 27 +++++++++------
 web/src/lib/features/haptics/hapticsModel.ts | 11 +++++-
 web/src/lib/features/tuning/SavedRail.svelte | 36 +++++++++++++++-----
 web/src/lib/features/tuning/savedDiff.ts     | 26 +++++++++-----
 5 files changed, 86 insertions(+), 38 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index 64db703..3345016 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -89,6 +89,10 @@
   import { savedDiffRows, unsavedChangeCount } from './lib/features/tuning/savedDiff';
   import {
     clampUnit,
+    DEFAULT_BODY_FEEL,
+    DEFAULT_LIGHTBAR_BRIGHTNESS,
+    DEFAULT_LIGHTBAR_COLOR,
+    DEFAULT_REDLINE_COLOR,
     defaultTriggerCurve,
     defaultTriggerCurvePoints,
     type ForzaEffectMeta,
@@ -321,7 +325,7 @@
   let triggerEffect = 'Adaptive resistance';
   let triggerIntensity = 'Strong (Standard)';
   let vibrationIntensity = 'Medium';
-  let vibrationMode = 'Balanced';
+  let vibrationMode: string = DEFAULT_BODY_FEEL;
   let forzaTuning: ForzaTuningValues = defaultForzaTuningValues();
   $: forzaBodyRumbleMode = forzaTuning.bodyRumbleMode;
   $: forzaEffects = forzaTuning.effects;
@@ -331,9 +335,9 @@
   $: forzaShiftTuning = forzaTuning.shift;
   $: forzaRevLimiterTuning = forzaTuning.revLimiter;
   let lightbarEnabled = true;
-  let lightbarColor = '#4cc9f0';
-  let rpmColor = '#ff3a2e';
-  let lightbarBrightness = 72;
+  let lightbarColor: string = DEFAULT_LIGHTBAR_COLOR;
+  let rpmColor: string = DEFAULT_REDLINE_COLOR;
+  let lightbarBrightness: number = DEFAULT_LIGHTBAR_BRIGHTNESS;
   let leftStickDeadzone = 0;
   let rightStickDeadzone = 0;
 
@@ -1267,11 +1271,11 @@
     triggerEffect = config.trigger.effect;
     triggerIntensity = config.trigger.intensity;
     vibrationIntensity = config.trigger.vibration;
-    vibrationMode = config.trigger.vibrationMode ?? 'Balanced';
+    vibrationMode = config.trigger.vibrationMode ?? DEFAULT_BODY_FEEL;
     lightbarEnabled = config.lightbar?.enabled ?? true;
-    lightbarColor = config.lightbar?.color ?? '#4cc9f0';
-    rpmColor = config.lightbar?.rpmColor ?? '#ff3a2e';
-    lightbarBrightness = config.lightbar?.brightness ?? 72;
+    lightbarColor = config.lightbar?.color ?? DEFAULT_LIGHTBAR_COLOR;
+    rpmColor = config.lightbar?.rpmColor ?? DEFAULT_REDLINE_COLOR;
+    lightbarBrightness = config.lightbar?.brightness ?? DEFAULT_LIGHTBAR_BRIGHTNESS;
     leftStickDeadzone = normalizeStickDeadzone(config.sticks?.leftDeadzone ?? 0);
     rightStickDeadzone = normalizeStickDeadzone(config.sticks?.rightDeadzone ?? 0);
     forzaTuning = forzaTuningFromConfig(config.forza);
@@ -1423,7 +1427,7 @@
     triggerEffect = trigger.effect;
     triggerIntensity = trigger.intensity;
     vibrationIntensity = trigger.vibration;
-    vibrationMode = trigger.vibrationMode ?? 'Balanced';
+    vibrationMode = trigger.vibrationMode ?? DEFAULT_BODY_FEEL;
   };
 
   const resetTriggerCurvesToProfileDefaults = () => {
@@ -2435,7 +2439,7 @@
           <SavedRail
             profileName={savedRailProfileName}
             rows={savedRailRows}
-            dirtyCount={unsavedCount}
+            dirty={profileConfigDirty}
             previewActive={baseFeelTestActive}
             previewBusy={baseFeelTestBusy}
             previewDisabled={!snapshot}
diff --git a/web/src/app/profileDraft.ts b/web/src/app/profileDraft.ts
index 2c4ac2a..6c72c46 100644
--- a/web/src/app/profileDraft.ts
+++ b/web/src/app/profileDraft.ts
@@ -1,4 +1,9 @@
 import {
+  DEFAULT_BODY_FEEL,
+  DEFAULT_BODY_RUMBLE_MODE,
+  DEFAULT_LIGHTBAR_BRIGHTNESS,
+  DEFAULT_LIGHTBAR_COLOR,
+  DEFAULT_REDLINE_COLOR,
   defaultTriggerCurve,
   defaultTriggerCurvePoints,
   normalizeStickDeadzone,
@@ -132,7 +137,7 @@ const defaultForzaTelemetryConfig = (
   defaults: ForzaTuningDefaults,
   effects: ForzaEffectConfiguration[] = defaults.effects
 ): EditableControllerConfig['forza'] => ({
-  bodyRumbleMode: 'native_passthrough',
+  bodyRumbleMode: DEFAULT_BODY_RUMBLE_MODE,
   effects: cloneForzaEffects(effects),
   brake: cloneForzaTuning(defaults.brake),
   abs: cloneForzaTuning(defaults.abs),
@@ -172,7 +177,7 @@ const forzaTelemetryFromDraft = (
   );
 
 export const normalizeForzaBodyRumbleMode = (mode: string | undefined | null): ForzaBodyRumbleMode =>
-  mode === 'dscc_full_control' ? 'dscc_full_control' : 'native_passthrough';
+  mode === 'dscc_full_control' ? 'dscc_full_control' : DEFAULT_BODY_RUMBLE_MODE;
 
 export const defaultButtonAssignments = (edge = false): EditableControllerConfig['buttons'] => [
   { key: 'Cross', label: 'Cross' },
@@ -279,7 +284,7 @@ export function baseForzaTriggerDefaults(): EditableControllerConfig['trigger']
     effect: 'Adaptive resistance',
     intensity: 'Strong (Standard)',
     vibration: 'Medium',
-    vibrationMode: 'Balanced'
+    vibrationMode: DEFAULT_BODY_FEEL
   };
 }
 
@@ -301,13 +306,13 @@ export function buildDefaultControllerConfig(options: DraftConfigOptions): Edita
       effect: 'Adaptive resistance',
       intensity: 'Strong (Standard)',
       vibration: 'Medium',
-      vibrationMode: 'Balanced'
+      vibrationMode: DEFAULT_BODY_FEEL
     },
     lightbar: {
       enabled: true,
-      color: '#4cc9f0',
-      rpmColor: '#ff3a2e',
-      brightness: 72
+      color: DEFAULT_LIGHTBAR_COLOR,
+      rpmColor: DEFAULT_REDLINE_COLOR,
+      brightness: DEFAULT_LIGHTBAR_BRIGHTNESS
     },
     forza: defaultForzaTelemetryConfig(forzaDefaults),
     sticks: {
@@ -446,13 +451,13 @@ export function profileConfigSignature(
       effect: config.trigger.effect,
       intensity: config.trigger.intensity,
       vibration: config.trigger.vibration,
-      vibrationMode: config.trigger.vibrationMode ?? 'Balanced'
+      vibrationMode: config.trigger.vibrationMode ?? DEFAULT_BODY_FEEL
     },
     lightbar: {
       enabled: config.lightbar?.enabled ?? true,
-      color: config.lightbar?.color ?? '#4cc9f0',
-      rpmColor: config.lightbar?.rpmColor ?? '#ff3a2e',
-      brightness: normalizeTriggerPercent(config.lightbar?.brightness ?? 72)
+      color: config.lightbar?.color ?? DEFAULT_LIGHTBAR_COLOR,
+      rpmColor: config.lightbar?.rpmColor ?? DEFAULT_REDLINE_COLOR,
+      brightness: normalizeTriggerPercent(config.lightbar?.brightness ?? DEFAULT_LIGHTBAR_BRIGHTNESS)
     },
     forza: {
       bodyRumbleMode: forza.bodyRumbleMode,
diff --git a/web/src/lib/features/haptics/hapticsModel.ts b/web/src/lib/features/haptics/hapticsModel.ts
index 34abf67..bd22525 100644
--- a/web/src/lib/features/haptics/hapticsModel.ts
+++ b/web/src/lib/features/haptics/hapticsModel.ts
@@ -1,4 +1,4 @@
-import type { ForzaEffectRoute, TriggerCurvePoint } from '../../types';
+import type { ForzaBodyRumbleMode, ForzaEffectRoute, TriggerCurvePoint } from '../../types';
 
 // Semantic tuning columns (Task 6): effects group by what is being tuned —
 // brake, throttle, road feel, or lights — never by control type.
@@ -31,6 +31,15 @@ export const LIGHTBAR_COLOR_PRESETS = [
   '#facc15'
 ];
 
+// Shared profile defaults: the fallback values every config reader/writer
+// (profileDraft signature, saved rail diff, App's applyEditableConfig) must
+// agree on when a saved profile omits a field.
+export const DEFAULT_LIGHTBAR_COLOR = '#4cc9f0';
+export const DEFAULT_REDLINE_COLOR = '#ff3a2e';
+export const DEFAULT_LIGHTBAR_BRIGHTNESS = 72;
+export const DEFAULT_BODY_FEEL = 'Balanced';
+export const DEFAULT_BODY_RUMBLE_MODE: ForzaBodyRumbleMode = 'native_passthrough';
+
 export const TRIGGER_CURVE_POINT_MIN = 4;
 export const TRIGGER_CURVE_POINT_MAX = 8;
 export const TRIGGER_CURVE_SAMPLE_POSITIONS = Array.from({ length: 101 }, (_, index) => index / 100);
diff --git a/web/src/lib/features/tuning/SavedRail.svelte b/web/src/lib/features/tuning/SavedRail.svelte
index 95c2eb7..d7da522 100644
--- a/web/src/lib/features/tuning/SavedRail.svelte
+++ b/web/src/lib/features/tuning/SavedRail.svelte
@@ -11,12 +11,12 @@
   "3s · nothing saved"; Save/Discard say in plain words what they touch.
 -->
 <script lang="ts">
-  import type { SavedDiffRow } from './savedDiff';
+  import { unsavedChangeCount, type SavedDiffRow } from './savedDiff';
 
   let {
     profileName = 'profile',
     rows = [],
-    dirtyCount = 0,
+    dirty = false,
     previewActive = false,
     previewBusy = false,
     previewDisabled = false,
@@ -28,7 +28,12 @@
   }: {
     profileName?: string;
     rows?: SavedDiffRow[];
-    dirtyCount?: number;
+    /**
+     * Signature-based dirtiness from App (profileConfigDirty). It covers more
+     * fields than the rail rows do (input mode, buttons, input bridge,
+     * profile assignments), so it can be true while every row is clean.
+     */
+    dirty?: boolean;
     previewActive?: boolean;
     previewBusy?: boolean;
     previewDisabled?: boolean;
@@ -41,12 +46,19 @@
 
   let barExpanded = $state(false);
 
+  const dirtyCount = $derived(unsavedChangeCount(rows));
+  const anyDirty = $derived(dirty || dirtyCount > 0);
+  // Dirty by signature only: the edits live outside the rail's rows.
+  const outsideOnly = $derived(dirty && dirtyCount === 0);
+
   // Collapse the expanded phone list once everything is saved or discarded.
   $effect(() => {
-    if (dirtyCount === 0) barExpanded = false;
+    if (!anyDirty) barExpanded = false;
   });
 
-  const changeSummary = $derived(`${dirtyCount} unsaved change${dirtyCount === 1 ? '' : 's'}`);
+  const changeSummary = $derived(
+    outsideOnly ? 'Unsaved changes' : `${dirtyCount} unsaved change${dirtyCount === 1 ? '' : 's'}`
+  );
 </script>
 
 {#snippet diffRows()}
@@ -54,15 +66,23 @@
     <div class="saved-row" class:dirty={item.dirty}>
       <span class="saved-row-label">{item.label}</span>
       <span class="saved-row-value">
-        {#if item.dirty}
+        {#if item.dirty && item.savedValue !== item.currentValue}
           <s class="saved-row-was">{item.savedValue}</s>
           <span class="saved-row-now">→ {item.currentValue}</span>
+        {:else if item.dirty}
+          <!-- Group summaries ("2 of 5 edited") have no single saved value to strike. -->
+          <span class="saved-row-now">{item.currentValue}</span>
         {:else}
           <span class="saved-row-saved">{item.savedValue}</span>
         {/if}
       </span>
     </div>
   {/each}
+  {#if outsideOnly}
+    <div class="saved-row">
+      <span class="saved-row-label saved-row-saved">Changes outside this panel are unsaved.</span>
+    </div>
+  {/if}
 {/snippet}
 
 {#snippet actionButtons()}
@@ -76,7 +96,7 @@
   <button
     class="saved-discard-button"
     type="button"
-    disabled={dirtyCount === 0}
+    disabled={!anyDirty}
     title={`Throws away the tweaks and puts back what ${profileName} has saved.`}
     onclick={onDiscard}
   >Discard</button>
@@ -105,7 +125,7 @@
   </div>
 </aside>
 
-{#if dirtyCount > 0}
+{#if anyDirty}
   <div class="saved-mobile-bar" role="region" aria-label="Unsaved changes">
     {#if barExpanded}
       <div class="saved-mobile-rows">
diff --git a/web/src/lib/features/tuning/savedDiff.ts b/web/src/lib/features/tuning/savedDiff.ts
index 439bb11..fc379eb 100644
--- a/web/src/lib/features/tuning/savedDiff.ts
+++ b/web/src/lib/features/tuning/savedDiff.ts
@@ -11,6 +11,11 @@
 // `profileConfigDirty` flag in App.svelte.
 
 import {
+  DEFAULT_BODY_FEEL,
+  DEFAULT_BODY_RUMBLE_MODE,
+  DEFAULT_LIGHTBAR_BRIGHTNESS,
+  DEFAULT_LIGHTBAR_COLOR,
+  DEFAULT_REDLINE_COLOR,
   defaultTriggerCurve,
   normalizeStickDeadzone,
   normalizeTriggerCurve,
@@ -151,10 +156,15 @@ const tuningGroupRow = <T extends object>(
       changed += 1;
     }
   }
+  if (changed > 0) {
+    // Group rows summarize many fields; there is no single saved value to
+    // strike through, so both sides carry the same "N of M edited" text and
+    // the rail renders it once, without a strikethrough.
+    const edited = `${changed} of ${keys.length} edited`;
+    return row(id, label, edited, edited, true);
+  }
   const clean = `${keys.length} settings`;
-  return changed > 0
-    ? row(id, label, 'saved', `${changed} edited`, true)
-    : row(id, label, clean, clean, false);
+  return row(id, label, clean, clean, false);
 };
 
 const effectValue = (
@@ -224,27 +234,27 @@ export const savedDiffRows = (
     row(
       'body-feel',
       'Body feel',
-      saved.trigger.vibrationMode ?? 'Balanced',
+      saved.trigger.vibrationMode ?? DEFAULT_BODY_FEEL,
       draft.vibrationMode
     ),
     row(
       'lightbar',
       'Lightbar',
       saved.lightbar?.enabled ?? true
-        ? `On · ${normalizeTriggerPercent(saved.lightbar?.brightness ?? 72)}%`
+        ? `On · ${normalizeTriggerPercent(saved.lightbar?.brightness ?? DEFAULT_LIGHTBAR_BRIGHTNESS)}%`
         : 'Off',
       draft.lightbarEnabled ? `On · ${normalizeTriggerPercent(draft.lightbarBrightness)}%` : 'Off'
     ),
     row(
       'lightbar-color',
       'Lightbar color',
-      (saved.lightbar?.color ?? '#4cc9f0').toLowerCase(),
+      (saved.lightbar?.color ?? DEFAULT_LIGHTBAR_COLOR).toLowerCase(),
       draft.lightbarColor.toLowerCase()
     ),
     row(
       'redline-color',
       'Redline color',
-      (saved.lightbar?.rpmColor ?? '#ff3a2e').toLowerCase(),
+      (saved.lightbar?.rpmColor ?? DEFAULT_REDLINE_COLOR).toLowerCase(),
       draft.rpmColor.toLowerCase()
     ),
     row(
@@ -262,7 +272,7 @@ export const savedDiffRows = (
   ];
 
   if (options.includeForza) {
-    const savedMode = saved.forza?.bodyRumbleMode ?? 'native_passthrough';
+    const savedMode = saved.forza?.bodyRumbleMode ?? DEFAULT_BODY_RUMBLE_MODE;
     const modeLabel = (mode: ForzaBodyRumbleMode) =>
       mode === 'dscc_full_control' ? 'DSCC full control' : 'Game native';
     rows.push(row('rumble-source', 'Rumble source', modeLabel(savedMode), modeLabel(draft.forzaBodyRumbleMode)));

From c66516da206f0ce9c6469c7e1f42cdd2b4affa8f Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 21:49:45 -0500
Subject: [PATCH 16/23] ui-rework: per-game setup guide with passive
 verification and chip re-entry
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Selecting a game that has never produced telemetry swaps the tuning canvas
for its setup walkthrough (a canvas state, not a pop-up): numbered steps with
exact Data Out menu path and copy buttons for IP/port, plus a LISTENING box
bound to live telemetry that flips green and swaps the canvas in without a
click. Zero-setup games get a "No setup needed" reassurance with a pre-tune
offer. Verification persists per game id in localStorage; once verified the
guide only re-opens manually — via the now-clickable telemetry chip
(FRESH · setup ↗ / QUIET · fix ↗ / neutral / one-time-setup variants), the
game dropdown's setup entry, or the Status needs-attention deep link.
Telemetry loss never yanks the canvas; it only flags Status and the chip.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/App.svelte                            | 100 ++++++
 web/src/app/setupVerification.ts              |  42 +++
 web/src/lib/features/status/StatusView.svelte |  11 +-
 web/src/lib/features/tuning/SetupGuide.svelte | 194 +++++++++++
 .../lib/features/tuning/TuningHeader.svelte   |  70 +++-
 web/src/lib/features/tuning/gameSelect.ts     |  19 +-
 .../lib/features/tuning/setupRequirements.ts  | 108 ++++++
 web/src/styles/tuning.css                     | 324 ++++++++++++++++++
 8 files changed, 848 insertions(+), 20 deletions(-)
 create mode 100644 web/src/app/setupVerification.ts
 create mode 100644 web/src/lib/features/tuning/SetupGuide.svelte
 create mode 100644 web/src/lib/features/tuning/setupRequirements.ts

diff --git a/web/src/App.svelte b/web/src/App.svelte
index 3345016..717b647 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -86,6 +86,13 @@
   import TriggerCurvesPanel from './lib/features/haptics/TriggerCurvesPanel.svelte';
   import TuningCanvas from './lib/features/tuning/TuningCanvas.svelte';
   import SavedRail from './lib/features/tuning/SavedRail.svelte';
+  import SetupGuide from './lib/features/tuning/SetupGuide.svelte';
+  import { telemetryPortFromAdapter } from './lib/features/tuning/setupRequirements';
+  import {
+    loadVerifiedSetupGameIds,
+    markSetupVerified,
+    type VerifiedSetupGameIds
+  } from './app/setupVerification';
   import { savedDiffRows, unsavedChangeCount } from './lib/features/tuning/savedDiff';
   import {
     clampUnit,
@@ -283,6 +290,13 @@
   let updateDismissalLoaded = false;
   let onboardingOpen = false;
   let onboardingLoaded = false;
+  // Per-game setup state (Task 8). `verifiedSetupGameIds` mirrors the
+  // persisted "packets seen at least once" flags; `setupGuideManual` tracks a
+  // deliberate re-entry (chip, dropdown, Status deep-link) and resets when the
+  // selected game changes. Unverified games pin the guide open on their own.
+  let verifiedSetupGameIds: VerifiedSetupGameIds = loadVerifiedSetupGameIds();
+  let setupGuideManual = false;
+  let setupGuideGameTracker = '';
   let renameProfileId = '';
   let renameProfileName = '';
   let profileRenameBusy = false;
@@ -521,6 +535,70 @@
   $: steamInputStatus = snapshot?.steamInput;
   $: inputBridgeStatus = snapshot?.inputBridge;
   $: telemetryPacketRate = adapter?.packetRateHz ?? 0;
+  // --- per-game setup guide state (Task 8) --------------------------------
+  $: telemetryPort = telemetryPortFromAdapter(adapter);
+  $: selectedGameSetupVerified =
+    selectedTuningScope !== 'game' || !selectedTuningGame
+      ? true
+      : Boolean(verifiedSetupGameIds[selectedTuningGame.gameId]);
+  // Fresh Telemetry attributed to the selected game: it must be the game the
+  // agent actually detected, with its Telemetry Adapter running and packets
+  // arriving. Telemetry loss never yanks the canvas — it only flips the chip
+  // to Quiet and surfaces a Status finding.
+  $: selectedGameTelemetryFresh = Boolean(
+    selectedTuningScope === 'game' &&
+      selectedTuningGame?.running &&
+      selectedTuningGame.supportLevel === 'telemetry' &&
+      snapshot?.gameDetection.activeGameId === selectedTuningGame.gameId &&
+      adapter?.state === 'running' &&
+      telemetryPacketRate > 0
+  );
+  $: if (selectedTuningGameId !== setupGuideGameTracker) {
+    setupGuideGameTracker = selectedTuningGameId;
+    setupGuideManual = false;
+  }
+  $: showSetupGuide =
+    showTuningView &&
+    tuningReady &&
+    selectedTuningScope === 'game' &&
+    Boolean(selectedTuningGame) &&
+    (setupGuideManual || !selectedGameSetupVerified);
+
+  const markSelectedGameSetupVerified = () => {
+    const gameId = selectedTuningScope === 'game' ? (selectedTuningGame?.gameId ?? '') : '';
+    if (!gameId) return;
+    verifiedSetupGameIds = markSetupVerified(verifiedSetupGameIds, gameId);
+  };
+
+  // Passive completion: SetupGuide calls this when the first packets arrive
+  // (or via "Start tuning" on the zero-setup variant). The canvas swaps in
+  // because the unverified pin disappears — no click required.
+  const completeSetupGuide = () => {
+    markSelectedGameSetupVerified();
+    setupGuideManual = false;
+  };
+
+  const toggleSetupGuide = () => {
+    if (!selectedGameSetupVerified) return; // pinned open until verified
+    setupGuideManual = !setupGuideManual;
+  };
+
+  const openSetupGuide = () => {
+    if (selectedTuningScope !== 'game') return;
+    setupGuideManual = true;
+  };
+
+  // Status → Needs attention deep-link: land on #/tuning with the guide open
+  // for the detected game.
+  const openSetupGuideFromStatus = async () => {
+    const game = selectedGame ?? selectedTuningGame ?? null;
+    if (!game) {
+      navigateToView('tuning');
+      return;
+    }
+    await selectTuningGame(game);
+    setupGuideManual = true;
+  };
   $: telemetryRateText = `${telemetryPacketRate >= 100 ? telemetryPacketRate.toFixed(0) : telemetryPacketRate.toFixed(1)} Hz`;
   $: telemetryRateDetail = telemetryRateStatusText(adapter);
   $: systemReadoutTitle = selectedTuningScope === 'global' ? 'Profile Scope' : 'Telemetry Rate';
@@ -2244,6 +2322,7 @@
         onSubmitRename={submitControllerRename}
         onCancelRename={cancelControllerRename}
         onRenameKeydown={handleControllerRenameKeydown}
+        onOpenSetupGuide={openSetupGuideFromStatus}
       />
     {/if}
     {#if showTuningView}
@@ -2253,6 +2332,10 @@
         {discoveredGames}
         adapterRunning={adapter?.state === 'running'}
         packetRateHz={telemetryPacketRate}
+        setupVerified={selectedGameSetupVerified}
+        setupGuideOpen={showSetupGuide}
+        onToggleSetupGuide={toggleSetupGuide}
+        onOpenSetupGuide={openSetupGuide}
         {controller}
         profiles={profileContextProfiles}
         {activeProfileId}
@@ -2400,6 +2483,22 @@
           {forzaIntensityFromPercent}
         />
       {/snippet}
+      {#if showSetupGuide && selectedTuningGame}
+        <!-- Setup is a canvas state: the walkthrough replaces the tuning grid
+             (rail included) until the game's requirements verify or the
+             manually re-opened guide is toggled away. -->
+        <SetupGuide
+          game={selectedTuningGame}
+          telemetryFresh={selectedGameTelemetryFresh}
+          verified={selectedGameSetupVerified}
+          port={telemetryPort}
+          packetRateHz={telemetryPacketRate}
+          adapterName={adapter?.name ?? ''}
+          adapterHint={adapter?.setupHint ?? ''}
+          onVerified={completeSetupGuide}
+          onStartTuning={completeSetupGuide}
+        />
+      {:else}
       <TuningCanvas>
         <svelte:fragment slot="brake">
           {@render triggerCurveEditor('L2')}
@@ -2516,6 +2615,7 @@
         </svelte:fragment>
       </TuningCanvas>
       {/if}
+      {/if}
     <ButtonMappingView session={buttonMappingSession} />
     {/if}
   {/if}
diff --git a/web/src/app/setupVerification.ts b/web/src/app/setupVerification.ts
new file mode 100644
index 0000000..fab0881
--- /dev/null
+++ b/web/src/app/setupVerification.ts
@@ -0,0 +1,42 @@
+// Per-game setup verification flags. A game is "verified" once telemetry
+// packets have been seen for it at least once; after that the setup guide
+// never auto-shows again (re-entry stays manual via the telemetry chip or the
+// game dropdown). Persists in localStorage alongside the other UI preferences
+// (see onboardingState.ts / updateState.ts for the same pattern).
+
+const SETUP_VERIFIED_KEY = 'dscc-setup-verified-v1';
+
+export type VerifiedSetupGameIds = Record<string, true>;
+
+export function loadVerifiedSetupGameIds(): VerifiedSetupGameIds {
+  if (typeof window === 'undefined') return {};
+  try {
+    const raw = window.localStorage.getItem(SETUP_VERIFIED_KEY);
+    if (!raw) return {};
+    const parsed: unknown = JSON.parse(raw);
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return {};
+    const next: VerifiedSetupGameIds = {};
+    for (const key of Object.keys(parsed)) {
+      if ((parsed as Record<string, unknown>)[key]) next[key] = true;
+    }
+    return next;
+  } catch {
+    return {};
+  }
+}
+
+export function markSetupVerified(
+  current: VerifiedSetupGameIds,
+  gameId: string
+): VerifiedSetupGameIds {
+  if (!gameId || current[gameId]) return current;
+  const next: VerifiedSetupGameIds = { ...current, [gameId]: true };
+  if (typeof window !== 'undefined') {
+    try {
+      window.localStorage.setItem(SETUP_VERIFIED_KEY, JSON.stringify(next));
+    } catch {
+      // Verification is a convenience flag; the guide simply auto-shows again.
+    }
+  }
+  return next;
+}
diff --git a/web/src/lib/features/status/StatusView.svelte b/web/src/lib/features/status/StatusView.svelte
index b9f23c3..ff3ec65 100644
--- a/web/src/lib/features/status/StatusView.svelte
+++ b/web/src/lib/features/status/StatusView.svelte
@@ -22,7 +22,8 @@
     onBeginRename = () => {},
     onSubmitRename = () => {},
     onCancelRename = () => {},
-    onRenameKeydown = () => {}
+    onRenameKeydown = () => {},
+    onOpenSetupGuide = () => {}
   }: {
     controllers?: ControllerStatus[];
     controller?: ControllerStatus | undefined;
@@ -40,6 +41,7 @@
     onSubmitRename?: () => void | Promise<void>;
     onCancelRename?: () => void;
     onRenameKeydown?: (event: KeyboardEvent) => void;
+    onOpenSetupGuide?: () => void | Promise<void>;
   } = $props();
 
   type Finding = { id: string; text: string; detail?: string };
@@ -248,6 +250,13 @@
               {#if finding.detail}
                 <div class="status-finding-detail">{finding.detail}</div>
               {/if}
+              {#if finding.id === 'telemetry-quiet'}
+                <button
+                  class="status-link"
+                  type="button"
+                  onclick={() => void onOpenSetupGuide()}
+                >Open the setup guide</button>
+              {/if}
             </div>
           {/each}
         {:else}
diff --git a/web/src/lib/features/tuning/SetupGuide.svelte b/web/src/lib/features/tuning/SetupGuide.svelte
new file mode 100644
index 0000000..9a87c12
--- /dev/null
+++ b/web/src/lib/features/tuning/SetupGuide.svelte
@@ -0,0 +1,194 @@
+<script lang="ts">
+  import { deriveSetupModel, TELEMETRY_TARGET_IP } from './setupRequirements';
+  import type { SupportedGame } from '../../types';
+
+  // Per-game setup walkthrough (Task 8). Rendered as a CANVAS STATE: it
+  // replaces the tuning grid until the game's requirements verify, and can be
+  // re-entered any time from the telemetry chip or the game dropdown.
+  // Verification is passive — the LISTENING box flips green by itself when
+  // packets arrive and the canvas swaps back in without a click.
+
+  let {
+    game,
+    telemetryFresh = false,
+    verified = false,
+    port = 5300,
+    packetRateHz = 0,
+    adapterName = '',
+    adapterHint = '',
+    onVerified = () => {},
+    onStartTuning = () => {}
+  }: {
+    game: SupportedGame;
+    telemetryFresh?: boolean;
+    verified?: boolean;
+    port?: number;
+    packetRateHz?: number;
+    adapterName?: string;
+    adapterHint?: string;
+    onVerified?: () => void;
+    onStartTuning?: () => void;
+  } = $props();
+
+  const model = $derived(deriveSetupModel({ game, telemetryFresh, verified, port }));
+
+  // Passive verification: the first fresh packets complete setup on their
+  // own. A short green beat on the LISTENING box, then the parent swaps the
+  // tuning canvas in. Manual re-entry (already verified) never auto-closes.
+  const VERIFY_SWAP_DELAY_MS = 900;
+  $effect(() => {
+    if (!telemetryFresh || verified || game.supportLevel !== 'telemetry') return;
+    const timer = window.setTimeout(() => onVerified(), VERIFY_SWAP_DELAY_MS);
+    return () => window.clearTimeout(timer);
+  });
+
+  // Copy buttons: clipboard API first, hidden-textarea fallback (same graceful
+  // degradation the support bundle copy uses), calm inline failure note last.
+  let copiedValue = $state('');
+  let copyFailed = $state(false);
+  let copyResetTimer = 0;
+
+  const legacyCopy = (value: string): boolean => {
+    const area = document.createElement('textarea');
+    area.value = value;
+    area.setAttribute('readonly', '');
+    area.style.position = 'fixed';
+    area.style.opacity = '0';
+    document.body.appendChild(area);
+    area.select();
+    let ok = false;
+    try {
+      ok = document.execCommand('copy');
+    } catch {
+      ok = false;
+    }
+    area.remove();
+    return ok;
+  };
+
+  const copyValue = async (value: string) => {
+    let ok = false;
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(value);
+        ok = true;
+      } else {
+        ok = legacyCopy(value);
+      }
+    } catch {
+      ok = legacyCopy(value);
+    }
+    copiedValue = ok ? value : '';
+    copyFailed = !ok;
+    window.clearTimeout(copyResetTimer);
+    copyResetTimer = window.setTimeout(() => {
+      copiedValue = '';
+      copyFailed = false;
+    }, 1600);
+  };
+
+  const stepNumber = (index: number) => index + 1;
+</script>
+
+<section class="setup-guide" aria-label={`Setup guide for ${game.name}`}>
+  {#if model.required}
+    <header class="setup-guide-head">
+      <h2>One-time setup for {game.name}</h2>
+      <p class="setup-guide-sub">
+        {#if verified}
+          Already verified — these are the values DSCC is listening with.
+        {:else}
+          About 2 minutes, once. Then it's automatic forever.
+        {/if}
+      </p>
+    </header>
+
+    <div class="setup-guide-grid">
+      <ol class="setup-steps">
+        {#each model.steps as step, index (step.id)}
+          <li class="setup-step" data-state={step.state}>
+            <span class="setup-stepnum" class:done={step.state === 'done'} class:now={step.state === 'now'} aria-hidden="true">
+              {step.state === 'done' ? '✓' : stepNumber(index)}
+            </span>
+            <div class="setup-step-body">
+              <div class="setup-step-title" class:settled={step.state !== 'now'}>
+                {step.title}
+                <span class="visually-hidden">
+                  {step.state === 'done' ? ' — done' : step.state === 'now' ? ' — current step' : ''}
+                </span>
+              </div>
+              <div class="setup-step-detail">
+                {step.detail}{#if step.menuPath}<b>{step.menuPath}</b>{step.detailAfterPath ?? ''}{/if}
+              </div>
+              {#if step.copyValues?.length}
+                <div class="setup-copy-card">
+                  {#each step.copyValues as item (item.label)}
+                    <div class="setup-copy-row">
+                      <span class="setup-copy-label">{item.label}</span>
+                      <code class="setup-kbd">{item.value}</code>
+                      <button class="setup-copy-button" type="button" onclick={() => void copyValue(item.value)}>
+                        {copiedValue === item.value ? 'copied ✓' : 'copy'}
+                      </button>
+                    </div>
+                  {/each}
+                  {#if copyFailed}
+                    <div class="setup-copy-fallback">Copy is blocked in this browser — select the value and copy it yourself.</div>
+                  {/if}
+                </div>
+              {/if}
+            </div>
+          </li>
+        {/each}
+      </ol>
+
+      <aside class="setup-listening" class:ok={model.fresh} aria-live="polite">
+        <span class="setup-lbl">Listening</span>
+        <div class="setup-listening-line">
+          <span class="setup-listening-dot" aria-hidden="true"></span>
+          {#if model.fresh}
+            <span>Packets arriving on port {model.port}{packetRateHz > 0 ? ` · ${Math.round(packetRateHz)} Hz` : ''}</span>
+          {:else}
+            <span>Waiting on port {model.port}…</span>
+          {/if}
+        </div>
+        <p class="setup-listening-note">
+          {#if model.fresh && !verified}
+            Data arrived — setup is complete. Opening the tuning canvas…
+          {:else if model.fresh}
+            Telemetry is fresh. The driving feel is live.
+          {:else}
+            Nothing has arrived yet. That's expected until you finish step 2 and start driving.
+            This box turns green by itself — no refresh, no button.
+          {/if}
+        </p>
+        <details class="setup-stuck">
+          <summary>Stuck? Common {game.name} fixes</summary>
+          <ul>
+            <li>Data Out only sends while you're driving — menus stay silent.</li>
+            <li>Double-check the in-game values: IP <code class="setup-kbd">{TELEMETRY_TARGET_IP}</code>, port <code class="setup-kbd">{model.port}</code>.</li>
+            <li>If another app is using port {model.port}, close it and re-enter a driving session.</li>
+            <li>The feed stays on this PC — packets go to {TELEMETRY_TARGET_IP} and never leave your machine.</li>
+          </ul>
+          {#if adapterHint}
+            <p class="setup-adapter-hint">{adapterName ? `${adapterName}: ` : ''}{adapterHint}</p>
+          {/if}
+        </details>
+      </aside>
+    </div>
+  {:else}
+    <header class="setup-guide-head">
+      <span class="setup-zero-chip">● No setup needed</span>
+      <h2>{game.name} is ready when you are</h2>
+      <p class="setup-guide-sub">
+        DSCC detects this game on its own. Start the game and your tuned feel loads with it —
+        nothing to configure.
+      </p>
+    </header>
+    <div class="setup-pretune">
+      <p>Meanwhile, you can pre-tune its profile with base feel — no game required.</p>
+      <button class="setup-pretune-button" type="button" onclick={() => void onStartTuning()}>
+        Start tuning →
+      </button>
+    </div>
+  {/if}
+</section>
diff --git a/web/src/lib/features/tuning/TuningHeader.svelte b/web/src/lib/features/tuning/TuningHeader.svelte
index 1401c61..b76b45e 100644
--- a/web/src/lib/features/tuning/TuningHeader.svelte
+++ b/web/src/lib/features/tuning/TuningHeader.svelte
@@ -18,6 +18,8 @@
     discoveredGames = [],
     adapterRunning = false,
     packetRateHz = 0,
+    setupVerified = true,
+    setupGuideOpen = false,
     controller = undefined,
     profiles = [],
     activeProfileId = '',
@@ -38,6 +40,8 @@
     onSelectGlobal = () => {},
     onSelectGame = () => {},
     onOpenAddGame = () => {},
+    onToggleSetupGuide = () => {},
+    onOpenSetupGuide = () => {},
     onSelectProfile = () => {},
     onSaveProfile = () => {},
     onBeginSaveAs = () => {},
@@ -58,6 +62,8 @@
     discoveredGames?: SupportedGame[];
     adapterRunning?: boolean;
     packetRateHz?: number;
+    setupVerified?: boolean;
+    setupGuideOpen?: boolean;
     controller?: ControllerStatus | undefined;
     profiles?: ProfileSummary[];
     activeProfileId?: string;
@@ -78,6 +84,8 @@
     onSelectGlobal?: () => void | Promise<void>;
     onSelectGame?: (game: SupportedGame) => void | Promise<void>;
     onOpenAddGame?: () => void | Promise<void>;
+    onToggleSetupGuide?: () => void;
+    onOpenSetupGuide?: () => void;
     onSelectProfile?: (profileId: string) => void | Promise<void>;
     onSaveProfile?: () => void | Promise<void>;
     onBeginSaveAs?: () => void;
@@ -99,14 +107,43 @@
       games: discoveredGames,
       scope,
       selectedGameId: selectedGame?.gameId ?? '',
-      setupGuideGame:
-        scope === 'game' && selectedGame?.supportLevel === 'telemetry' ? selectedGame : null,
-      setupGuideEnabled: false
+      setupGuideGame: scope === 'game' ? selectedGame : null,
+      setupGuideEnabled: true
     })
   );
   const chipState = $derived(
-    telemetryChipState({ scope, selectedGame, adapterRunning, packetRateHz })
+    telemetryChipState({ scope, selectedGame, adapterRunning, packetRateHz, setupVerified })
   );
+  const chipPresentation = $derived.by(() => {
+    switch (chipState) {
+      case 'fresh':
+        return {
+          label: 'Telemetry Fresh',
+          suffix: '· setup ↗',
+          title: 'Game data is arriving — the driving feel is live. Open the setup guide to check the port or re-copy values.'
+        };
+      case 'quiet':
+        return {
+          label: 'Telemetry Quiet',
+          suffix: '· fix ↗',
+          title: 'The game is running but its data feed is silent. Open the guide to fix it.'
+        };
+      case 'setup':
+        return {
+          label: 'One-Time Setup Needed',
+          suffix: '',
+          title: "About 2 minutes, once. Then it's automatic forever."
+        };
+      case 'none':
+        return {
+          label: 'No Setup Needed',
+          suffix: '· setup ↗',
+          title: 'This game needs no telemetry feed. Open the guide for details.'
+        };
+      default:
+        return null;
+    }
+  });
 
   const heroArt = $derived(scope === 'game' ? gameArtwork(selectedGame, 'hero') : null);
   const thumbArt = $derived(scope === 'game' ? gameArtwork(selectedGame, 'banner') : null);
@@ -217,10 +254,10 @@
   });
 
   const pickGameEntry = (entry: GameSelectEntry) => {
-    if (entry.kind === 'setup-guide') return;
     closeGameMenu();
     if (entry.kind === 'everyday') void onSelectGlobal();
     else if (entry.kind === 'game') void onSelectGame(entry.game);
+    else if (entry.kind === 'setup-guide') onOpenSetupGuide();
     else if (entry.kind === 'add-game') void onOpenAddGame();
   };
 </script>
@@ -259,17 +296,22 @@
             <strong>{gameModel.title}</strong>
             <span class="tuning-caret" aria-hidden="true">▾</span>
           </button>
-          {#if chipState}
-            <span
-              class="tuning-telemetry-chip"
+          {#if chipState && chipPresentation}
+            <button
+              class="tuning-telemetry-chip clickable"
               class:fresh={chipState === 'fresh'}
               class:quiet={chipState === 'quiet'}
-              title={chipState === 'fresh'
-                ? 'Game data is arriving — the driving feel is live.'
-                : 'The game is running but its data feed is silent. The setup guide can help.'}
+              class:setup={chipState === 'setup'}
+              class:none={chipState === 'none'}
+              type="button"
+              title={chipPresentation.title}
+              aria-pressed={setupGuideOpen}
+              onclick={onToggleSetupGuide}
             >
-              ● {chipState === 'fresh' ? 'Telemetry Fresh' : 'Telemetry Quiet'}
-            </span>
+              ● {chipPresentation.label}{#if chipPresentation.suffix}
+                <span class="tuning-chip-suffix">{chipPresentation.suffix}</span>
+              {/if}
+            </button>
           {/if}
         </div>
         <div class="tuning-header-profile-row">
@@ -384,7 +426,7 @@
             type="button"
             role="menuitem"
             disabled={!entry.enabled}
-            title="The setup walkthrough opens here in an upcoming update."
+            onclick={() => pickGameEntry(entry)}
           >
             <span class="tuning-menu-item-text">{entry.label}</span>
           </button>
diff --git a/web/src/lib/features/tuning/gameSelect.ts b/web/src/lib/features/tuning/gameSelect.ts
index 3f894d1..7226e3f 100644
--- a/web/src/lib/features/tuning/gameSelect.ts
+++ b/web/src/lib/features/tuning/gameSelect.ts
@@ -115,21 +115,30 @@ export function headerTitle(options: {
   return 'Everyday (no game)';
 }
 
-export type TelemetryChipState = 'fresh' | 'quiet' | null;
+export type TelemetryChipState = 'fresh' | 'quiet' | 'setup' | 'none' | null;
 
 /**
- * Telemetry chip state for the header band. Only games with telemetry
- * support that are actually running get a chip; Fresh means packets are
- * arriving, Quiet means the game is up but its data feed is silent.
+ * Telemetry chip state for the header band. The chip is the door back into
+ * the setup guide:
+ * - `fresh` (green): packets are arriving for the running game.
+ * - `quiet` (yellow): the game is up but its data feed is silent.
+ * - `setup` (accent): a telemetry game that has never verified — one-time
+ *   setup is in progress.
+ * - `none` (neutral): the selected game needs no telemetry feed at all.
  */
 export function telemetryChipState(options: {
   scope: TuningScopeKind;
   selectedGame: SupportedGame | null;
   adapterRunning: boolean;
   packetRateHz: number;
+  /** Telemetry packets have been seen for this game at least once. */
+  setupVerified: boolean;
 }): TelemetryChipState {
   if (options.scope !== 'game') return null;
   const game = options.selectedGame;
-  if (!game || !game.running || game.supportLevel !== 'telemetry') return null;
+  if (!game) return null;
+  if (game.supportLevel !== 'telemetry') return 'none';
+  if (!options.setupVerified) return 'setup';
+  if (!game.running) return null;
   return options.adapterRunning && options.packetRateHz > 0 ? 'fresh' : 'quiet';
 }
diff --git a/web/src/lib/features/tuning/setupRequirements.ts b/web/src/lib/features/tuning/setupRequirements.ts
new file mode 100644
index 0000000..22b930d
--- /dev/null
+++ b/web/src/lib/features/tuning/setupRequirements.ts
@@ -0,0 +1,108 @@
+import type { AdapterStatus, SupportedGame } from '../../types';
+
+// Pure setup-walkthrough model for the Tuning canvas (Task 8). Each Game
+// Module's metadata plus live telemetry state derive `{required, steps,
+// verified}` — no fetching, no storage, no component state. Persistence of
+// "verified once" lives in app/setupVerification.ts.
+
+export const TELEMETRY_TARGET_IP = '127.0.0.1';
+export const DEFAULT_TELEMETRY_PORT = 5300;
+
+export type SetupStepState = 'done' | 'now' | 'todo';
+
+export type SetupCopyValue = {
+  label: string;
+  value: string;
+};
+
+export type SetupStep = {
+  id: 'found' | 'data-out' | 'drive';
+  state: SetupStepState;
+  title: string;
+  detail: string;
+  /** Exact in-game menu path, rendered emphasized before `detailAfterPath`. */
+  menuPath?: string;
+  detailAfterPath?: string;
+  copyValues?: SetupCopyValue[];
+};
+
+export type SetupModel = {
+  /** False for games DSCC reads without any in-game configuration. */
+  required: boolean;
+  /** Telemetry packets have been seen for this game at least once. */
+  verified: boolean;
+  /** Live freshness: packets are arriving right now. */
+  fresh: boolean;
+  port: number;
+  steps: SetupStep[];
+};
+
+/**
+ * The UDP port the active Telemetry Adapter listens on. The agent reports its
+ * bound address inside the adapter's config string (for example
+ * `127.0.0.1:5300`); fall back to the well-known Forza Data Out default when
+ * no adapter or no port is visible (the mock fixture, early startup).
+ */
+export function telemetryPortFromAdapter(adapter: AdapterStatus | null | undefined): number {
+  for (const text of [adapter?.config, adapter?.setupHint]) {
+    const match = text?.match(/:(\d{2,5})(?!\d)/);
+    if (match) {
+      const port = Number(match[1]);
+      if (Number.isInteger(port) && port > 0 && port <= 65535) return port;
+    }
+  }
+  return DEFAULT_TELEMETRY_PORT;
+}
+
+const foundDetail = (game: SupportedGame): string => {
+  if (game.running) return 'Running now.';
+  if (game.source === 'local_app') return 'Added as a local app.';
+  if (game.installed) return 'Installed via Steam.';
+  return 'DSCC spots the game on its own once it starts.';
+};
+
+export function deriveSetupModel(options: {
+  game: SupportedGame;
+  /** Fresh Telemetry attributed to this game (it is the detected game). */
+  telemetryFresh: boolean;
+  /** Packets were seen for this game at least once (persisted). */
+  verified: boolean;
+  port?: number;
+}): SetupModel {
+  const { game, telemetryFresh, verified } = options;
+  const port = options.port ?? DEFAULT_TELEMETRY_PORT;
+
+  if (game.supportLevel !== 'telemetry') {
+    return { required: false, verified, fresh: telemetryFresh, port, steps: [] };
+  }
+
+  const found = game.installed || game.running;
+  const steps: SetupStep[] = [
+    {
+      id: 'found',
+      state: found ? 'done' : 'now',
+      title: `${game.name} found`,
+      detail: foundDetail(game)
+    },
+    {
+      id: 'data-out',
+      state: telemetryFresh ? 'done' : found ? 'now' : 'todo',
+      title: "Turn on the game's telemetry feed",
+      detail: `In ${game.name}: `,
+      menuPath: 'Settings → HUD and Gameplay → Data Out',
+      detailAfterPath: '. Some versions call it UDP Race Telemetry. Set:',
+      copyValues: [
+        { label: 'IP address', value: TELEMETRY_TARGET_IP },
+        { label: 'Port', value: String(port) }
+      ]
+    },
+    {
+      id: 'drive',
+      state: telemetryFresh ? 'done' : 'todo',
+      title: 'Drive',
+      detail: 'Get in a car. The moment data arrives, this page becomes the tuning canvas.'
+    }
+  ];
+
+  return { required: true, verified, fresh: telemetryFresh, port, steps };
+}
diff --git a/web/src/styles/tuning.css b/web/src/styles/tuning.css
index 2535398..f776ebc 100644
--- a/web/src/styles/tuning.css
+++ b/web/src/styles/tuning.css
@@ -120,6 +120,36 @@
   color: var(--warn);
 }
 
+.tuning-telemetry-chip.setup {
+  background: var(--accent-tint);
+  color: var(--accent-text);
+}
+
+.tuning-telemetry-chip.none {
+  background: var(--surface-raised);
+  color: var(--ink-muted);
+}
+
+/* The chip is the door back into the setup guide (Task 8). */
+.tuning-telemetry-chip.clickable {
+  border: 0;
+  font-family: inherit;
+  cursor: pointer;
+  transition: filter var(--speed) var(--ease);
+}
+
+.tuning-telemetry-chip.clickable:hover,
+.tuning-telemetry-chip.clickable:focus-visible {
+  filter: brightness(1.3);
+}
+
+.tuning-chip-suffix {
+  color: var(--ink-muted);
+  font-weight: 500;
+  text-transform: none;
+  letter-spacing: normal;
+}
+
 .tuning-header-profile-row {
   margin-top: 2px;
   display: flex;
@@ -693,6 +723,300 @@
   border-radius: var(--radius-m);
 }
 
+/* --- per-game setup guide (Task 8; layout truth game-setup.html) ------------
+
+   A canvas state, not a pop-up: replaces the tuning grid (rail included)
+   until the game's requirements verify. Numbered steps because setup IS a
+   sequence; the LISTENING box flips green passively when packets arrive. */
+
+.setup-guide {
+  padding: 16px;
+  max-width: 980px;
+}
+
+.setup-guide-head h2 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--ink);
+}
+
+.setup-guide-sub {
+  margin: 3px 0 0;
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+.setup-guide-grid {
+  display: flex;
+  gap: 26px;
+  margin-top: 16px;
+  flex-wrap: wrap;
+}
+
+.setup-steps {
+  flex: 1 1 380px;
+  min-width: 280px;
+  max-width: 560px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.setup-step {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+}
+
+.setup-stepnum {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--surface-raised);
+  color: var(--ink-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.setup-stepnum.done {
+  background: var(--ok-tint);
+  color: var(--ok);
+}
+
+.setup-stepnum.now {
+  background: var(--accent);
+  color: #fff;
+}
+
+.setup-step-body {
+  flex: 1;
+  min-width: 0;
+  padding-bottom: 14px;
+  border-left: 1px solid var(--hairline);
+  margin-left: -15px;
+  padding-left: 24px;
+}
+
+.setup-step:last-child .setup-step-body {
+  border-left-color: transparent;
+  padding-bottom: 0;
+}
+
+.setup-step-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.setup-step-title.settled {
+  color: var(--ink-muted);
+}
+
+.setup-step-detail {
+  margin-top: 3px;
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+.setup-step-detail b {
+  color: var(--ink);
+}
+
+.setup-copy-card {
+  margin-top: 8px;
+  padding: 9px 12px;
+  display: inline-block;
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-m);
+}
+
+.setup-copy-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--ink);
+}
+
+.setup-copy-row + .setup-copy-row {
+  margin-top: 5px;
+}
+
+.setup-copy-label {
+  min-width: 72px;
+  color: var(--ink-muted);
+}
+
+.setup-kbd {
+  background: var(--surface-raised);
+  border: 1px solid var(--hairline-strong);
+  border-radius: 4px;
+  padding: 1px 6px;
+  font-family: ui-monospace, 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: var(--ink);
+  user-select: all;
+}
+
+.setup-copy-button {
+  background: none;
+  border: 0;
+  padding: 0;
+  font-family: inherit;
+  font-size: 10px;
+  color: var(--accent-text);
+  cursor: pointer;
+}
+
+.setup-copy-button:hover,
+.setup-copy-button:focus-visible {
+  text-decoration: underline;
+}
+
+.setup-copy-fallback {
+  margin-top: 6px;
+  font-size: 10px;
+  color: var(--warn);
+}
+
+/* LISTENING box: bound to live telemetry; flips to --ok on its own. */
+.setup-listening {
+  flex: 0 1 280px;
+  min-width: 250px;
+  align-self: flex-start;
+  padding: 12px 14px;
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-m);
+  transition: border-color var(--speed) var(--ease);
+}
+
+.setup-listening.ok {
+  border-color: var(--ok);
+}
+
+.setup-lbl {
+  font-size: 10px;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+
+.setup-listening-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  font-size: 11px;
+  color: var(--ink);
+}
+
+.setup-listening-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent-bright);
+  flex: 0 0 auto;
+}
+
+.setup-listening.ok .setup-listening-dot {
+  background: var(--ok);
+}
+
+.setup-listening-note {
+  margin: 6px 0 0;
+  font-size: 10px;
+  color: var(--ink-muted);
+}
+
+.setup-listening.ok .setup-listening-note {
+  color: var(--ok);
+}
+
+.setup-stuck {
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px solid var(--hairline);
+}
+
+.setup-stuck summary {
+  font-size: 10px;
+  color: var(--accent-text);
+  cursor: pointer;
+}
+
+.setup-stuck ul {
+  margin: 8px 0 0;
+  padding-left: 16px;
+  font-size: 10px;
+  color: var(--ink-muted);
+  display: grid;
+  gap: 4px;
+}
+
+.setup-adapter-hint {
+  margin: 8px 0 0;
+  font-size: 10px;
+  color: var(--ink-muted);
+}
+
+/* Zero-setup variant: reassurance + pre-tune offer. */
+.setup-zero-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-bottom: 8px;
+  border-radius: 999px;
+  padding: 3px 10px;
+  background: var(--ok-tint);
+  color: var(--ok);
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.setup-pretune {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-top: 14px;
+  padding: 10px 14px;
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-m);
+}
+
+.setup-pretune p {
+  margin: 0;
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+.setup-pretune-button {
+  background: var(--accent);
+  color: #fff;
+  border: 0;
+  border-radius: var(--radius-s);
+  padding: 6px 14px;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.setup-pretune-button:hover,
+.setup-pretune-button:focus-visible {
+  filter: brightness(1.15);
+}
+
 @media (max-width: 480px) {
   .tuning-header-content {
     padding: 10px 12px 8px;

From 0a4f8ef8e42c8ac3ad94c6f7370afd2cb3b762bf Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 22:06:35 -0500
Subject: [PATCH 17/23] ui-rework: setup guide review fixes (deep-link race,
 chip affordance, a11y)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/App.svelte                            |  1 +
 web/src/lib/features/tuning/SetupGuide.svelte | 10 ++++++++--
 .../lib/features/tuning/TuningHeader.svelte   |  3 ++-
 .../lib/features/tuning/setupRequirements.ts  | 19 +++++++++++++++----
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index 717b647..25ebe3a 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -597,6 +597,7 @@
       return;
     }
     await selectTuningGame(game);
+    setupGuideGameTracker = game.gameId;
     setupGuideManual = true;
   };
   $: telemetryRateText = `${telemetryPacketRate >= 100 ? telemetryPacketRate.toFixed(0) : telemetryPacketRate.toFixed(1)} Hz`;
diff --git a/web/src/lib/features/tuning/SetupGuide.svelte b/web/src/lib/features/tuning/SetupGuide.svelte
index 9a87c12..2b2ae8d 100644
--- a/web/src/lib/features/tuning/SetupGuide.svelte
+++ b/web/src/lib/features/tuning/SetupGuide.svelte
@@ -87,6 +87,12 @@
     }, 1600);
   };
 
+  $effect(() => {
+    return () => {
+      window.clearTimeout(copyResetTimer);
+    };
+  });
+
   const stepNumber = (index: number) => index + 1;
 </script>
 
@@ -104,7 +110,7 @@
     </header>
 
     <div class="setup-guide-grid">
-      <ol class="setup-steps">
+      <ol class="setup-steps" role="list">
         {#each model.steps as step, index (step.id)}
           <li class="setup-step" data-state={step.state}>
             <span class="setup-stepnum" class:done={step.state === 'done'} class:now={step.state === 'now'} aria-hidden="true">
@@ -132,7 +138,7 @@
                     </div>
                   {/each}
                   {#if copyFailed}
-                    <div class="setup-copy-fallback">Copy is blocked in this browser — select the value and copy it yourself.</div>
+                    <div class="setup-copy-fallback" role="status">Copy is blocked in this browser — select the value and copy it yourself.</div>
                   {/if}
                 </div>
               {/if}
diff --git a/web/src/lib/features/tuning/TuningHeader.svelte b/web/src/lib/features/tuning/TuningHeader.svelte
index b76b45e..7b43f55 100644
--- a/web/src/lib/features/tuning/TuningHeader.svelte
+++ b/web/src/lib/features/tuning/TuningHeader.svelte
@@ -304,7 +304,8 @@
               class:setup={chipState === 'setup'}
               class:none={chipState === 'none'}
               type="button"
-              title={chipPresentation.title}
+              disabled={!setupVerified}
+              title={!setupVerified ? 'The setup guide is open below — it closes by itself once setup verifies.' : chipPresentation.title}
               aria-pressed={setupGuideOpen}
               onclick={onToggleSetupGuide}
             >
diff --git a/web/src/lib/features/tuning/setupRequirements.ts b/web/src/lib/features/tuning/setupRequirements.ts
index 22b930d..622cd0d 100644
--- a/web/src/lib/features/tuning/setupRequirements.ts
+++ b/web/src/lib/features/tuning/setupRequirements.ts
@@ -44,10 +44,21 @@ export type SetupModel = {
  * no adapter or no port is visible (the mock fixture, early startup).
  */
 export function telemetryPortFromAdapter(adapter: AdapterStatus | null | undefined): number {
-  for (const text of [adapter?.config, adapter?.setupHint]) {
-    const match = text?.match(/:(\d{2,5})(?!\d)/);
-    if (match) {
-      const port = Number(match[1]);
+  // Try address shape first: ipv4:port (e.g., 127.0.0.1:5300)
+  const config = adapter?.config;
+  if (config) {
+    const addressMatch = config.match(/(?:\d{1,3}\.){3}\d{1,3}:(\d{1,5})/);
+    if (addressMatch) {
+      const port = Number(addressMatch[1]);
+      if (Number.isInteger(port) && port > 0 && port <= 65535) return port;
+    }
+  }
+  // Fall back to hint field if config didn't match
+  const hint = adapter?.setupHint;
+  if (hint) {
+    const addressMatch = hint.match(/(?:\d{1,3}\.){3}\d{1,3}:(\d{1,5})/);
+    if (addressMatch) {
+      const port = Number(addressMatch[1]);
       if (Number.isInteger(port) && port > 0 && port <= 65535) return port;
     }
   }

From 596e59c6edb1c685e0e9770bd7b4c0fe4836ce83 Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 22:20:04 -0500
Subject: [PATCH 18/23] ui-rework: advanced section (controller details, edge
 slots, button mapping reskin)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/App.svelte                            |  44 +-
 web/src/app/navigation.ts                     |   5 +
 web/src/components/AppSidebar.svelte          |   6 +-
 .../controllers/ControllersView.svelte        | 603 +++++++-----------
 .../features/controllers/EdgeSlotsView.svelte |  94 +++
 web/src/styles/button-mapping/base.css        |  20 +-
 web/src/styles/button-mapping/editor.css      |  34 +-
 .../button-mapping/layout/controller-art.css  |  14 +-
 .../button-mapping/layout/inspector.css       |  10 +-
 .../styles/button-mapping/layout/panels.css   |   6 +-
 web/src/styles/button-mapping/mirror.css      |  12 +-
 web/src/styles/button-mapping/stage.css       |   4 +-
 web/src/styles/controllers.css                | 511 ++++++++-------
 13 files changed, 680 insertions(+), 683 deletions(-)
 create mode 100644 web/src/lib/features/controllers/EdgeSlotsView.svelte

diff --git a/web/src/App.svelte b/web/src/App.svelte
index 25ebe3a..6ccd498 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -80,6 +80,7 @@
     type TuningScope
   } from './app/profileWorkspace';
   import ControllersView from './lib/features/controllers/ControllersView.svelte';
+  import EdgeSlotsView from './lib/features/controllers/EdgeSlotsView.svelte';
   import GlobalFeelPanel from './lib/features/haptics/GlobalFeelPanel.svelte';
   import LightbarControls from './lib/features/haptics/LightbarControls.svelte';
   import TelemetryRoutingPanel from './lib/features/haptics/TelemetryRoutingPanel.svelte';
@@ -499,8 +500,9 @@
   $: selectedTuningGame = profileWorkspace.selectedTuningGame;
   $: tuningReady = profileWorkspace.tuningReady;
   $: buttonMappingReady = profileWorkspace.buttonMappingReady;
+  $: edgeSlotsReady = isEdgeTargetController(controller);
   $: {
-    const guardedView = guardView(activeView, { tuningReady, buttonMappingReady });
+    const guardedView = guardView(activeView, { tuningReady, buttonMappingReady, edgeSlotsReady });
     if (guardedView !== activeView) {
       activeView = guardedView;
       setViewHash(guardedView);
@@ -523,15 +525,16 @@
   $: activeProfileHeaderName = profileWorkspace.activeProfileHeaderName;
   $: activeProfileHeaderMeta = profileWorkspace.activeProfileHeaderMeta;
   $: buttonMappingActive = activeView === 'advancedButtonMapping';
-  // Temporary view composition (Tasks 6-9 replace the rest): 'status' renders the
-  // new StatusView; 'tuning' renders the TuningHeader plus the haptics workspace;
-  // 'advancedEdgeSlots' renders ControllersView because the Edge onboard slots UI
-  // currently lives inside it. Views the guard rejects land on 'status'.
-  $: showAdvancedControllerView = activeView === 'advancedController' || activeView === 'advancedEdgeSlots';
+  // View composition: each route renders its own view; views the guard rejects
+  // land on 'status' (Edge onboard slots land on Controller details instead).
+  $: showAdvancedControllerView = activeView === 'advancedController';
+  $: showEdgeSlotsView = activeView === 'advancedEdgeSlots';
   $: showStatusView = activeView === 'status';
   $: showTuningView = activeView === 'tuning';
   $: showWorkspaceViews =
-    showAdvancedControllerView || (tuningReady && (activeView === 'tuning' || activeView === 'advancedButtonMapping'));
+    showAdvancedControllerView ||
+    showEdgeSlotsView ||
+    (tuningReady && (activeView === 'tuning' || activeView === 'advancedButtonMapping'));
   $: steamInputStatus = snapshot?.steamInput;
   $: inputBridgeStatus = snapshot?.inputBridge;
   $: telemetryPacketRate = adapter?.packetRateHz ?? 0;
@@ -731,7 +734,7 @@
 
   const appViewFromHash = (): AppView => {
     if (typeof window === 'undefined') return 'status';
-    return viewFromHash(window.location.hash, { tuningReady, buttonMappingReady });
+    return viewFromHash(window.location.hash, { tuningReady, buttonMappingReady, edgeSlotsReady });
   };
 
   const setViewHash = (view: AppView) => {
@@ -747,7 +750,7 @@
   };
 
   const navigateToView = (view: AppView) => {
-    view = guardView(view, { tuningReady, buttonMappingReady });
+    view = guardView(view, { tuningReady, buttonMappingReady, edgeSlotsReady });
     activeView = view;
     setViewHash(view);
   };
@@ -2166,7 +2169,7 @@
 <div class="app-shell">
   <AppSidebar
     view={activeView}
-    readiness={{ tuningReady, buttonMappingReady }}
+    readiness={{ tuningReady, buttonMappingReady, edgeSlotsReady }}
     onNavigate={navigateToView}
   >
     {#snippet footer()}
@@ -2389,12 +2392,6 @@
           inputBridge={snapshot?.inputBridge ?? null}
           activeGameName={selectedGame?.name ?? null}
           activeInputProvider={selectedGame?.inputProvider ?? currentControllerConfig?.inputMode ?? 'native_dualsense'}
-          {edgeProfiles}
-          {edgeProfilesLoading}
-          {edgeProfilesBusySlot}
-          {edgeProfilesError}
-          {edgeSlotsReadTooltip}
-          edgeSlotWriteLabel={edgeSlotWriteLabel()}
           onSelect={selectTargetController}
           onBeginRename={beginControllerRename}
           onSubmitRename={submitControllerRename}
@@ -2405,6 +2402,21 @@
           onSetStickDeadzone={setStickDeadzone}
           onStartInputBridge={startControllerInputBridge}
           onStopInputBridge={stopControllerInputBridge}
+          {supportBundleBusy}
+          onDownloadSupportBundle={exportSupportBundle}
+        />
+      {/if}
+
+      {#if showEdgeSlotsView}
+        <EdgeSlotsView
+          {controller}
+          {currentControllerConfig}
+          {edgeProfiles}
+          {edgeProfilesLoading}
+          {edgeProfilesBusySlot}
+          {edgeProfilesError}
+          {edgeSlotsReadTooltip}
+          edgeSlotWriteLabel={edgeSlotWriteLabel()}
           onRefreshEdgeProfiles={() => controller && void loadEdgeProfiles(controller.id, true)}
           onWriteEdgeSlot={writeCurrentConfigToEdgeSlot}
           {edgeSlotName}
diff --git a/web/src/app/navigation.ts b/web/src/app/navigation.ts
index 54e6bb7..3b98a40 100644
--- a/web/src/app/navigation.ts
+++ b/web/src/app/navigation.ts
@@ -10,6 +10,8 @@ export type AppViewDefinition = {
 export type ViewReadiness = {
   tuningReady: boolean;
   buttonMappingReady: boolean;
+  /** True when the Target Controller is a DualSense Edge. */
+  edgeSlotsReady: boolean;
 };
 
 export const appViews: AppViewDefinition[] = [
@@ -53,6 +55,9 @@ export function hashForView(view: AppView): string {
 export function guardView(view: AppView, readiness: ViewReadiness): AppView {
   if (view === 'tuning' && !readiness.tuningReady) return 'status';
   if (view === 'advancedButtonMapping' && !readiness.buttonMappingReady) return 'status';
+  // Edge onboard slots only exist on a DualSense Edge; direct hash navigation
+  // lands on Controller details, which explains the selected controller.
+  if (view === 'advancedEdgeSlots' && !readiness.edgeSlotsReady) return 'advancedController';
   return view;
 }
 
diff --git a/web/src/components/AppSidebar.svelte b/web/src/components/AppSidebar.svelte
index c51251b..42f4ea3 100644
--- a/web/src/components/AppSidebar.svelte
+++ b/web/src/components/AppSidebar.svelte
@@ -26,13 +26,17 @@
 
   const itemDisabled = (id: AppView): boolean =>
     (id === 'tuning' && !readiness.tuningReady) ||
-    (id === 'advancedButtonMapping' && !readiness.buttonMappingReady);
+    (id === 'advancedButtonMapping' && !readiness.buttonMappingReady) ||
+    (id === 'advancedEdgeSlots' && !readiness.edgeSlotsReady);
 
   const itemTooltip = (id: AppView): string => {
     if (id === 'tuning' && !readiness.tuningReady) return 'Select a controller before tuning haptics.';
     if (id === 'advancedButtonMapping' && !readiness.buttonMappingReady) {
       return 'Select a game or local app scope before editing mappings.';
     }
+    if (id === 'advancedEdgeSlots' && !readiness.edgeSlotsReady) {
+      return 'Onboard slots are available when the Target Controller is a DualSense Edge.';
+    }
     return viewTooltips[id];
   };
 </script>
diff --git a/web/src/lib/features/controllers/ControllersView.svelte b/web/src/lib/features/controllers/ControllersView.svelte
index a269427..d4c9876 100644
--- a/web/src/lib/features/controllers/ControllersView.svelte
+++ b/web/src/lib/features/controllers/ControllersView.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte';
   import ControllerCard from './ControllerCard.svelte';
-  import Tooltip from '../../../components/Tooltip.svelte';
   import { getControllerInput } from '../../api';
   import {
     controllerBatteryDetail,
@@ -18,8 +17,6 @@
     ControllerInputState,
     ControllerInputStickState,
     ControllerStatus,
-    EdgeProfileSlot,
-    EdgeProfilesResponse,
     InputBridgeStatus
   } from '../../types';
 
@@ -53,12 +50,6 @@
   export let currentControllerConfig: ControllerConfiguration | null = null;
   export let leftStickDeadzone = 0;
   export let rightStickDeadzone = 0;
-  export let edgeProfiles: EdgeProfilesResponse | null = null;
-  export let edgeProfilesLoading = false;
-  export let edgeProfilesBusySlot = '';
-  export let edgeProfilesError = '';
-  export let edgeSlotsReadTooltip = '';
-  export let edgeSlotWriteLabel = 'Write';
   export let inputBridge: InputBridgeStatus | null = null;
   export let activeGameName: string | null = null;
   export let activeInputProvider = 'native_dualsense';
@@ -72,12 +63,8 @@
   export let onSetStickDeadzone: (side: 'left' | 'right', value: number) => void | Promise<void> = () => {};
   export let onStartInputBridge: () => void | Promise<void> = () => {};
   export let onStopInputBridge: () => void | Promise<void> = () => {};
-  export let onRefreshEdgeProfiles: () => void | Promise<void> = () => {};
-  export let onWriteEdgeSlot: (slot: EdgeProfileSlot) => void | Promise<void> = () => {};
-  export let edgeSlotName: (slot: EdgeProfileSlot) => string = (slot) => slot.name ?? slot.shortcut;
-  export let edgeSlotStatus: (slot: EdgeProfileSlot) => string = (slot) => slot.state;
-  export let edgeSlotInfoTooltip: (slot: EdgeProfileSlot) => string = (slot) => edgeSlotStatus(slot);
-  export let edgeSlotWriteTooltip: (slot: EdgeProfileSlot) => string = (slot) => `Write ${edgeSlotName(slot)}`;
+  export let supportBundleBusy: 'copy' | 'download' | '' = '';
+  export let onDownloadSupportBundle: () => void | Promise<void> = () => {};
 
   let inputState: ControllerInputState | null = null;
   let inputFresh = false;
@@ -100,6 +87,8 @@
     currentControllerConfig?.inputMode === 'dscc_input_bridge' && Boolean(currentControllerConfig?.inputBridge?.enabled);
   $: bridgeSessionActive = bridgeSession?.state === 'active';
   $: powerDiagnostics = controller?.powerDiagnostics ?? null;
+  $: alias = controller?.name || controller?.family || 'No controller';
+  $: stickDriftLine = driftSummary(selectedInput, leftStick, rightStick);
   $: powerSuggestions = batteryFriendlySuggestions(controller, currentControllerConfig);
   $: if ((controller?.id ?? '') !== observedForController) {
     observedForController = controller?.id ?? '';
@@ -273,6 +262,18 @@
     return `${Math.min(40, Math.max(3, Math.ceil(stick.magnitude * 100 + 2)))}%`;
   }
 
+  /** Plain-words stick summary; raw per-stick values stay in the group below. */
+  function driftSummary(
+    input: ControllerInputState | null,
+    left: ControllerInputStickState,
+    right: ControllerInputStickState
+  ) {
+    if (!input) return 'waiting for input';
+    const max = Math.max(left.magnitude, right.magnitude);
+    if (max < 0.05) return 'centered · no drift detected';
+    return `reading ${percent(max)} of travel — fine while you move them; if untouched, raise the deadzone`;
+  }
+
   function inputFreshness(input: ControllerInputState | null) {
     if (!input?.available) return input?.message ?? 'Input unavailable';
     if (typeof input.ageMs === 'number') return `${input.source} / ${input.ageMs}ms`;
@@ -302,7 +303,7 @@
     if (bridgeSessionActive || controllerBridgeConfigured || appRequiresBridge) {
       return inputBridge?.available
         ? `${inputBridge.provider} / ${inputBridge.state}`
-        : inputBridge?.message ?? 'Bridge backend unavailable';
+        : inputBridge?.message ?? 'Bridge unavailable';
     }
     if (inputPathTitle() === 'Steam Input Companion') {
       return 'Steam handles game-facing mapping; DSCC keeps typed haptics and diagnostics.';
@@ -394,387 +395,243 @@
   onDestroy(stopInputPolling);
 </script>
 
-<section class="dm-controllers-page" aria-label="Controllers">
-  <div class="dm-games-column">
-    <div class="dm-games-head">
-      <span>Hardware</span>
-      <h2>Controllers</h2>
-    </div>
-    <div class="dm-controller-choice-list">
-      {#if controllers.length}
-        {#each controllers as item, index (item.id)}
-          <ControllerCard
-            {item}
-            {index}
-            selected={item.id === selectedControllerId}
-            renameActive={renameActiveId === item.id}
-            bind:renameName
-            renameBusy={renameBusy}
-            onSelect={onSelect}
-            onBeginRename={onBeginRename}
-            onSubmitRename={onSubmitRename}
-            onCancelRename={onCancelRename}
-            onRenameKeydown={onRenameKeydown}
-          />
-        {/each}
-      {:else}
-        <div class="dm-empty-choice">
-          <strong>No controller detected</strong>
-          <span>Controller unavailable</span>
-        </div>
-      {/if}
-    </div>
-
-    {#if controller?.family === 'DualSense Edge'}
-      <section class="dm-edge-slots" aria-label="DualSense Edge onboard profiles">
-        <div class="dm-edge-slots-head">
-          <div>
-            <span>Onboard Memory</span>
-            <strong>Edge Slots</strong>
-          </div>
-          <Tooltip text={edgeSlotsReadTooltip} side="bottom" align="end">
-            <button
-              type="button"
-              class="dm-mini-button"
-              disabled={edgeProfilesLoading}
-              aria-label="Refresh DualSense Edge onboard slots"
-              onclick={() => void onRefreshEdgeProfiles()}
-            >
-              {edgeProfilesLoading ? 'Reading' : 'Read'}
-            </button>
-          </Tooltip>
-        </div>
-
-        {#if edgeProfilesError}
-          <p class="dm-edge-slots-note error">{edgeProfilesError}</p>
-        {:else if edgeProfiles?.warning}
-          <p class="dm-edge-slots-note">{edgeProfiles.warning}</p>
-        {/if}
+<section class="ctl-view" aria-label="Controller details">
+  <div class="ctl-head">
+    <h1 class="ctl-title">Controller details</h1>
+    <span class="ctl-sub">{alias} &middot; live readouts for checking, not for everyday tuning</span>
+  </div>
 
-        <div class="dm-edge-slot-list">
-          {#if edgeProfiles?.slots.length}
-            {#each edgeProfiles.slots as slot (slot.slotId)}
-              <div class="dm-edge-slot-row" class:disabled={!slot.editable}>
-                <Tooltip block text={edgeSlotInfoTooltip(slot)} side="right" align="start">
-                  <div class="dm-edge-slot-copy">
-                    <span>{slot.shortcut}</span>
-                    <strong>{edgeSlotName(slot)}</strong>
-                    <small>{edgeSlotStatus(slot)}</small>
-                  </div>
-                </Tooltip>
-                {#if slot.editable}
-                  <Tooltip text={edgeSlotWriteTooltip(slot)} side="left" align="center">
-                    <button
-                      type="button"
-                      class="dm-mini-button primary"
-                      disabled={!currentControllerConfig || edgeProfilesBusySlot === slot.slotId}
-                      onclick={() => void onWriteEdgeSlot(slot)}
-                    >
-                      {edgeProfilesBusySlot === slot.slotId ? 'Writing' : edgeSlotWriteLabel}
-                    </button>
-                  </Tooltip>
-                {/if}
-              </div>
-            {/each}
-          {:else}
-            <div class="dm-edge-slot-row disabled">
-              <div>
-                <span>Fn Slots</span>
-                <strong>{edgeProfilesLoading ? 'Reading slots' : 'No slot data'}</strong>
-                <small>{edgeProfilesLoading ? 'controller scan' : 'unavailable'}</small>
-              </div>
-            </div>
-          {/if}
+  <div class="ctl-groups">
+    {#if controllers.length > 1}
+      <div class="ctl-group ctl-group-controllers">
+        <div class="lbl">Controllers</div>
+        <div class="ctl-controller-list">
+          {#each controllers as item, index (item.id)}
+            <ControllerCard
+              {item}
+              {index}
+              selected={item.id === selectedControllerId}
+              renameActive={renameActiveId === item.id}
+              bind:renameName
+              renameBusy={renameBusy}
+              onSelect={onSelect}
+              onBeginRename={onBeginRename}
+              onSubmitRename={onSubmitRename}
+              onCancelRename={onCancelRename}
+              onRenameKeydown={onRenameKeydown}
+            />
+          {/each}
         </div>
-      </section>
+      </div>
     {/if}
-  </div>
 
-  <div class="dm-controllers-workbench">
-    <section class="dm-controller-overview" aria-label="Selected controller details">
-      <div class="dm-controller-overview-copy">
-        <span>Selected</span>
-        <strong>{controllerModelText(controller)}</strong>
-        <small>{statusTone(controller)}</small>
+    {#if !controller}
+      <div class="ctl-group">
+        <div class="lbl">Live input</div>
+        <div class="ctl-surf ctl-empty">
+          <strong>No controller selected</strong>
+          <span>Connect a DualSense controller to view live input, trigger travel, and calibration readings.</span>
+        </div>
       </div>
-      {#if controller}
-        <dl class="dm-controller-metric-grid">
-          <div>
-            <dt>Connection</dt>
-            <dd>{controllerTransportDetail(controller)}</dd>
-          </div>
-          <div>
-            <dt>Battery</dt>
-            <dd>{controllerBatteryDetail(controller)}</dd>
+    {:else}
+      <div class="ctl-group">
+        <div class="lbl">Live input</div>
+        <div class="ctl-surf" aria-label="Live controller input">
+          <div class="ctl-meter-row">
+            <span>L2</span>
+            <span class="ctl-mut">{percent(l2Value)}</span>
           </div>
-          <div>
-            <dt>Permission</dt>
-            <dd>{controllerPermissionDetail(controller)}</dd>
+          <div class="ctl-meter" aria-hidden="true"><span style={triggerStyle(l2Value)}></span></div>
+          <div class="ctl-meter-row">
+            <span>R2</span>
+            <span class="ctl-mut">{percent(r2Value)}</span>
           </div>
-          <div>
-            <dt>Diagnostics</dt>
-            <dd>{controllerDiagnosticDetail(controller)}</dd>
+          <div class="ctl-meter" aria-hidden="true"><span style={triggerStyle(r2Value)}></span></div>
+          <div class="ctl-meter-row">
+            <span>Sticks</span>
+            <span class="ctl-mut">{stickDriftLine}</span>
           </div>
-          <div class="wide">
-            <dt>Sanitized ID</dt>
-            <dd class="mono">{controller.id}</dd>
+          <div class="ctl-meter-row">
+            <span>Feed</span>
+            <span class="ctl-mut ctl-mono">{inputFreshness(inputState)}</span>
           </div>
-        </dl>
-      {/if}
-    </section>
-
-    {#if !controller}
-      <section class="dm-controller-empty-state" aria-label="No controller selected">
-        <strong>No controller selected</strong>
-        <span>Connect a DualSense controller to view input routing, live stick plots, trigger travel, and calibration readings.</span>
-      </section>
-    {:else}
-    <section class="dm-input-path-panel" aria-label="Controller input path">
-      <div class="dm-live-panel-head">
-        <div>
-          <span>Input Path</span>
-          <strong>{inputPathTitle()}</strong>
-        </div>
-        <code>{activeGameName ?? 'No active app'}</code>
-      </div>
-      <dl class="dm-controller-metric-grid compact">
-        <div>
-          <dt>Provider</dt>
-          <dd>{inputPathDetail()}</dd>
-        </div>
-        <div>
-          <dt>Duplicate Input</dt>
-          <dd>{duplicateInputDetail()}</dd>
-        </div>
-        <div class="wide">
-          <dt>Bridge Session</dt>
-          <dd>{bridgeSessionState()}</dd>
-        </div>
-      </dl>
-      <div class="dm-input-path-actions" aria-label="Input path controls">
-        <button
-          type="button"
-          class:active={currentControllerConfig?.inputMode === 'native_dualsense'}
-          disabled={!controller || !currentControllerConfig || Boolean(inputBridgeBusy)}
-          aria-pressed={currentControllerConfig?.inputMode === 'native_dualsense'}
-          onclick={() => void onSetInputMode('native_dualsense')}
-        >Native</button>
-        <button
-          type="button"
-          class:active={currentControllerConfig?.inputMode === 'steam_input_companion'}
-          disabled={!controller || !currentControllerConfig || Boolean(inputBridgeBusy)}
-          aria-pressed={currentControllerConfig?.inputMode === 'steam_input_companion'}
-          onclick={() => void onSetInputMode('steam_input_companion')}
-        >Steam</button>
-        <button
-          type="button"
-          class:active={controllerBridgeConfigured}
-          disabled={!controller || !currentControllerConfig || Boolean(inputBridgeBusy)}
-          aria-pressed={controllerBridgeConfigured}
-          onclick={() => void onSetInputMode('dscc_input_bridge')}
-        >Bridge</button>
-        <span></span>
-        <button
-          type="button"
-          class="primary"
-          disabled={!controller || !controllerBridgeConfigured || !appRequiresBridge || bridgeSessionActive || !inputBridge?.available || Boolean(inputBridgeBusy)}
-          onclick={() => void onStartInputBridge()}
-        >{inputBridgeBusy === 'start' ? 'Starting' : 'Start'}</button>
-        <button
-          type="button"
-          disabled={!controller || !bridgeSession || !bridgeSessionActive || Boolean(inputBridgeBusy)}
-          onclick={() => void onStopInputBridge()}
-        >{inputBridgeBusy === 'stop' ? 'Stopping' : 'Stop'}</button>
-      </div>
-      {#if controllerBridgeConfigured && !appRequiresBridge}
-        <p class="dm-edge-slots-note">Bridge sessions start only while the selected local app is active.</p>
-      {/if}
-      {#if inputBridge?.warnings.length && inputPathTitle() === 'DSCC Input Bridge'}
-        <p class="dm-edge-slots-note">{inputBridge.warnings[0]}</p>
-      {/if}
-    </section>
-
-    <section class="dm-power-diagnostics-panel" aria-label="Power diagnostics">
-      <div class="dm-live-panel-head">
-        <div>
-          <span>Power Diagnostics</span>
-          <strong>{hasPowerMetrics(controller) ? 'Output Cadence' : 'Awaiting Agent Metrics'}</strong>
-        </div>
-        <code>{controller.transport}</code>
-      </div>
-      <dl class="dm-controller-metric-grid compact">
-        <div>
-          <dt>Write Rate</dt>
-          <dd>{formatHz(powerDiagnostics?.outputWriteRateHz)}</dd>
-        </div>
-        <div>
-          <dt>Cadence</dt>
-          <dd>{formatMs(powerDiagnostics?.outputCadenceMs)}</dd>
-        </div>
-        <div>
-          <dt>Suppressed</dt>
-          <dd>{formatCount(powerDiagnostics?.suppressedRedundantReports)}</dd>
         </div>
-        <div>
-          <dt>Keepalive</dt>
-          <dd>{formatMs(powerDiagnostics?.keepaliveIntervalMs)}</dd>
-        </div>
-        <div>
-          <dt>Last Write</dt>
-          <dd>{formatMs(powerDiagnostics?.lastWriteAgeMs)}</dd>
-        </div>
-        <div>
-          <dt>Rumble Path</dt>
-          <dd>{formatFlag(powerDiagnostics?.nativeRumblePassthrough, 'native passthrough', 'DSCC shaped')}</dd>
-        </div>
-        <div class="wide">
-          <dt>Trigger Policy</dt>
-          <dd>{formatFlag(powerDiagnostics?.adaptiveTriggersRetained, 'adaptive triggers retained', 'adaptive triggers not retained')}</dd>
-        </div>
-      </dl>
-      <div class="dm-power-suggestion-list" aria-label="Battery-friendly haptic guidance">
-        {#each powerSuggestions as suggestion}
-          <p>{suggestion}</p>
-        {/each}
-      </div>
-    </section>
-
-    <section class="dm-live-input-panel" aria-label="Live controller input">
-      <div class="dm-live-panel-head">
-        <div>
-          <span>Live Input</span>
-          <strong>{inputFresh ? 'Streaming' : 'Unavailable'}</strong>
-        </div>
-        <code>{inputFreshness(inputState)}</code>
-      </div>
 
-      <div class="dm-live-stick-grid">
-        <article class="dm-stick-module">
-          <div class="dm-stick-head">
-            <span>Left Stick</span>
-            <code>{signedPercent(leftStick.x)} / {signedPercent(leftStick.y)}</code>
-          </div>
-          <div class="dm-stick-plot" style={stickStyle(leftStick)} aria-hidden="true">
-            <span class="dm-stick-ring"></span>
-            <span class="dm-stick-dot"></span>
-          </div>
-          <dl>
-            <div>
-              <dt>Drift</dt>
-              <dd>{percent(leftStick.magnitude)}</dd>
+        <div class="ctl-stick-grid">
+          <article class="ctl-stick">
+            <div class="ctl-meter-row">
+              <span>Left stick</span>
+              <span class="ctl-mut ctl-mono">{signedPercent(leftStick.x)} / {signedPercent(leftStick.y)}</span>
             </div>
-            <div>
-              <dt>Suggested DZ</dt>
-              <dd>{suggestedDeadzone(leftStick)}</dd>
+            <div class="ctl-stick-plot" style={stickStyle(leftStick)} aria-hidden="true">
+              <span class="ctl-stick-ring"></span>
+              <span class="ctl-stick-dot"></span>
             </div>
-          </dl>
-          <div class="dm-stick-tuning-row">
-            <span>Deadzone</span>
-            <input
-              class="dm-mini-range"
-              style="--value:{leftStickDeadzone * 2.5}%"
-              type="range"
-              min="0"
-              max="40"
-              value={leftStickDeadzone}
-              disabled={!controller || !currentControllerConfig}
-              aria-label="Left stick deadzone"
-              oninput={(event) => void onSetStickDeadzone('left', event.currentTarget.valueAsNumber)}
-            />
-            <code>{leftStickDeadzone}%</code>
-          </div>
-        </article>
-
-        <article class="dm-stick-module">
-          <div class="dm-stick-head">
-            <span>Right Stick</span>
-            <code>{signedPercent(rightStick.x)} / {signedPercent(rightStick.y)}</code>
-          </div>
-          <div class="dm-stick-plot" style={stickStyle(rightStick)} aria-hidden="true">
-            <span class="dm-stick-ring"></span>
-            <span class="dm-stick-dot"></span>
-          </div>
-          <dl>
-            <div>
-              <dt>Drift</dt>
-              <dd>{percent(rightStick.magnitude)}</dd>
+            <div class="ctl-rows">
+              <div class="ctl-row"><span>Off-center now</span><span class="ctl-mut">{percent(leftStick.magnitude)}</span></div>
+              <div class="ctl-row"><span>Suggested deadzone</span><span class="ctl-mut">{suggestedDeadzone(leftStick)}</span></div>
             </div>
-            <div>
-              <dt>Suggested DZ</dt>
-              <dd>{suggestedDeadzone(rightStick)}</dd>
+            <div class="ctl-deadzone-row">
+              <span>Deadzone</span>
+              <input
+                type="range"
+                min="0"
+                max="40"
+                value={leftStickDeadzone}
+                disabled={!controller || !currentControllerConfig}
+                aria-label="Left stick deadzone"
+                oninput={(event) => void onSetStickDeadzone('left', event.currentTarget.valueAsNumber)}
+              />
+              <span class="ctl-mono">{leftStickDeadzone}%</span>
             </div>
-          </dl>
-          <div class="dm-stick-tuning-row">
-            <span>Deadzone</span>
-            <input
-              class="dm-mini-range"
-              style="--value:{rightStickDeadzone * 2.5}%"
-              type="range"
-              min="0"
-              max="40"
-              value={rightStickDeadzone}
-              disabled={!controller || !currentControllerConfig}
-              aria-label="Right stick deadzone"
-              oninput={(event) => void onSetStickDeadzone('right', event.currentTarget.valueAsNumber)}
-            />
-            <code>{rightStickDeadzone}%</code>
-          </div>
-        </article>
-      </div>
+          </article>
+          <article class="ctl-stick">
+            <div class="ctl-meter-row">
+              <span>Right stick</span>
+              <span class="ctl-mut ctl-mono">{signedPercent(rightStick.x)} / {signedPercent(rightStick.y)}</span>
+            </div>
+            <div class="ctl-stick-plot" style={stickStyle(rightStick)} aria-hidden="true">
+              <span class="ctl-stick-ring"></span>
+              <span class="ctl-stick-dot"></span>
+            </div>
+            <div class="ctl-rows">
+              <div class="ctl-row"><span>Off-center now</span><span class="ctl-mut">{percent(rightStick.magnitude)}</span></div>
+              <div class="ctl-row"><span>Suggested deadzone</span><span class="ctl-mut">{suggestedDeadzone(rightStick)}</span></div>
+            </div>
+            <div class="ctl-deadzone-row">
+              <span>Deadzone</span>
+              <input
+                type="range"
+                min="0"
+                max="40"
+                value={rightStickDeadzone}
+                disabled={!controller || !currentControllerConfig}
+                aria-label="Right stick deadzone"
+                oninput={(event) => void onSetStickDeadzone('right', event.currentTarget.valueAsNumber)}
+              />
+              <span class="ctl-mono">{rightStickDeadzone}%</span>
+            </div>
+          </article>
+        </div>
 
-      <div class="dm-trigger-meter-grid">
-        <article class="dm-trigger-meter" style={triggerStyle(l2Value)}>
-          <div>
-            <span>L2</span>
-            <strong>{percent(l2Value)}</strong>
-          </div>
-          <div class="dm-trigger-bar" aria-hidden="true"><span></span></div>
-        </article>
-        <article class="dm-trigger-meter" style={triggerStyle(r2Value)}>
-          <div>
-            <span>R2</span>
-            <strong>{percent(r2Value)}</strong>
-          </div>
-          <div class="dm-trigger-bar" aria-hidden="true"><span></span></div>
-        </article>
+        <div class="ctl-button-grid" aria-label="Live button states">
+          {#each visibleButtons as button (button.id)}
+            <div class:pressed={button.pressed} class="ctl-button-state">
+              <span>{button.label}</span>
+              <span class="ctl-mono">{button.id === 'l2' || button.id === 'r2' ? percent(button.value) : button.pressed ? 'ON' : 'OFF'}</span>
+            </div>
+          {/each}
+        </div>
       </div>
 
-      <div class="dm-button-grid" aria-label="Live button states">
-        {#each visibleButtons as button (button.id)}
-          <div class:pressed={button.pressed} class="dm-button-state">
-            <span>{button.label}</span>
-            <code>{button.id === 'l2' || button.id === 'r2' ? percent(button.value) : button.pressed ? 'ON' : 'OFF'}</code>
-          </div>
-        {/each}
-      </div>
-    </section>
+      <div class="ctl-group">
+        <div class="lbl">Connection</div>
+        <div class="ctl-rows">
+          <div class="ctl-row"><span>Controller</span><span class="ctl-mut">{controllerModelText(controller)}</span></div>
+          <div class="ctl-row"><span>State</span><span class="ctl-mut">{statusTone(controller)}</span></div>
+          <div class="ctl-row"><span>Transport</span><span class="ctl-mut">{controllerTransportDetail(controller)}</span></div>
+          <div class="ctl-row"><span>Battery</span><span class="ctl-mut">{controllerBatteryDetail(controller)}</span></div>
+          <div class="ctl-row"><span>Permission</span><span class="ctl-mut">{controllerPermissionDetail(controller)}</span></div>
+          <div class="ctl-row"><span>Diagnostics</span><span class="ctl-mut">{controllerDiagnosticDetail(controller)}</span></div>
+          <div class="ctl-row"><span>Sanitized ID</span><span class="ctl-mut ctl-mono">{controller.id}</span></div>
+        </div>
 
-    <section class="dm-calibration-readout" aria-label="Calibration measurements">
-      <div class="dm-live-panel-head">
-        <div>
-          <span>Calibration</span>
-          <strong>Session Readings</strong>
+        <div class="lbl ctl-sublabel">Input path</div>
+        <div class="ctl-rows">
+          <div class="ctl-row"><span>Path</span><span class="ctl-mut">{inputPathTitle()}</span></div>
+          <div class="ctl-row"><span>Active app</span><span class="ctl-mut">{activeGameName ?? 'No active app'}</span></div>
+          <div class="ctl-row"><span>Provider</span><span class="ctl-mut">{inputPathDetail()}</span></div>
+          <div class="ctl-row"><span>Duplicate input</span><span class="ctl-mut">{duplicateInputDetail()}</span></div>
+          <div class="ctl-row"><span>Bridge session</span><span class="ctl-mut">{bridgeSessionState()}</span></div>
         </div>
-      </div>
-      <dl class="dm-calibration-grid">
-        <div>
-          <dt>Left Range</dt>
-          <dd>{stickRange(observed.leftStick)}</dd>
+        <div class="ctl-actions" aria-label="Input path controls">
+          <button
+            type="button"
+            class="ctl-button"
+            class:active={currentControllerConfig?.inputMode === 'native_dualsense'}
+            disabled={!controller || !currentControllerConfig || Boolean(inputBridgeBusy)}
+            aria-pressed={currentControllerConfig?.inputMode === 'native_dualsense'}
+            onclick={() => void onSetInputMode('native_dualsense')}
+          >Native</button>
+          <button
+            type="button"
+            class="ctl-button"
+            class:active={currentControllerConfig?.inputMode === 'steam_input_companion'}
+            disabled={!controller || !currentControllerConfig || Boolean(inputBridgeBusy)}
+            aria-pressed={currentControllerConfig?.inputMode === 'steam_input_companion'}
+            onclick={() => void onSetInputMode('steam_input_companion')}
+          >Steam</button>
+          <button
+            type="button"
+            class="ctl-button"
+            class:active={controllerBridgeConfigured}
+            disabled={!controller || !currentControllerConfig || Boolean(inputBridgeBusy)}
+            aria-pressed={controllerBridgeConfigured}
+            onclick={() => void onSetInputMode('dscc_input_bridge')}
+          >Bridge</button>
+          <button
+            type="button"
+            class="ctl-button primary"
+            disabled={!controller || !controllerBridgeConfigured || !appRequiresBridge || bridgeSessionActive || !inputBridge?.available || Boolean(inputBridgeBusy)}
+            onclick={() => void onStartInputBridge()}
+          >{inputBridgeBusy === 'start' ? 'Starting' : 'Start'}</button>
+          <button
+            type="button"
+            class="ctl-button"
+            disabled={!controller || !bridgeSession || !bridgeSessionActive || Boolean(inputBridgeBusy)}
+            onclick={() => void onStopInputBridge()}
+          >{inputBridgeBusy === 'stop' ? 'Stopping' : 'Stop'}</button>
         </div>
-        <div>
-          <dt>Right Range</dt>
-          <dd>{stickRange(observed.rightStick)}</dd>
+        {#if controllerBridgeConfigured && !appRequiresBridge}
+          <p class="ctl-note">Bridge sessions start only while the selected local app is active.</p>
+        {/if}
+        {#if inputBridge?.warnings.length && inputPathTitle() === 'DSCC Input Bridge'}
+          <p class="ctl-note">{inputBridge.warnings[0]}</p>
+        {/if}
+      </div>
+
+      <div class="ctl-group">
+        <div class="lbl">Power</div>
+        <div class="ctl-rows">
+          <div class="ctl-row"><span>Write rate</span><span class="ctl-mut">{formatHz(powerDiagnostics?.outputWriteRateHz)}</span></div>
+          <div class="ctl-row"><span>Cadence</span><span class="ctl-mut">{formatMs(powerDiagnostics?.outputCadenceMs)}</span></div>
+          <div class="ctl-row"><span>Suppressed writes</span><span class="ctl-mut">{formatCount(powerDiagnostics?.suppressedRedundantReports)}</span></div>
+          <div class="ctl-row"><span>Keepalive</span><span class="ctl-mut">{formatMs(powerDiagnostics?.keepaliveIntervalMs)}</span></div>
+          <div class="ctl-row"><span>Last write</span><span class="ctl-mut">{formatMs(powerDiagnostics?.lastWriteAgeMs)}</span></div>
+          <div class="ctl-row"><span>Rumble path</span><span class="ctl-mut">{formatFlag(powerDiagnostics?.nativeRumblePassthrough, 'native passthrough', 'DSCC shaped')}</span></div>
+          <div class="ctl-row"><span>Trigger policy</span><span class="ctl-mut">{formatFlag(powerDiagnostics?.adaptiveTriggersRetained, 'adaptive triggers retained', 'adaptive triggers not retained')}</span></div>
         </div>
-        <div>
-          <dt>L2 Range</dt>
-          <dd>{rangePair(observed.l2Min, observed.l2Max)}</dd>
+        <div class="ctl-suggestions" aria-label="Battery-friendly haptic guidance">
+          {#each powerSuggestions as suggestion}
+            <p class="ctl-note">{suggestion}</p>
+          {/each}
         </div>
-        <div>
-          <dt>R2 Range</dt>
-          <dd>{rangePair(observed.r2Min, observed.r2Max)}</dd>
+      </div>
+
+      <div class="ctl-group">
+        <div class="lbl">Session readings</div>
+        <div class="ctl-rows">
+          <div class="ctl-row"><span>Left range</span><span class="ctl-mut ctl-mono">{stickRange(observed.leftStick)}</span></div>
+          <div class="ctl-row"><span>Right range</span><span class="ctl-mut ctl-mono">{stickRange(observed.rightStick)}</span></div>
+          <div class="ctl-row"><span>L2 range</span><span class="ctl-mut ctl-mono">{rangePair(observed.l2Min, observed.l2Max)}</span></div>
+          <div class="ctl-row"><span>R2 range</span><span class="ctl-mut ctl-mono">{rangePair(observed.r2Min, observed.r2Max)}</span></div>
         </div>
-      </dl>
-    </section>
+        <p class="ctl-note">Ranges are observed while this page is open; move the sticks and pull the triggers to fill them in.</p>
+      </div>
     {/if}
+
+    <div class="ctl-group narrow">
+      <div class="lbl">Support</div>
+      <div class="ctl-support">
+        <span>Having trouble?</span>
+        <p class="ctl-note">Download a Support Bundle &mdash; sanitized diagnostics, no private data.</p>
+        <button
+          type="button"
+          class="ctl-button"
+          disabled={Boolean(supportBundleBusy)}
+          onclick={() => void onDownloadSupportBundle()}
+        >{supportBundleBusy === 'download' ? 'Preparing bundle' : 'Download bundle'}</button>
+      </div>
+    </div>
   </div>
 </section>
diff --git a/web/src/lib/features/controllers/EdgeSlotsView.svelte b/web/src/lib/features/controllers/EdgeSlotsView.svelte
new file mode 100644
index 0000000..a3d6eed
--- /dev/null
+++ b/web/src/lib/features/controllers/EdgeSlotsView.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+  import Tooltip from '../../../components/Tooltip.svelte';
+  import type {
+    ControllerConfiguration,
+    ControllerStatus,
+    EdgeProfileSlot,
+    EdgeProfilesResponse
+  } from '../../types';
+
+  export let controller: ControllerStatus | undefined = undefined;
+  export let currentControllerConfig: ControllerConfiguration | null = null;
+  export let edgeProfiles: EdgeProfilesResponse | null = null;
+  export let edgeProfilesLoading = false;
+  export let edgeProfilesBusySlot = '';
+  export let edgeProfilesError = '';
+  export let edgeSlotsReadTooltip = '';
+  export let edgeSlotWriteLabel = 'Write';
+  export let onRefreshEdgeProfiles: () => void | Promise<void> = () => {};
+  export let onWriteEdgeSlot: (slot: EdgeProfileSlot) => void | Promise<void> = () => {};
+  export let edgeSlotName: (slot: EdgeProfileSlot) => string = (slot) => slot.name ?? slot.shortcut;
+  export let edgeSlotStatus: (slot: EdgeProfileSlot) => string = (slot) => slot.state;
+  export let edgeSlotInfoTooltip: (slot: EdgeProfileSlot) => string = (slot) => edgeSlotStatus(slot);
+  export let edgeSlotWriteTooltip: (slot: EdgeProfileSlot) => string = (slot) => `Write ${edgeSlotName(slot)}`;
+
+  $: alias = controller?.name || controller?.family || 'No controller';
+</script>
+
+<section class="ctl-view" aria-label="Edge onboard slots">
+  <div class="ctl-head">
+    <h1 class="ctl-title">Edge onboard slots</h1>
+    <span class="ctl-sub">{alias} &middot; profiles stored on the controller itself, for checking, not for everyday tuning</span>
+  </div>
+
+  <div class="ctl-groups">
+    <div class="ctl-group">
+      <div class="ctl-group-head">
+        <div class="lbl">Onboard memory</div>
+        <Tooltip text={edgeSlotsReadTooltip} side="bottom" align="end">
+          <button
+            type="button"
+            class="ctl-button"
+            disabled={edgeProfilesLoading}
+            aria-label="Refresh DualSense Edge onboard slots"
+            onclick={() => void onRefreshEdgeProfiles()}
+          >
+            {edgeProfilesLoading ? 'Reading' : 'Read'}
+          </button>
+        </Tooltip>
+      </div>
+
+      {#if edgeProfilesError}
+        <p class="ctl-note error">{edgeProfilesError}</p>
+      {:else if edgeProfiles?.warning}
+        <p class="ctl-note">{edgeProfiles.warning}</p>
+      {/if}
+
+      <div class="edge-slot-list">
+        {#if edgeProfiles?.slots.length}
+          {#each edgeProfiles.slots as slot (slot.slotId)}
+            <div class="edge-slot-row" class:disabled={!slot.editable}>
+              <Tooltip block text={edgeSlotInfoTooltip(slot)} side="right" align="start">
+                <div class="edge-slot-copy">
+                  <span class="lbl">{slot.shortcut}</span>
+                  <strong>{edgeSlotName(slot)}</strong>
+                  <small>{edgeSlotStatus(slot)}</small>
+                </div>
+              </Tooltip>
+              {#if slot.editable}
+                <Tooltip text={edgeSlotWriteTooltip(slot)} side="left" align="center">
+                  <button
+                    type="button"
+                    class="ctl-button primary"
+                    disabled={!currentControllerConfig || edgeProfilesBusySlot === slot.slotId}
+                    onclick={() => void onWriteEdgeSlot(slot)}
+                  >
+                    {edgeProfilesBusySlot === slot.slotId ? 'Writing' : edgeSlotWriteLabel}
+                  </button>
+                </Tooltip>
+              {/if}
+            </div>
+          {/each}
+        {:else}
+          <div class="edge-slot-row disabled">
+            <div class="edge-slot-copy">
+              <span class="lbl">Fn Slots</span>
+              <strong>{edgeProfilesLoading ? 'Reading slots' : 'No slot data'}</strong>
+              <small>{edgeProfilesLoading ? 'controller scan' : 'unavailable'}</small>
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/web/src/styles/button-mapping/base.css b/web/src/styles/button-mapping/base.css
index 1a99abc..34772df 100644
--- a/web/src/styles/button-mapping/base.css
+++ b/web/src/styles/button-mapping/base.css
@@ -29,7 +29,7 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  color: var(--actuation);
+  color: var(--accent-text);
   font-family: "JetBrains Mono", monospace;
   font-size: 10px;
   font-weight: 800;
@@ -38,7 +38,7 @@
 }
 
 .dm-mapping-eyebrow em {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-style: normal;
   font-weight: 700;
   letter-spacing: 0;
@@ -60,7 +60,7 @@
   flex-wrap: wrap;
   gap: 8px;
   margin: 0;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 12px;
   line-height: 1.3;
   text-align: right;
@@ -68,18 +68,18 @@
 }
 
 .dm-mapping-context strong {
-  color: var(--haptic);
+  color: var(--ink);
   font-weight: 700;
 }
 
 .dm-mapping-context em {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-style: normal;
   font-weight: 500;
 }
 
 .dm-mapping-context-count {
-  color: var(--actuation);
+  color: var(--accent-text);
   font-family: "JetBrains Mono", monospace;
   font-weight: 700;
 }
@@ -125,7 +125,7 @@
 
 .dm-paddle-preset-title svg {
   flex: 0 0 auto;
-  color: var(--haptic);
+  color: var(--ink);
 }
 
 .dm-paddle-key-field {
@@ -136,7 +136,7 @@
 
 .dm-paddle-preset-title span,
 .dm-paddle-key-field span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 9px;
   font-weight: 800;
   text-transform: uppercase;
@@ -152,7 +152,7 @@
 
 .dm-paddle-preset-title em {
   overflow: hidden;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-style: normal;
   line-height: 1.15;
@@ -203,5 +203,5 @@
   cursor: not-allowed;
   border-color: rgba(255, 255, 255, 0.09);
   background: rgba(255, 255, 255, 0.04);
-  color: var(--tungsten);
+  color: var(--ink-muted);
 }
diff --git a/web/src/styles/button-mapping/editor.css b/web/src/styles/button-mapping/editor.css
index 0175127..cea8bfb 100644
--- a/web/src/styles/button-mapping/editor.css
+++ b/web/src/styles/button-mapping/editor.css
@@ -22,7 +22,7 @@
 }
 
 .dm-mapping-tray-labels span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.06em;
@@ -41,7 +41,7 @@
 
 .dm-mapping-tray-labels em {
   overflow: hidden;
-  color: var(--actuation);
+  color: var(--accent-text);
   font-family: "JetBrains Mono", monospace;
   font-size: 11px;
   font-style: normal;
@@ -65,7 +65,7 @@
 }
 
 .dm-mapping-tray-field span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.06em;
@@ -149,12 +149,12 @@
 
 .dm-target-combo-trigger > svg {
   flex: 0 0 auto;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   transition: transform 180ms ease-out, color 160ms ease-out;
 }
 
 .dm-target-combo-trigger.open > svg {
-  color: var(--actuation);
+  color: var(--accent-text);
   transform: rotate(180deg);
 }
 
@@ -181,12 +181,12 @@
   gap: 8px;
   padding: 8px 10px;
   border-bottom: 1px solid rgba(226, 232, 240, 0.08);
-  color: var(--tungsten);
+  color: var(--ink-muted);
 }
 
 .dm-target-combo-searchbar > svg {
   flex: 0 0 auto;
-  color: var(--tungsten);
+  color: var(--ink-muted);
 }
 
 .dm-target-combo-searchbar input {
@@ -203,7 +203,7 @@
 }
 
 .dm-target-combo-searchbar input::placeholder {
-  color: var(--tungsten);
+  color: var(--ink-muted);
 }
 
 .dm-target-combo-list {
@@ -218,7 +218,7 @@
   position: sticky;
   top: 0;
   padding: 8px 12px 4px;
-  color: var(--actuation);
+  color: var(--accent-text);
   background: rgba(10, 10, 12, 0.97);
   font-family: "JetBrains Mono", monospace;
   font-size: 10px;
@@ -233,7 +233,7 @@
   width: 100%;
   padding: 7px 14px;
   border: 0;
-  color: var(--haptic);
+  color: var(--ink);
   background: transparent;
   font: 600 12px/1.2 Inter, sans-serif;
   letter-spacing: 0;
@@ -249,20 +249,20 @@
 }
 
 .dm-target-combo-option.active {
-  color: var(--actuation);
+  color: var(--accent-text);
   background: rgba(0, 112, 204, 0.18);
-  box-shadow: inset 2px 0 0 var(--actuation);
+  box-shadow: inset 2px 0 0 var(--accent-bright);
 }
 
 .dm-target-combo-empty {
   padding: 16px;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 12px;
   text-align: center;
 }
 
 .dm-target-combo-empty strong {
-  color: var(--haptic);
+  color: var(--ink);
 }
 
 .dm-mapping-tray-actions {
@@ -274,7 +274,7 @@
 
 .dm-mapping-tray-message {
   margin: 0 8px 0 0;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-family: "JetBrains Mono", monospace;
   font-size: 11px;
   line-height: 1.25;
@@ -287,7 +287,7 @@
   min-width: 96px;
   padding: 0 18px;
   border: 0;
-  color: var(--haptic);
+  color: var(--ink);
   background: transparent;
   box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.16);
   font: 700 12px/1 Inter, sans-serif;
@@ -303,7 +303,7 @@
 
 .dm-mapping-action.primary {
   color: #FFFFFF;
-  background: var(--actuation);
+  background: var(--accent);
   box-shadow: inset 0 0 0 1px rgba(0, 112, 204, 0.85), 0 0 18px rgba(0, 112, 204, 0.35);
 }
 
diff --git a/web/src/styles/button-mapping/layout/controller-art.css b/web/src/styles/button-mapping/layout/controller-art.css
index bbce11c..5532ca6 100644
--- a/web/src/styles/button-mapping/layout/controller-art.css
+++ b/web/src/styles/button-mapping/layout/controller-art.css
@@ -126,7 +126,7 @@
 }
 
 .dm-controller-focus-card span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
@@ -145,7 +145,7 @@
 }
 
 .dm-controller-focus-card .dm-controller-focus-hint {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0;
@@ -178,10 +178,10 @@
   place-items: center;
   width: 32px;
   height: 32px;
-  color: var(--actuation);
+  color: var(--accent-text);
   background: rgba(0, 112, 204, 0.14);
   box-shadow: inset 0 0 0 1px rgba(0, 112, 204, 0.4);
-  font-family: var(--mono);
+  font-family: "JetBrains Mono", ui-monospace, monospace;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.04em;
@@ -205,7 +205,7 @@
 
 .dm-callout-cluster-title {
   display: block;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
@@ -226,7 +226,7 @@
 .dm-steam-binding-row {
   min-width: 0;
   border: 0;
-  color: var(--haptic);
+  color: var(--ink);
   background: rgba(10, 10, 12, 0.5);
   box-shadow:
     inset 0 0 0 1px rgba(226, 232, 240, 0.055),
@@ -324,7 +324,7 @@
 .dm-steam-binding-row code,
 .dm-map-quick-grid span,
 .dm-steam-binding-empty span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0;
diff --git a/web/src/styles/button-mapping/layout/inspector.css b/web/src/styles/button-mapping/layout/inspector.css
index aa0e1e1..5af6754 100644
--- a/web/src/styles/button-mapping/layout/inspector.css
+++ b/web/src/styles/button-mapping/layout/inspector.css
@@ -89,7 +89,7 @@
 }
 
 .dm-steam-binding-row em {
-  color: var(--haptic);
+  color: var(--ink);
   font-size: 12px;
   font-style: normal;
   font-weight: 700;
@@ -134,7 +134,7 @@
 
 .dm-map-editor-summary span,
 .dm-map-field span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
@@ -159,7 +159,7 @@
   border-radius: 6px;
   color: #FFFFFF;
   background: rgba(18, 18, 20, 0.92);
-  font: 800 12px/1 var(--mono);
+  font: 800 12px/1 "JetBrains Mono", ui-monospace, monospace;
   outline: none;
 }
 
@@ -190,8 +190,8 @@
 
 .dm-map-editor-message {
   margin: 0;
-  color: var(--tungsten);
-  font-family: var(--mono);
+  color: var(--ink-muted);
+  font-family: "JetBrains Mono", ui-monospace, monospace;
   font-size: 11px;
   line-height: 1.45;
   overflow-wrap: anywhere;
diff --git a/web/src/styles/button-mapping/layout/panels.css b/web/src/styles/button-mapping/layout/panels.css
index 566a424..f94f0b0 100644
--- a/web/src/styles/button-mapping/layout/panels.css
+++ b/web/src/styles/button-mapping/layout/panels.css
@@ -17,7 +17,7 @@
 }
 
 .dm-page-status {
-  color: var(--actuation);
+  color: var(--accent-text);
   font-size: 11px;
   font-weight: 800;
 }
@@ -42,7 +42,7 @@
 .dm-map-placeholder span,
 .dm-button-bind-row span {
   display: block;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
@@ -67,7 +67,7 @@
   display: block;
   margin-top: 4px;
   overflow: hidden;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   line-height: 1.25;
   text-overflow: ellipsis;
diff --git a/web/src/styles/button-mapping/mirror.css b/web/src/styles/button-mapping/mirror.css
index 50f6974..8af41ff 100644
--- a/web/src/styles/button-mapping/mirror.css
+++ b/web/src/styles/button-mapping/mirror.css
@@ -34,7 +34,7 @@
 }
 
 .dm-steam-layout-title {
-  color: var(--haptic);
+  color: var(--ink);
   font-size: 14px;
   font-weight: 800;
   letter-spacing: 0.04em;
@@ -45,7 +45,7 @@
 .dm-steam-empty-note {
   max-width: 52ch;
   margin: -4px auto 4px;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 12px;
   line-height: 1.4;
   text-align: center;
@@ -95,7 +95,7 @@
 }
 
 .dm-steam-group-title {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 12px;
   font-weight: 900;
   letter-spacing: 0.08em;
@@ -111,7 +111,7 @@
   min-height: 26px;
   padding: 3px 5px;
   border: 0;
-  color: var(--haptic);
+  color: var(--ink);
   background: transparent;
   font: inherit;
   letter-spacing: 0;
@@ -128,7 +128,7 @@
   outline: none;
   color: #FFFFFF;
   background: rgba(226, 232, 240, 0.08);
-  box-shadow: inset 3px 0 0 var(--actuation);
+  box-shadow: inset 3px 0 0 var(--accent-bright);
 }
 
 .dm-steam-row strong {
@@ -149,7 +149,7 @@
 }
 
 .dm-steam-static-row {
-  color: var(--haptic);
+  color: var(--ink);
 }
 
 .dm-steam-input-icon {
diff --git a/web/src/styles/button-mapping/stage.css b/web/src/styles/button-mapping/stage.css
index 7782048..17e6587 100644
--- a/web/src/styles/button-mapping/stage.css
+++ b/web/src/styles/button-mapping/stage.css
@@ -116,7 +116,7 @@
   gap: 8px;
   padding: 0;
   border: 0;
-  color: var(--haptic);
+  color: var(--ink);
   background: transparent;
   z-index: 3;
   transition: transform 180ms ease-out, filter 180ms ease-out;
@@ -299,7 +299,7 @@
 }
 
 .dm-mapping-chip.active .dm-mapping-chip-binding {
-  color: var(--actuation);
+  color: var(--accent-text);
 }
 
 .dm-mapping-chip.edge .dm-mapping-chip-icon {
diff --git a/web/src/styles/controllers.css b/web/src/styles/controllers.css
index 3a033a0..e1a09f7 100644
--- a/web/src/styles/controllers.css
+++ b/web/src/styles/controllers.css
@@ -1,351 +1,376 @@
-.dm-controllers-page {
-  display: grid;
-  grid-template-columns: minmax(260px, 330px) minmax(0, 1160px);
-  justify-content: center;
-  gap: clamp(16px, 2vw, 26px);
-  flex: 1 1 0;
-  width: min(1500px, 100%);
-  min-height: 0;
-  margin: 0 auto;
+/* Advanced — Controller details + Edge onboard slots.
+   Layout truth: status-advanced-v2-psblue mockup. Calm, flat, hairlines;
+   live meters use --accent-bright. Live readouts are for checking, not for
+   everyday tuning. */
+
+.ctl-view {
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--ink);
 }
 
-.dm-controllers-workbench {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-  align-content: start;
+.ctl-head {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 4px 10px;
 }
 
-.dm-controller-overview,
-.dm-input-path-panel,
-.dm-power-diagnostics-panel,
-.dm-live-input-panel,
-.dm-calibration-readout,
-.dm-controller-empty-state {
+.ctl-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.ctl-sub {
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+
+/* Groups row — intrinsic widths, wraps naturally (same rhythm as Status). */
+.ctl-groups {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 16px 22px;
+  margin-top: 14px;
+}
+
+.ctl-group {
+  flex: 1 1 280px;
+  min-width: 260px;
+  max-width: 420px;
   display: grid;
-  gap: 14px;
-  min-width: 0;
-  padding: 14px;
-  border: 1px solid rgba(113, 113, 122, 0.24);
-  border-radius: 6px;
-  background:
-    linear-gradient(180deg, rgba(226, 232, 240, 0.034), rgba(226, 232, 240, 0.012)),
-    rgba(14, 15, 18, 0.82);
-  box-shadow: inset 0 1px 0 rgba(226, 232, 240, 0.052);
+  gap: 6px;
+  align-content: start;
 }
 
-.dm-controller-empty-state {
-  align-content: center;
-  min-height: 360px;
-  justify-items: center;
-  text-align: center;
+.ctl-group.narrow {
+  flex: 1 1 240px;
+  min-width: 230px;
+  max-width: 360px;
 }
 
-.dm-controller-empty-state strong {
-  color: #FFFFFF;
-  font-family: "Space Grotesk", "Inter Tight", Inter, sans-serif;
-  font-size: 22px;
-  font-weight: 760;
+.ctl-group-controllers {
+  flex: 1 1 100%;
+  max-width: none;
 }
 
-.dm-controller-empty-state span {
-  width: min(440px, 100%);
-  color: var(--tungsten);
-  font-size: 13px;
-  font-weight: 650;
-  line-height: 1.45;
+.ctl-group-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
 }
 
-.dm-controller-overview {
-  grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1.6fr);
-  align-items: start;
+.ctl-sublabel {
+  margin-top: 10px;
 }
 
-.dm-controller-overview-copy,
-.dm-live-panel-head > div,
-.dm-stick-head,
-.dm-trigger-meter > div:first-child {
-  display: grid;
-  gap: 4px;
-  min-width: 0;
+.ctl-controller-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
 }
 
-.dm-controller-overview-copy span,
-.dm-live-panel-head span,
-.dm-stick-head span,
-.dm-trigger-meter span,
-.dm-calibration-grid dt,
-.dm-controller-metric-grid dt,
-.dm-stick-module dt {
-  color: var(--tungsten);
-  font-size: 10px;
-  font-weight: 800;
-  line-height: 1.15;
-  text-transform: uppercase;
-}
-
-.dm-controller-overview-copy strong,
-.dm-live-panel-head strong,
-.dm-trigger-meter strong {
-  color: #FFFFFF;
-  font-family: "Space Grotesk", "Inter Tight", Inter, sans-serif;
-  font-size: 19px;
-  font-weight: 760;
-  line-height: 1.05;
-}
-
-.dm-controller-overview-copy small {
-  color: var(--tungsten);
-  font-size: 12px;
-  font-weight: 700;
+/* Bounded fields only where content needs one. */
+.ctl-surf {
+  padding: 12px 14px;
+  background: var(--surface);
+  border-radius: var(--radius-m);
 }
 
-.dm-controller-metric-grid,
-.dm-calibration-grid {
+.ctl-empty {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px 14px;
-  margin: 0;
-  min-width: 0;
+  gap: 4px;
 }
 
-.dm-controller-metric-grid > div,
-.dm-calibration-grid > div {
-  min-width: 0;
+.ctl-empty strong {
+  font-weight: 600;
 }
 
-.dm-controller-metric-grid > div.wide {
-  grid-column: 1 / -1;
+.ctl-empty span {
+  font-size: 11px;
+  color: var(--ink-muted);
 }
 
-.dm-controller-metric-grid dd,
-.dm-calibration-grid dd,
-.dm-stick-module dd {
-  margin: 0;
-  color: #FFFFFF;
-  font-size: 12px;
-  font-weight: 650;
-  line-height: 1.35;
-  overflow-wrap: anywhere;
+.ctl-mut {
+  color: var(--ink-muted);
 }
 
-.dm-controller-metric-grid dd.mono {
-  color: var(--haptic);
+.ctl-mono {
   font-family: "JetBrains Mono", ui-monospace, monospace;
   font-size: 11px;
-  font-weight: 550;
+  overflow-wrap: anywhere;
+}
+
+/* Hairline rows (srow pattern from the mockup). */
+.ctl-rows {
+  display: grid;
 }
 
-.dm-live-panel-head {
+.ctl-row {
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: baseline;
   gap: 12px;
-  min-width: 0;
+  padding: 6px 0;
+  font-size: 11px;
+  border-bottom: 1px solid var(--hairline);
 }
 
-.dm-live-panel-head code,
-.dm-stick-head code,
-.dm-button-state code {
-  color: var(--haptic);
-  font-family: "JetBrains Mono", ui-monospace, monospace;
-  font-size: 11px;
-  font-weight: 750;
+.ctl-row:last-child {
+  border-bottom: 0;
 }
 
-.dm-input-path-actions {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(70px, 1fr)) minmax(8px, 0.4fr) repeat(2, minmax(76px, 0.9fr));
-  gap: 8px;
-  align-items: center;
-  min-width: 0;
+.ctl-row > span:last-child {
+  text-align: right;
 }
 
-.dm-input-path-actions button {
-  min-height: 32px;
-  padding: 0 10px;
-  border: 1px solid rgba(113, 113, 122, 0.34);
-  border-radius: 5px;
-  color: rgba(226, 232, 240, 0.82);
-  background: rgba(10, 10, 12, 0.42);
-  font-size: 12px;
-  font-weight: 760;
+/* Live meters — label/value row plus a 4px accent-bright bar. */
+.ctl-meter-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 12px;
+  font-size: 11px;
 }
 
-.dm-input-path-actions button.active,
-.dm-input-path-actions button.primary {
-  border-color: rgba(0, 112, 204, 0.82);
-  color: #FFFFFF;
-  background: rgba(0, 112, 204, 0.2);
+.ctl-meter-row + .ctl-meter,
+.ctl-meter + .ctl-meter-row,
+.ctl-meter-row + .ctl-meter-row {
+  margin-top: 3px;
 }
 
-.dm-input-path-actions button:disabled {
-  cursor: not-allowed;
-  opacity: 0.48;
+.ctl-meter + .ctl-meter-row {
+  margin-top: 8px;
 }
 
-.dm-power-suggestion-list {
-  display: grid;
-  gap: 8px;
-  margin: 0;
+.ctl-meter {
+  height: 4px;
+  border-radius: 2px;
+  background: var(--surface-raised);
+  overflow: hidden;
 }
 
-.dm-power-suggestion-list p {
-  margin: 0;
-  padding: 8px 10px;
-  border: 1px solid rgba(113, 113, 122, 0.2);
-  border-radius: 5px;
-  color: rgba(226, 232, 240, 0.82);
-  background: rgba(10, 10, 12, 0.28);
-  font-size: 12px;
-  font-weight: 650;
-  line-height: 1.35;
+.ctl-meter span {
+  display: block;
+  width: var(--trigger-fill, 0%);
+  height: 100%;
+  border-radius: inherit;
+  background: var(--accent-bright);
 }
 
-.dm-live-stick-grid {
+/* Stick plots — flat field, hairline crosshair, accent-bright dot. */
+.ctl-stick-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: 12px;
-  min-width: 0;
+  margin-top: 10px;
 }
 
-.dm-stick-module {
+.ctl-stick {
   display: grid;
-  gap: 10px;
+  gap: 8px;
   min-width: 0;
-  padding: 12px;
-  border: 1px solid rgba(113, 113, 122, 0.22);
-  border-radius: 6px;
-  background: rgba(10, 10, 12, 0.32);
+  padding: 12px 14px;
+  background: var(--surface);
+  border-radius: var(--radius-m);
 }
 
-.dm-stick-head,
-.dm-trigger-meter > div:first-child {
-  grid-template-columns: 1fr auto;
-  align-items: center;
-}
-
-.dm-stick-plot {
+.ctl-stick-plot {
   position: relative;
-  width: min(240px, 100%);
+  width: min(150px, 100%);
   aspect-ratio: 1;
   margin: 0 auto;
-  border: 1px solid rgba(113, 113, 122, 0.3);
+  border: 1px solid var(--hairline-strong);
   border-radius: 50%;
   background:
-    linear-gradient(rgba(113, 113, 122, 0.22), rgba(113, 113, 122, 0.22)) 50% 0 / 1px 100% no-repeat,
-    linear-gradient(90deg, rgba(113, 113, 122, 0.22), rgba(113, 113, 122, 0.22)) 0 50% / 100% 1px no-repeat,
-    radial-gradient(circle at center, rgba(0, 112, 204, 0.16), transparent 58%),
-    rgba(5, 5, 7, 0.48);
+    linear-gradient(var(--hairline), var(--hairline)) 50% 0 / 1px 100% no-repeat,
+    linear-gradient(90deg, var(--hairline), var(--hairline)) 0 50% / 100% 1px no-repeat;
 }
 
-.dm-stick-ring {
+.ctl-stick-ring {
   position: absolute;
-  inset: calc(50% - var(--stick-mag) / 2);
-  border: 1px solid rgba(27, 177, 124, 0.46);
+  inset: calc(50% - var(--stick-mag, 8%) / 2);
+  border: 1px solid var(--accent-outline);
   border-radius: 50%;
-  opacity: 0.66;
 }
 
-.dm-stick-dot {
+.ctl-stick-dot {
   position: absolute;
-  left: var(--stick-x);
-  top: var(--stick-y);
-  width: 13px;
-  height: 13px;
-  border: 2px solid #FFFFFF;
+  left: var(--stick-x, 50%);
+  top: var(--stick-y, 50%);
+  width: 11px;
+  height: 11px;
   border-radius: 50%;
-  background: var(--actuation);
-  box-shadow: 0 0 16px rgba(0, 112, 204, 0.42);
+  background: var(--accent-bright);
   transform: translate(-50%, -50%);
 }
 
-.dm-stick-module dl {
+.ctl-deadzone-row {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
   gap: 8px;
-  margin: 0;
+  font-size: 11px;
+  color: var(--ink-muted);
 }
 
-.dm-stick-tuning-row {
-  display: grid;
-  grid-template-columns: minmax(68px, auto) minmax(120px, 1fr) 44px;
-  align-items: center;
-  gap: 8px;
-  margin-top: 10px;
-  color: var(--muted);
-  font-size: 0.78rem;
+.ctl-deadzone-row input[type='range'] {
+  width: 100%;
+  min-width: 0;
+  accent-color: var(--accent-bright);
 }
 
-.dm-stick-tuning-row code {
-  color: var(--text);
-  text-align: right;
+.ctl-deadzone-row .ctl-mono {
+  color: var(--ink);
 }
 
-.dm-trigger-meter-grid {
+/* Live button states — flat chips; pressed lights the accent. */
+.ctl-button-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
+  gap: 6px;
+  margin-top: 10px;
 }
 
-.dm-trigger-meter {
-  display: grid;
+.ctl-button-state {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: 8px;
   min-width: 0;
-  padding: 12px;
-  border: 1px solid rgba(113, 113, 122, 0.22);
-  border-radius: 6px;
-  background: rgba(10, 10, 12, 0.32);
+  padding: 5px 8px;
+  font-size: 11px;
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-s);
+  background: var(--surface);
 }
 
-.dm-trigger-bar {
-  position: relative;
-  height: 12px;
+.ctl-button-state.pressed {
+  border-color: var(--accent-outline);
+  background: var(--accent-tint);
+}
+
+.ctl-button-state span:first-child {
   overflow: hidden;
-  border-radius: 999px;
-  background: rgba(113, 113, 122, 0.22);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.dm-trigger-bar span {
-  display: block;
-  width: var(--trigger-fill);
-  height: 100%;
-  border-radius: inherit;
-  background: linear-gradient(90deg, var(--actuation), #1BB17C);
+.ctl-button-state .ctl-mono {
+  color: var(--ink-muted);
 }
 
-.dm-button-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
+.ctl-button-state.pressed .ctl-mono {
+  color: var(--accent-text);
+}
+
+/* Buttons — quiet by default, accent for the primary action. */
+.ctl-actions {
+  display: flex;
+  flex-wrap: wrap;
   gap: 8px;
-  min-width: 0;
+  margin-top: 10px;
+}
+
+.ctl-button {
+  min-height: 28px;
+  padding: 4px 12px;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--ink);
+  background: var(--surface-raised);
+  border: 0;
+  border-radius: var(--radius-s);
+  cursor: pointer;
+  transition: background var(--speed) var(--ease);
+}
+
+.ctl-button.active {
+  color: var(--accent-text);
+  background: var(--accent-tint);
+  outline: 1px solid var(--accent-outline);
+}
+
+.ctl-button.primary {
+  color: #ffffff;
+  background: var(--accent);
+}
+
+.ctl-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
+
+.ctl-button:focus-visible {
+  outline: 2px solid var(--accent-bright);
+  outline-offset: 1px;
+}
+
+.ctl-note {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--ink-muted);
+}
+
+.ctl-note.error {
+  color: var(--danger);
+}
+
+.ctl-suggestions {
+  display: grid;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+/* Support group */
+.ctl-support {
+  display: grid;
+  gap: 6px;
+  justify-items: start;
+  font-size: 11px;
+}
+
+/* Edge onboard slots */
+.edge-slot-list {
+  display: grid;
 }
 
-.dm-button-state {
+.edge-slot-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
-  min-width: 0;
-  min-height: 34px;
-  padding: 8px 9px;
-  border: 1px solid rgba(113, 113, 122, 0.22);
-  border-radius: 5px;
-  background: rgba(10, 10, 12, 0.34);
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--hairline);
+}
+
+.edge-slot-row:last-child {
+  border-bottom: 0;
 }
 
-.dm-button-state.pressed {
-  border-color: rgba(27, 177, 124, 0.64);
-  background: rgba(27, 177, 124, 0.14);
+.edge-slot-row.disabled {
+  opacity: 0.6;
 }
 
-.dm-button-state span {
+.edge-slot-copy {
+  display: grid;
+  gap: 2px;
   min-width: 0;
-  overflow: hidden;
-  color: #FFFFFF;
+}
+
+.edge-slot-copy strong {
   font-size: 12px;
-  font-weight: 760;
-  line-height: 1.15;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.edge-slot-copy small {
+  font-size: 11px;
+  color: var(--ink-muted);
 }

From 494edfff527c8fd40021e855d8fa6581cc589b1a Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 22:36:31 -0500
Subject: [PATCH 19/23] ui-rework: centralize mono font token, drop dead
 power-metrics helper

- Add --font-mono to :root block in tokens.css with JetBrains Mono stack
- Replace 11 hard-coded font-family instances across controllers.css and button-mapping/*.css with var(--font-mono)
- Convert font shorthand properties to longhand to use the token
- Delete unused hasPowerMetrics() function from ControllersView.svelte (zero call sites)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../features/controllers/ControllersView.svelte  |  6 ------
 web/src/styles/button-mapping/base.css           |  9 ++++++---
 web/src/styles/button-mapping/editor.css         | 16 +++++++++++-----
 web/src/styles/button-mapping/mirror.css         |  2 +-
 web/src/styles/button-mapping/stage.css          |  2 +-
 web/src/styles/controllers.css                   |  2 +-
 web/src/styles/tokens.css                        |  3 +++
 7 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/web/src/lib/features/controllers/ControllersView.svelte b/web/src/lib/features/controllers/ControllersView.svelte
index d4c9876..a272a32 100644
--- a/web/src/lib/features/controllers/ControllersView.svelte
+++ b/web/src/lib/features/controllers/ControllersView.svelte
@@ -346,12 +346,6 @@
     return value ? yes : no;
   }
 
-  function hasPowerMetrics(item: ControllerStatus | undefined) {
-    const diagnostics = item?.powerDiagnostics;
-    if (!diagnostics) return false;
-    return Object.values(diagnostics).some((value) => value !== null && value !== undefined);
-  }
-
   function batteryFriendlySuggestions(
     item: ControllerStatus | undefined,
     config: ControllerConfiguration | null
diff --git a/web/src/styles/button-mapping/base.css b/web/src/styles/button-mapping/base.css
index 34772df..a4f3c23 100644
--- a/web/src/styles/button-mapping/base.css
+++ b/web/src/styles/button-mapping/base.css
@@ -30,7 +30,7 @@
   align-items: center;
   gap: 6px;
   color: var(--accent-text);
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.18em;
@@ -80,7 +80,7 @@
 
 .dm-mapping-context-count {
   color: var(--accent-text);
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-weight: 700;
 }
 
@@ -166,7 +166,10 @@
   border: 1px solid rgba(255, 255, 255, 0.11);
   background: rgba(2, 5, 9, 0.86);
   color: #FFFFFF;
-  font: 800 12px/1 "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
+  font-weight: 800;
+  font-size: 12px;
+  line-height: 1;
   text-align: center;
   text-transform: uppercase;
 }
diff --git a/web/src/styles/button-mapping/editor.css b/web/src/styles/button-mapping/editor.css
index cea8bfb..fae3def 100644
--- a/web/src/styles/button-mapping/editor.css
+++ b/web/src/styles/button-mapping/editor.css
@@ -42,7 +42,7 @@
 .dm-mapping-tray-labels em {
   overflow: hidden;
   color: var(--accent-text);
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   font-style: normal;
   font-weight: 700;
@@ -83,7 +83,10 @@
   border: 0;
   box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.12);
   outline: none;
-  font: 700 12px/1 "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 1;
   letter-spacing: 0.01em;
 }
 
@@ -116,7 +119,10 @@
   color: #FFFFFF;
   background: rgba(10, 10, 12, 0.72);
   box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.12);
-  font: 700 12px/1 "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 1;
   letter-spacing: 0.01em;
   text-align: left;
   transition: box-shadow 160ms ease-out, background 160ms ease-out;
@@ -220,7 +226,7 @@
   padding: 8px 12px 4px;
   color: var(--accent-text);
   background: rgba(10, 10, 12, 0.97);
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.08em;
@@ -275,7 +281,7 @@
 .dm-mapping-tray-message {
   margin: 0 8px 0 0;
   color: var(--ink-muted);
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   line-height: 1.25;
   max-width: 240px;
diff --git a/web/src/styles/button-mapping/mirror.css b/web/src/styles/button-mapping/mirror.css
index 8af41ff..51cf8da 100644
--- a/web/src/styles/button-mapping/mirror.css
+++ b/web/src/styles/button-mapping/mirror.css
@@ -159,7 +159,7 @@
   min-width: 20px;
   height: 20px;
   color: #FFFFFF;
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 10px;
   font-weight: 900;
 }
diff --git a/web/src/styles/button-mapping/stage.css b/web/src/styles/button-mapping/stage.css
index 17e6587..6ee992f 100644
--- a/web/src/styles/button-mapping/stage.css
+++ b/web/src/styles/button-mapping/stage.css
@@ -191,7 +191,7 @@
 
 .dm-mapping-chip-glyph {
   color: #FFFFFF;
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.04em;
diff --git a/web/src/styles/controllers.css b/web/src/styles/controllers.css
index e1a09f7..e4132a8 100644
--- a/web/src/styles/controllers.css
+++ b/web/src/styles/controllers.css
@@ -100,7 +100,7 @@
 }
 
 .ctl-mono {
-  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   overflow-wrap: anywhere;
 }
diff --git a/web/src/styles/tokens.css b/web/src/styles/tokens.css
index 158a467..89e3bc2 100644
--- a/web/src/styles/tokens.css
+++ b/web/src/styles/tokens.css
@@ -43,6 +43,9 @@
   --z-toast: 50;
   --z-tooltip: 60;
 
+  /* typography */
+  --font-mono: "JetBrains Mono", ui-monospace, monospace; /* literal values only: ports, IPs, raw readouts */
+
   color: var(--ink);
   background: var(--bg);
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

From 1b2871cac53cf4988ef814f2945e4d645e15f5b6 Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 23:08:28 -0500
Subject: [PATCH 20/23] ui-rework: remove HUD-era shell, styles, and routed
 views

Delete ViewNav, ContextRibbon, GamesView, ProfileConsole, HapticsView,
HapticsAside and the stylesheets only they used (shell.css, ribbon.css,
games.css, games-catalog.css, workspace.css, haptics/profile-console.css,
button-mapping/stage.css). Still-used rules migrate to their new homes:
controller card styles into controllers.css, notice banners into
feedback.css, the RGB console and mini-button variants into the surviving
haptics files, dm-view-hidden into button-mapping/base.css.

Retire the temporary alias tokens in tokens.css and migrate every remaining
usage to the calm-console tokens; success toasts now use --ok. Prune dead
selectors from responsive.css and base.css, resolve the shell-v2 scroll-model
breadcrumbs, and reword audit-flagged comments. Update the onboarding
tutorial and controller card copy to the new IA names and copy law.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/scripts/visual-smoke.mjs                  |   2 +-
 web/src/App.svelte                            |   6 +-
 web/src/app/navigation.ts                     |   2 +-
 web/src/components/ContextRibbon.svelte       | 411 --------------
 web/src/components/OnboardingTutorial.svelte  |  10 +-
 web/src/components/ViewNav.svelte             |  39 --
 .../controllers/ControllerCard.svelte         |   2 +-
 web/src/lib/features/games/GamesView.svelte   | 165 ------
 web/src/lib/features/games/addGameDialog.css  |  58 +-
 .../lib/features/haptics/HapticsAside.svelte  | 231 --------
 .../lib/features/haptics/HapticsView.svelte   |  12 -
 .../features/profiles/ProfileConsole.svelte   | 159 ------
 web/src/styles/app.css                        |   3 -
 web/src/styles/base.css                       |   7 +-
 web/src/styles/button-mapping.css             |   1 -
 web/src/styles/button-mapping/base.css        |   6 +
 web/src/styles/button-mapping/stage.css       | 311 -----------
 web/src/styles/controllers.css                | 251 +++++++++
 web/src/styles/dialogs.css                    |   4 +-
 web/src/styles/feedback.css                   |  73 ++-
 web/src/styles/games-catalog.css              | 301 ----------
 web/src/styles/games.css                      | 524 ------------------
 web/src/styles/haptics.css                    |   1 -
 web/src/styles/haptics/controls.css           |  79 ++-
 web/src/styles/haptics/curves.css             |  30 +-
 web/src/styles/haptics/profile-console.css    | 144 -----
 web/src/styles/haptics/routing.css            |  50 +-
 web/src/styles/responsive.css                 | 189 +------
 web/src/styles/ribbon.css                     | 428 --------------
 web/src/styles/shell-v2.css                   |  15 +-
 web/src/styles/shell.css                      | 235 --------
 web/src/styles/tokens.css                     |  22 -
 web/src/styles/tuning.css                     |  13 +-
 web/src/styles/workspace.css                  |  27 -
 34 files changed, 477 insertions(+), 3334 deletions(-)
 delete mode 100644 web/src/components/ContextRibbon.svelte
 delete mode 100644 web/src/components/ViewNav.svelte
 delete mode 100644 web/src/lib/features/games/GamesView.svelte
 delete mode 100644 web/src/lib/features/haptics/HapticsAside.svelte
 delete mode 100644 web/src/lib/features/haptics/HapticsView.svelte
 delete mode 100644 web/src/lib/features/profiles/ProfileConsole.svelte
 delete mode 100644 web/src/styles/button-mapping/stage.css
 delete mode 100644 web/src/styles/games-catalog.css
 delete mode 100644 web/src/styles/games.css
 delete mode 100644 web/src/styles/haptics/profile-console.css
 delete mode 100644 web/src/styles/ribbon.css
 delete mode 100644 web/src/styles/shell.css
 delete mode 100644 web/src/styles/workspace.css

diff --git a/web/scripts/visual-smoke.mjs b/web/scripts/visual-smoke.mjs
index 76e189c..b8d4533 100644
--- a/web/scripts/visual-smoke.mjs
+++ b/web/scripts/visual-smoke.mjs
@@ -16,7 +16,7 @@ const routeChecks = [
   { hash: '#/tuning', pattern: /Tuning|Profile/i },
   { hash: '#/advanced/controller', pattern: /Controller details|Live input/i },
   // Button mapping needs a game scope first; main() selects one via the
-  // toolbar before this route runs.
+  // toolbar on the previously loaded page, so this check must stay LAST.
   { hash: '#/advanced/button-mapping', pattern: /Button Mapping|Default mirror/i }
 ];
 // Old routes keep working forever; each lands on the new home for its content.
diff --git a/web/src/App.svelte b/web/src/App.svelte
index 6ccd498..b1e29d5 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -1087,6 +1087,7 @@
     Boolean(currentControllerConfig && profileSaveBaselineSignature) &&
     profileConfigSignature(buildControllerConfig()) !== profileSaveBaselineSignature;
 
+
   // Saved rail diff (Task 7). The object literal mirrors
   // currentProfileDraftValues() but names every draft variable directly so
   // Svelte re-derives the snapshot the moment any tunable value moves (a
@@ -2215,8 +2216,9 @@
       <button class="solid-action compact" type="button" onclick={refresh}>Retry</button>
     </section>
   {:else if snapshot}
-    <!-- TEMPORARY toolbar: leftover ribbon context. Scope + profile pickers now
-         live in the Tuning header; the rest moves in Tasks 9-10. -->
+    <!-- Utility row: cross-view context that has no single page home — the
+         target controller for writes, the web UI bind address, the Forza glyph
+         override, and a compact system readout. -->
     <section class="app-toolbar" aria-label="Controller and display options">
       <label class="app-toolbar-field">
         <span>Target Controller</span>
diff --git a/web/src/app/navigation.ts b/web/src/app/navigation.ts
index 3b98a40..9d2a8e2 100644
--- a/web/src/app/navigation.ts
+++ b/web/src/app/navigation.ts
@@ -38,7 +38,7 @@ const legacyRedirects: Record<string, string> = {
   '#/button-mapping': '#/advanced/button-mapping'
 };
 
-/** Every hash the router answers to: current view hashes plus legacy redirects. */
+/** Every hash the router answers to: current view hashes plus old-route redirects. */
 export const knownViewHashes: string[] = [
   ...appViews.map((item) => item.hash),
   ...Object.keys(legacyRedirects)
diff --git a/web/src/components/ContextRibbon.svelte b/web/src/components/ContextRibbon.svelte
deleted file mode 100644
index e99a26d..0000000
--- a/web/src/components/ContextRibbon.svelte
+++ /dev/null
@@ -1,411 +0,0 @@
-<script lang="ts">
-  import InitialBadge from './InitialBadge.svelte';
-  import Tooltip from './Tooltip.svelte';
-  import { controllerConnectionText, controllerModelText } from '../lib/controllerDisplay';
-  import type { ControllerStatus, ProfileSummary, SupportedGame } from '../lib/types';
-
-  type TuningScope = 'none' | 'global' | 'game';
-  type MenuPosition = {
-    left: number;
-    top: number;
-    minWidth: number;
-  };
-
-  const SCOPE_ACCENT_GLOBAL = '#C18BEF';
-
-  export let controller: ControllerStatus | null | undefined = null;
-  export let connectedControllers: ControllerStatus[] = [];
-  export let connectedControllerIds: string[] = [];
-  export let profileTargetsAllConnected = false;
-  export let profileTargetControllerIds: string[] = [];
-  export let selectedTuningScope: TuningScope = 'global';
-  export let selectedTuningGameId = '';
-  export let steamContextGame: SupportedGame | null = null;
-  export let steamContextArt = '';
-  export let steamContextBackdropArt = '';
-  export let steamContextMeta = '';
-  export let discoveredGames: SupportedGame[] = [];
-  export let profileContextProfiles: ProfileSummary[] = [];
-  export let selectedOverrideProfileId = '';
-  export let activeProfileId = '';
-  export let activeProfileHeaderName = 'None';
-  export let activeProfileHeaderMeta = '';
-  export let listenOnAllInterfaces = false;
-  export let appSettingsBusy = false;
-  export let lanRestartRequired = false;
-  export let desiredBindAddress: string | null | undefined = null;
-  export let currentBindAddress: string | null | undefined = null;
-  export let glyphOverrideEnabled = false;
-  export let glyphStatus = '';
-  export let gameAccentColor: (game: SupportedGame | null | undefined) => string = () => SCOPE_ACCENT_GLOBAL;
-  export let onPickGlobal: () => void | Promise<void> = () => {};
-  export let onPickGame: (game: SupportedGame) => void | Promise<void> = () => {};
-  export let onPickProfile: (profileId: string) => void | Promise<void> = () => {};
-  export let onPickAllControllers: () => void = () => {};
-  export let onPickController: (controllerId: string) => void = () => {};
-  export let onUpdateLanAccess: (enabled: boolean) => void | Promise<void> = () => {};
-  export let onUpdateGlyphOverride: () => void | Promise<void> = () => {};
-
-  let scopePickerOpen = false;
-  let profilePickerOpen = false;
-  let controllerPickerOpen = false;
-  let scopeTriggerEl: HTMLButtonElement | null = null;
-  let profileTriggerEl: HTMLButtonElement | null = null;
-  let controllerTriggerEl: HTMLButtonElement | null = null;
-  let scopeMenuPos: MenuPosition = { left: 0, top: 0, minWidth: 240 };
-  let profileMenuPos: MenuPosition = { left: 0, top: 0, minWidth: 240 };
-  let controllerMenuPos: MenuPosition = { left: 0, top: 0, minWidth: 240 };
-
-  const menuPositionFor = (element: HTMLButtonElement | null, minWidth: number): MenuPosition => {
-    if (!element) return { left: 0, top: 0, minWidth };
-    const rect = element.getBoundingClientRect();
-    return {
-      left: rect.left,
-      top: rect.bottom + 6,
-      minWidth: Math.max(minWidth, rect.width)
-    };
-  };
-
-  const updateMenuPositions = () => {
-    scopeMenuPos = menuPositionFor(scopeTriggerEl, 240);
-    profileMenuPos = menuPositionFor(profileTriggerEl, 260);
-    controllerMenuPos = menuPositionFor(controllerTriggerEl, 260);
-  };
-
-  const closePickers = () => {
-    scopePickerOpen = false;
-    profilePickerOpen = false;
-    controllerPickerOpen = false;
-  };
-
-  const toggleScopePicker = () => {
-    if (!scopePickerOpen) updateMenuPositions();
-    scopePickerOpen = !scopePickerOpen;
-    if (scopePickerOpen) {
-      profilePickerOpen = false;
-      controllerPickerOpen = false;
-    }
-  };
-
-  const toggleProfilePicker = () => {
-    if (!profilePickerOpen) updateMenuPositions();
-    profilePickerOpen = !profilePickerOpen;
-    if (profilePickerOpen) {
-      scopePickerOpen = false;
-      controllerPickerOpen = false;
-    }
-  };
-
-  const toggleControllerPicker = () => {
-    if (!controllerPickerOpen) updateMenuPositions();
-    controllerPickerOpen = !controllerPickerOpen;
-    if (controllerPickerOpen) {
-      scopePickerOpen = false;
-      profilePickerOpen = false;
-    }
-  };
-
-  const handleWindowChange = () => {
-    if (scopePickerOpen || profilePickerOpen || controllerPickerOpen) updateMenuPositions();
-  };
-
-  const handleKeydown = (event: KeyboardEvent) => {
-    if (event.key !== 'Escape' || (!scopePickerOpen && !profilePickerOpen && !controllerPickerOpen)) return;
-    event.preventDefault();
-    closePickers();
-  };
-
-  const handleDocumentClick = (event: MouseEvent) => {
-    if (!scopePickerOpen && !profilePickerOpen && !controllerPickerOpen) return;
-    const target = event.target;
-    if (!(target instanceof Element)) return;
-    if (target.closest('.dm-ribbon-picker-host')) return;
-    closePickers();
-  };
-
-  const profileTargetSummary = () => {
-    if (profileTargetsAllConnected) return 'All Connected';
-    const selectedId = profileTargetControllerIds[0] ?? controller?.id ?? '';
-    const selected = connectedControllers.find((item) => item.id === selectedId) ?? controller;
-    return selected ? selected.name || controllerModelText(selected) : 'No Controller';
-  };
-
-  const profileAccentColor = (scope: ProfileSummary['scope']): string => {
-    if (scope === 'Game') return '#0070CC';
-    if (scope === 'Built-in') return '#7EE0FF';
-    return SCOPE_ACCENT_GLOBAL;
-  };
-
-  const pickGlobal = async () => {
-    closePickers();
-    if (selectedTuningScope !== 'global') await onPickGlobal();
-  };
-
-  const pickGame = async (game: SupportedGame) => {
-    closePickers();
-    if (selectedTuningScope === 'game' && selectedTuningGameId === game.gameId) return;
-    await onPickGame(game);
-  };
-
-  const pickProfile = async (profileId: string) => {
-    closePickers();
-    if (!profileId || profileId === selectedOverrideProfileId) return;
-    await onPickProfile(profileId);
-  };
-
-  const pickAllControllers = () => {
-    onPickAllControllers();
-    closePickers();
-  };
-
-  const pickController = (controllerId: string) => {
-    onPickController(controllerId);
-    closePickers();
-  };
-</script>
-
-<svelte:window
-  onkeydown={handleKeydown}
-  onclick={handleDocumentClick}
-  onresize={handleWindowChange}
-  onscroll={handleWindowChange}
-/>
-
-<section class="dm-tuning-ribbon" aria-label="Selected game context and production controls">
-  <div class="dm-steam-identity">
-    <div class="dm-ribbon-picker-host">
-      <button
-        bind:this={controllerTriggerEl}
-        type="button"
-        class="dm-steam-identity-cell dm-ribbon-picker-trigger"
-        class:open={controllerPickerOpen}
-        aria-haspopup="listbox"
-        aria-expanded={controllerPickerOpen}
-        disabled={!connectedControllerIds.length}
-        onclick={toggleControllerPicker}
-      >
-        <span>Target Controller</span>
-        <strong>{profileTargetsAllConnected ? 'All Connected' : profileTargetSummary()}</strong>
-        <p>{profileTargetsAllConnected ? `${connectedControllerIds.length} controller${connectedControllerIds.length === 1 ? '' : 's'}` : controllerConnectionText(controller ?? undefined)}</p>
-        <span class="dm-ribbon-picker-caret" aria-hidden="true">▾</span>
-      </button>
-      {#if controllerPickerOpen}
-        <div
-          class="dm-ribbon-picker-menu"
-          role="listbox"
-          aria-label="Select target controller"
-          style:left="{controllerMenuPos.left}px"
-          style:top="{controllerMenuPos.top}px"
-          style:min-width="{controllerMenuPos.minWidth}px"
-        >
-          <button
-            type="button"
-            class="dm-ribbon-picker-item"
-            class:active={profileTargetsAllConnected}
-            disabled={connectedControllerIds.length <= 1}
-            role="option"
-            aria-selected={profileTargetsAllConnected}
-            onclick={pickAllControllers}
-          >
-            <span class="dm-ribbon-picker-thumb art" aria-hidden="true">
-              <InitialBadge label="A" accent={SCOPE_ACCENT_GLOBAL} />
-            </span>
-            <span class="dm-ribbon-picker-copy">
-              <strong>All Connected</strong>
-              <small>{connectedControllerIds.length} controller{connectedControllerIds.length === 1 ? '' : 's'}</small>
-            </span>
-          </button>
-          <div class="dm-ribbon-picker-divider" role="separator"></div>
-          {#each connectedControllers as item (item.id)}
-            <button
-              type="button"
-              class="dm-ribbon-picker-item"
-              class:active={!profileTargetsAllConnected && profileTargetControllerIds.includes(item.id)}
-              role="option"
-              aria-selected={!profileTargetsAllConnected && profileTargetControllerIds.includes(item.id)}
-              onclick={() => pickController(item.id)}
-            >
-              <span class="dm-ribbon-picker-thumb art" aria-hidden="true">
-                <span class="dm-controller-glyph small" aria-hidden="true"></span>
-              </span>
-              <span class="dm-ribbon-picker-copy">
-                <strong>{item.name || controllerModelText(item)}</strong>
-                <small>{controllerConnectionText(item)}</small>
-              </span>
-            </button>
-          {/each}
-        </div>
-      {/if}
-    </div>
-
-    <div class="dm-ribbon-picker-host">
-      <button
-        bind:this={scopeTriggerEl}
-        type="button"
-        class="dm-steam-identity-cell dm-game-identity-cell dm-ribbon-picker-trigger"
-        class:open={scopePickerOpen}
-        aria-haspopup="listbox"
-        aria-expanded={scopePickerOpen}
-        onclick={toggleScopePicker}
-      >
-        {#if selectedTuningScope === 'game' && steamContextBackdropArt}
-          <span class="dm-ribbon-game-backdrop" aria-hidden="true">
-            <img src={steamContextBackdropArt} alt="" loading="lazy" />
-          </span>
-        {/if}
-        <span class="dm-ribbon-game-media" aria-hidden="true">
-          {#if selectedTuningScope === 'game' && steamContextArt}
-            <img src={steamContextArt} alt="" loading="lazy" />
-          {:else}
-            <InitialBadge label="G" accent={SCOPE_ACCENT_GLOBAL} />
-          {/if}
-        </span>
-        <span class="dm-ribbon-game-copy">
-          <span>{selectedTuningScope === 'global' ? 'Selected Scope' : 'Selected Game'}</span>
-          <strong>{selectedTuningScope === 'global' ? 'Global Profile' : steamContextGame?.name ?? 'No supported game selected'}</strong>
-          <p>{steamContextMeta}</p>
-        </span>
-        <span class="dm-ribbon-picker-caret" aria-hidden="true">▾</span>
-      </button>
-      {#if scopePickerOpen}
-        <div
-          class="dm-ribbon-picker-menu"
-          role="listbox"
-          aria-label="Select tuning scope"
-          style:left="{scopeMenuPos.left}px"
-          style:top="{scopeMenuPos.top}px"
-          style:min-width="{scopeMenuPos.minWidth}px"
-        >
-          <button
-            type="button"
-            class="dm-ribbon-picker-item"
-            class:active={selectedTuningScope === 'global'}
-            role="option"
-            aria-selected={selectedTuningScope === 'global'}
-            onclick={() => void pickGlobal()}
-          >
-            <span class="dm-ribbon-picker-thumb art" aria-hidden="true">
-              <InitialBadge label="G" accent={SCOPE_ACCENT_GLOBAL} />
-            </span>
-            <span class="dm-ribbon-picker-copy">
-              <strong>Global Profile</strong>
-              <small>Controller-only tuning</small>
-            </span>
-          </button>
-          {#if discoveredGames.length}
-            <div class="dm-ribbon-picker-divider" role="separator"></div>
-            {#each discoveredGames as game (game.gameId)}
-              {@const gameArt = game.artwork?.capsuleUrl ?? game.artwork?.bannerUrl ?? game.artwork?.iconUrl}
-              <button
-                type="button"
-                class="dm-ribbon-picker-item"
-                class:active={selectedTuningScope === 'game' && game.gameId === selectedTuningGameId}
-                role="option"
-                aria-selected={selectedTuningScope === 'game' && game.gameId === selectedTuningGameId}
-                onclick={() => void pickGame(game)}
-              >
-                <span class="dm-ribbon-picker-thumb art" aria-hidden="true">
-                  {#if gameArt}
-                    <img src={gameArt} alt="" loading="lazy" />
-                  {:else}
-                    <InitialBadge label={game.name} accent={gameAccentColor(game)} />
-                  {/if}
-                </span>
-                <span class="dm-ribbon-picker-copy">
-                  <strong>{game.name}</strong>
-                  <small>{game.supportLevel === 'custom' ? 'custom game' : game.running ? 'running' : game.installed ? 'installed' : 'discovered'}</small>
-                </span>
-              </button>
-            {/each}
-          {/if}
-        </div>
-      {/if}
-    </div>
-
-    <div class="dm-ribbon-picker-host">
-      <button
-        bind:this={profileTriggerEl}
-        type="button"
-        class="dm-steam-identity-cell dm-active-profile-cell dm-ribbon-picker-trigger"
-        class:open={profilePickerOpen}
-        aria-haspopup="listbox"
-        aria-expanded={profilePickerOpen}
-        aria-live="polite"
-        disabled={profileContextProfiles.length === 0}
-        onclick={toggleProfilePicker}
-      >
-        <span>Live Profile</span>
-        <strong>{activeProfileHeaderName}</strong>
-        <p>{activeProfileHeaderMeta}</p>
-        <span class="dm-ribbon-picker-caret" aria-hidden="true">▾</span>
-      </button>
-      {#if profilePickerOpen && profileContextProfiles.length}
-        <div
-          class="dm-ribbon-picker-menu profile"
-          role="listbox"
-          aria-label="Select active profile"
-          style:left="{profileMenuPos.left}px"
-          style:top="{profileMenuPos.top}px"
-          style:min-width="{profileMenuPos.minWidth}px"
-        >
-          {#each profileContextProfiles as profile (profile.id)}
-            <button
-              type="button"
-              class="dm-ribbon-picker-item"
-              class:active={profile.id === (selectedOverrideProfileId || activeProfileId)}
-              role="option"
-              aria-selected={profile.id === (selectedOverrideProfileId || activeProfileId)}
-              onclick={() => void pickProfile(profile.id)}
-            >
-              <span class="dm-ribbon-picker-thumb art" aria-hidden="true">
-                <InitialBadge label={profile.name} accent={profileAccentColor(profile.scope)} />
-              </span>
-              <span class="dm-ribbon-picker-copy">
-                <strong>{profile.name}</strong>
-                <small>{profile.builtIn ? (profile.scope === 'Global' ? 'Stock / Global' : 'Built-in template') : profile.scope === 'Game' ? `Custom / ${steamContextGame?.name ?? 'game'}` : 'Custom / Global'}{profile.id === activeProfileId ? ' / live' : ''}</small>
-              </span>
-            </button>
-          {/each}
-        </div>
-      {/if}
-    </div>
-  </div>
-
-  <div class="dm-system-toggles" aria-label="Production system controls">
-    <Tooltip block text="Local keeps the web UI bound to this PC. LAN exposes it on your network so you can tune from another device; a restart may be required after changing the bind address." side="bottom" align="end">
-      <div class="dm-location-line">
-        <label>
-          <span>Web UI Location</span>
-          <select
-            value={listenOnAllInterfaces ? 'lan' : 'local'}
-            disabled={appSettingsBusy}
-            aria-label="Web UI location"
-            onchange={(event) => void onUpdateLanAccess(event.currentTarget.value === 'lan')}
-          >
-            <option value="local">Local Only</option>
-            <option value="lan">LAN Access</option>
-          </select>
-          <small>{lanRestartRequired ? `restart -> ${desiredBindAddress}` : currentBindAddress}</small>
-        </label>
-      </div>
-    </Tooltip>
-    <Tooltip block text="Installs or restores PlayStation-style button glyphs for supported games. DSCC keeps backups so the game can be returned to its default glyph files." side="bottom" align="end">
-      <div class="dm-switch-line dm-glyph-switch">
-        <div>
-          <span>Controller Glyphs</span>
-          <strong>{glyphOverrideEnabled ? 'PlayStation Icons' : 'Game Default'}</strong>
-          <small>{glyphStatus}</small>
-        </div>
-        <button
-          class:active={glyphOverrideEnabled}
-          class="dm-toggle"
-          type="button"
-          disabled={appSettingsBusy}
-          aria-label="Toggle PlayStation controller button glyphs"
-          aria-pressed={glyphOverrideEnabled}
-          onclick={() => void onUpdateGlyphOverride()}
-        ><span></span></button>
-      </div>
-    </Tooltip>
-  </div>
-</section>
diff --git a/web/src/components/OnboardingTutorial.svelte b/web/src/components/OnboardingTutorial.svelte
index b29708c..9ceceec 100644
--- a/web/src/components/OnboardingTutorial.svelte
+++ b/web/src/components/OnboardingTutorial.svelte
@@ -29,16 +29,16 @@
     {
       eyebrow: 'Start here',
       title: 'Pick the controller and scope',
-      body: 'Use Controllers for hardware state and live inputs, then use Profiles to choose Global or a supported game scope.',
-      actionLabel: 'Open Controllers',
-      targetView: 'advancedController',
+      body: 'Status shows your controller, game detection, and telemetry at a glance. In Tuning, choose Global or a supported game from the header.',
+      actionLabel: 'Open Status',
+      targetView: 'status',
       icon: Gamepad2
     },
     {
       eyebrow: 'Safety first',
       title: 'Game effects wait for telemetry',
       body: 'DSCC keeps triggers neutral until a supported game is detected and fresh telemetry is flowing. Manual test buttons attach only for the short test window.',
-      actionLabel: 'Open haptics',
+      actionLabel: 'Open Tuning',
       targetView: 'tuning',
       icon: RadioTower
     },
@@ -46,7 +46,7 @@
       eyebrow: 'Tune feel',
       title: 'Shape L2 and R2 with curve points',
       body: 'Drag the trigger dots for custom brake and throttle response, then use Test Actuation to feel the current profile without starting a game.',
-      actionLabel: 'Open haptics',
+      actionLabel: 'Open Tuning',
       targetView: 'tuning',
       icon: SlidersHorizontal
     },
diff --git a/web/src/components/ViewNav.svelte b/web/src/components/ViewNav.svelte
deleted file mode 100644
index 7420919..0000000
--- a/web/src/components/ViewNav.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-  import Tooltip from './Tooltip.svelte';
-  import type { AppView, AppViewDefinition } from '../app/navigation';
-
-  export let views: AppViewDefinition[] = [];
-  export let activeView: AppView = 'status';
-  export let tooltips: Record<AppView, string>;
-  export let tuningReady = false;
-  export let buttonMappingReady = false;
-  export let onNavigate: (view: AppView) => void = () => {};
-
-  $: viewModels = views.map((view) => {
-    const disabled =
-      (view.id === 'tuning' && !tuningReady) || (view.id === 'advancedButtonMapping' && !buttonMappingReady);
-    const tooltip =
-      view.id === 'advancedButtonMapping' && !buttonMappingReady
-        ? 'Select a game or local app scope before editing mappings.'
-        : view.id === 'tuning' && !tuningReady
-          ? 'Select a controller before tuning haptics.'
-          : tooltips[view.id];
-    return { ...view, disabled, tooltip };
-  });
-</script>
-
-<nav class="dm-view-nav" aria-label="Command center views">
-  {#each viewModels as view}
-    <Tooltip text={view.tooltip} side="bottom" align="center">
-      <button
-        class:active={activeView === view.id}
-        disabled={view.disabled}
-        type="button"
-        aria-current={activeView === view.id ? 'page' : undefined}
-        onclick={() => onNavigate(view.id)}
-      >
-        {view.label}
-      </button>
-    </Tooltip>
-  {/each}
-</nav>
diff --git a/web/src/lib/features/controllers/ControllerCard.svelte b/web/src/lib/features/controllers/ControllerCard.svelte
index 5888bb0..9ad91d8 100644
--- a/web/src/lib/features/controllers/ControllerCard.svelte
+++ b/web/src/lib/features/controllers/ControllerCard.svelte
@@ -121,7 +121,7 @@
           <dd>{controllerDiagnosticDetail(item)}</dd>
         </div>
         <div class="wide">
-          <dt>HID ID</dt>
+          <dt>Sanitized ID</dt>
           <dd class="mono">{item.id}</dd>
         </div>
         {#if item.capabilities.length}
diff --git a/web/src/lib/features/games/GamesView.svelte b/web/src/lib/features/games/GamesView.svelte
deleted file mode 100644
index f196f77..0000000
--- a/web/src/lib/features/games/GamesView.svelte
+++ /dev/null
@@ -1,165 +0,0 @@
-<script lang="ts">
-  import Tooltip from '../../../components/Tooltip.svelte';
-  import InitialBadge from '../../../components/InitialBadge.svelte';
-  import { controllerConnectionText, controllerModelText } from '../../controllerDisplay';
-  import type { ControllerStatus, ProfileSummary, SupportedGame } from '../../types';
-
-  export let controller: ControllerStatus | undefined = undefined;
-  export let connectedControllers: ControllerStatus[] = [];
-  export let selectedTuningScope: 'none' | 'global' | 'game' = 'global';
-  export let selectedTuningGameId = '';
-  export let globalProfilePreview: ProfileSummary | null | undefined = null;
-  export let profileTargetsAllConnected = false;
-  export let profileTargetControllerIds: string[] = [];
-  export let discoveredGames: SupportedGame[] = [];
-  export let detectionSignalText = '';
-  export let gameArtwork: (game: SupportedGame, kind: 'hero' | 'banner' | 'capsule' | 'icon') => string | null = () => null;
-  export let gameMediaDetails: (game: SupportedGame) => string[] = () => [];
-  export let profileScopeCount: (game: SupportedGame) => number = () => 0;
-  export let gameAccentColor: (game: SupportedGame) => string = () => '#3BA0FF';
-  export let gameTileStatus: (game: SupportedGame) => string = () => 'installed';
-  export let onSelectGlobal: () => void | Promise<void> = () => {};
-  export let onSelectGame: (game: SupportedGame) => void | Promise<void> = () => {};
-  export let onOpenAddGame: () => void | Promise<void> = () => {};
-  export let onPickAllControllers: () => void = () => {};
-  export let onPickControllerTarget: (controllerId: string) => void = () => {};
-
-  $: connectedCount = connectedControllers.length;
-  $: targetSummary = profileTargetsAllConnected
-    ? 'All Connected'
-    : connectedControllers.find((item) => profileTargetControllerIds.includes(item.id))?.name ||
-      controllerModelText(controller);
-  $: targetDetail = profileTargetsAllConnected
-    ? `${connectedCount} controller${connectedCount === 1 ? '' : 's'}`
-    : controllerConnectionText(controller);
-</script>
-
-<section class="dm-games-page" aria-label="Profiles and supported games">
-  <div class="dm-games-column wide">
-    <div class="dm-games-head">
-      <span>Profiles</span>
-      <h2>Games</h2>
-    </div>
-
-    <div class="dm-profile-target-strip" aria-label="Profile target controller">
-      <div>
-        <span>Target Controller</span>
-        <strong>{targetSummary}</strong>
-        <small>{targetDetail}</small>
-      </div>
-      {#if connectedControllers.length > 1}
-        <button
-          type="button"
-          class:active={profileTargetsAllConnected}
-          aria-pressed={profileTargetsAllConnected}
-          onclick={onPickAllControllers}
-        >All</button>
-        {#each connectedControllers as item (item.id)}
-          <button
-            type="button"
-            class:active={!profileTargetsAllConnected && profileTargetControllerIds.includes(item.id)}
-            aria-pressed={!profileTargetsAllConnected && profileTargetControllerIds.includes(item.id)}
-            onclick={() => onPickControllerTarget(item.id)}
-          >{item.name || controllerModelText(item)}</button>
-        {/each}
-      {/if}
-    </div>
-
-    <div class="dm-scope-strip">
-      <Tooltip
-        text="Per-game profiles auto-load when the game launches via Steam. Global tunes the controller when nothing is detected or an unsupported game is running."
-        side="bottom"
-        align="start"
-      >
-        <button
-          type="button"
-          class:active={selectedTuningScope === 'global'}
-          disabled={!controller}
-          onclick={() => void onSelectGlobal()}
-        >
-          <span class="dm-controller-glyph small" aria-hidden="true"></span>
-          <span class="dm-scope-chip">
-            <span class="dm-scope-chip-label">Profile Scope</span>
-            <strong class="dm-scope-chip-value">Global</strong>
-            <small class="dm-scope-chip-detail">{globalProfilePreview?.name ?? 'Base'} · Controller-only tuning</small>
-          </span>
-        </button>
-      </Tooltip>
-    </div>
-
-    {#if discoveredGames.length}
-      <div class="dm-game-grid">
-        {#each discoveredGames as game (game.gameId)}
-          {@const heroArt = gameArtwork(game, 'hero') ?? gameArtwork(game, 'banner')}
-          {@const tileArt = gameArtwork(game, 'banner') ?? gameArtwork(game, 'capsule') ?? gameArtwork(game, 'icon')}
-          {@const details = gameMediaDetails(game)}
-          {@const scopedProfiles = profileScopeCount(game)}
-          <button
-            type="button"
-            class="dm-game-card"
-            class:active={selectedTuningScope === 'game' && game.gameId === selectedTuningGameId}
-            class:running={game.running}
-            class:custom={game.supportLevel === 'custom'}
-            disabled={!controller}
-            aria-pressed={selectedTuningScope === 'game' && game.gameId === selectedTuningGameId}
-            style={heroArt ? `--game-hero: url("${heroArt}")` : ''}
-            onclick={() => void onSelectGame(game)}
-          >
-            <span class="dm-game-card-media">
-              {#if tileArt}
-                <img
-                  src={tileArt}
-                  alt=""
-                  loading="lazy"
-                  aria-hidden="true"
-                  onerror={(event) => {
-                    const img = event.currentTarget;
-                    if (img instanceof HTMLImageElement) img.style.display = 'none';
-                  }}
-                />
-              {/if}
-              <span class="dm-game-art-fallback" aria-hidden="true">
-                <InitialBadge label={game.name} accent={gameAccentColor(game)} />
-              </span>
-              <code>{game.running ? 'LIVE' : game.supportLevel === 'custom' ? 'CUSTOM' : game.installed ? 'READY' : 'SUPPORTED'}</code>
-            </span>
-            <span class="dm-game-copy">
-              <strong>{game.name}</strong>
-              <span class="dm-game-meta">
-                {#each details as detail}
-                  <em>{detail}</em>
-                {/each}
-              </span>
-              <small>{scopedProfiles ? `${scopedProfiles} game profile${scopedProfiles === 1 ? '' : 's'}` : game.supportLevel === 'custom' ? 'custom / no telemetry adapter' : `${gameTileStatus(game)} / telemetry`}</small>
-            </span>
-          </button>
-        {/each}
-        <button
-          type="button"
-          class="dm-game-card dm-game-card-add"
-          disabled={!controller}
-          aria-label="Add a custom game from your Steam library"
-          onclick={() => void onOpenAddGame()}
-        >
-          <span class="dm-add-game-icon" aria-hidden="true">+</span>
-          <span class="dm-game-copy">
-            <strong>Add a Game</strong>
-            <small>Pick from your installed Steam library or local apps. DSCC will save a profile per game and auto-load it on launch.</small>
-          </span>
-        </button>
-      </div>
-    {:else}
-      <div class="dm-empty-choice wide">
-        <strong>No supported games discovered</strong>
-        <span>{detectionSignalText || 'Steam library data unavailable'}</span>
-        <button
-          type="button"
-          class="dm-mini-button"
-          style="margin-top: 8px;"
-          disabled={!controller}
-          onclick={() => void onOpenAddGame()}
-        >Add a game manually</button>
-      </div>
-    {/if}
-  </div>
-</section>
diff --git a/web/src/lib/features/games/addGameDialog.css b/web/src/lib/features/games/addGameDialog.css
index 85ba718..07e8d8b 100644
--- a/web/src/lib/features/games/addGameDialog.css
+++ b/web/src/lib/features/games/addGameDialog.css
@@ -36,7 +36,7 @@
 
 .dm-add-game-head span {
   display: block;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.04em;
@@ -55,7 +55,7 @@
 .dm-add-game-head p {
   margin: 0;
   max-width: 60ch;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 12px;
   line-height: 1.4;
 }
@@ -67,7 +67,7 @@
   height: 28px;
   border: 1px solid rgba(113, 113, 122, 0.32);
   border-radius: 6px;
-  color: var(--haptic);
+  color: var(--ink);
   background: rgba(18, 18, 20, 0.6);
   cursor: pointer;
 }
@@ -86,7 +86,7 @@
   border: 1px solid rgba(113, 113, 122, 0.28);
   border-radius: 6px;
   background: rgba(10, 10, 12, 0.62);
-  color: var(--tungsten);
+  color: var(--ink-muted);
 }
 
 .dm-add-game-tabs {
@@ -104,7 +104,7 @@
   border: 0;
   border-radius: 5px;
   padding: 6px 10px;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   background: transparent;
   font-size: 12px;
   font-weight: 800;
@@ -134,7 +134,7 @@
 }
 
 .dm-add-game-search input::placeholder {
-  color: var(--tungsten);
+  color: var(--ink-muted);
 }
 
 .dm-add-game-error {
@@ -167,7 +167,7 @@
 .dm-local-app-field {
   display: grid;
   gap: 6px;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.04em;
@@ -221,7 +221,7 @@
 }
 
 .dm-local-validation span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-family: "JetBrains Mono", monospace;
   font-size: 11px;
 }
@@ -240,7 +240,7 @@
   gap: 4px;
   padding: 24px 8px;
   text-align: center;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 13px;
 }
 
@@ -331,7 +331,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 4px 6px;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
 }
 
@@ -344,7 +344,7 @@
 }
 
 .dm-add-game-copy small {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   line-height: 1.3;
 }
@@ -382,7 +382,7 @@
   padding: 6px 12px;
   border: 1px solid rgba(113, 113, 122, 0.42);
   border-radius: 5px;
-  color: var(--haptic);
+  color: var(--ink);
   background: rgba(10, 10, 12, 0.42);
   font-size: 12px;
   font-weight: 700;
@@ -414,7 +414,7 @@
   align-items: center;
   gap: 4px 6px;
   padding: 10px 20px 0;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   font-family: "JetBrains Mono", "Space Mono", ui-monospace, monospace;
 }
@@ -423,7 +423,7 @@
   appearance: none;
   border: 0;
   background: transparent;
-  color: var(--haptic);
+  color: var(--ink);
   font: inherit;
   cursor: pointer;
   padding: 2px 4px;
@@ -466,7 +466,7 @@
 .dm-add-game-browse-empty {
   padding: 16px 8px;
   text-align: center;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 12px;
 }
 
@@ -478,7 +478,7 @@
   padding: 7px 10px;
   border: 0;
   border-radius: 5px;
-  color: var(--haptic);
+  color: var(--ink);
   background: transparent;
   font: inherit;
   text-align: left;
@@ -494,11 +494,11 @@
 }
 
 .dm-add-game-browse-row.dir .dm-add-game-browse-icon {
-  color: var(--actuation);
+  color: var(--accent);
 }
 
 .dm-add-game-browse-row.exe .dm-add-game-browse-icon {
-  color: var(--haptic);
+  color: var(--ink);
 }
 
 .dm-add-game-browse-row.selected {
@@ -523,17 +523,17 @@
 }
 
 .dm-add-game-browse-meta {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-family: "JetBrains Mono", monospace;
 }
 
 .dm-add-game-browse-affordance {
-  color: var(--tungsten);
+  color: var(--ink-muted);
 }
 
 .dm-add-game-browse-affordance.selected-pill {
-  color: var(--actuation);
+  color: var(--accent);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.04em;
@@ -541,7 +541,7 @@
 }
 
 .dm-add-game-browse-affordance.hint-pill {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.04em;
@@ -551,7 +551,7 @@
 
 .dm-add-game-browse-row:hover .dm-add-game-browse-affordance.hint-pill {
   opacity: 1;
-  color: var(--haptic);
+  color: var(--ink);
 }
 
 .dm-add-game-pick-selected {
@@ -566,7 +566,7 @@
 }
 
 .dm-add-game-pick-selected-label {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.04em;
@@ -575,7 +575,7 @@
 }
 
 .dm-add-game-pick-selected-empty {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   font-style: italic;
 }
@@ -602,7 +602,7 @@
   height: 16px;
   border: 0;
   border-radius: 50%;
-  color: var(--haptic);
+  color: var(--ink);
   background: transparent;
   cursor: pointer;
 }
@@ -621,7 +621,7 @@
   padding: 4px 8px;
   border: 1px solid rgba(113, 113, 122, 0.32);
   border-radius: 999px;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.04em;
@@ -635,7 +635,7 @@
   gap: 12px;
   padding: 12px 20px 16px;
   border-top: 1px solid rgba(113, 113, 122, 0.18);
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.02em;
@@ -646,7 +646,7 @@
   padding: 7px 14px;
   border: 1px solid rgba(113, 113, 122, 0.34);
   border-radius: 5px;
-  color: var(--haptic);
+  color: var(--ink);
   background: rgba(10, 10, 12, 0.42);
   font-size: 12px;
   font-weight: 800;
diff --git a/web/src/lib/features/haptics/HapticsAside.svelte b/web/src/lib/features/haptics/HapticsAside.svelte
deleted file mode 100644
index 305f3a0..0000000
--- a/web/src/lib/features/haptics/HapticsAside.svelte
+++ /dev/null
@@ -1,231 +0,0 @@
-<script lang="ts">
-  import GlobalFeelPanel from './GlobalFeelPanel.svelte';
-  import LightbarControls from './LightbarControls.svelte';
-  import TelemetryRoutingPanel from './TelemetryRoutingPanel.svelte';
-  import type {
-    AppSnapshot,
-    ForzaAbsTuningConfiguration,
-    ForzaBrakeTuningConfiguration,
-    ForzaBodyRumbleMode,
-    ForzaEffectConfiguration,
-    ForzaEffectRoute,
-    ForzaRevLimiterTuningConfiguration,
-    ForzaShiftTuningConfiguration,
-    ForzaThrottleTuningConfiguration
-  } from '../../types';
-  import type { ForzaEffectMeta, LightbarColorTarget } from './hapticsModel';
-
-  type TuningScope = 'none' | 'global' | 'game';
-  type PatternOption = {
-    label: string;
-    badge?: string;
-  };
-  type BodyRumbleModeOption = {
-    value: ForzaBodyRumbleMode;
-    label: string;
-    badge: string;
-    help: string;
-  };
-  type RouteOption = {
-    value: ForzaEffectRoute;
-    label: string;
-  };
-
-  const noop = () => undefined;
-
-  export let selectedTuningScope: TuningScope = 'none';
-  export let snapshot: AppSnapshot | null = null;
-  export let baseFeelTestActive = false;
-  export let baseFeelTestBusy = false;
-  export let triggerEffect = 'Adaptive resistance';
-  export let triggerIntensity = 'Strong (Standard)';
-  export let vibrationIntensity = 'Medium';
-  export let vibrationMode = 'Balanced';
-  export let triggerEffectOptions: PatternOption[] = [];
-  export let vibrationModeOptions: PatternOption[] = [];
-  export let triggerEffectHelp: Record<string, string> = {};
-  export let vibrationModeHelp: Record<string, string> = {};
-  export let setTriggerEffect: (value: string) => void = noop as (value: string) => void;
-  export let setVibrationIntensity: (value: string) => void = noop as (value: string) => void;
-  export let setVibrationMode: (value: string) => void = noop as (value: string) => void;
-  export let toggleBaseFeelTest: () => Promise<void> | void = noop;
-  export let previewBodyHaptics: () => Promise<void> | void = noop;
-
-  export let enabledForzaEffectCount = 0;
-  export let allForzaEffectsEnabled = false;
-  export let forzaEffectMetas: ForzaEffectMeta[] = [];
-  export let forzaEffectsById: ReadonlyMap<string, ForzaEffectConfiguration> = new Map();
-  export let effectStatusById: ReadonlyMap<string, { state?: string }> = new Map();
-  export let forzaBodyRumbleMode: ForzaBodyRumbleMode = 'native_passthrough';
-  export let forzaBrakeTuning: ForzaBrakeTuningConfiguration = {
-    baselineForce: 76 / 255,
-    normalForce: 1,
-    endstopForce: 1,
-    endstopBoost: 1.25,
-    wallPosition: 0.48,
-    guardMinEnd: 0.48,
-    fullForceAt: 0.8,
-    rampCurve: 0.8
-  };
-  export let forzaAbsTuning: ForzaAbsTuningConfiguration = {
-    mode: 'strong_pulse',
-    slipSource: 'auto_front_first',
-    slipThreshold: 0.68,
-    brakeThresholdRatio: 0.38,
-    minSpeedKmh: 12,
-    minStrength: 48 / 63,
-    maxStrength: 1,
-    frequencyHz: 34,
-    curve: 1
-  };
-  export let forzaThrottleTuning: ForzaThrottleTuningConfiguration = {
-    baselineForce: 3 / 255,
-    normalForce: 28 / 255,
-    endstopForce: 106 / 255,
-    endstopBoost: 3,
-    wallPosition: 0.8,
-    guardMinEnd: 0.8,
-    rampWidth: 0.2,
-    rampCurve: 2.4
-  };
-  export let forzaShiftTuning: ForzaShiftTuningConfiguration = {
-    wallFormAt: 0.15,
-    frequencyHz: 34,
-    wallZones: 4,
-    bodyLowWeight: 0.92,
-    bodyHighWeight: 0.84,
-    clutchMode: 'auto',
-    clutchThreshold: 0.4,
-    withClutchStrength: 0.58,
-    withoutClutchStrength: 1,
-    withClutchDurationMs: 130,
-    withoutClutchDurationMs: 240,
-    clutchBodyCut: 0.78
-  };
-  export let forzaRevLimiterTuning: ForzaRevLimiterTuningConfiguration = {
-    thresholdRatio: 0.93,
-    minStrength: 18 / 63,
-    maxStrength: 18 / 63,
-    frequencyHz: 42,
-    wallFormThrottleAt: 0.6,
-    wallZones: 4,
-    curve: 1,
-    bodyLowWeight: 0.2,
-    bodyHighWeight: 0.8
-  };
-  export let bodyRumbleModeOptions: BodyRumbleModeOption[] = [];
-  export let forzaRoutes: RouteOption[] = [];
-  export let forzaEffect: (id: string) => ForzaEffectConfiguration = (id) => ({
-    id,
-    enabled: false,
-    intensity: 0,
-    route: 'body_both'
-  });
-  export let toggleAllForzaEffects: () => void = noop;
-  export let setForzaBodyRumbleMode: (value: ForzaBodyRumbleMode) => void = noop as (value: ForzaBodyRumbleMode) => void;
-  export let updateForzaBrakeTuning: (patch: Partial<ForzaBrakeTuningConfiguration>) => void = noop as (
-    patch: Partial<ForzaBrakeTuningConfiguration>
-  ) => void;
-  export let updateForzaAbsTuning: (patch: Partial<ForzaAbsTuningConfiguration>) => void = noop as (
-    patch: Partial<ForzaAbsTuningConfiguration>
-  ) => void;
-  export let updateForzaThrottleTuning: (patch: Partial<ForzaThrottleTuningConfiguration>) => void = noop as (
-    patch: Partial<ForzaThrottleTuningConfiguration>
-  ) => void;
-  export let updateForzaShiftTuning: (patch: Partial<ForzaShiftTuningConfiguration>) => void = noop as (
-    patch: Partial<ForzaShiftTuningConfiguration>
-  ) => void;
-  export let updateForzaRevLimiterTuning: (patch: Partial<ForzaRevLimiterTuningConfiguration>) => void = noop as (
-    patch: Partial<ForzaRevLimiterTuningConfiguration>
-  ) => void;
-  export let updateForzaEffect: (id: string, patch: Partial<ForzaEffectConfiguration>) => void = noop as (
-    id: string,
-    patch: Partial<ForzaEffectConfiguration>
-  ) => void;
-  export let intensityTooltip: (meta: ForzaEffectMeta, intensity: number) => string = () => '';
-  export let routeTooltip: (route: ForzaEffectRoute) => string = () => '';
-  export let forzaIntensityPercent: (intensity: number) => number = () => 0;
-  export let forzaIntensityFromPercent: (value: number | string) => number = () => 0;
-
-  export let lightbarEnabled = true;
-  export let lightbarColor = '#4cc9f0';
-  export let rpmColor = '#ff3a2e';
-  export let lightbarBrightness = 72;
-  export let onColorChange: (target: LightbarColorTarget, color: string) => void = noop as (
-    target: LightbarColorTarget,
-    color: string
-  ) => void;
-  export let setLightbarBrightness: (value: number | string) => void = noop as (value: number | string) => void;
-  export let setLightbarEnabled: (enabled: boolean) => void = noop as (enabled: boolean) => void;
-  export let previewLightbar: () => Promise<void> | void = noop;
-  export let previewRpmColor: () => Promise<void> | void = noop;
-</script>
-
-<aside
-  class:dm-global-feel={selectedTuningScope === 'global'}
-  class="dm-routing"
-  aria-label={selectedTuningScope === 'global' ? 'Controller haptic tuning' : 'Telemetry haptic routing'}
->
-  {#if selectedTuningScope === 'global'}
-    <GlobalFeelPanel
-      {snapshot}
-      {baseFeelTestActive}
-      {baseFeelTestBusy}
-      {triggerEffect}
-      {triggerIntensity}
-      {vibrationIntensity}
-      {vibrationMode}
-      {triggerEffectOptions}
-      {vibrationModeOptions}
-      {triggerEffectHelp}
-      {vibrationModeHelp}
-      {setTriggerEffect}
-      {setVibrationIntensity}
-      {setVibrationMode}
-      {toggleBaseFeelTest}
-      {previewBodyHaptics}
-    />
-  {:else}
-    <TelemetryRoutingPanel
-      {enabledForzaEffectCount}
-      {allForzaEffectsEnabled}
-      {forzaEffectMetas}
-      {forzaEffectsById}
-      {effectStatusById}
-      {forzaBodyRumbleMode}
-      {forzaBrakeTuning}
-      {forzaAbsTuning}
-      {forzaThrottleTuning}
-      {forzaShiftTuning}
-      {forzaRevLimiterTuning}
-      {bodyRumbleModeOptions}
-      {forzaRoutes}
-      {forzaEffect}
-      {toggleAllForzaEffects}
-      {setForzaBodyRumbleMode}
-      {updateForzaBrakeTuning}
-      {updateForzaAbsTuning}
-      {updateForzaThrottleTuning}
-      {updateForzaShiftTuning}
-      {updateForzaRevLimiterTuning}
-      {updateForzaEffect}
-      {intensityTooltip}
-      {routeTooltip}
-      {forzaIntensityPercent}
-      {forzaIntensityFromPercent}
-    />
-  {/if}
-
-  <LightbarControls
-    {selectedTuningScope}
-    {lightbarEnabled}
-    bind:lightbarColor
-    bind:rpmColor
-    {lightbarBrightness}
-    {onColorChange}
-    {setLightbarBrightness}
-    {setLightbarEnabled}
-    {previewLightbar}
-    {previewRpmColor}
-  />
-</aside>
diff --git a/web/src/lib/features/haptics/HapticsView.svelte b/web/src/lib/features/haptics/HapticsView.svelte
deleted file mode 100644
index 0354dd4..0000000
--- a/web/src/lib/features/haptics/HapticsView.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-  export let active = false;
-</script>
-
-<section
-  class:dm-view-hidden={!active}
-  class="dm-deck"
-  aria-label="Adaptive triggers and haptics"
-  aria-hidden={!active}
->
-  <slot />
-</section>
diff --git a/web/src/lib/features/profiles/ProfileConsole.svelte b/web/src/lib/features/profiles/ProfileConsole.svelte
deleted file mode 100644
index 08e0c71..0000000
--- a/web/src/lib/features/profiles/ProfileConsole.svelte
+++ /dev/null
@@ -1,159 +0,0 @@
-<script lang="ts">
-  import { CopyPlus, RotateCcw, Save } from '@lucide/svelte';
-  import Tooltip from '../../../components/Tooltip.svelte';
-  import type { ProfileSummary } from '../../types';
-
-  export let profileContextProfiles: ProfileSummary[] = [];
-  export let activeProfileId = '';
-  export let selectedOverrideProfileId = '';
-  export let selectedActionProfile: ProfileSummary | null | undefined = null;
-  export let selectedGameName = 'game';
-  export let canRenameSelectedProfile = false;
-  export let canDeleteSelectedProfile = false;
-  export let profileConfigDirty = false;
-  export let profileSaveBusy = false;
-  export let profileFileBusy = false;
-  export let profileSaveAsBusy = false;
-  export let profileRenameBusy = false;
-  export let saveAsProfileOpen = false;
-  export let saveAsProfileName = '';
-  export let renameProfileId = '';
-  export let renameProfileName = '';
-  export let onSelectProfile: (profileId: string) => void | Promise<void> = () => {};
-  export let onImportFile: (event: Event) => void | Promise<void> = () => {};
-  export let onExportProfile: () => void | Promise<void> = () => {};
-  export let onBeginSaveAs: () => void = () => {};
-  export let onCancelSaveAs: () => void = () => {};
-  export let onSubmitSaveAs: () => void | Promise<void> = () => {};
-  export let onSaveAsKeydown: (event: KeyboardEvent) => void = () => {};
-  export let onBeginRename: () => void = () => {};
-  export let onCancelRename: () => void = () => {};
-  export let onSubmitRename: () => void | Promise<void> = () => {};
-  export let onRenameKeydown: (event: KeyboardEvent) => void = () => {};
-  export let onDeleteProfile: (profile: ProfileSummary) => void | Promise<void> = () => {};
-  export let onRestoreDefaults: () => void | Promise<void> = () => {};
-  export let onSaveProfile: () => void | Promise<void> = () => {};
-
-  let importInput: HTMLInputElement | undefined;
-
-  const profileOptionLabel = (profile: ProfileSummary) => {
-    if (profile.scope === 'Game') return `${profile.name} / ${selectedGameName}`;
-    if (profile.id === activeProfileId) return `${profile.name} / live`;
-    return profile.name;
-  };
-
-  $: profileOptions = profileContextProfiles.map((profile) => ({
-    profile,
-    label: profileOptionLabel(profile)
-  }));
-
-  const requestImport = () => {
-    if (!profileFileBusy) importInput?.click();
-  };
-</script>
-
-<div class="dm-profile-console">
-  <div class="dm-profile-line">
-    <label>
-      <span>Editing Profile</span>
-      <select
-        value={selectedOverrideProfileId || activeProfileId}
-        disabled={!profileContextProfiles.length}
-        onchange={(event) => void onSelectProfile(event.currentTarget.value)}
-      >
-        {#each profileOptions as option}
-          <option value={option.profile.id}>{option.label}</option>
-        {/each}
-      </select>
-    </label>
-    <div class="dm-action-row">
-      <Tooltip text="Import a DSCC profile JSON file into the selected scope." side="top" align="center">
-        <button class="dm-mini-button" type="button" onclick={requestImport}>Import</button>
-      </Tooltip>
-      <input bind:this={importInput} class="ops-hidden-file" type="file" accept="application/json,.json,.dscc-profile" onchange={(event) => void onImportFile(event)} />
-      <Tooltip text="Export the selected profile as a DSCC profile JSON file." side="top" align="center">
-        <button class="dm-mini-button" type="button" disabled={!activeProfileId || profileFileBusy} onclick={() => void onExportProfile()}>Export</button>
-      </Tooltip>
-      <Tooltip text="Save the current tuning into a new custom profile without changing the built-in template." side="top" align="center">
-        <button
-          class="dm-mini-button wide"
-          type="button"
-          disabled={!selectedActionProfile || profileSaveAsBusy}
-          onclick={onBeginSaveAs}
-        ><CopyPlus size={14} /> Save As</button>
-      </Tooltip>
-      <Tooltip text={canRenameSelectedProfile ? 'Rename the selected custom profile.' : 'Built-in profiles cannot be renamed. Use Save As first.'} side="top" align="center">
-        <button
-          class="dm-mini-button"
-          type="button"
-          disabled={!canRenameSelectedProfile || profileRenameBusy || !selectedActionProfile}
-          onclick={onBeginRename}
-        >Rename</button>
-      </Tooltip>
-      <Tooltip text={canDeleteSelectedProfile ? 'Delete the selected custom profile from DSCC.' : 'Built-in profiles cannot be deleted.'} side="top" align="center">
-        <button
-          class="dm-mini-button"
-          type="button"
-          disabled={!canDeleteSelectedProfile || profileFileBusy || !selectedActionProfile}
-          onclick={() => selectedActionProfile && void onDeleteProfile(selectedActionProfile)}
-        >Delete</button>
-      </Tooltip>
-      <Tooltip text="Restore the selected profile's trigger, haptic, and lightbar values to defaults." side="top" align="center">
-        <button class="dm-mini-button" type="button" onclick={() => void onRestoreDefaults()}><RotateCcw size={14} /> Reset</button>
-      </Tooltip>
-      <Tooltip text={profileConfigDirty ? 'Save the current tuning to the selected profile.' : 'No unsaved tuning changes.'} side="top" align="end">
-        <button
-          class:dirty={profileConfigDirty}
-          class="dm-apply-button"
-          type="button"
-          disabled={!selectedActionProfile || profileSaveBusy || !profileConfigDirty}
-          onclick={() => void onSaveProfile()}
-        ><Save size={14} /> {profileSaveBusy ? 'Saving' : 'Save'}</button>
-      </Tooltip>
-    </div>
-  </div>
-
-  {#if saveAsProfileOpen}
-    <div class="dm-profile-rename">
-      <label>
-        <span>Save As</span>
-        <input
-          bind:value={saveAsProfileName}
-          disabled={profileSaveAsBusy}
-          maxlength="80"
-          spellcheck="false"
-          onkeydown={onSaveAsKeydown}
-          aria-label="New profile name"
-        />
-      </label>
-      <div class="dm-action-row">
-        <button class="dm-mini-button" type="button" disabled={profileSaveAsBusy} onclick={onCancelSaveAs}>Cancel</button>
-        <button class="dm-mini-button primary" type="button" disabled={profileSaveAsBusy || !saveAsProfileName.trim()} onclick={() => void onSubmitSaveAs()}>
-          {profileSaveAsBusy ? 'Saving' : 'Create'}
-        </button>
-      </div>
-    </div>
-  {/if}
-
-  {#if renameProfileId}
-    <div class="dm-profile-rename">
-      <label>
-        <span>Name</span>
-        <input
-          bind:value={renameProfileName}
-          disabled={profileRenameBusy}
-          maxlength="80"
-          spellcheck="false"
-          onkeydown={onRenameKeydown}
-          aria-label="Profile name"
-        />
-      </label>
-      <div class="dm-action-row">
-        <button class="dm-mini-button" type="button" disabled={profileRenameBusy} onclick={onCancelRename}>Cancel</button>
-        <button class="dm-mini-button primary" type="button" disabled={profileRenameBusy || !renameProfileName.trim()} onclick={() => void onSubmitRename()}>
-          {profileRenameBusy ? 'Saving' : 'Apply'}
-        </button>
-      </div>
-    </div>
-  {/if}
-</div>
diff --git a/web/src/styles/app.css b/web/src/styles/app.css
index 2d05afd..46c3d9d 100644
--- a/web/src/styles/app.css
+++ b/web/src/styles/app.css
@@ -4,11 +4,8 @@
 @import "./shell-v2.css";
 @import "./status.css";
 @import "./tuning.css";
-@import "./games.css";
 @import "./controllers.css";
-@import "./games-catalog.css";
 @import "./feedback.css";
-@import "./workspace.css";
 @import "./button-mapping.css";
 @import "./haptics.css";
 @import "./dialogs.css";
diff --git a/web/src/styles/base.css b/web/src/styles/base.css
index bde1665..2839147 100644
--- a/web/src/styles/base.css
+++ b/web/src/styles/base.css
@@ -7,13 +7,11 @@ body,
 #app {
   width: 100%;
   min-width: 320px;
-  height: 100%;
   margin: 0;
 }
 
 body {
-  overflow: hidden;
-  background: var(--obsidian);
+  background: var(--bg);
 }
 
 button,
@@ -34,13 +32,12 @@ input:disabled {
 }
 
 code,
-.dm-system-readout,
 .dm-module-title code,
 .dm-slider-row code,
 .dm-fader-value,
 .dm-led-row code,
 .dm-effects-count code,
 .dm-curve-tooltip {
-  font-family: "JetBrains Mono", "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--font-mono);
   font-variant-numeric: tabular-nums;
 }
diff --git a/web/src/styles/button-mapping.css b/web/src/styles/button-mapping.css
index 14b1aba..8b22273 100644
--- a/web/src/styles/button-mapping.css
+++ b/web/src/styles/button-mapping.css
@@ -1,6 +1,5 @@
 @import "./button-mapping/base.css";
 @import "./button-mapping/mirror.css";
-@import "./button-mapping/stage.css";
 @import "./button-mapping/editor.css";
 @import "./button-mapping/responsive.css";
 @import "./button-mapping/layout.css";
diff --git a/web/src/styles/button-mapping/base.css b/web/src/styles/button-mapping/base.css
index a4f3c23..553766c 100644
--- a/web/src/styles/button-mapping/base.css
+++ b/web/src/styles/button-mapping/base.css
@@ -208,3 +208,9 @@
   background: rgba(255, 255, 255, 0.04);
   color: var(--ink-muted);
 }
+
+/* Hides the button-mapping workspace while it stays mounted for fast
+   re-entry. Moved from the retired workspace.css. */
+.dm-view-hidden {
+  display: none !important;
+}
diff --git a/web/src/styles/button-mapping/stage.css b/web/src/styles/button-mapping/stage.css
deleted file mode 100644
index 6ee992f..0000000
--- a/web/src/styles/button-mapping/stage.css
+++ /dev/null
@@ -1,311 +0,0 @@
-.dm-mapping-stage {
-  position: relative;
-  align-self: center;
-  flex: 0 0 auto;
-  width: 100%;
-  max-width: 1400px;
-  aspect-ratio: 2 / 1;
-  contain: layout paint;
-  isolation: isolate;
-}
-
-.dm-mapping-stage::before {
-  content: "";
-  position: absolute;
-  inset: 6% 8%;
-  background:
-    radial-gradient(ellipse at 50% 56%, rgba(0, 112, 204, 0.18), rgba(0, 112, 204, 0.02) 50%, transparent 70%);
-  filter: blur(36px);
-  opacity: 0.85;
-  z-index: 0;
-  pointer-events: none;
-}
-
-/* The SVG fills the stage and draws leader lines. */
-.dm-mapping-lines {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 1;
-  overflow: visible;
-}
-
-.dm-mapping-lines line {
-  stroke: rgba(226, 232, 240, 0.22);
-  stroke-width: 0.16;
-  stroke-linecap: round;
-  vector-effect: non-scaling-stroke;
-  transition: stroke 180ms ease-out, stroke-width 180ms ease-out, filter 220ms ease-out;
-}
-
-.dm-mapping-lines line.focused {
-  stroke: rgba(0, 112, 204, 0.85);
-  stroke-width: 0.32;
-  filter: drop-shadow(0 0 4px rgba(0, 112, 204, 0.55));
-}
-
-.dm-mapping-lines line.active {
-  stroke: rgba(0, 112, 204, 1);
-  stroke-width: 0.4;
-  filter: drop-shadow(0 0 6px rgba(0, 112, 204, 0.85));
-}
-
-/* === Centered controller artwork (the centerpiece) ================ */
-.dm-mapping-figure {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  /* 54% of stage width — anchor coords in mappingChipLayout assume this. */
-  width: 54%;
-  aspect-ratio: 1.5;
-  transform: translate(-50%, -50%);
-  z-index: 2;
-  pointer-events: none;
-}
-
-.dm-mapping-figure .dm-controller-glow {
-  position: absolute;
-  inset: 4% 2% 0%;
-  background: radial-gradient(ellipse at 50% 50%, rgba(0, 112, 204, 0.28), transparent 60%);
-  filter: blur(44px);
-  opacity: 0.85;
-  pointer-events: none;
-  z-index: 0;
-}
-
-.dm-mapping-figure .dm-controller-base,
-.dm-mapping-figure .dm-controller-focus {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  pointer-events: none;
-}
-
-.dm-mapping-figure .dm-controller-base {
-  z-index: 1;
-  opacity: 0.5;
-  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.55));
-}
-
-.dm-mapping-figure .dm-controller-focus {
-  z-index: 2;
-  opacity: 0;
-  filter:
-    drop-shadow(0 0 6px rgba(0, 112, 204, 0.65))
-    drop-shadow(0 0 22px rgba(0, 112, 204, 0.45));
-  transition: opacity 220ms ease-out;
-}
-
-.dm-mapping-figure .dm-controller-focus.visible {
-  opacity: 1;
-}
-
-
-/* === Pill chips at the stage edges ================================= */
-/* The icon is a 38px disc; --chip-half-icon centers it on chip-x/y. */
-.dm-mapping-chip {
-  --chip-icon: 38px;
-  --chip-half-icon: 19px;
-  position: absolute;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0;
-  border: 0;
-  color: var(--ink);
-  background: transparent;
-  z-index: 3;
-  transition: transform 180ms ease-out, filter 180ms ease-out;
-}
-
-/* Left/right chips: icon center sits at chip-x, text flows toward the
-   page edge (away from the controller). */
-.dm-mapping-chip.left {
-  right: calc(100% - var(--chip-x) - var(--chip-half-icon));
-  top: var(--chip-y);
-  flex-direction: row-reverse;
-  text-align: right;
-  transform: translateY(-50%);
-}
-
-.dm-mapping-chip.right {
-  left: calc(var(--chip-x) - var(--chip-half-icon));
-  top: var(--chip-y);
-  flex-direction: row;
-  text-align: left;
-  transform: translateY(-50%);
-}
-
-/* Top/bottom chips: icon center sits at chip-y, text flows toward the
-   nearest page edge. */
-.dm-mapping-chip.top {
-  left: var(--chip-x);
-  bottom: calc(100% - var(--chip-y) - var(--chip-half-icon));
-  flex-direction: column-reverse;
-  text-align: center;
-  transform: translateX(-50%);
-  gap: 4px;
-}
-
-.dm-mapping-chip.bottom {
-  left: var(--chip-x);
-  top: calc(var(--chip-y) - var(--chip-half-icon));
-  flex-direction: column;
-  text-align: center;
-  transform: translateX(-50%);
-  gap: 4px;
-}
-
-.dm-mapping-chip-icon {
-  position: relative;
-  display: grid;
-  place-items: center;
-  flex: 0 0 auto;
-  width: 38px;
-  height: 38px;
-  border-radius: 999px;
-  background:
-    radial-gradient(circle at 50% 35%, rgba(40, 40, 48, 0.92), rgba(14, 14, 18, 0.92)),
-    rgba(10, 10, 12, 0.92);
-  box-shadow:
-    inset 0 0 0 1px rgba(226, 232, 240, 0.16),
-    0 6px 18px rgba(0, 0, 0, 0.5);
-  transition:
-    background 180ms ease-out,
-    box-shadow 220ms ease-out,
-    transform 180ms ease-out;
-}
-
-.dm-mapping-chip-icon img {
-  width: 22px;
-  height: 22px;
-  object-fit: contain;
-  filter: brightness(1.05) drop-shadow(0 0 4px rgba(0, 112, 204, 0.28));
-  opacity: 0.92;
-  transition: filter 180ms ease-out, opacity 180ms ease-out;
-}
-
-.dm-mapping-chip-glyph {
-  color: #FFFFFF;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.04em;
-}
-
-.dm-mapping-chip-text {
-  display: grid;
-  align-content: center;
-  gap: 2px;
-  min-width: 0;
-  /* Reserve enough room for typical binding labels ("Right Bumper",
-     "Left Trigger") without truncation; cap so a stray long label wraps
-     instead of stretching the rail into the controller. */
-  width: clamp(86px, 9vw, 132px);
-  padding: 2px 4px;
-}
-
-.dm-mapping-chip.left .dm-mapping-chip-text {
-  text-align: right;
-}
-
-.dm-mapping-chip.right .dm-mapping-chip-text {
-  text-align: left;
-}
-
-.dm-mapping-chip.top .dm-mapping-chip-text,
-.dm-mapping-chip.bottom .dm-mapping-chip-text {
-  /* 6 trackpad chips share the top row; keep text narrow but wide enough
-     for "Unassigned" to sit on a single line. */
-  width: clamp(64px, 6.4vw, 92px);
-  text-align: center;
-}
-
-/* Top/bottom chips always render binding on a single line — vertical room is
-   scarce above and below the controller and a wrap would push neighbouring
-   chips into the figure. */
-.dm-mapping-chip.top .dm-mapping-chip-binding,
-.dm-mapping-chip.bottom .dm-mapping-chip-binding {
-  -webkit-line-clamp: 1;
-  white-space: nowrap;
-  word-break: normal;
-  hyphens: none;
-}
-
-.dm-mapping-chip-binding {
-  /* Allow 2-line wrap before clipping with ellipsis. */
-  display: -webkit-box;
-  overflow: hidden;
-  color: #FFFFFF;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1.2;
-  letter-spacing: 0.01em;
-  word-break: break-word;
-  hyphens: auto;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-}
-
-.dm-mapping-chip:hover,
-.dm-mapping-chip:focus-visible {
-  outline: none;
-}
-
-.dm-mapping-chip:hover .dm-mapping-chip-icon,
-.dm-mapping-chip:focus-visible .dm-mapping-chip-icon {
-  background:
-    radial-gradient(circle at 50% 35%, rgba(0, 112, 204, 0.34), rgba(8, 30, 56, 0.92)),
-    rgba(10, 10, 12, 0.92);
-  box-shadow:
-    inset 0 0 0 1px rgba(0, 112, 204, 0.72),
-    0 0 18px rgba(0, 112, 204, 0.35),
-    0 8px 22px rgba(0, 0, 0, 0.5);
-}
-
-.dm-mapping-chip:hover .dm-mapping-chip-icon img,
-.dm-mapping-chip:focus-visible .dm-mapping-chip-icon img {
-  opacity: 1;
-  filter: brightness(1.18) drop-shadow(0 0 8px rgba(0, 112, 204, 0.65));
-}
-
-.dm-mapping-chip.focused .dm-mapping-chip-icon {
-  background:
-    radial-gradient(circle at 50% 35%, rgba(0, 112, 204, 0.34), rgba(8, 30, 56, 0.92)),
-    rgba(10, 10, 12, 0.92);
-  box-shadow:
-    inset 0 0 0 1px rgba(0, 112, 204, 0.72),
-    0 0 22px rgba(0, 112, 204, 0.35);
-}
-
-.dm-mapping-chip.active .dm-mapping-chip-icon {
-  background:
-    radial-gradient(circle at 50% 35%, rgba(0, 112, 204, 0.52), rgba(0, 60, 124, 0.92)),
-    rgba(10, 10, 12, 0.96);
-  box-shadow:
-    inset 0 0 0 1px rgba(0, 112, 204, 1),
-    0 0 24px rgba(0, 112, 204, 0.55),
-    0 10px 28px rgba(0, 0, 0, 0.55);
-}
-
-.dm-mapping-chip.active .dm-mapping-chip-icon img {
-  opacity: 1;
-  filter: brightness(1.25) drop-shadow(0 0 10px rgba(0, 112, 204, 0.85));
-}
-
-.dm-mapping-chip.active .dm-mapping-chip-binding {
-  color: var(--accent-text);
-}
-
-.dm-mapping-chip.edge .dm-mapping-chip-icon {
-  box-shadow:
-    inset 0 0 0 1px rgba(0, 112, 204, 0.38),
-    0 6px 18px rgba(0, 0, 0, 0.5);
-}
-
-/* === Tray (bottom inline editor) — no card, just controls ========= */
diff --git a/web/src/styles/controllers.css b/web/src/styles/controllers.css
index e4132a8..07704f4 100644
--- a/web/src/styles/controllers.css
+++ b/web/src/styles/controllers.css
@@ -374,3 +374,254 @@
   font-size: 11px;
   color: var(--ink-muted);
 }
+
+/* Controller card (rendered in the Controller details chooser).
+   Moved from the retired games.css; HUD-era alias tokens translated to the
+   calm-console tokens. */
+.dm-controller-card {
+  display: grid;
+  justify-items: center;
+  gap: 8px;
+  min-height: 0;
+  padding: 12px 12px 14px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: var(--radius-m);
+  color: var(--ink);
+  background: var(--surface);
+  cursor: pointer;
+  text-align: left;
+  transition:
+    border-color var(--speed) var(--ease),
+    background-color var(--speed) var(--ease),
+    box-shadow var(--speed) var(--ease);
+}
+
+.dm-controller-card:hover,
+.dm-controller-card.active {
+  border-color: var(--accent-outline);
+  background-color: var(--accent-tint);
+}
+
+.dm-controller-card:focus-visible,
+.dm-controller-select-zone:focus-visible,
+.dm-controller-rename-button:focus-visible,
+.dm-controller-expand-button:focus-visible,
+.dm-controller-rename-actions button:focus-visible {
+  outline: 2px solid var(--accent-bright);
+  outline-offset: 2px;
+}
+
+.dm-controller-card.disconnected {
+  opacity: 0.62;
+}
+
+.dm-controller-select-zone {
+  display: grid;
+  justify-items: center;
+  gap: 12px;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  text-align: center;
+}
+
+.dm-controller-card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-width: 0;
+}
+
+.dm-controller-card-top code {
+  color: var(--ink);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.dm-battery-pill.compact {
+  font-size: 11px;
+}
+
+.dm-controller-glyph {
+  flex: 0 0 auto;
+  color: var(--ink);
+  background: currentColor;
+  mask: url("/dualsense-controller.svg") center / contain no-repeat;
+  -webkit-mask: url("/dualsense-controller.svg") center / contain no-repeat;
+}
+
+.dm-controller-glyph.controller-card {
+  width: min(140px, 78%);
+  height: 80px;
+  margin: 2px 0 0;
+  opacity: 0.95;
+}
+
+.dm-controller-copy {
+  display: grid;
+  justify-items: center;
+  gap: 5px;
+  min-width: 0;
+  text-align: center;
+}
+
+.dm-controller-copy strong {
+  overflow-wrap: break-word;
+  line-height: 1.18;
+  font-size: 15px;
+}
+
+.dm-controller-copy small {
+  overflow-wrap: break-word;
+  line-height: 1.3;
+  color: var(--ink-muted);
+}
+
+.dm-controller-copy .dm-controller-id {
+  margin-top: 2px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.02em;
+  opacity: 0.78;
+}
+
+.dm-controller-capabilities {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 5px;
+  margin-top: 7px;
+}
+
+.dm-controller-capabilities em {
+  padding: 3px 6px;
+  border-radius: 4px;
+  color: var(--ink);
+  background: var(--surface-raised);
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 750;
+  line-height: 1;
+}
+
+.dm-controller-capabilities.expanded {
+  justify-content: flex-start;
+  margin-top: 4px;
+}
+
+.dm-controller-rename-button,
+.dm-controller-expand-button,
+.dm-controller-rename-actions button {
+  min-height: 26px;
+  padding: 0 9px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: var(--radius-s);
+  color: var(--ink);
+  background: var(--surface-raised);
+  font-size: 11px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.dm-controller-rename-button:hover,
+.dm-controller-expand-button:hover,
+.dm-controller-rename-actions button:hover {
+  border-color: var(--accent-outline);
+  background: var(--accent-tint);
+}
+
+.dm-controller-card-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 6px;
+}
+
+.dm-controller-details {
+  width: 100%;
+  margin-top: 6px;
+  padding: 12px;
+  border-top: 1px solid var(--hairline);
+  background: var(--bg-rail);
+  border-radius: 0 0 var(--radius-s) var(--radius-s);
+  text-align: left;
+}
+
+.dm-controller-details-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px 14px;
+  margin: 0;
+}
+
+.dm-controller-details-grid > div {
+  min-width: 0;
+}
+
+.dm-controller-details-grid > div.wide {
+  grid-column: 1 / -1;
+}
+
+.dm-controller-details-grid dt {
+  margin: 0 0 2px;
+  color: var(--ink-muted);
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.dm-controller-details-grid dd {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.35;
+  overflow-wrap: break-word;
+}
+
+.dm-controller-details-grid dd.mono {
+  color: var(--ink);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  overflow-wrap: anywhere;
+}
+
+.dm-controller-rename-input {
+  width: min(240px, 100%);
+  height: 34px;
+  border: 1px solid var(--accent-outline);
+  border-radius: var(--radius-s);
+  color: var(--ink);
+  background: var(--surface-raised);
+  font-size: 13px;
+  font-weight: 800;
+  outline: none;
+  padding: 0 10px;
+  text-align: center;
+}
+
+.dm-controller-rename-wrap {
+  display: grid;
+  justify-items: center;
+  gap: 7px;
+  width: 100%;
+}
+
+.dm-controller-rename-actions {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+}
+
+@media (max-width: 720px) {
+  .dm-controller-card {
+    min-height: 220px;
+  }
+}
diff --git a/web/src/styles/dialogs.css b/web/src/styles/dialogs.css
index 3db70d7..18ed5d8 100644
--- a/web/src/styles/dialogs.css
+++ b/web/src/styles/dialogs.css
@@ -87,7 +87,7 @@
   height: 30px;
   border: 0;
   border-radius: 4px;
-  color: var(--haptic);
+  color: var(--ink);
   background: rgba(10, 10, 12, 0.78);
   box-shadow: inset 0 0 0 1px rgba(113, 113, 122, 0.22);
   font-family: "JetBrains Mono", monospace;
@@ -123,7 +123,7 @@
 }
 
 .ops-state span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 13px;
 }
 
diff --git a/web/src/styles/feedback.css b/web/src/styles/feedback.css
index 657edcc..9d9aba9 100644
--- a/web/src/styles/feedback.css
+++ b/web/src/styles/feedback.css
@@ -6,8 +6,8 @@
   width: min(1380px, 100%);
   margin: 0 auto 10px;
   padding: 10px 12px;
-  border-left: 2px solid var(--actuation);
-  color: var(--haptic);
+  border-left: 2px solid var(--accent);
+  color: var(--ink);
   background: rgba(18, 18, 20, 0.92);
   box-shadow:
     inset 0 1px 0 rgba(226, 232, 240, 0.055),
@@ -21,7 +21,7 @@
 }
 
 .dm-support-copy span {
-  color: var(--actuation);
+  color: var(--accent);
   font-size: 10px;
   font-weight: 850;
   letter-spacing: 0.12em;
@@ -39,7 +39,7 @@
 .dm-support-copy p,
 .dm-support-message {
   margin: 0;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 12px;
   font-weight: 600;
   line-height: 1.35;
@@ -99,17 +99,17 @@
 }
 
 .dm-toast.success {
-  --toast-accent: #22C55E;
-  --toast-bg: rgba(34, 197, 94, 0.18);
+  --toast-accent: var(--ok);
+  --toast-bg: var(--ok-tint);
 }
 
 .dm-toast.info {
-  --toast-accent: var(--actuation);
+  --toast-accent: var(--accent);
   --toast-bg: rgba(0, 112, 204, 0.18);
 }
 
 .dm-toast.error {
-  --toast-accent: var(--overdrive);
+  --toast-accent: var(--danger);
   --toast-bg: rgba(240, 62, 62, 0.2);
 }
 
@@ -128,3 +128,60 @@
   line-height: 1.35;
   overflow-wrap: anywhere;
 }
+
+/* Inline notice banners (partial-data + update notices in the main column).
+   Moved from the retired games-catalog.css. */
+.dm-warning {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  max-width: 1380px;
+  margin: 0 auto 10px;
+  padding: 8px 12px;
+  border: 0;
+  border-left: 2px solid var(--danger);
+  color: #FECACA;
+  background: rgba(240, 62, 62, 0.08);
+  font-size: 12px;
+}
+
+.dm-warning button {
+  border: 1px solid rgba(254, 202, 202, 0.34);
+  border-radius: 4px;
+  color: #FECACA;
+  background: transparent;
+  font-size: 11px;
+}
+
+.dm-warning.update {
+  border-left-color: var(--accent);
+  color: #D8ECFF;
+  background: var(--accent-tint);
+}
+
+.dm-warning-actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.dm-warning a {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 24px;
+  padding: 0 8px;
+  border: 1px solid rgba(216, 236, 255, 0.32);
+  border-radius: 4px;
+  color: #D8ECFF;
+  font-size: 11px;
+  font-weight: 750;
+  text-decoration: none;
+}
+
+.dm-warning.update button {
+  border-color: rgba(216, 236, 255, 0.32);
+  color: #D8ECFF;
+}
diff --git a/web/src/styles/games-catalog.css b/web/src/styles/games-catalog.css
deleted file mode 100644
index f0f4155..0000000
--- a/web/src/styles/games-catalog.css
+++ /dev/null
@@ -1,301 +0,0 @@
-.dm-scope-strip button {
-  display: inline-grid;
-  grid-template-columns: 30px minmax(0, max-content) auto;
-  align-items: center;
-  gap: 10px;
-  min-height: 0;
-  width: max-content;
-  max-width: 100%;
-  padding: 8px 12px;
-}
-
-.dm-scope-strip {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 6px;
-}
-
-.dm-scope-chip {
-  display: inline-flex;
-  align-items: baseline;
-  flex-wrap: wrap;
-  gap: 4px 12px;
-  min-width: 0;
-}
-
-.dm-scope-chip .dm-scope-chip-label {
-  display: inline;
-  margin: 0;
-  color: var(--tungsten);
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.04em;
-  line-height: 1;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-strong.dm-scope-chip-value {
-  display: inline;
-  margin: 0;
-  overflow: visible;
-  color: var(--actuation);
-  font-family: "Space Grotesk", "Inter Tight", Inter, sans-serif;
-  font-size: 15px;
-  font-weight: 700;
-  line-height: 1;
-  letter-spacing: 0.01em;
-  text-overflow: clip;
-  white-space: nowrap;
-}
-
-small.dm-scope-chip-detail {
-  display: inline;
-  margin: 0;
-  overflow: visible;
-  color: var(--tungsten);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.2;
-  letter-spacing: 0.01em;
-  text-overflow: clip;
-  text-transform: none;
-  white-space: normal;
-}
-
-.dm-game-card {
-  position: relative;
-  display: grid;
-  grid-template-columns: 220px minmax(0, 1fr);
-  align-items: center;
-  gap: 16px;
-  min-height: 180px;
-  overflow: hidden;
-  padding: 14px 16px 14px 14px;
-}
-
-.dm-game-card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  opacity: 0.34;
-  background-image: var(--game-hero);
-  background-size: cover;
-  background-position: center;
-  filter: saturate(1.08);
-}
-
-.dm-game-card::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background:
-    linear-gradient(180deg, rgba(10, 10, 12, 0.16), rgba(10, 10, 12, 0.72) 58%, rgba(10, 10, 12, 0.92)),
-    linear-gradient(90deg, rgba(10, 10, 12, 0.86), rgba(10, 10, 12, 0.36));
-}
-
-.dm-game-card > * {
-  position: relative;
-  z-index: 1;
-}
-
-.dm-game-grid > button.running {
-  border-color: rgba(34, 197, 94, 0.38);
-}
-
-.dm-game-grid > button.custom .dm-game-card-media code {
-  color: var(--haptic);
-}
-
-.dm-game-card-add {
-  grid-template-columns: 110px minmax(0, 1fr) !important;
-  align-items: center;
-  border-style: dashed !important;
-  border-color: rgba(0, 112, 204, 0.45) !important;
-  background:
-    linear-gradient(180deg, rgba(0, 112, 204, 0.08), rgba(0, 112, 204, 0.02)),
-    rgba(18, 18, 20, 0.5) !important;
-}
-
-.dm-game-card-add::before,
-.dm-game-card-add::after {
-  display: none;
-}
-
-.dm-game-card-add:hover {
-  border-color: rgba(0, 112, 204, 0.78) !important;
-  background: rgba(0, 112, 204, 0.16) !important;
-}
-
-.dm-add-game-icon {
-  display: grid;
-  place-items: center;
-  width: 96px;
-  height: 96px;
-  border-radius: 50%;
-  color: var(--actuation);
-  background: rgba(0, 112, 204, 0.12);
-  font-family: "Space Grotesk", "Inter Tight", Inter, sans-serif;
-  font-size: 48px;
-  font-weight: 300;
-  line-height: 1;
-}
-
-.dm-game-card-add .dm-game-copy small {
-  color: var(--tungsten);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  line-height: 1.4;
-  white-space: normal;
-  text-overflow: clip;
-  overflow: visible;
-  text-transform: none;
-}
-
-.dm-game-card-media {
-  position: relative;
-  display: grid;
-  align-content: end;
-  gap: 8px;
-  min-width: 0;
-}
-
-.dm-game-card-media img,
-.dm-game-art-fallback {
-  width: 220px;
-  height: 150px;
-  border-radius: 6px;
-  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
-  grid-column: 1;
-  grid-row: 1;
-}
-
-.dm-game-card-media img {
-  position: relative;
-  z-index: 1;
-  object-fit: cover;
-  opacity: 0.92;
-}
-
-.dm-game-art-fallback {
-  display: grid;
-  place-items: center;
-  overflow: hidden;
-  padding: 8px;
-  color: #FFFFFF;
-  background:
-    radial-gradient(circle at 32% 28%, rgba(0, 112, 204, 0.22), transparent 72%),
-    rgba(18, 18, 20, 0.62);
-}
-
-.dm-game-art-fallback svg {
-  max-width: 100%;
-  max-height: 100%;
-  width: auto;
-  height: 100%;
-}
-
-.dm-game-copy {
-  display: grid;
-  gap: 9px;
-  min-width: 0;
-}
-
-.dm-game-card-media code {
-  justify-self: start;
-  color: var(--actuation);
-  font-family: "JetBrains Mono", monospace;
-  font-size: 10px;
-  font-weight: 800;
-}
-
-.dm-game-grid > button.running code {
-  color: var(--ready);
-}
-
-.dm-game-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  min-width: 0;
-}
-
-.dm-game-meta em {
-  padding: 4px 7px;
-  border-radius: 4px;
-  color: var(--haptic);
-  background: rgba(226, 232, 240, 0.075);
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 750;
-  line-height: 1;
-}
-
-.dm-empty-choice {
-  display: grid;
-  align-content: center;
-  gap: 6px;
-  min-height: 90px;
-  padding: 16px;
-}
-
-.dm-empty-choice.wide {
-  min-height: 150px;
-}
-
-.dm-warning {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  max-width: 1380px;
-  margin: 0 auto 10px;
-  padding: 8px 12px;
-  border: 0;
-  border-left: 2px solid var(--overdrive);
-  color: #FECACA;
-  background: rgba(240, 62, 62, 0.08);
-  font-size: 12px;
-}
-
-.dm-warning button {
-  border: 1px solid rgba(254, 202, 202, 0.34);
-  border-radius: 4px;
-  color: #FECACA;
-  background: transparent;
-  font-size: 11px;
-}
-
-.dm-warning.update {
-  border-left-color: var(--actuation);
-  color: #D8ECFF;
-  background: rgba(0, 112, 204, 0.1);
-}
-
-.dm-warning-actions {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  gap: 8px;
-}
-
-.dm-warning a {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  min-height: 24px;
-  padding: 0 8px;
-  border: 1px solid rgba(216, 236, 255, 0.32);
-  border-radius: 4px;
-  color: #D8ECFF;
-  font-size: 11px;
-  font-weight: 750;
-  text-decoration: none;
-}
-
-.dm-warning.update button {
-  border-color: rgba(216, 236, 255, 0.32);
-  color: #D8ECFF;
-}
diff --git a/web/src/styles/games.css b/web/src/styles/games.css
deleted file mode 100644
index 51d954e..0000000
--- a/web/src/styles/games.css
+++ /dev/null
@@ -1,524 +0,0 @@
-.dm-games-page {
-  display: grid;
-  grid-template-columns: minmax(0, 1220px);
-  justify-content: center;
-  gap: clamp(16px, 2vw, 26px);
-  flex: 1 1 0;
-  width: min(1240px, 100%);
-  min-height: 0;
-  margin: 18px auto 0;
-}
-
-.dm-games-column {
-  display: grid;
-  align-content: start;
-  gap: 12px;
-  min-width: 0;
-}
-
-.dm-games-column.wide {
-  min-width: 0;
-}
-
-.dm-games-head {
-  display: grid;
-  gap: 5px;
-  min-width: 0;
-}
-
-.dm-games-head span,
-.dm-controller-choice small,
-.dm-game-copy small,
-.dm-empty-choice span {
-  color: var(--tungsten);
-  font-size: 11px;
-  font-weight: 800;
-  line-height: 1.2;
-  text-transform: uppercase;
-}
-
-.dm-games-head h2 {
-  margin: 0;
-  color: #FFFFFF;
-  font-family: "Space Grotesk", "Inter Tight", Inter, sans-serif;
-  font-size: clamp(24px, 2.4vw, 34px);
-  font-weight: 700;
-  line-height: 1;
-}
-
-.dm-controller-choice-list,
-.dm-profile-target-strip,
-.dm-scope-strip,
-.dm-game-grid {
-  display: grid;
-  gap: 10px;
-  min-width: 0;
-}
-
-.dm-profile-target-strip {
-  grid-template-columns: minmax(220px, 1fr) repeat(auto-fit, minmax(96px, max-content));
-  align-items: center;
-  padding: 12px;
-  border: 1px solid rgba(113, 113, 122, 0.24);
-  border-radius: 6px;
-  background: rgba(18, 18, 20, 0.58);
-  box-shadow: inset 0 1px 0 rgba(226, 232, 240, 0.045);
-}
-
-.dm-profile-target-strip div {
-  display: grid;
-  gap: 3px;
-  min-width: 0;
-}
-
-.dm-profile-target-strip span,
-.dm-profile-target-strip small {
-  color: var(--tungsten);
-  font-size: 10px;
-  font-weight: 800;
-  line-height: 1.15;
-  text-transform: uppercase;
-}
-
-.dm-profile-target-strip strong {
-  overflow: hidden;
-  color: #FFFFFF;
-  font-size: 14px;
-  font-weight: 760;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-profile-target-strip small {
-  font-size: 11px;
-  font-weight: 650;
-  text-transform: none;
-}
-
-.dm-profile-target-strip button {
-  min-height: 30px;
-  padding: 0 11px;
-  border: 1px solid rgba(113, 113, 122, 0.34);
-  border-radius: 5px;
-  color: rgba(226, 232, 240, 0.82);
-  background: rgba(10, 10, 12, 0.42);
-  font-size: 11px;
-  font-weight: 800;
-}
-
-.dm-profile-target-strip button:hover,
-.dm-profile-target-strip button.active,
-.dm-profile-target-strip button:focus-visible {
-  border-color: rgba(0, 112, 204, 0.72);
-  color: #FFFFFF;
-  background: rgba(0, 112, 204, 0.16);
-  outline: none;
-}
-
-.dm-game-grid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-@media (max-width: 1100px) {
-  .dm-game-grid {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-
-.dm-controller-card,
-.dm-scope-strip button,
-.dm-game-grid > button,
-.dm-empty-choice {
-  border: 1px solid rgba(113, 113, 122, 0.22);
-  border-radius: 6px;
-  color: var(--haptic);
-  background:
-    linear-gradient(180deg, rgba(226, 232, 240, 0.035), rgba(226, 232, 240, 0.012)),
-    rgba(18, 18, 20, 0.74);
-  box-shadow: inset 0 1px 0 rgba(226, 232, 240, 0.055);
-  cursor: pointer;
-  text-align: left;
-  transition:
-    border-color 150ms ease-out,
-    background-color 150ms ease-out,
-    box-shadow 150ms ease-out,
-    transform 150ms ease-out;
-}
-
-.dm-controller-card {
-  display: grid;
-  justify-items: center;
-  gap: 8px;
-  min-height: 0;
-  padding: 12px 12px 14px;
-}
-
-.dm-edge-slots {
-  display: grid;
-  gap: 10px;
-  padding: 12px;
-  border: 1px solid rgba(113, 113, 122, 0.26);
-  border-radius: 6px;
-  background:
-    linear-gradient(180deg, rgba(226, 232, 240, 0.035), rgba(226, 232, 240, 0.012)),
-    rgba(14, 15, 18, 0.82);
-  box-shadow: inset 0 1px 0 rgba(226, 232, 240, 0.05);
-}
-
-.dm-edge-slots-head,
-.dm-edge-slot-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  min-width: 0;
-}
-
-.dm-edge-slots-head > div,
-.dm-edge-slot-row > div,
-.dm-edge-slot-copy {
-  display: grid;
-  gap: 3px;
-  min-width: 0;
-}
-
-.dm-edge-slots-head span,
-.dm-edge-slot-copy span,
-.dm-edge-slot-copy small {
-  color: var(--tungsten);
-  font-size: 10px;
-  font-weight: 800;
-  line-height: 1.15;
-  text-transform: uppercase;
-}
-
-.dm-edge-slots-head strong,
-.dm-edge-slot-copy strong {
-  min-width: 0;
-  overflow: hidden;
-  color: #FFFFFF;
-  font-size: 13px;
-  font-weight: 800;
-  line-height: 1.15;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-edge-slots-note {
-  margin: 0;
-  color: #A1A1AA;
-  font-size: 11px;
-  font-weight: 650;
-  line-height: 1.35;
-}
-
-.dm-edge-slots-note.error {
-  color: #FF6B6B;
-}
-
-.dm-edge-slot-list {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-}
-
-.dm-edge-slot-row {
-  min-height: 48px;
-  padding: 8px 0;
-  border-top: 1px solid rgba(113, 113, 122, 0.22);
-}
-
-.dm-edge-slot-row .dscc-tooltip.block {
-  flex: 1 1 auto;
-  width: auto;
-  min-width: 0;
-}
-
-.dm-edge-slot-row:first-child {
-  border-top: 0;
-}
-
-.dm-edge-slot-row.disabled {
-  opacity: 0.62;
-}
-
-.dm-controller-select-zone {
-  display: grid;
-  justify-items: center;
-  gap: 12px;
-  width: 100%;
-  min-width: 0;
-  padding: 0;
-  border: 0;
-  color: inherit;
-  background: transparent;
-  text-align: center;
-}
-
-.dm-controller-card-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  min-width: 0;
-}
-
-.dm-controller-card-top code {
-  color: #FFFFFF;
-  font-family: "JetBrains Mono", monospace;
-  font-size: 11px;
-  font-weight: 800;
-}
-
-.dm-battery-pill.compact {
-  font-size: 11px;
-}
-
-.dm-controller-glyph.controller-card {
-  width: min(140px, 78%);
-  height: 80px;
-  margin: 2px 0 0;
-  opacity: 0.95;
-}
-
-.dm-controller-copy {
-  display: grid;
-  justify-items: center;
-  gap: 5px;
-  min-width: 0;
-  text-align: center;
-}
-
-.dm-controller-capabilities {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 5px;
-  margin-top: 7px;
-}
-
-.dm-controller-capabilities em {
-  padding: 3px 6px;
-  border-radius: 4px;
-  color: var(--haptic);
-  background: rgba(226, 232, 240, 0.08);
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 750;
-  line-height: 1;
-}
-
-.dm-controller-rename-button,
-.dm-controller-expand-button,
-.dm-controller-rename-actions button {
-  min-height: 26px;
-  padding: 0 9px;
-  border: 1px solid rgba(113, 113, 122, 0.34);
-  border-radius: 5px;
-  color: var(--haptic);
-  background: rgba(10, 10, 12, 0.42);
-  font-size: 11px;
-  font-weight: 800;
-  cursor: pointer;
-}
-
-.dm-controller-rename-button:hover,
-.dm-controller-expand-button:hover,
-.dm-controller-rename-actions button:hover {
-  border-color: rgba(0, 112, 204, 0.62);
-  background: rgba(0, 112, 204, 0.14);
-}
-
-.dm-controller-card-actions {
-  display: inline-flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 6px;
-}
-
-.dm-controller-details {
-  width: 100%;
-  margin-top: 6px;
-  padding: 12px;
-  border-top: 1px solid rgba(113, 113, 122, 0.18);
-  background: rgba(10, 10, 12, 0.32);
-  border-radius: 0 0 6px 6px;
-  text-align: left;
-}
-
-.dm-controller-details-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px 14px;
-  margin: 0;
-}
-
-.dm-controller-details-grid > div {
-  min-width: 0;
-}
-
-.dm-controller-details-grid > div.wide {
-  grid-column: 1 / -1;
-}
-
-.dm-controller-details-grid dt {
-  margin: 0 0 2px;
-  color: var(--tungsten);
-  font-size: 10px;
-  font-weight: 800;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.dm-controller-details-grid dd {
-  margin: 0;
-  color: #FFFFFF;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1.35;
-  overflow-wrap: break-word;
-}
-
-.dm-controller-details-grid dd.mono {
-  color: var(--haptic);
-  font-family: "JetBrains Mono", "Space Mono", ui-monospace, monospace;
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  overflow-wrap: anywhere;
-}
-
-.dm-controller-capabilities.expanded {
-  justify-content: flex-start;
-  margin-top: 4px;
-}
-
-.dm-controller-rename-input {
-  width: min(240px, 100%);
-  height: 34px;
-  border: 1px solid rgba(0, 112, 204, 0.58);
-  border-radius: 6px;
-  color: #FFFFFF;
-  background: rgba(10, 10, 12, 0.82);
-  font-size: 13px;
-  font-weight: 800;
-  outline: none;
-  padding: 0 10px;
-  text-align: center;
-}
-
-.dm-controller-rename-wrap {
-  display: grid;
-  justify-items: center;
-  gap: 7px;
-  width: 100%;
-}
-
-.dm-controller-rename-actions {
-  display: flex;
-  justify-content: center;
-  gap: 6px;
-}
-
-.dm-controller-card:hover,
-.dm-controller-card.active,
-.dm-scope-strip button:hover,
-.dm-scope-strip button.active,
-.dm-game-grid > button:hover,
-.dm-game-grid > button.active {
-  border-color: rgba(0, 112, 204, 0.68);
-  background-color: rgba(0, 112, 204, 0.1);
-  box-shadow:
-    inset 0 1px 0 rgba(226, 232, 240, 0.07),
-    inset 0 0 0 1px rgba(0, 112, 204, 0.18),
-    0 14px 34px rgba(0, 0, 0, 0.26);
-}
-
-.dm-controller-card:focus-visible,
-.dm-controller-select-zone:focus-visible,
-.dm-controller-rename-button:focus-visible,
-.dm-controller-expand-button:focus-visible,
-.dm-controller-rename-actions button:focus-visible,
-.dm-scope-strip button:focus-visible,
-.dm-game-grid > button:focus-visible,
-.dm-input-path-actions button:focus-visible,
-.dm-mapping-action:focus-visible {
-  outline: 2px solid rgba(0, 112, 204, 0.72);
-  outline-offset: 2px;
-}
-
-.dm-controller-card.disconnected {
-  opacity: 0.62;
-}
-
-.dm-controller-glyph.small {
-  width: 38px;
-  height: 38px;
-}
-
-.dm-controller-choice-list strong,
-.dm-scope-strip strong,
-.dm-game-copy strong,
-.dm-empty-choice strong {
-  display: block;
-  overflow: hidden;
-  color: #FFFFFF;
-  font-size: 14px;
-  font-weight: 800;
-  line-height: 1.18;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-controller-choice-list small,
-.dm-scope-strip small,
-.dm-game-copy small {
-  display: block;
-  margin-top: 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-controller-copy strong {
-  overflow: visible;
-  overflow-wrap: break-word;
-  word-break: normal;
-  white-space: normal;
-  text-overflow: clip;
-  line-height: 1.18;
-  font-size: 15px;
-  letter-spacing: 0;
-  hyphens: none;
-}
-
-.dm-controller-copy small {
-  overflow-wrap: break-word;
-  word-break: normal;
-  white-space: normal;
-  text-overflow: clip;
-  line-height: 1.3;
-}
-
-.dm-controller-copy .dm-controller-id {
-  margin-top: 2px;
-  font-family: "JetBrains Mono", monospace;
-  font-size: 10px;
-  letter-spacing: 0.02em;
-  opacity: 0.78;
-}
-
-.dm-profile-controller-summary {
-  display: grid;
-  justify-items: center;
-  gap: 12px;
-  padding: 14px;
-  border: 1px solid rgba(113, 113, 122, 0.26);
-  border-radius: 6px;
-  background:
-    linear-gradient(180deg, rgba(226, 232, 240, 0.035), rgba(226, 232, 240, 0.012)),
-    rgba(14, 15, 18, 0.82);
-  box-shadow: inset 0 1px 0 rgba(226, 232, 240, 0.05);
-  text-align: center;
-}
diff --git a/web/src/styles/haptics.css b/web/src/styles/haptics.css
index cb34bb4..cfb96f3 100644
--- a/web/src/styles/haptics.css
+++ b/web/src/styles/haptics.css
@@ -1,4 +1,3 @@
 @import "./haptics/routing.css";
 @import "./haptics/curves.css";
 @import "./haptics/controls.css";
-@import "./haptics/profile-console.css";
diff --git a/web/src/styles/haptics/controls.css b/web/src/styles/haptics/controls.css
index 784c8e9..aa5b8c8 100644
--- a/web/src/styles/haptics/controls.css
+++ b/web/src/styles/haptics/controls.css
@@ -7,30 +7,27 @@
   padding-top: 4px;
 }
 
-.dm-parameter-strip label,
-.dm-profile-line label {
+.dm-parameter-strip label {
   display: grid;
   gap: 7px;
   min-width: 0;
 }
 
-.dm-parameter-strip select,
-.dm-profile-line select {
+.dm-parameter-strip select {
   width: 100%;
   min-width: 0;
   height: 34px;
   border: 0;
   border-radius: 5px;
-  color: var(--haptic);
+  color: var(--ink);
   background: rgba(10, 10, 12, 0.78);
   box-shadow: inset 0 0 0 1px rgba(113, 113, 122, 0.2);
   font-size: 12px;
   outline: none;
 }
 
-.dm-parameter-strip select:focus,
-.dm-profile-line select:focus {
-  box-shadow: inset 0 0 0 1px var(--actuation), 0 0 0 2px rgba(0, 112, 204, 0.16);
+.dm-parameter-strip select:focus {
+  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 2px rgba(0, 112, 204, 0.16);
 }
 
 .dm-led-controls {
@@ -57,7 +54,7 @@
 
 .dm-led-row code {
   width: 32px;
-  color: var(--haptic);
+  color: var(--ink);
   font-size: 10px;
   text-align: right;
 }
@@ -84,9 +81,9 @@
   position: absolute;
   inset: 4px;
   border-radius: 999px;
-  background: var(--lb-color, var(--actuation));
+  background: var(--lb-color, var(--accent));
   opacity: var(--lb-alpha, 1);
-  box-shadow: 0 0 16px color-mix(in srgb, var(--lb-color, var(--actuation)) 70%, transparent);
+  box-shadow: 0 0 16px color-mix(in srgb, var(--lb-color, var(--accent)) 70%, transparent);
 }
 
 .dm-mini-range {
@@ -115,7 +112,7 @@
   width: 10px;
   height: 10px;
   border-radius: 999px;
-  background: var(--tungsten);
+  background: var(--ink-muted);
   transition:
     transform 150ms ease-out,
     background 150ms ease-out;
@@ -139,7 +136,7 @@
 }
 
 .dm-effects-count code {
-  color: var(--actuation);
+  color: var(--accent);
   font-size: 12px;
   font-weight: 700;
 }
@@ -175,7 +172,7 @@
 }
 
 .dm-body-mode-title span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
@@ -185,7 +182,7 @@
 .dm-body-mode-title code {
   overflow: hidden;
   max-width: 52%;
-  color: var(--actuation);
+  color: var(--accent);
   font-size: 11px;
   font-weight: 800;
   text-align: right;
@@ -226,7 +223,7 @@
 }
 
 .dm-body-mode-option span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
@@ -238,7 +235,7 @@
 .dm-body-mode-option.active {
   border-color: rgba(0, 112, 204, 0.92);
   background: rgba(0, 112, 204, 0.13);
-  box-shadow: inset 3px 0 0 var(--actuation);
+  box-shadow: inset 3px 0 0 var(--accent);
 }
 
 .dm-channel-list {
@@ -329,7 +326,7 @@
 
 .dm-effect-advanced-grid label > span,
 .dm-channel-signal-strip strong {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 9px;
   font-weight: 800;
   line-height: 1;
@@ -343,7 +340,7 @@
 .dm-advanced-note {
   grid-column: 1 / -1;
   margin: 0;
-  color: var(--ash);
+  color: var(--ink-muted);
   font-size: 11px;
   font-weight: 650;
   line-height: 1.35;
@@ -415,7 +412,7 @@
 }
 
 .dm-fader-value:focus {
-  border-color: var(--actuation);
+  border-color: var(--accent);
   box-shadow: 0 0 0 2px rgba(0, 112, 204, 0.14);
 }
 
@@ -433,7 +430,7 @@
 }
 
 .dm-route-select-wrap span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 9px;
   font-weight: 800;
   line-height: 1;
@@ -446,7 +443,7 @@
   height: 30px;
   border: 1px solid rgba(113, 113, 122, 0.42);
   border-radius: 6px;
-  color: var(--haptic);
+  color: var(--ink);
   background:
     linear-gradient(180deg, rgba(226, 232, 240, 0.05), rgba(226, 232, 240, 0.015)),
     rgba(10, 10, 12, 0.92);
@@ -457,6 +454,42 @@
 }
 
 .dm-route-select:focus {
-  border-color: var(--actuation);
+  border-color: var(--accent);
   box-shadow: 0 0 0 2px rgba(0, 112, 204, 0.14);
 }
+
+/* RGB output console container (LightbarControls). Moved from the retired
+   haptics/profile-console.css; the canvas-grid context in tuning.css strips
+   the padding and divider and hides the title. */
+.dm-rgb-console {
+  display: grid;
+  gap: 9px;
+  padding-top: 12px;
+  box-shadow: inset 0 1px 0 var(--hairline-strong);
+}
+
+.dm-console-title {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+}
+
+.dm-console-title span {
+  color: var(--ink-muted);
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.dm-console-title strong {
+  overflow: hidden;
+  color: var(--ink);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/web/src/styles/haptics/curves.css b/web/src/styles/haptics/curves.css
index 9fb952a..d446f0f 100644
--- a/web/src/styles/haptics/curves.css
+++ b/web/src/styles/haptics/curves.css
@@ -26,7 +26,7 @@
 }
 
 .dm-module-title span {
-  color: var(--actuation);
+  color: var(--accent);
   font-family: "JetBrains Mono", monospace;
   font-size: 12px;
   font-weight: 700;
@@ -41,7 +41,7 @@
 }
 
 .dm-module-title code {
-  color: var(--haptic);
+  color: var(--ink);
   font-size: 18px;
   font-weight: 700;
 }
@@ -55,7 +55,7 @@
   touch-action: none;
   background:
     radial-gradient(circle at 50% 25%, rgba(0, 112, 204, 0.09), transparent 48%),
-    var(--carbon);
+    var(--bg-rail);
 }
 
 .dm-curve-frame:active {
@@ -113,7 +113,7 @@
 
 .dm-trigger-curve .curve-force {
   filter: url(#dm-blue-glow);
-  stroke: var(--actuation);
+  stroke: var(--accent);
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 2.2;
@@ -127,7 +127,7 @@
 }
 
 .dm-trigger-curve .curve-live-dot {
-  fill: var(--actuation);
+  fill: var(--accent);
   stroke: rgba(226, 232, 240, 0.86);
   stroke-width: 0.85;
   vector-effect: non-scaling-stroke;
@@ -185,7 +185,7 @@
 
 .dm-curve-control-handle.active {
   background:
-    radial-gradient(circle at 36% 30%, #ffffff 0 16%, #b8edff 40%, var(--actuation) 100%);
+    radial-gradient(circle at 36% 30%, #ffffff 0 16%, #b8edff 40%, var(--accent) 100%);
   cursor: grabbing;
   transform: translate(-50%, -50%) scale(1.16);
 }
@@ -237,7 +237,7 @@
 }
 
 .dm-slider-row span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
@@ -246,7 +246,7 @@
 .dm-slider-row code,
 .dm-fader-value {
   width: 48px;
-  color: var(--haptic);
+  color: var(--ink);
   font-size: 12px;
   text-align: right;
 }
@@ -260,7 +260,7 @@
 }
 
 .dm-curve-point-row > span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
@@ -276,7 +276,7 @@
 }
 
 .dm-curve-point-actions code {
-  color: var(--haptic);
+  color: var(--ink);
   font-size: 12px;
   text-align: center;
 }
@@ -285,9 +285,9 @@
   align-items: center;
   aspect-ratio: 1;
   background: rgba(15, 23, 42, 0.72);
-  border: 1px solid var(--border-strong);
+  border: 1px solid var(--hairline-strong);
   border-radius: 4px;
-  color: var(--text);
+  color: var(--ink);
   cursor: pointer;
   display: inline-grid;
   height: 26px;
@@ -313,7 +313,7 @@
   height: 22px;
   margin: 0;
   padding: 0;
-  accent-color: var(--actuation);
+  accent-color: var(--accent);
   background: transparent;
   cursor: pointer;
 }
@@ -323,7 +323,7 @@
   height: 4px;
   border-radius: 999px;
   background:
-    linear-gradient(90deg, var(--actuation) 0 var(--value, 0%), rgba(78, 83, 95, 0.82) var(--value, 0%) 100%);
+    linear-gradient(90deg, var(--accent) 0 var(--value, 0%), rgba(78, 83, 95, 0.82) var(--value, 0%) 100%);
   box-shadow:
     inset 0 0 0 1px rgba(255, 255, 255, 0.06),
     0 1px 0 rgba(255, 255, 255, 0.04);
@@ -343,7 +343,7 @@
 .dm-mini-range::-moz-range-progress {
   height: 4px;
   border-radius: 999px;
-  background: var(--actuation);
+  background: var(--accent);
 }
 
 .dm-range::-webkit-slider-thumb,
diff --git a/web/src/styles/haptics/profile-console.css b/web/src/styles/haptics/profile-console.css
deleted file mode 100644
index 0f8cebc..0000000
--- a/web/src/styles/haptics/profile-console.css
+++ /dev/null
@@ -1,144 +0,0 @@
-.dm-rgb-console {
-  display: grid;
-  gap: 9px;
-  padding-top: 12px;
-  box-shadow: inset 0 1px 0 rgba(113, 113, 122, 0.18);
-}
-
-.dm-console-title {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 12px;
-  min-width: 0;
-}
-
-.dm-console-title span {
-  color: var(--tungsten);
-  font-size: 10px;
-  font-weight: 800;
-  line-height: 1;
-  text-transform: uppercase;
-}
-
-.dm-console-title strong {
-  overflow: hidden;
-  color: var(--haptic);
-  font-family: "Space Grotesk", "Inter Tight", Inter, sans-serif;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-profile-console {
-  display: grid;
-  gap: 10px;
-  padding-top: 12px;
-  box-shadow: inset 0 1px 0 rgba(113, 113, 122, 0.18);
-}
-
-.dm-profile-line {
-  display: grid;
-  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
-  align-items: end;
-  gap: 10px;
-}
-
-.dm-action-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  min-width: 0;
-}
-
-.dm-action-row > span {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  color: var(--actuation);
-  font-size: 12px;
-  font-weight: 700;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-action-row > .dscc-tooltip {
-  flex: 0 0 auto;
-}
-
-.dm-action-row .dm-mini-button,
-.dm-action-row .dm-apply-button {
-  flex: 0 0 70px;
-  width: 70px;
-}
-
-.dm-action-row .dm-mini-button.wide {
-  flex-basis: 94px;
-  width: 94px;
-}
-
-.dm-mini-button {
-  width: 76px;
-  min-height: 30px;
-  padding-inline: 10px;
-  font-size: 12px;
-}
-
-.dm-mini-button.primary {
-  border-color: rgba(0, 112, 204, 0.92);
-  background: var(--actuation);
-  color: #FFFFFF;
-}
-
-.dm-apply-button {
-  width: 76px;
-  min-height: 30px;
-  padding-inline: 10px;
-  border: 1px solid rgba(113, 113, 122, 0.78);
-  color: rgba(226, 232, 240, 0.76);
-  background: rgba(10, 10, 12, 0.52);
-  font-size: 13px;
-  font-weight: 800;
-}
-
-.dm-apply-button.dirty {
-  border-color: var(--actuation);
-  color: #FFFFFF;
-  background: var(--actuation);
-  box-shadow: 0 0 20px rgba(0, 112, 204, 0.22);
-}
-
-.dm-apply-button.applied {
-  border-color: var(--ready);
-  background: var(--ready);
-  color: #06110A;
-}
-
-.dm-profile-rename {
-  display: grid;
-  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
-  align-items: end;
-  gap: 10px;
-}
-
-.dm-profile-rename label {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-}
-
-.dm-profile-rename span {
-  color: var(--tungsten);
-  font-size: 10px;
-  font-weight: 800;
-  line-height: 1;
-  text-transform: uppercase;
-}
-
-.dm-profile-rename input {
-  min-width: 0;
-}
diff --git a/web/src/styles/haptics/routing.css b/web/src/styles/haptics/routing.css
index 97d1900..1561d48 100644
--- a/web/src/styles/haptics/routing.css
+++ b/web/src/styles/haptics/routing.css
@@ -5,17 +5,6 @@
   padding: clamp(14px, 1.55vw, 22px);
 }
 
-.dm-routing {
-  display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
-  gap: 12px;
-  padding: clamp(16px, 1.6vw, 22px);
-}
-
-.dm-routing.dm-global-feel {
-  grid-template-rows: auto minmax(0, 1fr) auto auto;
-}
-
 .dm-global-feel-panel {
   display: grid;
   align-content: start;
@@ -41,7 +30,7 @@
 .dm-global-feel-heading code {
   overflow: hidden;
   max-width: 50%;
-  color: var(--actuation);
+  color: var(--accent);
   font-size: 11px;
   font-weight: 800;
   text-align: right;
@@ -57,7 +46,7 @@
 }
 
 .dm-global-feel-panel article > span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 12px;
   line-height: 1.35;
 }
@@ -87,7 +76,7 @@
 }
 
 .dm-global-feel-controls label > span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
@@ -131,7 +120,7 @@
 }
 
 .dm-pattern-option span {
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
@@ -142,7 +131,7 @@
 .dm-pattern-option.active {
   border-color: rgba(0, 112, 204, 0.92);
   background: rgba(0, 112, 204, 0.13);
-  box-shadow: inset 3px 0 0 var(--actuation);
+  box-shadow: inset 3px 0 0 var(--accent);
 }
 
 .dm-section-head {
@@ -159,10 +148,9 @@
 
 .dm-section-head span,
 .dm-parameter-strip label > span,
-.dm-led-row > span,
-.dm-profile-line label > span {
+.dm-led-row > span {
   display: block;
-  color: var(--tungsten);
+  color: var(--ink-muted);
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
@@ -192,8 +180,6 @@
 
 .dm-test-button,
 .dm-mini-button,
-.dm-action-button,
-.dm-apply-button,
 .solid-action {
   display: inline-flex;
   align-items: center;
@@ -210,8 +196,7 @@
 }
 
 .dm-test-button,
-.dm-mini-button,
-.dm-action-button {
+.dm-mini-button {
   border: 1px solid rgba(113, 113, 122, 0.78);
   color: #FFFFFF;
   background: transparent;
@@ -221,19 +206,22 @@
 
 .dm-test-button:hover,
 .dm-mini-button:hover,
-.dm-action-button:hover,
 .dm-test-button.active {
   border-color: #FFFFFF;
   background: rgba(226, 232, 240, 0.055);
 }
 
-.dm-action-button.primary {
-  border-color: rgba(0, 112, 204, 0.92);
-  background: var(--actuation);
-  color: #FFFFFF;
+/* Compact sizing + primary variant (Save/Create in the profile menu).
+   Moved from the retired haptics/profile-console.css. */
+.dm-mini-button {
+  width: 76px;
+  min-height: 30px;
+  padding-inline: 10px;
+  font-size: 12px;
 }
 
-.dm-action-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.52;
+.dm-mini-button.primary {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: #FFFFFF;
 }
diff --git a/web/src/styles/responsive.css b/web/src/styles/responsive.css
index a6662da..8ff416d 100644
--- a/web/src/styles/responsive.css
+++ b/web/src/styles/responsive.css
@@ -1,104 +1,12 @@
-@media (max-width: 1180px) {
-  body {
-    overflow: auto;
-  }
-
-  .ops-shell {
-    display: block;
-    height: auto;
-    min-height: 100vh;
-    overflow: visible;
-  }
+/* Narrow-viewport adjustments for the tuning instruments. The document
+   scroll model lives in shell-v2.css and needs no overrides here. */
 
-  .dm-hud,
-  .dm-tuning-ribbon,
-  .dm-games-page,
-  .dm-controllers-page,
-  .dm-controller-overview,
-  .dm-deck,
-  .dm-button-map-layout,
-  .dm-parameter-strip,
-  .dm-profile-line,
-  .dm-profile-rename {
+@media (max-width: 1180px) {
+  .dm-parameter-strip {
     grid-template-columns: 1fr;
     height: auto;
   }
 
-  .dm-hud {
-    align-items: stretch;
-  }
-
-  .dm-tuning-ribbon {
-    position: static;
-    top: auto;
-  }
-
-  .dm-steam-identity {
-    grid-template-columns: 1fr;
-    gap: 4px;
-  }
-
-  button.dm-ribbon-picker-trigger.dm-game-identity-cell {
-    grid-template-columns: 104px minmax(0, 1fr);
-    min-height: 64px;
-  }
-
-  .dm-system-cluster {
-    justify-content: flex-start;
-    flex-wrap: wrap;
-  }
-
-  .dm-system-readout {
-    justify-content: flex-start;
-    text-align: left;
-  }
-
-  .dm-view-nav {
-    justify-self: stretch;
-    overflow-x: auto;
-  }
-
-  .dm-deck,
-  .dm-games-page,
-  .dm-controllers-page,
-  .dm-button-map-page {
-    min-height: 0;
-  }
-
-  .dm-controller-stage {
-    grid-template-columns: 1fr;
-  }
-
-  .dm-map-callouts,
-  .dm-map-callouts.left,
-  .dm-map-callouts.right {
-    grid-template-columns: 1fr;
-    text-align: left;
-  }
-
-  .dm-map-callouts.left .dm-callout-head,
-  .dm-map-callouts.right .dm-callout-head {
-    flex-direction: row;
-  }
-
-  .dm-callout-cluster {
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap: 10px;
-  }
-
-  .dm-callout-cluster-title {
-    grid-column: 1 / -1;
-  }
-
-  .dm-controller-canvas {
-    max-width: 720px;
-    margin: 0 auto;
-  }
-
-  .dm-map-source-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
   .dm-physics {
     grid-template-rows: auto auto auto;
   }
@@ -123,13 +31,6 @@
 }
 
 @media (max-width: 900px) {
-  .dm-live-stick-grid,
-  .dm-trigger-meter-grid,
-  .dm-controller-metric-grid,
-  .dm-calibration-grid {
-    grid-template-columns: 1fr;
-  }
-
   .dm-curve-stack {
     grid-template-columns: 1fr;
   }
@@ -148,38 +49,10 @@
 }
 
 @media (max-width: 720px) {
-  .ops-shell {
-    padding: 14px;
-  }
-
-  .dm-physics,
-  .dm-routing,
-  .dm-button-map-panel {
+  .dm-physics {
     padding: 14px;
   }
 
-  .dm-view-nav {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 3px;
-  }
-
-  .dm-view-nav button {
-    width: 100%;
-    padding: 0 8px;
-    font-size: 11px;
-  }
-
-  .dm-app-tagline {
-    max-width: 100%;
-    white-space: normal;
-    overflow-wrap: anywhere;
-  }
-
-  .dm-slider-bank {
-    grid-template-columns: 1fr;
-  }
-
   .dm-curve-module {
     grid-template-rows: auto 170px auto;
   }
@@ -191,23 +64,7 @@
   .dm-slider-bank,
   .dm-channel-strip,
   .dm-led-row,
-  .dm-tuning-ribbon,
-  .dm-steam-identity,
-  .dm-system-toggles,
   .dm-support-panel,
-  .dm-action-row,
-  .dm-scope-strip button,
-  .dm-game-grid > button,
-  .dm-live-panel-head,
-  .dm-stick-head,
-  .dm-trigger-meter > div:first-child,
-  .dm-map-context-grid,
-  .dm-map-placeholder,
-  .dm-button-bind-list,
-  .dm-map-source-grid,
-  .dm-map-quick-grid > div,
-  .dm-steam-binding-row,
-  .dm-input-path-actions,
   .dm-global-feel-controls,
   .dm-pattern-grid,
   .dm-vibration-mode-grid,
@@ -217,43 +74,7 @@
     grid-template-columns: 1fr;
   }
 
-  button.dm-ribbon-picker-trigger.dm-game-identity-cell {
-    grid-template-columns: 86px minmax(0, 1fr);
-  }
-
-  .dm-steam-identity .dm-ribbon-game-media {
-    width: 86px;
-    height: 46px;
-  }
-
-  .dm-controller-stage {
-    min-height: 0;
-  }
-
-  .dm-controller-canvas {
-    min-width: 0;
-  }
-
-  .dm-map-source-row strong,
-  .dm-steam-binding-row em {
-    text-align: left;
-  }
-
   .dm-channel-strip {
     align-items: stretch;
   }
-
-  .dm-action-row {
-    display: grid;
-  }
-
-  .dm-controller-card {
-    min-height: 220px;
-  }
-
-  .dm-game-card-media img,
-  .dm-game-art-fallback {
-    width: 100%;
-    height: 148px;
-  }
 }
diff --git a/web/src/styles/ribbon.css b/web/src/styles/ribbon.css
deleted file mode 100644
index 8de39a0..0000000
--- a/web/src/styles/ribbon.css
+++ /dev/null
@@ -1,428 +0,0 @@
-.dm-tuning-ribbon {
-  position: sticky;
-  top: 74px;
-  z-index: 24;
-  display: grid;
-  grid-template-columns: minmax(650px, 1.4fr) minmax(360px, 0.72fr);
-  align-items: stretch;
-  gap: 10px;
-  flex: 0 0 62px;
-  width: min(1500px, 100%);
-  height: 62px;
-  margin: 0 auto 18px;
-}
-
-.dm-steam-identity,
-.dm-system-toggles {
-  min-width: 0;
-  background: rgba(18, 18, 20, 0.54);
-  box-shadow:
-    inset 0 1px 0 rgba(226, 232, 240, 0.045),
-    inset 0 0 0 1px rgba(113, 113, 122, 0.11);
-}
-
-.dm-steam-identity {
-  display: grid;
-  grid-template-columns: minmax(210px, 0.82fr) minmax(380px, 1.45fr) minmax(220px, 0.88fr);
-  align-items: center;
-  gap: 8px;
-  overflow: hidden;
-}
-
-.dm-steam-identity > span.dm-controller-glyph {
-  width: 58px;
-  height: 42px;
-  margin: 0 auto;
-  color: var(--haptic);
-  opacity: 0.82;
-}
-
-.dm-steam-identity > div {
-  min-width: 0;
-  padding-right: 12px;
-}
-
-.dm-steam-identity span,
-.dm-switch-line span,
-.dm-location-line span {
-  display: block;
-  color: var(--tungsten);
-  font-size: 10px;
-  font-weight: 800;
-  line-height: 1;
-  text-transform: uppercase;
-}
-
-.dm-steam-identity strong,
-.dm-switch-line strong {
-  display: block;
-  overflow: hidden;
-  color: #FFFFFF;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-steam-identity p,
-.dm-switch-line small,
-.dm-location-line small {
-  display: block;
-  margin: 2px 0 0;
-  overflow: hidden;
-  color: var(--tungsten);
-  font-size: 11px;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-active-profile-cell {
-  position: relative;
-  align-self: stretch;
-  display: grid;
-  align-content: center;
-  padding: 6px 12px 6px 12px;
-  border-left: 1px solid rgba(113, 113, 122, 0.18);
-}
-
-.dm-active-profile-cell strong {
-  color: var(--actuation);
-  font-size: 15px;
-  font-weight: 700;
-  letter-spacing: 0.01em;
-}
-
-.dm-active-profile-cell span {
-  color: var(--tungsten);
-  opacity: 1;
-}
-
-.dm-ribbon-picker-host {
-  position: relative;
-  display: grid;
-  align-self: stretch;
-  min-width: 0;
-}
-
-button.dm-ribbon-picker-trigger {
-  position: relative;
-  display: grid;
-  align-content: center;
-  width: 100%;
-  appearance: none;
-  border: 0;
-  background: transparent;
-  font: inherit;
-  text-align: inherit;
-  color: inherit;
-  cursor: pointer;
-  padding: 6px 28px 6px 12px;
-  border-radius: 6px;
-  transition: background 140ms ease-out, box-shadow 140ms ease-out;
-}
-
-button.dm-ribbon-picker-trigger.dm-game-identity-cell {
-  grid-template-columns: 94px minmax(0, 1fr);
-  align-items: center;
-  align-content: stretch;
-  gap: 12px;
-  overflow: hidden;
-  padding-left: 8px;
-}
-
-button.dm-ribbon-picker-trigger.dm-active-profile-cell {
-  padding-left: 12px;
-}
-
-button.dm-ribbon-picker-trigger:hover:not(:disabled),
-button.dm-ribbon-picker-trigger:focus-visible {
-  background: rgba(0, 112, 204, 0.08);
-  outline: none;
-  box-shadow: inset 0 0 0 1px rgba(0, 112, 204, 0.35);
-}
-
-button.dm-ribbon-picker-trigger.open {
-  background: rgba(0, 112, 204, 0.12);
-  box-shadow: inset 0 0 0 1px rgba(0, 112, 204, 0.55);
-}
-
-button.dm-ribbon-picker-trigger:disabled {
-  cursor: default;
-  padding-right: 12px;
-}
-
-button.dm-ribbon-picker-trigger:disabled .dm-ribbon-picker-caret {
-  display: none;
-}
-
-.dm-ribbon-picker-caret {
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--haptic);
-  font-size: 11px;
-  font-weight: 800;
-  opacity: 0.7;
-  pointer-events: none;
-  transition: transform 140ms ease-out, opacity 140ms ease-out;
-}
-
-button.dm-ribbon-picker-trigger.open .dm-ribbon-picker-caret {
-  transform: translateY(-50%) rotate(180deg);
-  opacity: 1;
-}
-
-.dm-steam-identity .dm-ribbon-game-backdrop {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  display: block;
-  overflow: hidden;
-  opacity: 0.24;
-  color: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: normal;
-  text-transform: none;
-  pointer-events: none;
-}
-
-.dm-steam-identity .dm-ribbon-game-backdrop::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background:
-    linear-gradient(90deg, rgba(18, 18, 20, 0.18), rgba(18, 18, 20, 0.76) 42%, rgba(18, 18, 20, 0.94)),
-    linear-gradient(180deg, rgba(18, 18, 20, 0.12), rgba(18, 18, 20, 0.78));
-}
-
-.dm-steam-identity .dm-ribbon-game-backdrop img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  filter: saturate(1.08) contrast(1.05);
-}
-
-.dm-steam-identity .dm-ribbon-game-media {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  place-items: center;
-  width: 94px;
-  height: 48px;
-  overflow: hidden;
-  border-radius: 4px;
-  background: rgba(7, 7, 8, 0.52);
-  box-shadow:
-    inset 0 0 0 1px rgba(226, 232, 240, 0.12),
-    0 8px 20px rgba(0, 0, 0, 0.24);
-  color: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: normal;
-  text-transform: none;
-}
-
-.dm-steam-identity .dm-ribbon-game-media img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.dm-steam-identity .dm-ribbon-game-copy {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  align-content: center;
-  min-width: 0;
-}
-
-.dm-ribbon-game-copy span,
-.dm-ribbon-game-copy strong,
-.dm-ribbon-game-copy p {
-  min-width: 0;
-}
-
-.dm-ribbon-picker-menu {
-  position: fixed;
-  z-index: 7500;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 240px;
-  max-width: 360px;
-  max-height: min(420px, 70vh);
-  overflow-y: auto;
-  padding: 6px;
-  border: 1px solid rgba(0, 112, 204, 0.34);
-  border-radius: 8px;
-  background:
-    linear-gradient(180deg, rgba(26, 28, 34, 0.98), rgba(14, 14, 18, 0.99));
-  box-shadow:
-    0 24px 64px rgba(0, 0, 0, 0.62),
-    inset 0 1px 0 rgba(226, 232, 240, 0.06);
-}
-
-.dm-ribbon-picker-menu.profile {
-  min-width: 260px;
-}
-
-.dm-ribbon-picker-divider {
-  height: 1px;
-  margin: 4px 6px;
-  background: rgba(113, 113, 122, 0.22);
-}
-
-button.dm-ribbon-picker-item {
-  display: grid;
-  grid-template-columns: 34px minmax(0, 1fr);
-  align-items: center;
-  gap: 10px;
-  padding: 7px 9px;
-  border: 0;
-  border-radius: 5px;
-  color: var(--haptic);
-  background: transparent;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  transition: background 120ms ease-out, color 120ms ease-out;
-}
-
-button.dm-ribbon-picker-item:hover,
-button.dm-ribbon-picker-item:focus-visible {
-  outline: none;
-  color: #FFFFFF;
-  background: rgba(0, 112, 204, 0.18);
-}
-
-button.dm-ribbon-picker-item.active {
-  color: #FFFFFF;
-  background: rgba(0, 112, 204, 0.28);
-  box-shadow: inset 0 0 0 1px rgba(0, 112, 204, 0.55);
-}
-
-button.dm-ribbon-picker-item:disabled {
-  cursor: not-allowed;
-  opacity: 0.52;
-}
-
-.dm-ribbon-picker-thumb {
-  display: grid;
-  place-items: center;
-  width: 34px;
-  height: 34px;
-  overflow: hidden;
-  border-radius: 6px;
-  color: #FFFFFF;
-  background: transparent;
-  font-family: "JetBrains Mono", monospace;
-  font-size: 12px;
-  font-weight: 800;
-}
-
-.dm-ribbon-picker-thumb img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 6px;
-}
-
-.dm-ribbon-picker-thumb.art {
-  background: transparent;
-}
-
-.dm-ribbon-picker-copy {
-  display: grid;
-  gap: 2px;
-  min-width: 0;
-}
-
-.dm-ribbon-picker-copy strong {
-  display: block;
-  margin: 0;
-  overflow: hidden;
-  color: inherit;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1.18;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-ribbon-picker-copy small {
-  display: block;
-  margin: 0;
-  color: var(--tungsten);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  line-height: 1.3;
-  text-transform: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-system-toggles {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
-  padding: 7px 8px;
-}
-
-.dm-switch-line {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) max-content;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-}
-
-.dm-glyph-switch > div {
-  display: grid;
-  align-content: center;
-  gap: 3px;
-  min-width: 0;
-}
-
-.dm-glyph-switch span,
-.dm-glyph-switch strong,
-.dm-glyph-switch small {
-  line-height: 1.15;
-}
-
-.dm-glyph-switch small {
-  margin-top: 0;
-}
-
-.dm-location-line,
-.dm-location-line label {
-  display: grid;
-  min-width: 0;
-}
-
-.dm-location-line label {
-  gap: 5px;
-}
-
-.dm-location-line select {
-  width: 100%;
-  min-width: 0;
-  height: 26px;
-  border: 0;
-  border-radius: 5px;
-  color: #FFFFFF;
-  background: rgba(10, 10, 12, 0.78);
-  box-shadow: inset 0 0 0 1px rgba(113, 113, 122, 0.24);
-  font-size: 12px;
-  font-weight: 700;
-  outline: none;
-}
-
-.dm-location-line select:focus {
-  box-shadow: inset 0 0 0 1px var(--actuation), 0 0 0 2px rgba(0, 112, 204, 0.16);
-}
diff --git a/web/src/styles/shell-v2.css b/web/src/styles/shell-v2.css
index 6df30d4..fb347aa 100644
--- a/web/src/styles/shell-v2.css
+++ b/web/src/styles/shell-v2.css
@@ -1,10 +1,7 @@
 /* Shell v2 — slim sidebar + document-flow main column (calm console, flat fills). */
 
-/* The document scrolls again under the v2 shell; base.css pinned it for the old
-   HUD shell, which scrolled inside .ops-shell. Delete the base.css rules in the
-   cleanup task and fold these in. ALSO: responsive.css (@max-width: 1180px) sets
-   body { overflow: auto } and .ops-shell rules that override document scroll —
-   fold those into the responsive section here. */
+/* The document itself scrolls; the sidebar stays sticky beside it. base.css
+   and responsive.css defer to these rules for the scroll model. */
 html,
 body,
 #app {
@@ -109,14 +106,14 @@ html {
 .app-main {
   flex: 1;
   min-width: 0;
-  /* Clip latent horizontal overflow from legacy feature views (the old
-     .ops-shell did the same); remove once the views are rebuilt. */
+  /* Clip latent horizontal overflow from wide instrument panels so a stray
+     wide row never scrolls the whole document sideways. */
   overflow-x: hidden;
   padding: 18px clamp(18px, 2.2vw, 34px) 22px;
 }
 
-/* TEMPORARY toolbar — controller/scope/profile context the old ribbon carried.
-   Tasks 4-5 re-house this in Status and the Tuning header; delete it then. */
+/* Utility row above the views — cross-view context (target controller, web UI
+   bind address, glyph override, system readout). */
 .app-toolbar {
   display: flex;
   flex-wrap: wrap;
diff --git a/web/src/styles/shell.css b/web/src/styles/shell.css
deleted file mode 100644
index 4a99705..0000000
--- a/web/src/styles/shell.css
+++ /dev/null
@@ -1,235 +0,0 @@
-.ops-shell {
-  position: relative;
-  isolation: isolate;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: 100vh;
-  height: 100vh;
-  padding: 18px clamp(18px, 2.2vw, 34px) 22px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  /* Reserve the vertical scrollbar's track so its appearance never reflows
-     content. On platforms with classic (16px) scrollbars this prevents the
-     transient horizontal overflow that intermittently tripped the visual
-     smoke test; on overlay-scrollbar platforms it is a no-op. */
-  scrollbar-gutter: stable;
-  color: var(--haptic);
-  background:
-    radial-gradient(circle at 50% -18%, rgba(0, 112, 204, 0.14), transparent 36%),
-    radial-gradient(circle at 82% 18%, rgba(226, 232, 240, 0.045), transparent 25%),
-    linear-gradient(180deg, #0C0C0F 0%, var(--obsidian) 42%, #070708 100%);
-}
-
-.ops-shell::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  opacity: 0.18;
-  background-image:
-    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
-  background-size: 44px 44px;
-  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.18));
-}
-
-.dm-hud {
-  position: sticky;
-  top: 0;
-  z-index: 30;
-  display: grid;
-  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
-  align-items: center;
-  gap: clamp(14px, 2vw, 26px);
-  flex: 0 0 64px;
-  height: 64px;
-  background: linear-gradient(180deg, rgba(12, 12, 15, 0.96), rgba(12, 12, 15, 0.82));
-  backdrop-filter: blur(12px);
-}
-
-.dm-hardware-state,
-.dm-system-readout {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  min-width: 0;
-}
-
-.dm-hardware-state > div {
-  min-width: 0;
-}
-
-.dm-hardware-state h1 {
-  margin: 0;
-  overflow: hidden;
-  color: #FFFFFF;
-  font-family: "Space Grotesk", "Inter Tight", Inter, sans-serif;
-  font-size: 20px;
-  font-weight: 700;
-  line-height: 1;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-app-tagline {
-  display: inline-block;
-  color: var(--tungsten);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.dm-hardware-state p,
-.dm-system-readout small,
-.dm-system-readout span {
-  margin: 0;
-  overflow: hidden;
-  color: var(--tungsten);
-  font-size: 12px;
-  line-height: 1.25;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dm-hardware-state p {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.dm-controller-glyph {
-  width: 42px;
-  height: 42px;
-  flex: 0 0 auto;
-  color: var(--haptic);
-  opacity: 0.82;
-  background: currentColor;
-  mask: url("/dualsense-controller.svg") center / contain no-repeat;
-  -webkit-mask: url("/dualsense-controller.svg") center / contain no-repeat;
-}
-
-.dm-battery-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  min-width: 0;
-  color: var(--tungsten);
-}
-
-.dm-battery {
-  width: 28px;
-  height: 14px;
-  flex: 0 0 auto;
-  color: var(--tungsten);
-}
-
-.dm-battery rect:first-child,
-.dm-battery path {
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.5;
-}
-
-.dm-battery-fill {
-  fill: var(--haptic);
-}
-
-.dm-system-cluster {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  width: 100%;
-  min-width: 0;
-}
-
-.dm-system-readout {
-  justify-content: flex-end;
-  text-align: right;
-}
-
-.dm-view-nav {
-  display: inline-flex;
-  align-items: center;
-  justify-self: center;
-  gap: 4px;
-  max-width: 100%;
-  padding: 4px;
-  overflow: hidden;
-  background: rgba(18, 18, 20, 0.72);
-  box-shadow:
-    inset 0 1px 0 rgba(226, 232, 240, 0.06),
-    inset 0 0 0 1px rgba(226, 232, 240, 0.06);
-}
-
-.dm-view-nav .dscc-tooltip {
-  flex: 0 1 auto;
-  min-width: 0;
-}
-
-.dm-view-nav .dscc-tooltip button {
-  width: 100%;
-}
-
-.dm-view-nav button {
-  height: 34px;
-  min-width: 0;
-  padding: 0 14px;
-  border: 0;
-  border-radius: 5px;
-  color: var(--tungsten);
-  background: transparent;
-  font-size: 12px;
-  font-weight: 800;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  transition: color 0.15s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
-}
-
-.dm-view-nav button:hover,
-.dm-view-nav button.active {
-  color: #FFFFFF;
-  background: rgba(0, 112, 204, 0.16);
-  box-shadow: inset 0 0 0 1px rgba(0, 112, 204, 0.34);
-}
-
-.dm-system-readout strong {
-  color: var(--actuation);
-  font-size: 15px;
-  font-weight: 700;
-  white-space: nowrap;
-}
-
-.dm-system-readout span,
-.dm-system-readout small {
-  display: block;
-}
-
-.dm-support-trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  min-height: 32px;
-  padding: 0 7px;
-  border: 1px solid rgba(113, 113, 122, 0.44);
-  border-radius: 6px;
-  color: var(--haptic);
-  background: rgba(18, 18, 20, 0.72);
-  font-size: 12px;
-  font-weight: 800;
-  white-space: nowrap;
-  transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
-}
-
-.dm-support-trigger:hover,
-.dm-support-trigger.active {
-  border-color: rgba(0, 112, 204, 0.72);
-  color: #FFFFFF;
-  background: rgba(0, 112, 204, 0.14);
-}
diff --git a/web/src/styles/tokens.css b/web/src/styles/tokens.css
index 89e3bc2..ab5ceb3 100644
--- a/web/src/styles/tokens.css
+++ b/web/src/styles/tokens.css
@@ -56,25 +56,3 @@
 @media (prefers-reduced-motion: reduce) {
   :root { --speed: 0ms; }
 }
-
-/* TEMPORARY legacy aliases — delete in cleanup task */
-:root {
-  --obsidian: var(--bg);
-  --carbon: var(--bg-rail);
-  --actuation: var(--accent);
-  --haptic: var(--ink);
-  --tungsten: var(--ink-muted);
-  --overdrive: var(--danger);
-  --ready: var(--ok);
-  --matte: rgba(214, 214, 220, 0.045);
-  --line: rgba(139, 139, 150, 0.28);
-
-  /* previously-undefined vars referenced by legacy CSS — verify zero usages
-     before deleting; --mono is a real value (not an alias) and must move to
-     the main block if monospace text survives the rework */
-  --muted: var(--ink-muted);
-  --text: var(--ink);
-  --ash: var(--ink-muted);
-  --mono: "Courier New", monospace;
-  --border-strong: var(--hairline-strong);
-}
diff --git a/web/src/styles/tuning.css b/web/src/styles/tuning.css
index f776ebc..d6c807a 100644
--- a/web/src/styles/tuning.css
+++ b/web/src/styles/tuning.css
@@ -362,10 +362,6 @@
   max-width: 320px;
 }
 
-.canvas-grid .control-slider {
-  max-width: var(--slider-cap);
-}
-
 @media (max-width: 760px) {
   .col-trigger,
   .col-small {
@@ -723,6 +719,15 @@
   border-radius: var(--radius-m);
 }
 
+/* The parked trigger-controls panel sits directly in .canvas-below; give it
+   the same bounded field the .canvas-parked wrappers provide (the HUD-era
+   panel background it used to lean on is gone). */
+.canvas-below > .dm-physics {
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-m);
+}
+
 /* --- per-game setup guide (Task 8; layout truth game-setup.html) ------------
 
    A canvas state, not a pop-up: replaces the tuning grid (rail included)
diff --git a/web/src/styles/workspace.css b/web/src/styles/workspace.css
deleted file mode 100644
index 6babacd..0000000
--- a/web/src/styles/workspace.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.dm-deck {
-  display: grid;
-  grid-template-columns: minmax(0, 5.7fr) minmax(0, 6.3fr);
-  gap: clamp(14px, 1.5vw, 22px);
-  flex: 1 1 0;
-  width: min(1500px, 100%);
-  height: auto;
-  margin: 0 auto;
-  min-height: 0;
-}
-
-.dm-view-hidden {
-  display: none !important;
-}
-
-.dm-physics,
-.dm-routing,
-.dm-button-map-panel {
-  min-width: 0;
-  min-height: 0;
-  background:
-    linear-gradient(180deg, rgba(226, 232, 240, 0.035), rgba(226, 232, 240, 0.012)),
-    rgba(18, 18, 20, 0.82);
-  box-shadow:
-    inset 0 1px 0 rgba(226, 232, 240, 0.06),
-    inset 0 0 0 1px rgba(226, 232, 240, 0.035);
-}

From 67b69fa05ad170cc38fc9ebca4bd5b66bd1d1040 Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 23:08:58 -0500
Subject: [PATCH 21/23] Fix spurious unsaved-changes state on first profile
 load
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

profileSaveBaselineSignature was captured synchronously after
applyEditableConfig() reassigns forzaTuning, but currentProfileDraftValues()
read the `$:` alias variables (forzaEffects, forzaAbsTuning, ...) that Svelte
had not re-derived yet — so the baseline froze the previous (default) Forza
values and the freshly loaded config immediately compared as dirty, with no
visible diff in the saved rail. Read forzaTuning directly so the baseline and
the dirty check see the same values.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/App.svelte | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index b1e29d5..2d74959 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -1538,13 +1538,18 @@
     lightbarColor,
     rpmColor,
     lightbarBrightness,
-    forzaBodyRumbleMode,
-    forzaEffects,
-    forzaBrakeTuning,
-    forzaAbsTuning,
-    forzaThrottleTuning,
-    forzaShiftTuning,
-    forzaRevLimiterTuning,
+    // Read forzaTuning directly, not the `$:` aliases (forzaEffects et al.):
+    // captureProfileSaveBaseline() runs synchronously right after
+    // applyEditableConfig() reassigns forzaTuning, before Svelte re-runs the
+    // reactive aliases — reading the aliases here baselines stale values and
+    // marks a freshly loaded profile dirty.
+    forzaBodyRumbleMode: forzaTuning.bodyRumbleMode,
+    forzaEffects: forzaTuning.effects,
+    forzaBrakeTuning: forzaTuning.brake,
+    forzaAbsTuning: forzaTuning.abs,
+    forzaThrottleTuning: forzaTuning.throttle,
+    forzaShiftTuning: forzaTuning.shift,
+    forzaRevLimiterTuning: forzaTuning.revLimiter,
     leftStickDeadzone,
     rightStickDeadzone
   });

From 5f8eabbfef8c567a1c9f1e8be049ac7fc20f725f Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 23:38:29 -0500
Subject: [PATCH 22/23] ui-rework: toolbar alignment, strip overlap fix,
 DualSense brand glyph

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/App.svelte                   |  4 +--
 web/src/components/AppSidebar.svelte |  5 +++-
 web/src/styles/shell-v2.css          | 41 +++++++++++++++++++++++++---
 web/src/styles/tuning.css            | 18 +++++++-----
 4 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index 2d74959..313f4d6 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -2250,6 +2250,7 @@
         <select
           aria-label="Web UI location"
           disabled={appSettingsBusy}
+          title={lanRestartRequired ? `restart -> ${appSettings?.desiredBindAddress}` : status?.bindAddress}
           value={listenOnAllInterfaces ? 'lan' : 'local'}
           onchange={(event) => void updateLanAccess(event.currentTarget.value === 'lan')}
         >
@@ -2275,8 +2276,7 @@
         title={selectedTuningScope === 'global' ? systemReadoutDetail : adapter?.setupHint ?? telemetryRateDetail}
       >
         <span>{systemReadoutTitle}</span>
-        <strong>{systemReadoutValue}</strong>
-        <small>{systemReadoutDetail}</small>
+        <p><strong>{systemReadoutValue}</strong><small>{systemReadoutDetail}</small></p>
       </div>
     </section>
 
diff --git a/web/src/components/AppSidebar.svelte b/web/src/components/AppSidebar.svelte
index 42f4ea3..e6c4284 100644
--- a/web/src/components/AppSidebar.svelte
+++ b/web/src/components/AppSidebar.svelte
@@ -42,7 +42,10 @@
 </script>
 
 <nav class="sidebar" aria-label="Main">
-  <div class="sidebar-brand">DSCC</div>
+  <div class="sidebar-brand" title="DualSense Command Center">
+    <span class="dm-controller-glyph sidebar-brand-glyph" aria-hidden="true"></span>
+    <span class="visually-hidden">DualSense Command Center</span>
+  </div>
   {#each main as item (item.id)}
     <button
       class="sidebar-item"
diff --git a/web/src/styles/shell-v2.css b/web/src/styles/shell-v2.css
index fb347aa..42526eb 100644
--- a/web/src/styles/shell-v2.css
+++ b/web/src/styles/shell-v2.css
@@ -46,6 +46,18 @@ html {
   padding: 6px 10px;
 }
 
+/* The brand mark is the DualSense controller glyph (a currentColor mask over
+   /dualsense-controller.svg, shared with the controller cards). The artwork
+   sits in a central band of the square SVG canvas, so the mask is zoomed
+   past the box to render the controller itself at ~24px tall. */
+.dm-controller-glyph.sidebar-brand-glyph {
+  display: block;
+  width: 36px;
+  height: 24px;
+  mask-size: 40px 40px;
+  -webkit-mask-size: 40px 40px;
+}
+
 .sidebar-item,
 .sidebar-group {
   text-align: left;
@@ -126,13 +138,23 @@ html {
   border-radius: var(--radius-m);
 }
 
+/* Each field is exactly two rows — label, then control — so every toolbar
+   item shares one label line and one control line. The optional caption
+   (e.g. the bind address) sits inline beside the control instead of below
+   it, keeping the row's baseline tidy. */
 .app-toolbar-field {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
+  display: grid;
+  grid-template-columns: auto minmax(0, auto);
+  align-items: center;
+  column-gap: 8px;
+  row-gap: 3px;
   min-width: 0;
 }
 
+.app-toolbar-field > span {
+  grid-column: 1 / -1;
+}
+
 .app-toolbar-field > span {
   font-size: 0.72rem;
   letter-spacing: 0.02em;
@@ -158,8 +180,19 @@ html {
 .app-toolbar-readout {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 3px;
+  min-width: 0;
+}
+
+/* Value + detail share one line, height-matched to the toolbar selects so the
+   readout label sits on the same line as the field labels. */
+.app-toolbar-readout > p {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   min-width: 0;
+  min-height: 30px;
+  margin: 0;
 }
 
 .app-toolbar-readout > span {
diff --git a/web/src/styles/tuning.css b/web/src/styles/tuning.css
index d6c807a..4f07025 100644
--- a/web/src/styles/tuning.css
+++ b/web/src/styles/tuning.css
@@ -414,25 +414,29 @@
   padding: 0;
 }
 
-/* Channel strips reflow to two rows inside the narrow semantic columns:
-   toggle | name on top, fader | route below. */
+/* Channel strips reflow to three rows inside the narrow semantic columns:
+   toggle | name on top, then the fader (slider + value field), then the
+   route. The fader's value field needs ~154px beside the slider, which the
+   210–320px small columns cannot grant next to a route select, so each
+   control row gets the full strip width and nothing overlaps. */
 .canvas-grid .dm-channel-strip {
-  grid-template-columns: 42px minmax(0, 1fr) minmax(96px, 118px);
+  grid-template-columns: 42px minmax(0, 1fr);
   row-gap: 6px;
 }
 
 .canvas-grid .dm-channel-strip > .strip-name {
-  grid-column: 2 / 4;
+  grid-column: 2 / -1;
 }
 
 .canvas-grid .dm-channel-strip > .strip-fader {
-  grid-column: 1 / 3;
+  grid-column: 1 / -1;
   grid-row: 2;
 }
 
 .canvas-grid .dm-channel-strip > .strip-route {
-  grid-column: 3 / 4;
-  grid-row: 2;
+  grid-column: 1 / -1;
+  grid-row: 3;
+  max-width: calc(var(--slider-cap) + 68px); /* match the fader's cap */
 }
 
 /* Sliders never stretch: cap the track, keep the value field beside it. */

From 8081cfcfeb76948494f3f91dc380c85e7d7e135b Mon Sep 17 00:00:00 2001
From: Kyle McDowell <kyle@mjak.dev>
Date: Wed, 10 Jun 2026 23:46:56 -0500
Subject: [PATCH 23/23] ui-rework: pair Everyday header title with Global
 Profile

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/lib/features/tuning/gameSelect.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/src/lib/features/tuning/gameSelect.ts b/web/src/lib/features/tuning/gameSelect.ts
index 7226e3f..9de0ff3 100644
--- a/web/src/lib/features/tuning/gameSelect.ts
+++ b/web/src/lib/features/tuning/gameSelect.ts
@@ -112,7 +112,9 @@ export function headerTitle(options: {
     const game = (options.games ?? []).find((item) => item.gameId === options.selectedGameId);
     if (game) return game.name;
   }
-  return 'Everyday (no game)';
+  /* "Everyday" is a presentation label and must always pair with its
+     domain term, Global Profile (CONTEXT.md / spec §13). */
+  return 'Everyday · Global Profile';
 }
 
 export type TelemetryChipState = 'fresh' | 'quiet' | 'setup' | 'none' | null;