@pennyfarthing/core 11.3.8 → 11.4.0

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

@@ -0,0 +1,131 @@
+/**
+ * useMessageStream Hook
+ *
+ * React hook for subscribing to Claude message stream via WebSocket.
+ * Migrated from IPC to WebSocket for unified communication.
+ *
+ * Story MSSCI-12698 - MessageView Component with Streaming
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import type { MessageData } from '../types/message';
+
+interface UseMessageStreamResult {
+  messages: MessageData[];
+  isStreaming: boolean;
+  error: Error | null;
+  isConnected: boolean;
+}
+
+interface WebSocketMessage {
+  type: 'message' | 'complete' | 'error' | 'init' | 'mode';
+  message?: {
+    type: string;
+    content?: string | Array<{ type: string; text?: string }>;
+    [key: string]: unknown;
+  };
+  error?: string;
+}
+
+export function useMessageStream(): UseMessageStreamResult {
+  const [messages, setMessages] = useState<MessageData[]>([]);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+
+  const handleWebSocketMessage = useCallback((data: WebSocketMessage) => {
+    if (data.type === 'message' && data.message) {
+      const msg = data.message;
+
+      // Extract content string
+      let contentStr = '';
+      if (typeof msg.content === 'string') {
+        contentStr = msg.content;
+      } else if (Array.isArray(msg.content)) {
+        contentStr = msg.content
+          .filter((c) => c.type === 'text' && c.text)
+          .map((c) => c.text)
+          .join('');
+      }
+
+      // Map SDK 'assistant' type to our internal 'agent' type
+      const messageType = msg.type === 'assistant' ? 'agent' : msg.type as MessageData['type'];
+
+      const message: MessageData = {
+        type: messageType,
+        content: contentStr,
+        timestamp: Date.now(),
+        isStreaming: true,
+      };
+
+      setMessages((prev) => [...prev, message]);
+
+      // Update streaming state for agent messages
+      if (msg.type === 'assistant') {
+        setIsStreaming(true);
+      }
+    } else if (data.type === 'complete') {
+      setIsStreaming(false);
+    } else if (data.type === 'error' && data.error) {
+      setError(new Error(data.error));
+      setIsStreaming(false);
+    }
+  }, []);
+
+  const connect = useCallback(() => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}/ws/claude`;
+
+    const ws = new WebSocket(wsUrl);
+    wsRef.current = ws;
+
+    ws.onopen = () => {
+      console.log('[useMessageStream] Connected');
+      setIsConnected(true);
+      setError(null);
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data) as WebSocketMessage;
+        handleWebSocketMessage(data);
+      } catch (err) {
+        console.error('[useMessageStream] Failed to parse message:', err);
+      }
+    };
+
+    ws.onclose = () => {
+      console.log('[useMessageStream] Disconnected');
+      setIsConnected(false);
+      wsRef.current = null;
+
+      // Attempt reconnection after delay
+      reconnectTimeoutRef.current = setTimeout(() => {
+        console.log('[useMessageStream] Attempting reconnect...');
+        connect();
+      }, 2000);
+    };
+
+    ws.onerror = () => {
+      setError(new Error('WebSocket connection failed'));
+    };
+  }, [handleWebSocketMessage]);
+
+  useEffect(() => {
+    connect();
+
+    return () => {
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+      if (wsRef.current) {
+        wsRef.current.close();
+        wsRef.current = null;
+      }
+    };
+  }, [connect]);
+
+  return { messages, isStreaming, error, isConnected };
+}

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

@@ -0,0 +1,112 @@
+/**
+ * usePersona Hook
+ *
+ * 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
+ */
+
+import { useState, useEffect, useRef } from 'react';
+
+export interface TandemAgentData {
+  character: string;
+  role: string;
+  slug: string;
+  theme: string;
+  isThinking: boolean;
+}
+
+export interface PersonaData {
+  character: string | null;
+  theme: string | null;
+  role: string | null;
+  slug: string | null;
+  quote: string | null;  // Random catchphrase from theme
+  tandemAgent?: TandemAgentData | null;
+}
+
+interface UsePersonaResult {
+  persona: PersonaData | null;
+  isStreaming: boolean;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+export function usePersona(): UsePersonaResult {
+  const [persona, setPersona] = useState<PersonaData | null>(null);
+  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);
+      }
+    };
+
+    connect();
+
+    return () => {
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+      if (wsRef.current) {
+        wsRef.current.close();
+      }
+    };
+  }, []);
+
+  return { persona, isStreaming, isLoading, error };
+}

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

