Rework alert comments: authors, system events, wider layout

- Add author field ("user" | "system") to AlertComment
- System comments are automatically added when an alert is reopened
  by the engine ("Alert reopened — condition is still active.") or
  manually via the UI ("Manually reopened.")
- Alert detail page redesigned with a two-column layout (3/5 detail,
  2/5 comments) at lg breakpoint
- System comments render as centered event dividers with a gear icon;
  user comments render as avatar + bubble

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/alerts/[id]/AlertDetail.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import Link from "next/link";
-import { Alert, AlertSeverity } from "@/lib/types";
+import { Alert, AlertSeverity, AlertComment } from "@/lib/types";
+
+// ── Severity theming ─────────────────────────────────────────────────────────
 
 const severityAccent: Record<AlertSeverity, string> = {
   danger: "border-l-red-500",
@@ -10,6 +12,20 @@ const severityAccent: Record<AlertSeverity, string> = {
   info: "border-l-blue-500",
 };
 
+const severityText: Record<AlertSeverity, string> = {
+  danger: "text-red-400",
+  warning: "text-yellow-400",
+  info: "text-blue-400",
+};
+
+const severityLabel: Record<AlertSeverity, string> = {
+  danger: "Critical",
+  warning: "Warning",
+  info: "Info",
+};
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
 function timeAgo(iso: string): string {
   const diff = Date.now() - new Date(iso).getTime();
   const mins = Math.floor(diff / 60_000);
@@ -26,12 +42,62 @@ function shortDate(iso: string): string {
   });
 }
 
