@pennyfarthing/cyclist 10.4.0 → 11.0.0

package/src/public/components/Editor.tsx

@@ -1,630 +0,0 @@
-/**
- * Editor Component
- *
- * React textarea editor with command history, tab completion, and message queue.
- * Story MSSCI-12717 - React Migration
- *
- * Features:
- * - Textarea with Enter=submit, Shift+Enter=newline
- * - Command history (Up/Down arrows)
- * - Tab completion popup for /commands
- * - Message queue indicator
- * - Image paste handling
- * - Mode toolbar (Plan/Manual/Accept)
- */
-
-import React, {
-  useState,
-  useRef,
-  useCallback,
-  useEffect,
-  KeyboardEvent,
-  ClipboardEvent,
-  ChangeEvent,
-} from 'react';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { useCommandHistory } from '../hooks/useCommandHistory';
-import { useTabCompletion } from '../hooks/useTabCompletion';
-import { useMessageQueueContext, QueuedMessage } from '../contexts/MessageQueueContext';
-import { ModeSwitch, Mode, useModeSync, useModeSwitchShortcuts } from './ModeSwitch';
-import { trackCommandUsage } from '../utils/slash-commands';
-
-// =============================================================================
-// Types
-// =============================================================================
-
-export interface PastedImage {
-  dataUrl: string;
-  mimeType: string;
-  filename: string;
-}
-
-export interface EditorProps {
-  onSubmit: (text: string, images: PastedImage[]) => void;
-  isProcessing?: boolean;
-  placeholder?: string;
-  /** Callback to immediately inject a queued message (abort + send) */
-  onInject?: (index: number) => Promise<boolean>;
-}
-
-// PermissionMode type moved to ModeSwitch component
-
-// Supported image types for paste
-const SUPPORTED_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
-const IMAGE_MAX_SIZE_BYTES = 20 * 1024 * 1024; // 20MB
-
-// =============================================================================
-// Completion Popup Component
-// =============================================================================
-
-interface CompletionPopupProps {
-  commands: Array<{ name: string; description: string }>;
-  selectedIndex: number;
-  visible: boolean;
-  onSelect: (index: number) => void;
-}
-
-function CompletionPopup({ commands, selectedIndex, visible, onSelect }: CompletionPopupProps) {
-  if (!visible || commands.length === 0) return null;
-
-  return (
-    <div className="completion-popup" data-testid="completion-popup">
-      {commands.map((cmd, index) => (
-        <div
-          key={cmd.name}
-          className={`completion-item ${index === selectedIndex ? 'selected' : ''}`}
-          onClick={() => onSelect(index)}
-          data-testid={`completion-item-${index}`}
-        >
-          <span className="completion-name">{cmd.name}</span>
-          <span className="completion-desc">{cmd.description}</span>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-// =============================================================================
-// Queue Display Component (MSSCI-12275)
-// =============================================================================
-
-interface QueueDisplayProps {
-  queue: QueuedMessage[];
-  bellMode: boolean;
-  onRemove: (index: number) => void;
-  onClear: () => void;
-  /** Callback to immediately inject a queued message (abort + send) */
-  onInject?: (index: number) => Promise<boolean>;
-}
-
-/**
- * Escape HTML for safe rendering
- */
-function escapeHtml(str: string): string {
-  if (!str) return '';
-  return str
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
-}
-
-function QueueDisplay({ queue, bellMode, onRemove, onClear, onInject }: QueueDisplayProps) {
-  if (queue.length === 0) return null;
-
-  return (
-    <TooltipProvider delayDuration={300}>
-      <div className="queue-display" data-testid="queue-display">
-        <div className="queue-header">
-          <span className="queue-count">{queue.length} queued</span>
-          {bellMode && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Badge variant="secondary" className="queue-mode-badge bell-mode">🔔</Badge>
-              </TooltipTrigger>
-              <TooltipContent>Bell mode active - messages inject via hook</TooltipContent>
-            </Tooltip>
-          )}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="sm"
-                type="button"
-                className="queue-clear-btn"
-                onClick={onClear}
-              >
-                Clear
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Clear all queued messages</TooltipContent>
-          </Tooltip>
-        </div>
-        <ul className="queue-list">
-          {queue.map((msg, index) => {
-            const truncated = msg.text.length > 60 ? msg.text.substring(0, 60) + '...' : msg.text;
-            const hasImages = msg.images && msg.images.length > 0;
-
-            return (
-              <li key={index} className="queue-item" data-testid={`queue-item-${index}`}>
-                <span className="queue-item-text">{escapeHtml(truncated)}</span>
-                {hasImages && (
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Badge variant="outline" className="queue-image-indicator">
-                        📎{msg.images.length}
-                      </Badge>
-                    </TooltipTrigger>
-                    <TooltipContent>{`${msg.images.length} image(s) attached`}</TooltipContent>
-                  </Tooltip>
-                )}
-                <div className="queue-item-actions">
-                  {onInject && (
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          type="button"
-                          className="queue-item-inject"
-                          onClick={() => onInject(index)}
-                        >
-                          ▶
-                        </Button>
-                      </TooltipTrigger>
-                      <TooltipContent>Send now (abort current and send this message)</TooltipContent>
-                    </Tooltip>
-                  )}
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        type="button"
-                        className="queue-item-remove"
-                        onClick={() => onRemove(index)}
-                      >
-                        ×
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>Remove from queue</TooltipContent>
-                  </Tooltip>
-                </div>
-              </li>
-          );
-        })}
-        </ul>
-      </div>
-    </TooltipProvider>
-  );
-}
-
-// =============================================================================
-// Image Preview Component
-// =============================================================================
-
-interface ImagePreviewProps {
-  images: PastedImage[];
-  onRemove: (index: number) => void;
-}
-
-function ImagePreview({ images, onRemove }: ImagePreviewProps) {
-  if (images.length === 0) return null;
-
-  return (
-    <TooltipProvider delayDuration={300}>
-      <div className="image-preview" data-testid="image-preview">
-        {images.map((img, index) => (
-          <div key={index} className="image-preview-item">
-            <img src={img.dataUrl} alt={img.filename} />
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  type="button"
-                  className="image-remove"
-                  onClick={() => onRemove(index)}
-                >
-                  X
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Remove image</TooltipContent>
-            </Tooltip>
-          </div>
-        ))}
-      </div>
-    </TooltipProvider>
-  );
-}
-
-// =============================================================================
-// Editor Component
-// =============================================================================
-
-export function Editor({ onSubmit, isProcessing = false, placeholder, onInject }: EditorProps): React.ReactElement {
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const [value, setValue] = useState('');
-  const [pendingImages, setPendingImages] = useState<PastedImage[]>([]);
-
-  // Mode state synced with Claude backend
-  const { mode, setMode } = useModeSync();
-
-  // Register Cmd+1/2/3 shortcuts for mode switching
-  useModeSwitchShortcuts(setMode);
-
-  // Hooks
-  const { addToHistory, navigateUp, navigateDown, resetNavigation } = useCommandHistory();
-  const {
-    state: completionState,
-    showCompletion,
-    hideCompletion,
-    updateCompletion,
-    navigateUp: completionUp,
-    navigateDown: completionDown,
-    selectCurrent,
-    isVisible: isCompletionVisible,
-  } = useTabCompletion();
-  const {
-    queue,
-    queueCount,
-    bellMode,
-    queueMessage,
-    removeFromQueue,
-    clearQueue,
-    setProcessing,
-    resumeQueue,
-  } = useMessageQueueContext();
-
-  // Sync processing state
-  useEffect(() => {
-    setProcessing(isProcessing);
-  }, [isProcessing, setProcessing]);
-
-  // Mode initialization is now handled by useModeSync hook
-
-  // Listen for suggested prompts from QuickActions
-  useEffect(() => {
-    const handleSuggestPrompt = (e: CustomEvent<{ prompt: string }>) => {
-      setValue(e.detail.prompt);
-      textareaRef.current?.focus();
-    };
-    window.addEventListener('cyclist:suggest-prompt', handleSuggestPrompt as EventListener);
-    return () => {
-      window.removeEventListener('cyclist:suggest-prompt', handleSuggestPrompt as EventListener);
-    };
-  }, []);
-
-  // ==========================================================================
-  // Image Handling
-  // ==========================================================================
-
-  const handleImagePaste = useCallback(async (clipboardData: DataTransfer): Promise<boolean> => {
-    let imageFile: File | null = null;
-
-    // Check clipboard items
-    if (clipboardData.items) {
-      for (const item of clipboardData.items) {
-        if (item.type && SUPPORTED_IMAGE_TYPES.includes(item.type)) {
-          imageFile = item.getAsFile();
-          break;
-        }
-      }
-    }
-
-    // Fallback to files
-    if (!imageFile && clipboardData.files?.length > 0) {
-      for (const file of clipboardData.files) {
-        if (file.type && SUPPORTED_IMAGE_TYPES.includes(file.type)) {
-          imageFile = file;
-          break;
-        }
-      }
-    }
-
-    if (!imageFile) return false;
-
-    // Check size
-    if (imageFile.size > IMAGE_MAX_SIZE_BYTES) {
-      console.warn('Image too large:', imageFile.size);
-      return false;
-    }
-
-    // Convert to data URL
-    return new Promise((resolve) => {
-      const reader = new FileReader();
-      reader.onload = () => {
-        const dataUrl = reader.result as string;
-        const filename = imageFile!.name || `Pasted Image.${imageFile!.type.split('/')[1] || 'png'}`;
-        setPendingImages(prev => [...prev, {
-          dataUrl,
-          mimeType: imageFile!.type,
-          filename,
-        }]);
-        resolve(true);
-      };
-      reader.onerror = () => resolve(false);
-      reader.readAsDataURL(imageFile);
-    });
-  }, []);
-
-  const removeImage = useCallback((index: number) => {
-    setPendingImages(prev => prev.filter((_, i) => i !== index));
-  }, []);
-
-  // ==========================================================================
-  // Slash Prefix Detection
-  // ==========================================================================
-
-  const getSlashPrefix = useCallback((): { prefix: string; start: number; end: number } | null => {
-    if (!textareaRef.current) return null;
-    const cursorPos = textareaRef.current.selectionStart;
-    const text = value;
-
-    // Find word start
-    let wordStart = cursorPos;
-    while (wordStart > 0 && text[wordStart - 1] !== ' ' && text[wordStart - 1] !== '\n') {
-      wordStart--;
-    }
-
-    const word = text.substring(wordStart, cursorPos);
-    if (word.startsWith('/')) {
-      return { prefix: word, start: wordStart, end: cursorPos };
-    }
-    return null;
-  }, [value]);
-
-  const replaceSlashPrefix = useCallback((commandName: string) => {
-    const prefixInfo = getSlashPrefix();
-    if (!prefixInfo) {
-      setValue(prev => prev + commandName);
-      return;
-    }
-
-    const { start, end } = prefixInfo;
-    setValue(prev => prev.substring(0, start) + commandName + prev.substring(end));
-
-    // Move cursor after command
-    setTimeout(() => {
-      if (textareaRef.current) {
-        const newPos = start + commandName.length;
-        textareaRef.current.selectionStart = textareaRef.current.selectionEnd = newPos;
-      }
-    }, 0);
-  }, [getSlashPrefix]);
-
-  // ==========================================================================
-  // Submit Logic
-  // ==========================================================================
-
-  const handleSubmit = useCallback(() => {
-    const trimmed = value.trim();
-    if (!trimmed && pendingImages.length === 0) return;
-
-    // If processing, queue the message
-    if (isProcessing) {
-      const queued = queueMessage({ text: trimmed, images: [...pendingImages] });
-      if (queued) {
-        setValue('');
-        setPendingImages([]);
-        textareaRef.current?.focus();
-      }
-      return;
-    }
-
-    // Add to history and submit
-    addToHistory(trimmed);
-    resetNavigation();
-
-    // Track slash command usage for frequency sorting
-    if (trimmed.startsWith('/')) {
-      const command = trimmed.split(/\s/)[0]; // Extract "/command" from "/command args"
-      trackCommandUsage(command);
-    }
-
-    // Resume queue if it was paused (e.g., after abort)
-    resumeQueue();
-
-    // Dispatch event to clear QuickActions (Reflector questions)
-    window.dispatchEvent(new CustomEvent('cyclist:user-submit'));
-
-    onSubmit(trimmed, pendingImages);
-    setValue('');
-    setPendingImages([]);
-    textareaRef.current?.focus();
-  }, [value, pendingImages, isProcessing, queueMessage, addToHistory, resetNavigation, resumeQueue, onSubmit]);
-
-  // ==========================================================================
-  // Event Handlers
-  // ==========================================================================
-
-  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLTextAreaElement>) => {
-    // Mode shortcuts are now handled globally by useModeSwitchShortcuts
-
-    // Tab - trigger or select completion
-    if (e.key === 'Tab' && !e.shiftKey && !e.ctrlKey && !e.altKey) {
-      if (isCompletionVisible) {
-        e.preventDefault();
-        const selected = selectCurrent();
-        if (selected) replaceSlashPrefix(selected);
-        return;
-      }
-      const prefixInfo = getSlashPrefix();
-      if (prefixInfo) {
-        e.preventDefault();
-        showCompletion(prefixInfo.prefix);
-        return;
-      }
-    }
-
-    // Escape - close completion
-    if (e.key === 'Escape') {
-      if (isCompletionVisible) {
-        e.preventDefault();
-        hideCompletion();
-        return;
-      }
-    }
-
-    // Enter - submit or select completion
-    if (e.key === 'Enter' && !e.shiftKey) {
-      if (isCompletionVisible) {
-        e.preventDefault();
-        const selected = selectCurrent();
-        if (selected) replaceSlashPrefix(selected);
-        return;
-      }
-      e.preventDefault();
-      handleSubmit();
-      return;
-    }
-
-    // Up arrow - completion or history
-    if (e.key === 'ArrowUp' && !e.shiftKey && !e.ctrlKey && !e.altKey) {
-      if (isCompletionVisible) {
-        e.preventDefault();
-        completionUp();
-        return;
-      }
-      // Only navigate history if at start
-      if (textareaRef.current?.selectionStart === 0) {
-        const prev = navigateUp(value);
-        if (prev !== null) {
-          e.preventDefault();
-          setValue(prev);
-          return;
-        }
-      }
-    }
-
-    // Down arrow - completion or history
-    if (e.key === 'ArrowDown' && !e.shiftKey && !e.ctrlKey && !e.altKey) {
-      if (isCompletionVisible) {
-        e.preventDefault();
-        completionDown();
-        return;
-      }
-      // Only navigate history if at end
-      if (textareaRef.current?.selectionEnd === value.length) {
-        const next = navigateDown();
-        if (next !== null) {
-          e.preventDefault();
-          setValue(next);
-          return;
-        }
-      }
-    }
-  }, [
-    isCompletionVisible, selectCurrent, replaceSlashPrefix,
-    getSlashPrefix, showCompletion, hideCompletion, handleSubmit,
-    completionUp, completionDown, navigateUp, navigateDown, value
-  ]);
-
-  const handleChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
-    const newValue = e.target.value;
-    setValue(newValue);
-
-    // Auto-show completion when "/" is typed at start
-    if (newValue === '/' && !isCompletionVisible) {
-      showCompletion('/');
-      return;
-    }
-
-    // Update completion if visible
-    if (isCompletionVisible) {
-      const prefixInfo = getSlashPrefix();
-      if (prefixInfo) {
-        updateCompletion(prefixInfo.prefix);
-      } else {
-        hideCompletion();
-      }
-    }
-  }, [isCompletionVisible, showCompletion, getSlashPrefix, updateCompletion, hideCompletion]);
-
-  const handlePaste = useCallback(async (e: ClipboardEvent<HTMLTextAreaElement>) => {
-    const clipboardData = e.clipboardData;
-    if (!clipboardData) return;
-
-    // Check for image
-    let hasImage = false;
-    if (clipboardData.items) {
-      for (const item of clipboardData.items) {
-        if (item.type && SUPPORTED_IMAGE_TYPES.includes(item.type)) {
-          hasImage = true;
-          break;
-        }
-      }
-    }
-    if (!hasImage && clipboardData.files?.length > 0) {
-      for (const file of clipboardData.files) {
-        if (file.type && SUPPORTED_IMAGE_TYPES.includes(file.type)) {
-          hasImage = true;
-          break;
-        }
-      }
-    }
-
-    if (hasImage) {
-      e.preventDefault();
-      await handleImagePaste(clipboardData);
-    }
-  }, [handleImagePaste]);
-
-  const handleCompletionSelect = useCallback((index: number) => {
-    const cmd = completionState.commands[index];
-    if (cmd) {
-      replaceSlashPrefix(cmd.name);
-      hideCompletion();
-    }
-  }, [completionState.commands, replaceSlashPrefix, hideCompletion]);
-
-  // ==========================================================================
-  // Render
-  // ==========================================================================
-
-  return (
-    <div className="editor-container" data-testid="editor-container">
-      <ModeSwitch
-        mode={mode}
-        onModeChange={setMode}
-        className="editor-mode-switch"
-      />
-      <div className="editor-wrapper" id="editor-wrapper">
-        <ImagePreview images={pendingImages} onRemove={removeImage} />
-
-        <textarea
-          ref={textareaRef}
-          id="editor-textarea"
-          className="editor-textarea"
-          value={value}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          onPaste={handlePaste}
-          placeholder={placeholder}
-          spellCheck={false}
-          autoFocus
-          data-testid="editor-textarea"
-        />
-
-        <CompletionPopup
-          commands={completionState.commands}
-          selectedIndex={completionState.selectedIndex}
-          visible={isCompletionVisible}
-          onSelect={handleCompletionSelect}
-        />
-      </div>
-
-      <QueueDisplay
-        queue={queue}
-        bellMode={bellMode}
-        onRemove={removeFromQueue}
-        onClear={clearQueue}
-        onInject={onInject}
-      />
-    </div>
-  );
-}
-
-export default Editor;

