From 87b646b3a0af9ee30cd58b017ae51136de67d361 Mon Sep 17 00:00:00 2001
From: root <root@CT-50-claude.local>
Date: Wed, 30 Sep 2026 14:31:00 +0000
Subject: [PATCH 1/2] refactor(frontend): type alert capability endpoints and
 drop AlertsView casts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The five alert-capability endpoints returned untyped data, and the rule
editor worked around it with local interfaces — one of them wrong: the
modal declared Proxmox scope options as {id, name} while the server and
AlertRuleStepSource use {id, label}. AlertsView then bound fifteen props
and handlers through `as any`, which vue-tsc does not check and the
no-explicit-any lint rule cannot see in templates.

- api/alerts.ts types the capability GETs with the generated models
  (AlertSplitCapabilities, AlertDockerCapabilities, AlertHostCapabilities)
  plus AlertMetricCatalog for the {metrics} envelope; types/alert.ts adds
  AlertRuleCapabilities, the merged shape useAlertsPage builds.
- AlertRuleModal, AlertRuleStepSource and AlertRuleList drop their local
  copies for the generated types (AlertRule, AlertMetricCapability,
  AlertScopeOption, AlertDockerHostScope, ...).
- The modal emits the API AlertRulePayload; the form→API conversion (the
  form keeps explicit nulls for cleared values) happens in one helper
  instead of three casts.
- AlertsView has no `as any` left.

Root CLAUDE.md no longer claims every API response is typed and says
which modules still return untyped data.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CLAUDE.md                                     |  2 +-
 frontend/src/api/alerts.ts                    | 12 +--
 .../src/components/alerts/AlertRuleList.vue   | 48 +-----------
 .../components/alerts/AlertRuleModal.spec.ts  | 22 ++++--
 .../src/components/alerts/AlertRuleModal.vue  | 77 ++++++-------------
 .../components/alerts/AlertRuleStepSource.vue | 29 +++----
 frontend/src/composables/useAlertsPage.ts     | 23 +-----
 frontend/src/types/alert.ts                   | 27 ++++++-
 frontend/src/views/AlertsView.vue             | 30 ++++----
 9 files changed, 101 insertions(+), 169 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index c8d95513..2b04899d 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -80,7 +80,7 @@ Three independent Go/Vue modules: **server** (Go API), **agent** (Go collector),
 - [composables/](frontend/src/composables/) — `useWebSocket`, `useCommandStream`, `useDashboard`, `useHostDetail`, `useFormValidator`, `useToast`, `useConfirmDialog`, `usePagination`, …
 - [utils/](frontend/src/utils/) — formatters, chart theme, dockerPorts, cron, dayjs, httpErrorBus, statusClasses, …
 
-**TypeScript adoption**: all `.vue` files use `<script setup lang="ts">` (100% migrated). Composables, stores and `utils/` are `.ts`. The API + WebSocket payloads are fully typed against the generated models (see "Generated API types" below), including the dashboard / notification / IP-timeline consumers. One intentional residual remains: `useHostDetail.ts` keeps its 12 host-detail display refs as a local `AnyRecord` behind safe `asRecord`/`asRecordArray` coercers — the WS boundary feeding them is already typed (`WSHostSnapshot`), so this is a deliberate display-layer abstraction, not an unchecked wire contract. Typing it would cascade through the large `HostDetailView` + its sub-tabs for no contract-robustness gain.
+**TypeScript adoption**: all `.vue` files use `<script setup lang="ts">` (100% migrated). Composables, stores and `utils/` are `.ts`. WebSocket payloads and most API responses are typed against the generated models (see "Generated API types" below), including the dashboard / notification / IP-timeline consumers; some `api.get(` calls in the domain modules (mostly `api/proxmox.ts`, `api/hosts.ts`, `api/auth.ts`) still return untyped data — give them the generated response type when touching them rather than casting at the call site. One intentional residual remains: `useHostDetail.ts` keeps its 12 host-detail display refs as a local `AnyRecord` behind safe `asRecord`/`asRecordArray` coercers — the WS boundary feeding them is already typed (`WSHostSnapshot`), so this is a deliberate display-layer abstraction, not an unchecked wire contract. Typing it would cascade through the large `HostDetailView` + its sub-tabs for no contract-robustness gain.
 
 ### Agent ↔ Server protocol
 
