timmy
f9ace930e4
- three-column layout with sticky context, work, and AI panels - live refresh every 8s - suggestion cards with priority styling - mobile responsive
85 lines
4.4 KiB
HTML
85 lines
4.4 KiB
HTML
<!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>
|