shadow-claw 1.40.1 → 1.41.1

package/src/components/shadow-claw/shadow-claw.html

@@ -136,8 +136,12 @@
             <li class="nav-item" data-page="files">📁 Files</li>
           </ul>
         </nav>
+        <slot name="sidebar-nav"></slot>
+        <slot name="sidebar"></slot>
+        <slot name="sidebar-content"></slot>
         <div class="sidebar-spacer"></div>
         <shadow-claw-conversations></shadow-claw-conversations>
+        <slot name="sidebar-footer"></slot>
         <div class="sidebar-footer">
           <button class="settings-btn" data-action="show-settings">
             ⚙️ Settings

package/src/components/shadow-claw/utils/applyRoute.ts

@@ -2,6 +2,7 @@ import { DEFAULT_GROUP_ID } from "../../../config/config.js";
 
 import { applyAnchorWithRetry } from "./applyAnchorWithRetry.js";
 import { showPage } from "./showPage.js";
+import { syncSlottedSidebarActiveLinks } from "./syncSlottedSidebarActiveLinks.js";
 
 import type { ShadowClawDatabase } from "../../../db/types.js";
 import type { ShadowClawAppRoute } from "../../../core/app-routes.js";
@@ -139,4 +140,6 @@ export async function applyRoute(
       }
     }
   }
+
+  syncSlottedSidebarActiveLinks(shadowClaw);
 }

package/src/components/shadow-claw/utils/bindEventListeners.test.ts

@@ -817,6 +817,12 @@ describe("bindEventListeners", () => {
         oStore,
         new URL("https://example.com/files/main/"),
       );
+
+      // Verify that popstateListener does not call applyRouteFromCurrentLocation when inFeedScroll is true
+      mockApplyRouteFromCurrentLocation.mockClear();
+      (win as any).history = { state: { inFeedScroll: true } };
+      shadowClaw.popstateListener();
+      expect(mockApplyRouteFromCurrentLocation).not.toHaveBeenCalled();
     });
   });
 

package/src/components/shadow-claw/utils/bindEventListeners.ts

@@ -12,6 +12,7 @@ import { showPage } from "./showPage.js";
 import { supportsNavigationApi } from "./supportsNavigationApi.js";
 import { setupAppLifecycle } from "./setupAppLifecycle.js";
 import { syncPageHeaderMainVisibilityOverride } from "./syncPageHeaderMainVisibilityOverride.js";
+import { setupSlottedSidebarActiveLinks } from "./syncSlottedSidebarActiveLinks.js";
 
 import { toggleActivityLogVisibility } from "./toggleActivityLogVisibility.js";
 import { togglePageHeaderMainVisibility } from "./togglePageHeaderMainVisibility.js";
@@ -88,6 +89,28 @@ export function bindEventListeners(
       });
     });
 
+    sidebar.addEventListener("click", (e: Event) => {
+      const target = e.target as HTMLElement | null;
+      if (
+        win.innerWidth < 896 &&
+        target?.closest("a, button, .nav-item, .sidebar-link, .sidebar-item")
+      ) {
+        sidebar.classList.remove("open");
+      }
+    });
+
+    if (typeof (shadowClaw as any)?.addEventListener === "function") {
+      shadowClaw.addEventListener("click", (e: Event) => {
+        const target = e.target as HTMLElement | null;
+        if (
+          win.innerWidth < 896 &&
+          target?.closest('[slot^="sidebar"] a, .sidebar-custom-sections a')
+        ) {
+          sidebar.classList.remove("open");
+        }
+      });
+    }
+
     // Close sidebar when clicking outside of it (mobile only).
     // Use composedPath() instead of e.target because Shadow DOM event
     // retargeting makes e.target the host element at the doc level,
