diff --git a/web/src/App.vue b/web/src/App.vue
index f4e357f..a3a8ba9 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -29,8 +29,9 @@ import { RouterLink, RouterView } from 'vue-router'
 import StatusDot from '@/components/StatusDot.vue'
 
 const navLinks = [
-  { to: '/search', label: 'Search' },
-  { to: '/diagnose', label: 'Diagnose' },
-  { to: '/sources', label: 'Sources' },
+  { to: '/search',    label: 'Search' },
+  { to: '/diagnose',  label: 'Diagnose' },
+  { to: '/incidents', label: 'Incidents' },
+  { to: '/sources',   label: 'Sources' },
 ]
 </script>
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index 286c96d..1b16986 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import LogSearchView from '@/views/LogSearchView.vue'
 import DiagnoseView from '@/views/DiagnoseView.vue'
 import SourcesView from '@/views/SourcesView.vue'
+import IncidentsView from '@/views/IncidentsView.vue'
 
 export default createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -10,5 +11,6 @@ export default createRouter({
     { path: '/search', component: LogSearchView },
     { path: '/diagnose', component: DiagnoseView },
     { path: '/sources', component: SourcesView },
+    { path: '/incidents', component: IncidentsView },
   ],
 })
diff --git a/web/src/views/IncidentsView.vue b/web/src/views/IncidentsView.vue
new file mode 100644
index 0000000..adddc66
--- /dev/null
+++ b/web/src/views/IncidentsView.vue
@@ -0,0 +1,412 @@
+<template>
+  <div class="p-6 max-w-5xl mx-auto">
+
+    <!-- Header -->
+    <div class="mb-6">
+      <h1 class="text-text-primary text-xl font-semibold mb-1">Incidents</h1>
+      <p class="text-text-dim text-sm">Tag time windows with descriptions. The label is used to search for related log entries.</p>
+    </div>
+
+    <!-- Create form -->
+    <div class="mb-8 rounded border border-surface-border bg-surface-raised p-5">
+      <h2 class="text-text-primary text-sm font-semibold mb-4 uppercase tracking-wider">Tag New Incident</h2>
+
+      <div class="space-y-4">
+
+        <!-- Label -->
+        <div>
+          <label class="block text-xs text-text-dim mb-1">Description <span class="text-accent">*</span></label>
+          <input
+            v-model="form.label"
+            type="text"
+            placeholder='e.g. "plex stopped playing audio" or "bluetooth kept disconnecting"'
+            class="w-full bg-surface border border-surface-border rounded px-3 py-2 text-sm text-text-primary placeholder-text-dim focus:outline-none focus:border-accent"
+          />
+          <p class="text-text-dim text-xs mt-1">Your literal description — used to find relevant log entries in the window.</p>
+        </div>
+
+        <!-- Time bucket picker -->
+        <div>
+          <label class="block text-xs text-text-dim mb-2">When did it happen?</label>
+          <div class="flex flex-wrap gap-2 mb-3">
+            <button
+              v-for="preset in presets"
+              :key="preset.key"
+              @click="applyPreset(preset.key)"
+              :class="[
+                'px-3 py-1.5 rounded text-xs border transition-colors',
+                activePreset === preset.key
+                  ? 'bg-accent text-surface border-accent'
+                  : 'bg-surface border-surface-border text-text-muted hover:text-text-primary hover:border-accent'
+              ]"
+            >
+              {{ preset.label }}
+            </button>
+            <button
+              @click="toggleCustomPicker"
+              :class="[
+                'px-3 py-1.5 rounded text-xs border transition-colors',
+                showCustomPicker
+                  ? 'bg-accent text-surface border-accent'
+                  : 'bg-surface border-surface-border text-text-muted hover:text-text-primary hover:border-accent'
+              ]"
+            >
+              Custom range…
+            </button>
+          </div>
+
+          <!-- Custom date range picker -->
+          <div v-if="showCustomPicker" class="flex flex-wrap gap-3 mt-2">
+            <div>
+              <label class="block text-xs text-text-dim mb-1">Start</label>
+              <input
+                v-model="form.started_at_local"
+                type="datetime-local"
+                class="bg-surface border border-surface-border rounded px-3 py-1.5 text-sm text-text-primary focus:outline-none focus:border-accent"
+                @change="activePreset = 'custom'"
+              />
+            </div>
+            <div>
+              <label class="block text-xs text-text-dim mb-1">End <span class="text-text-dim">(leave blank if ongoing)</span></label>
+              <input
+                v-model="form.ended_at_local"
+                type="datetime-local"
+                class="bg-surface border border-surface-border rounded px-3 py-1.5 text-sm text-text-primary focus:outline-none focus:border-accent"
+                @change="activePreset = 'custom'"
+              />
+            </div>
+          </div>
+
+          <!-- Active window summary -->
+          <p v-if="windowSummary" class="text-text-dim text-xs mt-2">
+            Window: <span class="text-text-muted">{{ windowSummary }}</span>
+          </p>
+        </div>
+
+        <!-- Severity + Notes row -->
+        <div class="flex flex-wrap gap-4">
+          <div>
+            <label class="block text-xs text-text-dim mb-1">Severity</label>
+            <select
+              v-model="form.severity"
+              class="bg-surface border border-surface-border rounded px-3 py-2 text-sm text-text-primary focus:outline-none focus:border-accent"
+            >
+              <option value="low">Low</option>
+              <option value="medium">Medium</option>
+              <option value="high">High</option>
+              <option value="critical">Critical</option>
+            </select>
+          </div>
+          <div class="flex-1 min-w-48">
+            <label class="block text-xs text-text-dim mb-1">Notes <span class="text-text-dim">(optional)</span></label>
+            <input
+              v-model="form.notes"
+              type="text"
+              placeholder="Any extra context…"
+              class="w-full bg-surface border border-surface-border rounded px-3 py-2 text-sm text-text-primary placeholder-text-dim focus:outline-none focus:border-accent"
+            />
+          </div>
+        </div>
+
+        <!-- Submit -->
+        <div class="flex items-center gap-3">
+          <button
+            @click="submitIncident"
+            :disabled="!form.label.trim() || submitting"
+            class="px-4 py-2 bg-accent text-surface text-sm rounded font-medium hover:opacity-90 transition-opacity disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            {{ submitting ? 'Tagging…' : 'Tag Incident' }}
+          </button>
+          <span v-if="submitError" class="text-sev-error text-xs">{{ submitError }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Incidents table -->
+    <div v-if="loading" class="text-text-dim py-8 text-center text-sm">Loading…</div>
+
+    <div v-else-if="incidents.length === 0" class="text-text-dim py-12 text-center text-sm">
+      No incidents tagged yet. Use the form above to mark your first one.
+    </div>
+
+    <div v-else class="rounded border border-surface-border overflow-hidden">
+      <table class="w-full text-sm">
+        <thead class="bg-surface-raised border-b border-surface-border">
+          <tr>
+            <th class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Description</th>
+            <th class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Severity</th>
+            <th class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Window</th>
+            <th class="text-left px-4 py-2.5 text-text-dim font-medium text-xs uppercase tracking-wider">Tagged</th>
+            <th class="px-4 py-2.5"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="inc in incidents"
+            :key="inc.id"
+            class="border-b border-surface-border hover:bg-surface-raised transition-colors cursor-pointer"
+            @click="selectIncident(inc)"
+          >
+            <td class="px-4 py-2.5 text-text-primary">{{ inc.label }}</td>
+            <td class="px-4 py-2.5">
+              <span :class="['px-1.5 py-0.5 rounded text-xs font-medium', severityClass(inc.severity)]">
+                {{ inc.severity }}
+              </span>
+            </td>
+            <td class="px-4 py-2.5 text-text-dim text-xs">{{ windowLabel(inc) }}</td>
+            <td class="px-4 py-2.5 text-text-dim text-xs">{{ formatTs(inc.created_at) }}</td>
+            <td class="px-4 py-2.5 text-right">
+              <button
+                @click.stop="deleteIncident(inc.id)"
+                class="text-text-dim hover:text-sev-error transition-colors text-xs px-2 py-1 rounded hover:bg-surface"
+              >
+                delete
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Incident detail drawer -->
+    <div v-if="selected" class="mt-6 rounded border border-accent bg-surface p-5">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-text-primary text-sm font-semibold">{{ selected.label }}</h2>
+        <button @click="selected = null" class="text-text-dim hover:text-text-primary text-xs">✕ close</button>
+      </div>
+
+      <div v-if="entriesLoading" class="text-text-dim text-sm py-4">Fetching log entries…</div>
+
+      <div v-else-if="selectedEntries.length === 0" class="text-text-dim text-sm py-4">
+        No log entries found in this window.
+      </div>
+
+      <div v-else>
+        <p class="text-text-dim text-xs mb-3">{{ selectedEntries.length }} entries in window</p>
+        <div class="space-y-1 max-h-96 overflow-y-auto">
+          <div
+            v-for="entry in selectedEntries"
+            :key="entry.entry_id"
+            class="font-mono text-xs py-1 px-2 rounded bg-surface-raised border border-surface-border"
+          >
+            <span class="text-text-dim mr-2">{{ shortTs(entry.timestamp_iso) }}</span>
+            <span :class="['mr-2', severityTextClass(entry.severity)]">{{ entry.severity || '?' }}</span>
+            <span class="text-text-muted">{{ entry.source_id.split(':').pop() }}</span>
+            <span class="text-text-dim mx-1">|</span>
+            <span class="text-text-primary">{{ entry.text.slice(0, 200) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+
+const BASE = import.meta.env.BASE_URL.replace(/\/$/, '')
+
+interface Incident {
+  id: string
+  label: string
+  started_at: string | null
+  ended_at: string | null
+  notes: string
+  created_at: string
+  severity: string
+}
+
+interface Entry {
+  entry_id: string
+  source_id: string
+  timestamp_iso: string | null
+  severity: string | null
+  text: string
+}
+
+const presets = [
+  { key: 'ongoing',  label: 'Ongoing' },
+  { key: 'just_now', label: 'Just now' },
+  { key: 'last_1h',  label: 'Last hour' },
+  { key: 'last_day', label: 'Last day' },
+]
+
+function getQuickRange(preset: string): { started_at: string | null; ended_at: string | null } {
+  const now = new Date()
+  const iso = (d: Date) => d.toISOString()
+
+  if (preset === 'ongoing') {
+    return { started_at: iso(now), ended_at: null }
+  }
+  const offsets: Record<string, number> = {
+    just_now: 15 * 60 * 1000,
+    last_1h:  60 * 60 * 1000,
+    last_day: 24 * 60 * 60 * 1000,
+  }
+  const ms = offsets[preset]
+  return ms !== undefined
+    ? { started_at: iso(new Date(now.getTime() - ms)), ended_at: iso(now) }
+    : { started_at: null, ended_at: null }
+}
+
+// ── form state ──────────────────────────────────────────────
+const form = ref({
+  label: '',
+  severity: 'medium',
+  notes: '',
+  started_at: null as string | null,
+  ended_at: null as string | null,
+  started_at_local: '',
+  ended_at_local: '',
+})
+
+const activePreset   = ref<string | null>(null)
+const showCustomPicker = ref(false)
+const submitting     = ref(false)
+const submitError    = ref('')
+
+function applyPreset(key: string) {
+  activePreset.value = key
+  showCustomPicker.value = false
+  const range = getQuickRange(key)
+  form.value.started_at = range.started_at
+  form.value.ended_at   = range.ended_at
+}
+
+function toggleCustomPicker() {
+  showCustomPicker.value = !showCustomPicker.value
+  if (showCustomPicker.value) activePreset.value = 'custom'
+}
+
+const windowSummary = computed(() => {
+  const start = showCustomPicker.value ? localToIso(form.value.started_at_local) : form.value.started_at
+  const end   = showCustomPicker.value ? localToIso(form.value.ended_at_local)   : form.value.ended_at
+  if (!start && !end) return ''
+  const s = start ? formatTs(start) : '—'
+  const e = end   ? formatTs(end)   : 'ongoing'
+  return `${s} → ${e}`
+})
+
+function localToIso(local: string): string | null {
+  if (!local) return null
+  return new Date(local).toISOString()
+}
+
+async function submitIncident() {
+  submitError.value = ''
+  if (!form.value.label.trim()) return
+
+  const started_at = showCustomPicker.value ? localToIso(form.value.started_at_local) : form.value.started_at
+  const ended_at   = showCustomPicker.value ? localToIso(form.value.ended_at_local)   : form.value.ended_at
+
+  submitting.value = true
+  try {
+    const res = await fetch(`${BASE}/api/incidents`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        label:      form.value.label,
+        severity:   form.value.severity,
+        notes:      form.value.notes,
+        started_at,
+        ended_at,
+      }),
+    })
+    if (!res.ok) throw new Error(await res.text())
+    const created: Incident = await res.json()
+    incidents.value.unshift(created)
+    form.value = { label: '', severity: 'medium', notes: '', started_at: null, ended_at: null, started_at_local: '', ended_at_local: '' }
+    activePreset.value = null
+    showCustomPicker.value = false
+  } catch (e: unknown) {
+    submitError.value = e instanceof Error ? e.message : 'Failed to create incident'
+  } finally {
+    submitting.value = false
+  }
+}
+
+// ── list + delete ────────────────────────────────────────────
+const incidents = ref<Incident[]>([])
+const loading   = ref(true)
+
+onMounted(async () => {
+  try {
+    const res = await fetch(`${BASE}/api/incidents`)
+    if (res.ok) incidents.value = (await res.json()).incidents
+  } finally {
+    loading.value = false
+  }
+})
+
+async function deleteIncident(id: string) {
+  await fetch(`${BASE}/api/incidents/${id}`, { method: 'DELETE' })
+  incidents.value = incidents.value.filter(i => i.id !== id)
+  if (selected.value?.id === id) selected.value = null
+}
+
+// ── detail drawer ─────────────────────────────────────────────
+const selected       = ref<Incident | null>(null)
+const selectedEntries = ref<Entry[]>([])
+const entriesLoading = ref(false)
+
+async function selectIncident(inc: Incident) {
+  selected.value = inc
+  selectedEntries.value = []
+  entriesLoading.value = true
+  try {
+    const res = await fetch(`${BASE}/api/incidents/${inc.id}`)
+    if (res.ok) {
+      const data = await res.json()
+      selectedEntries.value = data.entries ?? []
+    }
+  } finally {
+    entriesLoading.value = false
+  }
+}
+
+// ── helpers ───────────────────────────────────────────────────
+function severityClass(sev: string): string {
+  return {
+    low:      'bg-surface-border text-text-muted',
+    medium:   'bg-yellow-900 text-yellow-300',
+    high:     'bg-orange-900 text-orange-300',
+    critical: 'bg-red-900 text-red-300',
+  }[sev] ?? 'bg-surface-border text-text-muted'
+}
+
+function severityTextClass(sev: string | null): string {
+  return {
+    ERROR:    'text-sev-error',
+    CRITICAL: 'text-sev-critical',
+    WARN:     'text-sev-warn',
+    WARNING:  'text-sev-warn',
+    INFO:     'text-sev-info',
+    DEBUG:    'text-text-dim',
+  }[sev?.toUpperCase() ?? ''] ?? 'text-text-dim'
+}
+
+function windowLabel(inc: Incident): string {
+  if (!inc.started_at && !inc.ended_at) return '—'
+  const s = inc.started_at ? formatTs(inc.started_at) : '—'
+  const e = inc.ended_at   ? formatTs(inc.ended_at)   : 'ongoing'
+  return `${s} → ${e}`
+}
+
+function formatTs(iso: string | null): string {
+  if (!iso) return '—'
+  try {
+    return new Date(iso).toLocaleString(undefined, {
+      month: 'short', day: 'numeric',
+      hour: '2-digit', minute: '2-digit',
+    })
+  } catch { return iso }
+}
+
+function shortTs(iso: string | null): string {
+  if (!iso) return '?'
+  try {
+    return new Date(iso).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+  } catch { return iso }
+}
+</script>