@pennyfarthing/core 11.3.7 → 11.4.0

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

@@ -0,0 +1,234 @@
+/**
+ * useMarkerActions Hook
+ *
+ * Detects CYCLIST markers in message content and returns action metadata
+ * for rendering QuickActions buttons.
+ *
+ * Story: MSSCI-12787 - Implement CYCLIST Marker Parsing and Action Buttons
+ *
+ * @see sprint/context/MSSCI-12787-reference/quick-actions.js.deleted
+ */
+
+import { useMemo } from 'react';
+import { detectMarkers, stripMarkers, MARKER_TYPES } from '../../shared/browser.js';
+
+/**
+ * Action types that map to different UI presentations
+ */
+export type ActionType =
+  | 'handoff'   // Show agent button + "Not yet" option
+  | 'yesno'     // Show Yes/No buttons
+  | 'open'      // Show text input
+  | 'choices'   // Show choice buttons
+  | 'continue'  // Show Continue button
+  | 'invoke'    // Auto-execute (no buttons)
+  | 'context_clear'; // Clear context and reload
+
+/**
+ * Result from marker detection
+ */
+export interface MarkerAction {
+  type: ActionType;
+  value?: string;
+  responses?: string[];
+  choices?: Array<{ number: number; text: string }>;
+  autoExecute?: boolean;
+}
+
+/**
+ * Extract option text from message content for numbered choices.
+ * Looks for patterns like "1. Option text" or "1) Option text".
+ */
+function extractChoiceTexts(
+  text: string,
+  choiceNumbers: number[]
+): Array<{ number: number; text: string }> {
+  if (!text) {
+    return choiceNumbers.map(num => ({ number: num, text: `Option ${num}` }));
+  }
+
+  // Remove code blocks
+  const withoutCode = text.replace(/```[\s\S]*?```/g, '');
+
+  // Patterns for numbered lists
+  const patterns = [
+    /^\s*(\d+)\.\s+(.+)$/gm,           // "1. Option text"
+    /^\s*(\d+)\)\s+(.+)$/gm,           // "1) Option text"
+    /\*\*(\d+)[.)]\*\*\s*(.+)/gm,      // "**1.** Option text"
+  ];
+
+  const foundChoices = new Map<number, string>();
+
+  for (const pattern of patterns) {
+    pattern.lastIndex = 0;
+    let match;
+    while ((match = pattern.exec(withoutCode)) !== null) {
+      const num = parseInt(match[1], 10);
+      if (choiceNumbers.includes(num) && !foundChoices.has(num)) {
+        // Clean up the text - remove trailing markdown/formatting
+        let optionText = match[2].trim();
+        // Remove trailing description after " - " or " — " for cleaner button labels
+        const dashIndex = optionText.search(/\s+[-—]\s+/);
+        if (dashIndex > 0 && dashIndex < 30) {
+          optionText = optionText.substring(0, dashIndex);
+        }
+        foundChoices.set(num, optionText);
+      }
+    }
+  }
+
+  // Return choices in order, falling back to "Option N" if not found
+  return choiceNumbers.map(num => ({
+    number: num,
+    text: foundChoices.get(num) || `Option ${num}`,
+  }));
+}
+
+/**
+ * Process detected markers into action metadata
+ */
+function processMarkers(
+  markers: ReturnType<typeof detectMarkers>,
+  fullText: string
+): MarkerAction | null {
+  if (!markers || markers.length === 0) return null;
+
+  const primaryMarker = markers[0];
+
+  switch (primaryMarker.type) {
+    case MARKER_TYPES.HANDOFF:
+      return {
+        type: 'handoff',
+        value: primaryMarker.value,
+        responses: [primaryMarker.value, 'Not yet'],
+      };
+
+    case MARKER_TYPES.INVOKE:
+      return {
+        type: 'invoke',
+        value: primaryMarker.value,
+        autoExecute: true,
+      };
+
+    case MARKER_TYPES.QUESTION: {
+      if (primaryMarker.value === 'yesno') {
+        return {
+          type: 'yesno',
+          responses: ['Yes', 'No'],
+        };
+      }
+      // Handle open questions - may have suggested prompt: "open" or "open:suggested text"
+      if (primaryMarker.value?.startsWith('open')) {
+        // Check for suggested prompt after "open:"
+        const colonIndex = primaryMarker.value.indexOf(':');
+        if (colonIndex !== -1) {
+          const suggestion = primaryMarker.value.substring(colonIndex + 1).trim();
+          if (suggestion) {
+            return {
+              type: 'open',
+              responses: [suggestion],
+            };
+          }
+        }
+        // Plain open question without suggestion
+        return {
+          type: 'open',
+        };
+      }
+      // Check for accompanying CHOICES marker
+      const choicesMarker = markers.find(m => m.type === MARKER_TYPES.CHOICES);
+      if (choicesMarker) {
+        return processChoicesMarker(choicesMarker.value, fullText);
+      }
+      return null;
+    }
+
+    case MARKER_TYPES.CHOICES:
+      return processChoicesMarker(primaryMarker.value, fullText);
+
+    case MARKER_TYPES.CONTEXT_CLEAR:
+      return {
+        type: 'context_clear',
+        value: primaryMarker.value,
+      };
+
+    case MARKER_TYPES.CONTINUE:
+      return {
+        type: 'continue',
+        responses: ['Continue'],
+      };
+
+    default:
+      return null;
+  }
+}
+
+/**
+ * Process a CHOICES marker value into choice buttons
+ */
+function processChoicesMarker(
+  value: string,
+  fullText: string
+): MarkerAction {
+  const choiceValues = value.split(',').map(v => v.trim());
+  const firstValue = choiceValues[0];
+  const isNumeric = /^\d+$/.test(firstValue);
+
+  let choices: Array<{ number: number; text: string }>;
+
+  if (isNumeric) {
+    // Legacy numeric format - extract text from message
+    const choiceNumbers = choiceValues.map(n => parseInt(n, 10));
+    choices = extractChoiceTexts(fullText, choiceNumbers);
+  } else {
+    // Text label format - use labels directly
+    choices = choiceValues.map((text, index) => ({
+      number: index + 1,
+      text,
+    }));
+  }
+
+  return {
+    type: 'choices',
+    choices,
+    responses: choices.map(c => c.text),
+  };
+}
+
+/**
+ * Hook to detect CYCLIST markers in content and return action metadata.
+ *
+ * @param content - Message content to analyze
+ * @returns MarkerAction if marker detected, null otherwise
+ *
+ * @example
+ * ```tsx
+ * const actions = useMarkerActions(message.content);
+ * if (actions?.type === 'yesno') {
+ *   // Render Yes/No buttons
+ * }
+ * ```
+ */
+export function useMarkerActions(content: string | undefined): MarkerAction | null {
+  return useMemo(() => {
+    if (!content) return null;
+
+    const markers = detectMarkers(content);
+    if (!markers) return null;
+
+    return processMarkers(markers, content);
+  }, [content]);
+}
+
+/**
+ * Strip CYCLIST markers from content for display.
+ *
+ * @param content - Content that may contain markers
+ * @returns Content with markers removed
+ */
+export function useStrippedContent(content: string | undefined): string {
+  return useMemo(() => {
+    if (!content) return '';
+    return stripMarkers(content);
+  }, [content]);
+}

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

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