Der nächste Layer ist jetzt als echte gemeinsame Außenkante umgesetzt. Das neue API-Crate in [server.rs](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/crates/infinity_host_api/src/server.rs>), [dto.rs](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/crates/infinity_host_api/src/dto.rs>) und [main.rs](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/crates/infinity_host_api/src/main.rs>) stellt die geforderten versionierten Endpunkte bereit: GET /api/v1/snapshot, GET /api/v1/catalog, GET /api/v1/presets, GET /api/v1/groups, POST /api/v1/command und WS /api/v1/stream. Die API trennt jetzt sauber zwischen Command-, State-, Preview- und Event-Modell, inklusive stabiler Außen-Enums und dokumentierten Fehlerobjekten statt eines unreflektierten 1:1-Core-Leaks.

Darauf sitzt die erste Web-UI V1 direkt gegen diese API in [index.html](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/web/v1/index.html>), [app.js](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/web/v1/app.js>) und [styles.css](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/web/v1/styles.css>). Sie enthält Pattern-/Preset-Auswahl, globale Regler, Gruppenauswahl, Übergänge, Preview, Snapshot-Anzeige und Event-Feed. Die technische Desktop-GUI bleibt bewusst die Engineering-/Diagnoseoberfläche; die kreative Web-UI baut nicht an einer Parallelarchitektur vorbei. Contract-Tests liegen in [contract.rs](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/crates/infinity_host_api/tests/contract.rs>), und die API ist mit Beispiel-Responses in [docs/host_api.md](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/docs/host_api.md>) dokumentiert. Zusätzlich habe ich [README.md](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/README.md>), [docs/build_and_deploy.md](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/docs/build_and_deploy.md>) und [docs/architecture.md](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/docs/architecture.md>) auf den neuen Stand gebracht. Verifiziert habe ich: - `cargo check -p infinity_host_api` - `cargo test -p infinity_host_api` - `cargo test -q` Nicht verifiziert habe ich eine separate JS-Syntaxprüfung mit `node --check`, weil `node` in dieser Umgebung nicht installiert ist.
2026-04-17 11:58:07 +02:00
parent 9457666fd6
commit a37a3c5cbe
16 changed files with 3166 additions and 55 deletions
--- a/web/v1/app.js
+++ b/web/v1/app.js
@@ -0,0 +1,591 @@
+(function () {
+  const apiState = {
+    snapshot: null,
+    catalog: null,
+    presets: [],
+    groups: [],
+    events: [],
+    ws: null,
+    commandTimers: new Map(),
+  };
+
+  const dom = {
+    projectName: document.getElementById("project-name"),
+    topologyLabel: document.getElementById("topology-label"),
+    connectionPill: document.getElementById("connection-pill"),
+    previewUpdated: document.getElementById("preview-updated"),
+    refreshButton: document.getElementById("refresh-button"),
+    patternSelect: document.getElementById("pattern-select"),
+    transitionSlider: document.getElementById("transition-slider"),
+    transitionValue: document.getElementById("transition-value"),
+    brightnessSlider: document.getElementById("brightness-slider"),
+    brightnessValue: document.getElementById("brightness-value"),
+    blackoutButton: document.getElementById("blackout-button"),
+    presetList: document.getElementById("preset-list"),
+    groupList: document.getElementById("group-list"),
+    sceneParams: document.getElementById("scene-params"),
+    previewGrid: document.getElementById("preview-grid"),
+    summaryCards: document.getElementById("summary-cards"),
+    snapshotJson: document.getElementById("snapshot-json"),
+    eventList: document.getElementById("event-list"),
+  };
+
+  function init() {
+    bindControls();
+    refreshAll();
+    connectStream();
+  }
+
+  function bindControls() {
+    dom.refreshButton.addEventListener("click", () => refreshAll());
+
+    dom.patternSelect.addEventListener("change", (event) => {
+      sendCommand({
+        type: "select_pattern",
+        payload: { pattern_id: event.target.value },
+      });
+    });
+
+    dom.transitionSlider.addEventListener("input", (event) => {
+      const value = Number(event.target.value);
+      dom.transitionValue.textContent = `${value} ms`;
+      debounceCommand("transition", {
+        type: "set_transition_duration_ms",
+        payload: { duration_ms: value },
+      });
+    });
+
+    dom.brightnessSlider.addEventListener("input", (event) => {
+      const value = Number(event.target.value);
+      dom.brightnessValue.textContent = `${Math.round(value * 100)}%`;
+      debounceCommand("brightness", {
+        type: "set_master_brightness",
+        payload: { value },
+      });
+    });
+
+    dom.blackoutButton.addEventListener("click", () => {
+      const enabled = !(apiState.snapshot?.state?.global?.blackout ?? false);
+      sendCommand({
+        type: "set_blackout",
+        payload: { enabled },
+      });
+    });
+  }
+
+  async function refreshAll() {
+    setConnectionState("connecting", "loading");
+    try {
+      const [snapshot, catalog, presets, groups] = await Promise.all([
+        fetchJson("/api/v1/snapshot"),
+        fetchJson("/api/v1/catalog"),
+        fetchJson("/api/v1/presets"),
+        fetchJson("/api/v1/groups"),
+      ]);
+
+      apiState.snapshot = snapshot;
+      apiState.catalog = catalog;
+      apiState.presets = presets.presets || catalog.presets || [];
+      apiState.groups = groups.groups || catalog.groups || [];
+
+      renderAll();
+      setConnectionState("online", "HTTP snapshot synced");
+    } catch (error) {
+      console.error(error);
+      setConnectionState("offline", "snapshot fetch failed");
+      pushEvent({
+        at: new Date().toLocaleTimeString(),
+        message: `HTTP refresh failed: ${error.message}`,
+      });
+    }
+  }
+
+  function connectStream() {
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const url = `${protocol}//${window.location.host}/api/v1/stream`;
+    const socket = new WebSocket(url);
+    apiState.ws = socket;
+
+    socket.addEventListener("open", () => {
+      setConnectionState("online", "stream connected");
+      pushEvent({
+        at: new Date().toLocaleTimeString(),
+        message: "WebSocket stream connected",
+      });
+    });
+
+    socket.addEventListener("message", (event) => {
+      const envelope = JSON.parse(event.data);
+      handleStreamEnvelope(envelope);
+    });
+
+    socket.addEventListener("close", () => {
+      setConnectionState("offline", "stream disconnected");
+      pushEvent({
+        at: new Date().toLocaleTimeString(),
+        message: "WebSocket stream closed, retrying",
+      });
+      window.setTimeout(connectStream, 1500);
+    });
+
+    socket.addEventListener("error", () => {
+      setConnectionState("warning", "stream error");
+    });
+  }
+
+  function handleStreamEnvelope(envelope) {
+    const message = envelope.message;
+    if (!message) {
+      return;
+    }
+
+    if (!apiState.snapshot) {
+      apiState.snapshot = {
+        api_version: envelope.api_version,
+        generated_at_millis: envelope.generated_at_millis,
+        state: null,
+        preview: null,
+      };
+    }
+
+    if (message.type === "snapshot") {
+      apiState.snapshot.api_version = envelope.api_version;
+      apiState.snapshot.generated_at_millis = envelope.generated_at_millis;
+      apiState.snapshot.state = message.payload;
+      renderState();
+      return;
+    }
+
+    if (message.type === "preview") {
+      apiState.snapshot.preview = message.payload;
+      apiState.snapshot.generated_at_millis = envelope.generated_at_millis;
+      renderPreview();
+      renderSnapshotJson();
+      return;
+    }
+
+    if (message.type === "event") {
+      pushEvent({
+        at: `${envelope.generated_at_millis} ms`,
+        message: message.payload.message,
+      });
+    }
+  }
+
+  async function sendCommand(command) {
+    try {
+      const response = await fetchJson("/api/v1/command", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          request_id: `web-${Date.now()}`,
+          command,
+        }),
+      });
+      pushEvent({
+        at: new Date().toLocaleTimeString(),
+        message: response.summary,
+      });
+      await refreshAll();
+    } catch (error) {
+      console.error(error);
+      pushEvent({
+        at: new Date().toLocaleTimeString(),
+        message: `Command failed: ${error.message}`,
+      });
+    }
+  }
+
+  function debounceCommand(key, command) {
+    const existing = apiState.commandTimers.get(key);
+    if (existing) {
+      window.clearTimeout(existing);
+    }
+    const timeoutId = window.setTimeout(() => {
+      sendCommand(command);
+      apiState.commandTimers.delete(key);
+    }, 120);
+    apiState.commandTimers.set(key, timeoutId);
+  }
+
+  async function fetchJson(url, options) {
+    const response = await window.fetch(url, options);
+    const body = await response.text();
+    let payload = null;
+    try {
+      payload = body ? JSON.parse(body) : null;
+    } catch (error) {
+      throw new Error(`Invalid JSON from ${url}`);
+    }
+
+    if (!response.ok) {
+      const message = payload?.error?.message || payload?.error || response.statusText;
+      throw new Error(message);
+    }
+    return payload;
+  }
+
+  function renderAll() {
+    renderState();
+    renderPreview();
+    renderEvents();
+  }
+
+  function renderState() {
+    if (!apiState.snapshot?.state) {
+      return;
+    }
+
+    const snapshot = apiState.snapshot;
+    const state = snapshot.state;
+    const global = state.global;
+    const scene = state.active_scene;
+
+    dom.projectName.textContent = state.system.project_name;
+    dom.topologyLabel.textContent = `${state.system.topology_label} / API ${snapshot.api_version}`;
+
+    dom.patternSelect.innerHTML = "";
+    (apiState.catalog?.patterns || []).forEach((pattern) => {
+      const option = document.createElement("option");
+      option.value = pattern.pattern_id;
+      option.textContent = `${pattern.display_name} (${pattern.pattern_id})`;
+      option.selected = pattern.pattern_id === global.selected_pattern;
+      dom.patternSelect.appendChild(option);
+    });
+
+    dom.transitionSlider.value = String(global.transition_duration_ms);
+    dom.transitionValue.textContent = `${global.transition_duration_ms} ms`;
+    dom.brightnessSlider.value = String(global.master_brightness);
+    dom.brightnessValue.textContent = `${Math.round(global.master_brightness * 100)}%`;
+    dom.blackoutButton.textContent = global.blackout ? "Release blackout" : "Enable blackout";
+    dom.blackoutButton.classList.toggle("is-active", global.blackout);
+
+    renderPresetButtons(scene, global);
+    renderGroupButtons(global);
+    renderSceneParameters(scene);
+    renderSummaryCards(state, snapshot.generated_at_millis);
+    renderSnapshotJson();
+    dom.previewUpdated.textContent = `${snapshot.generated_at_millis} ms`;
+  }
+
+  function renderPresetButtons(scene) {
+    dom.presetList.innerHTML = "";
+    const presets = apiState.presets || [];
+    if (!presets.length) {
+      dom.presetList.innerHTML = '<div class="empty-state">No presets available.</div>';
+      return;
+    }
+
+    presets.forEach((preset) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "preset-button";
+      button.classList.toggle("active", scene.preset_id === preset.preset_id);
+      button.innerHTML = `
+        <strong>${preset.preset_id}</strong>
+        <div class="pill-subtext">${preset.pattern_id} / ${preset.transition_duration_ms} ms</div>
+      `;
+      button.addEventListener("click", () =>
+        sendCommand({
+          type: "recall_preset",
+          payload: { preset_id: preset.preset_id },
+        })
+      );
+      dom.presetList.appendChild(button);
+    });
+  }
+
+  function renderGroupButtons(global) {
+    dom.groupList.innerHTML = "";
+
+    const allButton = document.createElement("button");
+    allButton.type = "button";
+    allButton.className = "group-button";
+    allButton.classList.toggle("active", !global.selected_group);
+    allButton.innerHTML = "<strong>all_panels</strong><div class=\"pill-subtext\">global target</div>";
+    allButton.addEventListener("click", () =>
+      sendCommand({
+        type: "select_group",
+        payload: { group_id: null },
+      })
+    );
+    dom.groupList.appendChild(allButton);
+
+    (apiState.groups || []).forEach((group) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "group-button";
+      button.classList.toggle("active", group.group_id === global.selected_group);
+      button.innerHTML = `
+        <strong>${group.group_id}</strong>
+        <div class="pill-subtext">${group.member_count} members</div>
+      `;
+      button.addEventListener("click", () =>
+        sendCommand({
+          type: "select_group",
+          payload: { group_id: group.group_id },
+        })
+      );
+      dom.groupList.appendChild(button);
+    });
+  }
+
+  function renderSceneParameters(scene) {
+    dom.sceneParams.innerHTML = "";
+    const parameters = scene.parameters || [];
+    if (!parameters.length) {
+      dom.sceneParams.innerHTML =
+        '<div class="empty-state">This pattern has no exposed scene parameters.</div>';
+      return;
+    }
+
+    parameters.forEach((parameter) => {
+      const card = document.createElement("div");
+      card.className = "parameter-card";
+
+      if (parameter.kind === "scalar") {
+        const currentValue = Number(parameter.value.value || 0);
+        card.innerHTML = `
+          <label>
+            <strong>${parameter.label}</strong>
+            <span>${parameter.key}</span>
+            <input
+              type="range"
+              min="${parameter.min_scalar ?? 0}"
+              max="${parameter.max_scalar ?? 1}"
+              step="${parameter.step ?? 0.01}"
+              value="${currentValue}"
+            />
+            <span>${currentValue.toFixed(2)}</span>
+          </label>
+        `;
+        const slider = card.querySelector("input");
+        const readout = card.querySelector("span:last-of-type");
+        slider.addEventListener("input", (event) => {
+          const value = Number(event.target.value);
+          readout.textContent = value.toFixed(2);
+          debounceCommand(`param:${parameter.key}`, {
+            type: "set_scene_parameter",
+            payload: {
+              key: parameter.key,
+              value: { kind: "scalar", value },
+            },
+          });
+        });
+      } else if (parameter.kind === "toggle") {
+        const checked = Boolean(parameter.value.value);
+        card.innerHTML = `
+          <label>
+            <strong>${parameter.label}</strong>
+            <span>${parameter.key}</span>
+            <input type="checkbox" ${checked ? "checked" : ""} />
+          </label>
+        `;
+        const checkbox = card.querySelector("input");
+        checkbox.addEventListener("change", (event) =>
+          sendCommand({
+            type: "set_scene_parameter",
+            payload: {
+              key: parameter.key,
+              value: { kind: "toggle", value: event.target.checked },
+            },
+          })
+        );
+      } else {
+        const currentValue = parameter.value.value || "";
+        card.innerHTML = `
+          <label>
+            <strong>${parameter.label}</strong>
+            <span>${parameter.key}</span>
+            <input type="text" value="${escapeHtml(currentValue)}" />
+          </label>
+        `;
+        const input = card.querySelector("input");
+        input.addEventListener("change", (event) =>
+          sendCommand({
+            type: "set_scene_parameter",
+            payload: {
+              key: parameter.key,
+              value: { kind: "text", value: event.target.value },
+            },
+          })
+        );
+      }
+
+      dom.sceneParams.appendChild(card);
+    });
+  }
+
+  function renderPreview() {
+    const preview = apiState.snapshot?.preview;
+    dom.previewGrid.innerHTML = "";
+    if (!preview?.panels?.length) {
+      dom.previewGrid.innerHTML =
+        '<div class="empty-state">Preview stream is waiting for panel snapshots.</div>';
+      return;
+    }
+
+    const panels = [...preview.panels].sort(comparePreviewPanels);
+    panels.forEach((panel) => {
+      const card = document.createElement("article");
+      card.className = "preview-card";
+      card.style.setProperty("--preview-color", panel.representative_color_hex);
+      card.innerHTML = `
+        <div class="preview-card-header">
+          <div>
+            <h3>${panel.node_id}</h3>
+            <div class="preview-meta">${panel.panel_position} / ${panel.source}</div>
+          </div>
+          <strong>${panel.energy_percent}%</strong>
+        </div>
+        <div class="preview-swatch"></div>
+        <div class="sample-row">
+          ${panel.sample_led_hex
+            .map(
+              (hex) =>
+                `<span class="sample-dot" style="--sample-color: ${hex}" title="${hex}"></span>`
+            )
+            .join("")}
+        </div>
+      `;
+      dom.previewGrid.appendChild(card);
+    });
+  }
+
+  function renderSummaryCards(state, generatedAtMillis) {
+    const scene = state.active_scene;
+    const global = state.global;
+    const engine = state.engine;
+    const nodeStats = summarizeNodes(state.nodes || []);
+
+    const cards = [
+      {
+        label: "Active Pattern",
+        value: scene.pattern_id,
+        detail: scene.preset_id ? `Preset ${scene.preset_id}` : "live scene",
+      },
+      {
+        label: "Group Target",
+        value: scene.target_group || "all_panels",
+        detail: `${(apiState.groups || []).length} groups available`,
+      },
+      {
+        label: "Transition",
+        value: `${global.transition_duration_ms} ms`,
+        detail: engine.active_transition
+          ? `${engine.active_transition.style} ${Math.round(engine.active_transition.progress * 100)}%`
+          : "idle",
+      },
+      {
+        label: "Brightness",
+        value: `${Math.round(global.master_brightness * 100)}%`,
+        detail: global.blackout ? "blackout active" : "output live",
+      },
+      {
+        label: "Engine",
+        value: `${engine.frame_hz} fps target`,
+        detail: `${engine.logic_hz} hz logic / frame ${engine.frame_index}`,
+      },
+      {
+        label: "Nodes",
+        value: `${nodeStats.online}/${state.nodes.length} online`,
+        detail: `${nodeStats.degraded} degraded / ${nodeStats.offline} offline`,
+      },
+      {
+        label: "Preview Timestamp",
+        value: `${generatedAtMillis} ms`,
+        detail: `${state.system.schema_version} schema`,
+      },
+    ];
+
+    dom.summaryCards.innerHTML = cards
+      .map(
+        (card) => `
+          <div class="summary-card">
+            <strong>${card.value}</strong>
+            <span>${card.label}</span>
+            <div class="preview-meta">${card.detail}</div>
+          </div>
+        `
+      )
+      .join("");
+  }
+
+  function renderSnapshotJson() {
+    dom.snapshotJson.textContent = apiState.snapshot
+      ? JSON.stringify(apiState.snapshot, null, 2)
+      : "No snapshot loaded.";
+  }
+
+  function pushEvent(entry) {
+    apiState.events.unshift(entry);
+    apiState.events = apiState.events.slice(0, 12);
+    renderEvents();
+  }
+
+  function renderEvents() {
+    if (!apiState.events.length) {
+      dom.eventList.innerHTML = '<div class="empty-state">No websocket notices yet.</div>';
+      return;
+    }
+
+    dom.eventList.innerHTML = apiState.events
+      .map(
+        (entry) => `
+          <article class="event-item">
+            <div class="event-meta">${entry.at}</div>
+            <strong>${entry.message}</strong>
+          </article>
+        `
+      )
+      .join("");
+  }
+
+  function setConnectionState(kind, message) {
+    dom.connectionPill.textContent = message;
+    dom.connectionPill.className =
+      kind === "online"
+        ? "pill pill-online"
+        : kind === "warning"
+          ? "pill pill-warning"
+          : "pill pill-offline";
+  }
+
+  function summarizeNodes(nodes) {
+    return nodes.reduce(
+      (summary, node) => {
+        summary[node.connection] += 1;
+        return summary;
+      },
+      { online: 0, degraded: 0, offline: 0 }
+    );
+  }
+
+  function comparePreviewPanels(left, right) {
+    const leftNode = left.node_id.localeCompare(right.node_id);
+    if (leftNode !== 0) {
+      return leftNode;
+    }
+    return panelPositionRank(left.panel_position) - panelPositionRank(right.panel_position);
+  }
+
+  function panelPositionRank(position) {
+    if (position === "top") {
+      return 0;
+    }
+    if (position === "middle") {
+      return 1;
+    }
+    return 2;
+  }
+
+  function escapeHtml(value) {
+    return String(value)
+      .replaceAll("&", "&amp;")
+      .replaceAll("<", "&lt;")
+      .replaceAll(">", "&gt;")
+      .replaceAll('"', "&quot;");
+  }
+
+  init();
+})();
--- a/web/v1/index.html
+++ b/web/v1/index.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Infinity Vis Creative Console</title>
+    <link rel="stylesheet" href="/styles.css" />
+  </head>
+  <body>
+    <div class="page-shell">
+      <header class="hero">
+        <div class="hero-copy">
+          <p class="eyebrow">Infinity Vis / Creative Surface</p>
+          <h1 id="project-name">Loading project...</h1>
+          <p id="topology-label" class="hero-subtitle">
+            Shared host API bootstrap in progress.
+          </p>
+        </div>
+        <div class="hero-status">
+          <div class="status-card">
+            <span class="status-label">API stream</span>
+            <span id="connection-pill" class="pill pill-offline">connecting</span>
+          </div>
+          <div class="status-card">
+            <span class="status-label">Preview refresh</span>
+            <span id="preview-updated">waiting for data</span>
+          </div>
+          <button id="refresh-button" class="ghost-button" type="button">
+            Refresh snapshot
+          </button>
+        </div>
+      </header>
+
+      <main class="layout">
+        <section class="panel controls-panel">
+          <div class="section-heading">
+            <h2>Global Look</h2>
+            <p>Pattern, preset, group and transition control against the shared host API.</p>
+          </div>
+
+          <div class="control-grid">
+            <label class="field">
+              <span>Pattern</span>
+              <select id="pattern-select"></select>
+            </label>
+
+            <label class="field">
+              <span>Transition</span>
+              <input id="transition-slider" type="range" min="0" max="3000" step="10" />
+              <strong id="transition-value">0 ms</strong>
+            </label>
+
+            <label class="field">
+              <span>Master Brightness</span>
+              <input id="brightness-slider" type="range" min="0" max="1" step="0.01" />
+              <strong id="brightness-value">0%</strong>
+            </label>
+
+            <div class="field">
+              <span>Blackout</span>
+              <button id="blackout-button" class="danger-button" type="button">
+                Enable blackout
+              </button>
+            </div>
+          </div>
+
+          <div class="subsection">
+            <div class="subsection-heading">
+              <h3>Presets</h3>
+              <p>Recall look snapshots without leaving the creative console.</p>
+            </div>
+            <div id="preset-list" class="pill-row"></div>
+          </div>
+
+          <div class="subsection">
+            <div class="subsection-heading">
+              <h3>Groups</h3>
+              <p>Focus looks on a subset while keeping the core scene model shared.</p>
+            </div>
+            <div id="group-list" class="pill-row"></div>
+          </div>
+
+          <div class="subsection">
+            <div class="subsection-heading">
+              <h3>Scene Parameters</h3>
+              <p>Rendered from the active scene schema, not hardcoded per frontend.</p>
+            </div>
+            <div id="scene-params" class="parameter-grid"></div>
+          </div>
+        </section>
+
+        <section class="panel preview-panel">
+          <div class="section-heading">
+            <h2>Preview</h2>
+            <p>Live panel previews from the host snapshot and stream feed.</p>
+          </div>
+          <div id="preview-grid" class="preview-grid"></div>
+        </section>
+
+        <section class="panel summary-panel">
+          <div class="section-heading">
+            <h2>Snapshot</h2>
+            <p>Operator-friendly scene state with a raw API view underneath.</p>
+          </div>
+          <div id="summary-cards" class="summary-cards"></div>
+          <pre id="snapshot-json" class="snapshot-json"></pre>
+        </section>
+
+        <section class="panel event-panel">
+          <div class="section-heading">
+            <h2>Event Stream</h2>
+            <p>Recent notices from the websocket feed.</p>
+          </div>
+          <div id="event-list" class="event-list"></div>
+        </section>
+      </main>
+    </div>
+
+    <script src="/app.js"></script>
+  </body>
+</html>
--- a/web/v1/styles.css
+++ b/web/v1/styles.css
@@ -0,0 +1,490 @@
+:root {
+  --bg: #f3ede2;
+  --bg-secondary: #efe2cd;
+  --surface: rgba(255, 251, 244, 0.82);
+  --surface-strong: rgba(255, 248, 238, 0.94);
+  --line: rgba(56, 63, 61, 0.12);
+  --text: #1f2424;
+  --muted: #596463;
+  --accent: #ea6a36;
+  --accent-strong: #c34d1c;
+  --accent-cool: #198c8f;
+  --danger: #bc2f2f;
+  --shadow: 0 24px 60px rgba(91, 63, 38, 0.12);
+  --radius-xl: 28px;
+  --radius-lg: 22px;
+  --radius-md: 16px;
+  --radius-sm: 12px;
+  --font-sans: "Segoe UI Variable", "Aptos", "Trebuchet MS", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+}
+
+body {
+  background:
+    radial-gradient(circle at 10% 15%, rgba(234, 106, 54, 0.22), transparent 28%),
+    radial-gradient(circle at 88% 12%, rgba(25, 140, 143, 0.16), transparent 24%),
+    radial-gradient(circle at 84% 78%, rgba(239, 202, 130, 0.24), transparent 22%),
+    linear-gradient(160deg, var(--bg) 0%, var(--bg-secondary) 52%, #f6f2ea 100%);
+  color: var(--text);
+  font-family: var(--font-sans);
+}
+
+body::before,
+body::after {
+  content: "";
+  position: fixed;
+  inset: auto;
+  pointer-events: none;
+  border-radius: 999px;
+  filter: blur(32px);
+  opacity: 0.55;
+}
+
+body::before {
+  width: 280px;
+  height: 280px;
+  top: 18%;
+  right: -80px;
+  background: rgba(234, 106, 54, 0.16);
+}
+
+body::after {
+  width: 320px;
+  height: 320px;
+  bottom: -120px;
+  left: -60px;
+  background: rgba(25, 140, 143, 0.12);
+}
+
+.page-shell {
+  width: min(1440px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 28px 0 40px;
+}
+
+.hero,
+.panel {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(18px);
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
+  gap: 24px;
+  padding: 28px;
+  border-radius: var(--radius-xl);
+  animation: rise-in 520ms ease-out;
+}
+
+.hero-copy h1,
+.section-heading h2,
+.subsection-heading h3 {
+  margin: 0;
+  letter-spacing: -0.03em;
+}
+
+.hero-copy h1 {
+  font-size: clamp(2rem, 3vw, 3.6rem);
+  line-height: 0.95;
+}
+
+.eyebrow {
+  margin: 0 0 10px;
+  color: var(--accent-strong);
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.hero-subtitle,
+.section-heading p,
+.subsection-heading p,
+.field span,
+.event-meta,
+.status-label,
+.preview-meta,
+.pill-subtext {
+  color: var(--muted);
+}
+
+.hero-status {
+  display: grid;
+  gap: 14px;
+  align-content: start;
+}
+
+.status-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  background: var(--surface-strong);
+  border-radius: var(--radius-md);
+  border: 1px solid rgba(56, 63, 61, 0.08);
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 98px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  font-size: 0.82rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.pill-online {
+  background: rgba(25, 140, 143, 0.14);
+  color: #0f6c6d;
+}
+
+.pill-offline {
+  background: rgba(188, 47, 47, 0.14);
+  color: var(--danger);
+}
+
+.pill-warning {
+  background: rgba(234, 106, 54, 0.14);
+  color: var(--accent-strong);
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
+  gap: 20px;
+  margin-top: 22px;
+}
+
+.panel {
+  border-radius: var(--radius-lg);
+  padding: 22px;
+}
+
+.controls-panel,
+.summary-panel {
+  grid-column: span 1;
+}
+
+.preview-panel,
+.event-panel {
+  grid-column: span 1;
+}
+
+.section-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+  gap: 18px;
+  margin-bottom: 18px;
+}
+
+.section-heading p,
+.subsection-heading p {
+  margin: 0;
+  max-width: 34rem;
+}
+
+.control-grid,
+.parameter-grid,
+.summary-cards {
+  display: grid;
+  gap: 14px;
+}
+
+.control-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.parameter-grid,
+.summary-cards {
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.field,
+.parameter-card,
+.summary-card,
+.preview-card,
+.event-item {
+  background: var(--surface-strong);
+  border: 1px solid rgba(56, 63, 61, 0.08);
+  border-radius: var(--radius-md);
+}
+
+.field {
+  display: grid;
+  gap: 10px;
+  padding: 14px;
+}
+
+.field strong {
+  color: var(--accent-strong);
+  font-size: 1rem;
+}
+
+.subsection {
+  margin-top: 24px;
+}
+
+.subsection-heading {
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+  align-items: baseline;
+  margin-bottom: 12px;
+}
+
+.pill-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+button,
+select,
+input,
+textarea {
+  font: inherit;
+}
+
+button,
+select {
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+}
+
+button {
+  cursor: pointer;
+  transition:
+    transform 140ms ease,
+    box-shadow 140ms ease,
+    background-color 140ms ease,
+    border-color 140ms ease;
+}
+
+button:hover {
+  transform: translateY(-1px);
+}
+
+button:active {
+  transform: translateY(0);
+}
+
+select,
+input[type="text"] {
+  width: 100%;
+  padding: 12px 14px;
+  background: #fffdfa;
+  border: 1px solid rgba(56, 63, 61, 0.14);
+  color: var(--text);
+}
+
+input[type="range"] {
+  width: 100%;
+  accent-color: var(--accent);
+}
+
+.ghost-button,
+.preset-button,
+.group-button {
+  padding: 11px 14px;
+  background: #fff9f1;
+  border-color: rgba(56, 63, 61, 0.12);
+  color: var(--text);
+}
+
+.preset-button.active,
+.group-button.active {
+  background: linear-gradient(135deg, rgba(234, 106, 54, 0.16), rgba(25, 140, 143, 0.16));
+  border-color: rgba(234, 106, 54, 0.35);
+}
+
+.danger-button {
+  padding: 12px 16px;
+  background: rgba(188, 47, 47, 0.1);
+  color: var(--danger);
+  border-color: rgba(188, 47, 47, 0.18);
+}
+
+.danger-button.is-active {
+  background: var(--danger);
+  color: #fff8f5;
+  box-shadow: 0 16px 30px rgba(188, 47, 47, 0.24);
+}
+
+.preview-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 14px;
+}
+
+.preview-card {
+  padding: 14px;
+  position: relative;
+  overflow: hidden;
+  animation: rise-in 380ms ease-out;
+}
+
+.preview-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 8px;
+  background: var(--preview-color, #999999);
+}
+
+.preview-card-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: baseline;
+}
+
+.preview-card h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.preview-meta {
+  margin-top: 2px;
+  font-size: 0.86rem;
+}
+
+.preview-swatch {
+  height: 56px;
+  margin-top: 14px;
+  border-radius: var(--radius-sm);
+  background: var(--preview-color, #999999);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
+}
+
+.sample-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.sample-dot {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--sample-color, #999999);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.48);
+}
+
+.parameter-card,
+.summary-card,
+.event-item {
+  padding: 14px;
+}
+
+.parameter-card label {
+  display: grid;
+  gap: 10px;
+}
+
+.parameter-card strong,
+.summary-card strong {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 1.04rem;
+}
+
+.summary-card span {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.snapshot-json {
+  margin: 18px 0 0;
+  max-height: 360px;
+  overflow: auto;
+  padding: 18px;
+  border-radius: var(--radius-md);
+  background: #1d2222;
+  color: #e8eceb;
+  font-size: 0.86rem;
+  line-height: 1.5;
+}
+
+.event-list {
+  display: grid;
+  gap: 12px;
+}
+
+.event-item {
+  display: grid;
+  gap: 8px;
+}
+
+.event-item strong {
+  color: var(--accent-strong);
+}
+
+.empty-state {
+  padding: 18px;
+  border-radius: var(--radius-md);
+  background: rgba(255, 255, 255, 0.42);
+  color: var(--muted);
+  border: 1px dashed rgba(56, 63, 61, 0.16);
+}
+
+@keyframes rise-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 1080px) {
+  .layout,
+  .hero,
+  .control-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .section-heading,
+  .subsection-heading {
+    align-items: start;
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 720px) {
+  .page-shell {
+    width: min(100vw - 18px, 100%);
+    padding-top: 18px;
+  }
+
+  .hero,
+  .panel {
+    padding: 18px;
+  }
+
+  .preview-grid,
+  .parameter-grid,
+  .summary-cards {
+    grid-template-columns: 1fr;
+  }
+}