@antelopejs/dms-ai 0.1.3 → 0.1.5

package/frontend-vue/app/components/SettingsView.vue

@@ -1,193 +1,191 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from "vue";
 
-type Mode = 'normal' | 'acceptEdits' | 'plan' | 'auto'
-type Thinking = 'off' | 'low' | 'medium' | 'high'
-type GenerationMode = 'safe' | 'vibe'
-type ProviderName = 'claude' | 'codex'
+type Mode = "normal" | "acceptEdits" | "plan" | "auto";
+type Thinking = "off" | "low" | "medium" | "high";
+type GenerationMode = "safe" | "vibe";
+type ProviderName = "claude" | "codex";
 
 interface ProviderAvailability {
-	available: boolean
-	reason?: string
+	available: boolean;
+	reason?: string;
 }
 
 interface AiSettings {
-	provider: ProviderName
-	mode: Mode
-	thinking: Thinking
-	generationMode: GenerationMode
-	allowLocalSkills: boolean
-	builderAvailable: boolean
-	providers: Record<ProviderName, ProviderAvailability>
+	provider: ProviderName;
+	mode: Mode;
+	thinking: Thinking;
+	generationMode: GenerationMode;
+	allowLocalSkills: boolean;
+	builderAvailable: boolean;
+	providers: Record<ProviderName, ProviderAvailability>;
 }
 
-const { $authFetch } = useAuthFetch()
+const { $authFetch } = useAuthFetch();
 
 const settings = ref<AiSettings>({
-	provider: 'claude',
-	mode: 'normal',
-	thinking: 'medium',
-	generationMode: 'safe',
+	provider: "claude",
+	mode: "normal",
+	thinking: "medium",
+	generationMode: "safe",
 	allowLocalSkills: false,
 	builderAvailable: false,
 	providers: { claude: { available: true }, codex: { available: false } },
-})
-const loading = ref(false)
-const saving = ref(false)
-const error = ref<string | null>(null)
+});
+const loading = ref(false);
+const saving = ref(false);
+const error = ref<string | null>(null);
 
 const MODE_OPTIONS: Array<{ value: Mode; label: string; hint: string }> = [
-	{ value: 'normal', label: 'Normal', hint: 'Ask before each tool action' },
+	{ value: "normal", label: "Normal", hint: "Ask before each tool action" },
 	{
-		value: 'acceptEdits',
-		label: 'Accept edits',
-		hint: 'Auto-accept file edits, ask for the rest',
+		value: "acceptEdits",
+		label: "Accept edits",
+		hint: "Auto-accept file edits, ask for the rest",
 	},
-	{ value: 'plan', label: 'Plan', hint: 'Plan only — propose without changes' },
-	{ value: 'auto', label: 'Auto', hint: 'Auto-approve every tool action' },
-]
+	{ value: "plan", label: "Plan", hint: "Plan only — propose without changes" },
+	{ value: "auto", label: "Auto", hint: "Auto-approve every tool action" },
+];
 
 // Safe mode refuses raw edits whatever the mode, and Auto stops short of
 // approving everything there, so the mode hint says so while it is active.
 const SAFE_MODE_MODE_NOTE =
-	'Safe mode: raw edits and shell commands stay blocked, and Auto still asks before other actions.'
+	"Safe mode: raw edits and shell commands stay blocked, and Auto still asks before other actions.";
 
