shadow-claw 1.40.1 → 1.41.0

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];

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

@@ -112,15 +112,18 @@ export function registerStaticFilesMiddleware(app: Express, rootPath: string) {
     }
 
     const urlPathname = new URL(req.url || "/", "http://localhost").pathname;
+    if (
+      isSpaShellRequest(req, requestPath) ||
+      isSpaShellRequest(req, urlPathname)
+    ) {
+      res.sendFile(path.join(rootPath, "index.html"));
+
+      return;
+    }
+
     const filePath = path.join(rootPath, urlPathname);
     fs.stat(filePath, (err, stats) => {
       if (err || !stats) {
-        if (isSpaShellRequest(req, requestPath)) {
-          res.sendFile(path.join(rootPath, "index.html"));
-
-          return;
-        }
-
         // Check if request has a subpath prefix matching a root file (e.g. /shadow-claw/index.js -> /index.js)
         const strippedSegmentPath = requestPath.replace(/^\/[^/]+/, "");
         if (strippedSegmentPath) {
@@ -212,6 +215,11 @@ export function registerStaticFilesMiddleware(app: Express, rootPath: string) {
             } else {
               res.sendFile(indexPath);
             }
+          } else if (
+            isSpaShellRequest(req, requestPath) ||
+            isSpaShellRequest(req, urlPathname)
+          ) {
+            res.sendFile(path.join(rootPath, "index.html"));
           } else {
             next();
           }

package/src/storage/staticRouting.test.ts

@@ -73,12 +73,29 @@ describe("staticRouting", () => {
         "/pages/main/posts/2026-07-01_03-37-38.md": {
           prettyPath: "/2026/06/30/on-developing-loops/",
         },
+        "/pages/main/index.html": {
+          prettyPath: "/",
+        },
         "/pages/main/about.md": {
           prettyPath: "/about",
         },
       },
     };
 
+    // Test root path "/"
+    expect(resolvePrettyPathToRoute("/", manifest)).toEqual({
+      page: "pages",
+      groupId: "br:main",
+      path: "index.html",
+    });
+
+    // Test root index.html
+    expect(resolvePrettyPathToRoute("/index.html", manifest)).toEqual({
+      page: "pages",
+      groupId: "br:main",
+      path: "index.html",
+    });
+
     // Test with explicit manifest
     expect(
       resolvePrettyPathToRoute("/2026/06/30/on-developing-loops/", manifest),
@@ -155,6 +172,25 @@ describe("staticRouting", () => {
         manifest,
       ),
     ).toBeNull();
+
+    const manifestWithRoot: StaticRoutesManifest = {
+      routes: {
+        "/pages/main/index.html": {
+          prettyPath: "/",
+        },
+      },
+    };
+
+    expect(
+      resolveRouteToPrettyPath(
+        { page: "pages", groupId: "br:main" },
+        manifestWithRoot,
+      ),
+    ).toBe("/");
+
+    expect(resolveRouteToPrettyPath({ page: "pages" }, manifestWithRoot)).toBe(
+      "/",
+    );
   });
 
   it("fetches static routing manifest when not embedded in DOM", async () => {

package/src/storage/staticRouting.ts

@@ -214,9 +214,6 @@ export function resolvePrettyPathToRoute(
   }
 
   const normalizedPath = normalizePrettyPathKey(pathname);
-  if (!normalizedPath) {
-    return null;
-  }
 
   for (const [canonicalKey, routeDef] of Object.entries(
     routesManifest.routes,
@@ -363,6 +360,29 @@ export function resolveRouteToPrettyPath(
       candidateKeys.push(`pages/${normalizedGroupId}/${cleanPath}`);
       candidateKeys.push(`/pages/${groupId}/${cleanPath}`);
     }
+  } else if (page === "pages" && !path) {
+    if (normalizedGroupId === "main" || !normalizedGroupId) {
+      candidateKeys.push(
+        "/pages/main/index.html",
+        "pages/main/index.html",
+        "/pages/br:main/index.html",
+        "/pages/br-main/index.html",
+        "/main/index.html",
+        "main/index.html",
+        "/index.html",
+        "index.html",
+        "/pages/main",
+        "pages/main",
+        "/pages",
+        "pages",
+      );
+    } else if (normalizedGroupId) {
+      candidateKeys.push(
+        `/pages/${normalizedGroupId}/index.html`,
+        `pages/${normalizedGroupId}/index.html`,
+        `/pages/${groupId}/index.html`,
+      );
+    }
   } else if (page === "files" && path) {
     const cleanPath = trimSlashes(path);
     if (normalizedGroupId) {
@@ -386,5 +406,13 @@ export function resolveRouteToPrettyPath(
     }
   }
 
+  if (page === "pages" && !path) {
+    for (const routeDef of Object.values(routesManifest.routes)) {
+      if (routeDef && routeDef.prettyPath === "/") {
+        return "/";
+      }
+    }
+  }
+
   return null;
 }