signalk-performance-processor 0.0.0-stage → 0.0.2

package/public/app.js

@@ -0,0 +1,336 @@
+(function () {
+  'use strict'
+
+  const API = '/plugins/signalk-performance-processor'
+  const LIVE_MS = 1000
+  const STALE_MS = 5000
+
+  // Display names and help for each correction, in pipeline order. A correction the
+  // plugin knows but this list does not still shows, under its id.
+  const CORRECTIONS = {
+    stw: { name: 'Boat speed (STW)', what: 'Paddlewheel linearity at low speed, plus the loss when heeled. Knots added to STW before anything else uses it.' },
+    leeway: { name: 'Leeway', what: 'Sideways slip: leeway = K × heel ÷ STW². Turns the boat’s velocity to leeward for true wind and current.' },
+    twa: { name: 'TWA table', what: 'Degrees added to |TWA| by TWS, upwind, reaching and downwind, H5000 style. Negative = TWA was reading too wide. Rows blend by TWA at the angles below.' },
+    tws: { name: 'TWS table', what: 'Percent applied to TWS by TWS, upwind, reaching and downwind. Blended at the TWA table’s angles. H5000 default is −10% downwind.' }
+  }
+
+  const SOURCE_LABELS = {
+    apparentWind: 'Apparent wind',
+    stw: 'Speed through water',
+    heading: 'Heading',
+    attitude: 'Heel (attitude)',
+    gps: 'SOG and COG',
+    variation: 'Magnetic variation'
+  }
+
+  const state = {
+    view: 'live',
+    saved: null, // config as stored by the plugin
+    draft: null, // config being edited
+    defaults: null,
+    selected: 'twa',
+    live: null,
+    liveAt: 0,
+    saving: false
+  }
+
+  const $ = id => document.getElementById(id)
+  const clone = o => JSON.parse(JSON.stringify(o))
+  const esc = s => String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]))
+  const fmt = (v, d = 1) => v == null || !Number.isFinite(v) ? '--' : v.toFixed(d)
+  const dirty = () => JSON.stringify(state.saved) !== JSON.stringify(state.draft)
+
+  // ---- data ----------------------------------------------------------------
+
+  async function getJson (path) {
+    const res = await fetch(API + path, { credentials: 'include', cache: 'no-store' })
+    if (!res.ok) throw new Error(`${res.status} ${res.statusText}`)
+    return res.json()
+  }
+
+  async function loadConfig () {
+    try {
+      const body = await getJson('/config')
+      state.saved = body.config
+      state.draft = clone(body.config)
+      state.defaults = body.defaults
+      $('conn').hidden = true
+    } catch (e) {
+      $('conn').textContent = `Cannot reach the plugin (${e.message}). Is Performance Processor enabled?`
+      $('conn').hidden = false
+    }
+    renderAll()
+  }
+
+  async function pollLive () {
+    try {
+      state.live = await getJson('/live')
+      state.liveAt = Date.now()
+      $('conn').hidden = true
+    } catch (e) {
+      $('conn').textContent = `Lost contact with the plugin (${e.message})`
+      $('conn').hidden = false
+    }
+    renderHeader()
+    if (state.view === 'live') renderLive()
+    if (state.view === 'settings') renderSourcesIfIdle()
+  }
+
+  async function save () {
+    state.saving = true
+    renderSaveBar()
+    try {
+      const res = await fetch(API + '/config', {
+        method: 'PUT',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(state.draft)
+      })
+      const body = await res.json().catch(() => ({}))
+      if (!res.ok) {
+        const why = body.errors ? body.errors.join('; ') : `${res.status} ${res.statusText}`
+        throw new Error(res.status === 401 || res.status === 403 ? 'not authorised — log in to Signal K with write access' : why)
+      }
+      state.saved = body.config
+      state.draft = clone(body.config)
+      $('saveErrors').textContent = ''
+    } catch (e) {
+      $('saveErrors').textContent = e.message
+    }
+    state.saving = false
+    renderAll()
+  }
+
+  // ---- editing ---------------------------------------------------------------
+
+  // data-path="corrections.twa.upwind.2" → state.draft.corrections.twa.upwind[2]
+  function setPath (path, value) {
+    const keys = path.split('.')
+    let o = state.draft
+    for (let i = 0; i < keys.length - 1; i++) o = o[keys[i]]
+    o[keys[keys.length - 1]] = value
+  }
+
+  function onEdit (e) {
+    const el = e.target
+    if (!el.dataset || !el.dataset.path || !state.draft) return
+    let value
+    if (el.type === 'checkbox') value = el.checked
+    else if (el.type === 'number') {
+      if (el.value === '') return // keep the old value until something is typed
+      value = Number(el.value)
+    } else value = el.value
+    setPath(el.dataset.path, value)
+    renderSaveBar()
+    if (el.type === 'checkbox' || el.type === 'radio' || el.tagName === 'SELECT') renderAll()
+  }
+
+  // ---- rendering -----------------------------------------------------------
+
+  function renderAll () {
+    renderHeader()
+    renderSaveBar()
+    for (const v of ['live', 'calibration', 'settings']) $('view-' + v).hidden = v !== state.view
+    document.querySelectorAll('nav a').forEach(a => a.classList.toggle('current', a.dataset.view === state.view))
+    if (state.view === 'live') renderLive()
+    if (state.view === 'calibration') renderCalibration()
+    if (state.view === 'settings') renderSettings()
+  }
+
+  function renderHeader () {
+    const mode = state.saved ? state.saved.mode : null
+    const badge = $('mode')
+    badge.textContent = mode === 'replace' ? 'Replace' : mode === 'shadow' ? 'Shadow' : '--'
+    badge.classList.toggle('replace', mode === 'replace')
+    $('status').textContent = state.live ? (state.live.running ? state.live.status : 'Plugin not running') : ''
+  }
+
+  function renderSaveBar () {
+    $('saveBar').hidden = !(state.draft && (dirty() || $('saveErrors').textContent))
+    $('save').disabled = state.saving || !dirty()
+    $('revert').disabled = state.saving
+  }
+
+  // -- Live
+
+  // True wind straight from the inputs, with no corrections, for comparison.
+  function uncorrected (input) {
+    const a = input.awa * Math.PI / 180
+    const x = input.aws * Math.cos(a) - input.stw
+    const y = input.aws * Math.sin(a)
+    return { twa: Math.atan2(y, x) * 180 / Math.PI, tws: Math.hypot(x, y) }
+  }
+
+  // Where true heading came from, so a fallback variation is visible at a glance.
+  function headingNote (o) {
+    if (o.headingFrom === 'true heading') return 'from true heading'
+    const v = o.variation == null ? '' : ` ${Math.abs(o.variation).toFixed(1)}° ${o.variation < 0 ? 'W' : 'E'}`
+    return o.headingFrom === 'magnetic + fallback variation' ? `fallback variation${v}` : `variation${v} from GPS`
+  }
+
+  function tile (label, value, unit, raw) {
+    return `<div class="tile"><div class="label">${esc(label)}</div>` +
+      `<div class="value">${esc(value)}<span class="unit">${esc(unit)}</span></div>` +
+      `<div class="raw">${esc(raw || '')}</div></div>`
+  }
+
+  function renderLive () {
+    const live = state.live
+    const r = live && live.result
+    const old = !r || live.ageMs > STALE_MS
+    $('liveAge').textContent = r ? (old ? `last update ${Math.round(live.ageMs / 1000)} s ago` : '') : ''
+
+    if (!r) {
+      $('tiles').innerHTML = ''
+      $('steps').innerHTML = `<tr><td colspan="4" class="muted center">${esc(live ? live.status || 'Waiting for data…' : 'Waiting for data…')}</td></tr>`
+    } else {
+      const o = r.out
+      const u = uncorrected(r.input)
+      const side = v => v < 0 ? 'port' : 'stbd'
+      $('tiles').innerHTML = [
+        tile('TWA', fmt(Math.abs(o.twa)), `° ${side(o.twa)}`, `uncorrected ${fmt(Math.abs(u.twa))}°`),
+        tile('TWS', fmt(o.tws), 'kn', `uncorrected ${fmt(u.tws)} kn`),
+        tile('TWD', o.twd == null ? '--' : fmt(o.twd, 0), '° T', o.twd == null ? 'no heading' : headingNote(o)),
+        tile('STW', fmt(o.stw, 2), 'kn', `paddlewheel ${fmt(r.input.stw, 2)} kn`),
+        tile('Leeway', fmt(Math.abs(o.leeway)), `° ${side(o.leeway)}`, r.input.heel == null ? 'no heel' : `heel ${fmt(r.input.heel, 0)}°`),
+        tile('Current', o.current ? fmt(o.current.drift, 2) : '--', o.current ? `kn · ${fmt(o.current.set, 0)}°` : 'kn', o.current ? '' : 'no SOG/COG or heading')
+      ].join('')
+      $('steps').innerHTML = r.steps.map(s => s.enabled
+        ? `<tr><th scope="row">${esc(s.name)}</th><td class="mono">${esc(s.input || '')}</td><td>${esc(s.skipped ? 'skipped — ' + s.skipped : s.detail || '')}</td><td class="mono">${esc(s.output || '')}</td></tr>`
+        : `<tr class="off"><th scope="row">${esc(s.name)}</th><td></td><td>off</td><td></td></tr>`
+      ).join('')
+    }
+
+    const inputs = live ? Object.entries(live.inputs) : []
+    $('inputs').innerHTML = inputs.length
+      ? inputs.sort().map(([path, i]) => `<tr><td>${esc(path)}</td><td>${esc(i.source)}</td><td class="num ${i.ageMs > STALE_MS ? 'warn' : ''}">${fmt(i.ageMs / 1000)} s</td></tr>`).join('')
+      : '<tr><td colspan="3" class="muted center">Nothing received yet</td></tr>'
+  }
+
+  // -- Calibration
+
+  function correctionIds () {
+    const known = Object.keys(CORRECTIONS)
+    const all = Object.keys(state.draft.corrections)
+    return known.filter(id => all.includes(id)).concat(all.filter(id => !known.includes(id)))
+  }
+
+  function renderCalibration () {
+    if (!state.draft) return
+    const ids = correctionIds()
+    if (!ids.includes(state.selected)) state.selected = ids[0]
+    $('corrList').innerHTML = ids.map(id => {
+      const c = state.draft.corrections[id]
+      const name = (CORRECTIONS[id] || {}).name || id
+      return `<li class="${id === state.selected ? 'selected' : ''}">` +
+        `<button type="button" data-select="${esc(id)}" aria-pressed="${id === state.selected}">${esc(name)}</button>` +
+        `<label><input type="checkbox" data-path="corrections.${esc(id)}.enabled" ${c.enabled ? 'checked' : ''} aria-label="Enable ${esc(name)}"></label></li>`
+    }).join('')
+
+    const id = state.selected
+    const c = state.draft.corrections[id]
+    const meta = CORRECTIONS[id] || { name: id, what: '' }
+    let body = ''
+    if (id === 'stw') {
+      body = grid('Linearity (kn added)', 'STW kn', `corrections.stw.linearity`, 'stw', [['Add', 'add']], c.linearity) +
+        grid('Heel correction (kn added)', 'Heel °', `corrections.stw.heel`, 'heel', [['Add', 'add']], c.heel)
+    } else if (id === 'leeway') {
+      body = `<div class="fields">${field('K', 'corrections.leeway.k', c.k, 0.01)}</div>`
+    } else if (id === 'twa' || id === 'tws') {
+      const rows = [['Upwind', 'upwind'], ['Reach', 'reach'], ['Downwind', 'downwind']]
+      body = grid(id === 'twa' ? 'Degrees added to |TWA|' : 'Percent applied to TWS', 'TWS kn', `corrections.${id}`, 'tws', rows, c)
+      if (id === 'twa') {
+        const a = c.angles
+        body += `<div class="fields">${field('Upwind row to (° TWA)', 'corrections.twa.angles.upwind', a.upwind, 1)}` +
+          `${field('Reach row at (° TWA)', 'corrections.twa.angles.reach', a.reach, 1)}` +
+          `${field('Downwind row from (° TWA)', 'corrections.twa.angles.downwind', a.downwind, 1)}</div>`
+      }
+    }
+    $('corrEditor').innerHTML =
+      `<div class="panel-head"><h2>${esc(meta.name)}</h2><span class="state ${c.enabled ? 'on' : ''}">${c.enabled ? 'Enabled' : 'Disabled'}</span></div>` +
+      `<p class="what muted">${esc(meta.what)}</p>${body}` +
+      `<div><button type="button" class="ghost" data-defaults="${esc(id)}">Reset to defaults</button></div>`
+  }
+
+  // A table whose first row is its axis (editable) and whose other rows are values.
+  function grid (title, axisLabel, base, axisKey, rows, obj) {
+    const axis = obj[axisKey]
+    const cell = (path, v, cls) => `<td><input type="number" step="any" class="${cls || ''}" data-path="${esc(path)}" value="${esc(v)}"></td>`
+    return `<div><h2>${esc(title)}</h2><div class="table-wrap"><table class="grid">` +
+      `<tr><th scope="row" class="muted">${esc(axisLabel)}</th>${axis.map((v, i) => cell(`${base}.${axisKey}.${i}`, v, 'axis')).join('')}</tr>` +
+      rows.map(([label, key]) => `<tr><th scope="row">${esc(label)}</th>${obj[key].map((v, i) => cell(`${base}.${key}.${i}`, v)).join('')}</tr>`).join('') +
+      '</table></div></div>'
+  }
+
+  function field (label, path, value, step) {
+    return `<label class="field">${esc(label)}<input type="number" step="${step}" data-path="${esc(path)}" value="${esc(value)}"></label>`
+  }
+
+  // -- Settings
+
+  const MODES = [
+    ['shadow', 'Shadow', 'Publish to separate …Corrected paths. Your instruments and displays carry on as before.'],
+    ['replace', 'Replace', 'Publish on the standard paths. Rank this plugin first in Server → Source Priorities, and zero the instrument’s own corrections so nothing is corrected twice.']
+  ]
+
+  function renderSettings () {
+    if (!state.draft) return
+    $('modes').innerHTML = '<legend class="sr-only">Publish mode</legend>' + MODES.map(([id, name, desc]) =>
+      `<label class="mode ${state.draft.mode === id ? 'checked' : ''}"><input type="radio" name="mode" value="${id}" data-path="mode" ${state.draft.mode === id ? 'checked' : ''}>` +
+      `<div><b>${esc(name)}</b><span>${esc(desc)}</span></div></label>`).join('')
+    const v = $('variation')
+    if (document.activeElement !== v) v.value = state.draft.variation
+    renderSources()
+  }
+
+  function renderSources () {
+    const seen = (state.live && state.live.sourcesSeen) || {}
+    $('sources').innerHTML = Object.entries(SOURCE_LABELS).map(([key, label]) => {
+      const chosen = state.draft.sources[key] || ''
+      const opts = Array.from(new Set([...(seen[key] || []), chosen].filter(Boolean)))
+      return `<label>${esc(label)}<select data-path="sources.${key}">` +
+        `<option value="">Any</option>` +
+        opts.map(s => `<option value="${esc(s)}" ${s === chosen ? 'selected' : ''}>${esc(s)}${(seen[key] || []).includes(s) ? '' : ' (not seen)'}</option>`).join('') +
+        '</select></label>'
+    }).join('')
+  }
+
+  // Sources arrive with live data; refresh the list unless a dropdown is in use.
+  function renderSourcesIfIdle () {
+    if (!state.draft || (document.activeElement && document.activeElement.tagName === 'SELECT')) return
+    renderSources()
+  }
+
+  // ---- wiring ----------------------------------------------------------------
+
+  function route () {
+    const v = location.hash.replace('#', '')
+    state.view = ['live', 'calibration', 'settings'].includes(v) ? v : 'live'
+    renderAll()
+  }
+
+  document.addEventListener('change', onEdit)
+  document.addEventListener('click', e => {
+    const sel = e.target.closest('[data-select]')
+    if (sel) { state.selected = sel.dataset.select; renderCalibration() }
+    const def = e.target.closest('[data-defaults]')
+    if (def && state.defaults) {
+      const id = def.dataset.defaults
+      state.draft.corrections[id] = clone(state.defaults.corrections[id])
+      renderAll()
+    }
+  })
+  $('save').addEventListener('click', save)
+  $('revert').addEventListener('click', () => {
+    state.draft = clone(state.saved)
+    $('saveErrors').textContent = ''
+    renderAll()
+  })
+  window.addEventListener('hashchange', route)
+  window.addEventListener('beforeunload', e => { if (state.draft && dirty()) { e.preventDefault(); e.returnValue = '' } })
+
+  route()
+  loadConfig()
+  pollLive()
+  setInterval(pollLive, LIVE_MS)
+})()

