@pennyfarthing/cyclist 10.4.0 → 11.0.0

package/src/public/components/ConfirmDialog.tsx

@@ -1,168 +0,0 @@
-/**
- * ConfirmDialog Component
- *
- * Generic confirmation modal for destructive or important actions,
- * built on shadcn AlertDialog (Radix UI primitives).
- *
- * Features:
- * - Title and message customization
- * - Confirm/Cancel button labels
- * - Danger mode styling for destructive actions (uses destructive button variant)
- * - Escape key to cancel (handled by Radix)
- * - Click outside to cancel (handled by Radix)
- * - Focus trap for accessibility (handled by Radix)
- */
-
-import React, { useRef, useCallback } from 'react';
-import {
-  AlertDialog,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogAction,
-  AlertDialogCancel,
-} from '@/components/ui/alert-dialog';
-import { buttonVariants } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-
-// =============================================================================
-// Types
-// =============================================================================
-
-export interface ConfirmDialogProps {
-  /** Whether the dialog is open */
-  isOpen: boolean;
-  /** Dialog title */
-  title: string;
-  /** Dialog message/description */
-  message: string;
-  /** Confirm button label (default: "Confirm") */
-  confirmLabel?: string;
-  /** Cancel button label (default: "Cancel") */
-  cancelLabel?: string;
-  /** Whether this is a dangerous/destructive action */
-  isDanger?: boolean;
-  /** Called when user confirms */
-  onConfirm: () => void;
-  /** Called when user cancels */
-  onCancel: () => void;
-}
-
-// =============================================================================
-// Component
-// =============================================================================
-
-export function ConfirmDialog({
-  isOpen,
-  title,
-  message,
-  confirmLabel = 'Confirm',
-  cancelLabel = 'Cancel',
-  isDanger = false,
-  onConfirm,
-  onCancel,
-}: ConfirmDialogProps): React.ReactElement {
-  return (
-    <AlertDialog open={isOpen} onOpenChange={(open) => { if (!open) onCancel(); }}>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>{title}</AlertDialogTitle>
-          <AlertDialogDescription>{message}</AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel onClick={onCancel}>{cancelLabel}</AlertDialogCancel>
-          <AlertDialogAction
-            className={cn(isDanger && buttonVariants({ variant: 'destructive' }))}
-            onClick={onConfirm}
-          >
-            {confirmLabel}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-}
-
-// =============================================================================
-// Hook for easy usage
-// =============================================================================
-
-interface UseConfirmDialogOptions {
-  title: string;
-  message: string;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  isDanger?: boolean;
-}
-
-interface UseConfirmDialogReturn {
-  isOpen: boolean;
-  confirm: () => Promise<boolean>;
-  dialogProps: ConfirmDialogProps;
-}
-
-/**
- * Hook for programmatic confirmation dialogs
- *
- * Usage:
- * ```tsx
- * const { confirm, dialogProps } = useConfirmDialog({
- *   title: 'Delete item?',
- *   message: 'This cannot be undone.',
- *   isDanger: true,
- * });
- *
- * const handleDelete = async () => {
- *   if (await confirm()) {
- *     // User confirmed, proceed with deletion
- *   }
- * };
- *
- * return (
- *   <>
- *     <button onClick={handleDelete}>Delete</button>
- *     <ConfirmDialog {...dialogProps} />
- *   </>
- * );
- * ```
- */
-export function useConfirmDialog(options: UseConfirmDialogOptions): UseConfirmDialogReturn {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const resolveRef = useRef<((value: boolean) => void) | null>(null);
-
-  const confirm = useCallback(() => {
-    return new Promise<boolean>((resolve) => {
-      resolveRef.current = resolve;
-      setIsOpen(true);
-    });
-  }, []);
-
-  const handleConfirm = useCallback(() => {
-    setIsOpen(false);
-    resolveRef.current?.(true);
-    resolveRef.current = null;
-  }, []);
-
-  const handleCancel = useCallback(() => {
-    setIsOpen(false);
-    resolveRef.current?.(false);
-    resolveRef.current = null;
-  }, []);
-
-  const dialogProps: ConfirmDialogProps = {
-    isOpen,
-    title: options.title,
-    message: options.message,
-    confirmLabel: options.confirmLabel,
-    cancelLabel: options.cancelLabel,
-    isDanger: options.isDanger,
-    onConfirm: handleConfirm,
-    onCancel: handleCancel,
-  };
-
-  return { isOpen, confirm, dialogProps };
-}
-
-export default ConfirmDialog;

package/src/public/components/ContextIndicator/ContextIndicator.css

@@ -1,85 +0,0 @@
-/**
- * ContextIndicator Component Styles
- *
- * Story MSSCI-12712 - ContextIndicator Component
- *
- * Layout, compact mode, level text colors, and warning animation.
- * The progress bar itself is rendered by shadcn Progress primitive.
- *
- * Color scheme:
- * - normal (green): Safe context usage (<70%)
- * - elevated (amber): Warning context usage (70-89%)
- * - high (red): Danger context usage (90%+)
- */
-
-.context-indicator {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 8px;
-  border-radius: var(--border-radius, 4px);
-  background: var(--bg-tertiary, rgba(255, 255, 255, 0.05));
-  font-size: 12px;
-  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
-}
-
-/* Compact mode for smaller displays */
-.context-indicator--compact {
-  padding: 2px 6px;
-  gap: 4px;
-  font-size: 10px;
-}
-
-/* Percentage text */
-.context-percent {
-  min-width: 32px;
-  text-align: right;
-  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
-  transition: color 0.3s ease-out;
-}
-
-.context-indicator--compact .context-percent {
-  min-width: 28px;
-}
-
-/* Level text colors - Normal (green) */
-.context-indicator.level-normal .context-percent {
-  color: var(--color-success, #22c55e);
-}
-
-/* Level text colors - Elevated (amber) */
-.context-indicator.level-elevated .context-percent {
-  color: var(--color-warning, #f59e0b);
-}
-
-/* Level text colors - High (red) */
-.context-indicator.level-high .context-percent {
-  color: var(--color-danger, #ef4444);
-}
-
-/* Warning state (data-warning attribute) */
-.context-indicator[data-warning] {
-  animation: pulse-warning 2s ease-in-out infinite;
-}
-
-@keyframes pulse-warning {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.8;
-  }
-}
-
-/* Screen reader only warning text */
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}

package/src/public/components/ContextIndicator/index.tsx

@@ -1,330 +0,0 @@
-/**
- * ContextIndicator Component
- *
- * Displays context window usage as a visual progress bar with threshold colors.
- * Story MSSCI-12712 - ContextIndicator Component
- *
- * Features:
- * - Percentage display with clamping (0-100%)
- * - Color thresholds: normal (<70%), elevated (70-89%), high (90%+)
- * - Real-time updates via IPC subscriptions
- * - Warning display at 90% threshold
- * - Tooltip showing exact token count (shadcn Tooltip)
- * - Accessible with ARIA attributes
- * - Uses shadcn Progress primitive for the progress bar
- */
-
-import React, { useState, useEffect } from 'react';
-import { Progress } from '@/components/ui/progress';
-import {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-  TooltipProvider,
-} from '@/components/ui/tooltip';
-import { cn } from '@/lib/utils';
-import './ContextIndicator.css';
-
-// ============================================================================
-// Constants
-// ============================================================================
-
-/** Threshold values for context level colors */
-export const CONTEXT_THRESHOLDS = {
-  WARNING: 70,
-  DANGER: 90,
-} as const;
-
-/** Test IDs for DOM querying */
-export const CONTEXT_INDICATOR_TESTID = 'context-indicator';
-export const CONTEXT_PERCENT_TESTID = 'context-percent';
-export const CONTEXT_BAR_TESTID = 'context-bar';
-export const CONTEXT_FILL_TESTID = 'context-fill';
-
-/** CSS class names */
-export const COMPONENT_CLASSNAME = 'context-indicator';
-export const COMPACT_MODE_CLASSNAME = 'context-indicator--compact';
-
-/** Accessibility constants */
-export const PROGRESS_BAR_ROLE = 'progressbar';
-export const CONTEXT_INDICATOR_ARIA_LIVE = 'polite';
-
-/** Warning message displayed at high context usage */
-export const CONTEXT_WARNING_MESSAGE = 'Context usage is high. Consider starting a new conversation.';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-export type ContextLevel = 'normal' | 'elevated' | 'high';
-
-export interface ContextData {
-  percent: number;
-  used?: number;
-  total?: number;
-}
-
-export interface ContextIndicatorProps {
-  /** Override percentage (0-100). If not provided, uses hook data */
-  percent?: number;
-  /** Used tokens for tooltip */
-  used?: number;
-  /** Total tokens for tooltip */
-  total?: number;
-  /** Compact mode for smaller displays */
-  compact?: boolean;
-  /** Additional CSS class name */
-  className?: string;
-}
-
-interface UseContextIndicatorResult {
-  context: ContextData | null;
-  isLoading: boolean;
-  error: Error | null;
-}
-
-// ============================================================================
-// Utility Functions
-// ============================================================================
-
-/**
- * Format a number as a percentage string with clamping.
- * @param value - The percentage value (may be outside 0-100)
- * @returns Formatted string like "45%"
- */
-export function formatPercentage(value: number | null | undefined): string {
-  if (value === null || value === undefined || isNaN(value)) {
-    return '0%';
-  }
-  const clamped = Math.min(100, Math.max(0, Math.round(value)));
-  return `${clamped}%`;
-}
-
-/**
- * Format a token count with thousands separator.
- * @param count - The token count
- * @returns Formatted string like "50,000"
- */
-export function formatTokenCount(count: number | null | undefined): string {
-  if (count === null || count === undefined || isNaN(count)) {
-    return '—';
-  }
-  return count.toLocaleString('en-US');
-}
-
-/**
- * Format tooltip text showing used/total tokens.
- * @param used - Used tokens
- * @param total - Total tokens
- * @returns Formatted string like "50,000 / 200,000 tokens"
- */
-export function formatTooltip(
-  used: number | null | undefined,
-  total: number | null | undefined
-): string {
-  const usedStr = formatTokenCount(used);
-  const totalStr = formatTokenCount(total);
-  return `${usedStr} / ${totalStr} tokens`;
-}
-
-/**
- * Determine the context level based on percentage.
- * @param percent - The percentage value (0-100)
- * @returns The context level: 'normal', 'elevated', or 'high'
- */
-export function getContextLevel(percent: number): ContextLevel {
-  if (percent >= CONTEXT_THRESHOLDS.DANGER) {
-    return 'high';
-  }
-  if (percent >= CONTEXT_THRESHOLDS.WARNING) {
-    return 'elevated';
-  }
-  return 'normal';
-}
-
-/**
- * Get the CSS class name for a context level.
- * @param level - The context level
- * @returns CSS class name like "level-normal"
- */
-export function getLevelClassName(level: ContextLevel): string {
-  return `level-${level}`;
-}
-
-/**
- * Determine if warning should be shown.
- * @param percent - The percentage value
- * @returns True if at or above danger threshold
- */
-export function shouldShowWarning(percent: number): boolean {
-  return percent >= CONTEXT_THRESHOLDS.DANGER;
-}
-
-/**
- * Get ARIA attributes for the progress bar.
- * @param valuenow - Current value
- * @param valuemax - Maximum value
- * @returns Object with aria attributes
- */
-export function getAriaAttributes(
-  valuenow: number,
-  valuemax: number
-): {
-  'aria-valuenow': number;
-  'aria-valuemin': number;
-  'aria-valuemax': number;
-  'aria-label': string;
-} {
-  return {
-    'aria-valuenow': valuenow,
-    'aria-valuemin': 0,
-    'aria-valuemax': valuemax,
-    'aria-label': `Context usage: ${valuenow}%`,
-  };
-}
-
-// ============================================================================
-// Progress bar color mapping
-// ============================================================================
-
-/** Tailwind indicator color classes keyed by context level */
-const LEVEL_INDICATOR_COLORS: Record<ContextLevel, string> = {
-  normal: 'bg-green-500',
-  elevated: 'bg-amber-500',
-  high: 'bg-red-500',
-};
-
-// ============================================================================
-// Hook
-// ============================================================================
-
-/**
- * React hook for fetching and subscribing to context data.
- * Uses WebSocket /ws/context for real-time updates.
- */
-export function useContextIndicator(): UseContextIndicatorResult {
-  const [context, setContext] = useState<ContextData | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    // Connect to context WebSocket
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const ws = new WebSocket(`${protocol}//${window.location.host}/ws/context`);
-
-    ws.onopen = () => {
-      console.log('[ContextIndicator] WebSocket connected');
-    };
-
-    ws.onmessage = (event) => {
-      try {
-        const data = JSON.parse(event.data);
-        if (data.type === 'init' || data.type === 'update') {
-          setContext(data.context as ContextData | null);
-          setIsLoading(false);
-        }
-      } catch (err) {
-        console.error('[ContextIndicator] Failed to parse message:', err);
-        setError(err instanceof Error ? err : new Error('Failed to parse context'));
-      }
-    };
-
-    ws.onerror = () => {
-      setError(new Error('WebSocket connection failed'));
-      setIsLoading(false);
-    };
-
-    ws.onclose = () => {
-      console.log('[ContextIndicator] WebSocket disconnected');
-    };
-
-    return () => ws.close();
-  }, []);
-
-  return { context, isLoading, error };
-}
-
-// Re-export as useContext for test compatibility
-export const useContext = useContextIndicator;
-
-// ============================================================================
-// Component
-// ============================================================================
-
-/**
- * ContextIndicator Component
- *
- * Displays context window usage as a visual progress bar using shadcn
- * Progress and Tooltip primitives.
- */
-export default function ContextIndicator({
-  percent: propPercent,
-  used: propUsed,
-  total: propTotal,
-  compact = false,
-  className = '',
-}: ContextIndicatorProps): React.ReactElement {
-  const { context } = useContextIndicator();
-
-  // Use props if provided, otherwise use hook data
-  const percent = propPercent ?? context?.percent ?? 0;
-  const used = propUsed ?? context?.used;
-  const total = propTotal ?? context?.total;
-
-  const clampedPercent = Math.min(100, Math.max(0, Math.round(percent)));
-  const level = getContextLevel(percent);
-  const levelClass = getLevelClassName(level);
-  const showWarning = shouldShowWarning(percent);
-  const tooltip = formatTooltip(used, total);
-  const ariaAttrs = getAriaAttributes(percent, 100);
-
-  const rootClassNames = cn(
-    COMPONENT_CLASSNAME,
-    levelClass,
-    compact && COMPACT_MODE_CLASSNAME,
-    className,
-  );
-
-  return (
-    <TooltipProvider delayDuration={300}>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <div
-            className={rootClassNames}
-            data-testid={CONTEXT_INDICATOR_TESTID}
-            data-warning={showWarning || undefined}
-            aria-live={CONTEXT_INDICATOR_ARIA_LIVE}
-          >
-            <Progress
-              value={clampedPercent}
-              className={cn(
-                'context-bar',
-                compact ? 'h-1 min-w-[40px] max-w-[60px]' : 'h-1.5 min-w-[60px] max-w-[100px]',
-              )}
-              data-testid={CONTEXT_BAR_TESTID}
-              {...ariaAttrs}
-              indicatorClassName={cn(
-                'transition-all duration-300 ease-out',
-                LEVEL_INDICATOR_COLORS[level],
-              )}
-            />
-            <span
-              className={cn('context-percent', `text-${level}`)}
-              data-testid={CONTEXT_PERCENT_TESTID}
-            >
-              {formatPercentage(percent)}
-            </span>
-            {showWarning && (
-              <span className="context-warning visually-hidden">
-                {CONTEXT_WARNING_MESSAGE}
-              </span>
-            )}
-          </div>
-        </TooltipTrigger>
-        <TooltipContent side="bottom">
-          <p>{tooltip}</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-}

package/src/public/components/ContextSparkline.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-
-export interface SparklinePoint {
-  percent: number;
-  tokens: number;
-  timestamp: number;
-}
-
-export interface ContextSparklineProps {
-  history: SparklinePoint[];
-}
-
-function getBarColor(tokens: number): string {
-  if (tokens >= 50000) return 'var(--color-danger, #ef4444)';
-  if (tokens >= 5000) return 'var(--color-warning, #f59e0b)';
-  return 'var(--color-success, #22c55e)';
-}
-
-export function ContextSparkline({ history }: ContextSparklineProps): React.ReactElement | null {
-  if (history.length < 2) return null;
-
-  const W = 200;
-  const H = 32;
-  const PAD = 2;
-  const usable = H - PAD * 2;
-  const latest = history[history.length - 1];
-  const barWidth = W / history.length;
-
-  return (
-    <div className="context-sparkline" data-testid="context-sparkline">
-      <svg
-        viewBox={`0 0 ${W} ${H}`}
-        role="img"
-        aria-label={`Context usage trend: currently ${latest.percent}%`}
-      >
-        {history.map((p, i) => {
-          const barHeight = Math.max(1, (p.percent / 100) * usable);
-          const x = i * barWidth;
-          const y = PAD + usable - barHeight;
-          return (
-            <rect
-              key={i}
-              x={x}
-              y={y}
-              width={barWidth}
-              height={barHeight}
-              fill={getBarColor(p.tokens)}
-              opacity={0.8}
-              rx={0.5}
-            />
-          );
-        })}
-      </svg>
-    </div>
-  );
-}