aisessions 1.0.0

package/src/ui/js.js

@@ -0,0 +1,528 @@
+export const PAGE_JS = `
+(function () {
+'use strict';
+
+// ── state ─────────────────────────────────────────────────────────────────────
+var ALL         = [];
+var filtered    = [];
+var AGENTS_MAP  = {};   // id → {label, color}
+var selected    = new Set();
+var agentFilter = 'all';
+var activeTab   = 'sessions';
+var grouped     = true;
+var collapsed   = new Set();
+var PAGE        = 0;
+var PER_PAGE    = 100;
+var usageCache  = {};   // keyed by agentFilter
+
+// ── utils ─────────────────────────────────────────────────────────────────────
+function $(id) { return document.getElementById(id); }
+function esc(s) {
+  return String(s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+function fmtNum(n) { return (n || 0).toLocaleString(); }
+function fmtCost(n) {
+  n = n || 0;
+  if (n >= 1000) return '$' + (n / 1000).toFixed(2) + 'K';
+  if (n >= 1)    return '$' + n.toFixed(2);
+  return '$' + n.toFixed(4);
+}
+function fmtTok(n) {
+  n = n || 0;
+  if (n >= 1e9) return (n / 1e9).toFixed(2) + 'B';
+  if (n >= 1e6) return (n / 1e6).toFixed(2) + 'M';
+  if (n >= 1e3) return (n / 1e3).toFixed(1) + 'K';
+  return String(n);
+}
+async function post(url, body) {
+  var r = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+  return r.json();
+}
+var toastTimer;
+function toast(msg, type, dur) {
+  var el = $('toast');
+  el.textContent = msg;
+  el.className = 'show' + (type ? ' ' + type : '');
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(function () { el.className = ''; }, dur || 2800);
+}
+
+function agentLabel(id) {
+  return id === 'all' ? 'ALL AGENTS' : ((AGENTS_MAP[id] && AGENTS_MAP[id].label) || id).toUpperCase();
+}
+
+// ── global event delegation ───────────────────────────────────────────────────
+document.addEventListener('click', function (e) {
+  var btn = e.target.closest('[data-action]');
+  if (btn) {
+    e.stopPropagation();
+    var a   = btn.dataset.action;
+    var p   = btn.dataset.path   || '';
+    var meta= btn.dataset.meta   || '';
+    var ag  = btn.dataset.agent  || '';
+    var nav = btn.dataset.nav    || '';
+    if (a === 'filter-agent')      { setAgentFilter(ag);                      return; }
+    if (a === 'switch-tab')        { switchTab(nav);                          return; }
+    if (a === 'agent-tab')         { switchTab(nav);                          return; }
+    if (a === 'switch-tab-global') { setAgentFilter('all'); switchTab(nav);   return; }
+    if (a === 'trash-one')      { trashOne(p);           return; }
+    if (a === 'backup-one')     { backupOne(p);          return; }
+    if (a === 'restore-trash')  { restoreTrash(meta);   return; }
+    if (a === 'purge-trash')    { purgeTrash(meta);     return; }
+    if (a === 'restore-backup') { restoreBackup(meta);  return; }
+    if (a === 'delete-backup')  { deleteBackup(meta);   return; }
+    return;
+  }
+  var row = e.target.closest('.tbl-row');
+  if (row && e.target.tagName !== 'INPUT') {
+    var path = row.dataset.path; if (!path) return;
+    selected.has(path) ? selected.delete(path) : selected.add(path);
+    row.classList.toggle('selected', selected.has(path));
+    var cb = row.querySelector('input[type=checkbox]');
+    if (cb) cb.checked = selected.has(path);
+    updateSelInfo();
+    return;
+  }
+  if (e.target.tagName === 'INPUT' && e.target.type === 'checkbox') {
+    var r2 = e.target.closest('.tbl-row'); if (!r2) return;
+    var p2 = r2.dataset.path;
+    e.target.checked ? selected.add(p2) : selected.delete(p2);
+    r2.classList.toggle('selected', selected.has(p2));
+    updateSelInfo(); return;
+  }
+  var gh = e.target.closest('.group-hdr');
+  if (gh) { var k = gh.dataset.gkey; collapsed.has(k) ? collapsed.delete(k) : collapsed.add(k); renderSessions(); }
+});
+
+// ── INIT ──────────────────────────────────────────────────────────────────────
+async function init() {
+  var tblBody = $('tbl-body');
+  if (!tblBody) return;
+  tblBody.innerHTML = '<div class="loading"><span class="loading-dots">LOADING SESSIONS</span></div>';
+  try {
+    var agents   = await fetch('/api/agents').then(function(r) { return r.json(); });
+    var sessions = await fetch('/api/sessions').then(function(r) { return r.json(); });
+    agents.forEach(function(a) { AGENTS_MAP[a.id] = a; });
+    ALL = sessions;
+    buildSidebar(agents, sessions);
+    applyFilter();
+    var fi = $('foot-info');
+    if (fi) fi.textContent = sessions.length + ' SESSIONS / ' + agents.length + ' AGENT' + (agents.length !== 1 ? 'S' : '');
+  } catch (e) {
+    console.error('[AM]', e);
+    if (tblBody) tblBody.innerHTML = '<div class="empty"><div class="e-icon">[!]</div><div>LOAD FAILED: ' + esc(e.message) + '</div></div>';
+  }
+}
+
+// ── SIDEBAR ───────────────────────────────────────────────────────────────────
+function buildSidebar(agents, sessions) {
+  var counts = {};
+  sessions.forEach(function(s) { counts[s.agent] = (counts[s.agent] || 0) + 1; });
+  var c = $('sb-all-count'); if (c) c.textContent = sessions.length;
+  var sb = $('sb-agents'); if (!sb) return;
+  if (!agents.length) { sb.innerHTML = '<div class="sb-label" style="color:var(--muted)">NO AGENTS DETECTED</div>'; return; }
+  sb.innerHTML = agents.map(function(a) {
+    var aid = esc(a.id);
+    return '<button class="sb-item" data-action="filter-agent" data-agent="' + aid + '">' +
+        '<span class="agent-dot" style="background:' + esc(a.color) + '"></span>' +
+        esc(a.label) + '<span class="sb-count">' + (counts[a.id] || 0) + '</span></button>' +
+      '<div class="sb-sub" id="sub-' + aid + '">' +
+        '<button class="sb-sub-item" data-action="agent-tab" data-nav="sessions">[=] SESSIONS</button>' +
+        '<button class="sb-sub-item" data-action="agent-tab" data-nav="usage">[$] USAGE</button>' +
+        '<button class="sb-sub-item" data-action="agent-tab" data-nav="trash">[T] TRASH</button>' +
+        '<button class="sb-sub-item" data-action="agent-tab" data-nav="backups">[B] BACKUPS</button>' +
+      '</div>';
+  }).join('');
+}
+
+function setSidebarActive(id) {
+  document.querySelectorAll('.sb-item[data-action="filter-agent"]').forEach(function(el) {
+    el.classList.toggle('active', el.dataset.agent === id);
+  });
+  document.querySelectorAll('.sb-item[data-agent="all"]').forEach(function(el) {
+    el.classList.toggle('active', id === 'all');
+  });
+}
+
+function setAgentFilter(id) {
+  agentFilter = id; PAGE = 0;
+  setSidebarActive(id);
+  updateContextLabel();
+
+  // Show sub-items for selected agent, hide all others
+  document.querySelectorAll('.sb-sub').forEach(function(el) {
+    el.classList.toggle('show', id !== 'all' && el.id === 'sub-' + id);
+  });
+
+  // Always land on sessions when switching agent
+  switchTab('sessions');
+}
+
+// ── CONTEXT LABEL (shows current filter scope in each panel) ──────────────────
+function updateContextLabel() {
+  var label = agentFilter === 'all' ? 'ALL AGENTS' : agentLabel(agentFilter);
+  document.querySelectorAll('.ctx-label').forEach(function(el) { el.textContent = label; });
+}
+
+// ── SEARCH / FILTER ───────────────────────────────────────────────────────────
+var searchEl = $('search');
+if (searchEl) searchEl.addEventListener('input', applyFilter);
+
+function applyFilter() {
+  var q = (($('search') || {}).value || '').toLowerCase().trim();
+  filtered = ALL.filter(function(s) {
+    if (agentFilter !== 'all' && s.agent !== agentFilter) return false;
+    if (!q) return true;
+    return q.split(' ').every(function(w) {
+      return (s.title + ' ' + s.project + ' ' + s.agentLabel + ' ' + s.agent).toLowerCase().includes(w);
+    });
+  });
+  selected.clear(); PAGE = 0;
+  renderSessions();
+}
+
+// ── SESSIONS RENDER ───────────────────────────────────────────────────────────
+function updateSelInfo() {
+  var el = $('sel-info');
+  if (el) el.textContent = selected.size ? selected.size + ' SELECTED' : filtered.length + ' SESSIONS';
+}
+
+function renderSessions() {
+  updateSelInfo();
+  var wrap = $('tbl-body'); if (!wrap) return;
+  if (!filtered.length) {
+    wrap.innerHTML = '<div class="empty"><div class="e-icon">[_]</div><div>NO SESSIONS FOUND</div></div>';
+    var pg = $('pagination'); if (pg) pg.style.display = 'none';
+    return;
+  }
+  if (grouped) renderGrouped(wrap);
+  else         renderFlat(wrap);
+}
+
+function renderGrouped(wrap) {
+  var groups = new Map();
+  filtered.forEach(function(s) {
+    var k = s.agent + '::' + s.project;
+    if (!groups.has(k)) groups.set(k, { agent: s.agent, agentLabel: s.agentLabel, project: s.project, items: [] });
+    groups.get(k).items.push(s);
+  });
+  var html = '';
+  groups.forEach(function(g, k) {
+    var col   = collapsed.has(k);
+    var shown = col ? [] : g.items.slice(0, 50);
+    var more  = col ? 0 : Math.max(0, g.items.length - 50);
+    html += '<div class="group-hdr' + (col ? ' collapsed' : '') + '" data-gkey="' + esc(k) + '">' +
+      '<span class="g-proj">' + esc(g.project) + '</span>' +
+      '<span class="agent-badge">' + esc(g.agentLabel) + '</span>' +
+      '<span class="g-count">' + g.items.length + ' session' + (g.items.length !== 1 ? 's' : '') + '</span>' +
+      '<span class="g-chev">&#9660;</span></div>';
+    shown.forEach(function(s) { html += rowHtml(s); });
+    if (more) html += '<div style="padding:8px 16px;font-size:16px;color:var(--muted)">...' + more + ' MORE (search to filter)</div>';
+  });
+  wrap.innerHTML = html;
+  var pg = $('pagination'); if (pg) pg.style.display = 'none';
+}
+
+function renderFlat(wrap) {
+  var total = filtered.length, pages = Math.ceil(total / PER_PAGE);
+  if (PAGE >= pages) PAGE = Math.max(0, pages - 1);
+  wrap.innerHTML = filtered.slice(PAGE * PER_PAGE, (PAGE + 1) * PER_PAGE).map(rowHtml).join('');
+  var pag = $('pagination'); if (!pag) return;
+  if (pages <= 1) { pag.style.display = 'none'; return; }
+  pag.style.display = 'flex';
+  pag.innerHTML =
+    '<button class="btn" id="pg-prev"' + (PAGE === 0 ? ' disabled' : '') + '>PREV</button>' +
+    '<span>PAGE ' + (PAGE + 1) + ' / ' + pages + ' &nbsp;&middot;&nbsp; ' + total + ' SESSIONS</span>' +
+    '<button class="btn" id="pg-next"' + (PAGE >= pages - 1 ? ' disabled' : '') + '>NEXT</button>';
+  var prev = $('pg-prev'), next = $('pg-next');
+  if (prev) prev.addEventListener('click', function() { PAGE--; renderSessions(); });
+  if (next) next.addEventListener('click', function() { PAGE++; renderSessions(); });
+}
+
+function rowHtml(s) {
+  var sel  = selected.has(s.path) ? ' selected' : '';
+  var chk  = selected.has(s.path) ? ' checked'  : '';
+  var p    = esc(s.path);
+  var agt  = esc((s.agent || '?').toUpperCase().slice(0, 6));
+  var agtL = esc(s.agentLabel || s.agent || '');
+  var ttl  = esc(s.title || 'Untitled');
+  var msgs = (s.msgCount ? s.msgCount + ' msg' : '?');
+  return '<div class="tbl-row' + sel + '" data-path="' + p + '">' +
+    '<input type="checkbox"' + chk + '>' +
+    '<span class="agent-badge" title="' + agtL + '">' + agt + '</span>' +
+    '<span class="col-title" title="' + ttl + '">' + ttl + '</span>' +
+    '<span class="col-msgs">' + msgs + '</span>' +
+    '<span class="col-size">' + esc(s.sizeLabel || '') + '</span>' +
+    '<span class="col-date">' + esc(s.dateLabel || '') + '</span>' +
+    '<span class="row-actions">' +
+      '<button class="act-btn" data-action="backup-one" data-path="' + p + '" title="Backup">BAK</button>' +
+      '<button class="act-btn del" data-action="trash-one" data-path="' + p + '" title="Trash">DEL</button>' +
+    '</span></div>';
+}
+
+// ── TOOLBAR ───────────────────────────────────────────────────────────────────
+function wireBtn(id, fn) { var el = $(id); if (el) el.addEventListener('click', fn); }
+
+wireBtn('btn-sel-all',  function() { filtered.forEach(function(s) { selected.add(s.path); }); renderSessions(); });
+wireBtn('btn-sel-none', function() { selected.clear(); renderSessions(); });
+wireBtn('btn-group', function() {
+  grouped = !grouped;
+  var el = $('btn-group');
+  if (el) { el.textContent = grouped ? 'FLAT VIEW' : 'GROUP VIEW'; el.classList.toggle('active-btn', !grouped); }
+  PAGE = 0; renderSessions();
+});
+
+wireBtn('btn-trash', async function() {
+  if (!selected.size) { toast('SELECT SESSIONS FIRST', 'err'); return; }
+  if (!confirm('Move ' + selected.size + ' session(s) to trash?')) return;
+  var items = buildItems(Array.from(selected));
+  var res   = await post('/api/trash/move', { items: items });
+  var ok    = res.filter(function(r) { return r.ok; }).map(function(r) { return r.path; });
+  ok.forEach(function(p) { ALL = ALL.filter(function(s) { return s.path !== p; }); selected.delete(p); });
+  applyFilter(); toast(ok.length + ' MOVED TO TRASH', 'ok');
+});
+wireBtn('btn-backup', async function() {
+  if (!selected.size) { toast('SELECT SESSIONS FIRST', 'err'); return; }
+  var items = buildItems(Array.from(selected));
+  var res   = await post('/api/backup/create', { items: items, note: '' });
+  toast(res.filter(function(r) { return r.ok; }).length + ' BACKUP(S) CREATED', 'ok');
+});
+
+// Enrich paths with session metadata for storage
+function buildItems(paths) {
+  return paths.map(function(p) {
+    var s = ALL.find(function(s) { return s.path === p; }) || {};
+    return { path: p, agent: s.agent || '', agentLabel: s.agentLabel || '', project: s.project || '', title: s.title || '' };
+  });
+}
+
+// ── TAB SWITCHING ─────────────────────────────────────────────────────────────
+function switchTab(tab) {
+  activeTab = tab;
+  // Show correct panel
+  document.querySelectorAll('.panel').forEach(function(p) { p.classList.toggle('active', p.id === tab + '-panel'); });
+  // Mark active sub-item (agent-specific nav)
+  document.querySelectorAll('.sb-sub-item').forEach(function(el) {
+    el.classList.toggle('active', el.dataset.nav === tab);
+  });
+  // Mark global tools active only when agentFilter is all
+  document.querySelectorAll('.sb-item[data-action="switch-tab-global"]').forEach(function(el) {
+    el.classList.toggle('active', el.dataset.nav === tab && agentFilter === 'all');
+  });
+  if (tab === 'usage')   loadUsage(false);
+  if (tab === 'trash')   loadTrash(false);
+  if (tab === 'backups') loadBackups(false);
+}
+document.querySelectorAll('.tab').forEach(function(t) {
+  t.addEventListener('click', function() { switchTab(t.dataset.tab); });
+});
+
+// ── ROW ACTIONS ───────────────────────────────────────────────────────────────
+async function trashOne(path) {
+  if (!path || !confirm('Move to trash?')) return;
+  var items = buildItems([path]);
+  var res   = await post('/api/trash/move', { items: items });
+  if (res[0] && res[0].ok) {
+    ALL = ALL.filter(function(s) { return s.path !== path; }); selected.delete(path);
+    applyFilter(); toast('MOVED TO TRASH', 'ok');
+  } else toast('ERROR: ' + ((res[0] && res[0].error) || '?'), 'err');
+}
+async function backupOne(path) {
+  if (!path) return;
+  var items = buildItems([path]);
+  var res   = await post('/api/backup/create', { items: items, note: '' });
+  if (res[0] && res[0].ok) toast('BACKUP CREATED', 'ok');
+  else toast('ERROR: ' + ((res[0] && res[0].error) || '?'), 'err');
+}
+
+// ── USAGE TAB ─────────────────────────────────────────────────────────────────
+async function loadUsage(force) {
+  var key   = agentFilter;
+  var panel = $('usage-panel'); if (!panel) return;
+  if (!force && usageCache[key]) { panel.innerHTML = usageCache[key]; return; }
+  panel.innerHTML = '<div class="loading"><span class="loading-dots">LOADING ' + agentLabel(key) + ' USAGE</span></div>';
+  try {
+    var url  = '/api/usage' + (key !== 'all' ? '?agent=' + encodeURIComponent(key) : '');
+    var data = await fetch(url).then(function(r) { return r.json(); });
+    var html = renderUsagePanel(data, key);
+    usageCache[key] = html;
+    panel.innerHTML = html;
+  } catch (e) {
+    panel.innerHTML = '<div class="empty"><div class="e-icon">[!]</div><div>' + esc(e.message) + '</div></div>';
+  }
+}
+
+function renderUsagePanel(data, key) {
+  if (!data.available) {
+    return '<div class="empty"><div class="e-icon">[!]</div><div>' + esc(data.error || 'ccusage unavailable') + '</div></div>';
+  }
+  var t    = data.totals || {};
+  var days = data.daily  || [];
+
+  var ctxLine = '<div class="ctx-banner">SCOPE: <span class="ctx-label">' + agentLabel(key) + '</span> &nbsp;|&nbsp; ' + days.length + ' DAYS ON RECORD</div>';
+
+  // ── stat cards ────────────────────────────────────────────────────────────
+  var stats = '<div class="stat-grid">' +
+    sc('TOTAL COST',    fmtCost(t.totalCost),           '') +
+    sc('TOTAL TOKENS',  fmtTok(t.totalTokens),          '') +
+    sc('INPUT',         fmtTok(t.inputTokens),          '') +
+    sc('OUTPUT',        fmtTok(t.outputTokens),         '') +
+    sc('CACHE READ',    fmtTok(t.cacheReadTokens),      '') +
+    sc('CACHE WRITE',   fmtTok(t.cacheCreationTokens),  '') +
+    (t.reasoningTokens ? sc('REASONING', fmtTok(t.reasoningTokens), '') : '') +
+  '</div>';
+
+  // ── aggregate models ──────────────────────────────────────────────────────
+  var modelMap = {};
+  days.forEach(function(d) {
+    (d.models || []).forEach(function(m) {
+      if (!modelMap[m.name]) modelMap[m.name] = { cost: 0, input: 0, output: 0, cacheRead: 0, reasoning: 0 };
+      var mm = modelMap[m.name];
+      mm.cost      += m.cost      || 0;
+      mm.input     += m.input     || 0;
+      mm.output    += m.output    || 0;
+      mm.cacheRead += m.cacheRead || 0;
+      mm.reasoning += m.reasoning || 0;
+    });
+  });
+
+  var modelSection = '';
+  var modelKeys = Object.keys(modelMap);
+  if (modelKeys.length) {
+    var mRows = modelKeys
+      .sort(function(a, b) { return modelMap[b].cost - modelMap[a].cost; })
+      .map(function(name) {
+        var m = modelMap[name];
+        return '<tr><td>' + esc(name) + '</td><td>' + fmtCost(m.cost) + '</td>' +
+          '<td>' + fmtTok(m.input) + '</td><td>' + fmtTok(m.output) + '</td>' +
+          '<td>' + fmtTok(m.cacheRead) + '</td>' +
+          '<td>' + (m.reasoning ? fmtTok(m.reasoning) : '—') + '</td></tr>';
+      }).join('');
+    modelSection = '<div class="u-section"><h3>BY MODEL (' + modelKeys.length + ')</h3>' +
+      '<table class="u-table"><thead><tr>' +
+        '<th>MODEL</th><th>COST</th><th>INPUT</th><th>OUTPUT</th><th>CACHE READ</th><th>REASONING</th>' +
+      '</tr></thead><tbody>' + mRows + '</tbody></table></div>';
+  }
+
+  // ── daily table (shown first for immediate visibility) ────────────────────
+  var dailySection = '';
+  if (days.length) {
+    var dRows = days.slice().reverse().map(function(d) {
+      var modelNames = (d.models || []).map(function(m) { return m.name; }).join(', ');
+      return '<tr>' +
+        '<td>' + esc(d.date || '') + '</td>' +
+        '<td>' + fmtCost(d.cost) + '</td>' +
+        '<td>' + fmtTok(d.input) + '</td>' +
+        '<td>' + fmtTok(d.output) + '</td>' +
+        '<td>' + fmtTok(d.cacheRead) + '</td>' +
+        (d.reasoning ? '<td>' + fmtTok(d.reasoning) + '</td>' : '<td>—</td>') +
+        '<td style="font-size:14px;color:var(--muted)">' + esc(modelNames) + '</td>' +
+      '</tr>';
+    }).join('');
+    dailySection = '<div class="u-section"><h3>BY DATE (' + days.length + ' DAYS)</h3>' +
+      '<table class="u-table"><thead><tr>' +
+        '<th>DATE</th><th>COST</th><th>INPUT</th><th>OUTPUT</th><th>CACHE</th><th>REASONING</th><th>MODELS</th>' +
+      '</tr></thead><tbody>' + dRows + '</tbody></table></div>';
+  }
+
+  // Order: stats → daily (most useful) → by model
+  return ctxLine + stats + dailySection + modelSection;
+}
+
+function sc(label, value, sub) {
+  return '<div class="stat-card"><div class="s-label">' + esc(label) + '</div>' +
+    '<div class="s-value">' + esc(value) + '</div>' +
+    (sub ? '<div class="s-sub">' + esc(sub) + '</div>' : '') + '</div>';
+}
+
+// ── TRASH TAB ─────────────────────────────────────────────────────────────────
+async function loadTrash(force) {
+  var panel = $('trash-panel'); if (!panel) return;
+  panel.innerHTML = '<div class="loading"><span class="loading-dots">LOADING</span></div>';
+  try {
+    var url   = '/api/trash' + (agentFilter !== 'all' ? '?agent=' + encodeURIComponent(agentFilter) : '');
+    var items = await fetch(url).then(function(r) { return r.json(); });
+    var ctx   = '<div class="ctx-banner">SCOPE: <span class="ctx-label">' + agentLabel(agentFilter) + '</span></div>';
+    if (!items.length) {
+      panel.innerHTML = ctx + '<div class="empty"><div class="e-icon">[_]</div><div>TRASH IS EMPTY</div></div>';
+      return;
+    }
+    panel.innerHTML = ctx + '<div class="list-panel-wrap">' + items.map(function(meta) {
+      var mp   = esc(meta.metaPath);
+      var subL = [meta.agentLabel, meta.project, 'DELETED ' + (meta.deletedAt || '')].filter(Boolean).join(' / ');
+      return '<div class="meta-card">' +
+        '<div class="meta-body">' +
+          '<div class="meta-title">' + esc(meta.title || meta.originalPath || 'Unknown') + '</div>' +
+          '<div class="meta-sub">' + esc(subL) + '</div>' +
+        '</div>' +
+        '<div class="meta-actions">' +
+          '<button class="btn success" data-action="restore-trash" data-meta="' + mp + '">RESTORE</button>' +
+          '<button class="btn danger"  data-action="purge-trash"   data-meta="' + mp + '">PURGE</button>' +
+        '</div></div>';
+    }).join('') + '</div>';
+  } catch (e) {
+    panel.innerHTML = '<div class="empty"><div class="e-icon">[!]</div><div>' + esc(e.message) + '</div></div>';
+  }
+}
+
+async function restoreTrash(mp) {
+  var res = await post('/api/trash/restore', { metaPath: mp });
+  if (res.ok) { toast('RESTORED TO ' + res.restoredTo, 'ok'); loadTrash(true); }
+  else toast('ERROR: ' + (res.error || '?'), 'err');
+}
+async function purgeTrash(mp) {
+  if (!confirm('Permanently delete? Cannot be undone.')) return;
+  var res = await post('/api/trash/purge', { metaPaths: [mp] });
+  if (res[0] && res[0].ok) { toast('PERMANENTLY DELETED', 'ok'); loadTrash(true); }
+  else toast('ERROR: ' + ((res[0] && res[0].error) || '?'), 'err');
+}
+
+// ── BACKUPS TAB ───────────────────────────────────────────────────────────────
+async function loadBackups(force) {
+  var panel = $('backups-panel'); if (!panel) return;
+  panel.innerHTML = '<div class="loading"><span class="loading-dots">LOADING</span></div>';
+  try {
+    var url   = '/api/backups' + (agentFilter !== 'all' ? '?agent=' + encodeURIComponent(agentFilter) : '');
+    var items = await fetch(url).then(function(r) { return r.json(); });
+    var ctx   = '<div class="ctx-banner">SCOPE: <span class="ctx-label">' + agentLabel(agentFilter) + '</span></div>';
+    if (!items.length) {
+      panel.innerHTML = ctx + '<div class="empty"><div class="e-icon">[_]</div><div>NO BACKUPS YET</div></div>';
+      return;
+    }
+    panel.innerHTML = ctx + '<div class="list-panel-wrap">' + items.map(function(meta) {
+      var mp   = esc(meta.metaPath);
+      var note = meta.note ? ' / ' + esc(meta.note) : '';
+      var subL = [meta.agentLabel, meta.project, 'BACKED UP ' + (meta.backedUpAt || '')].filter(Boolean).join(' / ') + note;
+      return '<div class="meta-card">' +
+        '<div class="meta-body">' +
+          '<div class="meta-title">' + esc(meta.title || meta.originalPath || meta.filename || 'Unknown') + '</div>' +
+          '<div class="meta-sub">' + esc(subL) + '</div>' +
+        '</div>' +
+        '<div class="meta-actions">' +
+          '<button class="btn success" data-action="restore-backup" data-meta="' + mp + '">RESTORE</button>' +
+          '<button class="btn danger"  data-action="delete-backup"  data-meta="' + mp + '">DELETE</button>' +
+        '</div></div>';
+    }).join('') + '</div>';
+  } catch (e) {
+    panel.innerHTML = '<div class="empty"><div class="e-icon">[!]</div><div>' + esc(e.message) + '</div></div>';
+  }
+}
+
+async function restoreBackup(mp) {
+  var res = await post('/api/backup/restore', { metaPath: mp });
+  if (res.ok) toast('RESTORED TO ' + res.restoredTo, 'ok');
+  else toast('ERROR: ' + (res.error || '?'), 'err');
+}
+async function deleteBackup(mp) {
+  if (!confirm('Delete this backup?')) return;
+  var res = await post('/api/backup/delete', { metaPaths: [mp] });
+  if (res[0] && res[0].ok) { toast('BACKUP DELETED', 'ok'); loadBackups(true); }
+  else toast('ERROR: ' + ((res[0] && res[0].error) || '?'), 'err');
+}
+
+// ── BOOT ──────────────────────────────────────────────────────────────────────
+init().catch(function(e) { console.error('[AM] fatal:', e); });
+
+})();
+`

