@pennyfarthing/core 11.4.0 → 12.0.0

package/packages/core/src/public/components/ThemePalette/index.tsx

@@ -1,326 +0,0 @@
-/**
- * ThemePalette Component
- *
- * A dropdown component for quick theme switching between color presets.
- * Story MSSCI-12768 - Color Palette System
- *
- * Features:
- * - Popover menu with presets grouped by variant (dark/light)
- * - Searchable preset list via Command input
- * - 4-swatch visual preview (bg, bgSecondary, text, accent)
- * - Keyboard navigation (handled by Popover + Command primitives)
- * - ARIA attributes for accessibility
- */
-
-import React, { useMemo, useState } from 'react';
-import { Check, ChevronsUpDown } from 'lucide-react';
-import { getPresetIds, getPreset } from '../../utils/color-presets';
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
-import {
-  Command,
-  CommandInput,
-  CommandList,
-  CommandGroup,
-  CommandItem,
-  CommandEmpty,
-} from '@/components/ui/command';
-import './ThemePalette.css';
-
-// =============================================================================
-// Types
-// =============================================================================
-
-export interface ThemePaletteProps {
-  currentPreset: string;
-  onSelect?: (presetId: string) => void;
-  className?: string;
-}
-
-export interface RenderThemePaletteOptions {
-  currentPreset: string;
-  onSelect?: (presetId: string) => void;
-}
-
-// =============================================================================
-// Helpers
-// =============================================================================
-
-interface GroupedPresets {
-  dark: string[];
-  light: string[];
-}
-
-function groupPresetsByVariant(): GroupedPresets {
-  const ids = getPresetIds();
-  const dark: string[] = [];
-  const light: string[] = [];
-
-  for (const id of ids) {
-    const preset = getPreset(id);
-    if (!preset) continue;
-    if (preset.variant === 'light') {
-      light.push(id);
-    } else {
-      dark.push(id);
-    }
-  }
-
-  dark.sort((a, b) => (getPreset(a)?.name || '').localeCompare(getPreset(b)?.name || ''));
-  light.sort((a, b) => (getPreset(a)?.name || '').localeCompare(getPreset(b)?.name || ''));
-
-  return { dark, light };
-}
-
-// =============================================================================
-// Swatch rendering
-// =============================================================================
-
-function PresetSwatches({ presetId }: { presetId: string }) {
-  const preset = getPreset(presetId);
-  if (!preset) return null;
-
-  return (
-    <div className="preset-swatches">
-      <span
-        className="preset-swatch"
-        style={{ backgroundColor: preset.colors.bgPrimary }}
-        title="Background"
-      />
-      <span
-        className="preset-swatch"
-        style={{ backgroundColor: preset.colors.bgSecondary }}
-        title="Surface"
-      />
-      <span
-        className="preset-swatch"
-        style={{ backgroundColor: preset.colors.textPrimary }}
-        title="Text"
-      />
-      <span
-        className="preset-swatch"
-        style={{ backgroundColor: preset.colors.accent }}
-        title="Accent"
-      />
-    </div>
-  );
-}
-
-// =============================================================================
-// ThemePalette Component
-// =============================================================================
-
-export function ThemePalette({ currentPreset, onSelect, className = '' }: ThemePaletteProps) {
-  const [open, setOpen] = useState(false);
-  const grouped = useMemo(() => groupPresetsByVariant(), []);
-  const currentPresetData = getPreset(currentPreset);
-
-  const handleSelect = (presetId: string) => {
-    onSelect?.(presetId);
-    setOpen(false);
-  };
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          className={cn('theme-palette-button', className)}
-          aria-label={`Select theme, current: ${currentPresetData?.name || currentPreset}`}
-        >
-          <span className="theme-palette-current">
-            {currentPresetData && (
-              <span
-                className="preset-swatch"
-                style={{ backgroundColor: currentPresetData.colors.bgPrimary }}
-              />
-            )}
-            <span className="theme-palette-name">
-              {currentPresetData?.name || currentPreset}
-            </span>
-          </span>
-          <ChevronsUpDown className="theme-palette-chevron" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="theme-palette-popover p-0" align="start">
-        <Command>
-          <CommandInput placeholder="Search themes..." />
-          <CommandList>
-            <CommandEmpty>No theme found.</CommandEmpty>
-            <CommandGroup heading={`Dark (${grouped.dark.length})`}>
-              {grouped.dark.map((id) => {
-                const preset = getPreset(id);
-                if (!preset) return null;
-                const isActive = id === currentPreset;
-                return (
-                  <CommandItem
-                    key={id}
-                    value={preset.name}
-                    onSelect={() => handleSelect(id)}
-                    data-preset-id={id}
-                  >
-                    <PresetSwatches presetId={id} />
-                    <span className="preset-name">{preset.name}</span>
-                    <Check
-                      className={cn(
-                        'preset-check-icon ml-auto',
-                        isActive ? 'opacity-100' : 'opacity-0'
-                      )}
-                    />
-                  </CommandItem>
-                );
-              })}
-            </CommandGroup>
-            <CommandGroup heading={`Light (${grouped.light.length})`}>
-              {grouped.light.map((id) => {
-                const preset = getPreset(id);
-                if (!preset) return null;
-                const isActive = id === currentPreset;
-                return (
-                  <CommandItem
-                    key={id}
-                    value={preset.name}
-                    onSelect={() => handleSelect(id)}
-                    data-preset-id={id}
-                  >
-                    <PresetSwatches presetId={id} />
-                    <span className="preset-name">{preset.name}</span>
-                    <Check
-                      className={cn(
-                        'preset-check-icon ml-auto',
-                        isActive ? 'opacity-100' : 'opacity-0'
-                      )}
-                    />
-                  </CommandItem>
-                );
-              })}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-// =============================================================================
-// Render Function (for vanilla JS usage)
-// =============================================================================
-
-export function renderThemePalette(
-  container: HTMLElement,
-  options: RenderThemePaletteOptions
-): void {
-  const { currentPreset, onSelect } = options;
-
-  const wrapper = document.createElement('div');
-  wrapper.className = 'theme-palette';
-
-  const button = document.createElement('button');
-  button.className = 'theme-palette-button';
-  const preset = getPreset(currentPreset);
-  button.setAttribute('aria-label', `Select theme, current: ${preset?.name || currentPreset}`);
-  button.setAttribute('aria-expanded', 'false');
-  button.setAttribute('aria-haspopup', 'listbox');
-
-  button.innerHTML = `
-    <span class="theme-palette-current">
-      ${preset ? `<span class="preset-swatch" style="background-color: ${preset.colors.bgPrimary}"></span>` : ''}
-      <span class="theme-palette-name">${preset?.name || currentPreset}</span>
-    </span>
-    <span class="theme-palette-chevron" aria-hidden="true">&#x25BC;</span>
-  `;
-
-  const menu = document.createElement('div');
-  menu.className = 'theme-palette-menu';
-  menu.setAttribute('role', 'listbox');
-  menu.setAttribute('aria-label', 'Available themes');
-
-  const grouped = groupPresetsByVariant();
-
-  const renderGroup = (ids: string[], label: string) => {
-    const header = document.createElement('div');
-    header.className = 'preset-group-header';
-    header.setAttribute('role', 'presentation');
-    header.textContent = `${label} (${ids.length})`;
-    menu.appendChild(header);
-
-    ids.forEach((id) => {
-      const p = getPreset(id);
-      if (!p) return;
-
-      const option = document.createElement('button');
-      option.className = `theme-palette-option ${id === currentPreset ? 'active' : ''}`;
-      option.setAttribute('role', 'option');
-      option.setAttribute('aria-selected', id === currentPreset ? 'true' : 'false');
-      option.setAttribute('data-preset-id', id);
-      option.tabIndex = -1;
-
-      option.innerHTML = `
-        <div class="preset-swatches">
-          <span class="preset-swatch" style="background-color: ${p.colors.bgPrimary}" title="Background"></span>
-          <span class="preset-swatch" style="background-color: ${p.colors.bgSecondary}" title="Surface"></span>
-          <span class="preset-swatch" style="background-color: ${p.colors.textPrimary}" title="Text"></span>
-          <span class="preset-swatch" style="background-color: ${p.colors.accent}" title="Accent"></span>
-        </div>
-        <span class="preset-name">${p.name}</span>
-        ${id === currentPreset ? '<span class="preset-check" aria-hidden="true">&#x2713;</span>' : ''}
-      `;
-
-      option.addEventListener('click', () => {
-        onSelect?.(id);
-        menu.classList.remove('open');
-        button.setAttribute('aria-expanded', 'false');
-      });
-
-      menu.appendChild(option);
-    });
-  };
-
-  renderGroup(grouped.dark, 'Dark');
-  renderGroup(grouped.light, 'Light');
-
-  // Toggle menu
-  button.addEventListener('click', () => {
-    const isOpen = menu.classList.toggle('open');
-    button.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
-  });
-
-  // Close on click outside
-  document.addEventListener('click', (e) => {
-    if (!wrapper.contains(e.target as Node)) {
-      menu.classList.remove('open');
-      button.setAttribute('aria-expanded', 'false');
-    }
-  });
-
-  // Close on escape
-  document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape' && menu.classList.contains('open')) {
-      menu.classList.remove('open');
-      button.setAttribute('aria-expanded', 'false');
-    }
-  });
-
-  // Keyboard navigation
-  menu.addEventListener('keydown', (e) => {
-    const options = Array.from(menu.querySelectorAll('.theme-palette-option'));
-    const focusedIdx = options.findIndex((el) => el === document.activeElement);
-
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      const nextIndex = (focusedIdx + 1) % options.length;
-      (options[nextIndex] as HTMLElement).focus();
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      const prevIndex = (focusedIdx - 1 + options.length) % options.length;
-      (options[prevIndex] as HTMLElement).focus();
-    }
-  });
-
-  wrapper.appendChild(button);
-  wrapper.appendChild(menu);
-  container.appendChild(wrapper);
-}
-
-export default ThemePalette;

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

