jettypod 4.4.120 → 4.4.121

package/apps/dashboard/contexts/ClaudeSessionContext.tsx

@@ -1,6 +1,6 @@
-'use client';
 
 import { createContext, useContext, useState, useCallback, useEffect, useRef, useMemo, type ReactNode } from 'react';
+import { invoke, invokeWithTimeout } from '../lib/tauri';
 import {
   type ClaudeMessage,
   type StreamStatus,
@@ -40,6 +40,7 @@ export interface Session {
   error: string | null;
   exitCode: number | null;
   narratedMode: boolean;
+  fullReadoutMode: boolean;
 }
 
 // Split into 3 contexts to prevent unnecessary re-renders:
@@ -60,6 +61,8 @@ interface SessionStateContextValue {
   canRetry: boolean;
   queuedMessage: QueuedMessage | null;
   narratedMode: boolean;
+  fullReadoutMode: boolean;
+  rawEvents: unknown[];
   isTabSwitching: boolean;
 }
 
@@ -67,17 +70,21 @@ interface SessionActionsContextValue {
   setClaudePanelOpen: (open: boolean) => void;
   openSession: (id: string, title: string, type?: string, conversational?: boolean, description?: string | null, initialHidden?: boolean) => void;
   switchSession: (id: string) => void;
-  closeSession: (sessionId: string) => void;
+  closeSession: (sessionId: string) => Promise<void>;
   openSessionPanel: () => void;
   createNewSession: () => Promise<void>;
   createAddToBacklogSession: () => Promise<void>;
   createRunScenarioSession: (featureFile: string, scenarioTitle: string) => Promise<void>;
   createFixScenarioSession: (featureFile: string, scenarioTitle: string, error: string, failedStep?: string, steps?: string[]) => Promise<void>;
+  createFixServiceSession: (crashedServices: { name: string; port: number | null }[]) => Promise<void>;
+  createBddSetupSession: (setupPrompt: string) => Promise<void>;
   createWelcomeSession: () => Promise<void>;
+  createSkillSession: (skillName: string, title: string, customMessage?: string) => Promise<string>;
   sendMessage: (message: string, images?: AttachedImage[]) => void;
   retry: () => void;
   stop: () => void;
   toggleNarratedMode: () => void;
+  toggleFullReadout: () => void;
 }
 
 interface SessionPersistenceContextValue {
@@ -164,29 +171,8 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
   sessionsRef.current = sessions;
 
   // Wrapper to update both React state and sync ref
-  // Also pins/unpins sessions to prevent idle process cleanup
+  // Pin/unpin removed — no longer needed in Tauri (no idle process cleanup)
   const setActiveSessionId = useCallback((id: string | null) => {
-    const previousId = sessionRefs.activeSessionId.current;
-    const currentSessions = sessionsRef.current;
-
-    // Unpin previous session (allow idle cleanup)
-    if (previousId && previousId !== id) {
-      const session = currentSessions.get(previousId);
-      const endpoint = session?.type === 'workitem'
-        ? `/api/claude/${previousId}/pin`
-        : `/api/claude/sessions/${previousId}/pin`;
-      fetch(endpoint, { method: 'DELETE' }).catch(() => {});
-    }
-
-    // Pin new session (prevent idle cleanup)
-    if (id) {
-      const session = currentSessions.get(id);
-      const endpoint = session?.type === 'workitem'
-        ? `/api/claude/${id}/pin`
-        : `/api/claude/sessions/${id}/pin`;
-      fetch(endpoint, { method: 'POST' }).catch(() => {});
-    }
-
     sessionRefs.activeSessionId.set(id);
     setActiveSessionIdState(id);
   }, [sessionRefs]);
@@ -194,18 +180,47 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
   // Tab-switching UX refs (NOT stream ownership - each session owns its own stream)
   // Trailing-edge debounce for rapid session switches (#1000100)
   const switchDebounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  // AbortController for cancelling in-flight historical content fetches (#1000101)
-  const contentFetchAbortRef = useRef<AbortController | null>(null);
-
   // Reactive tab-switching state (exposed to UI so components can suppress flash of empty state)
   const [isTabSwitching, setIsTabSwitching] = useState(false);
 
-  // Force re-render when stream state changes (since stream managers are mutable)
-  const [, forceUpdate] = useState({});
-
   // Standalone sessions state
   const [standaloneSessions, setStandaloneSessions] = useState<SessionItem[]>([]);
 
+  // Cache: work item ID → DB session ID (avoids N+1 db_get_sessions_for_work_item calls)
+  const dbSessionIdCache = useRef(new Map<string, number>());
+
+  // Persist session messages to DB with proper error handling
+  const persistSessionMessages = useCallback(async (sessionId: string, messages: ClaudeMessage[]) => {
+    if (messages.length === 0) return;
+    const session = sessionsRef.current.get(sessionId);
+    try {
+      if (session?.type === 'standalone') {
+        await invoke('db_set_session_content', {
+          id: Number(sessionId),
+          content: JSON.stringify(messages),
+        });
+      } else {
+        // Work-item session: check cache first, then look up
+        let dbId = dbSessionIdCache.current.get(sessionId);
+        if (!dbId) {
+          const linked = await invoke<any[]>('db_get_sessions_for_work_item', { workItemId: Number(sessionId) });
+          if (linked?.[0]?.id) {
+            dbId = linked[0].id;
+            dbSessionIdCache.current.set(sessionId, dbId);
+          }
+        }
+        if (dbId) {
+          await invoke('db_set_session_content', {
+            id: dbId,
+            content: JSON.stringify(messages),
+          });
+        }
+      }
+    } catch (err) {
+      console.error('Failed to persist session messages:', sessionId, err);
+    }
+  }, []);
+
   // Subscribe to registry events to sync React state with registry
   useEffect(() => {
     const handleStateChange = (sessionId: string, state: StreamState) => {
@@ -221,6 +236,8 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
           machine.send('CONNECTED');
         } else if (state.status === 'done') {
           machine.send('COMPLETE');
+          // Persist messages to DB so they survive page refresh
+          persistSessionMessages(sessionId, state.messages);
           // Auto-send queued message after stream completes
           if (state.queuedMessage) {
             const streamManager = registry.get(sessionId);
@@ -234,6 +251,8 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
           }
         } else if (state.status === 'error') {
           machine.send('ERROR');
+          // Persist messages on error too so user can see what happened after refresh
+          persistSessionMessages(sessionId, state.messages);
         } else if (state.status === 'idle' && machine.state !== 'idle') {
           // Force to idle if we got out of sync
           machine.forceState('idle');
@@ -248,23 +267,34 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
         }
       }
 
-      // Update React state
-      setSessions(prev => {
-        const session = prev.get(sessionId);
-        if (!session) return prev;
+      // Update React state (skip if nothing changed to avoid unnecessary re-renders)
+      // Check BEFORE calling setSessions to avoid queueing a no-op state update
+      const currentSession = sessionsRef.current.get(sessionId);
+      if (!currentSession) return;
+      if (
+        currentSession.messages === state.messages &&
+        currentSession.status === state.status &&
+        currentSession.error === state.error &&
+        currentSession.exitCode === state.exitCode &&
+        currentSession.narratedMode === state.narratedMode &&
+        currentSession.fullReadoutMode === state.fullReadoutMode
+      ) {
+        return;
+      }
 
+      setSessions(prev => {
         const updated = new Map(prev);
         updated.set(sessionId, {
-          ...session,
+          ...currentSession,
           messages: state.messages,
           status: state.status,
           error: state.error,
           exitCode: state.exitCode,
           narratedMode: state.narratedMode,
+          fullReadoutMode: state.fullReadoutMode,
         });
         return updated;
       });
-      forceUpdate({});
     };
 
     registry.on('stateChange', handleStateChange);
@@ -272,8 +302,9 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
 
     return () => {
       registry.off('stateChange', handleStateChange);
+      registry.stopCleanup();
     };
-  }, [registry, sessionRefs, getStateMachine, messageBuffer]);
+  }, [registry, sessionRefs, getStateMachine, messageBuffer, persistSessionMessages]);
 
   // Persist active session ID to sessionStorage
   useEffect(() => {
@@ -292,7 +323,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
   const getOrCreateStreamManager = useCallback((
     sessionId: string,
     standalone: boolean,
-    onWorkItemCreated?: (workItemId: number, title: string) => void,
+    onWorkItemCreated?: (workItemId: number, title: string, sourceSessionId: string) => void,
     conversational?: boolean
   ) => {
     // Registry handles idempotent creation and state change events
@@ -315,154 +346,206 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
     if (!sourceSessionId) return;
 
     try {
-      const response = await fetch('/api/claude/sessions', {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          sessionId: parseInt(sourceSessionId, 10),
-          workItemId,
-        }),
+      await invoke('db_link_claude_session', {
+        sessionId: parseInt(sourceSessionId, 10),
+        workItemId: Number(workItemId),
+        title,
       });
+    } catch (err) {
+      // DB link failed — don't re-key registry or state will be inconsistent
+      console.error('Failed to link session in DB:', sourceSessionId, '->', workItemId, err);
+      return;
+    }
 
-      if (response.ok || response.status === 409) {
-        const newSessionId = String(workItemId);
+    try {
+      const newSessionId = String(workItemId);
 
-        // Update stream manager's session context via registry
-        const streamManager = registry.get(sourceSessionId);
-        if (streamManager) {
-          streamManager.updateSessionContext({
-            workItemId: newSessionId,
-            standalone: false,
-          });
-        }
+      // Update stream manager's session context via registry
+      const streamManager = registry.get(sourceSessionId);
+      if (streamManager) {
+        streamManager.updateSessionContext({
+          workItemId: newSessionId,
+          standalone: false,
+        });
+      }
 
-        // Atomic session update (#1000102): Build new map in one pass
-        setSessions(prev => {
-          const session = prev.get(sourceSessionId);
-          if (!session) return prev;
+      // Re-key the registry entry so the onStateChange closure emits
+      // with the new session ID (fixes stream freeze after linking #1115)
+      registry.rekey(sourceSessionId, newSessionId);
 
-          // Build new map: copy all except old session, add new session
-          const updated = new Map<string, Session>();
-          for (const [key, value] of prev) {
-            if (key !== sourceSessionId) {
-              updated.set(key, value);
-            }
+      // Atomic session update (#1000102): Build new map in one pass
+      setSessions(prev => {
+        const session = prev.get(sourceSessionId);
+        if (!session) return prev;
+
+        // Build new map: copy all except old session, add new session
+        const updated = new Map<string, Session>();
+        for (const [key, value] of prev) {
+          if (key !== sourceSessionId) {
+            updated.set(key, value);
           }
-          updated.set(newSessionId, {
-            ...session,
-            id: newSessionId,
-            type: 'workitem',
-            title,
-          });
-          return updated;
+        }
+        updated.set(newSessionId, {
+          ...session,
+          id: newSessionId,
+          type: 'workitem',
+          title,
         });
+        return updated;
+      });
 
-        // Update active session ID to the work item ID
-        setActiveSessionId(newSessionId);
+      // Update active session ID to the work item ID
+      setActiveSessionId(newSessionId);
 
-        // Remove from standalone sessions list
-        setStandaloneSessions(prev =>
-          prev.filter(s => s.id !== sourceSessionId)
-        );
-      }
+      // Remove from standalone sessions list
+      setStandaloneSessions(prev =>
+        prev.filter(s => s.id !== sourceSessionId)
+      );
     } catch (err) {
-      console.error('Failed to link session to work item:', err);
+      console.error('Failed to re-key session after link:', err);
     }
   }, [registry, setActiveSessionId, refreshUsage]);
 
-  // Load persisted sessions from backend on mount
-  useEffect(() => {
-    async function loadSessions() {
+  // Track whether sessions have been loaded successfully
+  const sessionsLoadedRef = useRef(false);
+  // Promise deduplication: if loadSessions is already in flight, return the existing promise
+  const loadSessionsPromiseRef = useRef<Promise<void> | null>(null);
+
+  // Load persisted sessions from backend.
+  // Retries silently when DB isn't initialized yet (e.g., no project open).
+  // Deduplicates concurrent calls (e.g., Strict Mode double-mount).
+  const loadSessions = useCallback(async () => {
+    if (loadSessionsPromiseRef.current) {
+      return loadSessionsPromiseRef.current;
+    }
+    const doLoad = async () => {
       try {
-        const response = await fetch('/api/claude/sessions');
-        if (!response.ok) return;
+      const persistedSessions = await invokeWithTimeout<any[]>('db_get_all_sessions', undefined, 10000);
+      if (!Array.isArray(persistedSessions)) return;
+
+      sessionsLoadedRef.current = true;
+
+      const workItemSessions: typeof persistedSessions = [];
+      const standaloneItems: SessionItem[] = [];
+      // Map session DB id → parsed messages for content restoration
+      const contentMap = new Map<string, ClaudeMessage[]>();
+
+      for (const session of persistedSessions) {
+        if (!session) continue;
+
+        // Parse persisted content if available
+        if (session.content) {
+          try {
+            const parsed = JSON.parse(session.content);
+            if (Array.isArray(parsed) && parsed.length > 0) {
+              const key = session.work_item_id ? String(session.work_item_id) : String(session.id);
+              contentMap.set(key, parsed);
+            }
+          } catch { /* ignore malformed content */ }
+        }
 
-        const persistedSessions = await response.json();
-        if (!Array.isArray(persistedSessions)) return;
+        if (session.work_item_id) {
+          if (session.title) {
+            workItemSessions.push(session);
+          }
+        } else {
+          standaloneItems.push({
+            id: String(session.id),
+            title: session.session_title || session.title || 'Untitled Session',
+            featureId: null,
+            featureTitle: null,
+            updatedAt: session.completed_at || session.started_at,
+          });
+        }
+      }
 
-        const workItemSessions: typeof persistedSessions = [];
-        const standaloneItems: SessionItem[] = [];
+      // Add all sessions (work item + standalone) to sessions Map for state management
+      setSessions(prev => {
+        const updated = new Map(prev);
 
-        for (const session of persistedSessions) {
-          if (!session) continue;
+        // Add work item sessions (stream manager created lazily on first use)
+        for (const session of workItemSessions) {
+          const sessionId = String(session.work_item_id);
+          if (updated.has(sessionId)) continue;
 
-          if (session.featureId) {
-            if (session.title) {
-              workItemSessions.push(session);
-            }
-          } else {
-            standaloneItems.push({
-              id: session.id, // API returns string IDs
-              title: session.session_title || session.title || 'Untitled Session',
-              featureId: null,
-              featureTitle: null,
-              updatedAt: session.updatedAt,
-            });
-          }
-        }
+          const status = session.status;
+          const frontendStatus = status === 'completed' ? 'done'
+            : status === 'error' ? 'error'
+            : 'idle';
+          const restoredMessages = contentMap.get(sessionId) ?? [];
 
-        // Add all sessions (work item + standalone) to sessions Map for state management
-        setSessions(prev => {
-          const updated = new Map(prev);
-
-          // Add work item sessions (stream manager created lazily on first use)
-          for (const session of workItemSessions) {
-            const sessionId = session.featureId; // API returns string IDs
-            if (updated.has(sessionId)) continue;
-
-            const status = session.status;
-            const frontendStatus = status === 'completed' ? 'done'
-              : status === 'error' ? 'error'
-              : 'idle';
-
-            updated.set(sessionId, {
-              id: sessionId,
-              title: session.title,
-              type: 'workitem',
-              messages: [],
-              status: frontendStatus as StreamStatus,
-              error: null,
-              exitCode: status === 'completed' ? 0 : status === 'error' ? 1 : null,
-              narratedMode: true,
-              // Stream manager created lazily when session becomes active
-            });
-          }
+          updated.set(sessionId, {
+            id: sessionId,
+            title: session.title,
+            type: 'workitem',
+            messages: restoredMessages,
+            status: restoredMessages.length > 0 ? 'done' as StreamStatus : frontendStatus as StreamStatus,
+            error: null,
+            exitCode: status === 'completed' ? 0 : status === 'error' ? 1 : null,
+            narratedMode: true,
+            fullReadoutMode: false,
+          });
+        }
 
-          // Add standalone sessions (stream manager created lazily on first use)
-          for (const session of standaloneItems) {
-            if (updated.has(session.id)) continue;
-
-            updated.set(session.id, {
-              id: session.id,
-              title: session.title,
-              type: 'standalone',
-              messages: [],
-              status: 'idle',
-              error: null,
-              exitCode: null,
-              // Welcome session shows static content — detail view shows all messages
-              narratedMode: session.title !== 'Welcome',
-              // Stream manager created lazily when session becomes active
-            });
-          }
+        // Add standalone sessions (stream manager created lazily on first use)
+        for (const session of standaloneItems) {
+          if (updated.has(session.id)) continue;
+          const restoredMessages = contentMap.get(session.id) ?? [];
+
+          updated.set(session.id, {
+            id: session.id,
+            title: session.title,
+            type: 'standalone',
+            messages: restoredMessages,
+            status: restoredMessages.length > 0 ? 'done' as StreamStatus : 'idle',
+            error: null,
+            exitCode: null,
+            narratedMode: session.title !== 'Welcome',
+            fullReadoutMode: false,
+          });
+        }
 
-          return updated;
-        });
+        return updated;
+      });
 
-        setStandaloneSessions(standaloneItems);
-      } catch (err) {
-        console.error('[ClaudeSessionContext] Failed to load sessions:', err);
+      setStandaloneSessions(standaloneItems);
+
+      // Auto-select active session if none is set (prevents "no active session" on sendMessage)
+      if (!sessionRefs.activeSessionId.current) {
+        const allSessionIds = [
+          ...workItemSessions.map(s => String(s.work_item_id)),
+          ...standaloneItems.map(s => s.id),
+        ];
+        const savedId = sessionStorage.getItem(ACTIVE_SESSION_KEY);
+        if (savedId && allSessionIds.includes(savedId)) {
+          setActiveSessionId(savedId);
+        } else if (allSessionIds.length > 0) {
+          setActiveSessionId(allSessionIds[0]);
+        }
       }
+    } catch {
+      // Silently ignore — DB may not be initialized yet (no project open).
+      // Sessions will be loaded when openSessionPanel triggers loadSessions.
     }
+    };
+    loadSessionsPromiseRef.current = doLoad();
+    try {
+      await loadSessionsPromiseRef.current;
+    } finally {
+      loadSessionsPromiseRef.current = null;
+    }
+  }, [sessionRefs, setActiveSessionId]);
+
+  // Load sessions on mount (may fail if no project is open yet — that's OK)
+  useEffect(() => {
     loadSessions();
-  }, []);
+  }, [loadSessions]);
 
   // Helper: Ensure session has a stream manager in registry (lazy creation)
   const ensureStreamManager = useCallback((sessionId: string, session: Session) => {
     // Check registry first (idempotent - returns existing if present)
     const existing = registry.get(sessionId);
     if (existing) {
-      registry.acquire(sessionId); // Track reference for lifecycle
       return existing;
     }
 
@@ -472,7 +555,6 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
       session.type === 'standalone',
       session.type === 'standalone' ? handleWorkItemCreated : undefined
     );
-    registry.acquire(sessionId); // Track reference for lifecycle
 
     return streamManager;
   }, [registry, getOrCreateStreamManager, handleWorkItemCreated]);
@@ -498,7 +580,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
 
     // Create stream manager in registry — pass conversational flag for skip-delay behavior
     const streamManager = getOrCreateStreamManager(id, false, undefined, conversational);
-    registry.acquire(id);
+    registry.recordActivity(id);
 
     const newSession: Session = {
       id,
@@ -509,6 +591,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
       error: null,
       exitCode: null,
       narratedMode: true,
+      fullReadoutMode: false,
     };
 
     setSessions(prev => {
@@ -553,128 +636,115 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
       messageBuffer.startBuffering(previousSessionId);
     }
 
-    // Trailing-edge debounce for rapid switches (#1000100)
+    // Cancel any in-flight switch so rapid clicks don't cause stale loads
     if (switchDebounceTimeoutRef.current) {
       clearTimeout(switchDebounceTimeoutRef.current);
+      switchDebounceTimeoutRef.current = null;
     }
 
     // Immediately update visual state (active tab) for responsiveness
     switchingToRef.current = id;
     setActiveSessionId(id);
 
-    // Debounce the heavy lifting (content loading)
-    switchDebounceTimeoutRef.current = setTimeout(async () => {
-      switchDebounceTimeoutRef.current = null;
+    // Load content immediately (no debounce — local SQLite IPC is fast)
+    const session = sessions.get(id)!;
+    const isStandalone = session.type === 'standalone';
 
-      // Check if target changed during debounce
-      if (switchingToRef.current !== id) return;
-      if (!sessions.has(id)) return;
+    // Ensure session has a stream manager in registry
+    const streamManager = ensureStreamManager(id, session);
 
-      const session = sessions.get(id)!;
-      const isStandalone = session.type === 'standalone';
-
-      // Ensure session has a stream manager in registry
-      const streamManager = ensureStreamManager(id, session);
-
-      // Use sync ref to check streaming status (avoids stale closure)
-      const isActivelyStreaming = isSessionStreaming(sessionRefs, id) ||
-        session.status === 'streaming' ||
-        streamManager.status === 'streaming';
-      const hasMessages = session.messages.length > 0 || streamManager.messages.length > 0;
-
-      // Only load from DB if session is idle with no messages
-      if (!isActivelyStreaming && !hasMessages) {
-        const queryParam = isStandalone ? '' : '?by=workitem';
-        try {
-          // Cancel any in-flight content fetch (#1000101)
-          if (contentFetchAbortRef.current) {
-            contentFetchAbortRef.current.abort();
-          }
-          contentFetchAbortRef.current = new AbortController();
+    // Use sync ref to check streaming status (avoids stale closure)
+    const isActivelyStreaming = isSessionStreaming(sessionRefs, id) ||
+      session.status === 'streaming' ||
+      streamManager.status === 'streaming';
+    const hasMessages = session.messages.length > 0 || streamManager.messages.length > 0;
 
-          const response = await fetch(`/api/claude/sessions/${id}/content${queryParam}`, {
-            signal: contentFetchAbortRef.current.signal
-          });
-
-          // Check if user switched to a different session while we were fetching
-          if (switchingToRef.current !== id) return;
+    // Only load from DB if session is idle with no messages
+    if (!isActivelyStreaming && !hasMessages) {
+      try {
+        // Look up the session's DB ID: for standalone sessions use the id directly,
+        // for work-item sessions look up sessions linked to that work item
+        let content: any[] | null = null;
+
+        if (isStandalone) {
+          const sessionData = await invoke<any>('db_get_session', { id: Number(id) });
+          if (sessionData?.content) {
+            try { content = JSON.parse(sessionData.content); } catch { content = null; }
+          }
+        } else {
+          const linkedSessions = await invoke<any[]>('db_get_sessions_for_work_item', { workItemId: Number(id) });
+          if (linkedSessions && linkedSessions.length > 0 && linkedSessions[0].content) {
+            try { content = JSON.parse(linkedSessions[0].content); } catch { content = null; }
+          }
+        }
 
-          if (response.ok) {
-            const { content } = await response.json();
+        // Check if user switched to a different session while we were fetching
+        if (switchingToRef.current !== id) return;
 
-            // Double-check after parsing response
-            if (switchingToRef.current !== id) return;
+        // Re-check streaming status using sync ref (most current)
+        const currentlyStreaming = isSessionStreaming(sessionRefs, id);
+        const currentSession = sessions.get(id);
+        const currentManager = registry.get(id);
+        const nowHasMessages = (currentSession?.messages.length ?? 0) > 0 ||
+          (currentManager?.messages.length ?? 0) > 0;
 
-            // Re-check streaming status using sync ref (most current)
-            const currentlyStreaming = isSessionStreaming(sessionRefs, id);
-            const currentSession = sessions.get(id);
-            const currentManager = registry.get(id);
-            const nowHasMessages = (currentSession?.messages.length ?? 0) > 0 ||
-              (currentManager?.messages.length ?? 0) > 0;
+        if (currentlyStreaming || nowHasMessages) {
+          // Session became active during fetch - don't overwrite
+          return;
+        }
 
-            if (currentlyStreaming || nowHasMessages) {
-              // Session became active during fetch - don't overwrite
+        if (content && Array.isArray(content) && content.length > 0) {
+          // Update stream manager via registry
+          const mgr = registry.get(id);
+          if (mgr) {
+            // Final safety check via sync ref
+            if (isSessionStreaming(sessionRefs, id)) {
               return;
             }
+            mgr.setMessages(content);
+            mgr.setStatus('done');
+          }
 
-            if (content && Array.isArray(content) && content.length > 0) {
-              // Update stream manager via registry
-              const mgr = registry.get(id);
-              if (mgr) {
-                // Final safety check via sync ref
-                if (isSessionStreaming(sessionRefs, id)) {
-                  return;
-                }
-                mgr.setMessages(content);
-                mgr.setStatus('done');
-              }
-
-              // Update session React state
-              setSessions(prev => {
-                const updated = new Map(prev);
-                const existing = updated.get(id);
-                if (existing) {
-                  updated.set(id, { ...existing, messages: content, status: 'done' });
-                }
-                return updated;
-              });
+          // Update session React state
+          setSessions(prev => {
+            const updated = new Map(prev);
+            const existing = updated.get(id);
+            if (existing) {
+              updated.set(id, { ...existing, messages: content!, status: 'done' });
             }
-          }
-        } catch (err) {
-          // Ignore abort errors - they're expected when user switches tabs (#1000101)
-          if (err instanceof Error && err.name === 'AbortError') {
-            return;
-          }
-          console.error('[ClaudeSessionContext] Failed to load session content:', err);
+            return updated;
+          });
         }
+      } catch (err) {
+        console.error('[ClaudeSessionContext] Failed to load session content:', err);
       }
+    }
 
-      // Flush buffered messages for the previous session
-      if (previousSessionId && previousSessionId !== id) {
-        const bufferedMessages = messageBuffer.flushBuffer(previousSessionId);
-        if (bufferedMessages.length > 0) {
-          const prevManager = registry.get(previousSessionId);
-          if (prevManager) {
-            // Apply buffered messages to the stream manager
-            const existingMessages = prevManager.messages;
-            prevManager.setMessages([...existingMessages, ...bufferedMessages]);
-          }
+    // Flush buffered messages for the previous session
+    if (previousSessionId && previousSessionId !== id) {
+      const bufferedMessages = messageBuffer.flushBuffer(previousSessionId);
+      if (bufferedMessages.length > 0) {
+        const prevManager = registry.get(previousSessionId);
+        if (prevManager) {
+          // Apply buffered messages to the stream manager
+          const existingMessages = prevManager.messages;
+          prevManager.setMessages([...existingMessages, ...bufferedMessages]);
         }
-        messageBuffer.stopBuffering(previousSessionId);
       }
+      messageBuffer.stopBuffering(previousSessionId);
+    }
 
-      // Clear tracking ref when switch completes
-      if (switchingToRef.current === id) {
-        switchingToRef.current = null;
-      }
-      sessionRefs.isTabSwitching.set(false);
-      setIsTabSwitching(false);
-    }, 100); // 100ms debounce delay
+    // Clear tracking ref when switch completes
+    if (switchingToRef.current === id) {
+      switchingToRef.current = null;
+    }
+    sessionRefs.isTabSwitching.set(false);
+    setIsTabSwitching(false);
   }, [sessions, sessionRefs, registry, ensureStreamManager, setActiveSessionId, messageBuffer]);
 
   // Close a session
   // With per-session streams, we delete the stream manager from registry when closing
-  const closeSession = useCallback((sessionId: string) => {
+  const closeSession = useCallback(async (sessionId: string) => {
     // Get session to determine API type
     const session = sessions.get(sessionId);
     const sessionType = session?.type || 'standalone';
@@ -685,7 +755,14 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
     // Clear streaming status in sync ref
     setSessionStreaming(sessionRefs, sessionId, false);
 
-    // Update UI state immediately (before any async work)
+    // Persist close to DB first — prevents sessions reappearing after refresh
+    try {
+      await invokeWithTimeout('db_close_claude_session', { id: Number(sessionId) }, 5000);
+    } catch (err) {
+      console.error('Failed to close session in DB:', sessionId, err);
+    }
+
+    // Update UI state after DB persistence
     setStandaloneSessions(prev => prev.filter(s => s.id !== sessionId));
     setSessions(prev => {
       const updated = new Map(prev);
@@ -709,17 +786,6 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
         setActiveSessionId(remaining[Math.min(newIndex, remaining.length - 1)]);
       }
     }
-
-    // API cleanup in background (unpin + delete) — UI already updated above
-    const endpoint = sessionType === 'workitem'
-      ? `/api/claude/${sessionId}/pin`
-      : `/api/claude/sessions/${sessionId}/pin`;
-    fetch(endpoint, { method: 'DELETE' }).catch(() => {});
-    fetch(`/api/claude/sessions?sessionId=${sessionId}&type=${sessionType}`, {
-      method: 'DELETE',
-    }).catch(err => {
-      console.error('[ClaudeSessionContext] Failed to close session:', err);
-    });
   }, [activeSessionId, sessions, standaloneSessions, registry, sessionRefs, setActiveSessionId]);
 
   // Create a new standalone session
@@ -730,25 +796,12 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
     }
 
     try {
-      const response = await fetch('/api/claude/sessions', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ title: 'New Session' }),
+      const sessionId = await invoke<number>('db_create_claude_session', {
+        title: 'New Session',
+        sessionTitle: null,
       });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        if (errorData.code === 'SESSION_LIMIT_REACHED') {
-          console.warn(`[ClaudeSessionContext] ${errorData.error}`);
-          showToast('Session limit reached. Close existing sessions to create new ones.', 'error');
-        } else {
-          console.error('[ClaudeSessionContext] Failed to create session:', errorData.error);
-        }
-        return;
-      }
-
-      const { id, title } = await response.json();
-      // API returns string IDs
+      const id = String(sessionId);
+      const title = 'New Session';
 
       setStandaloneSessions(prev => [...prev, {
         id,
@@ -759,7 +812,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
 
       // Create stream manager in registry
       getOrCreateStreamManager(id, true, handleWorkItemCreated);
-      registry.acquire(id);
+      registry.recordActivity(id);
 
       const newSession: Session = {
         id,
@@ -770,6 +823,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
         error: null,
         exitCode: null,
         narratedMode: true,
+        fullReadoutMode: false,
       };
 
       setSessions(prev => {
@@ -789,7 +843,12 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
   }, [showToast, registry, getOrCreateStreamManager, handleWorkItemCreated, setActiveSessionId, usageAllowed, refreshUsage]);
 
   // Open the session panel (restore last session or create new)
-  const openSessionPanel = useCallback(() => {
+  const openSessionPanel = useCallback(async () => {
+    // If sessions haven't loaded yet (DB wasn't ready on mount), retry now
+    if (!sessionsLoadedRef.current) {
+      await loadSessions();
+    }
+
     const savedSessionId = sessionStorage.getItem(ACTIVE_SESSION_KEY);
 
     if (savedSessionId && sessions.has(savedSessionId)) {
@@ -807,10 +866,10 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
 
     // No sessions exist - create new standalone session (unless over usage limit)
     if (usageAllowed) {
-      createNewSession();
+      await createNewSession();
     }
     setClaudePanelOpen(true);
-  }, [sessions, switchSession, createNewSession, usageAllowed]);
+  }, [sessions, switchSession, createNewSession, usageAllowed, loadSessions]);
 
   // Send message via the active session's stream manager
   // With per-session streams, each session has its own manager - no cross-contamination possible
@@ -926,6 +985,31 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
     });
   }, [sessionRefs, registry]);
 
+  // Toggle full readout mode (raw stream-json events) for active session
+  const toggleFullReadout = useCallback(() => {
+    const currentActiveId = sessionRefs.activeSessionId.current;
+    if (!currentActiveId) return;
+
+    setSessions(prev => {
+      const session = prev.get(currentActiveId);
+      if (!session) return prev;
+
+      const newFullReadout = !session.fullReadoutMode;
+
+      const streamManager = registry.get(currentActiveId);
+      if (streamManager) {
+        streamManager.setFullReadoutModeQuiet(newFullReadout);
+      }
+
+      const updated = new Map(prev);
+      updated.set(currentActiveId, {
+        ...session,
+        fullReadoutMode: newFullReadout,
+      });
+      return updated;
+    });
+  }, [sessionRefs, registry]);
+
   // Create an "Add to Backlog" session with initial assistant message
   // With per-session streams, each session has its own manager in registry
   const createAddToBacklogSession = useCallback(async () => {
@@ -934,25 +1018,12 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
     }
 
     try {
-      const response = await fetch('/api/claude/sessions', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ title: 'Add to Backlog' }),
+      const sessionId = await invoke<number>('db_create_claude_session', {
+        title: 'Add to Backlog',
+        sessionTitle: null,
       });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        if (errorData.code === 'SESSION_LIMIT_REACHED') {
-          console.warn(`[ClaudeSessionContext] ${errorData.error}`);
-          showToast('Session limit reached. Close existing sessions to create new ones.', 'error');
-        } else {
-          console.error('[ClaudeSessionContext] Failed to create backlog session:', errorData.error);
-        }
-        return;
-      }
-
-      const { id, title } = await response.json();
-      // API returns string IDs
+      const id = String(sessionId);
+      const title = 'Add to Backlog';
 
       setStandaloneSessions(prev => [...prev, {
         id,
@@ -970,7 +1041,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
 
       // Create stream manager in registry
       const streamManager = getOrCreateStreamManager(id, true, handleWorkItemCreated);
-      registry.acquire(id);
+      registry.recordActivity(id);
       // Initialize with the welcome message
       streamManager.setMessages([initialMessage]);
 
@@ -983,6 +1054,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
         error: null,
         exitCode: null,
         narratedMode: true,
+        fullReadoutMode: false,
       };
 
       setSessions(prev => {
@@ -1004,22 +1076,12 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
   // Create a welcome session for blank projects with initial assistant message
   const createWelcomeSession = useCallback(async () => {
     try {
-      const response = await fetch('/api/claude/sessions', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ title: 'Welcome' }),
+      const sessionId = await invoke<number>('db_create_claude_session', {
+        title: 'Welcome',
+        sessionTitle: null,
       });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        if (errorData.code === 'SESSION_LIMIT_REACHED') {
-          console.warn(`[ClaudeSessionContext] ${errorData.error}`);
-          showToast('Session limit reached. Close existing sessions to create new ones.', 'error');
-        }
-        return;
-      }
-
-      const { id, title } = await response.json();
+      const id = String(sessionId);
+      const title = 'Welcome';
 
       setStandaloneSessions(prev => [...prev, {
         id,
@@ -1069,7 +1131,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
       const welcomeMessages = [greetingMessage, backlogTip, workflowTip, ctaMessage];
 
       const streamManager = getOrCreateStreamManager(id, true, handleWorkItemCreated);
-      registry.acquire(id);
+      registry.recordActivity(id);
       streamManager.setMessages(welcomeMessages);
 
       const newSession: Session = {
@@ -1081,6 +1143,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
         error: null,
         exitCode: null,
         narratedMode: false,
+        fullReadoutMode: false,
       };
 
       setSessions(prev => {
@@ -1096,6 +1159,70 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
     }
   }, [showToast, registry, getOrCreateStreamManager, handleWorkItemCreated, setActiveSessionId]);
 
+  // Create a session that invokes a skill by name
+  const createSkillSession = useCallback(async (skillName: string, title: string, customMessage?: string): Promise<string> => {
+    if (!usageAllowed) {
+      return '';
+    }
+
+    try {
+      const sessionId = await invoke<number>('db_create_claude_session', {
+        title,
+        sessionTitle: null,
+      });
+      const id = String(sessionId);
+
+      setStandaloneSessions(prev => [...prev, {
+        id,
+        title,
+        featureId: null,
+        featureTitle: null,
+      }]);
+
+      const userMessage: ClaudeMessage = {
+        type: 'user',
+        content: customMessage ?? `/${skillName} Go`,
+        timestamp: Date.now(),
+      };
+
+      const streamManager = getOrCreateStreamManager(id, true, handleWorkItemCreated);
+      registry.recordActivity(id);
+      streamManager.setMessages([userMessage]);
+
+      const newSession: Session = {
+        id,
+        title,
+        type: 'standalone',
+        messages: [userMessage],
+        status: 'idle',
+        error: null,
+        exitCode: null,
+        narratedMode: true,
+        fullReadoutMode: false,
+      };
+
+      setSessions(prev => {
+        const updated = new Map(prev);
+        updated.set(id, newSession);
+        return updated;
+      });
+
+      setActiveSessionId(id);
+      setClaudePanelOpen(true);
+
+      const machine = getStateMachine(id);
+      machine.send('SEND');
+      streamManager.sendMessage(userMessage.content!);
+
+      refreshUsage();
+      return id;
+    } catch (err) {
+      console.error('[ClaudeSessionContext] Failed to create skill session:', err);
+      showToast('Failed to create session. Please try again.', 'error');
+      return '';
+    }
+  }, [showToast, registry, getOrCreateStreamManager, handleWorkItemCreated, setActiveSessionId, getStateMachine, usageAllowed, refreshUsage]);
+
   // Create a "Run Scenario" session with preloaded cucumber-js command
   const createRunScenarioSession = useCallback(async (featureFile: string, scenarioTitle: string) => {
     if (!usageAllowed) {
@@ -1104,25 +1231,12 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
 
     try {
       const sessionTitle = `Run: ${scenarioTitle}`;
-      const response = await fetch('/api/claude/sessions', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ title: sessionTitle }),
+      const sessionId = await invoke<number>('db_create_claude_session', {
+        title: sessionTitle,
+        sessionTitle: null,
       });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        if (errorData.code === 'SESSION_LIMIT_REACHED') {
-          console.warn(`[ClaudeSessionContext] ${errorData.error}`);
-          showToast('Session limit reached. Close existing sessions to create new ones.', 'error');
-        } else {
-          console.error('[ClaudeSessionContext] Failed to create run scenario session:', errorData.error);
-          showToast('Failed to create session. Please try again.', 'error');
-        }
-        return;
-      }
-
-      const { id, title } = await response.json();
+      const id = String(sessionId);
+      const title = sessionTitle;
 
       setStandaloneSessions(prev => [...prev, {
         id,
@@ -1138,7 +1252,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
       };
 
       const streamManager = getOrCreateStreamManager(id, true, handleWorkItemCreated);
-      registry.acquire(id);
+      registry.recordActivity(id);
       streamManager.setMessages([userMessage]);
 
       const newSession: Session = {
@@ -1150,6 +1264,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
         error: null,
         exitCode: null,
         narratedMode: true,
+        fullReadoutMode: false,
       };
 
       setSessions(prev => {
@@ -1182,25 +1297,12 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
 
     try {
       const sessionTitle = `Fix: ${scenarioTitle}`;
-      const response = await fetch('/api/claude/sessions', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ title: sessionTitle }),
+      const sessionId = await invoke<number>('db_create_claude_session', {
+        title: sessionTitle,
+        sessionTitle: null,
       });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        if (errorData.code === 'SESSION_LIMIT_REACHED') {
-          console.warn(`[ClaudeSessionContext] ${errorData.error}`);
-          showToast('Session limit reached. Close existing sessions to create new ones.', 'error');
-        } else {
-          console.error('[ClaudeSessionContext] Failed to create fix scenario session:', errorData.error);
-          showToast('Failed to create session. Please try again.', 'error');
-        }
-        return;
-      }
-
-      const { id, title } = await response.json();
+      const id = String(sessionId);
+      const title = sessionTitle;
 
       setStandaloneSessions(prev => [...prev, {
         id,
@@ -1236,7 +1338,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
       };
 
       const streamManager = getOrCreateStreamManager(id, true, handleWorkItemCreated);
-      registry.acquire(id);
+      registry.recordActivity(id);
       streamManager.setMessages([userMessage]);
 
       const newSession: Session = {
@@ -1248,6 +1350,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
         error: null,
         exitCode: null,
         narratedMode: true,
+        fullReadoutMode: false,
       };
 
       setSessions(prev => {
@@ -1272,6 +1375,150 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
     }
   }, [showToast, registry, getOrCreateStreamManager, handleWorkItemCreated, setActiveSessionId, getStateMachine, usageAllowed, refreshUsage]);
 
+  // Create a "Fix Service" session with context about crashed/degraded services
+  const createFixServiceSession = useCallback(async (crashedServices: { name: string; port: number | null }[]) => {
+    if (!usageAllowed) {
+      return;
+    }
+
+    try {
+      const serviceNames = crashedServices.map(s => s.name).join(', ');
+      const sessionTitle = `Fix: Degraded Services`;
+      const sessionId = await invoke<number>('db_create_claude_session', {
+        title: sessionTitle,
+        sessionTitle: null,
+      });
+      const id = String(sessionId);
+      const title = sessionTitle;
+
+      setStandaloneSessions(prev => [...prev, {
+        id,
+        title,
+        featureId: null,
+        featureTitle: null,
+      }]);
+
+      const promptParts = [
+        'Services are degraded on the QA environment and need investigation.',
+        '',
+        `**Crashed services:** ${serviceNames}`,
+        '',
+      ];
+
+      for (const svc of crashedServices) {
+        promptParts.push(`- **${svc.name}** (port ${svc.port ?? 'unknown'}): crashed`);
+      }
+
+      promptParts.push('', 'Please investigate why these services crashed and fix the issues.');
+
+      const userMessage: ClaudeMessage = {
+        type: 'user',
+        content: promptParts.join('\n'),
+        timestamp: Date.now(),
+      };
+
+      const streamManager = getOrCreateStreamManager(id, true, handleWorkItemCreated);
+      registry.recordActivity(id);
+      streamManager.setMessages([userMessage]);
+
+      const newSession: Session = {
+        id,
+        title,
+        type: 'standalone',
+        messages: [userMessage],
+        status: 'idle',
+        error: null,
+        exitCode: null,
+        narratedMode: true,
+        fullReadoutMode: false,
+      };
+
+      setSessions(prev => {
+        const updated = new Map(prev);
+        updated.set(id, newSession);
+        return updated;
+      });
+
+      setActiveSessionId(id);
+      setClaudePanelOpen(true);
+
+      // Auto-send the fix request to Claude
+      const machine = getStateMachine(id);
+      machine.send('SEND');
+      streamManager.sendMessage(userMessage.content!);
+
+      // Refresh usage so UI reflects the new session immediately
+      refreshUsage();
+    } catch (err) {
+      console.error('[ClaudeSessionContext] Failed to create fix service session:', err);
+      showToast('Failed to create session. Please try again.', 'error');
+    }
+  }, [showToast, registry, getOrCreateStreamManager, handleWorkItemCreated, setActiveSessionId, getStateMachine, usageAllowed, refreshUsage]);
+
+  // Create a "Set up BDD tests" session with the preflight setup prompt
+  const createBddSetupSession = useCallback(async (setupPrompt: string) => {
+    if (!usageAllowed) {
+      return;
+    }
+
+    try {
+      const sessionTitle = 'Set up BDD tests';
+      const sessionId = await invoke<number>('db_create_claude_session', {
+        title: sessionTitle,
+        sessionTitle: null,
+      });
+      const id = String(sessionId);
+      const title = sessionTitle;
+
+      setStandaloneSessions(prev => [...prev, {
+        id,
+        title,
+        featureId: null,
+        featureTitle: null,
+      }]);
+
+      const userMessage: ClaudeMessage = {
+        type: 'user',
+        content: setupPrompt,
+        timestamp: Date.now(),
+      };
+
+      const streamManager = getOrCreateStreamManager(id, true, handleWorkItemCreated);
+      registry.recordActivity(id);
+      streamManager.setMessages([userMessage]);
+
+      const newSession: Session = {
+        id,
+        title,
+        type: 'standalone',
+        messages: [userMessage],
+        status: 'idle',
+        error: null,
+        exitCode: null,
+        narratedMode: true,
+        fullReadoutMode: false,
+      };
+
+      setSessions(prev => {
+        const updated = new Map(prev);
+        updated.set(id, newSession);
+        return updated;
+      });
+
+      setActiveSessionId(id);
+      setClaudePanelOpen(true);
+
+      const machine = getStateMachine(id);
+      machine.send('SEND');
+      streamManager.sendMessage(userMessage.content!);
+
+      refreshUsage();
+    } catch (err) {
+      console.error('[ClaudeSessionContext] Failed to create BDD setup session:', err);
+      showToast('Failed to create session. Please try again.', 'error');
+    }
+  }, [showToast, registry, getOrCreateStreamManager, handleWorkItemCreated, setActiveSessionId, getStateMachine, usageAllowed, refreshUsage]);
+
   // Setters for direct manipulation (e.g., restoring from DB)
   // These now work through the registry
   const setMessages = useCallback((messages: ClaudeMessage[]) => {
@@ -1312,6 +1559,8 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
     canRetry: activeStreamManager?.canRetry ?? false,
     queuedMessage: activeStreamManager?.queuedMessage ?? null,
     narratedMode: activeSession?.narratedMode ?? false,
+    fullReadoutMode: activeSession?.fullReadoutMode ?? false,
+    rawEvents: activeStreamManager?.rawEvents ?? [],
     isTabSwitching,
   }), [claudePanelOpen, sessions, activeSessionId, activeSession, standaloneSessions, activeStreamManager, isTabSwitching]);
 
@@ -1326,12 +1575,16 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
     createAddToBacklogSession,
     createRunScenarioSession,
     createFixScenarioSession,
+    createFixServiceSession,
+    createBddSetupSession,
     createWelcomeSession,
+    createSkillSession,
     sendMessage,
     retry,
     stop,
     toggleNarratedMode,
-  }), [setClaudePanelOpen, openSession, switchSession, closeSession, openSessionPanel, createNewSession, createAddToBacklogSession, createRunScenarioSession, createFixScenarioSession, createWelcomeSession, sendMessage, retry, stop, toggleNarratedMode]);
+    toggleFullReadout,
+  }), [setClaudePanelOpen, openSession, switchSession, closeSession, openSessionPanel, createNewSession, createAddToBacklogSession, createRunScenarioSession, createFixScenarioSession, createFixServiceSession, createBddSetupSession, createWelcomeSession, createSkillSession, sendMessage, retry, stop, toggleNarratedMode, toggleFullReadout]);
 
   // Memoize persistence context — stable setters
   const persistenceValue: SessionPersistenceContextValue = useMemo(() => ({