shadow-claw 1.54.0 → 1.55.0

package/src/components/shadow-claw/utils/sync-slotted-sidebar-active-links.test.ts

@@ -1,5 +1,8 @@
 import { describe, it, expect, beforeEach } from "@jest/globals";
-import { syncSlottedSidebarActiveLinks } from "./sync-slotted-sidebar-active-links.js";
+import {
+  setupSlottedSidebarActiveLinks,
+  syncSlottedSidebarActiveLinks,
+} from "./sync-slotted-sidebar-active-links.js";
 
 describe("syncSlottedSidebarActiveLinks", () => {
   let host: HTMLElement;
@@ -91,3 +94,151 @@ describe("syncSlottedSidebarActiveLinks", () => {
     expect(corporateLink?.classList.contains("active")).toBe(false);
   });
 });
+
+describe("setupSlottedSidebarActiveLinks", () => {
+  let host: HTMLElement;
+  let originalNavigation: any;
+  let originalReplaceState: any;
+
+  beforeEach(() => {
+    originalNavigation = (window as any).navigation;
+    originalReplaceState = window.history.replaceState;
+
+    host = document.createElement("div");
+    host.innerHTML = `
+      <div slot="sidebar" class="sidebar-custom-sections">
+        <a href="/" class="sidebar-link">Home</a>
+        <a href="/2022/11/27/c-sharp-in-the-browser-without-blazor/" class="sidebar-link">C# in the Browser Without Blazor</a>
+        <a href="/2021/04/18/using-open/" class="sidebar-link">Using Open</a>
+        <a href="/2021/02/27/the-web-is-dynamic/" class="sidebar-link">The Web Is Dynamic</a>
+      </div>
+    `;
+
+    // Ensure initial location is home
+    window.history.replaceState({}, "", "/");
+  });
+
+  afterEach(() => {
+    if (originalNavigation !== undefined) {
+      (window as any).navigation = originalNavigation;
+    } else {
+      delete (window as any).navigation;
+    }
+    window.history.replaceState = originalReplaceState;
+    window.history.replaceState({}, "", "/");
+  });
+
+  it("synchronizes active sidebar link on Navigation API navigate event using destination URL when window.location.href is still old URL", () => {
+    const nav = new EventTarget();
+    (window as any).navigation = nav;
+
+    const cleanup = setupSlottedSidebarActiveLinks(host);
+
+    const linkCSharp = host.querySelector<HTMLAnchorElement>(
+      'a[href="/2022/11/27/c-sharp-in-the-browser-without-blazor/"]',
+    );
+    const linkUsingOpen = host.querySelector<HTMLAnchorElement>(
+      'a[href="/2021/04/18/using-open/"]',
+    );
+
+    // Initial state: home is active, posts are not
+    expect(linkCSharp?.classList.contains("active")).toBe(false);
+    expect(linkUsingOpen?.classList.contains("active")).toBe(false);
+
+    // 1. User scrolls to C# post: replaceState triggers navigate event.
+    // Crucially: At this point, the browser has NOT committed navigation yet,
+    // so window.location.href is STILL "http://localhost/"!
+    const navEvent1 = new Event("navigate") as any;
+    navEvent1.destination = {
+      url: `${window.location.origin}/2022/11/27/c-sharp-in-the-browser-without-blazor/`,
+    };
+    nav.dispatchEvent(navEvent1);
+
+    // C# link MUST be highlighted immediately without off-by-one delay
+    expect(linkCSharp?.classList.contains("active")).toBe(true);
+    expect(linkCSharp?.getAttribute("aria-current")).toBe("page");
+    expect(linkUsingOpen?.classList.contains("active")).toBe(false);
+
+    // Browser now commits navigation: location updates to C# post
+    window.history.replaceState(
+      {},
+      "",
+      "/2022/11/27/c-sharp-in-the-browser-without-blazor/",
+    );
+
+    // 2. User scrolls down to "Using Open": replaceState triggers navigate event.
+    // window.location.href is STILL C# post URL!
+    const navEvent2 = new Event("navigate") as any;
+    navEvent2.destination = {
+      url: `${window.location.origin}/2021/04/18/using-open/`,
+    };
+    nav.dispatchEvent(navEvent2);
+
+    // "Using Open" MUST be highlighted, and C# link MUST NOT be highlighted
+    expect(linkCSharp?.classList.contains("active")).toBe(false);
+    expect(linkCSharp?.hasAttribute("aria-current")).toBe(false);
+    expect(linkUsingOpen?.classList.contains("active")).toBe(true);
+    expect(linkUsingOpen?.getAttribute("aria-current")).toBe("page");
+
+    cleanup();
+  });
+
+  it("synchronizes active sidebar link immediately when history.replaceState is called", () => {
+    delete (window as any).navigation;
+
+    const cleanup = setupSlottedSidebarActiveLinks(host);
+
+    const linkCSharp = host.querySelector<HTMLAnchorElement>(
+      'a[href="/2022/11/27/c-sharp-in-the-browser-without-blazor/"]',
+    );
+    const linkUsingOpen = host.querySelector<HTMLAnchorElement>(
+      'a[href="/2021/04/18/using-open/"]',
+    );
+
+    expect(linkCSharp?.classList.contains("active")).toBe(false);
+
+    // replaceState to C# post
+    window.history.replaceState(
+      { inFeedScroll: true },
+      "",
+      "/2022/11/27/c-sharp-in-the-browser-without-blazor/",
+    );
+
+    expect(linkCSharp?.classList.contains("active")).toBe(true);
+    expect(linkUsingOpen?.classList.contains("active")).toBe(false);
+
+    // replaceState to Using Open
+    window.history.replaceState(
+      { inFeedScroll: true },
+      "",
+      "/2021/04/18/using-open/",
+    );
+
+    expect(linkCSharp?.classList.contains("active")).toBe(false);
+    expect(linkUsingOpen?.classList.contains("active")).toBe(true);
+
+    cleanup();
+  });
+
+  it("synchronizes active sidebar link when shadow-claw-feed-scroll event is dispatched", () => {
+    const cleanup = setupSlottedSidebarActiveLinks(host);
+
+    const linkCSharp = host.querySelector<HTMLAnchorElement>(
+      'a[href="/2022/11/27/c-sharp-in-the-browser-without-blazor/"]',
+    );
+
+    window.dispatchEvent(
+      new CustomEvent("shadow-claw-feed-scroll", {
+        detail: {
+          url: "/2022/11/27/c-sharp-in-the-browser-without-blazor/",
+          title: "C# in the Browser Without Blazor",
+        },
+      }),
+    );
+
+    expect(linkCSharp?.classList.contains("active")).toBe(true);
+    expect(linkCSharp?.getAttribute("aria-current")).toBe("page");
+
+    cleanup();
+  });
+});

