Skip to content

Instantly share code, notes, and snippets.

@nwwells

nwwells/status-dashboard-v2.html

Last active May 27, 2026 13:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nwwells/85570226cdcbb293b4890d8f6ee02125 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nwwells/85570226cdcbb293b4890d8f6ee02125 to your computer and use it in GitHub Desktop.
Download ZIP
Agentic PDLC — Status Dashboard Mockup
Raw
status-dashboard-v2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Status Dashboard</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #0f1117;
color: #e2e8f0;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ── CLICKABLE ── */
[data-click] {
cursor: pointer;
transition: opacity 0.12s, border-color 0.12s, background 0.12s;
}
[data-click]:hover { opacity: 0.82; }
/* ── USAGE ROW ── */
.usage-bar {
display: flex;
gap: 1rem;
padding: 0.75rem 1.25rem;
background: #1a1d27;
border-bottom: 1px solid #2d3148;
flex-shrink: 0;
}
.gauge {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.3rem;
cursor: pointer;
border-radius: 6px;
padding: 0.3rem 0.5rem;
transition: background 0.12s;
}
.gauge:hover { background: #252840; }
.gauge-header {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.gauge-label {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #94a3b8;
}
.gauge-value {
font-size: 0.72rem;
color: #e2e8f0;
font-variant-numeric: tabular-nums;
}
.gauge-track {
height: 8px;
background: #2d3148;
border-radius: 4px;
position: relative;
overflow: visible;
}
.gauge-fill {
height: 100%;
border-radius: 4px;
}
.gauge-fill.ok { background: #22c55e; }
.gauge-fill.warn { background: #f59e0b; }
.gauge-fill.over { background: #ef4444; }
.gauge-marker {
position: absolute;
top: -3px;
width: 2px;
height: 14px;
background: #94a3b8;
border-radius: 1px;
transform: translateX(-50%);
}
.gauge-marker::after {
content: '';
position: absolute;
top: -4px;
left: 50%;
transform: translateX(-50%);
width: 6px; height: 6px;
background: #94a3b8;
border-radius: 50%;
}
.gauge-sub {
font-size: 0.65rem;
color: #64748b;
}
/* ── MAIN BODY ── */
.main {
display: flex;
flex: 1;
overflow: hidden;
}
/* ── LEFT: TASKS (60%) ── */
.tasks-panel {
width: 60%;
display: flex;
flex-direction: column;
border-right: 1px solid #2d3148;
overflow: hidden;
}
.panel-header {
padding: 0.75rem 1.25rem 0.5rem;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #64748b;
border-bottom: 1px solid #2d3148;
flex-shrink: 0;
}
.tasks-scroll {
overflow-y: auto;
flex: 1;
padding: 0.75rem 1.25rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.task-section-label {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.5rem;
}
.task-section-label.red { color: #f87171; }
.task-section-label.amber { color: #fb923c; }
.task-card {
background: #1a1d27;
border: 1px solid #2d3148;
border-radius: 8px;
padding: 0.75rem 1rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-bottom: 0.5rem;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.task-card:hover { border-color: #4f5a8a; background: #1e2133; }
.task-card.urgent { border-left: 3px solid #f87171; }
.task-card.amber { border-left: 3px solid #fb923c; }
.task-title {
font-size: 0.82rem;
font-weight: 600;
color: #e2e8f0;
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.task-type {
font-size: 0.65rem;
font-weight: 600;
padding: 0.15rem 0.45rem;
border-radius: 99px;
text-transform: uppercase;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.task-type.delivery { background: #1e3a5f; color: #60a5fa; }
.task-type.discovery { background: #1e3b2e; color: #4ade80; }
.task-type.escalation { background: #3b1f1f; color: #f87171; }
.task-type.definition { background: #2d2516; color: #fbbf24; }
.task-action {
font-size: 0.76rem;
color: #94a3b8;
}
.task-links {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.task-link {
font-size: 0.7rem;
padding: 0.2rem 0.55rem;
background: #2d3148;
border-radius: 5px;
color: #818cf8;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.3rem;
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.task-link:hover { background: #3d4368; color: #a5b4fc; }
.task-missing {
font-size: 0.73rem;
color: #64748b;
font-style: italic;
}
/* ── RIGHT: PIPELINE (40%) ── */
.pipeline-panel {
width: 40%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.pipeline-scroll {
overflow-y: auto;
flex: 1;
padding: 0.75rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.pipe-stage { display: flex; flex-direction: column; gap: 0.35rem; }
.pipe-stage-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.4rem 0.7rem;
background: #1a1d27;
border-radius: 6px;
border: 1px solid #2d3148;
cursor: pointer;
transition: border-color 0.12s, background 0.12s;
}
.pipe-stage-header:hover { border-color: #4f5a8a; background: #1e2133; }
.pipe-stage-name {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #94a3b8;
display: flex;
align-items: center;
gap: 0.4rem;
}
.pipe-count {
font-size: 0.7rem;
font-weight: 600;
background: #2d3148;
padding: 0.1rem 0.45rem;
border-radius: 99px;
color: #cbd5e1;
font-variant-numeric: tabular-nums;
}
.pipe-count.full { background: #1e3a5f; color: #60a5fa; }
.pipe-item {
background: #161820;
border: 1px solid #252840;
border-radius: 6px;
padding: 0.5rem 0.75rem;
margin-left: 0.75rem;
font-size: 0.77rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
cursor: pointer;
transition: border-color 0.12s, background 0.12s;
}
.pipe-item:hover { border-color: #4f5a8a; background: #1a1d27; }
.pipe-item-title { color: #cbd5e1; font-weight: 500; }
.pipe-item-meta {
font-size: 0.68rem;
color: #64748b;
display: flex;
align-items: center;
gap: 0.5rem;
}
.pipe-dot {
width: 6px; height: 6px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.pipe-dot.delivery { background: #60a5fa; }
.pipe-dot.discovery { background: #4ade80; }
.pipe-dot.accelerator { background: #c084fc; }
.pipe-connector {
width: 1px;
height: 8px;
background: #2d3148;
margin-left: calc(0.75rem + 0.5rem);
}
/* ── SHIPPED ROW ── */
.shipped-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
margin-top: 0.25rem;
}
.shipped-cell {
background: #161820;
border: 1px solid #252840;
border-radius: 6px;
padding: 0.55rem 0.6rem;
text-align: center;
cursor: pointer;
transition: border-color 0.12s, background 0.12s;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.shipped-cell:hover { border-color: #4f5a8a; background: #1a1d27; }
.shipped-period-label {
font-size: 0.62rem;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.shipped-metric {
display: flex;
justify-content: space-around;
align-items: flex-end;
gap: 0.3rem;
}
.shipped-num {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1rem;
}
.shipped-count {
font-size: 1.05rem;
font-weight: 700;
color: #e2e8f0;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.shipped-count.todate {
font-size: 0.85rem;
color: #94a3b8;
}
.shipped-sublabel {
font-size: 0.58rem;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.shipped-divider {
width: 1px;
height: 20px;
background: #2d3148;
align-self: center;
}
/* scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2d3148; border-radius: 2px; }
</style>
</head>
<body>
<!-- ── USAGE ROW ── -->
<div class="usage-bar">
<div class="gauge" data-click="claude-usage">
<div class="gauge-header">
<span class="gauge-label">Claude API</span>
<span class="gauge-value">$38 / $80 · 47%</span>
</div>
<div class="gauge-track">
<div class="gauge-fill ok" style="width:47%"></div>
<div class="gauge-marker" style="left:58%"></div>
</div>
<div class="gauge-sub">Under pace &nbsp;·&nbsp; resets Jun 1</div>
</div>
<div class="gauge" data-click="cursor-usage">
<div class="gauge-header">
<span class="gauge-label">Cursor</span>
<span class="gauge-value">fast requests: 340 / 500 · 68%</span>
</div>
<div class="gauge-track">
<div class="gauge-fill warn" style="width:68%"></div>
<div class="gauge-marker" style="left:58%"></div>
</div>
<div class="gauge-sub">Over pace &nbsp;·&nbsp; resets Jun 1</div>
</div>
<div class="gauge" data-click="jules-usage">
<div class="gauge-header">
<span class="gauge-label">Jules (Google)</span>
<span class="gauge-value">3 active · 11 completed</span>
</div>
<div class="gauge-track">
<div class="gauge-fill ok" style="width:29%"></div>
<div class="gauge-marker" style="left:58%"></div>
</div>
<div class="gauge-sub">~$2.10 est. this period</div>
</div>
<div class="gauge" style="opacity:0.45;" data-click="codex-usage">
<div class="gauge-header">
<span class="gauge-label">Codex</span>
<span class="gauge-value">not configured</span>
</div>
<div class="gauge-track">
<div class="gauge-fill ok" style="width:0%"></div>
</div>
<div class="gauge-sub">slot reserved</div>
</div>
</div>
<!-- ── MAIN ── -->
<div class="main">
<!-- LEFT: TASKS -->
<div class="tasks-panel">
<div class="panel-header">Tasks &nbsp;·&nbsp; 3 need you now &nbsp;·&nbsp; 2 need definition</div>
<div class="tasks-scroll">
<div>
<div class="task-section-label red">🔴 Needs You Now</div>
<div class="task-card urgent" data-click="task-lesson-completion">
<div class="task-title">
Student lesson completion
<span class="task-type delivery">Delivery</span>
</div>
<div class="task-action">Review package ready — watch demo, check preview, approve PR</div>
<div class="task-links">
<span class="task-link" data-click="demo-video">▶ Demo video</span>
<span class="task-link" data-click="preview-url">🌐 Preview</span>
<span class="task-link" data-click="pr-link">⤴ PR #104</span>
</div>
</div>
<div class="task-card urgent" data-click="task-engagement-nudge">
<div class="task-title">
Engagement nudge — activate experiment
<span class="task-type discovery">Discovery</span>
</div>
<div class="task-action">Production experiment ready — sign off to activate on 10% of users</div>
<div class="task-links">
<span class="task-link" data-click="activation-plan">📋 Activation plan</span>
<span class="task-link" data-click="staging-preview">🌐 Staging preview</span>
</div>
</div>
<div class="task-card urgent" data-click="task-auth-escalation">
<div class="task-title">
Auth endpoint — quality gate escalation
<span class="task-type escalation">Escalation</span>
</div>
<div class="task-action">Failing test on token refresh edge case — decision needed before agent continues</div>
<div class="task-links">
<span class="task-link" data-click="gate-report">🔍 Gate report</span>
</div>
</div>
</div>
<div>
<div class="task-section-label amber">🟠 Needs Definition</div>
<div class="task-card amber" data-click="task-dark-mode">
<div class="task-title">
"dark mode for teachers"
<span class="task-type definition">Definition</span>
</div>
<div class="task-missing">Missing: success criteria · solution sketch too vague to scope</div>
</div>
<div class="task-card amber" data-click="task-slow-thing">
<div class="task-title">
"fix the slow thing on study page" #perf
<span class="task-type definition">Definition</span>
</div>
<div class="task-missing">Missing: which slow thing? what's the measurable target?</div>
</div>
</div>
</div>
</div>
<!-- RIGHT: PIPELINE -->
<div class="pipeline-panel">
<div class="panel-header">Pipeline</div>
<div class="pipeline-scroll">
<div class="pipe-stage">
<div class="pipe-stage-header" data-click="stage-intake">
<span class="pipe-stage-name">📥 Intake</span>
<span class="pipe-count" data-click="stage-intake">4</span>
</div>
</div>
<div class="pipe-connector"></div>
<div class="pipe-stage">
<div class="pipe-stage-header" data-click="stage-enrichment">
<span class="pipe-stage-name">🔍 Enrichment</span>
<span class="pipe-count">2</span>
</div>
</div>
<div class="pipe-connector"></div>
<div class="pipe-stage">
<div class="pipe-stage-header" data-click="stage-triage">
<span class="pipe-stage-name">⚖️ Triage / Ready</span>
<span class="pipe-count">6</span>
</div>
</div>
<div class="pipe-connector"></div>
<div class="pipe-stage">
<div class="pipe-stage-header" data-click="stage-inprogress">
<span class="pipe-stage-name">⚡ In Progress</span>
<span class="pipe-count full">3 / 3</span>
</div>
<div class="pipe-item" data-click="item-lesson-completion">
<div class="pipe-item-title">Student lesson completion</div>
<div class="pipe-item-meta">
<span class="pipe-dot delivery"></span>
Delivery &nbsp;·&nbsp; Review package ready
</div>
</div>
<div class="pipe-item" data-click="item-engagement-nudge">
<div class="pipe-item-title">Engagement nudge A/B</div>
<div class="pipe-item-meta">
<span class="pipe-dot discovery"></span>
Discovery &nbsp;·&nbsp; Awaiting sign-off to activate
</div>
</div>
<div class="pipe-item" data-click="item-auth-hardening">
<div class="pipe-item-title">Auth endpoint hardening</div>
<div class="pipe-item-meta">
<span class="pipe-dot delivery"></span>
Delivery &nbsp;·&nbsp; Quality gate escalated
</div>
</div>
</div>
<div class="pipe-connector"></div>
<div class="pipe-stage">
<div class="pipe-stage-header" data-click="stage-shipped">
<span class="pipe-stage-name">🚀 Shipped</span>
</div>
<div class="shipped-row">
<div class="shipped-cell" data-click="shipped-week">
<div class="shipped-period-label">Week</div>
<div class="shipped-metric">
<div class="shipped-num">
<div class="shipped-count">2</div>
<div class="shipped-sublabel">last 7d</div>
</div>
<div class="shipped-divider"></div>
<div class="shipped-num">
<div class="shipped-count todate">1</div>
<div class="shipped-sublabel">WTD</div>
</div>
</div>
</div>
<div class="shipped-cell" data-click="shipped-month">
<div class="shipped-period-label">Month</div>
<div class="shipped-metric">
<div class="shipped-num">
<div class="shipped-count">11</div>
<div class="shipped-sublabel">last 30d</div>
</div>
<div class="shipped-divider"></div>
<div class="shipped-num">
<div class="shipped-count todate">8</div>
<div class="shipped-sublabel">MTD</div>
</div>
</div>
</div>
<div class="shipped-cell" data-click="shipped-year">
<div class="shipped-period-label">Year</div>
<div class="shipped-metric">
<div class="shipped-num">
<div class="shipped-count">67</div>
<div class="shipped-sublabel">last 365d</div>
</div>
<div class="shipped-divider"></div>
<div class="shipped-num">
<div class="shipped-count todate">52</div>
<div class="shipped-sublabel">YTD</div>
</div>
</div>
</div>
<div class="shipped-cell" data-click="shipped-all">
<div class="shipped-period-label">All time</div>
<div class="shipped-metric">
<div class="shipped-num">
<div class="shipped-count">89</div>
<div class="shipped-sublabel">total</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
status-dashboard.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Status Dashboard</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #0f1117;
color: #e2e8f0;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ── USAGE ROW ── */
.usage-bar {
display: flex;
gap: 1rem;
padding: 0.75rem 1.25rem;
background: #1a1d27;
border-bottom: 1px solid #2d3148;
flex-shrink: 0;
}
.gauge {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.gauge-header {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.gauge-label {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #94a3b8;
}
.gauge-value {
font-size: 0.72rem;
color: #e2e8f0;
font-variant-numeric: tabular-nums;
}
.gauge-track {
height: 8px;
background: #2d3148;
border-radius: 4px;
position: relative;
overflow: visible;
}
.gauge-fill {
height: 100%;
border-radius: 4px;
transition: width 0.3s ease;
}
.gauge-fill.ok { background: #22c55e; }
.gauge-fill.warn { background: #f59e0b; }
.gauge-fill.over { background: #ef4444; }
/* period marker — where we are in the billing cycle */
.gauge-marker {
position: absolute;
top: -3px;
width: 2px;
height: 14px;
background: #94a3b8;
border-radius: 1px;
transform: translateX(-50%);
}
.gauge-marker::after {
content: '';
position: absolute;
top: -4px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
background: #94a3b8;
border-radius: 50%;
}
.gauge-sub {
font-size: 0.65rem;
color: #64748b;
}
/* ── MAIN BODY ── */
.main {
display: flex;
flex: 1;
overflow: hidden;
gap: 0;
}
/* ── LEFT: TASKS (60%) ── */
.tasks-panel {
width: 60%;
display: flex;
flex-direction: column;
border-right: 1px solid #2d3148;
overflow: hidden;
}
.panel-header {
padding: 0.75rem 1.25rem 0.5rem;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #64748b;
border-bottom: 1px solid #2d3148;
flex-shrink: 0;
}
.tasks-scroll {
overflow-y: auto;
flex: 1;
padding: 0.75rem 1.25rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.task-section-label {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.5rem;
}
.task-section-label.red { color: #f87171; }
.task-section-label.amber { color: #fb923c; }
.task-card {
background: #1a1d27;
border: 1px solid #2d3148;
border-radius: 8px;
padding: 0.75rem 1rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-bottom: 0.5rem;
cursor: pointer;
transition: border-color 0.15s;
}
.task-card:hover { border-color: #4f5a8a; }
.task-card.urgent { border-left: 3px solid #f87171; }
.task-card.amber { border-left: 3px solid #fb923c; }
.task-title {
font-size: 0.82rem;
font-weight: 600;
color: #e2e8f0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.task-type {
font-size: 0.65rem;
font-weight: 600;
padding: 0.15rem 0.45rem;
border-radius: 99px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.task-type.delivery { background: #1e3a5f; color: #60a5fa; }
.task-type.discovery { background: #1e3b2e; color: #4ade80; }
.task-type.escalation { background: #3b1f1f; color: #f87171; }
.task-type.definition { background: #2d2516; color: #fbbf24; }
.task-action {
font-size: 0.76rem;
color: #94a3b8;
}
.task-links {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.task-link {
font-size: 0.7rem;
padding: 0.2rem 0.55rem;
background: #2d3148;
border-radius: 5px;
color: #818cf8;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.3rem;
}
.task-missing {
font-size: 0.73rem;
color: #64748b;
font-style: italic;
}
/* ── RIGHT: PIPELINE (40%) ── */
.pipeline-panel {
width: 40%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.pipeline-scroll {
overflow-y: auto;
flex: 1;
padding: 0.75rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.pipe-stage {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.pipe-stage-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.4rem 0.7rem;
background: #1a1d27;
border-radius: 6px;
border: 1px solid #2d3148;
}
.pipe-stage-name {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #94a3b8;
display: flex;
align-items: center;
gap: 0.4rem;
}
.pipe-count {
font-size: 0.7rem;
font-weight: 600;
background: #2d3148;
padding: 0.1rem 0.45rem;
border-radius: 99px;
color: #cbd5e1;
font-variant-numeric: tabular-nums;
}
.pipe-count.full { background: #1e3a5f; color: #60a5fa; }
.pipe-item {
background: #161820;
border: 1px solid #252840;
border-radius: 6px;
padding: 0.5rem 0.75rem;
margin-left: 0.75rem;
font-size: 0.77rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.pipe-item-title {
color: #cbd5e1;
font-weight: 500;
}
.pipe-item-meta {
font-size: 0.68rem;
color: #64748b;
display: flex;
align-items: center;
gap: 0.5rem;
}
.pipe-dot {
width: 6px; height: 6px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.pipe-dot.delivery { background: #60a5fa; }
.pipe-dot.discovery { background: #4ade80; }
.pipe-dot.accelerator { background: #c084fc; }
.pipe-connector {
width: 1px;
height: 8px;
background: #2d3148;
margin-left: calc(0.75rem + 0.5rem);
}
/* Completed row */
.completed-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
margin-top: 0.25rem;
}
.completed-cell {
background: #161820;
border: 1px solid #252840;
border-radius: 6px;
padding: 0.5rem 0.6rem;
text-align: center;
}
.completed-count {
font-size: 1.1rem;
font-weight: 700;
color: #e2e8f0;
font-variant-numeric: tabular-nums;
}
.completed-label {
font-size: 0.62rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 0.1rem;
}
.completed-delta {
font-size: 0.65rem;
color: #4ade80;
margin-top: 0.15rem;
font-variant-numeric: tabular-nums;
}
/* scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2d3148; border-radius: 2px; }
</style>
</head>
<body>
<!-- ── USAGE ROW ── -->
<div class="usage-bar">
<div class="gauge">
<div class="gauge-header">
<span class="gauge-label">Claude API</span>
<span class="gauge-value">$38 / $80 · 47%</span>
</div>
<div class="gauge-track">
<div class="gauge-fill ok" style="width: 47%"></div>
<div class="gauge-marker" style="left: 58%"></div><!-- 58% through month -->
</div>
<div class="gauge-sub">Under pace &nbsp;·&nbsp; resets Jun 1</div>
</div>
<div class="gauge">
<div class="gauge-header">
<span class="gauge-label">Cursor</span>
<span class="gauge-value">fast requests: 340 / 500 · 68%</span>
</div>
<div class="gauge-track">
<div class="gauge-fill warn" style="width: 68%"></div>
<div class="gauge-marker" style="left: 58%"></div>
</div>
<div class="gauge-sub">Over pace &nbsp;·&nbsp; resets Jun 1</div>
</div>
<div class="gauge">
<div class="gauge-header">
<span class="gauge-label">Jules (Google)</span>
<span class="gauge-value">3 active · 11 completed</span>
</div>
<div class="gauge-track">
<div class="gauge-fill ok" style="width: 29%"></div>
<div class="gauge-marker" style="left: 58%"></div>
</div>
<div class="gauge-sub">~$2.10 estimated this period</div>
</div>
<div class="gauge" style="opacity: 0.45;">
<div class="gauge-header">
<span class="gauge-label">Codex</span>
<span class="gauge-value">not configured</span>
</div>
<div class="gauge-track">
<div class="gauge-fill ok" style="width: 0%"></div>
</div>
<div class="gauge-sub">slot reserved</div>
</div>
</div>
<!-- ── MAIN BODY ── -->
<div class="main">
<!-- LEFT: TASKS -->
<div class="tasks-panel">
<div class="panel-header">Tasks &nbsp;·&nbsp; 3 need you now &nbsp;·&nbsp; 2 need definition</div>
<div class="tasks-scroll">
<div>
<div class="task-section-label red">🔴 Needs You Now</div>
<div class="task-card urgent">
<div class="task-title">
Student lesson completion
<span class="task-type delivery">Delivery</span>
</div>
<div class="task-action">Review package ready — watch demo, check preview, approve PR</div>
<div class="task-links">
<a class="task-link" href="#">▶ Demo video</a>
<a class="task-link" href="#">🌐 Preview</a>
<a class="task-link" href="#">⤴ PR #104</a>
</div>
</div>
<div class="task-card urgent">
<div class="task-title">
Engagement nudge — activate experiment
<span class="task-type discovery">Discovery</span>
</div>
<div class="task-action">Production experiment ready — sign off to activate on 10% of users</div>
<div class="task-links">
<a class="task-link" href="#">📋 Activation plan</a>
<a class="task-link" href="#">🌐 Staging preview</a>
</div>
</div>
<div class="task-card urgent">
<div class="task-title">
Auth endpoint — quality gate escalation
<span class="task-type escalation">Escalation</span>
</div>
<div class="task-action">Failing test on token refresh edge case — decision needed before agent continues</div>
<div class="task-links">
<a class="task-link" href="#">🔍 Gate report</a>
</div>
</div>
</div>
<div>
<div class="task-section-label amber">🟠 Needs Definition</div>
<div class="task-card amber">
<div class="task-title">
"dark mode for teachers"
<span class="task-type definition">Definition</span>
</div>
<div class="task-missing">Missing: success criteria, solution sketch too vague to scope</div>
</div>
<div class="task-card amber">
<div class="task-title">
"fix the slow thing on study page" #perf
<span class="task-type definition">Definition</span>
</div>
<div class="task-missing">Missing: problem is not specific enough — which slow thing? what's the target?</div>
</div>
</div>
</div>
</div>
<!-- RIGHT: PIPELINE -->
<div class="pipeline-panel">
<div class="panel-header">Pipeline</div>
<div class="pipeline-scroll">
<!-- Intake -->
<div class="pipe-stage">
<div class="pipe-stage-header">
<span class="pipe-stage-name">📥 Intake</span>
<span class="pipe-count">4</span>
</div>
</div>
<div class="pipe-connector"></div>
<!-- Enrichment -->
<div class="pipe-stage">
<div class="pipe-stage-header">
<span class="pipe-stage-name">🔍 Enrichment</span>
<span class="pipe-count">2</span>
</div>
</div>
<div class="pipe-connector"></div>
<!-- Triage -->
<div class="pipe-stage">
<div class="pipe-stage-header">
<span class="pipe-stage-name">⚖️ Triage / Ready</span>
<span class="pipe-count">6</span>
</div>
</div>
<div class="pipe-connector"></div>
<!-- In Progress -->
<div class="pipe-stage">
<div class="pipe-stage-header">
<span class="pipe-stage-name">⚡ In Progress</span>
<span class="pipe-count full">3 / 3</span>
</div>
<div class="pipe-item">
<div class="pipe-item-title">Student lesson completion</div>
<div class="pipe-item-meta">
<span class="pipe-dot delivery"></span>
Delivery &nbsp;·&nbsp; Review package ready
</div>
</div>
<div class="pipe-item">
<div class="pipe-item-title">Engagement nudge A/B</div>
<div class="pipe-item-meta">
<span class="pipe-dot discovery"></span>
Discovery &nbsp;·&nbsp; Awaiting sign-off to activate
</div>
</div>
<div class="pipe-item">
<div class="pipe-item-title">Auth endpoint hardening</div>
<div class="pipe-item-meta">
<span class="pipe-dot delivery"></span>
Delivery &nbsp;·&nbsp; Quality gate escalated
</div>
</div>
</div>
<div class="pipe-connector"></div>
<!-- Completed -->
<div class="pipe-stage">
<div class="pipe-stage-header">
<span class="pipe-stage-name">✅ Completed</span>
</div>
<div class="completed-row">
<div class="completed-cell">
<div class="completed-count">2</div>
<div class="completed-label">This week</div>
<div class="completed-delta">+last 7d</div>
</div>
<div class="completed-cell">
<div class="completed-count">11</div>
<div class="completed-label">This month</div>
<div class="completed-delta">+last 30d</div>
</div>
<div class="completed-cell">
<div class="completed-count">67</div>
<div class="completed-label">This year</div>
<div class="completed-delta">+last 365d</div>
</div>
<div class="completed-cell">
<div class="completed-count">89</div>
<div class="completed-label">All time</div>
<div class="completed-delta">&nbsp;</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment