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/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>