@pennyfarthing/cyclist 10.4.0 → 11.0.0

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

@@ -1,344 +0,0 @@
-/**
- * DebugPanel - Context usage and token stats display
- *
- * Story MSSCI-12717 - React Migration
- * Story MSSCI-12799 - Tier display
- * Story MSSCI-12782 - Token stats formatting
- *
- * Note: Tool call display moved to AuditLogPanel for comprehensive view.
- */
-
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { Separator } from '@/components/ui/separator';
-import { HotspotsDialog } from '../dialogs/HotspotsDialog';
-import { CodeMarkersDialog } from '../dialogs/CodeMarkersDialog';
-import { ComplexityDialog } from '../dialogs/ComplexityDialog';
-import { DependenciesDialog } from '../dialogs/DependenciesDialog';
-import { AgentLoadDialog } from '../AgentLoadDialog';
-import { DeadCodeDialog } from '../DeadCodeDialog';
-import { HealthGauge } from '../HealthGauge';
-import { ContextSparkline, SparklinePoint } from '../ContextSparkline';
-import { useHealthScore } from '../../hooks/useHealthScore';
-
-/** Context tier type */
-type ContextTier = 'FULL' | 'REFRESH' | 'HANDOFF' | 'MINIMAL';
-
-/** Matches ContextInfo shape from api/context.ts */
-interface ContextData {
-  /** Used tokens (from check-context.sh CONTEXT_TOKENS) */
-  tokens?: number | null;
-  percent?: number | null;
-  status?: string | null;
-  error?: string | null;
-  /** System prompt overhead (first turn tokens) */
-  baseline?: number | null;
-  /** Tokens used by conversation (total - baseline) */
-  usableTokens?: number | null;
-  /** Conversation usage as % of available capacity */
-  usablePercent?: number | null;
-  /** Available capacity (max - baseline) */
-  available?: number | null;
-  /** Current context tier */
-  tier?: ContextTier;
-  /** Per-component token counts (MSSCI-12800) */
-  tokenCounts?: Record<string, number>;
-  /** Total tokens across all injected components (MSSCI-12800) */
-  totalTokens?: number;
-}
-
-/**
- * Format a component name from snake_case to Title Case
- *
- * Examples:
- * - agent_definition → Agent Definition
- * - behavior_guide → Behavior Guide
- * - persona_compressed → Persona (Compressed)
- * - session_header → Session Header
- *
- * @param name - Component name in snake_case
- * @returns Formatted component name in Title Case
- */
-export function formatComponentName(name: string): string {
-  // Handle special case for compressed persona
-  if (name === 'persona_compressed') {
-    return 'Persona (Compressed)';
-  }
-
-  // Convert snake_case to Title Case
-  return name
-    .split('_')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ');
-}
-
-/**
- * Calculate token savings percentage for a given tier vs FULL
- *
- * Token estimates:
- * - FULL: ~4000 tokens (baseline)
- * - REFRESH: ~600 tokens (85% savings)
- * - HANDOFF: ~700 tokens (82% savings)
- * - MINIMAL: ~200 tokens (95% savings)
- */
-export function calculateTierSavings(tier: ContextTier | undefined): number {
-  if (!tier) return 0;
-
-  switch (tier) {
-    case 'FULL':
-      return 0;
-    case 'REFRESH':
-      return 85;
-    case 'HANDOFF':
-      return 82;
-    case 'MINIMAL':
-      return 95;
-    default:
-      return 0;
-  }
-}
-
-export function DebugPanel(): React.ReactElement {
-  const [context, setContext] = useState<ContextData | null>(null);
-  const [tokenStats, setTokenStats] = useState<Record<string, unknown> | null>(null);
-  const [breakdownExpanded, setBreakdownExpanded] = useState(false);
-  const [hotspotsOpen, setHotspotsOpen] = useState(false);
-  const [codeMarkersOpen, setCodeMarkersOpen] = useState(false);
-  const [complexityOpen, setComplexityOpen] = useState(false);
-  const [dependenciesOpen, setDependenciesOpen] = useState(false);
-  const [agentLoadOpen, setAgentLoadOpen] = useState(false);
-  const [deadCodeOpen, setDeadCodeOpen] = useState(false);
-  const healthScore = useHealthScore();
-  const sparklineRef = useRef<SparklinePoint[]>([]);
-  const [sparklineVersion, setSparklineVersion] = useState(0);
-
-  const pushSparklinePoint = useCallback((percent: number, tokens: number) => {
-    const buf = sparklineRef.current;
-    buf.push({ percent, tokens, timestamp: Date.now() });
-    if (buf.length > 50) buf.shift();
-    setSparklineVersion(v => v + 1);
-  }, []);
-
-  const handleDimensionClick = (dimensionName: string) => {
-    switch (dimensionName) {
-      case 'churn':
-        setHotspotsOpen(true);
-        break;
-      case 'test_gaps':
-        // TODO: TestGapsDialog — for now no drill-down
-        break;
-      case 'todo_density':
-      case 'deprecation_debt':
-        setCodeMarkersOpen(true);
-        break;
-      case 'complexity':
-        setComplexityOpen(true);
-        break;
-      case 'dead_code':
-        setDeadCodeOpen(true);
-        break;
-      case 'dependency_freshness':
-        setDependenciesOpen(true);
-        break;
-      case 'agent_context_efficiency':
-        setAgentLoadOpen(true);
-        break;
-    }
-  };
-
-  useEffect(() => {
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-
-    // Connect to context WebSocket
-    const contextWs = new WebSocket(`${protocol}//${window.location.host}/ws/context`);
-    contextWs.onmessage = (event) => {
-      try {
-        const data = JSON.parse(event.data);
-        if (data.type === 'init' || data.type === 'update') {
-          const ctx = data.context as ContextData;
-          setContext(ctx);
-          if (ctx.percent != null) {
-            pushSparklinePoint(ctx.percent, ctx.tokens ?? 0);
-          }
-        }
-      } catch {
-        // Ignore parse errors
-      }
-    };
-
-    // Connect to token-stats WebSocket
-    const tokenWs = new WebSocket(`${protocol}//${window.location.host}/ws/token-stats`);
-    tokenWs.onmessage = (event) => {
-      try {
-        const data = JSON.parse(event.data);
-        setTokenStats(data as Record<string, unknown>);
-      } catch {
-        // Ignore parse errors
-      }
-    };
-
-    return () => {
-      contextWs.close();
-      tokenWs.close();
-    };
-  }, [pushSparklinePoint]);
-
-  // Compute tier-specific CSS class
-  const tierClass = context?.tier ? `tier-${context.tier.toLowerCase()}` : '';
-  const tierSavings = calculateTierSavings(context?.tier);
-
-  return (
-    <div className="debug-panel" data-testid="debug-panel">
-      <HealthGauge
-        score={healthScore.data?.composite_score ?? null}
-        dimensions={healthScore.data?.dimensions ?? []}
-        totalDimensions={8}
-        onDimensionClick={handleDimensionClick}
-        isLoading={healthScore.isLoading}
-        lastFetchedAt={healthScore.lastFetchedAt}
-        onRefresh={healthScore.refresh}
-        error={healthScore.error}
-      />
-
-      <Separator className="my-3" />
-
-      <h4>Context Usage</h4>
-      {context ? (
-        <div className="context-info">
-          {context.tier && (
-            <div className="tier-display">
-              <Badge
-                variant="outline"
-                className={`tier-badge ${tierClass}`}
-                data-testid="tier-badge"
-              >
-                {context.tier}
-              </Badge>
-              <span className="tier-savings" data-testid="tier-savings">
-                {tierSavings}% savings
-              </span>
-            </div>
-          )}
-          {context.tokenCounts && Object.keys(context.tokenCounts).length > 0 && (
-            <div className="component-breakdown" data-testid="component-breakdown">
-              <div className="breakdown-header">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="breakdown-toggle"
-                  data-testid="breakdown-toggle"
-                  onClick={() => setBreakdownExpanded(!breakdownExpanded)}
-                  aria-expanded={breakdownExpanded}
-                >
-                  {breakdownExpanded ? '▼' : '▶'} Injected Context
-                </Button>
-                <span className="total-tokens" data-testid="total-tokens">
-                  {context.totalTokens?.toLocaleString()} tokens
-                </span>
-              </div>
-              <div
-                className={`component-list ${breakdownExpanded ? 'expanded' : 'collapsed'}`}
-                data-testid="component-list"
-                aria-expanded={breakdownExpanded}
-              >
-                {/* Sort components by token count descending, filter out zero values */}
-                {Object.entries(context.tokenCounts)
-                  .filter(([, count]) => count > 0)
-                  .sort(([, a], [, b]) => b - a)
-                  .map(([name, count]) => (
-                    <div
-                      key={name}
-                      className="component-item"
-                      data-testid={`component-${name}`}
-                    >
-                      <span className="component-name">
-                        {formatComponentName(name)}
-                      </span>
-                      <span className="component-tokens">
-                        {count.toLocaleString()}
-                      </span>
-                    </div>
-                  ))}
-              </div>
-            </div>
-          )}
-          <div className="context-bar">
-            <div
-              className="context-fill"
-              style={{ width: `${context.percent || 0}%` }}
-            />
-          </div>
-          <ContextSparkline history={sparklineRef.current} key={sparklineVersion} />
-          <span className="context-text">
-            {(context.tokens ?? 0).toLocaleString()} / {context.baseline != null && context.available != null
-              ? (context.baseline + context.available).toLocaleString()
-              : '—'} tokens
-            ({context.percent || 0}%)
-          </span>
-          {context.baseline != null && (
-            <dl className="context-breakdown">
-              <dt>System Prompt</dt>
-              <dd>{context.baseline.toLocaleString()} tokens</dd>
-              <dt>Conversation</dt>
-              <dd>{context.usableTokens?.toLocaleString() ?? '—'} tokens</dd>
-              <dt>Available</dt>
-              <dd>{context.available?.toLocaleString() ?? '—'} tokens</dd>
-            </dl>
-          )}
-        </div>
-      ) : (
-        <div className="placeholder">No context data</div>
-      )}
-
-      <Separator className="my-3" />
-
-      <h4>Token Stats</h4>
-      {tokenStats ? (
-        <dl className="token-stats">
-          {tokenStats.inputTokens !== undefined && (
-            <div className="token-stat-card" data-testid="token-stat-input">
-              <dt>Input</dt>
-              <dd>{Number(tokenStats.inputTokens).toLocaleString()}</dd>
-            </div>
-          )}
-          {tokenStats.outputTokens !== undefined && (
-            <div className="token-stat-card" data-testid="token-stat-output">
-              <dt>Output</dt>
-              <dd>{Number(tokenStats.outputTokens).toLocaleString()}</dd>
-            </div>
-          )}
-          {tokenStats.cacheReadTokens !== undefined && (
-            <div className="token-stat-card" data-testid="token-stat-cache-read">
-              <dt>Cache Read</dt>
-              <dd>{Number(tokenStats.cacheReadTokens).toLocaleString()}</dd>
-            </div>
-          )}
-          {tokenStats.cacheCreationTokens !== undefined && (
-            <div className="token-stat-card" data-testid="token-stat-cache-write">
-              <dt>Cache Write</dt>
-              <dd>{Number(tokenStats.cacheCreationTokens).toLocaleString()}</dd>
-            </div>
-          )}
-          {tokenStats.totalCostUsd !== undefined && Number(tokenStats.totalCostUsd) > 0 && (
-            <div className="token-stat-card" data-testid="token-stat-cost">
-              <dt>Cost</dt>
-              <dd>${Number(tokenStats.totalCostUsd).toFixed(4)}</dd>
-            </div>
-          )}
-        </dl>
-      ) : (
-        <div className="placeholder">No token stats</div>
-      )}
-
-      <HotspotsDialog open={hotspotsOpen} onOpenChange={setHotspotsOpen} />
-      <CodeMarkersDialog open={codeMarkersOpen} onOpenChange={setCodeMarkersOpen} />
-      <ComplexityDialog open={complexityOpen} onOpenChange={setComplexityOpen} />
-      <DependenciesDialog open={dependenciesOpen} onOpenChange={setDependenciesOpen} />
-      <AgentLoadDialog isOpen={agentLoadOpen} onClose={() => setAgentLoadOpen(false)} />
-      <DeadCodeDialog isOpen={deadCodeOpen} onClose={() => setDeadCodeOpen(false)} />
-    </div>
-  );
-}
-
-export default DebugPanel;

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

