feat(dashboard): Members tab on the app detail page

A new "Members" tab is rendered between Domains and Settings for
callers whose `my_role` on the app is `app_admin` (owners always;
explicit member-app_admins; admins do not see it — they're only
implicit editors and can't manage memberships).

The tab lets the caller:

- See every explicit member of the app with username, email, instance-
  role chip, app-role chip, and joined date. Inactive users render
  greyed-out so admins know the row exists.
- Pick a `member`-instance user from a dropdown and grant viewer /
  editor / app_admin access. The dropdown is populated from
  `/admin/admins` filtered to active members not already on the app.
- Promote / demote / remove existing members via the shared
  `ActionMenu` kebab. Removal goes through `ConfirmModal`.

Member-with-app_admin callers see a disabled add form with an
explanatory message — they have authority to manage memberships but
can't browse the user directory (gated on `InstanceManageUsers`),
which is a known phase-3.5 caveat to revisit in a follow-up.

Also extends `RoleChip` with an `appRole` prop and palette for app
roles, and adds an `appMembers` namespace to api.ts mirroring the
`domains` shape.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

dashboard/src/lib/RoleChip.svelte

@@ -1,15 +1,24 @@
 <script lang="ts">
 	import type { InstanceRole } from '$lib/auth';
+	import type { AppRole } from '$lib/api';
 
 	interface Props {
-		role: InstanceRole;
+		role?: InstanceRole;
+		appRole?: AppRole;
 		size?: 'sm' | 'md';
 	}
 
-	let { role, size = 'md' }: Props = $props();
+	let { role, appRole, size = 'md' }: Props = $props();
+
+	// Display label: app roles read better with a space ("app admin")
+	// than their wire form ("app_admin").
+	const label = $derived(
+		appRole ? appRole.replace('_', ' ') : (role ?? '')
+	);
+	const cls = $derived(appRole ? `chip-${appRole}` : `chip-${role}`);
 </script>
 
-<span class="chip chip-{role}" class:sm={size === 'sm'}>{role}</span>
+<span class="chip {cls}" class:sm={size === 'sm'}>{label}</span>
 
 <style>
 	.chip {
@@ -42,4 +51,19 @@
 		color: #cbd5e1;
 		border-color: #334155;
 	}
+	.chip-app_admin {
+		background: #4c1d95;
+		color: #c4b5fd;
+		border-color: #6d28d9;
+	}
+	.chip-editor {
+		background: #1e3a8a;
+		color: #93c5fd;
+		border-color: #1d4ed8;
+	}
+	.chip-viewer {
+		background: #1f2937;
+		color: #9ca3af;
+		border-color: #374151;
+	}
 </style>

dashboard/src/lib/api.ts

@@ -296,6 +296,21 @@ export interface PatchAdminInput {
 	email?: string | null;
 }
 
+export interface AppMemberDto {
+	user_id: string;
+	username: string;
+	email: string | null;
+	instance_role: InstanceRole;
+	is_active: boolean;
+	role: AppRole;
+	created_at: string;
+}
+
+export interface GrantAppMemberInput {
+	user_id: string;
+	role: AppRole;
+}
+
 export interface ApiKeyDto {
 	id: string;
 	prefix: string;
@@ -479,6 +494,28 @@ export const api = {
 			)
 	},
 
+	appMembers: {
+		list: (idOrSlug: string) =>
+			adminRequest<AppMemberDto[]>(
+				`/api/v1/admin/apps/${encodeURIComponent(idOrSlug)}/members`
+			),
+		add: (idOrSlug: string, input: GrantAppMemberInput) =>
+			adminRequest<AppMemberDto>(
+				`/api/v1/admin/apps/${encodeURIComponent(idOrSlug)}/members`,
+				{ method: 'POST', body: JSON.stringify(input) }
+			),
+		setRole: (idOrSlug: string, userId: string, role: AppRole) =>
+			adminRequest<AppMemberDto>(
+				`/api/v1/admin/apps/${encodeURIComponent(idOrSlug)}/members/${userId}`,
+				{ method: 'PATCH', body: JSON.stringify({ role }) }
+			),
+		remove: (idOrSlug: string, userId: string) =>
+			adminRequest<null>(
+				`/api/v1/admin/apps/${encodeURIComponent(idOrSlug)}/members/${userId}`,
+				{ method: 'DELETE' }
+			)
+	},
+
 	execute: async (
 		id: string,
 		body: unknown,

dashboard/src/routes/apps/[slug]/+page.svelte

@@ -5,26 +5,35 @@
 	import {
 		api,
 		ApiError,
+		type AdminDto,
 		type App,
 		type AppDomain,
+		type AppMemberDto,
+		type AppRole,
 		type Script
 	} from '$lib/api';
 	import CodeEditor from '$lib/CodeEditor.svelte';
 	import ConfirmModal from '$lib/ConfirmModal.svelte';
+	import ActionMenu from '$lib/ActionMenu.svelte';
+	import RoleChip from '$lib/RoleChip.svelte';
 
 	const SAMPLE_SOURCE =
 		'#{\n  statusCode: 200,\n  body: #{ ok: true, echo: ctx.request.body }\n}';
 
-	type Tab = 'scripts' | 'domains' | 'settings';
+	type Tab = 'scripts' | 'domains' | 'members' | 'settings';
 
 	let slug = $derived(page.params.slug ?? '');
 	let app = $state<App | null>(null);
+	let myRole = $state<AppRole | null>(null);
 	let loadError = $state<string | null>(null);
 	let loading = $state(true);
 	let activeTab = $state<Tab>('scripts');
 
 	let scripts = $state<Script[]>([]);
 	let domains = $state<AppDomain[]>([]);
+	let members = $state<AppMemberDto[]>([]);
+
+	const canAdminMembers = $derived(myRole === 'app_admin');
 
 	// Script create
 	let showCreateScript = $state(false);
@@ -55,6 +64,19 @@
 	let removingDomain = $state(false);
 	let removeDomainError = $state<string | null>(null);
 
+	// Members tab
+	let eligibleUsers = $state<AdminDto[]>([]);
+	let eligibleLoadError = $state<string | null>(null);
+	let addMemberUserId = $state('');
+	let addMemberRole = $state<AppRole>('viewer');
+	let addingMember = $state(false);
+	let addMemberError = $state<string | null>(null);
+	let memberToRemove = $state<AppMemberDto | null>(null);
+	let removingMember = $state(false);
+	let removeMemberError = $state<string | null>(null);
+	let roleChangeBusy = $state<string | null>(null);
+	let memberActionError = $state<string | null>(null);
+
 	async function loadApp() {
 		loading = true;
 		loadError = null;
@@ -72,10 +94,15 @@
 				created_at: fetched.created_at,
 				updated_at: fetched.updated_at
 			};
+			myRole = fetched.my_role;
 			editName = app.name;
 			editDescription = app.description ?? '';
 			editSlug = app.slug;
-			await Promise.all([loadScripts(app.id), loadDomains(app.id)]);
+			const loaders: Promise<unknown>[] = [loadScripts(app.id), loadDomains(app.id)];
+			if (canAdminMembers) {
+				loaders.push(loadMembers(app.id), loadEligibleUsers());
+			}
+			await Promise.all(loaders);
 		} catch (e) {
 			loadError = e instanceof Error ? e.message : String(e);
 		} finally {
@@ -101,6 +128,42 @@
 		}
 	}
 
