feat(frontend): implement bulk tag editing for multi-file selection

- Add BulkTagEditor component: loads common/partial tags via
  POST /files/bulk/common-tags and applies changes via POST /files/bulk/tags
- Common tags shown solid with × to remove from all files
- Partial tags shown with dashed border and ~ indicator; clicking promotes
  to common (adds to files that are missing it)
- Wire "Edit tags" button in SelectionBar to a bottom sheet with the editor
- Add mock handlers for /files/bulk/common-tags and /files/bulk/tags

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

frontend/src/lib/components/file/BulkTagEditor.svelte

@@ -0,0 +1,350 @@
+<script lang="ts">
+	import { api } from '$lib/api/client';
+	import type { Tag, TagOffsetPage } from '$lib/api/types';
+
+	interface Props {
+		fileIds: string[];
+		onDone: () => void;
+	}
+
+	let { fileIds, onDone }: Props = $props();
+
+	// Tags present on ALL selected files
+	let commonIds = $state(new Set<string>());
+	// Tags present on SOME but not all selected files
+	let partialIds = $state(new Set<string>());
+	// All available tags from /tags
+	let allTags = $state<Tag[]>([]);
+
+	let search = $state('');
+	let busy = $state(false);
+	let loading = $state(true);
+	let error = $state('');
+
+	$effect(() => {
+		load();
+	});
+
+	async function load() {
+		loading = true;
+		error = '';
+		try {
+			const [tagsRes, commonRes] = await Promise.all([
+				api.get<TagOffsetPage>('/tags?limit=200&sort=name&order=asc'),
+				api.post<{ common_tag_ids: string[]; partial_tag_ids: string[] }>(
+					'/files/bulk/common-tags',
+					{ file_ids: fileIds },
+				),
+			]);
+			allTags = tagsRes.items ?? [];
+			commonIds = new Set(commonRes.common_tag_ids ?? []);
+			partialIds = new Set(commonRes.partial_tag_ids ?? []);
+		} catch {
+			error = 'Failed to load tags';
+		} finally {
+			loading = false;
+		}
+	}
+
+	// Assigned = common + partial (shown in assigned section)
+	let assignedIds = $derived(new Set([...commonIds, ...partialIds]));
+
+	let assignedTags = $derived(
+		allTags.filter(
+			(t) =>
+				assignedIds.has(t.id ?? '') &&
+				(!search.trim() || t.name?.toLowerCase().includes(search.toLowerCase())),
+		),
+	);
+
+	let availableTags = $derived(
+		allTags.filter(
+			(t) =>
+				!assignedIds.has(t.id ?? '') &&
+				(!search.trim() || t.name?.toLowerCase().includes(search.toLowerCase())),
+		),
+	);
+
+	function tagStyle(tag: Tag) {
+		const color = tag.color ?? tag.category_color;
+		return color ? `background-color: #${color}` : '';
+	}
+
+	async function add(tagId: string) {
+		if (busy) return;
+		busy = true;
+		try {
+			await api.post('/files/bulk/tags', { file_ids: fileIds, action: 'add', tag_ids: [tagId] });
+			commonIds = new Set([...commonIds, tagId]);
+			partialIds.delete(tagId);
+			partialIds = new Set(partialIds);
+		} finally {
+			busy = false;
+		}
+	}
+
+	// Clicking a partial tag promotes it to common (adds to all files that don't have it)
+	async function promotePartial(tagId: string) {
+		if (busy) return;
+		busy = true;
+		try {
+			await api.post('/files/bulk/tags', { file_ids: fileIds, action: 'add', tag_ids: [tagId] });
+			commonIds = new Set([...commonIds, tagId]);
+			partialIds.delete(tagId);
+			partialIds = new Set(partialIds);
+		} finally {
+			busy = false;
+		}
+	}
+
+	async function remove(tagId: string) {
+		if (busy) return;
+		busy = true;
+		try {
+			await api.post('/files/bulk/tags', { file_ids: fileIds, action: 'remove', tag_ids: [tagId] });
+			commonIds.delete(tagId);
+			partialIds.delete(tagId);
+			commonIds = new Set(commonIds);
+			partialIds = new Set(partialIds);
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+<div class="editor" class:busy>
+	{#if loading}
+		<p class="status">Loading…</p>
+	{:else if error}
+		<p class="status err">{error}</p>
+	{:else}
+		<!-- Assigned tags -->
+		{#if assignedTags.length > 0}
+			<div class="section-label">
+				Assigned
+				<span class="hint">— partial tags shown with dashed border, click to apply to all</span>
+			</div>
+			<div class="tag-row">
+				{#each assignedTags as tag (tag.id)}
+					{@const isPartial = partialIds.has(tag.id ?? '')}
+					<div class="tag-wrap">
+						<button
+							class="tag assigned"
+							class:partial={isPartial}
+							style={tagStyle(tag)}
+							onclick={() => isPartial ? promotePartial(tag.id!) : remove(tag.id!)}
+							title={isPartial ? 'Partial — click to add to all files' : 'Click to remove from all files'}
+						>
+							{tag.name}
+							{#if isPartial}
+								<span class="partial-icon" aria-label="partial">~</span>
+							{:else}
+								<span class="remove" aria-label="remove">×</span>
+							{/if}
+						</button>
+					</div>
+				{/each}
+			</div>
+		{/if}
+
+		<!-- Search -->
+		<div class="search-wrap">
+			<input
+				class="search"
+				type="search"
+				placeholder="Search tags…"
+				bind:value={search}
+				autocomplete="off"
+			/>
+			{#if search}
+				<button class="search-clear" onclick={() => (search = '')} aria-label="Clear search">
+					<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+						<path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+					</svg>
+				</button>
+			{/if}
+		</div>
+
+		<!-- Available tags -->
+		{#if availableTags.length > 0}
+			<div class="section-label">Add tag</div>
+			<div class="tag-row available-row">
+				{#each availableTags as tag (tag.id)}
+					<button
+						class="tag available"
+						style={tagStyle(tag)}
+						onclick={() => add(tag.id!)}
+						title="Add to all selected files"
+					>
+						{tag.name}
+					</button>
+				{/each}
+			</div>
+		{:else if search.trim() && availableTags.length === 0 && assignedTags.length === 0}
+			<p class="empty">No matching tags</p>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.editor {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.editor.busy {
+		opacity: 0.6;
+		pointer-events: none;
+	}
+
+	.status {
+		font-size: 0.85rem;
+		color: var(--color-text-muted);
+		margin: 0;
+		padding: 8px 0;
+	}
+
+	.status.err {
+		color: var(--color-danger);
+	}
+
+	.section-label {
+		font-size: 0.75rem;
+		color: var(--color-text-muted);
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	.hint {
+		font-weight: 400;
+		text-transform: none;
+		letter-spacing: 0;
+		font-size: 0.72rem;
+	}
+
+	.tag-row {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 5px;
+	}
+
+	.available-row {
+		max-height: 140px;
+		overflow-y: auto;
+	}
+
+	.tag-wrap {
+		display: contents;
+	}
+
+	.tag {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		height: 26px;
+		padding: 0 9px;
+		border-radius: 5px;
+		font-size: 0.8rem;
+		font-family: inherit;
+		cursor: pointer;
+		border: 2px solid transparent;
+		background-color: var(--color-tag-default);
+		color: rgba(255, 255, 255, 0.9);
+		user-select: none;
+	}
+
+	/* Common tag — solid, slightly faded ×, full opacity */
+	.tag.assigned {
+		opacity: 0.95;
+	}
+
+	.tag.assigned:hover {
+		filter: brightness(1.15);
+	}
+
+	/* Partial tag — dashed border, reduced opacity */
+	.tag.assigned.partial {
+		opacity: 0.65;
+		border-style: dashed;
+		border-color: rgba(255, 255, 255, 0.55);
+	}
+
+	.tag.assigned.partial:hover {
+		opacity: 1;
+		filter: brightness(1.1);
+	}
+
+	.remove {
+		font-size: 1rem;
+		line-height: 1;
+		opacity: 0.7;
+	}
+
+	.partial-icon {
+		font-size: 0.9rem;
+		line-height: 1;
+		opacity: 0.85;
+	}
+
+	.tag.available {
+		opacity: 0.7;
+	}
+
+	.tag.available:hover {
+		opacity: 1;
+		filter: brightness(1.1);
+	}
+
+	.search-wrap {
+		position: relative;
+		display: flex;
+		align-items: center;
+	}
+
+	.search {
+		width: 100%;
+		box-sizing: border-box;
+		height: 32px;
+		padding: 0 10px;
+		border-radius: 6px;
+		border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
+		background-color: var(--color-bg-primary);
+		color: var(--color-text-primary);
+		font-size: 0.85rem;
+		font-family: inherit;
+		outline: none;
+	}
+
+	.search:focus {
+		border-color: var(--color-accent);
+	}
+
+	.search-clear {
+		position: absolute;
+		right: 6px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		border: none;
+		background: none;
+		color: var(--color-text-muted);
+		cursor: pointer;
+		padding: 0;
+	}
+
+	.search-clear:hover {
+		color: var(--color-text-primary);
+		background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
+	}
+
+	.empty {
+		font-size: 0.8rem;
+		color: var(--color-text-muted);
+		margin: 0;
+	}
+</style>

frontend/src/routes/files/+page.svelte

@@ -12,12 +12,16 @@
 	import { fileSorting, type FileSortField } from '$lib/stores/sorting';
 	import { selectionStore, selectionActive } from '$lib/stores/selection';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import BulkTagEditor from '$lib/components/file/BulkTagEditor.svelte';
 	import { parseDslFilter } from '$lib/utils/dsl';
 	import type { File, FileCursorPage, Pool, PoolOffsetPage } from '$lib/api/types';
 
 	let uploader = $state<{ open: () => void } | undefined>();
 	let confirmDeleteFiles = $state(false);
 
+	// ---- Bulk tag editor ----
+	let tagEditorOpen = $state(false);
+
 	// ---- Add to pool picker ----
 	let poolPickerOpen = $state(false);
 	let pools = $state<Pool[]>([]);
@@ -268,12 +272,30 @@
 
 {#if $selectionActive}
 	<SelectionBar
-		onEditTags={() => {/* TODO */}}
+		onEditTags={() => (tagEditorOpen = true)}
 		onAddToPool={openPoolPicker}
 		onDelete={() => (confirmDeleteFiles = true)}
 	/>
 {/if}
 
+{#if tagEditorOpen}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<div class="picker-backdrop" role="presentation" onclick={() => (tagEditorOpen = false)}></div>
+	<div class="picker-sheet tag-sheet" role="dialog" aria-label="Edit tags">
+		<div class="picker-header">
+			<span class="picker-title">Edit tags — {$selectionStore.ids.size} file{$selectionStore.ids.size !== 1 ? 's' : ''}</span>
+			<button class="picker-close" onclick={() => (tagEditorOpen = false)} aria-label="Close">
+				<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+					<path d="M3 3l10 10M13 3L3 13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+				</svg>
+			</button>
+		</div>
+		<div class="tag-sheet-body">
+			<BulkTagEditor fileIds={[...$selectionStore.ids]} onDone={() => (tagEditorOpen = false)} />
+		</div>
+	</div>
+{/if}
+
 {#if poolPickerOpen}
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<div class="picker-backdrop" role="presentation" onclick={() => (poolPickerOpen = false)}></div>
@@ -378,6 +400,17 @@
 		font-size: 0.95rem;
 	}
 
+	/* ---- Tag editor sheet ---- */
+	.tag-sheet {
+		max-height: 80dvh;
+	}
+
+	.tag-sheet-body {
+		padding: 0 14px 16px;
+		overflow-y: auto;
+		flex: 1;
+	}
+
 	/* ---- Pool picker ---- */
 	.picker-backdrop {
 		position: fixed;

frontend/vite-mock-plugin.ts

@@ -366,6 +366,40 @@ export function mockApiPlugin(): Plugin {
 					return json(res, 200, getMockFile(id));
 				}
 
+				// POST /files/bulk/common-tags
+				if (method === 'POST' && path === '/files/bulk/common-tags') {
+					const body = (await readBody(req)) as { file_ids?: string[] };
+					const ids = body.file_ids ?? [];
+					if (ids.length === 0) return json(res, 200, { common_tag_ids: [], partial_tag_ids: [] });
+					const sets = ids.map((fid) => fileTags.get(fid) ?? new Set<string>());
+					const allTagIds = new Set<string>();
+					sets.forEach((s) => s.forEach((t) => allTagIds.add(t)));
+					const common: string[] = [];
+					const partial: string[] = [];
+					allTagIds.forEach((tid) => {
+						if (sets.every((s) => s.has(tid))) common.push(tid);
+						else partial.push(tid);
+					});
+					return json(res, 200, { common_tag_ids: common, partial_tag_ids: partial });
+				}
+
+				// POST /files/bulk/tags
+				if (method === 'POST' && path === '/files/bulk/tags') {
+					const body = (await readBody(req)) as { file_ids?: string[]; action?: string; tag_ids?: string[] };
+					const fileIds = body.file_ids ?? [];
+					const tagIds = body.tag_ids ?? [];
+					const action = body.action ?? 'add';
+					for (const fid of fileIds) {
+						if (!fileTags.has(fid)) fileTags.set(fid, new Set());
+						const set = fileTags.get(fid)!;
+						for (const tid of tagIds) {
+							if (action === 'add') set.add(tid);
+							else set.delete(tid);
+						}
+					}
+					return json(res, 200, { applied_tag_ids: action === 'add' ? tagIds : [] });
+				}
+
 				// POST /files/bulk/delete  — soft delete (just remove from mock array)
 				if (method === 'POST' && path === '/files/bulk/delete') {
 					const body = (await readBody(req)) as { file_ids?: string[] };