feat: add worker threads, persistent Python sidecar, graceful shutdown, and architectural improvements

- Graceful shutdown: SIGTERM/SIGINT handlers drain HTTP, stop workers, close DB
- Thumbnail caching: disk-cached thumbnails with immutable Cache-Control headers
- Worker thread pool: Piscina offloads Sharp processing off the main event loop
- Persistent Python dispatcher: pre-imports ML libraries, eliminates cold-start latency
- Tool page registry: declarative tool-to-component mapping replaces 750-line switch
- File store cleanup: remove dead derived fields, stable files array reference
- Job persistence: progress written to SQLite jobs table, stale jobs recovered on startup

apps/web/src/pages/tool-page.tsx

@@ -1,7 +1,7 @@
 import { TOOLS } from "@stirling-image/shared";
 import * as icons from "lucide-react";
 import { CheckCircle2, ChevronLeft, ChevronRight, Download } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { Crop } from "react-image-crop";
 import { useParams } from "react-router-dom";
 import { BeforeAfterSlider } from "@/components/common/before-after-slider";
@@ -11,151 +11,15 @@ import { ReviewPanel } from "@/components/common/review-panel";
 import { SideBySideComparison } from "@/components/common/side-by-side-comparison";
 import { ThumbnailStrip } from "@/components/common/thumbnail-strip";
 import { AppLayout } from "@/components/layout/app-layout";
-import { BarcodeReadSettings } from "@/components/tools/barcode-read-settings";
-import { BlurFacesSettings } from "@/components/tools/blur-faces-settings";
-import { BorderSettings } from "@/components/tools/border-settings";
-// Phase 3: Optimization extras
-import { BulkRenameSettings } from "@/components/tools/bulk-rename-settings";
-// Phase 3: Layout & Composition
-import { CollageSettings } from "@/components/tools/collage-settings";
-import { ColorPaletteSettings } from "@/components/tools/color-palette-settings";
-import { ColorSettings } from "@/components/tools/color-settings";
-import { CompareSettings } from "@/components/tools/compare-settings";
-import { ComposeSettings } from "@/components/tools/compose-settings";
-import { CompressSettings } from "@/components/tools/compress-settings";
-import { ConvertSettings } from "@/components/tools/convert-settings";
 import { CropCanvas } from "@/components/tools/crop-canvas";
-import { CropSettings } from "@/components/tools/crop-settings";
-import { EraseObjectSettings } from "@/components/tools/erase-object-settings";
 import type { EraserCanvasRef } from "@/components/tools/eraser-canvas";
 import { EraserCanvas } from "@/components/tools/eraser-canvas";
-import { FaviconSettings } from "@/components/tools/favicon-settings";
-import { FindDuplicatesSettings } from "@/components/tools/find-duplicates-settings";
-import { GifToolsSettings } from "@/components/tools/gif-tools-settings";
-import { ImageToPdfSettings } from "@/components/tools/image-to-pdf-settings";
-// Phase 3: Utilities
-import { InfoSettings } from "@/components/tools/info-settings";
-import { OcrSettings } from "@/components/tools/ocr-settings";
-import { QrGenerateSettings } from "@/components/tools/qr-generate-settings";
-// Phase 4: AI Tools
-import { RemoveBgSettings } from "@/components/tools/remove-bg-settings";
-// Phase 3: Adjustments extra
-import { ReplaceColorSettings } from "@/components/tools/replace-color-settings";
-import { ResizeSettings } from "@/components/tools/resize-settings";
 import type { PreviewTransform } from "@/components/tools/rotate-settings";
