WIP: issue #710 (mimo swarm)

app.js

@@ -66,6 +66,9 @@ let workshopScanMat = null;
 let workshopPanelRefreshTimer = 0;
 let lastFocusedPortal = null;
 
+// ═══ VISITOR / OPERATOR MODE ═══
+let uiMode = 'visitor'; // 'visitor' | 'operator'
+
 // ═══ NAVIGATION SYSTEM ═══
 const NAV_MODES = ['walk', 'orbit', 'fly'];
 let navModeIdx = 0;
@@ -754,6 +757,7 @@ async function init() {
 
     enterPrompt.addEventListener('click', () => {
       enterPrompt.classList.add('fade-out');
+      document.body.classList.add('visitor-mode');
       document.getElementById('hud').style.display = 'block';
       setTimeout(() => { enterPrompt.remove(); }, 600);
     }, { once: true });
@@ -1837,6 +1841,18 @@ function createAmbientStructures() {
 }
 
 // ═══ NAVIGATION MODE ═══
+// ═══ VISITOR / OPERATOR MODE TOGGLE ═══
+function toggleUIMode() {
+  uiMode = uiMode === 'visitor' ? 'operator' : 'visitor';
+  document.body.classList.remove('visitor-mode', 'operator-mode');
+  document.body.classList.add(uiMode + '-mode');
+  const label = document.getElementById('mode-label');
+  const icon = document.querySelector('#mode-toggle-btn .hud-icon');
+  if (label) label.textContent = uiMode === 'visitor' ? 'VISITOR' : 'OPERATOR';
+  if (icon) icon.textContent = uiMode === 'visitor' ? '👁' : '⚙';
+  addChatMessage('system', `Switched to ${uiMode.toUpperCase()} mode.`);
+}
+
 function cycleNavMode() {
   navModeIdx = (navModeIdx + 1) % NAV_MODES.length;
   const mode = NAV_MODES[navModeIdx];
@@ -2030,6 +2046,7 @@ function setupControls() {
   document.getElementById('portal-close-btn').addEventListener('click', closePortalOverlay);
   document.getElementById('vision-close-btn').addEventListener('click', closeVisionOverlay);
   
+  document.getElementById('mode-toggle-btn').addEventListener('click', toggleUIMode);
   document.getElementById('atlas-toggle-btn').addEventListener('click', openPortalAtlas);
   document.getElementById('atlas-close-btn').addEventListener('click', closePortalAtlas);
 }

index.html

@@ -113,6 +113,10 @@
 
   <!-- Top Right: Agent Log & Atlas Toggle -->
   <div class="hud-top-right">
+    <button id="mode-toggle-btn" class="hud-icon-btn mode-toggle" title="Toggle Mode">
+      <span class="hud-icon">👁</span>
+      <span class="hud-btn-label" id="mode-label">VISITOR</span>
+    </button>
     <button id="atlas-toggle-btn" class="hud-icon-btn" title="Portal Atlas">
       <span class="hud-icon">🌐</span>
       <span class="hud-btn-label">ATLAS</span>

style.css

@@ -2077,3 +2077,76 @@ canvas#nexus-canvas {
   font-style: italic;
   padding: 4px 0;
 }
+
+
+/* ═══════════════════════════════════════════════════════
+   VISITOR / OPERATOR MODE
+   ═══════════════════════════════════════════════════════ */
+
+.mode-toggle {
+  border-color: #4af0c0 !important;
+}
+
+.mode-toggle .hud-icon {
+  font-size: 16px;
+}
+
+#mode-label {
+  color: #4af0c0;
+  font-weight: 600;
+}
+
+/* Visitor mode: hide operator-only panels */
+body.visitor-mode .gofai-hud,
+body.visitor-mode .hud-debug,
+body.visitor-mode .hud-agent-log,
+body.visitor-mode .archive-health-dashboard,
+body.visitor-mode .memory-feed,
+body.visitor-mode .memory-inspect-panel,
+body.visitor-mode .memory-connections-panel,
+body.visitor-mode .memory-filter,
+body.visitor-mode #mem-palace-container,
+body.visitor-mode #mem-palace-controls,
+body.visitor-mode #mempalace-results,
+body.visitor-mode .nexus-footer {
+  display: none !important;
+}
+
+/* Visitor mode: simplify bannerlord status */
+body.visitor-mode #bannerlord-status {
+  display: none !important;
+}
+
+/* Visitor mode: add a subtle visitor badge */
+body.visitor-mode .hud-location::after {
+  content: '⬡ VISITOR';
+  margin-left: 12px;
+  font-size: 9px;
+  letter-spacing: 0.15em;
+  color: #4af0c0;
+  opacity: 0.7;
+  font-family: 'Orbitron', sans-serif;
+  vertical-align: middle;
+}
+
+/* Operator mode: add operator badge */
+body.operator-mode .hud-location::after {
+  content: '⬢ OPERATOR';
+  margin-left: 12px;
+  font-size: 9px;
+  letter-spacing: 0.15em;
+  color: #ffd700;
+  opacity: 0.8;
+  font-family: 'Orbitron', sans-serif;
+  vertical-align: middle;
+}
+
+/* Operator mode: golden accent on toggle */
+body.operator-mode .mode-toggle {
+  border-color: #ffd700 !important;
+}
+
+body.operator-mode #mode-label {
+  color: #ffd700;
+}
+