@pennyfarthing/cyclist 9.2.0 → 9.4.0

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 {
@@ -438,11 +444,30 @@
   transition: transform 0.2s ease;
 }
 
-/* Tool count with status context */
-.tool-stack-count {
+/* Tool count - small de-emphasized badge */
+.tool-stack-count-badge {
   font-weight: 600;
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  background-color: var(--bg-tertiary);
+  padding: 0.0625rem 0.375rem;
+  border-radius: 9999px;
+  font-family: var(--font-mono);
+  min-width: 1.25rem;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+/* Active tool summary - the main visual element while running */
+.tool-stack-active-summary {
+  font-weight: 500;
   font-size: 0.8125rem;
   color: var(--text-primary);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* Mini tool badges in collapsed header */
@@ -472,10 +497,11 @@
 .tool-mini-badge.badge-edit { background-color: var(--tool-edit-color); }
 .tool-mini-badge.badge-task { background-color: var(--tool-task-color); }
 
-/* Summary in collapsed state */
+/* Summary in collapsed state - still prominent */
 .tool-stack-summary {
-  color: var(--text-muted);
-  font-size: 0.75rem;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -495,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/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 };
+}

package/src/public/hooks/useStory.ts

@@ -11,7 +11,7 @@
 import { useState, useEffect, useRef } from 'react';
 
 // Import types from story-parser for criteria and workflow
-import type { CriteriaItem, WorkflowPhase } from '../../../story-parser.js';
+import type { CriteriaItem, WorkflowPhase, AvailableWorkflow } from '../../../story-parser.js';
 
 export interface StoryData {
   id: string;
@@ -24,15 +24,19 @@ export interface StoryData {
   // MSSCI-12849: AC and BikeLane panel data
   criteria?: CriteriaItem[] | null;
   workflowPhases?: WorkflowPhase[] | null;
+  // MSSCI-14300: Distinguish phased vs stepped workflow rendering
+  workflowType?: string;
 }
 
 // Re-export types for panel components
-export type { CriteriaItem, WorkflowPhase };
+export type { CriteriaItem, WorkflowPhase, AvailableWorkflow };
 
 interface UseStoryResult {
   story: StoryData | null;
   isLoading: boolean;
   error: Error | null;
+  // MSSCI-14301: Available workflows for discovery panel
+  availableWorkflows: AvailableWorkflow[] | null;
 }
 
 /** WebSocket message format from /ws/story */
@@ -44,7 +48,9 @@ interface StoryMessage {
   status?: string | null;
   points?: number | null;
   workflow?: WorkflowPhase[] | null;
+  workflowType?: string | null;
   criteria?: CriteriaItem[] | null;
+  availableWorkflows?: AvailableWorkflow[] | null;
   [key: string]: unknown;
 }
 
@@ -59,6 +65,7 @@ function transformMessage(msg: StoryMessage): StoryData | null {
     points: msg.points ?? undefined,
     criteria: msg.criteria,
     workflowPhases: msg.workflow,
+    workflowType: msg.workflowType ?? undefined,
   };
 }
 
@@ -66,6 +73,7 @@ export function useStory(): UseStoryResult {
   const [story, setStory] = useState<StoryData | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
+  const [availableWorkflows, setAvailableWorkflows] = useState<AvailableWorkflow[] | null>(null);
   const wsRef = useRef<WebSocket | null>(null);
   const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
@@ -86,6 +94,7 @@ export function useStory(): UseStoryResult {
             const msg = JSON.parse(event.data) as StoryMessage;
             if (msg.type === 'init' || msg.type === 'update') {
               setStory(transformMessage(msg));
+              setAvailableWorkflows(msg.availableWorkflows ?? null);
               setIsLoading(false);
               setError(null);
             }
@@ -122,5 +131,5 @@ export function useStory(): UseStoryResult {
     };
   }, []);
 
-  return { story, isLoading, error };
+  return { story, isLoading, error, availableWorkflows };
 }