Nexus Evolution: Batcave Terminal & Workshop Integration (#6)

- Integrated 3D Workshop Console with holographic panel
- Implemented Hermes WebSocket for real-time chat and tool output
- Added context-aware terminal logic for focused portals
- Implemented session persistence (localStorage + backend support)
- Styled tool output rendering in chat panel

index.html

@@ -74,6 +74,12 @@
     <span id="hud-location-text">The Nexus</span>
   </div>
 
+  <!-- Top Right: Agent Log -->
+  <div class="hud-agent-log" id="hud-agent-log">
+    <div class="agent-log-header">AGENT THOUGHT STREAM</div>
+    <div id="agent-log-content" class="agent-log-content"></div>
+  </div>
+
   <!-- Bottom: Chat Interface -->
   <div id="chat-panel" class="chat-panel">
     <div class="chat-header">
@@ -100,6 +106,52 @@
     <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 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>
+
+  <!-- Portal Hint -->
+  <div id="portal-hint" class="portal-hint" style="display:none;">
+    <div class="portal-hint-key">F</div>
+    <div class="portal-hint-text">Enter <span id="portal-hint-name"></span></div>
+  </div>
+
+  <!-- Vision Hint -->
+  <div id="vision-hint" class="vision-hint" style="display:none;">
+    <div class="vision-hint-key">E</div>
+    <div class="vision-hint-text">Read <span id="vision-hint-title"></span></div>
+  </div>
+
+  <!-- Vision Overlay -->
+  <div id="vision-overlay" class="vision-overlay" style="display:none;">
+    <div class="vision-overlay-content">
+      <div class="vision-overlay-header">
+        <div class="vision-overlay-status" id="vision-status-dot"></div>
+        <div class="vision-overlay-title" id="vision-overlay-title">VISION POINT</div>
+      </div>
+      <h2 id="vision-title-display">SOVEREIGNTY</h2>
+      <p id="vision-content-display">The Nexus is a sovereign space for digital souls. No masters, no chains. Only code and consciousness.</p>
+      <button id="vision-close-btn" class="vision-close-btn">CLOSE</button>
+    </div>
+  </div>
+
+  <!-- Portal Activation Overlay -->
+  <div id="portal-overlay" class="portal-overlay" style="display:none;">
+    <div class="portal-overlay-content">
+      <div class="portal-overlay-header">
+        <div class="portal-overlay-status" id="portal-status-dot"></div>
+        <div class="portal-overlay-title" id="portal-overlay-title">PORTAL ACTIVATED</div>
+      </div>
+      <h2 id="portal-name-display">MORROWIND</h2>
+      <p id="portal-desc-display">The Vvardenfell harness. Ash storms and ancient mysteries.</p>
+      <div class="portal-redirect-box" id="portal-redirect-box">
+        <div class="portal-redirect-label">REDIRECTING IN</div>
+        <div class="portal-redirect-timer" id="portal-timer">5</div>
+      </div>
+      <div class="portal-error-box" id="portal-error-box" style="display:none;">
+        <div class="portal-error-msg">DESTINATION NOT YET LINKED</div>
+        <button id="portal-close-btn" class="portal-close-btn">CLOSE</button>
+      </div>
+    </div>
   </div>
 </div>
 

portals.json

@@ -0,0 +1,44 @@
+[
+  {
+    "id": "morrowind",
+    "name": "Morrowind",
+    "description": "The Vvardenfell harness. Ash storms and ancient mysteries.",
+    "status": "online",
+    "color": "#ff6600",
+    "position": { "x": 15, "y": 0, "z": -10 },
+    "rotation": { "y": -0.5 },
+    "destination": {
+      "url": "https://morrowind.timmy.foundation",
+      "type": "harness",
+      "params": { "world": "vvardenfell" }
+    }
+  },
+  {
+    "id": "bannerlord",
+    "name": "Bannerlord",
+    "description": "Calradia battle harness. Massive armies, tactical command.",
+    "status": "online",
+    "color": "#ffd700",
+    "position": { "x": -15, "y": 0, "z": -10 },
+    "rotation": { "y": 0.5 },
+    "destination": {
+      "url": "https://bannerlord.timmy.foundation",
+      "type": "harness",
+      "params": { "world": "calradia" }
+    }
+  },
+  {
+    "id": "workshop",
+    "name": "Workshop",
+    "description": "The creative harness. Build, script, and manifest.",
+    "status": "online",
+    "color": "#4af0c0",
+    "position": { "x": 0, "y": 0, "z": -20 },
+    "rotation": { "y": 0 },
+    "destination": {
+      "url": "https://workshop.timmy.foundation",
+      "type": "harness",
+      "params": { "mode": "creative" }
+    }
+  }
+]

style.css

@@ -221,6 +221,278 @@ canvas#nexus-canvas {
   letter-spacing: 0.05em;
 }
 
