feat: session lifecycle audit log — append-only JSONL at ~/.claudeman/session-lifecycle.jsonl

Records every session create, start, exit, delete, recover, stale-clean, mux-died, and server start/stop with timestamps, names, reasons, and exit codes. Survives server restarts (unlike in-memory RunSummary). - New SessionLifecycleLog singleton (src/session-lifecycle-log.ts) - LifecycleEventType + LifecycleEntry types in types.ts - GET /api/session-lifecycle endpoint with sessionId/event/since/limit filters - cleanupSession() now takes reason parameter for audit trail - state-store cleanupStaleSessions returns cleaned session IDs+names - UI: lifecycle log modal accessible from header clipboard icon - Auto-trims to 8k entries when exceeding 10k on server start chore: bump version to 0.1556 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-10-08 08:29:42 +02:00 · 2026-02-19 18:30:14 +01:00
parent 342a2add10
commit 383ed5e5a0
9 changed files with 333 additions and 79 deletions
@@ -2358,7 +2358,7 @@ class ClaudemanApp {
  _updateLocalEchoState() {
      const settings = this.loadAppSettingsFromStorage();
      const session = this.activeSessionId ? this.sessions.get(this.activeSessionId) : null;
-      const echoEnabled = settings.localEchoEnabled ?? (MobileDetection.isTouchDevice() || false);
+      const echoEnabled = settings.localEchoEnabled ?? true;
      const shouldEnable = !!(echoEnabled && session);
      if (this._localEchoEnabled && !shouldEnable) {
          this._localEchoOverlay?.clear();
@@ -9796,7 +9796,7 @@ class ClaudemanApp {
    document.getElementById('appSettingsSubagentTracking').checked = settings.subagentTrackingEnabled ?? defaults.subagentTrackingEnabled ?? true;
    document.getElementById('appSettingsSubagentActiveTabOnly').checked = settings.subagentActiveTabOnly ?? defaults.subagentActiveTabOnly ?? true;
    document.getElementById('appSettingsImageWatcherEnabled').checked = settings.imageWatcherEnabled ?? defaults.imageWatcherEnabled ?? false;
-    document.getElementById('appSettingsLocalEcho').checked = settings.localEchoEnabled ?? (MobileDetection.isTouchDevice() || false);
+    document.getElementById('appSettingsLocalEcho').checked = settings.localEchoEnabled ?? true;
    document.getElementById('appSettingsTabTwoRows').checked = settings.tabTwoRows ?? defaults.tabTwoRows ?? false;
    // Claude CLI settings
    const claudeModeSelect = document.getElementById('appSettingsClaudeMode');
@@ -9906,6 +9906,64 @@ class ClaudemanApp {
    }
  }

+  // ========== Session Lifecycle Log ==========
+
+  openLifecycleLog() {
+    document.getElementById('lifecycleModal').classList.add('active');
+    this.loadLifecycleLog();
+  }
+
+  closeLifecycleLog() {
+    document.getElementById('lifecycleModal').classList.remove('active');
+  }
+
+  async loadLifecycleLog() {
+    const eventFilter = document.getElementById('lifecycleFilterEvent').value;
+    const sessionFilter = document.getElementById('lifecycleFilterSession').value.trim();
+    const params = new URLSearchParams();
+    if (eventFilter) params.set('event', eventFilter);
+    if (sessionFilter) params.set('sessionId', sessionFilter);
+    params.set('limit', '300');
+
+    try {
+      const res = await fetch(`/api/session-lifecycle?${params}`);
+      const data = await res.json();
+      const tbody = document.getElementById('lifecycleTableBody');
+      const empty = document.getElementById('lifecycleEmpty');
+
+      if (!data.entries || data.entries.length === 0) {
+        tbody.innerHTML = '';
+        empty.style.display = '';
+        return;
+      }
+      empty.style.display = 'none';
+
+      const eventColors = {
+        created: '#4ade80', started: '#4ade80', recovered: '#4ade80',
+        exit: '#fbbf24', mux_died: '#f87171', deleted: '#f87171', stale_cleaned: '#f87171',
+        server_started: '#666', server_stopped: '#666',
+      };
+
+      tbody.innerHTML = data.entries.map(e => {
+        const time = new Date(e.ts).toLocaleString();
+        const color = eventColors[e.event] || '#888';
+        const name = e.name || (e.sessionId === '*' ? '—' : e.sessionId.slice(0, 8));
+        const extra = [];
+        if (e.exitCode !== undefined && e.exitCode !== null) extra.push(`code=${e.exitCode}`);
+        if (e.mode) extra.push(e.mode);
+        return `<tr style="border-bottom:1px solid #1a1a2e">
+          <td style="padding:3px 8px;color:#888;white-space:nowrap">${time}</td>
+          <td style="padding:3px 8px;color:${color};font-weight:600">${e.event}</td>
+          <td style="padding:3px 8px;color:#e0e0e0" title="${e.sessionId}">${name}</td>
+          <td style="padding:3px 8px;color:#aaa">${e.reason || ''}</td>
+          <td style="padding:3px 8px;color:#666">${extra.join(', ')}</td>
+        </tr>`;
+      }).join('');
+    } catch (err) {
+      console.error('Failed to load lifecycle log:', err);
+    }
+  }
+
  async saveAppSettings() {
    const settings = {
      defaultClaudeMdPath: document.getElementById('appSettingsClaudeMdPath').value.trim(),
@@ -84,6 +84,7 @@
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
          <span class="notification-badge" id="notifBadge" style="display:none;">0</span>
        </button>
+        <button class="btn-icon-header" onclick="app.openLifecycleLog()" title="Session Lifecycle Log" aria-label="Open session lifecycle log" style="font-size:14px;opacity:0.7">&#x1F4CB;</button>
        <button class="btn-icon-header btn-settings" onclick="app.openAppSettings()" title="App Settings" aria-label="Open app settings"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
        <div class="header-tokens" id="headerTokens" title="Total tokens across all sessions">0 tokens</div>
      </div>
@@ -880,7 +881,7 @@

              <!-- Input Options Section -->
              <div class="settings-section-header">Input</div>
-              <div class="settings-item" title="Show typed characters instantly via overlay for high-latency connections. Only active when session is idle.">
+              <div class="settings-item" title="Buffer keystrokes locally and show them instantly via overlay. Text is sent to the server on Enter. Useful for high-latency connections or to compose input before sending.">
                <span class="settings-item-label">Local Echo</span>
                <label class="switch switch-sm">
                  <input type="checkbox" id="appSettingsLocalEcho">
@@ -1500,6 +1501,48 @@
    </div>
  </div>

+  <!-- Session Lifecycle Audit Log Modal -->
+  <div class="modal" id="lifecycleModal">
+    <div class="modal-backdrop" onclick="app.closeLifecycleLog()"></div>
+    <div class="modal-content modal-lg">
+      <div class="modal-header">
+        <h3>Session Lifecycle Log</h3>
+        <button class="modal-close" onclick="app.closeLifecycleLog()" aria-label="Close lifecycle log">&times;</button>
+      </div>
+      <div class="modal-body" style="max-height:70vh;overflow:auto;padding:8px">
+        <div style="display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap">
+          <select id="lifecycleFilterEvent" style="background:#1a1a2e;color:#e0e0e0;border:1px solid #333;border-radius:4px;padding:4px 8px;font-size:12px">
+            <option value="">All Events</option>
+            <option value="created">Created</option>
+            <option value="started">Started</option>
+            <option value="exit">Exit</option>
+            <option value="deleted">Deleted</option>
+            <option value="recovered">Recovered</option>
+            <option value="stale_cleaned">Stale Cleaned</option>
+            <option value="mux_died">Mux Died</option>
+            <option value="server_started">Server Started</option>
+            <option value="server_stopped">Server Stopped</option>
+          </select>
+          <input id="lifecycleFilterSession" type="text" placeholder="Filter by session ID..." style="background:#1a1a2e;color:#e0e0e0;border:1px solid #333;border-radius:4px;padding:4px 8px;font-size:12px;flex:1;min-width:120px">
+          <button class="btn btn-sm btn-secondary" onclick="app.loadLifecycleLog()" style="font-size:12px;padding:4px 10px">Refresh</button>
+        </div>
+        <table id="lifecycleTable" style="width:100%;border-collapse:collapse;font-size:12px;font-family:monospace">
+          <thead>
+            <tr style="color:#888;text-align:left;border-bottom:1px solid #333">
+              <th style="padding:4px 8px">Time</th>
+              <th style="padding:4px 8px">Event</th>
+              <th style="padding:4px 8px">Session</th>
+              <th style="padding:4px 8px">Reason</th>
+              <th style="padding:4px 8px">Extra</th>
+            </tr>
+          </thead>
+          <tbody id="lifecycleTableBody"></tbody>
+        </table>
+        <div id="lifecycleEmpty" style="color:#666;text-align:center;padding:20px;display:none">No lifecycle entries found</div>
+      </div>
+    </div>
+  </div>
+
  <!-- SVG Overlay for Subagent Connection Lines -->
  <svg id="connectionLines" class="connection-lines-svg">
    <!-- Lines drawn dynamically -->