From 66cda80620baf65d8b0a1b261504756c7124f956 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Tue, 14 Apr 2026 19:42:40 +0200
Subject: [PATCH] feat(settings): inline BYOK key manager under AI tier card

Moves the BYOK key CRUD from the standalone /settings/ai-keys subpage
directly under the new BYOK tier card in the main AI settings section.
Users now manage keys in-context where they toggle the tier.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ...yption-phases-1-9-period-dreams-events.md} |   0
 .../lib/components/settings/AiSettings.svelte |  25 +-
 .../settings/ByokKeysManager.svelte}          | 615 ++++++++----------
 3 files changed, 297 insertions(+), 343 deletions(-)
 rename apps/mana/apps/landing/src/content/devlog/{2026-04-07-encryption-phases-1-9-cycles-dreams-events.md => 2026-04-07-encryption-phases-1-9-period-dreams-events.md} (100%)
 rename apps/mana/apps/web/src/{routes/(app)/settings/ai-keys/+page.svelte => lib/components/settings/ByokKeysManager.svelte} (59%)

diff --git a/apps/mana/apps/landing/src/content/devlog/2026-04-07-encryption-phases-1-9-cycles-dreams-events.md b/apps/mana/apps/landing/src/content/devlog/2026-04-07-encryption-phases-1-9-period-dreams-events.md
similarity index 100%
rename from apps/mana/apps/landing/src/content/devlog/2026-04-07-encryption-phases-1-9-cycles-dreams-events.md
rename to apps/mana/apps/landing/src/content/devlog/2026-04-07-encryption-phases-1-9-period-dreams-events.md
diff --git a/apps/mana/apps/web/src/lib/components/settings/AiSettings.svelte b/apps/mana/apps/web/src/lib/components/settings/AiSettings.svelte
index 38a12337d..67f8fa271 100644
--- a/apps/mana/apps/web/src/lib/components/settings/AiSettings.svelte
+++ b/apps/mana/apps/web/src/lib/components/settings/AiSettings.svelte
@@ -19,7 +19,8 @@
 		MODELS,
 		DEFAULT_MODEL,
 	} from '@mana/local-llm';
-	import { Robot, Cpu, HardDrive, Cloud, Warning, CheckCircle } from '@mana/shared-icons';
+	import { Robot, Cpu, HardDrive, Cloud, Warning, CheckCircle, Key } from '@mana/shared-icons';
+	import ByokKeysManager from './ByokKeysManager.svelte';
 
 	const settings = $derived(llmSettingsState.current);
 	const webgpuSupported = isLocalLlmSupported();
@@ -90,6 +91,17 @@
 				'Keine Inhalte werden gespeichert',
 			],
 		},
