From 57bf46aa7e569906ad9b2a9a29d4310fd15f9519 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20S=C3=A1nchez?= <sanchez.saez.alex01@gmail.com>
Date: Fri, 21 Aug 2026 10:53:19 -0600
Subject: [PATCH 1/2] fix[frontend](alerts): expanded alert toggle selector

---
 .../features/alerts/components/alert-row.tsx  | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/features/alerts/components/alert-row.tsx b/frontend/src/features/alerts/components/alert-row.tsx
index 2cafb97c9..b8031247f 100644
--- a/frontend/src/features/alerts/components/alert-row.tsx
+++ b/frontend/src/features/alerts/components/alert-row.tsx
@@ -47,19 +47,25 @@ export function AlertRow({
       <td className={`${TD} relative w-[6px] p-0`}>
         <span className={cn('absolute inset-y-0 left-0 w-[3px]', sev.bar)} title={t(`alerts.severity.${sk}`)} aria-hidden />
       </td>
-      <td className={TD}>
-        <button
-          onClick={(e) => {
-            e.stopPropagation()
-            onToggle()
-          }}
+      <td
+        className={cn(TD, 'cursor-pointer relative')}
+        onClick={(e) => {
+          e.stopPropagation()
+          onToggle()
+        }}
+      >
+        <span
           className={cn(
             'flex h-4 w-4 items-center justify-center rounded border',
             checked ? 'border-primary bg-primary' : 'border-input'
           )}
         >
           {checked && <span className="h-2 w-2 rounded-sm bg-primary-foreground" />}
-        </button>
+        </span>
+
+        <span className='p-8 absolute -top-0.5   -translate-y-0.5'>
+        </span>
+
       </td>
       <td className={TD}>
         <button

From 16380da07578c3cdc6cf091d51d88a81f1cf21c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20S=C3=A1nchez?= <sanchez.saez.alex01@gmail.com>
Date: Fri, 21 Aug 2026 11:29:33 -0600
Subject: [PATCH 2/2] feat[frontend](incidents): create-incident wizard

---
 .../create-incident-step-alerts.tsx           | 111 +++++++++++++
 .../create-incident-step-details.tsx          |  45 +++++
 .../components/create-incident-wizard.tsx     | 156 ++++++++++++++++++
 .../components/incident-alert-row.tsx         |  97 +++++++++++
 .../incident-alerts-picker-header.tsx         |  28 ++++
 .../components/incidents-toolbar.tsx          |   9 +-
 .../incidents/pages/IncidentsPage.tsx         |  15 ++
 frontend/src/shared/i18n/locales/de.json      |  21 ++-
 frontend/src/shared/i18n/locales/en.json      |  21 ++-
 frontend/src/shared/i18n/locales/es.json      |  21 ++-
 frontend/src/shared/i18n/locales/fr.json      |  21 ++-
 frontend/src/shared/i18n/locales/it.json      |  21 ++-
 frontend/src/shared/i18n/locales/pt.json      |  21 ++-
 frontend/src/shared/i18n/locales/ru.json      |  21 ++-
 14 files changed, 593 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/features/incidents/components/create-incident-step-alerts.tsx
 create mode 100644 frontend/src/features/incidents/components/create-incident-step-details.tsx
 create mode 100644 frontend/src/features/incidents/components/create-incident-wizard.tsx
 create mode 100644 frontend/src/features/incidents/components/incident-alert-row.tsx
 create mode 100644 frontend/src/features/incidents/components/incident-alerts-picker-header.tsx

diff --git a/frontend/src/features/incidents/components/create-incident-step-alerts.tsx b/frontend/src/features/incidents/components/create-incident-step-alerts.tsx
new file mode 100644
index 000000000..e4681a394
--- /dev/null
+++ b/frontend/src/features/incidents/components/create-incident-step-alerts.tsx
@@ -0,0 +1,111 @@
+import { useEffect, useMemo, useState } from 'react'
+import { AlertTriangle, Loader2 } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { InfiniteScrollSentinel } from '@/shared/components/ui/infinite-scroll'
+import { AlertsFilterBar } from '@/features/alerts/components/alerts-filter-bar'
+import { useAlertsList } from '@/features/alerts/hooks/use-alerts-list'
+import { useAlertTagCatalog } from '@/features/alerts/hooks/use-alert-tag-catalog'
+import { FILTER_OPS } from '@/features/alerts/lib/alert-meta'
+import type { Alert, CustomFilter, FilterType } from '@/features/alerts/types/alert.types'
+import { IncidentAlertRow } from './incident-alert-row'
+import { IncidentAlertsPickerHeader } from './incident-alerts-picker-header'
+
+const COLS = 5
+
+export function CreateIncidentStepAlerts({
+  selected,
+  onToggle,
+  onToggleAll,
+  onAlertsChange,
+}: {
+  selected: Set<string>
+  onToggle: (id: string) => void
+  onToggleAll: (page: Alert[]) => void
+  onAlertsChange: (alerts: Alert[]) => void
+}) {
+  const { t } = useTranslation()
+  const [customFilters, setCustomFilters] = useState<CustomFilter[]>([])
+  const [page, setPage] = useState(0)
+  const pageSize = 50
+
+  const filters = useMemo<FilterType[]>(() => {
+    const f: FilterType[] = [{ field: 'parentId', operator: 'IS', value: '' }]
+    for (const cf of customFilters) {
+      const needsValue = FILTER_OPS.find((o) => o.id === cf.operator)?.needsValue ?? true
+      f.push({ field: cf.field, operator: cf.operator, value: needsValue ? cf.value : undefined })
+    }
+    return f
+  }, [customFilters])
+
+  const { alerts, total, hasMore, loading, error, refresh } = useAlertsList(page, pageSize, filters)
+  const { tagCatalog } = useAlertTagCatalog(() => {})
+
+  useEffect(() => { onAlertsChange(alerts) }, [alerts, onAlertsChange])
+
+  const allChecked = alerts.length > 0 && alerts.every((a) => selected.has(a.id))
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="shrink-0">
+        <AlertsFilterBar
+          filters={customFilters}
+          onAdd={(cf) => { setCustomFilters((c) => [...c, cf]); setPage(0) }}
+          onUpdate={(i, cf) => { setCustomFilters((c) => c.map((f, idx) => (idx === i ? cf : f))); setPage(0) }}
+          onRemove={(i) => { setCustomFilters((c) => c.filter((_, idx) => idx !== i)); setPage(0) }}
+          onClear={() => { setCustomFilters([]); setPage(0) }}
+        />
+      </div>
+
+      <div className="mt-3 flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card">
+        <div className="min-h-0 flex-1 overflow-auto">
+          <table className="min-w-full border-collapse">
+            <IncidentAlertsPickerHeader allChecked={allChecked} onTogglePage={() => onToggleAll(alerts)} />
+            <tbody>
+              {loading && alerts.length === 0 ? (
+                <tr>
+                  <td colSpan={COLS} className="px-6 py-16 text-center text-sm text-muted-foreground">
+                    <Loader2 className="mx-auto h-4 w-4 animate-spin" /> {t('alerts.list.loading')}
+                  </td>
+                </tr>
+              ) : error ? (
+                <tr>
+                  <td colSpan={COLS} className="px-6 py-16 text-center text-sm">
+                    <AlertTriangle size={16} className="mr-1 inline text-amber-500" />
+                    {t('alerts.list.loadError')}
+                    <button onClick={refresh} className="ml-2 text-primary hover:underline">
+                      {t('alerts.list.retry')}
+                    </button>
+                  </td>
+                </tr>
+              ) : alerts.length === 0 ? (
+                <tr>
+                  <td colSpan={COLS} className="px-6 py-16 text-center text-sm text-muted-foreground">
+                    {t('alerts.list.empty')}
+                  </td>
+                </tr>
+              ) : (
+                alerts.map((a) => (
+                  <IncidentAlertRow
+                    key={a.id}
+                    alert={a}
+                    tagCatalog={tagCatalog}
+                    checked={selected.has(a.id)}
+                    onToggle={() => onToggle(a.id)}
+                  />
+                ))
+              )}
+            </tbody>
+          </table>
+          {alerts.length > 0 && (
+            <InfiniteScrollSentinel
+              onReach={() => setPage((p) => p + 1)}
+              hasMore={hasMore}
+              loading={loading}
+              endLabel={t('common.allLoaded', { count: total })}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/features/incidents/components/create-incident-step-details.tsx b/frontend/src/features/incidents/components/create-incident-step-details.tsx
new file mode 100644
index 000000000..aee132abe
--- /dev/null
+++ b/frontend/src/features/incidents/components/create-incident-step-details.tsx
@@ -0,0 +1,45 @@
+import { useTranslation } from 'react-i18next'
+import { Input } from '@/shared/components/ui/input'
+
+export function CreateIncidentStepDetails({
+  name,
+  description,
+  onChangeName,
+  onChangeDescription,
+}: {
+  name: string
+  description: string
+  onChangeName: (v: string) => void
+  onChangeDescription: (v: string) => void
+}) {
+  const { t } = useTranslation()
+  return (
+    <div className="space-y-4">
+      <div className="space-y-1.5">
+        <label className="text-sm font-medium">
+          {t('incidents.create.details.nameLabel')}
+          <span className="ml-0.5 text-destructive">*</span>
+        </label>
+        <Input
+          type="text"
+          value={name}
+          onChange={(e) => onChangeName(e.target.value)}
+          placeholder={t('incidents.create.details.namePlaceholder')}
+          required
+        />
+      </div>
+      <div className="space-y-1.5">
+        <label className="text-sm font-medium">
+          {t('incidents.create.details.descriptionLabel')}
+        </label>
+        <textarea
+          value={description}
+          onChange={(e) => onChangeDescription(e.target.value)}
+          placeholder={t('incidents.create.details.descriptionPlaceholder')}
+          rows={4}
+          className="flex w-full rounded-md border border-input bg-background/40 px-3 py-2 text-sm placeholder:text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/features/incidents/components/create-incident-wizard.tsx b/frontend/src/features/incidents/components/create-incident-wizard.tsx
new file mode 100644
index 000000000..39baaae3a
--- /dev/null
+++ b/frontend/src/features/incidents/components/create-incident-wizard.tsx
@@ -0,0 +1,156 @@
+import { useCallback, useMemo, useState } from 'react'
+import { ArrowLeft, ArrowRight, Loader2, X } from 'lucide-react'
+import { toast } from 'sonner'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/shared/components/ui/button'
+import type { Alert } from '@/features/alerts/types/alert.types'
+import { STATUS_BY_VALUE, STATUS_VALUE } from '@/features/alerts/types/alert.types'
+import { incidentsHttpService, IncidentsHttpError } from '../services/incidents-http.service'
+import type { AlertLinkItem, CreateIncidentInput } from '../types/incident.types'
+import { CreateIncidentStepDetails } from './create-incident-step-details'
+import { CreateIncidentStepAlerts } from './create-incident-step-alerts'
+
+export function CreateIncidentWizard({ onClose, onCreated }: { onClose: () => void; onCreated: () => void }) {
+  const { t } = useTranslation()
+  const [step, setStep] = useState<1 | 2>(1)
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+  const [alertsById, setAlertsById] = useState<Map<string, Alert>>(new Map())
+  const [busy, setBusy] = useState(false)
+
+  const onAlertsChange = useCallback((alerts: Alert[]) => {
+    setAlertsById((prev) => {
+      const next = new Map(prev)
+      alerts.forEach((a) => next.set(a.id, a))
+      return next
+    })
+  }, [])
+
+  const toggle = (id: string) =>
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+
+  const toggleAll = (page: Alert[]) =>
+    setSelected((prev) => {
+      const next = new Set(prev)
+      const allOn = page.length > 0 && page.every((a) => next.has(a.id))
+      if (allOn) page.forEach((a) => next.delete(a.id))
+      else page.forEach((a) => next.add(a.id))
+      return next
+    })
+
+  const alertList = useMemo<AlertLinkItem[]>(
+    () =>
+      [...selected]
+        .map((id) => alertsById.get(id))
+        .filter((a): a is Alert => !!a)
+        .map((a) => ({
+          alertId: a.id,
+          alertName: a.name || a.id,
+          alertSeverity: a.severity ?? 'low',
+          alertStatus: STATUS_VALUE[STATUS_BY_VALUE[a.status ?? ''] ?? 'open'],
+        })),
+    [selected, alertsById],
+  )
+
+  const trimmedName = name.trim()
+  const canProceed = trimmedName.length > 0
+  const canSubmit = canProceed && selected.size > 0 && !busy
+
+  const payload = useMemo<CreateIncidentInput>(
+    () => ({
+      incidentName: trimmedName,
+      incidentDescription: description.trim() || undefined,
+      alertList,
+    }),
+    [trimmedName, description, alertList],
+  )
+
+  const submit = async () => {
+    if (!canSubmit) return
+    setBusy(true)
+    try {
+      await incidentsHttpService.create(payload)
+      toast.success(t('incidents.create.success'))
+      onCreated()
+    } catch (e) {
+      toast.error(e instanceof IncidentsHttpError ? e.message : t('incidents.create.error'))
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="flex h-full min-h-0 w-full flex-col px-6 pb-6 pt-3">
+      <header className="flex items-center justify-between border-b border-border pb-3">
+        <div className="flex items-center gap-3">
+          <h1 className="text-base font-semibold">{t('incidents.create.title')}</h1>
+          <span className="text-xs text-muted-foreground">
+            {t('incidents.create.stepIndicator', { current: step, total: 2 })}
+          </span>
+        </div>
+        <button
+          onClick={onClose}
+          className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+          aria-label={t('common.actions.close')}
+        >
+          <X size={16} />
+        </button>
+      </header>
+
+      <div className="mt-4 flex min-h-0 flex-1 flex-col">
+        {step === 1 ? (
+          <div className="mx-auto w-full max-w-xl">
+            <CreateIncidentStepDetails
+              name={name}
+              description={description}
+              onChangeName={setName}
+              onChangeDescription={setDescription}
+            />
+          </div>
+        ) : (
+          <CreateIncidentStepAlerts
+            selected={selected}
+            onToggle={toggle}
+            onToggleAll={toggleAll}
+            onAlertsChange={onAlertsChange}
+          />
+        )}
+      </div>
+
+      <footer className="mt-4 flex shrink-0 items-center justify-between border-t border-border pt-3">
+        <div className="text-xs text-muted-foreground">
+          {step === 2 && selected.size > 0 && t('incidents.create.selectedCount', { count: selected.size })}
+        </div>
+        <div className="flex items-center gap-2">
+          {step === 1 ? (
+            <>
+              <Button variant="ghost" size="sm" onClick={onClose}>
+                {t('common.actions.cancel')}
+              </Button>
+              <Button size="sm" disabled={!canProceed} onClick={() => setStep(2)}>
+                {t('common.actions.next')}
+                <ArrowRight size={14} className="ml-1.5" />
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button variant="ghost" size="sm" onClick={() => setStep(1)} disabled={busy}>
+                <ArrowLeft size={14} className="mr-1.5" />
+                {t('common.actions.back')}
+              </Button>
+              <Button size="sm" disabled={!canSubmit} onClick={submit}>
+                {busy && <Loader2 size={14} className="mr-1.5 animate-spin" />}
+                {t('incidents.create.submit')}
+              </Button>
+            </>
+          )}
+        </div>
+      </footer>
+    </div>
+  )
+}
diff --git a/frontend/src/features/incidents/components/incident-alert-row.tsx b/frontend/src/features/incidents/components/incident-alert-row.tsx
new file mode 100644
index 000000000..50bdb9c92
--- /dev/null
+++ b/frontend/src/features/incidents/components/incident-alert-row.tsx
@@ -0,0 +1,97 @@
+import { Sparkles, UserCheck } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/shared/lib/utils'
+import { SEV_BADGE, SEV_META, TS, absTime, relativeTime, sevKey } from '../../alerts/lib/alert-meta'
+import { isAiNote } from '../../alerts/lib/ai-note'
+import type { Alert, AlertTag } from '../../alerts/types/alert.types'
+import { TagChip } from '../../alerts/components/tag-chip'
+
+const TD = 'whitespace-nowrap px-3 py-2.5 align-middle'
+
+export function IncidentAlertRow({
+  alert: a,
+  tagCatalog,
+  checked,
+  onToggle,
+}: {
+  alert: Alert
+  tagCatalog: AlertTag[]
+  checked: boolean
+  onToggle: () => void
+}) {
+  const { t } = useTranslation()
+  const sk = sevKey(a)
+  const sev = SEV_META[sk]
+  return (
+    <tr
+      className="group cursor-pointer border-b border-border/50 text-[13px] last:border-b-0 hover:bg-muted/20"
+      onClick={onToggle}
+    >
+      <td className={`${TD} relative w-[6px] p-0`}>
+        <span className={cn('absolute inset-y-0 left-0 w-[3px]', sev.bar)} title={t(`alerts.severity.${sk}`)} aria-hidden />
+      </td>
+      <td className={cn(TD, 'cursor-pointer relative')}>
+        <span
+          className={cn(
+            'flex h-4 w-4 items-center justify-center rounded border',
+            checked ? 'border-primary bg-primary' : 'border-input'
+          )}
+        >
+          {checked && <span className="h-2 w-2 rounded-sm bg-primary-foreground" />}
+        </span>
+      </td>
+      <td className={`${TD} max-w-[480px]`}>
+        <div className="flex items-center gap-2">
+          <span className="truncate font-medium">{a.name || '—'}</span>
+          {(isAiNote(a.notes) || isAiNote(a.statusObservation)) && (
+            <Sparkles size={11} className="shrink-0 text-fuchsia-500" aria-label={t('alerts.badge.aiAssessed')} />
+          )}
+          {a.isIncident && (
+            <span className="shrink-0 rounded bg-red-500/15 px-1 py-0.5 text-[9px] font-semibold uppercase text-red-500">
+              {t('alerts.badge.incident')}
+            </span>
+          )}
+        </div>
+        <div className="mt-0.5 flex items-center gap-1.5 overflow-hidden text-[11px] text-muted-foreground">
+          <span className="truncate">
+            {a.category}
+            {a.dataSource && ` · ${a.dataSource}`}
+          </span>
+          {(a.tags ?? []).slice(0, 2).map((tag) => (
+            <TagChip key={tag} name={tag} catalog={tagCatalog} size="xs" />
+          ))}
+          {(a.tags ?? []).length > 2 && (
+            <span
+              className="shrink-0 whitespace-nowrap rounded-md border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium leading-none text-muted-foreground"
+              title={(a.tags ?? []).slice(2).join(', ')}
+            >
+              +{(a.tags ?? []).length - 2}
+            </span>
+          )}
+          {a.assignee && (
+            <span
+              className="inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-md bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium leading-none text-primary"
+              title={t('alerts.row.assignedTo', { user: a.assignee })}
+            >
+              <UserCheck size={10} />
+              {a.assignee}
+            </span>
+          )}
+        </div>
+      </td>
+      <td className={`${TD} text-center`}>
+        <span
+          className={cn(
+            'inline-flex items-center justify-center rounded-md px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide ring-1 ring-inset',
+            SEV_BADGE[sk],
+          )}
+        >
+          {t(`alerts.severity.${sk}`)}
+        </span>
+      </td>
+      <td className={`${TD} text-center font-mono text-[11px] text-muted-foreground`} title={absTime(a[TS])}>
+        {relativeTime(a[TS])}
+      </td>
+    </tr>
+  )
+}
diff --git a/frontend/src/features/incidents/components/incident-alerts-picker-header.tsx b/frontend/src/features/incidents/components/incident-alerts-picker-header.tsx
new file mode 100644
index 000000000..a16a76faa
--- /dev/null
+++ b/frontend/src/features/incidents/components/incident-alerts-picker-header.tsx
@@ -0,0 +1,28 @@
+import { useTranslation } from 'react-i18next'
+
+const TH = 'whitespace-nowrap px-3 py-2.5 text-left align-middle font-medium'
+
+export function IncidentAlertsPickerHeader({
+  allChecked,
+  onTogglePage,
+}: {
+  allChecked: boolean
+  onTogglePage: () => void
+}) {
+  const { t } = useTranslation()
+  return (
+    <thead className="sticky top-0 z-10 bg-muted/90 text-[10px] uppercase tracking-wider text-muted-foreground">
+      <tr className="border-b border-border">
+        <th className={`${TH} w-[6px] p-0`} aria-hidden />
+        <th className={`${TH} w-px`}>
+          <button onClick={onTogglePage} className="flex h-4 w-4 items-center justify-center rounded border border-input">
+            {allChecked && <span className="h-2 w-2 rounded-sm bg-primary" />}
+          </button>
+        </th>
+        <th className={TH}>{t('alerts.table.alert')}</th>
+        <th className={`${TH} text-center`}>{t('alerts.table.severity')}</th>
+        <th className={`${TH} text-center`}>{t('alerts.table.time')}</th>
+      </tr>
+    </thead>
+  )
+}
diff --git a/frontend/src/features/incidents/components/incidents-toolbar.tsx b/frontend/src/features/incidents/components/incidents-toolbar.tsx
index 22d753ce4..ee2dc0360 100644
--- a/frontend/src/features/incidents/components/incidents-toolbar.tsx
+++ b/frontend/src/features/incidents/components/incidents-toolbar.tsx
@@ -1,5 +1,6 @@
-import { Search } from 'lucide-react'
+import { Plus, Search } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/shared/components/ui/button'
 import { Input } from '@/shared/components/ui/input'
 import { SELECT_CLS, STATUSES , statusKey} from '../lib/incident-meta'
 import type { IncidentStatus } from '../types/incident.types'
@@ -18,6 +19,7 @@ export interface IncidentsToolbarProps {
   onDateTo: (v: string) => void
   hasFilters: boolean
   onClear: () => void
+  onCreate: () => void
 }
 
 export function IncidentsToolbar({
@@ -34,6 +36,7 @@ export function IncidentsToolbar({
   onDateTo,
   hasFilters,
   onClear,
+  onCreate,
 }: IncidentsToolbarProps) {
   const { t } = useTranslation()
   return (
@@ -86,6 +89,10 @@ export function IncidentsToolbar({
           {t('incidents.toolbar.clear')}
         </button>
       )}
+      <Button size="sm" onClick={onCreate} className="ml-auto">
+        <Plus size={14} className="mr-1.5" />
+        {t('incidents.toolbar.create')}
+      </Button>
     </div>
   )
 }
diff --git a/frontend/src/features/incidents/pages/IncidentsPage.tsx b/frontend/src/features/incidents/pages/IncidentsPage.tsx
index f8750a497..0270820a7 100644
--- a/frontend/src/features/incidents/pages/IncidentsPage.tsx
+++ b/frontend/src/features/incidents/pages/IncidentsPage.tsx
@@ -12,6 +12,7 @@ import { IncidentsLayoutToggle, type IncidentsLayout } from '../components/incid
 import { IncidentsTable } from '../components/incidents-table'
 import { IncidentsBoard } from '../components/incidents-board'
 import { IncidentDrawer } from '../components/incident-drawer'
+import { CreateIncidentWizard } from '../components/create-incident-wizard'
 import { Center } from '../components/ui-primitives'
 
 export function IncidentsPage() {
@@ -26,6 +27,7 @@ export function IncidentsPage() {
   const [page, setPage] = useState(0)
   const [pageSize] = useState(50)
   const [open, setOpen] = useState<Incident | null>(null)
+  const [creating, setCreating] = useState(false)
 
   // Debounce the free-text search.
   useEffect(() => {
@@ -65,6 +67,18 @@ export function IncidentsPage() {
     setPage(0)
   }
 
+  if (creating) {
+    return (
+      <CreateIncidentWizard
+        onClose={() => setCreating(false)}
+        onCreated={() => {
+          setCreating(false)
+          refresh()
+        }}
+      />
+    )
+  }
+
   return (
     <div className="flex h-full min-h-0 w-full flex-col px-6 pb-6 pt-3">
       <header className="flex flex-wrap items-center justify-between gap-3">
@@ -119,6 +133,7 @@ export function IncidentsPage() {
         }}
         hasFilters={hasFilters}
         onClear={clearFilters}
+        onCreate={() => setCreating(true)}
       />
 
       {error ? (
diff --git a/frontend/src/shared/i18n/locales/de.json b/frontend/src/shared/i18n/locales/de.json
index f118aaf4d..0dfc7bdb3 100644
--- a/frontend/src/shared/i18n/locales/de.json
+++ b/frontend/src/shared/i18n/locales/de.json
@@ -21,7 +21,9 @@
       "refresh": "Aktualisieren",
       "delete": "Löschen",
       "remove": "Entfernen",
-      "close": "Schließen"
+      "close": "Schließen",
+      "next": "Weiter",
+      "back": "Zurück"
     },
     "confirm": {
       "delete": "Löschen",
@@ -4189,7 +4191,8 @@
       "allAssignees": "Alle Zugewiesenen",
       "from": "Von",
       "to": "Bis",
-      "clear": "Zurücksetzen"
+      "clear": "Zurücksetzen",
+      "create": "Vorfall erstellen"
     },
     "layout": {
       "table": "Tabelle",
@@ -4271,6 +4274,20 @@
       "INCIDENT_NOTE_ADD": "Notiz hinzugefügt",
       "INCIDENT_NOTE_CHANGE": "Notiz bearbeitet",
       "INCIDENT_ASSIGNED": "Zuweisung geändert"
+    },
+    "create": {
+      "title": "Vorfall erstellen",
+      "stepIndicator": "Schritt {{current}} von {{total}}",
+      "selectedCount": "{{count}} Warnungen ausgewählt",
+      "submit": "Erstellen",
+      "success": "Vorfall erstellt",
+      "error": "Vorfall konnte nicht erstellt werden",
+      "details": {
+        "nameLabel": "Name",
+        "namePlaceholder": "Kurzer, prägnanter Titel",
+        "descriptionLabel": "Beschreibung",
+        "descriptionPlaceholder": "Kontext, Umfang, erste Notizen…"
+      }
     }
   },
   "alertingRules": {
diff --git a/frontend/src/shared/i18n/locales/en.json b/frontend/src/shared/i18n/locales/en.json
index 6416bab2e..6b834b518 100644
--- a/frontend/src/shared/i18n/locales/en.json
+++ b/frontend/src/shared/i18n/locales/en.json
@@ -21,7 +21,9 @@
       "refresh": "Refresh",
       "delete": "Delete",
       "remove": "Remove",
-      "close": "Close"
+      "close": "Close",
+      "next": "Next",
+      "back": "Back"
     },
     "confirm": {
       "delete": "Delete",
@@ -4519,7 +4521,22 @@
       "allAssignees": "All assignees",
       "from": "From",
       "to": "To",
-      "clear": "Clear"
+      "clear": "Clear",
+      "create": "Create incident"
+    },
+    "create": {
+      "title": "Create incident",
+      "stepIndicator": "Step {{current}} of {{total}}",
+      "selectedCount": "{{count}} alerts selected",
+      "submit": "Create",
+      "success": "Incident created",
+      "error": "Could not create the incident",
+      "details": {
+        "nameLabel": "Name",
+        "namePlaceholder": "Short, descriptive title",
+        "descriptionLabel": "Description",
+        "descriptionPlaceholder": "Context, scope, initial notes…"
+      }
     },
     "layout": {
       "table": "Table",
diff --git a/frontend/src/shared/i18n/locales/es.json b/frontend/src/shared/i18n/locales/es.json
index 76a42a31c..fe28d59b2 100644
--- a/frontend/src/shared/i18n/locales/es.json
+++ b/frontend/src/shared/i18n/locales/es.json
@@ -21,7 +21,9 @@
       "refresh": "Actualizar",
       "delete": "Eliminar",
       "remove": "Quitar",
-      "close": "Cerrar"
+      "close": "Cerrar",
+      "next": "Siguiente",
+      "back": "Atrás"
     },
     "confirm": {
       "delete": "Eliminar",
@@ -4311,7 +4313,8 @@
       "allAssignees": "Todos los asignados",
       "from": "Desde",
       "to": "Hasta",
-      "clear": "Limpiar"
+      "clear": "Limpiar",
+      "create": "Crear incidente"
     },
     "layout": {
       "table": "Tabla",
@@ -4393,6 +4396,20 @@
       "INCIDENT_NOTE_ADD": "Nota añadida",
       "INCIDENT_NOTE_CHANGE": "Nota editada",
       "INCIDENT_ASSIGNED": "Asignación cambiada"
+    },
+    "create": {
+      "title": "Crear incidente",
+      "stepIndicator": "Paso {{current}} de {{total}}",
+      "selectedCount": "{{count}} alertas seleccionadas",
+      "submit": "Crear",
+      "success": "Incidente creado",
+      "error": "No se pudo crear el incidente",
+      "details": {
+        "nameLabel": "Nombre",
+        "namePlaceholder": "Título corto y descriptivo",
+        "descriptionLabel": "Descripción",
+        "descriptionPlaceholder": "Contexto, alcance, notas iniciales…"
+      }
     }
   },
   "parsingFilters": {
diff --git a/frontend/src/shared/i18n/locales/fr.json b/frontend/src/shared/i18n/locales/fr.json
index fdf5f3979..44c956ec9 100644
--- a/frontend/src/shared/i18n/locales/fr.json
+++ b/frontend/src/shared/i18n/locales/fr.json
@@ -21,7 +21,9 @@
       "refresh": "Actualiser",
       "delete": "Supprimer",
       "remove": "Retirer",
-      "close": "Fermer"
+      "close": "Fermer",
+      "next": "Suivant",
+      "back": "Retour"
     },
     "confirm": {
       "delete": "Supprimer",
@@ -4189,7 +4191,8 @@
       "allAssignees": "Tous les assignés",
       "from": "De",
       "to": "À",
-      "clear": "Effacer"
+      "clear": "Effacer",
+      "create": "Créer un incident"
     },
     "layout": {
       "table": "Tableau",
@@ -4271,6 +4274,20 @@
       "INCIDENT_NOTE_ADD": "Note ajoutée",
       "INCIDENT_NOTE_CHANGE": "Note modifiée",
       "INCIDENT_ASSIGNED": "Attribution modifiée"
+    },
+    "create": {
+      "title": "Créer un incident",
+      "stepIndicator": "Étape {{current}} sur {{total}}",
+      "selectedCount": "{{count}} alertes sélectionnées",
+      "submit": "Créer",
+      "success": "Incident créé",
+      "error": "Impossible de créer l'incident",
+      "details": {
+        "nameLabel": "Nom",
+        "namePlaceholder": "Titre court et descriptif",
+        "descriptionLabel": "Description",
+        "descriptionPlaceholder": "Contexte, portée, notes initiales…"
+      }
     }
   },
   "alertingRules": {
diff --git a/frontend/src/shared/i18n/locales/it.json b/frontend/src/shared/i18n/locales/it.json
index 36c656be2..8e09f1d63 100644
--- a/frontend/src/shared/i18n/locales/it.json
+++ b/frontend/src/shared/i18n/locales/it.json
@@ -21,7 +21,9 @@
       "refresh": "Aggiorna",
       "delete": "Elimina",
       "remove": "Rimuovi",
-      "close": "Chiudi"
+      "close": "Chiudi",
+      "next": "Avanti",
+      "back": "Indietro"
     },
     "confirm": {
       "delete": "Elimina",
@@ -4189,7 +4191,8 @@
       "allAssignees": "Tutti gli assegnatari",
       "from": "Da",
       "to": "A",
-      "clear": "Cancella"
+      "clear": "Cancella",
+      "create": "Crea incidente"
     },
     "layout": {
       "table": "Tabella",
@@ -4271,6 +4274,20 @@
       "INCIDENT_NOTE_ADD": "Nota aggiunta",
       "INCIDENT_NOTE_CHANGE": "Nota modificata",
       "INCIDENT_ASSIGNED": "Assegnazione cambiata"
+    },
+    "create": {
+      "title": "Crea incidente",
+      "stepIndicator": "Passaggio {{current}} di {{total}}",
+      "selectedCount": "{{count}} avvisi selezionati",
+      "submit": "Crea",
+      "success": "Incidente creato",
+      "error": "Impossibile creare l'incidente",
+      "details": {
+        "nameLabel": "Nome",
+        "namePlaceholder": "Titolo breve e descrittivo",
+        "descriptionLabel": "Descrizione",
+        "descriptionPlaceholder": "Contesto, ambito, note iniziali…"
+      }
     }
   },
   "alertingRules": {
diff --git a/frontend/src/shared/i18n/locales/pt.json b/frontend/src/shared/i18n/locales/pt.json
index 6ede9099b..a82564128 100644
--- a/frontend/src/shared/i18n/locales/pt.json
+++ b/frontend/src/shared/i18n/locales/pt.json
@@ -21,7 +21,9 @@
       "refresh": "Atualizar",
       "delete": "Excluir",
       "remove": "Remover",
-      "close": "Fechar"
+      "close": "Fechar",
+      "next": "Próximo",
+      "back": "Voltar"
     },
     "confirm": {
       "delete": "Excluir",
@@ -4311,7 +4313,8 @@
       "allAssignees": "Todos os responsáveis",
       "from": "De",
       "to": "Até",
-      "clear": "Limpar"
+      "clear": "Limpar",
+      "create": "Criar incidente"
     },
     "layout": {
       "table": "Tabela",
@@ -4393,6 +4396,20 @@
       "INCIDENT_NOTE_ADD": "Nota adicionada",
       "INCIDENT_NOTE_CHANGE": "Nota editada",
       "INCIDENT_ASSIGNED": "Atribuição alterada"
+    },
+    "create": {
+      "title": "Criar incidente",
+      "stepIndicator": "Etapa {{current}} de {{total}}",
+      "selectedCount": "{{count}} alertas selecionados",
+      "submit": "Criar",
+      "success": "Incidente criado",
+      "error": "Não foi possível criar o incidente",
+      "details": {
+        "nameLabel": "Nome",
+        "namePlaceholder": "Título curto e descritivo",
+        "descriptionLabel": "Descrição",
+        "descriptionPlaceholder": "Contexto, escopo, notas iniciais…"
+      }
     }
   },
   "parsingFilters": {
diff --git a/frontend/src/shared/i18n/locales/ru.json b/frontend/src/shared/i18n/locales/ru.json
index c64157ba9..e86cc8ff3 100644
--- a/frontend/src/shared/i18n/locales/ru.json
+++ b/frontend/src/shared/i18n/locales/ru.json
@@ -21,7 +21,9 @@
       "refresh": "Обновить",
       "delete": "Удалить",
       "remove": "Убрать",
-      "close": "Закрыть"
+      "close": "Закрыть",
+      "next": "Далее",
+      "back": "Назад"
     },
     "confirm": {
       "delete": "Удалить",
@@ -3981,7 +3983,8 @@
       "allAssignees": "Все ответственные",
       "from": "С",
       "to": "По",
-      "clear": "Очистить"
+      "clear": "Очистить",
+      "create": "Создать инцидент"
     },
     "layout": {
       "table": "Таблица",
@@ -4063,6 +4066,20 @@
       "INCIDENT_NOTE_ADD": "Заметка добавлена",
       "INCIDENT_NOTE_CHANGE": "Заметка изменена",
       "INCIDENT_ASSIGNED": "Назначение изменено"
+    },
+    "create": {
+      "title": "Создать инцидент",
+      "stepIndicator": "Шаг {{current}} из {{total}}",
+      "selectedCount": "Выбрано оповещений: {{count}}",
+      "submit": "Создать",
+      "success": "Инцидент создан",
+      "error": "Не удалось создать инцидент",
+      "details": {
+        "nameLabel": "Название",
+        "namePlaceholder": "Короткое описательное название",
+        "descriptionLabel": "Описание",
+        "descriptionPlaceholder": "Контекст, область, первичные заметки…"
+      }
     }
   },
   "alertingRules": {