jettypod 4.4.118 → 4.4.121

package/apps/dashboard/contexts/ClaudeSessionContext.tsx

@@ -1,12 +1,13 @@
-'use client';
 
-import { createContext, useContext, useState, useCallback, useEffect, useRef, type ReactNode } from 'react';
+import { createContext, useContext, useState, useCallback, useEffect, useRef, useMemo, type ReactNode } from 'react';
+import { invoke, invokeWithTimeout } from '../lib/tauri';
 import {
   type ClaudeMessage,
   type StreamStatus,
   type StreamState,
   type QueuedMessage,
 } from '../lib/session-stream-manager';
+import type { AttachedImage } from '../components/ClaudePanelInput';
 import { getRegistry } from '../lib/stream-manager-registry';
 import {
   createSessionRefs,
@@ -39,22 +40,20 @@ export interface Session {
   error: string | null;
   exitCode: number | null;
   narratedMode: boolean;
+  fullReadoutMode: boolean;
 }
 
-interface ClaudeSessionContextValue {
-  // Panel state
-  claudePanelOpen: boolean;
-  setClaudePanelOpen: (open: boolean) => void;
+// Split into 3 contexts to prevent unnecessary re-renders:
+// - SessionStateContext: frequently-changing state (messages, status, sessions)
+// - SessionActionsContext: stable callbacks (sendMessage, switchSession, etc.)
+// - SessionPersistenceContext: internal mutation setters (setSessions, etc.)
 
-  // Session state
+interface SessionStateContextValue {
+  claudePanelOpen: boolean;
   sessions: Map<string, Session>;
   activeSessionId: string | null;
   activeSession: Session | null;
-
-  // Standalone sessions
   standaloneSessions: SessionItem[];
-
-  // Stream state (from active session's stream manager)
   messages: ClaudeMessage[];
   status: StreamStatus;
   error: string | null;
@@ -62,44 +61,71 @@ interface ClaudeSessionContextValue {
   canRetry: boolean;
   queuedMessage: QueuedMessage | null;
   narratedMode: boolean;
-  toggleNarratedMode: () => void;
+  fullReadoutMode: boolean;
+  rawEvents: unknown[];
+  isTabSwitching: boolean;
+}
 
-  // Session actions
-  openSession: (id: string, title: string, type?: string, conversational?: boolean, description?: string | null) => void;
+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>;
-
-  // Stream actions
-  sendMessage: (message: string) => void;
+  createSkillSession: (skillName: string, title: string, customMessage?: string) => Promise<string>;
+  sendMessage: (message: string, images?: AttachedImage[]) => void;
   retry: () => void;
   stop: () => void;
+  toggleNarratedMode: () => void;
+  toggleFullReadout: () => void;
+}
 
-  // For components that need to set messages directly (e.g., restoring from DB)
+interface SessionPersistenceContextValue {
   setMessages: (messages: ClaudeMessage[]) => void;
   setStatus: (status: StreamStatus) => void;
-
-  // For RealTimeKanbanWrapper to update sessions
   setSessions: React.Dispatch<React.SetStateAction<Map<string, Session>>>;
   setActiveSessionId: (id: string | null) => void;
   setStandaloneSessions: React.Dispatch<React.SetStateAction<SessionItem[]>>;
 }
 
-const ClaudeSessionContext = createContext<ClaudeSessionContextValue | null>(null);
+const SessionStateContext = createContext<SessionStateContextValue | null>(null);
+const SessionActionsContext = createContext<SessionActionsContextValue | null>(null);
+const SessionPersistenceContext = createContext<SessionPersistenceContextValue | null>(null);
 
-export function useClaudeSession() {
-  const context = useContext(ClaudeSessionContext);
-  if (!context) {
-    throw new Error('useClaudeSession must be used within a ClaudeSessionProvider');
-  }
+// Granular hooks — use these for better performance
+export function useSessionState() {
+  const context = useContext(SessionStateContext);
+  if (!context) throw new Error('useSessionState must be used within a ClaudeSessionProvider');
+  return context;
+}
+
+export function useSessionActions() {
+  const context = useContext(SessionActionsContext);
+  if (!context) throw new Error('useSessionActions must be used within a ClaudeSessionProvider');
   return context;
 }
 
+export function useSessionPersistence() {
+  const context = useContext(SessionPersistenceContext);
+  if (!context) throw new Error('useSessionPersistence must be used within a ClaudeSessionProvider');
+  return context;
+}
+
+// Backward-compatible hook — combines all 3 contexts
+export function useClaudeSession() {
+  const state = useSessionState();
+  const actions = useSessionActions();
+  const persistence = useSessionPersistence();
+  return { ...state, ...actions, ...persistence };
+}
+
 const ACTIVE_SESSION_KEY = 'jettypod-active-session-id';
 
 export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
@@ -145,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]);
@@ -175,15 +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);
-
-  // Force re-render when stream state changes (since stream managers are mutable)
-  const [, forceUpdate] = useState({});
+  // Reactive tab-switching state (exposed to UI so components can suppress flash of empty state)
+  const [isTabSwitching, setIsTabSwitching] = useState(false);
 
   // 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) => {
