feat(models): add alert and box models

Adds comprehensive data structures for Alert and Box functionality across models.

static/css/account.css

@@ -938,6 +938,108 @@ textarea:disabled {
     margin: 0;
 }
 
+.alerts-layout {
+    display: grid;
+    grid-template-rows: auto auto minmax(0, 1fr);
+    gap: 10px;
+    min-height: min(920px, calc(100vh - 96px));
+}
+
+.alerts-filterbar {
+    display: grid;
+    grid-template-columns: minmax(180px, 1fr) repeat(4, minmax(130px, auto)) auto;
+    align-items: end;
+    gap: 8px;
+    padding: 8px;
+}
+
+.alerts-workspace {
+    min-height: 0;
+    display: grid;
+    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr);
+    gap: 10px;
+}
+
+.alerts-table-scroll {
+    height: 520px;
+}
+
+.alerts-table {
+    min-width: 980px;
+}
+
+.alerts-table tr.is-selected td {
+    background: #ffffcc;
+}
+
+.alerts-detail {
+    min-height: 0;
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    gap: 8px;
+    padding: 8px;
+}
+
+.alerts-detail h2,
+.alerts-detail p {
+    margin: 0;
+}
+
+.metadata-pre {
+    min-height: 260px;
+    margin: 0;
+    padding: 10px;
+    overflow: auto;
+    color: #b7ffc8;
+    background: #030403;
+    background-image: repeating-linear-gradient(transparent 0 4px, rgba(0, 255, 102, .018) 4px 6px);
+    font-family: 'MonoCraft', 'Courier New', monospace;
+    font-size: 12px;
+    line-height: 16px;
+    white-space: pre-wrap;
+}
+
+.bulk-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 6px;
+    padding: 8px;
+}
+
+.boxes-layout {
+    display: grid;
+    grid-template-rows: auto auto minmax(0, 1fr) auto;
+    gap: 10px;
+    min-height: min(920px, calc(100vh - 96px));
+}
+
+.boxes-filterbar {
+    display: grid;
+    grid-template-columns: minmax(180px, 1fr) repeat(4, minmax(120px, auto)) auto;
+    align-items: end;
+    gap: 8px;
+    padding: 8px;
+}
+
+.boxes-table-scroll {
+    height: 540px;
+    overflow-x: auto;
+}
+
+.boxes-table {
+    min-width: 1180px;
+}
+
+.pagination-strip {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 8px;
+}
+
 .scroll-panel {
     overflow: auto;
     color: #000000;
@@ -1214,10 +1316,19 @@ textarea:disabled {
     }
 
     .dashboard-hero,
-    .main-grid {
+    .main-grid,
+    .alerts-workspace {
         grid-template-columns: 1fr;
     }
 
+    .alerts-filterbar {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .boxes-filterbar {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
     .span-2 {
         grid-column: auto;
     }
@@ -1333,6 +1444,22 @@ textarea:disabled {
         grid-template-columns: 58px minmax(0, 1fr);
     }
 
+    .alerts-filterbar {
+        grid-template-columns: 1fr;
+    }
+
+    .alerts-table-scroll {
+        height: 420px;
+    }
+
+    .boxes-filterbar {
+        grid-template-columns: 1fr;
+    }
+
+    .boxes-table-scroll {
+        height: 420px;
+    }
+
     .win98-window-controls {
         display: none;
     }

static/js/account-alerts.js

@@ -0,0 +1,16 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const title = document.querySelector("[data-alert-detail-title]");
+    const description = document.querySelector("[data-alert-detail-description]");
+    const metadata = document.querySelector("[data-alert-detail-metadata]");
+
+    document.querySelectorAll("[data-alert-row]").forEach((row) => {
+        row.addEventListener("click", (event) => {
+            if (event.target.closest("button, input, a")) return;
+            document.querySelectorAll("[data-alert-row].is-selected").forEach((item) => item.classList.remove("is-selected"));
+            row.classList.add("is-selected");
+            if (title) title.textContent = row.dataset.alertTitle || "";
+            if (description) description.textContent = row.dataset.alertDescription || "";
+            if (metadata) metadata.textContent = row.dataset.alertMetadata || "{}";
+        });
+    });
+});