-const PROVIDER_OPTIONS: Array<{
-	value: ProviderName
-	label: string
-	model: string
-}> = [
-	{ value: 'claude', label: 'Anthropic (Claude)', model: 'Claude Opus 4.x' },
-	{ value: 'codex', label: 'OpenAI (Codex)', model: 'GPT-5.x (Codex default)' },
-]
+interface ProviderOption {
+	value: ProviderName;
+	label: string;
+}
+
+const PROVIDER_OPTIONS: ProviderOption[] = [
+	{ value: "claude", label: "Anthropic (Claude)" },
+	{ value: "codex", label: "OpenAI (Codex)" },
+];
 
 // One control, two meanings: a token budget on Claude, a reasoning effort level
 // on Codex, which has no "off" and maps it to its lowest level.
 const THINKING_HINTS: Record<ProviderName, string> = {
-	claude: 'Thinking budget handed to the model.',
+	claude: "Thinking budget handed to the model.",
 	codex:
 		'Reasoning effort handed to the model. Codex has no "off": it maps to the lowest level.',
-}
+};
 
 const THINKING_OPTIONS: Array<{ value: Thinking; label: string }> = [
-	{ value: 'off', label: 'Off' },
-	{ value: 'low', label: 'Low' },
-	{ value: 'medium', label: 'Medium' },
-	{ value: 'high', label: 'High' },
-]
+	{ value: "off", label: "Off" },
+	{ value: "low", label: "Low" },
+	{ value: "medium", label: "Medium" },
+	{ value: "high", label: "High" },
+];
 
 async function load(): Promise<void> {
-	loading.value = true
-	error.value = null
+	loading.value = true;
+	error.value = null;
 	try {
-		settings.value = await $authFetch<AiSettings>('/ai/settings')
+		settings.value = await $authFetch<AiSettings>("/ai/settings");
 	} catch (e) {
-		error.value = e instanceof Error ? e.message : String(e)
+		error.value = e instanceof Error ? e.message : String(e);
 	} finally {
-		loading.value = false
+		loading.value = false;
 	}
 }
 
 async function persist(): Promise<void> {
-	saving.value = true
-	error.value = null
+	saving.value = true;
+	error.value = null;
 	try {
-		settings.value = await $authFetch<AiSettings>('/ai/settings', {
-			method: 'PUT',
+		settings.value = await $authFetch<AiSettings>("/ai/settings", {
+			method: "PUT",
 			body: settings.value,
-		})
+		});
 	} catch (e) {
-		error.value = e instanceof Error ? e.message : String(e)
+		error.value = e instanceof Error ? e.message : String(e);
 	} finally {
-		saving.value = false
+		saving.value = false;
 	}
 }
 
 function availabilityOf(name: ProviderName): ProviderAvailability {
-	return settings.value.providers?.[name] ?? { available: false }
+	return settings.value.providers?.[name] ?? { available: false };
 }
 
-function providerLabel(option: (typeof PROVIDER_OPTIONS)[number]): string {
+function providerLabel(option: ProviderOption): string {
 	return availabilityOf(option.value).available
 		? option.label
-		: `${option.label} — unavailable`
+		: `${option.label} — unavailable`;
 }
 
-const activeProvider = computed(() => settings.value.provider)
+const activeProvider = computed(() => settings.value.provider);
 
 const providerReason = computed(
 	() => availabilityOf(settings.value.provider).reason ?? null,
-)
-
-const activeModel = computed(
-	() =>
-		PROVIDER_OPTIONS.find((o) => o.value === settings.value.provider)?.model ??
-		'',
-)
+);
 
 function onProvider(event: Event): void {
-	const next = (event.target as HTMLSelectElement).value as ProviderName
+	const next = (event.target as HTMLSelectElement).value as ProviderName;
 	if (!availabilityOf(next).available) {
 		// The option is disabled, so this only fires on a stale DOM; snap back.
-		;(event.target as HTMLSelectElement).value = settings.value.provider
-		return
+		(event.target as HTMLSelectElement).value = settings.value.provider;
+		return;
 	}
-	settings.value.provider = next
-	void persist()
+	settings.value.provider = next;
+	void persist();
 }
 
 function onMode(event: Event): void {
-	settings.value.mode = (event.target as HTMLSelectElement).value as Mode
-	void persist()
+	settings.value.mode = (event.target as HTMLSelectElement).value as Mode;
+	void persist();
 }
 
 function onThinking(event: Event): void {
-	settings.value.thinking = (event.target as HTMLSelectElement).value as Thinking
-	void persist()
+	settings.value.thinking = (event.target as HTMLSelectElement)
+		.value as Thinking;
+	void persist();
 }
 
 function onAllowLocalSkills(event: Event): void {
-	settings.value.allowLocalSkills = (event.target as HTMLInputElement).checked
-	void persist()
+	settings.value.allowLocalSkills = (event.target as HTMLInputElement).checked;
+	void persist();
 }
 
 const activeMode = computed<GenerationMode>(() =>
-	settings.value.generationMode === 'safe' && settings.value.builderAvailable
-		? 'safe'
-		: 'vibe',
-)
+	settings.value.generationMode === "safe" && settings.value.builderAvailable
+		? "safe"
+		: "vibe",
+);
 
 function onGenerationMode(mode: GenerationMode): void {
-	if (mode === 'safe' && !settings.value.builderAvailable) return
-	if (mode === settings.value.generationMode) return
-	settings.value.generationMode = mode
-	void persist()
+	if (mode === "safe" && !settings.value.builderAvailable) return;
+	if (mode === settings.value.generationMode) return;
+	settings.value.generationMode = mode;
+	void persist();
 }
 
