@pennyfarthing/cyclist 10.4.0 → 11.0.0

package/src/public/hooks/useMessageQueue.ts

@@ -1,380 +0,0 @@
-/**
- * useMessageQueue Hook
- *
- * React hook for message queueing while Claude is processing.
- * Story MSSCI-12717 - React Migration
- *
- * Bell Mode (MSSCI-12275):
- * When bell mode is enabled, queued messages are injected into Claude's context
- * via the PostToolUse hook, rather than waiting for Claude to finish.
- *
- * Turn Complete Logic (MSSCI-12450):
- * - Bell mode OFF: All queued messages sent at once when Claude stops
- * - Bell mode ON: Messages injected by hook; remaining queue sent on stop
- *
- * Bell Injected Display (Audit Fix 2026-02-03):
- * - When hook consumes a message, notify via onBellConsumed callback
- * - MessagePanel displays the injected message with 🔔 indicator
- * - "Send Now" button allows immediate injection (abort + submit)
- */
-
-import { useState, useCallback, useRef, useEffect } from 'react';
-
-export interface QueuedMessage {
-  text: string;
-  images: Array<{
-    dataUrl: string;
-    mimeType: string;
-    filename: string;
-  }>;
-}
-
-/** Callback when a message is consumed by bell mode hook */
-export type BellConsumedCallback = (message: QueuedMessage) => void;
-
-/** Functions needed to inject a message immediately */
-export interface InjectDependencies {
-  abort: () => void;
-  submit: (text: string, images: QueuedMessage['images']) => void;
-}
-
-interface UseMessageQueueResult {
-  queue: QueuedMessage[];
-  queueCount: number;
-  isProcessing: boolean;
-  bellMode: boolean;
-  queuePaused: boolean;
-  queueMessage: (message: QueuedMessage) => boolean;
-  dequeueMessage: () => QueuedMessage | null;
-  removeFromQueue: (index: number) => void;
-  clearQueue: () => void;
-  setProcessing: (value: boolean) => void;
-  setBellMode: (value: boolean) => void;
-  pauseQueue: () => void;
-  resumeQueue: () => void;
-  handleTurnComplete: (onSubmit: (text: string, images: QueuedMessage['images']) => void) => void;
-  /** Register callback for when bell mode hook consumes a message */
-  onBellConsumed: (callback: BellConsumedCallback) => () => void;
-  /** Immediately inject a queued message (abort current + submit) */
-  injectMessage: (index: number, deps: InjectDependencies) => Promise<boolean>;
-}
-
-const MAX_QUEUE_SIZE = 10;
-const QUEUE_KEY = 'cyclist-message-queue';
-
-/**
- * Sync queue to bell-queue.json for PostToolUse hook
- * Only writes when bell mode is enabled
- */
-async function syncQueueToFile(queue: QueuedMessage[]): Promise<void> {
-  try {
-    await fetch('/api/bell-queue', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(queue),
-    });
-  } catch (err) {
-    // Ignore errors - bell queue sync is best-effort
-    console.debug('[MessageQueue] Bell queue sync error:', err);
-  }
-}
-
-export function useMessageQueue(): UseMessageQueueResult {
-  const [queue, setQueue] = useState<QueuedMessage[]>(() => {
-    try {
-      const stored = localStorage.getItem(QUEUE_KEY);
-      return stored ? JSON.parse(stored) : [];
-    } catch {
-      return [];
-    }
-  });
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [bellMode, setBellModeState] = useState(false);
-  const [queuePaused, setQueuePaused] = useState(false);
-  const queueRef = useRef(queue);
-  const bellModeRef = useRef(bellMode);
-
-  // Callbacks for bell-consumed events (notifies MessagePanel to display)
-  const bellConsumedCallbacksRef = useRef<Set<BellConsumedCallback>>(new Set());
-
-  // Keep refs in sync
-  useEffect(() => {
-    queueRef.current = queue;
-  }, [queue]);
-
-  useEffect(() => {
-    bellModeRef.current = bellMode;
-  }, [bellMode]);
-
-  // Load bell mode from settings on mount
-  useEffect(() => {
-    // Load via REST
-    fetch('/api/settings')
-      .then(res => res.json())
-      .then((settings: Record<string, unknown>) => {
-        const workflow = settings?.workflow as Record<string, unknown> | undefined;
-        if (workflow?.bell_mode) {
-          setBellModeState(true);
-        }
-      })
-      .catch(err => console.debug('[MessageQueue] Failed to load settings:', err));
-
-    // Subscribe to settings changes via WebSocket
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const ws = new WebSocket(`${protocol}//${window.location.host}/ws/settings`);
-
-    ws.onmessage = (event) => {
-      try {
-        const data = JSON.parse(event.data);
-        if (data.type === 'init' || data.type === 'update') {
-          const workflow = data.settings?.workflow as Record<string, unknown> | undefined;
-          setBellModeState(!!workflow?.bell_mode);
-        }
-      } catch {
-        // Ignore parse errors
-      }
-    };
-
-    return () => ws.close();
-  }, []);
-
-  // Listen for bell-consumed WebSocket events
-  useEffect(() => {
-    // Connect to bell WebSocket for consumed events
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${protocol}//${window.location.host}/ws/bell`;
-
-    let ws: WebSocket | null = null;
-    let reconnectTimeout: ReturnType<typeof setTimeout>;
-
-    const connect = () => {
-      try {
-        ws = new WebSocket(wsUrl);
-
-        ws.onmessage = (event) => {
-          try {
-            const data = JSON.parse(event.data);
-            if (data.type === 'bell-consumed') {
-              // Get the consumed message BEFORE dequeuing (for display callback)
-              const consumedMessage = queueRef.current[0];
-
-              // Dequeue the first message when hook consumes it
-              setQueue(prev => {
-                if (prev.length === 0) return prev;
-                const newQueue = prev.slice(1);
-                try {
-                  localStorage.setItem(QUEUE_KEY, JSON.stringify(newQueue));
-                } catch { /* ignore */ }
-                return newQueue;
-              });
-
-              // Notify all registered callbacks so MessagePanel can display
-              if (consumedMessage) {
-                console.log('[MessageQueue] Bell consumed, notifying callbacks:', consumedMessage.text);
-                bellConsumedCallbacksRef.current.forEach(cb => {
-                  try {
-                    cb(consumedMessage);
-                  } catch (err) {
-                    console.error('[MessageQueue] Bell consumed callback error:', err);
-                  }
-                });
-              }
-            }
-          } catch (err) {
-            console.error('[MessageQueue] Failed to parse bell message:', err);
-          }
-        };
-
-        ws.onclose = () => {
-          console.log('[MessageQueue] Bell WebSocket closed, reconnecting...');
-          reconnectTimeout = setTimeout(connect, 2000);
-        };
-
-        ws.onerror = () => {
-          // Will trigger onclose
-        };
-      } catch (err) {
-        console.debug('[MessageQueue] Bell WebSocket init failed:', err);
-      }
-    };
-
-    connect();
-
-    return () => {
-      clearTimeout(reconnectTimeout);
-      ws?.close();
-    };
-  }, []);
-
-  const saveQueue = useCallback((newQueue: QueuedMessage[]) => {
-    try {
-      localStorage.setItem(QUEUE_KEY, JSON.stringify(newQueue));
-    } catch {
-      // Ignore localStorage errors
-    }
-    // Always sync to file (API checks bell mode)
-    syncQueueToFile(newQueue);
-  }, []);
-
-  const queueMessage = useCallback((message: QueuedMessage): boolean => {
-    if (!message.text.trim() && message.images.length === 0) {
-      return false;
-    }
-    if (queueRef.current.length >= MAX_QUEUE_SIZE) {
-      return false;
-    }
-
-    setQueue(prev => {
-      const newQueue = [...prev, message];
-      saveQueue(newQueue);
-      return newQueue;
-    });
-    return true;
-  }, [saveQueue]);
-
-  const dequeueMessage = useCallback((): QueuedMessage | null => {
-    let dequeued: QueuedMessage | null = null;
-    setQueue(prev => {
-      if (prev.length === 0) return prev;
-      dequeued = prev[0];
-      const newQueue = prev.slice(1);
-      saveQueue(newQueue);
-      return newQueue;
-    });
-    return dequeued;
-  }, [saveQueue]);
-
-  const removeFromQueue = useCallback((index: number) => {
-    setQueue(prev => {
-      if (index < 0 || index >= prev.length) return prev;
-      const newQueue = [...prev.slice(0, index), ...prev.slice(index + 1)];
-      saveQueue(newQueue);
-      return newQueue;
-    });
-  }, [saveQueue]);
-
-  const clearQueue = useCallback(() => {
-    setQueue([]);
-    saveQueue([]);
-  }, [saveQueue]);
-
-  const setProcessing = useCallback((value: boolean) => {
-    setIsProcessing(value);
-  }, []);
-
-  const setBellMode = useCallback((value: boolean) => {
-    setBellModeState(value);
-  }, []);
-
-  const pauseQueue = useCallback(() => {
-    setQueuePaused(true);
-    console.log('[MessageQueue] Queue paused');
-  }, []);
-
-  const resumeQueue = useCallback(() => {
-    setQueuePaused(false);
-    console.log('[MessageQueue] Queue resumed');
-  }, []);
-
-  /**
-   * Handle turn complete - send queued messages based on bell mode
-   * Called when Claude's turn completes (via onComplete callback)
-   *
-   * Bell mode OFF: All queued messages sent at once
-   * Bell mode ON: Remaining messages (not consumed by hook) sent
-   */
-  const handleTurnComplete = useCallback((onSubmit: (text: string, images: QueuedMessage['images']) => void) => {
-    if (queuePaused) {
-      console.log('[MessageQueue] Queue paused, skipping turn complete');
-      return;
-    }
-
-    const currentQueue = queueRef.current;
-    if (currentQueue.length === 0) {
-      return;
-    }
-
-    console.log('[MessageQueue] Turn complete, sending', currentQueue.length, 'queued messages');
-
-    // Send all queued messages
-    for (const msg of currentQueue) {
-      onSubmit(msg.text, msg.images);
-    }
-
-    // Clear the queue
-    setQueue([]);
-    saveQueue([]);
-  }, [queuePaused, saveQueue]);
-
-  /**
-   * Register a callback for when bell mode hook consumes a message.
-   * Returns unsubscribe function.
-   */
-  const onBellConsumed = useCallback((callback: BellConsumedCallback): (() => void) => {
-    bellConsumedCallbacksRef.current.add(callback);
-    return () => {
-      bellConsumedCallbacksRef.current.delete(callback);
-    };
-  }, []);
-
-  /**
-   * Immediately inject a queued message (abort current + submit).
-   * Used for "Send Now" button functionality.
-   *
-   * @param index - Index of message to inject
-   * @param deps - abort and submit functions from Claude context
-   * @returns true if message was injected
-   */
-  const injectMessage = useCallback(async (
-    index: number,
-    deps: InjectDependencies
-  ): Promise<boolean> => {
-    const currentQueue = queueRef.current;
-    if (index < 0 || index >= currentQueue.length) {
-      return false;
-    }
-
-    // Get the message before removing
-    const message = currentQueue[index];
-    if (!message) return false;
-
-    // Remove from queue immediately
-    setQueue(prev => {
-      const newQueue = [...prev.slice(0, index), ...prev.slice(index + 1)];
-      saveQueue(newQueue);
-      return newQueue;
-    });
-
-    // Abort Claude if processing
-    console.log('[MessageQueue] Injecting message, aborting Claude...');
-    deps.abort();
-
-    // Brief delay to let abort complete
-    await new Promise(resolve => setTimeout(resolve, 100));
-
-    // Submit the message
-    console.log('[MessageQueue] Submitting injected message:', message.text);
-    deps.submit(message.text, message.images);
-
-    return true;
-  }, [saveQueue]);
-
-  return {
-    queue,
-    queueCount: queue.length,
-    isProcessing,
-    bellMode,
-    queuePaused,
-    queueMessage,
-    dequeueMessage,
-    removeFromQueue,
-    clearQueue,
-    setProcessing,
-    setBellMode,
-    pauseQueue,
-    resumeQueue,
-    handleTurnComplete,
-    onBellConsumed,
-    injectMessage,
-  };
-}

package/src/public/hooks/useMessageStream.ts

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

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