aisessions 1.0.0 → 1.1.2

package/bin/cli.js

@@ -3,7 +3,7 @@ import { createServer } from '../src/server.js'
 import { parseArgs }    from 'node:util'
 import { exec }         from 'node:child_process'
 
-const VERSION = '1.0.0'
+const VERSION = '1.1.2'
 
 const { values } = parseArgs({
   options: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aisessions",
-  "version": "1.0.0",
+  "version": "1.1.2",
   "description": "Browse, manage and analyze your AI coding agent sessions — Claude Code, Codex, and more",
   "bin": {
     "aisessions": "bin/cli.js"
@@ -25,5 +25,8 @@
     "aisessions",
     "ccusage"
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "ccusage": "^20.0.6"
+  }
 }

package/src/router.js

@@ -3,6 +3,7 @@ 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'
+import { getSessionDetail } from './session/detail.js'
 
 function sendJson(res, data, status = 200) {
   res.writeHead(status, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' })
@@ -60,6 +61,9 @@ export async function router(req, res) {
     const sessions = await getAllSessions()
     return sendJson(res, sessions.map(({ date, ...rest }) => rest))
   }
+  if (method === 'GET' && pathname === '/api/session') {
+    return sendJson(res, await getSessionDetail(query.path || ''))
+  }
 
   // ── Usage (supports ?agent=claude) ───────────────────────────────────────
   if (method === 'GET' && pathname === '/api/usage') {

package/src/session/detail.js

@@ -0,0 +1,59 @@
+import { existsSync, readFileSync, statSync } from 'node:fs'
+import { parseJsonl, readLimited } from '../agents/utils.js'
+
+const MAX_DETAIL_BYTES = 2_000_000
+
+function cleanText(v) {
+  return String(v || '').replace(/\s+/g, ' ').trim()
+}
+
+function extractText(v) {
+  if (typeof v === 'string') return [v]
+  if (Array.isArray(v)) return v.flatMap(extractText)
+  if (v && typeof v === 'object') {
+    const out = []
+    if (typeof v.text === 'string') out.push(v.text)
+    if (v.content) out.push(...extractText(v.content))
+    if (v.message) out.push(...extractText(v.message))
+    if (v.parts) out.push(...extractText(v.parts))
+    return out
+  }
+  return []
+}
+
+function roleOf(obj) {
+  const role = cleanText(obj?.role || obj?.message?.role || obj?.payload?.role).toLowerCase()
+  const type = cleanText(obj?.type || obj?.item_type).toLowerCase()
+  if (role) return role
+  if (type.includes('user')) return 'user'
+  if (type.includes('assistant') || type.includes('model')) return 'assistant'
+  if (type.includes('system')) return 'system'
+  return type || 'entry'
+}
+
+function messagesFromObjs(objs) {
+  return objs.map((obj, idx) => {
+    const text = extractText(obj).map(cleanText).filter(Boolean).join('\n\n')
+    return {
+      index: idx + 1,
+      role: roleOf(obj),
+      text: text || JSON.stringify(obj).slice(0, 4000),
+    }
+  }).filter(m => m.text)
+}
+
+export async function getSessionDetail(path) {
+  if (!path || !existsSync(path)) return { ok: false, error: 'session file not found' }
+  const st = statSync(path)
+  if (!st.isFile()) return { ok: false, error: 'session path is not a file' }
+  const text = readLimited(path, MAX_DETAIL_BYTES)
+  const objs = parseJsonl(text)
+  return {
+    ok: true,
+    path,
+    size: st.size,
+    truncated: st.size > MAX_DETAIL_BYTES,
+    messages: messagesFromObjs(objs),
+    raw: text,
+  }
+}

package/src/storage/backup.js

@@ -1,12 +1,37 @@
 import { homedir }   from 'node:os'
 import { existsSync, mkdirSync, readdirSync, writeFileSync, readFileSync, statSync, rmSync, cpSync } from 'node:fs'
-import { join, basename } from 'node:path'
+import { dirname, join, basename } from 'node:path'
 
 const HOME       = homedir()
 const BACKUP_DIR = join(HOME, '.aisessions', 'backups')
 
 function ensureBackup() { mkdirSync(BACKUP_DIR, { recursive: true }) }
 
+function safePart(v, fallback = 'item') {
+  return String(v || fallback).replace(/[^a-z0-9._-]+/gi, '_').replace(/^_+|_+$/g, '').slice(0, 80) || fallback
+}
+
+function findMetaFiles(dir) {
+  const out = []
+  try {
+    for (const e of readdirSync(dir, { withFileTypes: true })) {
+      const full = join(dir, e.name)
+      if (e.isDirectory()) out.push(...findMetaFiles(full))
+      else if (e.name.endsWith('.meta.json') || e.name === 'meta.json') out.push(full)
+    }
+  } catch {}
+  return out
+}
+
+function removeStoredItem(metaPath, payloadPath) {
+  if (basename(metaPath) === 'meta.json') {
+    rmSync(dirname(metaPath), { recursive: true, force: true })
+    return
+  }
+  if (payloadPath && existsSync(payloadPath)) rmSync(payloadPath, { recursive: true, force: true })
+  if (existsSync(metaPath)) rmSync(metaPath, { force: true })
+}
+
 function normaliseItems(raw) {
   return (Array.isArray(raw) ? raw : [raw]).map(i =>
     typeof i === 'string' ? { path: i } : i
@@ -17,9 +42,7 @@ 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)
+    for (const mp of findMetaFiles(BACKUP_DIR)) {
       try {
         const meta = JSON.parse(readFileSync(mp, 'utf8'))
         if (agent && agent !== 'all' && meta.agent && meta.agent !== agent) continue
@@ -39,10 +62,13 @@ export async function createBackup(rawItems, note = '') {
       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 agentId    = safePart(item.agent || 'unknown')
+      const backupName = ts + '_' + safePart(item.title || name)
+      const itemDir    = join(BACKUP_DIR, agentId, backupName)
+      const backupPath = join(itemDir, 'payload')
+      const metaPath   = join(itemDir, 'meta.json')
       const st         = statSync(p)
+      mkdirSync(itemDir, { recursive: true })
       if (st.isDirectory()) cpSync(p, backupPath, { recursive: true })
       else cpSync(p, backupPath)
       const meta = {
@@ -72,6 +98,7 @@ export async function restoreBackup(metaPath) {
       ? meta.originalPath.replace(/(\.[^.]+)?$/, '_restored_' + Date.now() + '$1')
       : meta.originalPath
     const st = statSync(meta.backupPath)
+    mkdirSync(dirname(dest), { recursive: true })
     if (st.isDirectory()) cpSync(meta.backupPath, dest, { recursive: true })
     else cpSync(meta.backupPath, dest)
     return { ok: true, restoredTo: dest }
@@ -84,8 +111,7 @@ export async function deleteBackup(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 })
+      removeStoredItem(mp, backupPath)
       results.push({ metaPath: mp, ok: true })
     } catch (e) { results.push({ metaPath: mp, ok: false, error: e.message }) }
   }

package/src/storage/trash.js

@@ -1,12 +1,37 @@
 import { homedir }   from 'node:os'
 import { existsSync, mkdirSync, readdirSync, writeFileSync, readFileSync, statSync, rmSync, cpSync } from 'node:fs'
-import { join } from 'node:path'
+import { basename, dirname, join } from 'node:path'
 
 const HOME      = homedir()
 const TRASH_DIR = join(HOME, '.aisessions', 'trash')
 
 function ensureTrash() { mkdirSync(TRASH_DIR, { recursive: true }) }
 
+function safePart(v, fallback = 'item') {
+  return String(v || fallback).replace(/[^a-z0-9._-]+/gi, '_').replace(/^_+|_+$/g, '').slice(0, 80) || fallback
+}
+
+function findMetaFiles(dir) {
+  const out = []
+  try {
+    for (const e of readdirSync(dir, { withFileTypes: true })) {
+      const full = join(dir, e.name)
+      if (e.isDirectory()) out.push(...findMetaFiles(full))
+      else if (e.name.endsWith('.meta.json') || e.name === 'meta.json') out.push(full)
+    }
+  } catch {}
+  return out
+}
+
+function removeStoredItem(metaPath, payloadPath) {
+  if (basename(metaPath) === 'meta.json') {
+    rmSync(dirname(metaPath), { recursive: true, force: true })
+    return
+  }
+  if (payloadPath && existsSync(payloadPath)) rmSync(payloadPath, { recursive: true, force: true })
+  if (existsSync(metaPath)) rmSync(metaPath, { force: true })
+}
+
 // items: array of { path, agent?, agentLabel?, project?, title? }
 //        OR plain strings (backwards compat)
 function normaliseItems(raw) {
@@ -19,9 +44,7 @@ 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)
+    for (const mp of findMetaFiles(TRASH_DIR)) {
       try {
         const meta = JSON.parse(readFileSync(mp, 'utf8'))
         if (agent && agent !== 'all' && meta.agent && meta.agent !== agent) continue
@@ -40,10 +63,13 @@ export async function moveToTrash(rawItems) {
     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 agentId   = safePart(item.agent || 'unknown')
+      const trashName = ts + '_' + safePart(item.title || p.split('/').pop())
+      const itemDir   = join(TRASH_DIR, agentId, trashName)
+      const trashPath = join(itemDir, 'payload')
+      const metaPath  = join(itemDir, 'meta.json')
       const st        = statSync(p)
+      mkdirSync(itemDir, { recursive: true })
       if (st.isDirectory()) cpSync(p, trashPath, { recursive: true })
       else cpSync(p, trashPath)
       rmSync(p, { recursive: true, force: true })
@@ -70,10 +96,10 @@ export async function restoreFromTrash(metaPath) {
     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)
+    mkdirSync(dirname(meta.originalPath), { recursive: true })
     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 })
+    removeStoredItem(metaPath, meta.trashPath)
     return { ok: true, restoredTo: meta.originalPath }
   } catch (e) { return { ok: false, error: e.message } }
 }
@@ -84,8 +110,7 @@ export async function purgeTrash(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 })
+      removeStoredItem(mp, trashPath)
       results.push({ metaPath: mp, ok: true })
     } catch (e) { results.push({ metaPath: mp, ok: false, error: e.message }) }
   }

package/src/ui/css.js

@@ -15,6 +15,7 @@ export const PAGE_CSS = `
   --muted:#666;
   --dim:#3a3a3a;
   --accent:#ffffff;
+  --logo-shadow:0 0 10px rgba(255,255,255,.25);
   --danger:#ff3333;
   --success:#33cc33;
   --warn:#ccaa00;
@@ -28,6 +29,24 @@ export const PAGE_CSS = `
   --logo:  'Press Start 2P', monospace;
 }
 
+html[data-theme="light"]{
+  --bg:#f4f1e8;
+  --sb:#ebe6d8;
+  --surf:#f8f5ec;
+  --surf2:#ede8dc;
+  --surf3:#e1dacb;
+  --border:rgba(24,24,20,0.12);
+  --border2:rgba(24,24,20,0.24);
+  --text:#181814;
+  --muted:#6f695d;
+  --dim:#a49c8d;
+  --accent:#11110f;
+  --logo-shadow:none;
+  --danger:#b42323;
+  --success:#197a33;
+  --warn:#8a6900;
+}
+
 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}
@@ -66,7 +85,7 @@ html,body{height:100%;background:var(--bg);color:var(--text);overflow:hidden;
 #logo{
   font-family:var(--logo);font-size:11px;
   color:var(--accent);letter-spacing:1px;
-  text-shadow:0 0 10px rgba(255,255,255,.25);
+  text-shadow:var(--logo-shadow);
   white-space:nowrap;
 }
 #hdr-sub{font-size:16px;color:var(--muted);letter-spacing:.5px}
@@ -79,6 +98,23 @@ html,body{height:100%;background:var(--bg);color:var(--text);overflow:hidden;
 }
 #search:focus{border-color:var(--border2);background:var(--surf2)}
 #search::placeholder{color:var(--dim)}
+.theme-toggle{
+  width:74px;
+  height:39px;
+  border:2px solid var(--border);
+  background:var(--surf);
+  color:var(--muted);
+  font-family:var(--pixel);font-size:16px;
+  letter-spacing:.8px;
+  cursor:pointer;
+  -webkit-font-smoothing:none;
+}
+.theme-toggle:hover,.theme-toggle:focus{
+  color:var(--accent);
+  border-color:var(--border2);
+  background:var(--surf2);
+  outline:none;
+}
 
 /* ── SIDEBAR ─────────────────────────────────────────────────────────────────── */
 .sb-section{padding:10px 0}
@@ -171,6 +207,26 @@ html,body{height:100%;background:var(--bg);color:var(--text);overflow:hidden;
   font-size:12px;color:rgba(255,255,255,.26);letter-spacing:1px;
   text-transform:uppercase;
 }
+html[data-theme="light"] .credit-kicker{color:rgba(24,24,20,.42)}
+html[data-theme="light"] .credit-frame{
+  border-color:rgba(24,24,20,.18);
+  background:rgba(24,24,20,.025);
+}
+html[data-theme="light"] .credit-frame::before,
+html[data-theme="light"] .credit-frame::after{background:var(--accent)}
+html[data-theme="light"] .credit-link{
+  color:rgba(24,24,20,.58);
+  background:rgba(24,24,20,.02);
+}
+html[data-theme="light"] .credit-link:hover{
+  color:var(--accent);
+  background:rgba(24,24,20,.04);
+}
+html[data-theme="light"] .credit-link-icon{
+  border-color:rgba(24,24,20,.18);
+  color:rgba(24,24,20,.78);
+}
+html[data-theme="light"] .credit-pkg{color:rgba(24,24,20,.32)}
 
 /* ── TAB BAR — hidden; sidebar drives navigation ────────────────────────────── */
 #tab-bar{display:none}
@@ -222,7 +278,7 @@ html,body{height:100%;background:var(--bg);color:var(--text);overflow:hidden;
 
 .tbl-hdr,.tbl-row{
   display:grid;
-  grid-template-columns:40px 80px 1fr 80px 80px 150px 82px;
+  grid-template-columns:40px 80px 1fr 80px 80px 150px 126px;
   align-items:center;gap:0 10px;padding:0 16px;
 }
 .tbl-hdr{
@@ -384,6 +440,52 @@ html,body{height:100%;background:var(--bg);color:var(--text);overflow:hidden;
 #toast.ok{border-color:rgba(51,204,51,.6);color:var(--success)}
 #toast.err{border-color:rgba(255,51,51,.6);color:var(--danger)}
 
+/* ── MODAL / SESSION VIEWER ────────────────────────────────────────────────── */
+.modal{
+  position:fixed;inset:0;z-index:100;
+  display:flex;align-items:center;justify-content:center;
+  background:rgba(0,0,0,.72);
+  padding:28px;
+}
+.modal[hidden]{display:none}
+.modal-box{
+  width:min(980px,calc(100vw - 56px));
+  height:min(760px,calc(100vh - 56px));
+  display:flex;flex-direction:column;
+  border:2px solid var(--border2);
+  background:var(--surf);
+}
+.modal-head{
+  display:flex;align-items:center;justify-content:space-between;gap:16px;
+  padding:14px 16px;border-bottom:1px solid var(--border);
+  flex-shrink:0;
+}
+.modal-title{font-family:var(--logo);font-size:10px;color:var(--accent);letter-spacing:1px}
+.modal-sub{font-size:15px;color:var(--muted);margin-top:5px;word-break:break-all}
+.modal-body{flex:1;overflow:auto;padding:14px;background:var(--bg)}
+.chat-msg{
+  border:1px solid var(--border);
+  background:var(--surf);
+  margin-bottom:10px;
+}
+.chat-role{
+  padding:7px 10px;border-bottom:1px solid var(--border);
+  color:var(--muted);font-size:14px;letter-spacing:1px;text-transform:uppercase;
+}
+.chat-text{
+  padding:10px;
+  white-space:pre-wrap;
+  word-break:break-word;
+  font-size:17px;
+  line-height:1.35;
+}
+.chat-raw{
+  white-space:pre-wrap;
+  word-break:break-word;
+  font-size:15px;
+  line-height:1.35;
+}
+
 /* ── SCROLLBAR ───────────────────────────────────────────────────────────────── */
 ::-webkit-scrollbar{width:8px;height:8px}
 ::-webkit-scrollbar-track{background:var(--bg)}

package/src/ui/js.js

@@ -14,6 +14,7 @@ var collapsed   = new Set();
 var PAGE        = 0;
 var PER_PAGE    = 100;
 var usageCache  = {};   // keyed by agentFilter
+var theme       = 'dark';
 
 // ── utils ─────────────────────────────────────────────────────────────────────
 function $(id) { return document.getElementById(id); }
@@ -64,14 +65,17 @@ document.addEventListener('click', function (e) {
     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 === 'agent-tab')         { switchAgentTab(ag, nav);                 return; }
     if (a === 'switch-tab-global') { setAgentFilter('all'); switchTab(nav);   return; }
+    if (a === 'toggle-theme')      { toggleTheme();                           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; }
+    if (a === 'view-session')   { viewSession(p);       return; }
+    if (a === 'close-modal')    { closeModal();         return; }
     return;
   }
   var row = e.target.closest('.tbl-row');
@@ -95,8 +99,34 @@ document.addEventListener('click', function (e) {
   if (gh) { var k = gh.dataset.gkey; collapsed.has(k) ? collapsed.delete(k) : collapsed.add(k); renderSessions(); }
 });
 
+// ── THEME ─────────────────────────────────────────────────────────────────────
+function getSavedTheme() {
+  try { return localStorage.getItem('aisessions-theme') || 'dark'; }
+  catch { return 'dark'; }
+}
+
+function saveTheme(next) {
+  try { localStorage.setItem('aisessions-theme', next); } catch {}
+}
+
+function applyTheme(next) {
+  theme = next === 'light' ? 'light' : 'dark';
+  document.documentElement.dataset.theme = theme;
+  var btn = $('theme-toggle');
+  if (btn) {
+    btn.textContent = theme === 'light' ? 'DARK' : 'LIGHT';
+    btn.title = 'Switch to ' + (theme === 'light' ? 'dark' : 'light') + ' mode';
+  }
+}
+
+function toggleTheme() {
+  applyTheme(theme === 'light' ? 'dark' : 'light');
+  saveTheme(theme);
+}
+
 // ── INIT ──────────────────────────────────────────────────────────────────────
 async function init() {
+  applyTheme(getSavedTheme());
   var tblBody = $('tbl-body');
   if (!tblBody) return;
   tblBody.innerHTML = '<div class="loading"><span class="loading-dots">LOADING SESSIONS</span></div>';
@@ -128,10 +158,10 @@ function buildSidebar(agents, sessions) {
         '<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>' +
+        '<button class="sb-sub-item" data-action="agent-tab" data-agent="' + aid + '" data-nav="sessions">[=] SESSIONS</button>' +
+        '<button class="sb-sub-item" data-action="agent-tab" data-agent="' + aid + '" data-nav="usage">[$] USAGE</button>' +
+        '<button class="sb-sub-item" data-action="agent-tab" data-agent="' + aid + '" data-nav="trash">[T] TRASH</button>' +
+        '<button class="sb-sub-item" data-action="agent-tab" data-agent="' + aid + '" data-nav="backups">[B] BACKUPS</button>' +
       '</div>';
   }).join('');
 }
@@ -159,6 +189,18 @@ function setAgentFilter(id) {
   switchTab('sessions');
 }
 
+function switchAgentTab(id, tab) {
+  if (id && id !== agentFilter) {
+    agentFilter = id; PAGE = 0;
+    setSidebarActive(id);
+    document.querySelectorAll('.sb-sub').forEach(function(el) {
+      el.classList.toggle('show', el.id === 'sub-' + id);
+    });
+    updateContextLabel();
+  }
+  switchTab(tab || 'sessions');
+}
+
 // ── CONTEXT LABEL (shows current filter scope in each panel) ──────────────────
 function updateContextLabel() {
   var label = agentFilter === 'all' ? 'ALL AGENTS' : agentLabel(agentFilter);
@@ -256,6 +298,7 @@ function rowHtml(s) {
     '<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="view-session" data-path="' + p + '" title="View chat">VIEW</button>' +
       '<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>';
@@ -281,12 +324,15 @@ wireBtn('btn-trash', async function() {
   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');
+  if (ok.length) switchTab('trash');
 });
 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');
+  var ok = res.filter(function(r) { return r.ok; }).length;
+  toast(ok + ' BACKUP(S) CREATED', 'ok');
+  if (ok) switchTab('backups');
 });
 
 // Enrich paths with session metadata for storage
@@ -304,12 +350,13 @@ function switchTab(tab) {
   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);
+    el.classList.toggle('active', el.dataset.nav === tab && el.dataset.agent === agentFilter);
   });
   // 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 === 'sessions') applyFilter();
   if (tab === 'usage')   loadUsage(false);
   if (tab === 'trash')   loadTrash(false);
   if (tab === 'backups') loadBackups(false);
@@ -325,17 +372,55 @@ async function trashOne(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');
+    applyFilter(); toast('MOVED TO TRASH', 'ok'); switchTab('trash');
   } 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');
+  if (res[0] && res[0].ok) { toast('BACKUP CREATED', 'ok'); switchTab('backups'); }
   else toast('ERROR: ' + ((res[0] && res[0].error) || '?'), 'err');
 }
 
