feat: Session Power Meter — 3D balance visualizer (#17 )

Add a glowing orb power meter to the Workshop scene that reflects the session balance in real time. - power-meter.js: new Three.js module — transparent outer shell, inner orb that scales 0→1 with fill fraction, lightning bolt overlay, point light and equator ring accent; DOM text label projected above the orb shows current sats. Color interpolates red→yellow→cyan. Pulses bright on 'fill' event, quick flicker on 'drain'. - session.js: imports meter helpers; tracks _sessionMax (initial deposit); calls setMeterVisible/setMeterBalance in _applySessionUI; triggers fill/drain pulses on payment and job deduction; exports openSessionPanel() for click-to-open wiring; clears meter on _clearSession. - websocket.js: handles session_balance_update WS event — updates fill level and fires pulse. - interaction.js: adds registerClickTarget(group, callback) — wired for both FPS pointer-lock and non-lock modes and short taps. - main.js: wires initPowerMeter/updatePowerMeter/disposePowerMeter into the build/animate/teardown cycle; registers meter as click target that opens the session panel. Fixes #17 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-23 22:31:43 -04:00
14 changed files with 386 additions and 559 deletions
--- a/artifacts/api-server/src/lib/event-bus.ts
+++ b/artifacts/api-server/src/lib/event-bus.ts
@@ -21,11 +21,7 @@ export type CostEvent =
 export type CommentaryEvent =
  | { type: "agent_commentary"; agentId: string; jobId: string; text: string };

-// External agent state changes (e.g. Kimi, Perplexity picking up or completing tasks)
-export type AgentExternalEvent =
-  | { type: "agent:external_state"; agentId: string; state: string; taskSummary?: string };
-
-export type BusEvent = JobEvent | SessionEvent | DebateEvent | CostEvent | CommentaryEvent | AgentExternalEvent;
+export type BusEvent = JobEvent | SessionEvent | DebateEvent | CostEvent | CommentaryEvent;

 class EventBus extends EventEmitter {
  emit(event: "bus", data: BusEvent): boolean;
--- a/artifacts/api-server/src/lib/world-state.ts
+++ b/artifacts/api-server/src/lib/world-state.ts
@@ -16,7 +16,7 @@ const DEFAULT_TIMMY: TimmyState = {

 const _state: WorldState = {
  timmyState: { ...DEFAULT_TIMMY },
-  agentStates: { alpha: "idle", beta: "idle", gamma: "idle", delta: "idle", kimi: "idle", perplexity: "idle" },
+  agentStates: { alpha: "idle", beta: "idle", gamma: "idle", delta: "idle" },
  updatedAt: new Date().toISOString(),
 };

@@ -34,10 +34,8 @@ export function setAgentStateInWorld(agentId: string, agentState: string): void
  _deriveTimmy();
 }

-const WORKSHOP_AGENTS = ["alpha", "beta", "gamma", "delta"];
-
 function _deriveTimmy(): void {
-  const states = WORKSHOP_AGENTS.map(id => _state.agentStates[id] ?? "idle");
+  const states = Object.values(_state.agentStates);
  if (states.includes("working")) {
    _state.timmyState.activity = "working";
    _state.timmyState.mood = "focused";
--- a/artifacts/api-server/src/routes/events.ts
+++ b/artifacts/api-server/src/routes/events.ts
@@ -269,21 +269,6 @@ function translateEvent(ev: BusEvent): object | null {
        text: ev.text,
      };

-    // ── External agent state (Kimi, Perplexity) (#11) ─────────────────────────
-    case "agent:external_state": {
-      updateAgentWorld(ev.agentId, ev.state);
-      void logWorldEvent(
-        `agent:${ev.state}`,
-        `${ev.agentId} is now ${ev.state}${ev.taskSummary ? `: ${ev.taskSummary.slice(0, 80)}` : ""}`,
-        ev.agentId,
-      );
-      const msgs: object[] = [{ type: "agent_state", agentId: ev.agentId, state: ev.state }];
-      if (ev.taskSummary) {
-        msgs.push({ type: "agent_task_summary", agentId: ev.agentId, summary: ev.taskSummary });
-      }
-      return msgs;
-    }
-
    default:
      return null;
  }
--- a/the-matrix/index.html
+++ b/the-matrix/index.html
@@ -599,109 +599,6 @@
      #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;
-    }
  </style>
 </head>
 <body>
@@ -743,7 +640,6 @@
  <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>
    <a id="relay-admin-btn" href="/admin/relay">⚙ RELAY ADMIN</a>
  </div>

@@ -893,16 +789,6 @@
    <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>

--- a/the-matrix/js/agent-defs.js
+++ b/the-matrix/js/agent-defs.js
@@ -5,27 +5,18 @@
 * unused (x, z) position. No other file needs to be edited.
 *
 * Fields:
- *   id             — unique string key used in WebSocket messages and state maps
- *   label          — display name shown in the 3D HUD and chat panel
- *   color          — hex integer (0xRRGGBB) used for Three.js materials and lights
- *   role           — human-readable role string shown under the label sprite
- *   specialization — optional capability description shown in agent inspect card
- *   direction      — cardinal facing direction (for future mesh orientation use)
- *   x, z           — world-space position on the horizontal plane (y is always 0)
+ *   id        — unique string key used in WebSocket messages and state maps
+ *   label     — display name shown in the 3D HUD and chat panel
+ *   color     — hex integer (0xRRGGBB) used for Three.js materials and lights
+ *   role      — human-readable role string shown under the label sprite
+ *   direction — cardinal facing direction (for future mesh orientation use)
+ *   x, z      — world-space position on the horizontal plane (y is always 0)
 */
 export const AGENT_DEFS = [
  { id: 'alpha', label: 'ALPHA', color: 0x00ff88, role: 'orchestrator', direction: 'north', x:  0, z: -6 },
  { id: 'beta',  label: 'BETA',  color: 0x00aaff, role: 'worker',       direction: 'east',  x:  6, z:  0 },
  { id: 'gamma', label: 'GAMMA', color: 0xff6600, role: 'validator',    direction: 'south', x:  0, z:  6 },
  { id: 'delta', label: 'DELTA', color: 0xaa00ff, role: 'monitor',      direction: 'west',  x: -6, z:  0 },
-  {
-    id: 'kimi', label: 'KIMI', color: 0x00d4ff, role: 'analyst',
-    specialization: 'Long Context Analysis', direction: 'northwest', x: -10, z: -10,
-  },
-  {
-    id: 'perplexity', label: 'PERPLEXITY', color: 0xff6b9d, role: 'researcher',
-    specialization: 'Real-time Research', direction: 'northeast', x: 10, z: -10,
-  },
 ];

 /**
--- a/the-matrix/js/agents.js
+++ b/the-matrix/js/agents.js
@@ -7,13 +7,10 @@ const CRYSTAL_POS = new THREE.Vector3(0.6, 1.15, -4.1);

 const agentStates = Object.fromEntries(AGENT_DEFS.map(d => [d.id, 'idle']));

-// Workshop agents that drive Timmy's mood (excludes external agents Kimi/Perplexity)
-const WORKSHOP_AGENT_IDS = ['alpha', 'beta', 'gamma', 'delta'];
-
 function deriveTimmyState() {
  if (agentStates.gamma === 'working') return 'working';
  if (agentStates.beta === 'thinking' || agentStates.alpha === 'thinking') return 'thinking';
-  if (WORKSHOP_AGENT_IDS.some(id => agentStates[id] !== 'idle')) return 'active';
+  if (Object.values(agentStates).some(s => s !== 'idle')) return 'active';
  return 'idle';
 }

@@ -100,108 +97,9 @@ function _pickMouthGeo(smileAmount) {

 // ── Build Timmy ───────────────────────────────────────────────────────────────

-// ── External agent bodies (Kimi, Perplexity) ──────────────────────────────────
-const _extBodies = {};
-
 export function initAgents(sceneRef) {
  scene = sceneRef;
  timmy = buildTimmy(scene);
-  _initKimiBody(scene);
-  _initPerplexityBody(scene);
-}
-
-function _initKimiBody(sc) {
-  const group = new THREE.Group();
-  group.position.set(-10, 1.2, -10);
-
-  const mat = new THREE.MeshStandardMaterial({
-    color: 0x00d4ff, emissive: 0x004466, emissiveIntensity: 0.4,
-    roughness: 0.15, metalness: 0.4,
-  });
-  const core = new THREE.Mesh(new THREE.OctahedronGeometry(0.38, 0), mat);
-  group.add(core);
-
-  const ringMat = new THREE.MeshStandardMaterial({
-    color: 0x00d4ff, emissive: 0x0088aa, emissiveIntensity: 0.6,
-    roughness: 0.1, metalness: 0.6, transparent: true, opacity: 0.7,
-  });
-  const ring1 = new THREE.Mesh(new THREE.TorusGeometry(0.60, 0.025, 6, 32), ringMat);
-  ring1.rotation.x = Math.PI / 3;
-  group.add(ring1);
-
-  const ring2 = new THREE.Mesh(new THREE.TorusGeometry(0.76, 0.018, 6, 32), ringMat.clone());
-  ring2.rotation.x = Math.PI / 2;
-  ring2.rotation.z = Math.PI / 4;
-  group.add(ring2);
-
-  const light = new THREE.PointLight(0x00d4ff, 0.5, 8);
-  group.add(light);
-
-  sc.add(group);
-  _extBodies.kimi = { group, core, ring1, ring2, light, mat, pulsePhase: Math.random() * Math.PI * 2 };
-}
-
-function _initPerplexityBody(sc) {
-  const group = new THREE.Group();
-  group.position.set(10, 1.2, -10);
-
-  const mat = new THREE.MeshStandardMaterial({
-    color: 0xff6b9d, emissive: 0x660033, emissiveIntensity: 0.4,
-    roughness: 0.2, metalness: 0.3,
-  });
-  const core = new THREE.Mesh(new THREE.IcosahedronGeometry(0.32, 0), mat);
-  group.add(core);
-
-  const scanMat = new THREE.MeshStandardMaterial({
-    color: 0xff6b9d, emissive: 0xaa2255, emissiveIntensity: 0.7,
-    roughness: 0.1, metalness: 0.5, transparent: true, opacity: 0.65,
-  });
-  const scanRings = [0, Math.PI / 3, -Math.PI / 3].map(angle => {
-    const r = new THREE.Mesh(new THREE.TorusGeometry(0.55, 0.022, 6, 28), scanMat.clone());
-    r.rotation.x = Math.PI / 2 + angle;
-    r.rotation.z = angle * 0.5;
-    group.add(r);
-    return r;
-  });
-
-  const light = new THREE.PointLight(0xff6b9d, 0.5, 8);
-  group.add(light);
-
-  sc.add(group);
-  _extBodies.perplexity = { group, core, scanRings, light, mat, pulsePhase: Math.random() * Math.PI * 2 };
-}
-
-function _updateExtBodies(t) {
-  _updateExtBody('kimi', t);
-  _updateExtBody('perplexity', t);
-}
-
-function _updateExtBody(id, t) {
-  const body = _extBodies[id];
-  if (!body) return;
-  const state = agentStates[id] || 'idle';
-  const isActive   = state === 'working' || state === 'active';
-  const isThinking = state === 'thinking';
-
-  const speedMult = isActive ? 2.5 : isThinking ? 1.5 : 0.6;
-  const emissI    = isActive ? 1.2 : isThinking ? 0.7 : 0.25;
-  const lightI    = isActive ? 1.2 : isThinking ? 0.6 : 0.2;
-  const bobAmp    = isActive ? 0.10 : 0.04;
-
-  body.group.position.y = 1.2 + Math.sin(t * 0.0008 + body.pulsePhase) * bobAmp;
-  body.mat.emissiveIntensity = emissI;
-  body.light.intensity = lightI;
-
-  if (id === 'kimi') {
-    body.core.rotation.y += 0.008 * speedMult;
-    body.core.rotation.x += 0.003 * speedMult;
-    body.ring1.rotation.z += 0.012 * speedMult;
-    body.ring2.rotation.x += 0.007 * speedMult;
-  } else {
-    body.core.rotation.y += 0.006 * speedMult;
-    body.core.rotation.z += 0.009 * speedMult;
-    body.scanRings.forEach((r, i) => { r.rotation.y += (0.015 + i * 0.008) * speedMult; });
-  }
 }

 function buildTimmy(sc) {
@@ -519,7 +417,6 @@ export function updateAgents(time) {
  const t = time * 0.001;
  const dt = _lastFrameTime > 0 ? Math.min((time - _lastFrameTime) * 0.001, 0.05) : 0.016;
  _lastFrameTime = time;
-  _updateExtBodies(time);

  const vs = deriveTimmyState();
  const pulse = Math.sin(t * 1.8 + timmy.pulsePhase);
@@ -992,19 +889,5 @@ export function disposeAgents() {
  timmy.bubbleTex?.dispose();
  timmy.bubbleMat?.dispose();
  timmy = null;
-
-  // Dispose external agent bodies
-  for (const body of Object.values(_extBodies)) {
-    body.group.traverse(obj => {
-      if (obj.geometry) obj.geometry.dispose();
-      if (obj.material) {
-        const mats = Array.isArray(obj.material) ? obj.material : [obj.material];
-        mats.forEach(m => m.dispose());
-      }
-    });
-    if (scene) scene.remove(body.group);
-  }
-  for (const k of Object.keys(_extBodies)) delete _extBodies[k];
-
  scene = null;
 }
--- a/the-matrix/js/history.js
+++ b/the-matrix/js/history.js
@@ -1,222 +0,0 @@
-/**
- * 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 });
-}
--- a/the-matrix/js/hud-labels.js
+++ b/the-matrix/js/hud-labels.js
@@ -12,12 +12,7 @@
 */

 import * as THREE from 'three';
-import { colorToCss, AGENT_DEFS } from './agent-defs.js';
-
-// Specialization lookup built once from AGENT_DEFS
-const _specializations = Object.fromEntries(
-  AGENT_DEFS.filter(d => d.specialization).map(d => [d.id, d.specialization])
-);
+import { colorToCss } from './agent-defs.js';

 const _proj   = new THREE.Vector3();
 let   _camera = null;
@@ -25,7 +20,6 @@ let   _labels = [];    // { el, worldPos: THREE.Vector3, id }

 // ── State cache (updated from WS) ────────────────────────────────────────────
 const _states = {};
-const _lastTasks = {};

 // ── Inspect popup ─────────────────────────────────────────────────────────────
 let _inspectEl    = null;
@@ -106,10 +100,6 @@ function _makeLabel(container, id, name, role, color, worldPos) {
  return { el, worldPos, id, color };
 }

-export function setLabelLastTask(id, summary) {
-  _lastTasks[id] = summary;
-}
-
 export function setLabelState(id, state) {
  _states[id] = state;
  const entry = _labels.find(l => l.id === id);
@@ -128,17 +118,13 @@ export function showInspectPopup(id, screenX, screenY) {

  const state  = _states[id] || 'idle';
  const uptime = Math.floor(performance.now() / 1000);
-  const spec    = _specializations[id];
-  const lastTask = _lastTasks[id];
  _inspectEl.innerHTML = `
    <div style="color:${entry.color};font-weight:bold;letter-spacing:2px;font-size:12px;margin-bottom:6px;">
      ${id.toUpperCase()}
    </div>
-    ${spec ? `<div style="color:${entry.color}99;margin-bottom:4px;font-size:10px;letter-spacing:1px;">⬡ ${spec}</div>` : ''}
    <div style="color:#aaa;margin-bottom:2px;">state&nbsp;&nbsp;: <span style="color:${entry.color}">${state}</span></div>
    <div style="color:#aaa;margin-bottom:2px;">uptime : ${uptime}s</div>
-    <div style="color:#aaa;margin-bottom:2px;">network: <span style="color:#44ff88">connected</span></div>
-    ${lastTask ? `<div style="color:#888;font-size:9px;margin-top:4px;border-top:1px solid #333;padding-top:4px;">last: ${lastTask.slice(0, 60)}</div>` : ''}
+    <div style="color:#aaa;">network: <span style="color:#44ff88">connected</span></div>
  `;
  _inspectEl.style.left    = `${screenX}px`;
  _inspectEl.style.top     = `${screenY}px`;
--- a/the-matrix/js/interaction.js
+++ b/the-matrix/js/interaction.js
@@ -16,6 +16,9 @@ let _camera    = null;
 let _timmyGroup = null;
 let _applySlap  = null;

+// Registered 3D click targets: Array of { group: THREE.Object3D, callback: fn }
+const _clickTargets = [];
+
 const _raycaster = new THREE.Raycaster();
 const _pointer   = new THREE.Vector2();
 const _noCtxMenu = e => e.preventDefault();
@@ -33,6 +36,15 @@ export function registerSlapTarget(timmyGroup, applyFn) {
  _applySlap  = applyFn;
 }

+/**
+ * Register a Three.js Object3D as a clickable target.
+ * @param {THREE.Object3D} group     The mesh/group to raycast against.
+ * @param {Function}       callback  Called when the user clicks the object.
+ */
+export function registerClickTarget(group, callback) {
+  _clickTargets.push({ group, callback });
+}
+
 export function initInteraction(camera, renderer) {
  _camera = camera;
  _canvas = renderer.domElement;
@@ -52,6 +64,7 @@ export function disposeInteraction() {
  _camera     = null;
  _timmyGroup = null;
  _applySlap  = null;
+  _clickTargets.length = 0;
 }

 // ── Internal ──────────────────────────────────────────────────────────────────
@@ -120,6 +133,20 @@ function _tryAgentInspect(clientX, clientY) {
 let _tapStart = 0;
 let _tapX = 0, _tapY = 0;

+function _tryClickTargets(clientX, clientY) {
+  if (!_clickTargets.length || !_camera || !_canvas) return false;
+  const rect = _canvas.getBoundingClientRect();
+  _pointer.x = ((clientX - rect.left) / rect.width)  *  2 - 1;
+  _pointer.y = ((clientY - rect.top)  / rect.height) * -2 + 1;
+  _raycaster.setFromCamera(_pointer, _camera);
+  for (const target of _clickTargets) {
+    if (!target.group.visible) continue;
+    const hits = _raycaster.intersectObject(target.group, true);
+    if (hits.length > 0) { target.callback(); return true; }
+  }
+  return false;
+}
+
 function _onPointerDown(event) {
  // Record tap start for short-tap detection
  _tapStart = Date.now();
@@ -135,21 +162,30 @@ function _onPointerDown(event) {
      const dt    = Date.now() - _tapStart;
      const moved = Math.hypot(upEvent.clientX - _tapX, upEvent.clientY - _tapY);
      if (dt < 220 && moved < 18) {
-        // Short tap — try slap then inspect
-        if (!_hitTestTimmy(upEvent.clientX, upEvent.clientY)) {
-          _tryAgentInspect(upEvent.clientX, upEvent.clientY);
+        // Short tap — try click targets, then slap, then inspect
+        if (!_tryClickTargets(upEvent.clientX, upEvent.clientY)) {
+          if (!_hitTestTimmy(upEvent.clientX, upEvent.clientY)) {
+            _tryAgentInspect(upEvent.clientX, upEvent.clientY);
+          }
        }
      }
    };
    _canvas.addEventListener('pointerup', onUp, { once: true });
  } else {
-    // Desktop click: only fire when pointer lock is already active
-    // (otherwise navigation.js requests lock on this same click — that's fine,
-    //  both can fire; slap + lock request together is acceptable)
    if (document.pointerLockElement === _canvas) {
-      // Cast from screen center in FPS mode
+      // FPS mode: cast from screen centre
      _pointer.set(0, 0);
      _raycaster.setFromCamera(_pointer, _camera);
+      // Check registered click targets first
+      for (const target of _clickTargets) {
+        if (!target.group.visible) continue;
+        const hits = _raycaster.intersectObject(target.group, true);
+        if (hits.length > 0) {
+          target.callback();
+          event.stopImmediatePropagation();
+          return;
+        }
+      }
      if (_timmyGroup && _applySlap) {
        const hits = _raycaster.intersectObject(_timmyGroup, true);
        if (hits.length > 0) {
@@ -157,6 +193,9 @@ function _onPointerDown(event) {
          event.stopImmediatePropagation();
        }
      }
+    } else {
+      // Not in pointer lock — still handle click targets (e.g. power meter)
+      _tryClickTargets(event.clientX, event.clientY);
    }
  }
 }
--- a/the-matrix/js/main.js
+++ b/the-matrix/js/main.js
@@ -7,11 +7,10 @@ import {
 } from './agents.js';
 import { initEffects, updateEffects, disposeEffects, updateJobIndicators } from './effects.js';
 import { initUI, updateUI } from './ui.js';
-import { initInteraction, disposeInteraction, registerSlapTarget } from './interaction.js';
+import { initInteraction, disposeInteraction, registerSlapTarget, registerClickTarget } from './interaction.js';
 import { initWebSocket, getConnectionState, getJobCount } from './websocket.js';
 import { initPaymentPanel } from './payment.js';
-import { initSessionPanel } from './session.js';
-import { initHistoryPanel } from './history.js';
+import { initSessionPanel, openSessionPanel } from './session.js';
 import { initNostrIdentity } from './nostr-identity.js';
 import { warmup as warmupEdgeWorker, onReady as onEdgeWorkerReady } from './edge-worker-client.js';
 import { setEdgeWorkerReady } from './ui.js';
@@ -19,6 +18,7 @@ import { initTimmyId } from './timmy-id.js';
 import { AGENT_DEFS } from './agent-defs.js';
 import { initNavigation, updateNavigation, disposeNavigation } from './navigation.js';
 import { initHudLabels, updateHudLabels, disposeHudLabels } from './hud-labels.js';
+import { initPowerMeter, updatePowerMeter, disposePowerMeter, getMeterGroup } from './power-meter.js';

 let running = false;
 let canvas  = null;
@@ -30,6 +30,7 @@ function buildWorld(firstInit, stateSnapshot) {

  initEffects(scene);
  initAgents(scene);
+  initPowerMeter(scene);

  if (stateSnapshot) applyAgentStates(stateSnapshot);

@@ -38,6 +39,7 @@ function buildWorld(firstInit, stateSnapshot) {

  initInteraction(camera, renderer);
  registerSlapTarget(getTimmyGroup(), applySlap);
+  registerClickTarget(getMeterGroup(), openSessionPanel);

  // AR floating labels
  initHudLabels(camera, AGENT_DEFS, TIMMY_WORLD_POS);
@@ -47,7 +49,6 @@ function buildWorld(firstInit, stateSnapshot) {
    initWebSocket(scene);
    initPaymentPanel();
    initSessionPanel();
-    initHistoryPanel();
    void initNostrIdentity('/api');
    warmupEdgeWorker();
    onEdgeWorkerReady(() => setEdgeWorkerReady());
@@ -84,6 +85,7 @@ function buildWorld(firstInit, stateSnapshot) {
    updateEffects(now);
    updateAgents(now);
    updateJobIndicators(now);
+    updatePowerMeter(now, camera, renderer);
    updateUI({
      fps: currentFps,
      agentCount: getAgentCount(),
@@ -123,6 +125,7 @@ function teardown({ scene, renderer, ac }) {
  disposeNavigation();
  disposeInteraction();
  disposeHudLabels();
+  disposePowerMeter();
  disposeEffects();
  disposeAgents();
  disposeWorld(renderer, scene);
--- a/the-matrix/js/payment.js
+++ b/the-matrix/js/payment.js
@@ -10,7 +10,6 @@
 */

 import { getOrRefreshToken } from './nostr-identity.js';
-import { addHistoryEntry } from './history.js';

 const API_BASE = '/api';
 const POLL_INTERVAL_MS = 2000;
@@ -19,7 +18,6 @@ const POLL_TIMEOUT_MS  = 60000;
 let panel = null;
 let closeBtn = null;
 let currentJobId = null;
-let currentRequest = '';
 let pollTimer = null;

 export function initPaymentPanel() {
@@ -98,7 +96,6 @@ 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);
@@ -170,7 +167,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, costLedger, completedAt } = data;
+      const { state, workInvoice, result, reason } = data;

      if (state === 'awaiting_work_payment' && workInvoice) {
        showWorkInvoice(workInvoice);
@@ -178,26 +175,10 @@ 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;
      }
--- a/the-matrix/js/power-meter.js
+++ b/the-matrix/js/power-meter.js
@@ -0,0 +1,291 @@
+/**
+ * power-meter.js — 3D Session Power Meter
+ *
+ * A glowing orb that fills proportionally to the session balance.
+ * - Pulses brightly on payment received
+ * - Drains visibly on job cost deduction
+ * - Visible only when a funded session is active
+ * - Clicking the meter opens the session panel
+ */
+
+import * as THREE from 'three';
+
+// ── World position (bottom-right corner, visible from default camera) ──────────
+const METER_WORLD_POS = new THREE.Vector3(4.5, 0.85, 2.0);
+const DEFAULT_MAX_SATS = 5000;
+
+// ── Module state ───────────────────────────────────────────────────────────────
+let _scene         = null;
+let _meterGroup    = null;
+let _innerOrb      = null;
+let _outerShell    = null;
+let _boltMesh      = null;
+let _orbMat        = null;
+let _shellMat      = null;
+let _meterLight    = null;
+let _labelEl       = null;
+
+let _fillFraction   = 0;     // 0..1, currently displayed fill
+let _targetFill     = 0;     // 0..1, desired fill
+let _pulseIntensity = 0;     // 0..1, extra brightness from pulse
+let _pulseDecay     = 0;     // per-frame decay rate
+let _visible        = false;
+let _maxSats        = DEFAULT_MAX_SATS;
+let _currentSats    = 0;
+
+// ── Public API ─────────────────────────────────────────────────────────────────
+
+export function initPowerMeter(scene) {
+  _scene = scene;
+  _labelEl = _createLabelEl();
+
+  _meterGroup = new THREE.Group();
+  _meterGroup.position.copy(METER_WORLD_POS);
+  _meterGroup.visible = false;
+
+  // Outer transparent shell
+  _shellMat = new THREE.MeshPhysicalMaterial({
+    color: 0x00aacc,
+    emissive: 0x003344,
+    emissiveIntensity: 0.4,
+    transparent: true,
+    opacity: 0.18,
+    roughness: 0.05,
+    metalness: 0.15,
+    side: THREE.DoubleSide,
+  });
+  _outerShell = new THREE.Mesh(new THREE.SphereGeometry(0.48, 24, 18), _shellMat);
+  _meterGroup.add(_outerShell);
+
+  // Equatorial ring accent
+  const ringMat = new THREE.MeshBasicMaterial({
+    color: 0x00ccff,
+    transparent: true,
+    opacity: 0.55,
+  });
+  const ring = new THREE.Mesh(new THREE.TorusGeometry(0.48, 0.012, 8, 40), ringMat);
+  ring.rotation.x = Math.PI / 2;
+  _meterGroup.add(ring);
+
+  // Inner fill orb — scales with balance
+  _orbMat = new THREE.MeshStandardMaterial({
+    color: 0x00ffcc,
+    emissive: 0x00ffcc,
+    emissiveIntensity: 1.4,
+    roughness: 0.05,
+    transparent: true,
+    opacity: 0.90,
+  });
+  _innerOrb = new THREE.Mesh(new THREE.SphereGeometry(0.38, 20, 16), _orbMat);
+  _innerOrb.scale.setScalar(0.01);
+  _meterGroup.add(_innerOrb);
+
+  // Lightning bolt — flat shape rendered in front of sphere
+  _boltMesh = _makeBolt();
+  _boltMesh.position.set(0, 0, 0.50);
+  _meterGroup.add(_boltMesh);
+
+  // Point light — intensity tracks balance + pulse
+  _meterLight = new THREE.PointLight(0x00ccff, 0.0, 6);
+  _meterGroup.add(_meterLight);
+
+  scene.add(_meterGroup);
+  return _meterGroup;
+}
+
+/**
+ * Update balance and target fill level.
+ * @param {number} sats        Current balance in satoshis
+ * @param {number} [maxSats]   Session deposit cap (sets the "full" reference)
+ */
+export function setMeterBalance(sats, maxSats) {
+  _currentSats = Math.max(0, sats);
+  if (maxSats !== undefined && maxSats > 0) _maxSats = maxSats;
+  _targetFill = Math.min(1, _currentSats / _maxSats);
+  if (_labelEl) _labelEl.textContent = `${_currentSats} ⚡`;
+}
+
+/**
+ * Fire a pulse animation on the meter.
+ * @param {'fill'|'drain'} type
+ */
+export function triggerMeterPulse(type) {
+  if (type === 'fill') {
+    _pulseIntensity = 1.0;
+    _pulseDecay     = 0.022; // slow bright flash
+  } else {
+    _pulseIntensity = 0.45;
+    _pulseDecay     = 0.040; // quick drain flicker
+  }
+}
+
+/** Show or hide the power meter and its text label. */
+export function setMeterVisible(visible) {
+  _visible = visible;
+  if (_meterGroup) _meterGroup.visible = visible;
+  if (_labelEl) _labelEl.style.display = visible ? 'block' : 'none';
+  if (!visible) {
+    _pulseIntensity = 0;
+    _fillFraction   = 0;
+    _targetFill     = 0;
+    if (_innerOrb) _innerOrb.scale.setScalar(0.01);
+    if (_meterLight) _meterLight.intensity = 0;
+  }
+}
+
+/** Returns the Three.js Group for raycasting. */
+export function getMeterGroup() {
+  return _meterGroup;
+}
+
+/**
+ * Called every animation frame.
+ * @param {number} now       performance.now() value
+ * @param {THREE.Camera} camera
+ * @param {THREE.WebGLRenderer} renderer
+ */
+export function updatePowerMeter(now, camera, renderer) {
+  if (!_meterGroup || !_visible) return;
+
+  const t = now * 0.001;
+
+  // Smooth fill toward target
+  _fillFraction += (_targetFill - _fillFraction) * 0.06;
+
+  const s = Math.max(0.01, _fillFraction * 0.94);
+  _innerOrb.scale.setScalar(s);
+
+  // Colour interpolation: empty=red → mid=orange/yellow → full=cyan
+  _updateOrbColor(_fillFraction, _pulseIntensity);
+
+  // Pulse decay
+  if (_pulseIntensity > 0) {
+    _pulseIntensity = Math.max(0, _pulseIntensity - _pulseDecay);
+  }
+
+  // Point light
+  _meterLight.intensity = _fillFraction * 1.6 + _pulseIntensity * 4.5;
+
+  // Shell emissive pulse
+  _shellMat.emissiveIntensity = 0.3 + _pulseIntensity * 1.8 + _fillFraction * 0.35;
+
+  // Gentle bob + slow rotation
+  _meterGroup.position.y = METER_WORLD_POS.y + Math.sin(t * 1.4) * 0.06;
+  _meterGroup.rotation.y = t * 0.35;
+
+  // Bolt scale pulses with balance and on payment
+  const boltS = 1.0 + _pulseIntensity * 0.55 + Math.sin(t * 3.2) * 0.05;
+  _boltMesh.scale.setScalar(boltS);
+
+  // DOM label
+  if (_labelEl && camera && renderer) {
+    _updateLabelPosition(camera, renderer);
+  }
+}
+
+export function disposePowerMeter() {
+  if (_meterGroup && _scene) {
+    _scene.remove(_meterGroup);
+    _meterGroup.traverse(child => {
+      if (child.geometry) child.geometry.dispose();
+      if (child.material) {
+        const mats = Array.isArray(child.material) ? child.material : [child.material];
+        mats.forEach(m => m.dispose());
+      }
+    });
+    _meterGroup = null;
+  }
+  if (_labelEl) {
+    _labelEl.remove();
+    _labelEl = null;
+  }
+  _scene = null;
+}
+
+// ── Internals ──────────────────────────────────────────────────────────────────
+
+function _makeBolt() {
+  const shape = new THREE.Shape();
+  shape.moveTo( 0.075,  0.28);
+  shape.lineTo(-0.030,  0.04);
+  shape.lineTo( 0.040,  0.04);
+  shape.lineTo(-0.075, -0.28);
+  shape.lineTo( 0.030, -0.04);
+  shape.lineTo(-0.040, -0.04);
+  shape.closePath();
+
+  const mat = new THREE.MeshBasicMaterial({
+    color: 0xffee00,
+    side: THREE.DoubleSide,
+    transparent: true,
+    opacity: 0.95,
+  });
+  return new THREE.Mesh(new THREE.ShapeGeometry(shape), mat);
+}
+
+function _updateOrbColor(fill, pulse) {
+  let r, g, b;
+  if (fill < 0.5) {
+    const k = fill * 2;          // 0→1
+    r = 1.0 - k * 0.30;          // 1.00 → 0.70
+    g = k * 0.70;                 // 0.00 → 0.70
+    b = k * 0.20;                 // 0.00 → 0.20
+  } else {
+    const k = (fill - 0.5) * 2;  // 0→1
+    r = 0.70 - k * 0.70;         // 0.70 → 0.00
+    g = 0.70 + k * 0.30;         // 0.70 → 1.00
+    b = 0.20 + k * 0.80;         // 0.20 → 1.00
+  }
+
+  // Pulse brightens toward white
+  const pr = r + pulse * (1 - r);
+  const pg = g + pulse * (1 - g);
+  const pb = b + pulse * (1 - b);
+
+  _orbMat.color.setRGB(pr, pg, pb);
+  _orbMat.emissive.setRGB(pr * 0.8, pg * 0.8, pb * 0.8);
+  _orbMat.emissiveIntensity = 1.0 + fill * 0.8 + pulse * 2.5;
+
+  _meterLight.color.setRGB(pr, pg, pb);
+}
+
+function _createLabelEl() {
+  const el = document.createElement('div');
+  el.style.cssText = [
+    'position:fixed',
+    'pointer-events:none',
+    'color:#00ffee',
+    'font-size:11px',
+    'font-family:monospace',
+    'font-weight:bold',
+    'text-align:center',
+    'text-shadow:0 0 6px #00ffcc,0 0 14px #00aaff',
+    'display:none',
+    'z-index:50',
+    'transform:translateX(-50%)',
+    'white-space:nowrap',
+  ].join(';');
+  document.body.appendChild(el);
+  return el;
+}
+
+function _updateLabelPosition(camera, renderer) {
+  const canvas = renderer.domElement;
+  const rect   = canvas.getBoundingClientRect();
+
+  // Project a point slightly above the orb center
+  const worldPos = METER_WORLD_POS.clone();
+  worldPos.y += 0.72;
+  worldPos.project(camera);
+
+  if (worldPos.z > 1) {          // behind camera
+    _labelEl.style.display = 'none';
+    return;
+  }
+
+  _labelEl.style.display = 'block';
+  const x = rect.left + ( worldPos.x *  0.5 + 0.5) * rect.width;
+  const y = rect.top  + (-worldPos.y *  0.5 + 0.5) * rect.height;
+  _labelEl.style.left = `${x}px`;
+  _labelEl.style.top  = `${y}px`;
+}
--- a/the-matrix/js/session.js
+++ b/the-matrix/js/session.js
@@ -16,7 +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';
+import { setMeterBalance, triggerMeterPulse, setMeterVisible } from './power-meter.js';

 const API          = '/api';
 const LS_KEY       = 'timmy_session_v1';
@@ -34,6 +34,7 @@ let _pollTimer     = null;
 let _inFlight      = false;
 let _selectedSats  = 500;  // deposit amount selection
 let _topupSats     = 500;  // topup amount selection
+let _sessionMax    = 500;  // max sats for this session (initial deposit)

 // ── Public API ────────────────────────────────────────────────────────────────

@@ -106,6 +107,11 @@ export function isSessionActive() {
  return _sessionState === 'active' || _sessionState === 'paused';
 }

+/** Public entry-point used by the 3D power meter click handler. */
+export function openSessionPanel() {
+  _openPanel();
+}
+
 // Called by ui.js when user submits the input bar while session is active
 export async function sessionSendHandler(text) {
  if (!_sessionId || !_macaroon || _inFlight) return;
@@ -153,21 +159,13 @@ export async function sessionSendHandler(text) {
      return;
    }

-    const prevBalance = _balanceSats;
    _balanceSats  = data.balanceRemaining ?? 0;
    _sessionState = _balanceSats < MIN_BALANCE ? 'paused' : 'active';
    _saveToStorage();
    _applySessionUI();
+    triggerMeterPulse('drain');

    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));

@@ -297,9 +295,11 @@ function _startDepositPolling() {
      if (data.state === 'active') {
        _macaroon     = data.macaroon;
        _balanceSats  = data.balanceSats;
+        _sessionMax   = _balanceSats; // initial deposit = full bar
        _sessionState = 'active';
        _saveToStorage();
        _applySessionUI();
+        triggerMeterPulse('fill');
        _closePanel(); // panel auto-closes; user types in input bar
        appendSystemMessage(`Session active — ${_balanceSats} sats`);
        return;
@@ -414,8 +414,10 @@ function _startTopupPolling() {
        _balanceSats  = data.balanceSats;
        _macaroon     = data.macaroon || _macaroon;
        _sessionState = data.state === 'active' ? 'active' : _sessionState;
+        _sessionMax   = Math.max(_sessionMax, _balanceSats);
        _saveToStorage();
        _applySessionUI();
+        triggerMeterPulse('fill');
        _setStep('active');
        _updateActiveStep();
        _setStatus('active', `⚡ Topped up! ${_balanceSats} sats`, '#22aa66');
@@ -522,6 +524,10 @@ function _applySessionUI() {
  // Low balance notice above input bar
  const $notice = document.getElementById('low-balance-notice');
  if ($notice) $notice.style.display = lowBal ? '' : 'none';
+
+  // 3D power meter visibility
+  setMeterVisible(anyActive);
+  if (anyActive) setMeterBalance(_balanceSats, _sessionMax);
 }

 function _updateActiveStep() {
@@ -540,7 +546,9 @@ function _clearSession() {
  _macaroon     = null;
  _balanceSats  = 0;
  _sessionState = null;
+  _sessionMax   = 500;
  localStorage.removeItem(LS_KEY);
+  setMeterVisible(false);
  setInputBarSessionMode(false);
  setSessionSendHandler(null);
  const $hud = document.getElementById('session-hud');
--- a/the-matrix/js/websocket.js
+++ b/the-matrix/js/websocket.js
@@ -3,9 +3,10 @@ import { scene } from './world.js'; // Import the scene
 import { setAgentState, setSpeechBubble, applyAgentStates, setMood, TIMMY_WORLD_POS } from './agents.js';
 import { appendSystemMessage, appendDebateMessage, showCostTicker, updateCostTicker } from './ui.js';
 import { sentiment } from './edge-worker-client.js';
-import { setLabelState, setLabelLastTask } from './hud-labels.js';
+import { setLabelState } from './hud-labels.js';
 import { createJobIndicator, dissolveJobIndicator } from './effects.js';
 import { getPubkey } from './nostr-identity.js';
+import { setMeterBalance, triggerMeterPulse } from './power-meter.js';

 function resolveWsUrl() {
  const explicit = import.meta.env.VITE_WS_URL;
@@ -122,19 +123,11 @@ function handleMessage(msg) {
      break;
    }

-    case 'agent_task_summary': {
-      if (msg.agentId && msg.summary) {
-        setLabelLastTask(msg.agentId, msg.summary);
-      }
-      break;
-    }
-
    case 'job_completed': {
      if (jobCount > 0) jobCount--;
      if (msg.agentId) {
        setAgentState(msg.agentId, 'idle');
        setLabelState(msg.agentId, 'idle');
-        setLabelLastTask(msg.agentId, `job ${(msg.jobId || '').slice(0, 8)} completed`);
      }
      appendSystemMessage(`job ${(msg.jobId || '').slice(0, 8)} complete`);

@@ -198,6 +191,15 @@ function handleMessage(msg) {
      break;
    }

+    case 'session_balance_update': {
+      // Real-time balance push from server: animate fill level and pulse
+      if (typeof msg.balanceSats === 'number') {
+        setMeterBalance(msg.balanceSats, msg.maxSats);
+        triggerMeterPulse(msg.delta > 0 ? 'fill' : 'drain');
+      }
+      break;
+    }
+
    case 'agent_count':
    case 'visitor_count':
      break;