-onMounted(load)
+onMounted(load);
 
 const SELECT_CLASS =
-	'w-full rounded-md border border-default bg-elevated px-3 py-2 text-sm'
+	"w-full rounded-md border border-default bg-elevated px-3 py-2 text-sm";
 </script>
 
 <template>
 	<div class="flex w-full flex-col gap-5 pb-10">
 		<div
 			v-if="error"
-			class="rounded-lg border border-error bg-error/10 p-4 text-sm text-error"
+			class="border-error bg-error/10 text-error rounded-lg border p-4 text-sm"
 		>
 			{{ error }}
 		</div>
 
-		<!-- Row 1: Model (left) · Default behavior (right) -->
+		<!-- Row 1: Provider (left) · Default behavior (right) -->
 		<div class="grid gap-5 lg:grid-cols-2">
-			<section class="rounded-xl border border-default bg-elevated/30">
-				<header class="border-b border-default px-5 py-4">
-					<h2 class="text-sm font-semibold text-highlighted">Model</h2>
+			<section class="border-default bg-elevated/30 rounded-xl border">
+				<header class="border-default border-b px-5 py-4">
+					<h2 class="text-highlighted text-sm font-semibold">Provider</h2>
 				</header>
 				<div class="flex flex-col gap-4 p-5">
 					<div>
-						<label class="mb-1.5 block text-xs font-medium text-toned">Provider</label>
+						<label class="text-toned mb-1.5 block text-xs font-medium">
+							Provider
+						</label>
 						<select
 							:class="SELECT_CLASS"
 							:value="activeProvider"
@@ -203,30 +201,27 @@ const SELECT_CLASS =
 								{{ providerLabel(option) }}
 							</option>
 						</select>
-						<p v-if="providerReason" class="mt-1.5 text-xs text-error">
+						<p v-if="providerReason" class="text-error mt-1.5 text-xs">
 							{{ providerReason }}
 						</p>
-						<p class="mt-1.5 text-xs text-dimmed">
-							Switching provider ends the live context of open conversations;
-							their transcripts are kept.
+						<p class="text-dimmed mt-1.5 text-xs">
+							The provider runs its own default model. Switching provider ends
+							the live context of open conversations; their transcripts are
+							kept.
 						</p>
 					</div>
-					<div>
-						<label class="mb-1.5 block text-xs font-medium text-toned">Model</label>
-						<select :class="SELECT_CLASS" disabled>
-							<option>{{ activeModel }}</option>
-						</select>
-					</div>
 				</div>
 			</section>
 
-			<section class="rounded-xl border border-default bg-elevated/30">
-				<header class="border-b border-default px-5 py-4">
-					<h2 class="text-sm font-semibold text-highlighted">Default behavior</h2>
+			<section class="border-default bg-elevated/30 rounded-xl border">
+				<header class="border-default border-b px-5 py-4">
+					<h2 class="text-highlighted text-sm font-semibold">
+						Default behavior
+					</h2>
 				</header>
 				<div class="flex flex-col gap-4 p-5">
 					<div>
-						<label class="mb-1.5 block text-xs font-medium text-toned">
+						<label class="text-toned mb-1.5 block text-xs font-medium">
 							Operating mode
 						</label>
 						<select
@@ -243,15 +238,15 @@ const SELECT_CLASS =
 								{{ option.label }}
 							</option>
 						</select>
