token-gated-economy/the-matrix/js/ui.js

import { sendVisitorMessage } from './websocket.js';
import { classify } from './edge-worker-client.js';
import { setMood } from './agents.js';
import { getOrRefreshToken } from './nostr-identity.js';

const $fps        = document.getElementById('fps');
const $activeJobs = document.getElementById('active-jobs');
const $connStatus = document.getElementById('connection-status');
const $log        = document.getElementById('event-log');

const MAX_LOG = 6;
const logEntries = [];
let uiInitialized = false;

// ── Session-mode send override ────────────────────────────────────────────────
let _sessionSendHandler = null;

export function setSessionSendHandler(fn) {
  _sessionSendHandler = fn;
}

export function setInputBarSessionMode(active, placeholder) {
  const $input = document.getElementById('visitor-input');
  if (!$input) return;
  if (active) {
    $input.classList.add('session-active');
    $input.placeholder = placeholder || 'Ask Timmy (session active)…';
  } else {
    $input.classList.remove('session-active');
    $input.placeholder = 'Say something to Timmy…';
  }
}

// ── Model-ready indicator ─────────────────────────────────────────────────────
// A small badge on the input bar showing when local AI is warm and ready.
// Hidden until the first `ready` event from the edge worker.

let $readyBadge = null;

export function setEdgeWorkerReady() {
  if (!$readyBadge) {
    $readyBadge = document.createElement('span');
    $readyBadge.id = 'edge-ready-badge';
    $readyBadge.title = 'Local AI active — trivial queries answered without Lightning payment';
    $readyBadge.style.cssText = [
      'font-size:10px;color:#44cc88;border:1px solid #226644',
      'border-radius:3px;padding:1px 5px;margin-left:6px',
      'vertical-align:middle;cursor:default',
    ].join(';');
    $readyBadge.textContent = '⚡ local AI';
    const $input = document.getElementById('visitor-input');
    $input?.insertAdjacentElement('afterend', $readyBadge);
    // Fallback: append to send button area
    if (!$readyBadge.isConnected) {
      document.getElementById('send-btn')?.insertAdjacentElement('afterend', $readyBadge);
    }
  }
  $readyBadge.style.display = '';
}

// ── Cost preview badge ────────────────────────────────────────────────────────
// Shown beneath the input bar: "~N sats" / "FREE" / "answered locally".
// Fetched from GET /api/estimate once the user stops typing (300 ms debounce).

let _estimateTimer = null;
let $costPreview = null;

function _ensureCostPreview() {
  if ($costPreview) return $costPreview;
  $costPreview = document.getElementById('timmy-cost-preview');
  if (!$costPreview) {
    $costPreview = document.createElement('div');
    $costPreview.id = 'timmy-cost-preview';
    $costPreview.style.cssText = 'font-size:11px;color:#88aacc;margin-top:3px;min-height:14px;transition:opacity .3s;opacity:0;';
    const $input = document.getElementById('visitor-input');
    $input?.parentElement?.appendChild($costPreview);
  }
  return $costPreview;
}

function _showCostPreview(text, color = '#88aacc') {
  const el = _ensureCostPreview();
  el.textContent = text;
  el.style.color  = color;
  el.style.opacity = '1';
}

function _hideCostPreview() {
  const el = _ensureCostPreview();
  el.style.opacity = '0';
}

async function _fetchEstimate(text) {
  try {
    const token = await getOrRefreshToken('/api');
    const params = new URLSearchParams({ request: text });
    if (token) params.set('nostr_token', token);

    const res = await fetch(`/api/estimate?${params}`);
    if (!res.ok) return;
    const data = await res.json();

    const ft = data.identity?.free_tier;
    if (ft?.serve === 'free') {
      _showCostPreview('FREE via generosity pool', '#44dd88');
    } else if (ft?.serve === 'partial') {
      _showCostPreview(`~${ft.chargeSats} sats (${ft.absorbSats} absorbed)`, '#ffdd44');
    } else {
      const sats = data.estimatedSats ?? '?';
      _showCostPreview(`~${sats} sats estimated`, '#88aacc');
    }
  } catch {
    _hideCostPreview();
  }
}

function _scheduleCostPreview(text) {
  clearTimeout(_estimateTimer);
  if (!text || text.length < 4) { _hideCostPreview(); return; }
  _estimateTimer = setTimeout(() => _fetchEstimate(text), 300);
}

// ── Input bar ─────────────────────────────────────────────────────────────────

export function initUI() {
  if (uiInitialized) return;
  uiInitialized = true;
  initInputBar();
}

function initInputBar() {
  const $input   = document.getElementById('visitor-input');
  const $sendBtn = document.getElementById('send-btn');
  if (!$input || !$sendBtn) return;

  $input.addEventListener('input', () => _scheduleCostPreview($input.value.trim()));

  async function send() {
    const text = $input.value.trim();
    if (!text) return;
    $input.value = '';
    _hideCostPreview();

    if (_sessionSendHandler) {
      _sessionSendHandler(text);
      return;
    }

    // ── Edge triage — classify text in the Web Worker ─────────────────────────
    const cls = await classify(text);

    if (cls.label === 'local' && cls.localReply) {
      // Trivial/conversational — answer locally, no server round-trip
      appendSystemMessage(`you: ${text}`);
      appendSystemMessage(`Timmy [local]: ${cls.localReply}`);
      _showCostPreview('answered locally ⚡ 0 sats', '#44dd88');
      setTimeout(_hideCostPreview, 3000);
      return;
    }

    // Substantive — route to server via WebSocket
    sendVisitorMessage(text);
    appendSystemMessage(`you: ${text}`);
  }

  $sendBtn.addEventListener('click', send);
  $input.addEventListener('keydown', e => {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
  });
}

export function updateUI({ fps, jobCount, connectionState }) {
  if ($fps) $fps.textContent = `FPS: ${fps}`;
  if ($activeJobs) $activeJobs.textContent = `JOBS: ${jobCount}`;

  if ($connStatus) {
    if (connectionState === 'connected') {
      $connStatus.textContent = '● CONNECTED';
      $connStatus.className   = 'connected';
    } else if (connectionState === 'connecting') {
      $connStatus.textContent = '◌ CONNECTING...';
      $connStatus.className   = '';
    } else {
      $connStatus.textContent = '○ OFFLINE';
      $connStatus.className   = '';
    }
  }
}

export function appendSystemMessage(text) {
  if (!$log) return;
  const el = document.createElement('div');
  el.className = 'log-entry';
  el.textContent = text;
  logEntries.push(el);
  if (logEntries.length > MAX_LOG) {
    const removed = logEntries.shift();
    $log.removeChild(removed);
  }
  $log.appendChild(el);
  $log.scrollTop = $log.scrollHeight;
}

export function appendChatMessage(agentLabel, message, cssColor, agentId) {
  void agentLabel; void cssColor; void agentId;
  appendSystemMessage(message);
}

export function loadChatHistory() { return []; }
export function saveChatHistory() {}