feat: sticky incident header with top-positioned action buttons (fix #5)

components/incidents/incident-detail.tsx

@@ -59,7 +59,7 @@ interface Props {
 function Field({ label, value }: { label: string; value: React.ReactNode }) {
   return (
     <div>
-      <dt className="text-xs text-gray-500 uppercase tracking-wide">{label}</dt>
+      <dt className="text-xs font-medium text-gray-700">{label}</dt>
       <dd className="text-sm text-gray-900 mt-0.5">{value ?? '—'}</dd>
     </div>
   )
@@ -107,12 +107,12 @@ export function IncidentDetail({ incident }: Props) {
       </div>
 
       <div className="bg-white rounded-xl shadow-sm p-5">
-        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-2">Description</h2>
+        <h2 className="text-sm font-semibold text-gray-900 mb-2">Description</h2>
         <p className="text-sm text-gray-800 leading-relaxed whitespace-pre-wrap">{incident.description}</p>
       </div>
 
       <div className="bg-white rounded-xl shadow-sm p-5">
-        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3">
+        <h2 className="text-sm font-semibold text-gray-900 mb-3">
           Evidence — Report Stage
           <span className="ml-2 text-gray-400 font-normal normal-case">
             {reportStageFiles.length} file{reportStageFiles.length !== 1 ? 's' : ''}

components/incidents/incident-header.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import Link from 'next/link'
+
+interface Props {
+  incidentId: string
+  referenceNo: string | null
+  status: string
+  backHref: string
+  canTriage?: boolean
+  canInvestigate?: boolean
+  canAddCapa?: boolean
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  reported: 'bg-yellow-100 text-yellow-800',
+  triaged: 'bg-blue-100 text-blue-800',
+  investigating: 'bg-purple-100 text-purple-800',
+  capa_pending: 'bg-orange-100 text-orange-800',
+  verification: 'bg-indigo-100 text-indigo-800',
+  closed: 'bg-green-100 text-green-800',
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  reported: 'Reported',
+  triaged: 'Triaged',
+  investigating: 'Investigating',
+  capa_pending: 'CAPA Pending',
+  verification: 'Verification',
+  closed: 'Closed',
+}
+
+export function IncidentHeader({
+  incidentId, referenceNo, status, backHref,
+  canTriage, canInvestigate, canAddCapa,
+}: Props) {
+  return (
+    <div className="sticky top-0 z-30 bg-white border-b border-gray-200 shadow-sm">
+      <div className="max-w-3xl mx-auto px-4 py-3 flex items-center justify-between gap-4 flex-wrap">
+        <div className="flex items-center gap-3 min-w-0">
+          <Link href={backHref} className="text-sm text-gray-500 hover:text-gray-700 shrink-0">
+            ← Incidents
+          </Link>
+          <span className="text-gray-300 shrink-0">|</span>
+          <span className="text-sm font-mono font-semibold text-gray-900 truncate">
+            {referenceNo ?? 'Pending'}
+          </span>
+          <span className={`text-xs px-2 py-0.5 rounded-full font-medium shrink-0 ${STATUS_COLORS[status] ?? 'bg-gray-100 text-gray-800'}`}>
+            {STATUS_LABELS[status] ?? status.replace(/_/g, ' ')}
+          </span>
+        </div>
+        <div className="flex gap-2 shrink-0">
+          {canTriage && (
+            <Link
+              href={`/hse/incidents/${incidentId}/triage`}
+              className="text-xs px-3 py-1.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700"
+            >
+              Triage
+            </Link>
+          )}
+          {canInvestigate && (
+            <Link
+              href={`/hse/incidents/${incidentId}/investigation`}
+              className="text-xs px-3 py-1.5 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700"
+            >
+              Investigate
+            </Link>
+          )}
+          {canAddCapa && (
+            <Link
+              href={`/hse/incidents/${incidentId}/capa/new`}
+              className="text-xs px-3 py-1.5 bg-amber-600 text-white rounded-lg font-medium hover:bg-amber-700"
+            >
+              Add CAPA
+            </Link>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}