Merge feat/transparency-fixer: add PNG Transparency Fixer tool

New AI-powered tool that fixes fake transparent PNGs in one click.
Uses BiRefNet HR-matting (2048x2048) with Sharp defringe post-processing.

apps/web/src/components/features/feature-install-prompt.tsx

@@ -1,5 +1,5 @@
 import type { FeatureBundleState } from "@snapotter/shared";
-import { AlertCircle, Download, Loader2, RotateCcw } from "lucide-react";
+import { AlertCircle, Clock, Download, Loader2, RotateCcw } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useFeaturesStore } from "@/stores/features-store";
 
@@ -46,14 +46,17 @@ function formatTimeRemaining(ms: number): string {
 interface FeatureInstallPromptProps {
   bundle: FeatureBundleState;
   isAdmin: boolean;
+  toolName?: string;
 }
 
-export function FeatureInstallPrompt({ bundle, isAdmin }: FeatureInstallPromptProps) {
-  const { installBundle, clearError, installing, errors, startTimes } = useFeaturesStore();
+export function FeatureInstallPrompt({ bundle, isAdmin, toolName }: FeatureInstallPromptProps) {
+  const { installBundle, clearError, installing, errors, startTimes, queued } = useFeaturesStore();
   const progress = installing[bundle.id] ?? null;
   const error = errors[bundle.id] ?? null;
   const isInstalling = !!progress;
+  const isQueued = queued.includes(bundle.id);
   const startTime = startTimes[bundle.id] ?? null;
+  const displayName = toolName || bundle.name;
 
   const [messageIndex, setMessageIndex] = useState(() =>
     Math.floor(Math.random() * PROGRESS_MESSAGES.length),
@@ -99,7 +102,7 @@ export function FeatureInstallPrompt({ bundle, isAdmin }: FeatureInstallPromptPr
     <div className="flex flex-col items-center justify-center h-full gap-6 text-center px-4">
       <Download className="h-16 w-16 text-muted-foreground" />
       <div className="space-y-2">
-        <h2 className="text-xl font-semibold text-foreground">{bundle.name}</h2>
+        <h2 className="text-xl font-semibold text-foreground">{displayName}</h2>
         <p className="text-muted-foreground max-w-md">{bundle.description}</p>
         <p className="text-sm text-muted-foreground">
           This feature requires an additional download (~{bundle.estimatedSize})
@@ -139,13 +142,20 @@ export function FeatureInstallPrompt({ bundle, isAdmin }: FeatureInstallPromptPr
         </div>
       )}
 
-      {!isInstalling && !error && (
+      {isQueued && (
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <Clock className="h-5 w-5" />
+          <span className="text-sm font-medium">Queued for installation...</span>
+        </div>
+      )}
+
+      {!isInstalling && !error && !isQueued && (
         <button
           type="button"
           onClick={handleInstall}
           className="px-6 py-2.5 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 font-medium"
         >
-          Enable {bundle.name}
+          Enable {displayName}
         </button>
       )}
     </div>

apps/web/src/components/settings/settings-dialog.tsx

@@ -2535,7 +2535,7 @@ function AboutSection() {
           </div>
         </div>
         <p className="text-sm text-muted-foreground">
-          A self-hosted, privacy-first image processing suite with 47 tools. Resize, compress,
+          A self-hosted, privacy-first image processing suite with 48 tools. Resize, compress,
           convert, watermark, and automate your image workflows without sending data to the cloud.
         </p>
         <div className="flex items-center gap-4 text-sm">

apps/web/src/components/tools/transparency-fixer-settings.tsx

@@ -0,0 +1,140 @@
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { useFileStore } from "@/stores/file-store";
+
+type OutputFormat = "png" | "webp";
+
+// ── Shared controls (used by both standalone page and pipeline steps) ──
+
+export interface TransparencyFixerControlsProps {
+  settings: Record<string, unknown>;
+  onChange: (settings: Record<string, unknown>) => void;
+}
+
+export function TransparencyFixerControls({
+  settings: _settings,
+  onChange,
+}: TransparencyFixerControlsProps) {
+  const [defringe, setDefringe] = useState(30);
+  const [outputFormat, setOutputFormat] = useState<OutputFormat>("png");
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  });
+
+  // Sync settings on every control change
+  useEffect(() => {
+    onChangeRef.current({ defringe, outputFormat });
+  }, [defringe, outputFormat]);
+
+  return (
+    <div className="space-y-3">
+      <p className="text-xs text-muted-foreground">
+        Upload a PNG with a fake transparent background and we'll fix it in one click.
+      </p>
+
+      {/* Advanced toggle */}
+      <button
+        type="button"
+        onClick={() => setAdvancedOpen(!advancedOpen)}
+        className="flex items-center gap-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70 hover:text-foreground w-full pt-1"
+      >
+        {advancedOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+        Advanced
+      </button>
+
+      {advancedOpen && (
+        <div className="space-y-3 pl-1">
+          {/* Defringe slider */}
+          <div>
+            <div className="flex justify-between items-center">
+              <span className="text-xs text-muted-foreground">Defringe</span>
+              <span className="text-xs font-mono text-foreground tabular-nums w-8 text-right">
+                {defringe}
+              </span>
+            </div>
+            <input
+              type="range"
+              min={0}
+              max={100}
+              value={defringe}
+              onChange={(e) => setDefringe(Number(e.target.value))}
+              className="w-full mt-0.5"
+            />
+          </div>
+
+          {/* Output Format dropdown */}
+          <div>
+            <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70 mb-1">
+              Output Format
+            </p>
+            <select
+              value={outputFormat}
+              onChange={(e) => setOutputFormat(e.target.value as OutputFormat)}
+              className="px-2 py-1.5 rounded-lg border border-border bg-background text-xs text-foreground"
+            >
+              <option value="png">PNG</option>
+              <option value="webp">WebP</option>
+            </select>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Standalone tool page wrapper ──
+
+export function TransparencyFixerSettings() {
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, progress } =
+    useToolProcessor("transparency-fixer");
+  const [settings, setSettings] = useState<Record<string, unknown>>({});
+
+  const handleProcess = () => {
+    if (files.length > 1) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  const hasFile = files.length > 0;
+  const hasMultiple = files.length > 1;
+
+  return (
+    <div className="space-y-4">
+      <TransparencyFixerControls settings={settings} onChange={setSettings} />
+
+      {/* Error */}
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {/* Process button / progress */}
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label={
+            hasMultiple ? `Fixing transparency (${files.length} files)` : "Fixing transparency"
+          }
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="transparency-fixer-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {hasMultiple ? `Fix Transparency (${files.length} files)` : "Fix Transparency"}
+        </button>
+      )}
+    </div>
+  );
+}

apps/web/src/lib/tool-registry.tsx

@@ -298,6 +298,11 @@ const RestorePhotoSettings = lazy(() =>
     default: m.RestorePhotoSettings,
   })),
 );
+const TransparencyFixerSettings = lazy(() =>
+  import("@/components/tools/transparency-fixer-settings").then((m) => ({
+    default: m.TransparencyFixerSettings,
+  })),
+);
 
 // ── Color tool wrapper ─────────────────────────────────────────────
 // Color tools share a single component but differ by toolId.
@@ -451,6 +456,7 @@ export const toolRegistry = new Map<string, ToolRegistryEntry>([
   ],
   ["red-eye-removal", { displayMode: "before-after", Settings: RedEyeRemovalSettings }],
   ["restore-photo", { displayMode: "before-after", Settings: RestorePhotoSettings }],
+  ["transparency-fixer", { displayMode: "before-after", Settings: TransparencyFixerSettings }],
 ]);
 
 export function getToolRegistryEntry(toolId: string): ToolRegistryEntry | undefined {

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

@@ -292,7 +292,7 @@ export function ToolPage() {
   if (isAiTool && !toolInstalled && featureBundle) {
     return (
       <AppLayout>
-        <FeatureInstallPrompt bundle={featureBundle} isAdmin={isAdmin} />
+        <FeatureInstallPrompt bundle={featureBundle} isAdmin={isAdmin} toolName={tool?.name} />
       </AppLayout>
     );
   }