Merge fix/131-content-aware-resize-registry: add frontend registry for content-aware resize

fix: add frontend registry entry for content-aware resize tool

Closes #131

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

@@ -0,0 +1,232 @@
+import { Download, Info } from "lucide-react";
+import { useCallback, 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";
+
+function HintIcon({ text }: { text: string }) {
+  return (
+    <span className="relative group">
+      <Info className="h-3 w-3 text-muted-foreground" />
+      <span className="pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-full mb-1.5 w-48 rounded bg-foreground px-2 py-1.5 text-[11px] leading-tight text-background opacity-0 transition-opacity group-hover:opacity-100 z-10">
+        {text}
+      </span>
+    </span>
+  );
+}
+
+export interface ContentAwareResizeControlsProps {
+  settings?: Record<string, unknown>;
+  onChange?: (settings: Record<string, unknown>) => void;
+}
+
+export function ContentAwareResizeControls({
+  settings: initialSettings,
+  onChange,
+}: ContentAwareResizeControlsProps) {
+  const [width, setWidth] = useState<string>("");
+  const [height, setHeight] = useState<string>("");
+  const [protectFaces, setProtectFaces] = useState(false);
+  const [blurRadius, setBlurRadius] = useState(4);
+  const [sobelThreshold, setSobelThreshold] = useState(2);
+  const [squareMode, setSquareMode] = useState(false);
+
+  const initializedRef = useRef(false);
+  useEffect(() => {
+    if (!initialSettings || initializedRef.current) return;
+    initializedRef.current = true;
+    if (initialSettings.width != null) setWidth(String(initialSettings.width));
+    if (initialSettings.height != null) setHeight(String(initialSettings.height));
+    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));
+  }, [initialSettings]);
+
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  });
+
+  useEffect(() => {
+    const settings: Record<string, unknown> = {};
+    if (!squareMode) {
+      if (width) settings.width = Number(width);
+      if (height) settings.height = Number(height);
+    }
+    settings.protectFaces = protectFaces;
+    settings.blurRadius = blurRadius;
+    settings.sobelThreshold = sobelThreshold;
+    settings.square = squareMode;
+    onChangeRef.current?.(settings);
+  }, [width, height, protectFaces, blurRadius, sobelThreshold, squareMode]);
+
+  return (
+    <div className="space-y-4">
+      {/* Dimensions */}
+      <div className="flex items-end gap-2">
+        <div className="flex-1">
+          <label htmlFor="car-width" className="text-xs text-muted-foreground">
+            Width (px)
+          </label>
+          <input
+            id="car-width"
+            type="number"
+            value={width}
+            onChange={(e) => setWidth(e.target.value)}
+            placeholder="Auto"
+            disabled={squareMode}
+            className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground disabled:opacity-50"
+          />
+        </div>
+        <div className="flex-1">
+          <label htmlFor="car-height" className="text-xs text-muted-foreground">
+            Height (px)
+          </label>
+          <input
+            id="car-height"
+            type="number"
+            value={height}
+            onChange={(e) => setHeight(e.target.value)}
+            placeholder="Auto"
+            disabled={squareMode}
+            className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground disabled:opacity-50"
+          />
+        </div>
+      </div>
+
+      {/* 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"
+        />
+        <span>Protect faces</span>
+        <HintIcon text="Detect and protect face regions from seam removal using face detection" />
+      </label>
+
+      {/* Blur radius */}
+      <div>
+        <div className="flex items-center justify-between">
+          <label htmlFor="car-blur-radius" className="text-xs text-muted-foreground">
+            Smoothing
+          </label>
+          <span className="text-xs tabular-nums text-muted-foreground">{blurRadius}</span>
+        </div>
+        <input
+          id="car-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="car-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="car-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>
+  );
+}
+
+export function ContentAwareResizeSettings() {
+  const { files } = useFileStore();
+  const { processFiles, processAllFiles, processing, error, downloadUrl, progress } =
+    useToolProcessor("content-aware-resize");
+  const [settings, setSettings] = useState<Record<string, unknown>>({});
+
+  const handleSettingsChange = useCallback((newSettings: Record<string, unknown>) => {
+    setSettings(newSettings);
+  }, []);
+
+  const handleProcess = () => {
+    if (files.length > 1) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
+    }
+  };
+
+  const hasFile = files.length > 0;
+  const canProcess =
+    hasFile &&
+    !processing &&
+    (Boolean(settings.width) || Boolean(settings.height) || Boolean(settings.square));
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (canProcess) handleProcess();
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <ContentAwareResizeControls onChange={handleSettingsChange} />
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label="Content-aware resizing"
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="submit"
+          data-testid="content-aware-resize-submit"
+          disabled={!canProcess}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+        >
+          {files.length > 1 ? `Resize (${files.length} files)` : "Resize"}
+        </button>
+      )}
+
+      {downloadUrl && (
+        <a
+          href={downloadUrl}
+          download
+          data-testid="content-aware-resize-download"
+          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
+        >
+          <Download className="h-4 w-4" />
+          Download
+        </a>
+      )}
+    </form>
+  );
+}

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