@@ -1,115 +0,0 @@
-/**
- * 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/ui/switch.tsx

@@ -1,27 +0,0 @@
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
-
-import { cn } from "@/lib/utils"
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "cyclist-switch peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-      className
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "cyclist-switch-thumb pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
-      )}
-    />
-  </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
-
-export { Switch }

package/packages/core/src/public/hooks/useBackgroundTasks.ts

@@ -1,131 +0,0 @@
-/**
- * useBackgroundTasks Hook
- *
- * React hook for subscribing to background task notifications.
- * Story MSSCI-12717 - React Migration
- * Story MSSCI-12784 - Timer accuracy: fetch on mount, IPC for updates
- * Story MSSCI-12860 - IPC to WebSocket Migration (Phase 1)
- *
- * Uses WebSocket /ws/background-tasks for real-time updates.
- */
-
-import { useState, useEffect, useCallback, useRef } from 'react';
-
-export interface BackgroundTask {
-  taskId: string;
-  description: string;
-  subagentType: string;
-  startedAt: number;
-  completedAt?: number;
-  durationMs?: number;
-  status: 'pending' | 'completed';
-  success?: boolean;
-  output?: string;
-  error?: string;
-  isBackground?: boolean;
-}
-
-interface UseBackgroundTasksResult {
-  tasks: BackgroundTask[];
-  pendingCount: number;
-  completedCount: number;
-  clearCompleted: () => void;
-}
-
-/** WebSocket message format from /ws/background-tasks */
-interface BackgroundTaskMessage {
-  type: 'init' | 'task:started' | 'task:completed';
-  tasks?: BackgroundTask[];
-  task?: BackgroundTask;
-}
-
-export function useBackgroundTasks(): UseBackgroundTasksResult {
-  const [tasks, setTasks] = useState<BackgroundTask[]>([]);
-  const wsRef = useRef<WebSocket | null>(null);
-  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
-
-  useEffect(() => {
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${protocol}//${window.location.host}/ws/background-tasks`;
-
-    const connect = () => {
-      try {
-        wsRef.current = new WebSocket(wsUrl);
-
-        wsRef.current.onopen = () => {
-          console.debug('[useBackgroundTasks] WebSocket connected');
-        };
-
-        wsRef.current.onmessage = (event) => {
-          try {
-            const msg = JSON.parse(event.data) as BackgroundTaskMessage;
-
-            switch (msg.type) {
-              case 'init':
-                // Initial snapshot of all tasks
-                if (msg.tasks) {
-                  setTasks(msg.tasks);
-                }
-                break;
-
-              case 'task:started':
-                // New task started
-                if (msg.task) {
-                  setTasks(prev => {
-                    // Avoid duplicates
-                    if (prev.some(t => t.taskId === msg.task!.taskId)) {
-                      return prev;
-                    }
-                    return [...prev, msg.task!];
-                  });
-                }
-                break;
-
-              case 'task:completed':
-                // Task completed (includes accurate durationMs from backend)
-                if (msg.task) {
-                  setTasks(prev => prev.map(t =>
-                    t.taskId === msg.task!.taskId ? { ...t, ...msg.task! } : t
-                  ));
-                }
-                break;
-            }
-          } catch (err) {
-            console.error('[useBackgroundTasks] Failed to parse message:', err);
-          }
-        };
-
-        wsRef.current.onclose = () => {
-          console.debug('[useBackgroundTasks] WebSocket closed, reconnecting...');
-          reconnectTimeoutRef.current = setTimeout(connect, 2000);
-        };
-
-        wsRef.current.onerror = (err) => {
-          console.error('[useBackgroundTasks] WebSocket error:', err);
-        };
-      } catch (err) {
-        console.error('[useBackgroundTasks] WebSocket init failed:', err);
-      }
-    };
-
-    connect();
-
-    return () => {
-      if (reconnectTimeoutRef.current) {
-        clearTimeout(reconnectTimeoutRef.current);
-      }
-      if (wsRef.current) {
-        wsRef.current.close();
-      }
-    };
-  }, []);
-
-  const clearCompleted = useCallback(() => {
-    setTasks(prev => prev.filter(t => t.status === 'pending'));
-  }, []);
-
-  const pendingCount = tasks.filter(t => t.status === 'pending').length;
-  const completedCount = tasks.filter(t => t.status === 'completed').length;
-
-  return { tasks, pendingCount, completedCount, clearCompleted };
-}