From a7706d49d25c019ae450791b25565e1ce30cb0e5 Mon Sep 17 00:00:00 2001
From: kimi <kimi@localhost>
Date: Sat, 21 Mar 2026 18:05:17 -0400
Subject: [PATCH] feat(matrix-ui): add About/Info panel explaining The Matrix
 and Workshop

Add an info panel accessible via an (i) icon in the top-right corner:
- Explains what The Matrix is (3D visualization of AI agent workspace)
- Explains what The Workshop does (submit jobs, chat with agents, fund sessions)
- Includes brief mention of sats/Lightning integration
- Panel can be closed via X button, Escape key, or clicking outside
- Uses slide-in design that doesn't obstruct the 3D scene when closed

Fixes #755
---
 static/world/index.html |  72 +++++++++++++++
 static/world/style.css  | 195 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 267 insertions(+)

diff --git a/static/world/index.html b/static/world/index.html
index d2aec708..d10f8663 100644
--- a/static/world/index.html
+++ b/static/world/index.html
@@ -13,11 +13,56 @@
             <div class="mood" id="mood-text">focused</div>
         </div>
         <div id="connection-dot"></div>
+        <button id="info-btn" class="info-button" aria-label="About The Matrix" title="About The Matrix">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10"></circle>
+                <line x1="12" y1="16" x2="12" y2="12"></line>
+                <line x1="12" y1="8" x2="12.01" y2="8"></line>
+            </svg>
+        </button>
         <div id="speech-area">
             <div class="bubble" id="speech-bubble"></div>
         </div>
     </div>
 
+    <!-- About Panel -->
+    <div id="about-panel" class="about-panel">
+        <div class="about-panel-content">
+            <button id="about-close" class="about-close" aria-label="Close">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+            <h2>Welcome to The Matrix</h2>
+            
+            <section>
+                <h3>🌌 The Matrix</h3>
+                <p>The Matrix is a 3D visualization of Timmy's AI agent workspace. Enter the workshop to see Timmy at work—pondering the arcane arts of code, managing tasks, and orchestrating autonomous agents in real-time.</p>
+            </section>
+            
+            <section>
+                <h3>🛠️ The Workshop</h3>
+                <p>The Workshop is where you interact directly with Timmy:</p>
+                <ul>
+                    <li><strong>Submit Jobs</strong> — Create tasks, delegate work, and track progress</li>
+                    <li><strong>Chat with Agents</strong> — Converse with Timmy and his swarm of specialized agents</li>
+                    <li><strong>Fund Sessions</strong> — Power your work with satoshis via Lightning Network</li>
+                </ul>
+            </section>
+            
+            <section>
+                <h3>⚡ Lightning & Sats</h3>
+                <p>The Matrix runs on Bitcoin. Sessions are funded with satoshis (sats) over the Lightning Network—enabling fast, cheap micropayments that keep Timmy energized and working for you. No subscriptions, no limits—pay as you go.</p>
+            </section>
+            
+            <div class="about-footer">
+                <span>Sovereign AI · Soul on Bitcoin</span>
+            </div>
+        </div>
+        <div id="about-backdrop" class="about-backdrop"></div>
+    </div>
+
     <script type="importmap">
     {
         "imports": {
@@ -74,6 +119,33 @@
         });
         stateReader.connect();
 
