@pennyfarthing/core 11.3.8 → 11.4.0

package/packages/core/src/public/components/ToolStack.tsx

@@ -0,0 +1,209 @@
+/**
+ * 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/packages/core/src/public/components/ToolStatus.tsx

@@ -0,0 +1,57 @@
+/**
+ * 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/packages/core/src/public/components/dialogs/CodeMarkersDialog.tsx

@@ -0,0 +1,169 @@
+/**
+ * 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/packages/core/src/public/components/dialogs/ComplexityDialog.tsx

@@ -0,0 +1,163 @@
+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>
+  );
+}