feat(monitor): add alert monitoring page with KPI dashboard, alert list, and incident management

- Add Tauri plugins for file dialog and filesystem access
- Create Rust backend for processing Grafana alerts (pairing, KPI calculation)
- Add virtualized alert list with invalid toggle and incident attachment
- Add incident manager with create, attach, and detach functionality
- Add KPI dashboard showing coverage ratio, downtime, and invalid rate
- Add date-fns for date formatting

apps/web/src/components/monitor/alert-list-item.tsx

@@ -0,0 +1,159 @@
+import { cva } from "class-variance-authority";
+import { format } from "date-fns";
+import { Activity, Link as LinkIcon } from "lucide-react";
+import * as React from "react";
+
+import { Checkbox } from "@/components/ui/checkbox";
+import type { ProcessedAlert } from "@/lib/types/alerts";
+import { cn } from "@/lib/utils";
+
+function formatDuration(ms: number): string {
+  const seconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 0) return `${days}d ${hours % 24}h`;
+  if (hours > 0) return `${hours}h ${minutes % 60}m`;
+  if (minutes > 0) return `${minutes}m`;
+  return `${seconds}s`;
+}
+
+function formatTimeRange(start: number, end: number): string {
+  return `${format(start, "HH:mm:ss")} - ${format(end, "HH:mm:ss")}`;
+}
+
+const alertItemVariants = cva(
+  "group relative flex w-full items-center gap-3 border-b border-border p-3 transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+  {
+    variants: {
+      status: {
+        firing:
+          "bg-destructive/5 hover:bg-destructive/10 border-l-2 border-l-destructive",
+        resolved: "border-l-2 border-l-transparent",
+        pending: "border-l-2 border-l-yellow-500/50",
+      },
+      invalid: {
+        true: "opacity-60 grayscale bg-muted/30",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      status: "resolved",
+      invalid: false,
+    },
+  },
+);
+
+interface AlertListItemProps {
+  alert: ProcessedAlert;
+  isSelected?: boolean;
+  onToggleInvalid: (id: number, isInvalid: boolean) => void;
+  onSelect: (alert: ProcessedAlert) => void;
+  style?: React.CSSProperties;
+}
+
+export const AlertListItem = React.memo(
+  ({
+    alert,
+    isSelected,
+    onToggleInvalid,
+    onSelect,
+    style,
+  }: AlertListItemProps) => {
+    const status = alert.isFiring ? "firing" : "resolved";
+
+    return (
+      <div
+        style={style}
+        className={cn(
+          alertItemVariants({ status, invalid: alert.isInvalid }),
+          isSelected && "bg-muted border-l-primary",
+        )}
+        onClick={() => onSelect(alert)}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            onSelect(alert);
+          }
+        }}
+      >
+        <div
+          className="flex h-full items-start pt-0.5"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Checkbox
+            checked={alert.isInvalid}
+            onCheckedChange={(checked) =>
+              onToggleInvalid(alert.id, checked === true)
+            }
+            aria-label="Mark as invalid"
+          />
+        </div>
+
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <div className="flex items-center justify-between gap-2">
+            <span className="truncate text-xs font-semibold text-foreground">
+              {alert.alertName || `Unknown Alert #${alert.alertId}`}
+            </span>
+            <span className="flex shrink-0 items-center gap-1 text-[10px] font-mono text-muted-foreground">
+              {alert.durationMs > 0 && (
+                <span>{formatDuration(alert.durationMs)}</span>
+              )}
+            </span>
+          </div>
+
+          <div className="flex items-center justify-between gap-2 text-[10px] text-muted-foreground">
+            <div className="flex items-center gap-2">
+              <span
+                className={cn(
+                  "uppercase tracking-wider",
+                  alert.isFiring
+                    ? "text-destructive font-bold"
+                    : "text-green-600 dark:text-green-500",
+                )}
+              >
+                {alert.newState}
+              </span>
+              <span className="text-border">|</span>
+              <span className="font-mono">
+                {formatTimeRange(alert.time, alert.timeEnd)}
+              </span>
+            </div>
+
+            <div className="flex items-center gap-1.5">
+              {alert.attachedIncidentId && (
+                <div
+                  className="flex items-center gap-0.5 text-primary"
+                  title="Attached to incident"
+                >
+                  <LinkIcon className="size-3" />
+                  <span className="font-mono">{alert.attachedIncidentId}</span>
+                </div>
+              )}
+              {alert.isInvalid && (
+                <Activity className="size-3 text-muted-foreground/50" />
+              )}
+            </div>
+          </div>
+
+          <div className="truncate text-[10px] text-muted-foreground/70 font-mono">
+            {Object.entries(alert.values)
+              .map(
+                ([k, v]) =>
+                  `${k}=${Number.isFinite(v) ? v.toFixed(1) : String(v)}`,
+              )
+              .join(", ")}
+          </div>
+        </div>
+
+        {alert.isFiring && !alert.isInvalid && (
+          <div className="absolute right-0 top-0 h-full w-0.5 bg-destructive" />
+        )}
+      </div>
+    );
+  },
+);
+
+AlertListItem.displayName = "AlertListItem";

