lael-labs/executor

apps/cloud/src/api.request-scope.node.test.ts+6−5

@@ -183,11 +183,12 @@ describe("makeApiLive (prod handler factory) request scoping", () => { · 182 unmodified lines
183	}).handler;	183	}).handler;
184		184
185	// Hit a protected route. ExecutionStackMiddleware short-circuits with	185	// Hit a protected route. ExecutionStackMiddleware short-circuits with
186	// 403 (no session cookie) but not before `requestScopedMiddleware`	186	// 401/404 (no session cookie / unknown org) but not before
187	// has built the per-request layer. We don't care about the response —	187	// `requestScopedMiddleware` has built the per-request layer. We don't
188	// only that the layer was built once per request.	188	// care about the response — only that the layer was built once per
189	await handler(new Request("http://test.local/scope"));	189	// request. The protected API mounts under `/api/:org/...`.
190	await handler(new Request("http://test.local/scope"));	190	await handler(new Request("http://test.local/api/test_org/scope"));
		191	await handler(new Request("http://test.local/api/test_org/scope"));
191		192
192	expect(counts.acquires).toBe(2);	193	expect(counts.acquires).toBe(2);
193	expect(counts.releases).toBe(2);	194	expect(counts.releases).toBe(2);

apps/cloud/src/api/protected.ts+50−5

@@ -21,11 +21,22 @@ import { WorkOSAuth } from "../auth/workos"; · 20 unmodified lines
21	import { AutumnService } from "../services/autumn";	21	import { AutumnService } from "../services/autumn";
22	import { DbService } from "../services/db";	22	import { DbService } from "../services/db";
23	import { makeExecutionStack } from "../services/execution-stack";	23	import { makeExecutionStack } from "../services/execution-stack";
		24	import { makeUserStore } from "../services/user-store";
24	import { HttpResponseError } from "./error-response";	25	import { HttpResponseError } from "./error-response";
25	import { RequestScopedServicesLive } from "./layers";	26	import { RequestScopedServicesLive } from "./layers";
26	import { ProtectedCloudApi, ProtectedCloudApiLive, RouterConfig } from "./protected-layers";	27	import { ProtectedCloudApi, ProtectedCloudApiLive, RouterConfig } from "./protected-layers";
27	import { requestScopedMiddleware } from "./request-scoped";	28	import { requestScopedMiddleware } from "./request-scoped";
28		29
		30	// Pull the URL `:org` segment from a request path. The protected API mounts
		31	// under `/api/:org/...` — anything else is a programming error and surfaces as
		32	// a typed `no_organization` response so the framework's error pipeline can
		33	// render it.
		34	const orgHandleFromPath = (pathname: string): string \| null => {
		35	const parts = pathname.split("/").filter((part) => part.length > 0);
		36	if (parts.length < 2 \|\| parts[0] !== "api") return null;
		37	return parts[1] ?? null;
		38	};
		39
29	// Pre-compute the per-plugin `Effect.provideService(extensionService,	40	// Pre-compute the per-plugin `Effect.provideService(extensionService,
30	// executor[id])` chain. The plugin spec carries the Service tag so	41	// executor[id])` chain. The plugin spec carries the Service tag so
31	// this file doesn't import each plugin's `*/api` directly.	42	// this file doesn't import each plugin's `*/api` directly.
@@ -72,19 +83,42 @@ const ExecutionStackMiddleware = HttpRouter.middleware<{ · 40 unmodified lines
72	const webRequest = yield* HttpServerRequest.toWeb(request);	83	const webRequest = yield* HttpServerRequest.toWeb(request);
73	const workos = yield* WorkOSAuth;	84	const workos = yield* WorkOSAuth;
74	const session = yield* workos.authenticateRequest(webRequest);	85	const session = yield* workos.authenticateRequest(webRequest);
75	if (!session \|\| !session.organizationId) {	86	if (!session) {
76	return yield* new HttpResponseError({	87	return yield* new HttpResponseError({
77	status: 403,	88	status: 401,
		89	code: "unauthorized",
		90	message: "Unauthorized",
		91	});
		92	}
		93	// The URL is the source of truth for active org. Pull the handle
		94	// off the request path, resolve it to an org row, and verify
		95	// membership against WorkOS — independent of `session.organizationId`.
		96	const url = new URL(webRequest.url);
		97	const handle = orgHandleFromPath(url.pathname);
		98	if (!handle) {
		99	return yield* new HttpResponseError({
		100	status: 404,
78	code: "no_organization",	101	code: "no_organization",
79	message: "No organization in session",	102	message: "Missing organization in URL",
80	});	103	});
81	}	104	}
82	const org = yield* authorizeOrganization(session.userId, session.organizationId);	105	const { db } = yield* DbService;
		106	const resolved = yield* Effect.promise(() =>
		107	makeUserStore(db).getOrganizationByHandle(handle),
		108	);
		109	if (!resolved) {
		110	return yield* new HttpResponseError({
		111	status: 404,
		112	code: "no_organization",
		113	message: `Organization "${handle}" not found`,
		114	});
		115	}
		116	const org = yield* authorizeOrganization(session.userId, resolved.id);
83	if (!org) {	117	if (!org) {
84	return yield* new HttpResponseError({	118	return yield* new HttpResponseError({
85	status: 403,	119	status: 403,
86	code: "no_organization",	120	code: "no_organization",
87	message: "No organization in session",	121	message: "Not a member of this organization",
88	});	122	});
89	}	123	}
90	const auth = AuthContext.of({	124	const auth = AuthContext.of({
@@ -105,6 +139,16 @@ const ExecutionStackMiddleware = HttpRouter.middleware<{ · 14 unmodified lines
105	}),	139	}),
106	);	140	);
107		141
		142	// Layer that swaps the boot router with a `:org`-prefixed view, so every
		143	// route registered by `ProtectedCloudApiLive` mounts under `/api/:org/*`.
		144	// `HttpRouter.prefixed` returns a wrapper that delegates to the underlying
		145	// router state — the outer router-config layer still owns the actual
		146	// FindMyWay instance, so non-protected routes (auth, autumn, swagger) keep
		147	// their unprefixed paths.
		148	const PrefixedRouterLayer = Layer.effect(HttpRouter.HttpRouter)(
		149	Effect.map(HttpRouter.HttpRouter.asEffect(), (router) => router.prefixed("/api/:org")),
		150	);
		151
108	// `rsLive` is the per-request DB layer. Combining it into the auth	152	// `rsLive` is the per-request DB layer. Combining it into the auth
109	// middleware collapses `requires: DbService \| UserStoreService` to	153	// middleware collapses `requires: DbService \| UserStoreService` to
110	// never (so `.layer` is a real Layer instead of the "Need to combine"	154	// never (so `.layer` is a real Layer instead of the "Need to combine"
@@ -118,6 +162,7 @@ export const makeProtectedApiLive = (rsLive: Layer.Layer<DbService \| UserStoreSe · 7 unmodified lines
118	).layer;	162	).layer;
119	return ProtectedCloudApiLive.pipe(	163	return ProtectedCloudApiLive.pipe(
120	Layer.provide(protectedMiddleware),	164	Layer.provide(protectedMiddleware),
		165	Layer.provide(PrefixedRouterLayer),
121	Layer.provideMerge(HttpApiSwagger.layer(ProtectedCloudApi, { path: "/docs" })),	166	Layer.provideMerge(HttpApiSwagger.layer(ProtectedCloudApi, { path: "/docs" })),
122	Layer.provideMerge(RouterConfig),	167	Layer.provideMerge(RouterConfig),
123	);	168	);

apps/cloud/src/auth/api.ts+5−19

 const AuthOrganization = Schema.Struct({
   id: Schema.String,
+  handle: Schema.String,
   name: Schema.String,
 });
 const AuthMeResponse = Schema.Struct({
   user: AuthUser,
-  organization: Schema.NullOr(AuthOrganization),
+  /** Memberships, with the org `handle` URL routes use. Sorted alphabetically. */
-});
+  organizations: Schema.Array(AuthOrganization),
-const AuthOrganizationSummary = Schema.Struct({
-  id: Schema.String,
-  name: Schema.String,
 });
 const AuthOrganizationsResponse = Schema.Struct({
-  organizations: Schema.Array(AuthOrganizationSummary),
+  organizations: Schema.Array(AuthOrganization),
-  activeOrganizationId: Schema.NullOr(Schema.String),
-});
-const SwitchOrganizationBody = Schema.Struct({
-  organizationId: Schema.String,
 });
 const CreateOrganizationBody = Schema.Struct({
 const CreateOrganizationResponse = Schema.Struct({
   id: Schema.String,
+  handle: Schema.String,
   name: Schema.String,
 });
   login: "/api/auth/login",
   logout: "/api/auth/logout",
   callback: "/api/auth/callback",
-  switchOrganization: "/api/auth/switch-organization",
 } as const;
 const AuthErrors = [UserStoreError, WorkOSError] as const;
       error: WorkOSError,
     }),
   )
