Make toolkits a first-class route

Rhys Sullivan committed 4 months ago

Commit be7fa251 parent d1fb12515 files · +602 −178Browse files

Unified · Split

15 files

apps/cloud/src/routeTree.gen.ts +65 −0
apps/host-cloudflare/web/routeTree.gen.ts +61 −0
apps/host-selfhost/web/routeTree.gen.ts +61 −0
e2e/selfhost/toolkits-ui.test.ts +37 −16
packages/app/src/routeTree.gen.ts +58 −0
packages/app/src/web/shell.tsx +7 −0
packages/plugins/toolkits/src/client.tsx +0 −1
packages/plugins/toolkits/src/page.tsx +190 −158
packages/react/src/console-routes.ts +4 −0
packages/react/src/multiplayer/shell.tsx +1 −0
packages/react/src/routes/plugins.$pluginId.$.tsx +18 −3
packages/react/src/routes/routeTree.gen.ts +53 −0
packages/react/src/routes/toolkits-route.tsx +23 −0
packages/react/src/routes/toolkits.$toolkitSlug.tsx +12 −0
packages/react/src/routes/toolkits.tsx +12 −0

apps/cloud/src/routeTree.gen.ts+65−0

 import { Route as CreateOrgRouteImport } from './routes/bare/create-org'
 import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRouteImport } from './../../../packages/react/src/routes/index'
 import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRouteImport } from './../../../packages/react/src/routes/tools'
+import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteImport } from './../../../packages/react/src/routes/toolkits'
 import { Route as SecretsRouteImport } from './routes/app/secrets'
 import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRouteImport } from './../../../packages/react/src/routes/policies'
 import { Route as OrgRouteImport } from './routes/app/org'
 import { Route as BillingRouteImport } from './routes/app/billing'
 import { Route as ApiKeysRouteImport } from './routes/app/api-keys'
+import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRouteImport } from './../../../packages/react/src/routes/toolkits.$toolkitSlug'
 import { Route as ResumeDotexecutionIdRouteImport } from './routes/app/resume.$executionId'
 import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotnamespaceRouteImport } from './../../../packages/react/src/routes/integrations.$namespace'
 import { Route as Billing_DotplansRouteImport } from './routes/app/billing_.plans'
     path: '/{-$orgSlug}/tools',
     getParentRoute: () => rootRouteImport,
   } as any)
+const DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRoute =
+  DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteImport.update({
+    id: '/{-$orgSlug}/toolkits',
+    path: '/{-$orgSlug}/toolkits',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const SecretsRoute = SecretsRouteImport.update({
   id: '/{-$orgSlug}/secrets',
   path: '/{-$orgSlug}/secrets',
   path: '/{-$orgSlug}/api-keys',
   getParentRoute: () => rootRouteImport,
 } as any)
+const DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute =
+  DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRouteImport.update(
+    {
+      id: '/$toolkitSlug',
+      path: '/$toolkitSlug',
+      getParentRoute: () =>
+        DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRoute,
+    } as any,
+  )
 const ResumeDotexecutionIdRoute = ResumeDotexecutionIdRouteImport.update({
   id: '/{-$orgSlug}/resume/$executionId',
   path: '/{-$orgSlug}/resume/$executionId',
   '/{-$orgSlug}/org': typeof OrgRoute
   '/{-$orgSlug}/policies': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute
   '/{-$orgSlug}/secrets': typeof SecretsRoute
+  '/{-$orgSlug}/toolkits': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteWithChildren
   '/{-$orgSlug}/tools': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute
   '/{-$orgSlug}/': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRoute
   '/{-$orgSlug}/billing/plans': typeof Billing_DotplansRoute
   '/{-$orgSlug}/integrations/$namespace': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotnamespaceRoute
   '/{-$orgSlug}/resume/$executionId': typeof ResumeDotexecutionIdRoute
+  '/{-$orgSlug}/toolkits/$toolkitSlug': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute
   '/{-$orgSlug}/integrations/add/$pluginKey': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotaddDotpluginKeyRoute
 }
 export interface FileRoutesByTo {
   '/{-$orgSlug}/org': typeof OrgRoute
   '/{-$orgSlug}/policies': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute
   '/{-$orgSlug}/secrets': typeof SecretsRoute
+  '/{-$orgSlug}/toolkits': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteWithChildren
   '/{-$orgSlug}/tools': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute
   '/{-$orgSlug}': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRoute
   '/{-$orgSlug}/billing/plans': typeof Billing_DotplansRoute
   '/{-$orgSlug}/integrations/$namespace': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotnamespaceRoute
   '/{-$orgSlug}/resume/$executionId': typeof ResumeDotexecutionIdRoute
+  '/{-$orgSlug}/toolkits/$toolkitSlug': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute
   '/{-$orgSlug}/integrations/add/$pluginKey': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotaddDotpluginKeyRoute
 }
 export interface FileRoutesById {
   '/{-$orgSlug}/org': typeof OrgRoute
   '/{-$orgSlug}/policies': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute
   '/{-$orgSlug}/secrets': typeof SecretsRoute
+  '/{-$orgSlug}/toolkits': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteWithChildren
   '/{-$orgSlug}/tools': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute
   '/{-$orgSlug}/': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRoute
   '/{-$orgSlug}/billing_/plans': typeof Billing_DotplansRoute
   '/{-$orgSlug}/integrations/$namespace': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotnamespaceRoute
   '/{-$orgSlug}/resume/$executionId': typeof ResumeDotexecutionIdRoute
+  '/{-$orgSlug}/toolkits/$toolkitSlug': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute
   '/{-$orgSlug}/integrations/add/$pluginKey': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotaddDotpluginKeyRoute
 }
 export interface FileRouteTypes {
     | '/{-$orgSlug}/org'
     | '/{-$orgSlug}/policies'
     | '/{-$orgSlug}/secrets'
+    | '/{-$orgSlug}/toolkits'
     | '/{-$orgSlug}/tools'
     | '/{-$orgSlug}/'
     | '/{-$orgSlug}/billing/plans'
     | '/{-$orgSlug}/integrations/$namespace'
     | '/{-$orgSlug}/resume/$executionId'
+    | '/{-$orgSlug}/toolkits/$toolkitSlug'
     | '/{-$orgSlug}/integrations/add/$pluginKey'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/{-$orgSlug}/org'
     | '/{-$orgSlug}/policies'
     | '/{-$orgSlug}/secrets'
+    | '/{-$orgSlug}/toolkits'
     | '/{-$orgSlug}/tools'
     | '/{-$orgSlug}'
     | '/{-$orgSlug}/billing/plans'
     | '/{-$orgSlug}/integrations/$namespace'
     | '/{-$orgSlug}/resume/$executionId'
+    | '/{-$orgSlug}/toolkits/$toolkitSlug'
     | '/{-$orgSlug}/integrations/add/$pluginKey'
   id:
     | '__root__'
     | '/{-$orgSlug}/org'
     | '/{-$orgSlug}/policies'
     | '/{-$orgSlug}/secrets'
+    | '/{-$orgSlug}/toolkits'
     | '/{-$orgSlug}/tools'
     | '/{-$orgSlug}/'
     | '/{-$orgSlug}/billing_/plans'
     | '/{-$orgSlug}/integrations/$namespace'
     | '/{-$orgSlug}/resume/$executionId'
+    | '/{-$orgSlug}/toolkits/$toolkitSlug'
     | '/{-$orgSlug}/integrations/add/$pluginKey'
   fileRoutesById: FileRoutesById
 }
   OrgRoute: typeof OrgRoute
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute
   SecretsRoute: typeof SecretsRoute
+  DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteWithChildren
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRoute
   Billing_DotplansRoute: typeof Billing_DotplansRoute
       preLoaderRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/{-$orgSlug}/toolkits': {
+      id: '/{-$orgSlug}/toolkits'
+      path: '/{-$orgSlug}/toolkits'
+      fullPath: '/{-$orgSlug}/toolkits'
+      preLoaderRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/{-$orgSlug}/secrets': {
       id: '/{-$orgSlug}/secrets'
       path: '/{-$orgSlug}/secrets'
       preLoaderRoute: typeof ApiKeysRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/{-$orgSlug}/toolkits/$toolkitSlug': {
+      id: '/{-$orgSlug}/toolkits/$toolkitSlug'
+      path: '/$toolkitSlug'
+      fullPath: '/{-$orgSlug}/toolkits/$toolkitSlug'
+      preLoaderRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRouteImport
+      parentRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRoute
+    }
     '/{-$orgSlug}/resume/$executionId': {
       id: '/{-$orgSlug}/resume/$executionId'
       path: '/{-$orgSlug}/resume/$executionId'
   }
 }
+interface DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteChildren {
+  DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute
+}
+const DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteChildren: DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteChildren =
+  {
+    DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute:
+      DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute,
+  }
+const DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteWithChildren =
+  DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRoute._addFileChildren(
+    DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteChildren,
+  )
 const rootRouteChildren: RootRouteChildren = {
   CreateOrgRoute: CreateOrgRoute,
   LoginRoute: LoginRoute,
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute:
     DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute,
   SecretsRoute: SecretsRoute,
+  DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRoute:
+    DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteWithChildren,
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute:
     DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute,
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRoute:
   ._addFileTypes<FileRouteTypes>()
 import type { getRouter } from './router.tsx'
 import type { startInstance } from './start.ts'
 declare module '@tanstack/react-start' {
   interface Register {
     ssr: true
     router: Awaited<ReturnType<typeof getRouter>>
     config: Awaited<ReturnType<typeof startInstance.getOptions>>
   }
 }

apps/host-cloudflare/web/routeTree.gen.ts+61−0

 import { Route as rootRouteImport } from './routes/__root'
 import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRouteImport } from './../../../packages/react/src/routes/index'
 import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRouteImport } from './../../../packages/react/src/routes/tools'
+import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteImport } from './../../../packages/react/src/routes/toolkits'
 import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRouteImport } from './../../../packages/react/src/routes/secrets'
 import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRouteImport } from './../../../packages/react/src/routes/policies'
+import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRouteImport } from './../../../packages/react/src/routes/toolkits.$toolkitSlug'
 import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesResumeDotexecutionIdRouteImport } from './../../../packages/react/src/routes/resume.$executionId'
 import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotnamespaceRouteImport } from './../../../packages/react/src/routes/integrations.$namespace'
 import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPluginsDotpluginIdDotsplatRouteImport } from './../../../packages/react/src/routes/plugins.$pluginId.$'
     path: '/{-$orgSlug}/tools',
     getParentRoute: () => rootRouteImport,
   } as any)
