@pennyfarthing/core 11.3.8 → 11.4.0

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

@@ -0,0 +1,204 @@
+/**
+ * useStatsStrip Hook
+ *
+ * React hook for fetching and subscribing to stats strip data.
+ * Story MSSCI-12699 - StatsStrip Component
+ *
+ * IPC DEPRECATED - Now uses WebSocket for all data:
+ * - /ws/context: Context percentage, used/total tokens
+ * - /ws/stats: Model name
+ * - /api/identity: PWD, Jira email, GitHub username (REST, fetched once)
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+export interface ContextData {
+  percent: number;
+  used?: number;
+  total?: number;
+}
+
+export interface StatsData {
+  model: string | null;
+}
+
+export interface ProjectInfoData {
+  pwd: string;
+  jiraEmail: string | null;
+  githubUsername: string | null;
+}
+
+interface UseStatsStripResult {
+  context: ContextData | null;
+  stats: StatsData | null;
+  projectInfo: ProjectInfoData | null;
+  isLoading: boolean;
+  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);
+  const [projectInfo, setProjectInfo] = useState<ProjectInfoData | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  // Track load state for each source
+  const loadStateRef = useRef({
+    context: false,
+    stats: false,
+    projectInfo: false,
+  });
+
+  const checkLoadComplete = useCallback(() => {
+    const state = loadStateRef.current;
+    if (state.context && state.stats && state.projectInfo) {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // 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();
+    };
+  }, [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();
+
+    return () => {
+      mounted = false;
+      if (reconnectTimer) clearTimeout(reconnectTimer);
+      ws?.close();
+    };
+  }, [checkLoadComplete]);
+
+  // REST for /api/identity (jiraEmail, githubUsername - fetched once)
+  // pwd comes from /ws/stats (updated on Bash tool completions)
+  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,
+            githubUsername: data.githubUsername ?? null,
+          }));
+        }
+      } catch (err) {
+        console.error('[useStatsStrip] Failed to fetch identity:', err);
+        setError(err instanceof Error ? err : new Error('Failed to fetch identity'));
+      } finally {
+        loadStateRef.current.projectInfo = true;
+        checkLoadComplete();
+      }
+    };
+
+    fetchIdentity();
+  }, [checkLoadComplete]);
+
+  return { context, stats, projectInfo, isLoading, error };
+}

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

@@ -0,0 +1,135 @@
+/**
+ * useStory Hook
+ *
+ * React hook for subscribing to story/sprint data.
+ * Story MSSCI-12717 - React Migration
+ * Story MSSCI-12860 - IPC to WebSocket Migration (Phase 1)
+ *
+ * Uses WebSocket /ws/story for real-time updates (no polling).
+ */
+
+import { useState, useEffect, useRef } from 'react';
+
+// Import types from story-parser for criteria and workflow
+import type { CriteriaItem, WorkflowPhase, AvailableWorkflow } from '../../../story-parser.js';
+
+export interface StoryData {
+  id: string;
+  title: string;
+  status?: string;
+  phase?: string;
+  workflow?: string;
+  points?: number;
+  epic?: string;
+  // MSSCI-12849: AC and BikeLane panel data
+  criteria?: CriteriaItem[] | null;
+  workflowPhases?: WorkflowPhase[] | null;
+  // MSSCI-14300: Distinguish phased vs stepped workflow rendering
+  workflowType?: string;
+}
+
+// Re-export types for panel components
+export type { CriteriaItem, WorkflowPhase, AvailableWorkflow };
+
+interface UseStoryResult {
+  story: StoryData | null;
+  isLoading: boolean;
+  error: Error | null;
+  // MSSCI-14301: Available workflows for discovery panel
+  availableWorkflows: AvailableWorkflow[] | null;
+}
+
+/** WebSocket message format from /ws/story */
+interface StoryMessage {
+  type: 'init' | 'update';
+  id: string | null;
+  title: string | null;
+  phase?: string | null;
+  status?: string | null;
+  points?: number | null;
+  workflow?: WorkflowPhase[] | null;
+  workflowType?: string | null;
+  criteria?: CriteriaItem[] | null;
+  availableWorkflows?: AvailableWorkflow[] | null;
+  [key: string]: unknown;
+}
+
+/** Transform WebSocket message to StoryData */
+function transformMessage(msg: StoryMessage): StoryData | null {
+  if (!msg.id) return null;
+  return {
+    id: msg.id,
+    title: msg.title ?? '',
+    status: msg.status ?? undefined,
+    phase: msg.phase ?? undefined,
+    points: msg.points ?? undefined,
+    criteria: msg.criteria,
+    workflowPhases: msg.workflow,
+    workflowType: msg.workflowType ?? undefined,
+  };
+}
+
+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();
+      }
+    };
+  }, []);
+
+  return { story, isLoading, error, availableWorkflows };
+}

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