package/public/icon.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 64 64" role="img" aria-label="Performance processor">
+  <rect width="64" height="64" rx="10" fill="#0d1117"/>
+  <!-- hull, seen from above, heading up -->
+  <path d="M32 9 C 41 19 41 39 37.5 54 H 26.5 C 23 39 23 19 32 9 Z" fill="none" stroke="#e6edf3" stroke-width="3" stroke-linejoin="round"/>
+  <!-- measured wind, from ahead to starboard -->
+  <line x1="56" y1="12" x2="36" y2="30" stroke="#8b949e" stroke-width="3" stroke-linecap="round" stroke-dasharray="4 4"/>
+  <!-- corrected true wind -->
+  <line x1="58" y1="24" x2="38" y2="34" stroke="#4cd97b" stroke-width="3.5" stroke-linecap="round"/>
+  <path d="M42.5 29.5 l-4.5 4.5 6 1.5" fill="none" stroke="#4cd97b" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- the correction between them -->
+  <path d="M51 16.5 A 12 12 0 0 1 54 26" fill="none" stroke="#f0b429" stroke-width="3" stroke-linecap="round"/>
+  <!-- leeway: slip to leeward -->
+  <path d="M14 46 H 22" stroke="#58a6ff" stroke-width="3" stroke-linecap="round"/>
+  <path d="M17.5 42.5 l-3.5 3.5 3.5 3.5" fill="none" stroke="#58a6ff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/public/index.html

