@pennyfarthing/core 11.4.0 → 12.0.0

package/packages/core/src/public/hooks/usePersona.ts

@@ -4,14 +4,11 @@
  * React hook for fetching and subscribing to persona data.
  * Story MSSCI-12700 - PersonaHeader Component
  * Story MSSCI-12860 - IPC to WebSocket Migration (Phase 1)
- *
- * Provides:
- * - character: Current agent character name
- * - theme: Current theme name
- * - role: Agent role/title
+ * Story 124-3 - Refactored to use DataSource<T> pattern
  */
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useCallback } from 'react';
+import { useRawDataSource } from './useDataSource.js';
 
 export interface TandemAgentData {
   character: string;
@@ -42,71 +39,39 @@ export function usePersona(): UsePersonaResult {
   const [isStreaming, setIsStreaming] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
-  const wsRef = useRef<WebSocket | null>(null);
-  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
-
-  useEffect(() => {
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${protocol}//${window.location.host}/ws/persona`;
-
-    const connect = () => {
-      try {
-        wsRef.current = new WebSocket(wsUrl);
-
-        wsRef.current.onopen = () => {
-          console.debug('[usePersona] WebSocket connected');
-        };
-
-        wsRef.current.onmessage = (event) => {
-          try {
-            const data = JSON.parse(event.data);
-
-            // Story 94-1: Handle streaming state updates
-            if (data.type === 'streaming') {
-              setIsStreaming(data.isStreaming ?? false);
-              return;
-            }
 
-            // Persona data (initial or agent change) — extract isStreaming if present
-            if (data.isStreaming !== undefined) {
-              setIsStreaming(data.isStreaming);
-            }
-            setPersona(data as PersonaData);
-            setIsLoading(false);
-            setError(null);
-          } catch (err) {
-            console.error('[usePersona] Failed to parse message:', err);
-          }
-        };
-
-        wsRef.current.onclose = () => {
-          console.debug('[usePersona] WebSocket closed, reconnecting...');
-          setIsStreaming(false);
-          reconnectTimeoutRef.current = setTimeout(connect, 2000);
-        };
-
-        wsRef.current.onerror = (err) => {
-          console.error('[usePersona] WebSocket error:', err);
-          setError(new Error('WebSocket connection failed'));
-        };
-      } catch (err) {
-        console.error('[usePersona] WebSocket init failed:', err);
-        setError(err instanceof Error ? err : new Error('Failed to connect'));
-        setIsLoading(false);
-      }
-    };
+  const handleMessage = useCallback((data: unknown) => {
+    const msg = data as { type?: string; isStreaming?: boolean } & PersonaData;
+
+    // Story 94-1: Handle streaming state updates
+    if (msg.type === 'streaming') {
+      setIsStreaming(msg.isStreaming ?? false);
+      return;
+    }
+
+    // Persona data (initial or agent change) — extract isStreaming if present
+    if (msg.isStreaming !== undefined) {
+      setIsStreaming(msg.isStreaming);
+    }
+    setPersona(msg as PersonaData);
+    setIsLoading(false);
+    setError(null);
+  }, []);
 
-    connect();
+  const handleClose = useCallback(() => {
+    setIsStreaming(false);
+  }, []);
 
-    return () => {
-      if (reconnectTimeoutRef.current) {
-        clearTimeout(reconnectTimeoutRef.current);
-      }
-      if (wsRef.current) {
-        wsRef.current.close();
-      }
-    };
+  const handleError = useCallback((err: Error) => {
+    setError(err);
   }, []);
 
+  useRawDataSource({
+    endpoint: '/ws/persona',
+    onMessage: handleMessage,
+    onClose: handleClose,
+    onError: handleError,
+  });
+
   return { persona, isStreaming, isLoading, error };
 }

package/packages/core/src/public/hooks/useSprint.ts

@@ -3,11 +3,12 @@
  *
  * React hook for subscribing to sprint data.
  * Story MSSCI-14189 - Enhanced Sprint Panel
+ * Story 124-3 - Refactored to use DataSource<T> pattern
  *
- * Uses WebSocket /ws/sprint for real-time updates.
+ * Uses DataSource via useDataSource for real-time updates.
  */
 
-import { useState, useEffect, useRef } from 'react';
+import { useDataSource } from './useDataSource.js';
 
 // =============================================================================
 // Types matching EnhancedSprintPanel expectations
@@ -54,6 +55,14 @@ export interface FutureEpic {
   children: FutureEpicChild[];
 }
 
+export interface SprintRegistry {
+  name: string;
+  type: string;
+  description: string;
+  file: string;
+  isDefault: boolean;
+}
+
 export interface SprintData {
   currentStory: SprintStory | null;
   nextStory: SprintStory | null;
@@ -67,6 +76,7 @@ export interface SprintData {
     inProgress: number;
     endDate: string;
   };
+  registry?: SprintRegistry;
 }
 
 interface UseSprintResult {
@@ -81,77 +91,15 @@ interface SprintMessage extends Partial<SprintData> {
 }
 
 export function useSprint(): UseSprintResult {
-  const [data, setData] = useState<SprintData | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-  const wsRef = useRef<WebSocket | null>(null);
-  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
-  const isMountedRef = useRef(true);
-
-  useEffect(() => {
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${protocol}//${window.location.host}/ws/sprint`;
-
-    const connect = () => {
-      // Don't reconnect if component has unmounted
-      if (!isMountedRef.current) {
-        return;
-      }
-
-      try {
-        wsRef.current = new WebSocket(wsUrl);
-
-        wsRef.current.onopen = () => {
-          console.debug('[useSprint] WebSocket connected');
-        };
-
-        wsRef.current.onmessage = (event) => {
-          try {
-            const msg = JSON.parse(event.data) as SprintMessage;
-            if (msg.type === 'init' || msg.type === 'update') {
-              // Extract data, excluding type field
-              const { type: _type, ...sprintData } = msg;
-              setData((prev) => {
-                if (!prev) return sprintData as SprintData;
-                // Merge partial updates
-                return { ...prev, ...sprintData } as SprintData;
-              });
-              setIsLoading(false);
-              setError(null);
-            }
-          } catch (err) {
-            console.error('[useSprint] Failed to parse message:', err);
-          }
-        };
-
-        wsRef.current.onclose = () => {
-          console.debug('[useSprint] WebSocket closed, reconnecting...');
-          reconnectTimeoutRef.current = setTimeout(connect, 2000);
-        };
-
-        wsRef.current.onerror = (err) => {
-          console.error('[useSprint] WebSocket error:', err);
-          setError(new Error('WebSocket connection failed'));
-        };
-      } catch (err) {
-        console.error('[useSprint] WebSocket init failed:', err);
-        setError(err instanceof Error ? err : new Error('Failed to connect'));
-        setIsLoading(false);
-      }
-    };
-
-    connect();
-
-    return () => {
-      isMountedRef.current = false;
-      if (reconnectTimeoutRef.current) {
-        clearTimeout(reconnectTimeoutRef.current);
-      }
-      if (wsRef.current) {
-        wsRef.current.close();
-      }
-    };
-  }, []);
-
-  return { data, isLoading, error };
+  return useDataSource<SprintMessage, SprintData>({
+    endpoint: '/ws/sprint',
+    transform: (msg) => {
+      const { type: _type, ...sprintData } = msg;
+      return sprintData as SprintData;
+    },
+    merge: (prev, update) => {
+      if (!prev) return update;
+      return { ...prev, ...update, registry: update.registry };
+    },
+  });
 }

package/packages/core/src/public/hooks/useStatsStrip.ts

@@ -3,14 +3,16 @@
  *
  * React hook for fetching and subscribing to stats strip data.
  * Story MSSCI-12699 - StatsStrip Component
+ * Story 124-3 - Refactored to use DataSource<T> pattern
  *
- * IPC DEPRECATED - Now uses WebSocket for all data:
- * - /ws/context: Context percentage, used/total tokens
- * - /ws/stats: Model name
+ * Multi-source DataSource composition:
+ * - /ws/context: Context percentage, used/total tokens (WebSocket DataSource)
+ * - /ws/stats: Model name (WebSocket DataSource)
  * - /api/identity: PWD, Jira email, GitHub username (REST, fetched once)
  */
 
 import { useState, useEffect, useCallback, useRef } from 'react';
+import { useRawDataSource } from './useDataSource.js';
 
 export interface ContextData {
   percent: number;
@@ -36,8 +38,6 @@ interface UseStatsStripResult {
   error: Error | null;
 }
 
-const WS_RECONNECT_DELAY = 2000;
-
 export function useStatsStrip(): UseStatsStripResult {
   const [context, setContext] = useState<ContextData | null>(null);
   const [stats, setStats] = useState<StatsData | null>(null);
@@ -59,129 +59,59 @@ export function useStatsStrip(): UseStatsStripResult {
     }
   }, []);
 
-  // WebSocket for /ws/context
-  useEffect(() => {
-    let ws: WebSocket | null = null;
-    let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
-    let mounted = true;
-
-    const connect = () => {
-      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-      ws = new WebSocket(`${protocol}//${window.location.host}/ws/context`);
-
-      ws.onopen = () => {
-        console.log('[useStatsStrip] Context WebSocket connected');
-      };
-
-      ws.onmessage = (event) => {
-        try {
-          const data = JSON.parse(event.data);
-          if (data.type === 'init' || data.type === 'update') {
-            const ctx = data.context;
-            if (ctx) {
-              setContext({
-                percent: ctx.percent ?? 0,
-                used: ctx.tokens ?? undefined,
-                total: ctx.available ? (ctx.tokens ?? 0) + ctx.available : undefined,
-              });
-            }
-            if (!loadStateRef.current.context) {
-              loadStateRef.current.context = true;
-              checkLoadComplete();
-            }
-          }
-        } catch (err) {
-          console.error('[useStatsStrip] Failed to parse context message:', err);
-        }
-      };
-
-      ws.onclose = () => {
-        if (mounted) {
-          reconnectTimer = setTimeout(connect, WS_RECONNECT_DELAY);
-        }
-      };
-
-      ws.onerror = (err) => {
-        console.error('[useStatsStrip] Context WebSocket error:', err);
-        ws?.close();
-      };
-    };
-
-    connect();
-
-    return () => {
-      mounted = false;
-      if (reconnectTimer) clearTimeout(reconnectTimer);
-      ws?.close();
-    };
+  // DataSource for /ws/context
+  const handleContextMessage = useCallback((data: unknown) => {
+    const msg = data as { type?: string; context?: { percent?: number; tokens?: number; available?: number } };
+    if (msg.type === 'init' || msg.type === 'update') {
+      const ctx = msg.context;
+      if (ctx) {
+        setContext({
+          percent: ctx.percent ?? 0,
+          used: ctx.tokens ?? undefined,
+          total: ctx.available ? (ctx.tokens ?? 0) + ctx.available : undefined,
+        });
+      }
+      if (!loadStateRef.current.context) {
+        loadStateRef.current.context = true;
+        checkLoadComplete();
+      }
+    }
   }, [checkLoadComplete]);
 
-  // WebSocket for /ws/stats
-  useEffect(() => {
-    let ws: WebSocket | null = null;
-    let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
-    let mounted = true;
-
-    const connect = () => {
-      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-      ws = new WebSocket(`${protocol}//${window.location.host}/ws/stats`);
-
-      ws.onopen = () => {
-        console.log('[useStatsStrip] Stats WebSocket connected');
-      };
-
-      ws.onmessage = (event) => {
-        try {
-          const data = JSON.parse(event.data);
-          // Stats sends data directly (not wrapped in type)
-          setStats({ model: data.model ?? null });
-          // Also extract pwd from stats (updated on Bash tool completions)
-          if (data.pwd) {
-            setProjectInfo(prev => ({
-              pwd: data.pwd,
-              jiraEmail: prev?.jiraEmail ?? null,
-              githubUsername: prev?.githubUsername ?? null,
-            }));
-          }
-          if (!loadStateRef.current.stats) {
-            loadStateRef.current.stats = true;
-            checkLoadComplete();
-          }
-        } catch (err) {
-          console.error('[useStatsStrip] Failed to parse stats message:', err);
-        }
-      };
-
-      ws.onclose = () => {
-        if (mounted) {
-          reconnectTimer = setTimeout(connect, WS_RECONNECT_DELAY);
-        }
-      };
-
-      ws.onerror = (err) => {
-        console.error('[useStatsStrip] Stats WebSocket error:', err);
-        ws?.close();
-      };
-    };
-
-    connect();
+  useRawDataSource({
+    endpoint: '/ws/context',
+    onMessage: handleContextMessage,
+  });
 
-    return () => {
-      mounted = false;
-      if (reconnectTimer) clearTimeout(reconnectTimer);
-      ws?.close();
-    };
+  // DataSource for /ws/stats
+  const handleStatsMessage = useCallback((data: unknown) => {
+    const msg = data as { model?: string; pwd?: string };
+    setStats({ model: msg.model ?? null });
+    if (msg.pwd) {
+      setProjectInfo(prev => ({
+        pwd: msg.pwd!,
+        jiraEmail: prev?.jiraEmail ?? null,
+        githubUsername: prev?.githubUsername ?? null,
+      }));
+    }
+    if (!loadStateRef.current.stats) {
+      loadStateRef.current.stats = true;
+      checkLoadComplete();
+    }
   }, [checkLoadComplete]);
 
-  // REST for /api/identity (jiraEmail, githubUsername - fetched once)
-  // pwd comes from /ws/stats (updated on Bash tool completions)
+  useRawDataSource({
+    endpoint: '/ws/stats',
+    onMessage: handleStatsMessage,
+  });
+
+  // REST for /api/identity (fetched once)
   useEffect(() => {
     const fetchIdentity = async () => {
       try {
         const response = await fetch('/api/identity');
         if (response.ok) {
           const data = await response.json();
-          // Merge with existing projectInfo (preserve pwd from stats)
           setProjectInfo(prev => ({
             pwd: prev?.pwd ?? '',
             jiraEmail: data.jiraEmail ?? null,

package/packages/core/src/public/hooks/useStory.ts

@@ -4,11 +4,13 @@
  * React hook for subscribing to story/sprint data.
  * Story MSSCI-12717 - React Migration
  * Story MSSCI-12860 - IPC to WebSocket Migration (Phase 1)
+ * Story 124-3 - Refactored to use DataSource<T> pattern
  *
- * Uses WebSocket /ws/story for real-time updates (no polling).
+ * Uses DataSource via useDataSource for real-time updates (no polling).
  */
 
-import { useState, useEffect, useRef } from 'react';
+import { useState } from 'react';
+import { useDataSource } from './useDataSource.js';
 
 // Import types from story-parser for criteria and workflow
 import type { CriteriaItem, WorkflowPhase, AvailableWorkflow } from '../../../story-parser.js';
@@ -70,66 +72,15 @@ function transformMessage(msg: StoryMessage): StoryData | null {
 }
 
 export function useStory(): UseStoryResult {
-  const [story, setStory] = useState<StoryData | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
   const [availableWorkflows, setAvailableWorkflows] = useState<AvailableWorkflow[] | null>(null);
-  const wsRef = useRef<WebSocket | null>(null);
-  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
-  useEffect(() => {
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${protocol}//${window.location.host}/ws/story`;
-
-    const connect = () => {
-      try {
-        wsRef.current = new WebSocket(wsUrl);
-
-        wsRef.current.onopen = () => {
-          console.debug('[useStory] WebSocket connected');
-        };
-
-        wsRef.current.onmessage = (event) => {
-          try {
-            const msg = JSON.parse(event.data) as StoryMessage;
-            if (msg.type === 'init' || msg.type === 'update') {
-              setStory(transformMessage(msg));
-              setAvailableWorkflows(msg.availableWorkflows ?? null);
-              setIsLoading(false);
-              setError(null);
-            }
-          } catch (err) {
-            console.error('[useStory] Failed to parse message:', err);
-          }
-        };
-
-        wsRef.current.onclose = () => {
-          console.debug('[useStory] WebSocket closed, reconnecting...');
-          reconnectTimeoutRef.current = setTimeout(connect, 2000);
-        };
-
-        wsRef.current.onerror = (err) => {
-          console.error('[useStory] WebSocket error:', err);
-          setError(new Error('WebSocket connection failed'));
-        };
-      } catch (err) {
-        console.error('[useStory] WebSocket init failed:', err);
-        setError(err instanceof Error ? err : new Error('Failed to connect'));
-        setIsLoading(false);
-      }
-    };
-
-    connect();
-
-    return () => {
-      if (reconnectTimeoutRef.current) {
-        clearTimeout(reconnectTimeoutRef.current);
-      }
-      if (wsRef.current) {
-        wsRef.current.close();
-      }
-    };
-  }, []);
+  const { data: story, isLoading, error } = useDataSource<StoryMessage, StoryData | null>({
+    endpoint: '/ws/story',
+    transform: (msg) => {
+      setAvailableWorkflows(msg.availableWorkflows ?? null);
+      return transformMessage(msg);
+    },
+  });
 
   return { story, isLoading, error, availableWorkflows };
 }

package/packages/core/src/public/hooks/useTodos.ts

@@ -2,11 +2,12 @@
  * useTodos Hook
  *
  * React hook for subscribing to todo list data.
- * Uses WebSocket /ws/todos for real-time updates (no polling).
+ * Uses DataSource via useDataSource for real-time updates (no polling).
  * Story MSSCI-12717 - React Migration
+ * Story 124-3 - Refactored to use DataSource<T> pattern
  */
 
-import { useState, useEffect, useRef } from 'react';
+import { useDataSource } from './useDataSource.js';
 
 export interface TodoItem {
   id: string;
@@ -30,64 +31,10 @@ interface TodosMessage {
 }
 
 export function useTodos(): UseTodosResult {
-  const [todos, setTodos] = useState<TodoItem[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-  const wsRef = useRef<WebSocket | null>(null);
-  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const { data, isLoading, error } = useDataSource<TodosMessage, TodoItem[]>({
+    endpoint: '/ws/todos',
+    transform: (msg) => msg.todos || [],
+  });
 
-  useEffect(() => {
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${protocol}//${window.location.host}/ws/todos`;
-
-    const connect = () => {
-      try {
-        wsRef.current = new WebSocket(wsUrl);
-
-        wsRef.current.onopen = () => {
-          console.debug('[useTodos] WebSocket connected');
-        };
-
-        wsRef.current.onmessage = (event) => {
-          try {
-            const msg = JSON.parse(event.data) as TodosMessage;
-            if (msg.type === 'init' || msg.type === 'update') {
-              setTodos(msg.todos || []);
-              setIsLoading(false);
-              setError(null);
-            }
-          } catch (err) {
-            console.error('[useTodos] Failed to parse message:', err);
-          }
-        };
-
-        wsRef.current.onclose = () => {
-          console.debug('[useTodos] WebSocket closed, reconnecting...');
-          reconnectTimeoutRef.current = setTimeout(connect, 2000);
-        };
-
-        wsRef.current.onerror = (err) => {
-          console.error('[useTodos] WebSocket error:', err);
-          setError(new Error('WebSocket connection failed'));
-        };
-      } catch (err) {
-        console.error('[useTodos] WebSocket init failed:', err);
-        setError(err instanceof Error ? err : new Error('Failed to connect'));
-        setIsLoading(false);
-      }
-    };
-
-    connect();
-
-    return () => {
-      if (reconnectTimeoutRef.current) {
-        clearTimeout(reconnectTimeoutRef.current);
-      }
-      if (wsRef.current) {
-        wsRef.current.close();
-      }
-    };
-  }, []);
-
-  return { todos, isLoading, error };
+  return { todos: data ?? [], isLoading, error };
 }

package/packages/core/src/public/index.ts

@@ -0,0 +1,5 @@
+// Core public API barrel exports
+// Story 124-3: DataSource<T> abstraction
+
+export type { DataSource, DataSourceOptions, Unsubscribe } from './data-source.js';
+export { MockDataSource } from './data-source.js';