ai-agent-session-center 1.0.0

package/public/js/soundManager.js

@@ -0,0 +1,249 @@
+// soundManager.js — Per-action configurable sound effects via Web Audio API
+import * as settingsManager from './settingsManager.js';
+
+let audioCtx = null;
+let enabled = true;
+let volume = 0.5;
+let actionSounds = {}; // action -> soundName mapping
+
+function getCtx() {
+  if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  return audioCtx;
+}
+
+// ---- Synthesis helpers ----
+
+function playTone(freq, duration, type = 'sine', vol = 1) {
+  const ctx = getCtx();
+  const osc = ctx.createOscillator();
+  const gain = ctx.createGain();
+  osc.type = type;
+  osc.frequency.setValueAtTime(freq, ctx.currentTime);
+  gain.gain.setValueAtTime(vol * volume * 0.3, ctx.currentTime);
+  gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);
+  osc.connect(gain);
+  gain.connect(ctx.destination);
+  osc.start(ctx.currentTime);
+  osc.stop(ctx.currentTime + duration);
+}
+
+function playSequence(freqs, spacing = 0.1, duration = 0.15, type = 'sine') {
+  freqs.forEach((f, i) => {
+    setTimeout(() => playTone(f, duration, type), i * spacing * 1000);
+  });
+}
+
+// ---- Sound Library ----
+
+const soundLibrary = {
+  chirp:    () => playTone(1200, 0.08, 'sine'),
+  ping:     () => playTone(660, 0.2, 'sine'),
+  chime:    () => playSequence([523, 659, 784], 0.08, 0.2),
+  ding:     () => playTone(800, 0.25, 'triangle'),
+  blip:     () => playTone(880, 0.05, 'square', 0.5),
+  swoosh:   () => {
+    const ctx = getCtx();
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    osc.type = 'sine';
+    osc.frequency.setValueAtTime(300, ctx.currentTime);
+    osc.frequency.exponentialRampToValueAtTime(1200, ctx.currentTime + 0.25);
+    gain.gain.setValueAtTime(volume * 0.25, ctx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.3);
+    osc.connect(gain);
+    gain.connect(ctx.destination);
+    osc.start(ctx.currentTime);
+    osc.stop(ctx.currentTime + 0.3);
+  },
+  click:    () => playTone(1200, 0.03, 'square', 0.2),
+  beep:     () => playTone(440, 0.15, 'square', 0.4),
+  warble:   () => {
+    const ctx = getCtx();
+    const osc = ctx.createOscillator();
+    const lfo = ctx.createOscillator();
+    const lfoGain = ctx.createGain();
+    const gain = ctx.createGain();
+    osc.type = 'sine';
+    osc.frequency.setValueAtTime(600, ctx.currentTime);
+    lfo.type = 'sine';
+    lfo.frequency.setValueAtTime(12, ctx.currentTime);
+    lfoGain.gain.setValueAtTime(50, ctx.currentTime);
+    lfo.connect(lfoGain);
+    lfoGain.connect(osc.frequency);
+    gain.gain.setValueAtTime(volume * 0.25, ctx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.3);
+    osc.connect(gain);
+    gain.connect(ctx.destination);
+    osc.start(ctx.currentTime);
+    lfo.start(ctx.currentTime);
+    osc.stop(ctx.currentTime + 0.3);
+    lfo.stop(ctx.currentTime + 0.3);
+  },
+  buzz:     () => playTone(200, 0.12, 'sawtooth', 0.4),
+  cascade:  () => playSequence([784, 659, 523, 392], 0.1, 0.2),
+  fanfare:  () => playSequence([523, 659, 784, 1047, 1319], 0.08, 0.2),
+  alarm:    () => playSequence([880, 660, 880, 660], 0.15, 0.15, 'square'),
+  thud:     () => {
+    const ctx = getCtx();
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    osc.type = 'sine';
+    osc.frequency.setValueAtTime(80, ctx.currentTime);
+    osc.frequency.exponentialRampToValueAtTime(30, ctx.currentTime + 0.3);
+    gain.gain.setValueAtTime(volume * 0.5, ctx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.35);
+    osc.connect(gain);
+    gain.connect(ctx.destination);
+    osc.start(ctx.currentTime);
+    osc.stop(ctx.currentTime + 0.35);
+  },
+  urgentAlarm: () => {
+    // Loud 3-burst urgent alarm — impossible to miss
+    const ctx = getCtx();
+    const t = ctx.currentTime;
+    for (let burst = 0; burst < 3; burst++) {
+      const offset = burst * 0.4;
+      // High tone
+      const osc1 = ctx.createOscillator();
+      const gain1 = ctx.createGain();
+      osc1.type = 'square';
+      osc1.frequency.setValueAtTime(1000, t + offset);
+      osc1.frequency.setValueAtTime(800, t + offset + 0.1);
+      osc1.frequency.setValueAtTime(1000, t + offset + 0.2);
+      gain1.gain.setValueAtTime(volume * 0.5, t + offset);
+      gain1.gain.setValueAtTime(volume * 0.5, t + offset + 0.25);
+      gain1.gain.exponentialRampToValueAtTime(0.001, t + offset + 0.3);
+      osc1.connect(gain1);
+      gain1.connect(ctx.destination);
+      osc1.start(t + offset);
+      osc1.stop(t + offset + 0.3);
+      // Low undertone
+      const osc2 = ctx.createOscillator();
+      const gain2 = ctx.createGain();
+      osc2.type = 'sawtooth';
+      osc2.frequency.setValueAtTime(200, t + offset);
+      gain2.gain.setValueAtTime(volume * 0.3, t + offset);
+      gain2.gain.exponentialRampToValueAtTime(0.001, t + offset + 0.3);
+      osc2.connect(gain2);
+      gain2.connect(ctx.destination);
+      osc2.start(t + offset);
+      osc2.stop(t + offset + 0.3);
+    }
+  },
+  none:     () => {}
+};
+
+// ---- Action types and default mapping ----
+
+const defaultActionSounds = {
+  // Session events
+  sessionStart:   'chime',
+  sessionEnd:     'cascade',
+  promptSubmit:   'ping',
+  taskComplete:   'fanfare',
+  // Tool calls
+  toolRead:       'click',
+  toolWrite:      'blip',
+  toolEdit:       'blip',
+  toolBash:       'buzz',
+  toolGrep:       'click',
+  toolGlob:       'click',
+  toolWebFetch:   'swoosh',
+  toolTask:       'ding',
+  toolOther:      'click',
+  // System
+  approvalNeeded: 'alarm',
+  inputNeeded:    'chime',
+  alert:          'alarm',
+  kill:           'thud',
+  archive:        'ding',
+  subagentStart:  'chirp',
+  subagentStop:   'ping'
+};
+
+const actionLabels = {
+  sessionStart:   'Session Start',
+  sessionEnd:     'Session End',
+  promptSubmit:   'Prompt Submit',
+  taskComplete:   'Task Complete',
+  toolRead:       'Tool: Read',
+  toolWrite:      'Tool: Write',
+  toolEdit:       'Tool: Edit',
+  toolBash:       'Tool: Bash',
+  toolGrep:       'Tool: Grep',
+  toolGlob:       'Tool: Glob',
+  toolWebFetch:   'Tool: WebFetch',
+  toolTask:       'Tool: Task',
+  toolOther:      'Tool: Other',
+  approvalNeeded: 'Approval Needed',
+  inputNeeded:    'Input Needed',
+  alert:          'Alert',
+  kill:           'Kill',
+  archive:        'Archive',
+  subagentStart:  'Subagent Start',
+  subagentStop:   'Subagent Stop'
+};
+
+const actionCategories = {
+  'Session Events': ['sessionStart', 'sessionEnd', 'promptSubmit', 'taskComplete'],
+  'Tool Calls':     ['toolRead', 'toolWrite', 'toolEdit', 'toolBash', 'toolGrep', 'toolGlob', 'toolWebFetch', 'toolTask', 'toolOther'],
+  'System':         ['approvalNeeded', 'inputNeeded', 'alert', 'kill', 'archive', 'subagentStart', 'subagentStop']
+};
+
+// ---- Public API ----
+
+export function play(actionName) {
+  if (!enabled) return;
+  const soundName = actionSounds[actionName] || defaultActionSounds[actionName] || 'none';
+  const fn = soundLibrary[soundName];
+  if (fn) fn();
+}
+
+export function previewSound(soundName) {
+  const fn = soundLibrary[soundName];
+  if (fn) fn();
+}
+
+export function getSoundLibrary() {
+  return Object.keys(soundLibrary);
+}
+
+export function getActionSounds() {
+  return { ...defaultActionSounds, ...actionSounds };
+}
+
+export function getActionLabels() {
+  return { ...actionLabels };
+}
+
+export function getActionCategories() {
+  return actionCategories;
+}
+
+export function setActionSound(action, soundName) {
+  actionSounds[action] = soundName;
+  settingsManager.set('soundActions', JSON.stringify(actionSounds));
+}
+
+export function init() {
+  enabled = settingsManager.get('soundEnabled') === 'true';
+  volume = parseFloat(settingsManager.get('soundVolume')) || 0.5;
+
+  // Load per-action config
+  const saved = settingsManager.get('soundActions');
+  if (saved) {
+    try {
+      actionSounds = JSON.parse(saved);
+    } catch (e) {
+      actionSounds = {};
+    }
+  }
+
+  settingsManager.onChange('soundEnabled', (val) => { enabled = val === 'true'; });
+  settingsManager.onChange('soundVolume', (val) => { volume = parseFloat(val) || 0.5; });
+
+  // Resume audio context on first user interaction
+  document.addEventListener('click', () => {
+    if (audioCtx && audioCtx.state === 'suspended') audioCtx.resume();
+  }, { once: true });
+}

