feat(organizations): add organization slug URLs

apps/storybook/src/mockData/organizations.ts

@@ -28,6 +28,7 @@ function generateMember(): OrganizationMember {
             {
               id: randomId(rng, 'org'),
               name: `Team ${randomInt(rng, 1, 9)}`,
+              slug: `team-${randomInt(rng, 1, 9)}`,
               role: 'member',
             },
           ]
@@ -56,8 +57,8 @@ export function generateOrganization(): OrganizationWithMembers {
     ...base,
     name: `Company ${randomInt(rng, 0, 999)} ${companyType}`,
     childOrganizations: [
-      { id: randomId(rng, 'org'), name: 'Platform Team' },
-      { id: randomId(rng, 'org'), name: 'Product Team' },
+      { id: randomId(rng, 'org'), name: 'Platform Team', slug: 'platform-team' },
+      { id: randomId(rng, 'org'), name: 'Product Team', slug: 'product-team' },
     ],
     members: Array.from({ length: randomInt(rng, 2, 7) }, generateMember),
     effectiveSsoPolicy: {

apps/storybook/stories/OrganizationSwitcher.stories.tsx

@@ -13,16 +13,19 @@ type OrganizationSwitcherStoryProps = {
 const organizations: OrganizationSwitcherOrganization[] = [
   {
     organizationId: 'org-kilo',
+    organizationSlug: 'kilo-code',
     organizationName: 'Kilo Code',
     role: 'owner',
   },
   {
     organizationId: 'org-design',
+    organizationSlug: 'design-systems',
     organizationName: 'Design Systems',
     role: 'member',
   },
   {
     organizationId: 'org-cloud',
+    organizationSlug: 'cloud-platform',
     organizationName: 'Cloud Platform',
     role: 'member',
   },
@@ -34,14 +37,18 @@ function OrganizationSwitcherStory({
 }: OrganizationSwitcherStoryProps) {
   const [organizationId, setOrganizationId] = useState(initialOrganizationId);
 
+  const handleOrganizationSwitch = (organization: OrganizationSwitcherOrganization | null) => {
+    setOrganizationId(organization?.organizationId ?? null);
+  };
+
   return (
     <div className="bg-background p-6">
       <div className="bg-sidebar text-sidebar-foreground w-64 rounded-lg p-4">
         <OrganizationSwitcherView
           organizationId={organizationId}
           organizations={organizations}
           isPending={isPending}
-          onOrganizationSwitch={setOrganizationId}
+          onOrganizationSwitch={handleOrganizationSwitch}
         />
       </div>
     </div>

apps/storybook/stories/Sidebar.stories.tsx

@@ -82,11 +82,13 @@ const mockUser = {
 const mockOrganizations = [
   {
     organizationId: 'org-kilo',
+    organizationSlug: 'kilo-code',
     organizationName: 'Kilo Code',
     role: 'owner',
   },
   {
     organizationId: 'org-design',
+    organizationSlug: 'design-systems',
     organizationName: 'Design Systems',
     role: 'member',
   },

apps/web/src/app/(app)/cloud/sessions/SessionsPageContent.tsx

@@ -46,7 +46,15 @@ const PLATFORM_OPTIONS: readonly {
 
 type PlatformFilterValue = 'all' | 'cloud-agent' | 'cli' | 'agent-manager' | 'gastown' | 'other';
 
-export function SessionsPageContent() {
+type SessionsPageContentProps = {
+  organizationId?: string;
+  organizationRouteIdentifier?: string;
+};
+
+export function SessionsPageContent({
+  organizationId,
+  organizationRouteIdentifier,
+}: SessionsPageContentProps = {}) {
   const trpc = useTRPC();
   const pathname = usePathname();
   const [searchQuery, setSearchQuery] = useState('');
@@ -65,11 +73,12 @@ export function SessionsPageContent() {
     return () => clearTimeout(timer);
   }, [searchQuery]);
 
-  // Determine if we're in an organization context
-  const organizationId = pathname.match(/^\/organizations\/([^/]+)/)?.[1];
-
   // When in organization context, OrganizationTrialWrapper already provides PageContainer
   const shouldUsePageContainer = !organizationId;
+  const organizationPathIdentifier =
+    organizationRouteIdentifier ??
+    organizationId ??
+    pathname.match(/^\/organizations\/([^/]+)/)?.[1];
 
   const isSearching = debouncedSearchQuery.trim().length > 0;
 
@@ -242,7 +251,7 @@ export function SessionsPageContent() {
                   <Link
                     href={
                       organizationId
-                        ? `/organizations/${organizationId}/cloud/chat?sessionId=${selectedSession.sessionId}`
+                        ? `/organizations/${organizationPathIdentifier}/cloud/chat?sessionId=${selectedSession.sessionId}`
                         : `/cloud/chat?sessionId=${selectedSession.sessionId}`
                     }
                     onClick={() => setIsDialogOpen(false)}

apps/web/src/app/(app)/components/AppSidebar.tsx

@@ -2,29 +2,43 @@
 
 import { useEffect, useRef } from 'react';
 import { usePathname } from 'next/navigation';
+import { useQuery } from '@tanstack/react-query';
 import { useSidebar, type Sidebar } from '@/components/ui/sidebar';
-import { useUrlOrganizationId } from '@/hooks/useUrlOrganizationId';
+import { useUrlOrganizationIdentifier } from '@/hooks/useUrlOrganizationId';
+import {
+  findOrganizationByRouteIdentifier,
+  isUuidOrganizationRouteIdentifier,
+} from '@/lib/organizations/organization-route-utils';
+import { useTRPC } from '@/lib/trpc/utils';
 import PersonalAppSidebar from './PersonalAppSidebar';
 import OrganizationAppSidebar from './OrganizationAppSidebar';
 import { GastownTownSidebar } from '@/components/gastown/GastownTownSidebar';
 import { WastelandSidebar } from '@/components/wasteland/WastelandSidebar';
 
 const UUID = '[0-9a-f-]{36}';
+const ORG_ROUTE_IDENTIFIER = '[^/]+';
 
 /** Extract the townId from a /gastown/[townId] pathname, or null. */
 function extractGastownTownId(pathname: string): string | null {
   const match = pathname.match(new RegExp(`^/gastown/(${UUID})`));
   return match ? match[1] : null;
 }
 
-/** Extract {orgId, townId} from an /organizations/[id]/gastown/[townId] pathname, or null. */
-function extractOrgGastownTownId(pathname: string): { orgId: string; townId: string } | null {
-  const match = pathname.match(new RegExp(`^/organizations/(${UUID})/gastown/(${UUID})`));
-  return match ? { orgId: match[1], townId: match[2] } : null;
+/** Extract {orgIdentifier, townId} from an /organizations/[id]/gastown/[townId] pathname, or null. */
+function extractOrgGastownTownId(
+  pathname: string
+): { orgIdentifier: string; townId: string } | null {
+  const match = pathname.match(
+    new RegExp(`^/organizations/(${ORG_ROUTE_IDENTIFIER})/gastown/(${UUID})`)
+  );
+  return match ? { orgIdentifier: decodeURIComponent(match[1]), townId: match[2] } : null;
 }
 
 function isKiloClawNewPath(pathname: string): boolean {
-  return pathname === '/claw/new' || new RegExp(`^/organizations/${UUID}/claw/new$`).test(pathname);
+  return (
+    pathname === '/claw/new' ||
+    new RegExp(`^/organizations/${ORG_ROUTE_IDENTIFIER}/claw/new$`).test(pathname)
+  );
 }
 
 /** Extract the wastelandId from a /wasteland/[wastelandId] pathname, or null. */
@@ -33,19 +47,60 @@ function extractWastelandId(pathname: string): string | null {
   return match ? match[1] : null;
 }
 
-/** Extract {orgId, wastelandId} from an /organizations/[id]/wasteland/[wastelandId] pathname, or null. */
-function extractOrgWastelandId(pathname: string): { orgId: string; wastelandId: string } | null {
-  const match = pathname.match(new RegExp(`^/organizations/(${UUID})/wasteland/(${UUID})`));
-  return match ? { orgId: match[1], wastelandId: match[2] } : null;
+/** Extract {orgIdentifier, wastelandId} from an /organizations/[id]/wasteland/[wastelandId] pathname, or null. */
+function extractOrgWastelandId(
+  pathname: string
+): { orgIdentifier: string; wastelandId: string } | null {
+  const match = pathname.match(
+    new RegExp(`^/organizations/(${ORG_ROUTE_IDENTIFIER})/wasteland/(${UUID})`)
+  );
+  return match ? { orgIdentifier: decodeURIComponent(match[1]), wastelandId: match[2] } : null;
 }
 
 export default function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
-  const currentOrgId = useUrlOrganizationId();
+  const trpc = useTRPC();
+  const currentOrgIdentifier = useUrlOrganizationIdentifier();
   const pathname = usePathname();
   const { open, setOpenMobile, setOpenTransient } = useSidebar();
   const previousSidebarOpen = useRef<boolean | null>(null);
   const currentSidebarOpen = useRef(open);
   const sidebarActions = useRef({ setOpenMobile, setOpenTransient });
+  const { data: organizations = [] } = useQuery(
+    trpc.organizations.list.queryOptions(undefined, {
+      enabled: Boolean(currentOrgIdentifier),
+      trpc: {
+        context: {
+          skipBatch: true,
+        },
+      },
+    })
+  );
+  const currentOrgFromList = findOrganizationByRouteIdentifier(
+    organizations.map(org => ({
+      id: org.organizationId,
+      slug: org.organizationSlug,
+    })),
+    currentOrgIdentifier
+  );
+  const { data: resolvedCurrentOrg } = useQuery(
+    trpc.organizations.resolveRouteIdentifier.queryOptions(
+      { routeIdentifier: currentOrgIdentifier ?? '' },
+      {
+        enabled: Boolean(currentOrgIdentifier && !currentOrgFromList),
+        trpc: {
+          context: {
+            skipBatch: true,
+          },
+        },
+      }
+    )
+  );
+  const currentOrgId =
+    currentOrgFromList?.id ??
+    resolvedCurrentOrg?.id ??
+    (currentOrgIdentifier && isUuidOrganizationRouteIdentifier(currentOrgIdentifier)
+      ? currentOrgIdentifier
+      : null);
 
   useEffect(() => {
     currentSidebarOpen.current = open;
@@ -80,7 +135,7 @@ export default function AppSidebar(props: React.ComponentProps<typeof Sidebar>)
   // Org gastown town — show the same sidebar with org-prefixed paths
   const orgGastown = extractOrgGastownTownId(pathname);
   if (orgGastown) {
-    const orgBase = `/organizations/${orgGastown.orgId}`;
+    const orgBase = `/organizations/${orgGastown.orgIdentifier}`;
     return (
       <GastownTownSidebar
         townId={orgGastown.townId}
@@ -100,7 +155,7 @@ export default function AppSidebar(props: React.ComponentProps<typeof Sidebar>)
   // Org wasteland — show the same sidebar with org-prefixed paths
   const orgWasteland = extractOrgWastelandId(pathname);
   if (orgWasteland) {
-    const orgBase = `/organizations/${orgWasteland.orgId}`;
+    const orgBase = `/organizations/${orgWasteland.orgIdentifier}`;
     return (
       <WastelandSidebar
         wastelandId={orgWasteland.wastelandId}