From c4dd55ace0cc51b6d2f9e203cf0a874602f10551 Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Mon, 20 Apr 2026 21:46:46 +0800
Subject: [PATCH 01/15] feat: add connection state store with health polling

---
 apps/web/src/stores/connection-store.ts |  86 ++++++++++++++++++++
 tests/unit/web/connection-store.test.ts | 101 ++++++++++++++++++++++++
 2 files changed, 187 insertions(+)
 create mode 100644 apps/web/src/stores/connection-store.ts
 create mode 100644 tests/unit/web/connection-store.test.ts

diff --git a/apps/web/src/stores/connection-store.ts b/apps/web/src/stores/connection-store.ts
new file mode 100644
index 00000000..cb9159e9
--- /dev/null
+++ b/apps/web/src/stores/connection-store.ts
@@ -0,0 +1,86 @@
+import { create } from "zustand";
+
+type ConnectionStatus = "connected" | "disconnected" | "reconnected" | "offline";
+
+interface ConnectionState {
+  status: ConnectionStatus;
+  failedSince: number | null;
+  lastHealthCheck: number | null;
+
+  setDisconnected: () => void;
+  setOffline: () => void;
+  setOnline: () => void;
+  checkHealth: () => Promise<void>;
+  startPolling: () => void;
+  stopPolling: () => void;
+  refreshStaleData: () => Promise<void>;
+}
+
+let pollingInterval: ReturnType<typeof setInterval> | null = null;
+
+export const useConnectionStore = create<ConnectionState>((set, get) => ({
+  status: "connected",
+  failedSince: null,
+  lastHealthCheck: null,
+
+  setDisconnected: () => {
+    const current = get();
+    if (current.status === "disconnected") return;
+    set({
+      status: "disconnected",
+      failedSince: current.failedSince ?? Date.now(),
+    });
+  },
+
+  setOffline: () => {
+    set({ status: "offline", failedSince: get().failedSince ?? Date.now() });
+  },
+
+  setOnline: () => {
+    if (get().status !== "offline") return;
+    set({ status: "disconnected" });
+  },
+
+  checkHealth: async () => {
+    try {
+      const res = await fetch("/api/v1/health");
+      if (res.ok) {
+        const current = get().status;
+        if (current === "disconnected" || current === "offline") {
+          set({ status: "reconnected", lastHealthCheck: Date.now(), failedSince: null });
+        } else {
+          set({ lastHealthCheck: Date.now() });
+        }
+      }
+    } catch {
+      if (get().status === "connected") {
+        get().setDisconnected();
+      }
+    }
+  },
+
+  startPolling: () => {
+    if (pollingInterval) return;
+    pollingInterval = setInterval(() => {
+      get().checkHealth();
+    }, 3000);
+  },
+
+  stopPolling: () => {
+    if (pollingInterval) {
+      clearInterval(pollingInterval);
+      pollingInterval = null;
+    }
+  },
+
+  refreshStaleData: async () => {
+    const { useSettingsStore } = await import("@/stores/settings-store");
+    const { useFeaturesStore } = await import("@/stores/features-store");
+
+    useSettingsStore.setState({ loaded: false });
+    await Promise.allSettled([
+      useSettingsStore.getState().fetch(),
+      useFeaturesStore.getState().refresh(),
+    ]);
+  },
+}));
diff --git a/tests/unit/web/connection-store.test.ts b/tests/unit/web/connection-store.test.ts
new file mode 100644
index 00000000..601d435a
--- /dev/null
+++ b/tests/unit/web/connection-store.test.ts
@@ -0,0 +1,101 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const fetchMock = vi.fn();
+vi.stubGlobal("fetch", fetchMock);
+
+import { useConnectionStore } from "@/stores/connection-store";
+
+function okHealth() {
+  return Promise.resolve(new Response(JSON.stringify({ status: "healthy" }), { status: 200 }));
+}
+
+function failHealth() {
+  return Promise.reject(new TypeError("Failed to fetch"));
+}
+
+describe("connection-store", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    useConnectionStore.setState({
+      status: "connected",
+      failedSince: null,
+      lastHealthCheck: null,
+    });
+    fetchMock.mockReset();
+  });
+
+  afterEach(() => {
+    useConnectionStore.getState().stopPolling();
+    vi.useRealTimers();
+  });
+
+  it("starts in connected state", () => {
+    expect(useConnectionStore.getState().status).toBe("connected");
+  });
+
+  it("transitions to disconnected on setDisconnected", () => {
+    useConnectionStore.getState().setDisconnected();
+    const state = useConnectionStore.getState();
+    expect(state.status).toBe("disconnected");
+    expect(state.failedSince).toBeTypeOf("number");
+  });
+
+  it("does not overwrite failedSince on repeated setDisconnected calls", () => {
+    useConnectionStore.getState().setDisconnected();
+    const first = useConnectionStore.getState().failedSince;
+    useConnectionStore.getState().setDisconnected();
+    expect(useConnectionStore.getState().failedSince).toBe(first);
+  });
+
+  it("transitions to offline on setOffline", () => {
+    useConnectionStore.getState().setOffline();
+    expect(useConnectionStore.getState().status).toBe("offline");
+  });
+
+  it("transitions from offline to disconnected on setOnline", () => {
+    useConnectionStore.getState().setOffline();
+    useConnectionStore.getState().setOnline();
+    expect(useConnectionStore.getState().status).toBe("disconnected");
+  });
+
+  it("checkHealth transitions disconnected → reconnected on success", async () => {
+    fetchMock.mockImplementation(okHealth);
+    useConnectionStore.getState().setDisconnected();
+    await useConnectionStore.getState().checkHealth();
+    expect(useConnectionStore.getState().status).toBe("reconnected");
+    expect(useConnectionStore.getState().lastHealthCheck).toBeTypeOf("number");
+  });
+
+  it("checkHealth stays disconnected on failure", async () => {
+    fetchMock.mockImplementation(failHealth);
+    useConnectionStore.getState().setDisconnected();
+    await useConnectionStore.getState().checkHealth();
+    expect(useConnectionStore.getState().status).toBe("disconnected");
+  });
+
+  it("checkHealth is a no-op when already connected", async () => {
+    fetchMock.mockImplementation(okHealth);
+    await useConnectionStore.getState().checkHealth();
+    expect(useConnectionStore.getState().status).toBe("connected");
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("startPolling is idempotent", () => {
+    useConnectionStore.getState().setDisconnected();
+    useConnectionStore.getState().startPolling();
+    useConnectionStore.getState().startPolling();
+    fetchMock.mockImplementation(failHealth);
+    vi.advanceTimersByTime(3000);
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("stopPolling clears the interval", () => {
+    useConnectionStore.getState().setDisconnected();
+    fetchMock.mockImplementation(failHealth);
+    useConnectionStore.getState().startPolling();
+    useConnectionStore.getState().stopPolling();
+    vi.advanceTimersByTime(6000);
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+});

From 2ba7520dd443c90224ecf826122e516c489b595c Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Mon, 20 Apr 2026 21:49:22 +0800
Subject: [PATCH 02/15] fix: handle non-ok HTTP responses in connection store
 checkHealth
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

checkHealth previously ignored non-ok responses (e.g. 503), silently
doing nothing when the server reported unhealthy. Add else branch to
transition connected → disconnected on non-ok status. Add tests for
connected → disconnected on fetch failure and offline → reconnected
on health check success.
---
 apps/web/src/stores/connection-store.ts |  4 ++++
 tests/unit/web/connection-store.test.ts | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/apps/web/src/stores/connection-store.ts b/apps/web/src/stores/connection-store.ts
index cb9159e9..3dff6e46 100644
--- a/apps/web/src/stores/connection-store.ts
+++ b/apps/web/src/stores/connection-store.ts
@@ -51,6 +51,10 @@ export const useConnectionStore = create<ConnectionState>((set, get) => ({
         } else {
           set({ lastHealthCheck: Date.now() });
         }
+      } else {
+        if (get().status === "connected") {
+          get().setDisconnected();
+        }
       }
     } catch {
       if (get().status === "connected") {
diff --git a/tests/unit/web/connection-store.test.ts b/tests/unit/web/connection-store.test.ts
index 601d435a..4527e894 100644
--- a/tests/unit/web/connection-store.test.ts
+++ b/tests/unit/web/connection-store.test.ts
@@ -81,6 +81,24 @@ describe("connection-store", () => {
     expect(fetchMock).toHaveBeenCalledTimes(1);
   });
 
+  it("checkHealth transitions connected → disconnected on fetch failure", async () => {
+    fetchMock.mockImplementation(failHealth);
+    expect(useConnectionStore.getState().status).toBe("connected");
+    await useConnectionStore.getState().checkHealth();
+    expect(useConnectionStore.getState().status).toBe("disconnected");
+    expect(useConnectionStore.getState().failedSince).toBeTypeOf("number");
+  });
+
+  it("checkHealth transitions offline → reconnected on success", async () => {
+    fetchMock.mockImplementation(okHealth);
+    useConnectionStore.getState().setOffline();
+    expect(useConnectionStore.getState().status).toBe("offline");
+    await useConnectionStore.getState().checkHealth();
+    expect(useConnectionStore.getState().status).toBe("reconnected");
+    expect(useConnectionStore.getState().failedSince).toBeNull();
+    expect(useConnectionStore.getState().lastHealthCheck).toBeTypeOf("number");
+  });
+
   it("startPolling is idempotent", () => {
     useConnectionStore.getState().setDisconnected();
     useConnectionStore.getState().startPolling();

From 1ad916448a579afa54c792e6938db89a53eecd29 Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Mon, 20 Apr 2026 21:53:46 +0800
Subject: [PATCH 03/15] test: add checkHealth non-ok HTTP response coverage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The checkHealth method handles non-ok responses (e.g. 503) but only
network-level errors had test coverage. Add nonOkHealth helper and
test to verify connected → disconnected transition on HTTP 503.
---
 tests/unit/web/connection-store.test.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/tests/unit/web/connection-store.test.ts b/tests/unit/web/connection-store.test.ts
index 4527e894..94538ee4 100644
--- a/tests/unit/web/connection-store.test.ts
+++ b/tests/unit/web/connection-store.test.ts
@@ -14,6 +14,10 @@ function failHealth() {
   return Promise.reject(new TypeError("Failed to fetch"));
 }
 
+function nonOkHealth() {
+  return Promise.resolve(new Response(null, { status: 503 }));
+}
+
 describe("connection-store", () => {
   beforeEach(() => {
     vi.useFakeTimers();
@@ -81,6 +85,13 @@ describe("connection-store", () => {
     expect(fetchMock).toHaveBeenCalledTimes(1);
   });
 
+  it("checkHealth transitions connected → disconnected on non-ok response", async () => {
+    fetchMock.mockImplementation(nonOkHealth);
+    expect(useConnectionStore.getState().status).toBe("connected");
+    await useConnectionStore.getState().checkHealth();
+    expect(useConnectionStore.getState().status).toBe("disconnected");
+  });
+
   it("checkHealth transitions connected → disconnected on fetch failure", async () => {
     fetchMock.mockImplementation(failHealth);
     expect(useConnectionStore.getState().status).toBe("connected");

From d40d7b38473ea6d8e863b83cb6959a8b661935da Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Mon, 20 Apr 2026 21:56:08 +0800
Subject: [PATCH 04/15] feat: add lazyWithRetry for chunk load failure recovery

---
 apps/web/src/lib/lazy-with-retry.ts    | 34 +++++++++++++++++++++
 tests/unit/web/lazy-with-retry.test.ts | 42 ++++++++++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 apps/web/src/lib/lazy-with-retry.ts
 create mode 100644 tests/unit/web/lazy-with-retry.test.ts

diff --git a/apps/web/src/lib/lazy-with-retry.ts b/apps/web/src/lib/lazy-with-retry.ts
new file mode 100644
index 00000000..96d95d92
--- /dev/null
+++ b/apps/web/src/lib/lazy-with-retry.ts
@@ -0,0 +1,34 @@
+import { type ComponentType, lazy } from "react";
+
+function isChunkError(error: unknown): boolean {
+  if (!(error instanceof Error)) return false;
+  const msg = error.message.toLowerCase();
+  return (
+    msg.includes("dynamically imported module") ||
+    msg.includes("loading chunk") ||
+    msg.includes("loading css chunk") ||
+    msg.includes("failed to fetch")
+  );
+}
+
+export async function retryDynamicImport<T>(
+  importFn: () => Promise<T>,
+  retries = 3,
+  delay = 1000,
+): Promise<T> {
+  for (let attempt = 1; attempt <= retries; attempt++) {
+    try {
+      return await importFn();
+    } catch (error) {
+      if (!isChunkError(error) || attempt === retries) throw error;
+      await new Promise((resolve) => setTimeout(resolve, delay));
+    }
+  }
+  throw new Error("unreachable");
+}
+
+export function lazyWithRetry<T extends ComponentType<unknown>>(
+  importFn: () => Promise<{ default: T }>,
+): React.LazyExoticComponent<T> {
+  return lazy(() => retryDynamicImport(importFn));
+}
diff --git a/tests/unit/web/lazy-with-retry.test.ts b/tests/unit/web/lazy-with-retry.test.ts
new file mode 100644
index 00000000..86b4af30
--- /dev/null
+++ b/tests/unit/web/lazy-with-retry.test.ts
@@ -0,0 +1,42 @@
+// @vitest-environment jsdom
+import { describe, expect, it, vi } from "vitest";
+
+import { retryDynamicImport } from "@/lib/lazy-with-retry";
+
+describe("retryDynamicImport", () => {
+  it("resolves on first success", async () => {
+    const mod = { default: () => null };
+    const importFn = vi.fn().mockResolvedValue(mod);
+    const result = await retryDynamicImport(importFn);
+    expect(result).toBe(mod);
+    expect(importFn).toHaveBeenCalledTimes(1);
+  });
+
+  it("retries on failure and resolves on eventual success", async () => {
+    const mod = { default: () => null };
+    const importFn = vi
+      .fn()
+      .mockRejectedValueOnce(new TypeError("Failed to fetch dynamically imported module"))
+      .mockRejectedValueOnce(new TypeError("Failed to fetch dynamically imported module"))
+      .mockResolvedValue(mod);
+    const result = await retryDynamicImport(importFn, 3, 0);
+    expect(result).toBe(mod);
+    expect(importFn).toHaveBeenCalledTimes(3);
+  });
+
+  it("rejects after all retries exhausted", async () => {
+    const err = new TypeError("Failed to fetch dynamically imported module");
+    const importFn = vi.fn().mockRejectedValue(err);
+    await expect(retryDynamicImport(importFn, 3, 0)).rejects.toThrow(
+      "Failed to fetch dynamically imported module",
+    );
+    expect(importFn).toHaveBeenCalledTimes(3);
+  });
+
+  it("only retries chunk-related errors, not other errors", async () => {
+    const err = new Error("Some other error");
+    const importFn = vi.fn().mockRejectedValue(err);
+    await expect(retryDynamicImport(importFn, 3, 0)).rejects.toThrow("Some other error");
+    expect(importFn).toHaveBeenCalledTimes(1);
+  });
+});

From 1e9453366b1aa039406d5f2107357d98cc8fe227 Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Mon, 20 Apr 2026 22:00:27 +0800
Subject: [PATCH 05/15] feat: add connection status banner component

---
 .../components/common/connection-banner.tsx   | 40 +++++++++++++++
 tests/unit/web/connection-banner.test.ts      | 49 +++++++++++++++++++
 vitest.config.ts                              |  7 +++
 3 files changed, 96 insertions(+)
 create mode 100644 apps/web/src/components/common/connection-banner.tsx
 create mode 100644 tests/unit/web/connection-banner.test.ts

diff --git a/apps/web/src/components/common/connection-banner.tsx b/apps/web/src/components/common/connection-banner.tsx
new file mode 100644
index 00000000..f48aaa82
--- /dev/null
+++ b/apps/web/src/components/common/connection-banner.tsx
@@ -0,0 +1,40 @@
+import { CheckCircle2, Loader2, WifiOff } from "lucide-react";
+import { useConnectionStore } from "@/stores/connection-store";
+
+export function ConnectionBanner() {
+  const status = useConnectionStore((s) => s.status);
+
+  if (status === "connected") return null;
+
+  const config = {
+    disconnected: {
+      bg: "bg-amber-500 dark:bg-amber-600",
+      text: "text-amber-950 dark:text-amber-50",
+      icon: <Loader2 className="h-4 w-4 animate-spin" />,
+      message: "Reconnecting to server\u2026",
+    },
+    offline: {
+      bg: "bg-amber-500 dark:bg-amber-600",
+      text: "text-amber-950 dark:text-amber-50",
+      icon: <WifiOff className="h-4 w-4" />,
+      message: "You\u2019re offline",
+    },
+    reconnected: {
+      bg: "bg-emerald-500 dark:bg-emerald-600",
+      text: "text-emerald-950 dark:text-emerald-50",
+      icon: <CheckCircle2 className="h-4 w-4" />,
+      message: "Connected",
+    },
+  }[status];
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className={`fixed top-0 left-0 right-0 z-[60] flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium transition-transform duration-300 ${config.bg} ${config.text}`}
+    >
+      {config.icon}
+      {config.message}
+    </div>
+  );
+}
diff --git a/tests/unit/web/connection-banner.test.ts b/tests/unit/web/connection-banner.test.ts
new file mode 100644
index 00000000..0930f42b
--- /dev/null
+++ b/tests/unit/web/connection-banner.test.ts
@@ -0,0 +1,49 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+vi.stubGlobal("fetch", vi.fn());
+
+import { useConnectionStore } from "@/stores/connection-store";
+
+describe("ConnectionBanner", () => {
+  afterEach(() => {
+    useConnectionStore.setState({ status: "connected", failedSince: null, lastHealthCheck: null });
+  });
+
+  it("renders nothing when connected", async () => {
+    const { renderBanner } = await setupRender();
+    useConnectionStore.setState({ status: "connected" });
+    const { container } = renderBanner();
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders amber banner when disconnected", async () => {
+    const { renderBanner } = await setupRender();
+    useConnectionStore.setState({ status: "disconnected" });
+    const { container } = renderBanner();
+    expect(container.textContent).toContain("Reconnecting to server");
+  });
+
+  it("renders offline banner when offline", async () => {
+    const { renderBanner } = await setupRender();
+    useConnectionStore.setState({ status: "offline" });
+    const { container } = renderBanner();
+    expect(container.textContent).toContain("offline");
+  });
+
+  it("renders green banner when reconnected", async () => {
+    const { renderBanner } = await setupRender();
+    useConnectionStore.setState({ status: "reconnected" });
+    const { container } = renderBanner();
+    expect(container.textContent).toContain("Connected");
+  });
+});
+
+async function setupRender() {
+  const React = await import("react");
+  const { render } = await import("@testing-library/react");
+  const { ConnectionBanner } = await import("@/components/common/connection-banner");
+  return {
+    renderBanner: () => render(React.createElement(ConnectionBanner)),
+  };
+}
diff --git a/vitest.config.ts b/vitest.config.ts
index 9262f11e..d07ba580 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -6,6 +6,9 @@ import { defineConfig } from "vitest/config";
 // Resolve api-workspace packages that pnpm only exposes under apps/api/node_modules.
 const apiNodeModules = path.resolve(__dirname, "apps/api/node_modules");
 
+// Resolve web-workspace packages that pnpm only exposes under apps/web/node_modules.
+const webNodeModules = path.resolve(__dirname, "apps/web/node_modules");
+
 // Temp dir for integration test DB + workspace (set BEFORE any app code loads)
 const testDir = path.join(os.tmpdir(), `ashim-test-${crypto.randomUUID().slice(0, 8)}`);
 
@@ -88,6 +91,10 @@ export default defineConfig({
       jsqr: path.join(apiNodeModules, "jsqr"),
       pdfkit: path.join(apiNodeModules, "pdfkit"),
       sharp: path.join(apiNodeModules, "sharp"),
+      // Map web-only dependencies so component tests can resolve them
+      // from the root vitest runner.
+      react: path.join(webNodeModules, "react"),
+      "react-dom": path.join(webNodeModules, "react-dom"),
     },
   },
 });

From 6602818cdf015a28af7a8b39d948c8ff43d20b5a Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Mon, 20 Apr 2026 22:02:17 +0800
Subject: [PATCH 06/15] feat: add connection monitor hook for reactive failure
 detection

---
 apps/web/src/hooks/use-connection-monitor.ts | 48 ++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 apps/web/src/hooks/use-connection-monitor.ts

diff --git a/apps/web/src/hooks/use-connection-monitor.ts b/apps/web/src/hooks/use-connection-monitor.ts
new file mode 100644
index 00000000..35df2bac
--- /dev/null
+++ b/apps/web/src/hooks/use-connection-monitor.ts
@@ -0,0 +1,48 @@
+import { useEffect } from "react";
+import { useConnectionStore } from "@/stores/connection-store";
+
+export function useConnectionMonitor() {
+  useEffect(() => {
+    const store = useConnectionStore;
+
+    const handleOffline = () => store.getState().setOffline();
+    const handleOnline = () => {
+      store.getState().setOnline();
+      store.getState().startPolling();
+    };
+
+    window.addEventListener("offline", handleOffline);
+    window.addEventListener("online", handleOnline);
+
+    store.getState().checkHealth();
+
+    const unsubscribe = store.subscribe((state, prev) => {
+      if (state.status === prev.status) return;
+
+      if (state.status === "disconnected") {
+        store.getState().startPolling();
+      }
+
+      if (state.status === "reconnected") {
+        store.getState().stopPolling();
+        store.getState().refreshStaleData();
+        setTimeout(() => {
+          if (store.getState().status === "reconnected") {
+            store.setState({ status: "connected" });
+          }
+        }, 2500);
+      }
+
+      if (state.status === "offline") {
+        store.getState().stopPolling();
+      }
+    });
+
+    return () => {
+      window.removeEventListener("offline", handleOffline);
+      window.removeEventListener("online", handleOnline);
+      store.getState().stopPolling();
+      unsubscribe();
+    };
+  }, []);
+}

From 4cb1a35f10936d440f63054cc79d96ab0756a3c6 Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Mon, 20 Apr 2026 22:03:58 +0800
Subject: [PATCH 07/15] feat: wire connection banner, monitor, and
 lazyWithRetry into App

---
 apps/web/src/App.tsx | 90 ++++++++++++++++++++++++++++++++++++--------
 1 file changed, 75 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 38c51240..eb6f8992 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -1,39 +1,55 @@
-import { Component, type ErrorInfo, lazy, type ReactNode, Suspense } from "react";
+import { Component, type ErrorInfo, type ReactNode, Suspense } from "react";
 import { BrowserRouter, Navigate, Route, Routes, useLocation } from "react-router-dom";
 import { Toaster } from "sonner";
+import { ConnectionBanner } from "./components/common/connection-banner";
 import { KeyboardShortcutProvider } from "./components/common/keyboard-shortcut-provider";
 import { useAuth } from "./hooks/use-auth";
+import { useConnectionMonitor } from "./hooks/use-connection-monitor";
+import { lazyWithRetry } from "./lib/lazy-with-retry";
 
-// Lazy-load all pages so each page's JS (and its icons/deps) is only
-// downloaded when the user navigates there, shrinking the main bundle.
-const AutomatePage = lazy(() =>
+// Lazy-load all pages with automatic retry so chunk failures from
+// deployments are recovered transparently instead of white-screening.
+const AutomatePage = lazyWithRetry(() =>
   import("./pages/automate-page").then((m) => ({ default: m.AutomatePage })),
 );
-const ChangePasswordPage = lazy(() =>
+const ChangePasswordPage = lazyWithRetry(() =>
   import("./pages/change-password-page").then((m) => ({ default: m.ChangePasswordPage })),
 );
-const FilesPage = lazy(() => import("./pages/files-page").then((m) => ({ default: m.FilesPage })));
-const FullscreenGridPage = lazy(() =>
+const FilesPage = lazyWithRetry(() =>
+  import("./pages/files-page").then((m) => ({ default: m.FilesPage })),
+);
+const FullscreenGridPage = lazyWithRetry(() =>
   import("./pages/fullscreen-grid-page").then((m) => ({ default: m.FullscreenGridPage })),
 );
-const HomePage = lazy(() => import("./pages/home-page").then((m) => ({ default: m.HomePage })));
-const LoginPage = lazy(() => import("./pages/login-page").then((m) => ({ default: m.LoginPage })));
-const PrivacyPolicyPage = lazy(() =>
+const HomePage = lazyWithRetry(() =>
+  import("./pages/home-page").then((m) => ({ default: m.HomePage })),
+);
+const LoginPage = lazyWithRetry(() =>
+  import("./pages/login-page").then((m) => ({ default: m.LoginPage })),
+);
+const PrivacyPolicyPage = lazyWithRetry(() =>
   import("./pages/privacy-policy-page").then((m) => ({ default: m.PrivacyPolicyPage })),
 );
-const ToolPage = lazy(() => import("./pages/tool-page").then((m) => ({ default: m.ToolPage })));
+const ToolPage = lazyWithRetry(() =>
+  import("./pages/tool-page").then((m) => ({ default: m.ToolPage })),
+);
 
 class ErrorBoundary extends Component<
   { children: ReactNode },
-  { hasError: boolean; error: Error | null }
+  { hasError: boolean; error: Error | null; isChunkError: boolean }
 > {
   constructor(props: { children: ReactNode }) {
     super(props);
-    this.state = { hasError: false, error: null };
+    this.state = { hasError: false, error: null, isChunkError: false };
   }
 
   static getDerivedStateFromError(error: Error) {
-    return { hasError: true, error };
+    const msg = error.message.toLowerCase();
+    const isChunkError =
+      msg.includes("dynamically imported module") ||
+      msg.includes("loading chunk") ||
+      msg.includes("failed to fetch");
+    return { hasError: true, error, isChunkError };
   }
 
   componentDidCatch(error: Error, info: ErrorInfo) {
@@ -42,6 +58,43 @@ class ErrorBoundary extends Component<
 
   render() {
     if (this.state.hasError) {
+      if (this.state.isChunkError) {
+        return (
+          <div className="flex h-screen items-center justify-center bg-background text-foreground">
+            <div className="text-center space-y-4 max-w-md px-6">
+              <div className="mx-auto h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
+                <svg
+                  className="h-6 w-6 text-primary"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  role="img"
+                  aria-label="Refresh icon"
+                >
+                  <title>Refresh</title>
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                  />
+                </svg>
+              </div>
+              <h1 className="text-xl font-semibold">Update Available</h1>
+              <p className="text-sm text-muted-foreground">
+                A new version of ashim has been deployed.
+              </p>
+              <button
+                type="button"
+                onClick={() => window.location.reload()}
+                className="px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-medium"
+              >
+                Refresh
+              </button>
+            </div>
+          </div>
+        );
+      }
       return (
         <div className="flex h-screen items-center justify-center bg-background text-foreground">
           <div className="text-center space-y-4 max-w-md px-6">
@@ -52,7 +105,7 @@ class ErrorBoundary extends Component<
             <button
               type="button"
               onClick={() => {
-                this.setState({ hasError: false, error: null });
+                this.setState({ hasError: false, error: null, isChunkError: false });
                 window.location.href = "/";
               }}
               className="px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-medium"
@@ -112,9 +165,16 @@ function PageLoader() {
   );
 }
 
+function ConnectionMonitor() {
+  useConnectionMonitor();
+  return null;
+}
+
 export function App() {
   return (
     <ErrorBoundary>
+      <ConnectionMonitor />
+      <ConnectionBanner />
       <Toaster position="bottom-right" />
       <BrowserRouter>
         <KeyboardShortcutProvider>

From ec991c4a37117495256c032fbda8969fb7d98c62 Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Mon, 20 Apr 2026 22:06:39 +0800
Subject: [PATCH 08/15] feat: detect network errors in API client and trigger
 disconnected state

---
 apps/web/src/lib/api.ts       | 68 ++++++++++++++++++++++++++---------
 tests/unit/web/stores.test.ts | 34 ++++++++++++++++++
 2 files changed, 85 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/lib/api.ts b/apps/web/src/lib/api.ts
index e4a2a889..4a0fa5dd 100644
--- a/apps/web/src/lib/api.ts
+++ b/apps/web/src/lib/api.ts
@@ -1,3 +1,5 @@
+import { useConnectionStore } from "@/stores/connection-store";
+
 const API_BASE = "/api";
 
 export interface FeatureNotInstalledError {
@@ -74,9 +76,17 @@ async function throwWithMessage(res: Response): Promise<never> {
 }
 
 export async function apiGet<T>(path: string): Promise<T> {
-  const res = await fetch(`${API_BASE}${path}`, {
-    headers: formatHeaders(),
-  });
+  let res: Response;
+  try {
+    res = await fetch(`${API_BASE}${path}`, {
+      headers: formatHeaders(),
+    });
+  } catch (error) {
+    if (error instanceof TypeError) {
+      useConnectionStore.getState().setDisconnected();
+    }
+    throw error;
+  }
   if (!res.ok) await throwWithMessage(res);
   return res.json();
 }
@@ -84,30 +94,54 @@ export async function apiGet<T>(path: string): Promise<T> {
 export async function apiPost<T>(path: string, body?: unknown): Promise<T> {
   const headers =
     body !== undefined ? formatHeaders({ "Content-Type": "application/json" }) : formatHeaders();
-  const res = await fetch(`${API_BASE}${path}`, {
-    method: "POST",
-    headers,
-    body: body !== undefined ? JSON.stringify(body) : undefined,
-  });
+  let res: Response;
+  try {
+    res = await fetch(`${API_BASE}${path}`, {
+      method: "POST",
+      headers,
+      body: body !== undefined ? JSON.stringify(body) : undefined,
+    });
+  } catch (error) {
+    if (error instanceof TypeError) {
+      useConnectionStore.getState().setDisconnected();
+    }
+    throw error;
+  }
   if (!res.ok) await throwWithMessage(res);
   return res.json();
 }
 
 export async function apiPut<T>(path: string, body?: unknown): Promise<T> {
-  const res = await fetch(`${API_BASE}${path}`, {
-    method: "PUT",
-    headers: formatHeaders({ "Content-Type": "application/json" }),
-    body: body ? JSON.stringify(body) : undefined,
-  });
+  let res: Response;
+  try {
+    res = await fetch(`${API_BASE}${path}`, {
+      method: "PUT",
+      headers: formatHeaders({ "Content-Type": "application/json" }),
+      body: body ? JSON.stringify(body) : undefined,
+    });
+  } catch (error) {
+    if (error instanceof TypeError) {
+      useConnectionStore.getState().setDisconnected();
+    }
+    throw error;
+  }
   if (!res.ok) await throwWithMessage(res);
   return res.json();
 }
 
 export async function apiDelete<T>(path: string): Promise<T> {
-  const res = await fetch(`${API_BASE}${path}`, {
-    method: "DELETE",
-    headers: formatHeaders(),
-  });
+  let res: Response;
+  try {
+    res = await fetch(`${API_BASE}${path}`, {
+      method: "DELETE",
+      headers: formatHeaders(),
+    });
+  } catch (error) {
+    if (error instanceof TypeError) {
+      useConnectionStore.getState().setDisconnected();
+    }
+    throw error;
+  }
   if (!res.ok) await throwWithMessage(res);
   return res.json();
 }
diff --git a/tests/unit/web/stores.test.ts b/tests/unit/web/stores.test.ts
index 63edeced..5090b2c9 100644
--- a/tests/unit/web/stores.test.ts
+++ b/tests/unit/web/stores.test.ts
@@ -741,6 +741,40 @@ describe("API lib", () => {
     });
   });
 
+  // -- api network error → connection store ---------------------------------
+
+  describe("api network error → connection store", () => {
+    it("triggers disconnected state on TypeError from fetch", async () => {
+      const { useConnectionStore } = await import("@/stores/connection-store");
+      useConnectionStore.setState({
+        status: "connected",
+        failedSince: null,
+        lastHealthCheck: null,
+      });
+
+      fetchMock.mockRejectedValueOnce(new TypeError("Failed to fetch"));
+      await expect(apiGet("/v1/test")).rejects.toThrow("Failed to fetch");
+
+      expect(useConnectionStore.getState().status).toBe("disconnected");
+    });
+
+    it("does NOT trigger disconnected on HTTP errors", async () => {
+      const { useConnectionStore } = await import("@/stores/connection-store");
+      useConnectionStore.setState({
+        status: "connected",
+        failedSince: null,
+        lastHealthCheck: null,
+      });
+
+      fetchMock.mockResolvedValueOnce(
+        new Response(JSON.stringify({ error: "Not found" }), { status: 404 }),
+      );
+      await expect(apiGet("/v1/test")).rejects.toThrow();
+
+      expect(useConnectionStore.getState().status).toBe("connected");
+    });
+  });
+
   // -- Cross-cutting: token is read fresh on every call --------------------
 
   describe("token freshness", () => {

From 62f028eb3e316d42ce8eb394b356fe35119104b6 Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Mon, 20 Apr 2026 22:07:39 +0800
Subject: [PATCH 09/15] fix: stop granting admin access when API is unreachable

---
 apps/web/src/hooks/use-auth.ts | 95 +++++++++++++++++++---------------
 tests/unit/web/stores.test.ts  | 27 ++++++++++
 2 files changed, 79 insertions(+), 43 deletions(-)

diff --git a/apps/web/src/hooks/use-auth.ts b/apps/web/src/hooks/use-auth.ts
index de6f5ab9..173c2695 100644
--- a/apps/web/src/hooks/use-auth.ts
+++ b/apps/web/src/hooks/use-auth.ts
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { formatHeaders } from "@/lib/api";
+import { useConnectionStore } from "@/stores/connection-store";
 
 interface AuthState {
   loading: boolean;
@@ -36,35 +37,37 @@ export function useAuth() {
   });
 
   useEffect(() => {
+    let cancelled = false;
+
     async function checkAuth() {
       try {
-        // Check if auth is enabled
         const configRes = await fetch("/api/v1/config/auth");
         const config = await configRes.json();
 
         if (!config.authEnabled) {
-          setState({
-            loading: false,
-            authEnabled: false,
-            isAuthenticated: true,
-            mustChangePassword: false,
-            role: "admin",
-            permissions: ALL_PERMISSIONS,
-          });
+          if (!cancelled)
+            setState({
+              loading: false,
+              authEnabled: false,
+              isAuthenticated: true,
+              mustChangePassword: false,
+              role: "admin",
+              permissions: ALL_PERMISSIONS,
+            });
           return;
         }
 
-        // Auth is enabled — check if we have a valid session
         const token = localStorage.getItem("ashim-token");
         if (!token) {
-          setState({
-            loading: false,
-            authEnabled: true,
-            isAuthenticated: false,
-            mustChangePassword: false,
-            role: null,
-            permissions: [],
-          });
+          if (!cancelled)
+            setState({
+              loading: false,
+              authEnabled: true,
+              isAuthenticated: false,
+              mustChangePassword: false,
+              role: null,
+              permissions: [],
+            });
           return;
         }
 
@@ -75,39 +78,45 @@ export function useAuth() {
         if (sessionRes.ok) {
           const session = await sessionRes.json();
           const mustChange = session.user?.mustChangePassword === true;
-          setState({
-            loading: false,
-            authEnabled: true,
-            isAuthenticated: true,
-            mustChangePassword: mustChange,
-            role: session.user?.role ?? null,
-            permissions: session.user?.permissions ?? [],
-          });
+          if (!cancelled)
+            setState({
+              loading: false,
+              authEnabled: true,
+              isAuthenticated: true,
+              mustChangePassword: mustChange,
+              role: session.user?.role ?? null,
+              permissions: session.user?.permissions ?? [],
+            });
         } else {
           localStorage.removeItem("ashim-token");
-          setState({
-            loading: false,
-            authEnabled: true,
-            isAuthenticated: false,
-            mustChangePassword: false,
-            role: null,
-            permissions: [],
-          });
+          if (!cancelled)
+            setState({
+              loading: false,
+              authEnabled: true,
+              isAuthenticated: false,
+              mustChangePassword: false,
+              role: null,
+              permissions: [],
+            });
         }
       } catch {
-        // Can't reach API — assume no auth needed (dev mode)
-        setState({
-          loading: false,
-          authEnabled: false,
-          isAuthenticated: true,
-          mustChangePassword: false,
-          role: "admin",
-          permissions: ALL_PERMISSIONS,
-        });
+        // API unreachable — stay in loading state.
+        // ConnectionBanner explains the outage. AuthGuard shows spinner.
       }
     }
 
     checkAuth();
+
+    const unsubscribe = useConnectionStore.subscribe((curr, prev) => {
+      if (prev.status !== "reconnected" && curr.status === "reconnected") {
+        checkAuth();
+      }
+    });
+
+    return () => {
+      cancelled = true;
+      unsubscribe();
+    };
   }, []);
 
   const hasPermission = (permission: string) => state.permissions.includes(permission);
diff --git a/tests/unit/web/stores.test.ts b/tests/unit/web/stores.test.ts
index 5090b2c9..7d51e6d1 100644
--- a/tests/unit/web/stores.test.ts
+++ b/tests/unit/web/stores.test.ts
@@ -799,3 +799,30 @@ describe("API lib", () => {
     });
   });
 });
+
+// ==========================================================================
+// useAuth security
+// ==========================================================================
+
+describe("useAuth security — network error", () => {
+  beforeEach(() => {
+    fetchMock.mockReset();
+  });
+
+  it("does NOT grant admin when API is unreachable", async () => {
+    fetchMock.mockRejectedValue(new TypeError("Failed to fetch"));
+
+    const { renderHook, act } = await import("@testing-library/react");
+    const { useAuth } = await import("@/hooks/use-auth");
+
+    const { result } = renderHook(() => useAuth());
+
+    // Flush the async checkAuth() call
+    await act(async () => {});
+
+    // loading stays true — setState was never called
+    expect(result.current.loading).toBe(true);
+    expect(result.current.isAuthenticated).toBe(false);
+    expect(result.current.role).toBeNull();
+  });
+});

From 4593c3c13de4419decf5de7b9877d93e163ec697 Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Mon, 20 Apr 2026 22:07:58 +0800
Subject: [PATCH 10/15] fix: improve error message for interrupted tool
 processing

---
 apps/web/src/hooks/use-tool-processor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/hooks/use-tool-processor.ts b/apps/web/src/hooks/use-tool-processor.ts
index 95e47d41..ace4a612 100644
--- a/apps/web/src/hooks/use-tool-processor.ts
+++ b/apps/web/src/hooks/use-tool-processor.ts
@@ -261,7 +261,7 @@ export function useToolProcessor(toolId: string) {
           eventSourceRef.current.close();
           eventSourceRef.current = null;
         }
-        setError("Network error - check your connection");
+        setError("Processing was interrupted \u2014 retry when reconnected");
         setProcessing(false);
         setProgress(IDLE_PROGRESS);
       };

From 5e1159fa75f7e8f75478f8e750ecbbc1c26e3cb3 Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Mon, 20 Apr 2026 22:11:08 +0800
Subject: [PATCH 11/15] feat: offset layout padding when connection banner is
 visible

---
 apps/web/src/components/layout/app-layout.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/layout/app-layout.tsx b/apps/web/src/components/layout/app-layout.tsx
index 262f2bc1..0be32202 100644
--- a/apps/web/src/components/layout/app-layout.tsx
+++ b/apps/web/src/components/layout/app-layout.tsx
@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import { useMobile } from "@/hooks/use-mobile";
 import { apiGet } from "@/lib/api";
 import { cn } from "@/lib/utils";
+import { useConnectionStore } from "@/stores/connection-store";
 import { Dropzone } from "../common/dropzone";
 import { GemLogo } from "../common/gem-logo";
 import { HelpDialog } from "../help/help-dialog";
@@ -25,6 +26,8 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const isMobile = useMobile();
   const [customLogo, setCustomLogo] = useState(false);
+  const connectionStatus = useConnectionStore((s) => s.status);
+  const bannerVisible = connectionStatus !== "connected";
 
   useEffect(() => {
     apiGet<{ settings: Record<string, string> }>("/v1/settings")
@@ -33,7 +36,12 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
   }, []);
 
   return (
-    <div className="flex h-screen bg-background text-foreground overflow-hidden">
+    <div
+      className={cn(
+        "flex h-screen bg-background text-foreground overflow-hidden",
+        bannerVisible && "pt-9",
+      )}
+    >
       {/* Desktop sidebar */}
       {!isMobile && (
         <Sidebar
@@ -92,7 +100,12 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
 
       {/* Mobile top bar */}
       {isMobile && (
-        <div className="fixed top-0 left-0 right-0 z-30 bg-background/95 backdrop-blur-sm border-b border-border px-3 py-2 flex items-center gap-3">
+        <div
+          className={cn(
+            "fixed left-0 right-0 z-30 bg-background/95 backdrop-blur-sm border-b border-border px-3 py-2 flex items-center gap-3",
+            bannerVisible ? "top-9" : "top-0",
+          )}
+        >
           <button
             type="button"
             onClick={() => setMobileSidebarOpen(true)}

From da52088e3912158bdf55b299189d49b4bc8e169d Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Mon, 20 Apr 2026 22:18:27 +0800
Subject: [PATCH 12/15] =?UTF-8?q?fix:=20address=20code=20review=20?=
 =?UTF-8?q?=E2=80=94=20complete=20fetch=20coverage,=20refresh=20timing,=20?=
 =?UTF-8?q?dedupe=20chunk=20detection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/App.tsx                         |  9 +--
 apps/web/src/hooks/use-connection-monitor.ts | 16 +++--
 apps/web/src/lib/api.ts                      | 68 ++++++++++++++------
 apps/web/src/lib/lazy-with-retry.ts          |  2 +-
 4 files changed, 63 insertions(+), 32 deletions(-)

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index eb6f8992..20ea42d2 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -5,7 +5,7 @@ import { ConnectionBanner } from "./components/common/connection-banner";
 import { KeyboardShortcutProvider } from "./components/common/keyboard-shortcut-provider";
 import { useAuth } from "./hooks/use-auth";
 import { useConnectionMonitor } from "./hooks/use-connection-monitor";
-import { lazyWithRetry } from "./lib/lazy-with-retry";
+import { isChunkError, lazyWithRetry } from "./lib/lazy-with-retry";
 
 // Lazy-load all pages with automatic retry so chunk failures from
 // deployments are recovered transparently instead of white-screening.
@@ -44,12 +44,7 @@ class ErrorBoundary extends Component<
   }
 
   static getDerivedStateFromError(error: Error) {
-    const msg = error.message.toLowerCase();
-    const isChunkError =
-      msg.includes("dynamically imported module") ||
-      msg.includes("loading chunk") ||
-      msg.includes("failed to fetch");
-    return { hasError: true, error, isChunkError };
+    return { hasError: true, error, isChunkError: isChunkError(error) };
   }
 
   componentDidCatch(error: Error, info: ErrorInfo) {
diff --git a/apps/web/src/hooks/use-connection-monitor.ts b/apps/web/src/hooks/use-connection-monitor.ts
index 35df2bac..519caa90 100644
--- a/apps/web/src/hooks/use-connection-monitor.ts
+++ b/apps/web/src/hooks/use-connection-monitor.ts
@@ -25,12 +25,16 @@ export function useConnectionMonitor() {
 
       if (state.status === "reconnected") {
         store.getState().stopPolling();
-        store.getState().refreshStaleData();
-        setTimeout(() => {
-          if (store.getState().status === "reconnected") {
-            store.setState({ status: "connected" });
-          }
-        }, 2500);
+        store
+          .getState()
+          .refreshStaleData()
+          .finally(() => {
+            setTimeout(() => {
+              if (store.getState().status === "reconnected") {
+                store.setState({ status: "connected" });
+              }
+            }, 2500);
+          });
       }
 
       if (state.status === "offline") {
diff --git a/apps/web/src/lib/api.ts b/apps/web/src/lib/api.ts
index 4a0fa5dd..6d9dd242 100644
--- a/apps/web/src/lib/api.ts
+++ b/apps/web/src/lib/api.ts
@@ -162,11 +162,19 @@ export async function apiUpload(files: File[]): Promise<{
 }> {
   const formData = new FormData();
   for (const f of files) formData.append("files", f);
-  const res = await fetch("/api/v1/upload", {
-    method: "POST",
-    headers: formatHeaders(),
-    body: formData,
-  });
+  let res: Response;
+  try {
+    res = await fetch("/api/v1/upload", {
+      method: "POST",
+      headers: formatHeaders(),
+      body: formData,
+    });
+  } catch (error) {
+    if (error instanceof TypeError) {
+      useConnectionStore.getState().setDisconnected();
+    }
+    throw error;
+  }
   if (!res.ok) throw new Error(`Upload failed: ${res.status}`);
   return res.json();
 }
@@ -224,21 +232,37 @@ export async function apiUploadUserFiles(
 ): Promise<{ files: Array<{ id: string; originalName: string; size: number; version: number }> }> {
   const formData = new FormData();
   for (const f of files) formData.append("files", f);
-  const res = await fetch("/api/v1/files/upload", {
-    method: "POST",
-    headers: formatHeaders(),
-    body: formData,
-  });
+  let res: Response;
+  try {
+    res = await fetch("/api/v1/files/upload", {
+      method: "POST",
+      headers: formatHeaders(),
+      body: formData,
+    });
+  } catch (error) {
+    if (error instanceof TypeError) {
+      useConnectionStore.getState().setDisconnected();
+    }
+    throw error;
+  }
   if (!res.ok) throw new Error(`Upload failed: ${res.status}`);
   return res.json();
 }
 
 export async function apiDeleteUserFiles(ids: string[]): Promise<{ deleted: number }> {
-  const res = await fetch("/api/v1/files", {
-    method: "DELETE",
-    headers: formatHeaders({ "Content-Type": "application/json" }),
-    body: JSON.stringify({ ids }),
-  });
+  let res: Response;
+  try {
+    res = await fetch("/api/v1/files", {
+      method: "DELETE",
+      headers: formatHeaders({ "Content-Type": "application/json" }),
+      body: JSON.stringify({ ids }),
+    });
+  } catch (error) {
+    if (error instanceof TypeError) {
+      useConnectionStore.getState().setDisconnected();
+    }
+    throw error;
+  }
   if (!res.ok) throw new Error(`Delete failed: ${res.status}`);
   return res.json();
 }
@@ -252,9 +276,17 @@ export function getFileDownloadUrl(id: string): string {
 }
 
 export async function apiDownloadBlob(jobId: string, filename: string): Promise<Blob> {
-  const res = await fetch(getDownloadUrl(jobId, filename), {
-    headers: formatHeaders(),
-  });
+  let res: Response;
+  try {
+    res = await fetch(getDownloadUrl(jobId, filename), {
+      headers: formatHeaders(),
+    });
+  } catch (error) {
+    if (error instanceof TypeError) {
+      useConnectionStore.getState().setDisconnected();
+    }
+    throw error;
+  }
   if (!res.ok) throw new Error(`Download failed: ${res.status}`);
   return res.blob();
 }
diff --git a/apps/web/src/lib/lazy-with-retry.ts b/apps/web/src/lib/lazy-with-retry.ts
index 96d95d92..cc37950a 100644
--- a/apps/web/src/lib/lazy-with-retry.ts
+++ b/apps/web/src/lib/lazy-with-retry.ts
@@ -1,6 +1,6 @@
 import { type ComponentType, lazy } from "react";
 
-function isChunkError(error: unknown): boolean {
+export function isChunkError(error: unknown): boolean {
   if (!(error instanceof Error)) return false;
   const msg = error.message.toLowerCase();
   return (

From 70f9f3d51d189d73287064af6c60a6fd52623e20 Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Tue, 21 Apr 2026 00:01:59 +0800
Subject: [PATCH 13/15] fix: detect CSS preload errors and keep banner visible
 during error states

- Add "unable to preload" pattern to isChunkError for Vite CSS preload failures
- Move ConnectionMonitor and ConnectionBanner outside ErrorBoundary so they
  remain visible when the error boundary catches a render crash
- Add test for CSS preload error retry
---
 apps/web/src/App.tsx                   | 63 ++++++++++++++------------
 apps/web/src/lib/lazy-with-retry.ts    |  3 +-
 tests/unit/web/lazy-with-retry.test.ts | 13 ++++++
 3 files changed, 49 insertions(+), 30 deletions(-)

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 20ea42d2..3825071a 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -167,36 +167,41 @@ function ConnectionMonitor() {
 
 export function App() {
   return (
-    <ErrorBoundary>
+    <>
       <ConnectionMonitor />
       <ConnectionBanner />
-      <Toaster position="bottom-right" />
-      <BrowserRouter>
-        <KeyboardShortcutProvider>
-          <AuthGuard>
-            <Suspense fallback={<PageLoader />}>
-              <Routes>
-                <Route path="/login" element={<LoginPage />} />
-                <Route path="/change-password" element={<ChangePasswordPage />} />
-                <Route path="/automate" element={<AutomatePage />} />
-                <Route path="/files" element={<FilesPage />} />
-                <Route path="/fullscreen" element={<FullscreenGridPage />} />
-                <Route path="/privacy" element={<PrivacyPolicyPage />} />
-                {/* Redirects: old color tools consolidated into adjust-colors */}
-                <Route
-                  path="/brightness-contrast"
-                  element={<Navigate to="/adjust-colors" replace />}
-                />
-                <Route path="/saturation" element={<Navigate to="/adjust-colors" replace />} />
-                <Route path="/color-channels" element={<Navigate to="/adjust-colors" replace />} />
-                <Route path="/color-effects" element={<Navigate to="/adjust-colors" replace />} />
-                <Route path="/:toolId" element={<ToolPage />} />
-                <Route path="/" element={<HomePage />} />
-              </Routes>
-            </Suspense>
-          </AuthGuard>
-        </KeyboardShortcutProvider>
-      </BrowserRouter>
-    </ErrorBoundary>
+      <ErrorBoundary>
+        <Toaster position="bottom-right" />
+        <BrowserRouter>
+          <KeyboardShortcutProvider>
+            <AuthGuard>
+              <Suspense fallback={<PageLoader />}>
+                <Routes>
+                  <Route path="/login" element={<LoginPage />} />
+                  <Route path="/change-password" element={<ChangePasswordPage />} />
+                  <Route path="/automate" element={<AutomatePage />} />
+                  <Route path="/files" element={<FilesPage />} />
+                  <Route path="/fullscreen" element={<FullscreenGridPage />} />
+                  <Route path="/privacy" element={<PrivacyPolicyPage />} />
+                  {/* Redirects: old color tools consolidated into adjust-colors */}
+                  <Route
+                    path="/brightness-contrast"
+                    element={<Navigate to="/adjust-colors" replace />}
+                  />
+                  <Route path="/saturation" element={<Navigate to="/adjust-colors" replace />} />
+                  <Route
+                    path="/color-channels"
+                    element={<Navigate to="/adjust-colors" replace />}
+                  />
+                  <Route path="/color-effects" element={<Navigate to="/adjust-colors" replace />} />
+                  <Route path="/:toolId" element={<ToolPage />} />
+                  <Route path="/" element={<HomePage />} />
+                </Routes>
+              </Suspense>
+            </AuthGuard>
+          </KeyboardShortcutProvider>
+        </BrowserRouter>
+      </ErrorBoundary>
+    </>
   );
 }
diff --git a/apps/web/src/lib/lazy-with-retry.ts b/apps/web/src/lib/lazy-with-retry.ts
index cc37950a..54991c61 100644
--- a/apps/web/src/lib/lazy-with-retry.ts
+++ b/apps/web/src/lib/lazy-with-retry.ts
@@ -7,7 +7,8 @@ export function isChunkError(error: unknown): boolean {
     msg.includes("dynamically imported module") ||
     msg.includes("loading chunk") ||
     msg.includes("loading css chunk") ||
-    msg.includes("failed to fetch")
+    msg.includes("failed to fetch") ||
+    msg.includes("unable to preload")
   );
 }
 
diff --git a/tests/unit/web/lazy-with-retry.test.ts b/tests/unit/web/lazy-with-retry.test.ts
index 86b4af30..5703b65d 100644
--- a/tests/unit/web/lazy-with-retry.test.ts
+++ b/tests/unit/web/lazy-with-retry.test.ts
@@ -33,6 +33,19 @@ describe("retryDynamicImport", () => {
     expect(importFn).toHaveBeenCalledTimes(3);
   });
 
+  it("retries CSS preload errors", async () => {
+    const mod = { default: () => null };
+    const importFn = vi
+      .fn()
+      .mockRejectedValueOnce(
+        new TypeError("Unable to preload CSS for /assets/tool-page-DDbXBANV.css"),
+      )
+      .mockResolvedValue(mod);
+    const result = await retryDynamicImport(importFn, 3, 0);
+    expect(result).toBe(mod);
+    expect(importFn).toHaveBeenCalledTimes(2);
+  });
+
   it("only retries chunk-related errors, not other errors", async () => {
     const err = new Error("Some other error");
     const importFn = vi.fn().mockRejectedValue(err);

From a145ffdc68cedab6cb366274b7d971b03b184ffc Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Tue, 21 Apr 2026 00:06:46 +0800
Subject: [PATCH 14/15] fix: trigger disconnected state when chunk loads
 exhaust retries

When lazyWithRetry exhausts all retry attempts on a chunk error, also
call setDisconnected() so the reconnecting banner appears alongside the
ErrorBoundary's "Update Available" card.
---
 apps/web/src/lib/lazy-with-retry.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/lib/lazy-with-retry.ts b/apps/web/src/lib/lazy-with-retry.ts
index 54991c61..a450f5c2 100644
--- a/apps/web/src/lib/lazy-with-retry.ts
+++ b/apps/web/src/lib/lazy-with-retry.ts
@@ -1,4 +1,5 @@
 import { type ComponentType, lazy } from "react";
+import { useConnectionStore } from "@/stores/connection-store";
 
 export function isChunkError(error: unknown): boolean {
   if (!(error instanceof Error)) return false;
@@ -21,7 +22,12 @@ export async function retryDynamicImport<T>(
     try {
       return await importFn();
     } catch (error) {
-      if (!isChunkError(error) || attempt === retries) throw error;
+      if (!isChunkError(error) || attempt === retries) {
+        if (isChunkError(error)) {
+          useConnectionStore.getState().setDisconnected();
+        }
+        throw error;
+      }
       await new Promise((resolve) => setTimeout(resolve, delay));
     }
   }

From 1f9fa08002645cbb1b32177a772819235d08a600 Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Tue, 21 Apr 2026 09:24:10 +0800
Subject: [PATCH 15/15] fix: prevent polling leak when online event fires from
 connected state

Guard startPolling in handleOnline to only fire when transitioning from
offline state. Previously, a spurious browser online event while already
connected would start a polling interval that never gets cleared.
---
 apps/web/src/hooks/use-connection-monitor.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/hooks/use-connection-monitor.ts b/apps/web/src/hooks/use-connection-monitor.ts
index 519caa90..b4fb0177 100644
--- a/apps/web/src/hooks/use-connection-monitor.ts
+++ b/apps/web/src/hooks/use-connection-monitor.ts
@@ -7,8 +7,11 @@ export function useConnectionMonitor() {
 
     const handleOffline = () => store.getState().setOffline();
     const handleOnline = () => {
+      const prev = store.getState().status;
       store.getState().setOnline();
-      store.getState().startPolling();
+      if (prev === "offline") {
+        store.getState().startPolling();
+      }
     };
 
     window.addEventListener("offline", handleOffline);