@tonyclaw/agent-inspector 2.0.32 → 2.0.33

package/src/components/groups/GroupsDialog.tsx

@@ -305,15 +305,19 @@ export function GroupsDialog(): JSX.Element {
     setDeleteError(null);
   }, []);
 
-  const handleDeleteDialogOpenChange = useCallback(
-    (nextOpen: boolean) => {
-      if (nextOpen || deletingGroupId !== null) return;
-      setDeleteTarget(null);
-      setDeleteEvidence(false);
-      setDeleteError(null);
-    },
-    [deletingGroupId],
-  );
+  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;
@@ -351,88 +355,81 @@ export function GroupsDialog(): JSX.Element {
   }, [deleteEvidence, deleteTarget, mutate, mutateEvidence]);
 
   return (
-    <>
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogTrigger asChild>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="relative size-8"
+          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="sr-only">Evaluation 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>
           <Button
             type="button"
-            variant="ghost"
-            size="icon"
-            className="relative size-8"
-            aria-label="Evaluation groups"
-            title="Evaluation groups"
+            variant="outline"
+            size="sm"
+            className="shrink-0"
+            onClick={handleRefresh}
           >
-            <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="sr-only">Evaluation groups</span>
+            <RefreshCw className="size-3.5" />
+            Refresh
           </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>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="shrink-0"
-              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={setSelectedGroupId}
-            />
-            <GroupDetails
-              group={selectedGroup}
-              exportResult={selectedExportResult}
-              evidenceResponse={evidenceResponse}
-              evidenceLoading={evidenceLoading}
-              evidenceError={evidenceError}
-              exportError={exportError}
-              deleteError={deleteError}
-              exportingGroupId={exportingGroupId}
-              deletingGroupId={deletingGroupId}
-              onExport={handleExport}
-              onRequestDelete={handleRequestDelete}
-            />
-          </div>
-        </DialogContent>
-      </Dialog>
-      <DeleteGroupDialog
-        group={deleteTarget}
-        open={deleteTarget !== null}
-        deleteEvidence={deleteEvidence}
-        isDeleting={deleteTarget !== null && deletingGroupId === deleteTarget.id}
-        error={deleteError}
-        onDeleteEvidenceChange={setDeleteEvidence}
-        onOpenChange={handleDeleteDialogOpenChange}
-        onConfirm={() => void handleDelete()}
-      />
-    </>
+        <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>
   );
 }
 
@@ -511,6 +508,8 @@ function GroupList({
 
 function GroupDetails({
   group,
+  deleteTarget,
+  deleteEvidence,
   exportResult,
   evidenceResponse,
   evidenceLoading,
@@ -519,10 +518,15 @@ function GroupDetails({
   deleteError,
   exportingGroupId,
   deletingGroupId,
+  onDeleteEvidenceChange,
   onExport,
   onRequestDelete,
+  onCancelDelete,
+  onConfirmDelete,
 }: {
   group: InspectorGroup | null;
+  deleteTarget: InspectorGroup | null;
+  deleteEvidence: boolean;
   exportResult: GroupEvidenceExportResult | null;
   evidenceResponse: GroupEvidenceReadResponse | null;
   evidenceLoading: boolean;
@@ -531,8 +535,11 @@ function GroupDetails({
   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 (
@@ -549,6 +556,7 @@ function GroupDetails({
   const rows = buildGroupMemberRows(group, exportResult);
   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">
@@ -608,6 +616,18 @@ function GroupDetails({
           </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} />
@@ -639,7 +659,7 @@ function GroupDetails({
           </div>
         )}
 
-        {deleteError !== null && (
+        {deleteError !== null && !isConfirmingDelete && (
           <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
             {deleteError}
           </div>
@@ -651,80 +671,71 @@ function GroupDetails({
   );
 }
 
-function DeleteGroupDialog({
+function DeleteGroupPanel({
   group,
-  open,
   deleteEvidence,
   isDeleting,
   error,
   onDeleteEvidenceChange,
-  onOpenChange,
+  onCancel,
   onConfirm,
 }: {
-  group: InspectorGroup | null;
-  open: boolean;
+  group: InspectorGroup;
   deleteEvidence: boolean;
   isDeleting: boolean;
   error: string | null;
   onDeleteEvidenceChange: (deleteEvidence: boolean) => void;
-  onOpenChange: (open: boolean) => void;
+  onCancel: () => void;
   onConfirm: () => void;
 }): JSX.Element {
-  const title = group?.title ?? "this group";
-  const hasEvidence = group?.evidence !== null && group?.evidence !== undefined;
-  const evidencePath = group?.evidence?.markdownPath ?? "No evidence pack exported.";
+  const hasEvidence = group.evidence !== null;
+  const evidencePath = group.evidence?.markdownPath ?? "No evidence pack exported.";
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-md">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2 pr-8">
-            <Trash2 className="size-5 text-red-600" />
-            <span>Delete group</span>
-          </DialogTitle>
-        </DialogHeader>
-
-        <div className="space-y-3">
-          <p className="text-sm text-muted-foreground">
-            Delete <span className="font-medium text-foreground">{title}</span>? Session logs and
-            run records stay intact.
+    <div className="rounded-md border border-red-200 bg-red-50 px-3 py-3 text-red-900">
+      <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-red-600" />
+            <span>Delete group?</span>
+          </div>
+          <p className="text-xs text-red-800">
+            Delete <span className="font-medium">{group.title}</span>. Session logs and run records
+            stay intact.
           </p>
-
           <label
             className={cn(
-              "flex items-start gap-3 rounded-md border border-border bg-muted/20 px-3 py-2 text-sm",
+              "flex min-w-0 items-start gap-2 text-xs",
               hasEvidence ? "cursor-pointer" : "opacity-60",
             )}
           >
             <input
               type="checkbox"
-              className="mt-0.5 size-4"
+              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-muted-foreground">
+              <code className="mt-1 block truncate font-mono text-[11px] text-red-700">
                 {evidencePath}
               </code>
             </span>
           </label>
-
           {error !== null && (
-            <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
+            <div className="rounded-md border border-red-200 bg-white px-2 py-1.5 text-xs text-red-700">
               {error}
             </div>
           )}
         </div>
-
-        <div className="flex justify-end gap-2 pt-1">
+        <div className="flex shrink-0 justify-end gap-2">
           <Button
             type="button"
             variant="outline"
             size="sm"
             disabled={isDeleting}
-            onClick={() => onOpenChange(false)}
+            onClick={onCancel}
           >
             Cancel
           </Button>
@@ -732,7 +743,7 @@ function DeleteGroupDialog({
             type="button"
             variant="destructive"
             size="sm"
-            disabled={isDeleting || group === null}
+            disabled={isDeleting}
             onClick={onConfirm}
           >
             {isDeleting ? (
@@ -743,8 +754,8 @@ function DeleteGroupDialog({
             Delete
           </Button>
         </div>
-      </DialogContent>
-    </Dialog>
+      </div>
+    </div>
   );
 }
 

package/.output/public/assets/_sessionId-C4z6gu9i.js

@@ -1 +0,0 @@
-import{R as s,j as e}from"./main-CbRIHhJ5.js";import{P as i}from"./ProxyViewerContainer-4dG0nLRp.js";function t(){const{sessionId:o}=s.useParams();return e.jsx(i,{initialSessionId:o},o)}export{t as component};

package/.output/public/assets/index-Drpb2qR5.js

@@ -1 +0,0 @@
-import{P as o}from"./ProxyViewerContainer-4dG0nLRp.js";import"./main-CbRIHhJ5.js";const r=o;export{r as component};