+		{
+			tier: 'byok',
+			icon: Key,
+			title: 'Eigener API-Key',
+			subtitle: 'OpenAI, Anthropic, Google Gemini oder Mistral',
+			bullets: [
+				'Direkt aus dem Browser — keine Mana-Server-Zwischenstation',
+				'Du zahlst beim Provider, wir sehen nichts davon',
+				'Schluessel werden verschluesselt in deinem Vault gespeichert',
+			],
+		},
 		{
 			tier: 'cloud',
 			icon: Cloud,
@@ -229,6 +241,17 @@
 							</p>
 						{/if}
 
+						{#if card.tier === 'byok' && enabled}
+							<div
+								class="mt-3"
+								onclick={(e) => e.stopPropagation()}
+								onkeydown={(e) => e.stopPropagation()}
+								role="presentation"
+							>
+								<ByokKeysManager />
+							</div>
+						{/if}
+
 						{#if card.tier === 'cloud' && enabled && !settings.cloudConsentGiven}
 							<div
 								class="mt-3 rounded-md border border-amber-500/30 bg-amber-500/5 p-3"
diff --git a/apps/mana/apps/web/src/routes/(app)/settings/ai-keys/+page.svelte b/apps/mana/apps/web/src/lib/components/settings/ByokKeysManager.svelte
similarity index 59%
rename from apps/mana/apps/web/src/routes/(app)/settings/ai-keys/+page.svelte
rename to apps/mana/apps/web/src/lib/components/settings/ByokKeysManager.svelte
index 2f04f7396..0ab2d7856 100644
--- a/apps/mana/apps/web/src/routes/(app)/settings/ai-keys/+page.svelte
+++ b/apps/mana/apps/web/src/lib/components/settings/ByokKeysManager.svelte
@@ -1,8 +1,5 @@
 <!--
-  AI Keys Settings — user-facing CRUD for BYOK provider keys.
-
-  Keys are encrypted at rest via the user's master key. Without an
-  unlocked vault, this page will show an error and prompt login.
+  ByokKeysManager — Inline BYOK keys CRUD for embedding in AiSettings.
 -->
 <script lang="ts">
 	import { onMount } from 'svelte';
@@ -116,58 +113,87 @@
 	});
 </script>
 
-<svelte:head>
-	<title>KI-Keys - Mana</title>
-</svelte:head>
-
-<div class="keys-page">
-	<header class="page-header">
-		<h1>KI-Keys</h1>
-		<p class="subtitle">
-			Hinterlege deine eigenen API-Keys fuer OpenAI, Anthropic, Gemini oder Mistral. Keys bleiben
-			verschluesselt auf diesem Geraet und werden nie synchronisiert.
-		</p>
-	</header>
-
+<div class="byok-manager">
 	{#if vaultLocked}
 		<div class="notice">Vault ist gesperrt — bitte zuerst anmelden um Keys zu verwalten.</div>
 	{:else if loading}
-		<div class="notice">Laedt...</div>
+		<div class="notice subtle">Laedt...</div>
 	{:else}
-		<div class="actions">
-			<button class="btn-primary" onclick={() => (showAdd = !showAdd)}>
-				<Plus size={14} weight="bold" /> Key hinzufuegen
-			</button>
-		</div>
+		{#if keys.length > 0}
+			<div class="keys-list">
+				{#each keys as k (k.id)}
+					<div class="key-row" class:default-key={k.isDefault}>
+						{#if editingId === k.id}
+							<input
+								type="text"
+								bind:value={editLabel}
+								maxlength="40"
+								class="edit-input"
+								placeholder="Label"
+							/>
+							<select bind:value={editModel} class="edit-input">
+								<option value="">Default</option>
+								{#each providerModels(k.provider) as m}
+									<option value={m}>{m}</option>
+								{/each}
+							</select>
+							<button class="btn-icon" onclick={saveEdit}><Check size={12} /></button>
+							<button class="btn-icon" onclick={() => (editingId = null)}><X size={12} /></button>
+						{:else}
+							<div class="key-icon"><Key size={14} weight="fill" /></div>
+							<div class="key-info">
+								<div class="key-line">
+									<span class="key-label">{k.label}</span>
+									{#if k.isDefault}<span class="badge">Standard</span>{/if}
+								</div>
+								<div class="key-meta">
+									{providerDisplay(k.provider)} · {k.model || providerDefaultModel(k.provider)} ·
+									{k.usageCount} Aufrufe · {formatCost(k.totalCostUsd)}
+								</div>
+							</div>
+							<div class="key-actions">
+								{#if !k.isDefault}
+									<button class="btn-link" onclick={() => handleSetDefault(k.id)}>Standard</button>
+								{/if}
+								<button class="btn-icon" onclick={() => startEdit(k)} title="Bearbeiten">
+									<PencilSimple size={12} />
+								</button>
+								<button class="btn-icon danger" onclick={() => handleDelete(k.id)} title="Loeschen">
+									<Trash size={12} />
+								</button>
+							</div>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/if}
 
 		{#if showAdd}
 			<div class="add-form">
-				<h3>Neuen Key hinzufuegen</h3>
-
+				<div class="form-row">
+					<label class="field flex-1">
+						<span class="field-label">Provider</span>
+						<select
+							bind:value={addProvider}
+							onchange={() => (addModel = providerDefaultModel(addProvider))}
+						>
+							{#each BUILTIN_BYOK_PROVIDERS as p}
+								<option value={p.id}>{p.displayName}</option>
+							{/each}
+						</select>
+					</label>
+					<label class="field flex-1">
+						<span class="field-label">Label</span>
+						<input
+							type="text"
+							bind:value={addLabel}
+							placeholder="z.B. Privat OpenAI"
+							maxlength="40"
+						/>
+					</label>
+				</div>
 				<label class="field">
-					<span class="label">Provider</span>
-					<select
-						bind:value={addProvider}
-						onchange={() => (addModel = providerDefaultModel(addProvider))}
-					>
-						{#each BUILTIN_BYOK_PROVIDERS as p}
-							<option value={p.id}>{p.displayName}</option>
-						{/each}
-					</select>
-				</label>
-
-				<label class="field">
-					<span class="label">Label</span>
-					<input
-						type="text"
-						bind:value={addLabel}
-						placeholder="z.B. Work Anthropic, Privat OpenAI"
-						maxlength="40"
-					/>
-				</label>
-
-				<label class="field">
-					<span class="label">API-Key</span>
+					<span class="field-label">API-Key</span>
 					<input
 						type="password"
 						bind:value={addApiKey}
@@ -175,30 +201,30 @@
 							? 'sk-...'
 							: addProvider === 'anthropic'
 								? 'sk-ant-...'
-								: 'API-Key'}
+								: addProvider === 'gemini'
+									? 'AIza...'
+									: 'API-Key'}
 						autocomplete="off"
 					/>
 				</label>
-
-				<label class="field">
-					<span class="label">Modell (optional)</span>
-					<select bind:value={addModel}>
-						<option value="">Provider-Default ({providerDefaultModel(addProvider)})</option>
-						{#each providerModels(addProvider) as m}
-							<option value={m}>{m}</option>
-						{/each}
-					</select>
-				</label>
-
-				<label class="field-inline">
-					<input type="checkbox" bind:checked={addIsDefault} />
-					<span>Als Standard fuer {providerDisplay(addProvider)}</span>
-				</label>
-
+				<div class="form-row">
+					<label class="field flex-1">
+						<span class="field-label">Modell</span>
+						<select bind:value={addModel}>
+							<option value="">Default ({providerDefaultModel(addProvider)})</option>
+							{#each providerModels(addProvider) as m}
+								<option value={m}>{m}</option>
+							{/each}
+						</select>
+					</label>
+					<label class="checkbox-field">
+						<input type="checkbox" bind:checked={addIsDefault} />
+						<span>Als Standard</span>
+					</label>
+				</div>
 				{#if addError}
 					<div class="error">{addError}</div>
 				{/if}
-
 				<div class="form-actions">
 					<button class="btn-cancel" onclick={() => (showAdd = false)}>Abbrechen</button>
 					<button class="btn-primary" onclick={handleAdd} disabled={saving}>
@@ -206,223 +232,121 @@
 					</button>
 				</div>
 			</div>
+		{:else}
+			<button class="add-button" onclick={() => (showAdd = true)}>
+				<Plus size={14} weight="bold" />
+				{keys.length === 0 ? 'Ersten API-Key hinzufuegen' : 'Weiteren Key hinzufuegen'}
+			</button>
 		{/if}
-
-		<div class="keys-list">
-			{#each keys as k (k.id)}
-				<div class="key-card" class:default-key={k.isDefault}>
-					{#if editingId === k.id}
-						<div class="edit-row">
-							<input type="text" bind:value={editLabel} maxlength="40" />
-							<select bind:value={editModel}>
-								<option value="">Provider-Default</option>
-								{#each providerModels(k.provider) as m}
-									<option value={m}>{m}</option>
-								{/each}
-							</select>
-							<button class="btn-icon" onclick={saveEdit} title="Speichern">
-								<Check size={14} weight="bold" />
-							</button>
-							<button class="btn-icon" onclick={() => (editingId = null)} title="Abbrechen">
-								<X size={14} />
-							</button>
-						</div>
-					{:else}
-						<div class="key-main">
-							<div class="key-icon"><Key size={16} weight="fill" /></div>
-							<div class="key-info">
-								<div class="key-title">
-									<span class="key-label">{k.label}</span>
-									{#if k.isDefault}
-										<span class="default-badge">Standard</span>
-									{/if}
-								</div>
-								<div class="key-meta">
-									{providerDisplay(k.provider)}
-									· {k.model || `Default (${providerDefaultModel(k.provider)})`}
-								</div>
-								<div class="key-usage">
-									{k.usageCount} Aufrufe · {k.totalTokens.toLocaleString('de-DE')} Token · {formatCost(
-										k.totalCostUsd
-									)}
-								</div>
-							</div>
-							<div class="key-actions">
-								{#if !k.isDefault}
-									<button
-										class="btn-ghost"
-										onclick={() => handleSetDefault(k.id)}
-										title="Als Standard setzen"
-									>
-										Standard
-									</button>
-								{/if}
-								<button class="btn-icon" onclick={() => startEdit(k)} title="Bearbeiten">
-									<PencilSimple size={14} />
-								</button>
-								<button class="btn-icon danger" onclick={() => handleDelete(k.id)} title="Loeschen">
-									<Trash size={14} />
-								</button>
-							</div>
-						</div>
-					{/if}
-				</div>
-			{:else}
-				<div class="empty">
-					<Key size={32} weight="thin" />
-					<p>Noch keine API-Keys hinterlegt.</p>
-					<p class="hint">
-						Klicke auf "Key hinzufuegen" um mit OpenAI, Anthropic, Gemini oder Mistral zu chatten.
-					</p>
-				</div>
-			{/each}
-		</div>
 	{/if}
 </div>
 
 <style>
-	.keys-page {
-		max-width: 720px;
-		margin: 0 auto;
-		padding: 1.5rem 1rem;
-	}
-
-	.page-header {
-		margin-bottom: 1.5rem;
-	}
-	.page-header h1 {
-		font-size: 1.5rem;
-		font-weight: 600;
-		margin: 0 0 0.375rem;
-		color: hsl(var(--color-foreground));
-	}
-	.subtitle {
-		color: hsl(var(--color-muted-foreground));
-		font-size: 0.875rem;
-		line-height: 1.5;
-		margin: 0;
-	}
-
-	.actions {
-		margin-bottom: 1rem;
-	}
-	.notice {
-		padding: 1.5rem;
-		text-align: center;
-		color: hsl(var(--color-muted-foreground));
-		background: hsl(var(--color-muted) / 0.2);
-		border-radius: 0.75rem;
-	}
-	.error {
-		padding: 0.5rem 0.75rem;
-		background: hsl(var(--color-error) / 0.1);
-		border: 1px solid hsl(var(--color-error) / 0.3);
-		color: hsl(var(--color-error));
-		border-radius: 0.5rem;
-		font-size: 0.8125rem;
-		margin: 0.5rem 0;
-	}
-
-	.add-form {
-		background: hsl(var(--color-card));
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 0.75rem;
-		padding: 1.25rem;
-		margin-bottom: 1rem;
-	}
-	.add-form h3 {
-		font-size: 0.9375rem;
-		font-weight: 600;
-		margin: 0 0 1rem;
-	}
-
-	.field {
+	.byok-manager {
 		display: flex;
 		flex-direction: column;
-		gap: 0.25rem;
-		margin-bottom: 0.75rem;
-	}
-	.field .label {
-		font-size: 0.75rem;
-		color: hsl(var(--color-muted-foreground));
-	}
-	.field input,
-	.field select {
-		padding: 0.4375rem 0.625rem;
-		border-radius: 0.5rem;
-		border: 1px solid hsl(var(--color-border));
-		background: hsl(var(--color-background));
-		color: hsl(var(--color-foreground));
-		font-size: 0.875rem;
-		outline: none;
-	}
-	.field input:focus,
-	.field select:focus {
-		border-color: hsl(var(--color-primary));
+		gap: 0.5rem;
 	}
 
-	.field-inline {
+	.notice {
+		padding: 0.75rem;
+		font-size: 0.8125rem;
+		color: hsl(var(--color-muted-foreground));
+		background: hsl(var(--color-muted) / 0.15);
+		border-radius: 0.5rem;
+	}
+	.notice.subtle {
+		background: transparent;
+		padding: 0.5rem 0;
+	}
+
+	.keys-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+
+	.key-row {
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-		font-size: 0.8125rem;
-		margin-bottom: 0.75rem;
+		padding: 0.5rem 0.625rem;
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.5rem;
+		background: hsl(var(--color-card));
+	}
+	.key-row.default-key {
+		border-color: hsl(var(--color-primary) / 0.4);
+		background: hsl(var(--color-primary) / 0.03);
 	}
 
-	.form-actions {
+	.key-icon {
+		width: 26px;
+		height: 26px;
+		border-radius: 50%;
+		background: hsl(var(--color-primary) / 0.1);
+		color: hsl(var(--color-primary));
 		display: flex;
-		justify-content: flex-end;
-		gap: 0.5rem;
-		margin-top: 0.75rem;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
 	}
 
-	.btn-primary {
-		display: inline-flex;
+	.key-info {
+		flex: 1;
+		min-width: 0;
+	}
+	.key-line {
+		display: flex;
 		align-items: center;
 		gap: 0.375rem;
-		padding: 0.5rem 1rem;
-		border: none;
-		border-radius: 0.5rem;
-		background: hsl(var(--color-primary));
-		color: hsl(var(--color-primary-foreground));
-		font-size: 0.8125rem;
+	}
+	.key-label {
 		font-weight: 500;
-		cursor: pointer;
+		font-size: 0.8125rem;
+		color: hsl(var(--color-foreground));
 	}
-	.btn-primary:hover:not(:disabled) {
-		filter: brightness(1.08);
+	.badge {
+		font-size: 0.5625rem;
+		font-weight: 700;
+		padding: 0.0625rem 0.375rem;
+		border-radius: 9999px;
+		background: hsl(var(--color-primary) / 0.15);
+		color: hsl(var(--color-primary));
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
 	}
-	.btn-primary:disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
+	.key-meta {
+		font-size: 0.6875rem;
+		color: hsl(var(--color-muted-foreground));
+		margin-top: 0.0625rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 
-	.btn-cancel {
-		padding: 0.4375rem 0.75rem;
+	.key-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.125rem;
+		flex-shrink: 0;
+	}
+	.btn-link {
+		font-size: 0.6875rem;
+		padding: 0.125rem 0.5rem;
+		border-radius: 0.25rem;
 		border: none;
 		background: transparent;
 		color: hsl(var(--color-muted-foreground));
-		font-size: 0.8125rem;
 		cursor: pointer;
 	}
-
-	.btn-ghost {
-		padding: 0.25rem 0.625rem;
-		border: 1px solid hsl(var(--color-border));
-		background: transparent;
-		border-radius: 0.375rem;
-		font-size: 0.6875rem;
-		cursor: pointer;
-		color: hsl(var(--color-muted-foreground));
-	}
-	.btn-ghost:hover {
-		border-color: hsl(var(--color-primary) / 0.5);
+	.btn-link:hover {
 		color: hsl(var(--color-primary));
+		background: hsl(var(--color-primary) / 0.08);
 	}
-
 	.btn-icon {
-		width: 28px;
-		height: 28px;
+		width: 24px;
+		height: 24px;
 		border-radius: 50%;
 		border: none;
 		background: transparent;
@@ -441,116 +365,123 @@
 		background: hsl(var(--color-error) / 0.1);
 	}
 
-	.keys-list {
+	.add-button {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.5rem 0.75rem;
+		border: 1px dashed hsl(var(--color-border));
+		border-radius: 0.5rem;
+		background: transparent;
+		color: hsl(var(--color-muted-foreground));
+		font-size: 0.75rem;
+		cursor: pointer;
+		align-self: flex-start;
+	}
+	.add-button:hover {
+		border-color: hsl(var(--color-primary) / 0.5);
+		color: hsl(var(--color-primary));
+	}
+
+	.add-form {
+		padding: 0.75rem;
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.5rem;
+		background: hsl(var(--color-card));
 		display: flex;
 		flex-direction: column;
-		gap: 0.625rem;
-	}
-
-	.key-card {
-		background: hsl(var(--color-card));
-		border: 1px solid hsl(var(--color-border));
-		border-radius: 0.75rem;
-		padding: 0.875rem 1rem;
-	}
-	.key-card.default-key {
-		border-color: hsl(var(--color-primary) / 0.3);
-	}
-
-	.key-main {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-	}
-
-	.key-icon {
-		width: 36px;
-		height: 36px;
-		border-radius: 50%;
-		background: hsl(var(--color-primary) / 0.1);
-		color: hsl(var(--color-primary));
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-	}
-
-	.key-info {
-		flex: 1;
-		min-width: 0;
-	}
-	.key-title {
-		display: flex;
-		align-items: center;
 		gap: 0.5rem;
-		margin-bottom: 0.125rem;
 	}
-	.key-label {
-		font-weight: 500;
-		font-size: 0.9375rem;
-		color: hsl(var(--color-foreground));
+	.form-row {
+		display: flex;
+		gap: 0.5rem;
+		align-items: flex-end;
 	}
-	.default-badge {
-		font-size: 0.625rem;
-		font-weight: 600;
-		background: hsl(var(--color-primary) / 0.15);
-		color: hsl(var(--color-primary));
-		padding: 0.125rem 0.375rem;
-		border-radius: 9999px;
-		text-transform: uppercase;
-		letter-spacing: 0.03em;
+	.flex-1 {
+		flex: 1;
 	}
-	.key-meta {
-		font-size: 0.75rem;
-		color: hsl(var(--color-muted-foreground));
+
+	.field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.1875rem;
 	}
-	.key-usage {
+	.field-label {
 		font-size: 0.6875rem;
 		color: hsl(var(--color-muted-foreground));
-		margin-top: 0.125rem;
 	}
-
-	.key-actions {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		flex-shrink: 0;
-	}
-
-	.edit-row {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-	}
-	.edit-row input {
-		flex: 1;
+	.field input,
+	.field select {
 		padding: 0.375rem 0.5rem;
 		border-radius: 0.375rem;
 		border: 1px solid hsl(var(--color-border));
 		background: hsl(var(--color-background));
 		color: hsl(var(--color-foreground));
 		font-size: 0.8125rem;
+		outline: none;
+		width: 100%;
 	}
-	.edit-row select {
-		padding: 0.375rem 0.5rem;
-		border-radius: 0.375rem;
-		border: 1px solid hsl(var(--color-border));
-		background: hsl(var(--color-background));
-		color: hsl(var(--color-foreground));
-		font-size: 0.8125rem;
+	.field input:focus,
+	.field select:focus {
+		border-color: hsl(var(--color-primary));
 	}
 
-	.empty {
-		text-align: center;
-		padding: 2rem 1rem;
-		color: hsl(var(--color-muted-foreground));
-	}
-	.empty p {
-		margin: 0.5rem 0 0;
-		font-size: 0.875rem;
-	}
-	.empty .hint {
+	.checkbox-field {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
 		font-size: 0.75rem;
-		opacity: 0.8;
+		color: hsl(var(--color-muted-foreground));
+		padding-bottom: 0.375rem;
+	}
+
+	.edit-input {
+		flex: 1;
+		padding: 0.25rem 0.375rem;
+		font-size: 0.75rem;
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 0.25rem;
+		background: hsl(var(--color-background));
+		color: hsl(var(--color-foreground));
+	}
+
+	.error {
+		padding: 0.375rem 0.5rem;
+		font-size: 0.75rem;
+		background: hsl(var(--color-error) / 0.1);
+		border: 1px solid hsl(var(--color-error) / 0.3);
+		color: hsl(var(--color-error));
+		border-radius: 0.375rem;
+	}
+
+	.form-actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.375rem;
+	}
+	.btn-cancel {
+		padding: 0.375rem 0.625rem;
+		border: none;
+		background: transparent;
+		color: hsl(var(--color-muted-foreground));
+		font-size: 0.75rem;
+		cursor: pointer;
+	}
+	.btn-primary {
+		padding: 0.375rem 0.875rem;
+		border: none;
+		border-radius: 0.375rem;
+		background: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground));
+		font-size: 0.75rem;
+		font-weight: 500;
+		cursor: pointer;
+	}
+	.btn-primary:hover:not(:disabled) {
+		filter: brightness(1.08);
+	}
+	.btn-primary:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
 	}
 </style>