-  .add(
-    HttpApiEndpoint.post("switchOrganization", "/auth/switch-organization", {
-      payload: SwitchOrganizationBody,
-      error: WorkOSError,
-    }),
-  )
   .add(
     HttpApiEndpoint.post("createOrganization", "/auth/create-organization", {
       payload: CreateOrganizationBody,

apps/cloud/src/auth/handlers.ts+64−77

@@ -1,12 +1,11 @@
1	import { HttpApi, HttpApiBuilder } from "effect/unstable/httpapi";	1	import { HttpApi, HttpApiBuilder } from "effect/unstable/httpapi";
2	import { HttpServerResponse } from "effect/unstable/http";	2	import { HttpServerResponse } from "effect/unstable/http";
3	import { Duration, Effect } from "effect";	3	import { Duration, Effect } from "effect";
4	import { setCookie, deleteCookie } from "@tanstack/react-start/server";	4	import { deleteCookie } from "@tanstack/react-start/server";
5		5
6	import { AUTH_PATHS, CloudAuthApi, CloudAuthPublicApi } from "./api";	6	import { AUTH_PATHS, CloudAuthApi, CloudAuthPublicApi } from "./api";
7	import { SessionContext } from "./middleware";	7	import { SessionContext } from "./middleware";
8	import { UserStoreService } from "./context";	8	import { UserStoreService } from "./context";
9	import { authorizeOrganization } from "./authorize-organization";
10	import { env } from "cloudflare:workers";	9	import { env } from "cloudflare:workers";
11	import { WorkOSError } from "./errors";	10	import { WorkOSError } from "./errors";
12	import { WorkOSAuth } from "./workos";	11	import { WorkOSAuth } from "./workos";
@@ -181,9 +180,37 @@ export const CloudSessionAuthHandlers = HttpApiBuilder.group( · 168 unmodified lines
181	.handle("me", () =>	180	.handle("me", () =>
182	Effect.gen(function* () {	181	Effect.gen(function* () {
183	const session = yield* SessionContext;	182	const session = yield* SessionContext;
184	const org = session.organizationId	183	const users = yield* UserStoreService;
185	? yield* authorizeOrganization(session.accountId, session.organizationId)	184	const workos = yield* WorkOSAuth;
186	: null;	185
		186	const memberships = yield* workos.listUserMemberships(session.accountId);
		187	// Mirror each org locally so the local handle exists; ignore mirror
		188	// failures (the directory layer already has the canonical name +
		189	// membership — a transient db error here shouldn't blank the user's
		190	// org list).
		191	const orgs = yield* Effect.all(
		192	memberships.data.map((m) =>
		193	workos.getOrganization(m.organizationId).pipe(
		194	Effect.flatMap((org) =>
		195	users
		196	.use((s) => s.upsertOrganization({ id: org.id, name: org.name }))
		197	.pipe(
		198	Effect.map((mirror) => ({
		199	id: mirror.id,
		200	handle: mirror.handle,
		201	name: org.name,
		202	})),
		203	),
		204	),
		205	Effect.orElseSucceed(() => null),
		206	),
		207	),
		208	{ concurrency: "unbounded" },
		209	);
		210
		211	const organizations = orgs
		212	.filter(<T>(v: T \| null): v is T => v !== null)
		213	.sort((a, b) => a.name.localeCompare(b.name));
187		214
188	return {	215	return {
189	user: {	216	user: {
@@ -192,7 +219,7 @@ export const CloudSessionAuthHandlers = HttpApiBuilder.group( · 2 unmodified lines
192	name: session.name,	219	name: session.name,
193	avatarUrl: session.avatarUrl,	220	avatarUrl: session.avatarUrl,
194	},	221	},
195	organization: org ? { id: org.id, name: org.name } : null,	222	organizations,
196	};	223	};
197	}),	224	}),
198	)	225	)
@@ -203,39 +230,35 @@ export const CloudSessionAuthHandlers = HttpApiBuilder.group( · 4 unmodified lines
203	.handle("organizations", () =>	230	.handle("organizations", () =>
204	Effect.gen(function* () {	231	Effect.gen(function* () {
205	const workos = yield* WorkOSAuth;	232	const workos = yield* WorkOSAuth;
		233	const users = yield* UserStoreService;
206	const session = yield* SessionContext;	234	const session = yield* SessionContext;
207		235
208	const memberships = yield* workos.listUserMemberships(session.accountId);	236	const memberships = yield* workos.listUserMemberships(session.accountId);
209	const organizations = yield* Effect.all(	237	const orgs = yield* Effect.all(
210	memberships.data.map((m) =>	238	memberships.data.map((m) =>
211	workos.getOrganization(m.organizationId).pipe(	239	workos.getOrganization(m.organizationId).pipe(
212	Effect.map((org) => ({ id: org.id, name: org.name })),	240	Effect.flatMap((org) =>
		241	users
		242	.use((s) => s.upsertOrganization({ id: org.id, name: org.name }))
		243	.pipe(
		244	Effect.map((mirror) => ({
		245	id: mirror.id,
		246	handle: mirror.handle,
		247	name: org.name,
		248	})),
		249	),
		250	),
213	Effect.orElseSucceed(() => null),	251	Effect.orElseSucceed(() => null),
214	),	252	),
215	),	253	),
216	{ concurrency: "unbounded" },	254	{ concurrency: "unbounded" },
217	);	255	);
218		256
219	return {	257	const organizations = orgs
220	organizations: organizations.filter(	258	.filter(<T>(v: T \| null): v is T => v !== null)
221	(org): org is NonNullable<typeof org> => org !== null,	259	.sort((a, b) => a.name.localeCompare(b.name));
222	),
223	activeOrganizationId: session.organizationId,
224	};
225	}),
226	)
227	.handle("switchOrganization", ({ payload }) =>
228	Effect.gen(function* () {
229	const workos = yield* WorkOSAuth;
230	const session = yield* SessionContext;
231		260
232	const refreshed = yield* workos.refreshSession(	261	return { organizations };
233	session.sealedSession,
234	payload.organizationId,
235	);
236	if (refreshed) {
237	setCookie("wos-session", refreshed, COOKIE_OPTIONS);
238	}
239	}),	262	}),
240	)	263	)
241	.handle("createOrganization", ({ payload }) =>	264	.handle("createOrganization", ({ payload }) =>
@@ -247,34 +270,15 @@ export const CloudSessionAuthHandlers = HttpApiBuilder.group( · 5 unmodified lines
247	const name = payload.name.trim();	270	const name = payload.name.trim();
248	const org = yield* workos.createOrganization(name);	271	const org = yield* workos.createOrganization(name);
249	yield* workos.createMembership(org.id, session.accountId, "admin");	272	yield* workos.createMembership(org.id, session.accountId, "admin");
250	yield* users.use((s) => s.upsertOrganization({ id: org.id, name: org.name }));	273	const mirrored = yield* users.use((s) =>
251		274	s.upsertOrganization({ id: org.id, name: org.name }),
252	// Try to attach the new org to the current session. This can fail	275	);
253	// (or silently return a session still scoped to the old org) when	276	// No session refresh — the URL is the source of truth for active
254	// the caller's current session is stale — most commonly after the	277	// org now, so the client just navigates to /:handle/... after
255	// user was removed from the org their cookie is pinned to. In that	278	// create. The WorkOS session's `organizationId` only proves login
256	// case we can't repair the session in-place, so we clear the	279	// identity; it doesn't gate per-org access (that goes through the
257	// cookie and fail loudly; the frontend will bounce to login and	280	// membership check on the URL-resolved org).
258	// the callback's rehydrate path will pick up the new membership.	281	return { id: org.id, handle: mirrored.handle, name: org.name };
259	const refreshed = yield* workos.refreshSession(session.sealedSession, org.id);
260	const verified = refreshed ? yield* workos.authenticateSealedSession(refreshed) : null;
261
262	if (!refreshed \|\| !verified \|\| verified.organizationId !== org.id) {
263	yield* Effect.logWarning(
264	"createOrganization: unable to attach new org to current session",
265	{
266	userId: session.accountId,
267	newOrgId: org.id,
268	refreshReturnedSession: refreshed != null,
269	verifiedOrgId: verified?.organizationId ?? null,
270	},
271	);
272	deleteCookie("wos-session", { path: "/" });
273	return yield* new WorkOSError();
274	}
275
276	setCookie("wos-session", refreshed, COOKIE_OPTIONS);
277	return { id: org.id, name: org.name };
278	}),	282	}),
279	)	283	)
280	.handle("pendingInvitations", () =>	284	.handle("pendingInvitations", () =>
@@ -330,7 +334,6 @@ export const CloudSessionAuthHandlers = HttpApiBuilder.group( · 49 unmodified lines
330	Effect.gen(function* () {	334	Effect.gen(function* () {
331	const workos = yield* WorkOSAuth;	335	const workos = yield* WorkOSAuth;
332	const users = yield* UserStoreService;	336	const users = yield* UserStoreService;
333	const session = yield* SessionContext;
334		337
335	const invitation = yield* workos.acceptInvitation(payload.invitationId);	338	const invitation = yield* workos.acceptInvitation(payload.invitationId);
336		339
@@ -343,30 +346,14 @@ export const CloudSessionAuthHandlers = HttpApiBuilder.group( · 6 unmodified lines
343	return yield* new WorkOSError();	346	return yield* new WorkOSError();
344	}	347	}
345		348
346	// Mirror the org locally so domain tables can FK against it.	349	// Mirror the org locally so domain tables can FK against it and
		350	// the URL handle exists by the time the client navigates.
347	const org = yield* workos.getOrganization(invitation.organizationId);	351	const org = yield* workos.getOrganization(invitation.organizationId);
348	yield* users.use((s) => s.upsertOrganization({ id: org.id, name: org.name }));	352	yield* users.use((s) => s.upsertOrganization({ id: org.id, name: org.name }));
349		353
350	// Attach the just-accepted org to the current session. Same shape	354	// No session refresh — the URL is the source of truth for active
351	// as createOrganization: refresh + verify; if we can't pin the	355	// org. The client refreshes the auth atom and navigates to the
352	// session in-place, clear the cookie and let the user bounce	356	// new org's `/$handle` after this resolves.
353	// through login again. The acceptance has already succeeded
354	// server-side, so the next login will pick up the membership.
355	const refreshed = yield* workos.refreshSession(session.sealedSession, org.id);
356	const verified = refreshed ? yield* workos.authenticateSealedSession(refreshed) : null;
357
358	if (!refreshed \|\| !verified \|\| verified.organizationId !== org.id) {
359	yield* Effect.logWarning("acceptInvitation: unable to attach org to current session", {
360	userId: session.accountId,
361	orgId: org.id,
362	refreshReturnedSession: refreshed != null,
363	verifiedOrgId: verified?.organizationId ?? null,
364	});
365	deleteCookie("wos-session", { path: "/" });
366	return yield* new WorkOSError();
367	}
368
369	setCookie("wos-session", refreshed, COOKIE_OPTIONS);
370	return { id: org.id, name: org.name };	357	return { id: org.id, name: org.name };
371	}),	358	}),
372	),	359	),

apps/cloud/src/routeTree.gen.ts+216−167

 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 import { Route as rootRouteImport } from './routes/__root'
-import { Route as ToolsRouteImport } from './routes/tools'
+import { Route as OrgRouteImport } from './routes/$org'
-import { Route as SecretsRouteImport } from './routes/secrets'
-import { Route as PoliciesRouteImport } from './routes/policies'
-import { Route as OrgRouteImport } from './routes/org'
-import { Route as ConnectionsRouteImport } from './routes/connections'
-import { Route as BillingRouteImport } from './routes/billing'
 import { Route as IndexRouteImport } from './routes/index'
-import { Route as SourcesNamespaceRouteImport } from './routes/sources.$namespace'
+import { Route as OrgIndexRouteImport } from './routes/$org/index'
-import { Route as BillingPlansRouteImport } from './routes/billing_.plans'
+import { Route as OrgToolsRouteImport } from './routes/$org/tools'
-import { Route as SourcesAddPluginKeyRouteImport } from './routes/sources.add.$pluginKey'
+import { Route as OrgSecretsRouteImport } from './routes/$org/secrets'
+import { Route as OrgPoliciesRouteImport } from './routes/$org/policies'
+import { Route as OrgConnectionsRouteImport } from './routes/$org/connections'
+import { Route as OrgSourcesNamespaceRouteImport } from './routes/$org/sources.$namespace'
+import { Route as OrgChar91Char93SettingsRouteImport } from './routes/$org/[-].settings'
+import { Route as OrgChar91Char93BillingRouteImport } from './routes/$org/[-].billing'
+import { Route as OrgSourcesAddPluginKeyRouteImport } from './routes/$org/sources.add.$pluginKey'
+import { Route as OrgChar91Char93BillingPlansRouteImport } from './routes/$org/[-].billing_.plans'
-const ToolsRoute = ToolsRouteImport.update({
+const OrgRoute = OrgRouteImport.update({
+  id: '/$org',
+  path: '/$org',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const OrgIndexRoute = OrgIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => OrgRoute,
+} as any)
+const OrgToolsRoute = OrgToolsRouteImport.update({
   id: '/tools',
   path: '/tools',
-  getParentRoute: () => rootRouteImport,
+  getParentRoute: () => OrgRoute,
 } as any)
-const SecretsRoute = SecretsRouteImport.update({
+const OrgSecretsRoute = OrgSecretsRouteImport.update({
   id: '/secrets',
   path: '/secrets',
-  getParentRoute: () => rootRouteImport,
+  getParentRoute: () => OrgRoute,
 } as any)
-const PoliciesRoute = PoliciesRouteImport.update({
+const OrgPoliciesRoute = OrgPoliciesRouteImport.update({
   id: '/policies',
   path: '/policies',
-  getParentRoute: () => rootRouteImport,
+  getParentRoute: () => OrgRoute,
-} as any)
-const OrgRoute = OrgRouteImport.update({
-  id: '/org',
-  path: '/org',
-  getParentRoute: () => rootRouteImport,
 } as any)
-const ConnectionsRoute = ConnectionsRouteImport.update({
+const OrgConnectionsRoute = OrgConnectionsRouteImport.update({
   id: '/connections',
   path: '/connections',
-  getParentRoute: () => rootRouteImport,
+  getParentRoute: () => OrgRoute,
-} as any)
-const BillingRoute = BillingRouteImport.update({
-  id: '/billing',
-  path: '/billing',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const IndexRoute = IndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => rootRouteImport,
 } as any)
-const SourcesNamespaceRoute = SourcesNamespaceRouteImport.update({
+const OrgSourcesNamespaceRoute = OrgSourcesNamespaceRouteImport.update({
   id: '/sources/$namespace',
   path: '/sources/$namespace',
-  getParentRoute: () => rootRouteImport,
+  getParentRoute: () => OrgRoute,
 } as any)
-const BillingPlansRoute = BillingPlansRouteImport.update({
+const OrgChar91Char93SettingsRoute = OrgChar91Char93SettingsRouteImport.update({
-  id: '/billing_/plans',
+  id: '/-/settings',
-  path: '/billing/plans',
+  path: '/-/settings',
-  getParentRoute: () => rootRouteImport,
+  getParentRoute: () => OrgRoute,
+} as any)
+const OrgChar91Char93BillingRoute = OrgChar91Char93BillingRouteImport.update({
+  id: '/-/billing',
+  path: '/-/billing',
+  getParentRoute: () => OrgRoute,
 } as any)
-const SourcesAddPluginKeyRoute = SourcesAddPluginKeyRouteImport.update({
+const OrgSourcesAddPluginKeyRoute = OrgSourcesAddPluginKeyRouteImport.update({
   id: '/sources/add/$pluginKey',
   path: '/sources/add/$pluginKey',
-  getParentRoute: () => rootRouteImport,
+  getParentRoute: () => OrgRoute,
 } as any)
+const OrgChar91Char93BillingPlansRoute =
+  OrgChar91Char93BillingPlansRouteImport.update({
+    id: '/-/billing_/plans',
+    path: '/-/billing/plans',
+    getParentRoute: () => OrgRoute,
+  } as any)
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
-  '/billing': typeof BillingRoute
+  '/$org': typeof OrgRouteWithChildren
-  '/connections': typeof ConnectionsRoute
+  '/$org/connections': typeof OrgConnectionsRoute
-  '/org': typeof OrgRoute
+  '/$org/policies': typeof OrgPoliciesRoute
-  '/policies': typeof PoliciesRoute
+  '/$org/secrets': typeof OrgSecretsRoute
-  '/secrets': typeof SecretsRoute
+  '/$org/tools': typeof OrgToolsRoute
-  '/tools': typeof ToolsRoute
+  '/$org/': typeof OrgIndexRoute
-  '/billing/plans': typeof BillingPlansRoute
+  '/$org/-/billing': typeof OrgChar91Char93BillingRoute
-  '/sources/$namespace': typeof SourcesNamespaceRoute
+  '/$org/-/settings': typeof OrgChar91Char93SettingsRoute
-  '/sources/add/$pluginKey': typeof SourcesAddPluginKeyRoute
+  '/$org/sources/$namespace': typeof OrgSourcesNamespaceRoute
+  '/$org/-/billing/plans': typeof OrgChar91Char93BillingPlansRoute
+  '/$org/sources/add/$pluginKey': typeof OrgSourcesAddPluginKeyRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
-  '/billing': typeof BillingRoute
+  '/$org/connections': typeof OrgConnectionsRoute
-  '/connections': typeof ConnectionsRoute
+  '/$org/policies': typeof OrgPoliciesRoute
-  '/org': typeof OrgRoute
+  '/$org/secrets': typeof OrgSecretsRoute
-  '/policies': typeof PoliciesRoute
+  '/$org/tools': typeof OrgToolsRoute
-  '/secrets': typeof SecretsRoute
+  '/$org': typeof OrgIndexRoute
-  '/tools': typeof ToolsRoute
+  '/$org/-/billing': typeof OrgChar91Char93BillingRoute
-  '/billing/plans': typeof BillingPlansRoute
+  '/$org/-/settings': typeof OrgChar91Char93SettingsRoute
-  '/sources/$namespace': typeof SourcesNamespaceRoute
+  '/$org/sources/$namespace': typeof OrgSourcesNamespaceRoute
-  '/sources/add/$pluginKey': typeof SourcesAddPluginKeyRoute
+  '/$org/-/billing/plans': typeof OrgChar91Char93BillingPlansRoute
+  '/$org/sources/add/$pluginKey': typeof OrgSourcesAddPluginKeyRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
-  '/billing': typeof BillingRoute
+  '/$org': typeof OrgRouteWithChildren
-  '/connections': typeof ConnectionsRoute
+  '/$org/connections': typeof OrgConnectionsRoute
-  '/org': typeof OrgRoute
+  '/$org/policies': typeof OrgPoliciesRoute
-  '/policies': typeof PoliciesRoute
+  '/$org/secrets': typeof OrgSecretsRoute
-  '/secrets': typeof SecretsRoute
+  '/$org/tools': typeof OrgToolsRoute
-  '/tools': typeof ToolsRoute
+  '/$org/': typeof OrgIndexRoute
-  '/billing_/plans': typeof BillingPlansRoute
+  '/$org/-/billing': typeof OrgChar91Char93BillingRoute
-  '/sources/$namespace': typeof SourcesNamespaceRoute
+  '/$org/-/settings': typeof OrgChar91Char93SettingsRoute
-  '/sources/add/$pluginKey': typeof SourcesAddPluginKeyRoute
+  '/$org/sources/$namespace': typeof OrgSourcesNamespaceRoute
+  '/$org/-/billing_/plans': typeof OrgChar91Char93BillingPlansRoute
+  '/$org/sources/add/$pluginKey': typeof OrgSourcesAddPluginKeyRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
-    | '/billing'
+    | '/$org'
-    | '/connections'
+    | '/$org/connections'
-    | '/org'
+    | '/$org/policies'
-    | '/policies'
+    | '/$org/secrets'
-    | '/secrets'
+    | '/$org/tools'
-    | '/tools'
+    | '/$org/'
-    | '/billing/plans'
+    | '/$org/-/billing'
-    | '/sources/$namespace'
+    | '/$org/-/settings'
-    | '/sources/add/$pluginKey'
+    | '/$org/sources/$namespace'
+    | '/$org/-/billing/plans'
+    | '/$org/sources/add/$pluginKey'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
-    | '/billing'
+    | '/$org/connections'
-    | '/connections'
+    | '/$org/policies'
-    | '/org'
+    | '/$org/secrets'
-    | '/policies'
+    | '/$org/tools'
-    | '/secrets'
+    | '/$org'
-    | '/tools'
+    | '/$org/-/billing'
-    | '/billing/plans'
+    | '/$org/-/settings'
-    | '/sources/$namespace'
+    | '/$org/sources/$namespace'
-    | '/sources/add/$pluginKey'
+    | '/$org/-/billing/plans'
+    | '/$org/sources/add/$pluginKey'
   id:
     | '__root__'
     | '/'
-    | '/billing'
+    | '/$org'
-    | '/connections'
+    | '/$org/connections'
-    | '/org'
+    | '/$org/policies'
-    | '/policies'
+    | '/$org/secrets'
-    | '/secrets'
+    | '/$org/tools'
-    | '/tools'
+    | '/$org/'
-    | '/billing_/plans'
+    | '/$org/-/billing'
-    | '/sources/$namespace'
+    | '/$org/-/settings'
-    | '/sources/add/$pluginKey'
+    | '/$org/sources/$namespace'
+    | '/$org/-/billing_/plans'
+    | '/$org/sources/add/$pluginKey'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
-  BillingRoute: typeof BillingRoute
+  OrgRoute: typeof OrgRouteWithChildren
-  ConnectionsRoute: typeof ConnectionsRoute
-  OrgRoute: typeof OrgRoute
-  PoliciesRoute: typeof PoliciesRoute
-  SecretsRoute: typeof SecretsRoute
-  ToolsRoute: typeof ToolsRoute
-  BillingPlansRoute: typeof BillingPlansRoute
-  SourcesNamespaceRoute: typeof SourcesNamespaceRoute
-  SourcesAddPluginKeyRoute: typeof SourcesAddPluginKeyRoute
 }
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
-    '/tools': {
+    '/$org': {
-      id: '/tools'
+      id: '/$org'
-      path: '/tools'
+      path: '/$org'
-      fullPath: '/tools'
+      fullPath: '/$org'
-      preLoaderRoute: typeof ToolsRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/secrets': {
-      id: '/secrets'
-      path: '/secrets'
-      fullPath: '/secrets'
-      preLoaderRoute: typeof SecretsRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/policies': {
-      id: '/policies'
-      path: '/policies'
-      fullPath: '/policies'
-      preLoaderRoute: typeof PoliciesRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/org': {
-      id: '/org'
-      path: '/org'
-      fullPath: '/org'
       preLoaderRoute: typeof OrgRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/connections': {
-      id: '/connections'
-      path: '/connections'
-      fullPath: '/connections'
-      preLoaderRoute: typeof ConnectionsRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/billing': {
-      id: '/billing'
-      path: '/billing'
-      fullPath: '/billing'
-      preLoaderRoute: typeof BillingRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/': {
       id: '/'
       path: '/'
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/sources/$namespace': {
+    '/$org/': {
-      id: '/sources/$namespace'
+      id: '/$org/'
+      path: '/'
+      fullPath: '/$org/'
+      preLoaderRoute: typeof OrgIndexRouteImport
+      parentRoute: typeof OrgRoute
+    }
+    '/$org/tools': {
+      id: '/$org/tools'
+      path: '/tools'
+      fullPath: '/$org/tools'
+      preLoaderRoute: typeof OrgToolsRouteImport
+      parentRoute: typeof OrgRoute
+    }
+    '/$org/secrets': {
+      id: '/$org/secrets'
+      path: '/secrets'
+      fullPath: '/$org/secrets'
+      preLoaderRoute: typeof OrgSecretsRouteImport
+      parentRoute: typeof OrgRoute
+    }
+    '/$org/policies': {
+      id: '/$org/policies'
+      path: '/policies'
+      fullPath: '/$org/policies'
+      preLoaderRoute: typeof OrgPoliciesRouteImport
+      parentRoute: typeof OrgRoute
+    }
+    '/$org/connections': {
+      id: '/$org/connections'
+      path: '/connections'
+      fullPath: '/$org/connections'
+      preLoaderRoute: typeof OrgConnectionsRouteImport
+      parentRoute: typeof OrgRoute
+    }
+    '/$org/sources/$namespace': {
+      id: '/$org/sources/$namespace'
       path: '/sources/$namespace'
-      fullPath: '/sources/$namespace'
+      fullPath: '/$org/sources/$namespace'
-      preLoaderRoute: typeof SourcesNamespaceRouteImport
+      preLoaderRoute: typeof OrgSourcesNamespaceRouteImport
-      parentRoute: typeof rootRouteImport
+      parentRoute: typeof OrgRoute
     }
-    '/billing_/plans': {
+    '/$org/-/settings': {
-      id: '/billing_/plans'
+      id: '/$org/-/settings'
-      path: '/billing/plans'
+      path: '/-/settings'
-      fullPath: '/billing/plans'
+      fullPath: '/$org/-/settings'
-      preLoaderRoute: typeof BillingPlansRouteImport
+      preLoaderRoute: typeof OrgChar91Char93SettingsRouteImport
-      parentRoute: typeof rootRouteImport
+      parentRoute: typeof OrgRoute
+    }
+    '/$org/-/billing': {
+      id: '/$org/-/billing'
+      path: '/-/billing'
+      fullPath: '/$org/-/billing'
+      preLoaderRoute: typeof OrgChar91Char93BillingRouteImport
+      parentRoute: typeof OrgRoute
     }
-    '/sources/add/$pluginKey': {
+    '/$org/sources/add/$pluginKey': {
-      id: '/sources/add/$pluginKey'
+      id: '/$org/sources/add/$pluginKey'
       path: '/sources/add/$pluginKey'
-      fullPath: '/sources/add/$pluginKey'
+      fullPath: '/$org/sources/add/$pluginKey'
-      preLoaderRoute: typeof SourcesAddPluginKeyRouteImport
+      preLoaderRoute: typeof OrgSourcesAddPluginKeyRouteImport
-      parentRoute: typeof rootRouteImport
+      parentRoute: typeof OrgRoute
+    }
+    '/$org/-/billing_/plans': {
+      id: '/$org/-/billing_/plans'
+      path: '/-/billing/plans'
+      fullPath: '/$org/-/billing/plans'
+      preLoaderRoute: typeof OrgChar91Char93BillingPlansRouteImport
+      parentRoute: typeof OrgRoute
     }
   }
 }
+interface OrgRouteChildren {
+  OrgConnectionsRoute: typeof OrgConnectionsRoute
+  OrgPoliciesRoute: typeof OrgPoliciesRoute
+  OrgSecretsRoute: typeof OrgSecretsRoute
+  OrgToolsRoute: typeof OrgToolsRoute
+  OrgIndexRoute: typeof OrgIndexRoute
+  OrgChar91Char93BillingRoute: typeof OrgChar91Char93BillingRoute
+  OrgChar91Char93SettingsRoute: typeof OrgChar91Char93SettingsRoute
+  OrgSourcesNamespaceRoute: typeof OrgSourcesNamespaceRoute
+  OrgChar91Char93BillingPlansRoute: typeof OrgChar91Char93BillingPlansRoute
+  OrgSourcesAddPluginKeyRoute: typeof OrgSourcesAddPluginKeyRoute
+}
+const OrgRouteChildren: OrgRouteChildren = {
+  OrgConnectionsRoute: OrgConnectionsRoute,
+  OrgPoliciesRoute: OrgPoliciesRoute,
+  OrgSecretsRoute: OrgSecretsRoute,
+  OrgToolsRoute: OrgToolsRoute,
+  OrgIndexRoute: OrgIndexRoute,
+  OrgChar91Char93BillingRoute: OrgChar91Char93BillingRoute,
+  OrgChar91Char93SettingsRoute: OrgChar91Char93SettingsRoute,
+  OrgSourcesNamespaceRoute: OrgSourcesNamespaceRoute,
+  OrgChar91Char93BillingPlansRoute: OrgChar91Char93BillingPlansRoute,
+  OrgSourcesAddPluginKeyRoute: OrgSourcesAddPluginKeyRoute,
+}
+const OrgRouteWithChildren = OrgRoute._addFileChildren(OrgRouteChildren)
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-  BillingRoute: BillingRoute,
+  OrgRoute: OrgRouteWithChildren,
-  ConnectionsRoute: ConnectionsRoute,
-  OrgRoute: OrgRoute,
-  PoliciesRoute: PoliciesRoute,
-  SecretsRoute: SecretsRoute,
-  ToolsRoute: ToolsRoute,
-  BillingPlansRoute: BillingPlansRoute,
-  SourcesNamespaceRoute: SourcesNamespaceRoute,
-  SourcesAddPluginKeyRoute: SourcesAddPluginKeyRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

apps/cloud/src/routes/$org.tsx+61−0

@@ -0,0 +1,61 @@
	1	import { createFileRoute, useNavigate, useParams } from "@tanstack/react-router";
	2	import { useEffect } from "react";
	3	import { AutumnProvider } from "autumn-js/react";
	4	import { ExecutorProvider } from "@executor-js/react/api/provider";
	5	import { setBaseUrl } from "@executor-js/react/api/base-url";
	6	import { Toaster } from "@executor-js/react/components/sonner";
	7	import { ExecutorPluginsProvider } from "@executor-js/sdk/client";
	8	import { plugins as clientPlugins } from "virtual:executor/plugins-client";
	9
	10	import { findOrgByHandle, useAuth } from "../web/auth";
	11	import { OrgRouteProvider } from "../web/org-route";
	12	import { Shell, ShellSkeleton } from "../web/shell";
	13
	14	export const Route = createFileRoute("/$org")({
	15	component: OrgLayout,
	16	});
	17
	18	function OrgLayout() {
	19	const auth = useAuth();
	20	const navigate = useNavigate();
	21	const { org: handle } = useParams({ from: Route.id });
	22
	23	// Redirect to the first membership when the URL handle is unknown. We only
	24	// run the redirect once auth resolves to authenticated; loading/unauth are
	25	// already handled by AuthGate in __root.
	26	const matched = auth.status === "authenticated" ? findOrgByHandle(auth, handle) : null;
	27	const fallback = auth.status === "authenticated" ? (auth.organizations[0] ?? null) : null;
	28
	29	useEffect(() => {
	30	if (auth.status !== "authenticated") return;
	31	if (matched) return;
	32	if (!fallback) return;
	33	void navigate({ to: "/$org", params: { org: fallback.handle }, replace: true });
	34	}, [auth.status, matched, fallback, navigate]);
	35
	36	if (auth.status !== "authenticated") return null;
	37	if (!matched) return null;
	38
	39	// Point the executor API client at this org's prefixed routes. Done before
	40	// first render of the executor providers so all queries see the right URL.
	41	// The cloud app is single-tenant per page, so a one-shot setter is fine —
	42	// when the URL handle changes, this re-runs at the start of the next render.
	43	if (typeof window !== "undefined") {
	44	setBaseUrl(`${window.location.origin}/api/${matched.handle}`);
	45	}
	46
	47	return (
	48	<OrgRouteProvider
	49	value={{ orgId: matched.id, orgName: matched.name, orgHandle: matched.handle }}
	50	>
	51	<AutumnProvider pathPrefix="/autumn">
	52	<ExecutorProvider fallback={<ShellSkeleton />}>
	53	<ExecutorPluginsProvider plugins={clientPlugins}>
	54	<Shell />
	55	<Toaster />
	56	</ExecutorPluginsProvider>
	57	</ExecutorProvider>
	58	</AutumnProvider>
	59	</OrgRouteProvider>
	60	);
	61	}

apps/cloud/src/routes/$org/[-].billing.tsxrenamed from apps/cloud/src/routes/billing.tsx+5−2

 import { useCustomer, useListPlans } from "autumn-js/react";
 import { Button } from "@executor-js/react/components/button";
 import { Badge } from "@executor-js/react/components/badge";
+import { useOrgRoute } from "../../web/org-route";
 type Plan = NonNullable<ReturnType<typeof useListPlans>["data"]>[number];
-export const Route = createFileRoute("/billing")({
+export const Route = createFileRoute("/$org/-/billing")({
   component: BillingPage,
 });
 };
 function BillingPage() {
+  const { orgHandle } = useOrgRoute();
   const { data: customer, openCustomerPortal, isLoading: customerLoading } = useCustomer();
   const { data: plans, isLoading: plansLoading } = useListPlans();
               </Button>
             )}
             <Link
-              to="/billing/plans"
+              to="/$org/-/billing/plans"
+              params={{ org: orgHandle }}
               className="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
             >
               Manage

apps/cloud/src/routes/$org/[-].billing_.plans.tsxrenamed from apps/cloud/src/routes/billing_.plans.tsx+7−4

 import { useEffect, useState } from "react";
 import { createFileRoute, Link } from "@tanstack/react-router";
-import { useAuth } from "../web/auth";
+import { useAuth } from "../../web/auth";
 import { useCustomer, useListPlans } from "autumn-js/react";
 import { Button } from "@executor-js/react/components/button";
 import { Badge } from "@executor-js/react/components/badge";
 } from "@executor-js/react/components/dialog";
 import { Input } from "@executor-js/react/components/input";
 import { Label } from "@executor-js/react/components/label";
+import { useOrgRoute } from "../../web/org-route";
 type Plan = NonNullable<ReturnType<typeof useListPlans>["data"]>[number];
-export const Route = createFileRoute("/billing_/plans")({
+export const Route = createFileRoute("/$org/-/billing_/plans")({
   component: PlansPage,
 });
 )}`;
 function PlansPage() {
+  const { orgHandle } = useOrgRoute();
   const { attach, openCustomerPortal, isLoading: customerLoading } = useCustomer();
   const { data: plans, isLoading: plansLoading, isFetching } = useListPlans();
   const [loadingPlan, setLoadingPlan] = useState<string | null>(null);
       <div className="mx-auto max-w-5xl px-6 py-10 lg:px-10 lg:py-14">
         <div className="mb-8">
           <Link
-            to="/billing"
+            to="/$org/-/billing"
+            params={{ org: orgHandle }}
             className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors mb-4"
           >
             <svg viewBox="0 0 16 16" fill="none" className="size-3.5">
 function SlackContactCta() {
   const auth = useAuth();
+  const { orgName } = useOrgRoute();
   const signedIn = auth.status === "authenticated" ? auth : null;
   const prefillEmail = signedIn?.user.email ?? "";
-  const orgName = signedIn?.organization?.name ?? "";
   const [open, setOpen] = useState(false);
   const [email, setEmail] = useState(prefillEmail);

apps/cloud/src/routes/$org/[-].settings.tsxrenamed from apps/cloud/src/routes/org.tsx+10−10

 import { useReducer, useState } from "react";
 import { Cause, Exit, Result } from "effect";
-import { Forbidden } from "../org/api";
+import { Forbidden } from "../../org/api";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { useAtomValue, useAtomSet } from "@effect/atom-react";
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
   getDomainVerificationLink,
   deleteDomain,
   updateOrgName,
-} from "../web/org-atoms";
+} from "../../web/org-atoms";
-import { useAuth } from "../web/auth";
+import { useOrgRoute } from "../../web/org-route";
-export const Route = createFileRoute("/org")({
+export const Route = createFileRoute("/$org/-/settings")({
   component: OrgPage,
 });
 }
 function OrgPage() {
-  const auth = useAuth();
+  const { orgName: routeOrgName, orgHandle } = useOrgRoute();
-  const orgName =
+  const orgName = routeOrgName ?? "Organization";
-    auth.status === "authenticated" ? (auth.organization?.name ?? "Organization") : "Organization";
   const membersResult = useAtomValue(orgMembersAtom);
   const rolesResult = useAtomValue(orgRolesAtom);
   const domainsResult = useAtomValue(orgDomainsAtom);
               <p className="text-sm text-muted-foreground">
                 Join by domain is available on the Team plan.
               </p>
-              <Link to="/billing/plans">
+              <Link to="/$org/-/billing/plans" params={{ org: orgHandle }}>
                 <Button size="sm" variant="outline">
                   Upgrade
                 </Button>
                 Invite member
               </Button>
             ) : (
-              <Link to="/billing/plans">
+              <Link to="/$org/-/billing/plans" params={{ org: orgHandle }}>
                 <Button size="sm" className="min-w-32">
                   Upgrade
                 </Button>
 }
 function InviteErrorAlert({ cause }: { cause: Cause.Cause<unknown> }) {
+  const { orgHandle } = useOrgRoute();
   const failure = Cause.findError(cause);
   const error = Result.isSuccess(failure) ? failure.success : null;
         <p className="text-sm text-destructive">
           You've reached your member limit. Upgrade to Team to invite more.
         </p>
-        <Link to="/billing/plans">
+        <Link to="/$org/-/billing/plans" params={{ org: orgHandle }}>
           <Button size="sm" variant="outline">
             Upgrade
           </Button>

apps/cloud/src/routes/$org/connections.tsxrenamed from apps/cloud/src/routes/connections.tsx+1−1

@@ -1,6 +1,6 @@
1	import { createFileRoute } from "@tanstack/react-router";	1	import { createFileRoute } from "@tanstack/react-router";
2	import { ConnectionsPage } from "@executor-js/react/pages/connections";	2	import { ConnectionsPage } from "@executor-js/react/pages/connections";
3		3
4	export const Route = createFileRoute("/connections")({	4	export const Route = createFileRoute("/$org/connections")({
5	component: () => <ConnectionsPage />,	5	component: () => <ConnectionsPage />,
6	});	6	});

apps/cloud/src/routes/$org/index.tsx+6−0

@@ -0,0 +1,6 @@
	1	import { createFileRoute } from "@tanstack/react-router";
	2	import { SourcesPage } from "@executor-js/react/pages/sources";
	3
	4	export const Route = createFileRoute("/$org/")({
	5	component: SourcesPage,
	6	});

apps/cloud/src/routes/$org/policies.tsxrenamed from apps/cloud/src/routes/policies.tsx+1−1

@@ -1,6 +1,6 @@
1	import { createFileRoute } from "@tanstack/react-router";	1	import { createFileRoute } from "@tanstack/react-router";
2	import { PoliciesPage } from "@executor-js/react/pages/policies";	2	import { PoliciesPage } from "@executor-js/react/pages/policies";
3		3
4	export const Route = createFileRoute("/policies")({	4	export const Route = createFileRoute("/$org/policies")({
5	component: () => <PoliciesPage />,	5	component: () => <PoliciesPage />,
6	});	6	});

apps/cloud/src/routes/$org/secrets.tsxrenamed from apps/cloud/src/routes/secrets.tsx+1−1

@@ -1,7 +1,7 @@
1	import { createFileRoute } from "@tanstack/react-router";	1	import { createFileRoute } from "@tanstack/react-router";
2	import { SecretsPage } from "@executor-js/react/pages/secrets";	2	import { SecretsPage } from "@executor-js/react/pages/secrets";
3		3
4	export const Route = createFileRoute("/secrets")({	4	export const Route = createFileRoute("/$org/secrets")({
5	component: () => (	5	component: () => (
6	<SecretsPage	6	<SecretsPage
7	addSecretDescription="Store a credential or API key for this organization."	7	addSecretDescription="Store a credential or API key for this organization."

apps/cloud/src/routes/$org/sources.$namespace.tsxrenamed from apps/cloud/src/routes/sources.$namespace.tsx+1−1

@@ -1,7 +1,7 @@
1	import { createFileRoute } from "@tanstack/react-router";	1	import { createFileRoute } from "@tanstack/react-router";
2	import { SourceDetailPage } from "@executor-js/react/pages/source-detail";	2	import { SourceDetailPage } from "@executor-js/react/pages/source-detail";
3		3
4	export const Route = createFileRoute("/sources/$namespace")({	4	export const Route = createFileRoute("/$org/sources/$namespace")({
5	component: () => {	5	component: () => {
6	const { namespace } = Route.useParams();	6	const { namespace } = Route.useParams();
7	return <SourceDetailPage namespace={namespace} />;	7	return <SourceDetailPage namespace={namespace} />;

apps/cloud/src/routes/$org/sources.add.$pluginKey.tsxrenamed from apps/cloud/src/routes/sources.add.$pluginKey.tsx+1−1

@@ -10,7 +10,7 @@ const SearchParams = Schema.toStandardSchemaV1( · 9 unmodified lines
10	}),	10	}),
11	);	11	);
12		12
13	export const Route = createFileRoute("/sources/add/$pluginKey")({	13	export const Route = createFileRoute("/$org/sources/add/$pluginKey")({
14	validateSearch: SearchParams,	14	validateSearch: SearchParams,
15	component: () => {	15	component: () => {
16	const { pluginKey } = Route.useParams();	16	const { pluginKey } = Route.useParams();

apps/cloud/src/routes/$org/tools.tsxrenamed from apps/cloud/src/routes/tools.tsx+1−1

@@ -1,6 +1,6 @@
1	import { createFileRoute } from "@tanstack/react-router";	1	import { createFileRoute } from "@tanstack/react-router";
2	import { ToolsPage } from "@executor-js/react/pages/tools";	2	import { ToolsPage } from "@executor-js/react/pages/tools";
3		3
4	export const Route = createFileRoute("/tools")({	4	export const Route = createFileRoute("/$org/tools")({
5	component: ToolsPage,	5	component: ToolsPage,
6	});	6	});

apps/cloud/src/routes/__root.tsx+4−80

@@ -1,18 +1,12 @@
1	import React from "react";	1	import React from "react";
2	import * as Sentry from "@sentry/react";	2	import * as Sentry from "@sentry/react";
3	import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router";	3	import { HeadContent, Outlet, Scripts, createRootRoute } from "@tanstack/react-router";
4	import { AutumnProvider } from "autumn-js/react";
5	import posthog from "posthog-js";	4	import posthog from "posthog-js";
6	import { PostHogProvider } from "posthog-js/react";	5	import { PostHogProvider } from "posthog-js/react";
7	import { ExecutorProvider } from "@executor-js/react/api/provider";
8	import { Skeleton } from "@executor-js/react/components/skeleton";
9	import { Toaster } from "@executor-js/react/components/sonner";
10	import { ExecutorPluginsProvider } from "@executor-js/sdk/client";
11	import { plugins as clientPlugins } from "virtual:executor/plugins-client";
12	import { AuthProvider, useAuth } from "../web/auth";	6	import { AuthProvider, useAuth } from "../web/auth";
13	import { LoginPage } from "../web/pages/login";	7	import { LoginPage } from "../web/pages/login";
14	import { OnboardingPage } from "../web/pages/onboarding";	8	import { OnboardingPage } from "../web/pages/onboarding";
15	import { Shell } from "../web/shell";	9	import { ShellSkeleton } from "../web/shell";
16	import appCss from "@executor-js/react/globals.css?url";	10	import appCss from "@executor-js/react/globals.css?url";
17		11
18	if (typeof window !== "undefined" && import.meta.env.VITE_PUBLIC_SENTRY_DSN) {	12	if (typeof window !== "undefined" && import.meta.env.VITE_PUBLIC_SENTRY_DSN) {
@@ -90,67 +84,6 @@ function RootComponent() { · 71 unmodified lines
90	);	84	);
91	}	85	}
92		86
93	function ShellSkeleton() {
94	return (
95	<div className="flex h-screen overflow-hidden">
96	{/* Desktop sidebar skeleton */}
97	<aside className="hidden w-52 shrink-0 border-r border-sidebar-border bg-sidebar md:flex md:flex-col lg:w-56">
98	<div className="flex h-12 shrink-0 items-center border-b border-sidebar-border px-4">
99	<Skeleton className="h-4 w-20" />
100	</div>
101	<nav className="flex flex-1 flex-col gap-1 overflow-y-auto p-2">
102	<Skeleton className="h-7 w-full rounded-md" />
103	<Skeleton className="h-7 w-full rounded-md" />
104	<Skeleton className="h-7 w-full rounded-md" />
105	<Skeleton className="h-7 w-full rounded-md" />
106	<div className="mt-5 mb-2 px-2.5">
107	<Skeleton className="h-3 w-14" />
108	</div>
109	<div className="flex flex-col gap-1">
110	<Skeleton className="h-7 w-11/12 rounded-md" />
111	<Skeleton className="h-7 w-10/12 rounded-md" />
112	<Skeleton className="h-7 w-9/12 rounded-md" />
113	</div>
114	</nav>
115	<div className="shrink-0 border-t border-sidebar-border px-3 py-2.5">
116	<div className="flex items-center gap-2.5">
117	<Skeleton className="size-7 rounded-full" />
118	<div className="flex min-w-0 flex-1 flex-col gap-1">
119	<Skeleton className="h-3 w-24" />
120	<Skeleton className="h-3 w-16" />
121	</div>
122	</div>
123	</div>
124	</aside>
125
126	{/* Main content skeleton */}
127	<main className="flex min-h-0 flex-1 flex-col overflow-hidden">
128	{/* Mobile top bar */}
129	<div className="flex h-12 shrink-0 items-center justify-between border-b border-border bg-background px-4 md:hidden">
130	<Skeleton className="size-7 rounded-md" />
131	<Skeleton className="h-4 w-20" />
132	<div className="w-7 shrink-0" />
133	</div>
134
135	<div className="flex min-h-0 flex-1 flex-col gap-6 px-6 py-8">
136	<div className="flex items-center justify-between">
137	<div className="flex flex-col gap-2">
138	<Skeleton className="h-6 w-40" />
139	<Skeleton className="h-4 w-64" />
140	</div>
141	<Skeleton className="h-8 w-28 rounded-md" />
142	</div>
143	<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
144	{Array.from({ length: 6 }).map((_, i) => (
145	<Skeleton key={i} className="h-24 w-full rounded-lg" />
146	))}
147	</div>
148	</div>
149	</main>
150	</div>
151	);
152	}
153
154	function AuthGate() {	87	function AuthGate() {
155	const auth = useAuth();	88	const auth = useAuth();
156		89
@@ -162,18 +95,9 @@ function AuthGate() { · 5 unmodified lines
162	return <LoginPage />;	95	return <LoginPage />;
163	}	96	}
164		97
165	if (auth.organization == null) {	98	if (auth.organizations.length === 0) {
166	return <OnboardingPage />;	99	return <OnboardingPage />;
167	}	100	}
168		101
169	return (	102	return <Outlet />;
170	<AutumnProvider pathPrefix="/api/autumn">
171	<ExecutorProvider fallback={<ShellSkeleton />}>
172	<ExecutorPluginsProvider plugins={clientPlugins}>
173	<Shell />
174	<Toaster />
175	</ExecutorPluginsProvider>
176	</ExecutorProvider>
177	</AutumnProvider>
178	);
179	}	103	}

apps/cloud/src/routes/index.tsx+23−3

@@ -1,6 +1,26 @@
1	import { createFileRoute } from "@tanstack/react-router";	1	import { createFileRoute, useNavigate } from "@tanstack/react-router";
2	import { SourcesPage } from "@executor-js/react/pages/sources";	2	import { useEffect } from "react";
		3
		4	import { useAuth } from "../web/auth";
3		5
4	export const Route = createFileRoute("/")({	6	export const Route = createFileRoute("/")({
5	component: SourcesPage,	7	component: IndexRedirect,
6	});	8	});
		9
		10	function IndexRedirect() {
		11	const auth = useAuth();
		12	const navigate = useNavigate();
		13	const firstHandle =
		14	auth.status === "authenticated" ? (auth.organizations[0]?.handle ?? null) : null;
		15
		16	useEffect(() => {
		17	if (!firstHandle) return;
		18	void navigate({ to: "/$org", params: { org: firstHandle }, replace: true });
		19	}, [firstHandle, navigate]);
		20
		21	return (
		22	<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
		23	Loading…
		24	</div>
		25	);
		26	}

apps/cloud/src/services/__test-harness__/api-harness.ts+93−24

 // two test-only swaps:
 //
 //   - `OrgAuthLive` is replaced with `FakeOrgAuthLive`, which reads
-//     the scope id off `x-test-org-id` instead of the WorkOS cookie.
+//     the org handle from the URL `/api/:org/...` prefix instead of
+//     the WorkOS cookie.
 //   - `workos-vault` is configured with an in-memory `WorkOSVaultClient`
 //     so secret writes never reach WorkOS's real API.
 //
 // Tests get a `fetchForOrg(orgId)` they can hand to `FetchHttpClient`
 // and then call `HttpApiClient.make(ProtectedCloudApi)` against it.
 // Each test picks its own org id (usually a random UUID) so rows don't
-// collide across tests.
+// collide across tests. The harness seeds an organizations row whose
+// `handle` equals the org id so `resolveOrgContext(orgId)` succeeds.
 import { Effect, Layer } from "effect";
 import { HttpApiBuilder, HttpApiClient, HttpApiSwagger } from "effect/unstable/httpapi";
   RouterConfig,
 } from "../../api/protected-layers";
 import { DbService } from "../db";
+import { organizations } from "../schema";
 export const TEST_BASE_URL = "http://test.local";
-export const TEST_ORG_HEADER = "x-test-org-id";
+/**
+ * Optional header for tests that need to act as a specific user. The org
+ * id always comes from the URL prefix; only the user is opt-in.
+ */
 export const TEST_USER_HEADER = "x-test-user-id";
 // Mirrors apps/cloud/src/services/executor.ts#createScopedExecutor — the
     });
   });
+// Seed a test organization row whose handle equals the supplied id so the
+// production middleware resolution path (`resolveOrgContext(handle)`) works
+// against the test db. Uses `onConflictDoNothing` so repeated `asOrg(orgId,
+// …)` calls within a test don't fight each other. Lives inside the request
+// pipeline (so DbService is already provided) instead of at factory time
+// — bringing up its own DbService.Live in a Node test process leaks a
+// postgres.js socket that ECONNRESETs across test files.
+const seedTestOrg = (orgId: string) =>
+  Effect.gen(function* () {
+    const { db } = yield* DbService;
+    yield* Effect.promise(() =>
+      db
+        .insert(organizations)
+        .values({ id: orgId, handle: orgId, name: `Org ${orgId}` })
+        .onConflictDoNothing(),
+    );
+  });
 // ---------------------------------------------------------------------------
 // HTTP plumbing
 // ---------------------------------------------------------------------------
+// Pull the URL `:org` segment from a request path. The protected API mounts
+// under `/api/:org/...`. Returning `null` for a malformed prefix forces the
+// downstream handler to surface a typed error rather than panicking.
+const orgHandleFromPath = (pathname: string): string | null => {
+  const parts = pathname.split("/").filter((part) => part.length > 0);
+  if (parts.length < 2 || parts[0] !== "api") return null;
+  return parts[1] ?? null;
+};
 // Test version of the production `ExecutionStackMiddleware` — reads the
-// `x-test-org-id` (and optional `x-test-user-id`) header, builds a
+// org handle from the URL `/api/:org/...` prefix (matching production),
-// test-scoped executor against the live postgres test db with a fake
+// builds a test-scoped executor against the live postgres test db with a
-// WorkOS vault, and provides `AuthContext` + the executor services to the
+// fake WorkOS vault, and provides `AuthContext` + the executor services
-// handler. Mirrors prod's HttpRouter middleware but with test-mode
+// to the handler. The optional `x-test-user-id` header overrides the
-// constructors.
+// default per-org user.
 const TestExecutionStackMiddleware = HttpRouter.middleware<{
   provides:
     | AuthContext
     return (httpEffect) =>
       Effect.gen(function* () {
         const request = yield* HttpServerRequest.HttpServerRequest;
-        const orgId = request.headers[TEST_ORG_HEADER];
+        const webRequest = yield* HttpServerRequest.toWeb(request);
-        if (!orgId || typeof orgId !== "string") {
+        const url = new URL(webRequest.url);
-          // oxlint-disable-next-line executor/no-effect-escape-hatch, executor/no-error-constructor -- boundary: test HTTP harness has no request context without x-test-org-id
+        const orgId = orgHandleFromPath(url.pathname);
-          return yield* Effect.die(new Error("missing x-test-org-id"));
+        if (!orgId) {
+          // oxlint-disable-next-line executor/no-effect-escape-hatch -- boundary: test HTTP harness has no request context without /api/:org prefix
+          return yield* Effect.die(
+            // oxlint-disable-next-line executor/no-error-constructor -- boundary: test HTTP harness invariant on missing prefix
+            new Error(`missing /api/:org prefix in ${url.pathname}`),
+          );
         }
+        // Lazily seed the org row so production-mode `resolveOrgContext` (used
+        // anywhere that takes the URL handle as truth) finds it. The test
+        // harness can't pre-seed at factory time without leaking sockets.
+        yield* seedTestOrg(orgId);
         const userHeader = request.headers[TEST_USER_HEADER];
         const userId =
           typeof userHeader === "string" && userHeader.length > 0
   }),
 ).layer;
+// Mirror the production setup — the protected API mounts under `/api/:org`
+// via a prefixed router view. The outer `HttpRouter` from
+// `HttpServer.layerServices` is the underlying state; the prefix wrapper
+// rewrites added paths only.
+const PrefixedRouterLayer = Layer.effect(HttpRouter.HttpRouter)(
+  Effect.map(HttpRouter.HttpRouter.asEffect(), (router) => router.prefixed("/api/:org")),
+);
 const TestApiLive = HttpApiBuilder.layer(ProtectedCloudApi).pipe(
   Layer.provide(ProtectedCloudApiHandlers),
   Layer.provide(TestExecutionStackMiddleware),
+  Layer.provide(PrefixedRouterLayer),
   Layer.provideMerge(HttpApiSwagger.layer(ProtectedCloudApi, { path: "/docs" })),
   Layer.provideMerge(RouterConfig),
   Layer.provideMerge(DbService.Live),
 const handler = HttpRouter.toWebHandler(TestApiLive, { disableLogger: true }).handler;
+// Rewrite outgoing request URLs to `/api/${orgId}${path}` so the prefixed
+// router matches. Tests construct `HttpApiClient.make(...)` against
+// `TEST_BASE_URL` and call endpoint methods that build paths like
+// `/scopes/.../sources` — we splice the org segment in front before the
+// request reaches the in-process handler.
+const rewriteRequestForOrg = async (
+  base: Request,
+  orgId: string,
+  extraHeaders: Record<string, string> = {},
+): Promise<Request> => {
+  const url = new URL(base.url);
+  if (!url.pathname.startsWith(`/api/${orgId}/`) && url.pathname !== `/api/${orgId}`) {
+    url.pathname = `/api/${orgId}${url.pathname.startsWith("/") ? "" : "/"}${url.pathname}`;
+  }
+  // Buffer the body — Node's `RequestInit` rejects stream bodies without
+  // `duplex: "half"`, and forwarding a Request through `new Request(url, {...})`
+  // is fragile across runtimes. ArrayBuffer survives the round-trip cleanly.
+  const body =
+    base.method === "GET" || base.method === "HEAD" ? undefined : await base.arrayBuffer();
+  return new Request(url.toString(), {
+    method: base.method,
+    headers: { ...Object.fromEntries(base.headers), ...extraHeaders },
+    body,
+  });
+};
 export const fetchForOrg = (orgId: string): typeof globalThis.fetch =>
-  ((input: RequestInfo | URL, init?: RequestInit) => {
+  (async (input: RequestInfo | URL, init?: RequestInit) => {
     const base = input instanceof Request ? input : new Request(input, init);
-    const req = new Request(base, {
+    const req = await rewriteRequestForOrg(base, orgId);
-      headers: { ...Object.fromEntries(base.headers), [TEST_ORG_HEADER]: orgId },
-    });
     return handler(req);
   }) as typeof globalThis.fetch;
 export const fetchForUser = (userId: string, orgId: string): typeof globalThis.fetch =>
-  ((input: RequestInfo | URL, init?: RequestInit) => {
+  (async (input: RequestInfo | URL, init?: RequestInit) => {
     const base = input instanceof Request ? input : new Request(input, init);
-    const req = new Request(base, {
+    const req = await rewriteRequestForOrg(base, orgId, { [TEST_USER_HEADER]: userId });
-      headers: {
-        ...Object.fromEntries(base.headers),
-        [TEST_ORG_HEADER]: orgId,
-        [TEST_USER_HEADER]: userId,
-      },
-    });
     return handler(req);
   }) as typeof globalThis.fetch;

apps/cloud/src/web/auth.tsx+23−17

 import React, { createContext, useContext, useEffect } from "react";
-import * as Atom from "effect/unstable/reactivity/Atom";
 import { useAtomValue } from "@effect/atom-react";
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
 import { usePostHog } from "posthog-js/react";
   avatarUrl: string | null;
 };
-type AuthOrganization = {
+export type AuthOrganization = {
   id: string;
+  handle: string;
   name: string;
 };
   reactivityKeys: [ReactivityKey.auth],
 });
-export const organizationsAtom = Atom.refreshOnWindowFocus(
-  CloudApiClient.query("cloudAuth", "organizations", {
-    timeToLive: "1 minute",
-    reactivityKeys: [ReactivityKey.auth],
-  }),
-);
-export const switchOrganization = CloudApiClient.mutation("cloudAuth", "switchOrganization");
 export const createOrganization = CloudApiClient.mutation("cloudAuth", "createOrganization");
 export const pendingInvitationsAtom = CloudApiClient.query("cloudAuth", "pendingInvitations", {
 type AuthState =
   | { status: "loading" }
   | { status: "unauthenticated" }
-  | { status: "authenticated"; user: AuthUser; organization: AuthOrganization | null };
+  | {
+      status: "authenticated";
+      user: AuthUser;
+      organizations: ReadonlyArray<AuthOrganization>;
+    };
 const AuthContext = createContext<AuthState>({ status: "loading" });
     onSuccess: ({ value }) => ({
       status: "authenticated" as const,
       user: value.user,
-      organization: value.organization,
+      organizations: value.organizations,
     }),
     onFailure: () => ({ status: "unauthenticated" as const }),
   });
   const userId = state.status === "authenticated" ? state.user.id : null;
   const email = state.status === "authenticated" ? state.user.email : null;
   const name = state.status === "authenticated" ? state.user.name : null;
-  const orgId = state.status === "authenticated" ? (state.organization?.id ?? null) : null;
+  // PostHog org grouping uses the first membership; the user can navigate
-  const orgName = state.status === "authenticated" ? (state.organization?.name ?? null) : null;
+  // between orgs in-session. If we want richer grouping later we can
+  // re-emit on URL change.
+  const firstOrgId = state.status === "authenticated" ? (state.organizations[0]?.id ?? null) : null;
+  const firstOrgName =
+    state.status === "authenticated" ? (state.organizations[0]?.name ?? null) : null;
   const isUnauthenticated = state.status === "unauthenticated";
   useEffect(() => {
     if (!posthog) return;
     if (userId) {
       posthog.identify(userId, { email, name });
-      if (orgId) {
+      if (firstOrgId) {
-        posthog.group("organization", orgId, { name: orgName });
+        posthog.group("organization", firstOrgId, { name: firstOrgName });
       }
     } else if (isUnauthenticated) {
       posthog.reset();
     }
-  }, [posthog, userId, email, name, orgId, orgName, isUnauthenticated]);
+  }, [posthog, userId, email, name, firstOrgId, firstOrgName, isUnauthenticated]);
   return <AuthContext.Provider value={state}>{children}</AuthContext.Provider>;
 };
   }
   return <AuthProviderClient>{children}</AuthProviderClient>;
 };
+/** Find the organization in the auth state matching a given URL handle. */
+export const findOrgByHandle = (state: AuthState, handle: string): AuthOrganization | null => {
+  if (state.status !== "authenticated") return null;
+  return state.organizations.find((o) => o.handle === handle) ?? null;
+};

apps/cloud/src/web/components/create-organization-form.tsx+1−1

@@ -7,7 +7,7 @@ import { Label } from "@executor-js/react/components/label"; · 6 unmodified lines
7		7
8	import { createOrganization } from "../auth";	8	import { createOrganization } from "../auth";
9		9
10	type CreatedOrganization = { id: string; name: string };	10	type CreatedOrganization = { id: string; handle: string; name: string };
11		11
12	export function useCreateOrganizationForm(options: {	12	export function useCreateOrganizationForm(options: {
13	defaultName?: string;	13	defaultName?: string;

apps/cloud/src/web/org-route.tsx+31−0

@@ -0,0 +1,31 @@
	1	import React, { createContext, useContext } from "react";
	2
	3	// ---------------------------------------------------------------------------
	4	// OrgRouteContext — provided by the `/$org` layout, consumed by descendants
	5	// that need to know the URL-active organization. The handle drives all link
	6	// generation; the id flows to API calls when one slips outside the URL prefix.
	7	// ---------------------------------------------------------------------------
	8
	9	export type OrgRouteValue = {
	10	readonly orgId: string;
	11	readonly orgName: string;
	12	readonly orgHandle: string;
	13	};
	14
	15	export const OrgRouteContext = createContext<OrgRouteValue \| null>(null);
	16
	17	export const OrgRouteProvider = (props: { value: OrgRouteValue; children: React.ReactNode }) => (
	18	<OrgRouteContext.Provider value={props.value}>{props.children}</OrgRouteContext.Provider>
	19	);
	20
	21	export const useOrgRoute = (): OrgRouteValue => {
	22	const value = useContext(OrgRouteContext);
	23	if (!value) {
	24	// oxlint-disable-next-line executor/no-try-catch-or-throw, executor/no-error-constructor -- boundary: React hook invariant
	25	throw new Error("useOrgRoute must be used within an OrgRouteProvider");
	26	}
	27	return value;
	28	};
	29
	30	/** Optional variant for code rendered both inside and outside the org layout. */
	31	export const useOrgRouteOptional = (): OrgRouteValue \| null => useContext(OrgRouteContext);

apps/cloud/src/web/shell.tsx+181−90

 import { Link, Outlet, useLocation } from "@tanstack/react-router";
 import { useEffect, useRef, useState } from "react";
-import { useAtomValue, useAtomSet } from "@effect/atom-react";
+import { useAtomValue } from "@effect/atom-react";
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
-import * as Exit from "effect/Exit";
 import { sourcesOptimisticAtom } from "@executor-js/react/api/atoms";
 import { useScope } from "@executor-js/react/api/scope-context";
 import { Button } from "@executor-js/react/components/button";
 } from "@executor-js/react/components/dropdown-menu";
 import { SourceFavicon } from "@executor-js/react/components/source-favicon";
 import { CommandPalette } from "@executor-js/react/components/command-palette";
-import { authWriteKeys } from "@executor-js/react/api/reactivity-keys";
 import { AUTH_PATHS } from "../auth/api";
-import { organizationsAtom, switchOrganization, useAuth } from "./auth";
+import { useAuth } from "./auth";
+import { useOrgRoute } from "./org-route";
 import {
   CreateOrganizationFields,
   useCreateOrganizationForm,
 } from "./components/create-organization-form";
-// ── NavItem ──────────────────────────────────────────────────────────────
+// ── ShellSkeleton ────────────────────────────────────────────────────────
-function NavItem(props: { to: string; label: string; active: boolean; onNavigate?: () => void }) {
+export function ShellSkeleton() {
   return (
-    <Link
+    <div className="flex h-screen overflow-hidden">
-      to={props.to}
+      {/* Desktop sidebar skeleton */}
-      onClick={props.onNavigate}
+      <aside className="hidden w-52 shrink-0 border-r border-sidebar-border bg-sidebar md:flex md:flex-col lg:w-56">
-      className={[
+        <div className="flex h-12 shrink-0 items-center border-b border-sidebar-border px-4">
-        "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
+          <Skeleton className="h-4 w-20" />
-        props.active
+        </div>
-          ? "bg-sidebar-active text-foreground font-medium"
+        <nav className="flex flex-1 flex-col gap-1 overflow-y-auto p-2">
-          : "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground",
+          <Skeleton className="h-7 w-full rounded-md" />
-      ].join(" ")}
+          <Skeleton className="h-7 w-full rounded-md" />
-    >
+          <Skeleton className="h-7 w-full rounded-md" />
-      {props.label}
+          <Skeleton className="h-7 w-full rounded-md" />
-    </Link>
+          <div className="mt-5 mb-2 px-2.5">
+            <Skeleton className="h-3 w-14" />
+          </div>
+          <div className="flex flex-col gap-1">
+            <Skeleton className="h-7 w-11/12 rounded-md" />
+            <Skeleton className="h-7 w-10/12 rounded-md" />
+            <Skeleton className="h-7 w-9/12 rounded-md" />
+          </div>
+        </nav>
+        <div className="shrink-0 border-t border-sidebar-border px-3 py-2.5">
+          <div className="flex items-center gap-2.5">
+            <Skeleton className="size-7 rounded-full" />
+            <div className="flex min-w-0 flex-1 flex-col gap-1">
+              <Skeleton className="h-3 w-24" />
+              <Skeleton className="h-3 w-16" />
+            </div>
+          </div>
+        </div>
+      </aside>
+      {/* Main content skeleton */}
+      <main className="flex min-h-0 flex-1 flex-col overflow-hidden">
+        {/* Mobile top bar */}
+        <div className="flex h-12 shrink-0 items-center justify-between border-b border-border bg-background px-4 md:hidden">
+          <Skeleton className="size-7 rounded-md" />
+          <Skeleton className="h-4 w-20" />
+          <div className="w-7 shrink-0" />
+        </div>
+        <div className="flex min-h-0 flex-1 flex-col gap-6 px-6 py-8">
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col gap-2">
+              <Skeleton className="h-6 w-40" />
+              <Skeleton className="h-4 w-64" />
+            </div>
+            <Skeleton className="h-8 w-28 rounded-md" />
+          </div>
+          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <Skeleton key={i} className="h-24 w-full rounded-lg" />
+            ))}
+          </div>
+        </div>
+      </main>
+    </div>
   );
 }
+// ── NavItem styling ──────────────────────────────────────────────────────
+//
+// Sidebar links share active/inactive styling but each call site uses a
+// statically-known route template — keep the className helper here and let
+// the call site own the typed `<Link>`.
+const navItemClassName = (active: boolean) =>
+  [
+    "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
+    active
+      ? "bg-sidebar-active text-foreground font-medium"
+      : "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground",
+  ].join(" ");
 // ── SourceList ───────────────────────────────────────────────────────────
 function SourceList(props: { pathname: string; onNavigate?: () => void }) {
+  const { orgHandle } = useOrgRoute();
   const scopeId = useScope();
   const sources = useAtomValue(sourcesOptimisticAtom(scopeId));
       ) : (
         <div className="flex flex-col gap-px">
           {value.map((s) => {
-            const detailPath = `/sources/${s.id}`;
+            const detailPath = `/${orgHandle}/sources/${s.id}`;
             const active =
               props.pathname === detailPath || props.pathname.startsWith(`${detailPath}/`);
             return (
               <Link
                 key={s.id}
-                to="/sources/$namespace"
+                to="/$org/sources/$namespace"
-                params={{ namespace: s.id }}
+                params={{ org: orgHandle, namespace: s.id }}
                 onClick={props.onNavigate}
                 className={[
                   "group flex items-center gap-2 rounded-md px-2.5 py-1.5 text-xs transition-colors",
 }
 function OrganizationSwitcherItems(props: { activeOrganizationId: string | null }) {
-  const organizations = useAtomValue(organizationsAtom);
+  const auth = useAuth();
-  const doSwitchOrganization = useAtomSet(switchOrganization, { mode: "promiseExit" });
-  const handleSwitch = async (organizationId: string) => {
-    if (organizationId === props.activeOrganizationId) return;
-    const exit = await doSwitchOrganization({
-      payload: { organizationId },
-      reactivityKeys: authWriteKeys,
-    });
-    if (Exit.isSuccess(exit)) window.location.reload();
-  };
-  return AsyncResult.match(organizations, {
+  if (auth.status !== "authenticated") {
-    onInitial: () => <DropdownMenuItem disabled>Loading…</DropdownMenuItem>,
+    return <DropdownMenuItem disabled>Loading…</DropdownMenuItem>;
-    onFailure: () => <DropdownMenuItem disabled>Failed to load organizations</DropdownMenuItem>,
+  }
-    onSuccess: ({ value }) =>
+  if (auth.organizations.length === 0) {
-      value.organizations.length === 0 ? (
+    return <DropdownMenuItem disabled>No organizations</DropdownMenuItem>;
-        <DropdownMenuItem disabled>No organizations</DropdownMenuItem>
+  }
-      ) : (
+  return (
-        <>
+    <>
-          {value.organizations.map((organization: { id: string; name: string }) => {
+      {auth.organizations.map((organization) => {
-            const isActive = organization.id === props.activeOrganizationId;
+        const isActive = organization.id === props.activeOrganizationId;
-            return (
+        return (
-              <DropdownMenuItem
+          <DropdownMenuItem key={organization.id} disabled={isActive} className="text-xs" asChild>
-                key={organization.id}
+            <Link
-                disabled={isActive}
+              to="/$org"
-                onClick={() => handleSwitch(organization.id)}
+              params={{ org: organization.handle }}
-                className="text-xs"
+              className="flex w-full items-center gap-2"
-              >
+            >
-                <span className="min-w-0 flex-1 truncate">{organization.name}</span>
+              <span className="min-w-0 flex-1 truncate">{organization.name}</span>
-                {isActive && <CheckIcon />}
+              {isActive && <CheckIcon />}
-              </DropdownMenuItem>
+            </Link>
-            );
+          </DropdownMenuItem>
-          })}
+        );
-        </>
+      })}
-      ),
+    </>
-  });
+  );
 }
 function CheckIcon() {
 function UserFooter() {
   const auth = useAuth();
+  const orgRoute = useOrgRoute();
   const [createOrganizationOpen, setCreateOrganizationOpen] = useState(false);
   const suggestedOrganizationName =
   const form = useCreateOrganizationForm({
     defaultName: suggestedOrganizationName,
-    onSuccess: () => window.location.reload(),
+    // The form returns the new org's handle on success — navigate via the URL
+    // by reloading at the new handle. Once we wire useNavigate in here we can
+    // do a soft navigation instead.
+    onSuccess: (org) => {
+      // Navigate to the new org's URL — the URL is the source of truth for
+      // active org now, so a hard reload at the new handle re-renders the
+      // shell with the right context.
+      window.location.href = `/${org.handle}`;
+    },
   });
   if (auth.status !== "authenticated") return null;
                 <p className="truncate text-xs font-medium text-foreground">
                   {auth.user.name ?? auth.user.email}
                 </p>
-                {auth.organization && (
+                <p className="truncate text-xs text-muted-foreground">{orgRoute.orgName}</p>
-                  <p className="truncate text-xs text-muted-foreground">{auth.organization.name}</p>
-                )}
               </div>
               <svg
                 viewBox="0 0 16 16"
             </DropdownMenuLabel>
             <DropdownMenuSub>
               <DropdownMenuSubTrigger className="text-xs">
-                <span className="min-w-0 flex-1 truncate">
+                <span className="min-w-0 flex-1 truncate">{orgRoute.orgName}</span>
-                  {auth.organization?.name ?? "No organization"}
-                </span>
               </DropdownMenuSubTrigger>
               <DropdownMenuSubContent className="w-56">
-                <OrganizationSwitcherItems activeOrganizationId={auth.organization?.id ?? null} />
+                <OrganizationSwitcherItems activeOrganizationId={orgRoute.orgId} />
                 <DropdownMenuSeparator />
                 <DropdownMenuItem
                   className="text-xs"
 // ── SidebarContent ───────────────────────────────────────────────────────
 function SidebarContent(props: { pathname: string; onNavigate?: () => void; showBrand?: boolean }) {
-  const isHome = props.pathname === "/";
+  const { orgHandle } = useOrgRoute();
-  const isSecrets = props.pathname === "/secrets";
+  const orgPrefix = `/${orgHandle}`;
-  const isConnections = props.pathname === "/connections";
+  const params = { org: orgHandle };
-  const isPolicies = props.pathname === "/policies";
+  const isHome = props.pathname === orgPrefix || props.pathname === `${orgPrefix}/`;
-  const isBilling = props.pathname === "/billing" || props.pathname.startsWith("/billing/");
+  const isSecrets = props.pathname === `${orgPrefix}/secrets`;
-  const isOrg = props.pathname === "/org";
+  const isConnections = props.pathname === `${orgPrefix}/connections`;
+  const isPolicies = props.pathname === `${orgPrefix}/policies`;
+  const isBilling =
+    props.pathname === `${orgPrefix}/-/billing` ||
+    props.pathname.startsWith(`${orgPrefix}/-/billing/`);
+  const isOrg = props.pathname === `${orgPrefix}/-/settings`;
   return (
     <>
       {props.showBrand !== false && (
         <div className="flex h-12 shrink-0 items-center border-b border-sidebar-border px-4">
-          <Link to="/" className="flex items-center gap-1.5">
+          <Link to="/$org" params={params} className="flex items-center gap-1.5">
             <span className="font-display text-base tracking-tight text-foreground">executor</span>
           </Link>
         </div>
       )}
       <nav className="flex flex-1 flex-col overflow-y-auto p-2">
-        <NavItem to="/" label="Sources" active={isHome} onNavigate={props.onNavigate} />
+        <Link
-        <NavItem
+          to="/$org"
-          to="/connections"
+          params={params}
-          label="Connections"
+          onClick={props.onNavigate}
-          active={isConnections}
+          className={navItemClassName(isHome)}
-          onNavigate={props.onNavigate}
+        >
-        />
+          Sources
-        <NavItem to="/secrets" label="Secrets" active={isSecrets} onNavigate={props.onNavigate} />
+        </Link>
-        <NavItem
+        <Link
-          to="/policies"
+          to="/$org/connections"
-          label="Policies"
+          params={params}
-          active={isPolicies}
+          onClick={props.onNavigate}
-          onNavigate={props.onNavigate}
+          className={navItemClassName(isConnections)}
-        />
+        >
-        <NavItem to="/org" label="Organization" active={isOrg} onNavigate={props.onNavigate} />
+          Connections
-        <NavItem to="/billing" label="Billing" active={isBilling} onNavigate={props.onNavigate} />
+        </Link>
+        <Link
+          to="/$org/secrets"
+          params={params}
+          onClick={props.onNavigate}
+          className={navItemClassName(isSecrets)}
+        >
+          Secrets
+        </Link>
+        <Link
+          to="/$org/policies"
+          params={params}
+          onClick={props.onNavigate}
+          className={navItemClassName(isPolicies)}
+        >
+          Policies
+        </Link>
+        <Link
+          to="/$org/-/settings"
+          params={params}
+          onClick={props.onNavigate}
+          className={navItemClassName(isOrg)}
+        >
+          Organization
+        </Link>
+        <Link
+          to="/$org/-/billing"
+          params={params}
+          onClick={props.onNavigate}
+          className={navItemClassName(isBilling)}
+        >
+          Billing
+        </Link>
         <div className="mt-5 mb-1 px-2.5 text-xs font-medium uppercase tracking-widest text-muted-foreground">
           <span>Sources</span>
 // ── Shell ─────────────────────────────────────────────────────────────────
 export function Shell() {
+  const { orgHandle } = useOrgRoute();
   const location = useLocation();
   const pathname = location.pathname;
   const lastPathname = useRef(pathname);
           />
           <div className="relative flex h-full w-[84vw] max-w-xs flex-col border-r border-sidebar-border bg-sidebar shadow-2xl">
             <div className="flex h-12 shrink-0 items-center justify-between border-b border-sidebar-border px-4">
-              <Link to="/" className="flex items-center gap-1.5">
+              <Link to="/$org" params={{ org: orgHandle }} className="flex items-center gap-1.5">
                 <span className="font-display text-base tracking-tight text-foreground">
                   executor
                 </span>
               />
             </svg>
           </Button>
-          <Link to="/" className="flex items-center gap-1.5">
+          <Link to="/$org" params={{ org: orgHandle }} className="flex items-center gap-1.5">
             <span className="font-display text-base tracking-tight text-foreground">executor</span>
           </Link>
           <div className="w-8 shrink-0" />