@@ -251,7 +274,11 @@ export function bindEventListeners(
 
     shadowClaw.navigationListenerAttached = true;
   } else {
-    shadowClaw.popstateListener = () => {
+    shadowClaw.popstateListener = (ev?: any) => {
+      const state = ev?.state || (win as any).history?.state;
+      if (state?.inFeedScroll || state?.scrollSpy || state?.suppressRouter) {
+        return;
+      }
       applyRouteFromCurrentLocation(
         shadow,
         shadowClaw,
@@ -312,4 +339,6 @@ export function bindEventListeners(
       shadowClaw.orchestrator,
     );
   }
+
+  setupSlottedSidebarActiveLinks(shadowClaw);
 }

package/src/components/shadow-claw/utils/getRoute.test.ts

@@ -93,4 +93,56 @@ describe("getRoute", () => {
 
     expect(result).toBeUndefined();
   });
+
+  it("returns undefined if destination state indicates an in-feed scroll", () => {
+    const navigateEvent = new Event("navigate") as any;
+    navigateEvent.navigationType = "replace";
+    navigateEvent.destination = {
+      url: `${window.location.origin}/test`,
+      getState: () => ({ inFeedScroll: true }),
+    };
+
+    const result = getRoute(db, navigateEvent);
+    expect(result).toBeUndefined();
+    expect(isPossibleAppRouteMock).not.toHaveBeenCalled();
+  });
+
+  it("returns undefined if window.history.state indicates an in-feed scroll", () => {
+    const origState = window.history.state;
+    try {
+      window.history.replaceState({ inFeedScroll: true }, "", "/test");
+      const navigateEvent = new Event("navigate") as any;
+      navigateEvent.navigationType = "replace";
+      navigateEvent.destination = {
+        url: `${window.location.origin}/test`,
+        getState: () => null,
+      };
+
+      const result = getRoute(db, navigateEvent);
+      expect(result).toBeUndefined();
+      expect(isPossibleAppRouteMock).not.toHaveBeenCalled();
+    } finally {
+      window.history.replaceState(origState, "", "/");
+    }
+  });
+
+  it("does not ignore push navigation even if window.history.state has inFeedScroll: true", () => {
+    const origState = window.history.state;
+    try {
+      window.history.replaceState({ inFeedScroll: true }, "", "/");
+      const navigateEvent = new Event("navigate") as any;
+      navigateEvent.navigationType = "push";
+      navigateEvent.destination = {
+        url: `${window.location.origin}/about`,
+        getState: () => null,
+      };
+
+      const result = getRoute(db, navigateEvent);
+      expect(result).toBeDefined();
+      expect(result?.parsedUrl.pathname).toBe("/about");
+      expect(isPossibleAppRouteMock).toHaveBeenCalledWith("/about");
+    } finally {
+      window.history.replaceState(origState, "", "/");
+    }
+  });
 });

package/src/components/shadow-claw/utils/getRoute.ts

@@ -11,6 +11,24 @@ export function getRoute(db: ShadowClawDatabase, ev: Event) {
     return;
   }
 
+  const destinationState =
+    typeof navigateEvent?.destination?.getState === "function"
+      ? navigateEvent.destination.getState()
+      : null;
+  const navState =
+    destinationState ||
+    (navigateEvent.navigationType === "replace" &&
+    typeof history !== "undefined"
+      ? history.state
+      : null);
+  if (
+    navState?.inFeedScroll ||
+    navState?.scrollSpy ||
+    navState?.suppressRouter
+  ) {
+    return;
+  }
+
   const destinationUrl = navigateEvent?.destination?.url;
   if (typeof destinationUrl !== "string") {
     return;

package/src/components/shadow-claw/utils/navigateToRoute.test.ts

@@ -111,4 +111,25 @@ describe("navigateToRoute", () => {
       route,
     );
   });
+
+  it("should applyRoute directly without calling nav.navigate if already at finalPath", async () => {
+    mockSupportsNavigationApi.mockReturnValue(true);
+    const origPathname = window.location.pathname;
+    try {
+      window.history.replaceState({}, "", "/base/chat");
+      await navigateToRoute(shadowRoot, shadowClaw, db, fStore, oStore, route);
+
+      expect(mockNav.navigate).not.toHaveBeenCalled();
+      expect(mockApplyRoute).toHaveBeenCalledWith(
+        shadowRoot,
+        shadowClaw,
+        db,
+        fStore,
+        oStore,
+        route,
+      );
+    } finally {
+      window.history.replaceState({}, "", origPathname);
+    }
+  });
 });

package/src/components/shadow-claw/utils/navigateToRoute.ts