@@ -1,155 +0,0 @@
-/**
- * DiffsPanel - Display file diffs
- *
- * Story MSSCI-12717 - React Migration
- * Story MSSCI-14238 - Git-based diffs (renders raw unified diff format)
- */
-
-import React from 'react';
-import { Button } from '@/components/ui/button';
-import { useDiffs, DiffData } from '../../hooks/useDiffs';
-
-interface DiffLineProps {
-  line: string;
-  type: 'added' | 'removed' | 'context' | 'header' | 'hunk';
-  lineNum?: number;
-}
-
-function DiffLine({ line, type, lineNum }: DiffLineProps): React.ReactElement {
-  return (
-    <div className={`diff-line diff-${type}`}>
-      {lineNum !== undefined && <span className="line-num">{lineNum}</span>}
-      <span className="line-content">{line}</span>
-    </div>
-  );
-}
-
-/**
- * Parse raw git diff output into renderable lines
- */
-function parseGitDiffLines(rawDiff: string): Array<{ line: string; type: DiffLineProps['type']; lineNum?: number }> {
-  const lines = rawDiff.split('\n');
-  const result: Array<{ line: string; type: DiffLineProps['type']; lineNum?: number }> = [];
-  let lineNum = 0;
-
-  for (const line of lines) {
-    if (line.startsWith('diff --git') || line.startsWith('index ') ||
-        line.startsWith('---') || line.startsWith('+++')) {
-      result.push({ line, type: 'header' });
-    } else if (line.startsWith('@@')) {
-      // Hunk header - extract starting line number
-      const match = line.match(/@@ -\d+(?:,\d+)? \+(\d+)/);
-      if (match) {
-        lineNum = parseInt(match[1], 10) - 1;
-      }
-      result.push({ line, type: 'hunk' });
-    } else if (line.startsWith('+')) {
-      lineNum++;
-      result.push({ line: line.substring(1), type: 'added', lineNum });
-    } else if (line.startsWith('-')) {
-      result.push({ line: line.substring(1), type: 'removed' });
-    } else if (line.startsWith(' ') || line === '') {
-      lineNum++;
-      result.push({ line: line.substring(1) || '', type: 'context', lineNum });
-    } else {
-      // Binary file notice or other content
-      result.push({ line, type: 'context' });
-    }
-  }
-
-  return result;
-}
-
-function DiffView({ diff }: { diff: DiffData }): React.ReactElement {
-  // MSSCI-14238: Prefer raw git diff if available
-  const hasGitDiff = diff.diff && diff.diff.trim().length > 0;
-
-  let lines: Array<{ line: string; type: DiffLineProps['type']; lineNum?: number }>;
-
-  if (hasGitDiff) {
-    // Use git diff output directly
-    lines = parseGitDiffLines(diff.diff!);
-  } else {
-    // Fallback to legacy original/modified comparison (deprecated)
-    const originalLines = (diff.original || '').split('\n');
-    const modifiedLines = (diff.modified || '').split('\n');
-    lines = [];
-
-    originalLines.forEach((line, i) => {
-      if (!modifiedLines.includes(line)) {
-        lines.push({ line, type: 'removed', lineNum: i + 1 });
-      }
-    });
-
-    modifiedLines.forEach((line, i) => {
-      const type = originalLines.includes(line) ? 'context' : 'added';
-      lines.push({ line, type, lineNum: i + 1 });
-    });
-  }
-
-  // Stats display for git diffs
-  const statsDisplay = diff.additions !== undefined && diff.deletions !== undefined
-    ? `+${diff.additions} -${diff.deletions}`
-    : null;
-
-  return (
-    <div className="diff-view" data-testid="diff-view">
-      <div className="diff-header">
-        <span className="diff-path">{diff.path}</span>
-        {diff.status && <span className={`diff-status diff-status-${diff.status}`}>{diff.status}</span>}
-        {statsDisplay && <span className="diff-stats">{statsDisplay}</span>}
-        <span className="diff-tool">{diff.toolName}</span>
-      </div>
-      <div className="diff-content">
-        {lines.map((l, i) => (
-          <DiffLine key={i} line={l.line} type={l.type} lineNum={l.lineNum} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export function DiffsPanel(): React.ReactElement {
-  const { diffs, selectedDiff, selectDiff, clearDiffs } = useDiffs();
-
-  if (diffs.length === 0) {
-    return (
-      <div className="diffs-panel empty" data-testid="diffs-panel">
-        <div className="placeholder">No diffs yet</div>
-        <p className="hint">Diffs appear when files are modified</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="diffs-panel" data-testid="diffs-panel">
-      <div className="panel-header">
-        <span className="diff-count">{diffs.length} file(s)</span>
-        <Button variant="ghost" size="sm" type="button" className="clear-button" onClick={clearDiffs}>
-          Clear
-        </Button>
-      </div>
-
-      {diffs.length > 1 && (
-        <div className="diff-tabs">
-          {diffs.map(diff => (
-            <Button
-              variant={selectedDiff?.path === diff.path ? 'secondary' : 'ghost'}
-              size="sm"
-              key={diff.path}
-              type="button"
-              className={`diff-tab ${selectedDiff?.path === diff.path ? 'active' : ''}`}
-              onClick={() => selectDiff(diff.path)}
-            >
-              {diff.path.split('/').pop()}
-            </Button>
-          ))}
-        </div>
-      )}
-
-      {selectedDiff && <DiffView diff={selectedDiff} />}
-    </div>
-  );
-}
-
-export default DiffsPanel;