+	async function loadMembers(appId: string) {
+		try {
+			members = await api.appMembers.list(appId);
+		} catch (e) {
+			members = [];
+			memberActionError = e instanceof Error ? e.message : String(e);
+		}
+	}
+
+	async function loadEligibleUsers() {
+		eligibleLoadError = null;
+		try {
+			const all = await api.admins.list();
+			// Only inactive=false members are valid invite targets — the
+			// API rejects everyone else anyway, so filter upfront.
+			eligibleUsers = all.filter(
+				(u) => u.is_active && u.instance_role === 'member'
+			);
+		} catch (e) {
+			eligibleUsers = [];
+			// member-with-app_admin can hit /apps/.../members but cannot
+			// browse /admins (gated on InstanceManageUsers). The add form
+			// will render disabled with the explanatory message below.
+			eligibleLoadError =
+				e instanceof ApiError && e.status === 403
+					? 'Only instance owners/admins can browse the user directory to invite new members.'
+					: e instanceof Error
+						? e.message
+						: String(e);
+		}
+	}
+
+	const eligibleAfterFilter = $derived(
+		eligibleUsers.filter((u) => !members.some((m) => m.user_id === u.id))
+	);
+
 	async function submitCreateScript(event: Event) {
 		event.preventDefault();
 		if (!app) return;
@@ -201,6 +264,68 @@
 		}
 	}
 
