feat: build CouchOS Melee appliance

2026-08-03 02:52:28 +02:00
commit 04ef2a0d74
42 changed files with 3671 additions and 0 deletions
--- a/dashboard/app.js
+++ b/dashboard/app.js
@@ -0,0 +1,36 @@
+async function refreshStatus() {
+  const output = document.getElementById("output");
+  try {
+    const response = await fetch("/api/status", { credentials: "same-origin" });
+    const payload = await response.json();
+    document.getElementById("online").textContent = response.ok ? "online" : "offline";
+    document.getElementById("game-state").textContent = payload.state ?? "unknown";
+    document.getElementById("controller").textContent =
+      payload.controller?.connected === true ? "connected" :
+      payload.controller?.connected === false ? "disconnected" : "unknown";
+    document.getElementById("display").textContent = payload.display?.mode ?? "unknown";
+    output.textContent = JSON.stringify(payload, null, 2);
+  } catch (error) {
+    document.getElementById("online").textContent = "offline";
+    output.textContent = String(error);
+  }
+}
+
+async function postAction(path) {
+  const output = document.getElementById("output");
+  const response = await fetch(path, { method: "POST", credentials: "same-origin" });
+  const payload = await response.json();
+  output.textContent = JSON.stringify(payload, null, 2);
+  await refreshStatus();
+}
+
+document.querySelectorAll("[data-action]").forEach((button) => {
+  button.addEventListener("click", () => {
+    postAction(button.dataset.action).catch((error) => {
+      document.getElementById("output").textContent = String(error);
+    });
+  });
+});
+
+refreshStatus().catch(() => {});
+setInterval(refreshStatus, 5000);
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>CouchOS</title>
+    <link rel="stylesheet" href="/style.css">
+  </head>
+  <body>
+    <main class="shell">
+      <section class="panel">
+        <p class="eyebrow">couch.mhny.dev</p>
+        <h1>CouchOS</h1>
+        <p class="lede">Living-room Melee controls over the Tailnet-backed API.</p>
+        <div class="status-grid">
+          <div>
+            <span class="label">Online</span>
+            <strong id="online">unknown</strong>
+          </div>
+          <div>
+            <span class="label">Game</span>
+            <strong id="game-state">unknown</strong>
+          </div>
+          <div>
+            <span class="label">Controller</span>
+            <strong id="controller">unknown</strong>
+          </div>
+          <div>
+            <span class="label">Display</span>
+            <strong id="display">unknown</strong>
+          </div>
+        </div>
+        <div class="actions">
+          <button data-action="/api/launch/melee">Play Melee</button>
+          <button data-action="/api/open/slippi">Open Slippi</button>
+          <button data-action="/api/stop" class="danger">Stop Game</button>
+        </div>
+        <pre id="output" aria-live="polite"></pre>
+      </section>
+    </main>
+    <script src="/app.js" defer></script>
+  </body>
+</html>
--- a/dashboard/style.css
+++ b/dashboard/style.css
@@ -0,0 +1,119 @@
+:root {
+  --bg: #f4efe6;
+  --panel: rgba(255, 252, 246, 0.88);
+  --ink: #13212e;
+  --muted: #5b6670;
+  --accent: #a6412b;
+  --accent-dark: #7b2f1e;
+  --line: rgba(19, 33, 46, 0.12);
+  --shadow: 0 24px 80px rgba(19, 33, 46, 0.16);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+  color: var(--ink);
+  background:
+    radial-gradient(circle at top left, rgba(166, 65, 43, 0.18), transparent 28%),
+    linear-gradient(160deg, #efe5d2 0%, #f8f5ef 45%, #dfe9ea 100%);
+}
+
+.shell {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 20px;
+}
+
+.panel {
+  width: min(100%, 440px);
+  padding: 24px;
+  border: 1px solid var(--line);
+  border-radius: 24px;
+  background: var(--panel);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(10px);
+}
+
+.eyebrow,
+.label {
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-size: 0.72rem;
+  color: var(--muted);
+}
+
+h1 {
+  margin: 6px 0 8px;
+  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
+  font-size: clamp(2rem, 8vw, 3.2rem);
+}
+
+.lede {
+  margin: 0 0 20px;
+  color: var(--muted);
+}
+
+.status-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.status-grid div,
+.actions button,
+#output {
+  border-radius: 18px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.56);
+}
+
+.status-grid div {
+  padding: 14px;
+}
+
+.status-grid strong {
+  display: block;
+  margin-top: 6px;
+  font-size: 1rem;
+}
+
+.actions {
+  display: grid;
+  gap: 10px;
+  margin-top: 18px;
+}
+
+.actions button {
+  appearance: none;
+  padding: 14px 16px;
+  font: inherit;
+  font-weight: 700;
+  color: var(--ink);
+  cursor: pointer;
+  transition: transform 120ms ease, background 120ms ease;
+}
+
+.actions button:hover,
+.actions button:focus-visible {
+  transform: translateY(-1px);
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.actions .danger {
+  color: #fff;
+  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
+}
+
+#output {
+  min-height: 90px;
+  margin: 18px 0 0;
+  padding: 14px;
+  white-space: pre-wrap;
+  color: var(--muted);
+}