+// ── SESSION VIEWER ───────────────────────────────────────────────────────────
+function closeModal() {
+  var m = $('modal');
+  if (m) m.hidden = true;
+}
+
+async function viewSession(path) {
+  if (!path) return;
+  var modal = $('modal'), title = $('modal-title'), sub = $('modal-sub'), body = $('modal-body');
+  if (!modal || !body) return;
+  modal.hidden = false;
+  if (title) title.textContent = 'LOADING SESSION';
+  if (sub) sub.textContent = path;
+  body.innerHTML = '<div class="loading"><span class="loading-dots">LOADING CHAT</span></div>';
+  try {
+    var data = await fetch('/api/session?path=' + encodeURIComponent(path)).then(function(r) { return r.json(); });
+    if (!data.ok) {
+      body.innerHTML = '<div class="empty"><div class="e-icon">[!]</div><div>' + esc(data.error || 'Could not load session') + '</div></div>';
+      return;
+    }
+    if (title) title.textContent = 'SESSION HISTORY';
+    if (sub) sub.textContent = data.path + (data.truncated ? ' / preview truncated' : '');
+    var messages = data.messages || [];
+    if (messages.length) {
+      body.innerHTML = messages.slice(0, 200).map(function(m) {
+        return '<div class="chat-msg">' +
+          '<div class="chat-role">' + esc(m.index + ' / ' + m.role) + '</div>' +
+          '<div class="chat-text">' + esc(m.text) + '</div>' +
+        '</div>';
+      }).join('') + (messages.length > 200 ? '<div class="empty"><div>Showing first 200 entries</div></div>' : '');
+    } else {
+      body.innerHTML = '<pre class="chat-raw">' + esc(data.raw || '') + '</pre>';
+    }
+  } catch (e) {
+    body.innerHTML = '<div class="empty"><div class="e-icon">[!]</div><div>' + esc(e.message) + '</div></div>';
+  }
+}
+
 // ── USAGE TAB ─────────────────────────────────────────────────────────────────
 async function loadUsage(force) {
   var key   = agentFilter;
@@ -468,7 +553,7 @@ async function loadTrash(force) {
 
 async function restoreTrash(mp) {
   var res = await post('/api/trash/restore', { metaPath: mp });
-  if (res.ok) { toast('RESTORED TO ' + res.restoredTo, 'ok'); loadTrash(true); }
+  if (res.ok) { toast('RESTORED TO ' + res.restoredTo, 'ok'); loadTrash(true); reloadSessions(); }
   else toast('ERROR: ' + (res.error || '?'), 'err');
 }
 async function purgeTrash(mp) {
@@ -511,7 +596,7 @@ async function loadBackups(force) {
 
 async function restoreBackup(mp) {
   var res = await post('/api/backup/restore', { metaPath: mp });
-  if (res.ok) toast('RESTORED TO ' + res.restoredTo, 'ok');
+  if (res.ok) { toast('RESTORED TO ' + res.restoredTo, 'ok'); reloadSessions(); }
   else toast('ERROR: ' + (res.error || '?'), 'err');
 }
 async function deleteBackup(mp) {
@@ -521,6 +606,14 @@ async function deleteBackup(mp) {
   else toast('ERROR: ' + ((res[0] && res[0].error) || '?'), 'err');
 }
 
+async function reloadSessions() {
+  try {
+    var sessions = await fetch('/api/sessions').then(function(r) { return r.json(); });
+    ALL = sessions;
+    applyFilter();
+  } catch {}
+}
+
 // ── BOOT ──────────────────────────────────────────────────────────────────────
 init().catch(function(e) { console.error('[AM] fatal:', e); });
 

package/src/ui/render.js

@@ -22,6 +22,7 @@ export function renderPage() {
     <span id="hdr-sub">// AI SESSION MANAGER</span>
     <div id="hdr-right">
       <input id="search" type="search" placeholder="SEARCH SESSIONS...">
+      <button id="theme-toggle" class="theme-toggle" data-action="toggle-theme" type="button" title="Toggle light/dark mode">LIGHT</button>
     </div>
   </header>
 
@@ -64,7 +65,7 @@ export function renderPage() {
             <span>X.com</span>
           </a>
         </div>
-        <div class="credit-pkg">aisessions v1.0</div>
+        <div class="credit-pkg">aisessions v1.1.2</div>
       </div>
     </nav>
 
@@ -124,7 +125,7 @@ export function renderPage() {
 
   <!-- FOOTER -->
   <footer id="foot">
-    <span>AISESSIONS v1.0</span>
+    <span>AISESSIONS v1.1.2</span>
     <span>&nbsp;|&nbsp;</span>
     <span id="foot-info">LOADING...</span>
   </footer>
@@ -132,6 +133,18 @@ export function renderPage() {
 </div><!-- /shell -->
 
 <div id="toast"></div>
+<div id="modal" class="modal" hidden>
+  <div class="modal-box">
+    <div class="modal-head">
+      <div>
+        <div id="modal-title" class="modal-title">SESSION</div>
+        <div id="modal-sub" class="modal-sub"></div>
+      </div>
+      <button class="btn" data-action="close-modal">CLOSE</button>
+    </div>
+    <div id="modal-body" class="modal-body"></div>
+  </div>
+</div>
 <script>${PAGE_JS}</script>
 </body>
 </html>`

package/src/usage/index.js

@@ -1,7 +1,21 @@
 import { spawnSync } from 'node:child_process'
+import { createRequire } from 'node:module'
+
+const require = createRequire(import.meta.url)
+
+function ccusageCliPath() {
+  try {
+    return require.resolve('ccusage/dist/cli.js')
+  } catch {
+    return null
+  }
+}
 
 function run(args) {
-  const r = spawnSync('npx', ['--yes', 'ccusage@latest', ...args, '--json'], {
+  const cli = ccusageCliPath()
+  if (!cli) return null
+
+  const r = spawnSync(process.execPath, [cli, ...args, '--json'], {
     timeout: 30_000, maxBuffer: 16 * 1024 * 1024, encoding: 'utf8',
     env: { ...process.env, NO_COLOR: '1' },
   })
@@ -9,17 +23,6 @@ function run(args) {
   try { return JSON.parse(r.stdout) } catch { return null }
 }
 
-function runLocal(args) {
-  try {
-    const r = spawnSync('ccusage', [...args, '--json'], {
-      timeout: 30_000, maxBuffer: 16 * 1024 * 1024, encoding: 'utf8',
-      env: { ...process.env, NO_COLOR: '1' },
-    })
-    if (r.status !== 0 || !r.stdout) return null
-    return JSON.parse(r.stdout)
-  } catch { return null }
-}
-
 // Normalise the two very different per-agent response shapes into one schema.
 function normalizeEntries(entries, agentId) {
   return (entries || []).map(d => {
@@ -87,22 +90,22 @@ export async function getUsageData({ since, until, agent } = {}) {
 
   let raw
   if (agent && agent !== 'all') {
-    // Per-agent command: npx ccusage claude daily --json
+    // Per-agent command shape: ccusage claude daily --json
     const agentArgs = [agent, 'daily', ...dateArgs]
-    raw = runLocal(agentArgs) ?? run(agentArgs)
+    raw = run(agentArgs)
     if (!raw) {
       // Fallback: run global and filter by metadata.agents
       const globalArgs = ['daily', ...dateArgs]
-      const g = runLocal(globalArgs) ?? run(globalArgs)
+      const g = run(globalArgs)
       if (g && Array.isArray(g.daily)) {
         raw = { daily: g.daily.filter(d => (d.metadata?.agents || []).includes(agent)) }
       }
     }
   } else {
-    raw = runLocal(['daily', ...dateArgs]) ?? run(['daily', ...dateArgs])
+    raw = run(['daily', ...dateArgs])
   }
 
-  if (!raw) return { available: false, error: 'ccusage not found — run: npm i -g ccusage' }
+  if (!raw) return { available: false, error: 'Bundled ccusage is unavailable or could not read local usage data' }
 
   const entries = normalizeEntries(raw.daily || (Array.isArray(raw) ? raw : []), agent || 'all')
   entries.sort((a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0))