feat(monitor): add search, status filter, and bulk invalid toggle

- Add search input to filter alerts by alertName or label values
- Add status filter dropdown (All/Resolved/Unresolved)
- Add Select All checkbox with indeterminate state for bulk invalid toggle
- Add indeterminate prop support to Checkbox component
- Add Monitor link to header navigation
- Fix KPI dashboard padding for empty state

apps/web/src/routes/monitor.tsx

@@ -2,7 +2,7 @@ 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 { FileUp, Filter, Search } from "lucide-react";
 import * as React from "react";
 
 import { AlertList } from "@/components/monitor/alert-list";
@@ -10,8 +10,19 @@ 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 { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
 import type { Incident, KpiMetrics, ProcessedAlert } from "@/lib/types/alerts";
 
+type StatusFilter = "all" | "resolved" | "unresolved";
+
 export const Route = createFileRoute("/monitor")({
   component: MonitorPage,
 });
@@ -24,6 +35,34 @@ function MonitorPage() {
     React.useState<ProcessedAlert | null>(null);
   const [isLoading, setIsLoading] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [statusFilter, setStatusFilter] = React.useState<StatusFilter>("all");
+
+  const filteredAlerts = React.useMemo(() => {
+    return alerts.filter((alert) => {
+      if (statusFilter === "resolved" && !alert.isResolved) return false;
+      if (statusFilter === "unresolved" && alert.isResolved) return false;
+
+      if (!searchQuery.trim()) return true;
+
+      const query = searchQuery.toLowerCase();
+      if (alert.alertName?.toLowerCase().includes(query)) return true;
+
+      for (const value of Object.values(alert.labels)) {
+        if (value.toLowerCase().includes(query)) return true;
+      }
+
+      return false;
+    });
+  }, [alerts, searchQuery, statusFilter]);
+
+  const selectAllState = React.useMemo(() => {
+    if (filteredAlerts.length === 0) return "none" as const;
+    const invalidCount = filteredAlerts.filter((a) => a.isInvalid).length;
+    if (invalidCount === 0) return "none" as const;
+    if (invalidCount === filteredAlerts.length) return "all" as const;
+    return "some" as const;
+  }, [filteredAlerts]);
 
   const recalculateKpis = React.useCallback(
     async (currentAlerts: ProcessedAlert[], currentIncidents: Incident[]) => {
@@ -86,6 +125,21 @@ function MonitorPage() {
     }
   };
 
+  const handleToggleAllInvalid = (isInvalid: boolean) => {
+    const filteredIds = new Set(filteredAlerts.map((a) => a.id));
+    setAlerts((prev) => {
+      const updated = prev.map((a) =>
+        filteredIds.has(a.id) ? { ...a, isInvalid } : a,
+      );
+      recalculateKpis(updated, incidents);
+      return updated;
+    });
+
+    if (selectedAlert && filteredIds.has(selectedAlert.id)) {
+      setSelectedAlert((prev) => (prev ? { ...prev, isInvalid } : null));
+    }
+  };
+
   const handleSelectAlert = (alert: ProcessedAlert) => {
     setSelectedAlert(alert);
   };
@@ -174,10 +228,60 @@ function MonitorPage() {
 
       <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">
+          <div className="flex shrink-0 items-center gap-2 border-b px-4 py-2">
+            <Checkbox
+              checked={selectAllState === "all"}
+              indeterminate={selectAllState === "some"}
+              onCheckedChange={(checked) =>
+                handleToggleAllInvalid(checked === true)
+              }
+              disabled={filteredAlerts.length === 0}
+              aria-label="Mark all filtered as invalid"
+            />
             <span className="text-xs font-medium text-muted-foreground">
-              Alerts ({alerts.length})
+              {filteredAlerts.length}
+              {(searchQuery || statusFilter !== "all") && ` / ${alerts.length}`}
             </span>
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                render={
+                  <Button variant="ghost" size="sm" className="h-7 gap-1 px-2">
+                    <Filter className="size-3" />
+                    <span className="text-xs">
+                      {statusFilter === "all"
+                        ? "All"
+                        : statusFilter === "resolved"
+                          ? "Resolved"
+                          : "Unresolved"}
+                    </span>
+                  </Button>
+                }
+              />
+              <DropdownMenuContent align="start">
+                <DropdownMenuRadioGroup
+                  value={statusFilter}
+                  onValueChange={(v) => setStatusFilter(v as StatusFilter)}
+                >
+                  <DropdownMenuRadioItem value="all">All</DropdownMenuRadioItem>
+                  <DropdownMenuRadioItem value="resolved">
+                    Resolved
+                  </DropdownMenuRadioItem>
+                  <DropdownMenuRadioItem value="unresolved">
+                    Unresolved
+                  </DropdownMenuRadioItem>
+                </DropdownMenuRadioGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <div className="relative ml-auto flex-1 max-w-xs">
+              <Search className="absolute left-2 top-1/2 size-3 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                type="text"
+                placeholder="Search alerts..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="h-7 pl-7 text-xs"
+              />
+            </div>
           </div>
           {alerts.length === 0 ? (
             <div className="flex flex-1 items-center justify-center">
@@ -193,7 +297,7 @@ function MonitorPage() {
             </div>
           ) : (
             <AlertList
-              alerts={alerts}
+              alerts={filteredAlerts}
               incidents={incidents}
               onToggleInvalid={handleToggleInvalid}
               onSelectAlert={handleSelectAlert}