feat: add org admin SPA for models, roles and provider

Introduce admin-web (Skeleton/SvelteKit), Prisma models for provider connection / OrgModel / OrgRole, DB-backed runtime settings, and admin API routes so org admins can manage agent configuration end-to-end.
2026-07-11 12:33:56 +08:00
parent 461d2e89b0
commit 552c1c353e
50 changed files with 6986 additions and 151 deletions
@@ -0,0 +1,291 @@
+/**
+ * Thin API client for the org admin backend. Same-origin cookie auth.
+ */
+
+export class ApiError extends Error {
+	code: string;
+	status: number;
+	constructor(code: string, message: string, status: number) {
+		super(message);
+		this.name = 'ApiError';
+		this.code = code;
+		this.status = status;
+	}
+}
+
+async function request(method: string, url: string, body?: unknown): Promise<unknown> {
+	const init: RequestInit = {
+		method,
+		credentials: 'same-origin',
+		headers: body !== undefined ? { 'content-type': 'application/json' } : undefined,
+		body: body !== undefined ? JSON.stringify(body) : undefined
+	};
+	const res = await fetch(url, init);
+	const text = await res.text();
+	let data: unknown = null;
+	if (text !== '') {
+		try {
+			data = JSON.parse(text);
+		} catch {
+			data = text;
+		}
+	}
+	if (!res.ok) {
+		const err = (data as { error?: { code?: string; message?: string } } | null)?.error;
+		throw new ApiError(err?.code ?? 'http_error', err?.message ?? `HTTP ${res.status}`, res.status);
+	}
+	return data;
+}
+
+const get = (u: string) => request('GET', u);
+const post = (u: string, b?: unknown) => request('POST', u, b);
+const put = (u: string, b?: unknown) => request('PUT', u, b);
+const patch = (u: string, b?: unknown) => request('PATCH', u, b);
+const del = (u: string) => request('DELETE', u);
+
+const orgBase = (slug: string) => `/api/org/${encodeURIComponent(slug)}`;
+
+// --- Types ---
+
+export interface OrgMembership {
+	id: string;
+	slug: string;
+	name: string;
+	status: string;
+	role: 'OWNER' | 'ADMIN' | 'MEMBER';
+}
+
+export interface MeResponse {
+	user: {
+		id: string;
+		feishuOpenId: string;
+		displayName: string;
+		avatarUrl: string | null;
+	};
+	organizations: OrgMembership[];
+}
+
+export interface OrgMember {
+	userId: string;
+	feishuOpenId: string;
+	displayName: string;
+	avatarUrl: string | null;
+	role: 'OWNER' | 'ADMIN' | 'MEMBER';
+	createdAt: string;
+}
+
+export interface TeamRow {
+	id: string;
+	slug: string;
+	name: string;
+	description: string | null;
+	memberCount: number;
+	createdAt: string;
+}
+
+export interface TeamMemberRow {
+	userId: string;
+	feishuOpenId: string;
+	displayName: string;
+	createdAt: string;
+}
+
+export interface ExplorerFolder {
+	id: string;
+	name: string;
+	parentId: string | null;
+	sortKey: string;
+	projectCount: number;
+	childFolderCount: number;
+}
+
+export interface ExplorerProject {
+	id: string;
+	name: string;
+	folderId: string | null;
+	createdAt: string;
+	binding: { chatId: string; createdAt: string } | null;
+}
+
+export interface ExplorerData {
+	folders: ExplorerFolder[];
+	projects: ExplorerProject[];
+}
+
+export interface ProjectDetail {
+	id: string;
+	name: string;
+	folderId: string | null;
+	folder: { id: string; name: string } | null;
+	workspaceDir: string;
+	createdAt: string;
+	archivedAt: string | null;
+	createdBy: { id: string; displayName: string; feishuOpenId: string } | null;
+	binding: { chatId: string; createdAt: string } | null;
+}
+
+export interface TeamAccessEntry {
+	grantId: string;
+	projectId: string;
+	organizationId: string;
+	teamId: string;
+	teamSlug: string;
+	teamName: string;
+	role: 'READ' | 'EDIT' | 'MANAGE';
+}
+
+export interface SessionSummary {
+	id: string;
+	provider: string;
+	roleId: string;
+	model: string;
+	title: string | null;
+	runCount: number;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export interface OrgModelRow {
+	id: string;
+	modelId: string;
+	label: string;
+	toolCapable: boolean;
+	sortKey: string;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export interface OrgRoleRow {
+	id: string;
+	roleId: string;
+	label: string;
+	defaultModelId: string | null;
+	systemPrompt: string | null;
+	tools: string[] | null;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export interface ProviderConnection {
+	organizationId: string;
+	providerId: string;
+	mode: 'BYOK' | 'PLATFORM_MANAGED';
+	baseUrl: string | null;
+	hasAuthToken: boolean;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export interface UsageTotals {
+	runCount: number;
+	runsWithCost: number;
+	runsWithoutCost: number;
+	inputTokens: number;
+	outputTokens: number;
+	costUsd: number | null;
+}
+
+export interface ProjectUsageRow extends UsageTotals {
+	projectId: string;
+	projectName: string;
+	folderId: string | null;
+}
+
+export interface UsageReport {
+	from: string | null;
+	to: string | null;
+	projects: ProjectUsageRow[];
+	totals: UsageTotals;
+}
+
+// --- API ---
+
+export const api = {
+	me: () => get('/api/me') as Promise<MeResponse>,
+	logout: () => post('/auth/logout'),
+
+	org: (slug: string) => get(orgBase(slug)) as Promise<{ organization: { id: string; slug: string; name: string; status: string }; actorRole: string }>,
+	settings: (slug: string) => get(`${orgBase(slug)}/settings`) as Promise<{ membersCanCreateProjects: boolean }>,
+	setSettings: (slug: string, body: { membersCanCreateProjects: boolean }) =>
+		patch(`${orgBase(slug)}/settings`, body) as Promise<{ membersCanCreateProjects: boolean }>,
+
+	members: (slug: string) => get(`${orgBase(slug)}/members`) as Promise<{ members: OrgMember[] }>,
+	addMember: (slug: string, body: { feishuOpenId: string; displayName?: string; role: string }) =>
+		post(`${orgBase(slug)}/members`, body) as Promise<OrgMember>,
+	setMemberRole: (slug: string, userId: string, role: string) =>
+		patch(`${orgBase(slug)}/members/${userId}`, { role }),
+	revokeMember: (slug: string, userId: string) =>
+		post(`${orgBase(slug)}/members/${userId}/revoke`),
+
+	teams: (slug: string) => get(`${orgBase(slug)}/teams`) as Promise<{ teams: TeamRow[] }>,
+	createTeam: (slug: string, body: { slug: string; name: string; description?: string }) =>
+		post(`${orgBase(slug)}/teams`, body) as Promise<TeamRow>,
+	updateTeam: (slug: string, teamId: string, body: { name?: string; description?: string | null }) =>
+		patch(`${orgBase(slug)}/teams/${teamId}`, body) as Promise<TeamRow>,
+	archiveTeam: (slug: string, teamId: string) =>
+		post(`${orgBase(slug)}/teams/${teamId}/archive`),
+	teamMembers: (slug: string, teamId: string) =>
+		get(`${orgBase(slug)}/teams/${teamId}/members`) as Promise<{ members: TeamMemberRow[] }>,
+	addTeamMember: (slug: string, teamId: string, body: { userId?: string; feishuOpenId?: string }) =>
+		post(`${orgBase(slug)}/teams/${teamId}/members`, body) as Promise<TeamMemberRow>,
+	revokeTeamMember: (slug: string, teamId: string, userId: string) =>
+		post(`${orgBase(slug)}/teams/${teamId}/members/${userId}/revoke`),
+
+	explorer: (slug: string) => get(`${orgBase(slug)}/explorer`) as Promise<ExplorerData>,
+	createFolder: (slug: string, body: { name: string; parentId?: string; sortKey?: string }) =>
+		post(`${orgBase(slug)}/folders`, body) as Promise<{ id: string; name: string; parentId: string | null; sortKey: string }>,
+	renameFolder: (slug: string, folderId: string, body: { name?: string; sortKey?: string; parentId?: string | null }) =>
+		patch(`${orgBase(slug)}/folders/${folderId}`, body) as Promise<{ id: string; name: string; parentId: string | null; sortKey: string }>,
+	archiveFolder: (slug: string, folderId: string) =>
+		post(`${orgBase(slug)}/folders/${folderId}/archive`) as Promise<{ archived: true; folderId: string }>,
+	createProject: (slug: string, body: { name: string; folderId?: string }) =>
+		post(`${orgBase(slug)}/projects`, body) as Promise<{ id: string; name: string }>,
+	project: (slug: string, projectId: string) =>
+		get(`${orgBase(slug)}/projects/${projectId}`) as Promise<ProjectDetail>,
+	renameProject: (slug: string, projectId: string, name: string) =>
+		patch(`${orgBase(slug)}/projects/${projectId}`, { name }),
+	moveProject: (slug: string, projectId: string, folderId: string | null) =>
+		patch(`${orgBase(slug)}/projects/${projectId}/folder`, { folderId }),
+	archiveProject: (slug: string, projectId: string) =>
+		post(`${orgBase(slug)}/projects/${projectId}/archive`),
+	archiveBinding: (slug: string, projectId: string) =>
+		post(`${orgBase(slug)}/projects/${projectId}/binding/archive`),
+
+	teamAccess: (slug: string, projectId: string) =>
+		get(`${orgBase(slug)}/projects/${projectId}/team-access`) as Promise<{ access: TeamAccessEntry[] }>,
+	grantTeamAccess: (slug: string, projectId: string, body: { teamId?: string; teamSlug?: string; role: string }) =>
+		put(`${orgBase(slug)}/projects/${projectId}/team-access`, body) as Promise<TeamAccessEntry>,
+	revokeTeamAccess: (slug: string, projectId: string, teamId: string) =>
+		del(`${orgBase(slug)}/projects/${projectId}/team-access/${teamId}`),
+
+	sessions: (slug: string, projectId: string, limit?: number) =>
+		get(`${orgBase(slug)}/projects/${projectId}/sessions${limit !== undefined ? `?limit=${limit}` : ''}`) as Promise<{ sessions: SessionSummary[] }>,
+	usage: (slug: string, params?: { from?: string; to?: string; folderId?: string }) => {
+		const q = new URLSearchParams();
+		if (params?.from) q.set('from', params.from);
+		if (params?.to) q.set('to', params.to);
+		if (params?.folderId) q.set('folderId', params.folderId);
+		const qs = q.toString();
+		return get(`${orgBase(slug)}/usage${qs ? `?${qs}` : ''}`) as Promise<UsageReport>;
+	},
+
+	models: (slug: string) => get(`${orgBase(slug)}/models`) as Promise<{ models: OrgModelRow[] }>,
+	createModel: (slug: string, body: { modelId: string; label: string; toolCapable?: boolean; sortKey?: string }) =>
+		post(`${orgBase(slug)}/models`, body) as Promise<OrgModelRow>,
+	updateModel: (slug: string, id: string, body: { label?: string; toolCapable?: boolean; sortKey?: string; modelId?: string }) =>
+		patch(`${orgBase(slug)}/models/${id}`, body) as Promise<OrgModelRow>,
+	deleteModel: (slug: string, id: string) =>
+		del(`${orgBase(slug)}/models/${id}`),
+
+	roles: (slug: string) => get(`${orgBase(slug)}/roles`) as Promise<{ roles: OrgRoleRow[] }>,
+	createRole: (slug: string, body: { roleId: string; label: string; defaultModelId?: string | null; systemPrompt?: string | null; tools?: string[] | null }) =>
+		post(`${orgBase(slug)}/roles`, body) as Promise<OrgRoleRow>,
+	updateRole: (slug: string, id: string, body: { label?: string; defaultModelId?: string | null; systemPrompt?: string | null; tools?: string[] | null; roleId?: string }) =>
+		patch(`${orgBase(slug)}/roles/${id}`, body) as Promise<OrgRoleRow>,
+	deleteRole: (slug: string, id: string) =>
+		del(`${orgBase(slug)}/roles/${id}`),
+
+	provider: (slug: string) => get(`${orgBase(slug)}/provider-connection`) as Promise<ProviderConnection>,
+	setProvider: (slug: string, body: { mode: string; providerId?: string; baseUrl?: string | null; authToken?: string | null }) =>
+		put(`${orgBase(slug)}/provider-connection`, body) as Promise<ProviderConnection>
+};
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		title = '暂无数据',
+		description,
+		action
+	}: {
+		title?: string;
+		description?: string;
+		action?: Snippet;
+	} = $props();
+</script>
+
+<div class="saas-empty">
+	<div class="mb-1 flex h-12 w-12 items-center justify-center rounded-2xl bg-surface-100 text-surface-400">
+		<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
+		</svg>
+	</div>
+	<p class="text-sm font-medium text-surface-700">{title}</p>
+	{#if description}
+		<p class="max-w-sm text-sm text-surface-400">{description}</p>
+	{/if}
+	{#if action}
+		<div class="mt-2">
+			{@render action()}
+		</div>
+	{/if}
+</div>
@@ -0,0 +1,26 @@
+<script lang="ts">
+	let {
+		message,
+		onretry
+	}: {
+		message: string;
+		onretry?: () => void;
+	} = $props();
+</script>
+
+<div class="saas-card flex flex-wrap items-start gap-3 border-error-200 bg-error-50 p-4 text-error-700">
+	<svg class="mt-0.5 h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+		/>
+	</svg>
+	<div class="min-w-0 flex-1">
+		<p class="text-sm font-medium">请求失败</p>
+		<p class="mt-0.5 text-sm opacity-90">{message}</p>
+	</div>
+	{#if onretry}
+		<button type="button" class="saas-btn-ghost text-sm" onclick={onretry}>重试</button>
+	{/if}
+</div>
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { ExplorerFolder } from '$lib/api';
+	import Icon from './Icon.svelte';
+	import FolderTree from './FolderTree.svelte';
+
+	let {
+		folder,
+		folders,
+		projects,
+		slug
+	}: {
+		folder: ExplorerFolder;
+		folders: ExplorerFolder[];
+		projects: {
+			id: string;
+			name: string;
+			folderId: string | null;
+			createdAt: string;
+			binding: { chatId: string } | null;
+		}[];
+		slug: string;
+	} = $props();
+
+	let open = $state(true);
+</script>
+
+<div>
+	<button
+		type="button"
+		class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2.5 text-left text-sm transition hover:bg-surface-100"
+		onclick={() => (open = !open)}
+	>
+		<span class="w-3.5 text-center text-xs text-surface-400">{open ? '▾' : '▸'}</span>
+		<span class="flex h-7 w-7 items-center justify-center rounded-md bg-warning-50 text-warning-700">
+			<Icon name="folder" class="h-4 w-4" />
+		</span>
+		<span class="min-w-0 flex-1 truncate font-medium text-surface-800">{folder.name}</span>
+		<span class="saas-badge-neutral">{folder.projectCount} 项目</span>
+		{#if folder.childFolderCount > 0}
+			<span class="saas-badge-neutral">{folder.childFolderCount} 子夹</span>
+		{/if}
+	</button>
+	{#if open}
+		<div class="ml-4 border-l border-surface-200 pl-2">
+			<FolderTree {folders} {projects} parentId={folder.id} {slug} />
+		</div>
+	{/if}
+</div>
@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { ExplorerFolder } from '$lib/api';
+	import { fmtDate } from '$lib/format';
+	import Icon from './Icon.svelte';
+	import FolderNode from './FolderNode.svelte';
+
+	let {
+		folders,
+		projects,
+		parentId,
+		slug
+	}: {
+		folders: ExplorerFolder[];
+		projects: {
+			id: string;
+			name: string;
+			folderId: string | null;
+			createdAt: string;
+			binding: { chatId: string } | null;
+		}[];
+		parentId: string | null;
+		slug: string;
+	} = $props();
+
+	let childFolders = $derived(folders.filter((f) => f.parentId === parentId));
+	let childProjects = $derived(projects.filter((p) => p.folderId === parentId));
+</script>
+
+<div class="space-y-0.5">
+	{#each childProjects as p (p.id)}
+		<a
+			href={`/admin/org/${slug}/projects/${p.id}`}
+			class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-sm transition hover:bg-surface-100"
+		>
+			<span class="flex h-7 w-7 items-center justify-center rounded-md bg-primary-50 text-primary-600">
+				<Icon name="file" class="h-4 w-4" />
+			</span>
+			<span class="min-w-0 flex-1 truncate font-medium text-surface-800">{p.name}</span>
+			{#if p.binding}
+				<span class="saas-badge-success">已绑定</span>
+			{/if}
+			<span class="hidden text-xs text-surface-400 sm:inline">{fmtDate(p.createdAt)}</span>
+		</a>
+	{/each}
+
+	{#each childFolders as f (f.id)}
+		<FolderNode folder={f} {folders} {projects} {slug} />
+	{/each}
+</div>
@@ -0,0 +1,115 @@
+<script lang="ts">
+	/** Inline nav icons for the admin shell. */
+	let {
+		name,
+		class: className = 'h-4 w-4'
+	}: {
+		name:
+			| 'overview'
+			| 'members'
+			| 'teams'
+			| 'projects'
+			| 'models'
+			| 'roles'
+			| 'provider'
+			| 'menu'
+			| 'logout'
+			| 'org'
+			| 'chevron'
+			| 'folder'
+			| 'file'
+			| 'check';
+		class?: string;
+	} = $props();
+</script>
+
+{#if name === 'overview'}
+	<svg class={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+		<path stroke-linecap="round" stroke-linejoin="round" d="M3 12l9-9 9 9M5 10v9a1 1 0 001 1h3v-5h6v5h3a1 1 0 001-1v-9" />
+	</svg>
+{:else if name === 'members'}
+	<svg class={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M15.75 7.5a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.5 19.5a7.5 7.5 0 0115 0"
+		/>
+	</svg>
+{:else if name === 'teams'}
+	<svg class={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M18 18.72a9.09 9.09 0 003.74-.72 9 9 0 00-5.07-5.95M15 11a4 4 0 10-8 0 4 4 0 008 0zM4.26 18a9 9 0 0115.48 0"
+		/>
+	</svg>
+{:else if name === 'projects'}
+	<svg class={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M3.75 6.75A2.25 2.25 0 016 4.5h3.379c.6 0 1.175.238 1.6.66l.842.84c.424.423 1 .66 1.6.66H18A2.25 2.25 0 0120.25 9v8.25A2.25 2.25 0 0118 19.5H6a2.25 2.25 0 01-2.25-2.25V6.75z"
+		/>
+	</svg>
+{:else if name === 'models'}
+	<svg class={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+		<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12l7.5-7.5L19.5 12 12 19.5 4.5 12z" />
+	</svg>
+{:else if name === 'roles'}
+	<svg class={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"
+		/>
+	</svg>
+{:else if name === 'provider'}
+	<svg class={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+		<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 016.364 6.364l-3.182 3.182a4.5 4.5 0 01-6.364-6.364" />
+		<path stroke-linecap="round" stroke-linejoin="round" d="M10.81 15.312a4.5 4.5 0 01-6.364-6.364l3.182-3.182a4.5 4.5 0 016.364 6.364" />
+	</svg>
+{:else if name === 'menu'}
+	<svg class={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+		<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+	</svg>
+{:else if name === 'logout'}
+	<svg class={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6A2.25 2.25 0 005.25 5.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l3 3m0 0l-3 3m3-3H6"
+		/>
+	</svg>
+{:else if name === 'org'}
+	<svg class={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"
+		/>
+	</svg>
+{:else if name === 'chevron'}
+	<svg class={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+		<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+	</svg>
+{:else if name === 'folder'}
+	<svg class={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M3.75 6.75A2.25 2.25 0 016 4.5h3.379c.6 0 1.175.238 1.6.66l.842.84c.424.423 1 .66 1.6.66H18A2.25 2.25 0 0120.25 9v8.25A2.25 2.25 0 0118 19.5H6a2.25 2.25 0 01-2.25-2.25V6.75z"
+		/>
+	</svg>
+{:else if name === 'file'}
+	<svg class={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+		/>
+	</svg>
+{:else if name === 'check'}
+	<svg class={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+		<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+	</svg>
+{/if}
@@ -0,0 +1,15 @@
+<script lang="ts">
+	let { label = '加载中…' }: { label?: string } = $props();
+</script>
+
+<div class="flex flex-col items-center justify-center gap-3 py-16 text-surface-400">
+	<svg class="h-7 w-7 animate-spin text-primary-500" viewBox="0 0 24 24" fill="none">
+		<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+		<path
+			class="opacity-90"
+			fill="currentColor"
+			d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+		></path>
+	</svg>
+	<p class="text-sm">{label}</p>
+</div>
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		open = $bindable(false),
+		title,
+		children,
+		onclose
+	}: {
+		open?: boolean;
+		title: string;
+		children: Snippet;
+		onclose?: () => void;
+	} = $props();
+
+	function close() {
+		open = false;
+		onclose?.();
+	}
+
+	function onBackdrop(e: MouseEvent) {
+		if (e.target === e.currentTarget) close();
+	}
+
+	function onKey(e: KeyboardEvent) {
+		if (e.key === 'Escape') close();
+	}
+</script>
+
+{#if open}
+	<div class="saas-modal-backdrop" role="presentation" onclick={onBackdrop} onkeydown={onKey}>
+		<div class="saas-modal" role="dialog" aria-modal="true" aria-label={title} tabindex="-1">
+			<div class="mb-4 flex items-start justify-between gap-3">
+				<h3 class="text-lg font-semibold text-surface-900">{title}</h3>
+				<button type="button" class="saas-btn-ghost !px-2 !py-1 text-surface-400" onclick={close} aria-label="关闭">
+					<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+					</svg>
+				</button>
+			</div>
+			{@render children()}
+		</div>
+	</div>
+{/if}
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		title,
+		description,
+		actions
+	}: {
+		title: string;
+		description?: string;
+		actions?: Snippet;
+	} = $props();
+</script>
+
+<div class="saas-toolbar">
+	<div class="min-w-0">
+		<h1 class="saas-page-title">{title}</h1>
+		{#if description}
+			<p class="saas-muted mt-1">{description}</p>
+		{/if}
+	</div>
+	{#if actions}
+		<div class="ml-auto flex flex-wrap items-center gap-2">
+			{@render actions()}
+		</div>
+	{/if}
+</div>
@@ -0,0 +1,148 @@
+<script lang="ts">
+	import { api, type OrgRoleRow, type OrgModelRow } from '$lib/api';
+	import { fmtDate } from '$lib/format';
+	import { TOOL_OPTIONS } from '$lib/constants';
+	import { toastError, toastSuccess } from '$lib/toast';
+
+	let {
+		r,
+		models,
+		slug,
+		onremoved,
+		onupdated
+	}: {
+		r: OrgRoleRow;
+		models: OrgModelRow[];
+		slug: string;
+		onremoved: () => void;
+		onupdated: (updated: OrgRoleRow) => void;
+	} = $props();
+
+	// Local edit buffer intentionally seeded once from the row props.
+	const initial = {
+		roleId: r.roleId,
+		label: r.label,
+		defaultModelId: r.defaultModelId ?? '',
+		systemPrompt: r.systemPrompt ?? '',
+		unrestricted: r.tools === null,
+		tools: r.tools ?? []
+	};
+	let roleId = $state(initial.roleId);
+	let label = $state(initial.label);
+	let defaultModelId = $state(initial.defaultModelId);
+	let systemPrompt = $state(initial.systemPrompt);
+	let unrestricted = $state(initial.unrestricted);
+	let selectedTools = $state<Set<string>>(new Set(initial.tools));
+	let saving = $state(false);
+
+	function toggleTool(id: string) {
+		const next = new Set(selectedTools);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		selectedTools = next;
+	}
+
+	async function save() {
+		saving = true;
+		const tools = unrestricted ? null : [...selectedTools];
+		try {
+			const updated = await api.updateRole(slug, r.id, {
+				roleId: roleId.trim(),
+				label: label.trim(),
+				defaultModelId: defaultModelId === '' ? null : defaultModelId,
+				systemPrompt: systemPrompt === '' ? null : systemPrompt,
+				tools
+			});
+			onupdated(updated);
+			toastSuccess('角色已保存');
+		} catch (err) {
+			toastError(err instanceof Error ? err.message : String(err));
+		} finally {
+			saving = false;
+		}
+	}
+
+	const groupedTools = TOOL_OPTIONS.reduce(
+		(acc, t) => {
+			(acc[t.group] ??= []).push(t);
+			return acc;
+		},
+		{} as Record<string, typeof TOOL_OPTIONS>
+	);
+</script>
+
+<div class="saas-card-pad">
+	<div class="mb-4 flex flex-wrap items-center gap-2">
+		<span class="saas-badge-primary font-mono">/{roleId || r.roleId}</span>
+		<span class="text-sm text-surface-500">{label || r.label}</span>
+	</div>
+
+	<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+		<div>
+			<label for="role-id-{r.id}" class="saas-label">roleId</label>
+			<input id="role-id-{r.id}" class="saas-input font-mono text-sm" bind:value={roleId} />
+		</div>
+		<div>
+			<label for="role-label-{r.id}" class="saas-label">label</label>
+			<input id="role-label-{r.id}" class="saas-input" bind:value={label} />
+		</div>
+	</div>
+
+	<div class="mt-4">
+		<label for="role-model-{r.id}" class="saas-label">默认模型</label>
+		<select id="role-model-{r.id}" class="saas-select" bind:value={defaultModelId}>
+			<option value="">（角色默认 → 首模型）</option>
+			{#each models as m}
+				<option value={m.modelId}>{m.label} ({m.modelId})</option>
+			{/each}
+		</select>
+	</div>
+
+	<div class="mt-4">
+		<span class="saas-label">工具白名单</span>
+		<label class="mb-3 flex cursor-pointer items-center gap-2 rounded-lg border border-surface-200 bg-surface-100/40 px-3 py-2">
+			<input type="checkbox" class="checkbox" bind:checked={unrestricted} />
+			<span class="text-sm">不限（使用全部注册工具）</span>
+		</label>
+		<div class="space-y-3 {unrestricted ? 'pointer-events-none opacity-40' : ''}">
+			{#each Object.entries(groupedTools) as [group, tools]}
+				<div>
+					<p class="mb-1.5 text-xs font-semibold uppercase tracking-wide text-surface-400">{group}</p>
+					<div class="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
+						{#each tools as t}
+							<label class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-surface-100">
+								<input
+									type="checkbox"
+									class="checkbox"
+									checked={selectedTools.has(t.id)}
+									onchange={() => toggleTool(t.id)}
+								/>
+								{t.label}
+							</label>
+						{/each}
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+
+	<div class="mt-4">
+		<label for="role-prompt-{r.id}" class="saas-label">系统提示词</label>
+		<textarea
+			id="role-prompt-{r.id}"
+			class="saas-textarea"
+			rows="4"
+			placeholder="系统提示词（可选）。会话开始时注入，定义 agent 人格/指令。"
+			bind:value={systemPrompt}
+		></textarea>
+	</div>
+
+	<div class="mt-4 flex flex-wrap items-center gap-3 border-t border-surface-100 pt-4">
+		<span class="text-xs text-surface-400">更新于 {fmtDate(r.updatedAt)}</span>
+		<div class="flex-1"></div>
+		<button class="saas-btn-danger" onclick={onremoved}>删除角色</button>
+		<button class="saas-btn-primary" onclick={save} disabled={saving}>
+			{saving ? '保存中…' : '保存'}
+		</button>
+	</div>
+</div>
@@ -0,0 +1,19 @@
+<script lang="ts">
+	let {
+		label,
+		value,
+		hint
+	}: {
+		label: string;
+		value: string;
+		hint?: string;
+	} = $props();
+</script>
+
+<div class="saas-stat">
+	<div class="saas-stat-label">{label}</div>
+	<div class="saas-stat-value">{value}</div>
+	{#if hint}
+		<div class="saas-help">{hint}</div>
+	{/if}
+</div>
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { dismissToast, toasts } from '$lib/toast';
+
+	const kindClass: Record<string, string> = {
+		info: 'border-surface-200 bg-surface-50 text-surface-800',
+		success: 'border-success-200 bg-success-50 text-success-800',
+		error: 'border-error-200 bg-error-50 text-error-800'
+	};
+</script>
+
+<div class="pointer-events-none fixed inset-x-0 top-0 z-[100] flex flex-col items-end gap-2 p-4">
+	{#each $toasts as t (t.id)}
+		<div
+			class="pointer-events-auto flex max-w-sm items-start gap-3 rounded-xl border px-4 py-3 text-sm shadow-lg {kindClass[t.kind] ??
+				kindClass.info}"
+			role="status"
+		>
+			<p class="min-w-0 flex-1">{t.message}</p>
+			<button type="button" class="opacity-60 hover:opacity-100" onclick={() => dismissToast(t.id)} aria-label="关闭">
+				×
+			</button>
+		</div>
+	{/each}
+</div>
@@ -0,0 +1,22 @@
+export interface ToolOption {
+	id: string;
+	label: string;
+	group: string;
+}
+
+export const TOOL_OPTIONS: ToolOption[] = [
+	{ id: 'read_file', label: '读取文件 (Read)', group: '文件' },
+	{ id: 'write_file', label: '写入文件 (Write)', group: '文件' },
+	{ id: 'list_files', label: '列目录 (Glob)', group: '文件' },
+	{ id: 'search_files', label: '搜索 (Grep)', group: '文件' },
+	{ id: 'bash', label: 'Bash 命令', group: 'Shell' },
+	{ id: 'cph_check', label: 'cph check', group: 'CPH' },
+	{ id: 'cph_build', label: 'cph build', group: 'CPH' },
+	{ id: 'send_file', label: '发送文件 (飞书)', group: '飞书 MCP' },
+	{ id: 'feishu_read_context', label: '读飞书上下文', group: '飞书 MCP' },
+	{ id: 'feishu_download_resource', label: '下载飞书资源', group: '飞书 MCP' },
+	{ id: 'request_approval', label: '请求审批', group: '飞书 MCP' }
+];
+
+export const ORG_ROLES = ['OWNER', 'ADMIN', 'MEMBER'] as const;
+export const PERMISSION_ROLES = ['READ', 'EDIT', 'MANAGE'] as const;
@@ -0,0 +1,28 @@
+export function fmtDate(iso: string): string {
+	if (!iso) return '—';
+	const d = new Date(iso);
+	if (Number.isNaN(d.getTime())) return iso;
+	return d.toLocaleString(undefined, {
+		year: 'numeric',
+		month: 'short',
+		day: '2-digit',
+		hour: '2-digit',
+		minute: '2-digit'
+	});
+}
+
+export function fmtDateOnly(iso: string): string {
+	if (!iso) return '—';
+	const d = new Date(iso);
+	if (Number.isNaN(d.getTime())) return iso;
+	return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' });
+}
+
+export function fmtCost(usd: number | null): string {
+	if (usd === null) return '—';
+	return `$${Number(usd).toFixed(4)}`;
+}
+
+export function fmtNum(n: number): string {
+	return n.toLocaleString();
+}
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
@@ -0,0 +1,43 @@
+import { writable } from 'svelte/store';
+import { api, type MeResponse } from './api';
+
+interface SessionState {
+	loading: boolean;
+	me: MeResponse | null;
+	error: string | null;
+}
+
+export const session = writable<SessionState>({
+	loading: true,
+	me: null,
+	error: null
+});
+
+export async function loadSession(): Promise<void> {
+	session.update((s) => ({ ...s, loading: true, error: null }));
+	try {
+		const me = await api.me();
+		session.set({ loading: false, me, error: null });
+	} catch (err) {
+		const status = (err as { status?: number }).status;
+		if (status === 401) {
+			redirectToLogin();
+			return;
+		}
+		session.set({
+			loading: false,
+			me: null,
+			error: err instanceof Error ? err.message : String(err)
+		});
+	}
+}
+
+export function redirectToLogin(): void {
+	const ret = encodeURIComponent(window.location.pathname + window.location.hash);
+	window.location.href = `/auth/feishu?returnTo=${ret}`;
+}
+
+export async function logout(): Promise<void> {
+	await api.logout();
+	redirectToLogin();
+}
@@ -0,0 +1,34 @@
+import { writable } from 'svelte/store';
+
+export type ToastKind = 'info' | 'success' | 'error';
+
+export interface ToastItem {
+	id: number;
+	message: string;
+	kind: ToastKind;
+}
+
+let seq = 0;
+export const toasts = writable<ToastItem[]>([]);
+
+export function pushToast(message: string, kind: ToastKind = 'info', ms = 3200): void {
+	const id = ++seq;
+	toasts.update((list) => [...list, { id, message, kind }]);
+	if (ms > 0) {
+		setTimeout(() => {
+			toasts.update((list) => list.filter((t) => t.id !== id));
+		}, ms);
+	}
+}
+
+export function dismissToast(id: number): void {
+	toasts.update((list) => list.filter((t) => t.id !== id));
+}
+
+export function toastSuccess(message: string): void {
+	pushToast(message, 'success');
+}
+
+export function toastError(message: string): void {
+	pushToast(message, 'error', 5000);
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
				`@@ -0,0 +1 @@`
				// place files you want to import through the `$lib` alias in this folder.