From 46bb09f03aa64a4578e447dfb44a50d7599c19f3 Mon Sep 17 00:00:00 2001
From: SnapOtter <snapotter.hq@gmail.com>
Date: Sat, 6 Jun 2026 21:51:43 +0800
Subject: [PATCH] fix: resolve CI lint and test failures

- Apply biome formatting fixes to web app components
- Add required S3 credentials to loadEnv test when STORAGE_MODE=s3
- Update bento-grid test tool counts from 52 to 53 for html-to-image
---
 .../components/common/file-library-modal.tsx  |  4 ++-
 .../editor/options/transform-options.tsx      | 11 +++++++-
 .../components/editor/tools/brush-tool.tsx    | 28 +++++++++++++++----
 scripts/generate-license.mjs                  |  4 ++-
 tests/unit/api/utilities.test.ts              |  6 ++++
 tests/unit/landing/bento-grid.test.tsx        | 16 +++++------
 6 files changed, 52 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/components/common/file-library-modal.tsx b/apps/web/src/components/common/file-library-modal.tsx
index 46da53ac..05ccadb9 100644
--- a/apps/web/src/components/common/file-library-modal.tsx
+++ b/apps/web/src/components/common/file-library-modal.tsx
@@ -153,7 +153,9 @@ export function FileLibraryModal({ open, onClose, onImport }: FileLibraryModalPr
         {/* Header */}
         <div className="flex items-center gap-3 px-4 py-3 border-b border-border shrink-0">
           <FolderOpen className="h-5 w-5 text-primary" />
-          <h2 className="text-sm font-semibold text-foreground flex-1">{t.automate.importFromLibrary}</h2>
+          <h2 className="text-sm font-semibold text-foreground flex-1">
+            {t.automate.importFromLibrary}
+          </h2>
           <button
             type="button"
             onClick={onClose}
diff --git a/apps/web/src/components/editor/options/transform-options.tsx b/apps/web/src/components/editor/options/transform-options.tsx
index d2a7818b..fe44d9aa 100644
--- a/apps/web/src/components/editor/options/transform-options.tsx
+++ b/apps/web/src/components/editor/options/transform-options.tsx
@@ -55,7 +55,16 @@ function NumericInput({
 }
 
 export function TransformOptions({ api }: { api: TransformToolApi }) {
-  const { values, lockedAspect, setLockedAspect, setValues, flipHorizontal, flipVertical, applyTransform, cancelTransform } = api;
+  const {
+    values,
+    lockedAspect,
+    setLockedAspect,
+    setValues,
+    flipHorizontal,
+    flipVertical,
+    applyTransform,
+    cancelTransform,
+  } = api;
 
   return (
     <div className="flex items-center gap-3">
diff --git a/apps/web/src/components/editor/tools/brush-tool.tsx b/apps/web/src/components/editor/tools/brush-tool.tsx
index 9b833aa5..0e4f291b 100644
--- a/apps/web/src/components/editor/tools/brush-tool.tsx
+++ b/apps/web/src/components/editor/tools/brush-tool.tsx
@@ -18,8 +18,16 @@ export function useBrushTool() {
     const stage = e.target.getStage();
     if (!stage) return;
 
-    const { activeTool, foregroundColor, brushSize, brushOpacity, brushHardness, brushFlow, zoom, panOffset } =
-      useEditorStore.getState();
+    const {
+      activeTool,
+      foregroundColor,
+      brushSize,
+      brushOpacity,
+      brushHardness,
+      brushFlow,
+      zoom,
+      panOffset,
+    } = useEditorStore.getState();
 
     if (activeTool !== "brush" && activeTool !== "pencil") return;
 
@@ -32,8 +40,12 @@ export function useBrushTool() {
     const { selection } = useEditorStore.getState();
     if (selection) {
       const { bounds } = selection;
-      if (x < bounds.x || x > bounds.x + bounds.width ||
-          y < bounds.y || y > bounds.y + bounds.height) {
+      if (
+        x < bounds.x ||
+        x > bounds.x + bounds.width ||
+        y < bounds.y ||
+        y > bounds.y + bounds.height
+      ) {
         return;
       }
     }
@@ -85,8 +97,12 @@ export function useBrushTool() {
     const { selection } = useEditorStore.getState();
     if (selection) {
       const { bounds } = selection;
-      if (x < bounds.x || x > bounds.x + bounds.width ||
-          y < bounds.y || y > bounds.y + bounds.height) {
+      if (
+        x < bounds.x ||
+        x > bounds.x + bounds.width ||
+        y < bounds.y ||
+        y > bounds.y + bounds.height
+      ) {
         return;
       }
     }
diff --git a/scripts/generate-license.mjs b/scripts/generate-license.mjs
index 8b941af2..9a80b1fa 100644
--- a/scripts/generate-license.mjs
+++ b/scripts/generate-license.mjs
@@ -49,7 +49,9 @@ if (command === "keygen") {
   }
 
   if (!existsSync(PRIVATE_KEY_PATH)) {
-    console.error(`Private key not found at ${PRIVATE_KEY_PATH}. Run 'generate-license.mjs keygen' first.`);
+    console.error(
+      `Private key not found at ${PRIVATE_KEY_PATH}. Run 'generate-license.mjs keygen' first.`,
+    );
     process.exit(1);
   }
 
diff --git a/tests/unit/api/utilities.test.ts b/tests/unit/api/utilities.test.ts
index 5c110611..9fc713af 100644
--- a/tests/unit/api/utilities.test.ts
+++ b/tests/unit/api/utilities.test.ts
@@ -1029,6 +1029,9 @@ describe("loadEnv", () => {
     process.env.DEFAULT_USERNAME = "root";
     process.env.DEFAULT_PASSWORD = "s3cret!";
     process.env.STORAGE_MODE = "s3";
+    process.env.S3_BUCKET = "my-bucket";
+    process.env.S3_ACCESS_KEY_ID = "AKIAIOSFODNN7EXAMPLE";
+    process.env.S3_SECRET_ACCESS_KEY = "wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY";
     process.env.DEFAULT_THEME = "dark";
     process.env.MAX_BATCH_SIZE = "500";
     const { loadEnv } = await import("../../../apps/api/src/lib/env.js");
@@ -1038,6 +1041,9 @@ describe("loadEnv", () => {
     expect(env.DEFAULT_USERNAME).toBe("root");
     expect(env.DEFAULT_PASSWORD).toBe("s3cret!");
     expect(env.STORAGE_MODE).toBe("s3");
+    expect(env.S3_BUCKET).toBe("my-bucket");
+    expect(env.S3_ACCESS_KEY_ID).toBe("AKIAIOSFODNN7EXAMPLE");
+    expect(env.S3_SECRET_ACCESS_KEY).toBe("wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY");
     expect(env.DEFAULT_THEME).toBe("dark");
     expect(env.MAX_BATCH_SIZE).toBe(500);
   });
diff --git a/tests/unit/landing/bento-grid.test.tsx b/tests/unit/landing/bento-grid.test.tsx
index 5dd16511..fb720420 100644
--- a/tests/unit/landing/bento-grid.test.tsx
+++ b/tests/unit/landing/bento-grid.test.tsx
@@ -36,12 +36,12 @@ describe("BentoGrid", () => {
   it("shows all tools by default", () => {
     render(<BentoGrid />);
     const text = getCountText();
-    expect(text).toMatch(/Showing 52 of 52 tools/);
+    expect(text).toMatch(/Showing 53 of 53 tools/);
   });
 
   it("renders category filter pills including All", () => {
     render(<BentoGrid />);
-    expect(screen.getByText((_, el) => el?.textContent === "All (52)")).toBeDefined();
+    expect(screen.getByText((_, el) => el?.textContent === "All (53)")).toBeDefined();
     expect(screen.getByText(/Essentials/)).toBeDefined();
     expect(screen.getByText(/AI Tools/)).toBeDefined();
     expect(screen.getByText(/Optimization/)).toBeDefined();
@@ -53,7 +53,7 @@ describe("BentoGrid", () => {
     fireEvent.change(input, { target: { value: "resize" } });
     expect(screen.getByText("Resize")).toBeDefined();
     const text = getCountText();
-    expect(text).toMatch(/Showing \d+ of 52 tools/);
+    expect(text).toMatch(/Showing \d+ of 53 tools/);
     expect(screen.queryByText("OCR / Text Extraction")).toBeNull();
   });
 
@@ -62,7 +62,7 @@ describe("BentoGrid", () => {
     const aiButton = screen.getByText(/AI Tools/);
     fireEvent.click(aiButton);
     const text = getCountText();
-    expect(text).toMatch(/Showing 16 of 52 tools/);
+    expect(text).toMatch(/Showing 16 of 53 tools/);
     expect(screen.getByText("Remove Background")).toBeDefined();
     expect(screen.queryByText("Resize")).toBeNull();
   });
@@ -73,7 +73,7 @@ describe("BentoGrid", () => {
     fireEvent.change(input, { target: { value: "xyznonexistent" } });
     expect(screen.getByText("No tools found. Try a different search.")).toBeDefined();
     const text = getCountText();
-    expect(text).toMatch(/Showing 0 of 52 tools/);
+    expect(text).toMatch(/Showing 0 of 53 tools/);
   });
 
   it("combines search and category filter", () => {
@@ -89,9 +89,9 @@ describe("BentoGrid", () => {
   it("clicking All resets category filter", () => {
     render(<BentoGrid />);
     fireEvent.click(screen.getByText(/AI Tools/));
-    expect(getCountText()).toMatch(/Showing 16 of 52 tools/);
-    fireEvent.click(screen.getByText((_, el) => el?.textContent === "All (52)"));
-    expect(getCountText()).toMatch(/Showing 52 of 52 tools/);
+    expect(getCountText()).toMatch(/Showing 16 of 53 tools/);
+    fireEvent.click(screen.getByText((_, el) => el?.textContent === "All (53)"));
+    expect(getCountText()).toMatch(/Showing 53 of 53 tools/);
   });
 
   it("renders each tool with name and description", () => {