package/src/public/components/ErrorBoundary.tsx

@@ -1,67 +0,0 @@
-/**
- * ErrorBoundary - Catches React errors to prevent entire app from crashing
- *
- * When a panel component throws (e.g., undefined.split()), this boundary
- * catches the error and displays a fallback UI instead of blanking the screen.
- */
-
-import React, { Component, ErrorInfo, ReactNode } from 'react';
-
-interface Props {
-  children: ReactNode;
-  fallback?: ReactNode;
-  panelName?: string;
-}
-
-interface State {
-  hasError: boolean;
-  error?: Error;
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-  state: State = { hasError: false };
-
-  static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    const panelContext = this.props.panelName ? ` in ${this.props.panelName}` : '';
-    console.error(`[ErrorBoundary] Caught error${panelContext}:`, error, errorInfo);
-  }
-
-  render() {
-    if (this.state.hasError) {
-      if (this.props.fallback) {
-        return this.props.fallback;
-      }
-
-      return (
-        <div className="error-boundary-fallback" style={{
-          padding: '16px',
-          color: 'var(--status-error, #ef4444)',
-          backgroundColor: 'var(--bg-tertiary, #0f0f1a)',
-          border: '1px solid var(--status-error, #ef4444)',
-          borderRadius: '4px',
-          margin: '8px',
-        }}>
-          <h4 style={{ margin: '0 0 8px 0' }}>
-            {this.props.panelName ? `${this.props.panelName} Error` : 'Panel Error'}
-          </h4>
-          <pre style={{
-            margin: 0,
-            fontSize: '12px',
-            whiteSpace: 'pre-wrap',
-            wordBreak: 'break-word',
-          }}>
-            {this.state.error?.message}
-          </pre>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}
-
-export default ErrorBoundary;