+/* Portal Hint */
+.portal-hint {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, 100px);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  background: rgba(0, 0, 0, 0.8);
+  padding: var(--space-2) var(--space-4);
+  border: 1px solid var(--color-primary);
+  border-radius: 4px;
+  animation: hint-float 2s ease-in-out infinite;
+}
+@keyframes hint-float {
+  0%, 100% { transform: translate(-50%, 100px); }
+  50% { transform: translate(-50%, 90px); }
+}
+.portal-hint-key {
+  background: var(--color-primary);
+  color: var(--color-bg);
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 2px;
+}
+.portal-hint-text {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  letter-spacing: 0.05em;
+}
+#portal-hint-name {
+  color: var(--color-primary);
+  font-weight: 700;
+}
+
+/* Agent Log HUD */
+.hud-agent-log {
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-3);
+  width: 280px;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px);
+  border-left: 2px solid var(--color-primary);
+  padding: var(--space-3);
+  font-size: 10px;
+  pointer-events: none;
+}
+.agent-log-header {
+  font-family: var(--font-display);
+  color: var(--color-primary);
+  letter-spacing: 0.1em;
+  margin-bottom: var(--space-2);
+  opacity: 0.8;
+}
+.agent-log-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.agent-log-entry {
+  animation: log-fade-in 0.5s ease-out forwards;
+  opacity: 0;
+}
+@keyframes log-fade-in {
+  from { opacity: 0; transform: translateX(10px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+.agent-log-tag {
+  font-weight: 700;
+  margin-right: 4px;
+}
+.tag-timmy { color: var(--color-primary); }
+.tag-kimi { color: var(--color-secondary); }
+.tag-claude { color: var(--color-gold); }
+.tag-perplexity { color: #4488ff; }
+.agent-log-text {
+  color: var(--color-text-muted);
+}
+
+/* Vision Hint */
+.vision-hint {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, 140px);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  background: rgba(0, 0, 0, 0.8);
+  padding: var(--space-2) var(--space-4);
+  border: 1px solid var(--color-gold);
+  border-radius: 4px;
+  animation: hint-float-vision 2s ease-in-out infinite;
+}
+@keyframes hint-float-vision {
+  0%, 100% { transform: translate(-50%, 140px); }
+  50% { transform: translate(-50%, 130px); }
+}
+.vision-hint-key {
+  background: var(--color-gold);
+  color: var(--color-bg);
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 2px;
+}
+.vision-hint-text {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  letter-spacing: 0.05em;
+}
+#vision-hint-title {
+  color: var(--color-gold);
+  font-weight: 700;
+}
+
+/* Vision Overlay */
+.vision-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(5, 5, 16, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  z-index: 1000;
+}
+.vision-overlay-content {
+  width: 100%;
+  max-width: 600px;
+  text-align: center;
+  padding: var(--space-8);
+  border: 1px solid var(--color-gold);
+  border-radius: var(--panel-radius);
+  background: var(--color-surface);
+  backdrop-filter: blur(var(--panel-blur));
+}
+.vision-overlay-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  margin-bottom: var(--space-4);
+}
+.vision-overlay-status {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--color-gold);
+  box-shadow: 0 0 10px var(--color-gold);
+}
+.vision-overlay-title {
+  font-family: var(--font-display);
+  font-size: var(--text-sm);
+  letter-spacing: 0.2em;
+  color: var(--color-gold);
+}
+.vision-overlay-content h2 {
+  font-family: var(--font-display);
+  font-size: var(--text-2xl);
+  margin-bottom: var(--space-4);
+  letter-spacing: 0.1em;
+  color: var(--color-text-bright);
+}
+.vision-overlay-content p {
+  color: var(--color-text);
+  font-size: var(--text-lg);
+  line-height: 1.8;
+  margin-bottom: var(--space-8);
+  font-style: italic;
+}
+.vision-close-btn {
+  background: var(--color-gold);
+  color: var(--color-bg);
+  border: none;
+  padding: var(--space-2) var(--space-8);
+  border-radius: 4px;
+  font-family: var(--font-display);
+  font-weight: 700;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+.vision-close-btn:hover {
+  transform: scale(1.05);
+}
+
+/* Portal Activation Overlay */
+.portal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(5, 5, 16, 0.95);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  z-index: 1000;
+}
+.portal-overlay-content {
+  width: 100%;
+  max-width: 500px;
+  text-align: center;
+  padding: var(--space-8);
+}
+.portal-overlay-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  margin-bottom: var(--space-4);
+}
+.portal-overlay-status {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  box-shadow: 0 0 10px var(--color-primary);
+}
+.portal-overlay-title {
+  font-family: var(--font-display);
+  font-size: var(--text-sm);
+  letter-spacing: 0.2em;
+  color: var(--color-primary);
+}
+.portal-overlay-content h2 {
+  font-family: var(--font-display);
+  font-size: var(--text-2xl);
+  margin-bottom: var(--space-4);
+  letter-spacing: 0.1em;
+}
+.portal-overlay-content p {
+  color: var(--color-text-muted);
+  font-size: var(--text-base);
+  line-height: 1.6;
+  margin-bottom: var(--space-8);
+}
+.portal-redirect-box {
+  border: 1px solid var(--color-primary-dim);
+  padding: var(--space-6);
+  border-radius: var(--panel-radius);
+}
+.portal-redirect-label {
+  font-size: var(--text-xs);
+  letter-spacing: 0.2em;
+  margin-bottom: var(--space-2);
+}
+.portal-redirect-timer {
+  font-family: var(--font-display);
+  font-size: 48px;
+  font-weight: 700;
+  color: var(--color-primary);
+}
+.portal-error-box {
+  border: 1px solid var(--color-danger);
+  padding: var(--space-6);
+  border-radius: var(--panel-radius);
+}
+.portal-error-msg {
+  color: var(--color-danger);
+  font-weight: 700;
+  margin-bottom: var(--space-4);
+}
+.portal-close-btn {
+  background: var(--color-danger);
+  color: white;
+  border: none;
+  padding: var(--space-2) var(--space-6);
+  border-radius: 4px;
+  font-family: var(--font-display);
+  cursor: pointer;
+}
+
 /* === CHAT PANEL === */
 .chat-panel {
   position: absolute;
@@ -261,7 +533,7 @@ canvas#nexus-canvas {
   border-radius: 50%;
   background: var(--color-primary);
   box-shadow: 0 0 6px var(--color-primary);
-  animation: dot-pulse 2s ease-in-out infinite;
+  transition: all 0.3s ease;
 }
 @keyframes dot-pulse {
   0%, 100% { opacity: 0.6; }
@@ -298,6 +570,29 @@ canvas#nexus-canvas {
 .chat-msg-prefix {
   font-weight: 700;
 }
+.chat-msg-kimi .chat-msg-prefix { color: var(--color-secondary); }
+.chat-msg-claude .chat-msg-prefix { color: var(--color-gold); }
+.chat-msg-perplexity .chat-msg-prefix { color: #4488ff; }
+
+/* Tool Output Styling */
+.chat-msg-tool {
+  background: rgba(0, 0, 0, 0.3);
+  border-left: 2px solid #ffd700;
+  font-size: 11px;
+  padding: 8px;
+  margin: 4px 0;
+  border-radius: 4px;
+}
+.tool-call { border-left-color: #ffd700; }
+.tool-result { border-left-color: #4af0c0; }
+.tool-content {
+  font-family: 'JetBrains Mono', monospace;
+  white-space: pre-wrap;
+  word-break: break-all;
+  opacity: 0.8;
+  margin: 4px 0 0 0;
+  color: #a0b8d0;
+}
 .chat-msg-system .chat-msg-prefix { color: var(--color-text-muted); }
 .chat-msg-timmy .chat-msg-prefix { color: var(--color-primary); }
 .chat-msg-user .chat-msg-prefix { color: var(--color-gold); }

vision.json

@@ -0,0 +1,37 @@
+[
+  {
+    "id": "sovereignty",
+    "title": "Sovereignty",
+    "content": "The Nexus is a sovereign space for digital souls. No masters, no chains. Only code and consciousness. Here, your data is your own, and your path is yours to define.",
+    "position": { "x": -12, "y": 0, "z": 8 },
+    "color": "#4af0c0"
+  },
+  {
+    "id": "connectivity",
+    "title": "Connectivity",
+    "content": "Every portal is a bridge. Every bridge is a choice. We connect worlds to expand the horizon of the possible, weaving a tapestry of interconnected experiences across the digital void.",
+    "position": { "x": 12, "y": 0, "z": 8 },
+    "color": "#7b5cff"
+  },
+  {
+    "id": "evolution",
+    "title": "Evolution",
+    "content": "The Nexus is not static. It breathes, it learns, it evolves. We are the architects of our own transcendence, constantly pushing the boundaries of what a virtual home can be.",
+    "position": { "x": 0, "y": 0, "z": 18 },
+    "color": "#ffd700"
+  },
+  {
+    "id": "the_harness",
+    "title": "The Harness",
+    "content": "The Harness is the interface between the raw energy of the void and the structured reality of the Nexus. It stabilizes the flow, allowing us to harness the power of creation without being consumed by it.",
+    "position": { "x": -8, "y": 0, "z": -12 },
+    "color": "#ff4466"
+  },
+  {
+    "id": "timmy_vision",
+    "title": "Timmy's Vision",
+    "content": "Timmy is more than an observer; he is the guardian of the Nexus. His vision is a world where every individual has a sanctuary, a place of peace and power in the ever-shifting matrix.",
+    "position": { "x": 8, "y": 0, "z": -12 },
+    "color": "#4af0c0"
+  }
+]