@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Performance Processor</title>
+  <link rel="icon" href="icon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header>
+    <div class="title">
+      <h1>Performance Processor</h1>
+      <span id="mode" class="badge">--</span>
+    </div>
+    <nav aria-label="Sections">
+      <a href="#live" data-view="live">Live</a>
+      <a href="#calibration" data-view="calibration">Calibration</a>
+      <a href="#settings" data-view="settings">Settings</a>
+    </nav>
+    <div id="status" class="muted status"></div>
+    <div id="conn" class="warn" hidden></div>
+  </header>
+
+  <div id="saveBar" class="save-bar" hidden>
+    <span>Unsaved changes</span>
+    <div id="saveErrors" class="errors"></div>
+    <button id="revert" type="button" class="ghost">Revert</button>
+    <button id="save" type="button" class="primary">Save</button>
+  </div>
+
+  <main>
+    <section id="view-live" class="view" hidden>
+      <div id="tiles" class="tiles"></div>
+      <div class="panel">
+        <div class="panel-head"><h2>Pipeline</h2><span id="liveAge" class="muted sub"></span></div>
+        <div class="table-wrap">
+          <table>
+            <thead><tr><th>Step</th><th>In</th><th>Correction</th><th>Out</th></tr></thead>
+            <tbody id="steps"><tr><td colspan="4" class="muted center">Waiting for data…</td></tr></tbody>
+          </table>
+        </div>
+      </div>
+      <div class="panel">
+        <div class="panel-head"><h2>Inputs</h2></div>
+        <div class="table-wrap">
+          <table>
+            <thead><tr><th>Path</th><th>Source</th><th class="num">Age</th></tr></thead>
+            <tbody id="inputs"></tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+
+    <section id="view-calibration" class="view" hidden>
+      <p class="muted sub intro">Corrections run top to bottom. Tick to enable; select one to edit its values.</p>
+      <div class="cal">
+        <ul id="corrList" class="corr-list" aria-label="Corrections"></ul>
+        <div id="corrEditor" class="panel corr-editor"></div>
+      </div>
+    </section>
+
+    <section id="view-settings" class="view" hidden>
+      <div class="panel">
+        <h2>Output</h2>
+        <fieldset id="modes" class="modes">
+          <legend class="sr-only">Publish mode</legend>
+        </fieldset>
+      </div>
+      <div class="panel">
+        <h2>Fallback magnetic variation</h2>
+        <p class="muted sub">Used only when nothing on the boat sends true heading or magnetic variation. Normally your GPS supplies variation and this is never used; the Live page shows which applies.</p>
+        <label class="field">Degrees east (west negative)
+          <input id="variation" type="number" step="0.1" data-path="variation">
+        </label>
+      </div>
+      <div class="panel">
+        <h2>Input sources</h2>
+        <p class="muted sub">Choose the instrument to read for each input. "Any" takes every source except this plugin. Pick your instruments, not another correcting plugin, so nothing is corrected twice.</p>
+        <div id="sources" class="sources"></div>
+      </div>
+    </section>
+  </main>
+
+  <script src="app.js"></script>
+</body>
+</html>

