feat(hub): org-scoped agent role/skill folder tree (ADR-0028)

Add a shared transparent OrganizationAgentConfigFolder tree for grouping
agent roles and skills in the admin UI without affecting identity, bindings,
run loading, or slash commands.

hub/admin-web/src/lib/api.ts

@@ -317,6 +317,7 @@ export interface AgentRoleRow {
 	createdAt: string;
 	updatedAt: string;
 	skillNames: readonly string[];
+	folderId: string | null;
 }
 
 export interface AgentSkillRow {
@@ -329,6 +330,14 @@ export interface AgentSkillRow {
 	createdAt: string;
 	updatedAt: string;
 	boundRoleIds: readonly string[];
+	folderId: string | null;
+}
+
+/** ADR-0028 transparent folder node shared by agent roles and skills. */
+export interface AgentConfigFolderRow {
+	id: string;
+	name: string;
+	parentId: string | null;
 }
 
 export interface SkillFileEntry {
@@ -515,4 +524,21 @@ export const api = {
 	patchAgentSkill: (slug: string, name: string, body: { description?: string; disabled?: boolean }) =>
 		patch(`${orgBase(slug)}/agent-skills/${encodeURIComponent(name)}`, body) as Promise<{ disabled?: boolean; updated?: boolean }>,
 	agentModels: (slug: string) => get(`${orgBase(slug)}/agent-models`) as Promise<{ models: AgentModelRow[] }>,
+
+	agentConfigFolders: (slug: string) =>
+		get(`${orgBase(slug)}/agent-config-folders`) as Promise<{ folders: AgentConfigFolderRow[] }>,
+	createAgentConfigFolder: (slug: string, body: { name: string; parentId?: string }) =>
+		post(`${orgBase(slug)}/agent-config-folders`, body) as Promise<AgentConfigFolderRow>,
+	patchAgentConfigFolder: (slug: string, folderId: string, body: { name?: string; parentId?: string | null }) =>
+		patch(`${orgBase(slug)}/agent-config-folders/${encodeURIComponent(folderId)}`, body) as Promise<AgentConfigFolderRow>,
+	deleteAgentConfigFolder: (slug: string, folderId: string) =>
+		del(`${orgBase(slug)}/agent-config-folders/${encodeURIComponent(folderId)}`) as Promise<{ deleted: boolean }>,
+	setAgentRoleFolder: (slug: string, roleId: string, folderId: string | null) =>
+		patch(`${orgBase(slug)}/agent-roles/${encodeURIComponent(roleId)}/folder`, { folderId }) as Promise<{
+			folderId: string | null;
+		}>,
+	setAgentSkillFolder: (slug: string, name: string, folderId: string | null) =>
+		patch(`${orgBase(slug)}/agent-skills/${encodeURIComponent(name)}/folder`, { folderId }) as Promise<{
+			folderId: string | null;
+		}>,
 };

hub/admin-web/src/lib/components/AgentConfigFolderNav.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+	import type { AgentConfigFolderRow } from '$lib/api';
+	import Icon from './Icon.svelte';
+
+	/**
+	 * ADR-0028 left folder-tree nav for the agent config pages (roles/skills).
+	 * Transparent grouping only: selection filters the item list, it never
+	 * affects role/skill identity or run resolution.
+	 */
+	let {
+		folders,
+		selected,
+		counts,
+		totalCount,
+		unfiledCount,
+		onselect,
+		oncreate,
+		onrename,
+		ondelete,
+	}: {
+		folders: AgentConfigFolderRow[];
+		/** 'all' | 'unfiled' | folder id */
+		selected: string;
+		/** item count per folder id (roles or skills, depending on the page) */
+		counts: Record<string, number>;
+		totalCount: number;
+		unfiledCount: number;
+		onselect: (id: string) => void;
+		oncreate: (parentId: string | null) => void;
+		onrename: (folder: AgentConfigFolderRow) => void;
+		ondelete: (folder: AgentConfigFolderRow) => void;
+	} = $props();
+
+	type Row = { folder: AgentConfigFolderRow; depth: number; hasChildren: boolean };
+
+	let collapsed = $state<ReadonlySet<string>>(new Set());
+
+	function flatten(list: AgentConfigFolderRow[], collapsedSet: ReadonlySet<string>): Row[] {
+		const rows: Row[] = [];
+		const walk = (parentId: string | null, depth: number) => {
+			const siblings = list
+				.filter((f) => f.parentId === parentId)
+				.sort((a, b) => a.name.localeCompare(b.name));
+			for (const folder of siblings) {
+				const hasChildren = list.some((f) => f.parentId === folder.id);
+				rows.push({ folder, depth, hasChildren });
+				if (hasChildren && !collapsedSet.has(folder.id)) walk(folder.id, depth + 1);
+			}
+		};
+		walk(null, 0);
+		return rows;
+	}
+
+	const rows = $derived(flatten(folders, collapsed));
+
+	function toggleCollapse(folderId: string) {
+		const next = new Set(collapsed);
+		if (next.has(folderId)) next.delete(folderId);
+		else next.add(folderId);
+		collapsed = next;
+	}
+
+	function childFolderCount(folderId: string): number {
+		return folders.filter((f) => f.parentId === folderId).length;
+	}
+
+	const rowClass = (active: boolean) =>
+		`group flex w-full items-center gap-1.5 px-2 py-1.5 text-left text-sm transition hover:bg-surface-100 ${
+			active ? 'bg-primary-100 font-medium text-primary-900' : 'text-surface-800'
+		}`;
+</script>
+
+<nav class="saas-card p-2" aria-label="文件夹导航">
+	<div class="flex items-center justify-between px-2 py-1.5">
+		<span class="text-xs font-semibold uppercase tracking-wide text-surface-600">文件夹</span>
+		<button
+			type="button"
+			class="text-xs text-primary-700 hover:text-primary-900"
+			onclick={() => oncreate(null)}
+		>
+			+ 新建
+		</button>
+	</div>
+
+	<button type="button" class={rowClass(selected === 'all')} onclick={() => onselect('all')}>
+		<span class="w-3.5"></span>
+		<span class="min-w-0 flex-1 truncate">全部</span>
+		<span class="saas-badge-neutral">{totalCount}</span>
+	</button>
+	<button type="button" class={rowClass(selected === 'unfiled')} onclick={() => onselect('unfiled')}>
+		<span class="w-3.5"></span>
+		<span class="min-w-0 flex-1 truncate">未分类</span>
+		<span class="saas-badge-neutral">{unfiledCount}</span>
+	</button>
+
+	{#each rows as row (row.folder.id)}
+		{@const itemCount = counts[row.folder.id] ?? 0}
+		{@const childCount = childFolderCount(row.folder.id)}
+		<div class={rowClass(selected === row.folder.id)} style:padding-left="{0.5 + row.depth * 1}rem">
+			{#if row.hasChildren}
+				<button
+					type="button"
+					class="w-3.5 shrink-0 text-center text-xs text-surface-600"
+					aria-label={collapsed.has(row.folder.id) ? '展开' : '折叠'}
+					onclick={(e) => {
+						e.stopPropagation();
+						toggleCollapse(row.folder.id);
+					}}
+				>
+					{collapsed.has(row.folder.id) ? '▸' : '▾'}
+				</button>
+			{:else}
+				<span class="w-3.5 shrink-0"></span>
+			{/if}
+			<button type="button" class="flex min-w-0 flex-1 items-center gap-1.5 text-left" onclick={() => onselect(row.folder.id)}>
+				<Icon name="folder" class="h-3.5 w-3.5 shrink-0 opacity-60" />
+				<span class="min-w-0 flex-1 truncate">{row.folder.name}</span>
+				{#if itemCount > 0}
+					<span class="saas-badge-neutral">{itemCount}</span>
+				{/if}
+			</button>
+			<span
+				class="flex shrink-0 items-center gap-0.5 opacity-0 transition group-hover:opacity-100 focus-within:opacity-100"
+			>
+				<button
+					type="button"
+					class="flex h-5 w-5 items-center justify-center text-surface-500 hover:text-primary-700"
+					title="在此新建子文件夹"
+					aria-label="在 {row.folder.name} 内新建子文件夹"
+					onclick={() => oncreate(row.folder.id)}
+				>
+					<Icon name="folder-plus" class="h-3.5 w-3.5" />
+				</button>
+				<button
+					type="button"
+					class="flex h-5 w-5 items-center justify-center text-surface-500 hover:text-primary-700"
+					title="重命名 / 移动"
+					aria-label="重命名或移动 {row.folder.name}"
+					onclick={() => onrename(row.folder)}
+				>
+					✎
+				</button>
+				<button
+					type="button"
+					class="flex h-5 w-5 items-center justify-center text-surface-500 hover:text-error-700 disabled:cursor-not-allowed disabled:opacity-30"
+					title={itemCount > 0 || childCount > 0 ? '仅可删除空文件夹' : '删除文件夹'}
+					aria-label="删除 {row.folder.name}"
+					disabled={itemCount > 0 || childCount > 0}
+					onclick={() => ondelete(row.folder)}
+				>
+					×
+				</button>
+			</span>
+		</div>
+	{/each}
+
+	{#if folders.length === 0}
+		<p class="px-2 py-3 text-xs text-surface-600">还没有文件夹。新建一个来分组管理。</p>
+	{/if}
+</nav>

hub/admin-web/src/lib/components/RoleCard.svelte

@@ -14,15 +14,20 @@
 		models,
 		skills,
 		slug,
+		folderItems,
 		onupdated,
 		onskillschanged,
+		onfolderchanged,
 	}: {
 		r: AgentRoleRow;
 		models: AgentModelRow[];
 		skills: AgentSkillRow[];
 		slug: string;
+		/** ADR-0028 folder choices ('' = 未分类); transparent grouping only */
+		folderItems: { value: string; label: string }[];
 		onupdated: (updated: AgentRoleRow) => void;
 		onskillschanged: (roleId: string, skillNames: string[]) => void;
+		onfolderchanged: (roleId: string, folderId: string | null) => void;
 	} = $props();
 
 	const initial = {
@@ -44,6 +49,8 @@
 	let isDefault = $state(initial.isDefault);
 	let selectedSkills = $state<string[]>([...initial.skillNames]);
 	let saving = $state(false);
+	let folderValue = $state(r.folderId ?? '');
+	let savingFolder = $state(false);
 
 	const groupedTools = TOOL_OPTIONS.reduce(
 		(acc, t) => {
@@ -105,6 +112,24 @@
 	function sortKeyDirty(): boolean {
 		return Number(sortOrder) !== r.sortOrder;
 	}
+
+	// ADR-0028: folder assignment is a label-class change — instant-apply, no
+	// session archival, independent of the configuration save button.
+	async function saveFolder(next: string) {
+		const folderId = next === '' ? null : next;
+		if (folderId === r.folderId) return;
+		savingFolder = true;
+		try {
+			await api.setAgentRoleFolder(slug, r.roleId, folderId);
+			onfolderchanged(r.roleId, folderId);
+			toastSuccess('已更新所属文件夹');
+		} catch (err) {
+			folderValue = r.folderId ?? '';
+			toastError(err instanceof Error ? err.message : String(err));
+		} finally {
+			savingFolder = false;
+		}
+	}
 </script>
 
 <div class="saas-card-pad">
@@ -114,6 +139,12 @@
 		{#if r.isDefault}
 			<span class="saas-badge-success">默认</span>
 		{/if}
+		<div class="ml-auto flex items-center gap-2">
+			<span class="text-xs text-surface-600">文件夹</span>
+			<div class="w-44">
+				<SelectField items={folderItems} bind:value={folderValue} disabled={savingFolder} onchange={saveFolder} />
+			</div>
+		</div>
 	</div>
 
 	<div class="grid grid-cols-1 gap-4 md:grid-cols-2">

hub/admin-web/src/lib/components/SkillEditor.svelte

@@ -3,18 +3,24 @@
 	import { api } from '$lib/api';
 	import { fmtDate } from '$lib/format';
 	import Icon from '$lib/components/Icon.svelte';
+	import SelectField from '$lib/components/SelectField.svelte';
 	import { toastError, toastSuccess } from '$lib/toast';
 
 	let {
 		slug,
 		skill,
+		folderItems,
 		oninstalled,
 		ondisabled,
+		onfolderchanged,
 	}: {
 		slug: string;
 		skill: AgentSkillRow;
+		/** ADR-0028 folder choices ('' = 未分类); transparent grouping only */
+		folderItems: { value: string; label: string }[];
 		oninstalled: (result: { id: string; name: string; contentDigest: string }) => void;
 		ondisabled: (name: string) => void;
+		onfolderchanged: (name: string, folderId: string | null) => void;
 	} = $props();
 
 	type FileNode = { path: string; content: string };
@@ -28,6 +34,8 @@
 	let dirty = $state(false);
 	let newFilePath = $state('');
 	let showNewFile = $state(false);
+	let folderValue = $state(skill.folderId ?? '');
+	let savingFolder = $state(false);
 
 	const selectedFile = $derived(files.find((f) => f.path === selectedPath) ?? null);
 	const hasManifest = $derived(files.some((f) => f.path === 'SKILL.md'));
@@ -152,6 +160,24 @@
 		dirty = true;
 	}
 
+	// ADR-0028: folder assignment is a label-class change — instant-apply, no
+	// session archival, independent of the content save button.
+	async function saveFolder(next: string) {
+		const folderId = next === '' ? null : next;
+		if (folderId === skill.folderId) return;
+		savingFolder = true;
+		try {
+			await api.setAgentSkillFolder(slug, skill.name, folderId);
+			onfolderchanged(skill.name, folderId);
+			toastSuccess('已更新所属文件夹');
+		} catch (err) {
+			folderValue = skill.folderId ?? '';
+			toastError(err instanceof Error ? err.message : String(err));
+		} finally {
+			savingFolder = false;
+		}
+	}
+
 	function updateFrontmatter(content: string, key: string, value: string): string {
 		const regex = new RegExp(`^(${key}:\\s*)(.*?)(\\s*)$`, 'm');
 		if (regex.test(content)) {
@@ -178,6 +204,12 @@
 		{#if skill.disabledAt}
 			<span class="saas-badge-error">已禁用</span>
 		{/if}
+		<div class="ml-auto flex items-center gap-2">
+			<span class="text-xs text-surface-600">文件夹</span>
+			<div class="w-44">
+				<SelectField items={folderItems} bind:value={folderValue} disabled={savingFolder} onchange={saveFolder} />
+			</div>
+		</div>
 	</div>
 
 	<div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">

hub/admin-web/src/routes/admin/roles/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import { api, type AgentRoleRow, type AgentModelRow, type AgentSkillRow } from '$lib/api';
+	import { api, type AgentConfigFolderRow, type AgentModelRow, type AgentRoleRow, type AgentSkillRow } from '$lib/api';
 	import { session } from '$lib/session';
 	import { resolveOrg } from '$lib/org';
 	import PageHeader from '$lib/components/PageHeader.svelte';
@@ -8,6 +8,9 @@
 	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 	import EmptyState from '$lib/components/EmptyState.svelte';
 	import RoleCard from '$lib/components/RoleCard.svelte';
+	import AgentConfigFolderNav from '$lib/components/AgentConfigFolderNav.svelte';
+	import Modal from '$lib/components/Modal.svelte';
+	import SelectField from '$lib/components/SelectField.svelte';
 	import { toastError, toastSuccess } from '$lib/toast';
 
 	const org = $derived(resolveOrg($session.me, page.url.search));
@@ -16,20 +19,32 @@
 	let roles = $state<AgentRoleRow[]>([]);
 	let models = $state<AgentModelRow[]>([]);
 	let skills = $state<AgentSkillRow[]>([]);
+	let folders = $state<AgentConfigFolderRow[]>([]);
 	let loading = $state(true);
 	let error = $state<string | null>(null);
 
+	/** 'all' | 'unfiled' | folder id (ADR-0028: transparent grouping filter) */
+	let selectedFolder = $state<string>('all');
+
 	let newRoleId = $state('');
 	let newLabel = $state('');
 	let adding = $state(false);
 
+	let showFolderModal = $state(false);
+	let folderModalMode = $state<'create' | 'rename'>('create');
+	let folderModalId = $state<string | null>(null);
+	let folderName = $state('');
+	let folderParent = $state('');
+	let savingFolder = $state(false);
+
 	async function load() {
 		loading = true;
 		error = null;
 		try {
-			const [r, s] = await Promise.all([api.agentRoles(slug), api.agentSkills(slug)]);
+			const [r, s, f] = await Promise.all([api.agentRoles(slug), api.agentSkills(slug), api.agentConfigFolders(slug)]);
 			roles = r.roles;
 			skills = s.skills;
+			folders = f.folders;
 			// Model fetch hits the provider API and may fail or be slow; load it
 			// independently so roles remain editable even without a model list.
 			models = [];
@@ -43,6 +58,66 @@
 		}
 	}
 
+	const counts = $derived.by(() => {
+		const map: Record<string, number> = {};
+		for (const r of roles) {
+			if (r.folderId) map[r.folderId] = (map[r.folderId] ?? 0) + 1;
+		}
+		return map;
+	});
+	const unfiledCount = $derived(roles.filter((r) => !r.folderId).length);
+	const visibleRoles = $derived(
+		selectedFolder === 'all'
+			? roles
+			: selectedFolder === 'unfiled'
+				? roles.filter((r) => !r.folderId)
+				: roles.filter((r) => r.folderId === selectedFolder),
+	);
+
+	function folderPath(f: AgentConfigFolderRow): string {
+		const parts: string[] = [f.name];
+		let cur: AgentConfigFolderRow | undefined = f;
+		while (cur?.parentId) {
+			const parent = folders.find((x) => x.id === cur!.parentId);
+			if (!parent) break;
+			parts.unshift(parent.name);
+			cur = parent;
+		}
+		return parts.join(' / ');
+	}
+
+	/** Self + descendant ids of a folder — excluded as move targets in the rename modal. */
+	function subtreeIds(folderId: string): Set<string> {
+		const ids = new Set<string>([folderId]);
+		let grew = true;
+		while (grew) {
+			grew = false;
+			for (const f of folders) {
+				if (f.parentId && ids.has(f.parentId) && !ids.has(f.id)) {
+					ids.add(f.id);
+					grew = true;
+				}
+			}
+		}
+		return ids;
+	}
+
+	const folderItems = $derived([
+		{ value: '', label: '（未分类）' },
+		...folders.map((f) => ({ value: f.id, label: folderPath(f) })),
+	]);
+
+	const moveTargetItems = $derived.by(() => {
+		if (folderModalMode !== 'rename' || folderModalId === null) {
+			return [{ value: '', label: '（根）' }, ...folders.map((f) => ({ value: f.id, label: folderPath(f) }))];
+		}
+		const excluded = subtreeIds(folderModalId);
+		return [
+			{ value: '', label: '（根）' },
+			...folders.filter((f) => !excluded.has(f.id)).map((f) => ({ value: f.id, label: folderPath(f) })),
+		];
+	});
+
 	async function add() {
 		const roleId = newRoleId.trim();
 		const label = newLabel.trim();
@@ -57,7 +132,12 @@
 		adding = true;
 		try {
 			const created = await api.upsertAgentRole(slug, roleId, { label });
-			roles = [...roles, created];
+			let folderId: string | null = null;
+			if (selectedFolder !== 'all' && selectedFolder !== 'unfiled') {
+				await api.setAgentRoleFolder(slug, roleId, selectedFolder);
+				folderId = selectedFolder;
+			}
+			roles = [...roles, { ...created, folderId }];
 			newRoleId = '';
 			newLabel = '';
 			toastSuccess('角色已创建');
@@ -79,6 +159,68 @@
 		roles = roles.map((x) => (x.roleId === roleId ? { ...x, skillNames } : x));
 	}
 
+	function onRoleFolderChanged(roleId: string, folderId: string | null) {
+		roles = roles.map((x) => (x.roleId === roleId ? { ...x, folderId } : x));
+	}
+
+	function openCreateFolder(parentId: string | null) {
+		folderModalMode = 'create';
+		folderModalId = null;
+		folderName = '';
+		folderParent = parentId ?? '';
+		showFolderModal = true;
+	}
+
+	function openRenameFolder(folder: AgentConfigFolderRow) {
+		folderModalMode = 'rename';
+		folderModalId = folder.id;
+		folderName = folder.name;
+		folderParent = folder.parentId ?? '';
+		showFolderModal = true;
+	}
+
+	async function submitFolderModal() {
+		const name = folderName.trim();
+		if (name === '') {
+			toastError('文件夹名称不能为空');
+			return;
+		}
+		savingFolder = true;
+		try {
+			if (folderModalMode === 'create') {
+				await api.createAgentConfigFolder(slug, {
+					name,
+					...(folderParent !== '' ? { parentId: folderParent } : {}),
+				});
+				toastSuccess('文件夹已创建');
+			} else if (folderModalId !== null) {
+				await api.patchAgentConfigFolder(slug, folderModalId, {
+					name,
+					parentId: folderParent === '' ? null : folderParent,
+				});
+				toastSuccess('文件夹已更新');
+			}
+			showFolderModal = false;
+			await load();
+		} catch (err) {
+			toastError(err instanceof Error ? err.message : String(err));
+		} finally {
+			savingFolder = false;
+		}
+	}
+
+	async function deleteFolder(folder: AgentConfigFolderRow) {
+		if (!confirm(`删除文件夹「${folder.name}」? 仅空文件夹可删除。`)) return;
+		try {
+			await api.deleteAgentConfigFolder(slug, folder.id);
+			if (selectedFolder === folder.id) selectedFolder = 'all';
+			toastSuccess('文件夹已删除');
+			await load();
+		} catch (err) {
+			toastError(err instanceof Error ? err.message : String(err));
+		}
+	}
+
 	$effect(() => {
 		if (slug) load();
 	});
@@ -86,7 +228,7 @@
 
 <PageHeader
 	title="角色"
-	description="角色是组织级数据：组合默认模型、系统提示词、工具白名单与已绑定技能。角色 ID 即飞书斜杠命令（如 /draft）。"
+	description="角色是组织级数据：组合默认模型、系统提示词、工具白名单与已绑定技能。文件夹仅作管理分组，不影响角色解析与默认角色约束。"
 />
 
 {#if loading}
@@ -94,39 +236,92 @@
 {:else if error}
 	<ErrorBanner message={error} onretry={load} />
 {:else}
-	<div class="saas-card-pad mb-6">
-		<h2 class="saas-section-title mb-4">新建角色</h2>
-		<div class="grid gap-3 sm:grid-cols-[10rem_1fr_auto]">
-			<input
-				class="saas-input font-mono text-sm"
-				placeholder="角色 ID（如 draft）"
-				bind:value={newRoleId}
-				onkeydown={(e) => {
-					if (e.key === 'Enter') add();
-				}}
+	<div class="grid gap-4 lg:grid-cols-[15rem_1fr]">
+		<div class="h-fit lg:sticky lg:top-4">
+			<AgentConfigFolderNav
+				{folders}
+				selected={selectedFolder}
+				{counts}
+				totalCount={roles.length}
+				{unfiledCount}
+				onselect={(id) => (selectedFolder = id)}
+				oncreate={openCreateFolder}
+				onrename={openRenameFolder}
+				ondelete={deleteFolder}
 			/>
-			<input
-				class="saas-input"
-				placeholder="显示名（如 草稿）"
-				bind:value={newLabel}
-				onkeydown={(e) => {
-					if (e.key === 'Enter') add();
-				}}
-			/>
-			<button class="saas-btn-primary" onclick={add} disabled={adding}>新建</button>
 		</div>
-		<p class="mt-2 text-xs text-surface-600">角色 ID 仅允许小写字母、数字、下划线与连字符，且以字母或数字开头。</p>
+
+		<div>
+			<div class="saas-card-pad mb-6">
+				<h2 class="saas-section-title mb-4">新建角色</h2>
+				<div class="grid gap-3 sm:grid-cols-[10rem_1fr_auto]">
+					<input
+						class="saas-input font-mono text-sm"
+						placeholder="角色 ID（如 draft）"
+						bind:value={newRoleId}
+						onkeydown={(e) => {
+							if (e.key === 'Enter') add();
+						}}
+					/>
+					<input
+						class="saas-input"
+						placeholder="显示名（如 草稿）"
+						bind:value={newLabel}
+						onkeydown={(e) => {
+							if (e.key === 'Enter') add();
+						}}
+					/>
+					<button class="saas-btn-primary" onclick={add} disabled={adding}>新建</button>
+				</div>
+				<p class="mt-2 text-xs text-surface-600">角色 ID 仅允许小写字母、数字、下划线与连字符，且以字母或数字开头；当前选中文件夹时新角色会自动归入其中。</p>
+			</div>
+
+			{#if roles.length === 0}
+				<div class="saas-card">
+					<EmptyState title="暂无角色" description="组织必须且只能有一个启用中的默认角色；新建第一个角色将自动成为默认。" />
+				</div>
+			{:else if visibleRoles.length === 0}
+				<div class="saas-card">
+					<EmptyState title="此分类下暂无角色" description="在角色卡片上可将其移入当前文件夹。" />
+				</div>
+			{:else}
+				<div class="space-y-4">
+					{#each visibleRoles as r (r.roleId)}
+						<RoleCard
+							{r}
+							{models}
+							{skills}
+							{slug}
+							{folderItems}
+							onupdated={onRoleUpdated}
+							onskillschanged={onRoleSkillsChanged}
+							onfolderchanged={onRoleFolderChanged}
+						/>
+					{/each}
+				</div>
+			{/if}
+		</div>
 	</div>
 
-	{#if roles.length === 0}
-		<div class="saas-card">
-			<EmptyState title="暂无角色" description="组织必须且只能有一个启用中的默认角色；新建第一个角色将自动成为默认。" />
+	<Modal bind:open={showFolderModal} title={folderModalMode === 'create' ? '新建文件夹' : '重命名 / 移动文件夹'}>
+		<label class="saas-label" for="agent-folder-name">名称</label>
+		<input
+			id="agent-folder-name"
+			class="saas-input mb-4"
+			bind:value={folderName}
+			onkeydown={(e) => {
+				if (e.key === 'Enter') submitFolderModal();
+			}}
+		/>
+		<p class="saas-label">父文件夹</p>
+		<div class="mb-4">
+			<SelectField items={moveTargetItems} bind:value={folderParent} />
 		</div>
-	{:else}
-		<div class="space-y-4">
-			{#each roles as r (r.roleId)}
-				<RoleCard {r} {models} {skills} {slug} onupdated={onRoleUpdated} onskillschanged={onRoleSkillsChanged} />
-			{/each}
+		<div class="flex justify-end gap-2">
+			<button class="saas-btn-ghost" onclick={() => (showFolderModal = false)}>取消</button>
+			<button class="saas-btn-primary" onclick={submitFolderModal} disabled={savingFolder}>
+				{savingFolder ? '保存中…' : '保存'}
+			</button>
 		</div>
-	{/if}
+	</Modal>
 {/if}

hub/admin-web/src/routes/admin/skills/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import { api, type AgentSkillRow, type SkillFileEntry } from '$lib/api';
+	import { api, type AgentConfigFolderRow, type AgentSkillRow, type SkillFileEntry } from '$lib/api';
 	import { session } from '$lib/session';
 	import { resolveOrg } from '$lib/org';
 	import PageHeader from '$lib/components/PageHeader.svelte';
@@ -8,27 +8,42 @@
 	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 	import EmptyState from '$lib/components/EmptyState.svelte';
 	import SkillEditor from '$lib/components/SkillEditor.svelte';
+	import AgentConfigFolderNav from '$lib/components/AgentConfigFolderNav.svelte';
+	import Modal from '$lib/components/Modal.svelte';
+	import SelectField from '$lib/components/SelectField.svelte';
 	import { toastError, toastSuccess } from '$lib/toast';
 
 	const org = $derived(resolveOrg($session.me, page.url.search));
 	const slug = $derived(org?.slug ?? '');
 
 	let skills = $state<AgentSkillRow[]>([]);
+	let folders = $state<AgentConfigFolderRow[]>([]);
 	let loading = $state(true);
 	let error = $state<string | null>(null);
 
+	/** 'all' | 'unfiled' | folder id (ADR-0028: transparent grouping filter) */
+	let selectedFolder = $state<string>('all');
+
 	let showNewSkill = $state(false);
 	let newSkillName = $state('');
 	let newSkillVersion = $state('0.1.0');
 	let newSkillDescription = $state('');
 	let creating = $state(false);
 
+	let showFolderModal = $state(false);
+	let folderModalMode = $state<'create' | 'rename'>('create');
+	let folderModalId = $state<string | null>(null);
+	let folderName = $state('');
+	let folderParent = $state('');
+	let savingFolder = $state(false);
+
 	async function load() {
 		loading = true;
 		error = null;
 		try {
-			const res = await api.agentSkills(slug);
-			skills = res.skills;
+			const [s, f] = await Promise.all([api.agentSkills(slug), api.agentConfigFolders(slug)]);
+			skills = s.skills;
+			folders = f.folders;
 		} catch (err) {
 			error = err instanceof Error ? err.message : String(err);
 		} finally {
@@ -36,6 +51,66 @@
 		}
 	}
 
+	const counts = $derived.by(() => {
+		const map: Record<string, number> = {};
+		for (const s of skills) {
+			if (s.folderId) map[s.folderId] = (map[s.folderId] ?? 0) + 1;
+		}
+		return map;
+	});
+	const unfiledCount = $derived(skills.filter((s) => !s.folderId).length);
+	const visibleSkills = $derived(
+		selectedFolder === 'all'
+			? skills
+			: selectedFolder === 'unfiled'
+				? skills.filter((s) => !s.folderId)
+				: skills.filter((s) => s.folderId === selectedFolder),
+	);
+
+	function folderPath(f: AgentConfigFolderRow): string {
+		const parts: string[] = [f.name];
+		let cur: AgentConfigFolderRow | undefined = f;
+		while (cur?.parentId) {
+			const parent = folders.find((x) => x.id === cur!.parentId);
+			if (!parent) break;
+			parts.unshift(parent.name);
+			cur = parent;
+		}
+		return parts.join(' / ');
+	}
+
+	/** Self + descendant ids of a folder — excluded as move targets in the rename modal. */
+	function subtreeIds(folderId: string): Set<string> {
+		const ids = new Set<string>([folderId]);
+		let grew = true;
+		while (grew) {
+			grew = false;
+			for (const f of folders) {
+				if (f.parentId && ids.has(f.parentId) && !ids.has(f.id)) {
+					ids.add(f.id);
+					grew = true;
+				}
+			}
+		}
+		return ids;
+	}
+
+	const folderItems = $derived([
+		{ value: '', label: '（未分类）' },
+		...folders.map((f) => ({ value: f.id, label: folderPath(f) })),
+	]);
+
+	const moveTargetItems = $derived.by(() => {
+		if (folderModalMode !== 'rename' || folderModalId === null) {
+			return [{ value: '', label: '（根）' }, ...folders.map((f) => ({ value: f.id, label: folderPath(f) }))];
+		}
+		const excluded = subtreeIds(folderModalId);
+		return [
+			{ value: '', label: '（根）' },
+			...folders.filter((f) => !excluded.has(f.id)).map((f) => ({ value: f.id, label: folderPath(f) })),
+		];
+	});
+
 	async function createSkill() {
 		const name = newSkillName.trim();
 		if (name === '') {
@@ -56,6 +131,9 @@
 			const manifest = buildManifest(name, newSkillDescription.trim());
 			const files: SkillFileEntry[] = [{ path: 'SKILL.md', content: manifest }];
 			const result = await api.installAgentSkill(slug, name, { version, files });
+			if (selectedFolder !== 'all' && selectedFolder !== 'unfiled') {
+				await api.setAgentSkillFolder(slug, result.name, selectedFolder);
+			}
 			toastSuccess(`技能 ${result.name} 已创建`);
 			newSkillName = '';
 			newSkillDescription = '';
@@ -81,6 +159,68 @@
 		load();
 	}
 
+	function onSkillFolderChanged(name: string, folderId: string | null) {
+		skills = skills.map((s) => (s.name === name ? { ...s, folderId } : s));
+	}
+
+	function openCreateFolder(parentId: string | null) {
+		folderModalMode = 'create';
+		folderModalId = null;
+		folderName = '';
+		folderParent = parentId ?? '';
+		showFolderModal = true;
+	}
+
+	function openRenameFolder(folder: AgentConfigFolderRow) {
+		folderModalMode = 'rename';
+		folderModalId = folder.id;
+		folderName = folder.name;
+		folderParent = folder.parentId ?? '';
+		showFolderModal = true;
+	}
+
+	async function submitFolderModal() {
+		const name = folderName.trim();
+		if (name === '') {
+			toastError('文件夹名称不能为空');
+			return;
+		}
+		savingFolder = true;
+		try {
+			if (folderModalMode === 'create') {
+				await api.createAgentConfigFolder(slug, {
+					name,
+					...(folderParent !== '' ? { parentId: folderParent } : {}),
+				});
+				toastSuccess('文件夹已创建');
+			} else if (folderModalId !== null) {
+				await api.patchAgentConfigFolder(slug, folderModalId, {
+					name,
+					parentId: folderParent === '' ? null : folderParent,
+				});
+				toastSuccess('文件夹已更新');
+			}
+			showFolderModal = false;
+			await load();
+		} catch (err) {
+			toastError(err instanceof Error ? err.message : String(err));
+		} finally {
+			savingFolder = false;
+		}
+	}
+
+	async function deleteFolder(folder: AgentConfigFolderRow) {
+		if (!confirm(`删除文件夹「${folder.name}」? 仅空文件夹可删除。`)) return;
+		try {
+			await api.deleteAgentConfigFolder(slug, folder.id);
+			if (selectedFolder === folder.id) selectedFolder = 'all';
+			toastSuccess('文件夹已删除');
+			await load();
+		} catch (err) {
+			toastError(err instanceof Error ? err.message : String(err));
+		}
+	}
+
 	$effect(() => {
 		if (slug) load();
 	});
@@ -88,7 +228,7 @@
 
 <PageHeader
 	title="技能"
-	description="技能是组织级 Agent 能力包：一个包含 SKILL.md manifest 的目录。技能内容按 SHA-256 content-addressed 存储，变更后绑定角色的活跃会话自动归档。"
+	description="技能是组织级 Agent 能力包：一个包含 SKILL.md manifest 的目录。文件夹仅作管理分组，不影响技能解析与绑定。"
 />
 
 {#if loading}
@@ -96,49 +236,100 @@
 {:else if error}
 	<ErrorBanner message={error} onretry={load} />
 {:else}
-	<div class="saas-card-pad mb-6">
-		<div class="flex items-center justify-between">
-			<h2 class="saas-section-title">新建技能</h2>
-			<button class="text-sm text-primary-700 hover:text-primary-900" onclick={() => (showNewSkill = !showNewSkill)}>
-				{showNewSkill ? '取消' : '+ 新建'}
-			</button>
+	<div class="grid gap-4 lg:grid-cols-[15rem_1fr]">
+		<div class="h-fit lg:sticky lg:top-4">
+			<AgentConfigFolderNav
+				{folders}
+				selected={selectedFolder}
+				{counts}
+				totalCount={skills.length}
+				{unfiledCount}
+				onselect={(id) => (selectedFolder = id)}
+				oncreate={openCreateFolder}
+				onrename={openRenameFolder}
+				ondelete={deleteFolder}
+			/>
 		</div>
-		{#if showNewSkill}
-			<div class="mt-4 grid gap-3 sm:grid-cols-[12rem_8rem_1fr_auto]">
-				<input
-					class="saas-input font-mono text-sm"
-					placeholder="技能名（如 typst-help）"
-					bind:value={newSkillName}
-				/>
-				<input
-					class="saas-input text-sm"
-					placeholder="版本号"
-					bind:value={newSkillVersion}
-				/>
-				<input
-					class="saas-input text-sm"
-					placeholder="描述"
-					bind:value={newSkillDescription}
-				/>
-				<button class="saas-btn-primary" onclick={createSkill} disabled={creating}>
-					{creating ? '创建中…' : '创建'}
-				</button>
+
+		<div>
+			<div class="saas-card-pad mb-6">
+				<div class="flex items-center justify-between">
+					<h2 class="saas-section-title">新建技能</h2>
+					<button class="text-sm text-primary-700 hover:text-primary-900" onclick={() => (showNewSkill = !showNewSkill)}>
+						{showNewSkill ? '取消' : '+ 新建'}
+					</button>
+				</div>
+				{#if showNewSkill}
+					<div class="mt-4 grid gap-3 sm:grid-cols-[12rem_8rem_1fr_auto]">
+						<input
+							class="saas-input font-mono text-sm"
+							placeholder="技能名（如 typst-help）"
+							bind:value={newSkillName}
+						/>
+						<input
+							class="saas-input text-sm"
+							placeholder="版本号"
+							bind:value={newSkillVersion}
+						/>
+						<input
+							class="saas-input text-sm"
+							placeholder="描述"
+							bind:value={newSkillDescription}
+						/>
+						<button class="saas-btn-primary" onclick={createSkill} disabled={creating}>
+							{creating ? '创建中…' : '创建'}
+						</button>
+					</div>
+					<p class="mt-2 text-xs text-surface-600">
+						技能名称仅允许小写字母、数字和连字符，且以字母或数字开头。创建后会生成 SKILL.md 模板；当前选中文件夹时新技能会自动归入其中。
+					</p>
+				{/if}
 			</div>
-			<p class="mt-2 text-xs text-surface-600">
-				技能名称仅允许小写字母、数字和连字符，且以字母或数字开头。创建后会生成 SKILL.md 模板。
-			</p>
-		{/if}
+
+			{#if skills.length === 0}
+				<div class="saas-card">
+					<EmptyState title="暂无技能" description="新建一个技能，然后在角色管理中绑定到角色。" />
+				</div>
+			{:else if visibleSkills.length === 0}
+				<div class="saas-card">
+					<EmptyState title="此分类下暂无技能" description="在技能卡片上可将其移入当前文件夹。" />
+				</div>
+			{:else}
+				<div class="space-y-4">
+					{#each visibleSkills as skill (skill.id)}
+						<SkillEditor
+							{slug}
+							{skill}
+							{folderItems}
+							oninstalled={onInstalled}
+							ondisabled={onDisabled}
+							onfolderchanged={onSkillFolderChanged}
+						/>
+					{/each}
+				</div>
+			{/if}
+		</div>
 	</div>
 
-	{#if skills.length === 0}
-		<div class="saas-card">
-			<EmptyState title="暂无技能" description="新建一个技能，然后在角色管理中绑定到角色。" />
+	<Modal bind:open={showFolderModal} title={folderModalMode === 'create' ? '新建文件夹' : '重命名 / 移动文件夹'}>
+		<label class="saas-label" for="agent-folder-name">名称</label>
+		<input
+			id="agent-folder-name"
+			class="saas-input mb-4"
+			bind:value={folderName}
+			onkeydown={(e) => {
+				if (e.key === 'Enter') submitFolderModal();
+			}}
+		/>
+		<p class="saas-label">父文件夹</p>
+		<div class="mb-4">
+			<SelectField items={moveTargetItems} bind:value={folderParent} />
 		</div>
-	{:else}
-		<div class="space-y-4">
-			{#each skills as skill (skill.id)}
-				<SkillEditor {slug} {skill} oninstalled={onInstalled} ondisabled={onDisabled} />
-			{/each}
+		<div class="flex justify-end gap-2">
+			<button class="saas-btn-ghost" onclick={() => (showFolderModal = false)}>取消</button>
+			<button class="saas-btn-primary" onclick={submitFolderModal} disabled={savingFolder}>
+				{savingFolder ? '保存中…' : '保存'}
+			</button>
 		</div>
-	{/if}
+	</Modal>
 {/if}