-						<p class="mt-1.5 text-xs text-dimmed">
+						<p class="text-dimmed mt-1.5 text-xs">
 							{{ MODE_OPTIONS.find((o) => o.value === settings.mode)?.hint }}
 						</p>
-						<p v-if="activeMode === 'safe'" class="mt-1 text-xs text-dimmed">
+						<p v-if="activeMode === 'safe'" class="text-dimmed mt-1 text-xs">
 							{{ SAFE_MODE_MODE_NOTE }}
 						</p>
 					</div>
 					<div>
-						<label class="mb-1.5 block text-xs font-medium text-toned">
+						<label class="text-toned mb-1.5 block text-xs font-medium">
 							Thinking
 						</label>
 						<select
@@ -268,7 +263,7 @@ const SELECT_CLASS =
 								{{ option.label }}
 							</option>
 						</select>
-						<p class="mt-1.5 text-xs text-dimmed">
+						<p class="text-dimmed mt-1.5 text-xs">
 							{{ THINKING_HINTS[settings.provider] }}
 						</p>
 					</div>
@@ -276,20 +271,20 @@ const SELECT_CLASS =
 						<label class="flex items-start gap-3">
 							<input
 								type="checkbox"
-								class="mt-0.5 size-4 rounded border-default"
+								class="border-default mt-0.5 size-4 rounded"
 								:checked="settings.allowLocalSkills"
 								:disabled="loading || saving"
 								@change="onAllowLocalSkills"
-							>
+							/>
 							<span>
-								<span class="block text-xs font-medium text-toned">
+								<span class="text-toned block text-xs font-medium">
 									Use machine-local skills (~/.claude/skills)
 								</span>
-								<span class="mt-0.5 block text-xs text-dimmed">
-									Adds the skills from your machine
-									(<code>~/.claude/skills</code>) on top of the ones bundled by
-									modules. Machine-local, so not shared with other environments.
-									Off by default.
+								<span class="text-dimmed mt-0.5 block text-xs">
+									Adds the skills from your machine (
+									<code>~/.claude/skills</code>
+									) on top of the ones bundled by modules. Machine-local, so not
+									shared with other environments. Off by default.
 								</span>
 							</span>
 						</label>
@@ -299,10 +294,12 @@ const SELECT_CLASS =
 		</div>
 
 		<!-- Row 2: Generation mode (full width) -->
-		<section class="rounded-xl border border-default bg-elevated/30">
-			<header class="border-b border-default px-5 py-4">
-				<h2 class="text-sm font-semibold text-highlighted">Generation mode</h2>
-				<p class="mt-0.5 text-xs text-dimmed">Default mode applied to new prompts</p>
+		<section class="border-default bg-elevated/30 rounded-xl border">
+			<header class="border-default border-b px-5 py-4">
+				<h2 class="text-highlighted text-sm font-semibold">Generation mode</h2>
+				<p class="text-dimmed mt-0.5 text-xs">
+					Default mode applied to new prompts
+				</p>
 			</header>
 			<div class="grid gap-4 p-5 sm:grid-cols-2">
 				<button
@@ -314,7 +311,7 @@ const SELECT_CLASS =
 							? 'border-primary bg-primary/10'
 							: 'border-default',
 						settings.builderAvailable
-							? 'cursor-pointer hover:border-primary/60'
+							? 'hover:border-primary/60 cursor-pointer'
 							: 'cursor-not-allowed opacity-60',
 					]"
 					@click="onGenerationMode('safe')"
@@ -344,7 +341,7 @@ const SELECT_CLASS =
 							Unavailable
 						</UBadge>
 					</div>
-					<p class="text-xs leading-relaxed text-dimmed">
+					<p class="text-dimmed text-xs leading-relaxed">
 						Acts only through the Builder (MCP) — emits accepted configurations,
 						never raw code.
 						<template v-if="!settings.builderAvailable">
@@ -359,7 +356,7 @@ const SELECT_CLASS =
 					:class="
 						activeMode === 'vibe'
 							? 'border-primary bg-primary/10'
-							: 'cursor-pointer border-default hover:border-primary/60'
+							: 'border-default hover:border-primary/60 cursor-pointer'
 					"
 					@click="onGenerationMode('vibe')"
 				>
