@pennyfarthing/core 11.3.8 → 11.5.0-alpha.0

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

@@ -0,0 +1,168 @@
+/**
+ * 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/packages/core/src/public/components/ContextIndicator/ContextIndicator.css

@@ -0,0 +1,85 @@
+/**
+ * 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/packages/core/src/public/components/ContextIndicator/index.tsx

@@ -0,0 +1,330 @@
+/**
+ * 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/packages/core/src/public/components/ContextSparkline.tsx

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