@pennyfarthing/cyclist 10.4.0 → 11.0.0

package/src/public/components/panels/TTYPanel.tsx

@@ -1,299 +0,0 @@
-/**
- * TTYPanel - Terminal panel using xterm.js over WebSocket
- *
- * Story MSSCI-14211 - TTY Panel with xterm.js terminal emulator
- * Epic: Epic 76 - Dockview Panel Migration
- *
- * Features:
- * - Embeds xterm.js terminal in a Dockview panel
- * - Communicates with server via /ws/pty WebSocket (works in both Electron and web mode)
- * - Loads user's shell with environment (bash/zsh profile)
- * - Opens in project root directory
- * - Proper resize handling via FitAddon
- * - Standard terminal features (colors, cursor, scrollback)
- */
-
-import React, { useRef, useEffect, useState, useCallback } from 'react';
-import { Button } from '@/components/ui/button';
-import { Terminal } from 'xterm';
-import { FitAddon } from 'xterm-addon-fit';
-import 'xterm/css/xterm.css';
-
-/** Props for TTYPanel component */
-export interface TTYPanelProps {
-  /** Project root directory for the terminal. Defaults to current project. */
-  projectRoot?: string;
-}
-
-/** Terminal status states */
-type TerminalStatus = 'connecting' | 'connected' | 'error' | 'exited';
-
-/**
- * TTYPanel - Terminal emulator panel for Cyclist
- */
-export function TTYPanel({ projectRoot }: TTYPanelProps): React.ReactElement {
-  const terminalRef = useRef<HTMLDivElement>(null);
-  const xtermRef = useRef<Terminal | null>(null);
-  const fitAddonRef = useRef<FitAddon | null>(null);
-  const wsRef = useRef<WebSocket | null>(null);
-  const resizeObserverRef = useRef<ResizeObserver | null>(null);
-  const resizeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const [status, setStatus] = useState<TerminalStatus>('connecting');
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-
-  /**
-   * Build the WebSocket URL for /ws/pty
-   */
-  const getWsUrl = useCallback(() => {
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    return `${protocol}//${window.location.host}/ws/pty`;
-  }, []);
-
-  /**
-   * Spawn a new PTY session via WebSocket
-   */
-  const spawnPty = useCallback(() => {
-    const ws = wsRef.current;
-    if (!ws || ws.readyState !== WebSocket.OPEN) return;
-
-    setStatus('connecting');
-    setErrorMessage(null);
-
-    const fitAddon = fitAddonRef.current;
-    const cols = fitAddon ? Math.max(fitAddon.proposeDimensions()?.cols ?? 80, 1) : 80;
-    const rows = fitAddon ? Math.max(fitAddon.proposeDimensions()?.rows ?? 24, 1) : 24;
-
-    ws.send(JSON.stringify({
-      type: 'spawn',
-      cwd: projectRoot,
-      cols,
-      rows,
-    }));
-  }, [projectRoot]);
-
-  /**
-   * Handle restart button click
-   */
-  const handleRestart = useCallback(() => {
-    xtermRef.current?.clear();
-    xtermRef.current?.reset();
-    spawnPty();
-  }, [spawnPty]);
-
-  /**
-   * Initialize terminal and WebSocket
-   */
-  useEffect(() => {
-    if (!terminalRef.current) return;
-
-    // Create xterm Terminal
-    const terminal = new Terminal({
-      allowProposedApi: true,
-      allowTransparency: false,
-      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-      fontSize: 14,
-      scrollback: 5000,
-      cursorBlink: true,
-      theme: {
-        background: '#1e1e1e',
-        foreground: '#d4d4d4',
-        cursor: '#d4d4d4',
-        cursorAccent: '#1e1e1e',
-      },
-    });
-
-    const fitAddon = new FitAddon();
-    terminal.loadAddon(fitAddon);
-
-    xtermRef.current = terminal;
-    fitAddonRef.current = fitAddon;
-
-    terminal.open(terminalRef.current);
-
-    // Initial fit after open
-    setTimeout(() => {
-      fitAddon.fit();
-      terminal.focus();
-    }, 0);
-
-    // Connect WebSocket to /ws/pty
-    const wsUrl = getWsUrl();
-    const ws = new WebSocket(wsUrl);
-    wsRef.current = ws;
-
-    ws.onopen = () => {
-      // Spawn PTY once connected
-      const cols = Math.max(fitAddon.proposeDimensions()?.cols ?? 80, 1);
-      const rows = Math.max(fitAddon.proposeDimensions()?.rows ?? 24, 1);
-
-      ws.send(JSON.stringify({
-        type: 'spawn',
-        cwd: projectRoot,
-        cols,
-        rows,
-      }));
-    };
-
-    ws.onmessage = (event) => {
-      try {
-        const msg = JSON.parse(event.data);
-        if (msg.type === 'data') {
-          terminal.write(msg.data);
-        } else if (msg.type === 'spawn') {
-          setStatus('connected');
-        } else if (msg.type === 'exit') {
-          setStatus('exited');
-        } else if (msg.type === 'error') {
-          setStatus('error');
-          setErrorMessage(msg.error);
-        }
-      } catch {
-        // Non-JSON data, write directly
-        terminal.write(event.data);
-      }
-    };
-
-    ws.onerror = () => {
-      setStatus('error');
-      setErrorMessage('WebSocket connection failed');
-    };
-
-    ws.onclose = () => {
-      if (status === 'connected') {
-        setStatus('exited');
-      }
-    };
-
-    // Send terminal input to PTY via WebSocket
-    const dataDisposable = terminal.onData((data) => {
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({ type: 'data', data }));
-      }
-    });
-
-    // Handle terminal resize - notify PTY via WebSocket
-    const resizeDisposable = terminal.onResize(({ cols, rows }) => {
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({ type: 'resize', cols, rows }));
-      }
-    });
-
-    // ResizeObserver for container resize handling with debounce
-    const resizeObserver = new ResizeObserver(() => {
-      if (resizeTimeoutRef.current) {
-        clearTimeout(resizeTimeoutRef.current);
-      }
-      resizeTimeoutRef.current = setTimeout(() => {
-        fitAddonRef.current?.fit();
-      }, 100);
-    });
-
-    resizeObserver.observe(terminalRef.current);
-    resizeObserverRef.current = resizeObserver;
-
-    // Cleanup on unmount
-    return () => {
-      if (resizeTimeoutRef.current) {
-        clearTimeout(resizeTimeoutRef.current);
-      }
-      resizeObserverRef.current?.disconnect();
-
-      // Kill PTY and close WebSocket
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({ type: 'kill' }));
-        ws.close();
-      }
-      wsRef.current = null;
-
-      dataDisposable.dispose();
-      resizeDisposable.dispose();
-      terminal.dispose();
-    };
-  }, [getWsUrl, projectRoot]);
-
-  // Render status message for error/exit states
-  const renderStatusOverlay = () => {
-    if (status === 'error') {
-      return (
-        <div className="tty-overlay" data-testid="tty-error">
-          <div className="tty-overlay-content">
-            <span className="tty-overlay-icon">⚠️</span>
-            <span className="tty-overlay-message">Failed to spawn shell: {errorMessage}</span>
-            <Button
-              variant="outline"
-              size="sm"
-              className="tty-restart-button"
-              onClick={handleRestart}
-              aria-label="Restart terminal"
-            >
-              Restart
-            </Button>
-          </div>
-        </div>
-      );
-    }
-
-    if (status === 'exited') {
-      return (
-        <div className="tty-overlay" data-testid="tty-exited">
-          <div className="tty-overlay-content">
-            <span className="tty-overlay-icon">✓</span>
-            <span className="tty-overlay-message">Process ended</span>
-            <Button
-              variant="outline"
-              size="sm"
-              className="tty-restart-button"
-              onClick={handleRestart}
-              aria-label="New session"
-            >
-              New Session
-            </Button>
-          </div>
-        </div>
-      );
-    }
-
-    return null;
-  };
-
-  return (
-    <div
-      className="tty-panel"
-      data-testid="tty-panel"
-      role="region"
-      aria-label="Terminal"
-      aria-describedby="tty-keyboard-help"
-    >
-      {/* Hidden keyboard help for screen readers */}
-      <span id="tty-keyboard-help" className="sr-only">
-        Terminal panel. Use keyboard to interact with the shell.
-      </span>
-
-      {/* Status announcer for screen readers */}
-      <div
-        data-testid="tty-status"
-        aria-live="polite"
-        className="sr-only"
-      >
-        {status === 'connecting' && 'Connecting to terminal...'}
-        {status === 'connected' && 'Terminal connected'}
-        {status === 'error' && `Terminal error: ${errorMessage}`}
-        {status === 'exited' && 'Terminal session ended'}
-      </div>
-
-      {/* Terminal container */}
-      <div
-        ref={terminalRef}
-        className="tty-terminal-container"
-        data-testid="tty-terminal-container"
-        style={{ height: '100%', width: '100%' }}
-      />
-
-      {/* Status overlay for error/exit states */}
-      {renderStatusOverlay()}
-    </div>
-  );
-}
-
-export default TTYPanel;