apps/web/src/components/monitor/alert-list.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { cn } from "@/lib/utils";
+import type { ProcessedAlert } from "@/lib/types/alerts";
+import { AlertListItem } from "./alert-list-item";
+
+interface AlertListProps {
+  alerts: ProcessedAlert[];
+  onToggleInvalid: (alertId: number, isInvalid: boolean) => void;
+  onSelectAlert: (alert: ProcessedAlert) => void;
+  selectedAlertId?: number;
+  className?: string;
+}
+
+export function AlertList({
+  alerts,
+  onToggleInvalid,
+  onSelectAlert,
+  selectedAlertId,
+  className,
+}: AlertListProps) {
+  const parentRef = React.useRef<HTMLDivElement>(null);
+
+  const getItemKey = React.useCallback(
+    (index: number) => alerts[index]?.id ?? index,
+    [alerts],
+  );
+
+  const virtualizer = useVirtualizer({
+    count: alerts.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 80,
+    overscan: 5,
+    getItemKey,
+  });
+
+  return (
+    <div
+      ref={parentRef}
+      className={cn("h-full w-full overflow-y-auto contain-strict", className)}
+    >
+      <div
+        style={{
+          height: `${virtualizer.getTotalSize()}px`,
+          width: "100%",
+          position: "relative",
+        }}
+      >
+        {virtualizer.getVirtualItems().map((virtualItem) => {
+          const alert = alerts[virtualItem.index];
+          if (!alert) return null;
+
+          return (
+            <AlertListItem
+              key={virtualItem.key}
+              alert={alert}
+              isSelected={selectedAlertId === alert.id}
+              onToggleInvalid={onToggleInvalid}
+              onSelect={onSelectAlert}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: `${virtualItem.size}px`,
+                transform: `translateY(${virtualItem.start}px)`,
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

apps/web/src/components/monitor/incident-manager.tsx

@@ -0,0 +1,224 @@
+import * as React from "react";
+import { format } from "date-fns";
+import { Plus, Link, Link2Off } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import type { Incident, ProcessedAlert } from "@/lib/types/alerts";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+interface IncidentManagerProps {
+  incidents: Incident[];
+  selectedAlert: ProcessedAlert | null;
+  onAddIncident: (incident: Omit<Incident, "attachedAlertIds">) => void;
+  onAttachAlert: (alertId: number, incidentId: string) => void;
+  onDetachAlert: (alertId: number) => void;
+}
+
+export function IncidentManager({
+  incidents,
+  selectedAlert,
+  onAddIncident,
+  onAttachAlert,
+  onDetachAlert,
+}: IncidentManagerProps) {
+  const [title, setTitle] = React.useState("");
+  const [description, setDescription] = React.useState("");
+  const [startTime, setStartTime] = React.useState("");
+  const [endTime, setEndTime] = React.useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title || !startTime || !endTime) return;
+
+    const newIncident: Omit<Incident, "attachedAlertIds"> = {
+      id: crypto.randomUUID(),
+      title,
+      description,
+      startTime: new Date(startTime).getTime(),
+      endTime: new Date(endTime).getTime(),
+    };
+
+    onAddIncident(newIncident);
+    setTitle("");
+    setDescription("");
+    setStartTime("");
+    setEndTime("");
+  };
+
+  return (
+    <div className="flex flex-col gap-4 h-full">
+      <Card className="shrink-0 rounded-none border-x-0 border-t-0 border-b">
+        <CardHeader className="pb-3">
+          <CardTitle>Create Incident</CardTitle>
+          <CardDescription>
+            Log a confirmed Redis incident to track downtime.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="grid gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="title">Title</Label>
+              <Input
+                id="title"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="e.g., Redis Master OOM"
+                required
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="description">Description</Label>
+              <Input
+                id="description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Brief details about the incident"
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="grid gap-2">
+                <Label htmlFor="startTime">Start Time</Label>
+                <Input
+                  id="startTime"
+                  type="datetime-local"
+                  value={startTime}
+                  onChange={(e) => setStartTime(e.target.value)}
+                  required
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="endTime">End Time</Label>
+                <Input
+                  id="endTime"
+                  type="datetime-local"
+                  value={endTime}
+                  onChange={(e) => setEndTime(e.target.value)}
+                  required
+                />
+              </div>
+            </div>
+            <Button type="submit" className="w-full mt-2" size="sm">
+              <Plus className="mr-2 size-4" />
+              Create Incident
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      <div className="flex-1 overflow-auto px-1">
+        <div className="space-y-4 pb-4">
+          <h3 className="text-xs font-medium text-muted-foreground px-4 uppercase tracking-wider">
+            Active Incidents ({incidents.length})
+          </h3>
+
+          {incidents.length === 0 ? (
+            <div className="px-4 py-8 text-center text-muted-foreground text-xs border border-dashed mx-4">
+              No incidents recorded
+            </div>
+          ) : (
+            <div className="grid gap-3 px-1">
+              {incidents.map((incident) => {
+                const isCurrentAlertAttached =
+                  selectedAlert?.attachedIncidentId === incident.id;
+
+                return (
+                  <Card
+                    key={incident.id}
+                    className={cn(
+                      "relative transition-colors",
+                      isCurrentAlertAttached &&
+                        "border-primary/50 bg-primary/5",
+                    )}
+                  >
+                    <CardHeader className="pb-2">
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="grid gap-1">
+                          <CardTitle className="leading-tight">
+                            {incident.title}
+                          </CardTitle>
+                          <CardDescription className="font-mono text-[10px]">
+                            ID: {incident.id.slice(0, 8)}
+                          </CardDescription>
+                        </div>
+                        {selectedAlert && (
+                          <Button
+                            variant={
+                              isCurrentAlertAttached
+                                ? "destructive"
+                                : "secondary"
+                            }
+                            size="xs"
+                            onClick={() =>
+                              isCurrentAlertAttached
+                                ? onDetachAlert(selectedAlert.id)
+                                : onAttachAlert(selectedAlert.id, incident.id)
+                            }
+                            className={cn(
+                              "shrink-0",
+                              isCurrentAlertAttached &&
+                                "bg-destructive/10 text-destructive hover:bg-destructive/20",
+                            )}
+                          >
+                            {isCurrentAlertAttached ? (
+                              <>
+                                <Link2Off className="mr-1 size-3" />
+                                Detach Alert
+                              </>
+                            ) : (
+                              <>
+                                <Link className="mr-1 size-3" />
+                                Attach Alert
+                              </>
+                            )}
+                          </Button>
+                        )}
+                      </div>
+                    </CardHeader>
+                    <CardContent className="pb-2 grid gap-1.5">
+                      <p className="text-xs text-muted-foreground">
+                        {incident.description || "No description provided."}
+                      </p>
+                      <div className="grid grid-cols-2 gap-2 text-[10px] text-muted-foreground font-mono mt-1 pt-2 border-t border-border/50">
+                        <div>
+                          <span className="opacity-50 block mb-0.5">START</span>
+                          {format(incident.startTime, "yyyy-MM-dd HH:mm")}
+                        </div>
+                        <div>
+                          <span className="opacity-50 block mb-0.5">END</span>
+                          {format(incident.endTime, "yyyy-MM-dd HH:mm")}
+                        </div>
+                      </div>
+                    </CardContent>
+                    <CardFooter className="pt-0 pb-3 text-[10px] text-muted-foreground">
+                      <div className="flex items-center gap-1.5 w-full">
+                        <div
+                          className={cn(
+                            "size-1.5 rounded-full",
+                            incident.attachedAlertIds.length > 0
+                              ? "bg-primary"
+                              : "bg-muted-foreground/30",
+                          )}
+                        />
+                        {incident.attachedAlertIds.length} alerts attached
+                      </div>
+                    </CardFooter>
+                  </Card>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/monitor/kpi-dashboard.tsx

@@ -0,0 +1,117 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import type { KpiMetrics } from "@/lib/types/alerts";
+
+interface KpiDashboardProps {
+  kpis: KpiMetrics | null;
+  isLoading?: boolean;
+}
+
+export function KpiDashboard({ kpis, isLoading = false }: KpiDashboardProps) {
+  if (isLoading) {
+    return (
+      <div className="grid gap-4 md:grid-cols-3">
+        <Card className="rounded-none">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              Error Coverage
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Skeleton className="h-7 w-20 rounded-none" />
+            <Skeleton className="mt-1 h-4 w-32 rounded-none" />
+          </CardContent>
+        </Card>
+        <Card className="rounded-none">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              Total Downtime
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Skeleton className="h-7 w-20 rounded-none" />
+          </CardContent>
+        </Card>
+        <Card className="rounded-none">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              Invalid Alerts
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Skeleton className="h-7 w-20 rounded-none" />
+            <Skeleton className="mt-1 h-4 w-32 rounded-none" />
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (!kpis) {
+    return (
+      <Card className="rounded-none">
+        <CardContent className="pt-6 text-center text-xs text-muted-foreground">
+          No KPI data available
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const coverageColor =
+    kpis.errorCoverageRatio > 80
+      ? "text-green-500"
+      : kpis.errorCoverageRatio > 50
+        ? "text-yellow-500"
+        : "text-destructive";
+
+  const invalidColor =
+    kpis.invalidAlertRatio < 10
+      ? "text-green-500"
+      : kpis.invalidAlertRatio < 25
+        ? "text-yellow-500"
+        : "text-destructive";
+
+  return (
+    <div className="grid gap-4 md:grid-cols-3">
+      <Card className="rounded-none">
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Error Coverage</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className={cn("text-2xl font-bold", coverageColor)}>
+            {kpis.errorCoverageRatio.toFixed(1)}%
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {kpis.coveredIncidents} of {kpis.totalIncidents} incidents
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card className="rounded-none">
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Total Downtime</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">
+            {kpis.overallDowntimeFormatted}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="rounded-none">
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Invalid Alerts</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className={cn("text-2xl font-bold", invalidColor)}>
+            {kpis.invalidAlertRatio.toFixed(1)}%
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {kpis.invalidAlerts} of {kpis.totalFiringAlerts} alerts
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

apps/web/src/lib/types/alerts.ts

@@ -0,0 +1,43 @@
+export interface ProcessedAlert {
+  id: number;
+  alertId: number;
+  alertName?: string;
+  newState: string;
+  prevState: string;
+  time: number;
+  timeEnd: number;
+  text: string;
+  durationMs: number;
+  isFiring: boolean;
+  isInvalid: boolean;
+  attachedIncidentId: string | null;
+  values: Record<string, number>;
+}
+
+export interface Incident {
+  id: string;
+  title: string;
+  description: string;
+  startTime: number;
+  endTime: number;
+  attachedAlertIds: number[];
+}
+
+export interface KpiMetrics {
+  errorCoverageRatio: number;
+  totalIncidents: number;
+  coveredIncidents: number;
+  overallDowntimeMs: number;
+  overallDowntimeFormatted: string;
+  invalidAlertRatio: number;
+  totalFiringAlerts: number;
+  invalidAlerts: number;
+}
+
+export interface MonitorState {
+  alerts: ProcessedAlert[];
+  incidents: Incident[];
+  kpis: KpiMetrics | null;
+  isLoading: boolean;
+  error: string | null;
+}

apps/web/src/routeTree.gen.ts

@@ -9,8 +9,14 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as MonitorRouteImport } from './routes/monitor'
 import { Route as IndexRouteImport } from './routes/index'
 
+const MonitorRoute = MonitorRouteImport.update({
+  id: '/monitor',
+  path: '/monitor',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -19,28 +25,39 @@ const IndexRoute = IndexRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/monitor': typeof MonitorRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/monitor': typeof MonitorRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/monitor': typeof MonitorRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/'
+  fullPaths: '/' | '/monitor'
   fileRoutesByTo: FileRoutesByTo
-  to: '/'
-  id: '__root__' | '/'
+  to: '/' | '/monitor'
+  id: '__root__' | '/' | '/monitor'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  MonitorRoute: typeof MonitorRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/monitor': {
+      id: '/monitor'
+      path: '/monitor'
+      fullPath: '/monitor'
+      preLoaderRoute: typeof MonitorRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -53,6 +70,7 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  MonitorRoute: MonitorRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

apps/web/src/routes/index.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, Link } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/")({
   component: HomeComponent,
@@ -29,6 +29,9 @@ function HomeComponent() {
           <h2 className="mb-2 font-medium">API Status</h2>
         </section>
       </div>
+      <Link to="/monitor" className="text-blue-500 underline">
+        Go to Monitor Page
+      </Link>
     </div>
   );
 }

apps/web/src/routes/monitor.tsx

@@ -0,0 +1,220 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { invoke } from "@tauri-apps/api/core";
+import { open } from "@tauri-apps/plugin-dialog";
+import { readTextFile } from "@tauri-apps/plugin-fs";
+import { FileUp } from "lucide-react";
+import * as React from "react";
+
+import { AlertList } from "@/components/monitor/alert-list";
+import { IncidentManager } from "@/components/monitor/incident-manager";
+import { KpiDashboard } from "@/components/monitor/kpi-dashboard";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { Incident, KpiMetrics, ProcessedAlert } from "@/lib/types/alerts";
+
+export const Route = createFileRoute("/monitor")({
+  component: MonitorPage,
+});
+
+function MonitorPage() {
+  const [alerts, setAlerts] = React.useState<ProcessedAlert[]>([]);
+  const [incidents, setIncidents] = React.useState<Incident[]>([]);
+  const [kpis, setKpis] = React.useState<KpiMetrics | null>(null);
+  const [selectedAlert, setSelectedAlert] =
+    React.useState<ProcessedAlert | null>(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const recalculateKpis = React.useCallback(
+    async (currentAlerts: ProcessedAlert[], currentIncidents: Incident[]) => {
+      try {
+        const newKpis = await invoke<KpiMetrics>("calculate_kpis_command", {
+          alerts: currentAlerts,
+          incidents: currentIncidents,
+        });
+        setKpis(newKpis);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      }
+    },
+    [],
+  );
+
+  const handleLoadFile = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const filePath = await open({
+        multiple: false,
+        filters: [{ name: "JSON", extensions: ["json"] }],
+      });
+
+      if (!filePath) {
+        setIsLoading(false);
+        return;
+      }
+
+      const content = await readTextFile(filePath);
+
+      const processedAlerts = await invoke<ProcessedAlert[]>(
+        "process_alerts_json",
+        { jsonContent: content },
+      );
+
+      setAlerts(processedAlerts);
+      setSelectedAlert(null);
+      await recalculateKpis(processedAlerts, incidents);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleToggleInvalid = async (alertId: number, isInvalid: boolean) => {
+    try {
+      const updatedAlerts = await invoke<ProcessedAlert[]>(
+        "set_alert_invalid",
+        {
+          alerts,
+          alertId,
+          isInvalid,
+        },
+      );
+      setAlerts(updatedAlerts);
+      await recalculateKpis(updatedAlerts, incidents);
+
+      if (selectedAlert?.id === alertId) {
+        const updated = updatedAlerts.find((a) => a.id === alertId);
+        if (updated) setSelectedAlert(updated);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+
+  const handleSelectAlert = (alert: ProcessedAlert) => {
+    setSelectedAlert(alert);
+  };
+
+  const handleAddIncident = (incident: Omit<Incident, "attachedAlertIds">) => {
+    const newIncident: Incident = {
+      ...incident,
+      attachedAlertIds: [],
+    };
+    const newIncidents = [...incidents, newIncident];
+    setIncidents(newIncidents);
+    recalculateKpis(alerts, newIncidents);
+  };
+
+  const handleAttachAlert = async (alertId: number, incidentId: string) => {
+    try {
+      const [updatedAlerts, updatedIncidents] = await invoke<
+        [ProcessedAlert[], Incident[]]
+      >("attach_alert_to_incident", {
+        alerts,
+        incidents,
+        alertId,
+        incidentId,
+      });
+
+      setAlerts(updatedAlerts);
+      setIncidents(updatedIncidents);
+      await recalculateKpis(updatedAlerts, updatedIncidents);
+
+      if (selectedAlert?.id === alertId) {
+        const updated = updatedAlerts.find((a) => a.id === alertId);
+        if (updated) setSelectedAlert(updated);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+
+  const handleDetachAlert = async (alertId: number) => {
+    try {
+      const [updatedAlerts, updatedIncidents] = await invoke<
+        [ProcessedAlert[], Incident[]]
+      >("detach_alert_from_incident", {
+        alerts,
+        incidents,
+        alertId,
+      });
+
+      setAlerts(updatedAlerts);
+      setIncidents(updatedIncidents);
+      await recalculateKpis(updatedAlerts, updatedIncidents);
+
+      if (selectedAlert?.id === alertId) {
+        const updated = updatedAlerts.find((a) => a.id === alertId);
+        if (updated) setSelectedAlert(updated);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+
+  return (
+    <div className="flex h-screen flex-col overflow-hidden">
+      <header className="flex shrink-0 items-center justify-between border-b px-4 py-3">
+        <h1 className="text-sm font-semibold">Alert Monitor</h1>
+        <Button onClick={handleLoadFile} disabled={isLoading} size="sm">
+          <FileUp className="mr-2 size-4" />
+          {isLoading ? "Loading..." : "Load Alerts JSON"}
+        </Button>
+      </header>
+
+      {error && (
+        <div className="shrink-0 border-b border-destructive/50 bg-destructive/10 px-4 py-2 text-xs text-destructive">
+          {error}
+        </div>
+      )}
+
+      <div className="shrink-0 border-b p-4">
+        <KpiDashboard kpis={kpis} isLoading={isLoading} />
+      </div>
+
+      <div className="grid min-h-0 flex-1 grid-cols-[1fr_360px]">
+        <div className="flex min-h-0 flex-col border-r">
+          <div className="shrink-0 border-b px-4 py-2">
+            <span className="text-xs font-medium text-muted-foreground">
+              Alerts ({alerts.length})
+            </span>
+          </div>
+          {alerts.length === 0 ? (
+            <div className="flex flex-1 items-center justify-center">
+              <Card className="max-w-sm">
+                <CardHeader>
+                  <CardTitle>No Alerts Loaded</CardTitle>
+                </CardHeader>
+                <CardContent className="text-xs text-muted-foreground">
+                  Click "Load Alerts JSON" to import alert data from a Grafana
+                  Alerts API export.
+                </CardContent>
+              </Card>
+            </div>
+          ) : (
+            <AlertList
+              alerts={alerts}
+              onToggleInvalid={handleToggleInvalid}
+              onSelectAlert={handleSelectAlert}
+              selectedAlertId={selectedAlert?.id}
+              className="flex-1"
+            />
+          )}
+        </div>
+
+        <div className="min-h-0 overflow-hidden">
+          <IncidentManager
+            incidents={incidents}
+            selectedAlert={selectedAlert}
+            onAddIncident={handleAddIncident}
+            onAttachAlert={handleAttachAlert}
+            onDetachAlert={handleDetachAlert}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}