@pennyfarthing/cyclist 10.4.0 → 11.0.0

package/src/public/components/ToolStack.tsx

@@ -1,209 +0,0 @@
-/**
- * ToolStack Component
- *
- * Collapsible container for consecutive tool use groups.
- * Story MSSCI-13400 - Tool use stack between messages
- */
-
-import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
-import { Badge } from '@/components/ui/badge';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import ToolCallBlock, { getToolBadgeLabel } from './ToolCallBlock';
-import type { ToolStackData } from '../utils/toolStackGrouper';
-import { generateToolIntentSummary } from '../utils/toolIntentSummarizer';
-import { formatDuration } from '../utils/formatDuration';
-
-interface ToolResultMessage {
-  type: 'tool_result';
-  tool_id: string;
-  content: string;
-  timestamp: number;
-  durationMs?: number;
-}
-
-interface ToolStackProps {
-  stack: ToolStackData;
-  toolResults: Map<string, ToolResultMessage>;
-}
-
-export default function ToolStack({ stack, toolResults }: ToolStackProps): React.ReactElement {
-  // AC4: Expand automatically when stack has active (pending) tool
-  const [isCollapsed, setIsCollapsed] = useState(!stack.isActive);
-
-  // Track previous isActive to detect transitions
-  const prevIsActiveRef = useRef(stack.isActive);
-
-  // When stack transitions from active to inactive, keep it expanded
-  // This ensures completed tools remain visible for user review
-  useEffect(() => {
-    if (prevIsActiveRef.current && !stack.isActive) {
-      // Stack just completed - keep expanded for review
-      setIsCollapsed(false);
-    }
-    prevIsActiveRef.current = stack.isActive;
-  }, [stack.isActive]);
-
-  // Count display - just the number
-  const countText = `${stack.count}`;
-
-  // Active tool summary - show what's happening RIGHT NOW
-  const activeSummary = useMemo(() => {
-    if (stack.isActive && stack.tools.length > 0) {
-      // Show the most recent (last) tool's summary
-      const lastTool = stack.tools[stack.tools.length - 1];
-      return generateToolIntentSummary(lastTool.tool_name, lastTool.input);
-    }
-    return null;
-  }, [stack.tools, stack.isActive]);
-
-  // Generate summary of tool intents for collapsed view
-  const collapsedSummary = useMemo(() => {
-    // Show last tool's summary as the main description
-    if (stack.tools.length === 0) return '';
-    const lastTool = stack.tools[stack.tools.length - 1];
-    return generateToolIntentSummary(lastTool.tool_name, lastTool.input);
-  }, [stack.tools]);
-
-  // Compute tool type counts for mini badges
-  const toolTypeCounts = useMemo(() => {
-    const counts = new Map<string, number>();
-    stack.tools.forEach(tool => {
-      const count = counts.get(tool.tool_name) || 0;
-      counts.set(tool.tool_name, count + 1);
-    });
-    return counts;
-  }, [stack.tools]);
-
-  // Total duration across all tools in stack
-  const totalDuration = useMemo(() => {
-    return stack.tools.reduce((sum, tool) => {
-      const result = toolResults.get(tool.tool_id);
-      return sum + (result?.durationMs || 0);
-    }, 0);
-  }, [stack.tools, toolResults]);
-
-  // AC4: Determine which tool is current (pending)
-  const getToolClass = (toolIndex: number): string => {
-    const tool = stack.tools[toolIndex];
-    const result = toolResults.get(tool.tool_id);
-
-    // If stack is active, last tool without result is current
-    if (stack.isActive) {
-      const isLastTool = toolIndex === stack.tools.length - 1;
-      const hasPendingResult = !result;
-
-      if (isLastTool && hasPendingResult) {
-        return 'tool-current';
-      }
-      return 'tool-historical';
-    }
-
-    // If stack is not active, all tools are historical
-    return 'tool-historical';
-  };
-
-  // Toggle collapse state
-  const handleToggle = useCallback(() => {
-    setIsCollapsed(prev => !prev);
-  }, []);
-
-  // Keyboard navigation
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      handleToggle();
-    }
-  }, [handleToggle]);
-
-  // AC4: When active and user tries to collapse, still show current tool
-  const shouldShowTools = !isCollapsed || stack.isActive;
-
-  return (
-    <div
-      data-testid="tool-stack"
-      data-collapsible="true"
-      className={`tool-stack ${isCollapsed && !stack.isActive ? 'collapsed' : ''}`}
-    >
-      <div
-        data-testid="tool-stack-header"
-        className="tool-stack-header"
-        onClick={handleToggle}
-        onKeyDown={handleKeyDown}
-        role="button"
-        tabIndex={0}
-        aria-expanded={!isCollapsed || stack.isActive}
-        aria-label={`Tool stack with ${countText}: ${collapsedSummary}`}
-      >
-        <span className="tool-stack-toggle">
-          {isCollapsed && !stack.isActive ? '▶' : '▼'}
-        </span>
-        <span
-          data-testid="tool-stack-count"
-          className="tool-stack-count-badge"
-        >
-          {countText}
-        </span>
-        {stack.isActive && activeSummary ? (
-          <span className="tool-stack-active-summary">
-            {activeSummary}
-          </span>
-        ) : (
-          <>
-            <span className="tool-stack-badges">
-              <TooltipProvider delayDuration={300}>
-                {Array.from(toolTypeCounts.entries()).slice(0, 4).map(([type, count]) => (
-                  <Tooltip key={type}>
-                    <TooltipTrigger asChild>
-                      <Badge
-                        variant="outline"
-                        className={`tool-mini-badge badge-${type.toLowerCase()}`}
-                      >
-                        {getToolBadgeLabel(type)}
-                      </Badge>
-                    </TooltipTrigger>
-                    <TooltipContent>{`${count} ${type} call${count > 1 ? 's' : ''}`}</TooltipContent>
-                  </Tooltip>
-                ))}
-              </TooltipProvider>
-            </span>
-            <span className="tool-stack-summary">
-              {collapsedSummary}
-            </span>
-          </>
-        )}
-        <span className="tool-stack-duration">
-          {totalDuration > 0 ? formatDuration(totalDuration) : ''}
-        </span>
-      </div>
-
-      {shouldShowTools && (
-        <div className="tool-stack-content">
-          {stack.tools.map((tool, index) => {
-            const result = toolResults.get(tool.tool_id);
-            const toolClass = getToolClass(index);
-
-            return (
-              <ToolCallBlock
-                key={tool.tool_id || `tool-${index}`}
-                toolUse={{
-                  type: 'tool_use',
-                  tool_name: tool.tool_name,
-                  tool_id: tool.tool_id,
-                  input: tool.input,
-                  timestamp: tool.timestamp,
-                }}
-                result={result ? {
-                  type: 'tool_result',
-                  tool_id: result.tool_id,
-                  content: result.content,
-                  timestamp: result.timestamp,
-                } : undefined}
-                className={toolClass}
-              />
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/public/components/ToolStatus.tsx

@@ -1,57 +0,0 @@
-/**
- * ToolStatus Component
- *
- * Displays status indicator for tool execution state.
- * Story MSSCI-13402 - Tool use visual design polish
- */
-
-import React from 'react';
-
-export type ToolStatusType = 'pending' | 'success' | 'error';
-
-export interface ToolStatusProps {
-  status: ToolStatusType;
-}
-
-/**
- * Status indicator component showing pending/success/error state
- */
-export function ToolStatus({ status }: ToolStatusProps): React.ReactElement {
-  const getAriaLabel = (): string => {
-    switch (status) {
-      case 'pending':
-        return 'Tool running';
-      case 'success':
-        return 'Tool completed successfully';
-      case 'error':
-        return 'Tool failed with error';
-      default:
-        return 'Tool status unknown';
-    }
-  };
-
-  const getContent = (): React.ReactNode => {
-    switch (status) {
-      case 'pending':
-        return <span className="spinner" data-loading="true" />;
-      case 'success':
-        return '✓';
-      case 'error':
-        return '✗';
-      default:
-        return '?';
-    }
-  };
-
-  return (
-    <span
-      data-testid="tool-status-indicator"
-      className={`tool-status-indicator status-${status}`}
-      aria-label={getAriaLabel()}
-    >
-      {getContent()}
-    </span>
-  );
-}
-
-export default ToolStatus;

package/src/public/components/dialogs/CodeMarkersDialog.tsx

@@ -1,169 +0,0 @@
-/**
- * CodeMarkersDialog — Story 80-3 (MSSCI-14456)
- *
- * Dialog displaying code markers (TODO, FIXME, HACK, XXX) with tabs,
- * sortable table, staleness badges, and summary stats.
- */
-import React, { useState, useMemo, useEffect } from 'react';
-import { Badge } from '@/components/ui/badge';
-import { Skeleton } from '@/components/ui/skeleton';
-import { ToolDialog } from './ToolDialog';
-import { useCodeMarkers } from '../../hooks/useCodeMarkers';
-
-export interface CodeMarkersDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-type TabId = 'all' | 'stale' | 'deprecated';
-type SortField = 'marker_type' | 'path' | 'line' | 'author' | 'age_days';
-type SortDirection = 'asc' | 'desc';
-
-export function CodeMarkersDialog({ open, onOpenChange }: CodeMarkersDialogProps): React.ReactElement {
-  const { data, isLoading, error, refresh } = useCodeMarkers({ days: 90, repo: 'pennyfarthing' });
-
-  useEffect(() => {
-    if (open) refresh();
-  }, [open, refresh]);
-
-  const [activeTab, setActiveTab] = useState<TabId>('all');
-  const [sortField, setSortField] = useState<SortField>('age_days');
-  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
-
-  const filteredMarkers = useMemo(() => {
-    if (!data?.markers) return [];
-    switch (activeTab) {
-      case 'stale':
-        return data.markers.filter((m) => m.is_stale);
-      case 'deprecated':
-        return [];
-      default:
-        return data.markers;
-    }
-  }, [data, activeTab]);
-
-  const sortedMarkers = useMemo(() => {
-    const sorted = [...filteredMarkers];
-    sorted.sort((a, b) => {
-      const aVal = a[sortField];
-      const bVal = b[sortField];
-      if (typeof aVal === 'string' && typeof bVal === 'string') {
-        return sortDirection === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
-      }
-      const aNum = Number(aVal);
-      const bNum = Number(bVal);
-      return sortDirection === 'asc' ? aNum - bNum : bNum - aNum;
-    });
-    return sorted;
-  }, [filteredMarkers, sortField, sortDirection]);
-
-  const handleSort = (field: SortField) => {
-    if (sortField === field) {
-      setSortDirection((d) => (d === 'asc' ? 'desc' : 'asc'));
-    } else {
-      setSortField(field);
-      setSortDirection('desc');
-    }
-  };
-
-  const sortArrow = (field: SortField) => {
-    if (sortField !== field) return '';
-    return sortDirection === 'desc' ? ' v' : ' ^';
-  };
-
-  return (
-    <ToolDialog
-      open={open}
-      onOpenChange={onOpenChange}
-      title="Code Markers"
-      description="TODO, FIXME, HACK, and XXX markers across the codebase"
-    >
-      {isLoading && (
-        <div className="space-y-2">
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-3/4" />
-          <Skeleton className="h-4 w-1/2" />
-        </div>
-      )}
-
-      {error && (
-        <div className="p-4 rounded border border-[var(--status-error)]/20 bg-[var(--status-error)]/5 text-[var(--status-error)] text-sm">
-          {error.message}
-        </div>
-      )}
-
-      {!isLoading && !error && data && (
-        <>
-          {/* Summary stats */}
-          <div className="flex gap-4 text-xs text-[var(--text-muted)]" data-testid="code-markers-summary">
-            <span data-testid="summary-total">Total: <span className="tabular-nums font-mono">{data.summary.total_markers}</span></span>
-            <span data-testid="summary-stale">Stale: <span className="tabular-nums font-mono">{data.summary.stale_markers}</span></span>
-            {Object.entries(data.summary.by_type).map(([type, count]) => (
-              <span key={type} data-testid={`summary-type-${type.toLowerCase()}`}>{type}: <span className="tabular-nums font-mono">{count}</span></span>
-            ))}
-          </div>
-
-          {/* Tabs */}
-          <div role="tablist" className="flex gap-4 border-b border-[var(--border)] mb-3">
-            {(['all', 'stale', 'deprecated'] as const).map((tab) => (
-              <button
-                key={tab}
-                role="tab"
-                aria-selected={activeTab === tab}
-                onClick={() => setActiveTab(tab)}
-                className={`pb-2 text-sm capitalize ${activeTab === tab ? 'border-b-2 border-[var(--accent)] text-[var(--text-primary)] font-medium' : 'text-[var(--text-muted)]'}`}
-              >
-                {tab}
-              </button>
-            ))}
-          </div>
-
-          {/* Table or empty state */}
-          {sortedMarkers.length === 0 ? (
-            <div className="text-center py-12 text-[var(--text-muted)]">No markers found</div>
-          ) : (
-            <table role="table" className="w-full text-sm">
-              <thead>
-                <tr className="border-b border-[var(--border)]">
-                  <th className="cursor-pointer select-none text-left text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] pb-2" onClick={() => handleSort('marker_type')}>
-                    Type{sortArrow('marker_type')}
-                  </th>
-                  <th className="cursor-pointer select-none text-left text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] pb-2" onClick={() => handleSort('path')}>
-                    File{sortArrow('path')}
-                  </th>
-                  <th className="cursor-pointer select-none text-right text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] pb-2" onClick={() => handleSort('line')}>
-                    Line{sortArrow('line')}
-                  </th>
-                  <th className="text-left text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] pb-2">Text</th>
-                  <th className="cursor-pointer select-none text-left text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] pb-2" onClick={() => handleSort('author')}>
-                    Author{sortArrow('author')}
-                  </th>
-                  <th className="cursor-pointer select-none text-right text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] pb-2" onClick={() => handleSort('age_days')}>
-                    Age{sortArrow('age_days')}
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {sortedMarkers.map((marker, i) => (
-                  <tr key={`${marker.path}:${marker.line}:${i}`} className="text-[var(--text-primary)]">
-                    <td className="py-1.5">
-                      <Badge variant={marker.is_stale ? 'destructive' : 'secondary'}>
-                        {marker.marker_type}
-                      </Badge>
-                    </td>
-                    <td className="py-1.5 font-mono text-xs">{marker.path}</td>
-                    <td className="text-right py-1.5 tabular-nums font-mono">{marker.line}</td>
-                    <td className="py-1.5 truncate max-w-xs">{marker.text}</td>
-                    <td className="py-1.5">{marker.author}</td>
-                    <td className="text-right py-1.5 tabular-nums font-mono">{marker.age_days}d</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          )}
-        </>
-      )}
-
-    </ToolDialog>
-  );
-}

package/src/public/components/dialogs/ComplexityDialog.tsx

@@ -1,163 +0,0 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Skeleton } from '@/components/ui/skeleton';
-import { ToolDialog } from './ToolDialog';
-import { useComplexity, FileComplexity } from '../../hooks/useComplexity';
-
-export interface ComplexityDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-type SortField = 'avg_cyclomatic_complexity' | 'max_nesting_depth' | 'longest_function' | 'total_lines' | 'function_count' | 'path';
-type SortDirection = 'asc' | 'desc';
-
-function SortableHeader({
-  label,
-  field,
-  currentSort,
-  currentDirection,
-  onSort,
-  align = 'right',
-}: {
-  label: string;
-  field: SortField;
-  currentSort: SortField;
-  currentDirection: SortDirection;
-  onSort: (field: SortField) => void;
-  align?: 'left' | 'right';
-}) {
-  const isActive = currentSort === field;
-  const arrow = isActive ? (currentDirection === 'desc' ? ' v' : ' ^') : '';
-
-  return (
-    <th
-      className={`text-${align} ${isActive ? 'active' : ''}`}
-      onClick={() => onSort(field)}
-      role="columnheader"
-      aria-sort={isActive ? (currentDirection === 'desc' ? 'descending' : 'ascending') : 'none'}
-      style={{ cursor: 'pointer', userSelect: 'none', padding: '4px 8px' }}
-    >
-      {label}{arrow}
-    </th>
-  );
-}
-
-export function ComplexityDialog({ open, onOpenChange }: ComplexityDialogProps): React.ReactElement {
-  const [sortField, setSortField] = useState<SortField>('avg_cyclomatic_complexity');
-  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
-
-  const { data, isLoading, error, refresh } = useComplexity({});
-
-  useEffect(() => {
-    if (open) refresh();
-  }, [open, refresh]);
-
-  const handleSort = useCallback((field: SortField) => {
-    setSortField((prev) => {
-      if (prev === field) {
-        setSortDirection((d) => (d === 'desc' ? 'asc' : 'desc'));
-        return prev;
-      }
-      setSortDirection('desc');
-      return field;
-    });
-  }, []);
-
-  const sorted = useMemo(() => {
-    if (!data?.files) return [];
-    const items = [...data.files];
-    items.sort((a, b) => {
-      const aVal = a[sortField as keyof FileComplexity];
-      const bVal = b[sortField as keyof FileComplexity];
-      if (typeof aVal === 'number' && typeof bVal === 'number') {
-        return sortDirection === 'desc' ? bVal - aVal : aVal - bVal;
-      }
-      return sortDirection === 'desc'
-        ? String(bVal).localeCompare(String(aVal))
-        : String(aVal).localeCompare(String(bVal));
-    });
-    return items;
-  }, [data, sortField, sortDirection]);
-
-  const renderContent = () => {
-    if (isLoading) {
-      return (
-        <div className="complexity-panel loading" data-testid="complexity-panel">
-          <div className="space-y-3 p-2">
-            <Skeleton className="h-4 w-40" />
-            <Skeleton className="h-3 w-full" />
-            <Skeleton className="h-3 w-full" />
-            <Skeleton className="h-3 w-3/4" />
-          </div>
-        </div>
-      );
-    }
-
-    if (error) {
-      return (
-        <div className="complexity-panel error" data-testid="complexity-panel">
-          <div className="error-message">Error: {error.message}</div>
-          <Button variant="outline" size="sm" onClick={refresh}>Retry</Button>
-        </div>
-      );
-    }
-
-    if (!data) {
-      return (
-        <div className="complexity-panel" data-testid="complexity-panel">
-          <p>Click <strong>Analyze</strong> to run complexity analysis</p>
-        </div>
-      );
-    }
-
-    return (
-      <div className="complexity-panel" data-testid="complexity-panel">
-        <div className="complexity-summary" style={{ marginBottom: '8px' }}>
-          <span>{data.file_count} files analyzed</span>
-        </div>
-
-        <table className="complexity-table" role="table" style={{ width: '100%', borderCollapse: 'collapse' }}>
-          <thead>
-            <tr>
-              <SortableHeader label="Complexity" field="avg_cyclomatic_complexity" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} />
-              <SortableHeader label="Nesting" field="max_nesting_depth" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} />
-              <SortableHeader label="Longest Fn" field="longest_function" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} />
-              <SortableHeader label="Lines" field="total_lines" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} />
-              <SortableHeader label="Functions" field="function_count" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} />
-              <SortableHeader label="File" field="path" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="left" />
-            </tr>
-          </thead>
-          <tbody>
-            {sorted.map((f) => (
-              <tr key={f.path}>
-                <td className="text-right" style={{ padding: '4px 8px' }}>
-                  <Badge variant={f.avg_cyclomatic_complexity >= 7 ? 'destructive' : f.avg_cyclomatic_complexity >= 4 ? 'outline' : 'secondary'}>
-                    {Number(f.avg_cyclomatic_complexity).toFixed(1)}
-                  </Badge>
-                </td>
-                <td className="text-right" style={{ padding: '4px 8px' }}>{f.max_nesting_depth}</td>
-                <td className="text-right" style={{ padding: '4px 8px' }}>{f.longest_function}</td>
-                <td className="text-right" style={{ padding: '4px 8px' }}>{f.total_lines}</td>
-                <td className="text-right" style={{ padding: '4px 8px' }}>{f.function_count}</td>
-                <td className="text-left" style={{ padding: '4px 8px' }}>{f.path}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    );
-  };
-
-  return (
-    <ToolDialog
-      open={open}
-      onOpenChange={onOpenChange}
-      title="Complexity"
-      description="Cyclomatic complexity analysis"
-    >
-      {renderContent()}
-    </ToolDialog>
-  );
-}