package/src/public/components/panels/TodoPanel.tsx

@@ -1,142 +0,0 @@
-/**
- * TodoPanel - Task list with progress panel
- *
- * Extracted from ProgressPanel as part of MSSCI-14188.
- * Shows todos grouped by status with progress bar.
- *
- * Story: MSSCI-14188 - Split Progress panel into Workflow, AC, and Todo panels
- * Epic: epic-76 (Dockview Panel Migration)
- */
-
-import React from 'react';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { useTodos, TodoItem } from '../../hooks/useTodos';
-
-// =============================================================================
-// Todo Item Component
-// =============================================================================
-
-function TodoItemView({ todo }: { todo: TodoItem }): React.ReactElement {
-  const statusIcon = {
-    pending: '\u25CB',
-    in_progress: '\u25CF',
-    completed: '\u2713',
-  }[todo.status];
-
-  const statusClass = `todo-item todo-${todo.status}`;
-
-  // Use activeForm for in_progress (more descriptive), content for others
-  const displayText = todo.status === 'in_progress' && todo.activeForm
-    ? todo.activeForm
-    : todo.content;
-
-  return (
-    <div className={statusClass} data-testid={`todo-${todo.id}`}>
-      <span className="todo-status">{statusIcon}</span>
-      <span className="todo-subject">{displayText}</span>
-      {todo.blockedBy && todo.blockedBy.length > 0 && (
-        <TooltipProvider delayDuration={300}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="todo-blocked">
-                (blocked)
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>{`Blocked by: ${todo.blockedBy.join(', ')}`}</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      )}
-    </div>
-  );
-}
-
-// =============================================================================
-// TodoPanel Component
-// =============================================================================
-
-export function TodoPanel(): React.ReactElement {
-  const { todos, isLoading, error } = useTodos();
-
-  if (isLoading) {
-    return (
-      <div className="todo-panel loading" data-testid="todo-panel">
-        <div className="space-y-2 p-2">
-          <Skeleton className="h-3 w-full" />
-          <Skeleton className="h-4 w-5/6" />
-          <Skeleton className="h-4 w-3/4" />
-          <Skeleton className="h-4 w-4/5" />
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="todo-panel error" data-testid="todo-panel">
-        <div className="error-message">{error.message}</div>
-      </div>
-    );
-  }
-
-  if (todos.length === 0) {
-    return (
-      <div className="todo-panel" data-testid="todo-panel">
-        <div className="placeholder">No active tasks</div>
-      </div>
-    );
-  }
-
-  // Group by status
-  const inProgress = todos.filter(t => t.status === 'in_progress');
-  const pending = todos.filter(t => t.status === 'pending');
-  const completed = todos.filter(t => t.status === 'completed');
-
-  // Calculate progress
-  const totalCount = todos.length;
-  const completedCount = completed.length;
-  const progressPercent = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
-
-  return (
-    <div className="todo-panel" data-testid="todo-panel">
-      <div className="todo-content">
-        <div className="progress-bar-container">
-          <div
-            className="progress-bar"
-            style={{ width: `${progressPercent}%` }}
-          />
-          <span className="progress-text">{completedCount}/{totalCount}</span>
-        </div>
-
-        {inProgress.length > 0 && (
-          <div className="todo-section">
-            <h4>In Progress</h4>
-            {inProgress.map(todo => (
-              <TodoItemView key={todo.id} todo={todo} />
-            ))}
-          </div>
-        )}
-
-        {pending.length > 0 && (
-          <div className="todo-section">
-            <h4>Pending</h4>
-            {pending.map(todo => (
-              <TodoItemView key={todo.id} todo={todo} />
-            ))}
-          </div>
-        )}
-
-        {completed.length > 0 && (
-          <div className="todo-section todo-completed">
-            <h4>Completed ({completed.length})</h4>
-            {completed.map(todo => (
-              <TodoItemView key={todo.id} todo={todo} />
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default TodoPanel;

package/src/public/components/panels/WorkflowPanel.tsx

@@ -1,224 +0,0 @@
-/**
- * WorkflowPanel - BikeLane phase visualization panel
- *
- * Extracted from ProgressPanel as part of MSSCI-14188.
- * Shows workflow type badge (TDD/BDD/Trivial) and phase progress.
- * MSSCI-14300: Added stepped workflow "Step N of M" display.
- * MSSCI-14301: Added available workflows discovery list.
- *
- * Story: MSSCI-14188 - Split Progress panel into Workflow, AC, and Todo panels
- * Epic: epic-76 (Dockview Panel Migration)
- */
-
-import React, { useCallback } from 'react';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Skeleton } from '@/components/ui/skeleton';
-import { useClaudeContext } from '../../contexts/ClaudeContext';
-import { useStory } from '../../hooks/useStory';
-import type { WorkflowPhase, AvailableWorkflow } from '../../../story-parser.js';
-
-// =============================================================================
-// Helper Functions
-// =============================================================================
-
-function getPhaseIcon(status: 'done' | 'current' | 'pending'): string {
-  switch (status) {
-    case 'done':
-      return '\u2713';
-    case 'current':
-      return '\u25CF';
-    case 'pending':
-    default:
-      return '\u25CB';
-  }
-}
-
-function formatWorkflowType(type: string | null): string {
-  if (!type) return '\u2014';
-
-  const upperTypes = ['tdd', 'bdd'];
-  if (upperTypes.includes(type.toLowerCase())) {
-    return type.toUpperCase();
-  }
-
-  return type.charAt(0).toUpperCase() + type.slice(1);
-}
-
-// =============================================================================
-// Phase Step Component (for phased workflows)
-// =============================================================================
-
-function PhaseStep({ phase, isLast }: { phase: WorkflowPhase; isLast: boolean }): React.ReactElement {
-  const icon = getPhaseIcon(phase.status);
-  const statusClass = `phase-step ${phase.status}`;
-
-  return (
-    <>
-      <div className={statusClass}>
-        <span className="phase-icon">{icon}</span>
-        <span className="phase-label">{phase.label}</span>
-      </div>
-      {!isLast && <span className="phase-arrow">{'\u2192'}</span>}
-    </>
-  );
-}
-
-// =============================================================================
-// Stepped Progress Component (for stepped workflows)
-// =============================================================================
-
-function SteppedProgress({ phases }: { phases: WorkflowPhase[] }): React.ReactElement {
-  const total = phases.length;
-  const currentIndex = phases.findIndex(p => p.status === 'current');
-  const doneCount = phases.filter(p => p.status === 'done').length;
-
-  // If all done, current step = total; otherwise use 1-based index of current
-  const currentStep = currentIndex >= 0 ? currentIndex + 1 : (doneCount === total ? total : 1);
-  const currentPhase = currentIndex >= 0 ? phases[currentIndex] : null;
-
-  return (
-    <div className="stepped-progress">
-      <span className="stepped-counter">Step {currentStep} of {total}</span>
-      {currentPhase && (
-        <span className="stepped-current-label">{currentPhase.label}</span>
-      )}
-    </div>
-  );
-}
-
-// =============================================================================
-// Available Workflows List (MSSCI-14301)
-// =============================================================================
-
-function AvailableWorkflowsList({ workflows, onStart }: {
-  workflows: AvailableWorkflow[];
-  onStart?: (workflow: AvailableWorkflow) => void;
-}): React.ReactElement {
-  return (
-    <div className="available-workflows">
-      <div className="available-workflows-header">
-        <span className="available-workflows-title">Available Workflows ({workflows.length})</span>
-      </div>
-      <div className="available-workflows-list">
-        {workflows.map((wf) => (
-          <div
-            key={wf.name}
-            className="workflow-entry"
-            data-testid="workflow-entry"
-            data-workflow-entry-type={wf.type}
-          >
-            <div className="workflow-entry-header">
-              <span className="workflow-entry-name">{wf.name}</span>
-              <Badge variant="outline" className="workflow-entry-type-badge">
-                {wf.type}
-              </Badge>
-            </div>
-            <div className="workflow-entry-description">{wf.description}</div>
-            {wf.type === 'stepped' && (
-              <div className="workflow-entry-hint">/workflow start {wf.name}</div>
-            )}
-            <div className="workflow-entry-footer">
-              <Button
-                variant="ghost"
-                size="sm"
-                className="workflow-start-button"
-                data-testid="workflow-start-button"
-                onClick={() => onStart?.(wf)}
-              >
-                Start
-              </Button>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-// =============================================================================
-// WorkflowPanel Component
-// =============================================================================
-
-export function WorkflowPanel(): React.ReactElement {
-  const { story, isLoading, error, availableWorkflows } = useStory();
-  const { send, isConnected } = useClaudeContext();
-
-  const handleStartWorkflow = useCallback((wf: AvailableWorkflow) => {
-    if (!isConnected) return;
-    send(`/workflow start ${wf.name}`);
-  }, [send, isConnected]);
-
-  if (isLoading) {
-    return (
-      <div className="workflow-panel loading" data-testid="workflow-panel">
-        <div className="space-y-2 p-2">
-          <Skeleton className="h-6 w-16 rounded-full" />
-          <div className="flex gap-2 items-center">
-            <Skeleton className="h-4 w-12" />
-            <Skeleton className="h-4 w-12" />
-            <Skeleton className="h-4 w-12" />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="workflow-panel error" data-testid="workflow-panel">
-        <div className="error-message">{error.message}</div>
-      </div>
-    );
-  }
-
-  const workflowType = story?.workflow ?? null;
-  const phases = story?.workflowPhases ?? null;
-  const isStepped = story?.workflowType === 'stepped';
-
-  if (!workflowType && (!phases || phases.length === 0)) {
-    // MSSCI-14301: Show available workflows when no active workflow
-    if (availableWorkflows && availableWorkflows.length > 0) {
-      return (
-        <div className="workflow-panel" data-testid="workflow-panel">
-          <AvailableWorkflowsList workflows={availableWorkflows} onStart={handleStartWorkflow} />
-        </div>
-      );
-    }
-    return (
-      <div className="workflow-panel" data-testid="workflow-panel">
-        <div className="placeholder">No active workflow</div>
-      </div>
-    );
-  }
-
-  const formattedType = formatWorkflowType(workflowType);
-
-  return (
-    <div className="workflow-panel" data-testid="workflow-panel">
-      <div className="workflow-content">
-        <Badge variant="secondary" className="workflow-type-badge" data-workflow-type={workflowType || ''}>
-          {formattedType}
-        </Badge>
-
-        {phases && phases.length > 0 && (
-          isStepped ? (
-            <SteppedProgress phases={phases} />
-          ) : (
-            <div className="phase-progress">
-              {phases.map((phase, index) => (
-                <PhaseStep
-                  key={phase.name}
-                  phase={phase}
-                  isLast={index === phases.length - 1}
-                />
-              ))}
-            </div>
-          )
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default WorkflowPanel;

package/src/public/components/panels/index.ts

@@ -1,24 +0,0 @@
-/**
- * Panel Components Index
- *
- * Story MSSCI-12717 - React Migration
- * Story MSSCI-14188 - Split Progress panel into Workflow, AC, and Todo panels
- */
-
-export { MessagePanel } from './MessagePanel';
-export { SprintPanel, EnhancedSprintPanel } from './SprintPanel';
-export { GitPanel } from './GitPanel';
-export { WorkflowPanel } from './WorkflowPanel';
-export { ACPanel } from './ACPanel';
-export { TodoPanel } from './TodoPanel';
-export { BackgroundPanel } from './BackgroundPanel';
-export { ChangedPanel } from './ChangedPanel';
-export { DiffsPanel } from './DiffsPanel';
-export { DebugPanel } from './DebugPanel';
-export { SettingsPanel } from './SettingsPanel';
-export { AuditLogPanel } from './AuditLogPanel';
-export { TTYPanel } from './TTYPanel';
-
-// Legacy exports - kept for backwards compatibility and tests
-export { AcceptanceCriteriaPanel, ConnectedAcceptanceCriteriaPanel } from './AcceptanceCriteriaPanel';
-export { BikeLanePanel, ConnectedBikeLanePanel } from './BikeLanePanel';