+	async function submitAddMember(event: Event) {
+		event.preventDefault();
+		if (!app || !addMemberUserId) return;
+		addingMember = true;
+		addMemberError = null;
+		try {
+			await api.appMembers.add(app.id, {
+				user_id: addMemberUserId,
+				role: addMemberRole
+			});
+			addMemberUserId = '';
+			addMemberRole = 'viewer';
+			await loadMembers(app.id);
+		} catch (e) {
+			addMemberError = e instanceof Error ? e.message : String(e);
+		} finally {
+			addingMember = false;
+		}
+	}
+
+	async function changeMemberRole(member: AppMemberDto, role: AppRole) {
+		if (!app || member.role === role) return;
+		roleChangeBusy = member.user_id;
+		memberActionError = null;
+		try {
+			await api.appMembers.setRole(app.id, member.user_id, role);
+			await loadMembers(app.id);
+		} catch (e) {
+			memberActionError = e instanceof Error ? e.message : String(e);
+		} finally {
+			roleChangeBusy = null;
+		}
+	}
+
+	function askRemoveMember(member: AppMemberDto) {
+		removeMemberError = null;
+		memberToRemove = member;
+	}
+
+	async function confirmRemoveMember() {
+		if (!app || !memberToRemove) return;
+		removingMember = true;
+		removeMemberError = null;
+		try {
+			await api.appMembers.remove(app.id, memberToRemove.user_id);
+			memberToRemove = null;
+			await loadMembers(app.id);
+		} catch (e) {
+			removeMemberError = e instanceof Error ? e.message : String(e);
+		} finally {
+			removingMember = false;
+		}
+	}
+
+	function shortDate(iso: string): string {
+		try {
+			return new Date(iso).toLocaleDateString();
+		} catch {
+			return iso;
+		}
+	}
+
 	function askDeleteApp() {
 		deleteAppError = null;
 		confirmingDeleteApp = true;
@@ -258,6 +383,13 @@
 			class:active={activeTab === 'domains'}
 			onclick={() => (activeTab = 'domains')}>Domains ({domains.length})</button
 		>
+		{#if canAdminMembers}
+			<button
+				type="button"
+				class:active={activeTab === 'members'}
+				onclick={() => (activeTab = 'members')}>Members ({members.length})</button
+			>
+		{/if}
 		<button
 			type="button"
 			class:active={activeTab === 'settings'}
@@ -365,6 +497,121 @@
 				</ul>
 			{/if}
 		</section>
+	{:else if activeTab === 'members' && canAdminMembers}
+		<section>
+			<h2>Members</h2>
+			<p class="muted">
+				Users with explicit access to this app. Instance owners and admins
+				already have implicit access — they are not listed here. Use the Users
+				page to invite a <code>member</code> first, then grant them app access
+				below.
+			</p>
+
+			<form class="create-form" onsubmit={submitAddMember}>
+				<div class="row">
+					<label class="grow">
+						<span>User</span>
+						<select
+							bind:value={addMemberUserId}
+							disabled={!!eligibleLoadError || eligibleAfterFilter.length === 0}
+							required
+						>
+							<option value="" disabled>Pick a member to invite…</option>
+							{#each eligibleAfterFilter as u (u.id)}
+								<option value={u.id}>{u.username}{u.email ? ` (${u.email})` : ''}</option>
+							{/each}
+						</select>
+					</label>
+					<label>
+						<span>Role</span>
+						<select bind:value={addMemberRole} disabled={!!eligibleLoadError}>
+							<option value="viewer">viewer</option>
+							<option value="editor">editor</option>
+							<option value="app_admin">app admin</option>
+						</select>
+					</label>
+				</div>
+				{#if eligibleLoadError}
+					<p class="muted">{eligibleLoadError}</p>
+				{:else if eligibleAfterFilter.length === 0}
+					<p class="muted">
+						No eligible users to invite. Create a <code>member</code> on the Users
+						page first.
+					</p>
+				{/if}
+				{#if addMemberError}
+					<div class="error">{addMemberError}</div>
+				{/if}
+				<div class="actions">
+					<button
+						type="submit"
+						disabled={addingMember || !addMemberUserId || !!eligibleLoadError}
+					>
+						{addingMember ? 'Adding…' : 'Add member'}
+					</button>
+				</div>
+			</form>
+
+			{#if memberActionError}
+				<div class="error">{memberActionError}</div>
+			{/if}
+
+			{#if members.length === 0}
+				<p class="muted">No explicit members yet.</p>
+			{:else}
+				<div class="table">
+					<div class="row head-row">
+						<div>User</div>
+						<div>Instance</div>
+						<div>App role</div>
+						<div>Joined</div>
+						<div class="actions-col"></div>
+					</div>
+					{#each members as m (m.user_id)}
+						<div class="row member-row" class:inactive={!m.is_active}>
+							<div>
+								<strong>{m.username}</strong>
+								{#if m.email}<span class="muted">{m.email}</span>{/if}
+								{#if !m.is_active}<span class="muted">(inactive)</span>{/if}
+							</div>
+							<div><RoleChip role={m.instance_role} size="sm" /></div>
+							<div><RoleChip appRole={m.role} size="sm" /></div>
+							<div>{shortDate(m.created_at)}</div>
+							<div class="actions-col">
+								<ActionMenu
+									label="Member actions for {m.username}"
+									items={[
+										{
+											label: 'Make app admin',
+											disabled:
+												m.role === 'app_admin' || roleChangeBusy === m.user_id,
+											onClick: () => changeMemberRole(m, 'app_admin')
+										},
+										{
+											label: 'Make editor',
+											disabled:
+												m.role === 'editor' || roleChangeBusy === m.user_id,
+											onClick: () => changeMemberRole(m, 'editor')
+										},
+										{
+											label: 'Make viewer',
+											disabled:
+												m.role === 'viewer' || roleChangeBusy === m.user_id,
+											onClick: () => changeMemberRole(m, 'viewer')
+										},
+										{
+											label: 'Remove from app',
+											danger: true,
+											onClick: () => askRemoveMember(m)
+										}
+									]}
+								/>
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</section>
 	{:else if activeTab === 'settings'}
 		<section>
 			<h2>Settings</h2>
@@ -502,6 +749,26 @@
 			{/if}
 		</ConfirmModal>
 	{/if}
+
+	{#if memberToRemove}
+		<ConfirmModal
+			title="Remove {memberToRemove.username} from {app.name}"
+			variant="danger"
+			confirmLabel="Remove member"
+			busyLabel="Removing…"
+			busy={removingMember}
+			onConfirm={confirmRemoveMember}
+			onCancel={() => (memberToRemove = null)}
+		>
+			<p>
+				<strong>{memberToRemove.username}</strong> will lose access to this
+				app. Their other app memberships and account are untouched.
+			</p>
+			{#if removeMemberError}
+				<p class="modal-error">{removeMemberError}</p>
+			{/if}
+		</ConfirmModal>
+	{/if}
 {/if}
 
 <style>
@@ -744,4 +1011,60 @@
 		border-radius: 0.5rem;
 		background: #1e0a0a;
 	}
+
+	.create-form select {
+		background: #0b1220;
+		color: #e2e8f0;
+		border: 1px solid #334155;
+		border-radius: 0.375rem;
+		padding: 0.5rem 0.75rem;
+		font: inherit;
+	}
+
+	.create-form .row > label.grow {
+		grid-column: span 2;
+	}
+
+	.table {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.table .row {
+		display: grid;
+		grid-template-columns: 2fr 1fr 1fr 1fr 3rem;
+		gap: 0.75rem;
+		padding: 0.85rem 1rem;
+		background: #1e293b;
+		border-radius: 0.375rem;
+		align-items: center;
+		margin: 0;
+	}
+
+	.table .head-row {
+		background: transparent;
+		padding: 0.25rem 1rem;
+		color: #64748b;
+		font-size: 0.75rem;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	.table .member-row.inactive {
+		opacity: 0.55;
+	}
+
+	.table .member-row strong {
+		margin-right: 0.4rem;
+	}
+
+	.table .member-row .muted {
+		font-size: 0.8rem;
+	}
+
+	.table .actions-col {
+		display: flex;
+		justify-content: flex-end;
+	}
 </style>