Include all apps with standalone domains and user-accessible spaces

App switcher:
- Add standaloneDomain to ModuleInfo (exposed via /api/modules)
- Add missing standaloneDomain to 5 modules: funds, files, wallet,
  choices, forum (20/21 modules now have standalone domains)
- Show external link arrow on hover for each app's standalone site

Space switcher:
- Pass auth token when fetching /api/spaces so the API returns
  private (authenticated/members_only) spaces the user owns or
  is a member of
- Group spaces into "Your spaces" (with role badge) and "Public
  spaces" sections
- Reload space list on auth-change (sign-in/sign-out)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

modules/choices/mod.ts

@@ -66,4 +66,5 @@ export const choicesModule: RSpaceModule = {
 	icon: "☑",
 	description: "Polls, rankings, and multi-criteria scoring",
 	routes,
+	standaloneDomain: "rchoices.online",
 };

modules/files/mod.ts

@@ -356,4 +356,5 @@ export const filesModule: RSpaceModule = {
 	icon: "\uD83D\uDCC1",
 	description: "File sharing, share links, and memory cards",
 	routes,
+	standaloneDomain: "rfiles.online",
 };

modules/forum/mod.ts

@@ -166,4 +166,5 @@ export const forumModule: RSpaceModule = {
 	icon: "\uD83D\uDCAC",
 	description: "Deploy and manage Discourse forums",
 	routes,
+	standaloneDomain: "rforum.online",
 };

modules/funds/mod.ts

@@ -115,4 +115,5 @@ export const fundsModule: RSpaceModule = {
 	icon: "\uD83C\uDF0A",
 	description: "Budget flows, river visualization, and treasury management",
 	routes,
+	standaloneDomain: "rfunds.online",
 };

modules/wallet/mod.ts

@@ -106,4 +106,5 @@ export const walletModule: RSpaceModule = {
 	icon: "\uD83D\uDCB0",
 	description: "Multichain Safe wallet visualization and treasury management",
 	routes,
+	standaloneDomain: "rwallet.online",
 };

server/spaces.ts

@@ -24,24 +24,40 @@ import { getAllModules } from "../shared/module";
 
 const spaces = new Hono();
 
