From 28013f8cbe7e1ace3bb0291391a59a5b05debe03 Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Mon, 11 May 2026 09:22:25 -0700
Subject: [PATCH] =?UTF-8?q?refactor:=20remove=20incident=20form=20from=20I?=
 =?UTF-8?q?ncidentsView=20=E2=80=94=20now=20in=20DiagnoseView=20Structured?=
 =?UTF-8?q?=20tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/IncidentsView.vue | 253 ++------------------------------
 1 file changed, 10 insertions(+), 243 deletions(-)

diff --git a/web/src/views/IncidentsView.vue b/web/src/views/IncidentsView.vue
index 4a6c2fe..34931ef 100644
--- a/web/src/views/IncidentsView.vue
+++ b/web/src/views/IncidentsView.vue
@@ -4,151 +4,20 @@
     <!-- 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>
-
-        <!-- Issue type -->
-        <div>
-          <label class="block text-xs text-text-dim mb-1">Issue type <span class="text-text-dim">(optional — short tag for pattern building)</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 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>
+      <p class="text-text-dim text-sm">
+        Tagged incidents and their log evidence.
+        <RouterLink
+          to="/diagnose?tab=structured"
+          class="text-accent hover:text-blue-300 underline underline-offset-2 ml-1"
+        >Tag a new incident →</RouterLink>
+      </p>
     </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.
+      No incidents tagged yet.
     </div>
 
     <div v-else class="rounded border border-surface-border overflow-hidden">
@@ -243,7 +112,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
+import { RouterLink } from 'vue-router'
 
 const BASE = import.meta.env.BASE_URL.replace(/\/$/, '')
 
@@ -266,109 +136,6 @@ interface Entry {
   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: '',
-  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.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,
-        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())
-    const created: Incident = await res.json()
-    incidents.value.unshift(created)
-    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
-  }
-}
-
 // ── list + delete ────────────────────────────────────────────
 const incidents = ref<Incident[]>([])
 const loading   = ref(true)