documentation-hub 5.7.2

package/src/pages/CurrentSession.tsx

@@ -0,0 +1,1174 @@
+import { Button } from "@/components/common/Button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/common/Card";
+import { Toaster } from "@/components/common/Toast";
+import { ErrorDetailsDialog } from "@/components/common/ErrorDetailsDialog";
+import { SimpleTooltip } from "@/components/common/Tooltip";
+import { ChangeViewer } from "@/components/sessions/ChangeViewer";
+import {
+  ProcessingOptions,
+  defaultOptions,
+  type ProcessingOption,
+} from "@/components/sessions/ProcessingOptions";
+import { ReplacementsTab } from "@/components/sessions/ReplacementsTab";
+import { StylesEditor } from "@/components/sessions/StylesEditor";
+import { TabContainer } from "@/components/sessions/TabContainer";
+import { useSession } from "@/contexts/SessionContext";
+import { useUserSettings } from "@/contexts/UserSettingsContext";
+import { useDocumentQueue } from "@/hooks/useDocumentQueue";
+import { useToast } from "@/hooks/useToast";
+import type { Document } from "@/types/session";
+import { cn } from "@/utils/cn";
+import logger from "@/utils/logger";
+import { AnimatePresence, motion } from "framer-motion";
+import {
+  AlertCircle,
+  Archive,
+  Check,
+  CheckCircle,
+  Clock,
+  Download,
+  Edit2,
+  FileCheck,
+  FileText,
+  FolderOpen,
+  GitCompare,
+  Link,
+  Loader2,
+  MessageSquare,
+  Play,
+  RotateCcw,
+  Save,
+  Timer,
+  Upload,
+  X,
+} from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+export function CurrentSession() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { toasts, toast, dismiss } = useToast();
+  const {
+    sessions,
+    currentSession,
+    loadSession,
+    closeSession,
+    reopenSession,
+    addDocuments,
+    removeDocument,
+    processDocument,
+    updateSessionName,
+    updateSessionOptions,
+    updateSessionStyles,
+    updateSessionListBulletSettings,
+    updateSessionTableShadingSettings,
+    resetSessionToDefaults,
+    saveAsCustomDefaults,
+  } = useSession();
+  const { settings } = useUserSettings();
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const [editedTitle, setEditedTitle] = useState("");
+  const [errorDialogDoc, setErrorDialogDoc] = useState<Document | null>(null);
+  const [expandedChangeDocId, setExpandedChangeDocId] = useState<string | null>(null);
+  const [activeTabId, setActiveTabId] = useState<string | undefined>(undefined);
+
+  // Refs for preventing race conditions
+  const isSelectingFiles = useRef(false);
+  const isMountedRef = useRef(true);
+
+  // STALE CLOSURE FIX: Track latest sessions for async operations
+  // This ref always holds the current sessions value, even inside async callbacks
+  const sessionsRef = useRef(sessions);
+  sessionsRef.current = sessions; // Update on every render
+
+  // Track component mount status for safe async operations
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (id && !currentSession) {
+      loadSession(id);
+    }
+  }, [id, currentSession, loadSession]);
+
+  const session = sessions.find((s) => s.id === id);
+
+  // REFACTORED: Convert session processing options to ProcessingOption[] format
+  // Using useMemo to ensure we always have latest session data
+  // This prevents stale closure issues that caused toggle auto-revert bug
+  // IMPORTANT: Must be called before any conditional returns (Rules of Hooks)
+  const processingOptions = useMemo((): ProcessingOption[] => {
+    const enabledOps = session?.processingOptions?.enabledOperations || [];
+    return defaultOptions.map((opt) => ({
+      ...opt,
+      enabled: enabledOps.includes(opt.id),
+    }));
+  }, [session?.processingOptions]);
+
+  // Document processing queue - ensures documents process one at a time
+  // to avoid API throttling errors from simultaneous requests
+  const {
+    queue: documentQueue,
+    currentDocumentId,
+    addToQueue,
+    addManyToQueue,
+    clearQueue,
+    getQueuePosition,
+    isInQueue,
+    estimatedTimeRemainingFormatted,
+    isProcessing: isQueueProcessing,
+  } = useDocumentQueue({
+    onDocumentComplete: (docId, success) => {
+      // Get fresh session data after async operation
+      const freshSession = sessionsRef.current.find((s) => s.id === session?.id);
+      const processedDoc = freshSession?.documents.find((d) => d.id === docId);
+
+      if (success && processedDoc?.status === 'completed') {
+        toast({
+          title: 'Done',
+          description: processedDoc.name,
+          variant: 'success',
+        });
+      } else if (processedDoc?.status === 'error') {
+        toast({
+          title: 'Processing failed',
+          description: processedDoc.errors?.[0] || 'Document error',
+          variant: 'destructive',
+        });
+      }
+    },
+    onQueueComplete: () => {
+      if (documentQueue.length > 1) {
+        toast({
+          title: 'All documents processed',
+          variant: 'success',
+          duration: 5000,
+        });
+      }
+    },
+  });
+
+  const handleFileSelect = useCallback(async () => {
+    // Prevent concurrent file selections
+    if (isSelectingFiles.current) {
+      logger.debug("[File Select] Already selecting files, ignoring request");
+      return;
+    }
+
+    // Store current session ID for stale reference check
+    const currentSessionId = session?.id;
+    if (!currentSessionId) {
+      toast({
+        title: "No active session",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    // Safely check if electronAPI is available
+    const api = window.electronAPI;
+    if (!api?.selectDocuments || !api?.getFileStats) {
+      console.warn("CurrentSession: electronAPI methods not available");
+      toast({
+        title: "File selection unavailable",
+        description: "Please restart app",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    isSelectingFiles.current = true;
+
+    try {
+      // Use Electron's native file dialog
+      const filePaths = await api.selectDocuments();
+
+      // Check if component is still mounted and session hasn't changed
+      if (!isMountedRef.current) {
+        logger.debug("[File Select] Component unmounted during file selection");
+        return;
+      }
+
+      if (!filePaths || filePaths.length === 0) {
+        return; // User cancelled
+      }
+
+      // Verify session is still valid
+      if (session?.id !== currentSessionId) {
+        logger.warn("[File Select] Session changed during file selection");
+        toast({
+          title: "Session changed",
+          description: "Please try again",
+          variant: "destructive",
+        });
+        return;
+      }
+
+      // Convert file paths to File-like objects with path property and actual size
+      const validFiles: (File & { path: string })[] = [];
+      const invalidFiles: string[] = [];
+
+      for (const filePath of filePaths) {
+        // Early exit if component unmounted
+        if (!isMountedRef.current) {
+          logger.debug("[File Select] Component unmounted during file processing");
+          return;
+        }
+
+        const name = filePath.split(/[\\/]/).pop() || "document.docx";
+
+        try {
+          // Get actual file size from filesystem
+          const stats = await api.getFileStats(filePath);
+
+          // Create a File-like object with the required properties
+          // Note: File methods are stubs since we use the path for actual file operations
+          const fileWithPath = {
+            path: filePath,
+            name: name,
+            size: stats.size,
+            type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+            lastModified: stats.mtimeMs || Date.now(),
+            webkitRelativePath: "",
+            // Stub methods - these are not used since we process via Electron IPC with file paths
+            arrayBuffer: async () => {
+              throw new Error("Use Electron IPC for file operations");
+            },
+            slice: () => new Blob(),
+            stream: () => {
+              throw new Error("Use Electron IPC for file operations");
+            },
+            text: async () => {
+              throw new Error("Use Electron IPC for file operations");
+            },
+            bytes: async () => {
+              throw new Error("Use Electron IPC for file operations");
+            },
+          } as unknown as File & { path: string };
+
+          validFiles.push(fileWithPath);
+          logger.debug(`[File Select] Valid file: ${name} (${stats.size} bytes) at ${filePath}`);
+        } catch (error) {
+          logger.error(`[File Select] Failed to access file at "${filePath}":`, error);
+          invalidFiles.push(name);
+        }
+      }
+
+      // Final mount check before updating state
+      if (!isMountedRef.current) {
+        return;
+      }
+
+      // Add valid files to the session
+      if (validFiles.length > 0) {
+        await addDocuments(currentSessionId, validFiles);
+
+        if (isMountedRef.current) {
+          toast({
+            title: `${validFiles.length} file${validFiles.length > 1 ? "s" : ""} added`,
+            variant: "success",
+          });
+        }
+      }
+
+      // Show error toast if any files were invalid
+      if (invalidFiles.length > 0 && isMountedRef.current) {
+        logger.warn(`[File Select] Rejected ${invalidFiles.length} file(s):`, invalidFiles);
+        toast({
+          title: "Access denied",
+          description: `${invalidFiles.length} file${invalidFiles.length > 1 ? "s" : ""} skipped`,
+          variant: "destructive",
+        });
+      }
+
+      // If no files were valid at all
+      if (validFiles.length === 0 && filePaths.length > 0 && isMountedRef.current) {
+        toast({
+          title: "Cannot access files",
+          description: "Check file permissions",
+          variant: "destructive",
+        });
+      }
+    } catch (error) {
+      if (isMountedRef.current) {
+        logger.error("[File Select] Unexpected error:", error);
+        toast({
+          title: "Selection failed",
+          description: error instanceof Error ? error.message : "Unexpected error",
+          variant: "destructive",
+        });
+      }
+    } finally {
+      isSelectingFiles.current = false;
+    }
+  }, [session?.id, addDocuments, toast]);
+
+  if (!session) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Card className="max-w-md">
+          <CardContent className="p-8 text-center">
+            <AlertCircle className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
+            <h2 className="text-xl font-semibold mb-2">Session Not Found</h2>
+            <p className="text-muted-foreground mb-4">
+              The session you are looking for does not exist or has been deleted.
+            </p>
+            <Button onClick={() => navigate("/")}>Return to Dashboard</Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragging(false);
+  };
+
+  // Handle drag-drop files using getPathsForFiles API
+  const handleDrop = async (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+
+    if (!session || !e.dataTransfer?.files?.length) return;
+
+    const files = Array.from(e.dataTransfer.files);
+
+    // Get file paths using the preload API
+    const paths = window.electronAPI?.getPathsForFiles?.(files) || [];
+
+    // Filter for .docx files with valid paths
+    const validFiles = files
+      .map((file, i) => ({
+        file,
+        path: paths[i] || "",
+      }))
+      .filter(({ file, path }) => file.name.endsWith(".docx") && path)
+      .map(
+        ({ file, path }) =>
+          ({
+            name: file.name,
+            path: path,
+            size: file.size,
+            type:
+              file.type ||
+              "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+            lastModified: file.lastModified,
+            arrayBuffer: async () => new ArrayBuffer(0),
+            slice: () => new Blob(),
+            stream: () => new ReadableStream(),
+            text: async () => "",
+            webkitRelativePath: "",
+          }) as File & { path: string }
+      );
+
+    if (validFiles.length === 0) {
+      logger.warn("[Drag-Drop] No valid .docx files dropped");
+      return;
+    }
+
+    addDocuments(session.id, validFiles);
+
+    toast({
+      title: `${validFiles.length} file${validFiles.length > 1 ? "s" : ""} added`,
+      variant: "success",
+    });
+  };
+
+  const handleProcessDocument = (documentId: string) => {
+    if (!session || isInQueue(documentId)) return;
+
+    // Add to queue - the queue hook handles sequential processing
+    // and toast notifications via onDocumentComplete callback
+    addToQueue(session.id, documentId);
+  };
+
+  const handleSaveAndClose = () => {
+    closeSession(session.id);
+    navigate("/");
+  };
+
+  const handleExportProcessedFiles = async () => {
+    const completedDocs = session.documents.filter(
+      (d) => d.status === "completed" && d.path
+    );
+    if (completedDocs.length === 0) {
+      toast({
+        title: "No completed files to export",
+        description: "Process some documents first",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      const folderPath = await window.electronAPI.selectFolder();
+      if (!folderPath) return;
+
+      const result = await window.electronAPI.copyFilesToFolder(
+        completedDocs.map((d) => d.path!),
+        folderPath
+      );
+
+      toast({
+        title: `Exported ${result.copied} file${result.copied !== 1 ? "s" : ""}`,
+        description: result.skipped > 0 ? `${result.skipped} file(s) skipped` : undefined,
+        variant: "success",
+      });
+    } catch (error) {
+      toast({
+        title: "Export failed",
+        description: error instanceof Error ? error.message : "Unknown error",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleEditTitle = () => {
+    setEditedTitle(session.name);
+    setIsEditingTitle(true);
+  };
+
+  const handleSaveTitle = () => {
+    if (editedTitle.trim() && editedTitle !== session.name) {
+      updateSessionName(session.id, editedTitle.trim());
+    }
+    setIsEditingTitle(false);
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditingTitle(false);
+    setEditedTitle("");
+  };
+
+  const handleProcessingOptionsChange = (options: Array<{ id: string; enabled: boolean }>) => {
+    // Update session with selected processing options
+    const enabledOperations = options.filter((opt) => opt.enabled).map((opt) => opt.id);
+
+    // DEBUG: Log processing options changes
+    console.log("[CurrentSession] Processing options changed:");
+    console.log("  - Enabled operations:", enabledOperations);
+    console.log("  - TOC enabled:", enabledOperations.includes("update-toc-hyperlinks"));
+    console.log(
+      "  - Validate styles enabled:",
+      enabledOperations.includes("validate-document-styles")
+    );
+    console.log(
+      "  - Validate Header2 tables enabled:",
+      enabledOperations.includes("validate-header2-tables")
+    );
+
+    // Update session processing options using the context method
+    updateSessionOptions(session.id, {
+      validateUrls: true,
+      createBackup: true,
+      processInternalLinks: enabledOperations.includes("fix-internal-hyperlinks"),
+      processExternalLinks: true,
+      enabledOperations: enabledOperations,
+    });
+  };
+
+  const handleTableShadingChange = (
+    header2: string,
+    other: string,
+    imageBorderWidth?: number,
+    paddingSettings?: {
+      padding1x1Top: number;
+      padding1x1Bottom: number;
+      padding1x1Left: number;
+      padding1x1Right: number;
+      paddingOtherTop: number;
+      paddingOtherBottom: number;
+      paddingOtherLeft: number;
+      paddingOtherRight: number;
+      cellBorderThickness?: number;
+    }
+  ) => {
+    // Update session table shading settings including padding and border thickness
+    updateSessionTableShadingSettings(session.id, {
+      header2Shading: header2,
+      otherShading: other,
+      imageBorderWidth: imageBorderWidth,
+      // Include padding settings if provided
+      ...(paddingSettings && {
+        padding1x1Top: paddingSettings.padding1x1Top,
+        padding1x1Bottom: paddingSettings.padding1x1Bottom,
+        padding1x1Left: paddingSettings.padding1x1Left,
+        padding1x1Right: paddingSettings.padding1x1Right,
+        paddingOtherTop: paddingSettings.paddingOtherTop,
+        paddingOtherBottom: paddingSettings.paddingOtherBottom,
+        paddingOtherLeft: paddingSettings.paddingOtherLeft,
+        paddingOtherRight: paddingSettings.paddingOtherRight,
+        cellBorderThickness: paddingSettings.cellBorderThickness,
+      }),
+    });
+  };
+
+  const handleAutoAcceptRevisionsChange = (autoAccept: boolean) => {
+    // Update session auto-accept revisions setting
+    // Note: We need to provide all required fields since TypeScript expects them
+    updateSessionOptions(session.id, {
+      validateUrls: session.processingOptions?.validateUrls ?? true,
+      createBackup: session.processingOptions?.createBackup ?? true,
+      processInternalLinks: session.processingOptions?.processInternalLinks ?? true,
+      processExternalLinks: session.processingOptions?.processExternalLinks ?? true,
+      enabledOperations: session.processingOptions?.enabledOperations ?? [],
+      autoAcceptRevisions: autoAccept,
+    });
+  };
+
+  const getStatusIcon = (status: Document["status"]) => {
+    switch (status) {
+      case "pending":
+        return <Clock className="w-4 h-4 text-muted-foreground" />;
+      case "processing":
+        return <Loader2 className="w-4 h-4 text-blue-500 animate-spin" />;
+      case "completed":
+        return <CheckCircle className="w-4 h-4 text-green-500" />;
+      case "error":
+        return <AlertCircle className="w-4 h-4 text-red-500" />;
+    }
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes < 1024) return bytes + " B";
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+    return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+  };
+
+  // Get count of completed documents for export button
+  const completedDocsCount = session.documents.filter(
+    (d) => d.status === "completed" && d.path
+  ).length;
+
+  // Create session content for the Session tab
+  const sessionContent = (
+    <div className="space-y-6">
+      {/* Action Buttons - Context dependent */}
+      <div className="flex justify-between items-center">
+        <Button
+          onClick={handleExportProcessedFiles}
+          variant="outline"
+          disabled={completedDocsCount === 0}
+          className="gap-2"
+          icon={<Download className="w-4 h-4" />}
+        >
+          Export Processed Files
+        </Button>
+        <div>
+          {session.status === 'closed' ? (
+            <Button
+              onClick={() => reopenSession(session.id)}
+              variant="default"
+              className="bg-green-600 hover:bg-green-700 text-white font-medium"
+              icon={<FolderOpen className="w-4 h-4" />}
+            >
+              Re-Open Session
+            </Button>
+          ) : (
+            <Button
+              onClick={handleSaveAndClose}
+              variant="default"
+              className="bg-primary hover:bg-primary/90 text-primary-foreground font-medium"
+              icon={<Save className="w-4 h-4" />}
+            >
+              Save and Close Session
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex items-center gap-3">
+              <FileCheck className="w-8 h-8 text-green-500" />
+              <div>
+                <p className="text-xs text-muted-foreground">Documents</p>
+                <p className="text-2xl font-bold">{session.stats.documentsProcessed}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex items-center gap-3">
+              <Link className="w-8 h-8 text-blue-500" />
+              <div>
+                <p className="text-xs text-muted-foreground">Hyperlinks</p>
+                <p className="text-2xl font-bold">{session.stats.hyperlinksChecked}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex items-center gap-3">
+              <MessageSquare className="w-8 h-8 text-purple-500" />
+              <div>
+                <p className="text-xs text-muted-foreground">Feedback</p>
+                <p className="text-2xl font-bold">{session.stats.feedbackImported}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex items-center gap-3">
+              <Timer className="w-8 h-8 text-orange-500" />
+              <div>
+                <p className="text-xs text-muted-foreground">Time Saved</p>
+                <p className="text-2xl font-bold">
+                  {Math.round((session.stats.hyperlinksChecked * 101) / 60)}m
+                </p>
+                <p className="text-xs text-muted-foreground">101 seconds per hyperlink</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Document Upload Area */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Documents</CardTitle>
+          <CardDescription>Upload and process Word documents (.docx)</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {session.documents.length === 0 ? (
+            <div
+              className={cn(
+                "border-2 border-dashed rounded-lg p-8 text-center transition-colors",
+                isDragging ? "border-primary bg-primary/5" : "border-border"
+              )}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+            >
+              <Upload className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
+              <h3 className="text-lg font-medium mb-2">
+                {isDragging ? "Drop files here" : "Upload Documents"}
+              </h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                Drag and drop .docx files here, or click to browse
+              </p>
+              <Button onClick={handleFileSelect} icon={<Upload className="w-4 h-4" />}>
+                Load Files
+              </Button>
+            </div>
+          ) : (
+            <>
+              {/* Queue status banner - shows when documents are queued */}
+              {documentQueue.length > 0 && (
+                <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <Loader2 className="w-4 h-4 animate-spin text-blue-500" />
+                    <span className="text-sm">
+                      Processing document {documentQueue.findIndex(q => q.status === 'processing') + 1} of {documentQueue.length}
+                    </span>
+                    {estimatedTimeRemainingFormatted && (
+                      <span className="text-xs text-muted-foreground flex items-center gap-1">
+                        <Timer className="w-3 h-3" />
+                        ~{estimatedTimeRemainingFormatted} remaining
+                      </span>
+                    )}
+                  </div>
+                  <Button size="xs" variant="ghost" onClick={clearQueue}>
+                    Cancel All
+                  </Button>
+                </div>
+              )}
+
+              <div className="mb-4 flex justify-between">
+                <Button
+                  onClick={() => {
+                    // Add all pending documents to the queue for sequential processing
+                    const pendingDocs = session.documents
+                      .filter((doc) => doc.status === "pending")
+                      .map((doc) => doc.id);
+                    addManyToQueue(session.id, pendingDocs);
+                  }}
+                  size="sm"
+                  variant="default"
+                  className="bg-green-600 hover:bg-green-700 text-white"
+                  icon={<Play className="w-4 h-4" />}
+                  disabled={!session.documents.some((doc) => doc.status === "pending") || documentQueue.length > 0}
+                >
+                  Process Documents
+                </Button>
+                <Button
+                  onClick={handleFileSelect}
+                  size="sm"
+                  variant="default"
+                  className="bg-primary hover:bg-primary/90 text-primary-foreground"
+                  icon={<Upload className="w-4 h-4" />}
+                >
+                  Add More Files
+                </Button>
+              </div>
+
+              <div className="space-y-2">
+                <AnimatePresence>
+                  {session.documents.map((doc) => (
+                    <motion.div
+                      key={doc.id}
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, x: -20 }}
+                      className={cn(
+                        "flex items-center justify-between p-3 rounded-lg border border-border hover:bg-muted/50 transition-all group",
+                        doc.status === "completed" && "cursor-pointer"
+                      )}
+                      onDoubleClick={() => {
+                        if (doc.status === "completed") {
+                          // Switch to Document Changes tab and expand this document
+                          setActiveTabId("tracked-changes");
+                          setExpandedChangeDocId(doc.id);
+                        }
+                      }}
+                    >
+                      <div className="flex items-center gap-3">
+                        {getStatusIcon(doc.status)}
+                        <div>
+                          <p className="font-medium text-sm">{doc.name}</p>
+                          <p className="text-xs text-muted-foreground">
+                            {formatFileSize(doc.size)}
+                            {doc.processedAt &&
+                              ` • Processed ${new Date(doc.processedAt).toLocaleTimeString()}`}
+                          </p>
+                        </div>
+                      </div>
+
+                      <div className="flex items-center gap-2">
+                        {doc.status === "pending" && !isInQueue(doc.id) && (
+                          <Button
+                            size="xs"
+                            onClick={() => handleProcessDocument(doc.id)}
+                            disabled={isInQueue(doc.id)}
+                          >
+                            Process
+                          </Button>
+                        )}
+
+                        {/* Queue position indicator */}
+                        {doc.status === "pending" && isInQueue(doc.id) && (
+                          <span className="text-xs text-blue-500 font-medium flex items-center gap-1">
+                            {currentDocumentId === doc.id ? (
+                              <>
+                                <Loader2 className="w-3 h-3 animate-spin" />
+                                Processing...
+                              </>
+                            ) : (
+                              `Queue #${getQueuePosition(doc.id) + 1}`
+                            )}
+                          </span>
+                        )}
+
+                        {doc.status === "processing" && (
+                          <span className="text-xs text-blue-500 font-medium">Processing...</span>
+                        )}
+
+                        {doc.status === "completed" && (
+                          <span className="text-xs text-green-500 font-medium">Completed</span>
+                        )}
+
+                        {doc.status === "error" && (
+                          <>
+                            <button
+                              onClick={() => setErrorDialogDoc(doc)}
+                              className="text-xs text-red-500 font-medium hover:text-red-600 hover:underline cursor-pointer"
+                              title="Click to view error details"
+                            >
+                              {doc.errorType === 'file_locked'
+                                ? "Close File Before Processing"
+                                : doc.errorType === 'api_timeout'
+                                  ? "Power Automate Timeout"
+                                  : doc.errorType === 'word_compatibility'
+                                    ? "Convert File in Word"
+                                    : "Error"}
+                            </button>
+                            {(doc.errorType === 'file_locked' || doc.errorType === 'api_timeout' || doc.errorType === 'word_compatibility') && (
+                              <Button
+                                size="xs"
+                                onClick={() => handleProcessDocument(doc.id)}
+                                disabled={isInQueue(doc.id)}
+                              >
+                                Retry
+                              </Button>
+                            )}
+                          </>
+                        )}
+
+                        {/* Open Document button - only show for completed documents */}
+                        {doc.status === "completed" && doc.path && (
+                          <button
+                            onClick={async () => {
+                              try {
+                                await window.electronAPI.openDocument(doc.path!);
+                                toast({
+                                  title: "Opening in Word",
+                                  variant: "default",
+                                });
+                              } catch (err) {
+                                logger.error("Failed to open document:", err);
+                                toast({
+                                  title: "Cannot open file",
+                                  description: err instanceof Error ? err.message : undefined,
+                                  variant: "destructive",
+                                });
+                              }
+                            }}
+                            className="opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded hover:bg-green-50 dark:hover:bg-green-950"
+                            title="Open document in Word"
+                          >
+                            <FileText className="w-4 h-4 text-green-600 dark:text-green-400" />
+                          </button>
+                        )}
+
+                        {/* Open Backup button - only show for completed documents with backup */}
+                        {doc.status === "completed" && doc.processingResult?.backupPath && (
+                          <button
+                            onClick={async () => {
+                              try {
+                                await window.electronAPI.openDocument(doc.processingResult!.backupPath!);
+                                toast({
+                                  title: "Opening backup in Word",
+                                  variant: "default",
+                                });
+                              } catch (err) {
+                                logger.error("Failed to open backup:", err);
+                                toast({
+                                  title: "Cannot open backup file",
+                                  description: err instanceof Error ? err.message : undefined,
+                                  variant: "destructive",
+                                });
+                              }
+                            }}
+                            className="opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded hover:bg-yellow-50 dark:hover:bg-yellow-950"
+                            title="Open backup file"
+                          >
+                            <Archive className="w-4 h-4 text-yellow-600 dark:text-yellow-400" />
+                          </button>
+                        )}
+
+                        {/* Compare button - show backup vs processed side by side */}
+                        {doc.status === "completed" && doc.path && doc.processingResult?.backupPath && (
+                          <button
+                            onClick={async () => {
+                              if (!window.electronAPI?.display?.openComparison || !window.electronAPI?.display?.getAllDisplays) {
+                                toast({
+                                  title: "Compare unavailable",
+                                  description: "Feature not available in this version",
+                                  variant: "destructive",
+                                });
+                                return;
+                              }
+                              try {
+                                // Get available displays to validate monitor index
+                                const displays = await window.electronAPI.display.getAllDisplays();
+                                const savedMonitorIndex = settings.displaySettings?.comparisonMonitorId ?? 0;
+                                // Ensure monitor index is within bounds (fallback to primary if saved monitor no longer exists)
+                                const monitorIndex = Math.min(Math.max(0, savedMonitorIndex), displays.length - 1);
+
+                                const result = await window.electronAPI.display.openComparison(
+                                  doc.processingResult!.backupPath!,
+                                  doc.path!,
+                                  monitorIndex
+                                );
+                                if (result.success) {
+                                  toast({
+                                    title: "Opening comparison",
+                                    description: "Documents opening in Word side by side",
+                                    variant: "default",
+                                  });
+                                } else {
+                                  toast({
+                                    title: "Compare failed",
+                                    description: result.error,
+                                    variant: "destructive",
+                                  });
+                                }
+                              } catch (err) {
+                                logger.error("Failed to open comparison:", err);
+                                toast({
+                                  title: "Compare failed",
+                                  description: err instanceof Error ? err.message : undefined,
+                                  variant: "destructive",
+                                });
+                              }
+                            }}
+                            className="opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded hover:bg-blue-50 dark:hover:bg-blue-950"
+                            title="Compare before/after in Word"
+                          >
+                            <GitCompare className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+                          </button>
+                        )}
+
+                        {/* Show in Folder button */}
+                        {doc.path && (
+                          <button
+                            onClick={async () => {
+                              try {
+                                await window.electronAPI.showInFolder(doc.path!);
+                              } catch (err) {
+                                logger.error("Failed to open file location:", err);
+                              }
+                            }}
+                            className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-background"
+                            title="Open file location"
+                          >
+                            <FolderOpen className="w-4 h-4 text-muted-foreground" />
+                          </button>
+                        )}
+
+                        <button
+                          onClick={() => removeDocument(session.id, doc.id)}
+                          className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-background"
+                        >
+                          <X className="w-4 h-4 text-muted-foreground" />
+                        </button>
+                      </div>
+                    </motion.div>
+                  ))}
+                </AnimatePresence>
+              </div>
+
+              <div
+                className={cn(
+                  "mt-4 border-2 border-dashed rounded-lg p-4 text-center transition-colors",
+                  isDragging ? "border-primary bg-primary/5" : "border-border"
+                )}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+              >
+                <p className="text-sm text-muted-foreground">
+                  {isDragging ? "Drop files here to add" : "Drag and drop more files here"}
+                </p>
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+
+  // Header actions for tab headers - Reset/Save Default buttons
+  const handleResetToDefaults = () => {
+    if (session) {
+      resetSessionToDefaults(session.id);
+      toast({
+        title: "Settings reset",
+        variant: "default",
+      });
+    }
+  };
+
+  const handleSaveAsDefaults = () => {
+    if (session) {
+      saveAsCustomDefaults(session.id);
+      toast({
+        title: "Saved as default",
+        variant: "success",
+      });
+    }
+  };
+
+  const settingsButtons = (
+    <div className="flex items-center gap-2">
+      <Button
+        size="xs"
+        variant="ghost"
+        onClick={handleResetToDefaults}
+        className="text-xs"
+        icon={<RotateCcw className="w-3 h-3" />}
+      >
+        Reset
+      </Button>
+      <Button
+        size="xs"
+        variant="outline"
+        onClick={handleSaveAsDefaults}
+        className="text-xs"
+        icon={<Save className="w-3 h-3" />}
+      >
+        Save as Default
+      </Button>
+    </div>
+  );
+
+  const headerActions: Record<string, React.ReactNode> = {
+    processing: settingsButtons,
+    styles: settingsButtons,
+  };
+
+  // Create tabs configuration
+  const tabs = [
+    {
+      id: "session",
+      label: `Session: ${session.name}`,
+      content: sessionContent,
+    },
+    {
+      id: "processing",
+      label: "Processing Options",
+      content: (
+        <ProcessingOptions
+          sessionId={session.id}
+          options={processingOptions}
+          onOptionsChange={handleProcessingOptionsChange}
+          autoAcceptRevisions={session.processingOptions?.autoAcceptRevisions ?? false}
+          onAutoAcceptRevisionsChange={handleAutoAcceptRevisionsChange}
+        />
+      ),
+    },
+    {
+      id: "styles",
+      label: "Styles",
+      content: (
+        <StylesEditor
+          initialStyles={session.styles}
+          initialListBulletSettings={session.listBulletSettings}
+          onStylesChange={(styles) => {
+            // Auto-save: changes are persisted immediately to SessionContext
+            updateSessionStyles(session.id, styles);
+          }}
+          onListBulletSettingsChange={(settings) => {
+            // Auto-save: changes are persisted immediately to SessionContext
+            updateSessionListBulletSettings(session.id, settings);
+          }}
+          tableHeader2Shading={session.tableShadingSettings?.header2Shading || "#BFBFBF"}
+          tableOtherShading={session.tableShadingSettings?.otherShading || "#DFDFDF"}
+          imageBorderWidth={session.tableShadingSettings?.imageBorderWidth ?? 1.0}
+          padding1x1Top={session.tableShadingSettings?.padding1x1Top ?? 0}
+          padding1x1Bottom={session.tableShadingSettings?.padding1x1Bottom ?? 0}
+          padding1x1Left={session.tableShadingSettings?.padding1x1Left ?? 0.08}
+          padding1x1Right={session.tableShadingSettings?.padding1x1Right ?? 0.08}
+          paddingOtherTop={session.tableShadingSettings?.paddingOtherTop ?? 0}
+          paddingOtherBottom={session.tableShadingSettings?.paddingOtherBottom ?? 0}
+          paddingOtherLeft={session.tableShadingSettings?.paddingOtherLeft ?? 0.08}
+          paddingOtherRight={session.tableShadingSettings?.paddingOtherRight ?? 0.08}
+          cellBorderThickness={session.tableShadingSettings?.cellBorderThickness ?? 0.5}
+          onTableShadingChange={handleTableShadingChange}
+        />
+      ),
+    },
+    {
+      id: "replacements",
+      label: "Replacements",
+      content: <ReplacementsTab sessionId={session.id} />,
+    },
+    {
+      id: "tracked-changes",
+      label: "Document Changes",
+      content: (
+        <ChangeViewer
+          sessionId={session.id}
+          expandDocumentId={expandedChangeDocId}
+          onExpandHandled={() => setExpandedChangeDocId(null)}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Toast notifications */}
+      <Toaster toasts={toasts} onDismiss={dismiss} />
+
+      {/* Sticky Header Section */}
+      <div className="sticky top-0 z-30 bg-background p-6 pb-0 max-w-6xl mx-auto w-full">
+        {/* Title Edit */}
+        <div className="flex items-center gap-2 mb-6">
+          {isEditingTitle ? (
+            <div className="flex items-center gap-2">
+              <input
+                type="text"
+                value={editedTitle}
+                onChange={(e) => setEditedTitle(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") handleSaveTitle();
+                  if (e.key === "Escape") handleCancelEdit();
+                }}
+                className="text-3xl font-bold bg-transparent border-b-2 border-primary outline-none px-1"
+                autoFocus
+              />
+              <button
+                onClick={handleSaveTitle}
+                className="p-1.5 rounded-lg hover:bg-muted transition-colors"
+              >
+                <Check className="w-5 h-5 text-green-500" />
+              </button>
+              <button
+                onClick={handleCancelEdit}
+                className="p-1.5 rounded-lg hover:bg-muted transition-colors"
+              >
+                <X className="w-5 h-5 text-red-500" />
+              </button>
+            </div>
+          ) : (
+            <>
+              <h1 className="text-3xl font-bold">{session.name}</h1>
+              {session.status === 'closed' && (
+                <span className="text-sm px-2 py-1 rounded bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
+                  Closed
+                </span>
+              )}
+              <button
+                onClick={handleEditTitle}
+                className="p-1.5 rounded-lg hover:bg-muted transition-colors"
+                title="Edit session name"
+              >
+                <Edit2 className="w-4 h-4 text-muted-foreground" />
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Scrollable Content Area */}
+      <div className="flex-1 overflow-auto px-6 max-w-6xl mx-auto w-full">
+        <Card>
+          <TabContainer
+            tabs={tabs}
+            defaultTab="session"
+            headerActions={headerActions}
+            activeTabId={activeTabId}
+            onTabChange={(tabId) => setActiveTabId(tabId)}
+          />
+        </Card>
+      </div>
+
+      {/* Error Details Dialog */}
+      <ErrorDetailsDialog
+        open={errorDialogDoc !== null}
+        onOpenChange={(open) => !open && setErrorDialogDoc(null)}
+        documentName={errorDialogDoc?.name ?? ""}
+        errors={errorDialogDoc?.errors ?? []}
+        errorType={errorDialogDoc?.errorType}
+        processedAt={errorDialogDoc?.processedAt}
+      />
+    </div>
+  );
+}