@pennyfarthing/cyclist 10.4.0 → 11.0.0

package/src/public/hooks/useStory.ts

@@ -1,135 +0,0 @@
-/**
- * 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/src/public/hooks/useSubagentHelper.ts

@@ -1,64 +0,0 @@
-/**
- * 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/src/public/hooks/useSyntaxHighlighter.ts

@@ -1,52 +0,0 @@
-/**
- * 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/src/public/hooks/useTabCompletion.ts

@@ -1,124 +0,0 @@
-/**
- * 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,
-  };
-}

package/src/public/hooks/useTodos.ts

@@ -1,93 +0,0 @@
-/**
- * useTodos Hook
- *
- * React hook for subscribing to todo list data.
- * Uses WebSocket /ws/todos for real-time updates (no polling).
- * Story MSSCI-12717 - React Migration
- */
-
-import { useState, useEffect, useRef } from 'react';
-
-export interface TodoItem {
-  id: string;
-  content: string;
-  activeForm: string;
-  status: 'pending' | 'in_progress' | 'completed';
-  blockedBy?: string[];
-  blocks?: string[];
-}
-
-interface UseTodosResult {
-  todos: TodoItem[];
-  isLoading: boolean;
-  error: Error | null;
-}
-
-/** WebSocket message format from /ws/todos */
-interface TodosMessage {
-  type: 'init' | 'update';
-  todos: TodoItem[];
-}
-
-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>>();
-
-  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 };
-}

package/src/public/hooks/useUserAvatar.ts

@@ -1,54 +0,0 @@
-/**
- * useUserAvatar Hook
- *
- * React hook for fetching and managing user avatar state.
- * Story MSSCI-12777 - User Avatar from GitHub/Gravatar
- *
- * Uses avatar-service for fetching with fallback chain:
- * GitHub → Gravatar → Default silhouette
- */
-
-import { useState, useEffect } from 'react';
-import { DEFAULT_AVATAR } from '../utils/avatar-service';
-
-export { DEFAULT_AVATAR };
-
-export interface UseUserAvatarResult {
-  avatarUrl: string | null;
-  isLoading: boolean;
-  error: Error | null;
-}
-
-export function useUserAvatar(): UseUserAvatarResult {
-  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    const fetchAvatar = async () => {
-      try {
-        // Try REST endpoint for avatar
-        const response = await fetch('/api/identity');
-        if (response.ok) {
-          const data = await response.json();
-          if (data.avatarUrl) {
-            setAvatarUrl(data.avatarUrl);
-          } else {
-            setAvatarUrl(DEFAULT_AVATAR);
-          }
-        } else {
-          setAvatarUrl(DEFAULT_AVATAR);
-        }
-        setIsLoading(false);
-      } catch (err) {
-        setError(err instanceof Error ? err : new Error('Failed to fetch avatar'));
-        setAvatarUrl(DEFAULT_AVATAR);
-        setIsLoading(false);
-      }
-    };
-
-    fetchAvatar();
-  }, []);
-
-  return { avatarUrl, isLoading, error };
-}

package/src/public/index.tsx

@@ -1,10 +0,0 @@
-import { createRoot } from 'react-dom/client';
-import App from './App';
-import './styles/tailwind.css';
-import './css/theme-system.css';
-
-// React entry point for Cyclist
-const container = document.getElementById('react-root');
-if (container) {
-  createRoot(container).render(<App />);
-}

package/src/public/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}