jettypod 4.4.115 → 4.4.118

package/apps/dashboard/contexts/ClaudeSessionContext.tsx

@@ -5,6 +5,7 @@ import {
   type ClaudeMessage,
   type StreamStatus,
   type StreamState,
+  type QueuedMessage,
 } from '../lib/session-stream-manager';
 import { getRegistry } from '../lib/stream-manager-registry';
 import {
@@ -21,6 +22,7 @@ import {
 } from '../lib/session-state-machine';
 import { getMessageBuffer } from '../lib/message-buffer';
 import { useToast } from '../components/Toast';
+import { useUsage } from './UsageContext';
 import type { SessionItem } from '../components/SessionList';
 
 // Re-export ClaudeMessage for consumers
@@ -58,17 +60,20 @@ interface ClaudeSessionContextValue {
   error: string | null;
   exitCode: number | null;
   canRetry: boolean;
+  queuedMessage: QueuedMessage | null;
   narratedMode: boolean;
   toggleNarratedMode: () => void;
 
   // Session actions
-  openSession: (id: string, title: string, type?: string) => void;
+  openSession: (id: string, title: string, type?: string, conversational?: boolean, description?: string | null) => void;
   switchSession: (id: string) => void;
   closeSession: (sessionId: string) => 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>;
+  createWelcomeSession: () => Promise<void>;
 
   // Stream actions
   sendMessage: (message: string) => void;
@@ -100,6 +105,7 @@ const ACTIVE_SESSION_KEY = 'jettypod-active-session-id';
 export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
   // Toast for user notifications
   const { showToast } = useToast();
+  const { allowed: usageAllowed, refresh: refreshUsage } = useUsage();
 
   // Get registry singleton (stable across renders)
   const registry = getRegistry();
@@ -193,6 +199,17 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
           machine.send('CONNECTED');
         } else if (state.status === 'done') {
           machine.send('COMPLETE');
+          // Auto-send queued message after stream completes
+          if (state.queuedMessage) {
+            const streamManager = registry.get(sessionId);
+            if (streamManager && machine.canSend('SEND')) {
+              const { message, images } = state.queuedMessage;
+              streamManager.clearQueuedMessage();
+              machine.send('SEND');
+              setSessionStreaming(sessionRefs, sessionId, true);
+              streamManager.sendMessage(message, images);
+            }
+          }
         } else if (state.status === 'error') {
           machine.send('ERROR');
         } else if (state.status === 'idle' && machine.state !== 'idle') {
@@ -253,11 +270,12 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
   const getOrCreateStreamManager = useCallback((
     sessionId: string,
     standalone: boolean,
-    onWorkItemCreated?: (workItemId: number, title: string) => void
+    onWorkItemCreated?: (workItemId: number, title: string) => void,
+    conversational?: boolean
   ) => {
     // Registry handles idempotent creation and state change events
     return registry.create(sessionId, {
-      context: { workItemId: sessionId, standalone },
+      context: { workItemId: sessionId, standalone, conversational },
       callbacks: { onWorkItemCreated },
     });
   }, [registry]);
@@ -267,6 +285,9 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
   // 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) => {
+    // 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;
@@ -325,7 +346,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
     } catch (err) {
       console.error('Failed to link session to work item:', err);
     }
-  }, [sessionRefs, registry, setActiveSessionId]);
+  }, [sessionRefs, registry, setActiveSessionId, refreshUsage]);
 
   // Load persisted sessions from backend on mount
   useEffect(() => {
@@ -397,7 +418,8 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
               status: 'idle',
               error: null,
               exitCode: null,
-              narratedMode: true,
+              // Welcome session shows static content — detail view shows all messages
+              narratedMode: session.title !== 'Welcome',
               // Stream manager created lazily when session becomes active
             });
           }
@@ -436,7 +458,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) => {
+  const openSession = useCallback((id: string, title: string, type?: string, conversational?: boolean, description?: string | null) => {
     if (sessions.has(id)) {
       // Switching to existing session - ensure it has a stream manager
       const session = sessions.get(id)!;
@@ -447,8 +469,14 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
       return;
     }
 
-    // Create stream manager in registry
-    const streamManager = getOrCreateStreamManager(id, false);
+    // 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);
 
     const newSession: Session = {
@@ -472,12 +500,17 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
     setClaudePanelOpen(true);
 
     // Auto-send initial message so Claude starts working immediately
-    // sendMessage() handles adding the user message to the stream manager internally
-    const initialMessage = `I'm starting work on ${type || 'work item'} #${id}: ${title}`;
+    // Conversational chores include their description so Claude has full context
+    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);
-  }, [sessions, registry, getOrCreateStreamManager, ensureStreamManager, setActiveSessionId, getStateMachine]);
+
+    // Refresh usage so UI reflects the new session immediately
+    refreshUsage();
+  }, [sessions, registry, getOrCreateStreamManager, ensureStreamManager, setActiveSessionId, getStateMachine, usageAllowed, showToast, refreshUsage]);
 
   // Track target session during async switch operations (for tab-switching UX, not streaming)
   const switchingToRef = useRef<string | null>(null);
