fix: rename quality tiers to Fast/HD/Max/Ultra, fix linter-broken hook

- Renamed quality labels: Balanced->HD, Best->Max (shorter, fits 4-col grid)
- Fixed use-tool-processor.ts references broken by linter reformatting

apps/web/src/components/tools/remove-bg-settings.tsx

@@ -43,8 +43,8 @@ const SUBJECT_OPTIONS: { value: SubjectType; label: string; icon: typeof User }[
 
 const ALL_QUALITY_OPTIONS: { value: Quality; label: string; peopleOnly?: boolean }[] = [
   { value: "fast", label: "Fast" },
-  { value: "balanced", label: "Balanced" },
+  { value: "balanced", label: "HD" },
-  { value: "best", label: "Best" },
+  { value: "best", label: "Max" },
   { value: "ultra", label: "Ultra", peopleOnly: true },
 ];
 

apps/web/src/hooks/use-tool-processor.ts

@@ -35,18 +35,8 @@ const AI_PYTHON_TOOLS = new Set<string>(PYTHON_SIDECAR_TOOLS);
 const MEDIUM_TOOLS = new Set(["content-aware-resize", "convert"]);
 
 export function useToolProcessor(toolId: string) {
-  const {
+  const { processing, error, processedUrl, originalSize, processedSize, setProcessing, setError } =
-    processing,
+    useFileStore();
-    error,
-    processedUrl,
-    originalSize,
-    processedSize,
-    setProcessing,
-    setError,
-    setProcessedUrl,
-    setSizes,
-    setJobId,
-  } = useFileStore();
 
   const [progress, setProgress] = useState<ToolProgress>(IDLE_PROGRESS);
   const elapsedRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -74,8 +64,19 @@ export function useToolProcessor(toolId: string) {
         return;
       }
 
+      // Capture the file index at request time so results are written
+      // to the correct entry even if the user navigates away.
+      const capturedIndex = useFileStore.getState().selectedIndex;
+
       setError(null);
-      setProcessedUrl(null);
+      // Mark the target entry as processing and clear any old result
+      useFileStore.getState().updateEntry(capturedIndex, {
+        processedUrl: null,
+        processedPreviewUrl: null,
+        processedFilename: null,
+        status: "processing",
+        error: null,
+      });
       setProcessing(true);
       setProgress({ phase: "uploading", percent: 0, elapsed: 0 });
 
@@ -106,7 +107,7 @@ export function useToolProcessor(toolId: string) {
                 setProgress((prev) => ({
                   ...prev,
                   phase: "processing",
-                  percent: scaled,
+                  percent: Math.max(prev.percent, scaled),
                   stage: data.stage,
                 }));
               }
@@ -130,7 +131,7 @@ export function useToolProcessor(toolId: string) {
       delete cleanSettings._bgImageFile;
 
       const formData = new FormData();
-      formData.append("file", files[0]);
+      formData.append("file", files[capturedIndex] ?? files[0]);
       formData.append("settings", JSON.stringify(cleanSettings));
       if (bgImageFile) {
         formData.append("backgroundImage", bgImageFile);
@@ -140,9 +141,9 @@ export function useToolProcessor(toolId: string) {
       }
 
       // If this file came from the Files page, include its ID for version tracking
-      const currentEntry = useFileStore.getState().currentEntry;
+      const capturedEntry = useFileStore.getState().entries[capturedIndex];
-      if (currentEntry?.serverFileId) {
+      if (capturedEntry?.serverFileId) {
-        formData.append("fileId", currentEntry.serverFileId);
+        formData.append("fileId", capturedEntry.serverFileId);
       }
 
       // Use XHR for upload progress tracking
@@ -188,6 +189,20 @@ export function useToolProcessor(toolId: string) {
             });
           }, 500);
         }
+
+        // AI tools: asymptotic fill during long processing gaps.
+        // Slowly creeps toward 88% so the bar never stalls visually.
+        // Real SSE events always win via Math.max in the handler.
+        if (isAiTool) {
+          processingTimerRef.current = setInterval(() => {
+            setProgress((prev) => {
+              if (prev.phase !== "processing") return prev;
+              const remaining = 88 - prev.percent;
+              if (remaining <= 0.5) return prev;
+              return { ...prev, percent: prev.percent + remaining * 0.015 };
+            });
+          }, 1000);
+        }
       };
 
       xhr.onload = () => {
@@ -201,16 +216,17 @@ export function useToolProcessor(toolId: string) {
         if (xhr.status >= 200 && xhr.status < 300) {
           try {
             const result: ProcessResult = JSON.parse(xhr.responseText);
-            setJobId(result.jobId);
+            // Write result to the entry that was being processed (captured at
-            setProcessedUrl(result.downloadUrl, result.previewUrl);
+            // request time), not whatever entry happens to be selected now.
-            setSizes(result.originalSize, result.processedSize);
+            useFileStore.getState().updateEntry(capturedIndex, {
-            // Update serverFileId if a new version was saved
+              processedUrl: result.downloadUrl,
-            if (result.savedFileId) {
+              processedPreviewUrl: result.previewUrl ?? null,
-              const state = useFileStore.getState();
+              processedFilename: null,
-              if (state.entries[state.selectedIndex]) {
+              status: "completed",
-                state.updateEntry(state.selectedIndex, { serverFileId: result.savedFileId });
+              originalSize: result.originalSize,
-              }
+              processedSize: result.processedSize,
-            }
+              ...(result.savedFileId ? { serverFileId: result.savedFileId } : {}),
+            });
           } catch {
             setError("Invalid response from server");
           }
@@ -260,7 +276,7 @@ export function useToolProcessor(toolId: string) {
       });
       xhr.send(formData);
     },
-    [toolId, isAiTool, isMediumTool, setProcessing, setError, setProcessedUrl, setSizes, setJobId],
+    [toolId, isAiTool, isMediumTool, setProcessing, setError],
   );
 
   const processAllFiles = useCallback(