@pennyfarthing/cyclist 10.4.0 → 11.0.0

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

@@ -1,115 +0,0 @@
-/**
- * BackgroundPanel - Display background tasks
- *
- * Story MSSCI-12717 - React Migration
- * Story MSSCI-12784 - Timer updates in real-time with accurate completion times
- *
- * Timer strategy:
- * - On mount: fetch all tasks from backend (accurate snapshot)
- * - Pending tasks: estimate elapsed from startedAt, update via interval
- * - Completed tasks: use authoritative durationMs from backend
- * - IPC events provide real-time updates with accurate timing
- */
-
-import React, { useState, useEffect } from 'react';
-import { Button } from '@/components/ui/button';
-import { useBackgroundTasks, BackgroundTask } from '../../hooks/useBackgroundTasks';
-
-/**
- * Format milliseconds into human-readable duration
- */
-function formatDuration(ms: number): string {
-  if (ms < 1000) return `${ms}ms`;
-  if (ms < 60000) return `${Math.floor(ms / 1000)}s`;
-  return `${Math.floor(ms / 60000)}m`;
-}
-
-function TaskItem({ task, tick }: { task: BackgroundTask; tick: number }): React.ReactElement {
-  const isPending = task.status === 'pending';
-  const statusIcon = isPending ? '...' : (task.success ? 'v' : 'x');
-  const statusClass = `task-item task-${task.status}${task.success === false ? ' task-error' : ''}`;
-
-  // For completed tasks, use authoritative durationMs from backend
-  // For pending tasks, estimate from startedAt (tick triggers re-render)
-  let elapsedStr: string;
-  if (task.status === 'completed' && task.durationMs !== undefined) {
-    // Completed: use accurate duration from backend
-    elapsedStr = formatDuration(task.durationMs);
-  } else {
-    // Pending: estimate elapsed time (tick forces recalculation)
-    void tick; // Intentionally used to trigger re-render
-    elapsedStr = formatDuration(Date.now() - task.startedAt);
-  }
-
-  return (
-    <div className={statusClass} data-testid={`task-${task.taskId}`}>
-      <span className="task-status">{statusIcon}</span>
-      <div className="task-content">
-        <span className="task-description">{task.description}</span>
-        <span className="task-type">{task.subagentType}</span>
-      </div>
-      <span className="task-elapsed">{elapsedStr}</span>
-    </div>
-  );
-}
-
-export function BackgroundPanel(): React.ReactElement {
-  const { tasks, pendingCount, completedCount, clearCompleted } = useBackgroundTasks();
-  const [tick, setTick] = useState(0);
-
-  // Timer for live updates - only runs when there are pending tasks and panel is visible
-  useEffect(() => {
-    if (pendingCount === 0) return;
-
-    const interval = setInterval(() => {
-      setTick(t => t + 1);
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, [pendingCount]);
-
-  if (tasks.length === 0) {
-    return (
-      <div className="background-panel empty" data-testid="background-panel">
-        <div className="placeholder">No subagent tasks</div>
-      </div>
-    );
-  }
-
-  // Sort: pending first, then by start time (newest first)
-  const sortedTasks = [...tasks].sort((a, b) => {
-    if (a.status === 'pending' && b.status !== 'pending') return -1;
-    if (a.status !== 'pending' && b.status === 'pending') return 1;
-    return b.startedAt - a.startedAt;
-  });
-
-  return (
-    <div className="background-panel" data-testid="background-panel">
-      <div className="panel-header">
-        <span className="task-counts">
-          {pendingCount > 0 && <span className="pending-count">{pendingCount} running</span>}
-          {completedCount > 0 && <span className="completed-count">{completedCount} done</span>}
-        </span>
-        {completedCount > 0 && (
-          <Button
-            variant="ghost"
-            size="sm"
-            type="button"
-            className="clear-button"
-            onClick={clearCompleted}
-          >
-            Clear
-          </Button>
-        )}
-      </div>
-
-      <div className="task-list">
-        {sortedTasks.map(task => (
-          <TaskItem key={task.taskId} task={task} tick={tick} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default BackgroundPanel;

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

@@ -1,214 +0,0 @@
-/**
- * BikeLanePanel - Display workflow visualization
- *
- * Story MSSCI-12849 - Missing AC & BikeLane panels in Progress tab
- *
- * Reference: Deleted vanilla JS in commit 9aea4f371
- * - js/sidebar/bikelane.js
- */
-
-import React from 'react';
-import { Badge } from '@/components/ui/badge';
-import { Skeleton } from '@/components/ui/skeleton';
-import type { WorkflowPhase } from '../../../story-parser.js';
-import { useStory } from '../../hooks/useStory.js';
-
-export interface PhaseHistoryEntry {
-  phase: string;
-  agent: string;
-  status: 'done' | 'current' | 'pending';
-  duration?: string;
-}
-
-export interface BikeLanePanelProps {
-  workflowType: string | null;
-  phases: WorkflowPhase[] | null;
-  phaseHistory?: PhaseHistoryEntry[] | null;
-  collapsed?: boolean;
-  onToggle?: () => void;
-}
-
-/**
- * Format workflow type for display
- * TDD, BDD -> uppercase
- * trivial, others -> Title case
- */
-function formatWorkflowType(type: string | null): string {
-  if (!type) return '—';
-
-  const upperTypes = ['tdd', 'bdd'];
-  if (upperTypes.includes(type.toLowerCase())) {
-    return type.toUpperCase();
-  }
-
-  return type.charAt(0).toUpperCase() + type.slice(1);
-}
-
-/**
- * Get icon for phase status
- */
-function getPhaseIcon(status: 'done' | 'current' | 'pending'): string {
-  switch (status) {
-    case 'done':
-      return '✓';
-    case 'current':
-      return '●';
-    case 'pending':
-    default:
-      return '○';
-  }
-}
-
-/**
- * Phase step in progress visualization
- */
-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">→</span>}
-    </>
-  );
-}
-
-/**
- * Phase history item in timeline
- */
-function PhaseHistoryItem({ entry }: { entry: PhaseHistoryEntry }): React.ReactElement {
-  const icon = getPhaseIcon(entry.status);
-  const statusClass = `phase-history-item ${entry.status}`;
-
-  const durationText = entry.status === 'current'
-    ? 'in progress'
-    : entry.status === 'pending'
-    ? 'pending'
-    : entry.duration || '—';
-
-  return (
-    <div className={statusClass}>
-      <span className="history-icon">{icon}</span>
-      <span className="history-phase">{entry.phase.toUpperCase()}</span>
-      <span className="history-agent">{entry.agent}</span>
-      <span className="history-duration">{durationText}</span>
-    </div>
-  );
-}
-
-/**
- * BikeLanePanel - Displays workflow progress and phase history
- */
-export function BikeLanePanel({
-  workflowType,
-  phases,
-  phaseHistory,
-  collapsed = false,
-  onToggle,
-}: BikeLanePanelProps): React.ReactElement {
-  // Handle empty state
-  if (!workflowType && (!phases || phases.length === 0)) {
-    return (
-      <div className="bikelane-panel empty hidden" data-testid="bikelane-panel">
-        <div className="placeholder">No active workflow</div>
-      </div>
-    );
-  }
-
-  const formattedType = formatWorkflowType(workflowType);
-
-  // Handle collapsed state
-  if (collapsed) {
-    return (
-      <div className="bikelane-panel collapsed" data-testid="bikelane-panel">
-        <div className="bikelane-header" onClick={onToggle}>
-          <Badge variant="secondary" className="workflow-type-badge" data-workflow-type={workflowType || ''}>
-            {formattedType}
-          </Badge>
-          <span className="bikelane-expand">▶</span>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="bikelane-panel" data-testid="bikelane-panel">
-      <div className="bikelane-header" onClick={onToggle}>
-        <Badge variant="secondary" className="workflow-type-badge" data-workflow-type={workflowType || ''}>
-          {formattedType}
-        </Badge>
-        {onToggle && <span className="bikelane-expand">▼</span>}
-      </div>
-
-      {/* Phase progress visualization */}
-      {phases && phases.length > 0 && (
-        <div className="phase-progress">
-          {phases.map((phase, index) => (
-            <PhaseStep
-              key={phase.name}
-              phase={phase}
-              isLast={index === phases.length - 1}
-            />
-          ))}
-        </div>
-      )}
-
-      {/* Phase history timeline */}
-      {phaseHistory && phaseHistory.length > 0 && (
-        <div className="phase-history">
-          <div className="phase-history-list">
-            {phaseHistory.map((entry, index) => (
-              <PhaseHistoryItem key={index} entry={entry} />
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-/**
- * ConnectedBikeLanePanel - Self-contained panel that fetches its own data
- *
- * Used by DockingWorkspace via registerPanelComponent.
- * Subscribes to story updates so it re-renders when session file changes.
- */
-export function ConnectedBikeLanePanel(): React.ReactElement {
-  const { story, isLoading, error } = useStory();
-
-  if (isLoading) {
-    return (
-      <div className="bikelane-panel loading" data-testid="bikelane-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="bikelane-panel error" data-testid="bikelane-panel">
-        <div className="error-message">{error.message}</div>
-      </div>
-    );
-  }
-
-  return (
-    <BikeLanePanel
-      workflowType={story?.workflow ?? null}
-      phases={story?.workflowPhases ?? null}
-    />
-  );
-}
-
-export default BikeLanePanel;

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

@@ -1,65 +0,0 @@
-/**
- * ChangedPanel - Full file tree with changed file highlighting
- *
- * Story MSSCI-12717 - React Migration
- * ADR-0020 - Changed to use git as source of truth instead of /ws/diffs
- *
- * Shows full project directory tree with changed files highlighted.
- * Uses /api/files for tree structure and /ws/git for change status.
- */
-
-import React, { useCallback, useMemo } from 'react';
-import { FullFileTree } from '../FullFileTree';
-import { useGitStatus } from '../../hooks/useGitStatus';
-import type { FileStatus } from '../FileTree';
-import type { DirectoryEntry } from '../../hooks/useFileBrowser';
-
-/**
- * Map git status code to FileStatus
- */
-function gitStatusToFileStatus(gitStatus: string): FileStatus {
-  const indexStatus = gitStatus[0] || ' ';
-  const workTreeStatus = gitStatus[1] || ' ';
-
-  if (indexStatus === 'D' || workTreeStatus === 'D') return 'deleted';
-  if (indexStatus === '?' || indexStatus === 'A') return 'created';
-  return 'modified';
-}
-
-export function ChangedPanel(): React.ReactElement {
-  const { repos } = useGitStatus();
-
-  // Build a Map<filePath, FileStatus> from all dirty files
-  const changedFiles = useMemo(() => {
-    const map = new Map<string, FileStatus>();
-    for (const repo of repos) {
-      for (const file of repo.files) {
-        // Use full path from repo for matching against /api/files paths
-        const fullPath = repos.length > 1
-          ? `${repo.path}/${file.path}`
-          : `${repo.path}/${file.path}`;
-        map.set(fullPath, gitStatusToFileStatus(file.status));
-        // Also store relative path for fallback matching
-        map.set(file.path, gitStatusToFileStatus(file.status));
-      }
-    }
-    return map;
-  }, [repos]);
-
-  const handleFileClick = useCallback((entry: DirectoryEntry, status?: FileStatus) => {
-    // Open file in editor via API
-    fetch('/api/files/edit', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ path: entry.path }),
-    }).catch(err => console.error('[ChangedPanel] Failed to open file:', err));
-  }, []);
-
-  return (
-    <div className="changed-panel" data-testid="changed-panel">
-      <FullFileTree changedFiles={changedFiles} onFileClick={handleFileClick} />
-    </div>
-  );
-}
-
-export default ChangedPanel;