Implement configuration, runtime, frontend, and task governance closure

web/app/state-panel.mjs

@@ -0,0 +1,42 @@
+const EMPTY_STATE = Object.freeze({
+  connected: false,
+  tick: 0,
+  status: "disconnected",
+  alarm: null,
+  mode: null,
+  snapshot: null,
+  lastCommand: null,
+  error: null,
+});
+
+export function reduceWorkerState(state = EMPTY_STATE, message) {
+  if (!message || typeof message !== "object") return { ...state, error: "worker_message_invalid" };
+  if (message.kind === "ERROR") return { ...state, status: "error", error: message.payload?.code ?? "worker_error", alarm: message.payload?.message_key ?? null };
+  if (message.kind === "CAPABILITIES") return { ...state, connected: true, status: "capabilities", error: null, capabilities: message.payload };
+  if (message.kind === "SESSION_READY") return { ...state, connected: true, status: "ready", tick: message.simulation_tick ?? state.tick, error: null };
+  if (message.kind === "STATE_SNAPSHOT") return { ...state, status: "snapshot", tick: message.payload?.tick ?? message.simulation_tick ?? state.tick, snapshot: message.payload, error: null };
+  if (message.kind === "COMMAND_RESULT") return { ...state, status: message.payload?.status ?? "verified", tick: message.simulation_tick ?? state.tick, lastCommand: message.payload?.command ?? null, snapshot: message.payload?.snapshot ?? state.snapshot, error: null };
+  if (message.kind === "ALARM") return { ...state, status: "alarm", alarm: message.payload, error: message.payload?.code ?? null };
+  return { ...state, tick: message.simulation_tick ?? state.tick };
+}
+
+export function renderStatePanel(document, state) {
+  const section = document.createElement("section");
+  section.className = "panel state-panel";
+  const title = document.createElement("h2");
+  title.className = "panel-title";
+  title.textContent = "Machine state";
+  section.append(title);
+  const grid = document.createElement("dl");
+  grid.className = "state-grid";
+  const fields = [["Connection", state.connected ? "Connected" : "Disconnected"], ["Status", state.status], ["Tick", String(state.tick)], ["Mode", state.mode ?? "-"], ["Alarm", state.alarm ? (typeof state.alarm === "string" ? state.alarm : JSON.stringify(state.alarm)) : "None"]];
+  for (const [name, value] of fields) {
+    const term = document.createElement("dt"); term.textContent = name;
+    const detail = document.createElement("dd"); detail.textContent = value;
+    grid.append(term, detail);
+  }
+  section.append(grid);
+  return section;
+}
+
+export { EMPTY_STATE };