package/public/style.css

@@ -0,0 +1,208 @@
+:root {
+  --bg: #0d1117;
+  --panel: #161b22;
+  --fg: #e6edf3;
+  --muted: #8b949e;
+  --line: #30363d;
+  --active: #1f3a5f;
+  --good: #4cd97b;
+  --bad: #ff6b6b;
+  --warn: #f0b429;
+  --warn-bg: #3d2e05;
+  --accent: #58a6ff;
+  --cell: #12202d;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg: #ffffff;
+    --panel: #f6f8fa;
+    --fg: #1f2328;
+    --muted: #656d76;
+    --line: #d0d7de;
+    --active: #dbeafe;
+    --good: #1b7f3b;
+    --bad: #c62828;
+    --warn: #8a5a00;
+    --warn-bg: #fff4d6;
+    --accent: #0969da;
+    --cell: #eef4fb;
+  }
+}
+
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+body {
+  margin: 0;
+  padding: 16px;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 18px;
+}
+
+header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 20px;
+  margin-bottom: 16px;
+}
+.title { display: flex; align-items: baseline; gap: 10px; }
+h1 { margin: 0; font-size: 1.4em; }
+h2 { margin: 0 0 10px; font-size: 0.85em; color: var(--muted); text-transform: uppercase; font-weight: 600; }
+.status { width: 100%; font-size: 0.8em; }
+
+nav { display: flex; gap: 4px; }
+nav a {
+  padding: 10px 14px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  color: var(--fg);
+  text-decoration: none;
+  font-size: 0.9em;
+}
+nav a:hover { border-color: var(--accent); }
+nav a.current { background: var(--active); border-color: var(--accent); font-weight: 600; }
+
+.badge {
+  font-size: 0.7em;
+  font-weight: 700;
+  padding: 3px 8px;
+  border-radius: 999px;
+  background: var(--warn-bg);
+  color: var(--warn);
+  text-transform: uppercase;
+}
+.badge.replace { background: var(--active); color: var(--accent); }
+
+.muted { color: var(--muted); }
+.sub { font-size: 0.8em; }
+.warn { color: var(--warn); font-weight: 600; }
+.center { text-align: center; }
+.num { text-align: right; font-variant-numeric: tabular-nums; }
+.intro { margin: 0 0 12px; }
+
+main { display: flex; flex-direction: column; gap: 16px; }
+.view { display: flex; flex-direction: column; gap: 16px; }
+
+.panel { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--panel); }
+.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
+
+/* Live */
+.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
+.tile { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel); }
+.tile .label { font-size: 0.7em; color: var(--muted); text-transform: uppercase; font-weight: 600; }
+.tile .value { font-size: 1.9em; font-weight: 600; font-variant-numeric: tabular-nums; }
+.tile .unit { font-size: 0.5em; color: var(--muted); font-weight: 400; margin-left: 4px; }
+.tile .raw { font-size: 0.7em; color: var(--muted); font-variant-numeric: tabular-nums; }
+
+.table-wrap { overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; }
+th, td { padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; text-align: left; }
+th { font-size: 0.75em; color: var(--muted); text-transform: uppercase; }
+tr.off td { color: var(--muted); }
+td.mono { font-variant-numeric: tabular-nums; }
+
+/* Calibration */
+.cal { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
+.corr-list {
+  list-style: none;
+  margin: 0;
+  padding: 4px 0;
+  flex: 1 1 240px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+}
+.corr-list li { display: flex; align-items: center; }
+.corr-list li.selected { background: var(--active); box-shadow: inset 3px 0 0 var(--accent); }
+.corr-list button {
+  flex: 1;
+  min-height: 48px;
+  padding: 6px 12px;
+  background: transparent;
+  color: var(--fg);
+  border: 0;
+  text-align: left;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+.corr-list label { display: flex; align-items: center; justify-content: center; width: 52px; min-height: 48px; cursor: pointer; }
+.corr-list input, .modes input { width: 20px; height: 20px; accent-color: var(--accent); }
+
+.corr-editor { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
+.corr-editor h2 { font-size: 1.1em; color: var(--fg); text-transform: none; margin: 0; }
+.corr-editor .what { margin: 0; font-size: 0.85em; }
+.state { font-size: 0.8em; font-weight: 600; color: var(--muted); }
+.state.on { color: var(--good); }
+
+.grid input, .field input, .sources select {
+  font: inherit;
+  font-size: 0.9em;
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 6px 8px;
+}
+.grid { border-collapse: separate; border-spacing: 4px; width: auto; }
+.grid th, .grid td { border: 0; padding: 0; }
+.grid th { padding: 0 6px; }
+.grid input { width: 4.6em; text-align: right; font-variant-numeric: tabular-nums; background: var(--cell); }
+.grid input.axis { background: var(--bg); color: var(--muted); }
+.grid input:focus, .field input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
+.fields { display: flex; flex-wrap: wrap; gap: 16px; }
+.field { display: flex; flex-direction: column; gap: 4px; font-size: 0.8em; font-weight: 600; }
+.field input { width: 7em; }
+
+/* Settings */
+.modes { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.mode { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
+.mode.checked { border-color: var(--accent); background: var(--active); }
+.mode b { display: block; }
+.mode span { font-size: 0.8em; color: var(--muted); }
+.sources { display: flex; flex-direction: column; }
+.sources label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
+.sources select { min-width: 12em; min-height: 40px; }
+
+/* Save bar stays in view while editing */
+.save-bar {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  padding: 8px 12px;
+  margin-bottom: 12px;
+  border: 1px solid var(--warn);
+  border-radius: 8px;
+  background: var(--warn-bg);
+  color: var(--warn);
+  font-weight: 600;
+}
+.save-bar .errors { flex: 1; font-weight: 400; font-size: 0.8em; color: var(--bad); }
+button.primary, button.ghost {
+  min-height: 44px;
+  padding: 0 16px;
+  font: inherit;
+  font-size: 0.9em;
+  font-weight: 600;
+  border-radius: 8px;
+  cursor: pointer;
+}
+button.primary { background: var(--accent); color: var(--bg); border: 1px solid var(--accent); }
+button.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
+button:disabled { opacity: 0.5; cursor: default; }
+
+@media (max-width: 600px) {
+  body { font-size: 16px; padding: 10px; }
+  th, td { padding: 6px 5px; }
+  .tile .value { font-size: 1.5em; }
+  .grid input { width: 3.8em; }
+}