DESIGN.md@ui/dashboard · git:20260613.fc65fd5 · 2026-06-13 · sha256 3b699fab6a193537
DESIGN.md@ui/dashboard git:20260613.fc65fd5A
Immutable. This exact content is served forever at /api/v1/blob/3b699fab6a193537.
# Cortex Memory Dashboard - Design System
## Design Reference: Cyber Obsidian
A professional neural graph dashboard inspired by Stitch-generated reference designs, combining Obsidian-style force-directed graph interaction with a dark IDE-like chrome.
---
## Layout Architecture
```
+--[SIDEBAR 200px]--+--[MAIN AREA]--------------------------------------+
| | [TOP NAV BAR - tabs + search + status] |
| Cortex | |
| v4.0 | [KPI STRIP - 4 metric cards] |
| | |
| > Home | |
| > Nodes | [3D FORCE GRAPH] |
| > Threads | Obsidian-style |
| > Archive | Force-directed |
| > Trash | |
| | |
| [NEW MEMORY] | [BOTTOM BAR - legend + status] |
| | |
| Settings Status | |
+--------------------+---[DETAIL PANEL 400px]---------------------------+
| Type badge | Close |
| Title |
| Content |
| Properties grid |
| Classifiers (tags) |
| Proximal Links (connections) |
| Saturation Bar (heat) |
+---------------------------------------------------+
```
### Breakpoints
- Desktop: Full layout with sidebar + graph + detail panel
- No responsive breakpoints needed (this is a dev tool, desktop-only)
---
## Color System
### Base Palette
| Token | Value | Usage |
|---------------------|--------------------|------------------------------|
| `--bg-base` | `#0a0a0a` | App background |
| `--bg-surface` | `#111111` | Sidebar, panels |
| `--bg-elevated` | `#1a1a1a` | Cards, KPI boxes |
| `--bg-hover` | `#222222` | Hover states |
| `--border-subtle` | `rgba(255,255,255,0.06)` | Card borders |
| `--border-active` | `#4ade80` | Active nav, focus states |
### Accent Colors
| Token | Value | Usage |
|---------------------|--------------------|------------------------------|
| `--accent-primary` | `#4ade80` | Primary actions, active nav |
| `--accent-cyan` | `#00d2ff` | Entities, KPI values |
| `--accent-magenta` | `#d946ef` | Semantic memories |
| `--accent-green` | `#26de81` | Episodic memories |
| `--accent-red` | `#ff4444` | Causal edges, errors |
| `--accent-amber` | `#f59e0b` | Hover highlight, warnings |
### Text Colors
| Token | Value | Usage |
|---------------------|--------------------|------------------------------|
| `--text-primary` | `rgba(255,255,255,0.87)` | Headings, values |
| `--text-secondary` | `rgba(255,255,255,0.55)` | Body text, labels |
| `--text-tertiary` | `rgba(255,255,255,0.25)` | Hints, inactive |
| `--text-accent` | `#4ade80` | Active labels, links |
---
## Typography
### Font Stack
- **Display**: `'Orbitron', sans-serif` - Logo, KPI values, section headers
- **Body**: `'JetBrains Mono', monospace` - All other text
### Scale
| Element | Font | Size | Weight | Letter-spacing | Case |
|-----------------|------------|-------|--------|----------------|-----------|
| Logo | Orbitron | 13px | 800 | 4px | UPPERCASE |
| KPI Value | Orbitron | 22px | 700 | 0 | - |
| KPI Label | JetBrains | 8px | 400 | 2px | UPPERCASE |
| Nav Item | JetBrains | 11px | 500 | 0 | Sentence |
| Section Header | Orbitron | 8px | 600 | 3px | UPPERCASE |
| Body Text | JetBrains | 11px | 400 | 0 | Sentence |
| Badge | Orbitron | 8px | 600 | 2px | UPPERCASE |
| Meta Label | JetBrains | 9px | 400 | 1px | UPPERCASE |
| Meta Value | JetBrains | 11px | 400 | 0 | - |
| Tooltip | JetBrains | 10px | 400 | 0 | - |
---
## Components
### Sidebar Navigation
- Fixed left, 200px wide
- Logo at top with version badge
- Icon + label nav items
- Active state: green left border + green text + subtle green bg
- "New Memory" CTA button at bottom
- Footer: settings gear + status indicator
### KPI Strip
- 4 cards in a horizontal row below the top nav
- Each card: large Orbitron number + small uppercase label
- Background: `--bg-elevated`
- Border: `--border-subtle`
- Value color: `--accent-primary`
### Top Navigation Bar
- Horizontal tab strip
- Tabs: Neural Graph, Memory Logs, Pattern Analysis, Vector Search
- Search input right-aligned
- Active tab: underline accent
### Neural Graph (3D)
- Three.js force-directed simulation
- Memory nodes: spheres (episodic green, semantic magenta)
- Entity nodes: octahedrons (cyan)
- Edge styles:
- Default: `#5a6a7a` at 0.3 opacity
- Causal: `#ff4444`
- Co-occurrence: `#d946ef`
- Virtual (memory-entity): `#3a4a5a` at 0.15 opacity
- Node labels: pipe separator style (`| LABEL_TEXT`), shown on hover or zoom
- Selective bloom on node cores
- Ambient dust particles (subtle)
- Auto-fit camera after simulation settles
- Auto-rotate when idle > 4s
### Detail Panel (Right Slide-in)
- 400px wide, slide from right
- Sections:
1. **Type Badge** - SEMANTIC / EPISODIC / ENTITY with colored border
2. **Title** - Node name or content excerpt
3. **Content** - Full content text (memories only)
4. **Properties** - 2-column grid (Heat, Importance, Domain, Source, Created, etc.)
5. **Classifiers** - Tag pills with colored borders
6. **Proximal Links** - Connection list sorted by weight, clickable
7. **Saturation Bar** - Heat visualization bar at bottom
- Close button: top-right, styled X
### Bottom Status Bar
- Legend: colored dots with labels
- Right side: node count, edge count, latency
- Status: "SYNCHRONIZED" indicator
### Analytics Panel (Left slide-over)
- Slides over sidebar on toggle
- KPI overview strip
- Bar charts: Memory Types, Heat Distribution, Domain Breakdown, Tag Frequency
- Clickable bars filter the graph view
---
## Interaction Patterns
### Node Hover
- Highlight mesh (wireframe) appears around node
- Connected edges turn amber (#f59e0b)
- Tooltip shows: content, type badge, meta (time, heat, domain)
- Label becomes visible
### Node Click
- Detail panel opens from right
- Non-connected nodes fade to 12% opacity
- Connected edges highlight
- No zoom-to-node (preserves spatial context)
### Panel Close
- ESC key or close button
- All nodes restore full opacity
- Camera stays in current position
### Search
- Real-time filtering of visible nodes
- Matches against content, tags, domain, entity name
- Triggers graph rebuild with force simulation reheat
### Type Filter
- All / Episodic / Semantic / Entity buttons
- Triggers full graph rebuild
- Force simulation reheats on filter change
---
## Animation
| Element | Property | Duration | Easing |
|-----------------|-----------------|----------|---------------------------------|
| Panel slide | transform | 450ms | cubic-bezier(0.16, 1, 0.3, 1) |
| Camera fly | position | 1000ms | ease-out cubic |
| Node opacity | opacity | 300ms | linear |
| Tooltip | display | instant | - |
| Filter button | background | 300ms | ease |
| Loading fade | opacity | 1000ms | linear |
| Auto-rotate | orbit | continuous | 0.15 deg/frame |
| Entity spin | rotation.y | continuous | 0.004 rad/frame |
| Dust drift | position | continuous | linear |
| Flow particles | position | continuous | linear along edge |
| Force sim | node positions | ~660 frames | alpha decay 0.0015 |
---
## Node Sizing
| Node Type | Base Scale | Scale Factors | Range |
|-----------|-----------|-----------------------------------|-----------|
| Memory | 1.2 | + importance * 1.0 + heat * 0.6 | 1.2 - 2.8 |
| Entity | 1.8 | + heat * 1.2 | 1.8 - 3.0 |
---
## Edge Rendering
| Edge Type | Color | Opacity Factor |
|----------------|-----------|--------------------------|
| Default | `#90a4ae` | 0.15 + weight * 0.35 |
| Causal | `#ff4444` | 0.15 + weight * 0.35 |
| Co-occurrence | `#d946ef` | 0.15 + weight * 0.35 |
| Virtual | `#556677` | 0.06 + weight * 0.12 |
| Highlighted | `#f59e0b` | 0.9 |
---
## Post-Processing
- **Selective Bloom**: 2-pass compositing
- Bloom strength: 0.8
- Bloom radius: 0.5
- Bloom threshold: 0.35
- **Vignette**: darkness 1.2, factor 0.3
- **Film Grain**: intensity 0.03
---
## File Structure
```
ui/dashboard/
DESIGN.md # This file
theme.css # All styles
js/
config.js # Colors, categories, utilities
state.js # Reactive state + event bus
scene.js # Three.js setup, bloom, camera
nodes.js # Memory + entity node builders
edges.js # Edge lines, fiber tracts, flow particles
effects.js # Ambient dust
graph.js # Force simulation, raycasting, animation loop
interaction.js # Tooltip, detail panel, keyboard shortcuts
timeline.js # Timeline overlay view
categories.js # Categories overlay view
analytics.js # Analytics panel charts
controls.js # UI button handlers
polling.js # API polling
stats.js # Header stats bar
```
---
## API Contract
**Endpoint**: `GET /api/dashboard`
**Response**:
```json
{
"stats": {
"total": 87,
"active": 26,
"episodic": 14,
"semantic": 12,
"entities": 61,
"relationships": 212,
"avg_heat": 0.342,
"engram_total_slots": 128,
"engram_occupied_slots": 26,
"triggers": 5,
"protected": 3
},
"hot_memories": [...],
"entities": [...],
"relationships": [...],
"domain_counts": {...},
"recent_memories": [...]
}
```