aisessions 1.0.0

package/src/router.js

@@ -0,0 +1,83 @@
+import { renderPage }   from './ui/render.js'
+import { getAllSessions, getInstalledAgents } from './agents/index.js'
+import { getUsageData } from './usage/index.js'
+import { listTrash, moveToTrash, restoreFromTrash, purgeTrash } from './storage/trash.js'
+import { listBackups, createBackup, restoreBackup, deleteBackup } from './storage/backup.js'
+
+function sendJson(res, data, status = 200) {
+  res.writeHead(status, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' })
+  res.end(JSON.stringify(data))
+}
+function sendHtml(res, content) {
+  res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8', 'Cache-Control': 'no-store' })
+  res.end(content)
+}
+
+async function readBody(req) {
+  return new Promise((resolve, reject) => {
+    const chunks = []
+    req.on('data', c => chunks.push(c))
+    req.on('end', () => {
+      try {
+        const text = Buffer.concat(chunks).toString('utf8')
+        if ((req.headers['content-type'] || '').includes('application/json')) {
+          resolve(JSON.parse(text || '{}'))
+        } else {
+          const p = new URLSearchParams(text)
+          const obj = {}
+          for (const [k, v] of p) obj[k] = obj[k] !== undefined ? [].concat(obj[k], v) : v
+          resolve(obj)
+        }
+      } catch { resolve({}) }
+    })
+    req.on('error', reject)
+  })
+}
+
+function arr(v) { return Array.isArray(v) ? v : [v].filter(Boolean) }
+
+// Normalise body items: accept either `items:[{path,agent,...}]` or `paths:[...]`
+function bodyItems(b) {
+  if (Array.isArray(b.items)) return b.items
+  return arr(b.paths).map(p => (typeof p === 'string' ? { path: p } : p))
+}
+
+export async function router(req, res) {
+  const u        = new URL(req.url, 'http://localhost')
+  const pathname = u.pathname
+  const query    = Object.fromEntries(u.searchParams)
+  const method   = req.method.toUpperCase()
+  const agent    = query.agent || 'all'
+
+  // ── UI shell ──────────────────────────────────────────────────────────────
+  if (method === 'GET' && pathname === '/') return sendHtml(res, renderPage())
+
+  // ── Agents ────────────────────────────────────────────────────────────────
+  if (method === 'GET' && pathname === '/api/agents') return sendJson(res, getInstalledAgents())
+
+  // ── Sessions ──────────────────────────────────────────────────────────────
+  if (method === 'GET' && pathname === '/api/sessions') {
+    const sessions = await getAllSessions()
+    return sendJson(res, sessions.map(({ date, ...rest }) => rest))
+  }
+
+  // ── Usage (supports ?agent=claude) ───────────────────────────────────────
+  if (method === 'GET' && pathname === '/api/usage') {
+    return sendJson(res, await getUsageData({ since: query.since, until: query.until, agent }))
+  }
+
+  // ── Trash (supports ?agent=claude) ───────────────────────────────────────
+  if (method === 'GET'  && pathname === '/api/trash')         return sendJson(res, await listTrash(agent))
+  if (method === 'POST' && pathname === '/api/trash/move')    { const b = await readBody(req); return sendJson(res, await moveToTrash(bodyItems(b))) }
+  if (method === 'POST' && pathname === '/api/trash/restore') { const b = await readBody(req); return sendJson(res, await restoreFromTrash(b.metaPath)) }
+  if (method === 'POST' && pathname === '/api/trash/purge')   { const b = await readBody(req); return sendJson(res, await purgeTrash(arr(b.metaPaths))) }
+
+  // ── Backups (supports ?agent=claude) ─────────────────────────────────────
+  if (method === 'GET'  && pathname === '/api/backups')         return sendJson(res, await listBackups(agent))
+  if (method === 'POST' && pathname === '/api/backup/create')   { const b = await readBody(req); return sendJson(res, await createBackup(bodyItems(b), b.note || '')) }
+  if (method === 'POST' && pathname === '/api/backup/restore')  { const b = await readBody(req); return sendJson(res, await restoreBackup(b.metaPath)) }
+  if (method === 'POST' && pathname === '/api/backup/delete')   { const b = await readBody(req); return sendJson(res, await deleteBackup(arr(b.metaPaths))) }
+
+  res.writeHead(404, { 'Content-Type': 'text/plain' })
+  res.end('Not found')
+}

package/src/server.js

@@ -0,0 +1,12 @@
+import { createServer as _http } from 'node:http'
+import { router } from './router.js'
+
+export function createServer() {
+  return _http((req, res) => {
+    router(req, res).catch(err => {
+      console.error('[router]', err.message)
+      res.writeHead(500, { 'Content-Type': 'text/plain' })
+      res.end('Internal server error')
+    })
+  })
+}

package/src/storage/backup.js

@@ -0,0 +1,93 @@
+import { homedir }   from 'node:os'
+import { existsSync, mkdirSync, readdirSync, writeFileSync, readFileSync, statSync, rmSync, cpSync } from 'node:fs'
+import { join, basename } from 'node:path'
+
+const HOME       = homedir()
+const BACKUP_DIR = join(HOME, '.aisessions', 'backups')
+
+function ensureBackup() { mkdirSync(BACKUP_DIR, { recursive: true }) }
+
+function normaliseItems(raw) {
+  return (Array.isArray(raw) ? raw : [raw]).map(i =>
+    typeof i === 'string' ? { path: i } : i
+  ).filter(i => i && i.path)
+}
+
+export async function listBackups(agent) {
+  ensureBackup()
+  const items = []
+  try {
+    for (const f of readdirSync(BACKUP_DIR)) {
+      if (!f.endsWith('.meta.json')) continue
+      const mp = join(BACKUP_DIR, f)
+      try {
+        const meta = JSON.parse(readFileSync(mp, 'utf8'))
+        if (agent && agent !== 'all' && meta.agent && meta.agent !== agent) continue
+        items.push({ ...meta, metaPath: mp, exists: existsSync(meta.backupPath) })
+      } catch {}
+    }
+  } catch {}
+  return items.sort((a, b) => new Date(b.backedUpAt) - new Date(a.backedUpAt))
+}
+
+export async function createBackup(rawItems, note = '') {
+  ensureBackup()
+  const results = []
+  for (const item of normaliseItems(rawItems)) {
+    const p = item.path
+    try {
+      if (!existsSync(p)) { results.push({ path: p, ok: false, error: 'not found' }); continue }
+      const ts         = Date.now()
+      const name       = basename(p)
+      const backupName = ts + '_' + name
+      const backupPath = join(BACKUP_DIR, backupName)
+      const metaPath   = join(BACKUP_DIR, backupName + '.meta.json')
+      const st         = statSync(p)
+      if (st.isDirectory()) cpSync(p, backupPath, { recursive: true })
+      else cpSync(p, backupPath)
+      const meta = {
+        originalPath: p,
+        filename:     name,
+        agent:        item.agent      || '',
+        agentLabel:   item.agentLabel || '',
+        project:      item.project    || '',
+        title:        item.title      || '',
+        backedUpAt:   new Date().toISOString(),
+        backupPath,
+        metaPath,
+        note,
+      }
+      writeFileSync(metaPath, JSON.stringify(meta, null, 2))
+      results.push({ path: p, ok: true, backupPath, metaPath })
+    } catch (e) { results.push({ path: p, ok: false, error: e.message }) }
+  }
+  return results
+}
+
+export async function restoreBackup(metaPath) {
+  try {
+    const meta = JSON.parse(readFileSync(metaPath, 'utf8'))
+    if (!existsSync(meta.backupPath)) return { ok: false, error: 'backup file missing' }
+    const dest = existsSync(meta.originalPath)
+      ? meta.originalPath.replace(/(\.[^.]+)?$/, '_restored_' + Date.now() + '$1')
+      : meta.originalPath
+    const st = statSync(meta.backupPath)
+    if (st.isDirectory()) cpSync(meta.backupPath, dest, { recursive: true })
+    else cpSync(meta.backupPath, dest)
+    return { ok: true, restoredTo: dest }
+  } catch (e) { return { ok: false, error: e.message } }
+}
+
+export async function deleteBackup(metaPaths) {
+  const results = []
+  for (const mp of metaPaths) {
+    try {
+      let backupPath = mp.replace(/\.meta\.json$/, '')
+      try { const m = JSON.parse(readFileSync(mp, 'utf8')); backupPath = m.backupPath || backupPath } catch {}
+      if (existsSync(backupPath)) rmSync(backupPath, { recursive: true, force: true })
+      if (existsSync(mp))         rmSync(mp, { force: true })
+      results.push({ metaPath: mp, ok: true })
+    } catch (e) { results.push({ metaPath: mp, ok: false, error: e.message }) }
+  }
+  return results
+}

package/src/storage/trash.js

@@ -0,0 +1,93 @@
+import { homedir }   from 'node:os'
+import { existsSync, mkdirSync, readdirSync, writeFileSync, readFileSync, statSync, rmSync, cpSync } from 'node:fs'
+import { join } from 'node:path'
+
+const HOME      = homedir()
+const TRASH_DIR = join(HOME, '.aisessions', 'trash')
+
+function ensureTrash() { mkdirSync(TRASH_DIR, { recursive: true }) }
+
+// items: array of { path, agent?, agentLabel?, project?, title? }
+//        OR plain strings (backwards compat)
+function normaliseItems(raw) {
+  return (Array.isArray(raw) ? raw : [raw]).map(i =>
+    typeof i === 'string' ? { path: i } : i
+  ).filter(i => i && i.path)
+}
+
+export async function listTrash(agent) {
+  ensureTrash()
+  const items = []
+  try {
+    for (const f of readdirSync(TRASH_DIR)) {
+      if (!f.endsWith('.meta.json')) continue
+      const mp = join(TRASH_DIR, f)
+      try {
+        const meta = JSON.parse(readFileSync(mp, 'utf8'))
+        if (agent && agent !== 'all' && meta.agent && meta.agent !== agent) continue
+        items.push({ ...meta, metaPath: mp, exists: existsSync(meta.trashPath) })
+      } catch {}
+    }
+  } catch {}
+  return items.sort((a, b) => new Date(b.deletedAt) - new Date(a.deletedAt))
+}
+
+export async function moveToTrash(rawItems) {
+  ensureTrash()
+  const results = []
+  for (const item of normaliseItems(rawItems)) {
+    const p = item.path
+    try {
+      if (!existsSync(p)) { results.push({ path: p, ok: false, error: 'not found' }); continue }
+      const ts        = Date.now()
+      const trashName = ts + '_' + p.replace(/\//g, '_').replace(/^_+/, '').slice(-80)
+      const trashPath = join(TRASH_DIR, trashName)
+      const metaPath  = join(TRASH_DIR, trashName + '.meta.json')
+      const st        = statSync(p)
+      if (st.isDirectory()) cpSync(p, trashPath, { recursive: true })
+      else cpSync(p, trashPath)
+      rmSync(p, { recursive: true, force: true })
+      const meta = {
+        originalPath: p,
+        agent:        item.agent      || '',
+        agentLabel:   item.agentLabel || '',
+        project:      item.project    || '',
+        title:        item.title      || '',
+        deletedAt:    new Date().toISOString(),
+        trashPath,
+        metaPath,
+      }
+      writeFileSync(metaPath, JSON.stringify(meta, null, 2))
+      results.push({ path: p, ok: true, trashPath, metaPath })
+    } catch (e) { results.push({ path: p, ok: false, error: e.message }) }
+  }
+  return results
+}
+
+export async function restoreFromTrash(metaPath) {
+  try {
+    const meta = JSON.parse(readFileSync(metaPath, 'utf8'))
+    if (!existsSync(meta.trashPath)) return { ok: false, error: 'trash file missing' }
+    if (existsSync(meta.originalPath)) return { ok: false, error: 'destination already exists' }
+    const st = statSync(meta.trashPath)
+    if (st.isDirectory()) cpSync(meta.trashPath, meta.originalPath, { recursive: true })
+    else cpSync(meta.trashPath, meta.originalPath)
+    rmSync(meta.trashPath, { recursive: true, force: true })
+    rmSync(metaPath, { force: true })
+    return { ok: true, restoredTo: meta.originalPath }
+  } catch (e) { return { ok: false, error: e.message } }
+}
+
+export async function purgeTrash(metaPaths) {
+  const results = []
+  for (const mp of metaPaths) {
+    try {
+      let trashPath = mp.replace(/\.meta\.json$/, '')
+      try { const m = JSON.parse(readFileSync(mp, 'utf8')); trashPath = m.trashPath || trashPath } catch {}
+      if (existsSync(trashPath)) rmSync(trashPath, { recursive: true, force: true })
+      if (existsSync(mp))        rmSync(mp, { force: true })
+      results.push({ metaPath: mp, ok: true })
+    } catch (e) { results.push({ metaPath: mp, ok: false, error: e.message }) }
+  }
+  return results
+}

package/src/ui/css.js

@@ -0,0 +1,392 @@
+export const PAGE_CSS = `
+@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap');
+
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+
+:root{
+  --bg:#060606;
+  --sb:#0a0a0a;
+  --surf:#0f0f0f;
+  --surf2:#151515;
+  --surf3:#1a1a1a;
+  --border:rgba(255,255,255,0.09);
+  --border2:rgba(255,255,255,0.18);
+  --text:#e8e8e8;
+  --muted:#666;
+  --dim:#3a3a3a;
+  --accent:#ffffff;
+  --danger:#ff3333;
+  --success:#33cc33;
+  --warn:#ccaa00;
+  --sb-w:230px;
+  --hdr-h:58px;
+  --tab-h:46px;
+  --toolbar-h:52px;
+  --foot-h:38px;
+  --row-h:52px;
+  --pixel: 'VT323', 'Courier New', monospace;
+  --logo:  'Press Start 2P', monospace;
+}
+
+html,body{height:100%;background:var(--bg);color:var(--text);overflow:hidden;
+  font-family:var(--pixel);font-size:20px;line-height:1.2;
+  -webkit-font-smoothing:none;font-smooth:never;image-rendering:pixelated}
+
+/* ── LAYOUT ──────────────────────────────────────────────────────────────────── */
+#shell{display:flex;flex-direction:column;height:100vh;width:100vw}
+
+#hdr{
+  height:var(--hdr-h);
+  display:flex;align-items:center;gap:14px;padding:0 20px;
+  background:var(--sb);
+  border-bottom:2px solid var(--border2);
+  flex-shrink:0;z-index:20;
+}
+
+#body{display:flex;flex:1;min-height:0;overflow:hidden}
+
+#sidebar{
+  width:var(--sb-w);background:var(--sb);
+  border-right:2px solid var(--border);
+  display:flex;flex-direction:column;
+  flex-shrink:0;overflow-y:auto;overflow-x:hidden;
+}
+
+#main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
+
+#foot{
+  height:var(--foot-h);
+  display:flex;align-items:center;gap:12px;padding:0 16px;
+  background:var(--sb);border-top:2px solid var(--border);
+  flex-shrink:0;font-size:16px;color:var(--muted);
+  letter-spacing:.5px;
+}
+
+/* ── HEADER ──────────────────────────────────────────────────────────────────── */
+#logo{
+  font-family:var(--logo);font-size:11px;
+  color:var(--accent);letter-spacing:1px;
+  text-shadow:0 0 10px rgba(255,255,255,.25);
+  white-space:nowrap;
+}
+#hdr-sub{font-size:16px;color:var(--muted);letter-spacing:.5px}
+#hdr-right{margin-left:auto;display:flex;align-items:center;gap:10px}
+#search{
+  background:var(--surf);border:2px solid var(--border);
+  color:var(--text);padding:8px 14px;border-radius:2px;
+  font-family:var(--pixel);font-size:18px;width:260px;outline:none;
+  -webkit-font-smoothing:none;
+}
+#search:focus{border-color:var(--border2);background:var(--surf2)}
+#search::placeholder{color:var(--dim)}
+
+/* ── SIDEBAR ─────────────────────────────────────────────────────────────────── */
+.sb-section{padding:10px 0}
+.sb-section+.sb-section{border-top:1px solid var(--border)}
+.sb-label{
+  padding:6px 16px 4px;
+  font-size:13px;letter-spacing:1.5px;
+  color:var(--dim);text-transform:uppercase;
+}
+.sb-item{
+  display:flex;align-items:center;gap:10px;
+  padding:10px 16px;cursor:pointer;
+  color:var(--muted);font-family:var(--pixel);font-size:18px;
+  border:none;background:none;width:100%;text-align:left;
+  transition:color .1s,background .1s;
+  -webkit-font-smoothing:none;
+}
+.sb-item:hover{color:var(--text);background:rgba(255,255,255,0.04)}
+.sb-item.active{
+  color:var(--accent);background:rgba(255,255,255,0.07);
+  border-left:3px solid var(--accent);padding-left:13px;
+}
+.agent-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.2)}
+.sb-count{
+  margin-left:auto;font-size:15px;color:var(--dim);
+  background:var(--surf2);padding:1px 7px;border:1px solid var(--border);
+}
+
+/* ── DEV CREDIT ──────────────────────────────────────────────────────────────── */
+#sb-credit{
+  margin-top:auto;
+  padding:18px 14px 20px;
+  border-top:1px solid var(--border);
+  text-align:center;
+  flex-shrink:0;
+  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 48%);
+}
+.credit-kicker{
+  font-family:var(--logo);font-size:7px;
+  color:rgba(255,255,255,.42);letter-spacing:1.4px;
+  margin-bottom:9px;
+}
+.credit-frame{
+  position:relative;
+  margin:0 auto 12px;
+  padding:12px 8px 11px;
+  border:1px solid rgba(255,255,255,.18);
+  background:rgba(255,255,255,.035);
+}
+.credit-frame::before,.credit-frame::after{
+  content:"";
+  position:absolute;
+  top:-1px;
+  width:18px;height:1px;
+  background:var(--accent);
+  opacity:.65;
+}
+.credit-frame::before{left:10px}
+.credit-frame::after{right:10px}
+.credit-handle{
+  font-family:var(--logo);font-size:9px;
+  color:var(--accent);letter-spacing:1.5px;
+}
+.credit-links{
+  display:grid;grid-template-columns:1fr 1fr;gap:8px;
+  margin-bottom:11px;
+}
+.credit-link{
+  display:flex;align-items:center;justify-content:center;gap:6px;
+  min-width:0;
+  font-size:14px;color:rgba(255,255,255,.58);letter-spacing:.4px;
+  text-decoration:none;padding:6px 7px;
+  border:1px solid var(--border);
+  background:rgba(255,255,255,.025);
+  transition:color .1s,border-color .1s,background .1s;
+}
+.credit-link:hover{
+  color:var(--accent);
+  border-color:rgba(255,255,255,.35);
+  background:rgba(255,255,255,.06);
+}
+.credit-link-icon{
+  display:inline-flex;align-items:center;justify-content:center;
+  width:18px;height:18px;
+  border:1px solid rgba(255,255,255,.18);
+  color:rgba(255,255,255,.78);
+  font-size:10px;line-height:1;
+}
+.credit-pkg{
+  font-size:12px;color:rgba(255,255,255,.26);letter-spacing:1px;
+  text-transform:uppercase;
+}
+
+/* ── TAB BAR — hidden; sidebar drives navigation ────────────────────────────── */
+#tab-bar{display:none}
+
+/* ── SIDEBAR SUB-ITEMS (per-agent nav) ───────────────────────────────────────── */
+.sb-sub{display:none;border-left:2px solid var(--border2);margin-left:16px}
+.sb-sub.show{display:block}
+.sb-sub-item{
+  display:flex;align-items:center;gap:8px;
+  padding:8px 12px 8px 14px;cursor:pointer;
+  color:var(--dim);font-family:var(--pixel);font-size:16px;
+  border:none;background:none;width:100%;text-align:left;
+  transition:color .1s,background .1s;-webkit-font-smoothing:none;
+}
+.sb-sub-item:hover{color:var(--text);background:rgba(255,255,255,.03)}
+.sb-sub-item.active{color:var(--accent)}
+
+/* ── TOOLBAR ─────────────────────────────────────────────────────────────────── */
+#toolbar{
+  display:flex;align-items:center;gap:8px;
+  padding:0 16px;height:var(--toolbar-h);flex-shrink:0;
+  background:var(--surf);border-bottom:1px solid var(--border);
+}
+.btn{
+  padding:6px 14px;border:2px solid var(--border2);
+  background:var(--surf2);color:var(--text);
+  font-family:var(--pixel);font-size:16px;cursor:pointer;
+  transition:background .1s,border-color .1s;letter-spacing:.3px;
+  -webkit-font-smoothing:none;
+}
+.btn:hover{background:var(--surf3);border-color:rgba(255,255,255,.3)}
+.btn:active{background:#222}
+.btn.danger{border-color:rgba(255,51,51,.5);color:var(--danger)}
+.btn.danger:hover{background:rgba(255,51,51,.1);border-color:var(--danger)}
+.btn.success{border-color:rgba(51,204,51,.5);color:var(--success)}
+.btn.success:hover{background:rgba(51,204,51,.1);border-color:var(--success)}
+.btn.active-btn{border-color:rgba(255,255,255,.5);color:var(--accent)}
+#sel-info{font-size:17px;color:var(--muted);padding:0 6px}
+.spacer{flex:1}
+
+/* ── CONTENT / PANELS ────────────────────────────────────────────────────────── */
+#content{flex:1;overflow:hidden;position:relative}
+.panel{display:none;height:100%;overflow:hidden;flex-direction:column}
+.panel.active{display:flex}
+
+/* ── SESSIONS TABLE ──────────────────────────────────────────────────────────── */
+#tbl-wrap{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}
+#tbl-body{flex:1;display:flex;flex-direction:column}
+
+.tbl-hdr,.tbl-row{
+  display:grid;
+  grid-template-columns:40px 80px 1fr 80px 80px 150px 82px;
+  align-items:center;gap:0 10px;padding:0 16px;
+}
+.tbl-hdr{
+  height:36px;position:sticky;top:0;z-index:5;
+  background:var(--surf2);border-bottom:2px solid var(--border2);
+  font-size:14px;letter-spacing:1.5px;color:var(--dim);
+  text-transform:uppercase;flex-shrink:0;
+}
+.tbl-row{
+  height:var(--row-h);border-bottom:1px solid rgba(255,255,255,.04);
+  cursor:pointer;transition:background .08s;
+}
+.tbl-row:hover{background:rgba(255,255,255,.04)}
+.tbl-row.selected{background:rgba(255,255,255,.08)}
+.tbl-row input[type=checkbox]{
+  width:18px;height:18px;cursor:pointer;accent-color:#fff;
+  border:2px solid var(--dim);
+}
+.tbl-row .col-title{
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+  font-size:19px;color:var(--text);
+}
+.tbl-row .col-agent,.tbl-row .col-msgs,.tbl-row .col-size,.tbl-row .col-date{
+  font-size:16px;color:var(--muted);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+}
+.agent-badge{
+  font-size:13px;padding:2px 6px;
+  border:1px solid var(--border2);background:var(--surf3);color:var(--text);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+  letter-spacing:.3px;
+}
+.row-actions{
+  display:flex;gap:4px;justify-content:flex-end;opacity:0;transition:opacity .1s;
+}
+.tbl-row:hover .row-actions{opacity:1}
+.act-btn{
+  background:var(--surf3);border:1px solid var(--border);
+  color:var(--muted);cursor:pointer;padding:3px 7px;
+  font-family:var(--pixel);font-size:15px;line-height:1;
+  -webkit-font-smoothing:none;
+}
+.act-btn:hover{color:var(--accent);border-color:var(--border2);background:var(--surf2)}
+.act-btn.del:hover{color:var(--danger);border-color:rgba(255,51,51,.4)}
+
+/* ── GROUP HEADERS ───────────────────────────────────────────────────────────── */
+.group-hdr{
+  display:flex;align-items:center;gap:10px;
+  padding:8px 16px;
+  background:var(--surf2);
+  border-bottom:1px solid var(--border);
+  border-top:2px solid var(--border);
+  font-size:18px;cursor:pointer;user-select:none;flex-shrink:0;
+}
+.group-hdr .g-proj{color:var(--text);font-size:19px}
+.group-hdr .g-agent{font-size:14px;color:var(--muted)}
+.group-hdr .g-count{font-size:15px;color:var(--dim)}
+.group-hdr .g-chev{margin-left:auto;font-size:14px;transition:transform .15s;color:var(--muted)}
+.group-hdr.collapsed .g-chev{transform:rotate(-90deg)}
+
+/* ── PAGINATION ──────────────────────────────────────────────────────────────── */
+#pagination{
+  display:flex;align-items:center;justify-content:center;gap:12px;
+  padding:12px 16px;border-top:1px solid var(--border);
+  flex-shrink:0;font-size:17px;color:var(--muted);
+}
+#pagination .btn{font-size:16px}
+
+/* ── EMPTY / LOADING ─────────────────────────────────────────────────────────── */
+.empty{
+  display:flex;flex-direction:column;align-items:center;
+  justify-content:center;flex:1;gap:16px;
+  color:var(--muted);font-size:22px;
+}
+.empty .e-icon{font-size:40px;opacity:.25}
+.loading{
+  display:flex;flex-direction:column;align-items:center;
+  justify-content:center;flex:1;gap:16px;
+  color:var(--muted);font-size:20px;
+}
+@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
+.loading-dots::after{
+  content:'...';animation:blink 1.2s infinite;
+  display:inline-block;width:2em;text-align:left;
+}
+
+/* ── CONTEXT BANNER ──────────────────────────────────────────────────────────── */
+.ctx-banner{
+  width:100%;padding:8px 16px;font-size:15px;color:var(--muted);
+  border-bottom:1px solid var(--border);letter-spacing:.5px;flex-shrink:0;
+}
+.ctx-banner .ctx-label{color:var(--accent);letter-spacing:1px}
+
+/* ── USAGE PANEL ─────────────────────────────────────────────────────────────── */
+#usage-panel{overflow-y:auto;display:block;padding:0}
+
+.stat-grid{
+  display:grid;
+  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
+  gap:1px;background:var(--border);
+  border-bottom:2px solid var(--border2);
+}
+.stat-card{
+  background:var(--surf);padding:14px 18px;
+}
+.stat-card .s-label{
+  font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--dim);
+}
+.stat-card .s-value{
+  font-size:26px;font-weight:400;margin-top:4px;color:var(--accent);
+}
+.stat-card .s-sub{font-size:14px;color:var(--muted);margin-top:1px}
+
+.u-section{
+  border-bottom:1px solid var(--border);
+}
+.u-section h3{
+  font-size:14px;color:var(--muted);
+  text-transform:uppercase;letter-spacing:1px;
+  padding:10px 16px;border-bottom:1px solid var(--border);
+  position:sticky;top:0;background:var(--surf2);z-index:2;
+}
+.u-table{width:100%;border-collapse:collapse;font-size:18px}
+.u-table th{
+  text-align:left;padding:8px 16px;
+  border-bottom:1px solid var(--border);
+  font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:.8px;
+  position:sticky;top:39px;background:var(--surf);z-index:1;
+}
+.u-table td{padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.03)}
+.u-table tr:last-child td{border-bottom:none}
+.u-table tr:hover td{background:rgba(255,255,255,.03)}
+
+/* ── TRASH / BACKUPS ─────────────────────────────────────────────────────────── */
+.list-panel-wrap{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
+.meta-card{
+  background:var(--surf);border:1px solid var(--border);
+  padding:12px 16px;display:flex;align-items:center;gap:12px;
+}
+.meta-card:hover{border-color:var(--border2);background:var(--surf2)}
+.meta-body{flex:1;min-width:0}
+.meta-title{
+  font-size:19px;color:var(--text);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+}
+.meta-sub{font-size:15px;color:var(--muted);margin-top:3px}
+.meta-actions{display:flex;gap:8px;flex-shrink:0}
+
+/* ── TOAST ───────────────────────────────────────────────────────────────────── */
+#toast{
+  position:fixed;bottom:50px;left:50%;transform:translateX(-50%);
+  background:var(--surf2);border:2px solid var(--border2);
+  color:var(--text);padding:10px 20px;
+  font-family:var(--pixel);font-size:18px;z-index:9999;
+  opacity:0;transition:opacity .15s;pointer-events:none;
+  -webkit-font-smoothing:none;white-space:nowrap;
+}
+#toast.show{opacity:1}
+#toast.ok{border-color:rgba(51,204,51,.6);color:var(--success)}
+#toast.err{border-color:rgba(255,51,51,.6);color:var(--danger)}
+
+/* ── SCROLLBAR ───────────────────────────────────────────────────────────────── */
+::-webkit-scrollbar{width:8px;height:8px}
+::-webkit-scrollbar-track{background:var(--bg)}
+::-webkit-scrollbar-thumb{background:var(--surf3);border:1px solid var(--border)}
+::-webkit-scrollbar-thumb:hover{background:#222}
+`