# Vibe Code Prototype Evaluation — Issue #749

## Components Prototyped

| File | Component | Status |
|------|-----------|--------|
| `portal-status-wall.html` | Portal Status Wall (#714) | ✅ Done |
| `agent-presence-panel.html` | Agent Presence Panel | ✅ Done |
| `heartbeat-briefing-panel.html` | Heartbeat / Morning Briefing (#698) | ✅ Done |

---

## Design Language Evaluation

All three prototypes were hand-authored against the Nexus design system
(`style.css` on `main`) to establish a baseline. Vibe Code tools
(AI Studio, Stitch) can accelerate iteration once this baseline exists.

### What matches the dark space / holographic language

- **Palette**: `#050510` bg, `#4af0c0` primary teal, `#7b5cff` secondary purple,
  danger red `#ff4466`, warning amber `#ffaa22`, gold `#ffd700`
- **Typography**: Orbitron for display/titles, JetBrains Mono for body
- **Glassmorphism panels**: `backdrop-filter: blur(16px)` + semi-transparent surfaces
- **Subtle glow**: `box-shadow` on active/thinking avatars, primary pulse animations
- **Micro-animations**: heartbeat bars, pulsing dots, thinking-pulse ring — all match
  the cadence of existing loading-screen animations

### What Vibe Code tools do well

- Rapid layout scaffolding — grid/flex structures appear in seconds
- Color palette application once a design token list is pasted
- Common UI patterns (cards, badges, status dots) generated accurately
- Good at iterating on a component when given the existing CSS vars as context

### Where manual work is needed

- **Semantic naming**: generated class names tend to be generic (`container`, `box`)
  rather than domain-specific (`portal-card`, `agent-avatar`) — rename after generation
- **Animation polish**: Vibe Code generates basic `@keyframes` but the specific
  easing curves and timing that match the Nexus "soul" require hand-tuning
- **State modeling**: status variants (online/warning/offline/locked) and
  conditional styling need explicit spec; tools generate happy-path only
- **Domain vocabulary**: portal IDs, agent names, bark text — all placeholder content
  needs replacement with real Nexus data model values
- **Responsive / overlay integration**: these are standalone HTML prototypes;
  wiring into the Three.js canvas overlay system requires manual work

---

## Patterns extracted for reuse

```css
/* Status stripe — left edge on panel cards */
.portal-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  border-radius: var(--panel-radius) 0 0 var(--panel-radius);
}

/* Avatar glow for thinking state */
.agent-avatar.thinking {
  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); }
}

/* Section header divider */
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* Latency / progress track */
.latency-track {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
```

---

## Next Steps

1. Wire `portal-status-wall` to real `portals.json` + websocket updates (issue #714)
2. Wire `agent-presence-panel` to Hermes heartbeat stream (issue #698)
3. Wire `heartbeat-briefing-panel` to daily summary generator
4. Integrate as Three.js CSS2DObject overlays on Nexus canvas (issue #686 / #687)
5. Try Stitch (`labs.google/stitch`) for visual design iteration on the portal card shape