Rebase onto main: slug in the SSR auth hint, in-shell foreign-slug 404

Main's edge gate now renders the real shell from the hint, so the hint
must carry the org slug (minted lazily like everywhere else) or the
first paint has no slug to canonicalize onto. The foreign-slug state
renders inside the shell chrome via the shared shell's content slot,
matching main's in-shell route 404; connect-panel asserts the slug-form
MCP command.

Author: RhysSullivan

apps/cloud/src/auth/ssr-gate.ts

@@ -127,26 +127,38 @@ const resolveAuthHint = async (
         avatarUrl: session.avatarUrl,
       },
       organization: session.organizationId
-        ? { id: session.organizationId, name: await organizationName(session.organizationId) }
+        ? {
+            id: session.organizationId,
+            ...(await organizationDisplay(session.organizationId)),
+          }
         : null,
     },
     mint: true,
   };
 };
 
-// The sealed session carries the org ID but not its name; the local mirror
-// has it. Only consulted when minting (absent/mismatched hint) — never on the
-// steady-state path — and over per-request layers, because a connection cached
-// in the shared runtime would be reused across requests, which Cloudflare
-// forbids. A miss or failure reads as "" — display-only, corrected by the
+// The sealed session carries the org ID but not its name/slug; the local
+// mirror has both (the slug minted lazily for orgs that predate slugs). Only
+// consulted when minting (absent/mismatched hint) — never on the steady-state
+// path — and over per-request layers, because a connection cached in the
+// shared runtime would be reused across requests, which Cloudflare forbids. A
+// miss or failure reads as empty strings — display-only, corrected by the
 // client's /account/me write.
-const organizationName = async (organizationId: string): Promise<string> => {
+const organizationDisplay = async (
+  organizationId: string,
+): Promise<{ name: string; slug: string }> => {
   const exit = await getRuntime().runPromiseExit(
     Effect.flatMap(UserStoreService.asEffect(), (users) =>
-      users.use((store) => store.getOrganization(organizationId)),
+      users.use(async (store) => {
+        const org = await store.getOrganization(organizationId);
+        if (!org) return null;
+        return store.ensureOrganizationSlug(org);
+      }),
     ).pipe(Effect.provide(Layer.provide(makeUserStoreLayer(), makeDbLayer()))),
   );
-  return Exit.isSuccess(exit) ? (exit.value?.name ?? "") : "";
+  return Exit.isSuccess(exit)
+    ? { name: exit.value?.name ?? "", slug: exit.value?.slug ?? "" }
+    : { name: "", slug: "" };
 };
 
 const hintSetCookie = (hint: AuthHint) =>

apps/cloud/src/routes/__root.tsx

@@ -260,7 +260,15 @@ function AuthGate() {
               >
                 <OrgSlugGate
                   activeSlug={activeSlug}
-                  foreignSlug={(slug) => <ForeignOrgSlug slug={slug} />}
+                  // Framed by the real shell: a foreign slug resolves (or
+                  // 404s) inside the app chrome, exactly like the route-level
+                  // not-found — never a bare full-page state.
+                  foreignSlug={(slug) => (
+                    <>
+                      <Shell content={<ForeignOrgSlug slug={slug} />} />
+                      <Toaster />
+                    </>
+                  )}
                 >
                   <Shell />
                   <Toaster />

apps/cloud/src/web/components/foreign-org-slug.tsx

@@ -55,7 +55,7 @@ export function ForeignOrgSlug(props: { readonly slug: string }) {
   if (target === "none") return <OrgSlugNotFound />;
 
   return (
-    <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
+    <div className="flex min-h-full flex-1 items-center justify-center text-sm text-muted-foreground">
       {targetOrgId ? "Switching organization…" : ""}
     </div>
   );

apps/cloud/src/web/shell.tsx

@@ -1,3 +1,5 @@
+import type React from "react";
+
 import { Shell as SharedShell, defaultShellNavItems } from "@executor-js/react/multiplayer/shell";
 import { trackEvent } from "@executor-js/react/api/analytics";
 import { AUTH_PATHS } from "../auth/api";
@@ -27,14 +29,15 @@ const signOut = async () => {
   window.location.href = "/";
 };
 
-export function Shell() {
+export function Shell(props: { readonly content?: React.ReactNode }) {
   return (
     <SharedShell
       onSignOut={signOut}
       navItems={navItems}
       apiKeysTo="/api-keys"
       orgMenuSlot={<OrgMenuSlot />}
       supportSlot={<SupportSlot />}
+      content={props.content}
     />
   );
 }

e2e/cloud/connect-panel.test.ts

@@ -28,7 +28,9 @@ scenario(
       });
       const httpCommand = await command();
       expect(httpCommand, "the default command adds the MCP server").toContain("npx add-mcp");
-      expect(httpCommand, "the HTTP command is org-scoped").toMatch(/\/org_[^/]+\/mcp/);
+      // Org-scoped via the org's URL slug, not the raw org_ id.
+      expect(httpCommand, "the HTTP command is org-scoped").toMatch(/\/[a-z0-9-]+\/mcp/);
+      expect(httpCommand, "the slug form, not the org_ id").not.toMatch(/\/org_[^/]+\/mcp/);
       expect(httpCommand).toContain("--transport http");
 
       await step("Switch to Standard I/O", async () => {

packages/react/src/multiplayer/org-slug-gate.tsx

@@ -45,11 +45,13 @@ export interface OrgSlugGateProps {
 
 /**
  * The default not-found page for a URL naming an org this session can't see.
- * The home link is BARE on purpose — it canonicalizes onto the active org.
+ * Sized to fill its container (the shell's content area, or the viewport when
+ * rendered bare). The home link is BARE on purpose — it canonicalizes onto
+ * the active org.
  */
 export function OrgSlugNotFound() {
   return (
-    <main className="flex min-h-screen items-center justify-center bg-background px-6 py-10">
+    <main className="flex min-h-full flex-1 items-center justify-center bg-background px-6 py-10">
       <section className="w-full max-w-md text-center">
         <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">404</p>
         <h1 className="mt-2 text-xl font-semibold text-foreground">Page not found</h1>

packages/react/src/multiplayer/shell.tsx

@@ -77,6 +77,8 @@ export interface ShellProps {
   readonly orgMenuSlot?: ReactNode;
   /** Injected support button above the account footer (cloud). */
   readonly supportSlot?: ReactNode;
+  /** Replaces the routed `<Outlet />` (the org-slug gate's in-shell 404). */
+  readonly content?: ReactNode;
 }
 
 // ── Brand ────────────────────────────────────────────────────────────────
@@ -417,7 +419,7 @@ export function Shell(props: ShellProps) {
           <div className="w-8 shrink-0" />
         </div>
 
-        <Outlet />
+        {props.content ?? <Outlet />}
       </main>
     </div>
   );