@@ -379,7 +376,7 @@ const SELECT_CLASS =
 							Active
 						</UBadge>
 					</div>
-					<p class="text-xs leading-relaxed text-dimmed">
+					<p class="text-dimmed text-xs leading-relaxed">
 						Free to write custom code and bespoke pages beyond the Builder
 						blocks — full creative range.
 					</p>

package/frontend-vue/app/components/SkillsView.vue

@@ -1,91 +1,91 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from "vue";
 
 interface SkillItem {
-	id: string
-	name: string
-	description: string
-	icon?: string
-	category?: string
-	tags: string[]
-	provenance: string
-	body: string
+	id: string;
+	name: string;
+	description: string;
+	icon?: string;
+	category?: string;
+	tags: string[];
+	provenance: string;
+	body: string;
 }
 
-const LOCAL_PROVENANCE = 'local'
+const LOCAL_PROVENANCE = "local";
 
-const { $authFetch } = useAuthFetch()
+const { $authFetch } = useAuthFetch();
 
-const items = ref<SkillItem[]>([])
-const loading = ref(false)
-const error = ref<string | null>(null)
-const search = ref('')
-const selected = ref<SkillItem | null>(null)
+const items = ref<SkillItem[]>([]);
+const loading = ref(false);
+const error = ref<string | null>(null);
+const search = ref("");
+const selected = ref<SkillItem | null>(null);
 
 async function load(): Promise<void> {
-	loading.value = true
-	error.value = null
+	loading.value = true;
+	error.value = null;
 	try {
-		const res = await $authFetch<{ items: SkillItem[] }>('/ai/skills')
-		items.value = res.items
+		const res = await $authFetch<{ items: SkillItem[] }>("/ai/skills");
+		items.value = res.items;
 	} catch (e) {
-		error.value = e instanceof Error ? e.message : String(e)
+		error.value = e instanceof Error ? e.message : String(e);
 	} finally {
-		loading.value = false
+		loading.value = false;
 	}
 }
 
-onMounted(load)
+onMounted(load);
 
 // Flat list, sorted by provenance then name so skills from the same package
 // stay adjacent without a grouping layer.
 const filtered = computed(() => {
-	const q = search.value.trim().toLowerCase()
+	const q = search.value.trim().toLowerCase();
 	return items.value
 		.filter((s) => {
-			if (q.length === 0) return true
-			const haystack = [s.name, s.description, s.category ?? '', ...s.tags]
-				.join(' ')
-				.toLowerCase()
-			return haystack.includes(q)
+			if (q.length === 0) return true;
+			const haystack = [s.name, s.description, s.category ?? "", ...s.tags]
+				.join(" ")
+				.toLowerCase();
+			return haystack.includes(q);
 		})
 		.sort(
 			(a, b) =>
 				a.provenance.localeCompare(b.provenance) ||
 				a.name.localeCompare(b.name),
-		)
-})
+		);
+});
 
 function isLocal(provenance: string): boolean {
-	return provenance === LOCAL_PROVENANCE
+	return provenance === LOCAL_PROVENANCE;
 }
 
 function open(skill: SkillItem): void {
-	selected.value = skill
+	selected.value = skill;
 }
 
 function close(): void {
-	selected.value = null
+	selected.value = null;
 }
 
 const CARD_CLASS =
-	'flex flex-col gap-2 rounded-xl border border-default bg-elevated/30 p-4 text-left transition-colors hover:border-primary'
+	"flex flex-col gap-2 rounded-xl border border-default bg-elevated/30 p-4 text-left transition-colors hover:border-primary";
 </script>
 
 <template>
 	<div class="flex w-full flex-col gap-5 pb-10">
 		<div
 			v-if="error"
-			class="rounded-lg border border-error bg-error/10 p-4 text-sm text-error"
+			class="border-error bg-error/10 text-error rounded-lg border p-4 text-sm"
 		>
 			{{ error }}
 		</div>
 
 		<!-- Stat row -->
 		<div class="grid gap-4 sm:grid-cols-2">
