433 lines
11 KiB
HTML
433 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
NEXUS COMPONENT PROTOTYPE: Agent Presence Panel
|
|
Refs: #749 (Vibe Code prototype)
|
|
Design: dark space / holographic — matches Nexus design system
|
|
Shows real-time agent location/status in the Nexus world
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Agent Presence Panel — 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-surface-deep: rgba(5, 8, 25, 0.9);
|
|
--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-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;
|
|
}
|
|
|
|
/* === PRESENCE PANEL === */
|
|
.presence-panel {
|
|
width: 340px;
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--panel-radius);
|
|
backdrop-filter: blur(var(--panel-blur));
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Header */
|
|
.panel-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
background: rgba(74, 240, 192, 0.03);
|
|
}
|
|
|
|
.panel-head-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.panel-title {
|
|
font-family: var(--font-display);
|
|
font-size: 11px;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.live-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 10px;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.live-dot {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: var(--color-primary);
|
|
animation: blink 1.4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.2; }
|
|
}
|
|
|
|
.agent-count {
|
|
font-family: var(--font-display);
|
|
font-size: 11px;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.agent-count span {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
/* Agent List */
|
|
.agent-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.agent-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid rgba(74, 240, 192, 0.06);
|
|
transition: background var(--transition);
|
|
cursor: default;
|
|
}
|
|
|
|
.agent-row:last-child { border-bottom: none; }
|
|
.agent-row:hover { background: rgba(74, 240, 192, 0.03); }
|
|
|
|
/* Avatar */
|
|
.agent-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
border: 1.5px solid var(--color-border);
|
|
background: var(--color-surface-deep);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--font-display);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.agent-avatar.active {
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 0 10px rgba(74, 240, 192, 0.25);
|
|
}
|
|
|
|
.agent-avatar.thinking {
|
|
border-color: var(--color-secondary);
|
|
animation: think-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes think-pulse {
|
|
0%, 100% { box-shadow: 0 0 8px rgba(123, 92, 255, 0.3); }
|
|
50% { box-shadow: 0 0 18px rgba(123, 92, 255, 0.6); }
|
|
}
|
|
|
|
.agent-avatar.idle {
|
|
border-color: var(--color-border);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.status-pip {
|
|
position: absolute;
|
|
bottom: 1px;
|
|
right: 1px;
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
border: 1.5px solid var(--color-bg);
|
|
}
|
|
|
|
.status-pip.active { background: var(--color-primary); }
|
|
.status-pip.thinking { background: var(--color-secondary); }
|
|
.status-pip.idle { background: var(--color-text-muted); }
|
|
.status-pip.offline { background: var(--color-danger); }
|
|
|
|
/* Agent info */
|
|
.agent-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.agent-name {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.agent-location {
|
|
font-size: 11px;
|
|
color: var(--color-text-muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.agent-location .loc-icon {
|
|
color: var(--color-primary);
|
|
margin-right: 3px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.agent-bark {
|
|
font-size: 10px;
|
|
color: var(--color-text-muted);
|
|
font-style: italic;
|
|
margin-top: 3px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Right-side meta */
|
|
.agent-meta-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.agent-state-tag {
|
|
font-size: 9px;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tag-active { color: var(--color-primary); background: rgba(74,240,192,0.12); }
|
|
.tag-thinking { color: var(--color-secondary); background: rgba(123,92,255,0.12); }
|
|
.tag-idle { color: var(--color-text-muted); background: rgba(138,154,184,0.1); }
|
|
.tag-offline { color: var(--color-danger); background: rgba(255,68,102,0.12); }
|
|
|
|
.agent-since {
|
|
font-size: 10px;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* Footer */
|
|
.panel-foot {
|
|
padding: 10px 16px;
|
|
border-top: 1px solid var(--color-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: rgba(74, 240, 192, 0.02);
|
|
}
|
|
|
|
.foot-stat {
|
|
font-size: 10px;
|
|
color: var(--color-text-muted);
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.foot-stat span {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.world-selector {
|
|
font-family: var(--font-body);
|
|
font-size: 10px;
|
|
background: transparent;
|
|
border: 1px solid var(--color-border);
|
|
color: var(--color-text-muted);
|
|
border-radius: 4px;
|
|
padding: 3px 8px;
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition: border-color var(--transition);
|
|
}
|
|
|
|
.world-selector:hover, .world-selector:focus {
|
|
border-color: var(--color-border-bright);
|
|
color: var(--color-text);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="presence-panel">
|
|
|
|
<!-- Header -->
|
|
<div class="panel-head">
|
|
<div class="panel-head-left">
|
|
<div class="live-dot"></div>
|
|
<span class="panel-title">Agents</span>
|
|
</div>
|
|
<div class="agent-count"><span>4</span> / 6 online</div>
|
|
</div>
|
|
|
|
<!-- Agent list -->
|
|
<div class="agent-list">
|
|
|
|
<!-- Timmy — active -->
|
|
<div class="agent-row">
|
|
<div class="agent-avatar active" style="color:var(--color-primary)">T
|
|
<div class="status-pip active"></div>
|
|
</div>
|
|
<div class="agent-info">
|
|
<div class="agent-name">Timmy</div>
|
|
<div class="agent-location">
|
|
<span class="loc-icon">⊕</span>Central Hub — Nexus Core
|
|
</div>
|
|
<div class="agent-bark">"Let's get the portal wall running."</div>
|
|
</div>
|
|
<div class="agent-meta-right">
|
|
<span class="agent-state-tag tag-active">active</span>
|
|
<span class="agent-since">6m</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Claude — thinking -->
|
|
<div class="agent-row">
|
|
<div class="agent-avatar thinking" style="color:#a08cff">C
|
|
<div class="status-pip thinking"></div>
|
|
</div>
|
|
<div class="agent-info">
|
|
<div class="agent-name">Claude</div>
|
|
<div class="agent-location">
|
|
<span class="loc-icon">⊕</span>Workshop — claude/issue-749
|
|
</div>
|
|
<div class="agent-bark">"Building nexus/components/ ..."</div>
|
|
</div>
|
|
<div class="agent-meta-right">
|
|
<span class="agent-state-tag tag-thinking">thinking</span>
|
|
<span class="agent-since">2m</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gemini — active -->
|
|
<div class="agent-row">
|
|
<div class="agent-avatar active" style="color:#4285f4">G
|
|
<div class="status-pip active"></div>
|
|
</div>
|
|
<div class="agent-info">
|
|
<div class="agent-name">Gemini</div>
|
|
<div class="agent-location">
|
|
<span class="loc-icon">⊕</span>Observatory — Sovereignty Sweep
|
|
</div>
|
|
<div class="agent-bark">"Audit pass in progress."</div>
|
|
</div>
|
|
<div class="agent-meta-right">
|
|
<span class="agent-state-tag tag-active">active</span>
|
|
<span class="agent-since">1h</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hermes — active (system) -->
|
|
<div class="agent-row">
|
|
<div class="agent-avatar active" style="color:var(--color-gold)">H
|
|
<div class="status-pip active"></div>
|
|
</div>
|
|
<div class="agent-info">
|
|
<div class="agent-name">Hermes <span style="font-size:9px;color:var(--color-text-muted)">[sys]</span></div>
|
|
<div class="agent-location">
|
|
<span class="loc-icon">⊕</span>Comm Bridge — always-on
|
|
</div>
|
|
<div class="agent-bark">"Routing 3 active sessions."</div>
|
|
</div>
|
|
<div class="agent-meta-right">
|
|
<span class="agent-state-tag tag-active">active</span>
|
|
<span class="agent-since">6h</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- GPT-4 — idle -->
|
|
<div class="agent-row">
|
|
<div class="agent-avatar idle" style="color:#10a37f">O
|
|
<div class="status-pip idle"></div>
|
|
</div>
|
|
<div class="agent-info">
|
|
<div class="agent-name">GPT-4o</div>
|
|
<div class="agent-location">
|
|
<span class="loc-icon" style="opacity:0.4">⊕</span>Waiting Room
|
|
</div>
|
|
<div class="agent-bark" style="opacity:0.5">Idle — awaiting task</div>
|
|
</div>
|
|
<div class="agent-meta-right">
|
|
<span class="agent-state-tag tag-idle">idle</span>
|
|
<span class="agent-since">28m</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OpenClaw — offline -->
|
|
<div class="agent-row">
|
|
<div class="agent-avatar idle" style="color:var(--color-danger);opacity:0.5">X
|
|
<div class="status-pip offline"></div>
|
|
</div>
|
|
<div class="agent-info">
|
|
<div class="agent-name" style="opacity:0.5">OpenClaw</div>
|
|
<div class="agent-location" style="opacity:0.4">
|
|
<span class="loc-icon">⊕</span>—
|
|
</div>
|
|
<div class="agent-bark" style="opacity:0.35">Last seen 2h ago</div>
|
|
</div>
|
|
<div class="agent-meta-right">
|
|
<span class="agent-state-tag tag-offline">offline</span>
|
|
<span class="agent-since" style="opacity:0.4">2h</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /agent-list -->
|
|
|
|
<!-- Footer -->
|
|
<div class="panel-foot">
|
|
<span class="foot-stat">World: <span>Nexus Core</span></span>
|
|
<select class="world-selector">
|
|
<option>All worlds</option>
|
|
<option selected>Nexus Core</option>
|
|
<option>Evennia MUD</option>
|
|
<option>Bannerlord</option>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|