Separate Automations from Extensions

apps/app/.ladle/ladle.css

@@ -1,6 +1,11 @@
 @import "../src/app.css";
 @source "../src";
 @source ".";
+/* Plugin-owned views render in these stories but live outside apps/app, so
+   Tailwind never saw their classes: anything a plugin used that the app did not
+   silently rendered unstyled here while working in the real app, which builds
+   the plugin's CSS separately. */
+@source "../../../plugins/automations";
 
 .ladle-main {
   padding: 0;

apps/app/src/App.legacy-automation-routes.test.tsx

@@ -0,0 +1,88 @@
+// @vitest-environment jsdom
+
+import type { ReactNode } from "react";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom";
+import {
+  LegacyAutomationCollectionRedirect,
+  LegacyAutomationDetailRedirect,
+} from "./App";
+import {
+  LEGACY_AUTOMATION_DETAIL_ROUTE_PATH,
+  LEGACY_AUTOMATIONS_ROUTE_PATH,
+  LEGACY_TOOLS_AUTOMATION_BROWSE_ROUTE_PATH,
+  LEGACY_TOOLS_AUTOMATION_DETAIL_ROUTE_PATH,
+  LEGACY_TOOLS_AUTOMATION_EDIT_ROUTE_PATH,
+  LEGACY_TOOLS_AUTOMATIONS_ROUTE_PATH,
+} from "./lib/route-paths";
+
+function LocationPath() {
+  const location = useLocation();
+  return <span>{`${location.pathname}${location.search}`}</span>;
+}
+
+function renderRedirect(path: string, pattern: string, element: ReactNode) {
+  render(
+    <MemoryRouter initialEntries={[path]}>
+      <Routes>
+        <Route path={pattern} element={element} />
+        <Route path="*" element={<LocationPath />} />
+      </Routes>
+    </MemoryRouter>,
+  );
+}
+
+describe("legacy automation route redirects", () => {
+  afterEach(cleanup);
+
+  it.each([
+    [
+      "/tools/automations",
+      LEGACY_TOOLS_AUTOMATIONS_ROUTE_PATH,
+      "/plugins/automations/automations",
+    ],
+    [
+      "/tools/automations?view=browse",
+      LEGACY_TOOLS_AUTOMATIONS_ROUTE_PATH,
+      "/plugins/automations/automations/browse",
+    ],
+    [
+      "/tools/automations/browse",
+      LEGACY_TOOLS_AUTOMATION_BROWSE_ROUTE_PATH,
+      "/plugins/automations/automations/browse",
+    ],
+    [
+      "/automations",
+      LEGACY_AUTOMATIONS_ROUTE_PATH,
+      "/plugins/automations/automations",
+    ],
+  ])("redirects %s to %s", (from, pattern, to) => {
+    renderRedirect(from, pattern, <LegacyAutomationCollectionRedirect />);
+    expect(screen.getByText(to)).toBeTruthy();
+  });
+
+  it.each([
+    [
+      "/tools/automations/proj_1/auto_1",
+      LEGACY_TOOLS_AUTOMATION_DETAIL_ROUTE_PATH,
+      "/plugins/automations/automations/proj_1/auto_1",
+    ],
+    [
+      "/tools/automations/proj_1/auto_1/edit",
+      LEGACY_TOOLS_AUTOMATION_EDIT_ROUTE_PATH,
+      "/plugins/automations/automations/proj_1/auto_1/edit",
+    ],
+    [
+      "/automations/proj_1/auto_1",
+      LEGACY_AUTOMATION_DETAIL_ROUTE_PATH,
+      "/plugins/automations/automations/proj_1/auto_1",
+    ],
+  ])(
+    "preserves automation identity when redirecting %s",
+    (from, pattern, to) => {
+      renderRedirect(from, pattern, <LegacyAutomationDetailRedirect />);
+      expect(screen.getByText(to)).toBeTruthy();
+    },
+  );
+});

apps/app/src/App.tsx

@@ -1,5 +1,11 @@
 import { lazy, Suspense } from "react";
-import { Navigate, Route, Routes, useParams } from "react-router-dom";
+import {
+  Navigate,
+  Route,
+  Routes,
+  useLocation,
+  useParams,
+} from "react-router-dom";
 import { AppLayout } from "./components/layout/AppLayout";
 import { AuthCallbackView } from "./views/AuthCallbackView";
 import { QuickCreateProjectProvider } from "./hooks/useQuickCreateProject";
@@ -10,12 +16,14 @@ import { useDesktopThemeSync } from "./hooks/useDesktopThemeSync";
 import { usePluginFrontendBoot } from "./hooks/usePluginFrontendBoot";
 import { useWebSocket } from "./hooks/useWebSocket";
 import {
-  AUTOMATION_DETAIL_ROUTE_PATH,
-  AUTOMATIONS_ROUTE_PATH,
   AUTH_CALLBACK_ROUTE_PATH,
   LEGACY_AUTOMATION_DETAIL_ROUTE_PATH,
   LEGACY_AUTOMATIONS_ROUTE_PATH,
   LEGACY_SKILLS_ROUTE_PATH,
+  LEGACY_TOOLS_AUTOMATION_BROWSE_ROUTE_PATH,
+  LEGACY_TOOLS_AUTOMATION_DETAIL_ROUTE_PATH,
+  LEGACY_TOOLS_AUTOMATION_EDIT_ROUTE_PATH,
+  LEGACY_TOOLS_AUTOMATIONS_ROUTE_PATH,
   LEGACY_TOOLS_SKILL_DETAIL_ROUTE_PATH,
   PROJECT_ARCHIVED_ROUTE_PATH,
   PROJECTLESS_ARCHIVED_ROUTE_PATH,
@@ -26,8 +34,6 @@ import {
   SETTINGS_ROUTE_PATH,
   SETTINGS_SECTION_ROUTE_PATH,
   SKILLS_ROUTE_PATH,
-  TOOLS_AUTOMATION_BROWSE_ROUTE_PATH,
-  TOOLS_AUTOMATION_EDIT_ROUTE_PATH,
   TOOLS_PLUGIN_BROWSE_ROUTE_PATH,
   TOOLS_PLUGIN_DETAIL_ROUTE_PATH,
   TOOLS_PLUGINS_ROUTE_PATH,
@@ -36,6 +42,8 @@ import {
   TOOLS_ROUTE_PATH,
   TOOLS_SKILL_DETAIL_ROUTE_PATH,
   getAutomationDetailRoutePath,
+  getAutomationEditRoutePath,
+  getAutomationsRoutePath,
   getSettingsRoutePath,
   getSkillDetailRoutePath,
 } from "./lib/route-paths";
@@ -61,18 +69,40 @@ const ProjectSettingsView = lazy(() =>
 );
 const SplitWorkspaceRoute = lazy(() => import("./views/SplitWorkspaceRoute"));
 
-function LegacyAutomationDetailRedirect() {
+export function LegacyAutomationDetailRedirect() {
+  const location = useLocation();
   const { projectId, automationId } = useParams<{
     projectId?: string;
     automationId?: string;
   }>();
 
   if (!projectId || !automationId) {
-    return <Navigate to={AUTOMATIONS_ROUTE_PATH} replace />;
+    return <Navigate to={getAutomationsRoutePath()} replace />;
   }
   return (
     <Navigate
-      to={getAutomationDetailRoutePath({ projectId, automationId })}
+      to={
+        location.pathname.endsWith("/edit")
+          ? getAutomationEditRoutePath({ projectId, automationId })
+          : getAutomationDetailRoutePath({ projectId, automationId })
+      }
+      replace
+    />
+  );
+}
+
+export function LegacyAutomationCollectionRedirect() {
+  const location = useLocation();
+  const browse =
+    location.pathname.endsWith("/browse") ||
+    new URLSearchParams(location.search).get("view") === "browse";
+  return (
+    <Navigate
+      to={
+        browse
+          ? `${getAutomationsRoutePath()}/browse`
+          : getAutomationsRoutePath()
+      }
       replace
     />
   );
@@ -130,6 +160,30 @@ function AppRoutes() {
             path={PROJECTLESS_ARCHIVED_ROUTE_PATH}
             element={<Navigate to={getSettingsRoutePath("archived")} replace />}
           />
+          <Route
+            path={LEGACY_TOOLS_AUTOMATIONS_ROUTE_PATH}
+            element={<LegacyAutomationCollectionRedirect />}
+          />
+          <Route
+            path={LEGACY_TOOLS_AUTOMATION_BROWSE_ROUTE_PATH}
+            element={<LegacyAutomationCollectionRedirect />}
+          />
+          <Route
+            path={LEGACY_TOOLS_AUTOMATION_DETAIL_ROUTE_PATH}
+            element={<LegacyAutomationDetailRedirect />}
+          />
+          <Route
+            path={LEGACY_TOOLS_AUTOMATION_EDIT_ROUTE_PATH}
+            element={<LegacyAutomationDetailRedirect />}
+          />
+          <Route
+            path={LEGACY_AUTOMATIONS_ROUTE_PATH}
+            element={<LegacyAutomationCollectionRedirect />}
+          />
+          <Route
+            path={LEGACY_AUTOMATION_DETAIL_ROUTE_PATH}
+            element={<LegacyAutomationDetailRedirect />}
+          />
           <Route element={<ToolsExperimentGate />}>
             <Route
               path={TOOLS_ROUTE_PATH}
@@ -166,36 +220,10 @@ function AppRoutes() {
               path={TOOLS_PLUGIN_DETAIL_ROUTE_PATH}
               element={<ToolsView />}
             />
-            <Route path={AUTOMATIONS_ROUTE_PATH} element={<ToolsView />} />
-            <Route
-              path={TOOLS_AUTOMATION_BROWSE_ROUTE_PATH}
-              element={
-                <Navigate
-                  to={`${AUTOMATIONS_ROUTE_PATH}?view=browse`}
-                  replace
-                />
-              }
-            />
-            <Route
-              path={AUTOMATION_DETAIL_ROUTE_PATH}
-              element={<ToolsView />}
-            />
-            <Route
-              path={TOOLS_AUTOMATION_EDIT_ROUTE_PATH}
-              element={<ToolsView />}
-            />
             <Route
               path={LEGACY_SKILLS_ROUTE_PATH}
               element={<Navigate to={SKILLS_ROUTE_PATH} replace />}
             />
-            <Route
-              path={LEGACY_AUTOMATIONS_ROUTE_PATH}
-              element={<Navigate to={AUTOMATIONS_ROUTE_PATH} replace />}
-            />
-            <Route
-              path={LEGACY_AUTOMATION_DETAIL_ROUTE_PATH}
-              element={<LegacyAutomationDetailRedirect />}
-            />
           </Route>
           <Route path="*" element={<SplitWorkspaceRoute />} />
         </Routes>

apps/app/src/app.css

@@ -578,31 +578,37 @@
   }
 
   /*
-   * Keep thread timelines visually quiet at rest while preserving the native
-   * scroll container, its hit area, and its layout geometry. The timeline
-   * scroll owner briefly sets `data-scrollbar-scrolling` for real scroll
-   * events, matching the transient scrollbar behavior users expect from the
-   * platform without making pane content reflow as the thumb appears.
+   * Keep reading surfaces visually quiet at rest while preserving the native
+   * scroll container, its hit area, and its layout geometry. The scroll owner
+   * briefly sets `data-scrollbar-scrolling` for real scroll events, matching
+   * the platform's transient scrollbar behavior without making content reflow
+   * as the thumb appears.
    */
-  .thread-scrollbar {
+  .thread-scrollbar,
+  .transient-scrollbar {
     scrollbar-color: transparent transparent;
   }
 
   .thread-scrollbar::-webkit-scrollbar-thumb,
-  .thread-scrollbar::-webkit-scrollbar-thumb:hover {
+  .thread-scrollbar::-webkit-scrollbar-thumb:hover,
+  .transient-scrollbar::-webkit-scrollbar-thumb,
+  .transient-scrollbar::-webkit-scrollbar-thumb:hover {
     background-color: transparent;
   }
 
-  .thread-scrollbar[data-scrollbar-scrolling="true"] {
+  .thread-scrollbar[data-scrollbar-scrolling="true"],
+  .transient-scrollbar[data-scrollbar-scrolling="true"] {
     scrollbar-color: color-mix(in oklab, var(--foreground) 20%, transparent)
       transparent;
   }
 
-  .thread-scrollbar[data-scrollbar-scrolling="true"]::-webkit-scrollbar-thumb {
+  .thread-scrollbar[data-scrollbar-scrolling="true"]::-webkit-scrollbar-thumb,
+  .transient-scrollbar[data-scrollbar-scrolling="true"]::-webkit-scrollbar-thumb {
     background-color: color-mix(in oklab, var(--foreground) 20%, transparent);
   }
 
-  .thread-scrollbar[data-scrollbar-scrolling="true"]::-webkit-scrollbar-thumb:hover {
+  .thread-scrollbar[data-scrollbar-scrolling="true"]::-webkit-scrollbar-thumb:hover,
+  .transient-scrollbar[data-scrollbar-scrolling="true"]::-webkit-scrollbar-thumb:hover {
     background-color: color-mix(in oklab, var(--foreground) 40%, transparent);
   }
 

apps/app/src/components/layout/AppLayout.tools-breadcrumbs.test.ts

@@ -14,19 +14,13 @@ describe("resolveToolsBreadcrumbs", () => {
         to,
       })),
     ).toEqual([
-      { id: "skills", label: "Skills", icon: "Zap", to: "/tools/skills" },
       {
         id: "plugins",
         label: "Plugins",
         icon: "ElectricPlugs",
         to: "/tools/plugins",
       },
-      {
-        id: "automations",
-        label: "Automations",
-        icon: "TimeSchedule",
-        to: "/tools/automations",
-      },
+      { id: "skills", label: "Skills", icon: "Zap", to: "/tools/skills" },
     ]);
   });
 
@@ -43,12 +37,6 @@ describe("resolveToolsBreadcrumbs", () => {
       { label: "Plugins", to: "/tools/plugins" },
       { label: "Installed" },
     ]);
-    expect(
-      resolveToolsBreadcrumbs("/tools/automations", "?view=browse"),
-    ).toEqual([
-      { label: "Automations", to: "/tools/automations" },
-      { label: "Browse" },
-    ]);
   });
 
   it("resolves literal browse paths as Browse, not as a resource named browse", () => {
@@ -63,10 +51,6 @@ describe("resolveToolsBreadcrumbs", () => {
       { label: "Skills", to: "/tools/skills" },
       { label: "Browse" },
     ]);
-    expect(resolveToolsBreadcrumbs("/tools/automations/browse")).toEqual([
-      { label: "Automations", to: "/tools/automations" },
-      { label: "Browse" },
-    ]);
   });
 
   it("makes every detail ancestor clickable and keeps the resource passive", () => {
@@ -103,15 +87,9 @@ describe("resolveToolsBreadcrumbs", () => {
       { label: "UI Patterns" },
     ]);
     expect(
-      resolveToolsBreadcrumbs("/tools/automations/personal/weekly-review/edit"),
-    ).toEqual([
-      { label: "Automations", to: "/tools/automations" },
-      { label: "Installed", to: "/tools/automations" },
-      {
-        label: "weekly-review",
-        to: "/tools/automations/personal/weekly-review",
-      },
-      { label: "Edit" },
-    ]);
+      resolveToolsBreadcrumbs(
+        "/plugins/automations/automations/personal/weekly-review",
+      ),
+    ).toBeNull();
   });
 });

apps/app/src/components/layout/AppLayout.tsx

@@ -637,9 +637,9 @@ export function AppLayout({ children }: AppLayoutProps) {
       ? `Thread ${threadId.slice(0, 8)}`
       : "Thread";
   // Gated with the rest of the Tools surface: ROOT_ROUTE_ALIASES maps /skills
-  // and /automations into Tools crumbs, so a gate-off user following an old
-  // link would otherwise see Tools chrome for the whole config fetch before
-  // ToolsExperimentGate redirects them away.
+  // into Tools crumbs, so a gate-off user following an old link would otherwise
+  // see Tools chrome for the whole config fetch before ToolsExperimentGate
+  // redirects them away.
   const toolsBreadcrumbs = toolsHubEnabled
     ? resolveToolsBreadcrumbs(
         location.pathname,