@@ -199,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);
@@ -212,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');
@@ -226,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);
@@ -250,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(() => {
@@ -270,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
@@ -284,163 +337,215 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
   // Note: The stream manager already guards on sessionContext.standalone before
   // firing this callback, so we don't need to re-check sessions here (which
   // would fail due to stale closure over the sessions Map).
-  const handleWorkItemCreated = useCallback(async (workItemId: number, title: string) => {
+  const handleWorkItemCreated = useCallback(async (workItemId: number, title: string, sourceSessionId: string) => {
     // Refresh usage count from local DB (work item now exists in work.db)
     refreshUsage();
 
-    // Use sync ref to get current active session (avoids stale closure)
-    const currentActiveId = sessionRefs.activeSessionId.current;
-    if (!currentActiveId) return;
+    // Use the source session ID passed by the stream manager — NOT activeSessionId,
+    // which may point to a different tab if the user switched during streaming (#1001272)
+    if (!sourceSessionId) return;
 
     try {
-      const response = await fetch('/api/claude/sessions', {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          sessionId: parseInt(currentActiveId, 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) {
-        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(currentActiveId);
-        if (streamManager) {
-          streamManager.updateSessionContext({
-            workItemId: newSessionId,
-            standalone: false,
-          });
-        }
+      // 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);
 
-        // Atomic session update (#1000102): Build new map in one pass
-        setSessions(prev => {
-          const session = prev.get(currentActiveId);
-          if (!session) return prev;
+      // 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 !== currentActiveId) {
-              updated.set(key, value);
-            }
+        // 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 !== currentActiveId)
-        );
-      }
+      // 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);
     }
-  }, [sessionRefs, registry, setActiveSessionId, refreshUsage]);
-
-  // Load persisted sessions from backend on mount
-  useEffect(() => {
-    async function loadSessions() {
+  }, [registry, setActiveSessionId, refreshUsage]);
+
+  // 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 */ }
+        }
+
+        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 persistedSessions = await response.json();
-        if (!Array.isArray(persistedSessions)) return;
+      // Add all sessions (work item + standalone) to sessions Map for state management
+      setSessions(prev => {
+        const updated = new Map(prev);
 
-        const workItemSessions: typeof persistedSessions = [];
-        const standaloneItems: SessionItem[] = [];
+        // 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;
 
-        for (const session of persistedSessions) {
-          if (!session) continue;
+          const status = session.status;
+          const frontendStatus = status === 'completed' ? 'done'
+            : status === 'error' ? 'error'
+            : 'idle';
+          const restoredMessages = contentMap.get(sessionId) ?? [];
 
-          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,
-            });
-          }
+          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 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
-            });
-          }
-
-          // 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;
     }
 
@@ -450,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]);
@@ -458,7 +562,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
   // Open or create a session for a work item
   // With per-session streams, no need to stop other streams or track ownership
   // Auto-sends an initial message so Claude starts working immediately
