aisessions 1.1.0 → 1.1.4

package/bin/cli.js

@@ -2,8 +2,13 @@
 import { createServer } from '../src/server.js'
 import { parseArgs }    from 'node:util'
 import { exec }         from 'node:child_process'
+import pc               from 'picocolors'
 
-const VERSION = '1.1.0'
+const VERSION = '1.1.4'
+const DEV_HANDLE = 's41r4j'
+const GITHUB_URL = 'https://github.com/s41r4j/aisessions'
+const ISSUE_URL = 'https://github.com/s41r4j/aisessions/issues'
+const X_URL = 'https://x.com/s41r4j'
 
 const { values } = parseArgs({
   options: {
@@ -44,9 +49,49 @@ if (values.help) {
 const PORT = parseInt(values.port, 10) || 7878
 const server = createServer()
 
+function printBanner(url) {
+  const art = [
+    '        _                           _                 ',
+    '  __ _ (_) ___  ___  ___  ___  ___(_) ___  _ __  ___ ',
+    ' / _` || |/ __|/ _ \\/ __|/ _ \\/ __| |/ _ \\| `_ \\/ __|',
+    '| (_| || |\\__ \\  __/\\__ \\  __/\\__ \\ | (_) | | | \\__ \\',
+    ' \\__,_||_||___/\\___||___/\\___||___/_|\\___/|_| |_|___/',
+  ]
+
+  console.log('')
+  art.forEach(line => console.log(pc.cyan(line)))
+  console.log('')
+  console.log(`${pc.bold('  aisessions')} ${pc.dim('v' + VERSION)} ${pc.green('ready')}`)
+  console.log(`  ${pc.dim('Local UI:')}      ${pc.underline(url)}`)
+  console.log(`  ${pc.dim('Data store:')}    ~/.aisessions/trash  ~/.aisessions/backups`)
+  console.log(`  ${pc.dim('Developer:')}     @${DEV_HANDLE}`)
+  console.log(`  ${pc.dim('GitHub:')}        ${GITHUB_URL}`)
+  console.log(`  ${pc.dim('X:')}             ${X_URL}`)
+  console.log(`  ${pc.dim('Report issue:')}  ${ISSUE_URL}`)
+  console.log('')
+}
+
+function startStatusLine(url) {
+  if (!process.stdout.isTTY) return
+  const frames = ['-', '\\\\', '|', '/']
+  let i = 0
+  const timer = setInterval(() => {
+    const frame = frames[i++ % frames.length]
+    process.stdout.write(`\\r  ${pc.cyan(frame)} ${pc.dim('running at')} ${url} ${pc.dim('Ctrl+C to stop')}   `)
+  }, 1200)
+  process.once('SIGINT', () => {
+    clearInterval(timer)
+    process.stdout.clearLine?.(0)
+    process.stdout.cursorTo?.(0)
+    console.log(pc.dim('  stopped aisessions'))
+    process.exit(0)
+  })
+}
+
 server.listen(PORT, '127.0.0.1', () => {
   const url = `http://127.0.0.1:${PORT}`
-  console.log(`\n  aisessions  ready ->  ${url}\n`)
+  printBanner(url)
+  startStatusLine(url)
 
   if (!values['no-open']) {
     const cmd = process.platform === 'darwin' ? `open "${url}"` :

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aisessions",
-  "version": "1.1.0",
+  "version": "1.1.4",
   "description": "Browse, manage and analyze your AI coding agent sessions — Claude Code, Codex, and more",
   "bin": {
     "aisessions": "bin/cli.js"
@@ -27,6 +27,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "ccusage": "^20.0.6"
+    "ccusage": "^20.0.6",
+    "picocolors": "^1.1.1"
   }
 }

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

@@ -278,7 +278,7 @@ html[data-theme="light"] .credit-pkg{color:rgba(24,24,20,.32)}
 
 .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{
@@ -373,7 +373,7 @@ html[data-theme="light"] .credit-pkg{color:rgba(24,24,20,.32)}
 .ctx-banner .ctx-label{color:var(--accent);letter-spacing:1px}
 
 /* ── USAGE PANEL ─────────────────────────────────────────────────────────────── */
-#usage-panel{overflow-y:auto;display:block;padding:0}
+#usage-panel{overflow-y:auto;padding:0}
 
 .stat-grid{
   display:grid;
@@ -440,6 +440,52 @@ html[data-theme="light"] .credit-pkg{color:rgba(24,24,20,.32)}
 #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

@@ -65,7 +65,7 @@ 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; }
@@ -74,6 +74,13 @@ document.addEventListener('click', function (e) {
     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; }
+    if (a === 'select-all')     { selectAllSessions();  return; }
+    if (a === 'select-none')    { selectNoSessions();   return; }
+    if (a === 'toggle-group')   { toggleGrouping();     return; }
+    if (a === 'trash-selected') { trashSelected();      return; }
+    if (a === 'backup-selected'){ backupSelected();     return; }
     return;
   }
   var row = e.target.closest('.tbl-row');
@@ -156,10 +163,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('');
 }
@@ -187,6 +194,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);
@@ -284,38 +303,67 @@ 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>';
 }
 
 // ── TOOLBAR ───────────────────────────────────────────────────────────────────
-function wireBtn(id, fn) { var el = $(id); if (el) el.addEventListener('click', fn); }
+function selectAllSessions() {
+  filtered.forEach(function(s) { selected.add(s.path); });
+  renderSessions();
+}
+
+function selectNoSessions() {
+  selected.clear();
+  renderSessions();
+}
 
-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() {
+function toggleGrouping() {
   grouped = !grouped;
   var el = $('btn-group');
   if (el) { el.textContent = grouped ? 'FLAT VIEW' : 'GROUP VIEW'; el.classList.toggle('active-btn', !grouped); }
-  PAGE = 0; renderSessions();
-});
+  PAGE = 0;
+  renderSessions();
+}
 
-wireBtn('btn-trash', async function() {
+async function trashSelected() {
   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 res;
+  try { res = await post('/api/trash/move', { items: items }); }
+  catch (e) { toast('TRASH FAILED: ' + e.message, 'err', 5000); return; }
+  if (!Array.isArray(res)) { toast('TRASH FAILED: INVALID SERVER RESPONSE', 'err', 5000); return; }
   var ok    = res.filter(function(r) { return r.ok; }).map(function(r) { return r.path; });
+  var fail  = res.filter(function(r) { return !r.ok; });
   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() {
+  applyFilter();
+  if (ok.length) {
+    toast(ok.length + ' MOVED TO TRASH' + (fail.length ? ' / ' + fail.length + ' FAILED' : ''), fail.length ? 'err' : 'ok');
+    switchTab('trash');
+  } else {
+    toast('TRASH FAILED: ' + ((fail[0] && fail[0].error) || 'NO ITEMS MOVED'), 'err', 5000);
+  }
+}
+
+async function backupSelected() {
   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 res;
+  try { res = await post('/api/backup/create', { items: items, note: '' }); }
+  catch (e) { toast('BACKUP FAILED: ' + e.message, 'err', 5000); return; }
+  if (!Array.isArray(res)) { toast('BACKUP FAILED: INVALID SERVER RESPONSE', 'err', 5000); return; }
+  var ok = res.filter(function(r) { return r.ok; });
+  var fail = res.filter(function(r) { return !r.ok; });
+  if (ok.length) {
+    toast(ok.length + ' BACKUP(S) CREATED' + (fail.length ? ' / ' + fail.length + ' FAILED' : ''), fail.length ? 'err' : 'ok');
+    switchTab('backups');
+  } else {
+    toast('BACKUP FAILED: ' + ((fail[0] && fail[0].error) || 'NO BACKUPS CREATED'), 'err', 5000);
+  }
+}
 
 // Enrich paths with session metadata for storage
 function buildItems(paths) {
@@ -332,12 +380,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);
@@ -350,20 +399,64 @@ document.querySelectorAll('.tab').forEach(function(t) {
 async function trashOne(path) {
   if (!path || !confirm('Move to trash?')) return;
   var items = buildItems([path]);
-  var res   = await post('/api/trash/move', { items: items });
+  var res;
+  try { res = await post('/api/trash/move', { items: items }); }
+  catch (e) { toast('ERROR: ' + e.message, 'err', 5000); return; }
+  if (!Array.isArray(res)) { toast('ERROR: INVALID SERVER RESPONSE', 'err', 5000); return; }
   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');
+  var res;
+  try { res = await post('/api/backup/create', { items: items, note: '' }); }
+  catch (e) { toast('ERROR: ' + e.message, 'err', 5000); return; }
+  if (!Array.isArray(res)) { toast('ERROR: INVALID SERVER RESPONSE', 'err', 5000); return; }
+  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;
@@ -496,7 +589,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) {
@@ -539,7 +632,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) {
@@ -549,6 +642,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

@@ -65,7 +65,7 @@ export function renderPage() {
             <span>X.com</span>
           </a>
         </div>
-        <div class="credit-pkg">aisessions v1.1</div>
+        <div class="credit-pkg">aisessions v1.1.4</div>
       </div>
     </nav>
 
@@ -86,14 +86,14 @@ export function renderPage() {
         <!-- ── 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>
+            <button class="btn" id="btn-sel-all" data-action="select-all">SELECT ALL</button>
+            <button class="btn" id="btn-sel-none" data-action="select-none">DESELECT</button>
+            <button class="btn" id="btn-group" data-action="toggle-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>
+            <button class="btn success" id="btn-backup" data-action="backup-selected">BACKUP SEL</button>
+            <button class="btn danger"  id="btn-trash" data-action="trash-selected">TRASH SEL</button>
           </div>
           <div id="tbl-wrap">
             <div class="tbl-hdr">
@@ -125,7 +125,7 @@ export function renderPage() {
 
   <!-- FOOTER -->
   <footer id="foot">
-    <span>AISESSIONS v1.1</span>
+    <span>AISESSIONS v1.1.4</span>
     <span>&nbsp;|&nbsp;</span>
     <span id="foot-info">LOADING...</span>
   </footer>
@@ -133,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>`