@pennyfarthing/core 11.3.8 → 11.5.0-alpha.0

package/packages/core/src/public/components/panels/BikeLanePanel.tsx

@@ -0,0 +1,214 @@
+/**
+ * BikeLanePanel - Display workflow visualization
+ *
+ * Story MSSCI-12849 - Missing AC & BikeLane panels in Progress tab
+ *
+ * Reference: Deleted vanilla JS in commit 9aea4f371
+ * - js/sidebar/bikelane.js
+ */
+
+import React from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import type { WorkflowPhase } from '../../../story-parser.js';
+import { useStory } from '../../hooks/useStory.js';
+
+export interface PhaseHistoryEntry {
+  phase: string;
+  agent: string;
+  status: 'done' | 'current' | 'pending';
+  duration?: string;
+}
+
+export interface BikeLanePanelProps {
+  workflowType: string | null;
+  phases: WorkflowPhase[] | null;
+  phaseHistory?: PhaseHistoryEntry[] | null;
+  collapsed?: boolean;
+  onToggle?: () => void;
+}
+
+/**
+ * Format workflow type for display
+ * TDD, BDD -> uppercase
+ * trivial, others -> Title case
+ */
+function formatWorkflowType(type: string | null): string {
+  if (!type) return '—';
+
+  const upperTypes = ['tdd', 'bdd'];
+  if (upperTypes.includes(type.toLowerCase())) {
+    return type.toUpperCase();
+  }
+
+  return type.charAt(0).toUpperCase() + type.slice(1);
+}
+
+/**
+ * Get icon for phase status
+ */
+function getPhaseIcon(status: 'done' | 'current' | 'pending'): string {
+  switch (status) {
+    case 'done':
+      return '✓';
+    case 'current':
+      return '●';
+    case 'pending':
+    default:
+      return '○';
+  }
+}
+
+/**
+ * Phase step in progress visualization
+ */
+function PhaseStep({ phase, isLast }: { phase: WorkflowPhase; isLast: boolean }): React.ReactElement {
+  const icon = getPhaseIcon(phase.status);
+  const statusClass = `phase-step ${phase.status}`;
+
+  return (
+    <>
+      <div className={statusClass}>
+        <span className="phase-icon">{icon}</span>
+        <span className="phase-label">{phase.label}</span>
+      </div>
+      {!isLast && <span className="phase-arrow">→</span>}
+    </>
+  );
+}
+
+/**
+ * Phase history item in timeline
+ */
+function PhaseHistoryItem({ entry }: { entry: PhaseHistoryEntry }): React.ReactElement {
+  const icon = getPhaseIcon(entry.status);
+  const statusClass = `phase-history-item ${entry.status}`;
+
+  const durationText = entry.status === 'current'
+    ? 'in progress'
+    : entry.status === 'pending'
+    ? 'pending'
+    : entry.duration || '—';
+
+  return (
+    <div className={statusClass}>
+      <span className="history-icon">{icon}</span>
+      <span className="history-phase">{entry.phase.toUpperCase()}</span>
+      <span className="history-agent">{entry.agent}</span>
+      <span className="history-duration">{durationText}</span>
+    </div>
+  );
+}
+
+/**
+ * BikeLanePanel - Displays workflow progress and phase history
+ */
+export function BikeLanePanel({
+  workflowType,
+  phases,
+  phaseHistory,
+  collapsed = false,
+  onToggle,
+}: BikeLanePanelProps): React.ReactElement {
+  // Handle empty state
+  if (!workflowType && (!phases || phases.length === 0)) {
+    return (
+      <div className="bikelane-panel empty hidden" data-testid="bikelane-panel">
+        <div className="placeholder">No active workflow</div>
+      </div>
+    );
+  }
+
+  const formattedType = formatWorkflowType(workflowType);
+
+  // Handle collapsed state
+  if (collapsed) {
+    return (
+      <div className="bikelane-panel collapsed" data-testid="bikelane-panel">
+        <div className="bikelane-header" onClick={onToggle}>
+          <Badge variant="secondary" className="workflow-type-badge" data-workflow-type={workflowType || ''}>
+            {formattedType}
+          </Badge>
+          <span className="bikelane-expand">▶</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bikelane-panel" data-testid="bikelane-panel">
+      <div className="bikelane-header" onClick={onToggle}>
+        <Badge variant="secondary" className="workflow-type-badge" data-workflow-type={workflowType || ''}>
+          {formattedType}
+        </Badge>
+        {onToggle && <span className="bikelane-expand">▼</span>}
+      </div>
+
+      {/* Phase progress visualization */}
+      {phases && phases.length > 0 && (
+        <div className="phase-progress">
+          {phases.map((phase, index) => (
+            <PhaseStep
+              key={phase.name}
+              phase={phase}
+              isLast={index === phases.length - 1}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Phase history timeline */}
+      {phaseHistory && phaseHistory.length > 0 && (
+        <div className="phase-history">
+          <div className="phase-history-list">
+            {phaseHistory.map((entry, index) => (
+              <PhaseHistoryItem key={index} entry={entry} />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * ConnectedBikeLanePanel - Self-contained panel that fetches its own data
+ *
+ * Used by DockingWorkspace via registerPanelComponent.
+ * Subscribes to story updates so it re-renders when session file changes.
+ */
+export function ConnectedBikeLanePanel(): React.ReactElement {
+  const { story, isLoading, error } = useStory();
+
+  if (isLoading) {
+    return (
+      <div className="bikelane-panel loading" data-testid="bikelane-panel">
+        <div className="space-y-2 p-2">
+          <Skeleton className="h-6 w-16 rounded-full" />
+          <div className="flex gap-2 items-center">
+            <Skeleton className="h-4 w-12" />
+            <Skeleton className="h-4 w-12" />
+            <Skeleton className="h-4 w-12" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bikelane-panel error" data-testid="bikelane-panel">
+        <div className="error-message">{error.message}</div>
+      </div>
+    );
+  }
+
+  return (
+    <BikeLanePanel
+      workflowType={story?.workflow ?? null}
+      phases={story?.workflowPhases ?? null}
+    />
+  );
+}
+
+export default BikeLanePanel;

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

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

@@ -0,0 +1,109 @@
+/**
+ * DiffView - Shared diff rendering components
+ *
+ * Extracted from DiffsPanel for reuse by GitPanel (diff drill-through).
+ * Story MSSCI-14238 - Git-based diffs (renders raw unified diff format)
+ */
+
+import React from 'react';
+import type { DiffData } from '../../hooks/useDiffs';
+
+export interface DiffLineProps {
+  line: string;
+  type: 'added' | 'removed' | 'context' | 'header' | 'hunk';
+  lineNum?: number;
+}
+
+export 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
+ */
+export 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;
+}
+
+export 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>
+  );
+}