@pennyfarthing/core 11.3.8 → 11.4.0

package/packages/core/src/public/App.tsx

@@ -0,0 +1,356 @@
+/**
+ * Root React component for Cyclist
+ * Story MSSCI-12717 - React Migration
+ * Story MSSCI-12706 - Layout Persistence
+ * Story MSSCI-12769 - Font Customization
+ * Story MSSCI-12771 - Accessibility Compliance
+ *
+ * Renders the DockingWorkspace with all panels registered.
+ * Persists layout changes to config.local.yaml.
+ */
+
+import React, { useEffect, useCallback, useState } from 'react';
+import {
+  DockviewWorkspace,
+  registerPanelComponent,
+  PANEL_INVENTORY,
+} from './components/DockviewWorkspace';
+import { CommandPaletteProvider } from './components/CommandPalette';
+import { ClaudeProvider } from './contexts/ClaudeContext';
+import ClaudeContext from './contexts/ClaudeContext';
+import { MessageQueueProvider } from './contexts/MessageQueueContext';
+import { useLayoutPersistence } from './hooks/useLayoutPersistence';
+import { loadFontSettings, applyFontSettings } from './utils/font-presets';
+import { loadPresetFromProject, applyPreset } from './utils/color-presets';
+import { ErrorBoundary } from './components/ErrorBoundary';
+import { StandalonePanel, getStandalonePanelName } from './components/StandalonePanel';
+import { BikeRackWorkspace } from './components/BikeRackWorkspace';
+import ApprovalModal, { useApprovalModal } from './components/ApprovalModal';
+import { subscribeToPermissionRequests, sendPermissionResponse, createApprovalResponse } from './components/ApprovalModal';
+import type { ApprovalRequest, GrantScope } from './components/ApprovalModal';
+
+// Environment discriminator injected by server.ts (ADR-0024)
+declare global {
+  interface Window {
+    __CYCLIST_MODE__?: 'cyclist' | 'bikerack';
+  }
+}
+
+// Import all panel components
+// Note: ProgressPanel split into Workflow/AC/Todo panels (MSSCI-14188)
+import {
+  MessagePanel,
+  EnhancedSprintPanel,
+  GitPanel,
+  WorkflowPanel,
+  ACPanel,
+  TodoPanel,
+  BackgroundPanel,
+  DiffsPanel,
+  DebugPanel,
+  SettingsPanel,
+  AuditLogPanel,
+  TandemPanel,
+} from './components/panels';
+
+// =============================================================================
+// Panel Registration
+// =============================================================================
+
+// Register all panels BEFORE render
+// Center panel (sacred)
+registerPanelComponent(PANEL_INVENTORY.MESSAGE, MessagePanel);
+
+// Left sidebar panels
+registerPanelComponent(PANEL_INVENTORY.GIT, GitPanel);
+registerPanelComponent(PANEL_INVENTORY.DIFFS, DiffsPanel);
+registerPanelComponent(PANEL_INVENTORY.DEBUG, DebugPanel);
+registerPanelComponent(PANEL_INVENTORY.AUDIT_LOG, AuditLogPanel);
+
+// Right sidebar panels
+// Note: ProgressPanel split into Workflow/AC/Todo panels (MSSCI-14188)
+registerPanelComponent(PANEL_INVENTORY.SPRINT, EnhancedSprintPanel);
+registerPanelComponent(PANEL_INVENTORY.WORKFLOW, WorkflowPanel);
+registerPanelComponent(PANEL_INVENTORY.AC, ACPanel);
+registerPanelComponent(PANEL_INVENTORY.TODO, TodoPanel);
+registerPanelComponent(PANEL_INVENTORY.BACKGROUND, BackgroundPanel);
+registerPanelComponent(PANEL_INVENTORY.SETTINGS, SettingsPanel);
+registerPanelComponent(PANEL_INVENTORY.TANDEM, TandemPanel);
+
+// =============================================================================
+// Skip Link Component
+// =============================================================================
+
+interface SkipLinkProps {
+  href: string;
+  children: React.ReactNode;
+}
+
+function SkipLink({ href, children }: SkipLinkProps): React.ReactElement {
+  const handleClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    const target = document.querySelector(href);
+    if (target) {
+      (target as HTMLElement).focus();
+    }
+  }, [href]);
+
+  return (
+    <a
+      href={href}
+      className="sr-only skip-link"
+      onClick={handleClick}
+      onFocus={(e) => e.currentTarget.classList.add('skip-link-visible')}
+      onBlur={(e) => e.currentTarget.classList.remove('skip-link-visible')}
+    >
+      {children}
+    </a>
+  );
+}
+
+// =============================================================================
+// Reduced Motion Hook
+// =============================================================================
+
+function useReducedMotion(): void {
+  useEffect(() => {
+    // Check for prefers-reduced-motion
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+    const updateReducedMotion = (matches: boolean) => {
+      if (matches) {
+        document.documentElement.classList.add('reduced-motion');
+      } else {
+        document.documentElement.classList.remove('reduced-motion');
+      }
+    };
+
+    // Set initial value
+    updateReducedMotion(mediaQuery.matches);
+
+    // Listen for changes
+    const listener = (e: MediaQueryListEvent) => {
+      updateReducedMotion(e.matches);
+    };
+
+    mediaQuery.addEventListener('change', listener);
+    return () => mediaQuery.removeEventListener('change', listener);
+  }, []);
+}
+
+// =============================================================================
+// App Component
+// =============================================================================
+
+// =============================================================================
+// Root Error Fallback
+// =============================================================================
+
+/**
+ * Root-level error fallback UI - shown when the entire app crashes
+ */
+function RootErrorFallback(): React.ReactElement {
+  const handleReload = useCallback(() => {
+    window.location.reload();
+  }, []);
+
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100vh',
+      backgroundColor: 'var(--bg-primary, #0a0a0f)',
+      color: 'var(--text-primary, #e2e8f0)',
+      fontFamily: 'system-ui, -apple-system, sans-serif',
+      padding: '24px',
+      textAlign: 'center',
+    }}>
+      <h1 style={{
+        fontSize: '24px',
+        fontWeight: 600,
+        marginBottom: '16px',
+        color: 'var(--status-error, #ef4444)',
+      }}>
+        Something went wrong
+      </h1>
+      <p style={{
+        fontSize: '14px',
+        color: 'var(--text-secondary, #94a3b8)',
+        marginBottom: '24px',
+        maxWidth: '400px',
+      }}>
+        Cyclist encountered an unexpected error. Check the console for details.
+      </p>
+      <button
+        onClick={handleReload}
+        style={{
+          padding: '8px 16px',
+          fontSize: '14px',
+          backgroundColor: 'var(--accent-primary, #6366f1)',
+          color: 'white',
+          border: 'none',
+          borderRadius: '6px',
+          cursor: 'pointer',
+        }}
+      >
+        Reload Cyclist
+      </button>
+    </div>
+  );
+}
+
+// =============================================================================
+// App Component
+// =============================================================================
+
+export default function App(): React.ReactElement {
+  // Detect route mode (computed before hooks, used after)
+  const isBikeRackIndex = window.__CYCLIST_MODE__ === 'bikerack';
+  const standalonePanelName = getStandalonePanelName();
+
+  // --- All hooks called unconditionally (React rules of hooks) ---
+
+  const layoutEndpoint = isBikeRackIndex ? '/api/settings/bikerack-layout' : '/api/settings/layout';
+  const { layout, isLoading, saveLayout } = useLayoutPersistence(layoutEndpoint);
+
+  // Set up reduced motion support
+  useReducedMotion();
+
+  // Load and apply font settings on startup (MSSCI-12769)
+  useEffect(() => {
+    loadFontSettings().then(settings => {
+      applyFontSettings(settings);
+    });
+  }, []);
+
+  // Load and apply color preset on startup
+  useEffect(() => {
+    loadPresetFromProject().then(presetId => {
+      applyPreset(presetId);
+    });
+  }, []);
+
+  // ApprovalModal state management (MSSCI-14322)
+  const [requestQueue, setRequestQueue] = useState<ApprovalRequest[]>([]);
+  const { request, isOpen, show, hide } = useApprovalModal();
+
+  // Subscribe to permission requests via WebSocket
+  useEffect(() => {
+    const unsub = subscribeToPermissionRequests((incoming: ApprovalRequest) => {
+      setRequestQueue((prev) => [...prev, incoming]);
+    });
+    return unsub;
+  }, []);
+
+  // Show the next queued request when the current one is resolved
+  useEffect(() => {
+    if (!isOpen && requestQueue.length > 0) {
+      const [next, ...rest] = requestQueue;
+      setRequestQueue(rest);
+      show(next);
+    }
+  }, [isOpen, requestQueue, show]);
+
+  const handleApprove = useCallback((grantScope: GrantScope) => {
+    if (request) {
+      const response = createApprovalResponse(request.toolId, true, grantScope);
+      sendPermissionResponse(response);
+    }
+    hide();
+  }, [request, hide]);
+
+  const handleReject = useCallback(() => {
+    if (request) {
+      const response = createApprovalResponse(request.toolId, false);
+      sendPermissionResponse(response);
+    }
+    hide();
+  }, [request, hide]);
+
+  // --- BikeRack routes (after all hooks) ---
+
+  // BikeRack Dockview workspace (MSSCI-14877) — /bikerack renders Dockview layout
+  // No-op ClaudeContext: BikeRack has no Claude CLI subprocess, skip WebSocket
+  if (isBikeRackIndex) {
+    if (isLoading) {
+      return (
+        <div className="cyclist-loading" style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <div className="loading-spinner" aria-label="Loading layout..." />
+        </div>
+      );
+    }
+    const noop = () => () => {};
+    return (
+      <ClaudeContext.Provider value={{
+        send: () => {}, abort: () => {}, clear: () => {},
+        clearAndReload: () => {}, setMode: () => {},
+        isConnected: false, mode: 'default',
+        onMessage: noop, onComplete: noop, onError: noop,
+        onUserMessage: noop, onClear: noop,
+      }}>
+        <BikeRackWorkspace
+          initialLayout={layout ?? undefined}
+          onLayoutChange={saveLayout}
+        />
+      </ClaudeContext.Provider>
+    );
+  }
+
+  // BikeRack standalone panel routing (MSSCI-14821)
+  // URL-based detection only (Rule 10) — ?panel=X renders single panel full-screen
+  if (standalonePanelName) {
+    return <StandalonePanel />;
+  }
+
+  return (
+    <ErrorBoundary fallback={<RootErrorFallback />} panelName="App">
+      <ClaudeProvider>
+        <MessageQueueProvider>
+          <CommandPaletteProvider>
+            <div className="cyclist-app">
+              {/* Skip links for keyboard navigation (AC7) - always render first */}
+              <SkipLink href="#main-content">Skip to main content</SkipLink>
+              <SkipLink href="#message-input">Skip to input</SkipLink>
+              <SkipLink href="#sidebar-nav">Skip to navigation</SkipLink>
+
+              {/* Loading state - only show while actually loading */}
+              {isLoading ? (
+                <main id="main-content" tabIndex={-1}>
+                  <div className="cyclist-loading">
+                    <div className="loading-spinner" aria-label="Loading layout..." />
+                  </div>
+                </main>
+              ) : (
+                /* Main content area - layout can be null for first-time users */
+                <main id="main-content" tabIndex={-1}>
+                  <DockviewWorkspace
+                    initialLayout={layout ?? undefined}
+                    onLayoutChange={saveLayout}
+                  />
+                </main>
+              )}
+
+              {/* Sidebar navigation target (for skip link) */}
+              <nav id="sidebar-nav" tabIndex={-1} style={{ display: 'contents' }} aria-hidden="true" />
+
+              {/* Message input target (for skip link) */}
+              <div id="message-input" tabIndex={-1} style={{ display: 'contents' }} aria-hidden="true" />
+            </div>
+
+            {/* ApprovalModal - renders via Radix Portal outside the React tree (MSSCI-14322) */}
+            <ApprovalModal
+              isOpen={isOpen}
+              toolName={request?.toolName ?? ''}
+              toolId={request?.toolId ?? ''}
+              input={request?.input ?? {}}
+              onApprove={handleApprove}
+              onReject={handleReject}
+            />
+          </CommandPaletteProvider>
+        </MessageQueueProvider>
+      </ClaudeProvider>
+    </ErrorBoundary>
+  );
+}

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

