@tonyclaw/agent-inspector 4.0.1 → 4.0.3

package/src/components/alerts/AlertsDialog.tsx

@@ -1,615 +0,0 @@
-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 { INSPECTOR_ICON_TRIGGER_CLASS } from "../ui/icon-trigger";
-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-status-danger/40 bg-status-danger/10 text-status-danger";
-    case "warning":
-      return "border-status-watch/40 bg-status-watch/10 text-status-watch";
-    case "notice":
-      return "border-status-cool/40 bg-status-cool/10 text-status-cool";
-  }
-}
-
-function severityDot(severity: AlertSeverity): string {
-  switch (severity) {
-    case "critical":
-      return "bg-status-danger";
-    case "warning":
-      return "bg-status-watch";
-    case "notice":
-      return "bg-status-cool";
-  }
-}
-
-function severityText(severity: AlertSeverity): string {
-  switch (severity) {
-    case "critical":
-      return "text-status-danger";
-    case "warning":
-      return "text-status-watch";
-    case "notice":
-      return "text-status-cool";
-  }
-}
-
-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-status-danger/30 bg-status-danger/10 text-status-danger"
-      : tone === "warning"
-        ? "border-status-watch/30 bg-status-watch/10 text-status-watch"
-        : tone === "notice"
-          ? "border-status-cool/30 bg-status-cool/10 text-status-cool"
-          : "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-status-danger/30 bg-status-danger/10 px-3 py-2 text-xs text-status-danger">
-        {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 text-sm font-semibold leading-snug">{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-start justify-between gap-2 text-[11px] text-muted-foreground">
-              <span className="min-w-0 leading-snug">{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-status-danger text-primary-foreground"
-      : warningCount > 0
-        ? "bg-status-watch text-primary-foreground"
-        : "bg-status-cool text-primary-foreground";
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          className={INSPECTOR_ICON_TRIGGER_CLASS}
-          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",
-                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-status-danger" />
-            <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>
-  );
-}