Untangle ForeignOrgSlug; fix stuck-spinner on switch failure

The component collapsed loading / no-match / matched-org into one
null|"none"|org value, re-derived the id off it, then ran a
side-effecting switch through a mutable ref guard. The failure branch
only flipped the ref (no re-render, match still present), so a failed
switch sat on "Switching organization…" forever — never the 404 the
comment claimed.

Split it: render is now a pure AsyncResult.match over the three states,
and the one side effect (switch + reload) lives in a small SwitchIntoOrg
child that tracks failure in state, so a failed switch renders
not-found. Adds e2e coverage for the switch-by-URL path (open another of
your orgs by slug -> session switches into it), which had none.

Author: RhysSullivan

apps/cloud/src/routeTree.gen.ts

@@ -350,11 +350,15 @@ export const routeTree = rootRouteImport
   ._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/cloud/src/web/components/foreign-org-slug.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import { useAtomValue, useAtomSet } from "@effect/atom-react";
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
 import * as Exit from "effect/Exit";
@@ -8,55 +8,54 @@ import { OrgSlugNotFound } from "@executor-js/react/multiplayer/org-slug-gate";
 import { organizationsAtom, switchOrganization } from "../auth";
 
 // ---------------------------------------------------------------------------
-// Foreign-slug resolution for the cloud org-slug gate: the URL carries a slug
-// that isn't the active org's. If the caller is a member of that org (their
-// bookmark, a teammate's link into a shared org), switch the session to it
-// and reload so the whole app re-scopes. Anything else is a WRONG ADDRESS and
-// renders not-found — a slug must never silently resolve to a different
-// workspace than the URL names, and single-segment typos (/this-page-does-
-// not-exist) match the slugged index route, so this page IS the app's 404 for
-// them. Membership comes from the already-cached organizations atom; the
-// fallback while it loads is a blank screen, not a skeleton.
+// Foreign-slug resolution for the cloud org-slug gate: the URL names a slug
+// that isn't the active org's. Resolve it against the caller's memberships:
+//   - a member of that org (their bookmark, a teammate's shared link) → switch
+//     the session into it and reload, so every atom re-scopes
+//   - anything else → a WRONG ADDRESS → not-found. A slug must never silently
+//     resolve to a different workspace than the URL names, and single-segment
+//     typos (/this-page-does-not-exist) match the slugged index route, so this
+//     IS the app's 404 for them.
+// Membership comes from the already-cached organizations atom; the matched
+// case alone performs a side effect, isolated in `SwitchIntoOrg`.
 // ---------------------------------------------------------------------------
 
-export function ForeignOrgSlug(props: { readonly slug: string }) {
-  const organizations = useAtomValue(organizationsAtom);
+const Centered = (props: { children?: ReactNode }) => (
+  <div className="flex min-h-full flex-1 items-center justify-center text-sm text-muted-foreground">
+    {props.children}
+  </div>
+);
+
+// Switch the session into `organizationId`, then full-reload so the whole app
+// re-scopes. One-shot: the ref guards React's double-invoke and the render
+// between resolution and the reload landing. A failed switch means the slug
+// named an org we can't actually enter — fall back to not-found.
+function SwitchIntoOrg(props: { readonly organizationId: string }) {
   const doSwitchOrganization = useAtomSet(switchOrganization, { mode: "promiseExit" });
-  const switching = useRef(false);
-
-  const target = AsyncResult.match(organizations, {
-    onInitial: () => null,
-    onFailure: () => "none" as const,
-    onSuccess: ({ value }) =>
-      value.organizations.find((org: { slug: string }) => org.slug === props.slug) ??
-      ("none" as const),
-  });
-
-  const targetOrgId = target !== null && target !== "none" ? target.id : null;
+  const [failed, setFailed] = useState(false);
+  const started = useRef(false);
 
   useEffect(() => {
-    if (!targetOrgId || switching.current) return;
-    switching.current = true;
+    if (started.current) return;
+    started.current = true;
     void doSwitchOrganization({
-      payload: { organizationId: targetOrgId },
+      payload: { organizationId: props.organizationId },
       reactivityKeys: authWriteKeys,
-    }).then((exit) => {
-      // Keep the URL (it already names the target org); reload re-scopes the
-      // app to the switched session. On failure fall through to not-found by
-      // releasing the guard — the next render still has no active match.
-      if (Exit.isSuccess(exit)) {
-        window.location.reload();
-      } else {
-        switching.current = false;
-      }
-    });
-  }, [targetOrgId, doSwitchOrganization]);
-
-  if (target === "none") return <OrgSlugNotFound />;
-
-  return (
-    <div className="flex min-h-full flex-1 items-center justify-center text-sm text-muted-foreground">
-      {targetOrgId ? "Switching organization…" : ""}
-    </div>
-  );
+    }).then((exit) => (Exit.isSuccess(exit) ? window.location.reload() : setFailed(true)));
+  }, [props.organizationId, doSwitchOrganization]);
+
+  return failed ? <OrgSlugNotFound /> : <Centered>Switching organization…</Centered>;
+}
+
+export function ForeignOrgSlug(props: { readonly slug: string }) {
+  const organizations = useAtomValue(organizationsAtom);
+
+  return AsyncResult.match(organizations, {
+    onInitial: () => <Centered />,
+    onFailure: () => <OrgSlugNotFound />,
+    onSuccess: ({ value }) => {
+      const match = value.organizations.find((org: { slug: string }) => org.slug === props.slug);
+      return match ? <SwitchIntoOrg organizationId={match.id} /> : <OrgSlugNotFound />;
+    },
+  });
 }

