@tonyclaw/agent-inspector 2.1.2 → 2.1.4

package/src/components/alerts/AlertsDialog.tsx

@@ -0,0 +1,610 @@
+import { type JSX, useEffect, useMemo, useState } from "react";
+import { AlertTriangle, Bell, Clock3, Loader2, RefreshCw, ShieldAlert, Siren } from "lucide-react";
+import type { Alert, AlertCategory, AlertSeverity, AlertSource } from "../../lib/alertContract";
+import { type AlertListFilters, useAlerts, useAlertSummary } from "../../lib/useAlerts";
+import { cn } from "../../lib/utils";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+
+type SeverityFilter = AlertSeverity | "all";
+type CategoryFilter = AlertCategory | "all";
+
+const ALERT_CATEGORIES: AlertCategory[] = [
+  "request-failure",
+  "request-timeout",
+  "slow-response",
+  "tool-schema",
+  "run-failure",
+  "group-failure",
+  "group-incomplete",
+];
+
+function severityLabel(severity: AlertSeverity): string {
+  switch (severity) {
+    case "critical":
+      return "Critical";
+    case "warning":
+      return "Warning";
+    case "notice":
+      return "Notice";
+  }
+}
+
+function sourceLabel(source: AlertSource): string {
+  switch (source) {
+    case "proxy":
+      return "Proxy";
+    case "tool-schema":
+      return "Tool schema";
+    case "run":
+      return "Run";
+    case "group":
+      return "Group";
+  }
+}
+
+function categoryLabel(category: AlertCategory): string {
+  switch (category) {
+    case "request-failure":
+      return "Request failure";
+    case "request-timeout":
+      return "Timeout";
+    case "slow-response":
+      return "Slow response";
+    case "tool-schema":
+      return "Tool calling";
+    case "run-failure":
+      return "Run failure";
+    case "group-failure":
+      return "Group failure";
+    case "group-incomplete":
+      return "Group incomplete";
+  }
+}
+
+function severityAccent(severity: AlertSeverity): string {
+  switch (severity) {
+    case "critical":
+      return "border-red-400/40 bg-red-500/12 text-red-100";
+    case "warning":
+      return "border-amber-300/35 bg-amber-400/12 text-amber-100";
+    case "notice":
+      return "border-sky-300/35 bg-sky-400/12 text-sky-100";
+  }
+}
+
+function severityDot(severity: AlertSeverity): string {
+  switch (severity) {
+    case "critical":
+      return "bg-red-400";
+    case "warning":
+      return "bg-amber-300";
+    case "notice":
+      return "bg-sky-300";
+  }
+}
+
+function severityText(severity: AlertSeverity): string {
+  switch (severity) {
+    case "critical":
+      return "text-red-200";
+    case "warning":
+      return "text-amber-100";
+    case "notice":
+      return "text-sky-100";
+  }
+}
+
+function categoryIcon(category: AlertCategory): JSX.Element {
+  switch (category) {
+    case "request-failure":
+    case "run-failure":
+    case "group-failure":
+      return <ShieldAlert className="size-3.5" />;
+    case "request-timeout":
+    case "slow-response":
+      return <Clock3 className="size-3.5" />;
+    case "tool-schema":
+      return <AlertTriangle className="size-3.5" />;
+    case "group-incomplete":
+      return <Bell className="size-3.5" />;
+  }
+}
+
+function formatTimestamp(value: string): string {
+  const millis = Date.parse(value);
+  if (!Number.isFinite(millis)) return value;
+  return new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  }).format(new Date(millis));
+}
+
+function formatCount(value: number): string {
+  return value.toLocaleString();
+}
+
+function providerModel(alert: Alert): string {
+  if (alert.provider !== null && alert.model !== null) return `${alert.provider} / ${alert.model}`;
+  if (alert.provider !== null) return alert.provider;
+  if (alert.model !== null) return alert.model;
+  return "Unknown target";
+}
+
+function filtersFrom(severity: SeverityFilter, category: CategoryFilter): AlertListFilters {
+  const filters: AlertListFilters = { limit: 100 };
+  if (severity !== "all") filters.severity = severity;
+  if (category !== "all") filters.category = category;
+  return filters;
+}
+
+function selectedAlertFrom(alerts: readonly Alert[], selectedAlertId: string | null): Alert | null {
+  if (selectedAlertId !== null) {
+    const selected = alerts.find((alert) => alert.id === selectedAlertId);
+    if (selected !== undefined) return selected;
+  }
+  return alerts[0] ?? null;
+}
+
+function AlertSummaryPill({
+  label,
+  count,
+  tone,
+}: {
+  label: string;
+  count: number;
+  tone: "critical" | "warning" | "notice" | "neutral";
+}): JSX.Element {
+  const toneClass =
+    tone === "critical"
+      ? "border-red-400/30 bg-red-500/10 text-red-100"
+      : tone === "warning"
+        ? "border-amber-300/30 bg-amber-400/10 text-amber-100"
+        : tone === "notice"
+          ? "border-sky-300/30 bg-sky-400/10 text-sky-100"
+          : "border-border bg-muted/40 text-foreground";
+
+  return (
+    <div className={cn("rounded-md border px-3 py-2", toneClass)}>
+      <div className="text-[10px] font-semibold uppercase opacity-75">{label}</div>
+      <div className="mt-1 text-lg font-semibold leading-none">{formatCount(count)}</div>
+    </div>
+  );
+}
+
+function SeverityFilterButton({
+  value,
+  active,
+  label,
+  count,
+  onClick,
+}: {
+  value: SeverityFilter;
+  active: boolean;
+  label: string;
+  count: number | null;
+  onClick: (value: SeverityFilter) => void;
+}): JSX.Element {
+  return (
+    <Button
+      type="button"
+      variant={active ? "secondary" : "ghost"}
+      size="sm"
+      aria-pressed={active}
+      onClick={() => onClick(value)}
+      className="h-7 px-2"
+    >
+      {label}
+      {count !== null ? <Badge variant="outline">{formatCount(count)}</Badge> : null}
+    </Button>
+  );
+}
+
+function CategoryFilterButton({
+  category,
+  active,
+  count,
+  onClick,
+}: {
+  category: AlertCategory;
+  active: boolean;
+  count: number;
+  onClick: (category: CategoryFilter) => void;
+}): JSX.Element {
+  return (
+    <Button
+      type="button"
+      variant={active ? "secondary" : "ghost"}
+      size="sm"
+      aria-pressed={active}
+      onClick={() => onClick(category)}
+      className="h-7 px-2"
+    >
+      {categoryIcon(category)}
+      {categoryLabel(category)}
+      <Badge variant="outline">{formatCount(count)}</Badge>
+    </Button>
+  );
+}
+
+function AlertList({
+  alerts,
+  selectedAlertId,
+  isLoading,
+  error,
+  onSelect,
+}: {
+  alerts: Alert[];
+  selectedAlertId: string | null;
+  isLoading: boolean;
+  error: Error | undefined;
+  onSelect: (alertId: string) => void;
+}): JSX.Element {
+  if (isLoading) {
+    return (
+      <div className="flex min-h-56 items-center justify-center rounded-md border border-dashed border-border text-xs text-muted-foreground">
+        <Loader2 className="mr-2 size-3.5 animate-spin" />
+        Loading alerts...
+      </div>
+    );
+  }
+
+  if (error !== undefined) {
+    return (
+      <div className="rounded-md border border-red-300/30 bg-red-500/10 px-3 py-2 text-xs text-red-100">
+        {error.message}
+      </div>
+    );
+  }
+
+  if (alerts.length === 0) {
+    return (
+      <div className="flex min-h-56 items-center justify-center rounded-md border border-dashed border-border px-4 text-center text-xs text-muted-foreground">
+        No alerts match the current filters.
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-0 space-y-2 overflow-y-auto pr-1">
+      {alerts.map((alert) => {
+        const selected = alert.id === selectedAlertId;
+        return (
+          <button
+            type="button"
+            key={alert.id}
+            onClick={() => onSelect(alert.id)}
+            className={cn(
+              "w-full rounded-md border px-3 py-3 text-left transition-colors",
+              selected
+                ? "border-primary/60 bg-primary/12"
+                : "border-border bg-background/70 hover:border-primary/30 hover:bg-muted/60",
+            )}
+          >
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0">
+                <div className="flex min-w-0 items-center gap-2">
+                  <span className={cn("size-2 rounded-full", severityDot(alert.severity))} />
+                  <span className={cn("text-xs font-semibold", severityText(alert.severity))}>
+                    {severityLabel(alert.severity)}
+                  </span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {categoryLabel(alert.category)}
+                  </span>
+                </div>
+                <div className="mt-1 truncate text-sm font-semibold">{alert.title}</div>
+                <div className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+                  {alert.message}
+                </div>
+              </div>
+              {alert.count > 1 ? (
+                <Badge variant="outline" className="shrink-0">
+                  x{formatCount(alert.count)}
+                </Badge>
+              ) : null}
+            </div>
+            <div className="mt-2 flex min-w-0 items-center justify-between gap-2 text-[11px] text-muted-foreground">
+              <span className="truncate">{providerModel(alert)}</span>
+              <span className="shrink-0">{formatTimestamp(alert.lastSeenAt)}</span>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function AlertEvidenceLinks({
+  alert,
+  onNavigate,
+}: {
+  alert: Alert;
+  onNavigate: () => void;
+}): JSX.Element {
+  if (alert.evidence.length === 0) {
+    return <span className="text-xs text-muted-foreground">No linked evidence</span>;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {alert.evidence.map((link) => {
+        if (link.href === null) {
+          return (
+            <Badge key={`${link.kind}:${link.id}`} variant="outline">
+              {link.label}
+            </Badge>
+          );
+        }
+        return (
+          <Badge key={`${link.kind}:${link.id}`} variant="outline" asChild>
+            <a href={link.href} onClick={onNavigate}>
+              {link.label}
+            </a>
+          </Badge>
+        );
+      })}
+    </div>
+  );
+}
+
+function AlertDetails({
+  alert,
+  onNavigate,
+}: {
+  alert: Alert | null;
+  onNavigate: () => void;
+}): JSX.Element {
+  if (alert === null) {
+    return (
+      <div className="flex min-h-56 items-center justify-center rounded-md border border-dashed border-border px-4 text-center text-xs text-muted-foreground">
+        Select an alert to inspect its evidence.
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-0 overflow-y-auto rounded-md border border-border bg-background/70">
+      <div className={cn("border-b px-4 py-3", severityAccent(alert.severity))}>
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <div className="flex flex-wrap items-center gap-2">
+              <Badge variant="outline">{severityLabel(alert.severity)}</Badge>
+              <Badge variant="outline">{sourceLabel(alert.source)}</Badge>
+              <Badge variant="outline">{categoryLabel(alert.category)}</Badge>
+            </div>
+            <h3 className="mt-3 text-base font-semibold">{alert.title}</h3>
+            <p className="mt-1 text-sm opacity-85">{alert.message}</p>
+          </div>
+          {alert.count > 1 ? (
+            <Badge variant="outline" className="shrink-0">
+              {formatCount(alert.count)} hits
+            </Badge>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="space-y-4 p-4">
+        <div className="grid gap-2 text-xs sm:grid-cols-2">
+          <DetailRow label="Target" value={providerModel(alert)} />
+          <DetailRow label="Last seen" value={formatTimestamp(alert.lastSeenAt)} />
+          <DetailRow label="First seen" value={formatTimestamp(alert.firstSeenAt)} />
+          <DetailRow label="Protocol" value={alert.apiFormat ?? "n/a"} />
+        </div>
+
+        <div>
+          <div className="mb-2 text-xs font-semibold text-muted-foreground">Evidence</div>
+          <AlertEvidenceLinks alert={alert} onNavigate={onNavigate} />
+        </div>
+
+        <div className="grid gap-2 text-xs sm:grid-cols-2">
+          <DetailRow
+            label="Logs"
+            value={alert.logIds.length === 0 ? "n/a" : formatCount(alert.logIds.length)}
+          />
+          <DetailRow
+            label="Sessions"
+            value={alert.sessionIds.length === 0 ? "n/a" : formatCount(alert.sessionIds.length)}
+          />
+          <DetailRow
+            label="Runs"
+            value={alert.runIds.length === 0 ? "n/a" : formatCount(alert.runIds.length)}
+          />
+          <DetailRow
+            label="Groups"
+            value={alert.groupIds.length === 0 ? "n/a" : formatCount(alert.groupIds.length)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DetailRow({ label, value }: { label: string; value: string }): JSX.Element {
+  return (
+    <div className="rounded-md border border-border bg-muted/30 px-3 py-2">
+      <div className="text-[10px] font-semibold uppercase text-muted-foreground">{label}</div>
+      <div className="mt-1 truncate font-mono text-[11px] text-foreground">{value}</div>
+    </div>
+  );
+}
+
+export function AlertsDialog(): JSX.Element {
+  const [open, setOpen] = useState(false);
+  const [severityFilter, setSeverityFilter] = useState<SeverityFilter>("all");
+  const [categoryFilter, setCategoryFilter] = useState<CategoryFilter>("all");
+  const [selectedAlertId, setSelectedAlertId] = useState<string | null>(null);
+  const { summary, isLoading: summaryLoading } = useAlertSummary();
+  const filters = useMemo(
+    () => filtersFrom(severityFilter, categoryFilter),
+    [categoryFilter, severityFilter],
+  );
+  const { alerts, total, isLoading, error, mutate } = useAlerts(filters, open);
+  const selectedAlert = useMemo(
+    () => selectedAlertFrom(alerts, selectedAlertId),
+    [alerts, selectedAlertId],
+  );
+
+  useEffect(() => {
+    if (!open) return;
+    const selectedExists =
+      selectedAlertId !== null && alerts.some((alert) => alert.id === selectedAlertId);
+    if (selectedExists) return;
+    setSelectedAlertId(alerts[0]?.id ?? null);
+  }, [alerts, open, selectedAlertId]);
+
+  const totalCount = summary?.total ?? 0;
+  const criticalCount = summary?.critical ?? 0;
+  const warningCount = summary?.warning ?? 0;
+  const noticeCount = summary?.notice ?? 0;
+  const triggerTone =
+    criticalCount > 0 ? "bg-red-500" : warningCount > 0 ? "bg-amber-400" : "bg-sky-400";
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="relative size-8"
+          aria-label="Alerts"
+          title="Alerts"
+        >
+          <Siren className="size-4" />
+          {summaryLoading ? (
+            <Loader2 className="absolute -right-0.5 -top-0.5 size-3 animate-spin text-muted-foreground" />
+          ) : totalCount > 0 ? (
+            <span
+              className={cn(
+                "absolute -right-1 -top-1 min-w-4 rounded-full px-1 text-[10px] font-semibold leading-4 text-white",
+                triggerTone,
+              )}
+            >
+              {formatCount(totalCount)}
+            </span>
+          ) : null}
+          <span className="sr-only">Alerts</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="flex max-h-[86vh] max-w-6xl flex-col overflow-hidden">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 pr-8">
+            <Siren className="size-5 text-red-300" />
+            <span>Alerts</span>
+            <Badge variant="outline">{formatCount(totalCount)}</Badge>
+          </DialogTitle>
+          <DialogDescription className="sr-only">
+            Local alert board for captured Inspector evidence.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-2 sm:grid-cols-4">
+          <AlertSummaryPill label="Open" count={summary?.open ?? 0} tone="neutral" />
+          <AlertSummaryPill label="Critical" count={criticalCount} tone="critical" />
+          <AlertSummaryPill label="Warning" count={warningCount} tone="warning" />
+          <AlertSummaryPill label="Notice" count={noticeCount} tone="notice" />
+        </div>
+
+        <div className="flex min-h-0 flex-wrap items-center justify-between gap-2 border-y border-border py-3">
+          <div className="flex flex-wrap gap-1">
+            <SeverityFilterButton
+              value="all"
+              active={severityFilter === "all"}
+              label="All"
+              count={summary?.total ?? null}
+              onClick={setSeverityFilter}
+            />
+            <SeverityFilterButton
+              value="critical"
+              active={severityFilter === "critical"}
+              label="Critical"
+              count={criticalCount}
+              onClick={setSeverityFilter}
+            />
+            <SeverityFilterButton
+              value="warning"
+              active={severityFilter === "warning"}
+              label="Warning"
+              count={warningCount}
+              onClick={setSeverityFilter}
+            />
+            <SeverityFilterButton
+              value="notice"
+              active={severityFilter === "notice"}
+              label="Notice"
+              count={noticeCount}
+              onClick={setSeverityFilter}
+            />
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="h-7 shrink-0 px-2"
+            onClick={() => void mutate()}
+          >
+            <RefreshCw className="size-3.5" />
+            Refresh
+          </Button>
+        </div>
+
+        <div className="flex flex-wrap gap-1">
+          <Button
+            type="button"
+            variant={categoryFilter === "all" ? "secondary" : "ghost"}
+            size="sm"
+            aria-pressed={categoryFilter === "all"}
+            onClick={() => setCategoryFilter("all")}
+            className="h-7 px-2"
+          >
+            All categories
+          </Button>
+          {ALERT_CATEGORIES.map((category) => {
+            const categoryCount =
+              summary?.byCategory.find((item) => item.category === category)?.count ?? 0;
+            if (categoryCount === 0) return null;
+            return (
+              <CategoryFilterButton
+                key={category}
+                category={category}
+                active={categoryFilter === category}
+                count={categoryCount}
+                onClick={setCategoryFilter}
+              />
+            );
+          })}
+        </div>
+
+        <div className="grid min-h-0 flex-1 gap-4 md:grid-cols-[360px_minmax(0,1fr)]">
+          <div className="flex min-h-0 flex-col">
+            <div className="mb-2 flex items-center justify-between text-xs text-muted-foreground">
+              <span>{formatCount(total)} matched</span>
+              <span>
+                {alerts.length < total ? `${formatCount(alerts.length)} shown` : "Latest"}
+              </span>
+            </div>
+            <AlertList
+              alerts={alerts}
+              selectedAlertId={selectedAlert?.id ?? null}
+              isLoading={isLoading}
+              error={error}
+              onSelect={setSelectedAlertId}
+            />
+          </div>
+          <AlertDetails alert={selectedAlert} onNavigate={() => setOpen(false)} />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}