395 lines
11 KiB
HTML
395 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<!--
|
|||
|
|
NEXUS COMPONENT PROTOTYPE: Heartbeat / Morning Briefing Panel
|
|||
|
|
Refs: #749 (Vibe Code prototype), #698 (heartbeat/morning briefing)
|
|||
|
|
Design: dark space / holographic — matches Nexus design system
|
|||
|
|
Shows Timmy's daily brief: system vitals, pending actions, world state
|
|||
|
|
-->
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Heartbeat Briefing — Nexus Component</title>
|
|||
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&family=Orbitron:wght@400;600;700&display=swap" rel="stylesheet">
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--color-bg: #050510;
|
|||
|
|
--color-surface: rgba(10, 15, 40, 0.85);
|
|||
|
|
--color-border: rgba(74, 240, 192, 0.2);
|
|||
|
|
--color-border-bright: rgba(74, 240, 192, 0.5);
|
|||
|
|
--color-text: #e0f0ff;
|
|||
|
|
--color-text-muted: #8a9ab8;
|
|||
|
|
--color-primary: #4af0c0;
|
|||
|
|
--color-primary-dim: rgba(74, 240, 192, 0.12);
|
|||
|
|
--color-secondary: #7b5cff;
|
|||
|
|
--color-danger: #ff4466;
|
|||
|
|
--color-warning: #ffaa22;
|
|||
|
|
--color-gold: #ffd700;
|
|||
|
|
--font-display: 'Orbitron', sans-serif;
|
|||
|
|
--font-body: 'JetBrains Mono', monospace;
|
|||
|
|
--panel-blur: 16px;
|
|||
|
|
--panel-radius: 8px;
|
|||
|
|
--transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
background: var(--color-bg);
|
|||
|
|
font-family: var(--font-body);
|
|||
|
|
color: var(--color-text);
|
|||
|
|
min-height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* === BRIEFING PANEL === */
|
|||
|
|
.briefing-panel {
|
|||
|
|
width: 480px;
|
|||
|
|
background: var(--color-surface);
|
|||
|
|
border: 1px solid var(--color-border);
|
|||
|
|
border-radius: var(--panel-radius);
|
|||
|
|
backdrop-filter: blur(var(--panel-blur));
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Banner */
|
|||
|
|
.briefing-banner {
|
|||
|
|
padding: 20px 20px 16px;
|
|||
|
|
background: linear-gradient(135deg, rgba(74,240,192,0.05) 0%, rgba(123,92,255,0.05) 100%);
|
|||
|
|
border-bottom: 1px solid var(--color-border);
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.briefing-banner::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0; right: 0; bottom: 0;
|
|||
|
|
width: 120px;
|
|||
|
|
background: radial-gradient(ellipse at right center, rgba(74,240,192,0.06) 0%, transparent 70%);
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.briefing-date {
|
|||
|
|
font-size: 10px;
|
|||
|
|
letter-spacing: 0.15em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
color: var(--color-text-muted);
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.briefing-title {
|
|||
|
|
font-family: var(--font-display);
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
letter-spacing: 0.08em;
|
|||
|
|
color: var(--color-text);
|
|||
|
|
line-height: 1.2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.briefing-title span {
|
|||
|
|
color: var(--color-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.briefing-subtitle {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--color-text-muted);
|
|||
|
|
margin-top: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Vital stats row */
|
|||
|
|
.vitals-row {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 0;
|
|||
|
|
border-bottom: 1px solid var(--color-border);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.vital {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 14px 16px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 4px;
|
|||
|
|
border-right: 1px solid var(--color-border);
|
|||
|
|
transition: background var(--transition);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.vital:last-child { border-right: none; }
|
|||
|
|
.vital:hover { background: rgba(74,240,192,0.02); }
|
|||
|
|
|
|||
|
|
.vital-value {
|
|||
|
|
font-family: var(--font-display);
|
|||
|
|
font-size: 22px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.vital-label {
|
|||
|
|
font-size: 10px;
|
|||
|
|
letter-spacing: 0.1em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
color: var(--color-text-muted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.vital-delta {
|
|||
|
|
font-size: 10px;
|
|||
|
|
margin-top: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.delta-up { color: var(--color-primary); }
|
|||
|
|
.delta-down { color: var(--color-danger); }
|
|||
|
|
.delta-same { color: var(--color-text-muted); }
|
|||
|
|
|
|||
|
|
/* Sections */
|
|||
|
|
.briefing-section {
|
|||
|
|
padding: 14px 20px;
|
|||
|
|
border-bottom: 1px solid var(--color-border);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.briefing-section:last-child { border-bottom: none; }
|
|||
|
|
|
|||
|
|
.section-label {
|
|||
|
|
font-size: 10px;
|
|||
|
|
letter-spacing: 0.15em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
color: var(--color-text-muted);
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-label::after {
|
|||
|
|
content: '';
|
|||
|
|
flex: 1;
|
|||
|
|
height: 1px;
|
|||
|
|
background: var(--color-border);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Action items */
|
|||
|
|
.action-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 10px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-bullet {
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 9px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
margin-top: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bullet-urgent { background: rgba(255,68,102,0.2); color: var(--color-danger); }
|
|||
|
|
.bullet-normal { background: rgba(74,240,192,0.12); color: var(--color-primary); }
|
|||
|
|
.bullet-low { background: rgba(138,154,184,0.1); color: var(--color-text-muted); }
|
|||
|
|
|
|||
|
|
.action-text { color: var(--color-text); }
|
|||
|
|
.action-text .tag {
|
|||
|
|
font-size: 10px;
|
|||
|
|
padding: 1px 5px;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
margin-left: 4px;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tag-issue { background: rgba(74,240,192,0.1); color: var(--color-primary); }
|
|||
|
|
.tag-pr { background: rgba(123,92,255,0.1); color: var(--color-secondary); }
|
|||
|
|
.tag-world { background: rgba(255,170,34,0.1); color: var(--color-warning); }
|
|||
|
|
|
|||
|
|
/* System narrative */
|
|||
|
|
.narrative {
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1.7;
|
|||
|
|
color: var(--color-text-muted);
|
|||
|
|
font-style: italic;
|
|||
|
|
border-left: 2px solid var(--color-primary-dim);
|
|||
|
|
padding-left: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.narrative strong {
|
|||
|
|
color: var(--color-text);
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Footer */
|
|||
|
|
.briefing-footer {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
background: rgba(74, 240, 192, 0.02);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-note {
|
|||
|
|
font-size: 10px;
|
|||
|
|
color: var(--color-text-muted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refresh-btn {
|
|||
|
|
font-family: var(--font-body);
|
|||
|
|
font-size: 10px;
|
|||
|
|
letter-spacing: 0.1em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
background: transparent;
|
|||
|
|
border: 1px solid var(--color-border);
|
|||
|
|
color: var(--color-text-muted);
|
|||
|
|
padding: 4px 10px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all var(--transition);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refresh-btn:hover {
|
|||
|
|
border-color: var(--color-border-bright);
|
|||
|
|
color: var(--color-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Heartbeat animation in banner */
|
|||
|
|
.hb-line {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 8px;
|
|||
|
|
right: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 1px;
|
|||
|
|
opacity: 0.3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hb-bar {
|
|||
|
|
width: 2px;
|
|||
|
|
background: var(--color-primary);
|
|||
|
|
border-radius: 1px;
|
|||
|
|
animation: hb 1.2s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hb-bar:nth-child(1) { height: 4px; animation-delay: 0s; }
|
|||
|
|
.hb-bar:nth-child(2) { height: 12px; animation-delay: 0.1s; }
|
|||
|
|
.hb-bar:nth-child(3) { height: 20px; animation-delay: 0.2s; }
|
|||
|
|
.hb-bar:nth-child(4) { height: 8px; animation-delay: 0.3s; }
|
|||
|
|
.hb-bar:nth-child(5) { height: 4px; animation-delay: 0.4s; }
|
|||
|
|
.hb-bar:nth-child(6) { height: 16px; animation-delay: 0.5s; }
|
|||
|
|
.hb-bar:nth-child(7) { height: 6px; animation-delay: 0.6s; }
|
|||
|
|
.hb-bar:nth-child(8) { height: 4px; animation-delay: 0.7s; }
|
|||
|
|
|
|||
|
|
@keyframes hb {
|
|||
|
|
0%, 100% { opacity: 0.3; }
|
|||
|
|
50% { opacity: 1; }
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div class="briefing-panel">
|
|||
|
|
|
|||
|
|
<!-- Banner -->
|
|||
|
|
<div class="briefing-banner">
|
|||
|
|
<div class="briefing-date">Friday · 04 Apr 2026 · 08:00 UTC</div>
|
|||
|
|
<div class="briefing-title">Morning <span>Briefing</span></div>
|
|||
|
|
<div class="briefing-subtitle">Nexus Core — Daily state summary for Timmy</div>
|
|||
|
|
<div class="hb-line">
|
|||
|
|
<div class="hb-bar"></div><div class="hb-bar"></div><div class="hb-bar"></div>
|
|||
|
|
<div class="hb-bar"></div><div class="hb-bar"></div><div class="hb-bar"></div>
|
|||
|
|
<div class="hb-bar"></div><div class="hb-bar"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Vitals -->
|
|||
|
|
<div class="vitals-row">
|
|||
|
|
<div class="vital">
|
|||
|
|
<div class="vital-value" style="color:var(--color-primary)">4</div>
|
|||
|
|
<div class="vital-label">Agents Online</div>
|
|||
|
|
<div class="vital-delta delta-up">▲ +1 since yesterday</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="vital">
|
|||
|
|
<div class="vital-value" style="color:var(--color-warning)">7</div>
|
|||
|
|
<div class="vital-label">Open Issues</div>
|
|||
|
|
<div class="vital-delta delta-down">▼ –2 closed</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="vital">
|
|||
|
|
<div class="vital-value" style="color:var(--color-secondary)">2</div>
|
|||
|
|
<div class="vital-label">Open PRs</div>
|
|||
|
|
<div class="vital-delta delta-same">— unchanged</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="vital">
|
|||
|
|
<div class="vital-value" style="color:var(--color-gold)">97%</div>
|
|||
|
|
<div class="vital-label">System Health</div>
|
|||
|
|
<div class="vital-delta delta-up">▲ Satflow recovering</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Priority actions -->
|
|||
|
|
<div class="briefing-section">
|
|||
|
|
<div class="section-label">Priority Actions</div>
|
|||
|
|
<div class="action-list">
|
|||
|
|
<div class="action-item">
|
|||
|
|
<div class="action-bullet bullet-urgent">!</div>
|
|||
|
|
<div class="action-text">
|
|||
|
|
Satflow portal degraded — 87 queued transactions pending review
|
|||
|
|
<span class="tag tag-world">ECONOMY</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="action-item">
|
|||
|
|
<div class="action-bullet bullet-normal">→</div>
|
|||
|
|
<div class="action-text">
|
|||
|
|
Claude: PR for #749 (Vibe Code components) awaiting review
|
|||
|
|
<span class="tag tag-pr">PR #52</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="action-item">
|
|||
|
|
<div class="action-bullet bullet-normal">→</div>
|
|||
|
|
<div class="action-text">
|
|||
|
|
Bannerlord portal offline — reconnect or close issue
|
|||
|
|
<span class="tag tag-issue">#722</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="action-item">
|
|||
|
|
<div class="action-bullet bullet-low">·</div>
|
|||
|
|
<div class="action-text">
|
|||
|
|
Migration backlog: 3 legacy Matrix components unaudited
|
|||
|
|
<span class="tag tag-issue">#685</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Narrative / system voice -->
|
|||
|
|
<div class="briefing-section">
|
|||
|
|
<div class="section-label">System Pulse</div>
|
|||
|
|
<div class="narrative">
|
|||
|
|
Good morning. The Nexus ran <strong>overnight without incident</strong> —
|
|||
|
|
Hermes routed 214 messages, Archive wrote 88 new memories.
|
|||
|
|
Satflow hit a <strong>rate-limit wall</strong> at 03:14 UTC; queue is draining slowly.
|
|||
|
|
Gemini completed its sovereignty sweep; no critical findings.
|
|||
|
|
Claude is mid-sprint on <strong>issue #749</strong> — component prototypes landing today.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Footer -->
|
|||
|
|
<div class="briefing-footer">
|
|||
|
|
<span class="footer-note">Generated at 08:00 UTC · Next briefing 20:00 UTC</span>
|
|||
|
|
<button class="refresh-btn">Refresh</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|