-import { RotateSettings } from "@/components/tools/rotate-settings";
-import { SmartCropSettings } from "@/components/tools/smart-crop-settings";
-import { SplitSettings } from "@/components/tools/split-settings";
-import { StripMetadataSettings } from "@/components/tools/strip-metadata-settings";
-// Phase 3: Format & Conversion
-import { SvgToRasterSettings } from "@/components/tools/svg-to-raster-settings";
-import { TextOverlaySettings } from "@/components/tools/text-overlay-settings";
-import { UpscaleSettings } from "@/components/tools/upscale-settings";
-import { VectorizeSettings } from "@/components/tools/vectorize-settings";
-import { WatermarkImageSettings } from "@/components/tools/watermark-image-settings";
-// Phase 3: Watermark & Overlay
-import { WatermarkTextSettings } from "@/components/tools/watermark-text-settings";
 import { useMobile } from "@/hooks/use-mobile";
 import { formatFileSize } from "@/lib/download";
+import { getToolRegistryEntry } from "@/lib/tool-registry";
 import { useFileStore } from "@/stores/file-store";
 
-const COLOR_TOOL_IDS = new Set([
-  "brightness-contrast",
-  "saturation",
-  "color-channels",
-  "color-effects",
-]);
-
-// Tools that don't need a file dropzone (they generate content or have custom UI)
-const NO_DROPZONE_TOOLS = new Set(["qr-generate"]);
-const SIDE_BY_SIDE_TOOLS = new Set(["resize", "crop", "rotate", "erase-object"]);
-const LIVE_PREVIEW_TOOLS = new Set([
-  "rotate",
-  "brightness-contrast",
-  "saturation",
-  "color-channels",
-  "color-effects",
-]);
-const NO_COMPARISON_TOOLS = new Set(["strip-metadata", "convert"]);
-const INTERACTIVE_CROP_TOOLS = new Set(["crop"]);
-const INTERACTIVE_ERASER_TOOLS = new Set(["erase-object"]);
-
-function ToolSettingsPanel({
-  toolId,
-  onPreviewTransform,
-  onPreviewFilter,
-  cropProps,
-  eraserProps,
-}: {
-  toolId: string;
-  onPreviewTransform?: (t: PreviewTransform) => void;
-  onPreviewFilter?: (filter: string) => void;
-  cropProps?: {
-    cropState: {
-      crop: Crop;
-      aspect: number | undefined;
-      showGrid: boolean;
-      imgDimensions: { width: number; height: number } | null;
-    };
-    onCropChange: (crop: Crop) => void;
-    onAspectChange: (aspect: number | undefined) => void;
-    onGridToggle: (show: boolean) => void;
-  };
-  eraserProps?: {
-    eraserRef: React.RefObject<EraserCanvasRef | null>;
-    hasStrokes: boolean;
-    brushSize: number;
-    onBrushSizeChange: (size: number) => void;
-  };
-}) {
-  // Phase 2: Core tools
-  if (toolId === "resize") return <ResizeSettings />;
-  if (toolId === "crop" && cropProps) return <CropSettings {...cropProps} />;
-  if (toolId === "rotate") return <RotateSettings onPreviewTransform={onPreviewTransform} />;
-  if (toolId === "convert") return <ConvertSettings />;
-  if (toolId === "compress") return <CompressSettings />;
-  if (toolId === "strip-metadata") return <StripMetadataSettings />;
-  if (COLOR_TOOL_IDS.has(toolId))
-    return <ColorSettings toolId={toolId} onPreviewFilter={onPreviewFilter} />;
-  // Phase 3: Watermark & Overlay
-  if (toolId === "watermark-text") return <WatermarkTextSettings />;
-  if (toolId === "watermark-image") return <WatermarkImageSettings />;
-  if (toolId === "text-overlay") return <TextOverlaySettings />;
-  if (toolId === "compose") return <ComposeSettings />;
-  // Phase 3: Utilities
-  if (toolId === "info") return <InfoSettings />;
-  if (toolId === "compare") return <CompareSettings />;
-  if (toolId === "find-duplicates") return <FindDuplicatesSettings />;
-  if (toolId === "color-palette") return <ColorPaletteSettings />;
-  if (toolId === "qr-generate") return <QrGenerateSettings />;
-  if (toolId === "barcode-read") return <BarcodeReadSettings />;
-  // Phase 3: Layout & Composition
-  if (toolId === "collage") return <CollageSettings />;
-  if (toolId === "split") return <SplitSettings />;
-  if (toolId === "border") return <BorderSettings />;
-  // Phase 3: Format & Conversion
-  if (toolId === "svg-to-raster") return <SvgToRasterSettings />;
-  if (toolId === "vectorize") return <VectorizeSettings />;
-  if (toolId === "gif-tools") return <GifToolsSettings />;
-  // Phase 3: Optimization extras
-  if (toolId === "bulk-rename") return <BulkRenameSettings />;
-  if (toolId === "favicon") return <FaviconSettings />;
-  if (toolId === "image-to-pdf") return <ImageToPdfSettings />;
-  // Phase 3: Adjustments extra
-  if (toolId === "replace-color") return <ReplaceColorSettings />;
-  // Phase 4: AI Tools
-  if (toolId === "remove-background") return <RemoveBgSettings />;
-  if (toolId === "upscale") return <UpscaleSettings />;
-  if (toolId === "ocr") return <OcrSettings />;
-  if (toolId === "blur-faces") return <BlurFacesSettings />;
-  if (toolId === "erase-object" && eraserProps) return <EraseObjectSettings {...eraserProps} />;
-  if (toolId === "smart-crop") return <SmartCropSettings />;
-
-  return (
-    <p className="text-xs text-muted-foreground italic">Settings for this tool are coming soon.</p>
-  );
-}
-
 /** File selection indicator shown in left panel */
 function FileSelectionInfo({
   files,
@@ -209,6 +73,10 @@ function FileSelectionInfo({
 export function ToolPage() {
   const { toolId } = useParams<{ toolId: string }>();
   const tool = useMemo(() => TOOLS.find((t) => t.id === toolId), [toolId]);
+  const registryEntry = useMemo(
+    () => (toolId ? getToolRegistryEntry(toolId) : undefined),
+    [toolId],
+  );
   const {
     files,
     entries,
@@ -319,7 +187,7 @@ export function ToolPage() {
     URL.revokeObjectURL(url);
   }, [batchZipBlob, batchZipFilename]);
 
-  if (!tool) {
+  if (!tool || !registryEntry) {
     return (
       <AppLayout>
         <div className="flex items-center justify-center h-full text-muted-foreground">
@@ -335,7 +203,9 @@ export function ToolPage() {
 
   const hasFile = files.length > 0;
   const hasProcessed = !!processedUrl;
-  const isNoDropzone = NO_DROPZONE_TOOLS.has(tool.id);
+  const displayMode = registryEntry.displayMode;
+  const isNoDropzone = displayMode === "no-dropzone";
+  const isLivePreview = registryEntry.livePreview ?? false;
 
   // Derive processed file info from context
   const processedFileName = selectedFileName ? `processed-${selectedFileName}` : "processed-image";
@@ -343,6 +213,198 @@ export function ToolPage() {
     ? selectedFileName.split(".").pop()?.toUpperCase() || "IMAGE"
     : "IMAGE";
 
+  // Build settings props
+  const settingsProps = {
+    onPreviewTransform: isLivePreview ? setPreviewTransform : undefined,
+    onPreviewFilter: isLivePreview ? setPreviewFilter : undefined,
+    cropProps:
+      displayMode === "interactive-crop"
+        ? {
+            cropState,
+            onCropChange: setCropCrop,
+            onAspectChange: setCropAspect,
+            onGridToggle: setCropShowGrid,
+          }
+        : undefined,
+    eraserProps:
+      displayMode === "interactive-eraser"
+        ? {
+            eraserRef,
+            hasStrokes: eraserHasStrokes,
+            brushSize: eraserBrushSize,
+            onBrushSizeChange: setEraserBrushSize,
+          }
+        : undefined,
+  };
+
+  const ToolSettings = registryEntry.Settings;
+
+  // Render the image viewer based on display mode
+  function renderImageArea() {
+    if (isNoDropzone) {
+      return (
+        <div className="text-center text-muted-foreground">
+          <p className="text-sm">Configure settings and generate.</p>
+        </div>
+      );
+    }
+
+    if (displayMode === "interactive-crop" && hasFile && !hasProcessed && originalBlobUrl) {
+      return (
+        <CropCanvas
+          imageSrc={originalBlobUrl}
+          crop={cropCrop}
+          aspect={cropAspect}
+          showGrid={cropShowGrid}
+          imgDimensions={cropImgDimensions}
+          onCropChange={setCropCrop}
+          onImageLoad={setCropImgDimensions}
+        />
+      );
+    }
+
+    if (displayMode === "interactive-eraser" && hasFile && !hasProcessed && originalBlobUrl) {
+      return (
+        <EraserCanvas
+          ref={eraserRef}
+          imageSrc={originalBlobUrl}
+          brushSize={eraserBrushSize}
+          onStrokeChange={setEraserHasStrokes}
+        />
+      );
+    }
+
+    if (hasProcessed && originalBlobUrl && displayMode === "side-by-side") {
+      return (
+        <SideBySideComparison
+          beforeSrc={originalBlobUrl}
+          afterSrc={processedUrl}
+          beforeSize={originalSize ?? undefined}
+          afterSize={processedSize ?? undefined}
+        />
+      );
+    }
+
+    if (
+      hasProcessed &&
+      originalBlobUrl &&
+      (displayMode === "live-preview" || displayMode === "no-comparison")
+    ) {
+      return (
+        <ImageViewer
+          src={processedUrl}
+          filename={processedFileName}
+          fileSize={processedSize ?? 0}
+        />
+      );
+    }
+
+    if (hasProcessed && originalBlobUrl) {
+      return (
+        <BeforeAfterSlider
+          beforeSrc={originalBlobUrl}
+          afterSrc={processedUrl}
+          beforeSize={originalSize ?? undefined}
+          afterSize={processedSize ?? undefined}
+        />
+      );
+    }
+
+    if (hasFile && originalBlobUrl) {
+      return (
+        <ImageViewer
+          src={originalBlobUrl}
+          filename={selectedFileName ?? files[0].name}
+          fileSize={selectedFileSize ?? files[0].size}
+          {...(isLivePreview && previewTransform
+            ? {
+                cssRotate: previewTransform.rotate,
+                cssFlipH: previewTransform.flipH,
+                cssFlipV: previewTransform.flipV,
+              }
+            : {})}
+          {...(isLivePreview && previewFilter ? { cssFilter: previewFilter } : {})}
+        />
+      );
+    }
+
+    return <Dropzone onFiles={handleFiles} accept="image/*" multiple currentFiles={files} />;
+  }
+
+  // Navigation arrows (shared between mobile/desktop)
+  function renderNavArrows() {
+    return (
+      <>
+        {hasMultiple && hasPrev && (
+          <button
+            type="button"
+            onClick={navigatePrev}
+            className="absolute left-3 z-10 w-8 h-8 rounded-full bg-background/80 border border-border shadow-sm flex items-center justify-center hover:bg-background transition-colors"
+            aria-label="Previous image"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+        )}
+        {hasMultiple && hasNext && (
+          <button
+            type="button"
+            onClick={navigateNext}
+            className="absolute right-3 z-10 w-8 h-8 rounded-full bg-background/80 border border-border shadow-sm flex items-center justify-center hover:bg-background transition-colors"
+            aria-label="Next image"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        )}
+        {hasMultiple && (
+          <div className="absolute top-3 right-3 z-10 bg-background/80 border border-border px-2 py-0.5 rounded-full text-xs text-muted-foreground tabular-nums">
+            {selectedIndex + 1} / {entries.length}
+          </div>
+        )}
+      </>
+    );
+  }
+
+  // Render the settings panel content (shared between mobile/desktop)
+  function renderSettingsContent() {
+    return (
+      <>
+        {!isNoDropzone && (
+          <div className="space-y-2">
+            <h3 className="text-sm font-medium text-muted-foreground">Files</h3>
+            <FileSelectionInfo
+              files={files}
+              selectedFileName={selectedFileName}
+              selectedFileSize={selectedFileSize}
+              onClear={reset}
+              onAddMore={handleAddMore}
+            />
+          </div>
+        )}
+
+        <div className="border-t border-border" />
+
+        <div className="space-y-2">
+          <h3 className="text-sm font-medium text-muted-foreground">Settings</h3>
+          <Suspense fallback={<div className="text-xs text-muted-foreground">Loading...</div>}>
+            <ToolSettings {...settingsProps} />
+          </Suspense>
+        </div>
+
+        {hasProcessed && processedSize != null && (
+          <ReviewPanel
+            filename={processedFileName}
+            fileSize={processedSize}
+            fileType={processedFileType}
+            downloadUrl={processedUrl}
+            previewUrl={processedUrl}
+            onUndo={handleUndo}
+            currentToolId={tool?.id ?? ""}
+          />
+        )}
+      </>
+    );
+  }
+
   // Mobile layout: settings above dropzone (stacked)
   if (isMobile) {
     return (
@@ -366,69 +428,11 @@ export function ToolPage() {
           {/* Collapsible settings */}
           {mobileSettingsOpen && (
             <div className="p-4 border-b border-border space-y-3 shrink-0 max-h-[40vh] overflow-y-auto">
-              {/* File info */}
-              {!isNoDropzone && (
-                <div className="space-y-2">
-                  <h3 className="text-sm font-medium text-muted-foreground">Files</h3>
-                  <FileSelectionInfo
-                    files={files}
-                    selectedFileName={selectedFileName}
-                    selectedFileSize={selectedFileSize}
-                    onClear={reset}
-                    onAddMore={handleAddMore}
-                  />
-                </div>
-              )}
-
-              <div className="border-t border-border" />
-
-              <div className="space-y-2">
-                <h3 className="text-sm font-medium text-muted-foreground">Settings</h3>
-                <ToolSettingsPanel
-                  toolId={tool.id}
-                  onPreviewTransform={
-                    LIVE_PREVIEW_TOOLS.has(tool.id) ? setPreviewTransform : undefined
-                  }
-                  onPreviewFilter={LIVE_PREVIEW_TOOLS.has(tool.id) ? setPreviewFilter : undefined}
-                  cropProps={
-                    INTERACTIVE_CROP_TOOLS.has(tool.id)
-                      ? {
-                          cropState,
-                          onCropChange: setCropCrop,
-                          onAspectChange: setCropAspect,
-                          onGridToggle: setCropShowGrid,
-                        }
-                      : undefined
-                  }
-                  eraserProps={
-                    INTERACTIVE_ERASER_TOOLS.has(tool.id)
-                      ? {
-                          eraserRef,
-                          hasStrokes: eraserHasStrokes,
-                          brushSize: eraserBrushSize,
-                          onBrushSizeChange: setEraserBrushSize,
-                        }
-                      : undefined
-                  }
-                />
-              </div>
-
-              {/* Review panel (mobile) */}
-              {hasProcessed && processedSize != null && (
-                <ReviewPanel
-                  filename={processedFileName}
-                  fileSize={processedSize}
-                  fileType={processedFileType}
-                  downloadUrl={processedUrl}
-                  previewUrl={processedUrl}
-                  onUndo={handleUndo}
-                  currentToolId={tool.id}
-                />
-              )}
+              {renderSettingsContent()}
             </div>
           )}
 
-          {/* Main area: Dropzone / Image Viewer / Before-After */}
+          {/* Main area: image viewer */}
           <section
             aria-label="Image area"
             className="flex-1 flex flex-col min-h-0"
@@ -436,103 +440,8 @@ export function ToolPage() {
             tabIndex={hasMultiple ? 0 : undefined}
           >
             <div className="flex-1 relative flex items-center justify-center p-4 min-h-0">
-              {hasMultiple && hasPrev && (
-                <button
-                  type="button"
-                  onClick={navigatePrev}
-                  className="absolute left-3 z-10 w-8 h-8 rounded-full bg-background/80 border border-border shadow-sm flex items-center justify-center hover:bg-background transition-colors"
-                  aria-label="Previous image"
-                >
-                  <ChevronLeft className="h-4 w-4" />
-                </button>
-              )}
-              {isNoDropzone ? (
-                <div className="text-center text-muted-foreground">
-                  <p className="text-sm">Configure settings and generate.</p>
-                </div>
-              ) : INTERACTIVE_CROP_TOOLS.has(tool.id) &&
-                hasFile &&
-                !hasProcessed &&
-                originalBlobUrl ? (
-                <CropCanvas
-                  imageSrc={originalBlobUrl}
-                  crop={cropCrop}
-                  aspect={cropAspect}
-                  showGrid={cropShowGrid}
-                  imgDimensions={cropImgDimensions}
-                  onCropChange={setCropCrop}
-                  onImageLoad={setCropImgDimensions}
-                />
-              ) : INTERACTIVE_ERASER_TOOLS.has(tool.id) &&
-                hasFile &&
-                !hasProcessed &&
-                originalBlobUrl ? (
-                <EraserCanvas
-                  ref={eraserRef}
-                  imageSrc={originalBlobUrl}
-                  brushSize={eraserBrushSize}
-                  onStrokeChange={setEraserHasStrokes}
-                />
-              ) : hasProcessed && originalBlobUrl && SIDE_BY_SIDE_TOOLS.has(tool.id) ? (
-                <SideBySideComparison
-                  beforeSrc={originalBlobUrl}
-                  afterSrc={processedUrl}
-                  beforeSize={originalSize ?? undefined}
-                  afterSize={processedSize ?? undefined}
-                />
-              ) : hasProcessed && originalBlobUrl && LIVE_PREVIEW_TOOLS.has(tool.id) ? (
-                <ImageViewer
-                  src={processedUrl}
-                  filename={processedFileName}
-                  fileSize={processedSize ?? 0}
-                />
-              ) : hasProcessed && originalBlobUrl && NO_COMPARISON_TOOLS.has(tool.id) ? (
-                <ImageViewer
-                  src={processedUrl}
-                  filename={processedFileName}
-                  fileSize={processedSize ?? 0}
-                />
-              ) : hasProcessed && originalBlobUrl ? (
-                <BeforeAfterSlider
-                  beforeSrc={originalBlobUrl}
-                  afterSrc={processedUrl}
-                  beforeSize={originalSize ?? undefined}
-                  afterSize={processedSize ?? undefined}
-                />
-              ) : hasFile && originalBlobUrl ? (
-                <ImageViewer
-                  src={originalBlobUrl}
-                  filename={selectedFileName ?? files[0].name}
-                  fileSize={selectedFileSize ?? files[0].size}
-                  {...(LIVE_PREVIEW_TOOLS.has(tool.id) && previewTransform
-                    ? {
-                        cssRotate: previewTransform.rotate,
-                        cssFlipH: previewTransform.flipH,
-                        cssFlipV: previewTransform.flipV,
-                      }
-                    : {})}
-                  {...(LIVE_PREVIEW_TOOLS.has(tool.id) && previewFilter
-                    ? { cssFilter: previewFilter }
-                    : {})}
-                />
-              ) : (
-                <Dropzone onFiles={handleFiles} accept="image/*" multiple currentFiles={files} />
-              )}
-              {hasMultiple && hasNext && (
-                <button
-                  type="button"
-                  onClick={navigateNext}
-                  className="absolute right-3 z-10 w-8 h-8 rounded-full bg-background/80 border border-border shadow-sm flex items-center justify-center hover:bg-background transition-colors"
-                  aria-label="Next image"
-                >
-                  <ChevronRight className="h-4 w-4" />
-                </button>
-              )}
-              {hasMultiple && (
-                <div className="absolute top-3 right-3 z-10 bg-background/80 border border-border px-2 py-0.5 rounded-full text-xs text-muted-foreground tabular-nums">
-                  {selectedIndex + 1} / {entries.length}
-                </div>
-              )}
+              {renderNavArrows()}
+              {renderImageArea()}
             </div>
             {hasMultiple && (
               <ThumbnailStrip
@@ -560,64 +469,7 @@ export function ToolPage() {
             <h2 className="font-semibold text-lg text-foreground">{tool.name}</h2>
           </div>
 
-          {/* File info - hidden for tools that don't need files */}
-          {!isNoDropzone && (
-            <div className="space-y-2">
-              <h3 className="text-sm font-medium text-muted-foreground">Files</h3>
-              <FileSelectionInfo
-                files={files}
-                selectedFileName={selectedFileName}
-                selectedFileSize={selectedFileSize}
-                onClear={reset}
-                onAddMore={handleAddMore}
-              />
-            </div>
-          )}
-
-          <div className="border-t border-border" />
-
-          {/* Tool-specific settings */}
-          <div className="space-y-2">
-            <h3 className="text-sm font-medium text-muted-foreground">Settings</h3>
-            <ToolSettingsPanel
-              toolId={tool.id}
-              onPreviewTransform={LIVE_PREVIEW_TOOLS.has(tool.id) ? setPreviewTransform : undefined}
-              onPreviewFilter={LIVE_PREVIEW_TOOLS.has(tool.id) ? setPreviewFilter : undefined}
-              cropProps={
-                INTERACTIVE_CROP_TOOLS.has(tool.id)
-                  ? {
-                      cropState,
-                      onCropChange: setCropCrop,
-                      onAspectChange: setCropAspect,
-                      onGridToggle: setCropShowGrid,
-                    }
-                  : undefined
-              }
-              eraserProps={
-                INTERACTIVE_ERASER_TOOLS.has(tool.id)
-                  ? {
-                      eraserRef,
-                      hasStrokes: eraserHasStrokes,
-                      brushSize: eraserBrushSize,
-                      onBrushSizeChange: setEraserBrushSize,
-                    }
-                  : undefined
-              }
-            />
-          </div>
-
-          {/* Review panel (desktop - below settings) */}
-          {hasProcessed && processedSize != null && (
-            <ReviewPanel
-              filename={processedFileName}
-              fileSize={processedSize}
-              fileType={processedFileType}
-              downloadUrl={processedUrl}
-              previewUrl={processedUrl}
-              onUndo={handleUndo}
-              currentToolId={tool.id}
-            />
-          )}
+          {renderSettingsContent()}
 
           {/* Batch download */}
           {entries.length > 1 && hasProcessed && batchZipBlob && (
@@ -635,7 +487,7 @@ export function ToolPage() {
           )}
         </div>
 
-        {/* Main area: Dropzone / Image Viewer / Before-After */}
+        {/* Main area: image viewer */}
         <section
           aria-label="Image area"
           className="flex-1 flex flex-col min-h-0"
@@ -643,103 +495,8 @@ export function ToolPage() {
           tabIndex={hasMultiple ? 0 : undefined}
         >
           <div className="flex-1 relative flex items-center justify-center p-6 min-h-0">
-            {hasMultiple && hasPrev && (
-              <button
-                type="button"
-                onClick={navigatePrev}
-                className="absolute left-3 z-10 w-8 h-8 rounded-full bg-background/80 border border-border shadow-sm flex items-center justify-center hover:bg-background transition-colors"
-                aria-label="Previous image"
-              >
-                <ChevronLeft className="h-4 w-4" />
-              </button>
-            )}
-            {isNoDropzone ? (
-              <div className="text-center text-muted-foreground">
-                <p className="text-sm">Configure settings and generate.</p>
-              </div>
-            ) : INTERACTIVE_CROP_TOOLS.has(tool.id) &&
-              hasFile &&
-              !hasProcessed &&
-              originalBlobUrl ? (
-              <CropCanvas
-                imageSrc={originalBlobUrl}
-                crop={cropCrop}
-                aspect={cropAspect}
-                showGrid={cropShowGrid}
-                imgDimensions={cropImgDimensions}
-                onCropChange={setCropCrop}
-                onImageLoad={setCropImgDimensions}
-              />
-            ) : INTERACTIVE_ERASER_TOOLS.has(tool.id) &&
-              hasFile &&
-              !hasProcessed &&
-              originalBlobUrl ? (
-              <EraserCanvas
-                ref={eraserRef}
-                imageSrc={originalBlobUrl}
-                brushSize={eraserBrushSize}
-                onStrokeChange={setEraserHasStrokes}
-              />
-            ) : hasProcessed && originalBlobUrl && SIDE_BY_SIDE_TOOLS.has(tool.id) ? (
-              <SideBySideComparison
-                beforeSrc={originalBlobUrl}
-                afterSrc={processedUrl}
-                beforeSize={originalSize ?? undefined}
-                afterSize={processedSize ?? undefined}
-              />
-            ) : hasProcessed && originalBlobUrl && LIVE_PREVIEW_TOOLS.has(tool.id) ? (
-              <ImageViewer
-                src={processedUrl}
-                filename={processedFileName}
-                fileSize={processedSize ?? 0}
-              />
-            ) : hasProcessed && originalBlobUrl && NO_COMPARISON_TOOLS.has(tool.id) ? (
-              <ImageViewer
-                src={processedUrl}
-                filename={processedFileName}
-                fileSize={processedSize ?? 0}
-              />
-            ) : hasProcessed && originalBlobUrl ? (
-              <BeforeAfterSlider
-                beforeSrc={originalBlobUrl}
-                afterSrc={processedUrl}
-                beforeSize={originalSize ?? undefined}
-                afterSize={processedSize ?? undefined}
-              />
-            ) : hasFile && originalBlobUrl ? (
-              <ImageViewer
-                src={originalBlobUrl}
-                filename={selectedFileName ?? files[0].name}
-                fileSize={selectedFileSize ?? files[0].size}
-                {...(LIVE_PREVIEW_TOOLS.has(tool.id) && previewTransform
-                  ? {
-                      cssRotate: previewTransform.rotate,
-                      cssFlipH: previewTransform.flipH,
-                      cssFlipV: previewTransform.flipV,
-                    }
-                  : {})}
-                {...(LIVE_PREVIEW_TOOLS.has(tool.id) && previewFilter
-                  ? { cssFilter: previewFilter }
-                  : {})}
-              />
-            ) : (
-              <Dropzone onFiles={handleFiles} accept="image/*" multiple currentFiles={files} />
-            )}
-            {hasMultiple && hasNext && (
-              <button
-                type="button"
-                onClick={navigateNext}
-                className="absolute right-3 z-10 w-8 h-8 rounded-full bg-background/80 border border-border shadow-sm flex items-center justify-center hover:bg-background transition-colors"
-                aria-label="Next image"
-              >
-                <ChevronRight className="h-4 w-4" />
-              </button>
-            )}
-            {hasMultiple && (
-              <div className="absolute top-3 right-3 z-10 bg-background/80 border border-border px-2 py-0.5 rounded-full text-xs text-muted-foreground tabular-nums">
-                {selectedIndex + 1} / {entries.length}
-              </div>
-            )}
+            {renderNavArrows()}
+            {renderImageArea()}
           </div>
           {hasMultiple && (
             <ThumbnailStrip