@pennyfarthing/cyclist 9.3.0 → 10.0.0

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

@@ -3,16 +3,20 @@
  *
  * 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 from 'react';
+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 } from '../../../story-parser.js';
+import type { WorkflowPhase, AvailableWorkflow } from '../../../story-parser.js';
 
 // =============================================================================
 // Helper Functions
@@ -42,7 +46,7 @@ function formatWorkflowType(type: string | null): string {
 }
 
 // =============================================================================
-// Phase Step Component
+// Phase Step Component (for phased workflows)
 // =============================================================================
 
 function PhaseStep({ phase, isLast }: { phase: WorkflowPhase; isLast: boolean }): React.ReactElement {
@@ -60,12 +64,90 @@ function PhaseStep({ phase, isLast }: { phase: WorkflowPhase; isLast: boolean })
   );
 }
 
+// =============================================================================
+// 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 } = useStory();
+  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 (
@@ -92,8 +174,17 @@ export function WorkflowPanel(): React.ReactElement {
 
   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>
@@ -111,15 +202,19 @@ export function WorkflowPanel(): React.ReactElement {
         </Badge>
 
         {phases && phases.length > 0 && (
-          <div className="phase-progress">
-            {phases.map((phase, index) => (
-              <PhaseStep
-                key={phase.name}
-                phase={phase}
-                isLast={index === phases.length - 1}
-              />
-            ))}
-          </div>
+          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>

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

@@ -18,6 +18,7 @@ export { DebugPanel } from './DebugPanel';
 export { SettingsPanel } from './SettingsPanel';
 export { AuditLogPanel } from './AuditLogPanel';
 export { TTYPanel } from './TTYPanel';
+export { HotspotsPanel } from './HotspotsPanel';
 
 // Legacy exports - kept for backwards compatibility and tests
 export { AcceptanceCriteriaPanel, ConnectedAcceptanceCriteriaPanel } from './AcceptanceCriteriaPanel';

package/src/public/contexts/ClaudeContext.tsx

@@ -24,6 +24,7 @@ interface WebSocketClaudeMessage {
 type MessageCallback = (message: ClaudeMessage) => void;
 type CompleteCallback = () => void;
 type ErrorCallback = (error: string) => void;
+type ClearCallback = () => void;
 
 /** User message sent via send() - for display in MessagePanel */
 interface UserMessageData {
@@ -56,6 +57,8 @@ interface ClaudeContextValue {
   onError: (callback: ErrorCallback) => () => void;
   /** Subscribe to user messages sent via send() - for display in MessagePanel */
   onUserMessage: (callback: UserMessageCallback) => () => void;
+  /** Subscribe to clear/reset events */
+  onClear: (callback: ClearCallback) => () => void;
 }
 
 // =============================================================================
@@ -83,6 +86,7 @@ export function ClaudeProvider({ children }: ClaudeProviderProps): React.ReactEl
   const completeCallbacksRef = useRef<Set<CompleteCallback>>(new Set());
   const errorCallbacksRef = useRef<Set<ErrorCallback>>(new Set());
   const userMessageCallbacksRef = useRef<Set<UserMessageCallback>>(new Set());
+  const clearCallbacksRef = useRef<Set<ClearCallback>>(new Set());
 
   // Connect to WebSocket
   const connect = useCallback(() => {
@@ -204,6 +208,7 @@ export function ClaudeProvider({ children }: ClaudeProviderProps): React.ReactEl
     }
 
     wsRef.current.send(JSON.stringify({ type: 'clear' }));
+    clearCallbacksRef.current.forEach(cb => cb());
   }, []);
 
   // Clear session and reload agent (TirePump)
@@ -215,6 +220,7 @@ export function ClaudeProvider({ children }: ClaudeProviderProps): React.ReactEl
 
     console.log('[ClaudeContext] TirePump: clearAndReload agent:', agent);
     wsRef.current.send(JSON.stringify({ type: 'clearAndReload', agent }));
+    clearCallbacksRef.current.forEach(cb => cb());
   }, []);
 
   // Set permission mode
@@ -260,6 +266,14 @@ export function ClaudeProvider({ children }: ClaudeProviderProps): React.ReactEl
     };
   }, []);
 
+  // Subscribe to clear/reset events
+  const onClear = useCallback((callback: ClearCallback) => {
+    clearCallbacksRef.current.add(callback);
+    return () => {
+      clearCallbacksRef.current.delete(callback);
+    };
+  }, []);
+
   const value = useMemo(() => ({
     send,
     abort,
@@ -272,7 +286,8 @@ export function ClaudeProvider({ children }: ClaudeProviderProps): React.ReactEl
     onComplete,
     onError,
     onUserMessage,
-  }), [send, abort, clear, clearAndReload, setMode, isConnected, mode, onMessage, onComplete, onError, onUserMessage]);
+    onClear,
+  }), [send, abort, clear, clearAndReload, setMode, isConnected, mode, onMessage, onComplete, onError, onUserMessage, onClear]);
 
   return (
     <ClaudeContext.Provider value={value}>

package/src/public/css/theme-system.css

@@ -152,26 +152,31 @@
    Tool Call Block Styling (MSSCI-13402) - Klinger Redesign
    ============================================================================= */
 
-/* Base tool call block */
+/* Base tool call block — Tufte: indented, no border box */
 .tool-call-block {
-  background-color: var(--bg-primary);
-  border-radius: 6px;
-  border: 1px solid var(--border);
+  background: none;
+  border-radius: 0;
+  border: none;
+  border-left: 2px solid var(--border);
   overflow: hidden;
+  margin-left: 2.75rem; /* align with message content (avatar + gap) */
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  padding-left: 0.5rem;
   transition: border-color 0.15s ease;
 }
 
 .tool-call-block:hover {
-  border-color: var(--accent);
+  border-left-color: var(--accent);
 }
 
-/* Tool Header - the main bar */
+/* Tool Header - compact single-line */
 .tool-header {
   display: flex;
   align-items: center;
-  gap: 0.625rem;
-  padding: 0.5rem 0.75rem;
-  background-color: var(--bg-secondary);
+  gap: 0.5rem;
+  padding: 0.125rem 0;
+  background: none;
 }
 
 /* Tool Type Badge - colored pill for instant recognition */
@@ -201,14 +206,14 @@
 .tool-call-block.tool-edit .tool-type-badge { background-color: var(--tool-edit-color); }
 .tool-call-block.tool-task .tool-type-badge { background-color: var(--tool-task-color); }
 
-/* Keep left border for additional visual cue */
-.tool-call-block.tool-read { border-left: 3px solid var(--tool-read-color); }
-.tool-call-block.tool-write { border-left: 3px solid var(--tool-write-color); }
-.tool-call-block.tool-bash { border-left: 3px solid var(--tool-bash-color); }
-.tool-call-block.tool-glob { border-left: 3px solid var(--tool-glob-color); }
-.tool-call-block.tool-grep { border-left: 3px solid var(--tool-grep-color); }
-.tool-call-block.tool-edit { border-left: 3px solid var(--tool-edit-color); }
-.tool-call-block.tool-task { border-left: 3px solid var(--tool-task-color); }
+/* Color the left border by tool type */
+.tool-call-block.tool-read { border-left-color: var(--tool-read-color); }
+.tool-call-block.tool-write { border-left-color: var(--tool-write-color); }
+.tool-call-block.tool-bash { border-left-color: var(--tool-bash-color); }
+.tool-call-block.tool-glob { border-left-color: var(--tool-glob-color); }
+.tool-call-block.tool-grep { border-left-color: var(--tool-grep-color); }
+.tool-call-block.tool-edit { border-left-color: var(--tool-edit-color); }
+.tool-call-block.tool-task { border-left-color: var(--tool-task-color); }
 
 /* Intent summary - the human-readable description */
 .tool-name {
@@ -238,8 +243,7 @@
 
 /* Error state styling */
 .tool-call-block.tool-error {
-  border-left-color: var(--status-error);
-  background-color: rgba(239, 68, 68, 0.05);
+  border-left-color: var(--status-error) !important;
 }
 
 .tool-call-block.tool-error .tool-type-badge {
@@ -251,9 +255,8 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.375rem 0.75rem;
-  background-color: var(--bg-tertiary);
-  border-top: 1px solid var(--border);
+  padding: 0.125rem 0;
+  background: none;
 }
 
 .tool-result-toggle {
@@ -391,10 +394,13 @@
 
 /* Container for grouped tool calls */
 .tool-stack {
-  margin: 0.75rem 0;
-  border-radius: 8px;
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border);
+  margin: 0.5rem 0;
+  margin-left: 2.75rem; /* align with message content */
+  border-radius: 0;
+  background: none;
+  border: none;
+  border-left: 2px solid var(--border);
+  padding-left: 0.5rem;
 }
 
 .tool-stack.collapsed {
@@ -405,21 +411,21 @@
 .tool-stack-header {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.625rem 0.875rem;
+  gap: 0.5rem;
+  padding: 0.25rem 0;
   cursor: pointer;
   user-select: none;
-  background-color: var(--bg-secondary);
-  border-bottom: 1px solid transparent;
-  transition: background-color 0.15s ease, border-color 0.15s ease;
+  background: none;
+  border-bottom: none;
+  transition: background-color 0.15s ease;
 }
 
 .tool-stack:not(.collapsed) .tool-stack-header {
-  border-bottom-color: var(--border);
+  border-bottom-color: transparent;
 }
 
 .tool-stack-header:hover {
-  background-color: var(--bg-tertiary);
+  background-color: var(--bg-secondary);
 }
 
 .tool-stack-header:focus {
@@ -515,14 +521,16 @@
 .tool-stack-content {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  background-color: var(--bg-tertiary);
+  gap: 0.125rem;
+  padding: 0.25rem 0;
+  background: none;
 }
 
-/* Visual distinction for tools within a stack */
+/* Within a stack, tool blocks don't need extra indent or left border */
 .tool-stack-content .tool-call-block {
-  margin: 0;
+  margin-left: 0;
+  border-left: none;
+  padding-left: 0;
 }
 
 /* Tool state classes within stack */

package/src/public/hooks/useColorScheme.ts

@@ -0,0 +1,27 @@
+/**
+ * useColorScheme Hook
+ *
+ * Tracks the user's preferred color scheme (light/dark) via
+ * the prefers-color-scheme media query.
+ */
+
+import { useState, useEffect } from 'react';
+
+export type ColorScheme = 'light' | 'dark';
+
+export function useColorScheme(): ColorScheme {
+  const [scheme, setScheme] = useState<ColorScheme>(() =>
+    window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  );
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = (e: MediaQueryListEvent) => {
+      setScheme(e.matches ? 'dark' : 'light');
+    };
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+
+  return scheme;
+}

package/src/public/hooks/useFileBrowser.ts

@@ -0,0 +1,71 @@
+/**
+ * useFileBrowser Hook
+ *
+ * Fetches directory listings from /api/files for the full file tree.
+ * Lazy-loads subdirectories on demand.
+ */
+
+import { useState, useCallback } from 'react';
+
+export interface DirectoryEntry {
+  name: string;
+  path: string;
+  type: 'file' | 'directory';
+  isModified?: boolean;
+  size?: number;
+}
+
+export interface DirectoryListing {
+  path: string;
+  entries: DirectoryEntry[];
+}
+
+interface DirectoryCache {
+  [path: string]: DirectoryEntry[];
+}
+
+interface UseFileBrowserResult {
+  cache: DirectoryCache;
+  loading: Set<string>;
+  error: string | null;
+  fetchDirectory: (dirPath: string) => Promise<void>;
+}
+
+export function useFileBrowser(): UseFileBrowserResult {
+  const [cache, setCache] = useState<DirectoryCache>({});
+  const [loading, setLoading] = useState<Set<string>>(new Set());
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchDirectory = useCallback(async (dirPath: string) => {
+    // Already cached or loading
+    if (cache[dirPath] || loading.has(dirPath)) return;
+
+    setLoading(prev => new Set(prev).add(dirPath));
+    setError(null);
+
+    try {
+      const params = dirPath ? `?path=${encodeURIComponent(dirPath)}` : '';
+      const res = await fetch(`/api/files${params}`);
+      if (!res.ok) throw new Error(`Failed to list directory: ${res.statusText}`);
+      const listing: DirectoryListing = await res.json();
+
+      // Sort: directories first, then files, alphabetical within each
+      const sorted = listing.entries.sort((a, b) => {
+        if (a.type !== b.type) return a.type === 'directory' ? -1 : 1;
+        return a.name.localeCompare(b.name);
+      });
+
+      setCache(prev => ({ ...prev, [dirPath || '__root__']: sorted }));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load directory');
+    } finally {
+      setLoading(prev => {
+        const next = new Set(prev);
+        next.delete(dirPath);
+        return next;
+      });
+    }
+  }, [cache, loading]);
+
+  return { cache, loading, error, fetchDirectory };
+}

package/src/public/hooks/useHotspots.ts

@@ -0,0 +1,113 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+// Types matching Python HotspotResult / MultiRepoHotspotResult
+export interface FileHotspot {
+  path: string;
+  change_count: number;
+  bug_fix_count: number;
+  author_count: number;
+  lines_added: number;
+  lines_deleted: number;
+  churn: number;
+  last_changed: string;
+  hotspot_score: number;
+}
+
+export interface DirectoryHotspot {
+  path: string;
+  file_count: number;
+  total_changes: number;
+  total_bug_fixes: number;
+  avg_author_count: number;
+  hotspot_score: number;
+}
+
+export interface HotspotRepoResult {
+  success: boolean;
+  repo_name: string;
+  repo_path: string;
+  time_window_days: number;
+  commit_count: number;
+  file_hotspots: FileHotspot[];
+  directory_hotspots: DirectoryHotspot[];
+  error?: string;
+}
+
+export interface HotspotData {
+  success: boolean;
+  // Single-repo result fields (when --path is used)
+  repo_name?: string;
+  repo_path?: string;
+  time_window_days?: number;
+  commit_count?: number;
+  file_hotspots?: FileHotspot[];
+  directory_hotspots?: DirectoryHotspot[];
+  // Multi-repo result fields
+  repo_results?: HotspotRepoResult[];
+  error?: string;
+}
+
+export interface UseHotspotsOptions {
+  days: number;
+  repo?: string;
+}
+
+export interface UseHotspotsReturn {
+  data: HotspotData | null;
+  isLoading: boolean;
+  error: Error | null;
+  refresh: () => void;
+}
+
+export function useHotspots(options: UseHotspotsOptions): UseHotspotsReturn {
+  const [data, setData] = useState<HotspotData | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const fetchHotspots = useCallback(() => {
+    // Cancel any in-flight request
+    if (abortRef.current) {
+      abortRef.current.abort();
+    }
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    setIsLoading(true);
+    setError(null);
+
+    const params = new URLSearchParams({ days: String(options.days) });
+    if (options.repo) {
+      params.set('repo', options.repo);
+    }
+
+    fetch(`/api/hotspots?${params}`, { signal: controller.signal })
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+        }
+        return res.json();
+      })
+      .then((json: HotspotData) => {
+        setData(json);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        if (err.name === 'AbortError') return;
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoading(false);
+      });
+  }, [options.days, options.repo]);
+
+  // Cleanup abort controller on unmount
+  useEffect(() => {
+    return () => {
+      if (abortRef.current) {
+        abortRef.current.abort();
+      }
+    };
+  }, []);
+
+  return { data, isLoading, error, refresh: fetchHotspots };
+}