@@ -670,6 +703,11 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
   // Create a new standalone session
   // 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',
@@ -721,10 +759,13 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
 
       setActiveSessionId(id);
       setClaudePanelOpen(true);
+
+      // Refresh usage so UI reflects the new session immediately
+      refreshUsage();
     } catch (err) {
       console.error('[ClaudeSessionContext] Failed to create session:', err);
     }
-  }, [showToast, registry, getOrCreateStreamManager, handleWorkItemCreated, setActiveSessionId]);
+  }, [showToast, registry, getOrCreateStreamManager, handleWorkItemCreated, setActiveSessionId, usageAllowed, refreshUsage]);
 
   // Open the session panel (restore last session or create new)
   const openSessionPanel = useCallback(() => {
@@ -758,29 +799,38 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
       return;
     }
 
-    // Validate state transition via state machine
     const machine = getStateMachine(currentActiveId);
-    if (!machine.canSend('SEND')) {
-      console.warn(`[ClaudeSessionContext] Cannot send message: invalid state transition from ${machine.state}`);
+
+    // If we can send directly, do so
+    if (machine.canSend('SEND')) {
+      const streamManager = registry.get(currentActiveId);
+      if (!streamManager) {
+        // Lazy create if needed
+        const session = sessions.get(currentActiveId);
+        if (!session) return;
+        const mgr = ensureStreamManager(currentActiveId, session);
+        machine.send('SEND');
+        mgr.sendMessage(message);
+        return;
+      }
+
+      machine.send('SEND');
+      setSessionStreaming(sessionRefs, currentActiveId, true);
+      streamManager.sendMessage(message);
       return;
     }
 
-    // Get stream manager from registry
-    const streamManager = registry.get(currentActiveId);
-    if (!streamManager) {
-      // Lazy create if needed
-      const session = sessions.get(currentActiveId);
-      if (!session) return;
-      const mgr = ensureStreamManager(currentActiveId, session);
-      machine.send('SEND'); // Transition to connecting
-      mgr.sendMessage(message);
+    // If streaming/connecting, queue the message for later
+    if (machine.canSend('QUEUE')) {
+      const streamManager = registry.get(currentActiveId);
+      if (!streamManager) return;
+
+      machine.send('QUEUE');
+      streamManager.queueMessage(message);
       return;
     }
 
-    // Transition state machine and mark as streaming
-    machine.send('SEND');
-    setSessionStreaming(sessionRefs, currentActiveId, true);
-    streamManager.sendMessage(message);
+    console.warn(`[ClaudeSessionContext] Cannot send message: invalid state transition from ${machine.state}`);
   }, [sessionRefs, registry, sessions, ensureStreamManager, getStateMachine]);
 
   // Retry via the active session's stream manager
@@ -839,6 +889,11 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
   // 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',
@@ -899,13 +954,116 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
 
       setActiveSessionId(id);
       setClaudePanelOpen(true);
+
+      // Refresh usage so UI reflects the new session immediately
+      refreshUsage();
     } catch (err) {
       console.error('[ClaudeSessionContext] Failed to create backlog session:', err);
     }