+const DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRoute =
+  DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteImport.update({
+    id: '/{-$orgSlug}/toolkits',
+    path: '/{-$orgSlug}/toolkits',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRoute =
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRouteImport.update({
     id: '/{-$orgSlug}/secrets',
     path: '/{-$orgSlug}/policies',
     getParentRoute: () => rootRouteImport,
   } as any)
+const DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute =
+  DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRouteImport.update(
+    {
+      id: '/$toolkitSlug',
+      path: '/$toolkitSlug',
+      getParentRoute: () =>
+        DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRoute,
+    } as any,
+  )
 const DotDotDotDotDotDotDotDotPackagesReactSrcRoutesResumeDotexecutionIdRoute =
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesResumeDotexecutionIdRouteImport.update(
     {
 export interface FileRoutesByFullPath {
   '/{-$orgSlug}/policies': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute
   '/{-$orgSlug}/secrets': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRoute
+  '/{-$orgSlug}/toolkits': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteWithChildren
   '/{-$orgSlug}/tools': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute
   '/{-$orgSlug}/': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRoute
   '/{-$orgSlug}/integrations/$namespace': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotnamespaceRoute
   '/{-$orgSlug}/resume/$executionId': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesResumeDotexecutionIdRoute
+  '/{-$orgSlug}/toolkits/$toolkitSlug': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute
   '/{-$orgSlug}/integrations/add/$pluginKey': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotaddDotpluginKeyRoute
   '/{-$orgSlug}/plugins/$pluginId/$': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPluginsDotpluginIdDotsplatRoute
 }
 export interface FileRoutesByTo {
   '/{-$orgSlug}/policies': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute
   '/{-$orgSlug}/secrets': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRoute
+  '/{-$orgSlug}/toolkits': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteWithChildren
   '/{-$orgSlug}/tools': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute
   '/{-$orgSlug}': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRoute
   '/{-$orgSlug}/integrations/$namespace': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotnamespaceRoute
   '/{-$orgSlug}/resume/$executionId': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesResumeDotexecutionIdRoute
+  '/{-$orgSlug}/toolkits/$toolkitSlug': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute
   '/{-$orgSlug}/integrations/add/$pluginKey': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotaddDotpluginKeyRoute
   '/{-$orgSlug}/plugins/$pluginId/$': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPluginsDotpluginIdDotsplatRoute
 }
   __root__: typeof rootRouteImport
   '/{-$orgSlug}/policies': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute
   '/{-$orgSlug}/secrets': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRoute
+  '/{-$orgSlug}/toolkits': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteWithChildren
   '/{-$orgSlug}/tools': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute
   '/{-$orgSlug}/': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRoute
   '/{-$orgSlug}/integrations/$namespace': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotnamespaceRoute
   '/{-$orgSlug}/resume/$executionId': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesResumeDotexecutionIdRoute
+  '/{-$orgSlug}/toolkits/$toolkitSlug': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute
   '/{-$orgSlug}/integrations/add/$pluginKey': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotaddDotpluginKeyRoute
   '/{-$orgSlug}/plugins/$pluginId/$': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPluginsDotpluginIdDotsplatRoute
 }
   fullPaths:
     | '/{-$orgSlug}/policies'
     | '/{-$orgSlug}/secrets'
+    | '/{-$orgSlug}/toolkits'
     | '/{-$orgSlug}/tools'
     | '/{-$orgSlug}/'
     | '/{-$orgSlug}/integrations/$namespace'
     | '/{-$orgSlug}/resume/$executionId'
+    | '/{-$orgSlug}/toolkits/$toolkitSlug'
     | '/{-$orgSlug}/integrations/add/$pluginKey'
     | '/{-$orgSlug}/plugins/$pluginId/$'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/{-$orgSlug}/policies'
     | '/{-$orgSlug}/secrets'
+    | '/{-$orgSlug}/toolkits'
     | '/{-$orgSlug}/tools'
     | '/{-$orgSlug}'
     | '/{-$orgSlug}/integrations/$namespace'
     | '/{-$orgSlug}/resume/$executionId'
+    | '/{-$orgSlug}/toolkits/$toolkitSlug'
     | '/{-$orgSlug}/integrations/add/$pluginKey'
     | '/{-$orgSlug}/plugins/$pluginId/$'
   id:
     | '__root__'
     | '/{-$orgSlug}/policies'
     | '/{-$orgSlug}/secrets'
+    | '/{-$orgSlug}/toolkits'
     | '/{-$orgSlug}/tools'
     | '/{-$orgSlug}/'
     | '/{-$orgSlug}/integrations/$namespace'
     | '/{-$orgSlug}/resume/$executionId'
+    | '/{-$orgSlug}/toolkits/$toolkitSlug'
     | '/{-$orgSlug}/integrations/add/$pluginKey'
     | '/{-$orgSlug}/plugins/$pluginId/$'
   fileRoutesById: FileRoutesById
 export interface RootRouteChildren {
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRoute
+  DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteWithChildren
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRoute
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotnamespaceRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotnamespaceRoute
       preLoaderRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/{-$orgSlug}/toolkits': {
+      id: '/{-$orgSlug}/toolkits'
+      path: '/{-$orgSlug}/toolkits'
+      fullPath: '/{-$orgSlug}/toolkits'
+      preLoaderRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/{-$orgSlug}/secrets': {
       id: '/{-$orgSlug}/secrets'
       path: '/{-$orgSlug}/secrets'
       preLoaderRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/{-$orgSlug}/toolkits/$toolkitSlug': {
+      id: '/{-$orgSlug}/toolkits/$toolkitSlug'
+      path: '/$toolkitSlug'
+      fullPath: '/{-$orgSlug}/toolkits/$toolkitSlug'
+      preLoaderRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRouteImport
+      parentRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRoute
+    }
     '/{-$orgSlug}/resume/$executionId': {
       id: '/{-$orgSlug}/resume/$executionId'
       path: '/{-$orgSlug}/resume/$executionId'
   }
 }
+interface DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteChildren {
+  DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute
+}
+const DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteChildren: DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteChildren =
+  {
+    DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute:
+      DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute,
+  }
+const DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteWithChildren =
+  DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRoute._addFileChildren(
+    DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteChildren,
+  )
 const rootRouteChildren: RootRouteChildren = {
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute:
     DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute,
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRoute:
     DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRoute,
+  DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRoute:
+    DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteWithChildren,
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute:
     DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute,
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRoute:

apps/host-selfhost/web/routeTree.gen.ts+61−0

 import { Route as rootRouteImport } from './routes/__root'
 import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRouteImport } from './../../../packages/react/src/routes/index'
 import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRouteImport } from './../../../packages/react/src/routes/tools'
+import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteImport } from './../../../packages/react/src/routes/toolkits'
 import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRouteImport } from './../../../packages/react/src/routes/secrets'
 import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRouteImport } from './../../../packages/react/src/routes/policies'
 import { Route as ApiKeysRouteImport } from './routes/app/api-keys'
 import { Route as AdminRouteImport } from './routes/app/admin'
 import { Route as JoinDotcodeRouteImport } from './routes/public/join.$code'
+import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRouteImport } from './../../../packages/react/src/routes/toolkits.$toolkitSlug'
 import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesResumeDotexecutionIdRouteImport } from './../../../packages/react/src/routes/resume.$executionId'
 import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotnamespaceRouteImport } from './../../../packages/react/src/routes/integrations.$namespace'
 import { Route as DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPluginsDotpluginIdDotsplatRouteImport } from './../../../packages/react/src/routes/plugins.$pluginId.$'
     path: '/{-$orgSlug}/tools',
     getParentRoute: () => rootRouteImport,
   } as any)
+const DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRoute =
+  DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteImport.update({
+    id: '/{-$orgSlug}/toolkits',
+    path: '/{-$orgSlug}/toolkits',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRoute =
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRouteImport.update({
     id: '/{-$orgSlug}/secrets',
   path: '/join/$code',
   getParentRoute: () => rootRouteImport,
 } as any)
+const DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute =
+  DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRouteImport.update(
+    {
+      id: '/$toolkitSlug',
+      path: '/$toolkitSlug',
+      getParentRoute: () =>
+        DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRoute,
+    } as any,
+  )
 const DotDotDotDotDotDotDotDotPackagesReactSrcRoutesResumeDotexecutionIdRoute =
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesResumeDotexecutionIdRouteImport.update(
     {
   '/{-$orgSlug}/api-keys': typeof ApiKeysRoute
   '/{-$orgSlug}/policies': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute
   '/{-$orgSlug}/secrets': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRoute
+  '/{-$orgSlug}/toolkits': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteWithChildren
   '/{-$orgSlug}/tools': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute
   '/{-$orgSlug}/': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRoute
   '/{-$orgSlug}/integrations/$namespace': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotnamespaceRoute
   '/{-$orgSlug}/resume/$executionId': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesResumeDotexecutionIdRoute
+  '/{-$orgSlug}/toolkits/$toolkitSlug': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute
   '/{-$orgSlug}/integrations/add/$pluginKey': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotaddDotpluginKeyRoute
   '/{-$orgSlug}/plugins/$pluginId/$': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPluginsDotpluginIdDotsplatRoute
 }
   '/{-$orgSlug}/api-keys': typeof ApiKeysRoute
   '/{-$orgSlug}/policies': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute
   '/{-$orgSlug}/secrets': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRoute
+  '/{-$orgSlug}/toolkits': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteWithChildren
   '/{-$orgSlug}/tools': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute
   '/{-$orgSlug}': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRoute
   '/{-$orgSlug}/integrations/$namespace': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotnamespaceRoute
   '/{-$orgSlug}/resume/$executionId': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesResumeDotexecutionIdRoute
+  '/{-$orgSlug}/toolkits/$toolkitSlug': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute
   '/{-$orgSlug}/integrations/add/$pluginKey': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotaddDotpluginKeyRoute
   '/{-$orgSlug}/plugins/$pluginId/$': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPluginsDotpluginIdDotsplatRoute
 }
   '/{-$orgSlug}/api-keys': typeof ApiKeysRoute
   '/{-$orgSlug}/policies': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute
   '/{-$orgSlug}/secrets': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRoute
+  '/{-$orgSlug}/toolkits': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteWithChildren
   '/{-$orgSlug}/tools': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute
   '/{-$orgSlug}/': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRoute
   '/{-$orgSlug}/integrations/$namespace': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotnamespaceRoute
   '/{-$orgSlug}/resume/$executionId': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesResumeDotexecutionIdRoute
+  '/{-$orgSlug}/toolkits/$toolkitSlug': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute
   '/{-$orgSlug}/integrations/add/$pluginKey': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotaddDotpluginKeyRoute
   '/{-$orgSlug}/plugins/$pluginId/$': typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPluginsDotpluginIdDotsplatRoute
 }
     | '/{-$orgSlug}/api-keys'
     | '/{-$orgSlug}/policies'
     | '/{-$orgSlug}/secrets'
+    | '/{-$orgSlug}/toolkits'
     | '/{-$orgSlug}/tools'
     | '/{-$orgSlug}/'
     | '/{-$orgSlug}/integrations/$namespace'
     | '/{-$orgSlug}/resume/$executionId'
+    | '/{-$orgSlug}/toolkits/$toolkitSlug'
     | '/{-$orgSlug}/integrations/add/$pluginKey'
     | '/{-$orgSlug}/plugins/$pluginId/$'
   fileRoutesByTo: FileRoutesByTo
     | '/{-$orgSlug}/api-keys'
     | '/{-$orgSlug}/policies'
     | '/{-$orgSlug}/secrets'
+    | '/{-$orgSlug}/toolkits'
     | '/{-$orgSlug}/tools'
     | '/{-$orgSlug}'
     | '/{-$orgSlug}/integrations/$namespace'
     | '/{-$orgSlug}/resume/$executionId'
+    | '/{-$orgSlug}/toolkits/$toolkitSlug'
     | '/{-$orgSlug}/integrations/add/$pluginKey'
     | '/{-$orgSlug}/plugins/$pluginId/$'
   id:
     | '/{-$orgSlug}/api-keys'
     | '/{-$orgSlug}/policies'
     | '/{-$orgSlug}/secrets'
+    | '/{-$orgSlug}/toolkits'
     | '/{-$orgSlug}/tools'
     | '/{-$orgSlug}/'
     | '/{-$orgSlug}/integrations/$namespace'
     | '/{-$orgSlug}/resume/$executionId'
+    | '/{-$orgSlug}/toolkits/$toolkitSlug'
     | '/{-$orgSlug}/integrations/add/$pluginKey'
     | '/{-$orgSlug}/plugins/$pluginId/$'
   fileRoutesById: FileRoutesById
   ApiKeysRoute: typeof ApiKeysRoute
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRoute
+  DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteWithChildren
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRoute
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotnamespaceRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIntegrationsDotnamespaceRoute
       preLoaderRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/{-$orgSlug}/toolkits': {
+      id: '/{-$orgSlug}/toolkits'
+      path: '/{-$orgSlug}/toolkits'
+      fullPath: '/{-$orgSlug}/toolkits'
+      preLoaderRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/{-$orgSlug}/secrets': {
       id: '/{-$orgSlug}/secrets'
       path: '/{-$orgSlug}/secrets'
       preLoaderRoute: typeof JoinDotcodeRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/{-$orgSlug}/toolkits/$toolkitSlug': {
+      id: '/{-$orgSlug}/toolkits/$toolkitSlug'
+      path: '/$toolkitSlug'
+      fullPath: '/{-$orgSlug}/toolkits/$toolkitSlug'
+      preLoaderRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRouteImport
+      parentRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRoute
+    }
     '/{-$orgSlug}/resume/$executionId': {
       id: '/{-$orgSlug}/resume/$executionId'
       path: '/{-$orgSlug}/resume/$executionId'
   }
 }
