From a812b3751a90237c87e75233441851bee68ac277 Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Mon, 11 May 2026 09:15:25 -0700
Subject: [PATCH] feat: add QuickCapture and IncidentForm components

---
 web/src/components/IncidentForm.vue | 222 ++++++++++++++++++++++++
 web/src/components/QuickCapture.vue | 250 ++++++++++++++++++++++++++++
 2 files changed, 472 insertions(+)
 create mode 100644 web/src/components/IncidentForm.vue
 create mode 100644 web/src/components/QuickCapture.vue

diff --git a/web/src/components/IncidentForm.vue b/web/src/components/IncidentForm.vue
new file mode 100644
index 0000000..ea6b466
--- /dev/null
+++ b/web/src/components/IncidentForm.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="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>
+
+        <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>
+
+        <p v-if="windowSummary" class="text-text-dim text-xs mt-2">
+          Window: <span class="text-text-muted">{{ windowSummary }}</span>
+        </p>
+      </div>
+
+      <!-- Issue type -->
+      <div>
+        <label class="block text-xs text-text-dim mb-1">Issue type <span class="text-text-dim">(optional)</span></label>
+        <input
+          v-model="form.issue_type"
+          type="text"
+          list="issue-type-suggestions"
+          placeholder='e.g. "qbit_stall", "auth_failure", "disk_full"'
+          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 font-mono"
+        />
+        <datalist id="issue-type-suggestions">
+          <option value="qbit_stall" /><option value="qbit_crash" /><option value="auth_failure" />
+          <option value="disk_full" /><option value="network_drop" /><option value="service_crash" />
+          <option value="permission_error" /><option value="oom" />
+        </datalist>
+      </div>
+
+      <!-- Severity + Notes -->
+      <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="submit"
+          :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>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const BASE = import.meta.env.BASE_URL.replace(/\/$/, '')
+const emit = defineEmits<{ created: [label: 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 }
+}
+
+const form = ref({
+  label: '', issue_type: '', 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 = { ...form.value, started_at: range.started_at, 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 ''
+  return `${start ? fmtTs(start) : '—'} → ${end ? fmtTs(end) : 'ongoing'}`
+})
+
+function localToIso(local: string): string | null {
+  if (!local) return null
+  return new Date(local).toISOString()
+}
+
+async function submit() {
+  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, issue_type: form.value.issue_type,
+        severity: form.value.severity, notes: form.value.notes,
+        started_at, ended_at,
+      }),
+    })
+    if (!res.ok) throw new Error(await res.text())
+    emit('created', form.value.label)
+    form.value = { label: '', issue_type: '', 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
+  }
+}
+
+function fmtTs(iso: string): string {
+  try {
+    return new Date(iso).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+  } catch { return iso }
+}
+</script>
diff --git a/web/src/components/QuickCapture.vue b/web/src/components/QuickCapture.vue
new file mode 100644
index 0000000..76dd91e
--- /dev/null
+++ b/web/src/components/QuickCapture.vue
@@ -0,0 +1,250 @@
+<template>
+  <div>
+    <!-- Input row -->
+    <div class="flex gap-3 mb-6">
+      <input
+        v-model="query"
+        type="text"
+        placeholder='e.g. "plex stopped playing audio around 2pm"'
+        class="flex-1 bg-surface-raised border border-surface-border rounded px-4 py-2.5 text-sm text-text-primary placeholder-text-dim focus:outline-none focus:border-accent transition-colors"
+        @keydown.enter="run()"
+      />
+      <button
+        :disabled="loading || !query.trim()"
+        @click="run()"
+        class="px-6 py-2.5 rounded bg-accent text-white text-sm font-semibold hover:bg-blue-400 transition-colors disabled:opacity-50"
+      >
+        <span v-if="loading">Searching…</span>
+        <span v-else>Go</span>
+      </button>
+    </div>
+
+    <!-- Error -->
+    <div v-if="error" class="mb-4 p-3 rounded bg-red-900/30 border border-red-700/40 text-sev-error text-sm">
+      {{ error }}
+    </div>
+
+    <!-- Summary header -->
+    <div v-if="summary" class="mb-4 rounded border border-surface-border bg-surface-raised p-4">
+      <div class="flex flex-wrap gap-x-6 gap-y-1 text-xs text-text-dim">
+        <span class="text-text-muted font-medium">{{ summary.total }} entr{{ summary.total !== 1 ? 'ies' : 'y' }}</span>
+        <span v-if="summary.window_start">
+          {{ fmtTs(summary.window_start) }} → {{ fmtTs(summary.window_end) }}
+        </span>
+        <span v-if="!summary.time_detected" class="italic">(last 60 min — no time detected)</span>
+        <span
+          v-for="(count, sev) in nonZeroSeverity"
+          :key="String(sev)"
+          :class="sevClass(String(sev))"
+        >{{ count }} {{ sev }}</span>
+      </div>
+      <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-text-dim mt-2">
+        <span v-for="(count, src) in summary.by_source" :key="String(src)">
+          {{ String(src).split(':').pop() }} ({{ count }})
+        </span>
+      </div>
+    </div>
+
+    <!-- Log stream -->
+    <div v-if="entries.length" class="rounded border border-surface-border overflow-hidden mb-4">
+      <LogEntryRow v-for="entry in entries" :key="entry.entry_id" :entry="entry" />
+    </div>
+
+    <!-- Zero state -->
+    <div v-else-if="ranOnce && !loading" class="text-center text-text-dim py-12">
+      <p class="mb-1">No log evidence found for "{{ lastQuery }}"</p>
+      <p class="text-sm">Check the Sources tab to confirm data is ingested, or try a broader description.</p>
+    </div>
+
+    <!-- Save CTAs -->
+    <div v-if="entries.length && !saved" class="mt-2 flex items-center gap-4">
+      <button
+        @click="saveQuick"
+        :disabled="saving"
+        class="px-4 py-2 bg-accent text-surface text-sm rounded font-medium hover:opacity-90 transition-opacity disabled:opacity-40"
+      >
+        {{ saving ? 'Saving…' : 'Save as incident' }}
+      </button>
+      <button
+        v-if="!showDetails"
+        @click="showDetails = true"
+        class="text-text-dim hover:text-text-primary text-sm underline underline-offset-2"
+      >
+        add details…
+      </button>
+    </div>
+
+    <!-- Inline details panel -->
+    <div v-if="showDetails && !saved" class="mt-4 rounded border border-surface-border bg-surface-raised p-4 space-y-3">
+      <div class="flex flex-wrap gap-3">
+        <div>
+          <label class="block text-xs text-text-dim mb-1">Severity</label>
+          <select
+            v-model="detailSeverity"
+            class="bg-surface border border-surface-border rounded px-3 py-1.5 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="detailNotes"
+            type="text"
+            placeholder="Any extra context…"
+            class="w-full bg-surface border border-surface-border rounded px-3 py-1.5 text-sm text-text-primary placeholder-text-dim focus:outline-none focus:border-accent"
+          />
+        </div>
+      </div>
+      <div class="flex gap-3">
+        <button
+          @click="saveWithDetails"
+          :disabled="saving"
+          class="px-4 py-2 bg-accent text-surface text-sm rounded font-medium hover:opacity-90 transition-opacity disabled:opacity-40"
+        >
+          {{ saving ? 'Saving…' : 'Save' }}
+        </button>
+        <button @click="showDetails = false" class="text-text-dim hover:text-text-primary text-sm">Cancel</button>
+      </div>
+    </div>
+
+    <!-- Saved confirmation -->
+    <div v-if="saved" class="mt-2 text-sm text-green-400">
+      Saved —
+      <RouterLink to="/incidents" class="underline underline-offset-2 hover:text-green-300">view in Incidents</RouterLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRoute, RouterLink } from 'vue-router'
+import LogEntryRow from '@/components/LogEntryRow.vue'
+import type { LogEntry } from '@/stores/search'
+
+const BASE = import.meta.env.BASE_URL.replace(/\/$/, '')
+const route = useRoute()
+
+interface Summary {
+  total: number
+  window_start: string | null
+  window_end: string | null
+  time_detected: boolean
+  by_severity: Record<string, number>
+  by_source: Record<string, number>
+}
+
+const query          = ref('')
+const entries        = ref<LogEntry[]>([])
+const summary        = ref<Summary | null>(null)
+const loading        = ref(false)
+const error          = ref<string | null>(null)
+const ranOnce        = ref(false)
+const lastQuery      = ref('')
+const saved          = ref(false)
+const saving         = ref(false)
+const showDetails    = ref(false)
+const detailSeverity = ref('medium')
+const detailNotes    = ref('')
+let   capturedSince: string | null = null
+let   capturedUntil: string | null = null
+
+onMounted(() => {
+  const q = route.query.q
+  if (typeof q === 'string' && q.trim()) {
+    query.value = q
+    run()
+  }
+})
+
+watch(() => route.query.q, (newQ) => {
+  if (typeof newQ === 'string' && newQ.trim() && newQ !== lastQuery.value) {
+    query.value = newQ
+    run()
+  }
+})
+
+async function run() {
+  if (!query.value.trim()) return
+  loading.value = true
+  error.value   = null
+  ranOnce.value = true
+  lastQuery.value = query.value
+  saved.value = false
+  showDetails.value = false
+  try {
+    const res = await fetch(`${BASE}/api/diagnose`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ query: query.value }),
+    })
+    if (!res.ok) throw new Error(`API returned ${res.status}`)
+    const data = await res.json()
+    entries.value    = data.entries
+    summary.value    = data.summary
+    capturedSince    = data.summary.window_start
+    capturedUntil    = data.summary.window_end
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function saveQuick() {
+  saving.value = true
+  try { await postIncident('medium', '') }
+  finally { saving.value = false }
+}
+
+async function saveWithDetails() {
+  saving.value = true
+  try { await postIncident(detailSeverity.value, detailNotes.value) }
+  finally { saving.value = false }
+}
+
+async function postIncident(severity: string, notes: string) {
+  const res = await fetch(`${BASE}/api/incidents`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      label:      lastQuery.value,
+      started_at: capturedSince,
+      ended_at:   capturedUntil,
+      severity,
+      notes,
+    }),
+  })
+  if (!res.ok) throw new Error(await res.text())
+  saved.value = true
+  showDetails.value = false
+}
+
+const nonZeroSeverity = computed(() => {
+  if (!summary.value) return {}
+  return Object.fromEntries(
+    Object.entries(summary.value.by_severity).filter(([, v]) => v > 0)
+  )
+})
+
+function sevClass(sev: string): string {
+  return ({
+    CRITICAL: 'text-sev-critical',
+    ERROR:    'text-sev-error',
+    WARN:     'text-sev-warn',
+    INFO:     'text-sev-info',
+  } as Record<string, string>)[sev] ?? 'text-text-dim'
+}
+
+function fmtTs(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 }
+}
+</script>