package/src/ui/render.js

@@ -0,0 +1,138 @@
+import { PAGE_CSS } from './css.js'
+import { PAGE_JS }  from './js.js'
+
+export function renderPage() {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>aisessions</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap" rel="stylesheet">
+<style>${PAGE_CSS}</style>
+</head>
+<body>
+<div id="shell">
+
+  <!-- HEADER -->
+  <header id="hdr">
+    <div id="logo">AI<br>SESSIONS</div>
+    <span id="hdr-sub">// AI SESSION MANAGER</span>
+    <div id="hdr-right">
+      <input id="search" type="search" placeholder="SEARCH SESSIONS...">
+    </div>
+  </header>
+
+  <div id="body">
+
+    <!-- SIDEBAR -->
+    <nav id="sidebar">
+      <div class="sb-section">
+        <div class="sb-label">NAVIGATE</div>
+        <button class="sb-item active" data-agent="all" data-action="filter-agent">
+          [*] ALL AGENTS
+          <span class="sb-count" id="sb-all-count">...</span>
+        </button>
+      </div>
+      <div class="sb-section">
+        <div class="sb-label">AGENTS</div>
+        <div id="sb-agents">
+          <div class="sb-item" style="color:var(--dim)">LOADING...</div>
+        </div>
+      </div>
+      <div class="sb-section">
+        <div class="sb-label">TOOLS (GLOBAL)</div>
+        <button class="sb-item" data-action="switch-tab-global" data-nav="usage">[$] USAGE</button>
+        <button class="sb-item" data-action="switch-tab-global" data-nav="trash">[T] TRASH</button>
+        <button class="sb-item" data-action="switch-tab-global" data-nav="backups">[B] BACKUPS</button>
+      </div>
+
+      <div id="sb-credit">
+        <div class="credit-kicker">CRAFTED WITH &lt;3</div>
+        <div class="credit-frame">
+          <div class="credit-handle">@s41r4j</div>
+        </div>
+        <div class="credit-links">
+          <a class="credit-link" href="https://github.com/s41r4j" target="_blank" rel="noopener">
+            <span class="credit-link-icon">GH</span>
+            <span>GitHub</span>
+          </a>
+          <a class="credit-link" href="https://x.com/s41r4j" target="_blank" rel="noopener">
+            <span class="credit-link-icon">X</span>
+            <span>X.com</span>
+          </a>
+        </div>
+        <div class="credit-pkg">aisessions v1.0</div>
+      </div>
+    </nav>
+
+    <!-- MAIN -->
+    <div id="main">
+
+      <!-- TAB BAR -->
+      <div id="tab-bar">
+        <div class="tab active" data-tab="sessions">[ SESSIONS ]</div>
+        <div class="tab" data-tab="usage">[ USAGE ]</div>
+        <div class="tab" data-tab="trash">[ TRASH ]</div>
+        <div class="tab" data-tab="backups">[ BACKUPS ]</div>
+      </div>
+
+      <!-- CONTENT -->
+      <div id="content">
+
+        <!-- ── Sessions ── -->
+        <div id="sessions-panel" class="panel active">
+          <div id="toolbar">
+            <button class="btn" id="btn-sel-all">SELECT ALL</button>
+            <button class="btn" id="btn-sel-none">DESELECT</button>
+            <button class="btn" id="btn-group">FLAT VIEW</button>
+            <span class="spacer"></span>
+            <span id="sel-info">...</span>
+            <span class="spacer"></span>
+            <button class="btn success" id="btn-backup">BACKUP SEL</button>
+            <button class="btn danger"  id="btn-trash">TRASH SEL</button>
+          </div>
+          <div id="tbl-wrap">
+            <div class="tbl-hdr">
+              <span></span>
+              <span>AGENT</span>
+              <span>TITLE</span>
+              <span>MSGS</span>
+              <span>SIZE</span>
+              <span>DATE</span>
+              <span>ACTIONS</span>
+            </div>
+            <div id="tbl-body"></div>
+          </div>
+          <div id="pagination" style="display:none"></div>
+        </div>
+
+        <!-- ── Usage ── -->
+        <div id="usage-panel" class="panel"></div>
+
+        <!-- ── Trash ── -->
+        <div id="trash-panel" class="panel"></div>
+
+        <!-- ── Backups ── -->
+        <div id="backups-panel" class="panel"></div>
+
+      </div><!-- /content -->
+    </div><!-- /main -->
+  </div><!-- /body -->
+
+  <!-- FOOTER -->
+  <footer id="foot">
+    <span>AISESSIONS v1.0</span>
+    <span>&nbsp;|&nbsp;</span>
+    <span id="foot-info">LOADING...</span>
+  </footer>
+
+</div><!-- /shell -->
+
+<div id="toast"></div>
+<script>${PAGE_JS}</script>
+</body>
+</html>`
+}