@tonyclaw/agent-inspector 4.0.1 → 4.0.3

package/src/components/ecosystem/AgentLabDialog.tsx

@@ -1,947 +0,0 @@
-import { type JSX, useEffect, useMemo, useState } from "react";
-import {
-  Activity,
-  Beaker,
-  Check,
-  Copy,
-  Download,
-  FlaskConical,
-  History,
-  Loader2,
-  Network,
-  PackageCheck,
-  RefreshCw,
-  Rocket,
-  Sparkles,
-  Terminal,
-} from "lucide-react";
-import useSWR from "swr";
-import {
-  EcosystemExecutionConfirmationResponseSchema,
-  EcosystemPackagesResponseSchema,
-  EcosystemTaskResponseSchema,
-  EcosystemTasksResponseSchema,
-  type EcosystemPackage,
-  type EcosystemPackageState,
-  type EcosystemRecipe,
-  type EcosystemExecutionConfirmation,
-  type EcosystemRunnerPreset,
-  type EcosystemTask,
-  type EcosystemTaskAction,
-} from "../../lib/ecosystemContract";
-import { fetchJson } from "../../lib/apiClient";
-import { copyTextToClipboard } from "../../lib/clipboard";
-import { cn } from "../../lib/utils";
-import { Badge } from "../ui/badge";
-import { Button } from "../ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../ui/dialog";
-import { INSPECTOR_ICON_TRIGGER_CLASS } from "../ui/icon-trigger";
-
-type AgentLabDialogProps = {
-  currentSessionId: string | null;
-  logCount: number;
-};
-
-type WorkflowCard = {
-  id: string;
-  title: string;
-  label: string;
-  description: string;
-  metric: string;
-  icon: typeof Activity;
-};
-
-type PendingEcosystemExecution = {
-  endpoint: string;
-  confirmation: EcosystemExecutionConfirmation;
-};
-
-const WORKFLOWS: WorkflowCard[] = [
-  {
-    id: "observe",
-    title: "Observe",
-    label: "Live",
-    description: "Capture IDE, process, session, turn, request, response, tools, and providers.",
-    metric: "Inspector core",
-    icon: Activity,
-  },
-  {
-    id: "replay",
-    title: "Replay",
-    label: "Ready",
-    description:
-      "Promote real logs into repeatable replay evidence without losing the raw context.",
-    metric: "Session asset",
-    icon: RefreshCw,
-  },
-  {
-    id: "evaluate",
-    title: "Evaluate",
-    label: "Next",
-    description: "Use eval-harness to turn sessions into regression cases and provider bakeoffs.",
-    metric: "Eval loop",
-    icon: Beaker,
-  },
-  {
-    id: "connect",
-    title: "Connect",
-    label: "MCP",
-    description:
-      "Expose Inspector state to coding agents as queryable context and durable evidence.",
-    metric: "/api/mcp",
-    icon: Network,
-  },
-];
-
-async function fetchEcosystemPackages(url: string) {
-  return fetchJson(
-    url,
-    EcosystemPackagesResponseSchema,
-    undefined,
-    (response) => `Failed to load ecosystem packages: ${String(response.status)}`,
-  );
-}
-
-async function fetchEcosystemTask(url: string) {
-  return fetchJson(
-    url,
-    EcosystemTaskResponseSchema,
-    undefined,
-    (response) => `Failed to load ecosystem task: ${String(response.status)}`,
-  );
-}
-
-async function fetchEcosystemTasks(url: string) {
-  return fetchJson(
-    url,
-    EcosystemTasksResponseSchema,
-    undefined,
-    (response) => `Failed to load ecosystem tasks: ${String(response.status)}`,
-  );
-}
-
-async function prepareEcosystemTask(
-  packageId: string,
-  action: EcosystemTaskAction,
-): Promise<PendingEcosystemExecution> {
-  const endpoint = `/api/ecosystem/packages/${encodeURIComponent(packageId)}/${action}`;
-  const response = await fetchJson(
-    endpoint,
-    EcosystemExecutionConfirmationResponseSchema,
-    {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({ intent: "prepare" }),
-    },
-    (result) => `Failed to prepare ecosystem task: ${String(result.status)}`,
-  );
-  return { endpoint, confirmation: response.confirmation };
-}
-
-async function prepareEcosystemRecipe(recipeId: string): Promise<PendingEcosystemExecution> {
-  const endpoint = `/api/ecosystem/recipes/${encodeURIComponent(recipeId)}/run`;
-  const response = await fetchJson(
-    endpoint,
-    EcosystemExecutionConfirmationResponseSchema,
-    {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({ intent: "prepare" }),
-    },
-    (result) => `Failed to prepare ecosystem recipe: ${String(result.status)}`,
-  );
-  return { endpoint, confirmation: response.confirmation };
-}
-
-async function confirmEcosystemExecution(
-  pending: PendingEcosystemExecution,
-): Promise<EcosystemTask> {
-  const response = await fetchJson(
-    pending.endpoint,
-    EcosystemTaskResponseSchema,
-    {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({
-        intent: "confirm",
-        nonce: pending.confirmation.nonce,
-        confirmation: pending.confirmation.phrase,
-      }),
-    },
-    (result) => `Failed to start ecosystem task: ${String(result.status)}`,
-  );
-  return response.task;
-}
-
-function stateLabel(state: EcosystemPackageState): string {
-  switch (state) {
-    case "installed":
-      return "Installed";
-    case "update-available":
-      return "Update";
-    case "available":
-      return "Available";
-    case "planned":
-      return "Planned";
-    case "unknown":
-      return "Unknown";
-  }
-}
-
-function stateClassName(state: EcosystemPackageState): string {
-  switch (state) {
-    case "installed":
-      return "border-emerald-400/20 bg-emerald-400/8 text-emerald-200";
-    case "update-available":
-      return "border-amber-400/20 bg-amber-400/8 text-amber-200";
-    case "available":
-      return "border-sky-400/20 bg-sky-400/8 text-sky-200";
-    case "planned":
-      return "border-white/10 bg-white/[0.04] text-white/55";
-    case "unknown":
-      return "border-white/10 bg-white/[0.04] text-white/45";
-  }
-}
-
-function versionLabel(pkg: EcosystemPackage): string {
-  if (pkg.installedVersion !== null && pkg.latestVersion !== null) {
-    if (pkg.installedVersion === pkg.latestVersion) return `v${pkg.installedVersion}`;
-    return `v${pkg.installedVersion} -> v${pkg.latestVersion}`;
-  }
-  if (pkg.installedVersion !== null) return `v${pkg.installedVersion}`;
-  if (pkg.latestVersion !== null) return `latest v${pkg.latestVersion}`;
-  return "not published";
-}
-
-function taskActionLabel(action: EcosystemTaskAction): string {
-  switch (action) {
-    case "install":
-      return "Install";
-    case "upgrade":
-      return "Upgrade";
-    case "help":
-      return "Help";
-    case "runner-presets":
-      return "Presets";
-    case "recipe":
-      return "Recipe";
-  }
-}
-
-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 taskStatusClassName(status: EcosystemTask["status"]): string {
-  switch (status) {
-    case "queued":
-    case "running":
-      return "border-cyan-300/20 bg-cyan-300/8 text-cyan-100";
-    case "succeeded":
-      return "border-emerald-400/20 bg-emerald-400/8 text-emerald-100";
-    case "failed":
-      return "border-red-400/20 bg-red-400/8 text-red-100";
-  }
-}
-
-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">
-        <div className="min-w-0">
-          <div className="flex min-w-0 items-start gap-2">
-            <PackageCheck className="size-4 shrink-0 text-white/55" />
-            <div className="text-sm font-semibold leading-snug">{pkg.name}</div>
-          </div>
-          <div className="mt-1 break-all font-mono text-[11px] leading-snug text-white/35">
-            {pkg.npmName}
-          </div>
-        </div>
-        <Badge className={cn("shrink-0", stateClassName(pkg.state))} variant="outline">
-          {stateLabel(pkg.state)}
-        </Badge>
-      </div>
-      <div className="mt-3 text-xs leading-5 text-muted-foreground">{pkg.description}</div>
-      <div className="mt-3 flex flex-wrap items-center gap-2 text-[11px]">
-        <span className="rounded bg-white/[0.035] px-2 py-1 font-mono text-white/50">
-          {versionLabel(pkg)}
-        </span>
-        <span className="rounded bg-white/[0.035] px-2 py-1 text-white/45">{pkg.capability}</span>
-        <span className="rounded bg-white/[0.035] px-2 py-1 font-mono text-white/35">
-          {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", taskStatusClassName(task.status))}>
-          {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 (
-    <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 items-start justify-between gap-3">
-        <div className="flex min-w-0 items-center gap-2">
-          <Icon className="size-4 shrink-0 text-cyan-200/75" />
-          <div className="text-sm font-semibold">{workflow.title}</div>
-        </div>
-        <span className="rounded bg-white/[0.04] px-2 py-0.5 font-mono text-[10px] text-white/45">
-          {workflow.label}
-        </span>
-      </div>
-      <div className="mt-2 min-h-10 text-xs leading-5 text-muted-foreground">
-        {workflow.description}
-      </div>
-      <div className="mt-3 font-mono text-[11px] text-white/35">{workflow.metric}</div>
-    </div>
-  );
-}
-
-function buildSessionCommand(sessionId: string | null): string {
-  if (sessionId === null) {
-    return 'npx @tonyclaw/eval-harness inspector-smoke --title "TonyClaw Lab smoke" --latest-log-limit 5';
-  }
-  return `npx @tonyclaw/eval-harness inspector-smoke --title "TonyClaw Lab smoke ${sessionId}" --latest-log-limit 5`;
-}
-
-function RunnerPresetCard({ preset }: { preset: EcosystemRunnerPreset }): JSX.Element {
-  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">
-        <div className="min-w-0">
-          <div className="flex min-w-0 items-start gap-2">
-            <Rocket className="size-4 shrink-0 text-cyan-200/75" />
-            <div className="text-sm font-semibold leading-snug">{preset.name}</div>
-          </div>
-          <div className="mt-1 break-all font-mono text-[11px] leading-snug text-white/35">
-            {preset.binary} {preset.modelFlag}
-            {preset.variantFlag !== null ? ` ${preset.variantFlag}` : ""}
-          </div>
-        </div>
-        <Badge variant="outline" className="border-white/10 bg-white/[0.04] text-white/55">
-          v{preset.validatedVersion}
-        </Badge>
-      </div>
-      <div className="mt-3 grid grid-cols-2 gap-2 text-[11px]">
-        <div className="rounded bg-black/15 px-2 py-1 text-white/45">logs/{preset.logDir}</div>
-        <div className="rounded bg-black/15 px-2 py-1 text-white/45">{preset.tools.join(", ")}</div>
-        <div className="rounded bg-black/15 px-2 py-1 font-mono text-white/35">
-          {preset.skillsDir}
-        </div>
-        <div className="rounded bg-black/15 px-2 py-1 font-mono text-white/35">
-          {preset.agentsDir}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function RecipeCard({
-  recipe,
-  copied,
-  running,
-  onCopy,
-  onRun,
-}: {
-  recipe: EcosystemRecipe;
-  copied: boolean;
-  running: boolean;
-  onCopy: (recipe: EcosystemRecipe) => void;
-  onRun: (recipe: EcosystemRecipe) => void;
-}): JSX.Element {
-  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">
-        <div className="min-w-0">
-          <div className="flex min-w-0 items-start gap-2">
-            <FlaskConical className="size-4 shrink-0 text-cyan-200/75" />
-            <div className="text-sm font-semibold leading-snug">{recipe.title}</div>
-          </div>
-          <div className="mt-1 text-xs leading-5 text-muted-foreground">{recipe.description}</div>
-        </div>
-        <Badge variant="outline" className="border-white/10 bg-white/[0.04] text-white/55">
-          {recipe.runnable ? recipe.stage : "Template"}
-        </Badge>
-      </div>
-      <div className="mt-3 rounded-md bg-black/20 p-2 font-mono text-[11px] leading-5 text-white/50 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]">
-        {recipe.command}
-      </div>
-      <div className="mt-3 flex items-center justify-between gap-2">
-        <span className="rounded bg-white/[0.035] px-2 py-1 font-mono text-[11px] text-white/35">
-          {recipe.packageId}
-        </span>
-        <div className="flex items-center gap-2">
-          <Button type="button" size="sm" variant="outline" onClick={() => onCopy(recipe)}>
-            {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
-            {copied ? "Copied" : "Copy"}
-          </Button>
-          {recipe.runnable && (
-            <Button
-              type="button"
-              size="sm"
-              variant="secondary"
-              disabled={running}
-              onClick={() => onRun(recipe)}
-            >
-              {running ? (
-                <Loader2 className="size-3.5 animate-spin" />
-              ) : (
-                <Rocket className="size-3.5" />
-              )}
-              {running ? "Running" : "Run"}
-            </Button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function RecentTaskRow({
-  task,
-  selected,
-  onSelect,
-}: {
-  task: EcosystemTask;
-  selected: boolean;
-  onSelect: (task: EcosystemTask) => void;
-}): JSX.Element {
-  const label = task.recipeId ?? taskActionLabel(task.action);
-  return (
-    <div className="flex items-center justify-between gap-3 rounded-md bg-white/[0.025] px-3 py-2 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]">
-      <div className="min-w-0">
-        <div className="flex min-w-0 items-center gap-2">
-          <History className="size-3.5 shrink-0 text-white/40" />
-          <div className="truncate text-xs font-semibold text-white/75">{label}</div>
-          <Badge variant="outline" className={cn("shrink-0", taskStatusClassName(task.status))}>
-            {task.status}
-          </Badge>
-        </div>
-        <div className="mt-1 flex min-w-0 flex-wrap items-center gap-2 font-mono text-[10px] text-white/35">
-          <span>{task.packageId}</span>
-          <span>{new Date(task.createdAt).toLocaleTimeString()}</span>
-          {task.exitCode !== null && <span>exit {String(task.exitCode)}</span>}
-        </div>
-      </div>
-      <Button
-        type="button"
-        size="sm"
-        variant={selected ? "secondary" : "outline"}
-        onClick={() => onSelect(task)}
-      >
-        {selected ? "Open" : "View"}
-      </Button>
-    </div>
-  );
-}
-
-function ExecutionConfirmationDialog({
-  pending,
-  busy,
-  onOpenChange,
-  onConfirm,
-}: {
-  pending: PendingEcosystemExecution | null;
-  busy: boolean;
-  onOpenChange: (open: boolean) => void;
-  onConfirm: () => void;
-}): JSX.Element {
-  const plan = pending?.confirmation.plan ?? null;
-  return (
-    <Dialog open={pending !== null} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-xl">
-        <DialogHeader>
-          <DialogTitle>Confirm local command</DialogTitle>
-          <DialogDescription>
-            Review the exact allowlisted action Agent Inspector will run on this machine.
-          </DialogDescription>
-        </DialogHeader>
-        {plan !== null && (
-          <div className="space-y-3">
-            <div className="grid gap-2 text-xs sm:grid-cols-2">
-              <div className="rounded-md border bg-muted/30 p-3">
-                <div className="text-muted-foreground">Source</div>
-                <div className="mt-1 break-words font-medium">{plan.source}</div>
-              </div>
-              <div className="rounded-md border bg-muted/30 p-3">
-                <div className="text-muted-foreground">Timeout</div>
-                <div className="mt-1 font-medium">{String(plan.timeoutMs / 1000)} seconds</div>
-              </div>
-              <div className="rounded-md border bg-muted/30 p-3 sm:col-span-2">
-                <div className="text-muted-foreground">Affected scope</div>
-                <div className="mt-1 font-medium">{plan.scope}</div>
-              </div>
-            </div>
-            <div>
-              <div className="mb-1 text-xs font-medium">Resolved command</div>
-              <pre className="max-h-32 overflow-auto whitespace-pre-wrap break-all rounded-md bg-black/80 p-3 font-mono text-xs leading-5 text-white/80">
-                {plan.command}
-              </pre>
-            </div>
-            <p className="text-xs text-muted-foreground">
-              Confirmation phrase: <code>{pending?.confirmation.phrase}</code>. The one-time
-              confirmation expires at{" "}
-              {new Date(pending?.confirmation.expiresAt ?? "").toLocaleTimeString()}.
-            </p>
-          </div>
-        )}
-        <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
-          <Button
-            type="button"
-            variant="outline"
-            disabled={busy}
-            onClick={() => onOpenChange(false)}
-          >
-            Cancel
-          </Button>
-          <Button
-            type="button"
-            variant="secondary"
-            disabled={busy || plan === null}
-            onClick={onConfirm}
-          >
-            {busy ? (
-              <Loader2 className="size-3.5 animate-spin" />
-            ) : (
-              <Terminal className="size-3.5" />
-            )}
-            {busy ? "Starting" : "Confirm & Run"}
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export function AgentLabDialog({
-  currentSessionId,
-  logCount,
-  labelledTrigger = false,
-}: AgentLabDialogProps & { labelledTrigger?: boolean }): JSX.Element {
-  const [open, setOpen] = useState(false);
-  const [copied, setCopied] = useState(false);
-  const [copiedPresets, setCopiedPresets] = useState(false);
-  const [copiedRecipeId, setCopiedRecipeId] = useState<string | null>(null);
-  const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
-  const [taskError, setTaskError] = useState<string | null>(null);
-  const [pendingExecution, setPendingExecution] = useState<PendingEcosystemExecution | null>(null);
-  const [confirmationBusy, setConfirmationBusy] = useState(false);
-  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 tasksResponse = useSWR(open ? "/api/ecosystem/tasks" : null, fetchEcosystemTasks, {
-    refreshInterval: 2500,
-    revalidateOnFocus: false,
-  });
-  const packages = response.data?.packages ?? [];
-  const runnerPresets = response.data?.runnerPresets ?? [];
-  const recipes = response.data?.recipes ?? [];
-  const recentTasks = (tasksResponse.data?.tasks ?? []).slice(0, 6);
-  const installedCount = useMemo(
-    () =>
-      packages.filter((pkg) => pkg.state === "installed" || pkg.state === "update-available")
-        .length,
-    [packages],
-  );
-  const sessionCommand = buildSessionCommand(currentSessionId);
-  const presetsCommand = "npx @tonyclaw/eval-harness runner-presets";
-
-  const copySessionCommand = (): void => {
-    void copyTextToClipboard(sessionCommand).then(() => {
-      setCopied(true);
-      window.setTimeout(() => setCopied(false), 1200);
-    });
-  };
-  const copyPresetsCommand = (): void => {
-    void copyTextToClipboard(presetsCommand).then(() => {
-      setCopiedPresets(true);
-      window.setTimeout(() => setCopiedPresets(false), 1200);
-    });
-  };
-  const copyRecipeCommand = (recipe: EcosystemRecipe): void => {
-    void copyTextToClipboard(recipe.command).then(() => {
-      setCopiedRecipeId(recipe.id);
-      window.setTimeout(() => setCopiedRecipeId(null), 1200);
-    });
-  };
-  const runRecipe = (recipe: EcosystemRecipe): void => {
-    setTaskError(null);
-    void prepareEcosystemRecipe(recipe.id)
-      .then((pending) => {
-        setPendingExecution(pending);
-      })
-      .catch((error: unknown) => {
-        setTaskError(error instanceof Error ? error.message : "Failed to prepare ecosystem recipe");
-      });
-  };
-
-  const activeTask = activeTaskResponse.data?.task ?? null;
-
-  useEffect(() => {
-    if (activeTask === null) return;
-    void tasksResponse.mutate();
-    if (activeTask.status !== "succeeded") return;
-    void response.mutate();
-  }, [activeTask, response, tasksResponse]);
-
-  const handleStartTask = (packageId: string, action: EcosystemTaskAction): void => {
-    setTaskError(null);
-    void prepareEcosystemTask(packageId, action)
-      .then((pending) => {
-        setPendingExecution(pending);
-      })
-      .catch((error: unknown) => {
-        setTaskError(error instanceof Error ? error.message : "Failed to prepare ecosystem task");
-      });
-  };
-
-  const confirmPendingExecution = (): void => {
-    if (pendingExecution === null) return;
-    setTaskError(null);
-    setConfirmationBusy(true);
-    void confirmEcosystemExecution(pendingExecution)
-      .then((task) => {
-        setActiveTaskId(task.id);
-        setPendingExecution(null);
-        void activeTaskResponse.mutate({ task }, { revalidate: true });
-        void tasksResponse.mutate();
-      })
-      .catch((error: unknown) => {
-        setTaskError(error instanceof Error ? error.message : "Failed to start ecosystem task");
-      })
-      .finally(() => {
-        setConfirmationBusy(false);
-      });
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <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="TonyClaw Lab"
-          title="TonyClaw Lab"
-        >
-          <FlaskConical className="size-4" />
-          <span className={labelledTrigger ? "" : "sr-only"}>Lab</span>
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="flex max-h-[84vh] max-w-5xl flex-col overflow-hidden">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Sparkles className="size-4 text-cyan-200/80" />
-            TonyClaw Lab
-          </DialogTitle>
-        </DialogHeader>
-
-        <div className="overflow-y-auto pr-2">
-          <div className="grid gap-3 lg:grid-cols-[1.1fr_0.9fr]">
-            <section className="rounded-lg bg-white/[0.025] p-4 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]">
-              <div className="flex flex-wrap items-start justify-between gap-3">
-                <div>
-                  <div className="text-sm font-semibold">Session asset pipeline</div>
-                  <div className="mt-1 max-w-2xl text-xs leading-5 text-muted-foreground">
-                    Treat captured traffic as durable assets: observe it, replay it, evaluate it,
-                    and expose it back to agents through MCP.
-                  </div>
-                </div>
-                <Badge variant="outline" className="border-cyan-300/20 bg-cyan-300/8 text-cyan-100">
-                  {String(installedCount)}/{String(packages.length)} packages
-                </Badge>
-              </div>
-
-              <div className="mt-4 grid gap-3 sm:grid-cols-2">
-                {WORKFLOWS.map((workflow) => (
-                  <WorkflowTile key={workflow.id} workflow={workflow} />
-                ))}
-              </div>
-            </section>
-
-            <section className="rounded-lg bg-white/[0.025] p-4 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]">
-              <div className="flex items-start justify-between gap-3">
-                <div>
-                  <div className="text-sm font-semibold">Current session</div>
-                  <div className="mt-1 text-xs text-muted-foreground">
-                    {currentSessionId === null ? "MCP smoke command" : currentSessionId}
-                  </div>
-                </div>
-                <Badge variant="outline" className="border-white/10 bg-white/[0.04] text-white/55">
-                  {String(logCount)} logs
-                </Badge>
-              </div>
-
-              <div className="mt-4 rounded-md bg-black/20 p-3 font-mono text-[11px] leading-5 text-white/55 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]">
-                {sessionCommand}
-              </div>
-
-              <div className="mt-3 flex flex-wrap items-center gap-2">
-                <Button size="sm" variant="secondary" onClick={copySessionCommand}>
-                  {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
-                  {copied ? "Copied" : "Copy"}
-                </Button>
-                <Button size="sm" variant="outline" onClick={copyPresetsCommand}>
-                  <Beaker className="size-3.5" />
-                  {copiedPresets ? "Presets copied" : "Runner Presets"}
-                </Button>
-              </div>
-            </section>
-          </div>
-
-          <section className="mt-3">
-            <div className="mb-2 flex items-center justify-between gap-3">
-              <div className="text-sm font-semibold">Lab recipes</div>
-              <div className="hidden items-center gap-1 font-mono text-[11px] text-muted-foreground sm:flex">
-                <Sparkles className="size-3.5" />
-                copy-ready workflows
-              </div>
-            </div>
-            <div className="grid gap-3 md:grid-cols-2">
-              {recipes.map((recipe) => (
-                <RecipeCard
-                  key={recipe.id}
-                  recipe={recipe}
-                  copied={copiedRecipeId === recipe.id}
-                  running={
-                    activeTask !== null &&
-                    activeTask.recipeId === recipe.id &&
-                    (activeTask.status === "queued" || activeTask.status === "running")
-                  }
-                  onCopy={copyRecipeCommand}
-                  onRun={runRecipe}
-                />
-              ))}
-              {response.isLoading &&
-                recipes.length === 0 &&
-                [0, 1].map((index) => (
-                  <div
-                    key={index}
-                    className="h-40 animate-pulse rounded-lg bg-white/[0.025] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]"
-                  />
-                ))}
-            </div>
-          </section>
-
-          <section className="mt-3">
-            <div className="mb-2 flex items-center justify-between gap-3">
-              <div className="text-sm font-semibold">Runner presets</div>
-              <div className="hidden items-center gap-1 font-mono text-[11px] text-muted-foreground sm:flex">
-                <Terminal className="size-3.5" />
-                {presetsCommand}
-              </div>
-            </div>
-            <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
-              {runnerPresets.map((preset) => (
-                <RunnerPresetCard key={preset.id} preset={preset} />
-              ))}
-              {response.isLoading &&
-                runnerPresets.length === 0 &&
-                [0, 1, 2, 3].map((index) => (
-                  <div
-                    key={index}
-                    className="h-32 animate-pulse rounded-lg bg-white/[0.025] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]"
-                  />
-                ))}
-            </div>
-          </section>
-
-          <section className="mt-3">
-            <div className="mb-2 flex items-center justify-between gap-3">
-              <div className="text-sm font-semibold">TonyClaw packages</div>
-              {response.isLoading && (
-                <div className="font-mono text-[11px] text-muted-foreground">checking npm...</div>
-              )}
-            </div>
-            {response.error !== undefined && (
-              <div className="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)]">
-                Package status is temporarily unavailable.
-              </div>
-            )}
-            <div className="grid gap-3 md:grid-cols-3">
-              {packages.map((pkg) => (
-                <PackageStatusCard
-                  key={pkg.id}
-                  pkg={pkg}
-                  activeTask={activeTask}
-                  onStartTask={handleStartTask}
-                />
-              ))}
-              {response.isLoading &&
-                packages.length === 0 &&
-                [0, 1, 2].map((index) => (
-                  <div
-                    key={index}
-                    className="h-36 animate-pulse rounded-lg bg-white/[0.025] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]"
-                  />
-                ))}
-            </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>
-          )}
-          {recentTasks.length > 0 && (
-            <section className="mt-3">
-              <div className="mb-2 flex items-center justify-between gap-3">
-                <div className="text-sm font-semibold">Recent Lab runs</div>
-                <div className="hidden font-mono text-[11px] text-muted-foreground sm:block">
-                  last {String(recentTasks.length)}
-                </div>
-              </div>
-              <div className="grid gap-2 md:grid-cols-2">
-                {recentTasks.map((task) => (
-                  <RecentTaskRow
-                    key={task.id}
-                    task={task}
-                    selected={activeTaskId === task.id}
-                    onSelect={(selectedTask) => {
-                      setActiveTaskId(selectedTask.id);
-                      void activeTaskResponse.mutate({ task: selectedTask }, { revalidate: true });
-                    }}
-                  />
-                ))}
-              </div>
-            </section>
-          )}
-          <TaskConsole task={activeTask} />
-        </div>
-      </DialogContent>
-      <ExecutionConfirmationDialog
-        pending={pendingExecution}
-        busy={confirmationBusy}
-        onOpenChange={(confirmationOpen) => {
-          if (!confirmationOpen && !confirmationBusy) setPendingExecution(null);
-        }}
-        onConfirm={confirmPendingExecution}
-      />
-    </Dialog>
-  );
-}