package/public/js/statsPanel.js

@@ -0,0 +1,118 @@
+let wsConnected = false;
+
+// Listen for WebSocket connection status events from wsClient
+document.addEventListener('ws-status', (e) => {
+  wsConnected = e.detail === 'connected';
+});
+
+let historicalLoaded = false;
+let lastHookStats = null;
+let hookStatsVisible = false;
+
+export async function loadHistoricalStats() {
+  // no-op: historical stats display removed from header
+}
+
+export function update(sessions) {
+  const el = document.getElementById('global-stats');
+  if (!el) return;
+  el.innerHTML = '';
+  // Re-add hook stats elements
+  if (lastHookStats) {
+    renderHookStatsBadge(el);
+  }
+}
+
+export function updateHookStats(stats) {
+  lastHookStats = stats;
+  const el = document.getElementById('global-stats');
+  if (!el) return;
+  renderHookStatsBadge(el);
+}
+
+function renderHookStatsBadge(container) {
+  if (!lastHookStats) return;
+
+  // Remove existing hook stats elements
+  container.querySelector('.hook-stats-toggle')?.remove();
+  container.querySelector('.hook-stats-panel')?.remove();
+
+  const { totalHooks, hooksPerMin, events } = lastHookStats;
+
+  // Calculate overall avg processing time across all events
+  let totalProcessing = 0;
+  let processingCount = 0;
+  for (const ev of Object.values(events)) {
+    if (ev.processing.avg > 0) {
+      totalProcessing += ev.processing.avg * ev.count;
+      processingCount += ev.count;
+    }
+  }
+  const avgProcessing = processingCount > 0 ? Math.round(totalProcessing / processingCount) : 0;
+
+  // Badge in header
+  const badge = document.createElement('span');
+  badge.className = 'stat hook-stats-toggle';
+  badge.title = 'Click to toggle hook performance details';
+  badge.style.cursor = 'pointer';
+  badge.innerHTML = `
+    <span class="stat-label">Hooks</span>
+    <span class="stat-value">${totalHooks} <span class="hook-rate">(${hooksPerMin}/min)</span></span>
+    <span class="stat-label" style="margin-left:8px">Avg</span>
+    <span class="stat-value">${avgProcessing}ms</span>
+  `;
+  badge.addEventListener('click', () => {
+    hookStatsVisible = !hookStatsVisible;
+    const panel = container.querySelector('.hook-stats-panel');
+    if (panel) panel.classList.toggle('hidden', !hookStatsVisible);
+  });
+  container.appendChild(badge);
+
+  // Detailed dropdown panel
+  const panel = document.createElement('div');
+  panel.className = `hook-stats-panel ${hookStatsVisible ? '' : 'hidden'}`;
+
+  // Build table rows sorted by count descending
+  const sortedEvents = Object.entries(events).sort((a, b) => b[1].count - a[1].count);
+  const rows = sortedEvents.map(([name, ev]) => {
+    const latStr = ev.latency.avg > 0
+      ? `${ev.latency.avg}ms <span class="hook-stat-dim">(p95: ${ev.latency.p95}ms)</span>`
+      : '<span class="hook-stat-dim">n/a</span>';
+    return `<tr>
+      <td class="hook-ev-name">${name}</td>
+      <td class="hook-ev-count">${ev.count}</td>
+      <td class="hook-ev-rate">${ev.rate}/min</td>
+      <td class="hook-ev-latency">${latStr}</td>
+      <td class="hook-ev-proc">${ev.processing.avg}ms <span class="hook-stat-dim">(p95: ${ev.processing.p95}ms)</span></td>
+    </tr>`;
+  }).join('');
+
+  panel.innerHTML = `
+    <div class="hook-stats-header">
+      <span>Hook Performance</span>
+      <button class="hook-stats-reset" title="Reset stats">Reset</button>
+    </div>
+    <table class="hook-stats-table">
+      <thead>
+        <tr>
+          <th>Event</th>
+          <th>Count</th>
+          <th>Rate</th>
+          <th>Delivery Latency</th>
+          <th>Server Processing</th>
+        </tr>
+      </thead>
+      <tbody>${rows}</tbody>
+    </table>
+  `;
+
+  panel.querySelector('.hook-stats-reset')?.addEventListener('click', async (e) => {
+    e.stopPropagation();
+    await fetch('/api/hook-stats/reset', { method: 'POST' });
+    lastHookStats = null;
+    container.querySelector('.hook-stats-toggle')?.remove();
+    panel.remove();
+  });
+
+  container.appendChild(panel);
+}