@tonyclaw/agent-inspector 3.0.7 → 3.0.9

package/src/components/ecosystem/AgentLabDialog.tsx

@@ -1,10 +1,12 @@
-import { type JSX, useMemo, useState } from "react";
+import { type JSX, useEffect, useMemo, useState } from "react";
 import {
   Activity,
   Beaker,
   Check,
   Copy,
+  Download,
   FlaskConical,
+  Loader2,
   Network,
   PackageCheck,
   RefreshCw,
@@ -15,9 +17,12 @@ import {
 import useSWR from "swr";
 import {
   EcosystemPackagesResponseSchema,
+  EcosystemTaskResponseSchema,
   type EcosystemPackage,
   type EcosystemPackageState,
   type EcosystemRunnerPreset,
+  type EcosystemTask,
+  type EcosystemTaskAction,
 } from "../../lib/ecosystemContract";
 import { fetchJson } from "../../lib/apiClient";
 import { copyTextToClipboard } from "../../lib/clipboard";
@@ -87,6 +92,28 @@ async function fetchEcosystemPackages(url: string) {
   );
 }
 
+async function fetchEcosystemTask(url: string) {
+  return fetchJson(
+    url,
+    EcosystemTaskResponseSchema,
+    undefined,
+    (response) => `Failed to load ecosystem task: ${String(response.status)}`,
+  );
+}
+
+async function startEcosystemTask(
+  packageId: string,
+  action: EcosystemTaskAction,
+): Promise<EcosystemTask> {
+  const response = await fetchJson(
+    `/api/ecosystem/packages/${encodeURIComponent(packageId)}/${action}`,
+    EcosystemTaskResponseSchema,
+    { method: "POST" },
+    (result) => `Failed to start ecosystem task: ${String(result.status)}`,
+  );
+  return response.task;
+}
+
 function stateLabel(state: EcosystemPackageState): string {
   switch (state) {
     case "installed":
@@ -127,7 +154,57 @@ function versionLabel(pkg: EcosystemPackage): string {
   return "not published";
 }
 
-function PackageStatusCard({ pkg }: { pkg: EcosystemPackage }): JSX.Element {
+function taskActionLabel(action: EcosystemTaskAction): string {
+  switch (action) {
+    case "install":
+      return "Install";
+    case "upgrade":
+      return "Upgrade";
+    case "help":
+      return "Help";
+    case "runner-presets":
+      return "Presets";
+  }
+}
+
+function taskStatusLabel(task: EcosystemTask): string {
+  switch (task.status) {
+    case "queued":
+      return "Queued";
+    case "running":
+      return `${taskActionLabel(task.action)} running`;
+    case "succeeded":
+      return `${taskActionLabel(task.action)} complete`;
+    case "failed":
+      return `${taskActionLabel(task.action)} failed`;
+  }
+}
+
+function packagePrimaryAction(pkg: EcosystemPackage): EcosystemTaskAction | null {
+  switch (pkg.state) {
+    case "available":
+      return "install";
+    case "update-available":
+      return "upgrade";
+    case "installed":
+    case "planned":
+    case "unknown":
+      return null;
+  }
+}
+
+function PackageStatusCard({
+  pkg,
+  activeTask,
+  onStartTask,
+}: {
+  pkg: EcosystemPackage;
+  activeTask: EcosystemTask | null;
+  onStartTask: (packageId: string, action: EcosystemTaskAction) => void;
+}): JSX.Element {
+  const primaryAction = packagePrimaryAction(pkg);
+  const packageTaskRunning =
+    activeTask !== null && activeTask.packageId === pkg.id && activeTask.status === "running";
   return (
     <div className="rounded-lg bg-white/[0.025] p-3 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]">
       <div className="flex flex-wrap items-start justify-between gap-3">
@@ -154,10 +231,87 @@ function PackageStatusCard({ pkg }: { pkg: EcosystemPackage }): JSX.Element {
           {pkg.installCommand}
         </span>
       </div>
+      <div className="mt-3 flex flex-wrap items-center gap-2">
+        {primaryAction !== null && (
+          <Button
+            type="button"
+            size="sm"
+            variant="secondary"
+            disabled={packageTaskRunning}
+            onClick={() => onStartTask(pkg.id, primaryAction)}
+          >
+            {packageTaskRunning ? (
+              <Loader2 className="size-3.5 animate-spin" />
+            ) : (
+              <Download className="size-3.5" />
+            )}
+            {taskActionLabel(primaryAction)}
+          </Button>
+        )}
+        <Button
+          type="button"
+          size="sm"
+          variant="outline"
+          disabled={packageTaskRunning || pkg.state === "planned"}
+          onClick={() => onStartTask(pkg.id, "help")}
+        >
+          <Terminal className="size-3.5" />
+          Help
+        </Button>
+        {pkg.id === "eval-harness" && (
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            disabled={packageTaskRunning || pkg.state === "planned"}
+            onClick={() => onStartTask(pkg.id, "runner-presets")}
+          >
+            <Beaker className="size-3.5" />
+            Presets
+          </Button>
+        )}
+      </div>
     </div>
   );
 }
 
+function TaskConsole({ task }: { task: EcosystemTask | null }): JSX.Element | null {
+  if (task === null) return null;
+  const isRunning = task.status === "queued" || task.status === "running";
+  return (
+    <section className="mt-3 rounded-lg bg-white/[0.025] p-3 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-2">
+          {isRunning ? (
+            <Loader2 className="size-4 animate-spin text-cyan-200/75" />
+          ) : (
+            <Terminal className="size-4 text-white/55" />
+          )}
+          <div className="min-w-0">
+            <div className="text-sm font-semibold">{taskStatusLabel(task)}</div>
+            <div className="break-all font-mono text-[11px] text-white/35">{task.command}</div>
+          </div>
+        </div>
+        <Badge
+          variant="outline"
+          className={cn(
+            "shrink-0",
+            task.status === "failed"
+              ? "border-red-400/20 bg-red-400/8 text-red-100"
+              : "border-cyan-300/20 bg-cyan-300/8 text-cyan-100",
+          )}
+        >
+          {task.status}
+        </Badge>
+      </div>
+      <pre className="mt-3 max-h-56 overflow-auto whitespace-pre-wrap rounded-md bg-black/30 p-3 font-mono text-[11px] leading-5 text-white/60 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]">
+        {task.output.trim().length > 0 ? task.output : "Waiting for npm output..."}
+      </pre>
+      {task.error !== null && <div className="mt-2 text-xs text-red-100">{task.error}</div>}
+    </section>
+  );
+}
+
 function WorkflowTile({ workflow }: { workflow: WorkflowCard }): JSX.Element {
   const Icon = workflow.icon;
   return (
@@ -222,10 +376,25 @@ export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogPro
   const [open, setOpen] = useState(false);
   const [copied, setCopied] = useState(false);
   const [copiedPresets, setCopiedPresets] = useState(false);
+  const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
+  const [taskError, setTaskError] = useState<string | null>(null);
   const response = useSWR("/api/ecosystem/packages", fetchEcosystemPackages, {
     revalidateOnFocus: false,
     revalidateIfStale: false,
   });
+  const activeTaskResponse = useSWR(
+    activeTaskId === null ? null : `/api/ecosystem/tasks/${activeTaskId}`,
+    fetchEcosystemTask,
+    {
+      refreshInterval: (taskResponse) => {
+        const task = taskResponse?.task;
+        return task !== undefined && (task.status === "queued" || task.status === "running")
+          ? 900
+          : 0;
+      },
+      revalidateOnFocus: false,
+    },
+  );
   const packages = response.data?.packages ?? [];
   const runnerPresets = response.data?.runnerPresets ?? [];
   const installedCount = useMemo(
@@ -250,6 +419,26 @@ export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogPro
     });
   };
 
+  const activeTask = activeTaskResponse.data?.task ?? null;
+
+  useEffect(() => {
+    if (activeTask === null) return;
+    if (activeTask.status !== "succeeded") return;
+    void response.mutate();
+  }, [activeTask, response]);
+
+  const handleStartTask = (packageId: string, action: EcosystemTaskAction): void => {
+    setTaskError(null);
+    void startEcosystemTask(packageId, action)
+      .then((task) => {
+        setActiveTaskId(task.id);
+        void activeTaskResponse.mutate({ task }, { revalidate: true });
+      })
+      .catch((error: unknown) => {
+        setTaskError(error instanceof Error ? error.message : "Failed to start ecosystem task");
+      });
+  };
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
@@ -362,7 +551,12 @@ export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogPro
             )}
             <div className="grid gap-3 md:grid-cols-3">
               {packages.map((pkg) => (
-                <PackageStatusCard key={pkg.id} pkg={pkg} />
+                <PackageStatusCard
+                  key={pkg.id}
+                  pkg={pkg}
+                  activeTask={activeTask}
+                  onStartTask={handleStartTask}
+                />
               ))}
               {response.isLoading &&
                 packages.length === 0 &&
@@ -374,6 +568,13 @@ export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogPro
                 ))}
             </div>
           </section>
+
+          {taskError !== null && (
+            <div className="mt-3 rounded-lg bg-red-500/8 p-3 text-xs text-red-100 shadow-[inset_0_0_0_1px_rgba(248,113,113,0.16)]">
+              {taskError}
+            </div>
+          )}
+          <TaskConsole task={activeTask} />
         </div>
       </DialogContent>
     </Dialog>

package/src/components/groups/GroupsDialog.tsx

@@ -16,7 +16,7 @@ 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 { parseJsonResponse, readApiError } from "../../lib/apiClient";
+import { fetchJsonWithTimeout } from "../../lib/apiClient";
 import {
   DeleteInspectorGroupResponseSchema,
   DeleteInspectorGroupsResponseSchema,
@@ -53,6 +53,8 @@ type GroupMemberRow = {
   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;
@@ -333,19 +335,13 @@ export function GroupsDialog(): JSX.Element {
     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);
+      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();
@@ -370,20 +366,17 @@ export function GroupsDialog(): JSX.Element {
       setExportError(null);
 
       try {
-        const response = await fetch(`/api/groups/${encodeURIComponent(group.id)}/evidence`, {
-          method: "POST",
-          headers: { "content-type": "application/json" },
-          body: JSON.stringify({ latestLogLimit: 10 }),
-        });
-
-        if (!response.ok) {
-          setExportError(
-            await readApiError(response, `Export failed with status ${String(response.status)}`),
-          );
-          return;
-        }
-
-        const parsed = await parseJsonResponse(response, GroupEvidenceExportResultSchema);
+        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();
@@ -424,18 +417,13 @@ export function GroupsDialog(): JSX.Element {
     setDeleteError(null);
 
     try {
-      const response = await fetch(groupDeletePath(group.id, deleteEvidence), {
-        method: "DELETE",
-      });
-
-      if (!response.ok) {
-        setDeleteError(
-          await readApiError(response, `Delete failed with status ${String(response.status)}`),
-        );
-        return;
-      }
-
-      await parseJsonResponse(response, DeleteInspectorGroupResponseSchema);
+      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,
       );

package/src/components/providers/ImportWizardDialog.tsx

@@ -1,66 +1,12 @@
-import { type JSX, useState, useCallback, useEffect } from "react";
+import { type JSX, useState, useCallback, useEffect, useRef } from "react";
 import { z } from "zod";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
 import { Button } from "../ui/button";
+import { fetchJsonWithTimeout } from "../../lib/apiClient";
+import { ClientLogo } from "../clients/ClientLogo";
 
 import { Loader2, Download, AlertCircle } from "lucide-react";
 
-function ClaudeCodeIcon(): JSX.Element {
-  return (
-    <svg
-      fill="currentColor"
-      fillRule="evenodd"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      className="size-6 shrink-0"
-    >
-      <title>Claude Code</title>
-      <path
-        clipRule="evenodd"
-        d="M20.998 10.949H24v3.102h-3v3.028h-1.487V20H18v-2.921h-1.487V20H15v-2.921H9V20H7.488v-2.921H6V20H4.487v-2.921H3V14.05H0V10.95h3V5h17.998v5.949zM6 10.949h1.488V8.102H6v2.847zm10.51 0H18V8.102h-1.49v2.847z"
-      />
-    </svg>
-  );
-}
-
-function OpenCodeIcon(): JSX.Element {
-  return (
-    <svg
-      fill="currentColor"
-      fillRule="evenodd"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      className="size-6 shrink-0"
-    >
-      <title>OpenCode</title>
-      <path d="M16 6H8v12h8V6zm4 16H4V2h16v20z" />
-    </svg>
-  );
-}
-
-function MiMoCodeIcon(): JSX.Element {
-  return (
-    <svg
-      fill="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      className="size-6 shrink-0"
-    >
-      <title>MiMo Code</title>
-      <text
-        x="12"
-        y="18"
-        textAnchor="middle"
-        fontSize="16"
-        fontWeight="800"
-        fontFamily="system-ui, sans-serif"
-      >
-        M
-      </text>
-    </svg>
-  );
-}
-
 const ExternalProviderSchema = z.object({
   name: z.string(),
   apiKey: z.string(),
@@ -85,11 +31,7 @@ const ImportResponseSchema = z.object({
   errors: z.array(z.string()).optional(),
 });
 
-const sourceLogoMap: Record<string, () => JSX.Element> = {
-  "claude-code": ClaudeCodeIcon,
-  opencode: OpenCodeIcon,
-  "mimo-code": MiMoCodeIcon,
-};
+const PROVIDER_IMPORT_TIMEOUT_MS = 20_000;
 
 type ImportWizardDialogProps = {
   open: boolean;
@@ -110,8 +52,12 @@ export function ImportWizardDialog({
   const [importing, setImporting] = useState(false);
   const [importResult, setImportResult] = useState<string | null>(null);
   const [importError, setImportError] = useState<string | null>(null);
+  const scanRequestIdRef = useRef(0);
+  const importRequestIdRef = useRef(0);
 
   const scan = useCallback(() => {
+    const requestId = scanRequestIdRef.current + 1;
+    scanRequestIdRef.current = requestId;
     setScanning(true);
     setScanError(null);
     setWarnings([]);
@@ -120,33 +66,29 @@ export function ImportWizardDialog({
     setImportResult(null);
     setImportError(null);
 
-    fetch("/api/providers/scan")
-      .then((res) => {
-        if (!res.ok) {
-          return res.text().then((text) => {
-            setScanError(`Scan failed (${res.status}): ${text}`);
-          });
-        }
-        return res.json().then((data: unknown) => {
-          const parsed = ScanResponseSchema.safeParse(data);
-          if (!parsed.success) {
-            setScanError(`Invalid response: ${parsed.error.message}`);
-            return;
-          }
-          setProviders(parsed.data.providers);
-          setWarnings(parsed.data.warnings ?? []);
-          // Pre-select non-existing providers
-          const indices = new Set<number>();
-          parsed.data.providers.forEach((p, i) => {
-            if (!p.alreadyExists) indices.add(i);
-          });
-          setSelected(indices);
+    void fetchJsonWithTimeout(
+      "/api/providers/scan",
+      ScanResponseSchema,
+      PROVIDER_IMPORT_TIMEOUT_MS,
+      undefined,
+      (response) => `Scan failed (${String(response.status)})`,
+    )
+      .then((data) => {
+        if (scanRequestIdRef.current !== requestId) return;
+        setProviders(data.providers);
+        setWarnings(data.warnings ?? []);
+        const indices = new Set<number>();
+        data.providers.forEach((provider, index) => {
+          if (!provider.alreadyExists) indices.add(index);
         });
+        setSelected(indices);
       })
       .catch((err: unknown) => {
+        if (scanRequestIdRef.current !== requestId) return;
         setScanError(err instanceof Error ? err.message : String(err));
       })
       .finally(() => {
+        if (scanRequestIdRef.current !== requestId) return;
         setScanning(false);
       });
   }, []);
@@ -158,6 +100,14 @@ export function ImportWizardDialog({
     }
   }, [open, scan]);
 
+  useEffect(() => {
+    if (open) return;
+    scanRequestIdRef.current += 1;
+    importRequestIdRef.current += 1;
+    setScanning(false);
+    setImporting(false);
+  }, [open]);
+
   const toggleProvider = useCallback((index: number) => {
     setSelected((prev) => {
       const next = new Set(prev);
@@ -174,6 +124,8 @@ export function ImportWizardDialog({
     const toImport = providers.filter((_, i) => selected.has(i));
     if (toImport.length === 0) return;
 
+    const requestId = importRequestIdRef.current + 1;
+    importRequestIdRef.current = requestId;
     setImporting(true);
     setImportError(null);
     setImportResult(null);
@@ -193,19 +145,19 @@ export function ImportWizardDialog({
       updatedAt: now,
     }));
 
-    fetch("/api/providers/import", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ providers: providersPayload }),
-    })
-      .then((res) => res.json())
-      .then((data: unknown) => {
-        const parsed = ImportResponseSchema.safeParse(data);
-        if (!parsed.success) {
-          setImportError(`Invalid response: ${parsed.error.message}`);
-          return;
-        }
-        const result = parsed.data;
+    void fetchJsonWithTimeout(
+      "/api/providers/import",
+      ImportResponseSchema,
+      PROVIDER_IMPORT_TIMEOUT_MS,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ providers: providersPayload }),
+      },
+      (response) => `Import failed (${String(response.status)})`,
+    )
+      .then((result) => {
+        if (importRequestIdRef.current !== requestId) return;
         // Mark imported providers as already existing so they can't be re-selected
         setProviders((prev) =>
           prev.map((p, i) => (selected.has(i) ? { ...p, alreadyExists: true } : p)),
@@ -224,9 +176,11 @@ export function ImportWizardDialog({
         onImportComplete();
       })
       .catch((err: unknown) => {
+        if (importRequestIdRef.current !== requestId) return;
         setImportError(err instanceof Error ? err.message : String(err));
       })
       .finally(() => {
+        if (importRequestIdRef.current !== requestId) return;
         setImporting(false);
       });
   }, [providers, selected, onImportComplete]);
@@ -286,11 +240,7 @@ export function ImportWizardDialog({
                 )}
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center justify-between">
-                    {(() => {
-                      const LogoComponent = sourceLogoMap[p.sourceTool];
-                      if (LogoComponent === undefined) return null;
-                      return <LogoComponent />;
-                    })()}
+                    <ClientLogo client={p.sourceTool} className="size-7 rounded-[8px]" />
                     {p.alreadyExists && (
                       <span className="text-[10px] text-muted-foreground">Already added</span>
                     )}