feat: add Tower Log narrative event feed (Fixes #7)

Adds the tower_log DB table, a narrateEvent method on AgentService (Haiku-powered, stub-safe), a tower-log service that persists and broadcasts entries, a GET /api/tower-log REST endpoint, WebSocket bootstrap and real-time push, and a bottom-sheet Tower Log panel in the-matrix UI with fade-in animations and auto-scroll. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-23 22:43:10 -04:00
parent b6569aeedc
commit c2f2cfe3ea
12 changed files with 431 additions and 2 deletions
--- a/the-matrix/index.html
+++ b/the-matrix/index.html
@@ -702,6 +702,85 @@
      padding: 12px; margin: 0;
      max-height: 400px; overflow-y: auto;
    }
+
+    /* ── Tower Log button ────────────────────────────────────────────── */
+    #open-tower-log-btn {
+      font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold;
+      color: #ccaaff; background: rgba(25, 10, 45, 0.85); border: 1px solid #663399;
+      padding: 7px 18px; cursor: pointer; letter-spacing: 2px;
+      box-shadow: 0 0 14px #44116622;
+      transition: background 0.15s, box-shadow 0.15s, color 0.15s;
+      border-radius: 2px;
+      min-height: 36px;
+    }
+    #open-tower-log-btn:hover, #open-tower-log-btn:active {
+      background: rgba(45, 18, 80, 0.95);
+      box-shadow: 0 0 20px #55228844;
+      color: #eeddff;
+    }
+
+    /* ── Tower Log panel (bottom sheet) ─────────────────────────────── */
+    #tower-log-panel {
+      position: fixed; bottom: -100%; left: 0; right: 0;
+      height: 65vh;
+      background: rgba(6, 3, 14, 0.97);
+      border-top: 1px solid #2a1040;
+      z-index: 100;
+      font-family: 'Courier New', monospace;
+      transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 -8px 32px rgba(80, 30, 130, 0.18);
+      display: flex; flex-direction: column;
+    }
+    #tower-log-panel.open { bottom: 60px; }
+
+    .tlog-header {
+      display: flex; align-items: center; gap: 8px;
+      padding: 14px 20px 10px;
+      border-bottom: 1px solid #2a1040;
+      font-size: 12px; letter-spacing: 3px; color: #9966cc;
+      flex-shrink: 0;
+      text-shadow: 0 0 8px #66228866;
+    }
+    .tlog-header span { flex: 1; }
+    #tower-log-close {
+      background: transparent; border: 1px solid #2a1040;
+      color: #664488; font-family: 'Courier New', monospace;
+      font-size: 14px; padding: 3px 8px; cursor: pointer;
+      transition: color 0.2s, border-color 0.2s; border-radius: 2px;
+    }
+    #tower-log-close:hover { color: #bb88ff; border-color: #8844bb; }
+
+    #tower-log-list {
+      flex: 1; overflow-y: auto; padding: 12px 20px;
+      overscroll-behavior: contain;
+    }
+
+    .tlog-empty {
+      color: #44224466; font-size: 11px; letter-spacing: 1px;
+      line-height: 1.8; text-align: center;
+      margin-top: 40px; padding: 0 20px;
+    }
+
+    .tlog-entry {
+      padding: 8px 0;
+      border-bottom: 1px solid #1a0a2a;
+      display: flex; gap: 10px; align-items: baseline;
+      animation: tlog-fade-in 0.4s ease-out;
+    }
+    .tlog-entry:last-child { border-bottom: none; }
+    @keyframes tlog-fade-in {
+      from { opacity: 0; transform: translateY(4px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    .tlog-time {
+      font-size: 9px; color: #443355; letter-spacing: 0.5px;
+      white-space: nowrap; flex-shrink: 0; min-width: 48px;
+    }
+    .tlog-text {
+      font-size: 11px; color: #bb99dd; line-height: 1.5;
+      letter-spacing: 0.3px;
+    }
+    .tlog-new { color: #ddbbff; text-shadow: 0 0 6px #9944cc44; }
  </style>
 </head>
 <body>
@@ -744,6 +823,7 @@
    <button id="open-panel-btn">⚡ SUBMIT JOB</button>
    <button id="open-session-btn">⚡ FUND SESSION</button>
    <button id="open-history-btn">⏱ HISTORY</button>
+    <button id="open-tower-log-btn">📜 TOWER LOG</button>
    <a id="relay-admin-btn" href="/admin/relay">⚙ RELAY ADMIN</a>
  </div>

@@ -923,6 +1003,17 @@
    <span class="recovery-text">GPU context lost — recovering...</span>
  </div>

+  <!-- ── Tower Log panel (bottom sheet) ────────────────────────────── -->
+  <div id="tower-log-panel">
+    <div class="tlog-header">
+      <span>📜 TOWER LOG</span>
+      <button id="tower-log-close">✕</button>
+    </div>
+    <div id="tower-log-list">
+      <div class="tlog-empty" id="tower-log-empty">The chronicle awaits… events will appear here as Timmy works his magic.</div>
+    </div>
+  </div>
+
  <script>
    // Show Relay Admin button if admin token is stored in localStorage
    (function() {