+  }, [showToast, registry, getOrCreateStreamManager, handleWorkItemCreated, setActiveSessionId, usageAllowed, refreshUsage]);
+
+  // 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' }),
+      });
+
+      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();
+
+      setStandaloneSessions(prev => [...prev, {
+        id,
+        title,
+        featureId: null,
+        featureTitle: null,
+      }]);
+
+      const now = Date.now();
+
+      const greetingMessage: ClaudeMessage = {
+        type: 'assistant',
+        content: 'Ahoy. Your project is set up and ready to go.',
+        timestamp: now,
+      };
+
+      const backlogTip: ClaudeMessage = {
+        type: 'gate',
+        gateType: 'tip',
+        gateData: {
+          id: 'tip-backlog',
+          icon: '📋',
+          title: 'The Backlog',
+          body: 'The backlog is where all your work items live.\n\n**Features** — new user-facing capabilities\n**Chores** — technical tasks\n**Bugs** — something broke\n**Epics** — a group of related features and chores',
+        },
+        timestamp: now + 1,
+      };
+
+      const workflowTip: ClaudeMessage = {
+        type: 'gate',
+        gateType: 'tip',
+        gateData: {
+          id: 'tip-workflow',
+          icon: '🔄',
+          title: 'How to Work',
+          body: '**1. Start** — click \'start\' on a work item to open a chat\n**2. Chat** — work through it with Claude\n**3. Close** — close the chat and start what\'s next',
+        },
+        timestamp: now + 2,
+      };
+
+      const ctaMessage: ClaudeMessage = {
+        type: 'assistant',
+        content: 'Close this welcome chat and start your first onboarding chore\u2014**Align on the user journey**.',
+        timestamp: now + 3,
+      };
+
+      const welcomeMessages = [greetingMessage, backlogTip, workflowTip, ctaMessage];
+
+      const streamManager = getOrCreateStreamManager(id, true, handleWorkItemCreated);
+      registry.acquire(id);
+      streamManager.setMessages(welcomeMessages);
+
+      const newSession: Session = {
+        id,
+        title,
+        type: 'standalone',
+        messages: welcomeMessages,
+        status: 'idle',
+        error: null,
+        exitCode: null,
+        narratedMode: false,
+      };
+
+      setSessions(prev => {
+        const updated = new Map(prev);
+        updated.set(id, newSession);
+        return updated;
+      });
+
+      setActiveSessionId(id);
+      setClaudePanelOpen(true);
+    } catch (err) {
+      console.error('[ClaudeSessionContext] Failed to create welcome session:', err);
+    }
   }, [showToast, registry, getOrCreateStreamManager, handleWorkItemCreated, setActiveSessionId]);
 
   // 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', {
@@ -969,11 +1127,113 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
       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 run scenario session:', err);
       showToast('Failed to create session. Please try again.', 'error');
     }
-  }, [showToast, registry, getOrCreateStreamManager, handleWorkItemCreated, setActiveSessionId, getStateMachine]);
+  }, [showToast, registry, getOrCreateStreamManager, handleWorkItemCreated, setActiveSessionId, getStateMachine, usageAllowed, refreshUsage]);
+
+  // 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 }),
+      });
+
+      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();
+
+      setStandaloneSessions(prev => [...prev, {
+        id,
+        title,
+        featureId: null,
+        featureTitle: null,
+      }]);
+
+      const promptParts = [
+        'A BDD scenario is failing and needs to be fixed.',
+        '',
+        `**Scenario:** ${scenarioTitle}`,
+        `**Feature file:** ${featureFile}`,
+      ];
+
+      if (failedStep) {
+        promptParts.push(`**Failed step:** ${failedStep}`);
+      }
+
+      promptParts.push('**Error:**', '```', error, '```');
+
+      if (steps && steps.length > 0) {
+        promptParts.push('', '**Scenario steps:**');
+        steps.forEach(step => promptParts.push(`  ${step}`));
+      }
+
+      promptParts.push('', 'Please investigate this failure, identify the root cause, and fix it.');
+
+      const userMessage: ClaudeMessage = {
+        type: 'user',
+        content: promptParts.join('\n'),
+        timestamp: Date.now(),
+      };
+
+      const streamManager = getOrCreateStreamManager(id, true, handleWorkItemCreated);
+      registry.acquire(id);
+      streamManager.setMessages([userMessage]);
+
+      const newSession: Session = {
+        id,
+        title,
+        type: 'standalone',
+        messages: [userMessage],
+        status: 'idle',
+        error: null,
+        exitCode: null,
+        narratedMode: true,
+      };
+
+      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 scenario 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
@@ -1018,6 +1278,7 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
     error: activeSession?.error ?? null,
     exitCode: activeSession?.exitCode ?? null,
     canRetry: activeStreamManager?.canRetry ?? false,
+    queuedMessage: activeStreamManager?.queuedMessage ?? null,
     narratedMode: activeSession?.narratedMode ?? false,
     toggleNarratedMode,
 
