@pennyfarthing/cyclist 10.4.0 → 11.0.0

package/src/public/components/BikeRackWorkspace.tsx

@@ -1,142 +0,0 @@
-/**
- * BikeRackWorkspace - Dockview-based panel layout for BikeRack mode
- *
- * Story MSSCI-14877: Migrate BikeRack from index page to Dockview layout
- * Epic: 102 (BikeRack Follow-up)
- *
- * Replaces BikeRackIndex with a proper Dockview layout.
- * No MessagePanel (sacred center) — BikeRack is a monitoring dashboard.
- * Single Dockview group — users can freely rearrange panels.
- */
-
-import React, { useCallback, useRef } from 'react';
-import {
-  DockviewReact,
-  DockviewReadyEvent,
-  DockviewApi,
-  IDockviewPanelProps,
-} from 'dockview-react';
-import 'dockview-react/dist/styles/dockview.css';
-import { ErrorBoundary } from './ErrorBoundary';
-import { panelRegistry } from './panel-registry';
-import PersonaHeader from './PersonaHeader.js';
-import '../styles/dockview-theme.css';
-
-// =============================================================================
-// BikeRack Panel Definitions
-// =============================================================================
-
-/**
- * Panels included in BikeRack Dockview mode.
- * Unlike base Cyclist, BikeRack does NOT include MessagePanel.
- */
-export const BIKERACK_PANELS: string[] = [
-  'sprint',
-  'git',
-  'diffs',
-  'todo',
-  'workflow',
-  'background',
-  'audit-log',
-  'changed',
-  'ac',
-  'debug',
-  'settings',
-];
-
-const PANEL_TITLES: Record<string, string> = {
-  sprint: 'Sprint',
-  git: 'Git',
-  diffs: 'Diffs',
-  todo: 'Todo',
-  workflow: 'Workflow',
-  background: 'Subagents',
-  'audit-log': 'Audit Log',
-  changed: 'Changed',
-  ac: 'AC',
-  debug: 'Debug',
-  settings: 'Settings',
-};
-
-// =============================================================================
-// Panel Adapter
-// =============================================================================
-
-interface PanelAdapterParams {
-  panelId: string;
-}
-
-function PanelAdapter({ params }: IDockviewPanelProps<PanelAdapterParams>): React.ReactElement | null {
-  const Component = panelRegistry.get(params.panelId);
-
-  if (!Component) {
-    return (
-      <div data-testid={`panel-${params.panelId}`} className="dockview-panel-content">
-        <div style={{ padding: '16px', color: 'var(--text-secondary, #94a3b8)' }}>
-          {PANEL_TITLES[params.panelId] || params.panelId}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div data-testid={`panel-${params.panelId}`} className="dockview-panel-content">
-      <ErrorBoundary panelName={params.panelId}>
-        <div className="error-boundary-wrapper">
-          <Component />
-        </div>
-      </ErrorBoundary>
-    </div>
-  );
-}
-
-// =============================================================================
-// BikeRackWorkspace Component
-// =============================================================================
-
-export function BikeRackWorkspace(): React.ReactElement {
-  const apiRef = useRef<DockviewApi | null>(null);
-
-  const onReady = useCallback((event: DockviewReadyEvent) => {
-    const api = event.api;
-    apiRef.current = api;
-
-    // Single group — all panels as tabs, user can rearrange freely
-    const first = api.addPanel({
-      id: BIKERACK_PANELS[0],
-      component: 'PanelAdapter',
-      params: { panelId: BIKERACK_PANELS[0] },
-      title: PANEL_TITLES[BIKERACK_PANELS[0]],
-    });
-
-    for (let i = 1; i < BIKERACK_PANELS.length; i++) {
-      api.addPanel({
-        id: BIKERACK_PANELS[i],
-        component: 'PanelAdapter',
-        params: { panelId: BIKERACK_PANELS[i] },
-        position: { referencePanel: first.id },
-        title: PANEL_TITLES[BIKERACK_PANELS[i]],
-      });
-    }
-  }, []);
-
-  const components = { PanelAdapter };
-
-  return (
-    <div className="cyclist-app cyclist-dockview" style={{ height: '100vh', width: '100vw', display: 'flex', flexDirection: 'column' }}>
-      <div data-testid="bikerack-portrait-anchor" style={{ flexShrink: 0 }}>
-        <PersonaHeader />
-      </div>
-      <div className="flex-1" style={{ flexGrow: 1, minHeight: 0 }}>
-        <DockviewReact
-          className="dockview-container"
-          onReady={onReady}
-          components={components}
-          watermarkComponent={() => null}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default BikeRackWorkspace;

package/src/public/components/CommandPalette.tsx

@@ -1,555 +0,0 @@
-/**
- * CommandPalette Component
- *
- * Story MSSCI-12721 - Command Palette for keyboard-driven navigation
- *
- * Features:
- * - Cmd+Shift+P (Mac) / Ctrl+Shift+P (Windows) to open
- * - Fuzzy search filtering (via cmdk)
- * - Category grouping (Panels, Navigation, Settings, Agents)
- * - Keyboard shortcuts display
- * - Recent commands tracking
- *
- * Built on shadcn Command (cmdk) + Dialog primitives.
- */
-
-import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
-import {
-  Command as CommandPrimitive,
-  CommandInput,
-  CommandList,
-  CommandGroup,
-  CommandItem as ShadcnCommandItem,
-  CommandEmpty,
-  CommandShortcut,
-} from '@/components/ui/command';
-import { Dialog, DialogContent } from '@/components/ui/dialog';
-
-// =============================================================================
-// Types
-// =============================================================================
-
-export interface Command {
-  id: string;
-  name: string;
-  category: string;
-  shortcut?: string;
-  handler?: () => void;
-}
-
-export type CommandRegistry = Map<string, Command>;
-
-// Runtime exports for testing (TypeScript interfaces don't exist at runtime)
-export const Command = {} as const;
-export const CommandRegistry = {} as const;
-
-// =============================================================================
-// Constants
-// =============================================================================
-
-export const COMMAND_PALETTE_TRIGGER = {
-  key: 'p',
-  metaKey: true,
-  shiftKey: true,
-};
-
-export const COMMAND_CATEGORIES = ['Panels', 'Navigation', 'Settings', 'Agents'] as const;
-
-export const MODAL_OVERLAY_CLASS = 'command-palette-overlay';
-export const SEARCH_INPUT_ID = 'command-palette-search';
-export const RESULTS_LIST_ID = 'command-palette-results';
-export const CATEGORY_HEADER_CLASS = 'command-palette-category-header';
-export const SHORTCUT_DISPLAY_CLASS = 'command-palette-shortcut';
-export const RECENT_SECTION_CLASS = 'command-palette-recent';
-export const RECENT_COMMANDS_KEY = 'cyclist:recent-commands';
-export const MAX_RECENT_COMMANDS = 5;
-
-// =============================================================================
-// Default Commands
-// =============================================================================
-
-export const DEFAULT_COMMANDS: Command[] = [
-  // Panels
-  { id: 'toggle-changed-panel', name: 'Toggle Changed Files', category: 'Panels', shortcut: 'Cmd+Shift+1' },
-  { id: 'toggle-diffs-panel', name: 'Toggle Diffs', category: 'Panels', shortcut: 'Cmd+Shift+2' },
-  { id: 'toggle-message-panel', name: 'Toggle Messages', category: 'Panels', shortcut: 'Cmd+Shift+3' },
-  { id: 'toggle-debug-panel', name: 'Toggle Debug', category: 'Panels' },
-
-  // Navigation
-  { id: 'focus-input', name: 'Focus Input', category: 'Navigation', shortcut: 'Cmd+L' },
-  { id: 'scroll-to-bottom', name: 'Scroll to Bottom', category: 'Navigation', shortcut: 'Cmd+End' },
-  { id: 'scroll-to-top', name: 'Scroll to Top', category: 'Navigation', shortcut: 'Cmd+Home' },
-
-  // Settings
-  { id: 'open-settings', name: 'Open Settings', category: 'Settings', shortcut: 'Cmd+,' },
-  { id: 'toggle-theme', name: 'Toggle Theme', category: 'Settings' },
-
-  // Agents
-  { id: 'run-sm', name: 'Start Scrum Master', category: 'Agents' },
-  { id: 'run-tea', name: 'Start TEA', category: 'Agents' },
-  { id: 'run-dev', name: 'Start Dev', category: 'Agents' },
-  { id: 'run-reviewer', name: 'Start Reviewer', category: 'Agents' },
-];
-
-// =============================================================================
-// Selection State (module-level for imperative access)
-// =============================================================================
-
-let selectedIndex = 0;
-
-export function getSelectedIndex(): number {
-  return selectedIndex;
-}
-
-export function setSelectedIndex(index: number): void {
-  selectedIndex = index;
-}
-
-export function handleArrowDown(listLength: number): void {
-  selectedIndex = (selectedIndex + 1) % listLength;
-}
-
-export function handleArrowUp(listLength: number): void {
-  selectedIndex = selectedIndex === 0 ? listLength - 1 : selectedIndex - 1;
-}
-
-export function scrollSelectedIntoView(): void {
-  const selectedEl = document.querySelector(`[data-command-index="${selectedIndex}"]`);
-  selectedEl?.scrollIntoView({ block: 'nearest' });
-}
-
-// =============================================================================
-// Platform Detection
-// =============================================================================
-
-export function detectPlatform(): 'mac' | 'windows' | 'linux' {
-  if (typeof navigator === 'undefined') return 'mac';
-  const platform = navigator.platform?.toLowerCase() || '';
-  if (platform.includes('mac')) return 'mac';
-  if (platform.includes('win')) return 'windows';
-  return 'linux';
-}
-
-// =============================================================================
-// Keyboard Trigger Detection
-// =============================================================================
-
-export function isCommandPaletteTrigger(event: KeyboardEvent): boolean {
-  const isP = event.key.toLowerCase() === 'p';
-  const hasModifier = event.metaKey || event.ctrlKey;
-  const hasShift = event.shiftKey;
-  return isP && hasModifier && hasShift;
-}
-
-// =============================================================================
-// Shortcut Formatting
-// =============================================================================
-
-export function formatShortcut(shortcut: string, platform: 'mac' | 'windows' | 'linux'): string {
-  if (platform === 'mac') {
-    return shortcut
-      .replace(/Cmd/g, '\u2318')
-      .replace(/Shift/g, '\u21E7')
-      .replace(/Alt/g, '\u2325')
-      .replace(/Ctrl/g, '\u2303')
-      .replace(/\+/g, '');
-  }
-  // Windows/Linux: Keep text but replace Cmd with Ctrl
-  return shortcut.replace(/Cmd/g, 'Ctrl');
-}
-
-// =============================================================================
-// Command Filtering
-// =============================================================================
-
-export function filterCommands(commands: Command[], query: string): Command[] {
-  if (!query.trim()) return commands;
-
-  const lowerQuery = query.toLowerCase();
-
-  // Score each command for fuzzy matching
-  const scored = commands.map(cmd => {
-    const lowerName = cmd.name.toLowerCase();
-    const lowerId = cmd.id.toLowerCase();
-
-    // Exact match in name or id
-    if (lowerName.includes(lowerQuery) || lowerId.includes(lowerQuery)) {
-      // Prioritize matches at start
-      const startsWithBonus = lowerName.startsWith(lowerQuery) ? 100 : 0;
-      return { cmd, score: 50 + startsWithBonus };
-    }
-
-    // Fuzzy match: check if all query chars appear in order
-    let queryIdx = 0;
-    let consecutiveBonus = 0;
-    let lastMatchIdx = -1;
-
-    for (let i = 0; i < lowerName.length && queryIdx < lowerQuery.length; i++) {
-      if (lowerName[i] === lowerQuery[queryIdx]) {
-        if (lastMatchIdx === i - 1) consecutiveBonus += 5;
-        lastMatchIdx = i;
-        queryIdx++;
-      }
-    }
-
-    if (queryIdx === lowerQuery.length) {
-      return { cmd, score: 10 + consecutiveBonus };
-    }
-
-    return { cmd, score: 0 };
-  });
-
-  return scored
-    .filter(s => s.score > 0)
-    .sort((a, b) => b.score - a.score)
-    .map(s => s.cmd);
-}
-
-export function highlightMatch(text: string, query: string): string {
-  if (!query) return text;
-
-  const lowerText = text.toLowerCase();
-  const lowerQuery = query.toLowerCase();
-  let result = '';
-  let queryIdx = 0;
-
-  for (let i = 0; i < text.length; i++) {
-    if (queryIdx < lowerQuery.length && lowerText[i] === lowerQuery[queryIdx]) {
-      result += `<mark>${text[i]}</mark>`;
-      queryIdx++;
-    } else {
-      result += text[i];
-    }
-  }
-
-  return result;
-}
-
-// =============================================================================
-// Category Functions
-// =============================================================================
-
-export function groupByCategory(commands: Command[]): Record<string, Command[]> {
-  const grouped: Record<string, Command[]> = {};
-  for (const cmd of commands) {
-    if (!grouped[cmd.category]) {
-      grouped[cmd.category] = [];
-    }
-    grouped[cmd.category].push(cmd);
-  }
-  return grouped;
-}
-
-export function filterByCategory(commands: Command[], category: string): Command[] {
-  return commands.filter(cmd => cmd.category === category);
-}
-
-// =============================================================================
-// Command Validation
-// =============================================================================
-
-export function validateCommand(cmd: unknown): boolean {
-  if (!cmd || typeof cmd !== 'object') return false;
-  const c = cmd as Record<string, unknown>;
-  return (
-    typeof c.id === 'string' &&
-    typeof c.name === 'string' &&
-    typeof c.category === 'string'
-  );
-}
-
-// =============================================================================
-// Command Execution
-// =============================================================================
-
-export function executeCommand(command: Command): void {
-  addToRecent(command.id);
-  if (command.handler) {
-    command.handler();
-  }
-}
-
-// =============================================================================
-// Recent Commands (localStorage)
-// =============================================================================
-
-export function getRecentCommands(): string[] {
-  if (typeof localStorage === 'undefined') return [];
-  try {
-    const stored = localStorage.getItem(RECENT_COMMANDS_KEY);
-    return stored ? JSON.parse(stored) : [];
-  } catch {
-    return [];
-  }
-}
-
-export function addToRecent(commandId: string): void {
-  if (typeof localStorage === 'undefined') return;
-  const recent = getRecentCommands().filter(id => id !== commandId);
-  recent.unshift(commandId);
-  const trimmed = recent.slice(0, MAX_RECENT_COMMANDS);
-  localStorage.setItem(RECENT_COMMANDS_KEY, JSON.stringify(trimmed));
-}
-
-export function clearRecentCommands(): void {
-  if (typeof localStorage === 'undefined') return;
-  localStorage.removeItem(RECENT_COMMANDS_KEY);
-}
-
-export function sortWithRecentFirst(commands: Command[]): Command[] {
-  const recent = getRecentCommands();
-  const recentSet = new Set(recent);
-
-  const recentCmds = commands.filter(c => recentSet.has(c.id));
-  const otherCmds = commands.filter(c => !recentSet.has(c.id));
-
-  // Sort recent commands by their order in recent list
-  recentCmds.sort((a, b) => recent.indexOf(a.id) - recent.indexOf(b.id));
-
-  return [...recentCmds, ...otherCmds];
-}
-
-// =============================================================================
-// Command Registry
-// =============================================================================
-
-const commandRegistry: CommandRegistry = new Map();
-
-export function registerCommand(command: Command): void {
-  commandRegistry.set(command.id, command);
-}
-
-// Initialize default commands
-DEFAULT_COMMANDS.forEach(cmd => registerCommand(cmd));
-
-// =============================================================================
-// Context and Provider
-// =============================================================================
-
-interface CommandPaletteContextValue {
-  isOpen: boolean;
-  open: () => void;
-  close: () => void;
-  toggle: () => void;
-}
-
-const CommandPaletteContext = createContext<CommandPaletteContextValue | null>(null);
-
-export function useCommandPaletteContext(): CommandPaletteContextValue {
-  const ctx = useContext(CommandPaletteContext);
-  if (!ctx) {
-    throw new Error('useCommandPaletteContext must be used within CommandPaletteProvider');
-  }
-  return ctx;
-}
-
-export function useCommandPalette() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [commands] = useState<Command[]>(DEFAULT_COMMANDS);
-
-  const open = useCallback(() => {
-    setIsOpen(true);
-    setSelectedIndex(0);
-  }, []);
-
-  const close = useCallback(() => {
-    setIsOpen(false);
-  }, []);
-
-  const toggle = useCallback(() => {
-    if (isOpen) close();
-    else open();
-  }, [isOpen, open, close]);
-
-  return {
-    isOpen,
-    open,
-    close,
-    toggle,
-    commands,
-    selectedIndex: getSelectedIndex(),
-  };
-}
-
-// =============================================================================
-// Global Keyboard Listener
-// =============================================================================
-
-let globalListenerSetup = false;
-let globalOpenCallback: (() => void) | null = null;
-
-export function setupGlobalKeyboardListener(openCallback: () => void): () => void {
-  globalOpenCallback = openCallback;
-
-  if (!globalListenerSetup) {
-    const handler = (event: KeyboardEvent) => {
-      if (isCommandPaletteTrigger(event)) {
-        event.preventDefault();
-        globalOpenCallback?.();
-      }
-    };
-
-    document.addEventListener('keydown', handler);
-    globalListenerSetup = true;
-
-    return () => {
-      document.removeEventListener('keydown', handler);
-      globalListenerSetup = false;
-      globalOpenCallback = null;
-    };
-  }
-
-  return () => {
-    globalOpenCallback = null;
-  };
-}
-
-export function focusSearchInput(): void {
-  const input = document.getElementById(SEARCH_INPUT_ID);
-  input?.focus();
-}
-
-export function closePalette(): void {
-  // This is called imperatively; the actual close is handled by the component
-  const event = new CustomEvent('cyclist:close-command-palette');
-  document.dispatchEvent(event);
-}
-
-// =============================================================================
-// Provider Component
-// =============================================================================
-
-export function CommandPaletteProvider({ children }: { children: React.ReactNode }) {
-  const palette = useCommandPalette();
-
-  useEffect(() => {
-    const cleanup = setupGlobalKeyboardListener(palette.open);
-    return cleanup;
-  }, [palette.open]);
-
-  useEffect(() => {
-    const handleClose = () => palette.close();
-    document.addEventListener('cyclist:close-command-palette', handleClose);
-    return () => document.removeEventListener('cyclist:close-command-palette', handleClose);
-  }, [palette.close]);
-
-  const handleExecute = useCallback((cmd: Command) => {
-    executeCommand(cmd);
-    palette.close();
-  }, [palette.close]);
-
-  const value: CommandPaletteContextValue = {
-    isOpen: palette.isOpen,
-    open: palette.open,
-    close: palette.close,
-    toggle: palette.toggle,
-  };
-
-  return (
-    <CommandPaletteContext.Provider value={value}>
-      {children}
-      <CommandPalette
-        commands={palette.commands}
-        isOpen={palette.isOpen}
-        onClose={palette.close}
-        onExecute={handleExecute}
-      />
-    </CommandPaletteContext.Provider>
-  );
-}
-
-// =============================================================================
-// CommandPalette Component (shadcn CommandDialog)
-// =============================================================================
-
-interface CommandPaletteProps {
-  query?: string;
-  setQuery?: (q: string) => void;
-  commands: Command[];
-  onClose: () => void;
-  onExecute: (cmd: Command) => void;
-  isOpen?: boolean;
-}
-
-function CommandPalette({
-  commands,
-  onClose,
-  onExecute,
-  isOpen = true,
-}: CommandPaletteProps): React.ReactElement {
-  const platform = detectPlatform();
-  const recentIds = getRecentCommands();
-  const grouped = groupByCategory(commands);
-  const recentCommands = commands.filter(c => recentIds.includes(c.id));
-
-  return (
-    <Dialog open={isOpen} onOpenChange={(open) => { if (!open) onClose(); }}>
-      <DialogContent
-        className="overflow-hidden p-0"
-        aria-label="Command palette"
-      >
-        <CommandPrimitive className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          <CommandInput
-            placeholder="Type a command..."
-            id={SEARCH_INPUT_ID}
-            aria-label="Search commands"
-          />
-          <CommandList id={RESULTS_LIST_ID}>
-            <CommandEmpty>No matching commands</CommandEmpty>
-
-            {/* Recent Section */}
-            {recentCommands.length > 0 && (
-              <CommandGroup heading="Recent" className={RECENT_SECTION_CLASS}>
-                {recentCommands.map((cmd) => (
-                  <ShadcnCommandItem
-                    key={`recent-${cmd.id}`}
-                    value={cmd.name}
-                    onSelect={() => onExecute(cmd)}
-                    className="command-palette-item"
-                  >
-                    <span>{cmd.name}</span>
-                    {cmd.shortcut && (
-                      <CommandShortcut className={SHORTCUT_DISPLAY_CLASS}>
-                        {formatShortcut(cmd.shortcut, platform)}
-                      </CommandShortcut>
-                    )}
-                  </ShadcnCommandItem>
-                ))}
-              </CommandGroup>
-            )}
-
-            {/* Grouped by Category */}
-            {COMMAND_CATEGORIES.map(category => {
-              const categoryCommands = grouped[category];
-              if (!categoryCommands?.length) return null;
-
-              return (
-                <CommandGroup key={category} heading={category}>
-                  {categoryCommands.map((cmd) => (
-                    <ShadcnCommandItem
-                      key={cmd.id}
-                      value={cmd.name}
-                      onSelect={() => onExecute(cmd)}
-                      className="command-palette-item"
-                    >
-                      <span>{cmd.name}</span>
-                      {cmd.shortcut && (
-                        <CommandShortcut className={SHORTCUT_DISPLAY_CLASS}>
-                          {formatShortcut(cmd.shortcut, platform)}
-                        </CommandShortcut>
-                      )}
-                    </ShadcnCommandItem>
-                  ))}
-                </CommandGroup>
-              );
-            })}
-          </CommandList>
-        </CommandPrimitive>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-// Named and default exports
-export { CommandPalette };
-export default CommandPalette;