+// ── Comment row ───────────────────────────────────────────────────────────────
+
+function CommentRow({ comment }: { comment: AlertComment }) {
+  const isSystem = comment.author === "system";
+
+  if (isSystem) {
+    return (
+      <div className="flex items-center gap-3">
+        <div className="h-px flex-1 bg-slate-800" />
+        <div className="flex items-center gap-1.5 text-xs text-slate-600 shrink-0">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-3 w-3">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+          </svg>
+          <span className="italic">{comment.body}</span>
+          <span className="text-slate-700">·</span>
+          <span>{timeAgo(comment.createdAt)}</span>
+        </div>
+        <div className="h-px flex-1 bg-slate-800" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center gap-2">
+        <div className="h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center shrink-0">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-3.5 w-3.5 text-slate-400">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+          </svg>
+        </div>
+        <span className="text-xs font-semibold text-slate-300">User</span>
+        <span className="text-xs text-slate-600">{shortDate(comment.createdAt)}</span>
+      </div>
+      <div className="ml-8">
+        <p className="text-sm text-slate-300 whitespace-pre-wrap leading-relaxed bg-slate-800/60 rounded-lg border border-slate-700/40 px-4 py-3">
+          {comment.body}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ── Main component ────────────────────────────────────────────────────────────
+
 export default function AlertDetail({ initialAlert }: { initialAlert: Alert }) {
   const [alert, setAlert] = useState<Alert>(initialAlert);
   const [actionLoading, setActionLoading] = useState(false);
   const [commentText, setCommentText] = useState("");
   const [commentLoading, setCommentLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [alert.comments.length]);
 
   async function toggleStatus() {
     setActionLoading(true);
@@ -79,7 +145,7 @@ export default function AlertDetail({ initialAlert }: { initialAlert: Alert }) {
   const statusTime = isOpen ? alert.firstSeen : (alert.closedAt ?? alert.firstSeen);
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-8 space-y-5">
+    <main className="mx-auto max-w-5xl px-4 py-8 space-y-6">
 
       <Link
         href="/?tab=alerts"
@@ -97,8 +163,11 @@ export default function AlertDetail({ initialAlert }: { initialAlert: Alert }) {
         </div>
       )}
 
-      {/* Alert card */}
+      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6 items-start">
-      <div className={`rounded-xl bg-slate-800/40 border border-slate-700/60 border-l-4 px-6 py-5 space-y-3 ${severityAccent[alert.severity]}`}>
+
+        {/* ── Alert detail ─────────────────────────────────────────────── */}
+        <div className={`lg:col-span-3 rounded-xl bg-slate-800/40 border border-slate-700/60 border-l-4 overflow-hidden ${severityAccent[alert.severity]}`}>
+          <div className="px-6 py-6 space-y-4">
 
             {/* Status row */}
             <div className="flex items-center justify-between gap-3">
@@ -124,33 +193,46 @@ export default function AlertDetail({ initialAlert }: { initialAlert: Alert }) {
               </button>
             </div>
 
-        {/* Title + description */}
+            {/* Severity + title + description */}
             <div className="space-y-1.5">
-          <h1 className="text-lg font-bold text-white leading-snug">{alert.title}</h1>
+              <span className={`text-xs font-bold uppercase tracking-widest ${severityText[alert.severity]}`}>
-          <p className="text-sm text-slate-400 leading-relaxed">{alert.description}</p>
+                {severityLabel[alert.severity]}
+              </span>
+              <h1 className="text-xl font-bold text-white leading-snug">{alert.title}</h1>
+              <p className="text-sm text-slate-400 leading-relaxed pt-1">{alert.description}</p>
+            </div>
+
           </div>
         </div>
 
-      {/* Notes */}
+        {/* ── Comments ─────────────────────────────────────────────────── */}
-      <section className="space-y-3 pt-1">
+        <div className="lg:col-span-2 flex flex-col gap-4">
-        <h2 className="text-xs font-semibold uppercase tracking-widest text-slate-600">Notes</h2>
 
+          <h2 className="text-xs font-semibold uppercase tracking-widest text-slate-600">
+            Comments
+          </h2>
+
+          <div className="space-y-4">
             {alert.comments.length === 0 && (
-          <p className="text-sm text-slate-700">No notes yet.</p>
+              <p className="text-sm text-slate-700">No comments yet.</p>
             )}
-
             {alert.comments.map((c) => (
-          <div key={c.id} className="space-y-1">
+              <CommentRow key={c.id} comment={c} />
-            <p className="text-xs text-slate-600">{shortDate(c.createdAt)}</p>
-            <p className="text-sm text-slate-300 whitespace-pre-wrap leading-relaxed">{c.body}</p>
-          </div>
             ))}
+            <div ref={bottomRef} />
+          </div>
 
-        <form onSubmit={submitComment} className="flex flex-col gap-2 pt-1">
+          <form onSubmit={submitComment} className="flex flex-col gap-2 pt-2 border-t border-slate-800">
             <textarea
               value={commentText}
               onChange={(e) => setCommentText(e.target.value)}
-            placeholder="Add a note…"
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                  e.preventDefault();
+                  if (commentText.trim()) submitComment(e as unknown as React.FormEvent);
+                }
+              }}
+              placeholder="Add a comment…"
               rows={3}
               className="w-full rounded-lg bg-slate-800/40 border border-slate-700/60 focus:border-slate-500 text-sm text-white placeholder-slate-700 px-4 py-3 focus:outline-none resize-none transition-colors"
             />
@@ -160,11 +242,13 @@ export default function AlertDetail({ initialAlert }: { initialAlert: Alert }) {
                 disabled={commentLoading || !commentText.trim()}
                 className="rounded-lg bg-slate-700 hover:bg-slate-600 disabled:opacity-40 disabled:cursor-not-allowed px-4 py-2 text-sm font-medium text-white transition-colors"
               >
-              {commentLoading ? "Saving…" : "Save"}
+                {commentLoading ? "Saving…" : "Comment"}
               </button>
             </div>
           </form>
-      </section>
+
+        </div>
+      </div>
     </main>
   );
 }

src/lib/db.ts

@@ -54,7 +54,7 @@ interface StoredAlert {
   firstSeen: string;
   lastSeen: string;
   closedAt: string | null;
-  comments: Array<{ id: number; body: string; createdAt: string }>;
+  comments: Array<{ id: number; body: string; createdAt: string; author: "user" | "system" }>;
 }
 
 function load(): Store {
@@ -127,13 +127,18 @@ export function upsertAlerts(candidates: AlertCandidate[]): number {
       if (isSuppressed) continue;
 
       // Re-open if previously closed (manually or resolved) and not suppressed.
-      // Preserve firstSeen and comments — this is the same incident continuing,
+      // Preserve firstSeen and comments — this is the same incident continuing.
-      // not a brand new one.
       if (existing.status === "closed") {
         existing.status = "open";
         existing.closeReason = null;
         existing.closedAt = null;
         existing.suppressedUntil = null;
+        existing.comments.push({
+          id: store.nextCommentId++,
+          body: "Alert reopened — condition is still active.",
+          createdAt: nowISO,
+          author: "system",
+        });
       }
 
       // Refresh content and lastSeen
@@ -228,18 +233,25 @@ export function reopenAlert(id: number): Alert | null {
   alert.closeReason = null;
   alert.closedAt = null;
   alert.suppressedUntil = null;
+  alert.comments.push({
+    id: store.nextCommentId++,
+    body: "Manually reopened.",
+    createdAt: new Date().toISOString(),
+    author: "system",
+  });
   save(store);
   return toAlert(alert);
 }
 
-export function addComment(alertId: number, body: string): AlertComment | null {
+export function addComment(alertId: number, body: string, author: "user" | "system" = "user"): AlertComment | null {
   const store = load();
   const alert = Object.values(store.alerts).find((a) => a.id === alertId);
   if (!alert) return null;
-  const comment = {
+  const comment: AlertComment = {
     id: store.nextCommentId++,
     body,
     createdAt: new Date().toISOString(),
+    author,
   };
   alert.comments.push(comment);
   save(store);

src/lib/types.ts

@@ -118,6 +118,7 @@ export interface AlertComment {
   id: number;
   body: string;
   createdAt: string;
+  author: "user" | "system";
 }
 
 export type AlertCloseReason = "manual" | "resolved";