shadow-claw 1.40.1 → 1.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadow-claw",
-  "version": "1.40.1",
+  "version": "1.41.0",
   "type": "module",
   "license": "AGPL-3.0",
   "description": "ShadowClaw - multi-runtime AI assistant.",

package/src/cli/prerender/dsd-shell/prerender-dsd-shell.test.ts

@@ -502,11 +502,14 @@ describe("prerenderDsdShell purge flag pages", () => {
 
     it("applies sidebar visibility config to template", () => {
       const tpl =
-        '<li class="nav-item" data-page="chat">Chat</li><li class="nav-item" data-page="files">Files</li>';
+        '<li class="nav-item" data-page="chat">Chat</li><li class="nav-item" data-page="files">Files</li><shadow-claw-conversations></shadow-claw-conversations>';
       const modified = applySidebarVisibilityToTemplate(tpl, {
         chatHidden: true,
       });
       expect(modified).toContain('data-page="chat" hidden aria-hidden="true"');
+      expect(modified).toContain(
+        '<shadow-claw-conversations hidden aria-hidden="true">',
+      );
       expect(modified).not.toContain('data-page="files" hidden');
     });
 

package/src/cli/prerender/dsd-shell/prerender-dsd-shell.ts

@@ -675,7 +675,13 @@ export function applySidebarVisibilityToTemplate(
   };
 
   if (sidebarConfig.pagesHidden) hidePage("pages");
-  if (sidebarConfig.chatHidden) hidePage("chat");
+  if (sidebarConfig.chatHidden) {
+    hidePage("chat");
+    next = next.replace(
+      /(<shadow-claw-conversations)(?![^>]*\bhidden\b)([^>]*>)/iu,
+      '$1 hidden aria-hidden="true"$2',
+    );
+  }
   if (sidebarConfig.tasksHidden) hidePage("tasks");
   if (sidebarConfig.filesHidden) hidePage("files");
 

package/src/cli/prerender/utils/insert-before-closing-head.test.ts

@@ -16,4 +16,16 @@ describe("insertBeforeClosingHead", () => {
     const result = insertBeforeClosingHead(html, tag);
     expect(result.startsWith(`${tag}\n`)).toBe(true);
   });
+
+  it("targets the first outer </head> tag when nested templates have their own head", () => {
+    const html =
+      '<!doctype html><html><head><title>Outer</title></head><body><template shadowrootmode="open"><head><title>Inner</title></head></template></body></html>';
+    const tag = '<script id="outer-test">true</script>';
+    const result = insertBeforeClosingHead(html, tag);
+    const outerIndex = result.indexOf(tag);
+    const firstHeadClose = result.indexOf("</head>");
+    const secondHeadClose = result.lastIndexOf("</head>");
+    expect(outerIndex).toBeLessThan(firstHeadClose);
+    expect(firstHeadClose).toBeLessThan(secondHeadClose);
+  });
 });

package/src/cli/prerender/utils/insert-before-closing-head.ts

@@ -2,13 +2,11 @@ export function insertBeforeClosingHead(
   html: string,
   contentToInsert: string,
 ): string {
-  const lastHeadIndex = html.lastIndexOf("</head>");
-  if (lastHeadIndex !== -1) {
+  const headMatch = /<\/head>/i.exec(html);
+  if (headMatch) {
+    const headIndex = headMatch.index;
     return (
-      html.slice(0, lastHeadIndex) +
-      contentToInsert +
-      "\n" +
-      html.slice(lastHeadIndex)
+      html.slice(0, headIndex) + contentToInsert + "\n" + html.slice(headIndex)
     );
   }
   return `${contentToInsert}\n${html}`;

package/src/cli/site-config/apply.test.ts

@@ -202,6 +202,60 @@ describe("apply-site-config", () => {
         '<link href="favicon.svg" rel="apple-touch-icon" />',
       );
     });
+
+    it("injects slotted sidebar html into shadow-claw light DOM when slotHtml is configured", () => {
+      const config = {
+        sidebar: {
+          slotHtml: '<nav class="custom-nav"><a href="/about">About</a></nav>',
+        },
+      };
+
+      const patched = patchIndexHtml(baseHtml, config);
+      expect(patched).toContain('slot="sidebar"');
+      expect(patched).toContain('<a href="/about">About</a>');
+      expect(patched).toContain("<shadow-claw>");
+      expect(patched).toContain("</shadow-claw>");
+    });
+
+    it("renders and injects declarative sidebar sections into shadow-claw light DOM", () => {
+      const config = {
+        sidebar: {
+          sections: [
+            {
+              title: "Home",
+              headerHref: "/",
+              items: [{ title: "About", href: "/about" }],
+            },
+            {
+              title: "Links",
+              items: [
+                {
+                  title: "GitHub",
+                  href: "https://github.com/xt-ml/shadow-claw",
+                  target: "_blank",
+                },
+              ],
+            },
+          ],
+        },
+      };
+
+      const patched = patchIndexHtml(baseHtml, config);
+      expect(patched).toContain('slot="sidebar"');
+      expect(patched).toContain('class="sidebar-custom-sections"');
+      expect(patched).toContain('href="/" class="sidebar-link">Home</a>');
+      expect(patched).toContain('href="/about" class="sidebar-link">About</a>');
+      expect(patched).toContain(
+        'href="https://github.com/xt-ml/shadow-claw" target="_blank" rel="noopener noreferrer"',
+      );
+    });
+
+    it("injects customSidebarHtml parameter directly into shadow-claw light DOM", () => {
+      const customHtml =
+        '<div slot="sidebar" class="my-custom-sidebar"><p>Hello</p></div>';
+      const patched = patchIndexHtml(baseHtml, {}, customHtml);
+      expect(patched).toContain(customHtml);
+    });
   });
 
   describe("patchManifest", () => {
@@ -756,5 +810,41 @@ https://example.com/about`;
         ),
       ).rejects.toThrow();
     });
