@tonyclaw/agent-inspector 4.0.1 → 4.0.3

package/src/components/groups/GroupsDialog.tsx

@@ -1,1304 +0,0 @@
-import { Fragment, type JSX, useCallback, useEffect, useMemo, useState } from "react";
-import {
-  Check,
-  ChevronDown,
-  ChevronRight,
-  Copy,
-  Download,
-  ExternalLink,
-  Layers,
-  Loader2,
-  RefreshCw,
-  Trash2,
-} from "lucide-react";
-import { Button } from "../ui/button";
-import { Badge } from "../ui/badge";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
-import { INSPECTOR_ICON_TRIGGER_CLASS } from "../ui/icon-trigger";
-import { cn } from "../../lib/utils";
-import { fetchJsonWithTimeout } from "../../lib/apiClient";
-import {
-  DeleteInspectorGroupResponseSchema,
-  DeleteInspectorGroupsResponseSchema,
-  GroupEvidenceExportResultSchema,
-  type GroupEvidenceReadResponse,
-  type GroupEvidenceExportResult,
-  type InspectorGroup,
-  type InspectorGroupEvidence,
-  type InspectorGroupExportMember,
-  type InspectorGroupMember,
-} from "../../lib/groupContract";
-import type { EvidenceReport } from "../../lib/runContract";
-import type { SessionLogSummary } from "../../lib/sessionInfoContract";
-import { getSessionPath } from "../../lib/sessionUrl";
-import { ClientLogo, clientAppLabel, detectClientApp } from "../clients/ClientLogo";
-import { useGroupEvidence } from "../../lib/useGroupEvidence";
-import { useGroups } from "../../lib/useGroups";
-import { useCopyFeedback } from "../proxy-viewer/useCopyFeedback";
-import { TransientToast, useTransientToast } from "../ui/transient-toast";
-
-type MemberStatus = InspectorGroupMember["status"];
-
-type GroupSummary = {
-  memberCount: number;
-  completedMembers: number;
-  failedMembers: number;
-  runningMembers: number;
-  missingStatusMembers: number;
-};
-
-type GroupMemberRow = {
-  member: InspectorGroupMember;
-  exportMember: InspectorGroupExportMember | null;
-  source: "group" | "export" | "evidence";
-};
-
-const GROUP_OPERATION_TIMEOUT_MS = 20_000;
-
-export function groupDeletePath(groupId: string, deleteEvidence: boolean): string {
-  const path = `/api/groups/${encodeURIComponent(groupId)}`;
-  return deleteEvidence ? `${path}?deleteEvidence=1` : path;
-}
-
-export function groupsClearPath(deleteEvidence: boolean): string {
-  return deleteEvidence ? "/api/groups?deleteEvidence=1" : "/api/groups";
-}
-
-export function summarizeGroup(group: InspectorGroup): GroupSummary {
-  let completedMembers = 0;
-  let failedMembers = 0;
-  let runningMembers = 0;
-  let missingStatusMembers = 0;
-
-  for (const member of group.members) {
-    switch (member.status) {
-      case "completed":
-        completedMembers += 1;
-        break;
-      case "failed":
-      case "cancelled":
-        failedMembers += 1;
-        break;
-      case "running":
-        runningMembers += 1;
-        break;
-      case "created":
-        break;
-      case null:
-        missingStatusMembers += 1;
-        break;
-    }
-  }
-
-  return {
-    memberCount: group.members.length,
-    completedMembers,
-    failedMembers,
-    runningMembers,
-    missingStatusMembers,
-  };
-}
-
-export function buildGroupMemberRows(
-  group: InspectorGroup,
-  exportResult: GroupEvidenceExportResult | null,
-  evidenceResponse: GroupEvidenceReadResponse | null = null,
-): GroupMemberRow[] {
-  if (exportResult !== null && exportResult.group.id === group.id) {
-    return exportResult.members.map((exportMember) => ({
-      member: exportMember.member,
-      exportMember,
-      source: "export",
-    }));
-  }
-
-  if (
-    evidenceResponse !== null &&
-    evidenceResponse.group.id === group.id &&
-    evidenceResponse.members !== null
-  ) {
-    return evidenceResponse.members.map((exportMember) => ({
-      member: exportMember.member,
-      exportMember,
-      source: "evidence",
-    }));
-  }
-
-  return group.members.map((member) => ({ member, exportMember: null, source: "group" }));
-}
-
-function statusClassName(status: InspectorGroup["status"] | MemberStatus): string {
-  switch (status) {
-    case "completed":
-      return "border-status-success/30 bg-status-success/10 text-status-success";
-    case "failed":
-    case "cancelled":
-      return "border-status-danger/30 bg-status-danger/10 text-status-danger";
-    case "running":
-      return "border-status-cool/30 bg-status-cool/10 text-status-cool";
-    case "created":
-      return "border-border bg-muted/30 text-muted-foreground";
-    case null:
-      return "border-border bg-muted/30 text-muted-foreground";
-  }
-}
-
-function statusLabel(status: InspectorGroup["status"] | MemberStatus): string {
-  return status ?? "unknown";
-}
-
-function reportStatusClassName(status: EvidenceReport["status"]): string {
-  switch (status) {
-    case "PASS":
-      return "border-status-success/30 bg-status-success/10 text-status-success";
-    case "FAIL":
-      return "border-status-danger/30 bg-status-danger/10 text-status-danger";
-    case "RUNNING":
-      return "border-status-cool/30 bg-status-cool/10 text-status-cool";
-    case "UNKNOWN":
-      return "border-border bg-muted/30 text-muted-foreground";
-  }
-}
-
-function displayText(value: string | null): string {
-  if (value === null || value.trim().length === 0) return "-";
-  return value;
-}
-
-function formatNumber(value: number): string {
-  return value.toLocaleString();
-}
-
-function formatMs(value: number | null | undefined): string {
-  if (value === null || value === undefined) return "-";
-  if (value < 1000) return `${formatNumber(value)} ms`;
-  return `${(value / 1000).toFixed(1)} s`;
-}
-
-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 formatNullableTimestamp(value: string | null): string {
-  return value === null ? "-" : formatTimestamp(value);
-}
-
-function formatJsonPreview(value: unknown): string {
-  const serialized = JSON.stringify(value);
-  const text = serialized === undefined ? String(value) : serialized;
-  if (text.length <= 160) return text;
-  return `${text.slice(0, 157)}...`;
-}
-
-function firstNonEmpty(...values: Array<string | null>): string {
-  for (const value of values) {
-    if (value !== null && value.trim().length > 0) return value;
-  }
-  return "-";
-}
-
-function firstOptionalText(...values: Array<string | null | undefined>): string | null {
-  for (const value of values) {
-    if (value !== null && value !== undefined && value.trim().length > 0) return value;
-  }
-  return null;
-}
-
-function providerModel(member: InspectorGroupMember): string {
-  const provider = member.provider;
-  const model = member.model;
-
-  if (provider !== null && provider.length > 0 && model !== null && model.length > 0) {
-    return `${provider} / ${model}`;
-  }
-  return firstNonEmpty(provider, model);
-}
-
-function selectedGroupFrom(
-  groups: InspectorGroup[],
-  selectedGroupId: string | null,
-): InspectorGroup | null {
-  if (selectedGroupId !== null) {
-    const selected = groups.find((group) => group.id === selectedGroupId);
-    if (selected !== undefined) return selected;
-  }
-  return groups[0] ?? null;
-}
-
-function latestLog(row: GroupMemberRow): SessionLogSummary | null {
-  const logs = row.exportMember?.session?.latestLogs ?? [];
-  return logs[0] ?? null;
-}
-
-function memberSourceLabel(source: GroupMemberRow["source"]): string {
-  switch (source) {
-    case "export":
-      return "fresh export";
-    case "evidence":
-      return "evidence";
-    case "group":
-      return "group";
-  }
-}
-
-function evidenceFor(
-  group: InspectorGroup,
-  exportResult: GroupEvidenceExportResult | null,
-): InspectorGroupEvidence | null {
-  if (exportResult !== null && exportResult.group.id === group.id) return exportResult.evidence;
-  return group.evidence;
-}
-
-function exportSummaryFor(
-  group: InspectorGroup,
-  exportResult: GroupEvidenceExportResult | null,
-  evidenceResponse: GroupEvidenceReadResponse | null,
-): GroupEvidenceExportResult["summary"] | null {
-  if (exportResult !== null && exportResult.group.id === group.id) return exportResult.summary;
-  if (evidenceResponse !== null && evidenceResponse.group.id === group.id) {
-    return evidenceResponse.summary;
-  }
-  return null;
-}
-
-function evidenceReportFor(
-  group: InspectorGroup,
-  exportResult: GroupEvidenceExportResult | null,
-  evidenceResponse: GroupEvidenceReadResponse | null,
-): EvidenceReport | null {
-  if (exportResult !== null && exportResult.group.id === group.id) {
-    return exportResult.jenkinsReport;
-  }
-  if (evidenceResponse !== null && evidenceResponse.group.id === group.id) {
-    return evidenceResponse.report;
-  }
-  return null;
-}
-
-export function GroupsDialog({
-  labelledTrigger = false,
-}: {
-  labelledTrigger?: boolean;
-}): JSX.Element {
-  const [open, setOpen] = useState(false);
-  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
-  const [exportingGroupId, setExportingGroupId] = useState<string | null>(null);
-  const [exportError, setExportError] = useState<string | null>(null);
-  const [exportResult, setExportResult] = useState<GroupEvidenceExportResult | null>(null);
-  const [deleteTarget, setDeleteTarget] = useState<InspectorGroup | null>(null);
-  const [deleteEvidence, setDeleteEvidence] = useState(false);
-  const [deletingGroupId, setDeletingGroupId] = useState<string | null>(null);
-  const [deleteError, setDeleteError] = useState<string | null>(null);
-  const [clearingGroups, setClearingGroups] = useState(false);
-  const { notice, showToast, dismissToast } = useTransientToast();
-  const { groups, isLoading, error, mutate } = useGroups();
-
-  const selectedGroup = useMemo(
-    () => selectedGroupFrom(groups, selectedGroupId),
-    [groups, selectedGroupId],
-  );
-
-  useEffect(() => {
-    if (!open) return;
-    const hasSelected =
-      selectedGroupId !== null && groups.some((group) => group.id === selectedGroupId);
-    if (hasSelected) return;
-    setSelectedGroupId(groups[0]?.id ?? null);
-  }, [groups, open, selectedGroupId]);
-
-  const selectedExportResult =
-    selectedGroup !== null && exportResult !== null && exportResult.group.id === selectedGroup.id
-      ? exportResult
-      : null;
-  const {
-    evidenceResponse,
-    isLoading: evidenceLoading,
-    error: evidenceError,
-    mutate: mutateEvidence,
-  } = useGroupEvidence(selectedGroup);
-
-  const handleRefresh = useCallback(() => {
-    void mutate();
-  }, [mutate]);
-
-  const handleClearGroups = useCallback(async () => {
-    if (groups.length === 0 || clearingGroups) return;
-
-    setClearingGroups(true);
-    setDeleteTarget(null);
-    setDeleteEvidence(false);
-    setDeleteError(null);
-    setExportError(null);
-
-    try {
-      const parsed = await fetchJsonWithTimeout(
-        groupsClearPath(false),
-        DeleteInspectorGroupsResponseSchema,
-        GROUP_OPERATION_TIMEOUT_MS,
-        { method: "DELETE" },
-        (response) => `Clear failed with status ${String(response.status)}`,
-      );
-      setExportResult(null);
-      setSelectedGroupId(null);
-      await mutate();
-      await mutateEvidence();
-      showToast({
-        message: `Cleared ${formatNumber(parsed.deleted)} group${parsed.deleted === 1 ? "" : "s"}.`,
-        tone: "success",
-      });
-    } catch (err) {
-      showToast({
-        message: err instanceof Error ? err.message : "Unknown error clearing groups",
-        tone: "error",
-      });
-    } finally {
-      setClearingGroups(false);
-    }
-  }, [clearingGroups, groups.length, mutate, mutateEvidence, showToast]);
-
-  const handleExport = useCallback(
-    async (group: InspectorGroup) => {
-      setExportingGroupId(group.id);
-      setExportError(null);
-
-      try {
-        const parsed = await fetchJsonWithTimeout(
-          `/api/groups/${encodeURIComponent(group.id)}/evidence`,
-          GroupEvidenceExportResultSchema,
-          GROUP_OPERATION_TIMEOUT_MS,
-          {
-            method: "POST",
-            headers: { "content-type": "application/json" },
-            body: JSON.stringify({ latestLogLimit: 10 }),
-          },
-          (response) => `Export failed with status ${String(response.status)}`,
-        );
-        setExportResult(parsed);
-        await mutate();
-        await mutateEvidence();
-      } catch (err) {
-        setExportError(err instanceof Error ? err.message : String(err));
-      } finally {
-        setExportingGroupId(null);
-      }
-    },
-    [mutate, mutateEvidence],
-  );
-
-  const handleRequestDelete = useCallback((group: InspectorGroup) => {
-    setDeleteTarget(group);
-    setDeleteEvidence(false);
-    setDeleteError(null);
-  }, []);
-
-  const handleCancelDelete = useCallback(() => {
-    if (deletingGroupId !== null) return;
-    setDeleteTarget(null);
-    setDeleteEvidence(false);
-    setDeleteError(null);
-  }, [deletingGroupId]);
-
-  const handleSelectGroup = useCallback((groupId: string) => {
-    setSelectedGroupId(groupId);
-    setDeleteTarget(null);
-    setDeleteEvidence(false);
-    setDeleteError(null);
-  }, []);
-
-  const handleDelete = useCallback(async () => {
-    const group = deleteTarget;
-    if (group === null) return;
-
-    setDeletingGroupId(group.id);
-    setDeleteError(null);
-
-    try {
-      await fetchJsonWithTimeout(
-        groupDeletePath(group.id, deleteEvidence),
-        DeleteInspectorGroupResponseSchema,
-        GROUP_OPERATION_TIMEOUT_MS,
-        { method: "DELETE" },
-        (response) => `Delete failed with status ${String(response.status)}`,
-      );
-      setExportResult((current) =>
-        current !== null && current.group.id === group.id ? null : current,
-      );
-      setSelectedGroupId((current) => (current === group.id ? null : current));
-      setDeleteTarget(null);
-      setDeleteEvidence(false);
-      await mutate();
-      await mutateEvidence();
-    } catch (err) {
-      setDeleteError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setDeletingGroupId(null);
-    }
-  }, [deleteEvidence, deleteTarget, mutate, mutateEvidence]);
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <TransientToast notice={notice} onDismiss={dismissToast} />
-      <DialogTrigger asChild>
-        <Button
-          type="button"
-          variant="ghost"
-          size={labelledTrigger ? "default" : "icon"}
-          className={cn(
-            INSPECTOR_ICON_TRIGGER_CLASS,
-            labelledTrigger && "w-auto gap-2 px-3 text-xs max-lg:h-11 max-lg:w-auto",
-          )}
-          aria-label="Evaluation groups"
-          title="Evaluation groups"
-        >
-          <Layers className="size-4" />
-          {isLoading ? (
-            <Loader2 className="absolute -right-0.5 -top-0.5 size-3 animate-spin text-muted-foreground" />
-          ) : groups.length > 0 ? (
-            <span className="absolute -right-1 -top-1 min-w-4 rounded-full bg-primary px-1 text-[10px] leading-4 text-primary-foreground">
-              {groups.length}
-            </span>
-          ) : null}
-          <span className={labelledTrigger ? "" : "sr-only"}>Groups</span>
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="flex max-h-[85vh] max-w-5xl flex-col overflow-hidden">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2 pr-8">
-            <Layers className="size-5 text-muted-foreground" />
-            <span>Groups</span>
-            <Badge variant="outline">{formatNumber(groups.length)}</Badge>
-          </DialogTitle>
-        </DialogHeader>
-
-        <div className="flex min-h-0 items-center justify-between gap-3 border-b border-border pb-3">
-          <p className="text-xs text-muted-foreground">
-            Evaluation batches, model runs, and exported evidence packs.
-          </p>
-          <div className="flex shrink-0 items-center gap-2">
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              disabled={groups.length === 0 || clearingGroups}
-              onClick={() => void handleClearGroups()}
-              title="Clear all groups. Session logs and run records stay intact."
-            >
-              {clearingGroups ? (
-                <Loader2 className="size-3.5 animate-spin" />
-              ) : (
-                <Trash2 className="size-3.5" />
-              )}
-              Clear
-            </Button>
-            <Button type="button" variant="outline" size="sm" onClick={handleRefresh}>
-              <RefreshCw className="size-3.5" />
-              Refresh
-            </Button>
-          </div>
-        </div>
-
-        <div className="grid min-h-0 flex-1 gap-4 md:grid-cols-[260px_minmax(0,1fr)]">
-          <GroupList
-            groups={groups}
-            selectedGroupId={selectedGroup?.id ?? null}
-            isLoading={isLoading}
-            error={error}
-            onSelect={handleSelectGroup}
-          />
-          <GroupDetails
-            group={selectedGroup}
-            deleteTarget={deleteTarget}
-            deleteEvidence={deleteEvidence}
-            exportResult={selectedExportResult}
-            evidenceResponse={evidenceResponse}
-            evidenceLoading={evidenceLoading}
-            evidenceError={evidenceError}
-            exportError={exportError}
-            deleteError={deleteError}
-            exportingGroupId={exportingGroupId}
-            deletingGroupId={deletingGroupId}
-            onDeleteEvidenceChange={setDeleteEvidence}
-            onExport={handleExport}
-            onRequestDelete={handleRequestDelete}
-            onCancelDelete={handleCancelDelete}
-            onConfirmDelete={() => void handleDelete()}
-          />
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function GroupList({
-  groups,
-  selectedGroupId,
-  isLoading,
-  error,
-  onSelect,
-}: {
-  groups: InspectorGroup[];
-  selectedGroupId: string | null;
-  isLoading: boolean;
-  error: Error | undefined;
-  onSelect: (groupId: string) => void;
-}): JSX.Element {
-  if (isLoading) {
-    return (
-      <div className="flex min-h-48 items-center justify-center rounded-md border border-dashed border-border text-xs text-muted-foreground">
-        Loading groups...
-      </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 (groups.length === 0) {
-    return (
-      <div className="rounded-md border border-dashed border-border px-3 py-8 text-center text-xs text-muted-foreground">
-        No groups yet.
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-0 overflow-y-auto pr-1">
-      <div className="space-y-2">
-        {groups.map((group) => {
-          const summary = summarizeGroup(group);
-          const selected = selectedGroupId === group.id;
-          return (
-            <button
-              key={group.id}
-              type="button"
-              onClick={() => onSelect(group.id)}
-              className={cn(
-                "w-full rounded-md border px-3 py-2 text-left text-xs transition-colors",
-                selected
-                  ? "border-primary bg-primary/5"
-                  : "border-border bg-background hover:bg-muted/50",
-              )}
-            >
-              <div className="flex min-w-0 items-center justify-between gap-2">
-                <span className="min-w-0 text-sm font-medium leading-snug">{group.title}</span>
-                <Badge variant="outline" className={statusClassName(group.status)}>
-                  {statusLabel(group.status)}
-                </Badge>
-              </div>
-              <div className="mt-1 flex items-center gap-2 text-muted-foreground">
-                <span>{summary.memberCount} sessions</span>
-                <span>{formatTimestamp(group.updatedAt)}</span>
-              </div>
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-function GroupDetails({
-  group,
-  deleteTarget,
-  deleteEvidence,
-  exportResult,
-  evidenceResponse,
-  evidenceLoading,
-  evidenceError,
-  exportError,
-  deleteError,
-  exportingGroupId,
-  deletingGroupId,
-  onDeleteEvidenceChange,
-  onExport,
-  onRequestDelete,
-  onCancelDelete,
-  onConfirmDelete,
-}: {
-  group: InspectorGroup | null;
-  deleteTarget: InspectorGroup | null;
-  deleteEvidence: boolean;
-  exportResult: GroupEvidenceExportResult | null;
-  evidenceResponse: GroupEvidenceReadResponse | null;
-  evidenceLoading: boolean;
-  evidenceError: Error | undefined;
-  exportError: string | null;
-  deleteError: string | null;
-  exportingGroupId: string | null;
-  deletingGroupId: string | null;
-  onDeleteEvidenceChange: (deleteEvidence: boolean) => void;
-  onExport: (group: InspectorGroup) => Promise<void>;
-  onRequestDelete: (group: InspectorGroup) => void;
-  onCancelDelete: () => void;
-  onConfirmDelete: () => void;
-}): JSX.Element {
-  if (group === null) {
-    return (
-      <div className="flex min-h-48 items-center justify-center rounded-md border border-dashed border-border text-xs text-muted-foreground">
-        Select a group to inspect.
-      </div>
-    );
-  }
-
-  const summary = summarizeGroup(group);
-  const exportedSummary = exportSummaryFor(group, exportResult, evidenceResponse);
-  const evidenceReport = evidenceReportFor(group, exportResult, evidenceResponse);
-  const evidence = evidenceFor(group, exportResult);
-  const rows = buildGroupMemberRows(group, exportResult, evidenceResponse);
-  const isExporting = exportingGroupId === group.id;
-  const isDeleting = deletingGroupId === group.id;
-  const isConfirmingDelete = deleteTarget?.id === group.id;
-
-  return (
-    <div className="min-h-0 overflow-y-auto pr-1">
-      <div className="space-y-4">
-        <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-          <div className="min-w-0 space-y-1">
-            <div className="flex min-w-0 flex-wrap items-center gap-2">
-              <h3 className="min-w-0 text-base font-semibold leading-snug">{group.title}</h3>
-              <Badge variant="outline" className={statusClassName(group.status)}>
-                {statusLabel(group.status)}
-              </Badge>
-              <Badge variant="outline">{group.kind}</Badge>
-            </div>
-            <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-              <span>{displayText(group.project)}</span>
-              <span>updated {formatTimestamp(group.updatedAt)}</span>
-            </div>
-          </div>
-          <div className="flex shrink-0 items-center gap-2">
-            <Button
-              type="button"
-              variant="outline"
-              size="icon"
-              className="size-8 text-status-danger hover:text-status-danger/80"
-              aria-label="Delete group"
-              title="Delete group"
-              disabled={isDeleting}
-              onClick={() => onRequestDelete(group)}
-            >
-              {isDeleting ? (
-                <Loader2 className="size-3.5 animate-spin" />
-              ) : (
-                <Trash2 className="size-3.5" />
-              )}
-            </Button>
-            <Button
-              type="button"
-              variant="default"
-              size="sm"
-              className="shrink-0"
-              disabled={isExporting || isDeleting}
-              onClick={() => void onExport(group)}
-            >
-              {isExporting ? (
-                <Loader2 className="size-3.5 animate-spin" />
-              ) : (
-                <Download className="size-3.5" />
-              )}
-              Export evidence
-            </Button>
-          </div>
-        </div>
-
-        {group.task !== null && group.task.trim().length > 0 && (
-          <p className="rounded-md border border-border bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
-            {group.task}
-          </p>
-        )}
-
-        {isConfirmingDelete && (
-          <DeleteGroupPanel
-            group={group}
-            deleteEvidence={deleteEvidence}
-            isDeleting={isDeleting}
-            error={deleteError}
-            onDeleteEvidenceChange={onDeleteEvidenceChange}
-            onCancel={onCancelDelete}
-            onConfirm={onConfirmDelete}
-          />
-        )}
-
-        <div className="grid gap-2 sm:grid-cols-4">
-          <SummaryStat label="Members" value={summary.memberCount} />
-          <SummaryStat label="Done" value={summary.completedMembers} />
-          <SummaryStat label="Failed" value={summary.failedMembers} />
-          <SummaryStat label="Running" value={summary.runningMembers} />
-        </div>
-
-        {exportedSummary !== null && (
-          <div className="grid gap-2 sm:grid-cols-4">
-            <SummaryStat label="Requests" value={exportedSummary.requestCount} />
-            <SummaryStat label="Errors" value={exportedSummary.errorCount} />
-            <SummaryStat label="Tokens" value={exportedSummary.tokenUsage.total} />
-            <SummaryStat label="Missing" value={exportedSummary.missingSessions} />
-          </div>
-        )}
-
-        <EvidenceReportCard
-          report={evidenceReport}
-          loading={evidenceLoading}
-          error={evidenceError}
-          hasEvidence={evidence !== null}
-        />
-
-        <EvidencePaths evidence={evidence} />
-
-        {exportError !== null && (
-          <div className="rounded-md border border-status-danger/30 bg-status-danger/10 px-3 py-2 text-xs text-status-danger">
-            {exportError}
-          </div>
-        )}
-
-        {deleteError !== null && !isConfirmingDelete && (
-          <div className="rounded-md border border-status-danger/30 bg-status-danger/10 px-3 py-2 text-xs text-status-danger">
-            {deleteError}
-          </div>
-        )}
-
-        <MemberTable rows={rows} />
-      </div>
-    </div>
-  );
-}
-
-function DeleteGroupPanel({
-  group,
-  deleteEvidence,
-  isDeleting,
-  error,
-  onDeleteEvidenceChange,
-  onCancel,
-  onConfirm,
-}: {
-  group: InspectorGroup;
-  deleteEvidence: boolean;
-  isDeleting: boolean;
-  error: string | null;
-  onDeleteEvidenceChange: (deleteEvidence: boolean) => void;
-  onCancel: () => void;
-  onConfirm: () => void;
-}): JSX.Element {
-  const hasEvidence = group.evidence !== null;
-  const evidencePath = group.evidence?.markdownPath ?? "No evidence pack exported.";
-
-  return (
-    <div className="rounded-md border border-status-danger/30 bg-status-danger/10 px-3 py-3 text-status-danger">
-      <div className="flex min-w-0 flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
-        <div className="min-w-0 space-y-2">
-          <div className="flex items-center gap-2 text-sm font-semibold">
-            <Trash2 className="size-4 text-status-danger" />
-            <span>Delete group?</span>
-          </div>
-          <p className="text-xs text-status-danger">
-            Delete <span className="font-medium">{group.title}</span>. Session logs and run records
-            stay intact.
-          </p>
-          <label
-            className={cn(
-              "flex min-w-0 items-start gap-2 text-xs",
-              hasEvidence ? "cursor-pointer" : "opacity-60",
-            )}
-          >
-            <input
-              type="checkbox"
-              className="mt-0.5 size-4 shrink-0"
-              checked={deleteEvidence}
-              disabled={!hasEvidence || isDeleting}
-              onChange={(event) => onDeleteEvidenceChange(event.currentTarget.checked)}
-            />
-            <span className="min-w-0">
-              <span className="block font-medium">Also delete exported evidence files</span>
-              <code className="mt-1 block truncate font-mono text-[11px] text-status-danger">
-                {evidencePath}
-              </code>
-            </span>
-          </label>
-          {error !== null && (
-            <div className="rounded-md border border-status-danger/30 bg-card px-2 py-1.5 text-xs text-status-danger">
-              {error}
-            </div>
-          )}
-        </div>
-        <div className="flex shrink-0 justify-end gap-2">
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            disabled={isDeleting}
-            onClick={onCancel}
-          >
-            Cancel
-          </Button>
-          <Button
-            type="button"
-            variant="destructive"
-            size="sm"
-            disabled={isDeleting}
-            onClick={onConfirm}
-          >
-            {isDeleting ? (
-              <Loader2 className="size-3.5 animate-spin" />
-            ) : (
-              <Trash2 className="size-3.5" />
-            )}
-            Delete
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function SummaryStat({ label, value }: { label: string; value: number }): JSX.Element {
-  return (
-    <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
-      <div className="text-[11px] font-medium uppercase text-muted-foreground">{label}</div>
-      <div className="mt-1 font-mono text-sm font-semibold">{formatNumber(value)}</div>
-    </div>
-  );
-}
-
-function EvidenceReportCard({
-  report,
-  loading,
-  error,
-  hasEvidence,
-}: {
-  report: EvidenceReport | null;
-  loading: boolean;
-  error: Error | undefined;
-  hasEvidence: boolean;
-}): JSX.Element | null {
-  const { copied, copy } = useCopyFeedback(report?.markdown ?? null);
-
-  if (report === null && !loading && error === undefined) return null;
-
-  if (loading) {
-    return (
-      <div className="flex items-center gap-2 rounded-md border border-border bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
-        <Loader2 className="size-3.5 animate-spin" />
-        Loading evidence report...
-      </div>
-    );
-  }
-
-  if (error !== undefined && hasEvidence) {
-    return (
-      <div className="rounded-md border border-status-danger/30 bg-status-danger/10 px-3 py-2 text-xs text-status-danger">
-        Failed to load evidence report: {error.message}
-      </div>
-    );
-  }
-
-  if (report === null) return null;
-
-  return (
-    <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
-      <div className="flex min-w-0 items-center justify-between gap-2">
-        <div className="flex min-w-0 items-center gap-2">
-          <span className="text-xs font-semibold">Evidence report</span>
-          <Badge variant="outline" className={reportStatusClassName(report.status)}>
-            {report.status}
-          </Badge>
-        </div>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          className="size-7 shrink-0"
-          aria-label={copied ? "Copied evidence report" : "Copy evidence report"}
-          onClick={copy}
-        >
-          {copied ? (
-            <Check className="size-3.5 text-status-success" />
-          ) : (
-            <Copy className="size-3.5" />
-          )}
-        </Button>
-      </div>
-      <p className="mt-1 text-xs text-muted-foreground">{report.summary}</p>
-    </div>
-  );
-}
-
-function EvidencePaths({ evidence }: { evidence: InspectorGroupEvidence | null }): JSX.Element {
-  if (evidence === null) {
-    return (
-      <div className="rounded-md border border-dashed border-border px-3 py-2 text-xs text-muted-foreground">
-        No evidence pack exported yet.
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-2 rounded-md border border-border bg-muted/20 px-3 py-2">
-      <div className="flex items-center justify-between gap-2">
-        <span className="text-xs font-semibold">Evidence paths</span>
-        <span className="text-[11px] text-muted-foreground">
-          {formatTimestamp(evidence.exportedAt)}
-        </span>
-      </div>
-      <div className="grid gap-2">
-        <CopyPathRow label="JSON" value={evidence.jsonPath} />
-        <CopyPathRow label="Markdown" value={evidence.markdownPath} />
-        <CopyPathRow label="HTML" value={evidence.htmlPath} />
-      </div>
-    </div>
-  );
-}
-
-function CopyPathRow({ label, value }: { label: string; value: string }): JSX.Element {
-  const { copied, copy } = useCopyFeedback(value);
-  return (
-    <div className="flex min-w-0 items-center gap-2 rounded-md border border-border bg-background px-2 py-1.5">
-      <span className="w-16 shrink-0 text-[11px] font-medium text-muted-foreground">{label}</span>
-      <code className="min-w-0 flex-1 truncate font-mono text-xs">{value}</code>
-      <Button
-        type="button"
-        variant="ghost"
-        size="icon"
-        className="size-7 shrink-0"
-        aria-label={copied ? `Copied ${label} path` : `Copy ${label} path`}
-        onClick={copy}
-      >
-        {copied ? (
-          <Check className="size-3.5 text-status-success" />
-        ) : (
-          <Copy className="size-3.5" />
-        )}
-      </Button>
-    </div>
-  );
-}
-
-function MemberTable({ rows }: { rows: GroupMemberRow[] }): JSX.Element {
-  const [expandedMemberId, setExpandedMemberId] = useState<string | null>(null);
-
-  const toggleMember = useCallback((memberId: string) => {
-    setExpandedMemberId((current) => (current === memberId ? null : memberId));
-  }, []);
-
-  if (rows.length === 0) {
-    return (
-      <div className="rounded-md border border-dashed border-border px-3 py-8 text-center text-xs text-muted-foreground">
-        No sessions attached.
-      </div>
-    );
-  }
-
-  return (
-    <div className="overflow-hidden rounded-md border border-border">
-      <div className="border-b border-border bg-muted/30 px-3 py-2 text-xs font-semibold">
-        Members
-      </div>
-      <div className="overflow-x-auto">
-        <table className="w-full min-w-[760px] text-left text-xs">
-          <thead className="border-b border-border bg-muted/20 text-muted-foreground">
-            <tr>
-              <th className="px-3 py-2 font-medium">Session</th>
-              <th className="px-3 py-2 font-medium">Provider / Model</th>
-              <th className="px-3 py-2 font-medium">Status</th>
-              <th className="px-3 py-2 font-medium">Requests</th>
-              <th className="px-3 py-2 font-medium">Errors</th>
-              <th className="px-3 py-2 font-medium">First chunk</th>
-              <th className="px-3 py-2 font-medium">Tokens</th>
-            </tr>
-          </thead>
-          <tbody>
-            {rows.map((row) => {
-              const isExpanded = expandedMemberId === row.member.id;
-              return (
-                <Fragment key={row.member.id}>
-                  <MemberRow row={row} isExpanded={isExpanded} onToggleDetails={toggleMember} />
-                  <MemberDetailsRow row={row} isExpanded={isExpanded} />
-                </Fragment>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}
-
-function MemberRow({
-  row,
-  isExpanded,
-  onToggleDetails,
-}: {
-  row: GroupMemberRow;
-  isExpanded: boolean;
-  onToggleDetails: (memberId: string) => void;
-}): JSX.Element {
-  const member = row.member;
-  const session = row.exportMember?.session ?? null;
-  const log = latestLog(row);
-  const sessionPath = session?.inspectorPath ?? getSessionPath(member.sessionId);
-  const canOpenLiveSession = row.source !== "evidence";
-  const requests = session?.requestCount ?? null;
-  const errors = session?.errorCount ?? null;
-  const tokens = session?.tokenUsage.total ?? null;
-  const firstChunkMs = log?.firstChunkMs ?? null;
-  const sessionLabel = firstNonEmpty(member.label, member.sessionId);
-  const clientUserAgent = firstOptionalText(session?.clientUserAgent, log?.userAgent, member.agent);
-  const clientProjectFolder = session?.clientProjectFolder ?? null;
-  const clientApp = detectClientApp({
-    userAgent: clientUserAgent,
-    conversationId: member.sessionId,
-    clientProjectFolder,
-  });
-  const clientLabel = clientAppLabel(clientApp);
-
-  return (
-    <tr className="border-b border-border last:border-0 hover:bg-muted/20">
-      <td className="max-w-56 px-3 py-2">
-        <div className="flex min-w-0 items-center gap-1.5">
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            className="size-6 shrink-0 text-muted-foreground"
-            aria-label={isExpanded ? `Hide member ${sessionLabel}` : `Show member ${sessionLabel}`}
-            title={isExpanded ? "Hide member details" : "Show member details"}
-            onClick={() => {
-              onToggleDetails(member.id);
-            }}
-          >
-            {isExpanded ? (
-              <ChevronDown className="size-3.5" />
-            ) : (
-              <ChevronRight className="size-3.5" />
-            )}
-          </Button>
-          {clientLabel !== null && <ClientLogo client={clientApp} className="size-5" />}
-          {canOpenLiveSession ? (
-            <a
-              href={sessionPath}
-              target="_blank"
-              rel="noreferrer"
-              className="inline-flex max-w-full min-w-0 items-center gap-2 rounded-sm font-mono text-xs text-primary outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-              aria-label={`Open session ${sessionLabel}`}
-              title={`Open session ${sessionLabel}`}
-            >
-              <span className="min-w-0 truncate">{sessionLabel}</span>
-              <ExternalLink className="size-3 shrink-0 text-muted-foreground" />
-            </a>
-          ) : (
-            <button
-              type="button"
-              className="inline-flex max-w-full min-w-0 items-center gap-2 rounded-sm font-mono text-xs text-foreground outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-              title={`Show evidence snapshot for ${sessionLabel}`}
-              aria-label={`Show evidence snapshot for ${sessionLabel}`}
-              onClick={() => {
-                onToggleDetails(member.id);
-              }}
-            >
-              <span className="min-w-0 truncate">{sessionLabel}</span>
-              <Badge
-                variant="outline"
-                className="shrink-0 border-border bg-muted/30 text-muted-foreground"
-              >
-                evidence
-              </Badge>
-            </button>
-          )}
-        </div>
-        <div className="mt-0.5 truncate text-[11px] text-muted-foreground">
-          {displayText(member.agent)}
-        </div>
-      </td>
-      <td className="max-w-52 px-3 py-2">
-        <span className="block whitespace-normal leading-snug">{providerModel(member)}</span>
-      </td>
-      <td className="px-3 py-2">
-        <Badge variant="outline" className={statusClassName(member.status)}>
-          {statusLabel(member.status)}
-        </Badge>
-      </td>
-      <td className="px-3 py-2 font-mono">{requests === null ? "-" : formatNumber(requests)}</td>
-      <td className="px-3 py-2 font-mono">{errors === null ? "-" : formatNumber(errors)}</td>
-      <td className="px-3 py-2 font-mono">{formatMs(firstChunkMs)}</td>
-      <td className="px-3 py-2 font-mono">{tokens === null ? "-" : formatNumber(tokens)}</td>
-    </tr>
-  );
-}
-
-function MemberDetailsRow({
-  row,
-  isExpanded,
-}: {
-  row: GroupMemberRow;
-  isExpanded: boolean;
-}): JSX.Element | null {
-  if (!isExpanded) return null;
-
-  const member = row.member;
-  const exportMember = row.exportMember;
-  const session = exportMember?.session ?? null;
-  const run = exportMember?.run ?? null;
-  const metadataEntries = Object.entries(member.metadata);
-
-  return (
-    <tr className="border-b border-border bg-muted/10">
-      <td colSpan={7} className="px-3 pb-4 pt-2">
-        <div className="space-y-3 rounded-md border border-border bg-background p-3">
-          <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
-            <MemberDetailItem label="Source" value={memberSourceLabel(row.source)} />
-            <MemberDetailItem label="Member ID" value={member.id} mono />
-            <MemberDetailItem label="Session ID" value={member.sessionId} mono />
-            <MemberDetailItem label="Run ID" value={run?.id ?? member.runId ?? "-"} mono />
-            <MemberDetailItem label="Created" value={formatTimestamp(member.addedAt)} />
-            <MemberDetailItem label="Updated" value={formatTimestamp(member.updatedAt)} />
-            <MemberDetailItem
-              label="Session created"
-              value={formatNullableTimestamp(session?.createdAt ?? null)}
-            />
-            <MemberDetailItem
-              label="Session updated"
-              value={formatNullableTimestamp(session?.updatedAt ?? null)}
-            />
-          </div>
-
-          {session === null ? (
-            <div className="rounded-md border border-dashed border-border px-3 py-2 text-xs text-muted-foreground">
-              No session snapshot is available for this member.
-            </div>
-          ) : (
-            <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
-              <MemberDetailItem label="Log coverage" value={session.logCoverage} />
-              <MemberDetailItem label="Runtime" value={displayText(session.runtimeMode)} />
-              <MemberDetailItem label="Requests" value={formatNumber(session.requestCount)} mono />
-              <MemberDetailItem label="Errors" value={formatNumber(session.errorCount)} mono />
-              <MemberDetailItem
-                label="Input tokens"
-                value={formatNumber(session.tokenUsage.input)}
-                mono
-              />
-              <MemberDetailItem
-                label="Output tokens"
-                value={formatNumber(session.tokenUsage.output)}
-                mono
-              />
-              <MemberDetailItem
-                label="Cache read"
-                value={formatNumber(session.tokenUsage.cacheRead)}
-                mono
-              />
-              <MemberDetailItem
-                label="Total tokens"
-                value={formatNumber(session.tokenUsage.total)}
-                mono
-              />
-            </div>
-          )}
-
-          <LatestLogsPreview logs={session?.latestLogs ?? []} />
-          <MemberMetadata entries={metadataEntries} />
-        </div>
-      </td>
-    </tr>
-  );
-}
-
-function MemberDetailItem({
-  label,
-  value,
-  mono = false,
-}: {
-  label: string;
-  value: string;
-  mono?: boolean;
-}): JSX.Element {
-  return (
-    <div className="min-w-0">
-      <div className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-        {label}
-      </div>
-      <div
-        className={cn("truncate text-xs text-foreground", mono ? "font-mono" : "")}
-        title={value}
-      >
-        {value}
-      </div>
-    </div>
-  );
-}
-
-function LatestLogsPreview({ logs }: { logs: SessionLogSummary[] }): JSX.Element {
-  const visibleLogs = logs.slice(0, 5);
-
-  if (visibleLogs.length === 0) {
-    return (
-      <div className="rounded-md border border-dashed border-border px-3 py-2 text-xs text-muted-foreground">
-        No latest logs in this snapshot.
-      </div>
-    );
-  }
-
-  return (
-    <div className="overflow-hidden rounded-md border border-border">
-      <div className="border-b border-border bg-muted/30 px-3 py-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
-        Latest logs
-      </div>
-      <div className="divide-y divide-border">
-        {visibleLogs.map((log) => {
-          const displayNumber = log.sessionLogNumber ?? log.id;
-          return (
-            <div
-              key={log.id}
-              className="grid gap-2 px-3 py-2 text-xs sm:grid-cols-[72px_1fr_88px_88px]"
-            >
-              <span className="font-mono text-muted-foreground" title={`Log ID ${String(log.id)}`}>
-                #{displayNumber}
-              </span>
-              <span className="min-w-0 truncate">
-                {displayText(log.model)} · {log.apiFormat} · {log.path}
-              </span>
-              <span className="font-mono text-muted-foreground">{formatMs(log.firstChunkMs)}</span>
-              <span className="font-mono text-muted-foreground">{formatMs(log.latencyMs)}</span>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-function MemberMetadata({ entries }: { entries: Array<[string, unknown]> }): JSX.Element | null {
-  if (entries.length === 0) return null;
-
-  return (
-    <div className="overflow-hidden rounded-md border border-border">
-      <div className="border-b border-border bg-muted/30 px-3 py-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
-        Metadata
-      </div>
-      <div className="grid gap-x-3 gap-y-2 p-3 text-xs sm:grid-cols-2">
-        {entries.map(([key, value]) => {
-          const preview = formatJsonPreview(value);
-          return (
-            <div key={key} className="min-w-0">
-              <span className="mr-2 text-muted-foreground">{key}</span>
-              <span className="font-mono text-foreground" title={preview}>
-                {preview}
-              </span>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}