@tonyclaw/agent-inspector 3.0.5 → 3.0.6

package/src/components/ecosystem/AgentLabDialog.tsx

@@ -0,0 +1,379 @@
+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 items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="flex min-w-0 items-center gap-2">
+            <PackageCheck className="size-4 shrink-0 text-white/55" />
+            <div className="truncate text-sm font-semibold">{pkg.name}</div>
+          </div>
+          <div className="mt-1 truncate font-mono text-[11px] 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="truncate 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 items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="flex min-w-0 items-center gap-2">
+            <Rocket className="size-4 shrink-0 text-cyan-200/75" />
+            <div className="truncate text-sm font-semibold">{preset.name}</div>
+          </div>
+          <div className="mt-1 font-mono text-[11px] 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/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>;

package/src/routes/api/ecosystem.packages.ts

@@ -0,0 +1,263 @@
+import { execFile } from "node:child_process";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { createFileRoute } from "@tanstack/react-router";
+import packageJson from "../../../package.json";
+import type {
+  EcosystemPackage,
+  EcosystemPackageState,
+  EcosystemRunnerPreset,
+} from "../../lib/ecosystemContract";
+
+type PackageDefinition = {
+  id: string;
+  name: string;
+  npmName: string;
+  capability: string;
+  description: string;
+  workflow: string;
+  primary: boolean;
+};
+
+type NpmResult = {
+  ok: boolean;
+  stdout: string;
+};
+
+type PackageVersionResult = {
+  installedVersion: string | null;
+  latestVersion: string | null;
+  state: EcosystemPackageState;
+};
+
+const ECOSYSTEM_PACKAGES: PackageDefinition[] = [
+  {
+    id: "inspector",
+    name: "Agent Inspector",
+    npmName: "@tonyclaw/agent-inspector",
+    capability: "Observe",
+    description: "Captures proxy traffic, sessions, turns, tools, providers, and raw bodies.",
+    workflow: "Keep every agent run visible and reloadable.",
+    primary: true,
+  },
+  {
+    id: "mcp",
+    name: "Inspector MCP",
+    npmName: "@tonyclaw/agent-inspector-mcp",
+    capability: "Connect",
+    description: "Exposes sessions, logs, providers, runs, and evidence to MCP clients.",
+    workflow: "Let Codex, OpenCode, MiMo Code, and other tools query Inspector as memory.",
+    primary: true,
+  },
+  {
+    id: "eval-harness",
+    name: "Eval Harness",
+    npmName: "@tonyclaw/eval-harness",
+    capability: "Evaluate",
+    description:
+      "Runs MCP-aware agent evaluations, runner presets, regressions, and model bakeoffs.",
+    workflow: "Promote Inspector evidence into repeatable evaluation batches.",
+    primary: false,
+  },
+];
+
+const RUNNER_PRESETS: EcosystemRunnerPreset[] = [
+  {
+    id: "opencode",
+    name: "OpenCode",
+    validatedVersion: "1.17.11",
+    binary: "opencode",
+    modelFlag: "--model",
+    variantFlag: "--variant",
+    tools: ["opencode", "node"],
+    logDir: "opencode",
+    skillsDir: ".opencode/skills",
+    agentsDir: ".opencode/agents",
+  },
+  {
+    id: "mimo",
+    name: "MiMo Code",
+    validatedVersion: "0.1.4",
+    binary: "mimo",
+    modelFlag: "--model",
+    variantFlag: "--agent",
+    tools: ["mimo", "node"],
+    logDir: "mimocode",
+    skillsDir: ".mimocode/skills",
+    agentsDir: ".mimocode/agents",
+  },
+  {
+    id: "codex",
+    name: "Codex CLI",
+    validatedVersion: "0.142.5",
+    binary: "codex",
+    modelFlag: "--model",
+    variantFlag: null,
+    tools: ["codex"],
+    logDir: "codex",
+    skillsDir: ".codex/skills",
+    agentsDir: ".codex/agents",
+  },
+  {
+    id: "claude",
+    name: "Claude Code",
+    validatedVersion: "2.1.195",
+    binary: "claude",
+    modelFlag: "--model",
+    variantFlag: null,
+    tools: ["claude"],
+    logDir: "claude",
+    skillsDir: ".claude/skills",
+    agentsDir: ".claude/agents",
+  },
+];
+
+const NPM_TIMEOUT_MS = 4000;
+
+function npmCommand(): string {
+  return process.platform === "win32" ? "npm.cmd" : "npm";
+}
+
+function runNpm(args: readonly string[]): Promise<NpmResult> {
+  return new Promise((resolve) => {
+    try {
+      execFile(
+        npmCommand(),
+        [...args],
+        { timeout: NPM_TIMEOUT_MS, windowsHide: true },
+        (error, stdout) => {
+          resolve({
+            ok: error === null,
+            stdout: String(stdout).trim(),
+          });
+        },
+      );
+    } catch {
+      resolve({ ok: false, stdout: "" });
+    }
+  });
+}
+
+async function readGlobalNpmRoot(): Promise<string | null> {
+  const result = await runNpm(["root", "-g"]);
+  if (!result.ok || result.stdout.length === 0) return null;
+  return result.stdout;
+}
+
+function readGlobalNpmRootFallback(): string | null {
+  switch (process.platform) {
+    case "win32": {
+      const appData = process.env["APPDATA"];
+      if (appData === undefined || appData.length === 0) return null;
+      return join(appData, "npm", "node_modules");
+    }
+    case "darwin":
+    case "linux":
+    case "aix":
+    case "freebsd":
+    case "openbsd":
+    case "sunos": {
+      const prefix = process.env["PREFIX"];
+      if (prefix !== undefined && prefix.length > 0) return join(prefix, "lib", "node_modules");
+      return "/usr/local/lib/node_modules";
+    }
+    case "android":
+    case "cygwin":
+    case "haiku":
+    case "netbsd":
+      return null;
+  }
+
+  return null;
+}
+
+function packageJsonPath(globalRoot: string, npmName: string): string {
+  const parts = npmName.split("/");
+  return join(globalRoot, ...parts, "package.json");
+}
+
+function readJsonStringField(raw: unknown, field: string): string | null {
+  if (typeof raw !== "object" || raw === null) return null;
+  const descriptor = Object.getOwnPropertyDescriptor(raw, field);
+  if (descriptor === undefined) return null;
+  return typeof descriptor.value === "string" ? descriptor.value : null;
+}
+
+async function readInstalledVersion(
+  globalRoot: string | null,
+  npmName: string,
+): Promise<string | null> {
+  if (npmName === packageJson.name) return packageJson.version;
+  if (globalRoot === null) return null;
+
+  try {
+    const raw = await readFile(packageJsonPath(globalRoot, npmName), "utf8");
+    return readJsonStringField(JSON.parse(raw), "version");
+  } catch {
+    return null;
+  }
+}
+
+async function readLatestVersion(npmName: string): Promise<string | null> {
+  const result = await runNpm(["view", npmName, "version", "--json"]);
+  if (!result.ok || result.stdout.length === 0) return null;
+
+  try {
+    const parsed: unknown = JSON.parse(result.stdout);
+    return typeof parsed === "string" && parsed.length > 0 ? parsed : null;
+  } catch {
+    return result.stdout.length > 0 ? result.stdout : null;
+  }
+}
+
+function packageState(
+  installedVersion: string | null,
+  latestVersion: string | null,
+): EcosystemPackageState {
+  if (installedVersion !== null && latestVersion !== null && installedVersion !== latestVersion) {
+    return "update-available";
+  }
+  if (installedVersion !== null) return "installed";
+  if (latestVersion !== null) return "available";
+  return "planned";
+}
+
+async function describePackage(
+  definition: PackageDefinition,
+  globalRoot: string | null,
+): Promise<EcosystemPackage> {
+  const [installedVersion, latestVersion] = await Promise.all([
+    readInstalledVersion(globalRoot, definition.npmName),
+    readLatestVersion(definition.npmName),
+  ]);
+  const state = packageState(installedVersion, latestVersion);
+
+  return {
+    ...definition,
+    installCommand: `npm install -g ${definition.npmName}`,
+    installedVersion,
+    latestVersion,
+    state,
+  };
+}
+
+async function listEcosystemPackages(): Promise<EcosystemPackage[]> {
+  const globalRoot = (await readGlobalNpmRoot()) ?? readGlobalNpmRootFallback();
+  return Promise.all(
+    ECOSYSTEM_PACKAGES.map((definition) => describePackage(definition, globalRoot)),
+  );
+}
+
+export const Route = createFileRoute("/api/ecosystem/packages")({
+  server: {
+    handlers: {
+      GET: async () => {
+        return Response.json({
+          checkedAt: new Date().toISOString(),
+          packages: await listEcosystemPackages(),
+          runnerPresets: RUNNER_PRESETS,
+        });
+      },
+    },
+  },
+});