Refactor Tools Hub and add skill creation from reference

apps/app/src/App.legacy-skill-route.test.tsx

@@ -0,0 +1,37 @@
+// @vitest-environment jsdom
+
+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 { LegacySkillDetailRedirect } from "./App";
+import {
+  LEGACY_TOOLS_SKILL_DETAIL_ROUTE_PATH,
+  TOOLS_SKILL_DETAIL_ROUTE_PATH,
+} from "./lib/route-paths";
+
+function LocationPath() {
+  return <span>{useLocation().pathname}</span>;
+}
+
+describe("LegacySkillDetailRedirect", () => {
+  afterEach(cleanup);
+
+  it("preserves old installed links while Library remains canonical", () => {
+    render(
+      <MemoryRouter initialEntries={["/tools/skills/installed/skill_abc123"]}>
+        <Routes>
+          <Route
+            path={LEGACY_TOOLS_SKILL_DETAIL_ROUTE_PATH}
+            element={<LegacySkillDetailRedirect />}
+          />
+          <Route
+            path={TOOLS_SKILL_DETAIL_ROUTE_PATH}
+            element={<LocationPath />}
+          />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText("/tools/skills/library/skill_abc123")).toBeTruthy();
+  });
+});

apps/app/src/App.tsx

@@ -16,6 +16,7 @@ import {
   LEGACY_AUTOMATION_DETAIL_ROUTE_PATH,
   LEGACY_AUTOMATIONS_ROUTE_PATH,
   LEGACY_SKILLS_ROUTE_PATH,
+  LEGACY_TOOLS_SKILL_DETAIL_ROUTE_PATH,
   PROJECT_ARCHIVED_ROUTE_PATH,
   PROJECTLESS_ARCHIVED_ROUTE_PATH,
   PROJECT_SETTINGS_ROUTE_PATH,
@@ -36,6 +37,7 @@ import {
   TOOLS_SKILL_DETAIL_ROUTE_PATH,
   getAutomationDetailRoutePath,
   getSettingsRoutePath,
+  getSkillDetailRoutePath,
 } from "./lib/route-paths";
 import { AppCommandProvider } from "./components/commands/AppCommandProvider";
 import { ToolsExperimentGate } from "./components/tools/ToolsExperimentGate";
@@ -75,6 +77,16 @@ function LegacyAutomationDetailRedirect() {
   );
 }
 
+export function LegacySkillDetailRedirect() {
+  const { skillId } = useParams<{ skillId?: string }>();
+  return (
+    <Navigate
+      to={skillId ? getSkillDetailRoutePath({ skillId }) : SKILLS_ROUTE_PATH}
+      replace
+    />
+  );
+}
+
 function AppRoutes() {
   return (
     <AppLayout>
@@ -127,6 +139,10 @@ function AppRoutes() {
               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 />}

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

@@ -1,8 +1,40 @@
 import { describe, expect, it } from "vitest";
-import { resolveToolsBreadcrumbs } from "./AppLayout";
+import {
+  resolveToolsBreadcrumbs,
+  TOOLS_NAV_ITEMS,
+} from "@/components/tools/tools-navigation";
 
 describe("resolveToolsBreadcrumbs", () => {
+  it("uses one section identity contract for navigation and page chrome", () => {
+    expect(
+      TOOLS_NAV_ITEMS.map(({ id, label, icon, to }) => ({
+        id,
+        label,
+        icon,
+        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",
+      },
+    ]);
+  });
+
   it("includes the selected collection tab", () => {
+    expect(resolveToolsBreadcrumbs("/tools/skills")).toEqual([
+      { label: "Skills", to: "/tools/skills" },
+      { label: "Library" },
+    ]);
     expect(resolveToolsBreadcrumbs("/tools/skills", "?view=browse")).toEqual([
       { label: "Skills", to: "/tools/skills" },
       { label: "Browse" },
@@ -20,6 +52,17 @@ describe("resolveToolsBreadcrumbs", () => {
   });
 
   it("makes every detail ancestor clickable and keeps the resource passive", () => {
+    expect(
+      resolveToolsBreadcrumbs(
+        "/tools/skills/library/skill_abc123",
+        "",
+        "Example Skill",
+      ),
+    ).toEqual([
+      { label: "Skills", to: "/tools/skills" },
+      { label: "Library", to: "/tools/skills" },
+      { label: "Example Skill" },
+    ]);
     expect(
       resolveToolsBreadcrumbs(
         "/tools/skills/registry/vercel-labs%2Fskills%2Ffind-skills",
@@ -35,11 +78,7 @@ describe("resolveToolsBreadcrumbs", () => {
       { label: "ui-patterns" },
     ]);
     expect(
-      resolveToolsBreadcrumbs(
-        "/tools/plugins/ui-patterns",
-        "",
-        "UI Patterns",
-      ),
+      resolveToolsBreadcrumbs("/tools/plugins/ui-patterns", "", "UI Patterns"),
     ).toEqual([
       { label: "Plugins", to: "/tools/plugins" },
       { label: "Installed", to: "/tools/plugins" },