From f9ace930e4dba2b894fa6e6668ff9b5ccb24a816 Mon Sep 17 00:00:00 2001
From: timmy <timmy@stackchain.ai>
Date: Tue, 7 Jul 2026 00:56:21 +0000
Subject: [PATCH] feat(frontend): adaptive live dashboard panels

- three-column layout with sticky context, work, and AI panels
- live refresh every 8s
- suggestion cards with priority styling
- mobile responsive
---
 frontend/index.html | 84 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 frontend/index.html
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..aef6f14
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Stackchain Dashboard</title>
+  <style>
+    :root { color-scheme: light dark; }
+    * { box-sizing: border-box; }
+    html, body { height: 100%; }
+    body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
+    header { padding: 12px 16px; border-bottom: 1px solid #ddd; display:flex; gap: 16px; align-items: center; justify-content: space-between; position: sticky; top: 0; background: inherit; z-index: 5; }
+    main { display: grid; grid-template-columns: 280px 1fr 320px; gap: 12px; padding: 12px; }
+    @media (max-width: 980px) { main { grid-template-columns: 1fr; } }
+    aside, section { border: 1px solid #ddd; border-radius: 10px; padding: 10px; background: #fff; }
+    aside { background: #fafafa; }
+    h2 { font-size: 13px; margin: 8px 0; text-transform: uppercase; letter-spacing: .08em; color: #374151; }
+    a { color: #2563eb; text-decoration: none; }
+    .muted { color: #6b7280; }
+    .pill { display:inline-block; padding: 2px 8px; border-radius: 999px; background:#e5e7eb; color:#111; font-size: 12px; }
+    .btn { padding: 8px 10px; border-radius: 8px; border: 1px solid #ccc; background:#fff; cursor: pointer; }
+    .suggestion { padding: 8px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; margin-bottom: 8px; }
+    .suggestion.high { border-color: #fca5a5; background: #fef2f2; }
+    .suggestion.medium { border-color: #fcd34d; background: #fffbeb; }
+    .suggestion.low { border-color: #d1fae5; background: #ecfdf5; }
+    #nav .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; }
+  </style>
+</head>
+<body>
+  <header>
+    <div><strong>Stackchain</strong> <span class="muted">Dashboard</span></div>
+    <button class="btn" id="refresh">Refresh</button>
+  </header>
+  <main>
+    <aside id="nav"><h2>Context</h2><div class="muted">Loading…</div></aside>
+    <section id="work">
+      <h2>Work</h2>
+      <div id="issues"><div class="muted">Loading…</div></div>
+      <hr />
+      <div id="prs"><div class="muted">Loading…</div></div>
+    </section>
+    <aside id="ai"><h2>Live AI</h2><div class="muted">Loading…</div></aside>
+  </main>
+  <script>
+    async function load() {
+      try {
+        const res = await fetch('/api/v1/context', { headers: { 'Accept': 'application/json' } });
+        const data = await res.json();
+        const nav = document.getElementById('nav');
+        nav.innerHTML = '<h2>Context</h2>' +
+          '<div class="kv"><div>User</div><div>' + (data.user.full_name || data.user.login) + '</div>' +
+          '<div>Repos</div><div>' + data.repos.length + '</div>' +
+          '<div>Issues</div><div>' + data.issues.length + '</div>' +
+          '<div>PRs</div><div>' + data.pull_requests.length + '</div></div>';
+
+        const issuesBox = document.getElementById('issues');
+        const openIssues = data.issues.filter(i => i.state === 'open').slice(0, 10);
+        issuesBox.innerHTML = '<h2>Open Issues</h2>' + (openIssues.length ? openIssues.map(i =>
+          '<div><a href="' + i.url + '">#' + i.number + ' ' + i.title + '</a>' +
+          '<div class="muted">' + (i.labels || []).map(l => '<span class="pill">' + l + '</span>').join(' ') + '</div></div>'
+        ).join('') : '<div class="muted">No open issues.</div>');
+
+        const prsBox = document.getElementById('prs');
+        const openPrs = data.pull_requests.slice(0, 10);
+        prsBox.innerHTML = '<h2>Pull Requests</h2>' + (openPrs.length ? openPrs.map(p =>
+          '<div><a href="' + p.url + '">#' + p.number + ' ' + p.title + '</a>' +
+          '<div class="muted">' + p.state + ' by ' + p.user + '</div></div>'
+        ).join('') : '<div class="muted">No PRs.</div>');
+
+        const ai = document.getElementById('ai');
+        const deltas = data.deltas || [];
+        ai.innerHTML = '<h2>Live AI</h2>' + (deltas.length ? deltas.map(d =>
+          '<div class="suggestion ' + d.priority + '"><span class="pill">' + d.priority + '</span> <strong>' + d.action + '</strong> ' + d.target + '<div class="muted">' + d.panel + '</div></div>'
+        ).join('') : '<div class="muted">No suggestions yet.</div>');
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    load();
+    document.getElementById('refresh').addEventListener('click', load);
+    setInterval(load, 8000);
+  </script>
+</body>
+</html>