@@ -21,6 +21,16 @@ export async function navigateToRoute(
   const targetPath = buildRoutePath(route);
   const finalPath = applyBasePath(targetPath);
 
+  const currentPath =
+    typeof window !== "undefined" && window.location
+      ? `${window.location.pathname}${window.location.search}${window.location.hash}`
+      : "";
+
+  if (currentPath && finalPath === currentPath) {
+    await applyRoute(shadow, shadowClaw, db, fStore, oStore, route);
+    return;
+  }
+
   if (supportsNavigationApi()) {
     const nav = (window as any).navigation;
 

package/src/components/shadow-claw/utils/sidebarVisibility.ts

@@ -34,12 +34,20 @@ export function applySidebarNavVisibility(
     `.nav-item[data-page="${page}"]`,
   ) as HTMLElement | null;
 
-  if (!navItem) {
-    return;
+  if (navItem) {
+    navItem.hidden = hidden;
+    navItem.setAttribute("aria-hidden", String(hidden));
   }
 
-  navItem.hidden = hidden;
-  navItem.setAttribute("aria-hidden", String(hidden));
+  if (page === "chat") {
+    const convoEl = shadow.querySelector(
+      "shadow-claw-conversations",
+    ) as HTMLElement | null;
+    if (convoEl) {
+      convoEl.hidden = hidden;
+      convoEl.setAttribute("aria-hidden", String(hidden));
+    }
+  }
 }
 
 /**

package/src/components/shadow-claw/utils/syncSlottedSidebarActiveLinks.test.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect, beforeEach } from "@jest/globals";
+import { syncSlottedSidebarActiveLinks } from "./syncSlottedSidebarActiveLinks.js";
+
+describe("syncSlottedSidebarActiveLinks", () => {
+  let host: HTMLElement;
+
+  beforeEach(() => {
+    host = document.createElement("div");
+    host.innerHTML = `
+      <div slot="sidebar" class="sidebar-custom-sections">
+        <a href="/" class="sidebar-link">Home</a>
+        <a href="/about" class="sidebar-link">About</a>
+        <a href="/portfolio" class="sidebar-link">Portfolio</a>
+        <a href="https://external.example.com" class="sidebar-link" target="_blank">External</a>
+      </div>
+    `;
+  });
+
+  it("marks matching internal link as active and sets aria-current='page'", () => {
+    const url = new URL("https://example.com/about");
+    syncSlottedSidebarActiveLinks(host, url);
+
+    const homeLink = host.querySelector('a[href="/"]');
+    const aboutLink = host.querySelector('a[href="/about"]');
+    const portfolioLink = host.querySelector('a[href="/portfolio"]');
+    const externalLink = host.querySelector(
+      'a[href="https://external.example.com"]',
+    );
+
+    expect(aboutLink?.classList.contains("active")).toBe(true);
+    expect(aboutLink?.getAttribute("aria-current")).toBe("page");
+
+    expect(homeLink?.classList.contains("active")).toBe(false);
+    expect(homeLink?.hasAttribute("aria-current")).toBe(false);
+
+    expect(portfolioLink?.classList.contains("active")).toBe(false);
+    expect(externalLink?.classList.contains("active")).toBe(false);
+  });
+
+  it("handles root path matching correctly with trailing slashes", () => {
+    const url = new URL("https://example.com/");
+    syncSlottedSidebarActiveLinks(host, url);
+
+    const homeLink = host.querySelector('a[href="/"]');
+    const aboutLink = host.querySelector('a[href="/about"]');
+
+    expect(homeLink?.classList.contains("active")).toBe(true);
+    expect(homeLink?.getAttribute("aria-current")).toBe("page");
+    expect(aboutLink?.classList.contains("active")).toBe(false);
+  });
+
+  it("never marks external links as active", () => {
+    const url = new URL("https://example.com/");
+    syncSlottedSidebarActiveLinks(host, url);
+
+    const externalLink = host.querySelector(
+      'a[href="https://external.example.com"]',
+    );
+    expect(externalLink?.classList.contains("active")).toBe(false);
+  });
+
+  it("handles hash links properly without activating sub-items on base route", () => {
+    host.innerHTML = `
+      <div slot="sidebar">
+        <a href="/portfolio" class="sidebar-link">Portfolio</a>
+        <a href="/portfolio#web-apps" class="sidebar-link">Web Apps</a>
+        <a href="/portfolio#corporate-sites" class="sidebar-link">Corporate Sites</a>
+      </div>
+    `;
+
+    // 1. Browsed to base /portfolio with no hash
+    const baseUrl = new URL("https://example.com/portfolio");
+    syncSlottedSidebarActiveLinks(host, baseUrl);
+
+    const portfolioLink = host.querySelector('a[href="/portfolio"]');
+    const webAppsLink = host.querySelector('a[href="/portfolio#web-apps"]');
+    const corporateLink = host.querySelector(
+      'a[href="/portfolio#corporate-sites"]',
+    );
+
+    expect(portfolioLink?.classList.contains("active")).toBe(true);
+    expect(webAppsLink?.classList.contains("active")).toBe(false);
+    expect(corporateLink?.classList.contains("active")).toBe(false);
+
+    // 2. Browsed to /portfolio#web-apps with hash
+    const hashUrl = new URL("https://example.com/portfolio#web-apps");
+    syncSlottedSidebarActiveLinks(host, hashUrl);
+
+    expect(portfolioLink?.classList.contains("active")).toBe(false);
+    expect(webAppsLink?.classList.contains("active")).toBe(true);
+    expect(corporateLink?.classList.contains("active")).toBe(false);
+  });
+});

package/src/components/shadow-claw/utils/syncSlottedSidebarActiveLinks.ts

@@ -0,0 +1,100 @@
+/**
+ * Sync active state on slotted sidebar navigation links.
+ */
+export function syncSlottedSidebarActiveLinks(
+  host: HTMLElement | null,
+  currentUrl?: URL,
+): void {
+  if (!host || typeof host.querySelectorAll !== "function") {
+    return;
+  }
+
+  const url =
+    currentUrl ||
+    (typeof window !== "undefined" && window.location?.href
+      ? new URL(window.location.href)
+      : null);
+  if (!url) {
+    return;
+  }
+
+  const currentPath = url.pathname.replace(/\/+$/, "") || "/";
+
+  // Select all links slotted into sidebar slots or in custom sections
+  const slottedLinks = host.querySelectorAll<HTMLAnchorElement>(
+    '[slot="sidebar"] a[href], [slot="sidebar-nav"] a[href], [slot="sidebar-content"] a[href], [slot="sidebar-footer"] a[href], .sidebar-custom-sections a[href]',
+  );
+
+  slottedLinks.forEach((link) => {
+    try {
+      const href = link.getAttribute("href") || "";
+      if (
+        !href ||
+        href.startsWith("#") ||
+        href.startsWith("javascript:") ||
+        href.startsWith("mailto:") ||
+        href.startsWith("tel:")
+      ) {
+        return;
+      }
+
+      const linkUrl = new URL(href, url.origin);
+      if (linkUrl.origin !== url.origin) {
+        link.classList.remove("active");
+        link.removeAttribute("aria-current");
+        return;
+      }
+
+      const linkPath = linkUrl.pathname.replace(/\/+$/, "") || "/";
+      const isPathMatch = linkPath === currentPath;
+      const isMatch =
+        isPathMatch && (linkUrl.hash ? linkUrl.hash === url.hash : !url.hash);
+
+      if (isMatch) {
+        link.classList.add("active");
+        link.setAttribute("aria-current", "page");
+      } else {
+        link.classList.remove("active");
+        link.removeAttribute("aria-current");
+      }
+    } catch {
+      // Ignore URL parsing errors
+    }
+  });
+}
+
+/**
+ * Sets up listeners so slotted sidebar active links stay in sync whenever
+ * the URL changes (popstate, Navigation API navigate, or iframe replaceState).
+ * Returns a cleanup function to remove the listeners.
+ */
+export function setupSlottedSidebarActiveLinks(
+  host: HTMLElement | null,
+): () => void {
+  if (!host || typeof window === "undefined") {
+    return () => {};
+  }
+
+  const sync = () => syncSlottedSidebarActiveLinks(host);
+
+  // Initial sync
+  sync();
+
+  // Re-sync on back/forward navigation and replaceState-driven URL changes
+  window.addEventListener("popstate", sync, { passive: true });
+
+  // Re-sync on Navigation API navigate (Chrome 102+) — covers pushState/replaceState too
+  const nav = (window as unknown as { navigation?: EventTarget }).navigation;
+  if (nav && typeof nav.addEventListener === "function") {
+    nav.addEventListener("navigate", sync, {
+      passive: true,
+    } as EventListenerOptions);
+  }
+
+  return () => {
+    window.removeEventListener("popstate", sync);
+    if (nav && typeof nav.removeEventListener === "function") {
+      nav.removeEventListener("navigate", sync);
+    }
+  };
+}

package/src/components/shadow-claw-pages/shadow-claw-pages.css

@@ -186,6 +186,11 @@ article > h2,
 .pages__rendered > h1,
 .pages__rendered > h2 {
   margin-top: 0;
+  margin-bottom: var(--shadow-claw-article-header-margin-bottom, 1.5rem);
+}
+
+.pages__rendered :is(h1, h2, h3, h4) {
+  clear: both;
 }
 
 .pages__iframe {
@@ -219,7 +224,7 @@ article > h2,
 
 .pages__dropdown-container {
   align-items: center;
-  display: flex;
+  display: var(--shadow-claw-pages-dropdown-container-display, flex);
   gap: 0.5rem;
   margin-bottom: 1rem;
   position: relative;
@@ -487,6 +492,10 @@ article > h2,
   }
 }
 
+shadow-claw-page-header {
+  display: var(--shadow-claw-page-header-display, block);
+}
+
 ul {
   line-height: 1.5;
 }

package/src/components/shadow-claw-pages/utils/removePreviewIframe.ts

@@ -8,5 +8,8 @@ export function removePreviewIframe(root: ShadowRoot | HTMLElement): void {
   }
 
   iframe.removeAttribute("srcdoc");
+  try {
+    iframe.src = "about:blank";
+  } catch {}
   iframe.remove();
 }

package/src/core/orchestrator/utils/syncWebMcpRegistration.test.ts

@@ -23,10 +23,25 @@ const mockRegisterWebMcpTools = jest
 const mockUnregisterWebMcpTools = jest.fn<() => void>();
 const mockApplyWebMcpMode = jest.fn<(mode: WebMcpMode) => void>();
 
+let lastActivatedListener: ((event: any) => void) | null = null;
+let lastCancelListener: ((event: any) => void) | null = null;
+const mockUnsubscribeActivated = jest.fn<() => void>();
+const mockUnsubscribeCancel = jest.fn<() => void>();
+const mockOnWebMcpToolActivated = jest.fn((cb: any) => {
+  lastActivatedListener = cb;
+  return mockUnsubscribeActivated;
+});
+const mockOnWebMcpToolCancel = jest.fn((cb: any) => {
+  lastCancelListener = cb;
+  return mockUnsubscribeCancel;
+});
+
 jest.unstable_mockModule("../../../subsystems/mcp/webmcp.js", () => ({
   registerWebMcpTools: mockRegisterWebMcpTools,
   unregisterWebMcpTools: mockUnregisterWebMcpTools,
   setWebMcpMode: mockApplyWebMcpMode,
+  onWebMcpToolActivated: mockOnWebMcpToolActivated,
+  onWebMcpToolCancel: mockOnWebMcpToolCancel,
 }));
 
 const mockHandleWorkerMessage = jest
@@ -157,6 +172,7 @@ interface MockOrchestrator {
   webMcpToolsEnabled: boolean;
   webMcpRegistrationLock: Promise<void>;
   agentWorker: Worker | null;
+  events?: { emit: jest.Mock };
 }
 
 describe("syncWebMcpRegistration", () => {
@@ -180,6 +196,7 @@ describe("syncWebMcpRegistration", () => {
       webMcpToolsEnabled: true,
       webMcpRegistrationLock: Promise.resolve(),
       agentWorker: {} as unknown as Worker,
+      events: { emit: jest.fn() },
     };
     mockDiscoverSkills.mockResolvedValue({ skills: [] });
     mockLoadDeclarativeTools.mockResolvedValue({
@@ -211,6 +228,41 @@ describe("syncWebMcpRegistration", () => {
     expect(mockUnregisterWebMcpTools).toHaveBeenCalled();
   });
 
+  it("should subscribe to toolactivated and toolcancel events and emit on orchestrator.events", async () => {
+    syncWebMcpRegistration(mockOrchestrator as unknown as Orchestrator, mockDb);
+    await mockOrchestrator.webMcpRegistrationLock;
+
+    expect(mockOnWebMcpToolActivated).toHaveBeenCalled();
+    expect(mockOnWebMcpToolCancel).toHaveBeenCalled();
+
+    // Trigger activated listener
+    lastActivatedListener?.({ toolName: "read_file" });
+    expect(mockOrchestrator.events?.emit).toHaveBeenCalledWith(
+      "webmcp-tool-activated",
+      { toolName: "read_file" },
+    );
+
+    // Trigger cancel listener
+    lastCancelListener?.({ toolName: "read_file" });
+    expect(mockOrchestrator.events?.emit).toHaveBeenCalledWith(
+      "webmcp-tool-cancel",
+      { toolName: "read_file" },
+    );
+  });
+
+  it("should unsubscribe from toolactivated and toolcancel when webMcpEffectCleanup is executed", async () => {
+    syncWebMcpRegistration(mockOrchestrator as unknown as Orchestrator, mockDb);
+    await mockOrchestrator.webMcpRegistrationLock;
+
+    const cleanup = mockOrchestrator.webMcpEffectCleanup;
+    expect(cleanup).toBeDefined();
+
+    cleanup!();
+
+    expect(mockUnsubscribeActivated).toHaveBeenCalled();
+    expect(mockUnsubscribeCancel).toHaveBeenCalled();
+  });
+
   it("should setup effect and register tools filtered by group toolTags", async () => {
     syncWebMcpRegistration(mockOrchestrator as unknown as Orchestrator, mockDb);
 

package/src/core/orchestrator/utils/syncWebMcpRegistration.ts

@@ -5,6 +5,8 @@ import {
   setWebMcpMode as applyWebMcpMode,
   registerWebMcpTools,
   unregisterWebMcpTools,
+  onWebMcpToolActivated,
+  onWebMcpToolCancel,
 } from "../../../subsystems/mcp/webmcp.js";
 
 import { effect } from "../../effect.js";
@@ -38,6 +40,19 @@ export function syncWebMcpRegistration(
     return;
   }
 
+  // Subscribe to WebMCP lifecycle events (PR #245 / Chrome 156+ with backwards compatibility).
+  const unsubscribeActivated = onWebMcpToolActivated((event) => {
+    orchestrator.events?.emit("webmcp-tool-activated", {
+      toolName: event.toolName,
+    });
+  });
+
+  const unsubscribeCancel = onWebMcpToolCancel((event) => {
+    orchestrator.events?.emit("webmcp-tool-cancel", {
+      toolName: event.toolName,
+    });
+  });
+
   // Register WebMCP tools and re-register when tool config changes.
   // This effect runs once immediately to perform the initial registration.
   // We intentionally do NOT call isWebMcpSupported() here — that accesses
@@ -45,7 +60,7 @@ export function syncWebMcpRegistration(
   // early-preview renderer. Instead, registerWebMcpTools handles feature detection
   // internally and skips modelContext access entirely when 0 tools are
   // passed.
-  orchestrator.webMcpEffectCleanup = effect(() => {
+  const disposeEffect = effect(() => {
     // Access signals to establish tracking.
     const activeGroupId = orchestratorStore.activeGroupId;
     const allTools = toolsStore.allTools;
@@ -109,6 +124,18 @@ export function syncWebMcpRegistration(
         console.error("WebMCP registration failed:", err);
       });
   });
+
+  orchestrator.webMcpEffectCleanup = () => {
+    try {
+      unsubscribeActivated();
+    } catch {}
+    try {
+      unsubscribeCancel();
+    } catch {}
+    if (typeof disposeEffect === "function") {
+      disposeEffect();
+    }
+  };
 }
 export async function setWebMcpMode(
   _state: Pick<

package/src/server/middleware/static-files.test.ts

@@ -175,6 +175,42 @@ describe("static-files-middleware", () => {
     }
   });
 
+  it("serves SPA shell for app routes even when route directory exists on disk", async () => {
+    await register();
+    const middleware = app.use.mock.calls[1][0];
+
+    for (const appPath of ["/files", "/files/", "/pages", "/pages/"]) {
+      const req = {
+        method: "GET",
+        headers: {
+          accept: "text/html",
+          "sec-fetch-dest": "document",
+          "sec-fetch-mode": "navigate",
+        },
+        originalUrl: appPath,
+        url: appPath,
+      };
+      const res = { setHeader: jest.fn(), sendFile: jest.fn() };
+      const next = jest.fn();
+
+      fsMock.stat.mockImplementation((_targetPath: string, cb: any) => {
+        cb(null, { isFile: () => false, isDirectory: () => true });
+      });
+      fsMock.access.mockImplementation(
+        (_targetPath: string, _mode: any, cb: any) => {
+          cb(new Error("ENOENT"));
+        },
+      );
+
+      middleware(req, res, next);
+
+      expect(res.sendFile).toHaveBeenCalledWith(
+        expect.stringContaining("/root/index.html"),
+      );
+      expect(next).not.toHaveBeenCalled();
+    }
+  });
+
   it("does not serve SPA shell for non-HTML missing requests", async () => {
     await register();
     const middleware = app.use.mock.calls[1][0];