@tonyclaw/agent-inspector 2.1.18 → 2.1.20

package/src/components/groups/GroupsDialog.tsx

@@ -19,6 +19,7 @@ import { cn } from "../../lib/utils";
 import { parseJsonResponse, readApiError } from "../../lib/apiClient";
 import {
   DeleteInspectorGroupResponseSchema,
+  DeleteInspectorGroupsResponseSchema,
   GroupEvidenceExportResultSchema,
   type GroupEvidenceReadResponse,
   type GroupEvidenceExportResult,
@@ -34,6 +35,7 @@ import { ClientLogo, clientAppLabel, detectClientApp } from "../clients/ClientLo
 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"];
 
@@ -56,6 +58,10 @@ export function groupDeletePath(groupId: string, deleteEvidence: boolean): strin
   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;
@@ -285,6 +291,8 @@ export function GroupsDialog(): JSX.Element {
   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(
@@ -315,6 +323,47 @@ export function GroupsDialog(): JSX.Element {
     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 response = await fetch(groupsClearPath(false), { method: "DELETE" });
+      if (!response.ok) {
+        showToast({
+          message: await readApiError(
+            response,
+            `Clear failed with status ${String(response.status)}`,
+          ),
+          tone: "error",
+        });
+        return;
+      }
+
+      const parsed = await parseJsonResponse(response, DeleteInspectorGroupsResponseSchema);
+      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);
@@ -404,6 +453,7 @@ export function GroupsDialog(): JSX.Element {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
+      <TransientToast notice={notice} onDismiss={dismissToast} />
       <DialogTrigger asChild>
         <Button
           type="button"
@@ -437,16 +487,27 @@ export function GroupsDialog(): JSX.Element {
           <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 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)]">

package/src/components/proxy-viewer/ConversationGroupList.tsx

@@ -265,7 +265,7 @@ function SummaryChip({
   return (
     <span
       className={cn(
-        "border border-border bg-muted/40 inline-flex h-7 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground",
+        "bg-white/[0.045] inline-flex h-7 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground",
         className,
       )}
     >
@@ -349,7 +349,7 @@ function IdeGroupSection({
 
   return (
     <section
-      className={cn("border border-border bg-card shadow-sm relative isolate rounded-[8px]")}
+      className={cn("bg-card/75 shadow-sm relative isolate rounded-[8px]")}
       data-ide-group={group.id}
     >
       <button
@@ -359,7 +359,7 @@ function IdeGroupSection({
         aria-expanded={!collapsed}
       >
         {group.client === "unknown" ? (
-          <span className="border border-border bg-muted/40 inline-flex size-10 shrink-0 items-center justify-center rounded-[8px] text-slate-200">
+          <span className="bg-white/[0.045] inline-flex size-10 shrink-0 items-center justify-center rounded-[8px] text-slate-200">
             <Monitor className="size-5" />
           </span>
         ) : (
@@ -374,7 +374,7 @@ function IdeGroupSection({
             >
               {group.label}
             </span>
-            <span className="rounded border border-cyan-200/15 bg-cyan-300/[0.06] px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-[0.16em] text-cyan-100/75">
+            <span className="rounded bg-cyan-300/[0.06] px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-[0.16em] text-cyan-100/75">
               IDE
             </span>
           </span>
@@ -396,13 +396,13 @@ function IdeGroupSection({
           <SummaryChip label="OUT" value={formatTokenCount(totals.outputTokens)} />
         </span>
 
-        <span className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200">
+        <span className="bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200">
           {collapsed ? <ChevronRight className="size-4" /> : <ChevronDown className="size-4" />}
         </span>
       </button>
 
       {!collapsed && (
-        <div className="space-y-3 border-t border-white/10 px-3 pb-3 pt-3 sm:px-4">
+        <div className="space-y-3 px-3 pb-3 pt-2 sm:px-4">
           {group.processes.map((processGroup) => (
             <ProcessGroupSection
               key={processGroup.id}
@@ -440,15 +440,15 @@ function ProcessGroupSection({
 
   return (
     <section className="relative pl-5">
-      <span className="absolute bottom-0 left-2 top-0 w-px bg-white/12" aria-hidden="true" />
-      <div className="border border-border bg-card shadow-sm overflow-hidden rounded-[8px]">
+      <span className="absolute bottom-1 left-2 top-1 w-px bg-white/[0.055]" aria-hidden="true" />
+      <div className="bg-black/[0.10] overflow-hidden rounded-[8px]">
         <button
           type="button"
           className="flex w-full min-w-0 items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-white/[0.035] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300/40"
           onClick={onToggle}
           aria-expanded={!collapsed}
         >
-          <span className="border border-border bg-muted/40 inline-flex size-8 shrink-0 items-center justify-center rounded-md text-amber-100">
+          <span className="bg-white/[0.045] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-amber-100">
             <Cpu className="size-4" />
           </span>
 
@@ -482,13 +482,13 @@ function ProcessGroupSection({
             <SummaryChip label="OUT" value={formatTokenCount(totals.outputTokens)} />
           </span>
 
-          <span className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-200">
+          <span className="bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-200">
             {collapsed ? <ChevronRight className="size-4" /> : <ChevronDown className="size-4" />}
           </span>
         </button>
 
         {!collapsed && (
-          <div className="space-y-2 border-t border-white/10 p-2 sm:p-3">
+          <div className="space-y-2 p-2 pt-1 sm:p-3 sm:pt-2">
             {group.sessions.map((session) => (
               <ConversationGroup
                 key={session.id}

package/src/components/proxy-viewer/ConversationHeader.tsx

@@ -22,7 +22,7 @@ import { ProviderLogoStack } from "./ProviderLogoStack";
 import { resolveLogFormat } from "./log-formats";
 
 const HEADER_ACTION_BUTTON_CLASS =
-  "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground";
+  "bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground";
 
 function HeaderMetric({
   icon,
@@ -38,7 +38,7 @@ function HeaderMetric({
   return (
     <span
       className={cn(
-        "border border-border bg-muted/30 inline-flex h-7 min-w-0 items-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground",
+        "bg-white/[0.045] inline-flex h-7 min-w-0 items-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground",
         className,
       )}
       title={title}
@@ -150,8 +150,8 @@ export function ConversationHeader({
       data-nav-id={`conv-${conversationId}`}
       data-nav-action={expanded ? "collapse" : "expand"}
       className={cn(
-        "border border-border bg-card shadow-sm flex cursor-pointer items-start gap-3 rounded-[8px] px-3 py-2.5 transition-colors",
-        "hover:border-cyan-200/20",
+        "bg-card/80 shadow-sm flex cursor-pointer items-start gap-3 rounded-[8px] px-3 py-2.5 transition-colors",
+        "hover:bg-card",
         "select-none",
         "sticky top-0 z-10 mb-2",
         "focus-visible:ring-1 focus-visible:ring-cyan-300/35 focus-visible:outline-none",
@@ -204,7 +204,7 @@ export function ConversationHeader({
             clientPid !== null &&
             clientPid !== undefined && (
               <span
-                className="border border-border bg-muted/40 shrink-0 rounded px-1.5 py-0.5 font-mono text-xs tabular-nums text-muted-foreground"
+                className="bg-white/[0.045] shrink-0 rounded px-1.5 py-0.5 font-mono text-xs tabular-nums text-muted-foreground"
                 title={`Client process ID ${clientPid}`}
               >
                 PID {clientPid}
@@ -226,7 +226,7 @@ export function ConversationHeader({
 
           {showClientIdentity && clientDisplayLabel !== null && clientDisplayLabel !== "" && (
             <span
-              className="border border-border bg-muted/30 inline-flex h-6 max-w-[180px] shrink-0 items-center gap-1 rounded-md px-1.5 text-xs text-muted-foreground"
+              className="bg-white/[0.045] inline-flex h-6 max-w-[180px] shrink-0 items-center gap-1 rounded-md px-1.5 text-xs text-muted-foreground"
               title={clientTooltip ?? clientDisplayLabel}
             >
               <ClientLogo client={clientApp} className="size-4 shrink-0" />
@@ -282,7 +282,7 @@ export function ConversationHeader({
 
         {/* Expand chevron - shows spinner when collapsed and group has pending logs */}
         <span
-          className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200"
+          className="bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200"
           aria-hidden="true"
         >
           {expanded ? (

package/src/components/proxy-viewer/LogEntry.tsx

@@ -81,7 +81,7 @@ const BODY_CHUNK_BYTES = 256 * 1024;
 const CHUNKED_BODY_THRESHOLD_BYTES = 1024 * 1024;
 
 const TAB_TRIGGER_CLASS =
-  "h-9 flex-none rounded-md border border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none transition-colors hover:border-white/10 hover:bg-white/[0.045] hover:text-foreground data-[state=active]:border-cyan-200/25 data-[state=active]:bg-cyan-300/[0.08] data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
+  "h-9 flex-none rounded-md border border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none transition-colors hover:bg-white/[0.045] hover:text-foreground data-[state=active]:bg-cyan-300/[0.08] data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
 
 function createEmptyBodyPreviewState(totalBytes: number | null = null): BodyPreviewState {
   return {
@@ -190,7 +190,7 @@ function ExpandedPanel({
   return (
     <div
       className={cn(
-        "border border-border bg-card shadow-sm inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-[8px] p-3",
+        "bg-black/[0.14] inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-[8px] p-3",
         className,
       )}
     >
@@ -201,7 +201,7 @@ function ExpandedPanel({
 
 function EmptyState({ children }: { children: ReactNode }): JSX.Element {
   return (
-    <div className="border border-border bg-muted/40 rounded-md border-dashed px-3 py-5 text-center text-xs italic text-muted-foreground">
+    <div className="bg-white/[0.035] rounded-md px-3 py-5 text-center text-xs italic text-muted-foreground">
       {children}
     </div>
   );
@@ -209,7 +209,7 @@ function EmptyState({ children }: { children: ReactNode }): JSX.Element {
 
 function RawTextBlock({ children }: { children: ReactNode }): JSX.Element {
   return (
-    <pre className="border border-border bg-card shadow-sm inspector-scrollbar max-h-[64vh] overflow-auto whitespace-pre-wrap break-words rounded-[8px] p-3 font-mono text-xs leading-relaxed text-muted-foreground">
+    <pre className="bg-black/[0.18] inspector-scrollbar max-h-[64vh] overflow-auto whitespace-pre-wrap break-words rounded-[8px] p-3 font-mono text-xs leading-relaxed text-muted-foreground">
       {children}
     </pre>
   );
@@ -218,9 +218,9 @@ function RawTextBlock({ children }: { children: ReactNode }): JSX.Element {
 type NoticeTone = "loading" | "warning" | "danger";
 
 const NOTICE_TONE_CLASSES: Record<NoticeTone, string> = {
-  loading: "border-cyan-400/25 bg-cyan-400/[0.06] text-cyan-100",
-  warning: "border-amber-400/25 bg-amber-400/[0.08] text-amber-100",
-  danger: "border-rose-400/25 bg-rose-400/[0.08] text-rose-100",
+  loading: "border-transparent bg-cyan-400/[0.06] text-cyan-100",
+  warning: "border-transparent bg-amber-400/[0.08] text-amber-100",
+  danger: "border-transparent bg-rose-400/[0.08] text-rose-100",
 };
 
 function NoticeBlock({
@@ -307,13 +307,13 @@ function HeaderRows({
   if (entries.length === 0) return <EmptyState>{emptyLabel}</EmptyState>;
 
   return (
-    <div className="border border-border bg-card shadow-sm overflow-hidden rounded-[8px] font-mono text-xs">
+    <div className="bg-black/[0.14] overflow-hidden rounded-[8px] font-mono text-xs">
       {entries.map(([key, value]) => (
         <div
           key={key}
-          className="grid min-w-0 grid-cols-[minmax(140px,0.32fr)_minmax(0,1fr)] border-b border-white/10 last:border-b-0"
+          className="grid min-w-0 grid-cols-[minmax(140px,0.32fr)_minmax(0,1fr)] border-b border-white/[0.055] last:border-b-0"
         >
-          <div className="min-w-0 truncate border-r border-white/10 bg-white/[0.035] px-2.5 py-2 font-semibold text-cyan-200">
+          <div className="min-w-0 truncate bg-white/[0.035] px-2.5 py-2 font-semibold text-cyan-200">
             {key}
           </div>
           <div className="min-w-0 truncate px-2.5 py-2 text-muted-foreground" title={value}>
@@ -791,23 +791,12 @@ export const LogEntry = memo(function ({
     <TooltipProvider>
       <div
         className={cn(
-          "border border-border bg-card shadow-sm relative mb-2 overflow-hidden rounded-[8px] transition-[background-color,border-color,box-shadow]",
+          "bg-card/80 relative mb-1.5 overflow-hidden rounded-[8px] transition-[background-color,box-shadow]",
           expanded
-            ? "border-cyan-200/25 shadow-[0_24px_80px_rgba(0,0,0,0.36),0_0_0_1px_rgba(103,232,249,0.05),inset_0_1px_0_rgba(255,255,255,0.14)]"
-            : "hover:border-cyan-200/18",
+            ? "bg-card shadow-[0_18px_60px_rgba(0,0,0,0.30),0_0_0_1px_rgba(103,232,249,0.08)]"
+            : "hover:bg-card",
         )}
       >
-        <div
-          className={cn(
-            "pointer-events-none absolute inset-y-3 left-1 w-px rounded-full",
-            expanded ? "bg-cyan-200/55 shadow-[0_0_20px_rgba(103,232,249,0.26)]" : "bg-white/12",
-          )}
-          aria-hidden="true"
-        />
-        <div
-          className="pointer-events-none absolute inset-x-3 top-0 h-px bg-gradient-to-r from-transparent via-white/15 to-transparent"
-          aria-hidden="true"
-        />
         <LogEntryHeader
           log={displayLog}
           displayNumber={displayNumber}
@@ -832,7 +821,7 @@ export const LogEntry = memo(function ({
 
         {expanded && (
           <div
-            className="relative border-t border-white/10 bg-black/[0.18] pt-2"
+            className="relative bg-black/[0.14] pt-2"
             onClick={(e) => e.stopPropagation()}
             onKeyDown={(e) => e.stopPropagation()}
           >
@@ -843,7 +832,7 @@ export const LogEntry = memo(function ({
             <Tabs value={activeTab} onValueChange={setActiveTab} className="gap-2">
               <TabsList
                 variant="line"
-                className="border border-border bg-muted/40 inspector-scrollbar relative mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-[8px] p-1"
+                className="bg-white/[0.04] inspector-scrollbar relative mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-[8px] p-1"
               >
                 {viewMode === "full" && (
                   <TabsTrigger className={TAB_TRIGGER_CLASS} value="raw-headers">

package/src/components/proxy-viewer/LogEntryHeader.tsx

@@ -34,10 +34,10 @@ import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/
 import type { CacheTrend } from "./cacheTrend";
 
 const STATUS_BADGE_CLASSES: Record<StatusCategory, string> = {
-  success: "bg-slate-300/[0.08] text-slate-100 border-slate-300/20",
-  client_error: "bg-amber-300/[0.10] text-amber-100 border-amber-300/30",
-  server_error: "bg-rose-400/[0.10] text-rose-100 border-rose-300/30",
-  pending: "bg-cyan-300/[0.08] text-cyan-100 border-cyan-300/25",
+  success: "bg-slate-300/[0.08] text-slate-100 border-transparent",
+  client_error: "bg-amber-300/[0.10] text-amber-100 border-transparent",
+  server_error: "bg-rose-400/[0.10] text-rose-100 border-transparent",
+  pending: "bg-cyan-300/[0.08] text-cyan-100 border-transparent",
 };
 
 const STATUS_CUE_CLASSES: Record<
@@ -66,10 +66,9 @@ const STATUS_CUE_CLASSES: Record<
 };
 
 const HEADER_ACTION_BUTTON_CLASS =
-  "border border-input bg-background hover:bg-accent hover:text-accent-foreground size-8 text-muted-foreground shadow-none hover:text-cyan-100";
+  "border border-transparent bg-white/[0.045] hover:bg-white/[0.075] size-8 text-muted-foreground shadow-none hover:text-cyan-100";
 
-const TELEMETRY_CHIP_CLASS =
-  "border border-border bg-muted/40 flex h-7 items-center gap-1 rounded-md px-2 text-xs";
+const TELEMETRY_CHIP_CLASS = "bg-white/[0.045] flex h-7 items-center gap-1 rounded-md px-2 text-xs";
 
 function formatElapsed(ms: number): string {
   if (ms < 1000) return `${ms}ms`;
@@ -232,10 +231,8 @@ export const LogEntryHeader = memo(function ({
         data-nav-action={expanded ? "collapse" : "expand"}
         className={cn(
           "group/header relative isolate flex min-w-0 cursor-pointer items-start gap-2 overflow-hidden px-3 py-2 transition-[background-color,border-color,box-shadow]",
-          expanded
-            ? "bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.10)]"
-            : "bg-transparent hover:bg-white/[0.035]",
-          "select-none before:pointer-events-none before:absolute before:inset-x-3 before:top-0 before:h-px before:bg-white/12",
+          expanded ? "bg-white/[0.04]" : "bg-transparent hover:bg-white/[0.035]",
+          "select-none",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
         )}
         onClick={onToggle}
@@ -250,7 +247,7 @@ export const LogEntryHeader = memo(function ({
           {/* Request ID */}
           <span
             className={cn(
-              "border border-border bg-muted/40 inline-flex h-8 shrink-0 items-center gap-2 rounded-md px-2 font-mono",
+              "inline-flex h-8 shrink-0 items-center gap-2 rounded-md px-2 font-mono",
               statusCue.frame,
             )}
           >
@@ -261,7 +258,7 @@ export const LogEntryHeader = memo(function ({
           </span>
 
           {/* Request start time */}
-          <span className="border border-border bg-muted/40 flex h-7 shrink-0 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground">
+          <span className="bg-white/[0.045] flex h-7 shrink-0 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground">
             <Clock className="size-3" />
             <span className="font-mono tabular-nums" title={log.timestamp}>
               {formatTimestamp(log.timestamp, timeDisplayFormat)}
@@ -608,7 +605,7 @@ export const LogEntryHeader = memo(function ({
           )}
 
           <span
-            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200"
+            className="bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200"
             aria-hidden="true"
           >
             {expanded ? (

package/src/components/proxy-viewer/RequestToolsPanel.tsx

@@ -44,13 +44,13 @@ const CATEGORY_LABELS: Record<RequestToolCategory, string> = {
 };
 
 const CATEGORY_CLASSES: Record<RequestToolCategory, string> = {
-  file: "border-blue-400/20 bg-blue-400/5 text-blue-300",
-  shell: "border-teal-400/20 bg-teal-400/5 text-teal-300",
-  browser: "border-cyan-400/20 bg-cyan-400/5 text-cyan-300",
-  web: "border-sky-400/20 bg-sky-400/5 text-sky-300",
-  mcp: "border-violet-400/20 bg-violet-400/5 text-violet-300",
-  code: "border-emerald-400/20 bg-emerald-400/5 text-emerald-300",
-  other: "border-muted-foreground/20 bg-muted/30 text-muted-foreground",
+  file: "border-transparent bg-blue-400/5 text-blue-300",
+  shell: "border-transparent bg-teal-400/5 text-teal-300",
+  browser: "border-transparent bg-cyan-400/5 text-cyan-300",
+  web: "border-transparent bg-sky-400/5 text-sky-300",
+  mcp: "border-transparent bg-violet-400/5 text-violet-300",
+  code: "border-transparent bg-emerald-400/5 text-emerald-300",
+  other: "border-transparent bg-muted/30 text-muted-foreground",
 };
 
 function CategoryIcon({ category }: { category: RequestToolCategory }): JSX.Element {
@@ -101,7 +101,7 @@ function ToolRow({ tool, called }: { tool: RequestToolDefinition; called: boolea
 
   return (
     <Collapsible open={open} onOpenChange={setOpen}>
-      <div className="border border-border bg-card shadow-sm rounded-[8px]">
+      <div className="bg-white/[0.035] rounded-[8px]">
         <div className="flex min-w-0 items-center gap-2 px-2.5 py-2">
           <button
             type="button"
@@ -140,7 +140,7 @@ function ToolRow({ tool, called }: { tool: RequestToolDefinition; called: boolea
           </button>
           <button
             type="button"
-            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             onClick={nameCopy.copy}
             aria-label={nameCopy.copied ? "Copied tool name" : "Copy tool name"}
           >
@@ -153,13 +153,13 @@ function ToolRow({ tool, called }: { tool: RequestToolDefinition; called: boolea
         </div>
         <CollapsibleContent>
           {open && (
-            <div className="space-y-2 border-t border-white/10 bg-white/[0.025] px-2.5 py-2">
+            <div className="space-y-2 bg-white/[0.025] px-2.5 py-2">
               {tool.description !== null && (
                 <p className="text-xs leading-relaxed text-muted-foreground">{tool.description}</p>
               )}
               <RequiredParameters names={tool.requiredParameters} />
               {tool.schema !== null && (
-                <ScrollArea className="border border-border bg-card shadow-sm max-h-64 rounded-[8px] p-2">
+                <ScrollArea className="bg-black/[0.16] max-h-64 rounded-[8px] p-2">
                   <Suspense
                     fallback={<div className="text-xs text-muted-foreground">Loading JSON...</div>}
                   >
@@ -203,7 +203,7 @@ export const RequestTools = memo(function RequestTools({
   const hiddenPreviewCount = summary.tools.length - previewTools.length;
 
   return (
-    <section className="border border-border bg-card shadow-sm mb-3 overflow-hidden rounded-[8px]">
+    <section className="bg-black/[0.10] mb-3 overflow-hidden rounded-[8px]">
       <div className="flex min-w-0 flex-wrap items-center gap-2 px-3 py-2">
         <div className="flex min-w-0 flex-1 items-center gap-2">
           <Wrench className="size-4 shrink-0 text-sky-300/80" />
@@ -251,7 +251,7 @@ export const RequestTools = memo(function RequestTools({
         </Button>
       </div>
 
-      <div className="flex min-w-0 flex-wrap gap-1.5 border-t border-white/10 bg-white/[0.025] px-3 py-2">
+      <div className="flex min-w-0 flex-wrap gap-1.5 bg-white/[0.025] px-3 py-2">
         {previewTools.map((tool) => (
           <Badge
             key={tool.name}
@@ -272,8 +272,8 @@ export const RequestTools = memo(function RequestTools({
       </div>
 
       {expanded && (
-        <div className="space-y-2 border-t border-white/10 bg-black/10 px-3 py-3">
-          <label className="border border-input bg-background hover:bg-accent hover:text-accent-foreground flex h-8 items-center gap-2 rounded-md px-2 text-xs">
+        <div className="space-y-2 bg-black/10 px-3 py-3">
+          <label className="bg-white/[0.045] hover:bg-white/[0.075] flex h-8 items-center gap-2 rounded-md px-2 text-xs">
             <Search className="size-3.5 shrink-0 text-muted-foreground" />
             <input
               value={query}

package/src/components/proxy-viewer/ThreadConnector.tsx

@@ -69,7 +69,7 @@ export function ThreadConnector({
   return (
     <div className="flex flex-col items-center w-6 shrink-0 pt-0.5 pb-0.5">
       <div className="flex justify-center h-[calc(0.75rem-8px)]">
-        {!isFirst && <div className="w-0.5 bg-muted-foreground/30 h-full" />}
+        {!isFirst && <div className="w-px bg-muted-foreground/18 h-full" />}
       </div>
 
       {isFusedBoundary ? (
@@ -139,8 +139,8 @@ export function ThreadConnector({
             className={cn(
               "w-0.5 h-full",
               isPending
-                ? "border-dashed bg-transparent border-l-2 border-muted-foreground/20"
-                : "bg-muted-foreground/30",
+                ? "border-dashed bg-transparent border-l border-muted-foreground/14"
+                : "bg-muted-foreground/18",
             )}
           />
         )}

package/src/components/proxy-viewer/ToolTraceEvents.tsx

@@ -14,7 +14,7 @@ function ToolTraceEventRow({ event }: { event: ToolTraceEvent }): JSX.Element {
   return (
     <div
       key={event.id}
-      className="group/tool-trace flex min-w-0 items-center gap-2 rounded-md border border-border/70 bg-muted/20 px-2.5 py-1.5 text-xs"
+      className="group/tool-trace flex min-w-0 items-center gap-2 rounded-md bg-white/[0.035] px-2.5 py-1.5 text-xs"
     >
       <Wrench className="size-3.5 shrink-0 text-sky-400/70" />
       <span className="font-mono font-semibold text-foreground/80">{event.name}</span>

package/src/components/proxy-viewer/TurnGroup.tsx

@@ -143,7 +143,7 @@ export const TurnGroup = memo(function TurnGroup({
     };
   }, [entries, lastIdx]);
 
-  const bgClass = turnIndex % 2 === 0 ? "bg-white/[0.012]" : "bg-cyan-300/[0.012]";
+  const bgClass = turnIndex % 2 === 0 ? "bg-white/[0.008]" : "bg-cyan-300/[0.008]";
   const aggregateIsSlow =
     aggregate.maxElapsed !== null &&
     slowResponseThresholdSeconds > 0 &&
@@ -194,10 +194,8 @@ export const TurnGroup = memo(function TurnGroup({
       aria-label={collapsed ? undefined : turnLabel}
       data-nav-id={collapsed ? undefined : `turn-${String(firstLogId)}`}
       className={cn(
-        "rounded-[8px] border transition-[border-color,box-shadow]",
-        isPending
-          ? "border-amber-300/15 shadow-[0_0_0_1px_rgba(252,211,77,0.04)]"
-          : "border-transparent",
+        "rounded-[8px] transition-[background-color,box-shadow]",
+        isPending ? "bg-amber-300/[0.018] shadow-[0_0_0_1px_rgba(252,211,77,0.035)]" : "",
         !collapsed &&
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
       )}
@@ -226,16 +224,14 @@ export const TurnGroup = memo(function TurnGroup({
 
           <div className="w-6 shrink-0 flex flex-col items-center pt-1.5 pb-1.5">
             <div className="flex justify-center h-[calc(0.75rem-8px)]" />
-            <span className="size-2 rounded-full border border-cyan-300/45 bg-cyan-300/20" />
+            <span className="size-2 rounded-full bg-cyan-300/45" />
             <div className="flex-1 flex justify-center min-h-0">
-              <div className="w-px bg-muted-foreground/25 h-full" />
+              <div className="w-px bg-muted-foreground/14 h-full" />
             </div>
             <span
               className={cn(
-                "size-2 rounded-full border",
-                isComplete
-                  ? "border-amber-300/45 bg-amber-300/20"
-                  : "border-muted-foreground/30 bg-muted/30",
+                "size-2 rounded-full",
+                isComplete ? "bg-amber-300/45" : "bg-muted-foreground/25",
               )}
             />
           </div>
@@ -244,8 +240,8 @@ export const TurnGroup = memo(function TurnGroup({
           {entries.length > 1 && (
             <div
               className={cn(
-                "flex-1 min-w-0 mb-0.5 rounded-[8px] py-1.5 px-3 flex items-center gap-3 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
-                "border border-border bg-card shadow-sm transition-colors hover:border-cyan-200/20",
+                "flex-1 min-w-0 mb-0.5 rounded-[8px] py-1.5 px-3 flex items-center gap-3 text-xs",
+                "bg-card/80 transition-colors hover:bg-card",
                 bgClass,
               )}
             >
@@ -318,7 +314,7 @@ export const TurnGroup = memo(function TurnGroup({
               <span className="flex-1 min-w-0" />
 
               <span
-                className="border border-input bg-background inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-200"
+                className="bg-white/[0.045] inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-200"
                 aria-hidden="true"
               >
                 <ChevronRight className="size-4 shrink-0" />

package/src/lib/groupContract.ts

@@ -103,6 +103,11 @@ export const DeleteInspectorGroupResponseSchema = z.object({
   evidencePath: z.string().nullable(),
 });
 
+export const DeleteInspectorGroupsResponseSchema = z.object({
+  deleted: z.number().int().nonnegative(),
+  groups: z.array(DeleteInspectorGroupResponseSchema),
+});
+
 export const InspectorGroupExportMemberSchema = z.object({
   member: InspectorGroupMemberSchema,
   run: InspectorRunSchema.nullable(),
@@ -153,6 +158,7 @@ export type AddInspectorGroupSessionInput = z.infer<typeof AddInspectorGroupSess
 export type GroupEvidenceExportOptions = z.infer<typeof GroupEvidenceExportOptionsSchema>;
 export type DeleteInspectorGroupOptions = z.infer<typeof DeleteInspectorGroupOptionsSchema>;
 export type DeleteInspectorGroupResponse = z.infer<typeof DeleteInspectorGroupResponseSchema>;
+export type DeleteInspectorGroupsResponse = z.infer<typeof DeleteInspectorGroupsResponseSchema>;
 export type InspectorGroupExportMember = z.infer<typeof InspectorGroupExportMemberSchema>;
 export type InspectorGroupEvidenceSummary = z.infer<typeof InspectorGroupEvidenceSummarySchema>;
 export type GroupEvidenceReadResponse = z.infer<typeof GroupEvidenceReadResponseSchema>;