@@ -0,0 +1,105 @@
+/**
+ * usePlanModeExit - Smooth plan mode exit with tirepump choice
+ *
+ * Story: MSSCI-14327
+ *
+ * Handles the transition from plan mode to accept mode after plan approval,
+ * and offers the user a choice to tirepump (commit/push) changes.
+ */
+
+import { useState, useCallback } from 'react';
+import type { Mode } from '../components/ModeSwitch/index';
+
+/** The Claude CLI mode to transition to after plan exit */
+export const PLAN_EXIT_MODE = 'acceptEdits';
+
+export interface PlanModeExitOptions {
+  currentMode: Mode;
+  setMode: (mode: Mode) => void;
+  approved: boolean;
+  wsConnected?: boolean;
+}
+
+export interface TirepumpOption {
+  action: 'tirepump' | 'continue';
+  label: string;
+}
+
+export interface PlanModeExitResult {
+  showTirepumpChoice: boolean;
+  options?: TirepumpOption[];
+  localOnly?: boolean;
+}
+
+export interface TirepumpChoiceOptions {
+  choice: 'tirepump' | 'continue';
+  currentAgent?: string;
+  setMode?: (mode: Mode) => void;
+  onContextClear?: (data: { agent: string }) => void;
+}
+
+export interface TirepumpChoiceResult {
+  contextCleared: boolean;
+  action: 'tirepump' | 'continue';
+}
+
+const TIREPUMP_OPTIONS: TirepumpOption[] = [
+  { action: 'tirepump', label: 'Commit & push changes' },
+  { action: 'continue', label: 'Continue without committing' },
+];
+
+export async function handlePlanModeExit(
+  options: PlanModeExitOptions
+): Promise<PlanModeExitResult> {
+  const { currentMode, setMode, approved, wsConnected } = options;
+
+  if (!approved) {
+    return { showTirepumpChoice: false };
+  }
+
+  // Transition from plan to accept if not already there
+  if (currentMode !== 'accept') {
+    setMode('accept');
+  }
+
+  const localOnly = wsConnected === false;
+
+  return {
+    showTirepumpChoice: true,
+    options: TIREPUMP_OPTIONS,
+    ...(localOnly && { localOnly: true }),
+  };
+}
+
+export async function handleTirepumpChoice(
+  options: TirepumpChoiceOptions
+): Promise<TirepumpChoiceResult> {
+  const { choice, currentAgent, onContextClear } = options;
+
+  if (choice === 'tirepump') {
+    onContextClear?.({ agent: currentAgent ?? '' });
+    return { contextCleared: true, action: 'tirepump' };
+  }
+
+  return { contextCleared: false, action: 'continue' };
+}
+
+export function usePlanModeExit() {
+  const [showChoice, setShowChoice] = useState(false);
+  const [exitResult, setExitResult] = useState<PlanModeExitResult | null>(null);
+
+  const exitPlanMode = useCallback(async (options: PlanModeExitOptions) => {
+    const result = await handlePlanModeExit(options);
+    setExitResult(result);
+    setShowChoice(result.showTirepumpChoice);
+    return result;
+  }, []);
+
+  const chooseTirepump = useCallback(async (options: TirepumpChoiceOptions) => {
+    const result = await handleTirepumpChoice(options);
+    setShowChoice(false);
+    return result;
+  }, []);
+
+  return { showChoice, exitResult, exitPlanMode, chooseTirepump };
+}

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