+interface DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteChildren {
+  DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute: typeof DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute
+}
+const DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteChildren: DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteChildren =
+  {
+    DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute:
+      DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsDottoolkitSlugRoute,
+  }
+const DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteWithChildren =
+  DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRoute._addFileChildren(
+    DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteChildren,
+  )
 const rootRouteChildren: RootRouteChildren = {
   JoinDotcodeRoute: JoinDotcodeRoute,
   AdminRoute: AdminRoute,
     DotDotDotDotDotDotDotDotPackagesReactSrcRoutesPoliciesRoute,
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRoute:
     DotDotDotDotDotDotDotDotPackagesReactSrcRoutesSecretsRoute,
+  DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRoute:
+    DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolkitsRouteWithChildren,
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute:
     DotDotDotDotDotDotDotDotPackagesReactSrcRoutesToolsRoute,
   DotDotDotDotDotDotDotDotPackagesReactSrcRoutesIndexRoute:

e2e/selfhost/toolkits-ui.test.ts+37−16

       yield* browser.session(identity, async ({ page, step }) => {
         await step("Open the Toolkits plugin page", async () => {
-          await page.goto("/plugins/toolkits/", { waitUntil: "networkidle" });
+          await page.goto("/default/toolkits/", { waitUntil: "domcontentloaded" });
           await page.getByRole("heading", { name: "Toolkits" }).waitFor();
           await page.getByRole("heading", { name: "Workspace" }).waitFor();
           await page.getByRole("heading", { name: "Personal" }).waitFor();
           await page.getByRole("button", { name: "Add workspace toolkit" }).waitFor();
           await page.getByRole("button", { name: "Add personal toolkit" }).waitFor();
+          await page.locator('main [data-slot="skeleton"]').first().waitFor({ state: "detached" });
           expect(await page.locator('main [data-slot="skeleton"]').count()).toBe(0);
           const seededCard = page.getByRole("link", {
             name: `Open toolkit ${prefix}-workspace-a`,
         await step("Open the created toolkit from the grid", async () => {
           await page.getByRole("link", { name: `Open toolkit ${name}` }).click();
-          await page.waitForURL(new RegExp(`/plugins/toolkits/${slug}$`));
+          await page.waitForURL(new RegExp(`/toolkits/${slug}$`));
-          expect(page.url()).toMatch(new RegExp(`/plugins/toolkits/${slug}$`));
+          expect(page.url()).toMatch(new RegExp(`/toolkits/${slug}$`));
           await page
             .locator("code")
             .filter({ hasText: `/mcp/toolkits/${slug}` })
         await step("Return to the toolkit grid with browser-visible routing", async () => {
           await page.getByRole("button", { name: "Toolkits" }).click();
-          await page.waitForURL(/\/plugins\/toolkits\/?$/);
+          await page.waitForURL(/\/toolkits\/?$/);
-          expect(page.url()).toMatch(/\/plugins\/toolkits\/?$/);
+          expect(page.url()).toMatch(/\/toolkits\/?$/);
           await page.getByRole("heading", { name: "Workspace" }).waitFor();
           await page.getByRole("link", { name: `Open toolkit ${name}` }).waitFor();
         });
         await step("Open the created toolkit from a direct URL", async () => {
-          await page.goto(`/plugins/toolkits/${slug}`, { waitUntil: "networkidle" });
+          await page.goto(`/default/toolkits/${slug}`, { waitUntil: "domcontentloaded" });
-          expect(page.url()).toMatch(new RegExp(`/plugins/toolkits/${slug}$`));
+          expect(page.url()).toMatch(new RegExp(`/toolkits/${slug}$`));
           await page
             .locator("code")
             .filter({ hasText: `/mcp/toolkits/${slug}` })
           expect(await page.getByLabel("New toolkit").count()).toBe(0);
         });
+        await step("Cancel toolkit deletion from the confirmation modal", async () => {
+          await page.getByRole("button", { name: "Delete toolkit" }).click();
+          const dialog = page.getByRole("alertdialog", { name: `Delete ${name}?` });
+          await dialog.waitFor();
+          await dialog.getByRole("button", { name: "Cancel" }).click();
+          await dialog.waitFor({ state: "detached" });
+          await page.getByRole("heading", { name }).waitFor();
+        });
         await step("Add a connection to the toolkit", async () => {
-          await page.getByRole("button", { name: "Add connection to toolkit" }).click();
+          await page.getByRole("button", { name: "Manage toolkit connections" }).click();
-          const dialog = page.getByRole("dialog", { name: "Add connection" });
+          const dialog = page.getByRole("dialog", { name: "Manage connections" });
           await dialog.waitFor();
           await dialog.getByLabel("Search connections and tools").fill("policies.list");
           expect(await dialog.getByRole("button", { name: /^Add tool/ }).count()).toBe(0);
             .getByRole("button", { name: /^Add connection / })
             .first()
             .click();
+          await dialog.getByRole("button", { name: /^Remove connection / }).waitFor();
+          await page.keyboard.press("Escape");
           await dialog.waitFor({ state: "hidden" });
           const toolkitTools = page.getByRole("region", { name: "Toolkit tools" });
           await toolkitTools.waitFor();
         });
         await step("The add connection list reflects the saved toolkit connection", async () => {
-          await page.getByRole("button", { name: "Add connection to toolkit" }).click();
+          await page.getByRole("button", { name: "Manage toolkit connections" }).click();
-          const dialog = page.getByRole("dialog", { name: "Add connection" });
+          const dialog = page.getByRole("dialog", { name: "Manage connections" });
           await dialog.waitFor();
           await dialog.getByLabel("Search connections and tools").fill("policies.list");
-          await dialog.getByRole("button", { name: /^Connection added / }).waitFor();
+          await dialog.getByRole("button", { name: /^Remove connection / }).waitFor();
           expect(await dialog.getByRole("button", { name: /^Add connection / }).count()).toBe(0);
           await page.keyboard.press("Escape");
           await dialog.waitFor({ state: "hidden" });
         });
-        await step("Remove the connection from the toolkit tools list", async () => {
+        await step("Remove the connection from the manage modal", async () => {
-          await page
+          await page.getByRole("button", { name: "Manage toolkit connections" }).click();
+          const removeDialog = page.getByRole("dialog", { name: "Manage connections" });
+          await removeDialog.waitFor();
+          await removeDialog.getByLabel("Search connections and tools").fill("policies.list");
+          await removeDialog
             .getByRole("button", { name: /^Remove connection / })
             .first()
             .click();
+          await removeDialog.getByRole("button", { name: /^Add connection / }).waitFor();
+          await page.keyboard.press("Escape");
+          await removeDialog.waitFor({ state: "hidden" });
           await page.getByText("No connections added").waitFor();
-          await page.getByRole("button", { name: "Add connection to toolkit" }).click();
+          await page.getByRole("button", { name: "Manage toolkit connections" }).click();
-          const dialog = page.getByRole("dialog", { name: "Add connection" });
+          const dialog = page.getByRole("dialog", { name: "Manage connections" });
           await dialog.waitFor();
           await dialog.getByLabel("Search connections and tools").fill("policies.list");
           await dialog
             .getByRole("button", { name: /^Add connection / })
             .first()
             .click();
+          await dialog.getByRole("button", { name: /^Remove connection / }).waitFor();
+          await page.keyboard.press("Escape");
           await dialog.waitFor({ state: "hidden" });
           const toolkitTools = page.getByRole("region", { name: "Toolkit tools" });
           await toolkitTools.getByLabel("Filter tools").fill("policies.list");

packages/app/src/routeTree.gen.ts+58−0

 import { Route as rootRouteImport } from './routes/__root'
 import { Route as DotDotDotDotDotDotReactSrcRoutesIndexRouteImport } from './../../react/src/routes/index'
 import { Route as DotDotDotDotDotDotReactSrcRoutesToolsRouteImport } from './../../react/src/routes/tools'
+import { Route as DotDotDotDotDotDotReactSrcRoutesToolkitsRouteImport } from './../../react/src/routes/toolkits'
 import { Route as SecretsRouteImport } from './routes/app/secrets'
 import { Route as DotDotDotDotDotDotReactSrcRoutesPoliciesRouteImport } from './../../react/src/routes/policies'
+import { Route as DotDotDotDotDotDotReactSrcRoutesToolkitsDottoolkitSlugRouteImport } from './../../react/src/routes/toolkits.$toolkitSlug'
 import { Route as DotDotDotDotDotDotReactSrcRoutesResumeDotexecutionIdRouteImport } from './../../react/src/routes/resume.$executionId'
 import { Route as DotDotDotDotDotDotReactSrcRoutesIntegrationsDotnamespaceRouteImport } from './../../react/src/routes/integrations.$namespace'
 import { Route as DotDotDotDotDotDotReactSrcRoutesPluginsDotpluginIdDotsplatRouteImport } from './../../react/src/routes/plugins.$pluginId.$'
     path: '/{-$orgSlug}/tools',
     getParentRoute: () => rootRouteImport,
   } as any)
+const DotDotDotDotDotDotReactSrcRoutesToolkitsRoute =
+  DotDotDotDotDotDotReactSrcRoutesToolkitsRouteImport.update({
+    id: '/{-$orgSlug}/toolkits',
+    path: '/{-$orgSlug}/toolkits',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const SecretsRoute = SecretsRouteImport.update({
   id: '/{-$orgSlug}/secrets',
   path: '/{-$orgSlug}/secrets',
     path: '/{-$orgSlug}/policies',
     getParentRoute: () => rootRouteImport,
   } as any)
+const DotDotDotDotDotDotReactSrcRoutesToolkitsDottoolkitSlugRoute =
+  DotDotDotDotDotDotReactSrcRoutesToolkitsDottoolkitSlugRouteImport.update({
+    id: '/$toolkitSlug',
+    path: '/$toolkitSlug',
+    getParentRoute: () => DotDotDotDotDotDotReactSrcRoutesToolkitsRoute,
+  } as any)
 const DotDotDotDotDotDotReactSrcRoutesResumeDotexecutionIdRoute =
   DotDotDotDotDotDotReactSrcRoutesResumeDotexecutionIdRouteImport.update({
     id: '/{-$orgSlug}/resume/$executionId',
 export interface FileRoutesByFullPath {
   '/{-$orgSlug}/policies': typeof DotDotDotDotDotDotReactSrcRoutesPoliciesRoute
   '/{-$orgSlug}/secrets': typeof SecretsRoute
+  '/{-$orgSlug}/toolkits': typeof DotDotDotDotDotDotReactSrcRoutesToolkitsRouteWithChildren
   '/{-$orgSlug}/tools': typeof DotDotDotDotDotDotReactSrcRoutesToolsRoute
   '/{-$orgSlug}/': typeof DotDotDotDotDotDotReactSrcRoutesIndexRoute
   '/{-$orgSlug}/integrations/$namespace': typeof DotDotDotDotDotDotReactSrcRoutesIntegrationsDotnamespaceRoute
   '/{-$orgSlug}/resume/$executionId': typeof DotDotDotDotDotDotReactSrcRoutesResumeDotexecutionIdRoute
+  '/{-$orgSlug}/toolkits/$toolkitSlug': typeof DotDotDotDotDotDotReactSrcRoutesToolkitsDottoolkitSlugRoute
   '/{-$orgSlug}/integrations/add/$pluginKey': typeof DotDotDotDotDotDotReactSrcRoutesIntegrationsDotaddDotpluginKeyRoute
   '/{-$orgSlug}/plugins/$pluginId/$': typeof DotDotDotDotDotDotReactSrcRoutesPluginsDotpluginIdDotsplatRoute
 }
 export interface FileRoutesByTo {
   '/{-$orgSlug}/policies': typeof DotDotDotDotDotDotReactSrcRoutesPoliciesRoute
   '/{-$orgSlug}/secrets': typeof SecretsRoute
+  '/{-$orgSlug}/toolkits': typeof DotDotDotDotDotDotReactSrcRoutesToolkitsRouteWithChildren
   '/{-$orgSlug}/tools': typeof DotDotDotDotDotDotReactSrcRoutesToolsRoute
   '/{-$orgSlug}': typeof DotDotDotDotDotDotReactSrcRoutesIndexRoute
   '/{-$orgSlug}/integrations/$namespace': typeof DotDotDotDotDotDotReactSrcRoutesIntegrationsDotnamespaceRoute
   '/{-$orgSlug}/resume/$executionId': typeof DotDotDotDotDotDotReactSrcRoutesResumeDotexecutionIdRoute
+  '/{-$orgSlug}/toolkits/$toolkitSlug': typeof DotDotDotDotDotDotReactSrcRoutesToolkitsDottoolkitSlugRoute
   '/{-$orgSlug}/integrations/add/$pluginKey': typeof DotDotDotDotDotDotReactSrcRoutesIntegrationsDotaddDotpluginKeyRoute
   '/{-$orgSlug}/plugins/$pluginId/$': typeof DotDotDotDotDotDotReactSrcRoutesPluginsDotpluginIdDotsplatRoute
 }
   __root__: typeof rootRouteImport
   '/{-$orgSlug}/policies': typeof DotDotDotDotDotDotReactSrcRoutesPoliciesRoute
   '/{-$orgSlug}/secrets': typeof SecretsRoute
+  '/{-$orgSlug}/toolkits': typeof DotDotDotDotDotDotReactSrcRoutesToolkitsRouteWithChildren
   '/{-$orgSlug}/tools': typeof DotDotDotDotDotDotReactSrcRoutesToolsRoute
   '/{-$orgSlug}/': typeof DotDotDotDotDotDotReactSrcRoutesIndexRoute
   '/{-$orgSlug}/integrations/$namespace': typeof DotDotDotDotDotDotReactSrcRoutesIntegrationsDotnamespaceRoute
   '/{-$orgSlug}/resume/$executionId': typeof DotDotDotDotDotDotReactSrcRoutesResumeDotexecutionIdRoute
+  '/{-$orgSlug}/toolkits/$toolkitSlug': typeof DotDotDotDotDotDotReactSrcRoutesToolkitsDottoolkitSlugRoute
   '/{-$orgSlug}/integrations/add/$pluginKey': typeof DotDotDotDotDotDotReactSrcRoutesIntegrationsDotaddDotpluginKeyRoute
   '/{-$orgSlug}/plugins/$pluginId/$': typeof DotDotDotDotDotDotReactSrcRoutesPluginsDotpluginIdDotsplatRoute
 }
   fullPaths:
     | '/{-$orgSlug}/policies'
     | '/{-$orgSlug}/secrets'
+    | '/{-$orgSlug}/toolkits'
     | '/{-$orgSlug}/tools'
     | '/{-$orgSlug}/'
     | '/{-$orgSlug}/integrations/$namespace'
     | '/{-$orgSlug}/resume/$executionId'
+    | '/{-$orgSlug}/toolkits/$toolkitSlug'
     | '/{-$orgSlug}/integrations/add/$pluginKey'
     | '/{-$orgSlug}/plugins/$pluginId/$'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/{-$orgSlug}/policies'
     | '/{-$orgSlug}/secrets'
+    | '/{-$orgSlug}/toolkits'
     | '/{-$orgSlug}/tools'
     | '/{-$orgSlug}'
     | '/{-$orgSlug}/integrations/$namespace'
     | '/{-$orgSlug}/resume/$executionId'
+    | '/{-$orgSlug}/toolkits/$toolkitSlug'
     | '/{-$orgSlug}/integrations/add/$pluginKey'
     | '/{-$orgSlug}/plugins/$pluginId/$'
   id:
     | '__root__'
     | '/{-$orgSlug}/policies'
     | '/{-$orgSlug}/secrets'
+    | '/{-$orgSlug}/toolkits'
     | '/{-$orgSlug}/tools'
     | '/{-$orgSlug}/'
     | '/{-$orgSlug}/integrations/$namespace'
     | '/{-$orgSlug}/resume/$executionId'
+    | '/{-$orgSlug}/toolkits/$toolkitSlug'
     | '/{-$orgSlug}/integrations/add/$pluginKey'
     | '/{-$orgSlug}/plugins/$pluginId/$'
   fileRoutesById: FileRoutesById
 export interface RootRouteChildren {
   DotDotDotDotDotDotReactSrcRoutesPoliciesRoute: typeof DotDotDotDotDotDotReactSrcRoutesPoliciesRoute
   SecretsRoute: typeof SecretsRoute
+  DotDotDotDotDotDotReactSrcRoutesToolkitsRoute: typeof DotDotDotDotDotDotReactSrcRoutesToolkitsRouteWithChildren
   DotDotDotDotDotDotReactSrcRoutesToolsRoute: typeof DotDotDotDotDotDotReactSrcRoutesToolsRoute
   DotDotDotDotDotDotReactSrcRoutesIndexRoute: typeof DotDotDotDotDotDotReactSrcRoutesIndexRoute
   DotDotDotDotDotDotReactSrcRoutesIntegrationsDotnamespaceRoute: typeof DotDotDotDotDotDotReactSrcRoutesIntegrationsDotnamespaceRoute
       preLoaderRoute: typeof DotDotDotDotDotDotReactSrcRoutesToolsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/{-$orgSlug}/toolkits': {
+      id: '/{-$orgSlug}/toolkits'
+      path: '/{-$orgSlug}/toolkits'
+      fullPath: '/{-$orgSlug}/toolkits'
+      preLoaderRoute: typeof DotDotDotDotDotDotReactSrcRoutesToolkitsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/{-$orgSlug}/secrets': {
       id: '/{-$orgSlug}/secrets'
       path: '/{-$orgSlug}/secrets'
       preLoaderRoute: typeof DotDotDotDotDotDotReactSrcRoutesPoliciesRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/{-$orgSlug}/toolkits/$toolkitSlug': {
+      id: '/{-$orgSlug}/toolkits/$toolkitSlug'
+      path: '/$toolkitSlug'
+      fullPath: '/{-$orgSlug}/toolkits/$toolkitSlug'
+      preLoaderRoute: typeof DotDotDotDotDotDotReactSrcRoutesToolkitsDottoolkitSlugRouteImport
+      parentRoute: typeof DotDotDotDotDotDotReactSrcRoutesToolkitsRoute
+    }
     '/{-$orgSlug}/resume/$executionId': {
       id: '/{-$orgSlug}/resume/$executionId'
       path: '/{-$orgSlug}/resume/$executionId'
   }
 }
+interface DotDotDotDotDotDotReactSrcRoutesToolkitsRouteChildren {
+  DotDotDotDotDotDotReactSrcRoutesToolkitsDottoolkitSlugRoute: typeof DotDotDotDotDotDotReactSrcRoutesToolkitsDottoolkitSlugRoute
+}
+const DotDotDotDotDotDotReactSrcRoutesToolkitsRouteChildren: DotDotDotDotDotDotReactSrcRoutesToolkitsRouteChildren =
+  {
+    DotDotDotDotDotDotReactSrcRoutesToolkitsDottoolkitSlugRoute:
+      DotDotDotDotDotDotReactSrcRoutesToolkitsDottoolkitSlugRoute,
+  }
+const DotDotDotDotDotDotReactSrcRoutesToolkitsRouteWithChildren =
+  DotDotDotDotDotDotReactSrcRoutesToolkitsRoute._addFileChildren(
+    DotDotDotDotDotDotReactSrcRoutesToolkitsRouteChildren,
+  )
 const rootRouteChildren: RootRouteChildren = {
   DotDotDotDotDotDotReactSrcRoutesPoliciesRoute:
     DotDotDotDotDotDotReactSrcRoutesPoliciesRoute,
   SecretsRoute: SecretsRoute,
+  DotDotDotDotDotDotReactSrcRoutesToolkitsRoute:
+    DotDotDotDotDotDotReactSrcRoutesToolkitsRouteWithChildren,
   DotDotDotDotDotDotReactSrcRoutesToolsRoute:
     DotDotDotDotDotDotReactSrcRoutesToolsRoute,
   DotDotDotDotDotDotReactSrcRoutesIndexRoute:

packages/app/src/web/shell.tsx+7−0

   const isHome = props.pathname === "/";
   const isSecrets = props.pathname === "/secrets";
   const isPolicies = props.pathname === "/policies";
+  const isToolkits = props.pathname === "/toolkits" || props.pathname.startsWith("/toolkits/");
   return (
     <>
           active={isPolicies}
           onNavigate={props.onNavigate}
         />
+        <NavItem
+          to="/{-$orgSlug}/toolkits"
+          label="Toolkits"
+          active={isToolkits}
+          onNavigate={props.onNavigate}
+        />
         <PluginNav pathname={props.pathname} onNavigate={props.onNavigate} />

packages/plugins/toolkits/src/client.tsx+0−1

@@ -8,7 +8,6 @@ export default defineClientPlugin({ · 7 unmodified lines
8	{	8	{
9	path: "/",	9	path: "/",
10	component: ToolkitsPage,	10	component: ToolkitsPage,
11	nav: { label: "Toolkits" },
12	},	11	},
13	{	12	{
14	path: "/$toolkitSlug",	13	path: "/$toolkitSlug",

packages/plugins/toolkits/src/page.tsx+190−158

 import { useId, useMemo, useState } from "react";
-import { Link, useNavigate, useParams } from "@tanstack/react-router";
+import { Link, useNavigate } from "@tanstack/react-router";
 import { useAtomSet, useAtomValue } from "@effect/atom-react";
 import * as Atom from "effect/unstable/reactivity/Atom";
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
-import {
+import { ArrowLeftIcon, BoxIcon, PlugIcon, PlusIcon, SearchIcon, Trash2Icon } from "lucide-react";
-  ArrowLeftIcon,
-  BoxIcon,
-  CheckIcon,
-  PlugIcon,
-  PlusIcon,
-  SearchIcon,
-  Trash2Icon,
-} from "lucide-react";
 import {
   createPluginAtomClient,
   useIntegrationPlugins,
 } from "@executor-js/sdk/shared";
 import { integrationsOptimisticAtom, toolsAllAtom } from "@executor-js/react/api/atoms";
 import { ReactivityKey } from "@executor-js/react/api/reactivity-keys";
+import { useOrganizationSlug } from "@executor-js/react/api/organization-context";
 import {
   getExecutorApiBaseUrl,
   getExecutorOrganizationHeaders,
   getExecutorServerAuthorizationHeader,
 } from "@executor-js/react/api/server-connection";
-import { ownerLabel } from "@executor-js/react/api/owner-display";
+import { ownerLabel, useOwnerDisplay } from "@executor-js/react/api/owner-display";
 import { Badge } from "@executor-js/react/components/badge";
 import { Button } from "@executor-js/react/components/button";
 import { CopyButton } from "@executor-js/react/components/copy-button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@executor-js/react/components/alert-dialog";
 import {
   IntegrationFavicon,
   integrationPresetIconUrl,
 const connectionTitle = (group: ToolkitConnectionGroup): string =>
   `${ownerLabel(group.owner)} ${group.integration} / ${group.connection}`;
+const connectionTitleForHost = (group: ToolkitConnectionGroup, showOwnerLabels: boolean): string =>
+  showOwnerLabels ? connectionTitle(group) : `${group.integration} / ${group.connection}`;
 const connectionDisplayTitle = (group: ToolkitConnectionGroup, meta: IntegrationMeta): string =>
   group.connection === "built-in" || group.connection === "default" ? meta.name : group.connection;
     ? `${group.tools.length} ${group.tools.length === 1 ? "tool" : "tools"}`
     : `${meta.name} · ${group.tools.length} ${group.tools.length === 1 ? "tool" : "tools"}`;
+const connectionDisplaySubtitleForHost = (
+  group: ToolkitConnectionGroup,
+  meta: IntegrationMeta,
+  showOwnerLabels: boolean,
+): string => {
+  const subtitle = connectionDisplaySubtitle(group, meta);
+  return showOwnerLabels ? `${ownerLabel(group.owner)} · ${subtitle}` : subtitle;
+};
 const integrationMetaFor = (
   group: ToolkitConnectionGroup,
   integrations: readonly Integration[],
   connectionGroups: readonly ToolkitConnectionGroup[],
   integrations: readonly Integration[],
   integrationPlugins: readonly IntegrationPlugin[],
+  showOwnerLabels: boolean,
 ): readonly ConfiguredConnectionView[] =>
   connections.map((connection) => {
     const group = connectionGroups.find((candidate) =>
     return {
       id: connection.id,
       title: connectionDisplayTitle(group, meta),
-      subtitle: `${ownerLabel(group.owner)} · ${connectionDisplaySubtitle(group, meta)}`,
+      subtitle: connectionDisplaySubtitleForHost(group, meta, showOwnerLabels),
       pattern: connection.pattern,
       sourceId: meta.sourceId,
       icon: meta.icon,
 const connectionCountLabel = (count: number): string =>
   count === 0 ? "No connections" : `${count} ${count === 1 ? "connection" : "connections"}`;
-function ToolkitTile(props: { pluginId: string; toolkit: ToolkitResponse }) {
+function ToolkitTile(props: { showOwnerLabels: boolean; toolkit: ToolkitResponse }) {
   const toolkit = props.toolkit;
   const tools = useAtomValue(toolsAllAtom);
   const integrations = useAtomValue(integrationsOptimisticAtom);
         connectionGroups,
         integrationRows,
         integrationPlugins,
+        props.showOwnerLabels,
       )
     : [];
   return (
     <Link
-      to="/{-$orgSlug}/plugins/$pluginId/$"
+      to="/{-$orgSlug}/toolkits/$toolkitSlug"
-      params={{ pluginId: props.pluginId, _splat: toolkit.slug }}
+      params={{ toolkitSlug: toolkit.slug }}
       aria-label={`Open toolkit ${toolkit.name}`}
       className="group flex min-h-36 min-w-0 self-start flex-col justify-between rounded-md border border-border/70 bg-card p-3.5 text-left text-card-foreground shadow-xs transition-[border-color,background-color,box-shadow] hover:border-foreground/25 hover:bg-muted/20 hover:shadow-sm focus-visible:ring-[3px] focus-visible:ring-ring/30 focus-visible:outline-none"
       style={toolkitCardStyle}
   );
 }
-const addToolkitScopeLabel = (owner: Owner): string => (owner === "org" ? "workspace" : "personal");
+const addToolkitScopeLabel = (owner: Owner, showOwnerLabels: boolean): string =>
-const addToolkitTitle = (owner: Owner): string =>
+  showOwnerLabels ? (owner === "org" ? "workspace" : "personal") : "";
-  owner === "org" ? "New workspace toolkit" : "New personal toolkit";
+const addToolkitTitle = (owner: Owner, showOwnerLabels: boolean): string =>
+  showOwnerLabels
+    ? owner === "org"
+      ? "New workspace toolkit"
+      : "New personal toolkit"
+    : "New toolkit";
 function CreateToolkitDialog(props: {
   owner: Owner;
+  showOwnerLabels: boolean;
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onCreate: (input: { owner: Owner; name: string }) => Promise<void>;
   const inputId = useId();
   const [name, setName] = useState("");
   const trimmed = name.trim();
-  const title = addToolkitTitle(props.owner);
+  const title = addToolkitTitle(props.owner, props.showOwnerLabels);
   const submit = async () => {
     if (!trimmed) return;
   );
 }
-function AddToolkitCard(props: { owner: Owner; onClick: () => void }) {
+function AddToolkitCard(props: { owner: Owner; showOwnerLabels: boolean; onClick: () => void }) {
-  const scopeLabel = addToolkitScopeLabel(props.owner);
+  const scopeLabel = addToolkitScopeLabel(props.owner, props.showOwnerLabels);
   return (
     <Button
       type="button"
       variant="ghost"
       onClick={props.onClick}
-      aria-label={`Add ${scopeLabel} toolkit`}
+      aria-label={scopeLabel ? `Add ${scopeLabel} toolkit` : "Add toolkit"}
       className="group flex h-auto min-h-36 min-w-0 self-start items-center justify-center rounded-md border border-dashed border-border/75 bg-card/40 p-0 text-muted-foreground transition-[border-color,background-color,box-shadow,color] hover:border-foreground/25 hover:bg-muted/20 hover:text-foreground hover:shadow-sm focus-visible:ring-[3px] focus-visible:ring-ring/30 focus-visible:outline-none"
       style={toolkitCardStyle}
     >
 }
 function ToolkitSection(props: {
-  pluginId: string;
   owner: Owner;
-  title: string;
+  title?: string;
+  showOwnerLabels: boolean;
   toolkits: readonly ToolkitResponse[];
   onCreate: (input: { owner: Owner; name: string }) => Promise<void>;
 }) {
   const openCreate = () => setCreateOpen(true);
   return (
     <section className="space-y-3">
-      <div className="border-b border-border/60 pb-2">
+      {props.title ? (
-        <h2 className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+        <div className="border-b border-border/60 pb-2">
-          {props.title}
+          <h2 className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
-        </h2>
+            {props.title}
-      </div>
+          </h2>
+        </div>
+      ) : null}
       <div
         className="grid content-start grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3"
         style={toolkitShelfStyle}
       >
         {rows.map((toolkit) => (
-          <ToolkitTile key={toolkit.id} pluginId={props.pluginId} toolkit={toolkit} />
+          <ToolkitTile key={toolkit.id} showOwnerLabels={props.showOwnerLabels} toolkit={toolkit} />
         ))}
-        <AddToolkitCard owner={props.owner} onClick={openCreate} />
+        <AddToolkitCard
+          owner={props.owner}
+          showOwnerLabels={props.showOwnerLabels}
+          onClick={openCreate}
+        />
       </div>
       <CreateToolkitDialog
         owner={props.owner}
+        showOwnerLabels={props.showOwnerLabels}
         open={createOpen}
         onOpenChange={setCreateOpen}
         onCreate={props.onCreate}
 }
 function ToolkitGrid(props: {
-  pluginId: string;
   toolkits: readonly ToolkitResponse[];
   onCreate: (input: { owner: Owner; name: string }) => Promise<void>;
 }) {
+  const ownerDisplay = useOwnerDisplay();
   // Toolkit shelves are grouped by owner; the selected toolkit owns the page.
   const workspaceToolkits = props.toolkits.filter((toolkit) => toolkit.owner === "org");
   const personalToolkits = props.toolkits.filter((toolkit) => toolkit.owner === "user");
+  if (!ownerDisplay.showOwnerLabels) {
+    return (
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="w-full space-y-7 px-4 py-4" style={toolkitGridContainerStyle}>
+          <ToolkitSection
+            owner="org"
+            showOwnerLabels={false}
+            toolkits={props.toolkits}
+            onCreate={props.onCreate}
+          />
+        </div>
+      </div>
+    );
+  }
   return (
     <div className="min-h-0 flex-1 overflow-y-auto">
       <div className="w-full space-y-7 px-4 py-4" style={toolkitGridContainerStyle}>
         <ToolkitSection
-          pluginId={props.pluginId}
           owner="org"
+          showOwnerLabels
           title="Workspace"
           toolkits={workspaceToolkits}
           onCreate={props.onCreate}
         />
         <ToolkitSection
-          pluginId={props.pluginId}
           owner="user"
+          showOwnerLabels
           title="Personal"
           toolkits={personalToolkits}
           onCreate={props.onCreate}
   );
 }
-function ToolkitContentsEmpty(props: { onAddConnection: () => void }) {
+function ToolkitContentsEmpty(props: { onManageConnections: () => void }) {
   return (
     <div className="flex h-full items-center justify-center px-6 py-10">
       <div className="max-w-sm text-center">
         <p className="mt-1.5 text-sm leading-6 text-muted-foreground">
           Add a connection to decide what this toolkit exposes.
         </p>
-        <Button type="button" size="sm" onClick={props.onAddConnection} className="mt-4">
+        <Button type="button" size="sm" onClick={props.onManageConnections} className="mt-4">
-          <PlusIcon className="size-3.5" />
+          Manage connections
-          Add connection
         </Button>
       </div>
     </div>
   );
 }
-function ToolkitConfiguredConnections(props: {
-  connections: readonly ConfiguredConnectionView[];
-  onRemoveConnection: (connectionId: string) => void;
-}) {
-  if (props.connections.length === 0) return null;
-  return (
-    <div className="border-b border-border/60 bg-background/60 px-3 py-2">
-      <div className="mb-1.5 flex items-center justify-between gap-2">
-        <span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
-          Connections
-        </span>
-        <span className="text-xs tabular-nums text-muted-foreground">
-          {props.connections.length}
-        </span>
-      </div>
-      <div className="space-y-1">
-        {props.connections.map((connection) => (
-          <div
-            key={connection.id}
-            className="group flex min-w-0 items-center gap-2 rounded-md border border-border/60 bg-card px-2 py-1.5"
-          >
-            <span className="flex size-7 shrink-0 items-center justify-center rounded-md border border-border/70 bg-muted/30">
-              <IntegrationFavicon
-                icon={connection.icon}
-                sourceId={connection.sourceId}
-                url={connection.url}
-                size={16}
-              />
-            </span>
-            <div className="min-w-0 flex-1">
-              <div className="truncate text-xs font-medium text-foreground">{connection.title}</div>
-              <div className="truncate text-[11px] text-muted-foreground">
-                {connection.subtitle}
-              </div>
-            </div>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon-xs"
-              aria-label={`Remove connection ${connection.title} from toolkit`}
-              title="Remove connection"
-              onClick={() => props.onRemoveConnection(connection.id)}
-              className="size-6 shrink-0 text-muted-foreground hover:text-destructive"
-            >
-              <Trash2Icon className="size-3.5" />
-            </Button>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
 function ToolkitToolsPanel(props: {
   tools: readonly ToolSummary[];
-  configuredConnections: readonly ConfiguredConnectionView[];
   selectedToolId: string | null;
   policies: readonly ToolkitPolicyResponse[];
-  onAddConnection: () => void;
+  onManageConnections: () => void;
-  onRemoveConnection: (connectionId: string) => void;
   onSelectTool: (toolId: string) => void;
   onSetPolicy: (pattern: string, action: ToolPolicyAction) => void;
   onClearPolicy: (pattern: string) => void;
           <Button
             type="button"
             size="sm"
-            aria-label="Add connection to toolkit"
+            aria-label="Manage toolkit connections"
-            onClick={props.onAddConnection}
+            onClick={props.onManageConnections}
             className="h-8"
           >
-            <PlusIcon className="size-3.5" />
+            Manage
-            Add
           </Button>
         </div>
       </div>
-      <ToolkitConfiguredConnections
-        connections={props.configuredConnections}
-        onRemoveConnection={props.onRemoveConnection}
-      />
       {props.tools.length === 0 ? (
-        <ToolkitContentsEmpty onAddConnection={props.onAddConnection} />
+        <ToolkitContentsEmpty onManageConnections={props.onManageConnections} />
       ) : (
         <ToolTree
           tools={props.tools}
 function AddConnectionDialog(props: {
   open: boolean;
   groups: readonly ToolkitConnectionGroup[];
-  configuredToolIds: ReadonlySet<string>;
+  configuredConnections: readonly ConfiguredConnectionView[];
   integrations: readonly Integration[];
   integrationPlugins: readonly IntegrationPlugin[];
+  showOwnerLabels: boolean;
   onOpenChange: (open: boolean) => void;
   onAddPatterns: (patterns: readonly string[]) => Promise<void> | void;
+  onRemoveConnection: (connectionId: string) => Promise<void> | void;
 }) {
   const searchId = useId();
   const [query, setQuery] = useState("");
     });
   }, [props.groups, trimmedQuery]);
-  const addAndClose = async (patterns: readonly string[]) => {
+  const addConnection = async (patterns: readonly string[]) => {
     await props.onAddPatterns(patterns);
-    props.onOpenChange(false);
+  };
+  const removeConnection = async (connectionId: string) => {
+    await props.onRemoveConnection(connectionId);
   };
   return (
               <PlugIcon className="size-4" />
             </span>
             <div className="min-w-0">
-              <DialogTitle className="text-sm">Add connection</DialogTitle>
+              <DialogTitle className="text-sm">Manage connections</DialogTitle>
               <DialogDescription className="mt-1 text-xs">
-                Choose which connected account this toolkit can use.
+                Choose which connected accounts this toolkit can use.
               </DialogDescription>
             </div>
           </div>
             ) : (
               <div className="overflow-hidden rounded-md border border-border/70 bg-background/30">
                 {filteredGroups.map((group) => {
-                  const title = connectionTitle(group);
+                  const title = connectionTitleForHost(group, props.showOwnerLabels);
-                  const added = group.tools.every((tool) =>
+                  const configuredConnection = props.configuredConnections.find((connection) =>
-                    props.configuredToolIds.has(toolMatchId(tool)),
+                    group.patterns.includes(connection.pattern),
                   );
+                  const added = configuredConnection !== undefined;
                   const meta = integrationMetaFor(
                     group,
                     props.integrations,
                           <span className="truncate text-xs font-medium text-foreground">
                             {connectionDisplayTitle(group, meta)}
                           </span>
-                          <Badge variant="outline" className="shrink-0 text-[10px]">
+                          {props.showOwnerLabels ? (
-                            {ownerLabel(group.owner)}
+                            <Badge variant="outline" className="shrink-0 text-[10px]">
-                          </Badge>
+                              {ownerLabel(group.owner)}
+                            </Badge>
+                          ) : null}
                         </div>
                         <div className="flex min-w-0 items-center gap-2">
                           <span className="truncate text-[11px] text-muted-foreground">
                         type="button"
                         variant={added ? "outline" : "default"}
                         size="sm"
-                        disabled={added}
+                        aria-label={`${added ? "Remove connection" : "Add connection"} ${title}`}
-                        aria-label={`${added ? "Connection added" : "Add connection"} ${title}`}
+                        onClick={() =>
-                        onClick={() => void addAndClose(group.patterns)}
+                          void (added && configuredConnection
+                            ? removeConnection(configuredConnection.id)
+                            : addConnection(group.patterns))
+                        }
                         className={cn(
                           "h-7 shrink-0 px-2.5 text-xs",
                           added
-                            ? "border-border/70 bg-transparent text-muted-foreground"
+                            ? "border-border/70 bg-transparent text-muted-foreground hover:text-destructive"
                             : "bg-primary/10 text-primary hover:bg-primary/15",
                         )}
                       >
                         {added ? (
-                          <CheckIcon className="size-3.5" />
+                          <Trash2Icon className="size-3.5" />
                         ) : (
                           <PlusIcon className="size-3.5" />
                         )}
-                        {added ? "Added" : "Add"}
+                        {added ? "Remove" : "Add"}
                       </Button>
                     </div>
                   );
 function ToolkitHeader(props: {
   toolkit: ToolkitResponse;
+  showOwnerLabels: boolean;
   toolCount: number;
   mcpUrl: string;
   onBack: () => void;
         <div className="min-w-0">
           <div className="flex min-w-0 items-center gap-2">
             <h2 className="truncate text-sm font-semibold text-foreground">{props.toolkit.name}</h2>
-            <Badge variant="outline" className="text-[10px]">
+            {props.showOwnerLabels ? (
-              {ownerLabel(props.toolkit.owner)}
+              <Badge variant="outline" className="text-[10px]">
-            </Badge>
+                {ownerLabel(props.toolkit.owner)}
+              </Badge>
+            ) : null}
             <span className="text-xs tabular-nums text-muted-foreground">
               {props.toolCount} {props.toolCount === 1 ? "tool" : "tools"}
             </span>
             <CopyButton value={props.mcpUrl} label="Copy toolkit MCP URL" />
           </div>
         </div>
-        <Button
+        <AlertDialog>
-          type="button"
+          <AlertDialogTrigger asChild>
-          variant="ghost"
+            <Button
-          size="icon-sm"
+              type="button"
-          aria-label="Delete toolkit"
+              variant="ghost"
-          onClick={props.onRemove}
+              size="icon-sm"
-          className="text-muted-foreground hover:text-destructive"
+              aria-label="Delete toolkit"
-        >
+              className="text-muted-foreground hover:text-destructive"
-          <Trash2Icon className="size-3.5" />
+            >
-        </Button>
+              <Trash2Icon className="size-3.5" />
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent size="sm">
+            <AlertDialogHeader>
+              <AlertDialogTitle>Delete {props.toolkit.name}?</AlertDialogTitle>
+              <AlertDialogDescription>
+                This removes the toolkit and its dedicated MCP endpoint. Connections are not
+                deleted.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction variant="destructive" onClick={props.onRemove}>
+                Delete
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
       </div>
     </div>
   );
 function ToolkitWorkspace(props: {
   toolkit: ToolkitResponse;
+  showOwnerLabels: boolean;
   policies: readonly ToolkitPolicyResponse[];
   connections: readonly ToolkitConnectionResponse[];
   tools: readonly ToolRow[];
         connectionGroups,
         props.integrations,
         props.integrationPlugins,
+        props.showOwnerLabels,
       ),
-    [connectionGroups, props.connections, props.integrationPlugins, props.integrations],
+    [
+      connectionGroups,
+      props.connections,
+      props.integrationPlugins,
+      props.integrations,
+      props.showOwnerLabels,
+    ],
   );
   const legacyPolicyIds = useMemo(
     () => legacyConnectionPolicyIds(props.policies, connectionGroups, props.connections),
     <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
       <ToolkitHeader
         toolkit={props.toolkit}
+        showOwnerLabels={props.showOwnerLabels}
         toolCount={exposedToolIds.size}
         mcpUrl={props.mcpUrl}
         onBack={props.onBack}
       <div className="flex min-h-0 flex-1 overflow-hidden">
         <ToolkitToolsPanel
           tools={toolkitTools}
-          configuredConnections={configuredConnections}
           selectedToolId={selectedToolId}
           policies={accessPolicies}
-          onAddConnection={() => setAddOpen(true)}
+          onManageConnections={() => setAddOpen(true)}
-          onRemoveConnection={(connectionId) => void props.onRemoveConnection(connectionId)}
           onSelectTool={setSelectedToolId}
           onSetPolicy={(pattern, action) => void props.onSetPolicy(pattern, action)}
           onClearPolicy={(pattern) => void props.onClearPolicy(pattern)}
         open={addOpen}
         onOpenChange={setAddOpen}
         groups={connectionGroups}
-        configuredToolIds={configuredToolIds}
+        configuredConnections={configuredConnections}
         integrations={props.integrations}
         integrationPlugins={props.integrationPlugins}
+        showOwnerLabels={props.showOwnerLabels}
         onAddPatterns={async (patterns) => {
           for (const pattern of patterns) {
             await props.onAddConnection(pattern);
           }
         }}
+        onRemoveConnection={props.onRemoveConnection}
       />
     </div>
   );
   );
 }
-function ToolkitSectionSkeleton(props: { title: string; offset: number }) {
+function ToolkitSectionSkeleton(props: { title?: string; offset: number }) {
   return (
-    <section className="space-y-3" aria-label={`Loading ${props.title.toLowerCase()} toolkits`}>
+    <section className="space-y-3" aria-label="Loading toolkits">
-      <div className="border-b border-border/60 pb-2">
+      {props.title ? (
-        <h2 className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+        <div className="border-b border-border/60 pb-2">
-          {props.title}
+          <h2 className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
-        </h2>
+            {props.title}
-      </div>
+          </h2>
+        </div>
+      ) : null}
       <div className="grid content-start grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
         {Array.from({ length: 3 }).map((_, index) => (
   );
 }
-function ToolkitGridSkeleton() {
+function ToolkitGridSkeleton(props: { showOwnerLabels: boolean }) {
   return (
     <div className="min-h-0 flex-1 overflow-y-auto">
       <div className="w-full space-y-7 px-4 py-4" style={toolkitGridContainerStyle}>
-        <ToolkitSectionSkeleton title="Workspace" offset={0} />
+        {props.showOwnerLabels ? (
-        <ToolkitSectionSkeleton title="Personal" offset={3} />
+          <>
+            <ToolkitSectionSkeleton title="Workspace" offset={0} />
+            <ToolkitSectionSkeleton title="Personal" offset={3} />
+          </>
+        ) : (
+          <ToolkitSectionSkeleton offset={0} />
+        )}
       </div>
     </div>
   );
 function ToolkitDetailView(props: {
   toolkit: ToolkitResponse;
+  showOwnerLabels: boolean;
   tools: readonly ToolRow[];
   integrations: readonly Integration[];
   integrationPlugins: readonly IntegrationPlugin[];
   return (
     <ToolkitWorkspace
       toolkit={props.toolkit}
+      showOwnerLabels={props.showOwnerLabels}
       policies={policyRows}
       connections={connectionRows}
       tools={props.tools}
 }
 export function ToolkitsPage(props: PluginPageProps) {
-  const params = useParams({ strict: false }) as { orgSlug?: string };
   const navigate = useNavigate();
+  const organizationSlug = useOrganizationSlug();
+  const ownerDisplay = useOwnerDisplay();
   const integrationPlugins = useIntegrationPlugins();
   const toolkits = useAtomValue(toolkitsAtom);
   const tools = useAtomValue(toolsAllAtom);
   const toolsFailed = AsyncResult.isFailure(tools);
   const navigateToIndex = () =>
     navigate({
-      to: "/{-$orgSlug}/plugins/$pluginId/$",
+      to: "/{-$orgSlug}/toolkits",
-      params: { pluginId: props.pluginId, _splat: "" },
     });
   const createToolkitHandler = async (input: { owner: Owner; name: string }) => {
         toolkitsFailed ? (
           <div className="p-6 text-sm text-destructive">Failed to load toolkits</div>
         ) : (
-          <ToolkitGridSkeleton />
+          <ToolkitGridSkeleton showOwnerLabels={ownerDisplay.showOwnerLabels} />
         )
       ) : selectedToolkit ? (
         toolsFailed ? (
         ) : (
           <ToolkitDetailView
             toolkit={selectedToolkit}
+            showOwnerLabels={ownerDisplay.showOwnerLabels}
             tools={toolRows}
             integrations={integrationRows}
             integrationPlugins={integrationPlugins}
-            orgSlug={params.orgSlug}
+            orgSlug={organizationSlug ?? undefined}
             onBack={() => void navigateToIndex()}
             onRemoveToolkit={removeToolkitHandler}
           />
           <div className="text-sm text-muted-foreground">Toolkit not found</div>
         </div>
       ) : (
-        <ToolkitGrid
+        <ToolkitGrid toolkits={toolkitRows} onCreate={createToolkitHandler} />
-          pluginId={props.pluginId}
-          toolkits={toolkitRows}
-          onCreate={createToolkitHandler}
-        />
       )}
     </div>
   );

packages/react/src/console-routes.ts+4−0

   "/policies",
   "/secrets",
   "/tools",
+  "/toolkits",
+  "/toolkits/$toolkitSlug",
   "/resume/$executionId",
   "/plugins/$pluginId/$",
 ] as const;
     ["/policies", route("/policies", file("policies.tsx"))],
     ["/secrets", route("/secrets", file("secrets.tsx"))],
     ["/tools", route("/tools", file("tools.tsx"))],
+    ["/toolkits", route("/toolkits", file("toolkits.tsx"))],
+    ["/toolkits/$toolkitSlug", route("/toolkits/$toolkitSlug", file("toolkits.$toolkitSlug.tsx"))],
     ["/resume/$executionId", route("/resume/$executionId", file("resume.$executionId.tsx"))],
     ["/plugins/$pluginId/$", route("/plugins/$pluginId/$", file("plugins.$pluginId.$.tsx"))],
   ];

packages/react/src/multiplayer/shell.tsx+1−0

@@ -49,6 +49,7 @@ export const defaultShellNavItems: ReadonlyArray<ShellNavItem> = [ · 48 unmodified lines
49	{ to: "/", label: "Integrations" },	49	{ to: "/", label: "Integrations" },
50	{ to: "/secrets", label: "Providers" },	50	{ to: "/secrets", label: "Providers" },
51	{ to: "/policies", label: "Policies" },	51	{ to: "/policies", label: "Policies" },
		52	{ to: "/toolkits", label: "Toolkits" },
52	];	53	];
53		54
54	/** Canonical public docs (Mintlify). Same-origin on cloud (executor.sh proxies	55	/** Canonical public docs (Mintlify). Same-origin on cloud (executor.sh proxies

packages/react/src/routes/plugins.$pluginId.$.tsx+18−3

-import { createFileRoute, notFound } from "@tanstack/react-router";
+import { createFileRoute, Navigate, notFound } from "@tanstack/react-router";
 import { useClientPlugins } from "@executor-js/sdk/client";
 // ---------------------------------------------------------------------------
 };
 function PluginRouteComponent() {
-  const { pluginId, _splat: rest } = Route.useParams();
+  const { orgSlug, pluginId, _splat: rest } = Route.useParams();
   const plugins = useClientPlugins();
+  const target = normalizePath(rest ?? "/");
+  if (pluginId === "toolkits") {
+    const segments = pathSegments(target);
+    const toolkitSlug = segments[0];
+    if (toolkitSlug) {
+      return (
+        <Navigate
+          to="/{-$orgSlug}/toolkits/$toolkitSlug"
+          params={{ orgSlug, toolkitSlug }}
+          replace
+        />
+      );
+    }
+    return <Navigate to="/{-$orgSlug}/toolkits" params={{ orgSlug }} replace />;
+  }
   const plugin = plugins.find((p) => p.id === pluginId);
   // oxlint-disable-next-line executor/no-try-catch-or-throw -- boundary: TanStack Router represents not-found from components by throwing notFound()
   if (!plugin) throw notFound();
-  const target = normalizePath(rest ?? "/");
   const match = matchPluginPage(plugin.pages, target);
   // oxlint-disable-next-line executor/no-try-catch-or-throw -- boundary: TanStack Router represents not-found from components by throwing notFound()
   if (!match) throw notFound();

packages/react/src/routes/routeTree.gen.ts+53−0

 import { Route as rootRouteImport } from './__root'
 import { Route as DotIndexRouteImport } from './index'
 import { Route as DotToolsRouteImport } from './tools'
+import { Route as DotToolkitsRouteImport } from './toolkits'
 import { Route as DotSecretsRouteImport } from './secrets'
 import { Route as DotPoliciesRouteImport } from './policies'
+import { Route as DotToolkitsDottoolkitSlugRouteImport } from './toolkits.$toolkitSlug'
 import { Route as DotResumeDotexecutionIdRouteImport } from './resume.$executionId'
 import { Route as DotIntegrationsDotnamespaceRouteImport } from './integrations.$namespace'
 import { Route as DotPluginsDotpluginIdDotsplatRouteImport } from './plugins.$pluginId.$'
   path: '/{-$orgSlug}/tools',
   getParentRoute: () => rootRouteImport,
 } as any)
+const DotToolkitsRoute = DotToolkitsRouteImport.update({
+  id: '/{-$orgSlug}/toolkits',
+  path: '/{-$orgSlug}/toolkits',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const DotSecretsRoute = DotSecretsRouteImport.update({
   id: '/{-$orgSlug}/secrets',
   path: '/{-$orgSlug}/secrets',
   path: '/{-$orgSlug}/policies',
   getParentRoute: () => rootRouteImport,
 } as any)
+const DotToolkitsDottoolkitSlugRoute =
+  DotToolkitsDottoolkitSlugRouteImport.update({
+    id: '/$toolkitSlug',
+    path: '/$toolkitSlug',
+    getParentRoute: () => DotToolkitsRoute,
+  } as any)
 const DotResumeDotexecutionIdRoute = DotResumeDotexecutionIdRouteImport.update({
   id: '/{-$orgSlug}/resume/$executionId',
   path: '/{-$orgSlug}/resume/$executionId',
 export interface FileRoutesByFullPath {
   '/{-$orgSlug}/policies': typeof DotPoliciesRoute
   '/{-$orgSlug}/secrets': typeof DotSecretsRoute
+  '/{-$orgSlug}/toolkits': typeof DotToolkitsRouteWithChildren
   '/{-$orgSlug}/tools': typeof DotToolsRoute
   '/{-$orgSlug}/': typeof DotIndexRoute
   '/{-$orgSlug}/integrations/$namespace': typeof DotIntegrationsDotnamespaceRoute
   '/{-$orgSlug}/resume/$executionId': typeof DotResumeDotexecutionIdRoute
+  '/{-$orgSlug}/toolkits/$toolkitSlug': typeof DotToolkitsDottoolkitSlugRoute
   '/{-$orgSlug}/integrations/add/$pluginKey': typeof DotIntegrationsDotaddDotpluginKeyRoute
   '/{-$orgSlug}/plugins/$pluginId/$': typeof DotPluginsDotpluginIdDotsplatRoute
 }
 export interface FileRoutesByTo {
   '/{-$orgSlug}/policies': typeof DotPoliciesRoute
   '/{-$orgSlug}/secrets': typeof DotSecretsRoute
+  '/{-$orgSlug}/toolkits': typeof DotToolkitsRouteWithChildren
   '/{-$orgSlug}/tools': typeof DotToolsRoute
   '/{-$orgSlug}': typeof DotIndexRoute
   '/{-$orgSlug}/integrations/$namespace': typeof DotIntegrationsDotnamespaceRoute
   '/{-$orgSlug}/resume/$executionId': typeof DotResumeDotexecutionIdRoute
+  '/{-$orgSlug}/toolkits/$toolkitSlug': typeof DotToolkitsDottoolkitSlugRoute
   '/{-$orgSlug}/integrations/add/$pluginKey': typeof DotIntegrationsDotaddDotpluginKeyRoute
   '/{-$orgSlug}/plugins/$pluginId/$': typeof DotPluginsDotpluginIdDotsplatRoute
 }
   __root__: typeof rootRouteImport
   '/{-$orgSlug}/policies': typeof DotPoliciesRoute
   '/{-$orgSlug}/secrets': typeof DotSecretsRoute
+  '/{-$orgSlug}/toolkits': typeof DotToolkitsRouteWithChildren
   '/{-$orgSlug}/tools': typeof DotToolsRoute
   '/{-$orgSlug}/': typeof DotIndexRoute
   '/{-$orgSlug}/integrations/$namespace': typeof DotIntegrationsDotnamespaceRoute
   '/{-$orgSlug}/resume/$executionId': typeof DotResumeDotexecutionIdRoute
+  '/{-$orgSlug}/toolkits/$toolkitSlug': typeof DotToolkitsDottoolkitSlugRoute
   '/{-$orgSlug}/integrations/add/$pluginKey': typeof DotIntegrationsDotaddDotpluginKeyRoute
   '/{-$orgSlug}/plugins/$pluginId/$': typeof DotPluginsDotpluginIdDotsplatRoute
 }
   fullPaths:
     | '/{-$orgSlug}/policies'
     | '/{-$orgSlug}/secrets'
+    | '/{-$orgSlug}/toolkits'
     | '/{-$orgSlug}/tools'
     | '/{-$orgSlug}/'
     | '/{-$orgSlug}/integrations/$namespace'
     | '/{-$orgSlug}/resume/$executionId'
+    | '/{-$orgSlug}/toolkits/$toolkitSlug'
     | '/{-$orgSlug}/integrations/add/$pluginKey'
     | '/{-$orgSlug}/plugins/$pluginId/$'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/{-$orgSlug}/policies'
     | '/{-$orgSlug}/secrets'
+    | '/{-$orgSlug}/toolkits'
     | '/{-$orgSlug}/tools'
     | '/{-$orgSlug}'
     | '/{-$orgSlug}/integrations/$namespace'
     | '/{-$orgSlug}/resume/$executionId'
+    | '/{-$orgSlug}/toolkits/$toolkitSlug'
     | '/{-$orgSlug}/integrations/add/$pluginKey'
     | '/{-$orgSlug}/plugins/$pluginId/$'
   id:
     | '__root__'
     | '/{-$orgSlug}/policies'
     | '/{-$orgSlug}/secrets'
+    | '/{-$orgSlug}/toolkits'
     | '/{-$orgSlug}/tools'
     | '/{-$orgSlug}/'
     | '/{-$orgSlug}/integrations/$namespace'
     | '/{-$orgSlug}/resume/$executionId'
+    | '/{-$orgSlug}/toolkits/$toolkitSlug'
     | '/{-$orgSlug}/integrations/add/$pluginKey'
     | '/{-$orgSlug}/plugins/$pluginId/$'
   fileRoutesById: FileRoutesById
 export interface RootRouteChildren {
   DotPoliciesRoute: typeof DotPoliciesRoute
   DotSecretsRoute: typeof DotSecretsRoute
+  DotToolkitsRoute: typeof DotToolkitsRouteWithChildren
   DotToolsRoute: typeof DotToolsRoute
   DotIndexRoute: typeof DotIndexRoute
   DotIntegrationsDotnamespaceRoute: typeof DotIntegrationsDotnamespaceRoute
       preLoaderRoute: typeof DotToolsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/{-$orgSlug}/toolkits': {
+      id: '/{-$orgSlug}/toolkits'
+      path: '/{-$orgSlug}/toolkits'
+      fullPath: '/{-$orgSlug}/toolkits'
+      preLoaderRoute: typeof DotToolkitsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/{-$orgSlug}/secrets': {
       id: '/{-$orgSlug}/secrets'
       path: '/{-$orgSlug}/secrets'
       preLoaderRoute: typeof DotPoliciesRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/{-$orgSlug}/toolkits/$toolkitSlug': {
+      id: '/{-$orgSlug}/toolkits/$toolkitSlug'
+      path: '/$toolkitSlug'
+      fullPath: '/{-$orgSlug}/toolkits/$toolkitSlug'
+      preLoaderRoute: typeof DotToolkitsDottoolkitSlugRouteImport
+      parentRoute: typeof DotToolkitsRoute
+    }
     '/{-$orgSlug}/resume/$executionId': {
       id: '/{-$orgSlug}/resume/$executionId'
       path: '/{-$orgSlug}/resume/$executionId'
   }
 }
+interface DotToolkitsRouteChildren {
+  DotToolkitsDottoolkitSlugRoute: typeof DotToolkitsDottoolkitSlugRoute
+}
+const DotToolkitsRouteChildren: DotToolkitsRouteChildren = {
+  DotToolkitsDottoolkitSlugRoute: DotToolkitsDottoolkitSlugRoute,
+}
+const DotToolkitsRouteWithChildren = DotToolkitsRoute._addFileChildren(
+  DotToolkitsRouteChildren,
+)
 const rootRouteChildren: RootRouteChildren = {
   DotPoliciesRoute: DotPoliciesRoute,
   DotSecretsRoute: DotSecretsRoute,
+  DotToolkitsRoute: DotToolkitsRouteWithChildren,
   DotToolsRoute: DotToolsRoute,
   DotIndexRoute: DotIndexRoute,
   DotIntegrationsDotnamespaceRoute: DotIntegrationsDotnamespaceRoute,

packages/react/src/routes/toolkits-route.tsx+23−0

@@ -0,0 +1,23 @@
	1	import { notFound } from "@tanstack/react-router";
	2	import { useClientPlugins } from "@executor-js/sdk/client";
	3
	4	export function ToolkitsPluginRoute(props: { toolkitSlug?: string }) {
	5	const plugins = useClientPlugins();
	6	const plugin = plugins.find((candidate) => candidate.id === "toolkits");
	7	const path = props.toolkitSlug ? `/${props.toolkitSlug}` : "/";
	8	const page = plugin?.pages?.find((candidate) =>
	9	props.toolkitSlug ? candidate.path === "/$toolkitSlug" : candidate.path === "/",
	10	);
	11
	12	// oxlint-disable-next-line executor/no-try-catch-or-throw -- boundary: TanStack Router represents not-found from components by throwing notFound()
	13	if (!plugin \|\| !page) throw notFound();
	14
	15	const Component = page.component;
	16	return (
	17	<Component
	18	params={props.toolkitSlug ? { toolkitSlug: props.toolkitSlug } : {}}
	19	path={path}
	20	pluginId={plugin.id}
	21	/>
	22	);
	23	}

packages/react/src/routes/toolkits.$toolkitSlug.tsx+12−0

@@ -0,0 +1,12 @@
	1	import { createFileRoute } from "@tanstack/react-router";
	2
	3	import { ToolkitsPluginRoute } from "./toolkits-route";
	4
	5	export const Route = createFileRoute("/{-$orgSlug}/toolkits/$toolkitSlug")({
	6	component: ToolkitsRouteComponent,
	7	});
	8
	9	function ToolkitsRouteComponent() {
	10	const { toolkitSlug } = Route.useParams();
	11	return <ToolkitsPluginRoute toolkitSlug={toolkitSlug} />;
	12	}

packages/react/src/routes/toolkits.tsx+12−0

@@ -0,0 +1,12 @@
	1	import { createFileRoute, useParams } from "@tanstack/react-router";
	2
	3	import { ToolkitsPluginRoute } from "./toolkits-route";
	4
	5	export const Route = createFileRoute("/{-$orgSlug}/toolkits")({
	6	component: ToolkitsRouteComponent,
	7	});
	8
	9	function ToolkitsRouteComponent() {
	10	const { toolkitSlug } = useParams({ strict: false }) as { toolkitSlug?: string };
	11	return <ToolkitsPluginRoute toolkitSlug={toolkitSlug} />;
	12	}