Compare commits

..

1 Commits

Author SHA1 Message Date
Alexander Whitestone
7fde7569e4 fix: [VISITOR] Distinguish visitor mode from operator mode in the Nexus UI (closes #710) 2026-04-10 20:10:33 -04:00
4 changed files with 229 additions and 140 deletions

View File

@@ -1,169 +1,132 @@
# Legacy Matrix Audit — Migration Table
# Legacy Matrix Audit
Purpose:
Preserve quality work from `/Users/apayne/the-matrix` before the Nexus browser shell is rebuilt.
Preserve useful work from `/Users/apayne/the-matrix` before the Nexus browser shell is rebuilt.
Canonical rule:
- `Timmy_Foundation/the-nexus` is the only canonical 3D repo.
- `/Users/apayne/the-matrix` is legacy source material, not a parallel product.
- This document is the authoritative migration table for issue #685.
## Verified Legacy State
## Verified Legacy Matrix State
Local legacy repo: `/Users/apayne/the-matrix`
Local legacy repo:
- `/Users/apayne/the-matrix`
Observed facts:
- Vite browser app, vanilla JS + Three.js 0.171.0
- 24 JS modules under `js/`
- Smoke suite: 87 passed, 0 failed
- Package scripts: dev, build, preview, test
- PWA manifest + service worker
- Vite config with code-splitting (Three.js in separate chunk)
- Quality-tier system for hardware detection
- WebSocket client with reconnection, heartbeat, mock mode
- Full avatar FPS movement + PiP camera
- Sub-world portal system with zone triggers
- Vite browser app exists
- `npm test` passes with `87 passed, 0 failed`
- 23 JS modules under `js/`
- package scripts include `dev`, `build`, `preview`, and `test`
## Migration Table
## Known historical Nexus snapshot
Decision key:
- **CARRY** = transplant concepts and patterns into Nexus vNext
- **ARCHIVE** = keep as reference, do not directly transplant
- **DROP** = do not preserve unless re-justified
Useful in-repo reference point:
- `0518a1c3ae3c1d0afeb24dea9772102f5a3d9a66`
### Core Modules
That snapshot still contains browser-world root files such as:
- `index.html`
- `app.js`
- `style.css`
- `package.json`
- `tests/`
| File | Lines | Capability | Decision | Why for Nexus |
|------|-------|------------|----------|---------------|
| `js/main.js` | 180 | App bootstrap, render loop, WebGL context recovery | **CARRY** | Architectural pattern. Shows clean init/teardown lifecycle, context-loss recovery, visibility pause. Nexus needs this loop but should not copy the monolithic wiring. |
| `js/world.js` | 95 | Scene, camera, renderer, grid, lights | **CARRY** | Foundational. Quality-tier-aware renderer setup, grid floor, lighting. Nexus already has a world but should adopt the tier-aware antialiasing and pixel-ratio capping. |
| `js/config.js` | 68 | Connection config via URL params + env vars | **ARCHIVE** | Pattern reference only. Nexus config should route through Hermes harness, not Vite env vars. The URL-override pattern (ws, token, mock) is worth remembering. |
| `js/quality.js` | 90 | Hardware detection, quality tier (low/medium/high) | **CARRY** | Directly useful. DPR capping, core/memory/screen heuristics, WebGL renderer sniffing. Nexus needs this for graceful degradation on Mac/iPad. |
| `js/storage.js` | 39 | Safe localStorage with in-memory fallback | **CARRY** | Small, robust, sandbox-proof. Nexus should use this or equivalent. Prevents crashes in sandboxed iframes. |
## Rescue Candidates
### Agent System
### Carry forward into Nexus vNext
| File | Lines | Capability | Decision | Why for Nexus |
|------|-------|------------|----------|---------------|
| `js/agent-defs.js` | 30 | Agent identity data (id, label, color, role, position) | **CARRY** | Seed data model. Nexus agents should be defined similarly — data-driven, not hardcoded in render logic. Color hex helper is trivial but useful. |
| `js/agents.js` | 523 | Agent 3D objects, movement, state, connection lines, hot-add/remove | **CARRY** | Core visual system. Shared geometries (perf), movement interpolation, wallet-health stress glow, auto-placement algorithm, connection-line pulse. All valuable. Needs integration with real agent state from Hermes. |
| `js/behaviors.js` | 413 | Autonomous agent behavior state machine | **ARCHIVE** | Pattern reference. The personality-weighted behavior selection, conversation pairing, and artifact-placement system are well-designed. But Nexus behaviors should be driven by Hermes, not a client-side simulation. Keep the architecture, drop the fake-autonomy. |
| `js/presence.js` | 139 | Agent presence HUD (online/offline, uptime, state) | **CARRY** | Valuable UX. Live "who's here" panel with uptime tickers and state indicators. Needs real backend state, not mock assumptions. |
1. `agent-defs.js`
- agent identity definitions
- useful as seed data/model for visible entities in the world
### Visitor & Interaction
2. `agents.js`
- agent objects, state machine, connection lines
- useful for visualizing Timmy / subagents / system processes in a world-native way
| File | Lines | Capability | Decision | Why for Nexus |
|------|-------|------------|----------|---------------|
| `js/visitor.js` | 141 | Visitor enter/leave protocol, chat input | **CARRY** | Session lifecycle. Device detection, visibility-based leave/return, chat input wiring. Directly applicable to Nexus visitor tracking. |
| `js/avatar.js` | 360 | FPS movement, PiP dual-camera, touch input | **CARRY** | Visitor embodiment. WASD + arrow movement, first/third person swap, PiP canvas, touch joystick, right-click mouse-look. Strong work. Needs tuning for Nexus world bounds. |
| `js/interaction.js` | 296 | Raycasting, click-to-select agents, info popup | **CARRY** | Essential for any browser world. OrbitControls, pointer/tap detection, agent popup with state/role, TALK button. The popup-anchoring-to-3D-position logic is particularly well done. |
| `js/zones.js` | 161 | Proximity trigger zones (portal enter/exit, events) | **CARRY** | Spatial event system. Portal traversal, event triggers, once-only zones. Nexus portals (#672) need this exact pattern. |
3. `avatar.js`
- visitor embodiment, movement, camera handling
- strongly aligned with "training ground" and "walk the world" goals
### Chat & Communication
4. `ui.js`
- HUD, chat surfaces, overlays
- useful if rebuilt against real harness data instead of stale fake state
| File | Lines | Capability | Decision | Why for Nexus |
|------|-------|------------|----------|---------------|
| `js/bark.js` | 141 | Speech bubble system with typing animation | **CARRY** | Timmy's voice in-world. Typing animation, queue, auto-dismiss, emotion tags, demo bark lines. Strong expressive presence. The demo lines ("The Tower watches. The Tower remembers.") are good seed content. |
| `js/ui.js` | 285 | Chat panel, agent list, HUD, streaming tokens | **CARRY** | Chat infrastructure. Rolling chat buffer, per-agent localStorage history, streaming token display with cursor animation, HTML escaping. Needs reconnection to Hermes chat instead of WS mock. |
| `js/transcript.js` | 183 | Conversation transcript logger, export | **ARCHIVE** | Pattern reference. The rolling buffer, structured JSON entries, TXT/JSON download, HUD badge are all solid. But transcript authority should live in Hermes, not browser localStorage. Keep the UX pattern, rebuild storage layer. |
5. `websocket.js`
- browser-side live bridge patterns
- useful if retethered to Hermes-facing transport
### Visual Effects
6. `transcript.js`
- local transcript capture pattern
- useful if durable truth still routes through Hermes and browser cache remains secondary
| File | Lines | Capability | Decision | Why for Nexus |
|------|-------|------------|----------|---------------|
| `js/effects.js` | 195 | Matrix rain particles + starfield | **CARRY** | Atmospheric foundation. Quality-tier particle counts, frame-skip optimization, adaptive draw-range (FPS-budget recovery), bounding-sphere pre-compute. This is production-grade particle work. |
| `js/ambient.js` | 212 | Mood-driven atmosphere (lighting, fog, rain, stars) | **CARRY** | Scene mood engine. Smooth eased transitions between mood states (calm, focused, excited, contemplative, stressed), per-mood lighting/fog/rain/star parameters. Directly supports Nexus atmosphere. |
| `js/satflow.js` | 261 | Lightning payment particle flow | **CARRY** | Economy visualization. Bezier-arc particles, staggered travel, burst-on-arrival, pooling. If Nexus shows any payment/economy flow, this is the pattern. |
7. `ambient.js`
- mood / atmosphere system
- directly supports wizardly presentation without changing system authority
### Economy & Scene
8. `satflow.js`
- visual economy / payment flow motifs
- useful if Timmy's economy/agent interactions become a real visible layer
| File | Lines | Capability | Decision | Why for Nexus |
|------|-------|------------|----------|---------------|
| `js/economy.js` | 100 | Wallet/treasury HUD panel | **ARCHIVE** | UI pattern reference. Clean sats formatting, per-agent balance rows, health-colored dots, recent transactions. Worth rebuilding when backed by real sovereign metrics. |
| `js/scene-objects.js` | 718 | Dynamic 3D object registry, portals, sub-worlds | **CARRY** | Critical. Geometry/material factories, animation system (rotate/bob/pulse/orbit), portal visual (torus ring + glow disc + zone), sub-world load/unload, text sprites, compound groups. This is the most complex and valuable module. Nexus portals (#672) should build on this. |
9. `economy.js`
- treasury / wallet panel ideas
- useful if later backed by real sovereign metrics
### Backend Bridge
10. `presence.js`
- who-is-here / online-state UI
- useful for showing human + agent + process presence in the world
| File | Lines | Capability | Decision | Why for Nexus |
|------|-------|------------|----------|---------------|
| `js/websocket.js` | 598 | WebSocket client, message dispatcher, mock mode | **ARCHIVE** | Pattern reference only. Reconnection with exponential backoff, heartbeat/zombie detection, rich message dispatch (40+ message types), streaming chat support. The architecture is sound but must be reconnected to Hermes transport, not copied wholesale. The message-type catalog is the most valuable reference artifact. |
| `js/demo.js` | ~300 | Demo autopilot (mock mode simulation) | **DROP** | Fake activity simulation. Deliberately creates the illusion of live data. Do not preserve. If Nexus needs a demo mode, build a clearly-labeled one that doesn't pretend to be real. |
11. `interaction.js`
- clicking, inspecting, selecting world entities
- likely needed in any real browser-facing Nexus shell
### Testing & Build
12. `quality.js`
- hardware-aware quality tiering
- useful for local-first graceful degradation on Mac hardware
| File | Lines | Capability | Decision | Why for Nexus |
|------|-------|------------|----------|---------------|
| `test/smoke.mjs` | 235 | Automated browser smoke test suite | **CARRY** | Testing discipline. Module inventory check, export verification, HTML structure validation, Vite build test, bundle-size budget, PWA manifest check. Nexus should adopt this pattern (adapted for its own module structure). |
| `vite.config.js` | 53 | Build config with code splitting, SW generation | **ARCHIVE** | Build tooling reference. manualChunks for Three.js, SW precache generation plugin. Relevant if Nexus re-commits to Vite. |
| `sw.js` | ~40 | Service worker with precache | **ARCHIVE** | PWA reference. Relevant only if Nexus pursues offline-first PWA. |
| `manifest.json` | ~20 | PWA manifest | **ARCHIVE** | PWA reference. |
13. `bark.js`
- prominent speech / bark system
- strong fit for Timmy's expressive presence in-world
### Server-Side (Python)
14. `world.js`, `effects.js`, `scene-objects.js`, `zones.js`
- broad visual foundation work
- should be mined for patterns, not blindly transplanted
| File | Lines | Capability | Decision | Why for Nexus |
|------|-------|------------|----------|---------------|
| `server/bridge.py` | ~900 | WebSocket bridge server | **ARCHIVE** | Reference. Hermes replaces this role. Keep for protocol schema reference. |
| `server/gateway.py` | ~400 | HTTP gateway | **ARCHIVE** | Reference. |
| `server/ollama_client.py` | ~280 | Ollama integration | **ARCHIVE** | Reference. Relevant if Nexus needs local model calls. |
| `server/research.py` | ~450 | Research pipeline | **ARCHIVE** | Reference. |
| `server/webhooks.py` | ~350 | Webhook handler | **ARCHIVE** | Reference. |
| `server/test_*.py` | ~5 files | Server test suites | **ARCHIVE** | Testing patterns worth studying. |
15. `test/smoke.mjs`
- browser smoke discipline
- should inform rebuilt validation in canonical Nexus repo
## Summary by Decision
### Archive as reference, not direct carry-forward
### CARRY FORWARD (17 modules)
These modules contain patterns, algorithms, or entire implementations that should move into the Nexus browser shell:
- demo/autopilot assumptions that pretend fake backend activity is real
- any websocket schema that no longer matches Hermes truth
- Vite-specific plumbing that is only useful if we consciously recommit to Vite
- `quality.js` — hardware detection
- `storage.js` — safe persistence
- `world.js` — scene foundation
- `agent-defs.js` — agent data model
- `agents.js` — agent visualization + movement
- `presence.js` — online presence HUD
- `visitor.js` — session lifecycle
- `avatar.js` — FPS embodiment
- `interaction.js` — click/select/raycast
- `zones.js` — spatial triggers
- `bark.js` — speech bubbles
- `ui.js` — chat/HUD
- `effects.js` — particle effects
- `ambient.js` — mood atmosphere
- `satflow.js` — payment flow particles
- `scene-objects.js` — dynamic objects + portals
- `test/smoke.mjs` — smoke test discipline
### Deliberately drop unless re-justified
### ARCHIVE AS REFERENCE (9 modules/files)
Keep for patterns, protocol schemas, and architectural reference. Do not directly transplant:
- `config.js` — config pattern (use Hermes instead)
- `behaviors.js` — behavior architecture (use Hermes-driven state)
- `transcript.js` — transcript UX (use Hermes storage)
- `economy.js` — economy UI pattern (use real metrics)
- `websocket.js` — message protocol catalog + reconnection patterns
- `vite.config.js` — build tooling
- `sw.js`, `manifest.json` — PWA reference
- `server/*.py` — server protocol schemas
### DELIBERATELY DROP (2)
Do not preserve unless re-justified:
- `demo.js` — fake activity simulation; creates false impression of live system
- `main.js` monolithic wiring — the init pattern carries, the specific module wiring does not
- anything that presents mock data as if it were live
- anything that duplicates a better Hermes-native telemetry path
- anything that turns the browser into the system of record
## Concern Separation for Nexus vNext
When rebuilding inside `the-nexus`, keep these concerns in separate modules:
When rebuilding inside `the-nexus`, keep concerns separated:
1. **World shell** — scene, camera, renderer, grid, lights, fog
2. **Effects layer** — rain, stars, ambient mood transitions
3. **Agent visualization** — 3D objects, labels, connection lines, movement
4. **Visitor embodiment** — avatar, FPS controls, PiP camera
5. **Interaction layer** — raycasting, selection, zones, portal traversal
6. **Communication surface** — bark, chat panel, streaming tokens
7. **Presence & HUD** — who's-online, economy panel, transcript controls
8. **Harness bridge** — WebSocket/API transport to Hermes (NOT a copy of websocket.js)
9. **Quality & config** — hardware detection, runtime configuration
10. **Smoke tests** — automated validation
1. World shell / rendering
- scene, camera, movement, atmosphere
2. Presence and embodiment
- avatar, agent placement, selection, bark/chat surfaces
3. Harness bridge
- websocket / API bridge from Hermes truth into browser state
4. Visualization panels
- metrics, presence, economy, portal states, transcripts
5. Validation
- smoke tests, screenshot proof, provenance checks
6. Game portal layer
- Morrowind / portal-specific interaction surfaces
Do not collapse all of this into one giant app file again.
Do not let visual shell code become telemetry authority.

66
app.js
View File

@@ -48,6 +48,9 @@ let chatOpen = true;
let loadProgress = 0;
let performanceTier = 'high';
// ═══ UI MODE (VISITOR / OPERATOR) ═══
let uiMode = 'visitor'; // 'visitor' | 'operator'
// ═══ HERMES WS STATE ═══
let hermesWs = null;
let wsReconnectTimer = null;
@@ -1867,6 +1870,9 @@ function setupControls() {
if (e.key.toLowerCase() === 'v' && document.activeElement !== document.getElementById('chat-input')) {
cycleNavMode();
}
if (e.key.toLowerCase() === 'o' && document.activeElement !== document.getElementById('chat-input')) {
toggleUIMode();
}
if (e.key.toLowerCase() === 'f' && activePortal && !portalOverlayActive) {
activatePortal(activePortal);
}
@@ -1964,18 +1970,9 @@ function setupControls() {
});
document.getElementById('chat-send').addEventListener('click', () => sendChatMessage());
// Add MemPalace mining button
// Add MemPalace mining button (operator-only)
document.querySelector('.chat-quick-actions').innerHTML += `
<button class="quick-action-btn" onclick="mineMemPalaceContent()">Mine Chat</button>
<div id="mem-palace-stats" class="mem-palace-stats">
<div>Compression: <span id="compression-ratio">--</span>x</div>
<div>Docs: <span id="docs-mined">0</span></div>
<div>AAAK: <span id="aaak-size">0B</span></div>
<div>Compression: <span id="compression-ratio">--</span>x</div>
<div>Docs: <span id="docs-mined">0</span></div>
<div>AAAK: <span id="aaak-size">0B</span></div>
<div class="mem-palace-logs" style="margin-top:4px; font-size:10px; color:#4af0c0;">Logs: <span id="mem-logs">0</span></div>
</div>
<button class="quick-action-btn operator-only" onclick="mineMemPalaceContent()">Mine Chat</button>
`;
// Chat quick actions
@@ -2006,6 +2003,53 @@ function setupControls() {
document.getElementById('atlas-toggle-btn').addEventListener('click', openPortalAtlas);
document.getElementById('atlas-close-btn').addEventListener('click', closePortalAtlas);
// ═══ VISITOR / OPERATOR MODE TOGGLE ═══
// Restore saved mode from localStorage
const savedMode = localStorage.getItem('nexus-ui-mode');
if (savedMode === 'operator') {
uiMode = 'operator';
}
applyUIMode();
// Create and append mode toggle button to the HUD controls area
const modeBtn = document.createElement('button');
modeBtn.id = 'mode-toggle-btn';
modeBtn.className = 'mode-toggle-btn';
modeBtn.setAttribute('data-mode', uiMode);
modeBtn.innerHTML = modeToggleLabel();
modeBtn.title = uiMode === 'visitor' ? 'Switch to Operator mode' : 'Switch to Visitor mode';
modeBtn.addEventListener('click', toggleUIMode);
const hudEl = document.getElementById('hud');
if (hudEl) hudEl.appendChild(modeBtn);
}
function toggleUIMode() {
uiMode = uiMode === 'visitor' ? 'operator' : 'visitor';
localStorage.setItem('nexus-ui-mode', uiMode);
applyUIMode();
// Update button
const btn = document.getElementById('mode-toggle-btn');
if (btn) {
btn.setAttribute('data-mode', uiMode);
btn.innerHTML = modeToggleLabel();
btn.title = uiMode === 'visitor' ? 'Switch to Operator mode' : 'Switch to Visitor mode';
}
addChatMessage('system', `Mode: ${uiMode.toUpperCase()}. ${uiMode === 'operator' ? 'Operator panels enabled.' : 'Visitor view. Clean and focused.'}`);
}
function modeToggleLabel() {
if (uiMode === 'visitor') {
return '<span class="mode-icon">👁</span> VISITOR';
}
return '<span class="mode-icon">⚙</span> OPERATOR';
}
function applyUIMode() {
document.body.classList.toggle('visitor-mode', uiMode === 'visitor');
}
function sendChatMessage(overrideText = null) {

View File

@@ -157,7 +157,8 @@
<!-- Controls hint + nav mode -->
<div class="hud-controls">
<span>WASD</span> move &nbsp; <span>Mouse</span> look &nbsp; <span>Enter</span> chat &nbsp;
<span>V</span> mode: <span id="nav-mode-label">WALK</span>
<span>V</span> nav: <span id="nav-mode-label">WALK</span> &nbsp;
<span>O</span> toggle mode &nbsp;
<span id="nav-mode-hint" class="nav-mode-hint"></span>
&nbsp; <span class="ws-hud-status">HERMES: <span id="ws-status-dot" class="chat-status-dot"></span></span>
</div>

View File

@@ -1580,3 +1580,84 @@ canvas#nexus-canvas {
text-transform: uppercase;
}
/* === VISITOR / OPERATOR MODE TOGGLE === */
.mode-toggle-btn {
position: absolute;
bottom: var(--space-3);
right: var(--space-3);
pointer-events: auto;
background: rgba(10, 15, 40, 0.7);
border: 1px solid var(--color-primary);
color: var(--color-primary);
padding: 6px 14px;
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
backdrop-filter: blur(5px);
transition: all var(--transition-ui);
z-index: 20;
}
.mode-toggle-btn:hover {
background: var(--color-primary);
color: var(--color-bg);
box-shadow: 0 0 15px var(--color-primary);
}
.mode-toggle-btn .mode-icon {
font-size: 14px;
}
.mode-toggle-btn[data-mode="operator"] {
border-color: var(--color-gold);
color: var(--color-gold);
box-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
}
.mode-toggle-btn[data-mode="operator"]:hover {
background: var(--color-gold);
color: var(--color-bg);
box-shadow: 0 0 15px var(--color-gold);
}
/* Visitor mode: hide operator-only surfaces */
body.visitor-mode .gofai-hud,
body.visitor-mode .hud-agent-log,
body.visitor-mode .hud-debug,
body.visitor-mode .bannerlord-hud,
body.visitor-mode #mem-palace-status,
body.visitor-mode #mem-palace-controls,
body.visitor-mode #mempalace-results,
body.visitor-mode .mem-palace-ui,
body.visitor-mode .mem-palace-stats,
body.visitor-mode .ws-hud-status,
body.visitor-mode .chat-quick-actions .operator-only,
body.visitor-mode .nexus-footer {
display: none !important;
}
/* Visitor mode: simplify controls hint */
body.visitor-mode .hud-controls {
font-size: var(--text-xs);
opacity: 0.6;
}
/* Visitor mode: cleaner chat */
body.visitor-mode .chat-panel {
width: 320px;
max-height: 300px;
}
/* Operator badge in operator mode */
body:not(.visitor-mode) .hud-controls::after {
content: ' OPERATOR';
color: var(--color-gold);
font-weight: 700;
letter-spacing: 0.1em;
}