@@ -1029,6 +1290,8 @@ export function ClaudeSessionProvider({ children }: { children: ReactNode }) {
     createNewSession,
     createAddToBacklogSession,
     createRunScenarioSession,
+    createFixScenarioSession,
+    createWelcomeSession,
 
     // Stream actions (now go through registry)
     sendMessage,

package/apps/dashboard/contexts/UsageContext.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
+import { useWebSocket, type WebSocketMessage } from '../hooks/useWebSocket';
+
+const FREE_WEEKLY_LIMIT = 20;
+
+interface UsageState {
+  used: number;
+  limit: number;
+  remaining: number;
+  allowed: boolean;
+  plan: string;
+  loading: boolean;
+}
+
+interface UsageContextValue extends UsageState {
+  refresh: () => Promise<void>;
+}
+
+const UsageContext = createContext<UsageContextValue | null>(null);
+
+export function UsageProvider({ children }: { children: ReactNode }) {
+  const [state, setState] = useState<UsageState>({
+    used: 0,
+    limit: FREE_WEEKLY_LIMIT,
+    remaining: FREE_WEEKLY_LIMIT,
+    allowed: true,
+    plan: 'free',
+    loading: true,
+  });
+
+  const fetchUsage = useCallback(async () => {
+    // Get plan from auth (if Electron)
+    let plan = 'free';
+    try {
+      if (window.electronAPI?.isElectron) {
+        const status = await window.electronAPI.auth.getStatus();
+        if (status.authenticated && status.user) {
+          plan = status.user.plan || 'free';
+        }
+      }
+    } catch {
+      // Auth unavailable — default to free
+    }
+
+    // Paid plans have unlimited usage
+    if (plan !== 'free') {
+      setState({
+        used: 0,
+        limit: Infinity,
+        remaining: Infinity,
+        allowed: true,
+        plan,
+        loading: false,
+      });
+      return;
+    }
+
+    // Free plan — count from local DB via API route
+    try {
+      const res = await fetch('/api/usage');
+      console.log('[usage] UsageContext fetch status:', res.status);
+      if (!res.ok) {
+        console.error('[usage] UsageContext fetch not ok:', res.status, res.statusText);
+        setState(prev => ({ ...prev, allowed: true, loading: false }));
+        return;
+      }
+      const usage = await res.json();
+      console.log('[usage] UsageContext received:', usage);
+      setState({
+        used: typeof usage.used === 'number' ? usage.used : 0,
+        limit: typeof usage.limit === 'number' ? usage.limit : FREE_WEEKLY_LIMIT,
+        remaining: typeof usage.remaining === 'number' ? usage.remaining : FREE_WEEKLY_LIMIT,
+        allowed: typeof usage.allowed === 'boolean' ? usage.allowed : true,
+        plan,
+        loading: false,
+      });
+    } catch (err) {
+      console.error('[usage] UsageContext fetch error:', err);
+      setState(prev => ({ ...prev, allowed: true, loading: false }));
+    }
+  }, []);
+
+  // Fetch on mount
+  useEffect(() => {
+    fetchUsage();
+  }, [fetchUsage]);
+
+  // Refresh on window focus
+  useEffect(() => {
+    const handleFocus = () => fetchUsage();
+    window.addEventListener('focus', handleFocus);
+    return () => window.removeEventListener('focus', handleFocus);
+  }, [fetchUsage]);
+
+  // Refresh on WebSocket db_change events (e.g., CLI creates a work item)
+  const handleWsMessage = useCallback((message: WebSocketMessage) => {
+    if (message.type === 'db_change') {
+      fetchUsage();
+    }
+  }, [fetchUsage]);
+
+  const wsUrl = typeof window !== 'undefined'
+    ? `ws://${window.location.hostname}:47808`
+    : 'ws://localhost:47808';
+
+  useWebSocket({ url: wsUrl, onMessage: handleWsMessage });
+
+  return (
+    <UsageContext.Provider value={{ ...state, refresh: fetchUsage }}>
+      {children}
+    </UsageContext.Provider>
+  );
+}
+
+export function useUsage() {
+  const context = useContext(UsageContext);
+  if (!context) {
+    return {
+      used: 0,
+      limit: FREE_WEEKLY_LIMIT,
+      remaining: FREE_WEEKLY_LIMIT,
+      allowed: true,
+      plan: 'free',
+      loading: false,
+      refresh: async () => {},
+    };
+  }
+  return context;
+}

package/apps/dashboard/contexts/usageHelpers.js

@@ -0,0 +1,9 @@
+function checkUsageLimit(plan, used, limit) {
+  if (plan !== 'free') {
+    return { allowed: true, used: 0, limit: Infinity, remaining: Infinity };
+  }
+  const remaining = Math.max(0, limit - used);
+  return { allowed: remaining > 0, used, limit, remaining };
+}
+
+module.exports = { checkUsageLimit };