refactor: improve tool processing, dropzone, seam carving, and format encoding

- Refactor use-tool-processor and use-pipeline-processor hooks
- Enhance dropzone component with improved UX
- Improve seam carving with better error handling and tests
- Add JXL format encoding support to format-encoders
- Update tool routes for consistent format handling
- Add dropzone unit tests

apps/web/src/components/common/dropzone.tsx

@@ -1,5 +1,5 @@
-import { FileImage, Upload } from "lucide-react";
-import { type DragEvent, useCallback, useState } from "react";
+import { FileImage, ImageUp, Upload } from "lucide-react";
+import { type DragEvent, useCallback, useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
 
 const IMAGE_EXTENSIONS = new Set([
@@ -134,6 +134,35 @@ export function Dropzone({
     input.click();
   };
 
+  useEffect(() => {
+    const handlePaste = (e: ClipboardEvent) => {
+      const clip = e.clipboardData;
+      if (!clip) return;
+
+      const files: File[] = [];
+
+      if (clip.files.length > 0) {
+        for (const file of clip.files) {
+          if (isImageFile(file)) files.push(file);
+        }
+      } else if (clip.items) {
+        for (const item of clip.items) {
+          if (item.kind === "file") {
+            const file = item.getAsFile();
+            if (file && isImageFile(file)) files.push(file);
+          }
+        }
+      }
+
+      if (files.length > 0) {
+        e.preventDefault();
+        onFiles?.(files);
+      }
+    };
+    document.addEventListener("paste", handlePaste);
+    return () => document.removeEventListener("paste", handlePaste);
+  }, [onFiles]);
+
   const hasMultipleFiles = currentFiles.length > 1;
 
   return (
@@ -143,31 +172,60 @@ export function Dropzone({
       onDragOver={handleDrag}
       onDragLeave={handleDrag}
       onDrop={handleDrop}
+      onClick={handleClick}
       className={cn(
-        "flex flex-col items-center justify-center rounded-2xl border-2 border-dashed transition-colors mx-auto max-w-2xl w-full",
+        "group flex flex-col items-center justify-center rounded-2xl border-2 border-dashed transition-all duration-200 mx-auto max-w-2xl w-full cursor-pointer",
         compact ? "min-h-0 h-full" : "min-h-[400px]",
         isDragging
-          ? "border-primary bg-primary/5"
-          : "border-border bg-muted/30 hover:border-primary/50 hover:bg-muted/50",
+          ? "border-primary bg-primary/10 scale-[1.01]"
+          : "border-border/60 bg-muted/20 hover:border-primary/40 hover:bg-muted/40",
       )}
     >
-      <div className={cn("flex flex-col items-center", compact ? "gap-2 p-4" : "gap-4 p-8")}>
-        <div className="text-3xl font-bold text-muted-foreground/30">
-          <span className="text-primary/30">SnapOtter</span>
+      <div className={cn("flex flex-col items-center", compact ? "gap-2 p-4" : "gap-5 p-8")}>
+        <div
+          className={cn(
+            "rounded-2xl bg-primary/8 p-4 transition-colors duration-200",
+            isDragging ? "bg-primary/15" : "group-hover:bg-primary/12",
+          )}
+        >
+          <ImageUp
+            className={cn(
+              "transition-all duration-200",
+              compact ? "h-8 w-8" : "h-10 w-10",
+              isDragging ? "text-primary" : "text-primary/50 group-hover:text-primary/70",
+            )}
+            strokeWidth={1.5}
+          />
+        </div>
+        <div className="flex flex-col items-center gap-1.5">
+          <p className={cn("font-medium", compact ? "text-sm" : "text-base", "text-foreground/80")}>
+            Drop your images here
+          </p>
+          <p className="text-sm text-muted-foreground/70">
+            click anywhere to browse, or paste from clipboard
+          </p>
         </div>
         <button
           type="button"
-          onClick={handleClick}
-          className="flex items-center gap-2 px-6 py-2.5 rounded-lg border border-primary text-primary hover:bg-primary/5 transition-colors text-sm font-medium"
+          onClick={(e) => {
+            e.stopPropagation();
+            handleClick();
+          }}
+          className={cn(
+            "flex items-center gap-2 rounded-lg bg-primary text-primary-foreground transition-all duration-200 text-sm font-medium shadow-sm",
+            compact ? "px-5 py-2" : "px-8 py-3",
+            "hover:bg-primary/90 hover:shadow-md active:scale-[0.98]",
+          )}
         >
           <Upload className="h-4 w-4" />
-          Upload from computer
+          Upload
         </button>
-        <p className="text-sm text-muted-foreground">Drop files here or click the upload button</p>
+        <p className="text-xs text-muted-foreground/50">
+          PNG, JPG, WebP, HEIC, RAW, PSD, and 65+ formats
+        </p>
 
-        {/* Show file count badge and list when multiple files are dropped */}
         {hasMultipleFiles && (
-          <div className="flex flex-col items-center gap-2 mt-2">
+          <div className="flex flex-col items-center gap-2 mt-1">
             <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-medium">
               <FileImage className="h-3.5 w-3.5" />
               {currentFiles.length} files selected

apps/web/src/components/common/multi-image-viewer.tsx

@@ -51,7 +51,12 @@ export function MultiImageViewer() {
     hasProcessed && currentEntry.processedUrl
       ? canBrowserPreview(currentEntry.processedUrl)
       : false;
-  const displayUrl = currentEntry.processedPreviewUrl ?? currentEntry.processedUrl;
+  const processedRenderable =
+    currentEntry.processedUrl && canBrowserPreview(currentEntry.processedUrl)
+      ? currentEntry.processedUrl
+      : null;
+  const displayUrl =
+    currentEntry.processedPreviewUrl ?? processedRenderable ?? currentEntry.blobUrl;
 
   const processedFilename = currentEntry.processedUrl
     ? decodeURIComponent(currentEntry.processedUrl.split("/").pop() ?? "processed")
@@ -77,7 +82,10 @@ export function MultiImageViewer() {
           </button>
         )}
         <div className="w-full h-full min-h-0">
-          {hasProcessed && !isPreviewable && !currentEntry.processedPreviewUrl ? (
+          {hasProcessed &&
+          !isPreviewable &&
+          !currentEntry.processedPreviewUrl &&
+          !currentEntry.blobUrl ? (
             <div className="flex flex-col items-center justify-center h-full gap-3 text-center p-8">
               <div className="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
                 <CheckCircle2 className="h-6 w-6 text-green-600 dark:text-green-400" />

apps/web/src/components/common/progress-card.tsx

@@ -12,9 +12,6 @@ interface ProgressCardProps {
 export function ProgressCard({ active, phase, label, stage, percent, elapsed }: ProgressCardProps) {
   if (!active) return null;
 
-  // No real-time server progress: non-AI tools sit at 100% while the server works
-  const isIndeterminate = phase === "processing" && percent >= 100;
-
   const icon =
     phase === "uploading" ? (
       <Upload className="h-4 w-4 text-primary" />
@@ -22,8 +19,7 @@ export function ProgressCard({ active, phase, label, stage, percent, elapsed }:
       <Loader2 className="h-4 w-4 text-primary animate-spin" />
     );
 
-  const slowHint = phase === "processing" && elapsed >= 10 ? "This may take a moment" : undefined;
-  const sublabel = [stage, slowHint, `${elapsed}s`].filter(Boolean).join(" \u00b7 ");
+  const sublabel = [stage, `${elapsed}s`].filter(Boolean).join(" · ");
 
   return (
     <div className="bg-muted/80 border border-border rounded-xl p-3 space-y-2.5">
@@ -41,7 +37,7 @@ export function ProgressCard({ active, phase, label, stage, percent, elapsed }:
       </div>
       <div className="w-full h-1 bg-muted rounded-full overflow-hidden">
         <div
-          className={`h-full bg-primary rounded-full transition-all duration-500 ease-out ${isIndeterminate ? "animate-pulse" : ""}`}
+          className="h-full bg-primary rounded-full transition-all duration-500 ease-out"
           style={{ width: `${Math.min(100, percent)}%` }}
         />
       </div>

apps/web/src/components/common/thumbnail-strip.tsx

@@ -2,6 +2,18 @@ import { CheckCircle2, Loader2, XCircle } from "lucide-react";
 import { useEffect, useRef } from "react";
 import type { FileEntry } from "@/stores/file-store";
 
+const BROWSER_IMG_EXTS = new Set(["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp", "avif"]);
+
+function thumbnailSrc(entry: FileEntry): string {
+  if (entry.processedPreviewUrl) return entry.processedPreviewUrl;
+  if (entry.processedUrl) {
+    if (entry.processedUrl.startsWith("blob:")) return entry.processedUrl;
+    const ext = decodeURIComponent(entry.processedUrl).split(".").pop()?.toLowerCase() ?? "";
+    if (BROWSER_IMG_EXTS.has(ext)) return entry.processedUrl;
+  }
+  return entry.blobUrl;
+}
+
 interface ThumbnailStripProps {
   entries: FileEntry[];
   selectedIndex: number;
@@ -50,7 +62,7 @@ export function ThumbnailStrip({ entries, selectedIndex, onSelect }: ThumbnailSt
               </div>
             ) : (
               <img
-                src={entry.processedPreviewUrl ?? entry.processedUrl ?? entry.blobUrl}
+                src={thumbnailSrc(entry)}
                 alt={entry.file.name}
                 className="w-full h-full object-cover"
                 draggable={false}

apps/web/src/components/tools/resize-settings.tsx

@@ -5,7 +5,7 @@ import { ProgressCard } from "@/components/common/progress-card";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
 import { useFileStore } from "@/stores/file-store";
 
-type ResizeTab = "presets" | "custom" | "scale";
+type ResizeTab = "presets" | "custom" | "scale" | "content-aware";
 type FitMode = "cover" | "contain" | "fill";
 
 const FIT_LABELS: Record<FitMode, string> = {
@@ -42,7 +42,7 @@ export function ResizeControls({ settings: initialSettings, onChange }: ResizeCo
   const [fit, setFit] = useState<FitMode>("cover");
   const [lockAspect, setLockAspect] = useState(true);
   const [withoutEnlargement, setWithoutEnlargement] = useState(false);
-  const [contentAware, setContentAware] = useState(false);
+  const contentAware = tab === "content-aware";
   const [protectFaces, setProtectFaces] = useState(false);
   const [blurRadius, setBlurRadius] = useState(4);
   const [sobelThreshold, setSobelThreshold] = useState(2);
@@ -58,17 +58,14 @@ export function ResizeControls({ settings: initialSettings, onChange }: ResizeCo
     if (initialSettings.fit != null) setFit(initialSettings.fit as FitMode);
     if (initialSettings.withoutEnlargement != null)
       setWithoutEnlargement(Boolean(initialSettings.withoutEnlargement));
-    if (initialSettings.contentAware != null)
-      setContentAware(Boolean(initialSettings.contentAware));
     if (initialSettings.protectFaces != null)
       setProtectFaces(Boolean(initialSettings.protectFaces));
     if (initialSettings.blurRadius != null) setBlurRadius(Number(initialSettings.blurRadius));
     if (initialSettings.sobelThreshold != null)
       setSobelThreshold(Number(initialSettings.sobelThreshold));
     if (initialSettings.square != null) setSquareMode(Boolean(initialSettings.square));
-    // Infer tab from settings
-    if (initialSettings.percentage != null) setTab("scale");
-    else if (initialSettings.contentAware) setTab("custom");
+    if (initialSettings.contentAware) setTab("content-aware");
+    else if (initialSettings.percentage != null) setTab("scale");
   }, [initialSettings]);
 
   const onChangeRef = useRef(onChange);
@@ -104,7 +101,6 @@ export function ResizeControls({ settings: initialSettings, onChange }: ResizeCo
     percentage,
     fit,
     withoutEnlargement,
-    contentAware,
     protectFaces,
     blurRadius,
     sobelThreshold,
@@ -183,218 +179,191 @@ export function ResizeControls({ settings: initialSettings, onChange }: ResizeCo
 
   return (
     <div className="space-y-4">
-      {/* Standard resize tabs */}
-      {!contentAware && (
-        <>
-          {/* Tab selector */}
-          <div>
-            <div className="flex gap-1">
-              <button type="button" onClick={() => setTab("custom")} className={tabClass("custom")}>
-                Custom Size
-              </button>
-              <button type="button" onClick={() => setTab("scale")} className={tabClass("scale")}>
-                Scale
-              </button>
-              <button
-                type="button"
-                onClick={() => setTab("presets")}
-                className={tabClass("presets")}
-              >
-                Presets
-              </button>
-            </div>
-          </div>
-
-          {/* Presets tab */}
-          {tab === "presets" && (
-            <div className="space-y-3 max-h-[50vh] overflow-y-auto pr-1">
-              {platforms.map((platform) => (
-                <div key={platform}>
-                  <p className="text-xs font-medium text-muted-foreground mb-1.5">{platform}</p>
-                  <div className="space-y-1">
-                    {SOCIAL_MEDIA_PRESETS.filter((p) => p.platform === platform).map((preset) => {
-                      const key = `${preset.platform}-${preset.name}`;
-                      const isSelected = selectedPreset === key;
-                      return (
-                        <button
-                          key={key}
-                          type="button"
-                          onClick={() => handlePreset(preset)}
-                          className={`w-full flex items-center justify-between px-2.5 py-1.5 rounded border text-sm transition-colors ${
-                            isSelected
-                              ? "border-primary bg-primary/10 text-foreground"
-                              : "border-border text-muted-foreground hover:border-primary/50 hover:text-foreground"
-                          }`}
-                        >
-                          <span>{preset.name}</span>
-                          <span className="text-xs tabular-nums">
-                            {preset.width} x {preset.height}
-                          </span>
-                        </button>
-                      );
-                    })}
-                  </div>
-                </div>
-              ))}
-
-              {enlargementCheckbox}
-            </div>
-          )}
-
-          {/* Custom Size tab */}
-          {tab === "custom" && (
-            <div className="space-y-3">
-              {dimensionInputs}
-
-              {/* Fit mode */}
-              <div>
-                <p className="text-xs text-muted-foreground">Fit Mode</p>
-                <div className="flex gap-1 mt-1">
-                  {(Object.keys(FIT_LABELS) as FitMode[]).map((f) => (
-                    <button
-                      key={f}
-                      type="button"
-                      onClick={() => setFit(f)}
-                      className={`flex-1 text-xs py-1.5 rounded ${fit === f ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
-                    >
-                      {FIT_LABELS[f]}
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              {enlargementCheckbox}
-            </div>
-          )}
-
-          {/* Scale tab */}
-          {tab === "scale" && (
-            <div className="space-y-3">
-              <div>
-                <label htmlFor="resize-scale" className="text-xs text-muted-foreground">
-                  Scale (%)
-                </label>
-                <input
-                  id="resize-scale"
-                  type="number"
-                  value={percentage}
-                  onChange={(e) => setPercentage(e.target.value)}
-                  min={1}
-                  className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
-                />
-              </div>
-              <div className="flex gap-1">
-                {[25, 50, 75].map((pct) => (
-                  <button
-                    key={pct}
-                    type="button"
-                    onClick={() => setPercentage(String(pct))}
-                    className={`flex-1 text-xs py-1.5 rounded ${
-                      percentage === String(pct)
-                        ? "bg-primary text-primary-foreground"
-                        : "bg-muted text-muted-foreground"
-                    }`}
-                  >
-                    {pct}%
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
-        </>
-      )}
-
-      {/* Content-aware section - positioned below standard resize */}
-      <div className="border-t border-border pt-3">
-        <div className="flex items-center justify-between">
-          <div>
-            <span className="text-xs font-medium text-muted-foreground">Content-aware</span>
-          </div>
+      {/* Tab selector */}
+      <div>
+        <div className="flex gap-1">
+          <button type="button" onClick={() => setTab("custom")} className={tabClass("custom")}>
+            Custom Size
+          </button>
+          <button type="button" onClick={() => setTab("scale")} className={tabClass("scale")}>
+            Scale
+          </button>
+          <button type="button" onClick={() => setTab("presets")} className={tabClass("presets")}>
+            Presets
+          </button>
           <button
             type="button"
-            role="switch"
-            aria-checked={contentAware}
-            onClick={() => setContentAware(!contentAware)}
-            className={`relative inline-flex h-4 w-7 items-center rounded-full transition-colors ${
-              contentAware ? "bg-primary" : "bg-muted"
-            }`}
+            onClick={() => setTab("content-aware")}
+            className={tabClass("content-aware")}
           >
-            <span
-              className={`inline-block h-3 w-3 rounded-full bg-white shadow-sm transition-transform ${
-                contentAware ? "translate-x-3.5" : "translate-x-0.5"
-              }`}
-            />
+            Content-Aware
           </button>
         </div>
+      </div>
 
-        {/* Content-aware options (expanded when toggled) */}
-        {contentAware && (
-          <div className="mt-3 space-y-3">
-            {/* Dimensions */}
-            {dimensionInputs}
-
-            {/* Square mode */}
-            <label className="flex items-center gap-2 text-xs text-foreground">
-              <input
-                type="checkbox"
-                checked={squareMode}
-                onChange={(e) => setSquareMode(e.target.checked)}
-                className="rounded"
-              />
-              Resize to square
-            </label>
-
-            {/* Face protection */}
-            <label className="flex items-center gap-2 text-xs text-foreground">
-              <input
-                type="checkbox"
-                checked={protectFaces}
-                onChange={(e) => setProtectFaces(e.target.checked)}
-                className="rounded"
-              />
-              Protect faces
-            </label>
-
-            {/* Blur radius */}
-            <div>
-              <div className="flex items-center justify-between">
-                <label htmlFor="blur-radius" className="text-xs text-muted-foreground">
-                  Smoothing
-                </label>
-                <span className="text-xs tabular-nums text-muted-foreground">{blurRadius}</span>
+      {/* Presets tab */}
+      {tab === "presets" && (
+        <div className="space-y-3 max-h-[50vh] overflow-y-auto pr-1">
+          {platforms.map((platform) => (
+            <div key={platform}>
+              <p className="text-xs font-medium text-muted-foreground mb-1.5">{platform}</p>
+              <div className="space-y-1">
+                {SOCIAL_MEDIA_PRESETS.filter((p) => p.platform === platform).map((preset) => {
+                  const key = `${preset.platform}-${preset.name}`;
+                  const isSelected = selectedPreset === key;
+                  return (
+                    <button
+                      key={key}
+                      type="button"
+                      onClick={() => handlePreset(preset)}
+                      className={`w-full flex items-center justify-between px-2.5 py-1.5 rounded border text-sm transition-colors ${
+                        isSelected
+                          ? "border-primary bg-primary/10 text-foreground"
+                          : "border-border text-muted-foreground hover:border-primary/50 hover:text-foreground"
+                      }`}
+                    >
+                      <span>{preset.name}</span>
+                      <span className="text-xs tabular-nums">
+                        {preset.width} x {preset.height}
+                      </span>
+                    </button>
+                  );
+                })}
               </div>
-              <input
-                id="blur-radius"
-                type="range"
-                min={0}
-                max={20}
-                value={blurRadius}
-                onChange={(e) => setBlurRadius(Number(e.target.value))}
-                className="w-full mt-1 h-1.5 rounded-full appearance-none bg-muted accent-primary"
-              />
             </div>
+          ))}
 
-            {/* Sobel threshold */}
-            <div>
-              <div className="flex items-center justify-between">
-                <label htmlFor="sobel-threshold" className="text-xs text-muted-foreground">
-                  Edge sensitivity
-                </label>
-                <span className="text-xs tabular-nums text-muted-foreground">{sobelThreshold}</span>
-              </div>
-              <input
-                id="sobel-threshold"
-                type="range"
-                min={1}
-                max={20}
-                value={sobelThreshold}
-                onChange={(e) => setSobelThreshold(Number(e.target.value))}
-                className="w-full mt-1 h-1.5 rounded-full appearance-none bg-muted accent-primary"
-              />
+          {enlargementCheckbox}
+        </div>
+      )}
+
+      {/* Custom Size tab */}
+      {tab === "custom" && (
+        <div className="space-y-3">
+          {dimensionInputs}
+
+          {/* Fit mode */}
+          <div>
+            <p className="text-xs text-muted-foreground">Fit Mode</p>
+            <div className="flex gap-1 mt-1">
+              {(Object.keys(FIT_LABELS) as FitMode[]).map((f) => (
+                <button
+                  key={f}
+                  type="button"
+                  onClick={() => setFit(f)}
+                  className={`flex-1 text-xs py-1.5 rounded ${fit === f ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
+                >
+                  {FIT_LABELS[f]}
+                </button>
+              ))}
             </div>
           </div>
-        )}
-      </div>
+
+          {enlargementCheckbox}
+        </div>
+      )}
+
+      {/* Scale tab */}
+      {tab === "scale" && (
+        <div className="space-y-3">
+          <div>
+            <label htmlFor="resize-scale" className="text-xs text-muted-foreground">
+              Scale (%)
+            </label>
+            <input
+              id="resize-scale"
+              type="number"
+              value={percentage}
+              onChange={(e) => setPercentage(e.target.value)}
+              min={1}
+              className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+            />
+          </div>
+          <div className="flex gap-1">
+            {[25, 50, 75].map((pct) => (
+              <button
+                key={pct}
+                type="button"
+                onClick={() => setPercentage(String(pct))}
+                className={`flex-1 text-xs py-1.5 rounded ${
+                  percentage === String(pct)
+                    ? "bg-primary text-primary-foreground"
+                    : "bg-muted text-muted-foreground"
+                }`}
+              >
+                {pct}%
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Content-aware tab */}
+      {contentAware && (
+        <div className="space-y-3">
+          {dimensionInputs}
+
+          {/* Square mode */}
+          <label className="flex items-center gap-2 text-xs text-foreground">
+            <input
+              type="checkbox"
+              checked={squareMode}
+              onChange={(e) => setSquareMode(e.target.checked)}
+              className="rounded"
+            />
+            Resize to square
+          </label>
+
+          {/* Face protection */}
+          <label className="flex items-center gap-2 text-xs text-foreground">
+            <input
+              type="checkbox"
+              checked={protectFaces}
+              onChange={(e) => setProtectFaces(e.target.checked)}
+              className="rounded"
+            />
+            Protect faces
+          </label>
+
+          {/* Blur radius */}
+          <div>
+            <div className="flex items-center justify-between">
+              <label htmlFor="blur-radius" className="text-xs text-muted-foreground">
+                Smoothing
+              </label>
+              <span className="text-xs tabular-nums text-muted-foreground">{blurRadius}</span>
+            </div>
+            <input
+              id="blur-radius"
+              type="range"
+              min={0}
+              max={20}
+              value={blurRadius}
+              onChange={(e) => setBlurRadius(Number(e.target.value))}
+              className="w-full mt-1 h-1.5 rounded-full appearance-none bg-muted accent-primary"
+            />
+          </div>
+
+          {/* Sobel threshold */}
+          <div>
+            <div className="flex items-center justify-between">
+              <label htmlFor="sobel-threshold" className="text-xs text-muted-foreground">
+                Edge sensitivity
+              </label>
+              <span className="text-xs tabular-nums text-muted-foreground">{sobelThreshold}</span>
+            </div>
+            <input
+              id="sobel-threshold"
+              type="range"
+              min={1}
+              max={20}
+              value={sobelThreshold}
+              onChange={(e) => setSobelThreshold(Number(e.target.value))}
+              className="w-full mt-1 h-1.5 rounded-full appearance-none bg-muted accent-primary"
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 }