@pennyfarthing/core 11.3.7 → 11.4.0

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

@@ -0,0 +1,115 @@
+/**
+ * BackgroundPanel - Display background tasks
+ *
+ * Story MSSCI-12717 - React Migration
+ * Story MSSCI-12784 - Timer updates in real-time with accurate completion times
+ *
+ * Timer strategy:
+ * - On mount: fetch all tasks from backend (accurate snapshot)
+ * - Pending tasks: estimate elapsed from startedAt, update via interval
+ * - Completed tasks: use authoritative durationMs from backend
+ * - IPC events provide real-time updates with accurate timing
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { useBackgroundTasks, BackgroundTask } from '../../hooks/useBackgroundTasks';
+
+/**
+ * Format milliseconds into human-readable duration
+ */
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${Math.floor(ms / 1000)}s`;
+  return `${Math.floor(ms / 60000)}m`;
+}
+
+function TaskItem({ task, tick }: { task: BackgroundTask; tick: number }): React.ReactElement {
+  const isPending = task.status === 'pending';
+  const statusIcon = isPending ? '...' : (task.success ? 'v' : 'x');
+  const statusClass = `task-item task-${task.status}${task.success === false ? ' task-error' : ''}`;
+
+  // For completed tasks, use authoritative durationMs from backend
+  // For pending tasks, estimate from startedAt (tick triggers re-render)
+  let elapsedStr: string;
+  if (task.status === 'completed' && task.durationMs !== undefined) {
+    // Completed: use accurate duration from backend
+    elapsedStr = formatDuration(task.durationMs);
+  } else {
+    // Pending: estimate elapsed time (tick forces recalculation)
+    void tick; // Intentionally used to trigger re-render
+    elapsedStr = formatDuration(Date.now() - task.startedAt);
+  }
+
+  return (
+    <div className={statusClass} data-testid={`task-${task.taskId}`}>
+      <span className="task-status">{statusIcon}</span>
+      <div className="task-content">
+        <span className="task-description">{task.description}</span>
+        <span className="task-type">{task.subagentType}</span>
+      </div>
+      <span className="task-elapsed">{elapsedStr}</span>
+    </div>
+  );
+}
+
+export function BackgroundPanel(): React.ReactElement {
+  const { tasks, pendingCount, completedCount, clearCompleted } = useBackgroundTasks();
+  const [tick, setTick] = useState(0);
+
+  // Timer for live updates - only runs when there are pending tasks and panel is visible
+  useEffect(() => {
+    if (pendingCount === 0) return;
+
+    const interval = setInterval(() => {
+      setTick(t => t + 1);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [pendingCount]);
+
+  if (tasks.length === 0) {
+    return (
+      <div className="background-panel empty" data-testid="background-panel">
+        <div className="placeholder">No subagent tasks</div>
+      </div>
+    );
+  }
+
+  // Sort: pending first, then by start time (newest first)
+  const sortedTasks = [...tasks].sort((a, b) => {
+    if (a.status === 'pending' && b.status !== 'pending') return -1;
+    if (a.status !== 'pending' && b.status === 'pending') return 1;
+    return b.startedAt - a.startedAt;
+  });
+
+  return (
+    <div className="background-panel" data-testid="background-panel">
+      <div className="panel-header">
+        <span className="task-counts">
+          {pendingCount > 0 && <span className="pending-count">{pendingCount} running</span>}
+          {completedCount > 0 && <span className="completed-count">{completedCount} done</span>}
+        </span>
+        {completedCount > 0 && (
+          <Button
+            variant="ghost"
+            size="sm"
+            type="button"
+            className="clear-button"
+            onClick={clearCompleted}
+          >
+            Clear
+          </Button>
+        )}
+      </div>
+
+      <div className="task-list">
+        {sortedTasks.map(task => (
+          <TaskItem key={task.taskId} task={task} tick={tick} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default BackgroundPanel;

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;