@@ -0,0 +1,64 @@
+/**
+ * useSubagentHelper Hook
+ *
+ * React hook for fetching themed helper data for subagent display.
+ * Story MSSCI-12776 - Theme-Aware Subagent Display Messages
+ *
+ * Combines persona lookup with helper resolution to provide
+ * themed helper information for subagent spans.
+ */
+
+import { useState, useEffect } from 'react';
+import { getAgentHelper, Helper } from '../utils/subagent-display';
+
+export type { Helper };
+
+export interface UseSubagentHelperResult {
+  helper: Helper | null;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+export function useSubagentHelper(): UseSubagentHelperResult {
+  const [helper, setHelper] = useState<Helper | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const fetchHelper = async (role: string) => {
+      try {
+        const helperData = await getAgentHelper(role);
+        setHelper(helperData);
+        setIsLoading(false);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error('Failed to fetch helper'));
+        setIsLoading(false);
+      }
+    };
+
+    // Connect to persona WebSocket for real-time updates
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const ws = new WebSocket(`${protocol}//${window.location.host}/ws/persona`);
+
+    ws.onmessage = (event) => {
+      try {
+        const persona = JSON.parse(event.data) as { role?: string } | null;
+        if (persona?.role) {
+          fetchHelper(persona.role);
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error('Failed to parse persona'));
+        setIsLoading(false);
+      }
+    };
+
+    ws.onerror = () => {
+      setError(new Error('WebSocket connection failed'));
+      setIsLoading(false);
+    };
+
+    return () => ws.close();
+  }, []);
+
+  return { helper, isLoading, error };
+}

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

@@ -0,0 +1,52 @@
+/**
+ * useSyntaxHighlighter Hook
+ *
+ * Story MSSCI-13970: React hook for syntax highlighting code blocks.
+ * Extracted from js/components/message-view/syntax-highlighter.js
+ *
+ * Features:
+ * - Multi-language support (JS/TS, Python, Go, Rust, Bash)
+ * - Tokenizer-based highlighting (keyword, string, comment, number, function)
+ * - Theme-aware via CSS variables
+ * - Memoization for performance
+ */
+
+import { useMemo } from 'react';
+import { highlightCode, isSupportedLanguage } from '../utils/syntax';
+
+export interface UseSyntaxHighlighterResult {
+  /** HTML string with syntax highlighting spans */
+  highlighted: string;
+  /** Whether the language is supported for highlighting */
+  isSupported: boolean;
+}
+
+/**
+ * React hook for syntax highlighting code blocks with memoization.
+ *
+ * @param code - Code to highlight (already HTML-escaped, or null)
+ * @param lang - Language identifier (js, ts, python, go, rust, bash, etc.)
+ * @returns Object with highlighted HTML and support status
+ *
+ * @example
+ * ```tsx
+ * const { highlighted, isSupported } = useSyntaxHighlighter(code, 'typescript');
+ * return <pre dangerouslySetInnerHTML={{ __html: highlighted }} />;
+ * ```
+ */
+export function useSyntaxHighlighter(
+  code: string | null,
+  lang: string
+): UseSyntaxHighlighterResult {
+  const isSupported = useMemo(() => {
+    return lang ? isSupportedLanguage(lang) : false;
+  }, [lang]);
+
+  const highlighted = useMemo(() => {
+    if (!code) return '';
+    if (!lang || !isSupported) return code;
+    return highlightCode(code, lang);
+  }, [code, lang, isSupported]);
+
+  return { highlighted, isSupported };
+}

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