-			<div class="rounded-xl border border-default bg-elevated/30 p-4">
-				<p class="text-xs font-medium text-toned">Total skills</p>
-				<p class="mt-1 text-2xl font-semibold text-highlighted">
+			<div class="border-default bg-elevated/30 rounded-xl border p-4">
+				<p class="text-toned text-xs font-medium">Total skills</p>
+				<p class="text-highlighted mt-1 text-2xl font-semibold">
 					{{ items.length }}
 				</p>
 			</div>
@@ -97,13 +97,13 @@ const CARD_CLASS =
 				v-model="search"
 				type="search"
 				placeholder="Search skills…"
-				class="w-full max-w-xs rounded-md border border-default bg-elevated px-3 py-2 text-sm"
-			>
+				class="border-default bg-elevated w-full max-w-xs rounded-md border px-3 py-2 text-sm"
+			/>
 		</div>
 
 		<p
 			v-if="!loading && items.length === 0"
-			class="rounded-lg border border-default bg-elevated/30 p-6 text-center text-sm text-dimmed"
+			class="border-default bg-elevated/30 text-dimmed rounded-lg border p-6 text-center text-sm"
 		>
 			No skills are loaded. Module-contributed skills appear here, plus
 			machine-local skills when enabled in Settings.
@@ -121,13 +121,13 @@ const CARD_CLASS =
 				<div class="flex items-start gap-2">
 					<UIcon
 						:name="skill.icon || 'i-ph-sparkle'"
-						class="mt-0.5 shrink-0 text-primary"
+						class="text-primary mt-0.5 shrink-0"
 					/>
 					<div class="min-w-0">
-						<p class="truncate text-sm font-semibold text-highlighted">
+						<p class="text-highlighted truncate text-sm font-semibold">
 							{{ skill.name }}
 						</p>
-						<p class="truncate text-xs text-dimmed">
+						<p class="text-dimmed truncate text-xs">
 							{{ skill.provenance }}
 						</p>
 					</div>
@@ -141,7 +141,7 @@ const CARD_CLASS =
 						Local
 					</UBadge>
 				</div>
-				<p class="line-clamp-3 text-xs leading-relaxed text-toned">
+				<p class="text-toned line-clamp-3 text-xs leading-relaxed">
 					{{ skill.description }}
 				</p>
 				<div v-if="skill.tags.length" class="mt-auto flex flex-wrap gap-1">
@@ -165,18 +165,18 @@ const CARD_CLASS =
 			@click.self="close"
 		>
 			<div
-				class="flex h-full w-full max-w-lg flex-col overflow-y-auto border-l border-default bg-default p-6 shadow-xl"
+				class="border-default bg-default flex h-full w-full max-w-lg flex-col overflow-y-auto border-l p-6 shadow-xl"
 			>
 				<div class="mb-4 flex items-start gap-3">
 					<UIcon
 						:name="selected.icon || 'i-ph-sparkle'"
-						class="mt-1 shrink-0 text-xl text-primary"
+						class="text-primary mt-1 shrink-0 text-xl"
 					/>
 					<div class="min-w-0 flex-1">
-						<h2 class="text-lg font-semibold text-highlighted">
+						<h2 class="text-highlighted text-lg font-semibold">
 							{{ selected.name }}
 						</h2>
-						<p class="text-xs text-dimmed">{{ selected.id }}</p>
+						<p class="text-dimmed text-xs">{{ selected.id }}</p>
 					</div>
 					<UButton
 						icon="i-ph-x"
@@ -211,15 +211,17 @@ const CARD_CLASS =
 					</UBadge>
 				</div>
 
-				<p class="mb-4 text-sm leading-relaxed text-toned">
+				<p class="text-toned mb-4 text-sm leading-relaxed">
 					{{ selected.description }}
 				</p>
 
-				<h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-dimmed">
+				<h3
+					class="text-dimmed mb-2 text-xs font-semibold uppercase tracking-wide"
+				>
 					Instructions (SKILL.md)
 				</h3>
 				<pre
-					class="whitespace-pre-wrap rounded-lg border border-default bg-elevated/40 p-4 text-xs leading-relaxed text-toned"
+					class="border-default bg-elevated/40 text-toned whitespace-pre-wrap rounded-lg border p-4 text-xs leading-relaxed"
 					>{{ selected.body }}</pre
 				>
 			</div>