@@ -72,6 +72,11 @@ export interface ToolRegistryEntry {
 const ResizeSettings = lazy(() =>
   import("@/components/tools/resize-settings").then((m) => ({ default: m.ResizeSettings })),
 );
+const ContentAwareResizeSettings = lazy(() =>
+  import("@/components/tools/content-aware-resize-settings").then((m) => ({
+    default: m.ContentAwareResizeSettings,
+  })),
+);
 const CropSettings = lazy(() =>
   import("@/components/tools/crop-settings").then((m) => ({ default: m.CropSettings })),
 );
@@ -457,6 +462,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 }],
+  ["content-aware-resize", { displayMode: "side-by-side", Settings: ContentAwareResizeSettings }],
 ]);
 
 export function getToolRegistryEntry(toolId: string): ToolRegistryEntry | undefined {

tests/e2e/content-aware-resize.spec.ts

@@ -33,6 +33,37 @@ async function enableContentAware(page: import("@playwright/test").Page) {
 }
 
 test.describe("Content-Aware Resize", () => {
+  test("direct /content-aware-resize route loads tool page (regression #131)", async ({
+    loggedInPage: page,
+  }) => {
+    await page.goto("/content-aware-resize");
+
+    // Must NOT show "Tool not found"
+    await expect(page.getByText("Tool not found")).not.toBeVisible();
+
+    // Must show the tool name and content-aware controls
+    await expect(page.getByText("Content-Aware Resize")).toBeVisible();
+    await expect(page.getByText("Resize to square")).toBeVisible();
+    await expect(page.getByText("Protect faces")).toBeVisible();
+    await expect(page.getByText("Smoothing")).toBeVisible();
+    await expect(page.getByText("Edge sensitivity")).toBeVisible();
+  });
+
+  test("direct route submit disabled without file", async ({ loggedInPage: page }) => {
+    await page.goto("/content-aware-resize");
+    await expect(page.getByTestId("content-aware-resize-submit")).toBeDisabled();
+  });
+
+  test("direct route submit enables with width and file", async ({ loggedInPage: page }) => {
+    await page.goto("/content-aware-resize");
+    await uploadFile(page, fixturePath("test-200x150.png"));
+
+    const widthInput = page.locator("input[placeholder='Auto']").first();
+    await widthInput.fill("150");
+
+    await expect(page.getByTestId("content-aware-resize-submit")).toBeEnabled();
+  });
+
   test("content-aware toggle reveals seam carving controls", async ({ loggedInPage: page }) => {
     await page.goto("/resize");
 

tests/unit/web/tool-registry.test.ts

@@ -163,11 +163,18 @@ vi.mock("@/components/tools/red-eye-removal-settings", () => ({
 vi.mock("@/components/tools/restore-photo-settings", () => ({
   RestorePhotoSettings: () => null,
 }));
+vi.mock("@/components/tools/transparency-fixer-settings", () => ({
+  TransparencyFixerSettings: () => null,
+}));
+vi.mock("@/components/tools/content-aware-resize-settings", () => ({
+  ContentAwareResizeSettings: () => null,
+}));
 
 // ---------------------------------------------------------------------------
 // Import after mocks
 // ---------------------------------------------------------------------------
 
+import { TOOLS } from "@snapotter/shared";
 import type { DisplayMode } from "@/lib/tool-registry";
 import { getToolRegistryEntry, toolRegistry } from "@/lib/tool-registry";
 
@@ -211,6 +218,7 @@ describe("toolRegistry", () => {
       "passport-photo",
       "red-eye-removal",
       "restore-photo",
+      "content-aware-resize",
     ];
     for (const id of aiTools) {
       expect(toolRegistry.has(id), `missing AI tool: ${id}`).toBe(true);
@@ -324,6 +332,19 @@ describe("toolRegistry", () => {
     const split = toolRegistry.get("split");
     expect(split?.displayMode).toBe("interactive-split");
   });
+
+  it("every tool in shared TOOLS[] has a matching registry entry", () => {
+    const missing: string[] = [];
+    for (const tool of TOOLS) {
+      if (!toolRegistry.has(tool.id)) {
+        missing.push(tool.id);
+      }
+    }
+    expect(
+      missing,
+      `Tools defined in TOOLS[] but missing from toolRegistry: ${missing.join(", ")}`,
+    ).toEqual([]);
+  });
 });
 
 // ==========================================================================
@@ -360,6 +381,13 @@ describe("getToolRegistryEntry", () => {
     expect(entry?.displayMode).toBe("no-dropzone");
     expect(entry?.ResultsPanel).toBeDefined();
   });
+
+  it("returns entry for content-aware-resize with side-by-side display (regression #131)", () => {
+    const entry = getToolRegistryEntry("content-aware-resize");
+    expect(entry).toBeDefined();
+    expect(entry?.displayMode).toBe("side-by-side");
+    expect(entry?.Settings).toBeDefined();
+  });
 });
 
 // ==========================================================================