diff --git a/frontend/src/api/alerts.ts b/frontend/src/api/alerts.ts
index 684c45ee..268bd2c8 100644
--- a/frontend/src/api/alerts.ts
+++ b/frontend/src/api/alerts.ts
@@ -1,16 +1,16 @@
 import { api } from './client'
-import type { AlertRule, AlertRulePayload } from '../types/alert'
+import type { AlertRule, AlertRulePayload, AlertMetricCatalog, AlertSplitCapabilities, AlertDockerCapabilities, AlertHostCapabilities } from '../types/alert'
 import type { AlertRuleTemplate, AlertRuleTemplateRequest, ApplyAlertRuleTemplateRequest, ApplyAlertRuleTemplateResult } from '../types/generated'
 
 // Re-exported so existing import sites keep working from the api barrel.
 export type { AlertRule, AlertRulePayload } from '../types/alert'
 
 export const alertsApi = {
-  getAgentAlertRuleCapabilities: () => api.get('/v1/alert-rules/capabilities/agent'),
-  getProxmoxAlertRuleCapabilities: () => api.get('/v1/alert-rules/capabilities/proxmox'),
-  getSyntheticAlertRuleCapabilities: () => api.get('/v1/alert-rules/capabilities/synthetic'),
-  getDockerAlertCapabilities: () => api.get('/v1/alert-rules/capabilities/docker'),
-  getHostCapabilities: (hostId: string) => api.get(`/v1/hosts/${hostId}/capabilities`),
+  getAgentAlertRuleCapabilities: () => api.get<AlertMetricCatalog>('/v1/alert-rules/capabilities/agent'),
+  getProxmoxAlertRuleCapabilities: () => api.get<AlertSplitCapabilities>('/v1/alert-rules/capabilities/proxmox'),
+  getSyntheticAlertRuleCapabilities: () => api.get<AlertMetricCatalog>('/v1/alert-rules/capabilities/synthetic'),
+  getDockerAlertCapabilities: () => api.get<AlertDockerCapabilities>('/v1/alert-rules/capabilities/docker'),
+  getHostCapabilities: (hostId: string) => api.get<AlertHostCapabilities>(`/v1/hosts/${hostId}/capabilities`),
   getAlertRules: () => api.get<AlertRule[]>('/v1/alert-rules'),
   createAlertRule: (payload: AlertRulePayload) => api.post('/v1/alert-rules', payload),
   updateAlertRule: (id: number, payload: AlertRulePayload) => api.patch(`/v1/alert-rules/${id}`, payload),
diff --git a/frontend/src/components/alerts/AlertRuleList.vue b/frontend/src/components/alerts/AlertRuleList.vue
index 74ece5d3..78be0531 100644
--- a/frontend/src/components/alerts/AlertRuleList.vue
+++ b/frontend/src/components/alerts/AlertRuleList.vue
@@ -223,6 +223,7 @@ import { IconPencil, IconTrash } from '@tabler/icons-vue'
 import { formatDurationSecs } from '../../utils/formatters'
 import { getAlertMetricMeta } from '../../utils/alertMetrics'
 import { notificationChannelBadgeClass } from '../../utils/categoryBadges'
+import type { AlertRule } from '../../types/alert'
 
 const { t } = useI18n()
 
@@ -231,53 +232,6 @@ interface Host {
   name?: string
 }
 
-interface ProxmoxScope {
-  scope_mode?: string
-  connection_id?: string | number
-  node_id?: string | number
-  guest_id?: string | number
-  storage_id?: string | number
-  disk_id?: string | number
-}
-
-interface CommandTrigger {
-  module: string
-  action: string
-  target?: string
-}
-
-interface AlertActions {
-  channels?: string[]
-  command_trigger?: CommandTrigger | null
-}
-
-interface DockerScope {
-  scope_mode?: string
-  host_id?: string
-  container_id?: string
-  project_name?: string
-}
-
-interface AlertRule {
-  id: string | number
-  name?: string
-  enabled?: boolean
-  host_id?: string
-  source_type?: string
-  metric: string
-  operator: string
-  threshold_warn?: number
-  threshold_crit?: number
-  threshold_clear_warn?: number | null
-  threshold_clear_crit?: number | null
-  duration_seconds?: number
-  active_incident_count?: number
-  last_fired?: string
-  actions?: AlertActions
-  proxmox_scope?: ProxmoxScope
-  docker_scope?: DockerScope
-}
-
 function channelLabel(channel: string): string {
   if (channel === 'browser') return t('alerts.channelBrowserLabel')
   if (channel === 'smtp') return t('alerts.channelEmail')
diff --git a/frontend/src/components/alerts/AlertRuleModal.spec.ts b/frontend/src/components/alerts/AlertRuleModal.spec.ts
index 385dcda3..5ddd0d38 100644
--- a/frontend/src/components/alerts/AlertRuleModal.spec.ts
+++ b/frontend/src/components/alerts/AlertRuleModal.spec.ts
@@ -13,13 +13,23 @@ vi.mock('../../api', () => ({
 }))
 
 import AlertRuleModal from './AlertRuleModal.vue'
+import type { AlertMetricCapability, AlertRuleCapabilities } from '../../types/alert'
 
-const capabilities = {
-  metrics: [
-    { metric: 'cpu', label: 'CPU', icon: '', supports_host_filter: true },
-    { metric: 'memory', label: 'Mémoire', icon: '', supports_host_filter: true },
-  ],
-  proxmox_scope: { connections: [], nodes: [], storages: [], guests: [], disks: [] },
+function metric(key: string, label: string): AlertMetricCapability {
+  return {
+    metric: key, label, unit: '%', icon: '', badge_class: '',
+    supports_threshold: true, supports_duration: true, supports_host_filter: true,
+  }
+}
+
+const agentMetrics = [metric('cpu', 'CPU'), metric('memory', 'Mémoire')]
+const capabilities: AlertRuleCapabilities = {
+  metrics: agentMetrics,
+  agent_metrics: agentMetrics,
+  proxmox_metrics: [],
+  synthetic_metrics: [],
+  docker_metrics: [],
+  proxmox_scope: { modes: [], connections: [], nodes: [], storages: [], guests: [], disks: [] },
 }
 
 function mountModal(props: Record<string, unknown> = {}) {
diff --git a/frontend/src/components/alerts/AlertRuleModal.vue b/frontend/src/components/alerts/AlertRuleModal.vue
index 5c34a0db..695b5062 100644
--- a/frontend/src/components/alerts/AlertRuleModal.vue
+++ b/frontend/src/components/alerts/AlertRuleModal.vue
@@ -205,7 +205,10 @@ import AlertRuleStepSource from './AlertRuleStepSource.vue'
 import AlertRuleStepConditions from './AlertRuleStepConditions.vue'
 import AlertRuleStepNotifications from './AlertRuleStepNotifications.vue'
 import { useAlertRuleForm, type AlertRuleInput } from '../../composables/useAlertRuleForm'
-import type { AlertRulePayload as ApiAlertRulePayload } from '../../types/alert'
+import type {
+  AlertRule, AlertRulePayload as ApiAlertRulePayload, AlertRuleCapabilities, AlertMetricCapability,
+  AlertDockerCapabilities, AlertDockerHostScope, AlertHostCapabilities,
+} from '../../types/alert'
 import { useModalChrome } from '../../composables/useModalChrome'
 import { ALERT_METRIC_ORDER, getAlertMetricMeta } from '../../utils/alertMetrics'
 import { ALERT_RULE_PRESETS, type AlertRulePreset } from '../../utils/alertRulePresets'
@@ -216,36 +219,6 @@ interface Host {
   name?: string
 }
 
-interface MetricMeta {
-  metric: string
-  label: string
-  icon?: string
-  unit?: string
-  supports_host_filter?: boolean
-}
-
-interface ProxmoxScopeItem {
-  id: string | number
-  name?: string
-  [key: string]: unknown
-}
-
-interface Capabilities {
-  metrics?: MetricMeta[]
-  proxmox_scope?: {
-    connections?: ProxmoxScopeItem[]
-    nodes?: ProxmoxScopeItem[]
-    storages?: ProxmoxScopeItem[]
-    guests?: ProxmoxScopeItem[]
-    disks?: ProxmoxScopeItem[]
-  }
-}
-
-interface AlertRule {
-  id?: string | number
-  [key: string]: unknown
-}
-
 interface TestResult {
   has_data?: boolean
   [key: string]: unknown
@@ -256,16 +229,11 @@ interface TestResults {
   [key: string]: unknown
 }
 
-interface HostMetrics {
-  metrics?: MetricMeta[]
-  [key: string]: unknown
-}
-
 const props = withDefaults(defineProps<{
   visible?: boolean
   rule?: AlertRule | null
   hosts?: Host[]
-  capabilities?: Capabilities | null
+  capabilities?: AlertRuleCapabilities | null
   capabilitiesLoading?: boolean
   capabilitiesError?: string
   saving?: boolean
@@ -283,7 +251,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   (e: 'close'): void
-  (e: 'submit', payload: unknown): void
+  (e: 'submit', payload: ApiAlertRulePayload): void
 }>()
 
 const { t } = useI18n()
@@ -295,7 +263,7 @@ const browserPermission = ref<NotificationPermission | 'unsupported'>(
   typeof Notification !== 'undefined' ? Notification.permission : 'unsupported'
 )
 const step = ref(1)
-const hostMetrics = ref<HostMetrics | null>(null)
+const hostMetrics = ref<AlertHostCapabilities | null>(null)
 const hostMetricsLoading = ref(false)
 const hostMetricsError = ref('')
 
@@ -323,8 +291,8 @@ const metricCards = computed(() => {
   const fromCapabilities = props.capabilities?.metrics
   if (Array.isArray(fromCapabilities) && fromCapabilities.length > 0) {
     return fromCapabilities
-      .filter((metric: MetricMeta) => matchesSource(metric.metric))
-      .map((metric: MetricMeta) => ({
+      .filter((metric: AlertMetricCapability) => matchesSource(metric.metric))
+      .map((metric: AlertMetricCapability) => ({
         value: metric.metric,
         label: metric.label,
         icon: metric.icon || getAlertMetricMeta(metric.metric).icon,
@@ -342,17 +310,13 @@ const proxmoxStorages = computed(() => props.capabilities?.proxmox_scope?.storag
 const proxmoxGuests = computed(() => props.capabilities?.proxmox_scope?.guests || [])
 const proxmoxDisks = computed(() => props.capabilities?.proxmox_scope?.disks || [])
 
-interface DockerContainer { id: string; name: string; image: string; state: string }
-interface DockerProject { name: string; services: string[] }
-interface DockerHostOption { host_id: string; host_name: string; containers: DockerContainer[]; projects: DockerProject[] }
-
-const dockerCapabilities = ref<{ hosts: DockerHostOption[] } | null>(null)
+const dockerCapabilities = ref<AlertDockerCapabilities | null>(null)
 const dockerCapabilitiesLoading = ref(false)
-const dockerHosts = computed<DockerHostOption[]>(() => dockerCapabilities.value?.hosts || [])
+const dockerHosts = computed<AlertDockerHostScope[]>(() => dockerCapabilities.value?.hosts || [])
 
-const metricMetaByKey = computed<Record<string, MetricMeta>>(() => {
+const metricMetaByKey = computed<Record<string, AlertMetricCapability>>(() => {
   const items = props.capabilities?.metrics || []
-  return Object.fromEntries(items.map((item: MetricMeta) => [item.metric, item]))
+  return Object.fromEntries(items.map((item) => [item.metric, item]))
 })
 
 const metricAllowsStorageScope = computed(() => form.value.metric === 'proxmox_storage_percent')
@@ -448,7 +412,7 @@ watch(
       const response = await apiClient.getDockerAlertCapabilities()
       dockerCapabilities.value = response.data
     } catch {
-      dockerCapabilities.value = { hosts: [] }
+      dockerCapabilities.value = { metrics: [], hosts: [] }
     } finally {
       dockerCapabilitiesLoading.value = false
     }
@@ -562,11 +526,18 @@ onUnmounted(() => {
   if (autoTestTimer) clearTimeout(autoTestTimer)
 })
 
+// The form payload keeps explicit nulls for cleared hysteresis values and
+// scopes (the server treats null as "unset"), where the API type only says
+// optional — convert in this one place.
+function apiPayload(): ApiAlertRulePayload {
+  return buildPayload() as unknown as ApiAlertRulePayload
+}
+
 async function submit() {
   if (channelBrowser.value && typeof Notification !== 'undefined' && Notification.permission !== 'granted') {
     browserPermission.value = await Notification.requestPermission()
   }
-  emit('submit', buildPayload())
+  emit('submit', apiPayload())
 }
 
 async function testAlert(): Promise<void> {
@@ -575,7 +546,7 @@ async function testAlert(): Promise<void> {
   testResults.value = null
   testError.value = ''
   try {
-    const response = await apiClient.testAlertRule(buildPayload() as unknown as ApiAlertRulePayload)
+    const response = await apiClient.testAlertRule(apiPayload())
     testResults.value = response.data
   } catch (err: unknown) {
     testResults.value = null
@@ -594,7 +565,7 @@ async function downloadTestLogs(): Promise<void> {
   if (downloadingLogs.value || !canDownloadTestLogs.value) return
   downloadingLogs.value = true
   try {
-    const response = await apiClient.downloadAlertRuleTestLogs(buildPayload() as unknown as ApiAlertRulePayload)
+    const response = await apiClient.downloadAlertRuleTestLogs(apiPayload())
     const blob = response.data instanceof Blob ? response.data : new Blob([response.data], { type: 'text/plain' })
     const url = URL.createObjectURL(blob)
     const link = document.createElement('a')
diff --git a/frontend/src/components/alerts/AlertRuleStepSource.vue b/frontend/src/components/alerts/AlertRuleStepSource.vue
index 1d039c10..81edbd57 100644
--- a/frontend/src/components/alerts/AlertRuleStepSource.vue
+++ b/frontend/src/components/alerts/AlertRuleStepSource.vue
@@ -484,30 +484,19 @@ import { useI18n } from 'vue-i18n'
 import type { AlertRuleFormData, DockerScope } from '../../composables/useAlertRuleForm'
 import { getAlertMetricMeta } from '../../utils/alertMetrics'
 import { getEntityStateLabel } from '../../utils/statusClasses'
+import type { AlertRuleCapabilities, AlertHostCapabilities, AlertScopeOption, AlertDockerHostScope } from '../../types/alert'
 
-interface ScopeOption { id: string; label: string }
 interface MetricCard { value: string; label: string; icon: string }
 interface HostOption { id: string; name: string }
-interface HostMetrics { metrics?: Array<{ metric: string; label: string; icon?: string }> }
-interface Capabilities { metrics?: Array<{ metric: string }> }
-
-interface DockerContainer { id: string; name: string; image: string; state: string }
-interface DockerProject { name: string; services: string[] }
-interface DockerHostOption {
-  host_id: string
-  host_name: string
-  containers: DockerContainer[]
-  projects: DockerProject[]
-}
 
 const props = defineProps<{
   form: AlertRuleFormData
   rule?: { id?: number | string } | null
   hosts: HostOption[]
-  capabilities?: Capabilities | null
+  capabilities?: Pick<AlertRuleCapabilities, 'metrics'> | null
   capabilitiesLoading?: boolean
   capabilitiesError?: string
-  hostMetrics?: HostMetrics | null
+  hostMetrics?: Pick<AlertHostCapabilities, 'metrics'> | null
   hostMetricsLoading?: boolean
   hostMetricsError?: string
   metricCards: MetricCard[]
@@ -515,12 +504,12 @@ const props = defineProps<{
   metricAllowsGuestScope: boolean
   metricAllowsStorageScope: boolean
   metricAllowsDiskScope: boolean
-  proxmoxConnections: ScopeOption[]
-  proxmoxNodes: ScopeOption[]
-  proxmoxStorages: ScopeOption[]
-  proxmoxGuests: ScopeOption[]
-  proxmoxDisks: ScopeOption[]
-  dockerHosts: DockerHostOption[]
+  proxmoxConnections: AlertScopeOption[]
+  proxmoxNodes: AlertScopeOption[]
+  proxmoxStorages: AlertScopeOption[]
+  proxmoxGuests: AlertScopeOption[]
+  proxmoxDisks: AlertScopeOption[]
+  dockerHosts: AlertDockerHostScope[]
   dockerCapabilitiesLoading?: boolean
 }>()
 
diff --git a/frontend/src/composables/useAlertsPage.ts b/frontend/src/composables/useAlertsPage.ts
index cbc633cf..f6aedbfe 100644
--- a/frontend/src/composables/useAlertsPage.ts
+++ b/frontend/src/composables/useAlertsPage.ts
@@ -7,27 +7,10 @@ import apiClient, { getApiErrorMessage } from '../api'
 import { storeToRefs } from 'pinia'
 import type { Host } from '../types/host'
 import type { ReleaseTracker } from '../types/tracker'
-import type { AlertRule } from '../types/alert'
+import type { AlertRule, AlertRuleCapabilities, AlertRulePayload } from '../types/alert'
 import type { WSNotificationMessage } from '../types/ws'
 import { i18n } from '../i18n'
 
-interface AlertRuleCapabilities {
-  metrics: unknown[]
-  agent_metrics?: unknown[]
-  proxmox_metrics?: unknown[]
-  synthetic_metrics?: unknown[]
-  docker_metrics?: unknown[]
-  proxmox_scope: {
-    modes: string[]
-    connections: unknown[]
-    nodes: unknown[]
-    storages: unknown[]
-    guests: unknown[]
-    disks: unknown[]
-  }
-}
-
-type AlertRulePayload = Record<string, unknown>
 
 interface UseAlertsPageApi {
   alertsTab: Ref<string>
@@ -55,7 +38,7 @@ interface UseAlertsPageApi {
   toggleEnabled: (rule: AlertRule) => Promise<void>
   deleteAlert: (rule: AlertRule) => Promise<void>
   closeModal: () => void
-  formatDate: (dateStr: string) => string
+  formatDate: (dateStr: string | undefined) => string
   onWebSocketAlert: (payload: WSNotificationMessage) => void
 }
 
@@ -221,7 +204,7 @@ export function useAlertsPage(): UseAlertsPageApi {
     saveError.value = ''
   }
 
-  function formatDate(dateStr: string): string {
+  function formatDate(dateStr: string | undefined): string {
     return formatLocaleDateTime(dateStr)
   }
 
diff --git a/frontend/src/types/alert.ts b/frontend/src/types/alert.ts
index 482843ac..5c8dff7e 100644
--- a/frontend/src/types/alert.ts
+++ b/frontend/src/types/alert.ts
@@ -2,7 +2,7 @@
 // AlertRulePayload is a relaxed (all-optional) create/update body that the rule
 // form builds incrementally — the generated AlertRuleCreate requires every field,
 // so it isn't a drop-in replacement and stays defined here.
-import type { AlertSourceType, ProxmoxMetricScope, AlertActions } from './generated'
+import type { AlertSourceType, ProxmoxMetricScope, AlertActions, AlertMetricCapability, AlertProxmoxScope } from './generated'
 
 export type {
   AlertRule,
@@ -11,8 +11,33 @@ export type {
   CommandTrigger,
   AlertIncident,
   AlertSourceType,
+  AlertMetricCapability,
+  AlertScopeOption,
+  AlertProxmoxScope,
+  AlertSplitCapabilities,
+  AlertDockerCapabilities,
+  AlertDockerHostScope,
+  AlertHostCapabilities,
 } from './generated'
 
+/** GET /alert-rules/capabilities/{agent,synthetic}: a bare metric catalog. */
+export interface AlertMetricCatalog {
+  metrics: AlertMetricCapability[]
+}
+
+/**
+ * Every metric catalog merged for the rule editor (useAlertsPage): all
+ * metrics, the per-source lists, and the Proxmox scope options.
+ */
+export interface AlertRuleCapabilities {
+  metrics: AlertMetricCapability[]
+  agent_metrics: AlertMetricCapability[]
+  proxmox_metrics: AlertMetricCapability[]
+  synthetic_metrics: AlertMetricCapability[]
+  docker_metrics: AlertMetricCapability[]
+  proxmox_scope: AlertProxmoxScope
+}
+
 export interface AlertRulePayload {
   id?: number
   name?: string
diff --git a/frontend/src/views/AlertsView.vue b/frontend/src/views/AlertsView.vue
index 0341fbe0..b950df47 100644
--- a/frontend/src/views/AlertsView.vue
+++ b/frontend/src/views/AlertsView.vue
@@ -50,7 +50,7 @@
     >
       <template #warroom>
         <WarRoomPanel
-          :incidents="(incidents as any)"
+          :incidents="incidents"
           :loading="incidentsLoading"
           :error="incidentsError"
           :is-admin="auth.isAdmin"
@@ -63,23 +63,23 @@
 
       <template #rules>
         <AlertRuleList
-          :rules="(rules as any)"
-          :hosts="(hosts as any)"
+          :rules="rules"
+          :hosts="hosts"
           :loading="loading"
           :fetched="fetched"
           :error="saveError"
           :is-admin="auth.isAdmin"
-          :format-date="(formatDate as any)"
+          :format-date="formatDate"
           @add="startAddAlert"
-          @edit="(startEditAlert as any)"
-          @toggle="(onToggleEnabled as any)"
-          @delete="(deleteAlert as any)"
+          @edit="startEditAlert"
+          @toggle="onToggleEnabled"
+          @delete="deleteAlert"
         />
       </template>
 
       <template #releases>
         <AlertReleaseSummary
-          :trackers="(trackers as any)"
+          :trackers="trackers"
           :loading="trackersLoading"
           :error="trackersError"
         />
@@ -87,7 +87,7 @@
 
       <template #incidents>
         <AlertIncidentList
-          :incidents="(incidents as any)"
+          :incidents="incidents"
           :loading="incidentsLoading"
           :error="incidentsError"
           :active-incident-count="activeIncidentCount"
@@ -123,7 +123,7 @@
     <AlertRuleTemplateModal
       :visible="showTemplateModal"
       :template="editingTemplate"
-      :agent-metrics="(capabilities?.agent_metrics as any) || []"
+      :agent-metrics="capabilities?.agent_metrics || []"
       :saving="templateSaving"
       :error="templateSaveError"
       @close="closeTemplateModal"
@@ -132,7 +132,7 @@
     <AlertRuleTemplateApplyModal
       :visible="showApplyModal"
       :template="applyingTemplate"
-      :hosts="(hosts as any)"
+      :hosts="hosts"
       :applying="applying"
       :error="applyError"
       :result="applyResult"
@@ -143,15 +143,15 @@
     <ErrorBoundary :title="t('alerts.ruleFormLoadErrorTitle')">
       <AlertRuleModal
         :visible="showModal"
-        :rule="(editingRule as any)"
-        :hosts="(hosts as any)"
-        :capabilities="(capabilities as any)"
+        :rule="editingRule"
+        :hosts="hosts"
+        :capabilities="capabilities"
         :capabilities-loading="capabilitiesLoading"
         :capabilities-error="capabilitiesError"
         :saving="saving"
         :error="saveError"
         @close="closeModal"
-        @submit="(saveAlert as any)"
+        @submit="saveAlert"
       />
     </ErrorBoundary>
   </div>

From 3af0beb1a3251451127e031e669683e87101b224 Mon Sep 17 00:00:00 2001
From: root <root@CT-50-claude.local>
Date: Wed, 30 Sep 2026 19:31:35 +0000
Subject: [PATCH 2/2] test(frontend): cover the alert rule "Tester" action

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/alerts/AlertRuleModal.spec.ts  | 44 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/alerts/AlertRuleModal.spec.ts b/frontend/src/components/alerts/AlertRuleModal.spec.ts
index 5ddd0d38..1ebcf6a1 100644
--- a/frontend/src/components/alerts/AlertRuleModal.spec.ts
+++ b/frontend/src/components/alerts/AlertRuleModal.spec.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
 import { setLocale } from '../../i18n'
 
@@ -12,6 +12,7 @@ vi.mock('../../api', () => ({
   },
 }))
 
+import apiClient from '../../api'
 import AlertRuleModal from './AlertRuleModal.vue'
 import type { AlertMetricCapability, AlertRuleCapabilities } from '../../types/alert'
 
@@ -156,4 +157,45 @@ describe('AlertRuleModal (characterization)', () => {
 
     expect((wrapper.find('input[placeholder="Ex: CPU élevé sur serveur web"]').element as HTMLInputElement).value).toBe('CPU élevé')
   })
+
+  it('"Tester" sends the rule being edited and shows the API error when the test fails', async () => {
+    // Earlier tests leave mounted modals whose step-2 preview timers can still
+    // fire, so only calls carrying this rule's name are counted.
+    const name = 'Tester rule'
+    const testAlertRule = vi.mocked(apiClient.testAlertRule)
+    const callsForRule = () => testAlertRule.mock.calls.filter(([p]) => (p as { name?: string }).name === name)
+    testAlertRule.mockImplementation(async (payload) => {
+      if ((payload as { name?: string }).name === name) throw { response: { data: { error: 'métrique inconnue' } } }
+      return { data: { results: [] } } as never
+    })
+    const rule = {
+      id: 1, name, source_type: 'agent', metric: 'cpu', operator: '>',
+      threshold_warn: 70, threshold_crit: 85, duration: 0, actions: { channels: [] },
+    }
+    // Entering step 2 schedules this modal's automatic preview test; fake
+    // timers let it run before the manual click is counted.
+    vi.useFakeTimers()
+    try {
+      const wrapper = mountModal({ rule })
+      await nextTick()
+      for (let i = 0; i < 2; i++) {
+        await wrapper.findAll('button').find((b) => b.text().includes('Suivant'))!.trigger('click')
+        await nextTick()
+      }
+      await vi.runAllTimersAsync()
+      await flushPromises()
+      const before = callsForRule().length
+
+      await wrapper.findAll('button').find((b) => b.text() === 'Tester')!.trigger('click')
+      await flushPromises()
+
+      expect(callsForRule().length - before).toBe(1)
+      const calls = callsForRule()
+      expect(calls[calls.length - 1][0]).toMatchObject({ metric: 'cpu', threshold_crit: 85 })
+      expect(wrapper.text()).toContain('métrique inconnue')
+    } finally {
+      vi.useRealTimers()
+      testAlertRule.mockImplementation(async () => ({ data: { results: [] } }) as never)
+    }
+  })
 })