+        // --- About Panel ---
+        const infoBtn = document.getElementById("info-btn");
+        const aboutPanel = document.getElementById("about-panel");
+        const aboutClose = document.getElementById("about-close");
+        const aboutBackdrop = document.getElementById("about-backdrop");
+
+        function openAboutPanel() {
+            aboutPanel.classList.add("open");
+            document.body.style.overflow = "hidden";
+        }
+
+        function closeAboutPanel() {
+            aboutPanel.classList.remove("open");
+            document.body.style.overflow = "";
+        }
+
+        infoBtn.addEventListener("click", openAboutPanel);
+        aboutClose.addEventListener("click", closeAboutPanel);
+        aboutBackdrop.addEventListener("click", closeAboutPanel);
+
+        // Close on Escape key
+        document.addEventListener("keydown", (e) => {
+            if (e.key === "Escape" && aboutPanel.classList.contains("open")) {
+                closeAboutPanel();
+            }
+        });
+
         // --- Resize ---
         window.addEventListener("resize", () => {
             camera.aspect = window.innerWidth / window.innerHeight;
diff --git a/static/world/style.css b/static/world/style.css
index e65e69d7..40626007 100644
--- a/static/world/style.css
+++ b/static/world/style.css
@@ -87,3 +87,198 @@ canvas {
 #connection-dot.connected {
     background: #00b450;
 }
+
+/* Info button */
+.info-button {
+    position: absolute;
+    top: 14px;
+    right: 36px;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    background: rgba(10, 10, 20, 0.7);
+    border: 1px solid rgba(218, 165, 32, 0.4);
+    border-radius: 50%;
+    color: #daa520;
+    cursor: pointer;
+    pointer-events: auto;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.info-button:hover {
+    background: rgba(218, 165, 32, 0.15);
+    border-color: rgba(218, 165, 32, 0.7);
+    transform: scale(1.05);
+}
+
+.info-button svg {
+    width: 16px;
+    height: 16px;
+}
+
+/* About Panel */
+.about-panel {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    pointer-events: none;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.about-panel.open {
+    pointer-events: auto;
+    visibility: visible;
+    opacity: 1;
+}
+
+.about-panel-content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 380px;
+    max-width: 90%;
+    height: 100%;
+    background: rgba(10, 10, 20, 0.97);
+    border-left: 1px solid rgba(218, 165, 32, 0.3);
+    padding: 60px 24px 24px 24px;
+    overflow-y: auto;
+    transform: translateX(100%);
+    transition: transform 0.3s ease;
+    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
+}
+
+.about-panel.open .about-panel-content {
+    transform: translateX(0);
+}
+
+.about-close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    background: transparent;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    border-radius: 50%;
+    color: #aaa;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.about-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(218, 165, 32, 0.5);
+    color: #daa520;
+}
+
+.about-close svg {
+    width: 18px;
+    height: 18px;
+}
+
+.about-panel-content h2 {
+    font-size: 20px;
+    color: #daa520;
+    margin-bottom: 24px;
+    font-weight: 600;
+}
+
+.about-panel-content section {
+    margin-bottom: 24px;
+}
+
+.about-panel-content h3 {
+    font-size: 14px;
+    color: #e0e0e0;
+    margin-bottom: 10px;
+    font-weight: 600;
+}
+
+.about-panel-content p {
+    font-size: 13px;
+    line-height: 1.6;
+    color: #aaa;
+    margin-bottom: 10px;
+}
+
+.about-panel-content ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.about-panel-content li {
+    font-size: 13px;
+    line-height: 1.6;
+    color: #aaa;
+    margin-bottom: 8px;
+    padding-left: 16px;
+    position: relative;
+}
+
+.about-panel-content li::before {
+    content: "•";
+    position: absolute;
+    left: 0;
+    color: #daa520;
+}
+
+.about-panel-content li strong {
+    color: #ccc;
+}
+
+.about-footer {
+    margin-top: 32px;
+    padding-top: 16px;
+    border-top: 1px solid rgba(160, 160, 160, 0.2);
+    font-size: 12px;
+    color: #666;
+    text-align: center;
+}
+
+.about-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.about-panel.open .about-backdrop {
+    opacity: 1;
+}
+
+/* Mobile adjustments */
+@media (max-width: 480px) {
+    .about-panel-content {
+        width: 100%;
+        max-width: 100%;
+        padding: 56px 20px 20px 20px;
+    }
+    
+    .info-button {
+        right: 32px;
+        width: 26px;
+        height: 26px;
+    }
+    
+    .info-button svg {
+        width: 14px;
+        height: 14px;
+    }
+}
-- 
2.43.0