package/src/components/shadow-claw/utils/sync-slotted-sidebar-active-links.ts

@@ -65,7 +65,7 @@ export function syncSlottedSidebarActiveLinks(
 
 /**
  * Sets up listeners so slotted sidebar active links stay in sync whenever
- * the URL changes (popstate, Navigation API navigate, or iframe replaceState).
+ * the URL changes (popstate, Navigation API navigate, replaceState, or feed scroll events).
  * Returns a cleanup function to remove the listeners.
  */
 export function setupSlottedSidebarActiveLinks(
@@ -75,26 +75,157 @@ export function setupSlottedSidebarActiveLinks(
     return () => {};
   }
 
-  const sync = () => syncSlottedSidebarActiveLinks(host);
+  const sync = (targetUrl?: URL) =>
+    syncSlottedSidebarActiveLinks(host, targetUrl);
 
   // Initial sync
   sync();
 
-  // Re-sync on back/forward navigation and replaceState-driven URL changes
-  window.addEventListener("popstate", sync, { passive: true });
+  // Re-sync on back/forward navigation
+  const handlePopstate = () => sync();
+  window.addEventListener("popstate", handlePopstate, { passive: true });
 
-  // Re-sync on Navigation API navigate (Chrome 102+) — covers pushState/replaceState too
+  // Re-sync on custom feed-scroll or url-change events
+  const handleCustomFeedScroll = (ev: Event) => {
+    const detailUrl = (ev as CustomEvent)?.detail?.url;
+    if (detailUrl) {
+      try {
+        sync(new URL(detailUrl, window.location.href));
+        return;
+      } catch {}
+    }
+    sync();
+  };
+  window.addEventListener("shadow-claw-feed-scroll", handleCustomFeedScroll);
+  window.addEventListener("shadow-claw-url-change", handleCustomFeedScroll);
+
+  // Re-sync on Navigation API navigate (Chrome 102+)
+  // CRITICAL: On 'navigate', window.location.href has NOT yet updated (it holds the old URL).
+  // We must inspect ev.destination.url so the sidebar highlights the target article
+  // synchronously without an "off-by-one" lag.
   const nav = (window as unknown as { navigation?: EventTarget }).navigation;
+  let handleNavigate: ((ev: any) => void) | null = null;
+  let handleCurrentEntryChange: (() => void) | null = null;
+  let handleNavigateSuccess: (() => void) | null = null;
+
   if (nav && typeof nav.addEventListener === "function") {
-    nav.addEventListener("navigate", sync, {
+    handleNavigate = (ev: any) => {
+      const destUrl = ev?.destination?.url;
+      if (destUrl) {
+        try {
+          sync(new URL(destUrl));
+          return;
+        } catch {}
+      }
+      sync();
+    };
+
+    handleCurrentEntryChange = () => {
+      sync();
+    };
+
+    handleNavigateSuccess = () => {
+      sync();
+    };
+
+    nav.addEventListener("navigate", handleNavigate, {
+      passive: true,
+    } as EventListenerOptions);
+
+    nav.addEventListener("currententrychange", handleCurrentEntryChange, {
+      passive: true,
+    } as EventListenerOptions);
+
+    nav.addEventListener("navigatesuccess", handleNavigateSuccess, {
       passive: true,
     } as EventListenerOptions);
   }
 
+  // Intercept history.replaceState and history.pushState so synchronous in-feed URL updates
+  // immediately update the slotted sidebar in environments without Navigation API or when invoked directly.
+  let origReplaceState: typeof window.history.replaceState | null = null;
+  let origPushState: typeof window.history.pushState | null = null;
+  const historyObj = typeof window !== "undefined" ? window.history : null;
+  let unhookHistory: (() => void) | null = null;
+
+  if (historyObj) {
+    origReplaceState = historyObj.replaceState;
+    origPushState = historyObj.pushState;
+
+    const wrappedReplaceState = function (
+      this: History,
+      _data: any,
+      _unused: string,
+      url?: string | URL | null,
+    ) {
+      const res = origReplaceState?.apply(this, arguments as any);
+      try {
+        if (url) {
+          sync(new URL(url.toString(), window.location.href));
+        } else {
+          sync();
+        }
+      } catch {
+        sync();
+      }
+      return res;
+    };
+
+    const wrappedPushState = function (
+      this: History,
+      _data: any,
+      _unused: string,
+      url?: string | URL | null,
+    ) {
+      const res = origPushState?.apply(this, arguments as any);
+      try {
+        if (url) {
+          sync(new URL(url.toString(), window.location.href));
+        } else {
+          sync();
+        }
+      } catch {
+        sync();
+      }
+      return res;
+    };
+
+    historyObj.replaceState = wrappedReplaceState;
+    historyObj.pushState = wrappedPushState;
+
+    unhookHistory = () => {
+      if (historyObj.replaceState === wrappedReplaceState && origReplaceState) {
+        historyObj.replaceState = origReplaceState;
+      }
+      if (historyObj.pushState === wrappedPushState && origPushState) {
+        historyObj.pushState = origPushState;
+      }
+    };
+  }
+
   return () => {
-    window.removeEventListener("popstate", sync);
+    window.removeEventListener("popstate", handlePopstate);
+    window.removeEventListener(
+      "shadow-claw-feed-scroll",
+      handleCustomFeedScroll,
+    );
+    window.removeEventListener(
+      "shadow-claw-url-change",
+      handleCustomFeedScroll,
+    );
     if (nav && typeof nav.removeEventListener === "function") {
-      nav.removeEventListener("navigate", sync);
+      if (handleNavigate) {
+        nav.removeEventListener("navigate", handleNavigate);
+      }
+      if (handleCurrentEntryChange) {
+        nav.removeEventListener("currententrychange", handleCurrentEntryChange);
+      }
+      if (handleNavigateSuccess) {
+        nav.removeEventListener("navigatesuccess", handleNavigateSuccess);
+      }
+    }
+    if (unhookHistory) {
+      unhookHistory();
     }
   };
 }

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

@@ -615,3 +615,14 @@
   flex: 1;
   margin-bottom: 0;
 }
+
+form:tool-form-active,
+.conversations__form:tool-form-active {
+  outline: 2px dashed var(--accent, #3b82f6);
+  outline-offset: 4px;
+}
+
+button:tool-submit-active {
+  outline: 2px dashed var(--warning, #f59e0b);
+  outline-offset: 2px;
+}

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

@@ -25,7 +25,12 @@
     dialog-aria-label="Create new conversation"
     dialog-class="conversations__dialog conversations__create-dialog"
   >
-    <form class="conversations__form" method="dialog">
+    <form
+      class="conversations__form"
+      method="dialog"
+      toolname="conversations_create"
+      tooldescription="Create a new conversation session"
+    >
       <label class="conversations__label" for="conversations-create-name">
         Conversation name
       </label>
@@ -36,6 +41,7 @@
         name="conversations-create-name"
         required
         type="text"
+        toolparamdescription="Display name of the new conversation"
       />
       <div class="conversations__actions">
         <button class="conversations__cancel" type="button">Cancel</button>
@@ -48,7 +54,12 @@
     dialog-aria-label="Conversation Details"
     dialog-class="conversations__dialog conversations__details-dialog"
   >
-    <form class="conversations__form" method="dialog">
+    <form
+      class="conversations__form"
+      method="dialog"
+      toolname="conversations_edit_details"
+      tooldescription="Edit conversation details, model configuration, and pinned tools"
+    >
       <label class="conversations__label" for="conversations-details-name">
         Conversation name
       </label>
@@ -59,6 +70,7 @@
         name="conversations-details-name"
         required
         type="text"
+        toolparamdescription="Display name of the conversation"
       />
       <label
         class="conversations__label conversations__label--group-id"
@@ -73,6 +85,7 @@
           name="conversations-details-group-id"
           readonly
           type="text"
+          toolparamdescription="Unique group identifier for the conversation"
         />
         <button
           type="button"
@@ -202,7 +215,12 @@
     dialog-aria-label="Delete conversation"
     dialog-class="conversations__dialog conversations__delete-dialog"
   >
-    <form class="conversations__form" method="dialog">
+    <form
+      class="conversations__form"
+      method="dialog"
+      toolname="conversations_delete"
+      tooldescription="Confirm deletion of the selected conversation"
+    >
       <p class="conversations__delete-message">
         Delete conversation "<span class="conversations__delete-name"></span>"?
         This cannot be undone.
@@ -220,7 +238,12 @@
     dialog-aria-label="Clone conversation"
     dialog-class="conversations__dialog conversations__clone-dialog"
   >
-    <form class="conversations__form" method="dialog">
+    <form
+      class="conversations__form"
+      method="dialog"
+      toolname="conversations_clone"
+      tooldescription="Confirm cloning of the selected conversation into a new session"
+    >
       <p class="conversations__delete-message">
         Clone conversation "<span class="conversations__clone-name"></span>"?
       </p>

package/src/components/shadow-claw-conversations/shadow-claw-conversations.ts

@@ -1547,7 +1547,14 @@ export class ShadowClawConversations extends ShadowClawElement {
 
     createForm?.addEventListener("submit", async (e) => {
       e.preventDefault();
-      await this._submitCreateDialog();
+      const promise = this._submitCreateDialog();
+      if (
+        (e as any).agentInvoked &&
+        typeof (e as any).respondWith === "function"
+      ) {
+        (e as any).respondWith(promise);
+      }
+      await promise;
     });
 
     // Details dialog
@@ -1577,7 +1584,14 @@ export class ShadowClawConversations extends ShadowClawElement {
 
     detailsForm?.addEventListener("submit", async (e) => {
       e.preventDefault();
-      await this._submitDetailsDialog();
+      const promise = this._submitDetailsDialog();
+      if (
+        (e as any).agentInvoked &&
+        typeof (e as any).respondWith === "function"
+      ) {
+        (e as any).respondWith(promise);
+      }
+      await promise;
     });
 
     // Delete dialog
@@ -1598,7 +1612,14 @@ export class ShadowClawConversations extends ShadowClawElement {
 
     deleteForm?.addEventListener("submit", async (e) => {
       e.preventDefault();
-      await this._submitDeleteDialog();
+      const promise = this._submitDeleteDialog();
+      if (
+        (e as any).agentInvoked &&
+        typeof (e as any).respondWith === "function"
+      ) {
+        (e as any).respondWith(promise);
+      }
+      await promise;
     });
 
     // Clone dialog
@@ -1619,7 +1640,14 @@ export class ShadowClawConversations extends ShadowClawElement {
 
     cloneForm?.addEventListener("submit", async (e) => {
       e.preventDefault();
-      await this._submitCloneDialog();
+      const promise = this._submitCloneDialog();
+      if (
+        (e as any).agentInvoked &&
+        typeof (e as any).respondWith === "function"
+      ) {
+        (e as any).respondWith(promise);
+      }
+      await promise;
     });
   }