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>

artifacts/api-server/src/lib/agent.ts

@@ -442,6 +442,89 @@ Respond ONLY with valid JSON: {"accepted": true/false, "reason": "..."}`,
       return "";
     }
   }
+  /**
+   * Generate a short narrative entry for the Tower Log.
+   * Uses Haiku (evalModel) with Timmy's wizardly persona.
+   * Returns a single sentence under 100 characters.
+   *
+   * In STUB_MODE returns a canned narrative so the full flow
+   * can be exercised without an Anthropic API key.
+   */
+  async narrateEvent(eventType: string, context?: string): Promise<string> {
+    const STUB_NARRATIVES: Record<string, string[]> = {
+      "job:complete": [
+        "Timmy conjures a brilliant solution, weaving lightning and wisdom.",
+        "Another quest fulfilled — the Workshop hums with quiet satisfaction.",
+        "The crystal ball glows as Timmy delivers yet another worthy result.",
+      ],
+      "job:rejected": [
+        "With gentle wisdom, Timmy declines — not all quests suit the Workshop.",
+        "The Beta oracle speaks: this path shall not be walked today.",
+      ],
+      "job:failed": [
+        "The arcane machinery sputters — a job falters in the ether.",
+        "Even wizards face setbacks; Timmy regroups and stands ready.",
+      ],
+      "visitor:enter": [
+        "A new traveler arrives, drawn by the Workshop's lightning glow.",
+        "The Workshop doors swing open to welcome another seeker.",
+        "Another soul finds the Workshop, guided by satoshi starlight.",
+      ],
+      "visitor:leave": [
+        "A visitor departs, carrying a spark of the Workshop's magic.",
+        "The door closes softly — one more seeker returns to the world.",
+      ],
+      "payment:eval": [
+        "⚡ Lightning strikes — eval fee confirmed, wisdom unlocked.",
+        "Sats flow in; the Workshop's scales tip toward action.",
+      ],
+      "payment:work": [
+        "⚡ Work payment confirmed — Gamma stirs to weave the answer.",
+        "The Lightning Network delivers; Timmy's full power is unleashed.",
+      ],
+    };
+
+    const candidates = STUB_NARRATIVES[eventType]
+      ?? ["The Workshop stirs with quiet, purposeful magic."];
+
+    if (STUB_MODE) {
+      return candidates[Math.floor(Math.random() * candidates.length)]!;
+    }
+
+    const EVENT_CONTEXT: Record<string, string> = {
+      "job:complete": "A visitor's paid job completed successfully in Timmy's Workshop.",
+      "job:rejected": "A visitor's job request was rejected after AI evaluation.",
+      "job:failed": "A job failed unexpectedly in the Workshop.",
+      "visitor:enter": "A new visitor just entered Timmy's Workshop.",
+      "visitor:leave": "A visitor just left Timmy's Workshop.",
+      "payment:eval": "A visitor paid the evaluation fee via Lightning.",
+      "payment:work": "A visitor paid the work fee via Lightning, unlocking execution.",
+    };
+
+    const baseContext = EVENT_CONTEXT[eventType] ?? "Something noteworthy happened in the Workshop.";
+    const fullContext = context ? `${baseContext} ${context}` : baseContext;
+
+    try {
+      const client = await getClient();
+      const message = await client.messages.create({
+        model: this.evalModel, // Haiku — cheap and fast
+        max_tokens: 80,
+        system: `You are the chronicler of Timmy's Workshop — a mystical tower powered by Bitcoin Lightning where an AI wizard named Timmy fulfills paid quests for visitors.
+Write a single vivid sentence (strictly under 100 characters) narrating what just happened.
+Style: wizardly, warm, slightly epic. Present tense. No quotes. No hashtags.`,
+        messages: [{ role: "user", content: `Narrate this event: ${fullContext}` }],
+      });
+      const block = message.content[0];
+      if (block?.type === "text") {
+        const text = block.text!.trim().replace(/^["']|["']$/g, "");
+        return text.slice(0, 120); // hard cap
+      }
+      return candidates[0]!;
+    } catch (err) {
+      logger.warn("narrateEvent failed", { eventType, err: String(err) });
+      return candidates[Math.floor(Math.random() * candidates.length)]!;
+    }
+  }
 }
 
 export const agentService = new AgentService();

artifacts/api-server/src/lib/event-bus.ts

@@ -21,7 +21,10 @@ export type CostEvent =
 export type CommentaryEvent =
   | { type: "agent_commentary"; agentId: string; jobId: string; text: string };
 
-export type BusEvent = JobEvent | SessionEvent | DebateEvent | CostEvent | CommentaryEvent;
+export type TowerLogEvent =
+  | { type: "tower_log:entry"; id: string; narrative: string; eventType: string; agentId: string | null; jobId: string | null; createdAt: string };
+
+export type BusEvent = JobEvent | SessionEvent | DebateEvent | CostEvent | CommentaryEvent | TowerLogEvent;
 
 class EventBus extends EventEmitter {
   emit(event: "bus", data: BusEvent): boolean;

artifacts/api-server/src/lib/tower-log.ts

@@ -0,0 +1,74 @@
+/**
+ * Tower Log — narrative event feed (#7).
+ *
+ * Generates a prose narrative entry via Haiku whenever a key Workshop event
+ * occurs, persists it to the tower_log DB table, and emits it on the eventBus
+ * so connected WebSocket clients receive it in real time.
+ */
+
+import { randomUUID } from "crypto";
+import { db, towerLog } from "@workspace/db";
+import { desc } from "drizzle-orm";
+import { eventBus } from "./event-bus.js";
+import { agentService } from "./agent.js";
+import { makeLogger } from "./logger.js";
+
+const logger = makeLogger("tower-log");
+
+export interface TowerLogRow {
+  id: string;
+  narrative: string;
+  eventType: string;
+  agentId: string | null;
+  jobId: string | null;
+  createdAt: Date;
+}
+
+/**
+ * Generate a narrative entry, persist it, and broadcast it via eventBus.
+ * Non-fatal — errors are logged but never thrown.
+ */
+export async function addTowerLogEntry(
+  eventType: string,
+  context?: string,
+  agentId?: string,
+  jobId?: string,
+): Promise<void> {
+  try {
+    const narrative = await agentService.narrateEvent(eventType, context);
+    const id = randomUUID();
+
+    await db.insert(towerLog).values({
+      id,
+      narrative,
+      eventType,
+      agentId: agentId ?? null,
+      jobId: jobId ?? null,
+    });
+
+    // Broadcast to connected WS clients
+    eventBus.publish({
+      type: "tower_log:entry",
+      id,
+      narrative,
+      eventType,
+      agentId: agentId ?? null,
+      jobId: jobId ?? null,
+      createdAt: new Date().toISOString(),
+    });
+  } catch (err) {
+    logger.warn("addTowerLogEntry failed", { eventType, err: String(err) });
+  }
+}
+
+/**
+ * Fetch the most recent N entries from the DB, oldest-first.
+ */
+export async function getRecentTowerLog(limit = 20): Promise<TowerLogRow[]> {
+  const rows = await db
+    .select()
+    .from(towerLog)
+    .orderBy(desc(towerLog.createdAt))
+    .limit(limit);
+  return rows.reverse();
+}

artifacts/api-server/src/routes/events.ts

@@ -32,6 +32,7 @@ import { eventBus, type BusEvent } from "../lib/event-bus.js";
 import { makeLogger } from "../lib/logger.js";
 import { getWorldState, setAgentStateInWorld } from "../lib/world-state.js";
 import { agentService } from "../lib/agent.js";
+import { addTowerLogEntry, getRecentTowerLog } from "../lib/tower-log.js";
 import { db, worldEvents } from "@workspace/db";
 
 const logger = makeLogger("ws-events");
@@ -269,6 +270,18 @@ function translateEvent(ev: BusEvent): object | null {
         text: ev.text,
       };
 
+    // ── Tower Log (#7) ────────────────────────────────────────────────────────
+    case "tower_log:entry":
+      return {
+        type: "tower_log_entry",
+        id: ev.id,
+        narrative: ev.narrative,
+        eventType: ev.eventType,
+        agentId: ev.agentId,
+        jobId: ev.jobId,
+        createdAt: ev.createdAt,
+      };
+
     default:
       return null;
   }
@@ -306,6 +319,17 @@ async function sendWorldStateBootstrap(socket: WebSocket): Promise<void> {
   } catch {
     send(socket, { type: "world_state", ...getWorldState(), recentEvents: [] });
   }
+
+  // Send recent tower log entries
+  try {
+    const logEntries = await getRecentTowerLog(20);
+    send(socket, {
+      type: "tower_log_history",
+      entries: logEntries,
+    });
+  } catch {
+    /* non-fatal */
+  }
 }
 
 export function attachWebSocketServer(server: Server): void {
@@ -338,6 +362,7 @@ export function attachWebSocketServer(server: Server): void {
             const formattedNpub = `${npub.slice(0, 8)}…${npub.slice(-4)}`;
             broadcastToAll(wss, { type: "chat", agentId: "timmy", text: `Welcome, Nostr user ${formattedNpub}! What can I help you with?` });
           }
+          void addTowerLogEntry("visitor:enter", undefined, "timmy");
 
           wss.clients.forEach(c => {
             if (c !== socket && c.readyState === 1) {
@@ -437,13 +462,22 @@ export function attachWebSocketServer(server: Server): void {
         agentId = "gamma"; phase = "starting";
       } else if (ev.state === "complete") {
         agentId = "alpha"; phase = "complete";
+        void addTowerLogEntry("job:complete", undefined, "alpha", ev.jobId);
       } else if (ev.state === "rejected") {
         agentId = "alpha"; phase = "rejected";
+        void addTowerLogEntry("job:rejected", undefined, "beta", ev.jobId);
+      } else if (ev.state === "failed") {
+        void addTowerLogEntry("job:failed", undefined, "alpha", ev.jobId);
       }
     } else if (ev.type === "job:paid") {
       jobId = ev.jobId;
       agentId = "delta";
       phase = ev.invoiceType === "eval" ? "eval_paid" : "work_paid";
+      if (ev.invoiceType === "eval") {
+        void addTowerLogEntry("payment:eval", undefined, "delta", ev.jobId);
+      } else if (ev.invoiceType === "work") {
+        void addTowerLogEntry("payment:work", undefined, "delta", ev.jobId);
+      }
     }
 
     if (agentId && phase && jobId) {

artifacts/api-server/src/routes/index.ts

@@ -18,6 +18,7 @@ import adminRelayRouter from "./admin-relay.js";
 import adminRelayQueueRouter from "./admin-relay-queue.js";
 import geminiRouter from "./gemini.js";
 import statsRouter from "./stats.js";
+import towerLogRouter from "./tower-log.js";
 
 const router: IRouter = Router();
 
@@ -33,6 +34,7 @@ router.use(relayRouter);
 router.use(adminRelayRouter);
 router.use(adminRelayQueueRouter);
 router.use(demoRouter);
+router.use(towerLogRouter);
 router.use("/gemini", geminiRouter);
 router.use(testkitRouter);
 router.use(uiRouter);

artifacts/api-server/src/routes/tower-log.ts

@@ -0,0 +1,21 @@
+import { Router, type Request, type Response } from "express";
+import { getRecentTowerLog } from "../lib/tower-log.js";
+import { makeLogger } from "../lib/logger.js";
+
+const logger = makeLogger("tower-log-route");
+const router = Router();
+
+/**
+ * GET /api/tower-log — return the 20 most recent narrative entries, oldest first.
+ */
+router.get("/tower-log", async (_req: Request, res: Response) => {
+  try {
+    const entries = await getRecentTowerLog(20);
+    res.json({ entries });
+  } catch (err) {
+    logger.error("GET /api/tower-log failed", { error: String(err) });
+    res.status(500).json({ error: "tower_log_error" });
+  }
+});
+
+export default router;

lib/db/migrations/0010_tower_log.sql

@@ -0,0 +1,15 @@
+-- Migration: Tower Log narrative event feed (#7)
+-- Adds the tower_log table that stores prose narrative entries about
+-- Workshop activity, generated by Haiku on key events.
+
+CREATE TABLE IF NOT EXISTS tower_log (
+  id          TEXT PRIMARY KEY,
+  narrative   TEXT NOT NULL,
+  event_type  TEXT NOT NULL,
+  agent_id    TEXT,
+  job_id      TEXT,
+  created_at  TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+
+CREATE INDEX IF NOT EXISTS idx_tower_log_created_at
+  ON tower_log(created_at DESC);

lib/db/src/schema/index.ts

@@ -14,3 +14,4 @@ export * from "./relay-accounts";
 export * from "./relay-event-queue";
 export * from "./job-debates";
 export * from "./session-messages";
+export * from "./tower-log";

lib/db/src/schema/tower-log.ts

@@ -0,0 +1,10 @@
+import { pgTable, text, timestamp } from "drizzle-orm/pg-core";
+
+export const towerLog = pgTable("tower_log", {
+  id: text("id").primaryKey(),
+  narrative: text("narrative").notNull(),
+  eventType: text("event_type").notNull(),
+  agentId: text("agent_id"),
+  jobId: text("job_id"),
+  createdAt: timestamp("created_at").notNull().defaultNow(),
+});

the-matrix/index.html

@@ -599,6 +599,188 @@
       #activity-heatmap #heatmap-bar { display: none; }
       #heatmap-icon-btn { display: block; }
     }
+
+    /* ── History button ──────────────────────────────────────────────── */
+    #open-history-btn {
+      font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold;
+      color: #aabbdd; background: rgba(20, 16, 50, 0.85); border: 1px solid #2a2a44;
+      padding: 7px 18px; cursor: pointer; letter-spacing: 2px;
+      box-shadow: 0 0 14px #2244aa22;
+      transition: background 0.15s, box-shadow 0.15s, color 0.15s;
+      border-radius: 2px;
+      min-height: 36px;
+    }
+    #open-history-btn:hover, #open-history-btn:active {
+      background: rgba(35, 28, 80, 0.95);
+      box-shadow: 0 0 20px #3355aa44;
+      color: #ccddff;
+    }
+
+    /* ── History panel (bottom sheet) ───────────────────────────────── */
+    #history-panel {
+      position: fixed; bottom: -100%; left: 0; right: 0;
+      height: 70vh;
+      background: rgba(5, 3, 12, 0.97);
+      border-top: 1px solid #1a1a2e;
+      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(40, 60, 120, 0.18);
+      display: flex; flex-direction: column;
+    }
+    #history-panel.open { bottom: 60px; }
+
+    .hist-header {
+      display: flex; align-items: center; gap: 8px;
+      padding: 14px 20px 10px;
+      border-bottom: 1px solid #1a1a2e;
+      font-size: 12px; letter-spacing: 3px; color: #5577aa;
+      flex-shrink: 0;
+    }
+    .hist-header span { flex: 1; text-shadow: 0 0 8px #2244aa66; }
+    #history-refresh-btn, #history-close {
+      background: transparent; border: 1px solid #1a1a2e;
+      color: #334466; font-family: 'Courier New', monospace;
+      font-size: 11px; padding: 3px 10px; cursor: pointer;
+      transition: color 0.2s, border-color 0.2s; letter-spacing: 1px;
+      border-radius: 2px;
+    }
+    #history-refresh-btn:hover { color: #5577aa; border-color: #334466; }
+    #history-refresh-btn:disabled { opacity: 0.4; cursor: default; }
+    #history-close { font-size: 14px; padding: 3px 8px; }
+    #history-close:hover { color: #6688bb; border-color: #4466aa; }
+
+    #history-list {
+      flex: 1; overflow-y: auto; padding: 12px 16px;
+      overscroll-behavior: contain;
+    }
+
+    .hist-empty {
+      color: #334466; font-size: 11px; letter-spacing: 1px;
+      line-height: 1.8; text-align: center;
+      margin-top: 40px; padding: 0 20px;
+    }
+
+    .hist-row {
+      border: 1px solid #1a1a2e; border-radius: 2px;
+      margin-bottom: 10px; overflow: hidden;
+      background: #060310;
+    }
+    .hist-row.hist-rejected { border-color: #331111; }
+    .hist-row-header {
+      padding: 10px 12px; cursor: pointer;
+      transition: background 0.15s;
+    }
+    .hist-row-header:hover { background: rgba(30, 25, 60, 0.6); }
+    .hist-prompt {
+      color: #aabbdd; font-size: 12px; line-height: 1.5;
+      display: -webkit-box; -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical; overflow: hidden;
+      margin-bottom: 6px;
+    }
+    .hist-meta {
+      display: flex; gap: 12px; align-items: center;
+    }
+    .hist-cost { font-size: 10px; color: #ffcc44; letter-spacing: 1px; }
+    .hist-rejected .hist-cost { color: #994444; }
+    .hist-time { font-size: 10px; color: #334466; letter-spacing: 0.5px; flex: 1; }
+    .hist-chevron { font-size: 10px; color: #334466; transition: color 0.15s; }
+    .hist-row-header:hover .hist-chevron { color: #5577aa; }
+
+    .hist-row-body {
+      max-height: 0; overflow: hidden;
+      transition: max-height 0.3s ease-out;
+    }
+    .hist-row.expanded .hist-row-body {
+      max-height: 400px;
+      border-top: 1px solid #1a1a2e;
+    }
+    .hist-result {
+      color: #aabbdd; font-family: 'Courier New', monospace;
+      font-size: 11px; line-height: 1.6;
+      white-space: pre-wrap; word-break: break-word;
+      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>
@@ -640,6 +822,8 @@
   <div id="top-buttons">
     <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>
 
@@ -789,6 +973,16 @@
     <div id="session-error"></div>
   </div>
 
+  <!-- ── History panel (bottom sheet) ─────────────────────────────── -->
+  <div id="history-panel">
+    <div class="hist-header">
+      <span>⏱ JOB HISTORY</span>
+      <button id="history-refresh-btn">↺ REFRESH</button>
+      <button id="history-close">✕</button>
+    </div>
+    <div id="history-list"></div>
+  </div>
+
   <!-- ── FPS crosshair ─────────────────────────────────────────────── -->
   <div id="crosshair"></div>
 
@@ -809,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() {

the-matrix/js/history.js

@@ -0,0 +1,222 @@
+/**
+ * history.js — Job history panel for Timmy Tower Workshop.
+ *
+ * Persists completed jobs in localStorage and renders them in a
+ * bottom-sheet panel with expandable results and pull-to-refresh.
+ *
+ * Public API:
+ *   addHistoryEntry(entry)   — called by payment.js / session.js on completion
+ *   initHistoryPanel()       — wire up DOM (call once from main.js)
+ */
+
+const LS_KEY      = 'timmy_history_v1';
+const MAX_ENTRIES = 50;
+
+// ── Persistence ───────────────────────────────────────────────────────────────
+
+function _loadEntries() {
+  try {
+    const raw = localStorage.getItem(LS_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+}
+
+function _saveEntries(entries) {
+  try {
+    localStorage.setItem(LS_KEY, JSON.stringify(entries));
+  } catch { /* storage full — oldest already trimmed */ }
+}
+
+/**
+ * Record a completed job.
+ * @param {object} entry
+ * @param {string} entry.jobId
+ * @param {string} entry.request      — user prompt
+ * @param {number} entry.costSats     — sats charged (0 for free/session)
+ * @param {string} entry.result       — AI answer or rejection reason
+ * @param {string} entry.state        — 'complete' | 'rejected' | 'failed'
+ * @param {string} [entry.completedAt] — ISO timestamp (defaults to now)
+ */
+export function addHistoryEntry({ jobId, request, costSats, result, state, completedAt }) {
+  const entries = _loadEntries();
+  const entry = {
+    jobId:       jobId       ?? `local-${Date.now()}`,
+    request:     request     ?? '',
+    costSats:    costSats    ?? 0,
+    result:      result      ?? '',
+    state:       state       ?? 'complete',
+    completedAt: completedAt ?? new Date().toISOString(),
+  };
+  const idx = entries.findIndex(e => e.jobId === entry.jobId);
+  if (idx >= 0) {
+    entries[idx] = entry;
+  } else {
+    entries.unshift(entry); // newest first
+    if (entries.length > MAX_ENTRIES) entries.length = MAX_ENTRIES;
+  }
+  _saveEntries(entries);
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function _relativeTime(isoString) {
+  try {
+    const diff = Date.now() - new Date(isoString).getTime();
+    const secs = Math.floor(diff / 1000);
+    if (secs < 60)  return `${secs}s ago`;
+    const mins = Math.floor(secs / 60);
+    if (mins < 60)  return `${mins} min ago`;
+    const hrs  = Math.floor(mins / 60);
+    if (hrs  < 24)  return `${hrs}h ago`;
+    const days = Math.floor(hrs  / 24);
+    return `${days}d ago`;
+  } catch {
+    return '';
+  }
+}
+
+function _escHtml(text) {
+  return String(text)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+function _truncate(text, maxLen) {
+  if (!text) return '';
+  return text.length > maxLen ? text.slice(0, maxLen) + '…' : text;
+}
+
+// ── Rendering ─────────────────────────────────────────────────────────────────
+
+function _renderEntries(entries, container) {
+  container.innerHTML = '';
+
+  if (!entries.length) {
+    const empty = document.createElement('div');
+    empty.className = 'hist-empty';
+    empty.textContent = 'No completed jobs yet. Submit a job to see your history here.';
+    container.appendChild(empty);
+    return;
+  }
+
+  entries.forEach(entry => {
+    const row = document.createElement('div');
+    row.className = 'hist-row' + (entry.state === 'rejected' ? ' hist-rejected' : '');
+
+    // ── Header (always visible) ────────────────────────────────────────────
+    const header = document.createElement('div');
+    header.className = 'hist-row-header';
+
+    const promptEl = document.createElement('div');
+    promptEl.className = 'hist-prompt';
+    promptEl.textContent = _truncate(entry.request, 140);
+
+    const metaEl = document.createElement('div');
+    metaEl.className = 'hist-meta';
+
+    const costEl = document.createElement('span');
+    costEl.className = 'hist-cost';
+    if (entry.state === 'rejected') {
+      costEl.textContent = 'rejected';
+    } else if (entry.costSats > 0) {
+      costEl.textContent = `⚡ ${entry.costSats} sats`;
+    } else {
+      costEl.textContent = 'free';
+    }
+
+    const timeEl = document.createElement('span');
+    timeEl.className = 'hist-time';
+    timeEl.textContent = _relativeTime(entry.completedAt);
+
+    const chevronEl = document.createElement('span');
+    chevronEl.className = 'hist-chevron';
+    chevronEl.textContent = '▸';
+
+    metaEl.appendChild(costEl);
+    metaEl.appendChild(timeEl);
+    metaEl.appendChild(chevronEl);
+
+    header.appendChild(promptEl);
+    header.appendChild(metaEl);
+
+    // ── Body (expandable) ──────────────────────────────────────────────────
+    const body = document.createElement('div');
+    body.className = 'hist-row-body';
+
+    const pre = document.createElement('pre');
+    pre.className = 'hist-result';
+    pre.textContent = entry.result || '(no result)';
+    body.appendChild(pre);
+
+    // ── Toggle ─────────────────────────────────────────────────────────────
+    let expanded = false;
+    header.addEventListener('click', () => {
+      expanded = !expanded;
+      row.classList.toggle('expanded', expanded);
+      chevronEl.textContent = expanded ? '▾' : '▸';
+    });
+
+    row.appendChild(header);
+    row.appendChild(body);
+    container.appendChild(row);
+  });
+}
+
+// ── Panel state ───────────────────────────────────────────────────────────────
+
+let _panel      = null;
+let _list       = null;
+let _refreshBtn = null;
+
+function _open() {
+  if (!_panel) return;
+  _panel.classList.add('open');
+  _refresh();
+}
+
+function _close() {
+  _panel?.classList.remove('open');
+}
+
+function _refresh() {
+  if (!_list) return;
+  const entries = _loadEntries();
+  _renderEntries(entries, _list);
+  if (_refreshBtn) {
+    _refreshBtn.textContent = '↺ REFRESH';
+    _refreshBtn.disabled = false;
+  }
+}
+
+export function initHistoryPanel() {
+  _panel      = document.getElementById('history-panel');
+  _list       = document.getElementById('history-list');
+  _refreshBtn = document.getElementById('history-refresh-btn');
+  if (!_panel) return;
+
+  document.getElementById('open-history-btn')?.addEventListener('click', _open);
+  document.getElementById('history-close')?.addEventListener('click', _close);
+
+  if (_refreshBtn) {
+    _refreshBtn.addEventListener('click', () => {
+      _refreshBtn.textContent = '↺ …';
+      _refreshBtn.disabled = true;
+      setTimeout(_refresh, 150);
+    });
+  }
+
+  // Pull-to-refresh: detect downward drag when already scrolled to top
+  let _touchStartY = 0;
+  _list?.addEventListener('touchstart', e => {
+    _touchStartY = e.touches[0].clientY;
+  }, { passive: true });
+  _list?.addEventListener('touchend', e => {
+    const dy = e.changedTouches[0].clientY - _touchStartY;
+    if (dy > 60 && _list.scrollTop === 0) {
+      _refresh();
+    }
+  }, { passive: true });
+}

the-matrix/js/main.js

@@ -8,9 +8,10 @@ import {
 import { initEffects, updateEffects, disposeEffects, updateJobIndicators } from './effects.js';
 import { initUI, updateUI } from './ui.js';
 import { initInteraction, disposeInteraction, registerSlapTarget } from './interaction.js';
-import { initWebSocket, getConnectionState, getJobCount } from './websocket.js';
+import { initWebSocket, getConnectionState, getJobCount, initTowerLog } from './websocket.js';
 import { initPaymentPanel } from './payment.js';
 import { initSessionPanel } from './session.js';
+import { initHistoryPanel } from './history.js';
 import { initNostrIdentity } from './nostr-identity.js';
 import { warmup as warmupEdgeWorker, onReady as onEdgeWorkerReady } from './edge-worker-client.js';
 import { setEdgeWorkerReady } from './ui.js';
@@ -44,8 +45,10 @@ function buildWorld(firstInit, stateSnapshot) {
   if (firstInit) {
     initUI();
     initWebSocket(scene);
+    initTowerLog();
     initPaymentPanel();
     initSessionPanel();
+    initHistoryPanel();
     void initNostrIdentity('/api');
     warmupEdgeWorker();
     onEdgeWorkerReady(() => setEdgeWorkerReady());

the-matrix/js/payment.js

@@ -10,6 +10,7 @@
  */
 
 import { getOrRefreshToken } from './nostr-identity.js';
+import { addHistoryEntry } from './history.js';
 
 const API_BASE = '/api';
 const POLL_INTERVAL_MS = 2000;
@@ -18,6 +19,7 @@ const POLL_TIMEOUT_MS  = 60000;
 let panel = null;
 let closeBtn = null;
 let currentJobId = null;
+let currentRequest = '';
 let pollTimer = null;
 
 export function initPaymentPanel() {
@@ -96,6 +98,7 @@ async function submitJob() {
     if (!res.ok) { setError(data.error || 'Failed to create job.'); return; }
 
     currentJobId = data.jobId;
+    currentRequest = request;
     showEvalInvoice(data.evalInvoice);
   } catch (err) {
     setError('Network error: ' + err.message);
@@ -167,7 +170,7 @@ function startPolling() {
       const pollHeaders = token ? { 'X-Nostr-Token': token } : {};
       const res  = await fetch(`${API_BASE}/jobs/${currentJobId}`, { headers: pollHeaders });
       const data = await res.json();
-      const { state, workInvoice, result, reason } = data;
+      const { state, workInvoice, result, reason, costLedger, completedAt } = data;
 
       if (state === 'awaiting_work_payment' && workInvoice) {
         showWorkInvoice(workInvoice);
@@ -175,10 +178,26 @@ function startPolling() {
         return;
       }
       if (state === 'complete') {
+        addHistoryEntry({
+          jobId: currentJobId,
+          request: currentRequest,
+          costSats: costLedger?.workAmountSats ?? costLedger?.actualAmountSats ?? 0,
+          result,
+          state: 'complete',
+          completedAt: completedAt ?? new Date().toISOString(),
+        });
         showResult(result, 'complete');
         return;
       }
       if (state === 'rejected') {
+        addHistoryEntry({
+          jobId: currentJobId,
+          request: currentRequest,
+          costSats: 0,
+          result: reason,
+          state: 'rejected',
+          completedAt: completedAt ?? new Date().toISOString(),
+        });
         showResult(reason, 'rejected');
         return;
       }

the-matrix/js/session.js

@@ -16,6 +16,7 @@ import { setSpeechBubble, setMood } from './agents.js';
 import { appendSystemMessage, setSessionSendHandler, setInputBarSessionMode } from './ui.js';
 import { getOrRefreshToken } from './nostr-identity.js';
 import { sentiment } from './edge-worker-client.js';
+import { addHistoryEntry } from './history.js';
 
 const API          = '/api';
 const LS_KEY       = 'timmy_session_v1';
@@ -152,12 +153,21 @@ export async function sessionSendHandler(text) {
       return;
     }
 
+    const prevBalance = _balanceSats;
     _balanceSats  = data.balanceRemaining ?? 0;
     _sessionState = _balanceSats < MIN_BALANCE ? 'paused' : 'active';
     _saveToStorage();
     _applySessionUI();
 
     const reply = data.result || data.reason || '…';
+    const costSats = Math.max(0, prevBalance - _balanceSats);
+    addHistoryEntry({
+      request: text,
+      costSats,
+      result: reply,
+      state: data.reason && !data.result ? 'rejected' : 'complete',
+      completedAt: new Date().toISOString(),
+    });
     setSpeechBubble(reply);
     appendSystemMessage('Timmy: ' + reply.slice(0, 80));
 

the-matrix/js/websocket.js

@@ -22,6 +22,7 @@ let jobCount = 0;
 let reconnectTimer = null;
 let visitorId = null;
 const RECONNECT_DELAY_MS = 5000;
+let _towerLogHistory = [];
 
 // Map to keep track of active job indicator positions for offsetting
 const _jobIndicatorOffsets = new Map();
@@ -190,6 +191,23 @@ function handleMessage(msg) {
       break;
     }
 
+    case 'tower_log_history': {
+      // Load history when panel opens
+      if (Array.isArray(msg.entries)) {
+        _towerLogHistory = msg.entries;
+        _renderTowerLog();
+      }
+      break;
+    }
+
+    case 'tower_log_entry': {
+      // New entry streamed in real time
+      _towerLogHistory.push(msg);
+      if (_towerLogHistory.length > 20) _towerLogHistory.shift();
+      _renderTowerLog(msg.id); // pass id to highlight new entry
+      break;
+    }
+
     case 'agent_count':
     case 'visitor_count':
       break;
@@ -205,3 +223,79 @@ export function sendVisitorMessage(text) {
 
 export function getConnectionState() { return connectionState; }
 export function getJobCount() { return jobCount; }
+
+// ── Tower Log panel ────────────────────────────────────────────────────────
+
+function _renderTowerLog(newId) {
+  const list = document.getElementById('tower-log-list');
+  const empty = document.getElementById('tower-log-empty');
+  if (!list) return;
+
+  if (_towerLogHistory.length === 0) {
+    if (empty) empty.style.display = 'block';
+    return;
+  }
+  if (empty) empty.style.display = 'none';
+
+  // Remove old entries (keep only the empty placeholder and rebuild)
+  Array.from(list.querySelectorAll('.tlog-entry')).forEach(el => el.remove());
+
+  for (const entry of _towerLogHistory) {
+    const el = document.createElement('div');
+    el.className = 'tlog-entry' + (entry.id === newId ? ' tlog-new' : '');
+    el.dataset.id = entry.id;
+
+    const t = document.createElement('div');
+    t.className = 'tlog-time';
+    const d = new Date(entry.createdAt);
+    t.textContent = d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+    const n = document.createElement('div');
+    n.className = 'tlog-text';
+    n.textContent = entry.narrative;
+
+    el.appendChild(t);
+    el.appendChild(n);
+    list.appendChild(el);
+  }
+
+  // Auto-scroll to bottom
+  list.scrollTop = list.scrollHeight;
+
+  // Fade new entry highlight after 3s
+  if (newId) {
+    setTimeout(() => {
+      const el = list.querySelector(`[data-id="${newId}"]`);
+      if (el) el.classList.remove('tlog-new');
+    }, 3000);
+  }
+}
+
+export function initTowerLog() {
+  const openBtn = document.getElementById('open-tower-log-btn');
+  const panel = document.getElementById('tower-log-panel');
+  const closeBtn = document.getElementById('tower-log-close');
+  if (!openBtn || !panel || !closeBtn) return;
+
+  openBtn.addEventListener('click', () => {
+    panel.classList.add('open');
+    // Fetch history if empty
+    if (_towerLogHistory.length === 0) {
+      fetch('/api/tower-log')
+        .then(r => r.json())
+        .then(data => {
+          if (Array.isArray(data.entries)) {
+            _towerLogHistory = data.entries;
+            _renderTowerLog();
+          }
+        })
+        .catch(() => {});
+    } else {
+      _renderTowerLog();
+    }
+  });
+
+  closeBtn.addEventListener('click', () => {
+    panel.classList.remove('open');
+  });
+}