refactor(ui): settings-card primitives + fix threshold clamp / card misgroup (#161)

Tier-3 frontend DRY for the ML settings cards, plus the F-D2 clamp bug and the
F-D3 card misgrouping.

New primitives (components/common + composables):
- <SettingToggleRow> — the accent-icon + .fc-section-h label + right-aligned
  switch row (HeadsCard x3, CropProposersCard). iconColor prop absorbs the
  on/off dim.
- <SettingNumberField> — compact numeric field that CLAMPS to [min,max] on
  commit. This fixes F-D2: HeadsCard/CropProposersCard previously sent
  Number(raw) straight to the API, so an out-of-range threshold bounced off the
  400 validator (only TranslationCard clamped). density prop for the grid cards.
- useSettingSave(patchFn) — the busy + patch + toast + revert-on-failure flow
  each card hand-rolled (HeadsCard x6 handlers, CropProposersCard, MLBackfillCard,
  VideoEmbeddingCard). Returns ok/false for the optimistic-switch revert.

Adopted in HeadsCard, CropProposersCard, MLBackfillCard (handler only — its
plain labelled switch is a different affordance), VideoEmbeddingCard.

F-D3: MLThresholdSliders.vue actually rendered a "Video embedding" (frame-
sampling) card but sat under "Tagging → Suggestion thresholds". Renamed it
VideoEmbeddingCard.vue and moved it to the "GPU agent & embeddings" section.

Left deliberately (over-DRY guard): TranslationCard uses an inline error ALERT
(not a toast), already clamps its confidence with a NaN fallback, and lives on
the ImportStore — a genuinely different save pattern, so forcing it onto
useSettingSave would change its UX.

Behaviour-preserving refactor; CI has no Vue type-check so this needs a live
UI pass (toggles persist + revert on failure, thresholds clamp on blur, video
card now under Embeddings).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NsmJSQxnNxGgtM5Yz4GAqi

frontend/src/components/settings/HeadsCard.vue

@@ -95,14 +95,10 @@
 
     <!-- Earned auto-apply -->
     <div class="fc-auto mt-6">
-      <div class="d-flex align-center mb-1" style="gap: 10px;">
-        <v-icon size="18" color="accent">mdi-lightning-bolt</v-icon>
-        <span class="fc-section-h">Auto-apply</span>
-        <v-switch
-          v-model="autoEnabled" :loading="settingBusy" hide-details density="compact"
-          color="success" class="ml-auto" @update:model-value="onToggleAuto"
-        />
-      </div>
+      <SettingToggleRow
+        v-model="autoEnabled" :loading="settingBusy"
+        icon="mdi-lightning-bolt" label="Auto-apply" @change="onToggleAuto"
+      />
       <p class="fc-muted text-body-2 mb-3">
         Graduated heads (⚡, with ≥ {{ autoMinPosInput }} examples) apply their tag
         on their own where they clear {{ Math.round((autoPrecisionInput || 0) * 100) }}%
@@ -111,17 +107,14 @@
       </p>
 
       <div class="d-flex mb-3" style="gap: 12px;">
-        <v-text-field
-          v-model.number="autoPrecisionInput" label="Precision target"
-          type="number" min="0.5" max="0.999" step="0.01" density="compact"
-          hide-details style="max-width: 200px;" :disabled="settingBusy"
+        <SettingNumberField
+          v-model="autoPrecisionInput" label="Precision target"
+          :min="0.5" :max="0.999" :step="0.01" :disabled="settingBusy"
           @change="onSaveSettings"
         />
-        <v-text-field
-          v-model.number="autoMinPosInput" label="Min examples to fire"
-          type="number" min="1" density="compact" hide-details
-          style="max-width: 200px;" :disabled="settingBusy"
-          @change="onSaveSettings"
+        <SettingNumberField
+          v-model="autoMinPosInput" label="Min examples to fire"
+          :min="1" :disabled="settingBusy" @change="onSaveSettings"
         />
       </div>
 
@@ -161,15 +154,11 @@
 
     <!-- Presentation chrome auto-hide (#141) -->
     <div class="fc-auto mt-6">
-      <div class="d-flex align-center mb-1" style="gap: 10px;">
-        <v-icon size="18" color="accent">mdi-image-off-outline</v-icon>
-        <span class="fc-section-h">Hide presentation chrome</span>
-        <v-switch
-          v-model="presentationEnabled" :loading="settingBusy" hide-details
-          density="compact" color="success" class="ml-auto"
-          @update:model-value="onTogglePresentation"
-        />
-      </div>
+      <SettingToggleRow
+        v-model="presentationEnabled" :loading="settingBusy"
+        icon="mdi-image-off-outline" label="Hide presentation chrome"
+        @change="onTogglePresentation"
+      />
       <p class="fc-muted text-body-2 mb-3">
         Auto-hide <code>banner</code> chrome from the gallery once a head has
         learned it (≥ {{ minPositives }} examples) and clears
@@ -180,16 +169,14 @@
         tag), it's flagged for review instead of buried. Every auto-hide is reversible.
       </p>
       <div class="d-flex mb-3" style="gap: 12px;">
-        <v-text-field
-          v-model.number="presentationThresholdInput" label="Hide confidence"
-          type="number" min="0.5" max="0.999" step="0.01" density="compact"
-          hide-details style="max-width: 200px;" :disabled="settingBusy"
+        <SettingNumberField
+          v-model="presentationThresholdInput" label="Hide confidence"
+          :min="0.5" :max="0.999" :step="0.01" :disabled="settingBusy"
           @change="onSavePresentation"
         />
-        <v-text-field
-          v-model.number="presentationConflictInput" label="Flag if content ≥"
-          type="number" min="0" max="1" step="0.05" density="compact"
-          hide-details style="max-width: 200px;" :disabled="settingBusy"
+        <SettingNumberField
+          v-model="presentationConflictInput" label="Flag if content ≥"
+          :min="0" :max="1" :step="0.05" :disabled="settingBusy"
           @change="onSavePresentation"
         />
       </div>
@@ -197,15 +184,11 @@
 
     <!-- Process auto-tagging (#1464): wip / editor screenshot -->
     <div class="fc-auto mt-6">
-      <div class="d-flex align-center mb-1" style="gap: 10px;">
-        <v-icon size="18" color="accent">mdi-progress-wrench</v-icon>
-        <span class="fc-section-h">Auto-tag work-in-progress</span>
-        <v-switch
-          v-model="processEnabled" :loading="settingBusy" hide-details
-          density="compact" color="success" class="ml-auto"
-          @update:model-value="onToggleProcess"
-        />
-      </div>
+      <SettingToggleRow
+        v-model="processEnabled" :loading="settingBusy"
+        icon="mdi-progress-wrench" label="Auto-tag work-in-progress"
+        @change="onToggleProcess"
+      />
       <p class="fc-muted text-body-2 mb-3">
         Auto-tag <code>wip</code> and <code>editor screenshot</code> process art
         once a head has learned them (≥ {{ minPositives }} examples) and clears
@@ -217,16 +200,14 @@
         manual tags, never its own guesses — so it can't run away. Every tag reversible.
       </p>
       <div class="d-flex mb-3" style="gap: 12px;">
-        <v-text-field
-          v-model.number="processThresholdInput" label="Tag confidence"
-          type="number" min="0.5" max="0.999" step="0.01" density="compact"
-          hide-details style="max-width: 200px;" :disabled="settingBusy"
+        <SettingNumberField
+          v-model="processThresholdInput" label="Tag confidence"
+          :min="0.5" :max="0.999" :step="0.01" :disabled="settingBusy"
           @change="onSaveProcess"
         />
-        <v-text-field
-          v-model.number="processConflictInput" label="Flag if content ≥"
-          type="number" min="0" max="1" step="0.05" density="compact"
-          hide-details style="max-width: 200px;" :disabled="settingBusy"
+        <SettingNumberField
+          v-model="processConflictInput" label="Flag if content ≥"
+          :min="0" :max="1" :step="0.05" :disabled="settingBusy"
           @change="onSaveProcess"
         />
       </div>
@@ -272,6 +253,9 @@ import { toast } from '../../utils/toast.js'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import MaintenanceTile from '../common/MaintenanceTile.vue'
+import SettingNumberField from '../common/SettingNumberField.vue'
+import SettingToggleRow from '../common/SettingToggleRow.vue'
+import { useSettingSave } from '../../composables/useSettingSave.js'
 import { useHeadsStore } from '../../stores/heads.js'
 import { useMLStore } from '../../stores/ml.js'
 
@@ -285,7 +269,9 @@ let pollTimer = null
 const autoEnabled = ref(false)
 const autoPrecisionInput = ref(0.97)
 const autoMinPosInput = ref(30)
-const settingBusy = ref(false)
+// Shared settings-save flow (busy + toast + revert); `settingBusy` gates the
+// toggles/fields, `save` returns ok/false for the optimistic-switch revert.
+const { busy: settingBusy, save } = useSettingSave(mlSettings.patchSettings)
 const autoBusy = ref(false)
 const autoStatus = ref(null)
 const metricsData = ref(null)
@@ -395,81 +381,39 @@ function startAutoPoll() {
 function stopAutoPoll() { if (autoTimer) { clearInterval(autoTimer); autoTimer = null } }
 
 async function onToggleAuto(val) {
-  settingBusy.value = true
-  try {
-    await mlSettings.patchSettings({ head_auto_apply_enabled: !!val })
-    toast({ text: val ? 'Auto-apply on' : 'Auto-apply off', type: 'success' })
-  } catch (e) {
-    autoEnabled.value = !val   // revert the switch
-    toast({ text: `Could not update: ${e.message}`, type: 'error' })
-  } finally {
-    settingBusy.value = false
-  }
+  const ok = await save({ head_auto_apply_enabled: !!val },
+    { successMessage: val ? 'Auto-apply on' : 'Auto-apply off', errorPrefix: 'Could not update' })
+  if (!ok) autoEnabled.value = !val   // revert the switch
 }
 async function onSaveSettings() {
-  settingBusy.value = true
-  try {
-    await mlSettings.patchSettings({
-      head_auto_apply_precision: Number(autoPrecisionInput.value),
-      head_auto_apply_min_positives: Number(autoMinPosInput.value),
-    })
-  } catch (e) {
-    toast({ text: `Could not save: ${e.message}`, type: 'error' })
-  } finally {
-    settingBusy.value = false
-  }
+  await save({
+    head_auto_apply_precision: Number(autoPrecisionInput.value),
+    head_auto_apply_min_positives: Number(autoMinPosInput.value),
+  })
 }
 
 async function onTogglePresentation(val) {
-  settingBusy.value = true
-  try {
-    await mlSettings.patchSettings({ presentation_auto_apply_enabled: !!val })
-    toast({ text: val ? 'Chrome auto-hide on' : 'Chrome auto-hide off', type: 'success' })
-  } catch (e) {
-    presentationEnabled.value = !val   // revert the switch
-    toast({ text: `Could not update: ${e.message}`, type: 'error' })
-  } finally {
-    settingBusy.value = false
-  }
+  const ok = await save({ presentation_auto_apply_enabled: !!val },
+    { successMessage: val ? 'Chrome auto-hide on' : 'Chrome auto-hide off', errorPrefix: 'Could not update' })
+  if (!ok) presentationEnabled.value = !val   // revert the switch
 }
 async function onSavePresentation() {
-  settingBusy.value = true
-  try {
-    await mlSettings.patchSettings({
-      presentation_auto_apply_threshold: Number(presentationThresholdInput.value),
-      presentation_conflict_threshold: Number(presentationConflictInput.value),
-    })
-  } catch (e) {
-    toast({ text: `Could not save: ${e.message}`, type: 'error' })
-  } finally {
-    settingBusy.value = false
-  }
+  await save({
+    presentation_auto_apply_threshold: Number(presentationThresholdInput.value),
+    presentation_conflict_threshold: Number(presentationConflictInput.value),
+  })
 }
 
 async function onToggleProcess(val) {
-  settingBusy.value = true
-  try {
-    await mlSettings.patchSettings({ process_auto_apply_enabled: !!val })
-    toast({ text: val ? 'WIP auto-tag on' : 'WIP auto-tag off', type: 'success' })
-  } catch (e) {
-    processEnabled.value = !val   // revert the switch
-    toast({ text: `Could not update: ${e.message}`, type: 'error' })
-  } finally {
-    settingBusy.value = false
-  }
+  const ok = await save({ process_auto_apply_enabled: !!val },
+    { successMessage: val ? 'WIP auto-tag on' : 'WIP auto-tag off', errorPrefix: 'Could not update' })
+  if (!ok) processEnabled.value = !val   // revert the switch
 }
 async function onSaveProcess() {
-  settingBusy.value = true
-  try {
-    await mlSettings.patchSettings({
-      process_auto_apply_threshold: Number(processThresholdInput.value),
-      process_conflict_threshold: Number(processConflictInput.value),
-    })
-  } catch (e) {
-    toast({ text: `Could not save: ${e.message}`, type: 'error' })
-  } finally {
-    settingBusy.value = false
-  }
+  await save({
+    process_auto_apply_threshold: Number(processThresholdInput.value),
+    process_conflict_threshold: Number(processConflictInput.value),
+  })
 }
 function onPreview() { startSweep(true) }
 function onApplyNow() { startSweep(false) }