-// ── List all spaces (public + user's own) ──
+// ── List spaces (public + user's own/member spaces) ──
 
 spaces.get("/", async (c) => {
 	const slugs = await listCommunities();
 
+	// Check if user is authenticated
+	const token = extractToken(c.req.raw.headers);
+	let claims: EncryptIDClaims | null = null;
+	if (token) {
+		try {
+			claims = await verifyEncryptIDToken(token);
+		} catch {
+			// Invalid token — treat as unauthenticated
+		}
+	}
+
 	const spacesList = [];
 	for (const slug of slugs) {
 		await loadCommunity(slug);
 		const data = getDocumentData(slug);
 		if (data?.meta) {
 			const vis = data.meta.visibility || "public_read";
-			// Only include public/public_read spaces in the public listing
+			const isOwner = !!(claims && data.meta.ownerDID === claims.sub);
-			if (vis === "public" || vis === "public_read") {
+			const memberEntry = claims ? data.members?.[claims.sub] : undefined;
+			const isMember = !!memberEntry;
+
+			// Include if: public/public_read OR user is owner OR user is member
+			if (vis === "public" || vis === "public_read" || isOwner || isMember) {
 				spacesList.push({
 					slug: data.meta.slug,
 					name: data.meta.name,
 					visibility: vis,
 					createdAt: data.meta.createdAt,
+					role: isOwner ? "owner" : memberEntry?.role || undefined,
 				});
 			}
 		}

shared/components/rstack-app-switcher.ts

@@ -13,6 +13,7 @@ export interface AppSwitcherModule {
 	name: string;
 	icon: string;
 	description: string;
+	standaloneDomain?: string;
 }
 
 export class RStackAppSwitcher extends HTMLElement {
@@ -58,15 +59,18 @@ export class RStackAppSwitcher extends HTMLElement {
 					${this.#modules
 						.map(
 							(m) => `
-						<a class="item ${m.id === current ? "active" : ""}"
+						<div class="item-row ${m.id === current ? "active" : ""}">
-						   href="/${this.#getSpaceSlug()}/${m.id}"
+							<a class="item"
-						   data-id="${m.id}">
+							   href="/${this.#getSpaceSlug()}/${m.id}"
-							<span class="item-icon">${m.icon}</span>
+							   data-id="${m.id}">
-							<div class="item-text">
+								<span class="item-icon">${m.icon}</span>
-								<span class="item-name">${m.name}</span>
+								<div class="item-text">
-								<span class="item-desc">${m.description}</span>
+									<span class="item-name">${m.name}</span>
-							</div>
+									<span class="item-desc">${m.description}</span>
-						</a>
+								</div>
+							</a>
+							${m.standaloneDomain ? `<a class="item-ext" href="https://${m.standaloneDomain}" target="_blank" rel="noopener" title="${m.standaloneDomain}">↗</a>` : ""}
+						</div>
 					`
 						)
 						.join("")}
@@ -82,6 +86,11 @@ export class RStackAppSwitcher extends HTMLElement {
 			menu.classList.toggle("open");
 		});
 
+		// Prevent external links from closing the menu prematurely
+		this.#shadow.querySelectorAll(".item-ext").forEach((el) => {
+			el.addEventListener("click", (e) => e.stopPropagation());
+		});
+
 		document.addEventListener("click", () => menu.classList.remove("open"));
 	}
 
@@ -135,17 +144,33 @@ const STYLES = `
   background: #1e293b; border: 1px solid rgba(255,255,255,0.1);
 }
 
+.item-row {
+  display: flex; align-items: center;
+  transition: background 0.12s;
+}
+:host-context([data-theme="light"]) .item-row { color: #374151; }
+:host-context([data-theme="light"]) .item-row:hover { background: #f1f5f9; }
+:host-context([data-theme="light"]) .item-row.active { background: #e0f2fe; }
+:host-context([data-theme="dark"]) .item-row { color: #e2e8f0; }
+:host-context([data-theme="dark"]) .item-row:hover { background: rgba(255,255,255,0.05); }
+:host-context([data-theme="dark"]) .item-row.active { background: rgba(6,182,212,0.1); }
+
 .item {
   display: flex; align-items: center; gap: 12px;
   padding: 10px 14px; text-decoration: none;
-  transition: background 0.12s; cursor: pointer;
+  cursor: pointer; flex: 1; min-width: 0; color: inherit;
 }
-:host-context([data-theme="light"]) .item { color: #374151; }
+
-:host-context([data-theme="light"]) .item:hover { background: #f1f5f9; }
+.item-ext {
-:host-context([data-theme="light"]) .item.active { background: #e0f2fe; }
+  display: flex; align-items: center; justify-content: center;
-:host-context([data-theme="dark"]) .item { color: #e2e8f0; }
+  width: 32px; height: 100%; flex-shrink: 0;
-:host-context([data-theme="dark"]) .item:hover { background: rgba(255,255,255,0.05); }
+  font-size: 0.8rem; text-decoration: none; opacity: 0;
-:host-context([data-theme="dark"]) .item.active { background: rgba(6,182,212,0.1); }
+  transition: opacity 0.15s;
+}
+.item-row:hover .item-ext { opacity: 0.5; }
+.item-ext:hover { opacity: 1 !important; }
+:host-context([data-theme="light"]) .item-ext { color: #06b6d4; }
+:host-context([data-theme="dark"]) .item-ext { color: #22d3ee; }
 
 .item-icon { font-size: 1.3rem; width: 28px; text-align: center; flex-shrink: 0; }
 .item-text { display: flex; flex-direction: column; min-width: 0; }

shared/components/rstack-space-switcher.ts

@@ -6,14 +6,17 @@
  *   name    — the display name of the active space
  *
  * Fetches the user's spaces from /api/spaces on click.
+ * Passes auth token so the API returns private spaces the user can access.
  */
 
-import { isAuthenticated } from "./rstack-identity";
+import { isAuthenticated, getAccessToken } from "./rstack-identity";
 
 interface SpaceInfo {
 	slug: string;
 	name: string;
 	icon?: string;
+	role?: string;
+	visibility?: string;
 }
 
 export class RStackSpaceSwitcher extends HTMLElement {
@@ -49,7 +52,11 @@ export class RStackSpaceSwitcher extends HTMLElement {
 	async #loadSpaces() {
 		if (this.#loaded) return;
 		try {
-			const res = await fetch("/api/spaces");
+			const headers: Record<string, string> = {};
+			const token = getAccessToken();
+			if (token) headers["Authorization"] = `Bearer ${token}`;
+
+			const res = await fetch("/api/spaces", { headers });
 			if (res.ok) {
 				const data = await res.json();
 				this.#spaces = data.spaces || [];
@@ -60,6 +67,12 @@ export class RStackSpaceSwitcher extends HTMLElement {
 		this.#loaded = true;
 	}
 
+	/** Force reload spaces on next open (e.g. after auth change) */
+	reload() {
+		this.#loaded = false;
+		this.#spaces = [];
+	}
+
 	#render() {
 		const current = this.current;
 		const name = this.spaceName;
@@ -106,8 +119,32 @@ export class RStackSpaceSwitcher extends HTMLElement {
 
 		const moduleId = this.#getCurrentModule();
 
-		menu.innerHTML = `
+		// Separate user's own spaces (has a role) from public-only
-			${this.#spaces
+		const mySpaces = this.#spaces.filter((s) => s.role);
+		const publicSpaces = this.#spaces.filter((s) => !s.role);
+
+		let html = "";
+
+		if (mySpaces.length > 0) {
+			html += `<div class="section-label">Your spaces</div>`;
+			html += mySpaces
+				.map(
+					(s) => `
+				<a class="item ${s.slug === current ? "active" : ""}"
+				   href="/${s.slug}/${moduleId}">
+					<span class="item-icon">${s.icon || "🌐"}</span>
+					<span class="item-name">${s.name}</span>
+					${s.role ? `<span class="item-role">${s.role}</span>` : ""}
+				</a>
+			`
+				)
+				.join("");
+		}
+
+		if (publicSpaces.length > 0) {
+			if (mySpaces.length > 0) html += `<div class="divider"></div>`;
+			html += `<div class="section-label">Public spaces</div>`;
+			html += publicSpaces
 				.map(
 					(s) => `
 				<a class="item ${s.slug === current ? "active" : ""}"
@@ -117,10 +154,13 @@ export class RStackSpaceSwitcher extends HTMLElement {
 				</a>
 			`
 				)
-				.join("")}
+				.join("");
-			<div class="divider"></div>
+		}
-			<a class="item item--create" href="/new">+ Create new space</a>
+
-		`;
+		html += `<div class="divider"></div>`;
+		html += `<a class="item item--create" href="/new">+ Create new space</a>`;
+
+		menu.innerHTML = html;
 	}
 
 	#getCurrentModule(): string {
@@ -155,7 +195,7 @@ const STYLES = `
 
 .menu {
   position: absolute; top: 100%; left: 0; margin-top: 6px;
-  min-width: 220px; max-height: 320px; overflow-y: auto;
+  min-width: 240px; max-height: 400px; overflow-y: auto;
   border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.25);
   display: none; z-index: 200;
 }
@@ -163,6 +203,11 @@ const STYLES = `
 :host-context([data-theme="light"]) .menu { background: white; border: 1px solid rgba(0,0,0,0.1); }
 :host-context([data-theme="dark"]) .menu { background: #1e293b; border: 1px solid rgba(255,255,255,0.1); }
 
+.section-label {
+  padding: 8px 14px 4px; font-size: 0.7rem; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.5;
+}
+
 .item {
   display: flex; align-items: center; gap: 10px;
   padding: 10px 14px; text-decoration: none; cursor: pointer;
@@ -176,7 +221,14 @@ const STYLES = `
 :host-context([data-theme="dark"]) .item.active { background: rgba(6,182,212,0.1); }
 
 .item-icon { font-size: 1.1rem; flex-shrink: 0; }
-.item-name { font-size: 0.875rem; font-weight: 500; }
+.item-name { font-size: 0.875rem; font-weight: 500; flex: 1; }
+.item-role {
+  font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
+  padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
+  letter-spacing: 0.03em;
+}
+:host-context([data-theme="light"]) .item-role { background: #e0f2fe; color: #0369a1; }
+:host-context([data-theme="dark"]) .item-role { background: rgba(6,182,212,0.15); color: #22d3ee; }
 
 .item--create {
   font-size: 0.85rem; font-weight: 600; color: #06b6d4 !important;

shared/module.ts

@@ -48,6 +48,7 @@ export interface ModuleInfo {
 	name: string;
 	icon: string;
 	description: string;
+	standaloneDomain?: string;
 }
 
 export function getModuleInfoList(): ModuleInfo[] {
@@ -56,5 +57,6 @@ export function getModuleInfoList(): ModuleInfo[] {
 		name: m.name,
 		icon: m.icon,
 		description: m.description,
+		...(m.standaloneDomain ? { standaloneDomain: m.standaloneDomain } : {}),
 	}));
 }

website/shell.ts

@@ -15,3 +15,9 @@ import { RStackSpaceSwitcher } from "../shared/components/rstack-space-switcher"
 RStackIdentity.define();
 RStackAppSwitcher.define();
 RStackSpaceSwitcher.define();
+
+// Reload space list when user signs in/out (to show/hide private spaces)
+document.addEventListener("auth-change", () => {
+	const spaceSwitcher = document.querySelector("rstack-space-switcher") as any;
+	spaceSwitcher?.reload?.();
+});