ai-agent-session-center 2.0.0 → 2.0.1

package/hooks/setup-wizard.js

@@ -3,6 +3,7 @@ import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs';
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
 import { execSync } from 'child_process';
+import { scryptSync, randomBytes } from 'crypto';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const PROJECT_ROOT = join(__dirname, '..');
@@ -28,6 +29,7 @@ try {
 
 // ── readline helper ──
 const rl = createInterface({ input: process.stdin, output: process.stdout });
+let rlClosed = false;
 
 function ask(prompt) {
   return new Promise(resolve => rl.question(prompt, resolve));
@@ -54,8 +56,46 @@ async function askValue(stepNum, totalSteps, label, defaultVal) {
   return answer.trim() || String(defaultVal);
 }
 
+// ── Password helper ──
+function hashPassword(password) {
+  const salt = randomBytes(16).toString('hex');
+  const hash = scryptSync(password, salt, 64).toString('hex');
+  return `${salt}:${hash}`;
+}
+
+async function askPassword(prompt) {
+  return new Promise((resolve) => {
+    process.stdout.write(prompt);
+    const wasRaw = process.stdin.isRaw;
+    if (process.stdin.isTTY) process.stdin.setRawMode(true);
+    let input = '';
+    const onData = (ch) => {
+      const c = ch.toString();
+      if (c === '\n' || c === '\r') {
+        if (process.stdin.isTTY) process.stdin.setRawMode(wasRaw || false);
+        process.stdin.removeListener('data', onData);
+        process.stdout.write('\n');
+        resolve(input);
+      } else if (c === '\u007f' || c === '\b') {
+        if (input.length > 0) {
+          input = input.slice(0, -1);
+          process.stdout.write('\b \b');
+        }
+      } else if (c === '\u0003') {
+        // Ctrl+C
+        process.exit(1);
+      } else {
+        input += c;
+        process.stdout.write('*');
+      }
+    };
+    process.stdin.resume();
+    process.stdin.on('data', onData);
+  });
+}
+
 // ── Main ──
-const TOTAL = 5;
+const TOTAL = 6;
 
 console.log(`\n${CYAN}╭──────────────────────────────────────────────╮${RESET}`);
 console.log(`${CYAN}│${RESET}  ${BOLD}AI Agent Session Center — Setup Wizard${RESET}        ${CYAN}│${RESET}`);
@@ -113,7 +153,61 @@ const historyOptions = [
 const currentHistIdx = historyOptions.findIndex(o => o.value === (existing.sessionHistoryHours || 24));
 const history = await choose(5, TOTAL, 'Session history retention', historyOptions, currentHistIdx >= 0 ? currentHistIdx : 1);
 
-rl.close();
+// 6. Dashboard password
+const hasExistingPassword = Boolean(existing.passwordHash);
+let passwordHash = null;
+
+if (hasExistingPassword) {
+  const pwOptions = [
+    { label: `Keep current password`, value: 'keep' },
+    { label: `Change password`, value: 'change' },
+    { label: `Remove password ${DIM}— no login required${RESET}`, value: 'remove' },
+  ];
+  const pwChoice = await choose(6, TOTAL, 'Dashboard password', pwOptions, 0);
+  if (pwChoice.value === 'keep') {
+    passwordHash = existing.passwordHash;
+  } else if (pwChoice.value === 'change') {
+    rl.close(); rlClosed = true;
+    const pw = await askPassword(`  ${DIM}New password:${RESET} `);
+    if (pw.length < 4) {
+      console.log(`  ${RED}✗ Password must be at least 4 characters${RESET}`);
+      process.exit(1);
+    }
+    const confirm = await askPassword(`  ${DIM}Confirm password:${RESET} `);
+    if (pw !== confirm) {
+      console.log(`  ${RED}✗ Passwords do not match${RESET}`);
+      process.exit(1);
+    }
+    passwordHash = hashPassword(pw);
+    ok('Password updated');
+  } else {
+    passwordHash = null;
+    ok('Password removed — no login required');
+  }
+} else {
+  const pwOptions = [
+    { label: `No password ${DIM}— open access on localhost${RESET}`, value: 'none' },
+    { label: `Set a password ${DIM}— require login${RESET}`, value: 'set' },
+  ];
+  const pwChoice = await choose(6, TOTAL, 'Dashboard password (optional)', pwOptions, 0);
+  if (pwChoice.value === 'set') {
+    rl.close(); rlClosed = true;
+    const pw = await askPassword(`  ${DIM}Enter password:${RESET} `);
+    if (pw.length < 4) {
+      console.log(`  ${RED}✗ Password must be at least 4 characters${RESET}`);
+      process.exit(1);
+    }
+    const confirm = await askPassword(`  ${DIM}Confirm password:${RESET} `);
+    if (pw !== confirm) {
+      console.log(`  ${RED}✗ Passwords do not match${RESET}`);
+      process.exit(1);
+    }
+    passwordHash = hashPassword(pw);
+    ok('Password set — login will be required');
+  }
+}
+
+if (!rlClosed) { rl.close(); rlClosed = true; }
 
 // ── Save config ──
 const configData = {
@@ -122,6 +216,7 @@ const configData = {
   hookDensity: density.value,
   debug: debug.value,
   sessionHistoryHours: history.value,
+  ...(passwordHash ? { passwordHash } : {}),
 };
 
 const dataDir = join(PROJECT_ROOT, 'data');
@@ -136,6 +231,7 @@ info(`Enabled CLIs: ${BOLD}${configData.enabledClis.join(', ')}${RESET}`);
 info(`Hook density: ${BOLD}${configData.hookDensity}${RESET}`);
 info(`Debug: ${BOLD}${configData.debug ? 'ON' : 'OFF'}${RESET}`);
 info(`History retention: ${BOLD}${configData.sessionHistoryHours}h${RESET}`);
+info(`Password: ${BOLD}${configData.passwordHash ? 'Enabled' : 'Disabled'}${RESET}`);
 
 // ── Install hooks with chosen density ──
 console.log('');
@@ -154,3 +250,6 @@ console.log(`  ${GREEN}✓ Setup complete!${RESET}`);
 console.log(`${GREEN}────────────────────────────────────────────────${RESET}`);
 console.log(`\n  Starting server on port ${BOLD}${configData.port}${RESET}...`);
 console.log(`  Browser will open automatically.\n`);
+
+// Explicit exit — askPassword's process.stdin.resume() keeps the event loop alive
+process.exit(0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-agent-session-center",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A real-time dashboard for monitoring AI agent sessions (Claude Code, Gemini CLI, Codex) with 3D visualization",
   "type": "module",
   "main": "server/index.js",
@@ -40,6 +40,7 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
+    "better-sqlite3": "^12.6.2",
     "express": "^5.0.0",
     "node-pty": "^1.1.0",
     "ws": "^8.18.0"

package/public/css/animations.css

@@ -846,3 +846,321 @@ body[data-effect-ended="none"] .css-robot[data-status="ended"] {
   flex: 1;
 }
 
+/* ============================================================
+   Responsive: Animation Mobile & Touch Enhancements
+   ============================================================ */
+
+/* --- Enhanced prefers-reduced-motion support --- */
+@media (prefers-reduced-motion: reduce) {
+  /* Override all animation effects with simpler alternatives */
+  .css-robot[data-status="working"] .robot-head::after,
+  .css-robot[data-status="working"] .robot-head::before,
+  .char-cat[data-status="working"] .cat-head::after,
+  .char-cat[data-status="working"] .cat-head::before,
+  .char-alien[data-status="working"] .alien-dome::after,
+  .char-alien[data-status="working"] .alien-dome::before,
+  .char-ghost[data-status="working"] .ghost-body::after,
+  .char-ghost[data-status="working"] .ghost-body::before,
+  .char-orb[data-status="working"] .orb-core::after,
+  .char-orb[data-status="working"] .orb-core::before,
+  .char-dragon[data-status="working"] .dragon-head::after,
+  .char-dragon[data-status="working"] .dragon-head::before {
+    animation: none !important;
+    opacity: 0 !important;
+  }
+
+  /* Disable triggered movement effects */
+  .css-robot[data-movement]::before,
+  .css-robot[data-movement]::after {
+    animation: none !important;
+    opacity: 0 !important;
+  }
+
+  .css-robot[data-movement] .robot-body-wrap {
+    animation: none !important;
+  }
+
+  /* Disable configurable status effects */
+  body[data-effect-working="energy-ring"] .css-robot[data-status="working"]::before,
+  body[data-effect-working="energy-ring"] .css-robot[data-status="working"]::after,
+  body[data-effect-working="sparks"] .css-robot[data-status="working"]::before,
+  body[data-effect-working="sparks"] .css-robot[data-status="working"]::after,
+  body[data-effect-working="steam"] .css-robot[data-status="working"]::before,
+  body[data-effect-working="steam"] .css-robot[data-status="working"]::after {
+    animation: none !important;
+    opacity: 0 !important;
+  }
+
+  /* Show static indicators instead of animations for key states */
+  .css-robot[data-status="approval"] {
+    outline: 2px solid rgba(255, 221, 0, 0.6);
+    outline-offset: 4px;
+    border-radius: 8px;
+  }
+
+  .css-robot[data-status="working"] {
+    outline: 2px solid rgba(255, 152, 0, 0.4);
+    outline-offset: 4px;
+    border-radius: 8px;
+  }
+
+  /* Suppress movement preview animations */
+  .movement-preview-viewport .css-robot {
+    animation: none !important;
+  }
+  .movement-preview-viewport .css-robot::before,
+  .movement-preview-viewport .css-robot::after {
+    animation: none !important;
+  }
+}
+
+/* --- :active touch feedback on animation settings controls --- */
+.anim-intensity-control input[type="range"]:active {
+  opacity: 0.8;
+}
+
+.movement-preview-viewport:active {
+  opacity: 0.9;
+}
+
+/* --- Touch device enhancements (pointer: coarse) --- */
+@media (pointer: coarse) {
+  /* Animation sliders: larger hit area on touch devices */
+  .anim-intensity-control input[type="range"] {
+    height: 44px;
+    cursor: pointer;
+  }
+
+  .anim-intensity-control {
+    min-height: 44px;
+  }
+
+  /* Movement preview: larger tap targets */
+  .movement-preview-viewport {
+    min-height: 120px;
+  }
+}
+
+/* --- Tablet (max-width: 768px) --- */
+@media (max-width: 768px) {
+  /* Scale down characters proportionally on tablet */
+  .css-robot {
+    transform: scale(0.85);
+    transform-origin: center bottom;
+  }
+
+  /* Movement preview: slightly smaller */
+  .movement-preview-viewport {
+    height: 140px;
+  }
+
+  .movement-preview-viewport .css-robot {
+    transform: scale(0.75);
+  }
+}
+
+/* --- Small tablet / large phone (max-width: 640px) --- */
+@media (max-width: 640px) {
+  /* Scale down characters more on mobile */
+  .css-robot {
+    transform: scale(0.75);
+    transform-origin: center bottom;
+  }
+
+  /* Reduce sweat drops box-shadow complexity for performance */
+  .css-robot[data-status="working"] .robot-head::after,
+  .char-cat[data-status="working"] .cat-head::after,
+  .char-alien[data-status="working"] .alien-dome::after,
+  .char-ghost[data-status="working"] .ghost-body::after,
+  .char-orb[data-status="working"] .orb-core::after,
+  .char-dragon[data-status="working"] .dragon-head::after,
+  .char-penguin[data-status="working"] .penguin-head::after,
+  .char-octopus[data-status="working"] .octo-head::after,
+  .char-mushroom[data-status="working"] .mush-cap::after,
+  .char-fox[data-status="working"] .fox-head::after,
+  .char-unicorn[data-status="working"] .unicorn-head::after,
+  .char-jellyfish[data-status="working"] .jelly-bell::after,
+  .char-owl[data-status="working"] .owl-head::after,
+  .char-bat[data-status="working"] .bat-head::after,
+  .char-cactus[data-status="working"] .cactus-body::after,
+  .char-slime[data-status="working"] .slime-body::after,
+  .char-pumpkin[data-status="working"] .pumpkin-body::after,
+  .char-yeti[data-status="working"] .yeti-head::after,
+  .char-crystal[data-status="working"] .crystal-body::after,
+  .char-bee[data-status="working"] .bee-head::after {
+    /* Reduce from 19 box-shadow drops to 6 for mobile performance */
+    box-shadow:
+      -4px 4px 0 1px rgba(100,220,255,1),
+      2px 14px 0 0 rgba(80,200,255,0.9),
+      -2px 24px 0 1px rgba(80,200,255,0.85),
+      5px 34px 0 0 rgba(60,190,255,0.8),
+      -3px 44px 0 1px rgba(100,220,255,0.75),
+      1px 49px 0 0 rgba(80,200,255,0.7);
+  }
+
+  .css-robot[data-status="working"] .robot-head::before,
+  .char-cat[data-status="working"] .cat-head::before,
+  .char-alien[data-status="working"] .alien-dome::before,
+  .char-ghost[data-status="working"] .ghost-body::before,
+  .char-orb[data-status="working"] .orb-core::before,
+  .char-dragon[data-status="working"] .dragon-head::before,
+  .char-penguin[data-status="working"] .penguin-head::before,
+  .char-octopus[data-status="working"] .octo-head::before,
+  .char-mushroom[data-status="working"] .mush-cap::before,
+  .char-fox[data-status="working"] .fox-head::before,
+  .char-unicorn[data-status="working"] .unicorn-head::before,
+  .char-jellyfish[data-status="working"] .jelly-bell::before,
+  .char-owl[data-status="working"] .owl-head::before,
+  .char-bat[data-status="working"] .bat-head::before,
+  .char-cactus[data-status="working"] .cactus-body::before,
+  .char-slime[data-status="working"] .slime-body::before,
+  .char-pumpkin[data-status="working"] .pumpkin-body::before,
+  .char-yeti[data-status="working"] .yeti-head::before,
+  .char-crystal[data-status="working"] .crystal-body::before,
+  .char-bee[data-status="working"] .bee-head::before {
+    /* Reduce from 19 box-shadow drops to 6 for mobile performance */
+    box-shadow:
+      4px 4px 0 1px rgba(100,220,255,1),
+      -2px 14px 0 0 rgba(80,200,255,0.9),
+      2px 24px 0 1px rgba(80,200,255,0.85),
+      -5px 34px 0 0 rgba(60,190,255,0.8),
+      3px 44px 0 1px rgba(100,220,255,0.75),
+      -1px 49px 0 0 rgba(80,200,255,0.7);
+  }
+
+  /* Simplify triggered movement sparks (reduce box-shadow points) */
+  .css-robot[data-movement="sparks"]::before {
+    box-shadow:
+      12px -15px 0 1px #ffcc00,
+      -16px -10px 0 0 #ffa000,
+      20px 6px 0 1px #ff9800,
+      -12px 12px 0 0 #ffcc80;
+  }
+  .css-robot[data-movement="sparks"]::after {
+    box-shadow:
+      -10px -18px 0 1px #ffe082,
+      18px -12px 0 0 #ffca28,
+      -22px 4px 0 1px #ffc107,
+      10px 16px 0 0 #ffe082;
+  }
+
+  /* Simplify triggered sparkle effects */
+  .css-robot[data-movement="sparkle"]::before {
+    box-shadow:
+      25px -8px 0 1px rgba(255,255,255,1),
+      -15px 20px 0 0 rgba(255,255,255,0.95),
+      30px 25px 0 1px rgba(255,255,255,0.9),
+      8px 40px 0 0 rgba(255,255,255,0.85);
+  }
+  .css-robot[data-movement="sparkle"]::after {
+    box-shadow:
+      15px 10px 0 1px rgba(255,255,200,0.9),
+      35px 5px 0 0 rgba(255,255,200,0.85),
+      5px 30px 0 1px rgba(255,255,200,0.8);
+  }
+
+  /* Simplify energy-ring effects */
+  body[data-effect-working="energy-ring"] .css-robot[data-status="working"]::before {
+    box-shadow: 0 0 15px rgba(255, 152, 0, 0.5);
+  }
+  body[data-effect-working="energy-ring"] .css-robot[data-status="working"]::after {
+    box-shadow: 0 0 10px rgba(255, 200, 0, 0.3);
+  }
+
+  /* Simplify steam clouds */
+  body[data-effect-working="steam"] .css-robot[data-status="working"]::before {
+    box-shadow:
+      14px -6px 0 4px rgba(220,220,240,0.5),
+      -8px -12px 0 3px rgba(220,220,240,0.4);
+  }
+  body[data-effect-working="steam"] .css-robot[data-status="working"]::after {
+    box-shadow:
+      -12px -8px 0 4px rgba(220,220,240,0.45);
+  }
+
+  /* Movement preview: compact */
+  .movement-preview-viewport {
+    height: 120px;
+  }
+
+  .movement-preview-viewport .css-robot {
+    transform: scale(0.6);
+  }
+
+  /* Animation settings: compact */
+  .movement-preview-label {
+    font-size: 10px;
+  }
+
+  .movement-preview-effect-name {
+    font-size: 9px;
+  }
+}
+
+/* --- Phone (max-width: 480px) --- */
+@media (max-width: 480px) {
+  /* Scale down characters further */
+  .css-robot {
+    transform: scale(0.65);
+    transform-origin: center bottom;
+  }
+
+  /* Reduce animation speed on small screens for less jank */
+  .css-robot[data-status="working"] .robot-head::after,
+  .css-robot[data-status="working"] .robot-head::before {
+    animation-duration: 1.2s;
+  }
+
+  /* Movement preview: even more compact */
+  .movement-preview-viewport {
+    height: 100px;
+  }
+
+  .movement-preview-viewport .css-robot {
+    transform: scale(0.5);
+  }
+
+  /* Anim intensity control: compact layout */
+  .anim-intensity-control span {
+    font-size: 10px;
+    min-width: 24px;
+  }
+}
+
+/* --- Small phone (max-width: 375px) --- */
+@media (max-width: 375px) {
+  .css-robot {
+    transform: scale(0.55);
+    transform-origin: center bottom;
+  }
+
+  .movement-preview-viewport {
+    height: 90px;
+  }
+}
+
+/* --- Smallest phone (max-width: 320px) --- */
+@media (max-width: 320px) {
+  .css-robot {
+    transform: scale(0.5);
+    transform-origin: center bottom;
+  }
+
+  .movement-preview-viewport {
+    height: 80px;
+  }
+
+  .anim-intensity-control {
+    gap: 6px;
+  }
+}
+
+/* --- Scroll-snap for horizontally scrollable containers --- */
+.terminal-toolbar-actions {
+  scroll-snap-type: x proximity;
+}
+
+.terminal-toolbar-actions > * {
+  scroll-snap-align: start;
+}
+

package/public/css/base.css

@@ -42,6 +42,18 @@
   /* Animation control */
   --anim-intensity: 1;
   --anim-speed: 1;
+
+  /* Responsive spacing (desktop defaults) */
+  --layout-pad: 24px;
+  --layout-pad-sm: 16px;
+  --layout-gap: 16px;
+  --layout-gap-sm: 8px;
+
+  /* Safe area fallbacks */
+  --safe-top: env(safe-area-inset-top, 0px);
+  --safe-right: env(safe-area-inset-right, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-left: env(safe-area-inset-left, 0px);
 }
 
 /* ---- Reset & Base ---- */
@@ -148,6 +160,7 @@ body::after {
   .modal-panel {
     -webkit-overflow-scrolling: touch;
     touch-action: pan-y;
+    overflow-y: auto;
   }
 
   /* Ensure all interactive elements meet minimum 44px touch target */
@@ -168,4 +181,128 @@ body::after {
     min-height: 44px;
     min-width: 44px;
   }
+
+  /* touch-action: manipulation prevents double-tap zoom on interactive elements */
+  button,
+  a,
+  input,
+  select,
+  textarea,
+  .nav-btn,
+  .qa-btn,
+  .ctrl-btn,
+  .tab,
+  .nav-actions-toggle,
+  .nav-shortcuts-btn,
+  .settings-gear,
+  .modal-close,
+  .theme-swatch,
+  .char-swatch,
+  .density-btn,
+  .ssh-mode-btn,
+  .pagination-btn,
+  .feed-collapse-btn,
+  .session-card,
+  .history-row {
+    touch-action: manipulation;
+  }
+}
+
+/* ---- Disable hover-only effects on touch devices ---- */
+
+@media (hover: none) {
+  .nav-btn:hover,
+  .qa-btn:hover,
+  .ctrl-btn:hover,
+  .tab:hover,
+  .nav-actions-toggle:hover,
+  .nav-shortcuts-btn:hover,
+  .settings-gear:hover,
+  .modal-close:hover,
+  .history-row:hover,
+  .history-delete:hover,
+  .pagination-btn:hover,
+  .feed-collapse-btn:hover,
+  .hook-stats-reset:hover {
+    background: unset;
+    color: unset;
+    border-color: unset;
+    box-shadow: unset;
+  }
+
+  /* Keep active-state feedback for touch instead */
+  .nav-btn:active,
+  .qa-btn:active,
+  .ctrl-btn:active,
+  .tab:active {
+    opacity: 0.7;
+  }
+}
+
+/* ---- Mobile: enable page scroll, disable zoom ---- */
+
+@media (max-width: 768px) {
+  html {
+    overflow: auto;
+    overflow-x: hidden;
+    overscroll-behavior-x: none;
+    touch-action: pan-x pan-y;
+  }
+
+  body {
+    overflow: visible;
+    overflow-x: hidden;
+    height: auto;
+    min-height: 100vh;
+    min-height: 100dvh;
+    overscroll-behavior: none;
+    touch-action: pan-x pan-y;
+  }
+}
+
+/* ---- Mobile scrollbar hiding ---- */
+
+@media (max-width: 768px) {
+  .view-panel::-webkit-scrollbar,
+  #main-nav::-webkit-scrollbar,
+  .modal-panel::-webkit-scrollbar,
+  .settings-tab-content::-webkit-scrollbar,
+  #feed-entries::-webkit-scrollbar,
+  #detail-conversation::-webkit-scrollbar,
+  #detail-activity-log::-webkit-scrollbar,
+  #notes-list::-webkit-scrollbar,
+  #queue-list::-webkit-scrollbar {
+    display: none;
+  }
+
+  .view-panel,
+  #main-nav,
+  .modal-panel,
+  .settings-tab-content,
+  #feed-entries,
+  #detail-conversation,
+  #detail-activity-log,
+  #notes-list,
+  #queue-list {
+    scrollbar-width: none;
+  }
+
+  /* Mobile responsive spacing custom properties */
+  :root {
+    --layout-pad: 12px;
+    --layout-pad-sm: 8px;
+    --layout-gap: 8px;
+    --layout-gap-sm: 4px;
+  }
+}
+
+/* ---- Extra-small mobile spacing ---- */
+
+@media (max-width: 375px) {
+  :root {
+    --layout-pad: 8px;
+    --layout-pad-sm: 6px;
+    --layout-gap: 6px;
+    --layout-gap-sm: 4px;
+  }
 }