@@ -0,0 +1,202 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
+import { ToolDialog } from './dialogs/ToolDialog';
+import { ConfirmDialog, useConfirmDialog } from './ConfirmDialog';
+import { useAgentLoad } from '../hooks/useAgentLoad.js';
+import type { AgentLoadEntry } from '../hooks/useAgentLoad.js';
+import { formatComponentName } from './panels/DebugPanel';
+
+const SIDECAR_FILES = ['patterns.md', 'gotchas.md', 'decisions.md'] as const;
+
+export interface AgentLoadDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function AgentLoadDialog({ isOpen, onClose }: AgentLoadDialogProps): React.ReactElement {
+  const { data, isLoading, error, refresh, pruneSidecar, pruneResult } = useAgentLoad();
+  const [expandedAgent, setExpandedAgent] = useState<string | null>(null);
+  const [pendingPrune, setPendingPrune] = useState<{ agent: string; file: string } | null>(null);
+
+  const { confirm, dialogProps } = useConfirmDialog({
+    title: 'Clear Sidecar',
+    message: pendingPrune
+      ? `Reset ${pendingPrune.file} for ${pendingPrune.agent}? This will replace the sidecar with its default template.`
+      : '',
+    confirmLabel: 'Confirm',
+    isDanger: true,
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      refresh();
+    }
+  }, [isOpen, refresh]);
+
+  const sortedAgents = useMemo(() => {
+    if (!data) return [];
+    return [...data.agents].sort((a, b) => (b.totalTokens ?? 0) - (a.totalTokens ?? 0));
+  }, [data]);
+
+  const maxTokens = useMemo(() => {
+    if (!sortedAgents.length) return 0;
+    return sortedAgents[0]?.totalTokens ?? 0;
+  }, [sortedAgents]);
+
+  const handleRowClick = (agent: string) => {
+    setExpandedAgent((prev) => (prev === agent ? null : agent));
+  };
+
+  const handleClear = async (agent: string, file: string) => {
+    setPendingPrune({ agent, file });
+    const confirmed = await confirm();
+    if (confirmed) {
+      await pruneSidecar(agent, file);
+    }
+    setPendingPrune(null);
+  };
+
+  const renderAgentRow = (entry: AgentLoadEntry) => {
+    const tokens = entry.totalTokens ?? 0;
+    const progressValue = maxTokens > 0 ? (tokens / maxTokens) * 100 : 0;
+    const isExpanded = expandedAgent === entry.agent;
+    // Color by token threshold: <3k green, <5k orange, >=5k red
+    const barColor = tokens >= 5000
+      ? 'bg-[var(--status-error,#f14c4c)]'
+      : tokens >= 3000
+        ? 'bg-[var(--status-warning,#cca700)]'
+        : 'bg-[var(--status-success,#4ec9b0)]';
+
+    return (
+      <Collapsible
+        key={entry.agent}
+        open={isExpanded}
+        onOpenChange={() => handleRowClick(entry.agent)}
+      >
+        <CollapsibleTrigger asChild>
+          <div
+            className="px-4 py-2 cursor-pointer hover:bg-muted/50 rounded-md transition-colors"
+            data-testid={`agent-row-${entry.agent}`}
+          >
+            <div className="flex items-center justify-between mb-1">
+              <span className="font-mono text-sm font-medium">{entry.agent}</span>
+              <span className="font-mono text-sm tabular-nums text-text-secondary">
+                {tokens.toLocaleString()}
+              </span>
+            </div>
+            <Progress
+              value={progressValue}
+              className="h-2.5 bg-[var(--border)]"
+              indicatorClassName={barColor}
+            />
+          </div>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="mx-4 mb-3 rounded-md bg-muted/30 p-3 space-y-1">
+            {entry.components && entry.components.length > 0 ? (
+              entry.components.map((comp) => (
+                <div key={comp.name} className="flex items-center justify-between text-xs text-text-secondary">
+                  <span>{formatComponentName(comp.name)}</span>
+                  <span className="tabular-nums">{comp.tokens.toLocaleString()}</span>
+                </div>
+              ))
+            ) : (
+              <div className="text-xs text-text-secondary">No component breakdown available</div>
+            )}
+            <div className="pt-2 border-t border-muted/50 mt-2">
+              <div className="text-xs font-medium mb-1.5 text-text-secondary">Sidecars</div>
+              <div className="flex gap-2">
+                {SIDECAR_FILES.map((file) => (
+                  <Button
+                    key={file}
+                    variant="ghost"
+                    size="sm"
+                    className="text-xs h-6"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleClear(entry.agent, file);
+                    }}
+                  >
+                    Clear {file}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  };
+
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <div className="space-y-3 p-4">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} data-testid={`skeleton-${i}`} className="space-y-1.5 px-4">
+              <div className="flex justify-between">
+                <Skeleton className="h-4 w-24" />
+                <Skeleton className="h-4 w-16" />
+              </div>
+              <Skeleton className="h-2.5 w-full rounded-full" />
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    if (error) {
+      return (
+        <div className="p-4 space-y-3">
+          <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>
+          <div className="text-center">
+            <Button variant="outline" size="sm" onClick={refresh}>
+              Retry
+            </Button>
+          </div>
+        </div>
+      );
+    }
+
+    if (!data) return null;
+
+    return (
+      <div className="space-y-0.5">
+        {pruneResult?.success && pruneResult.tokensFreed != null && (
+          <div className="text-xs text-green-600 px-4 py-1">
+            Freed {pruneResult.tokensFreed.toLocaleString()} tokens from {pruneResult.agent}/{pruneResult.file}
+          </div>
+        )}
+        <div className="flex items-center justify-between px-4 py-2">
+          <span data-testid="cached-at" className="text-xs text-[var(--text-muted)]">
+            Cached: {new Date(data.cachedAt).toLocaleString()}
+          </span>
+          <Button variant="ghost" size="sm" className="text-xs h-6 text-[var(--text-muted)] hover:text-[var(--text-primary)]" onClick={refresh}>
+            Refresh
+          </Button>
+        </div>
+        {sortedAgents.map((entry) => renderAgentRow(entry))}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <ToolDialog
+        open={isOpen}
+        onOpenChange={(open) => { if (!open) onClose(); }}
+        title="Agent Load Analysis"
+        description="Token usage breakdown for all agents"
+        className="max-w-2xl"
+      >
+        {renderContent()}
+      </ToolDialog>
+      <ConfirmDialog {...dialogProps} />
+    </>
+  );
+}