e2e/cloud/org-slug-foreign.test.ts

@@ -0,0 +1,84 @@
+// Cloud-only (browser): opening another of YOUR orgs by its slug URL switches
+// the session into it. The org-slug gate's foreign-slug branch (ForeignOrgSlug)
+// resolves a URL slug that isn't the active org against the caller's
+// memberships — a match switches + reloads, so a bookmark or a teammate's link
+// into a shared org lands you there even when a different org is active.
+//
+// org-switcher.test.ts covers switching via the account menu; this covers the
+// URL path. (Unknown/unauthorized slugs → 404 is covered by
+// scenarios/org-slug-routing.test.ts.)
+import { expect } from "@effect/vitest";
+import { Effect } from "effect";
+
+import { scenario } from "../src/scenario";
+import { Browser, Target } from "../src/services";
+
+const CLOUD_ORIGIN_HEADERS = (baseUrl: string) => ({ origin: new URL(baseUrl).origin });
+
+scenario(
+  "Org URLs · opening another of your orgs by slug switches the session into it",
+  {},
+  Effect.gen(function* () {
+    const target = yield* Target;
+    const browser = yield* Browser;
+
+    // Identity starts in org A. Create org B through the real endpoint, which
+    // switches the active session to B and returns its refreshed cookie.
+    const identity = yield* target.newIdentity();
+    const cookie = identity.headers?.cookie ?? "";
+
+    const createB = yield* Effect.promise(() =>
+      fetch(new URL("/api/auth/create-organization", target.baseUrl), {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+          cookie,
+          ...CLOUD_ORIGIN_HEADERS(target.baseUrl),
+        },
+        body: JSON.stringify({ name: "Foreign Slug Org B" }),
+      }),
+    );
+    expect(createB.ok, "org B was created").toBe(true);
+    const orgB = (yield* Effect.promise(() => createB.json())) as { slug: string };
+    const setCookie = createB.headers.get("set-cookie") ?? "";
+    const sessionB = /wos-session=([^;]+)/.exec(setCookie)?.[1];
+    expect(sessionB, "creating org B refreshed the session into it").toBeTruthy();
+
+    // Both orgs' slugs from the session that is now active in B.
+    const orgs = (yield* Effect.promise(() =>
+      fetch(new URL("/api/auth/organizations", target.baseUrl), {
+        headers: { cookie: `wos-session=${sessionB}` },
+      }).then((r) => r.json()),
+    )) as {
+      organizations: ReadonlyArray<{ name: string; slug: string }>;
+      activeOrganizationId: string;
+    };
+    const slugA = orgs.organizations.find((o) => o.name.startsWith("Org user-"))?.slug;
+    expect(slugA, "org A has a slug").toBeTruthy();
+    expect(orgB.slug, "org B has a slug").toBeTruthy();
+    expect(slugA, "the two orgs have distinct slugs").not.toBe(orgB.slug);
+
+    // Drive the browser as the session that is ACTIVE IN B.
+    const inB = {
+      ...identity,
+      headers: { cookie: `wos-session=${sessionB}` },
+      cookies: [{ name: "wos-session", value: sessionB! }],
+    };
+
+    yield* browser.session(inB, async ({ page, step }) => {
+      await step("Land in org B, then open org A's slug URL directly", async () => {
+        await page.goto(`/${orgB.slug}`, { waitUntil: "networkidle" });
+        await page.getByText("Integrations").first().waitFor({ timeout: 30_000 });
+        // Navigate to org A — the gate sees a foreign-but-member slug.
+        await page.goto(`/${slugA}/policies`, { waitUntil: "networkidle" });
+      });
+
+      await step("The session switches into org A and lands on the slugged URL", async () => {
+        // Reaching org A's policies at its URL is the proof: a switch that
+        // failed would render the gate's 404 here, not the Policies page.
+        await page.waitForURL((url) => url.pathname === `/${slugA}/policies`, { timeout: 30_000 });
+        await page.getByText("Policies").first().waitFor({ timeout: 30_000 });
+      });
+    });
+  }),
+);