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

<script lang="ts">
	import { Checkbox, Label } from 'bits-ui';
	import type { AgentConfigFolderRow, AgentRoleRow, AgentModelRow, AgentSkillRow } from '$lib/api';
	import { api } from '$lib/api';
	import { fmtDate } from '$lib/format';
	import { TOOL_OPTIONS } from '$lib/constants';
	import SelectField from '$lib/components/SelectField.svelte';
	import SearchableSelectField from '$lib/components/SearchableSelectField.svelte';
	import CheckboxControl from '$lib/components/CheckboxControl.svelte';
	import Icon from '$lib/components/Icon.svelte';
	import { toastError, toastSuccess } from '$lib/toast';

	let {
		r,
		models,
		skills,
		slug,
		folders,
		folderItems,
		onupdated,
		onskillschanged,
		onfolderchanged,
	}: {
		r: AgentRoleRow;
		models: AgentModelRow[];
		skills: AgentSkillRow[];
		slug: string;
		/** ADR-0028 shared management tree — skill picker groups only; not binding identity */
		folders: AgentConfigFolderRow[];
		/** 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 = {
		label: r.label,
		defaultModel: r.defaultModel ?? '',
		systemPrompt: r.systemPrompt ?? '',
		unrestricted: r.tools === null,
		tools: r.tools ?? [],
		sortOrder: String(r.sortOrder),
		isDefault: r.isDefault,
		skillNames: r.skillNames,
	};
	let label = $state(initial.label);
	let defaultModel = $state(initial.defaultModel);
	let systemPrompt = $state(initial.systemPrompt);
	let unrestricted = $state(initial.unrestricted);
	let selectedTools = $state<string[]>([...initial.tools]);
	let sortOrder = $state(initial.sortOrder);
	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) => {
			(acc[t.group] ??= []).push(t);
			return acc;
		},
		{} as Record<string, typeof TOOL_OPTIONS>,
	);

	const modelItems = $derived.by(() => {
		const fromCatalog = models.map((m) => ({ value: m.id, label: `${m.label}（${m.id}）` }));
		const items = [{ value: '', label: '（使用平台默认模型）' }, ...fromCatalog];
		// Keep a previously saved model selectable even if it left the live catalog.
		if (defaultModel !== '' && !items.some((item) => item.value === defaultModel)) {
			items.push({ value: defaultModel, label: `${defaultModel}（当前已存，不在目录中）` });
		}
		return items;
	});

	function folderPathLabel(folderId: string): string {
		const folder = folders.find((f) => f.id === folderId);
		if (!folder) return '（未知文件夹）';
		const parts: string[] = [folder.name];
		let cur: AgentConfigFolderRow | undefined = folder;
		while (cur?.parentId) {
			const parent = folders.find((x) => x.id === cur!.parentId);
			if (!parent) break;
			parts.unshift(parent.name);
			cur = parent;
		}
		return parts.join(' / ');
	}

	/** Group picker by management folder; bindings remain skill name (ADR-0028). */
	const skillGroups = $derived.by(() => {
		type Group = { key: string; label: string; skills: AgentSkillRow[] };
		const byFolder = new Map<string | null, AgentSkillRow[]>();
		for (const s of skills) {
			const key = s.folderId;
			const list = byFolder.get(key) ?? [];
			list.push(s);
			byFolder.set(key, list);
		}
		for (const list of byFolder.values()) {
			list.sort((a, b) => a.name.localeCompare(b.name));
		}
		const filed = [...byFolder.entries()]
			.filter((e): e is [string, AgentSkillRow[]] => e[0] !== null)
			.map(([id, list]) => ({ key: id, label: folderPathLabel(id), skills: list }))
			.sort((a, b) => a.label.localeCompare(b.label));
		const unfiled = byFolder.get(null);
		const groups: Group[] = [...filed];
		if (unfiled && unfiled.length > 0) {
			groups.push({ key: 'unfiled', label: '未分类', skills: unfiled });
		}
		return groups;
	});

	function groupSelectedCount(groupSkills: AgentSkillRow[]): number {
		return groupSkills.filter((s) => selectedSkills.includes(s.name)).length;
	}

	function toggleGroup(groupSkills: AgentSkillRow[], checked: boolean) {
		const names = new Set(groupSkills.map((s) => s.name));
		if (checked) {
			const next = new Set(selectedSkills);
			for (const n of names) next.add(n);
			selectedSkills = [...next];
		} else {
			selectedSkills = selectedSkills.filter((n) => !names.has(n));
		}
	}

	function skillsDirty(): boolean {
		const a = [...selectedSkills].sort();
		const b = [...r.skillNames].sort();
		return a.length !== b.length || a.some((v, i) => v !== b[i]);
	}

	async function save() {
		const trimmedLabel = label.trim();
		if (trimmedLabel === '') {
			toastError('显示名不能为空');
			return;
		}
		const order = Number(sortOrder);
		if (sortKeyDirty() && (!Number.isSafeInteger(order) || order < 0)) {
			toastError('排序必须为非负整数');
			return;
		}
		saving = true;
		const tools = unrestricted ? null : selectedTools;
		try {
			const updated = await api.upsertAgentRole(slug, r.roleId, {
				label: trimmedLabel,
				defaultModel: defaultModel === '' ? null : defaultModel,
				systemPrompt: systemPrompt === '' ? null : systemPrompt,
				tools,
				...(sortKeyDirty() ? { sortOrder: order } : {}),
				isDefault,
			});
			onupdated(updated);
			if (skillsDirty()) {
				const res = await api.setAgentRoleSkills(slug, r.roleId, selectedSkills);
				selectedSkills = [...res.skillNames];
				onskillschanged(r.roleId, res.skillNames);
			}
			toastSuccess('角色已保存');
		} catch (err) {
			toastError(err instanceof Error ? err.message : String(err));
		} finally {
			saving = false;
		}
	}

	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">
	<div class="mb-4 flex flex-wrap items-center gap-2">
		<span class="saas-badge-primary font-mono">/{r.roleId}</span>
		<span class="text-sm text-surface-700">{label || r.label}</span>
		{#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">
		<div>
			<Label.Root for="role-label-{r.id}" class="saas-label">显示名</Label.Root>
			<input id="role-label-{r.id}" class="saas-input" bind:value={label} />
		</div>
		<div>
			<Label.Root for="role-sort-{r.id}" class="saas-label">排序</Label.Root>
			<input id="role-sort-{r.id}" class="saas-input" type="number" min="0" bind:value={sortOrder} />
		</div>
	</div>

	<div class="mt-4">
		<p class="saas-label">默认模型</p>
		<SearchableSelectField
			items={modelItems}
			bind:value={defaultModel}
			placeholder="选择模型…"
			searchPlaceholder="搜索模型名称或 ID"
			emptyText="无匹配模型"
		/>
	</div>

	<div class="mt-4">
		<span class="saas-label">工具白名单</span>
		<label class="mb-3 flex cursor-pointer items-center gap-2 border border-surface-300 bg-surface-100 px-3 py-2">
			<CheckboxControl bind:checked={unrestricted} />
			<span class="text-sm">不限（使用全部注册工具）</span>
		</label>
		<div class="space-y-3 {unrestricted ? 'pointer-events-none opacity-40' : ''}">
			<Checkbox.Group bind:value={selectedTools} disabled={unrestricted}>
				{#each Object.entries(groupedTools) as [group, tools]}
					<div>
						<p class="mb-1.5 text-xs font-semibold uppercase tracking-wide text-surface-600">{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 px-2 py-1.5 text-sm hover:bg-surface-100">
									<Checkbox.Root class="saas-checkbox" value={t.id} id={`tool-${r.id}-${t.id}`}>
										{#snippet children({ checked })}
											{#if checked}
												<Icon name="check" class="h-3.5 w-3.5" />
											{/if}
										{/snippet}
									</Checkbox.Root>
									<span>{t.label}</span>
								</label>
							{/each}
						</div>
					</div>
				{/each}
			</Checkbox.Group>
		</div>
	</div>

	<div class="mt-4">
		<span class="saas-label">技能绑定</span>
		{#if skills.length === 0}
			<p class="text-sm text-surface-600">组织内暂无已安装技能。请在技能页上传 zip 或新建空白模板（ADR-0018）。</p>
		{:else}
			<div class="space-y-3">
				{#each skillGroups as group (group.key)}
					<div class="border border-surface-300">
						<label class="flex cursor-pointer items-center gap-2 border-b border-surface-200 bg-surface-100 px-2 py-1.5 text-sm">
							<CheckboxControl
								checked={groupSelectedCount(group.skills) === group.skills.length}
								onchange={(checked) => toggleGroup(group.skills, checked)}
							/>
							<span class="text-xs font-semibold text-surface-700">{group.label}</span>
							<span class="text-[10px] text-surface-500">
								{groupSelectedCount(group.skills)}/{group.skills.length}
							</span>
						</label>
						<div class="grid grid-cols-1 gap-0.5 p-1 sm:grid-cols-2">
							{#each group.skills as s (s.name)}
								<label class="flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-surface-100">
									<CheckboxControl
										checked={selectedSkills.includes(s.name)}
										onchange={(checked) => {
											selectedSkills = checked
												? [...selectedSkills, s.name]
												: selectedSkills.filter((x) => x !== s.name);
										}}
									/>
									<span class="font-mono text-xs">{s.name}</span>
									{#if s.version}
										<span class="text-[10px] text-surface-500">v{s.version}</span>
									{/if}
								</label>
							{/each}
						</div>
					</div>
				{/each}
			</div>
		{/if}
	</div>

	<div class="mt-4">
		<Label.Root for="role-prompt-{r.id}" class="saas-label">系统提示词</Label.Root>
		<textarea
			id="role-prompt-{r.id}"
			class="saas-textarea"
			rows="4"
			placeholder="系统提示词（可选）。会话开始时注入，定义智能体人格/指令。"
			bind:value={systemPrompt}></textarea>
	</div>

	<div class="mt-4 flex flex-wrap items-center gap-3 border-t border-surface-100 pt-4">
		<label class="flex cursor-pointer items-center gap-2">
			<CheckboxControl bind:checked={isDefault} />
			<span class="text-sm">设为组织默认角色</span>
		</label>
		<span class="text-xs text-surface-600">更新于 {fmtDate(r.updatedAt)}</span>
		<div class="flex-1"></div>
		<button class="saas-btn-primary" onclick={save} disabled={saving}>
			{saving ? '保存中…' : '保存'}
		</button>
	</div>
</div>