+
+    it("discovers pages/main/sidebar.html and injects it into dist/public/index.html", async () => {
+      const distPublicDir = path.join(tmpDir, "dist/public");
+      const repoDir = tmpDir;
+      const pagesMainDir = path.join(repoDir, "pages/main");
+      await mkdir(distPublicDir, { recursive: true });
+      await mkdir(pagesMainDir, { recursive: true });
+
+      const indexPath = path.join(distPublicDir, "index.html");
+      await writeFile(
+        indexPath,
+        "<!doctype html><html><head></head><body><shadow-claw></shadow-claw></body></html>",
+        "utf8",
+      );
+
+      const sidebarContent =
+        '<nav class="my-sidebar"><a href="/about">About Us</a></nav>';
+      await writeFile(
+        path.join(pagesMainDir, "sidebar.html"),
+        sidebarContent,
+        "utf8",
+      );
+
+      const siteConfigPath = path.join(repoDir, "shadow-claw.config.json");
+      const config = {
+        site: { title: "Custom Sidebar Site" },
+      };
+      await writeFile(siteConfigPath, JSON.stringify(config), "utf8");
+
+      const result = await applySiteConfig(distPublicDir, siteConfigPath);
+      expect(result.applied).toBe(true);
+
+      const patchedIndex = await readFile(indexPath, "utf8");
+      expect(patchedIndex).toContain('slot="sidebar"');
+      expect(patchedIndex).toContain("About Us");
+    });
   });
 });

package/src/cli/site-config/apply.ts

@@ -57,12 +57,44 @@ export interface SiteConfigPwa {
   screenshots?: any[];
 }
 
