documentation-hub 5.7.2

package/src/components/common/ConfirmDialog.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { Button } from './Button';
+import { X } from 'lucide-react';
+import { cn } from '@/utils/cn';
+import logger from '@/utils/logger';
+
+export interface ConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: 'default' | 'destructive';
+  onConfirm: () => void | Promise<void>;
+  loading?: boolean;
+}
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  message,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  variant = 'default',
+  onConfirm,
+  loading = false,
+}: ConfirmDialogProps) {
+  const [isProcessing, setIsProcessing] = React.useState(false);
+
+  const handleConfirm = async () => {
+    setIsProcessing(true);
+    try {
+      await onConfirm();
+      onOpenChange(false);
+    } catch (error) {
+      logger.error('Confirmation action failed:', error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-xs data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 z-50" />
+        <Dialog.Content
+          className={cn(
+            'fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',
+            'w-full max-w-lg rounded-lg border border-border bg-card p-6 shadow-lg',
+            'data-[state=open]:animate-in data-[state=closed]:animate-out',
+            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
+            'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]'
+          )}
+        >
+          {/* Header */}
+          <div className="flex items-start justify-between mb-4">
+            <Dialog.Title className="text-lg font-semibold text-foreground">{title}</Dialog.Title>
+            <Dialog.Close className="rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+              <X className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </Dialog.Close>
+          </div>
+
+          {/* Message */}
+          <Dialog.Description className="text-sm text-muted-foreground mb-6">
+            {message}
+          </Dialog.Description>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-3">
+            <Button
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={isProcessing || loading}
+            >
+              {cancelText}
+            </Button>
+            <Button
+              variant={variant === 'destructive' ? 'destructive' : 'default'}
+              onClick={handleConfirm}
+              loading={isProcessing || loading}
+              disabled={isProcessing || loading}
+            >
+              {confirmText}
+            </Button>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

package/src/components/common/DebugConsole.tsx

@@ -0,0 +1,275 @@
+import { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, Terminal, AlertTriangle, Network, Shield, Download, Trash2, Copy } from 'lucide-react';
+import { cn } from '@/utils/cn';
+
+interface LogEntry {
+  id: string;
+  timestamp: string;
+  type: 'network' | 'cert-error' | 'network-error' | 'tls-error' | 'info' | 'warning';
+  message: string;
+  details?: any;
+}
+
+export function DebugConsole() {
+  const [isVisible, setIsVisible] = useState(false);
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [filter, setFilter] = useState<'all' | 'network' | 'errors'>('all');
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+
+  useEffect(() => {
+    // Listen for debug mode activation (triggered by 5 clicks on logo)
+    const handleKeyPress = (e: KeyboardEvent) => {
+      // Ctrl+Shift+D to toggle debug console
+      if (e.ctrlKey && e.shiftKey && e.key === 'D') {
+        setIsVisible(!isVisible);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyPress);
+
+    // Listen for network requests
+    const unsubNetworkRequest = window.electronAPI?.onDebugNetworkRequest?.((data: any) => {
+      addLog('network', `${data.method} ${data.url}`, data);
+    });
+
+    // Listen for certificate errors
+    const unsubCertError = window.electronAPI?.onDebugCertError?.((data: any) => {
+      addLog('cert-error', `Certificate Error: ${data.url}`, data);
+    });
+
+    // Listen for network errors
+    const unsubNetworkError = window.electronAPI?.onDebugNetworkError?.((data: any) => {
+      addLog('network-error', `Network Error: ${data.error}`, data);
+    });
+
+    // Listen for TLS errors
+    const unsubTLSError = window.electronAPI?.onDebugTLSError?.((data: any) => {
+      addLog('tls-error', `TLS Error: ${data.message}`, data);
+    });
+
+    // Listen for update status
+    const unsubUpdateStatus = window.electronAPI?.onUpdateStatus?.((data: any) => {
+      if (data.message?.includes('PowerShell') || data.message?.includes('Mutual TLS')) {
+        addLog('info', `Update: ${data.message}`, data);
+      }
+    });
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyPress);
+      unsubNetworkRequest?.();
+      unsubCertError?.();
+      unsubNetworkError?.();
+      unsubTLSError?.();
+      unsubUpdateStatus?.();
+    };
+  }, [isVisible]);
+
+  useEffect(() => {
+    // Auto-scroll to bottom when new logs are added
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [logs, autoScroll]);
+
+  const addLog = (type: LogEntry['type'], message: string, details?: any) => {
+    const newLog: LogEntry = {
+      id: `${Date.now()}-${Math.random()}`,
+      timestamp: new Date().toISOString(),
+      type,
+      message,
+      details,
+    };
+    setLogs((prev) => [...prev.slice(-200), newLog]); // Keep last 200 logs
+  };
+
+  const clearLogs = () => {
+    setLogs([]);
+  };
+
+  const exportLogs = () => {
+    const logsJson = JSON.stringify(logs, null, 2);
+    const blob = new Blob([logsJson], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `debug-logs-${Date.now()}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const copyLogs = () => {
+    const logsText = logs
+      .map((log) => `[${log.timestamp}] [${log.type.toUpperCase()}] ${log.message}`)
+      .join('\n');
+    navigator.clipboard.writeText(logsText);
+  };
+
+  const filteredLogs = logs.filter((log) => {
+    if (filter === 'all') return true;
+    if (filter === 'network') return log.type === 'network';
+    if (filter === 'errors') return log.type.includes('error');
+    return true;
+  });
+
+  const getLogIcon = (type: LogEntry['type']) => {
+    switch (type) {
+      case 'network':
+        return <Network className="w-3 h-3" />;
+      case 'cert-error':
+        return <Shield className="w-3 h-3 text-red-500" />;
+      case 'network-error':
+      case 'tls-error':
+        return <AlertTriangle className="w-3 h-3 text-yellow-500" />;
+      default:
+        return <Terminal className="w-3 h-3" />;
+    }
+  };
+
+  const getLogColor = (type: LogEntry['type']) => {
+    switch (type) {
+      case 'cert-error':
+      case 'tls-error':
+        return 'text-red-400';
+      case 'network-error':
+        return 'text-yellow-400';
+      case 'network':
+        return 'text-blue-400';
+      default:
+        return 'text-muted-foreground';
+    }
+  };
+
+  return (
+    <AnimatePresence>
+      {isVisible && (
+        <motion.div
+          initial={{ opacity: 0, y: 100 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 100 }}
+          className="fixed bottom-4 right-4 z-[999] w-[600px] h-[400px] bg-background/95 backdrop-blur-xl border border-border rounded-lg shadow-2xl flex flex-col"
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between px-4 py-2 border-b border-border">
+            <div className="flex items-center gap-2">
+              <Terminal className="w-4 h-4 text-primary" />
+              <span className="text-sm font-semibold">Debug Console</span>
+              <span className="text-xs text-muted-foreground">({filteredLogs.length} logs)</span>
+            </div>
+            <div className="flex items-center gap-1">
+              {/* Filter buttons */}
+              <button
+                onClick={() => setFilter('all')}
+                className={cn(
+                  'px-2 py-1 text-xs rounded transition-colors',
+                  filter === 'all' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'
+                )}
+              >
+                All
+              </button>
+              <button
+                onClick={() => setFilter('network')}
+                className={cn(
+                  'px-2 py-1 text-xs rounded transition-colors',
+                  filter === 'network' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'
+                )}
+              >
+                Network
+              </button>
+              <button
+                onClick={() => setFilter('errors')}
+                className={cn(
+                  'px-2 py-1 text-xs rounded transition-colors',
+                  filter === 'errors' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'
+                )}
+              >
+                Errors
+              </button>
+              <div className="w-px h-4 bg-border mx-1" />
+              <button
+                onClick={copyLogs}
+                className="p-1 hover:bg-muted rounded transition-colors"
+                title="Copy logs"
+              >
+                <Copy className="w-3.5 h-3.5" />
+              </button>
+              <button
+                onClick={exportLogs}
+                className="p-1 hover:bg-muted rounded transition-colors"
+                title="Export logs"
+              >
+                <Download className="w-3.5 h-3.5" />
+              </button>
+              <button
+                onClick={clearLogs}
+                className="p-1 hover:bg-muted rounded transition-colors"
+                title="Clear logs"
+              >
+                <Trash2 className="w-3.5 h-3.5" />
+              </button>
+              <button
+                onClick={() => setIsVisible(false)}
+                className="p-1 hover:bg-muted rounded transition-colors ml-2"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+
+          {/* Log content */}
+          <div
+            ref={scrollRef}
+            className="flex-1 overflow-y-auto p-2 font-mono text-[11px] space-y-0.5"
+            onScroll={(e) => {
+              const target = e.target as HTMLDivElement;
+              const isAtBottom = target.scrollHeight - target.scrollTop === target.clientHeight;
+              setAutoScroll(isAtBottom);
+            }}
+          >
+            {filteredLogs.length === 0 ? (
+              <div className="text-center text-muted-foreground py-8">
+                No logs to display. Press Ctrl+Shift+D to toggle this console.
+              </div>
+            ) : (
+              filteredLogs.map((log) => (
+                <div
+                  key={log.id}
+                  className="flex items-start gap-2 hover:bg-muted/30 px-2 py-0.5 rounded"
+                >
+                  <span className="flex-shrink-0 mt-0.5">{getLogIcon(log.type)}</span>
+                  <span className="text-muted-foreground flex-shrink-0">
+                    {log.timestamp.split('T')[1].split('.')[0]}
+                  </span>
+                  <span className={cn('flex-1 break-all', getLogColor(log.type))}>
+                    {log.message}
+                  </span>
+                </div>
+              ))
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="px-4 py-2 border-t border-border flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <label className="flex items-center gap-1 text-xs">
+                <input
+                  type="checkbox"
+                  checked={autoScroll}
+                  onChange={(e) => setAutoScroll(e.target.checked)}
+                  className="w-3 h-3"
+                />
+                Auto-scroll
+              </label>
+            </div>
+            <div className="text-xs text-muted-foreground">
+              Press <kbd className="px-1 py-0.5 bg-muted rounded text-[10px]">Ctrl</kbd>+
+              <kbd className="px-1 py-0.5 bg-muted rounded text-[10px]">Shift</kbd>+
+              <kbd className="px-1 py-0.5 bg-muted rounded text-[10px]">D</kbd> to toggle
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

package/src/components/common/EmptyState.tsx

@@ -0,0 +1,183 @@
+import { cn } from '@/utils/cn';
+import { motion } from 'framer-motion';
+import type { LucideIcon } from 'lucide-react';
+import { Button } from './Button';
+
+interface EmptyStateAction {
+  label: string;
+  onClick: () => void;
+  variant?: 'default' | 'outline' | 'ghost';
+  icon?: LucideIcon;
+}
+
+interface EmptyStateProps {
+  icon?: LucideIcon;
+  title: string;
+  description?: string;
+  primaryAction?: EmptyStateAction;
+  secondaryAction?: EmptyStateAction;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  primaryAction,
+  secondaryAction,
+  className,
+  size = 'md',
+}: EmptyStateProps) {
+  const sizeStyles = {
+    sm: {
+      container: 'py-8 px-4',
+      icon: 'w-10 h-10',
+      iconWrapper: 'w-16 h-16',
+      title: 'text-base',
+      description: 'text-sm',
+    },
+    md: {
+      container: 'py-12 px-6',
+      icon: 'w-12 h-12',
+      iconWrapper: 'w-20 h-20',
+      title: 'text-lg',
+      description: 'text-sm',
+    },
+    lg: {
+      container: 'py-16 px-8',
+      icon: 'w-14 h-14',
+      iconWrapper: 'w-24 h-24',
+      title: 'text-xl',
+      description: 'text-base',
+    },
+  };
+
+  const styles = sizeStyles[size];
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+      className={cn(
+        'flex flex-col items-center justify-center text-center',
+        styles.container,
+        className
+      )}
+    >
+      {Icon && (
+        <motion.div
+          initial={{ scale: 0.8 }}
+          animate={{ scale: 1 }}
+          transition={{ delay: 0.1, type: 'spring', stiffness: 200 }}
+          className={cn(
+            'rounded-full bg-muted/50 flex items-center justify-center mb-4',
+            styles.iconWrapper
+          )}
+        >
+          <Icon className={cn('text-muted-foreground', styles.icon)} />
+        </motion.div>
+      )}
+
+      <motion.h3
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.15 }}
+        className={cn('font-semibold text-foreground mb-1', styles.title)}
+      >
+        {title}
+      </motion.h3>
+
+      {description && (
+        <motion.p
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.2 }}
+          className={cn(
+            'text-muted-foreground max-w-sm mb-6',
+            styles.description
+          )}
+        >
+          {description}
+        </motion.p>
+      )}
+
+      {(primaryAction || secondaryAction) && (
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.25 }}
+          className="flex items-center gap-3"
+        >
+          {primaryAction && (
+            <Button
+              onClick={primaryAction.onClick}
+              variant={primaryAction.variant || 'default'}
+              icon={primaryAction.icon && <primaryAction.icon className="w-4 h-4" />}
+            >
+              {primaryAction.label}
+            </Button>
+          )}
+          {secondaryAction && (
+            <Button
+              onClick={secondaryAction.onClick}
+              variant={secondaryAction.variant || 'ghost'}
+              icon={secondaryAction.icon && <secondaryAction.icon className="w-4 h-4" />}
+            >
+              {secondaryAction.label}
+            </Button>
+          )}
+        </motion.div>
+      )}
+    </motion.div>
+  );
+}
+
+// Preset empty states for common use cases
+export function NoSessionsEmptyState({ onCreateSession }: { onCreateSession: () => void }) {
+  return (
+    <EmptyState
+      title="No sessions yet"
+      description="Create your first session to start processing documents"
+      primaryAction={{
+        label: 'Create Session',
+        onClick: onCreateSession,
+      }}
+      size="lg"
+    />
+  );
+}
+
+export function NoDocumentsEmptyState({ onAddDocuments }: { onAddDocuments: () => void }) {
+  return (
+    <EmptyState
+      title="No documents"
+      description="Drop files here or click to add documents to this session"
+      primaryAction={{
+        label: 'Add Documents',
+        onClick: onAddDocuments,
+      }}
+    />
+  );
+}
+
+export function NoSearchResultsEmptyState({ query }: { query: string }) {
+  return (
+    <EmptyState
+      title="No results found"
+      description={`No documents or sessions match "${query}". Try a different search term.`}
+      size="sm"
+    />
+  );
+}
+
+export function NoChangesEmptyState() {
+  return (
+    <EmptyState
+      title="No changes detected"
+      description="Process a document to see tracked changes here"
+      size="sm"
+    />
+  );
+}

package/src/components/common/ErrorBoundary.tsx

@@ -0,0 +1,98 @@
+/**
+ * React Error Boundary Component
+ *
+ * Catches JavaScript errors anywhere in the component tree,
+ * logs error information, and displays a fallback UI instead
+ * of crashing the entire application.
+ *
+ * Usage:
+ * ```tsx
+ * <ErrorBoundary>
+ *   <YourComponent />
+ * </ErrorBoundary>
+ * ```
+ */
+
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { logger } from '@/utils/logger';
+import { ErrorFallback } from './ErrorFallback';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    // Update state so the next render shows the fallback UI
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    // Log error to console and any error reporting service
+    logger.error('React Error Boundary caught an error:', {
+      error: error.toString(),
+      componentStack: errorInfo.componentStack,
+      errorInfo,
+    });
+
+    // Update state with error info for display
+    this.setState({
+      errorInfo,
+    });
+
+    // Call custom error handler if provided
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+  }
+
+  handleReset = (): void => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    });
+  };
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      // Custom fallback UI if provided
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      // Default fallback UI
+      return (
+        <ErrorFallback
+          error={this.state.error}
+          errorInfo={this.state.errorInfo}
+          onReset={this.handleReset}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;