@@ -0,0 +1,124 @@
+/**
+ * useTabCompletion Hook
+ *
+ * React hook for slash command tab completion.
+ * Story MSSCI-12717 - React Migration
+ */
+
+import { useState, useCallback, useMemo } from 'react';
+import { SLASH_COMMANDS, trackCommandUsage, filterCommands as filterCommandsWithFrequency, SlashCommand } from '../utils/slash-commands';
+
+interface CompletionState {
+  visible: boolean;
+  commands: SlashCommand[];
+  selectedIndex: number;
+  prefix: string;
+}
+
+interface UseTabCompletionResult {
+  state: CompletionState;
+  showCompletion: (prefix: string) => void;
+  hideCompletion: () => void;
+  updateCompletion: (prefix: string) => void;
+  navigateUp: () => void;
+  navigateDown: () => void;
+  selectCurrent: () => string | null;
+  isVisible: boolean;
+}
+
+export function useTabCompletion(commands?: SlashCommand[]): UseTabCompletionResult {
+  const allCommands = useMemo(() => commands || SLASH_COMMANDS, [commands]);
+
+  const [state, setState] = useState<CompletionState>({
+    visible: false,
+    commands: [],
+    selectedIndex: 0,
+    prefix: '',
+  });
+
+  const filterCommands = useCallback((prefix: string): SlashCommand[] => {
+    // Use frequency-aware filtering from slash-commands module
+    // Falls back to basic filtering if custom commands provided
+    if (commands) {
+      const search = prefix.toLowerCase();
+      return allCommands.filter(cmd =>
+        cmd.name.toLowerCase().startsWith(search)
+      );
+    }
+    return filterCommandsWithFrequency(prefix);
+  }, [allCommands, commands]);
+
+  const showCompletion = useCallback((prefix: string) => {
+    const filtered = filterCommands(prefix);
+    setState({
+      visible: true,
+      commands: filtered,
+      selectedIndex: 0,
+      prefix,
+    });
+  }, [filterCommands]);
+
+  const hideCompletion = useCallback(() => {
+    setState({
+      visible: false,
+      commands: [],
+      selectedIndex: 0,
+      prefix: '',
+    });
+  }, []);
+
+  const updateCompletion = useCallback((prefix: string) => {
+    const filtered = filterCommands(prefix);
+    if (filtered.length === 0) {
+      hideCompletion();
+    } else {
+      setState(prev => ({
+        ...prev,
+        commands: filtered,
+        selectedIndex: 0,
+        prefix,
+      }));
+    }
+  }, [filterCommands, hideCompletion]);
+
+  const navigateUp = useCallback(() => {
+    setState(prev => {
+      if (prev.commands.length === 0) return prev;
+      const newIndex = prev.selectedIndex <= 0
+        ? prev.commands.length - 1
+        : prev.selectedIndex - 1;
+      return { ...prev, selectedIndex: newIndex };
+    });
+  }, []);
+
+  const navigateDown = useCallback(() => {
+    setState(prev => {
+      if (prev.commands.length === 0) return prev;
+      const newIndex = prev.selectedIndex >= prev.commands.length - 1
+        ? 0
+        : prev.selectedIndex + 1;
+      return { ...prev, selectedIndex: newIndex };
+    });
+  }, []);
+
+  const selectCurrent = useCallback((): string | null => {
+    if (!state.visible || state.commands.length === 0) return null;
+    const selected = state.commands[state.selectedIndex];
+    hideCompletion();
+    if (selected?.name) {
+      trackCommandUsage(selected.name);
+    }
+    return selected?.name || null;
+  }, [state, hideCompletion]);
+
+  return {
+    state,
+    showCompletion,
+    hideCompletion,
+    updateCompletion,
+    navigateUp,
+    navigateDown,
+    selectCurrent,
+    isVisible: state.visible,
+  };
+}