feat: pgvector similar-incident retrieval + SimilarIncidentsPanel

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FFDuBhMKvoWjrWT3ZnGmmr
2026-07-11 16:31:02 +08:00
parent f10fa071f9
commit 547cc6e817
4 changed files with 136 additions and 0 deletions
@@ -0,0 +1,79 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+type SimilarIncident = {
+  id: string
+  reference_no: string | null
+  incident_type: string
+  description: string
+  severity: number | null
+  similarity: number
+}
+
+const TYPE_LABELS: Record<string, string> = {
+  injury: 'Injury',
+  near_miss: 'Near Miss',
+  hazard: 'Hazard',
+  asset_damage: 'Asset Damage',
+  environmental: 'Environmental',
+  security: 'Security',
+  fire: 'Fire',
+}
+
+interface Props {
+  incidentId: string
+}
+
+export function SimilarIncidentsPanel({ incidentId }: Props) {
+  const [similar, setSimilar] = useState<SimilarIncident[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(false)
+
+  useEffect(() => {
+    fetch(`/api/incidents/${incidentId}/similar`)
+      .then(r => {
+        if (!r.ok) throw new Error('failed')
+        return r.json()
+      })
+      .then(data => setSimilar(Array.isArray(data) ? data : []))
+      .catch(() => setError(true))
+      .finally(() => setLoading(false))
+  }, [incidentId])
+
+  if (loading) {
+    return (
+      <div className="mt-6 bg-white rounded-xl shadow-sm p-5">
+        <p className="text-sm text-gray-400">Loading similar incidents…</p>
+      </div>
+    )
+  }
+  if (error || similar.length === 0) return null
+
+  return (
+    <div className="mt-6 bg-white rounded-xl shadow-sm p-5">
+      <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3">
+        Similar Past Incidents
+      </h2>
+      <div className="space-y-3">
+        {similar.map(inc => (
+          <a
+            key={inc.id}
+            href={`/hse/incidents/${inc.id}`}
+            className="block border border-gray-200 rounded-lg p-3 hover:border-blue-300 hover:bg-blue-50 transition-colors"
+          >
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-xs font-medium text-gray-500">
+                {inc.reference_no ?? inc.id.slice(0, 8)} · {TYPE_LABELS[inc.incident_type] ?? inc.incident_type}
+              </span>
+              <span className="text-xs text-gray-400 tabular-nums">
+                {Math.round(inc.similarity * 100)}% similar
+              </span>
+            </div>
+            <p className="text-sm text-gray-700 line-clamp-2">{inc.description}</p>
+          </a>
+        ))}
+      </div>
+    </div>
+  )
+}