Graduate Extensions from experiments

apps/app/src/App.hash-navigation.test.tsx

@@ -0,0 +1,78 @@
+// @vitest-environment jsdom
+
+import { cleanup, render, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { MemoryRouter } from "react-router-dom";
+import { HashNavigationScroll } from "./App";
+
+describe("HashNavigationScroll", () => {
+  afterEach(() => {
+    cleanup();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it("scrolls to a destination that is already mounted", async () => {
+    const scrollIntoView = vi.spyOn(Element.prototype, "scrollIntoView");
+    const focus = vi.spyOn(HTMLElement.prototype, "focus");
+
+    render(
+      <MemoryRouter initialEntries={["/tools/plugins/workflows#configuration"]}>
+        <HashNavigationScroll />
+        <div id="configuration" />
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(scrollIntoView).toHaveBeenCalledWith({
+        block: "start",
+        inline: "nearest",
+      });
+      expect(focus).toHaveBeenCalledWith({ preventScroll: true });
+    });
+  });
+
+  it("waits for lazy plugin surfaces to mount", async () => {
+    const scrollIntoView = vi.spyOn(Element.prototype, "scrollIntoView");
+    const view = render(
+      <MemoryRouter initialEntries={["/#plugin-workflows-active-runs"]}>
+        <HashNavigationScroll />
+      </MemoryRouter>,
+    );
+
+    expect(scrollIntoView).not.toHaveBeenCalled();
+
+    view.rerender(
+      <MemoryRouter initialEntries={["/#plugin-workflows-active-runs"]}>
+        <HashNavigationScroll />
+        <section id="plugin-workflows-active-runs" />
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(scrollIntoView).toHaveBeenCalledWith({
+        block: "start",
+        inline: "nearest",
+      });
+    });
+  });
+
+  it("stops observing when a destination does not mount by the deadline", async () => {
+    vi.useFakeTimers();
+    const getElementById = vi.spyOn(document, "getElementById");
+    const view = render(
+      <MemoryRouter initialEntries={["/#destination-that-never-mounts"]}>
+        <HashNavigationScroll />
+      </MemoryRouter>,
+    );
+
+    expect(getElementById).toHaveBeenCalledTimes(1);
+    await vi.advanceTimersByTimeAsync(2_000);
+    const callsAfterDeadline = getElementById.mock.calls.length;
+
+    view.container.appendChild(document.createElement("div"));
+    await Promise.resolve();
+
+    expect(getElementById).toHaveBeenCalledTimes(callsAfterDeadline);
+  });
+});

apps/app/src/App.tsx

@@ -1,4 +1,4 @@
-import { lazy, Suspense } from "react";
+import { lazy, Suspense, useEffect } from "react";
 import {
   Navigate,
   Route,
@@ -51,7 +51,6 @@ import {
 import { AppCommandProvider } from "./components/commands/AppCommandProvider";
 import { OnboardingHost } from "@/components/onboarding/OnboardingHost";
 import { ProviderCliInstallLogDialogHost } from "./components/provider-cli/provider-cli-install";
-import { ToolsExperimentGate } from "./components/tools/ToolsExperimentGate";
 import { PluginSettingsCompatibilityRoute } from "./components/settings/PluginSettingsCompatibilityRoute";
 
 const SettingsView = lazy(() =>
@@ -133,6 +132,63 @@ export function LegacyPluginBrowseRedirect() {
   return <Navigate to={TOOLS_PLUGINS_ROUTE_PATH} replace />;
 }
 
+function hashTargetId(hash: string): string | null {
+  if (hash.length <= 1) return null;
+  try {
+    return decodeURIComponent(hash.slice(1));
+  } catch {
+    return hash.slice(1);
+  }
+}
+
+const HASH_NAVIGATION_WAIT_MS = 2_000;
+
+export function HashNavigationScroll() {
+  const location = useLocation();
+
+  useEffect(() => {
+    const targetId = hashTargetId(location.hash);
+    if (targetId === null) return;
+
+    const scrollToTarget = (): boolean => {
+      const target = document.getElementById(targetId);
+      if (target === null) return false;
+      // Fragment destinations are navigation landmarks. Move keyboard focus as
+      // well as the viewport, including for semantic sections that are not
+      // normally focusable.
+      if (target.tabIndex < 0 && !target.hasAttribute("tabindex")) {
+        target.tabIndex = -1;
+      }
+      target.focus({ preventScroll: true });
+      target.scrollIntoView({ block: "start", inline: "nearest" });
+      return true;
+    };
+
+    if (scrollToTarget()) return;
+
+    // Lazy routes and plugin slots may mount after the URL changes. Observe the
+    // app until the destination exists instead of dropping the navigation.
+    let observer: MutationObserver | null = null;
+    let timeoutId: number | null = null;
+    const stopWaiting = () => {
+      observer?.disconnect();
+      observer = null;
+      if (timeoutId !== null) {
+        window.clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+    };
+    observer = new MutationObserver(() => {
+      if (scrollToTarget()) stopWaiting();
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    timeoutId = window.setTimeout(stopWaiting, HASH_NAVIGATION_WAIT_MS);
+    return stopWaiting;
+  }, [location.hash, location.key]);
+
+  return null;
+}
+
 function AppRoutes() {
   return (
     <AppLayout>
@@ -203,42 +259,37 @@ function AppRoutes() {
             path={LEGACY_AUTOMATION_DETAIL_ROUTE_PATH}
             element={<LegacyAutomationDetailRedirect />}
           />
-          <Route element={<ToolsExperimentGate />}>
-            <Route
-              path={TOOLS_ROUTE_PATH}
-              element={<ExtensionsLandingRedirect />}
-            />
-            <Route path={SKILLS_ROUTE_PATH} element={<ToolsView />} />
-            <Route
-              path={TOOLS_SKILL_DETAIL_ROUTE_PATH}
-              element={<ToolsView />}
-            />
-            <Route
-              path={LEGACY_TOOLS_SKILL_DETAIL_ROUTE_PATH}
-              element={<LegacySkillDetailRedirect />}
-            />
-            <Route
-              path={TOOLS_REGISTRY_SKILLS_ROUTE_PATH}
-              element={<ToolsView />}
-            />
-            <Route
-              path={TOOLS_REGISTRY_SKILL_DETAIL_ROUTE_PATH}
-              element={<ToolsView />}
-            />
-            <Route path={TOOLS_PLUGINS_ROUTE_PATH} element={<ToolsView />} />
-            <Route
-              path={TOOLS_PLUGIN_BROWSE_ROUTE_PATH}
-              element={<LegacyPluginBrowseRedirect />}
-            />
-            <Route
-              path={TOOLS_PLUGIN_DETAIL_ROUTE_PATH}
-              element={<ToolsView />}
-            />
-            <Route
-              path={LEGACY_SKILLS_ROUTE_PATH}
-              element={<Navigate to={SKILLS_ROUTE_PATH} replace />}
-            />
-          </Route>
+          <Route
+            path={TOOLS_ROUTE_PATH}
+            element={<ExtensionsLandingRedirect />}
+          />
+          <Route path={SKILLS_ROUTE_PATH} element={<ToolsView />} />
+          <Route path={TOOLS_SKILL_DETAIL_ROUTE_PATH} element={<ToolsView />} />
+          <Route
+            path={LEGACY_TOOLS_SKILL_DETAIL_ROUTE_PATH}
+            element={<LegacySkillDetailRedirect />}
+          />
+          <Route
+            path={TOOLS_REGISTRY_SKILLS_ROUTE_PATH}
+            element={<ToolsView />}
+          />
+          <Route
+            path={TOOLS_REGISTRY_SKILL_DETAIL_ROUTE_PATH}
+            element={<ToolsView />}
+          />
+          <Route path={TOOLS_PLUGINS_ROUTE_PATH} element={<ToolsView />} />
+          <Route
+            path={TOOLS_PLUGIN_BROWSE_ROUTE_PATH}
+            element={<LegacyPluginBrowseRedirect />}
+          />
+          <Route
+            path={TOOLS_PLUGIN_DETAIL_ROUTE_PATH}
+            element={<ToolsView />}
+          />
+          <Route
+            path={LEGACY_SKILLS_ROUTE_PATH}
+            element={<Navigate to={SKILLS_ROUTE_PATH} replace />}
+          />
           <Route path="*" element={<SplitWorkspaceRoute />} />
         </Routes>
       </Suspense>
@@ -264,6 +315,7 @@ export function App() {
     <QuickCreateProjectProvider>
       <AppCommandProvider>
         <RouteNavigationProvider>
+          <HashNavigationScroll />
           <Routes>
             <Route
               path={AUTH_CALLBACK_ROUTE_PATH}

apps/app/src/components/layout/AppLayout.plugin-panel-header.test.tsx

@@ -30,7 +30,6 @@ vi.mock("@/hooks/queries/system-queries", () => ({
         claudeCodeMockCliTraffic: false,
         editMessages: false,
         newOnboarding: false,
-        toolsHub: true,
       },
     },
   }),

apps/app/src/components/layout/AppLayout.root-compose-project.test.tsx

@@ -26,7 +26,6 @@ vi.mock("@/hooks/queries/system-queries", () => ({
         claudeCodeMockCliTraffic: false,
         editMessages: false,
         newOnboarding: false,
-        toolsHub: true,
       },
     },
   }),