-  const openSession = useCallback((id: string, title: string, type?: string, conversational?: boolean, description?: string | null) => {
+  const openSession = useCallback((id: string, title: string, type?: string, conversational?: boolean, description?: string | null, initialHidden?: boolean) => {
     if (sessions.has(id)) {
       // Switching to existing session - ensure it has a stream manager
       const session = sessions.get(id)!;
@@ -471,13 +575,12 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
 
     // Gate new session creation on usage limits
     if (!usageAllowed) {
-      showToast('Weekly limit reached. Upgrade to continue using Claude features.', 'error');
       return;
     }
 
     // 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,
@@ -488,6 +591,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
       error: null,
       exitCode: null,
       narratedMode: true,
+      fullReadoutMode: false,
     };
 
     setSessions(prev => {
@@ -500,13 +604,14 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
     setClaudePanelOpen(true);
 
     // Auto-send initial message so Claude starts working immediately
-    // Conversational chores include their description so Claude has full context
+    // Conversational chores: send description as hidden message so Claude speaks first
+    // Non-conversational: send visible "starting work" message
     const initialMessage = conversational
       ? `This is a conversation — no code, no worktrees. Just chat with me naturally.\n\n${description || title}`
       : `I'm starting work on ${type || 'work item'} #${id}: ${title}`;
     const machine = getStateMachine(id);
     machine.send('SEND');
-    streamManager.sendMessage(initialMessage);
+    streamManager.sendMessage(initialMessage, undefined, (conversational || initialHidden) ? { hidden: true } : undefined);
 
     // Refresh usage so UI reflects the new session immediately
     refreshUsage();
@@ -521,8 +626,9 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
   const switchSession = useCallback(async (id: string) => {
     if (!sessions.has(id)) return;
 
-    // Mark tab switch in progress (sync ref for callbacks)
+    // Mark tab switch in progress (sync ref for callbacks + reactive state for UI)
     sessionRefs.isTabSwitching.set(true);
+    setIsTabSwitching(true);
 
     // Start buffering messages for the previous session to prevent loss
     const previousSessionId = sessionRefs.activeSessionId.current;
@@ -530,122 +636,110 @@ 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;
-
-      // Check if target changed during debounce
-      if (switchingToRef.current !== id) return;
-      if (!sessions.has(id)) return;
+    // Load content immediately (no debounce — local SQLite IPC is fast)
+    const session = sessions.get(id)!;
+    const isStandalone = session.type === 'standalone';
 
-      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();
+    // Ensure session has a stream manager in registry
+    const streamManager = ensureStreamManager(id, session);
 
-          const response = await fetch(`/api/claude/sessions/${id}/content${queryParam}`, {
-            signal: contentFetchAbortRef.current.signal
-          });
+    // 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;
 
-          // 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);
-    }, 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
@@ -655,26 +749,20 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
     const session = sessions.get(sessionId);
     const sessionType = session?.type || 'standalone';
 
-    // Unpin the session being closed
-    const endpoint = sessionType === 'workitem'
-      ? `/api/claude/${sessionId}/pin`
-      : `/api/claude/sessions/${sessionId}/pin`;
-    fetch(endpoint, { method: 'DELETE' }).catch(() => {});
-
     // Delete stream manager from registry (handles destroy + cleanup)
     registry.delete(sessionId);
 
     // Clear streaming status in sync ref
     setSessionStreaming(sessionRefs, sessionId, false);
 
+    // Persist close to DB first — prevents sessions reappearing after refresh
     try {
-      await fetch(`/api/claude/sessions?sessionId=${sessionId}&type=${sessionType}`, {
-        method: 'DELETE',
-      });
+      await invokeWithTimeout('db_close_claude_session', { id: Number(sessionId) }, 5000);
     } catch (err) {
-      console.error('[ClaudeSessionContext] Failed to close session:', 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);
@@ -704,30 +792,16 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
   // With per-session streams, each new session gets its own stream manager in registry
   const createNewSession = useCallback(async () => {
     if (!usageAllowed) {
-      showToast('Weekly limit reached. Upgrade to continue using Claude features.', 'error');
       return;
     }
 
     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,
@@ -738,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,
@@ -749,6 +823,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
         error: null,
         exitCode: null,
         narratedMode: true,
+        fullReadoutMode: false,
       };
 
       setSessions(prev => {
@@ -768,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)) {
@@ -784,14 +864,16 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
       return;
     }
 
-    // No sessions exist - create new standalone session
-    createNewSession();
+    // No sessions exist - create new standalone session (unless over usage limit)
+    if (usageAllowed) {
+      await createNewSession();
+    }
     setClaudePanelOpen(true);
-  }, [sessions, switchSession, createNewSession]);
+  }, [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
-  const sendMessage = useCallback((message: string) => {
+  const sendMessage = useCallback((message: string, images?: AttachedImage[]) => {
     // Use sync ref for current active session (avoids stale closure)
     const currentActiveId = sessionRefs.activeSessionId.current;
     if (!currentActiveId) {
@@ -810,13 +892,13 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
         if (!session) return;
         const mgr = ensureStreamManager(currentActiveId, session);
         machine.send('SEND');
-        mgr.sendMessage(message);
+        mgr.sendMessage(message, images);
         return;
       }
 
       machine.send('SEND');
       setSessionStreaming(sessionRefs, currentActiveId, true);
-      streamManager.sendMessage(message);
+      streamManager.sendMessage(message, images);
       return;
     }
 
@@ -826,7 +908,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
       if (!streamManager) return;
 
       machine.send('QUEUE');
-      streamManager.queueMessage(message);
+      streamManager.queueMessage(message, images);
       return;
     }
 
@@ -875,45 +957,73 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
     setSessionStreaming(sessionRefs, currentActiveId, false);
   }, [sessionRefs, registry, getStateMachine]);
 
-  // Toggle narrated mode for the active session's stream manager
+  // Toggle narrated mode directly in React state, keeping stream manager in sync
+  // without triggering notifyStateChange (which would overwrite React state with
+  // potentially stale stream manager state — the root cause of the blank chat bug).
   const toggleNarratedMode = useCallback(() => {
     const currentActiveId = sessionRefs.activeSessionId.current;
     if (!currentActiveId) return;
 
-    const streamManager = registry.get(currentActiveId);
-    if (!streamManager) return;
+    setSessions(prev => {
+      const session = prev.get(currentActiveId);
+      if (!session) return prev;
+
+      const newNarratedMode = !session.narratedMode;
+
+      // Keep stream manager in sync (quiet — no notifyStateChange)
+      const streamManager = registry.get(currentActiveId);
+      if (streamManager) {
+        streamManager.setNarratedModeQuiet(newNarratedMode);
+      }
 
-    streamManager.setNarratedMode(!streamManager.narratedMode);
+      const updated = new Map(prev);
+      updated.set(currentActiveId, {
+        ...session,
+        narratedMode: newNarratedMode,
+      });
+      return updated;
+    });
+  }, [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 () => {
     if (!usageAllowed) {
-      showToast('Weekly limit reached. Upgrade to continue using Claude features.', 'error');
       return;
     }
 
     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,
@@ -925,13 +1035,13 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
       // Create initial assistant message
       const initialMessage: ClaudeMessage = {
         type: 'assistant',
-        content: 'What should we add to the backlog?',
+        content: 'What should the name of this work item be?',
         timestamp: Date.now(),
       };
 
       // 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]);
 
@@ -944,6 +1054,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
         error: null,
         exitCode: null,
         narratedMode: true,
+        fullReadoutMode: false,
       };
 
       setSessions(prev => {
@@ -965,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,
@@ -1030,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 = {
@@ -1042,6 +1143,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
         error: null,
         exitCode: null,
         narratedMode: false,
+        fullReadoutMode: false,
       };
 
       setSessions(prev => {
@@ -1057,34 +1159,84 @@ 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) {
-      showToast('Weekly limit reached. Upgrade to continue using Claude features.', 'error');
       return;
     }
 
     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,
@@ -1100,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 = {
@@ -1112,6 +1264,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
         error: null,
         exitCode: null,
         narratedMode: true,
+        fullReadoutMode: false,
       };
 
       setSessions(prev => {
@@ -1139,31 +1292,17 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
   // Create a "Fix Scenario" session with preloaded failure context
   const createFixScenarioSession = useCallback(async (featureFile: string, scenarioTitle: string, error: string, failedStep?: string, steps?: string[]) => {
     if (!usageAllowed) {
-      showToast('Weekly limit reached. Upgrade to continue using Claude features.', 'error');
       return;
     }
 
     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,
@@ -1199,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 = {
@@ -1211,6 +1350,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
         error: null,
         exitCode: null,
         narratedMode: true,
+        fullReadoutMode: false,
       };
 
       setSessions(prev => {
@@ -1235,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[]) => {
@@ -1261,18 +1545,13 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
   // Get canRetry from registry
   const activeStreamManager = activeSessionId ? registry.get(activeSessionId) : null;
 
-  const value: ClaudeSessionContextValue = {
-    // Panel state
+  // Memoize state context — changes when state values change
+  const stateValue: SessionStateContextValue = useMemo(() => ({
     claudePanelOpen,
-    setClaudePanelOpen,
-
-    // Session state
     sessions,
     activeSessionId,
     activeSession,
     standaloneSessions,
-
-    // Stream state (from active session)
     messages: activeSession?.messages ?? [],
     status: activeSession?.status ?? 'idle',
     error: activeSession?.error ?? null,
@@ -1280,9 +1559,14 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
     canRetry: activeStreamManager?.canRetry ?? false,
     queuedMessage: activeStreamManager?.queuedMessage ?? null,
     narratedMode: activeSession?.narratedMode ?? false,
-    toggleNarratedMode,
+    fullReadoutMode: activeSession?.fullReadoutMode ?? false,
+    rawEvents: activeStreamManager?.rawEvents ?? [],
+    isTabSwitching,
+  }), [claudePanelOpen, sessions, activeSessionId, activeSession, standaloneSessions, activeStreamManager, isTabSwitching]);
 
-    // Session actions
+  // Memoize actions context — stable callbacks, rarely changes
+  const actionsValue: SessionActionsContextValue = useMemo(() => ({
+    setClaudePanelOpen,
     openSession,
     switchSession,
     closeSession,
@@ -1291,24 +1575,33 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
     createAddToBacklogSession,
     createRunScenarioSession,
     createFixScenarioSession,
+    createFixServiceSession,
+    createBddSetupSession,
     createWelcomeSession,
-
-    // Stream actions (now go through registry)
+    createSkillSession,
     sendMessage,
     retry,
     stop,
+    toggleNarratedMode,
+    toggleFullReadout,
+  }), [setClaudePanelOpen, openSession, switchSession, closeSession, openSessionPanel, createNewSession, createAddToBacklogSession, createRunScenarioSession, createFixScenarioSession, createFixServiceSession, createBddSetupSession, createWelcomeSession, createSkillSession, sendMessage, retry, stop, toggleNarratedMode, toggleFullReadout]);
 
-    // Direct setters (work through registry)
+  // Memoize persistence context — stable setters
+  const persistenceValue: SessionPersistenceContextValue = useMemo(() => ({
     setMessages,
     setStatus,
     setSessions,
     setActiveSessionId,
     setStandaloneSessions,
-  };
+  }), [setMessages, setStatus, setSessions, setActiveSessionId, setStandaloneSessions]);
 
   return (
-    <ClaudeSessionContext.Provider value={value}>
-      {children}
-    </ClaudeSessionContext.Provider>
+    <SessionStateContext.Provider value={stateValue}>
+      <SessionActionsContext.Provider value={actionsValue}>
+        <SessionPersistenceContext.Provider value={persistenceValue}>
+          {children}
+        </SessionPersistenceContext.Provider>
+      </SessionActionsContext.Provider>
+    </SessionStateContext.Provider>
   );
 }