@@ -0,0 +1,173 @@
+/**
+ * useResponsiveLayout - Responsive breakpoint detection hook
+ *
+ * Story MSSCI-12770: Responsive Breakpoints
+ *
+ * Provides:
+ * - Breakpoint detection (small <1024, medium 1024-1440, large >1440)
+ * - Sidebar width recommendations
+ * - Minimum dimension violation detection
+ * - Resize event handling
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+/**
+ * Breakpoint thresholds in pixels
+ */
+export const BREAKPOINTS = {
+  small: 1024,  // < 1024px
+  large: 1440,  // >= 1440px
+} as const;
+
+/**
+ * Sidebar widths for each breakpoint
+ */
+export const SIDEBAR_WIDTHS = {
+  medium: 300,  // Default width
+  large: 400,   // Expanded width for large screens
+} as const;
+
+/**
+ * Minimum supported dimensions
+ */
+export const MIN_DIMENSIONS = {
+  width: 800,
+  height: 600,
+} as const;
+
+/**
+ * CSS custom property names for breakpoints
+ */
+export const CSS_BREAKPOINT_VARS = '--breakpoint-small: 1024px; --breakpoint-large: 1440px;';
+
+/**
+ * Media query strings for CSS-in-JS usage
+ */
+export const MEDIA_QUERIES = {
+  small: '(max-width: 1023px)',
+  medium: '(min-width: 1024px) and (max-width: 1439px)',
+  large: '(min-width: 1440px)',
+} as const;
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type Breakpoint = 'small' | 'medium' | 'large';
+
+export interface MinimumViolation {
+  width: boolean;
+  height: boolean;
+}
+
+export interface ResponsiveLayoutState {
+  /** Current breakpoint based on window width */
+  breakpoint: Breakpoint;
+  /** True if width < 1024px */
+  isSmall: boolean;
+  /** True if width >= 1024px and < 1440px */
+  isMedium: boolean;
+  /** True if width >= 1440px */
+  isLarge: boolean;
+  /** Current window width */
+  width: number;
+  /** Current window height */
+  height: number;
+  /** Recommended sidebar width for current breakpoint */
+  sidebarWidth: number;
+  /** True if either dimension is below minimum */
+  isBelowMinimum: boolean;
+  /** Which dimensions violate minimums */
+  minimumViolation: MinimumViolation;
+}
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+/**
+ * Determine breakpoint from width
+ */
+function getBreakpoint(width: number): Breakpoint {
+  if (width < BREAKPOINTS.small) {
+    return 'small';
+  }
+  if (width >= BREAKPOINTS.large) {
+    return 'large';
+  }
+  return 'medium';
+}
+
+/**
+ * Get sidebar width for breakpoint
+ */
+function getSidebarWidth(breakpoint: Breakpoint): number {
+  if (breakpoint === 'large') {
+    return SIDEBAR_WIDTHS.large;
+  }
+  return SIDEBAR_WIDTHS.medium;
+}
+
+/**
+ * Check minimum dimension violations
+ */
+function checkMinimumViolation(width: number, height: number): MinimumViolation {
+  return {
+    width: width < MIN_DIMENSIONS.width,
+    height: height < MIN_DIMENSIONS.height,
+  };
+}
+
+// =============================================================================
+// Hook
+// =============================================================================
+
+/**
+ * React hook for responsive layout detection
+ *
+ * Detects current breakpoint based on window dimensions and provides
+ * utilities for responsive behavior.
+ */
+export function useResponsiveLayout(): ResponsiveLayoutState {
+  const getWindowDimensions = useCallback(() => {
+    return {
+      width: typeof window !== 'undefined' ? window.innerWidth : 1200,
+      height: typeof window !== 'undefined' ? window.innerHeight : 800,
+    };
+  }, []);
+
+  const [dimensions, setDimensions] = useState(getWindowDimensions);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setDimensions(getWindowDimensions());
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [getWindowDimensions]);
+
+  const breakpoint = getBreakpoint(dimensions.width);
+  const minimumViolation = checkMinimumViolation(dimensions.width, dimensions.height);
+
+  return {
+    breakpoint,
+    isSmall: breakpoint === 'small',
+    isMedium: breakpoint === 'medium',
+    isLarge: breakpoint === 'large',
+    width: dimensions.width,
+    height: dimensions.height,
+    sidebarWidth: getSidebarWidth(breakpoint),
+    isBelowMinimum: minimumViolation.width || minimumViolation.height,
+    minimumViolation,
+  };
+}
+
+export default useResponsiveLayout;

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

@@ -0,0 +1,157 @@
+/**
+ * useSprint Hook
+ *
+ * React hook for subscribing to sprint data.
+ * Story MSSCI-14189 - Enhanced Sprint Panel
+ *
+ * Uses WebSocket /ws/sprint for real-time updates.
+ */
+
+import { useState, useEffect, useRef } from 'react';
+
+// =============================================================================
+// Types matching EnhancedSprintPanel expectations
+// =============================================================================
+
+export interface SprintStory {
+  id: string;
+  title: string;
+  points: number;
+  status: 'backlog' | 'in_progress' | 'done' | 'cancelled' | 'blocked';
+  jiraKey: string | null;
+  hasContext?: boolean;
+  assignedTo?: string | null;
+  completed?: string | null;
+  started?: string | null;
+  workflow?: string | null;
+  priority?: string | null;
+  description?: string | null;
+}
+
+export interface SprintEpic {
+  id: string;
+  title: string;
+  jiraKey: string | null;
+  stories: SprintStory[];
+  hasContext?: boolean;
+}
+
+export interface FutureEpicChild {
+  id: string;
+  title: string;
+  estimatedPoints: number;
+  status: 'ready' | 'blocked' | 'planning';
+  jiraKey: string | null;
+  storyCount: number;
+}
+
+export interface FutureEpic {
+  id: string;
+  title: string;
+  description: string;
+  estimatedPoints: number;
+  status: 'ready' | 'blocked' | 'planning';
+  children: FutureEpicChild[];
+}
+
+export interface SprintData {
+  currentStory: SprintStory | null;
+  nextStory: SprintStory | null;
+  epics: SprintEpic[];
+  futureEpics: FutureEpic[];
+  sprint: {
+    number: number;
+    name: string;
+    done: number;
+    remaining: number;
+    inProgress: number;
+    endDate: string;
+  };
+}
+
+interface UseSprintResult {
+  data: SprintData | null;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+/** WebSocket message format from /ws/sprint */
+interface SprintMessage extends Partial<SprintData> {
+  type: 'init' | 'update';
+}
+
+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 };
+}