@tonyclaw/agent-inspector 3.0.5 → 3.0.7

package/src/components/ecosystem/AgentLabDialog.tsx

@@ -0,0 +1,381 @@
+import { type JSX, useMemo, useState } from "react";
+import {
+  Activity,
+  Beaker,
+  Check,
+  Copy,
+  FlaskConical,
+  Network,
+  PackageCheck,
+  RefreshCw,
+  Rocket,
+  Sparkles,
+  Terminal,
+} from "lucide-react";
+import useSWR from "swr";
+import {
+  EcosystemPackagesResponseSchema,
+  type EcosystemPackage,
+  type EcosystemPackageState,
+  type EcosystemRunnerPreset,
+} 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, 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;
+};
+
+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)}`,
+  );
+}
+
+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 PackageStatusCard({ pkg }: { pkg: EcosystemPackage }): 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">
+            <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>
+  );
+}
+
+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>
+  );
+}
+
+export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogProps): JSX.Element {
+  const [open, setOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [copiedPresets, setCopiedPresets] = useState(false);
+  const response = useSWR("/api/ecosystem/packages", fetchEcosystemPackages, {
+    revalidateOnFocus: false,
+    revalidateIfStale: false,
+  });
+  const packages = response.data?.packages ?? [];
+  const runnerPresets = response.data?.runnerPresets ?? [];
+  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);
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className={INSPECTOR_ICON_TRIGGER_CLASS}
+          aria-label="TonyClaw Lab"
+          title="TonyClaw Lab"
+        >
+          <FlaskConical className="size-4" />
+          <span className="sr-only">TonyClaw 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">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} />
+              ))}
+              {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>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/groups/GroupsDialog.tsx

@@ -598,7 +598,7 @@ function GroupList({
               )}
             >
               <div className="flex min-w-0 items-center justify-between gap-2">
-                <span className="min-w-0 truncate text-sm font-medium">{group.title}</span>
+                <span className="min-w-0 text-sm font-medium leading-snug">{group.title}</span>
                 <Badge variant="outline" className={statusClassName(group.status)}>
                   {statusLabel(group.status)}
                 </Badge>
@@ -673,7 +673,7 @@ function GroupDetails({
         <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
           <div className="min-w-0 space-y-1">
             <div className="flex min-w-0 flex-wrap items-center gap-2">
-              <h3 className="min-w-0 truncate text-base font-semibold">{group.title}</h3>
+              <h3 className="min-w-0 text-base font-semibold leading-snug">{group.title}</h3>
               <Badge variant="outline" className={statusClassName(group.status)}>
                 {statusLabel(group.status)}
               </Badge>
@@ -1119,7 +1119,7 @@ function MemberRow({
         </div>
       </td>
       <td className="max-w-52 px-3 py-2">
-        <span className="block truncate">{providerModel(member)}</span>
+        <span className="block whitespace-normal leading-snug">{providerModel(member)}</span>
       </td>
       <td className="px-3 py-2">
         <Badge variant="outline" className={statusClassName(member.status)}>

package/src/components/providers/ImportWizardDialog.tsx

@@ -295,7 +295,7 @@ export function ImportWizardDialog({
                       <span className="text-[10px] text-muted-foreground">Already added</span>
                     )}
                   </div>
-                  <div className="text-xs text-muted-foreground mt-1 truncate">
+                  <div className="mt-1 text-xs leading-snug text-muted-foreground">
                     {p.models.slice(0, 4).join(", ")}
                     {p.models.length > 4 ? ` +${p.models.length - 4} more` : ""}
                   </div>

package/src/components/providers/ProviderCard.tsx

@@ -730,13 +730,13 @@ export function ProviderCard({
     <div
       className={`flex flex-col gap-3 rounded-[8px] border border-border bg-card p-4 shadow-sm transition-all duration-500 ${isHighlighted === true ? "ring-2 ring-primary shadow-md" : ""}`}
     >
-      <div className="flex items-start justify-between gap-2">
+      <div className="flex flex-wrap items-start justify-between gap-2">
         <div className="min-w-0 space-y-1">
-          <div className="flex min-w-0 items-center gap-2">
-            <span className="truncate font-medium">{provider.name}</span>
+          <div className="flex min-w-0 flex-wrap items-center gap-2">
+            <span className="font-medium leading-snug">{provider.name}</span>
             {providerSourceBadge}
           </div>
-          <div className="truncate text-xs text-muted-foreground">
+          <div className="text-xs leading-snug text-muted-foreground">
             {compactModelLabel(provider)}
           </div>
         </div>

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

@@ -573,7 +573,7 @@ function SideSummary({
           #{displayNumber}
         </span>
         {log.model !== null && (
-          <span className="font-mono text-muted-foreground truncate">{log.model}</span>
+          <span className="font-mono leading-snug text-muted-foreground">{log.model}</span>
         )}
       </div>
       <div className="flex items-center gap-3 text-muted-foreground font-mono">

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

@@ -237,11 +237,11 @@ export function ConversationHeader({
 
           {showClientIdentity && clientDisplayLabel !== null && clientDisplayLabel !== "" && (
             <span
-              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"
+              className="bg-white/[0.045] inline-flex min-h-6 shrink-0 flex-wrap items-center gap-1 rounded-md px-1.5 py-0.5 text-xs text-muted-foreground"
               title={clientTooltip ?? clientDisplayLabel}
             >
               <ClientLogo client={clientApp} className="size-4 shrink-0" />
-              <span className="truncate font-mono tabular-nums">{clientDisplayLabel}</span>
+              <span className="font-mono leading-snug tabular-nums">{clientDisplayLabel}</span>
             </span>
           )}
 

package/src/lib/ecosystemContract.ts

@@ -0,0 +1,47 @@
+import { z } from "zod";
+
+export const EcosystemPackageStateSchema = z.enum([
+  "installed",
+  "update-available",
+  "available",
+  "planned",
+  "unknown",
+]);
+
+export const EcosystemPackageSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  npmName: z.string(),
+  capability: z.string(),
+  description: z.string(),
+  workflow: z.string(),
+  installCommand: z.string(),
+  state: EcosystemPackageStateSchema,
+  installedVersion: z.string().nullable(),
+  latestVersion: z.string().nullable(),
+  primary: z.boolean(),
+});
+
+export const EcosystemRunnerPresetSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  validatedVersion: z.string(),
+  binary: z.string(),
+  modelFlag: z.string(),
+  variantFlag: z.string().nullable(),
+  tools: z.array(z.string()),
+  logDir: z.string(),
+  skillsDir: z.string(),
+  agentsDir: z.string(),
+});
+
+export const EcosystemPackagesResponseSchema = z.object({
+  checkedAt: z.string(),
+  packages: z.array(EcosystemPackageSchema),
+  runnerPresets: z.array(EcosystemRunnerPresetSchema),
+});
+
+export type EcosystemPackageState = z.infer<typeof EcosystemPackageStateSchema>;
+export type EcosystemPackage = z.infer<typeof EcosystemPackageSchema>;
+export type EcosystemRunnerPreset = z.infer<typeof EcosystemRunnerPresetSchema>;
+export type EcosystemPackagesResponse = z.infer<typeof EcosystemPackagesResponseSchema>;