+export interface SiteConfigSidebarSectionItem {
+  title?: string;
+  label?: string;
+  href?: string;
+  target?: string;
+  rel?: string;
+  active?: boolean;
+}
+
+export interface SiteConfigSidebarSection {
+  title?: string;
+  headerHref?: string;
+  items?: SiteConfigSidebarSectionItem[];
+  html?: string;
+}
+
+export interface SiteConfigSidebar {
+  pagesHidden?: boolean;
+  chatHidden?: boolean;
+  tasksHidden?: boolean;
+  filesHidden?: boolean;
+  defaultPage?: string;
+  slotHtml?: string;
+  slotPath?: string;
+  sections?: SiteConfigSidebarSection[];
+}
+
 export interface SiteConfig {
   site?: SiteConfigSite;
   branding?: SiteConfigBranding;
   theme?: SiteConfigTheme;
   pwa?: SiteConfigPwa;
-  pages?: { notFoundPath?: string };
+  sidebar?: SiteConfigSidebar;
+  pages?: {
+    notFoundPath?: string;
+    sortOrder?: string;
+    defaultPinnedPage?: string;
+  };
   notFoundPath?: string;
   manifestPath?: string;
   sitemapPath?: string;
@@ -87,13 +119,11 @@ export function insertBeforeClosingHead(
   html: string,
   contentToInsert: string,
 ): string {
-  const lastHeadIndex = html.lastIndexOf("</head>");
-  if (lastHeadIndex !== -1) {
+  const headMatch = /<\/head>/i.exec(html);
+  if (headMatch) {
+    const headIndex = headMatch.index;
     return (
-      html.slice(0, lastHeadIndex) +
-      contentToInsert +
-      "\n" +
-      html.slice(lastHeadIndex)
+      html.slice(0, headIndex) + contentToInsert + "\n" + html.slice(headIndex)
     );
   }
   return `${contentToInsert}\n${html}`;
@@ -137,7 +167,67 @@ async function writeText(filePath: string, content: string): Promise<void> {
   await writeFile(filePath, content, "utf8");
 }
 
-export function patchIndexHtml(html: string, config: SiteConfig): string {
+export function renderSidebarSectionsHtml(
+  sections: SiteConfigSidebarSection[],
+): string {
+  if (!Array.isArray(sections) || sections.length === 0) {
+    return "";
+  }
+
+  const sectionsHtml = sections
+    .map((section, idx) => {
+      if (section.html) {
+        return section.html;
+      }
+      const sectionId = section.title
+        ? `sidebar-${section.title.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`
+        : `sidebar-section-${idx + 1}`;
+
+      const headerContent = section.headerHref
+        ? `<a href="${escapeHtml(section.headerHref)}" class="sidebar-link">${escapeHtml(section.title || "")}</a>`
+        : `<span>${escapeHtml(section.title || "")}</span>`;
+
+      const headerHtml = section.title
+        ? `    <div class="sidebar-section-header">${headerContent}</div>`
+        : "";
+
+      const itemsHtml = (section.items || [])
+        .map((item) => {
+          const title = item.title || item.label || "";
+          const href = item.href || "#";
+          const targetAttr = item.target
+            ? ` target="${escapeHtml(item.target)}"`
+            : "";
+          const relAttr = item.rel
+            ? ` rel="${escapeHtml(item.rel)}"`
+            : item.target === "_blank"
+              ? ' rel="noopener noreferrer"'
+              : "";
+          const activeClass = item.active ? " active" : "";
+          const ariaCurrent = item.active ? ' aria-current="page"' : "";
+          return `    <div class="sidebar-item"><a href="${escapeHtml(href)}"${targetAttr}${relAttr} class="sidebar-link${activeClass}"${ariaCurrent}>${escapeHtml(title)}</a></div>`;
+        })
+        .join("\n");
+
+      return [
+        `  <section class="sidebar-section" id="${sectionId}">`,
+        headerHtml,
+        itemsHtml,
+        `  </section>`,
+      ]
+        .filter(Boolean)
+        .join("\n");
+    })
+    .join("\n");
+
+  return `<nav slot="sidebar" class="sidebar-custom-sections" aria-label="Site Navigation">\n${sectionsHtml}\n</nav>`;
+}
+
+export function patchIndexHtml(
+  html: string,
+  config: SiteConfig,
+  customSidebarHtml?: string,
+): string {
   let next = html;
 
   const site = config.site || {};
@@ -265,10 +355,24 @@ export function patchIndexHtml(html: string, config: SiteConfig): string {
   if (theme.stylesheet) {
     const stylesheetHref = resolveThemeStylesheetHref(theme.stylesheet);
     const themeCssTag = `<link rel="stylesheet" href="${escapeHtml(stylesheetHref)}" />`;
-    if (
-      !next.includes(`href="${stylesheetHref}"`) &&
-      !next.includes(`href="${escapeHtml(stylesheetHref)}"`)
-    ) {
+    const escapedHrefPattern = escapeHtml(stylesheetHref).replace(
+      /[.*+?^${}()|[\]\\]/g,
+      "\\$&",
+    );
+    const rawHrefPattern = stylesheetHref.replace(
+      /[.*+?^${}()|[\]\\]/g,
+      "\\$&",
+    );
+    const linkRegex = new RegExp(
+      `<link\\s+[^>]*href=["'](?:${rawHrefPattern}|${escapedHrefPattern})["'][^>]*>`,
+      "iu",
+    );
+    const headContent = next.slice(0, Math.max(0, next.indexOf("</head>")));
+    const headWithoutScripts = headContent.replace(
+      /<script\b[\s\S]*?<\/script>/gi,
+      "",
+    );
+    if (!linkRegex.test(headWithoutScripts)) {
       if (/<link\s+rel="stylesheet"\s+href="index\.css"\s*\/?>/iu.test(next)) {
         next = next.replace(
           /(<link\s+rel="stylesheet"\s+href="index\.css"\s*\/?>)/iu,
@@ -313,6 +417,41 @@ export function patchIndexHtml(html: string, config: SiteConfig): string {
     next = insertBeforeClosingHead(next, `  ${siteConfigScript}`);
   }
 
+  const sidebarHtmlToInject =
+    customSidebarHtml ||
+    config.sidebar?.slotHtml ||
+    (config.sidebar?.sections
+      ? renderSidebarSectionsHtml(config.sidebar.sections)
+      : "");
+
+  if (sidebarHtmlToInject) {
+    let formattedSidebarHtml = sidebarHtmlToInject.trim();
+    if (
+      !/\bslot="sidebar(?:-nav|-content|-footer)?"/iu.test(formattedSidebarHtml)
+    ) {
+      formattedSidebarHtml = `<div slot="sidebar" class="sidebar-custom-sections">\n${formattedSidebarHtml}\n</div>`;
+    }
+
+    const existingMatch = next.match(
+      /<[^>]+?\bslot="sidebar(?:-nav|-content|-footer)?"[^>]*>[\s\S]*?<\/[^>]+>/iu,
+    );
+    if (existingMatch) {
+      next = next.replace(existingMatch[0], "");
+    }
+
+    if (next.includes("</shadow-claw>")) {
+      next = next.replace(
+        "</shadow-claw>",
+        `  ${formattedSidebarHtml}\n</shadow-claw>`,
+      );
+    } else if (next.includes("<shadow-claw></shadow-claw>")) {
+      next = next.replace(
+        "<shadow-claw></shadow-claw>",
+        `<shadow-claw>\n  ${formattedSidebarHtml}\n</shadow-claw>`,
+      );
+    }
+  }
+
   return next;
 }
 
@@ -993,10 +1132,39 @@ export async function applySiteConfig(
 
   await copyCustomSiteFiles(config, distPublicDir, siteConfigPath);
 
+  const configDir = siteConfigPath
+    ? path.dirname(path.resolve(siteConfigPath))
+    : process.cwd();
+  const templateRootDir = getTemplateRootDir(configDir);
+
+  let sidebarHtml: string | undefined;
+  if (config.sidebar?.slotHtml) {
+    sidebarHtml = config.sidebar.slotHtml;
+  } else if (config.sidebar?.sections) {
+    sidebarHtml = renderSidebarSectionsHtml(config.sidebar.sections);
+  } else {
+    const sidebarCandidates = [
+      config.sidebar?.slotPath,
+      "pages/main/sidebar.html",
+      "pages/sidebar.html",
+      "sidebar.html",
+      "resources/sidebar.html",
+    ].filter(Boolean) as string[];
+
+    const candidatePaths = sidebarCandidates.flatMap((c) =>
+      getCandidateFilePaths(c, configDir, templateRootDir),
+    );
+    const foundSidebar = await findFirstExisting(candidatePaths);
+    if (foundSidebar) {
+      sidebarHtml = (await readText(foundSidebar)) ?? undefined;
+      console.log(`  Found slotted sidebar: ${foundSidebar}`);
+    }
+  }
+
   const indexPath = path.join(distPublicDir, "index.html");
   const indexHtml = await readText(indexPath);
   if (indexHtml) {
-    const patched = patchIndexHtml(indexHtml, config);
+    const patched = patchIndexHtml(indexHtml, config, sidebarHtml);
     await writeText(indexPath, patched);
     console.log("  Patched index.html");
   }

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

@@ -90,6 +90,10 @@ a:hover {
   transition: transform 0.2s ease;
 }
 
+.header-main-toggle {
+  display: var(--shadow-claw-header-main-toggle-display, block);
+}
+
 .header-main-toggle[aria-pressed="true"],
 .activity-log-toggle[aria-pressed="true"] {
   box-shadow: 0 0 0.5rem
@@ -279,6 +283,28 @@ a:hover {
   padding: 0.5rem;
 }
 
+.nav-menu:not(:has(.nav-item:not([hidden]))) {
+  display: none;
+}
+
+slot[name="sidebar"],
+slot[name="sidebar-nav"],
+slot[name="sidebar-content"],
+slot[name="sidebar-footer"] {
+  display: block;
+}
+
+::slotted([slot="sidebar"]),
+::slotted([slot="sidebar-nav"]),
+::slotted([slot="sidebar-content"]),
+::slotted([slot="sidebar-footer"]) {
+  display: block;
+}
+
+.sidebar-footer {
+  display: var(--shadow-claw-sidebar-footer-display, block);
+}
+
 .sidebar-spacer {
   flex: 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);
+    }
+  });
 });