From c86b8ff33a7b8a30175c22b136a499d47ce7ec1f Mon Sep 17 00:00:00 2001
From: Josh Wright <josh@thewrightserver.net>
Date: Sun, 12 Apr 2026 11:44:51 -0400
Subject: [PATCH] Rework alert comments: authors, system events, wider layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 | 214 +++++++++++++++++++---------
 src/lib/db.ts                       |  22 ++-
 src/lib/types.ts                    |   1 +
 3 files changed, 167 insertions(+), 70 deletions(-)

diff --git a/src/app/alerts/[id]/AlertDetail.tsx b/src/app/alerts/[id]/AlertDetail.tsx
index 6437e0b..1f5fa23 100644
--- a/src/app/alerts/[id]/AlertDetail.tsx
+++ b/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,74 +163,92 @@ export default function AlertDetail({ initialAlert }: { initialAlert: Alert }) {
         </div>
       )}
 
-      {/* Alert card */}
-      <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]}`}>
+      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6 items-start">
 
-        {/* Status row */}
-        <div className="flex items-center justify-between gap-3">
-          <span className={`inline-flex items-center gap-1.5 text-xs font-semibold ${
-            isOpen ? "text-green-400" : isResolved ? "text-teal-400" : "text-slate-500"
-          }`}>
-            {isOpen && <span className="h-1.5 w-1.5 rounded-full bg-green-400 shrink-0" />}
-            {isOpen ? "Open" : isResolved ? "Auto-resolved" : "Closed"}
-            <span className="text-slate-700 font-normal">·</span>
-            <span className="text-slate-600 font-normal">{timeAgo(statusTime)}</span>
-          </span>
+        {/* ── 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">
 
-          <button
-            onClick={toggleStatus}
-            disabled={actionLoading}
-            className={`rounded-lg px-4 py-1.5 text-xs font-semibold transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
-              isOpen
-                ? "bg-slate-700 hover:bg-slate-600 text-white"
-                : "bg-green-900/50 hover:bg-green-800/50 text-green-300 border border-green-800"
-            }`}
-          >
-            {actionLoading ? "…" : isOpen ? "Close" : "Reopen"}
-          </button>
+            {/* Status row */}
+            <div className="flex items-center justify-between gap-3">
+              <span className={`inline-flex items-center gap-1.5 text-xs font-semibold ${
+                isOpen ? "text-green-400" : isResolved ? "text-teal-400" : "text-slate-500"
+              }`}>
+                {isOpen && <span className="h-1.5 w-1.5 rounded-full bg-green-400 shrink-0" />}
+                {isOpen ? "Open" : isResolved ? "Auto-resolved" : "Closed"}
+                <span className="text-slate-700 font-normal">·</span>
+                <span className="text-slate-600 font-normal">{timeAgo(statusTime)}</span>
+              </span>
+
+              <button
+                onClick={toggleStatus}
+                disabled={actionLoading}
+                className={`rounded-lg px-4 py-1.5 text-xs font-semibold transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
+                  isOpen
+                    ? "bg-slate-700 hover:bg-slate-600 text-white"
+                    : "bg-green-900/50 hover:bg-green-800/50 text-green-300 border border-green-800"
+                }`}
+              >
+                {actionLoading ? "…" : isOpen ? "Close" : "Reopen"}
+              </button>
+            </div>
+
+            {/* Severity + title + description */}
+            <div className="space-y-1.5">
+              <span className={`text-xs font-bold uppercase tracking-widest ${severityText[alert.severity]}`}>
+                {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>
 
-        {/* Title + description */}
-        <div className="space-y-1.5">
-          <h1 className="text-lg font-bold text-white leading-snug">{alert.title}</h1>
-          <p className="text-sm text-slate-400 leading-relaxed">{alert.description}</p>
+        {/* ── Comments ─────────────────────────────────────────────────── */}
+        <div className="lg:col-span-2 flex flex-col gap-4">
+
+          <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 comments yet.</p>
+            )}
+            {alert.comments.map((c) => (
+              <CommentRow key={c.id} comment={c} />
+            ))}
+            <div ref={bottomRef} />
+          </div>
+
+          <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)}
+              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"
+            />
+            <div className="flex justify-end">
+              <button
+                type="submit"
+                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…" : "Comment"}
+              </button>
+            </div>
+          </form>
+
         </div>
       </div>
-
-      {/* Notes */}
-      <section className="space-y-3 pt-1">
-        <h2 className="text-xs font-semibold uppercase tracking-widest text-slate-600">Notes</h2>
-
-        {alert.comments.length === 0 && (
-          <p className="text-sm text-slate-700">No notes yet.</p>
-        )}
-
-        {alert.comments.map((c) => (
-          <div key={c.id} className="space-y-1">
-            <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>
-        ))}
-
-        <form onSubmit={submitComment} className="flex flex-col gap-2 pt-1">
-          <textarea
-            value={commentText}
-            onChange={(e) => setCommentText(e.target.value)}
-            placeholder="Add a note…"
-            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"
-          />
-          <div className="flex justify-end">
-            <button
-              type="submit"
-              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"}
-            </button>
-          </div>
-        </form>
-      </section>
     </main>
   );
 }
diff --git a/src/lib/db.ts b/src/lib/db.ts
index f935863..f400a2b 100644
--- a/src/lib/db.ts
+++ b/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,
-      // not a brand new one.
+      // Preserve firstSeen and comments — this is the same incident continuing.
       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);
diff --git a/src/lib/types.ts b/src/lib/types.ts
index c852be9..924a84e 100644
--- a/src/lib/types.ts
+++ b/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";