@pennyfarthing/cyclist 10.4.0 → 11.0.0

package/src/public/App.tsx

@@ -1,340 +0,0 @@
-/**
- * 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';
-
-// Import all panel components
-// Note: ProgressPanel split into Workflow/AC/Todo panels (MSSCI-14188)
-import {
-  MessagePanel,
-  EnhancedSprintPanel,
-  GitPanel,
-  WorkflowPanel,
-  ACPanel,
-  TodoPanel,
-  BackgroundPanel,
-  ChangedPanel,
-  DiffsPanel,
-  DebugPanel,
-  SettingsPanel,
-  AuditLogPanel,
-  TTYPanel,
-} from './components/panels';
-
-// =============================================================================
-// Panel Registration
-// =============================================================================
-
-// Register all panels BEFORE render
-// Center panel (sacred)
-registerPanelComponent(PANEL_INVENTORY.MESSAGE, MessagePanel);
-
-// Left sidebar panels
-registerPanelComponent(PANEL_INVENTORY.CHANGED, ChangedPanel);
-registerPanelComponent(PANEL_INVENTORY.DIFFS, DiffsPanel);
-registerPanelComponent(PANEL_INVENTORY.DEBUG, DebugPanel);
-registerPanelComponent(PANEL_INVENTORY.AUDIT_LOG, AuditLogPanel);
-registerPanelComponent(PANEL_INVENTORY.TTY, TTYPanel);
-
-// 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.GIT, GitPanel);
-registerPanelComponent(PANEL_INVENTORY.SETTINGS, SettingsPanel);
-
-// =============================================================================
-// 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.location.pathname === '/bikerack';
-  const standalonePanelName = getStandalonePanelName();
-
-  // --- All hooks called unconditionally (React rules of hooks) ---
-
-  const { layout, isLoading, saveLayout } = useLayoutPersistence();
-
-  // 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) {
-    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 />
-      </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/src/public/components/AgentLoadDialog.tsx

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