@tonyclaw/agent-inspector 2.0.15 → 2.0.17

package/src/cli/templates/skill-onboard.ts

@@ -76,7 +76,19 @@ Default proxy port: \`${port}\` (override with \`PORT=<n> agent-inspector\` or \
 
 **EXPLAIN:** "Before we do anything, let me see what's already set up. If some of the steps are already done, we can skip them."
 
-**DO:** Probe the three pieces of state this skill touches. Use targeted checks — do **not** read large JSON files into the conversation.
+**DO:** First check whether the generated onboarding files match the installed npm package. If any
+entry is \`outdated\` or \`missing\`, tell the user to run \`agent-inspector onboard --force\` before
+continuing so they are not guided by stale instructions.
+
+\`\`\`bash
+agent-inspector onboard --status
+\`\`\`
+
+\`\`\`powershell
+agent-inspector onboard --status
+\`\`\`
+
+**DO:** Then probe the three pieces of state this skill touches. Use targeted checks — do **not** read large JSON files into the conversation.
 
 \`\`\`bash
 # 1. Is the proxy already up?
@@ -226,11 +238,13 @@ if ($null) { Write-Host 'claude-code: present' } else { Write-Host 'claude-code:
 \`\`\`
 ## Welcome to Agent Inspector!
 
-Agent Inspector is an agent observability and knowledge-capture platform for AI coding tools. The \`agent-inspector\` CLI runs a transparent local proxy + Web UI, so you can see every model request and response: system prompts, tool definitions, message history, SSE streaming chunks, and token counts captured live in a browser tab.
+Agent Inspector is an agent observability and knowledge-capture platform for AI coding tools. The \`agent-inspector\` CLI runs a transparent local proxy + Web UI, so you can see model requests and responses, system prompts, tool definitions, message history, timing, and token counts captured live in a browser tab.
+
+Agent Inspector starts in **Simple mode** by default. Simple mode is the right habit for everyday use: it keeps requests, responses, tools, timing, and token usage while avoiding heavier raw headers, raw response, and detailed SSE chunk artifacts. Use **Full mode** only when the user is debugging provider headers, raw response payloads, or SSE stream details.
 
 **What we'll do in the next ~10 minutes:**
 1. Add your first LLM provider (Anthropic or OpenAI key)
-2. Start the proxy
+2. Start the proxy in Simple mode
 3. Wire your AI tool to use it
 4. Capture a first request end-to-end
 5. Tour the key UI affordances
@@ -346,7 +360,7 @@ $json | Set-Content -Path $file -Encoding UTF8
 
 ## Phase 3: Start proxy
 
-**EXPLAIN:** "Time to start the proxy. It binds to port ${port} by default, reuses an already-running healthy agent-inspector, and prints the URL. Use \`--force-restart\` only when you intentionally want to replace the existing process."
+**EXPLAIN:** "Time to start the proxy. It binds to port ${port} by default, starts in Simple mode for lower overhead, reuses an already-running healthy agent-inspector, and prints the URL. Use \`--force-restart\` only when you intentionally want to replace the existing process. If the user is diagnosing raw headers, raw response, or SSE chunks, restart with \`agent-inspector --mode full\`."
 
 **DO:** Skip this phase entirely if the Phase 0 health check already reported \`PROXY: up\` and the user opted to skip done phases.
 
@@ -354,7 +368,7 @@ $json | Set-Content -Path $file -Encoding UTF8
 
 \`\`\`bash
 # Unix / macOS / WSL
-agent-inspector --background --no-open > /tmp/agent-inspector.log 2>&1
+agent-inspector --mode simple --background --no-open > /tmp/agent-inspector.log 2>&1
 \`\`\`
 
 \`\`\`powershell
@@ -367,14 +381,14 @@ $err = Join-Path $env:TEMP 'agent-inspector.err.log'
 $found = Get-Command agent-inspector -ErrorAction SilentlyContinue
 if ($found) {
   $shim = $found.Source
-  $args = '--background','--no-open'
+  $args = '--mode','simple','--background','--no-open'
 } elseif (Test-Path (Join-Path $env:APPDATA 'npm/agent-inspector.cmd')) {
   $shim = Join-Path $env:APPDATA 'npm/agent-inspector.cmd'
-  $args = '--background','--no-open'
+  $args = '--mode','simple','--background','--no-open'
 } else {
   # bin not on PATH and not at the default npm prefix — let cmd resolve it
   $shim = 'cmd.exe'
-  $args = '/c','agent-inspector','--background','--no-open'
+  $args = '/c','agent-inspector','--mode','simple','--background','--no-open'
 }
 Start-Process -FilePath $shim -ArgumentList $args -RedirectStandardOutput $log -RedirectStandardError $err -WindowStyle Hidden
 \`\`\`
@@ -394,6 +408,12 @@ done
 curl -sS "http://localhost:${port}/api/health"
 \`\`\`
 
+**DO:** Read \`/api/config\` and tell the user which capture mode is active. If it is not \`simple\` during onboarding, explain that an existing process is already running and offer to restart with \`agent-inspector --mode simple --force-restart\`.
+
+\`\`\`bash
+curl -sS "http://localhost:${port}/api/config" | grep -o '"captureMode":"[^"]*"'
+\`\`\`
+
 > **PAUSE** — if the health check fails, show the user the log file (\`/tmp/agent-inspector.log\` or \`%TEMP%\\agent-inspector.log\`) and diagnose. Common issues: another process on the port, firewall, missing providers. Use \`AskUserQuestion\` with header \`Proxy up?\` and options \`["Yes, proxy is up", "No, I see an error in the log"]\`. Wait for the answer.
 
 ---
@@ -538,6 +558,8 @@ done
   \`\`\`
 
 - **Re-run onboard**: \`agent-inspector onboard --force\` refreshes this skill.
+- **Check onboard files**: \`agent-inspector onboard --status\` shows whether generated skills are
+  current, outdated, missing, newer, or custom.
 - **Full docs**: see the project README (linked from the Web UI footer).
 
 > **PAUSE** — use \`AskUserQuestion\` with header \`All set?\` and options \`["All set, I'm done", "Wait, I want to revisit a phase"]\`. Wait for the answer.

package/src/components/OnboardingBanner.tsx

@@ -7,10 +7,12 @@ import { useOnboarding } from "../lib/useOnboarding";
  * dismissal through the server runtime config.
  */
 export function OnboardingBanner(): JSX.Element | null {
-  const { hasSeenOnboarding, isLoading, markSeen } = useOnboarding();
+  const { hasSeenOnboarding, captureMode, isLoading, markSeen } = useOnboarding();
 
   if (isLoading || hasSeenOnboarding) return null;
 
+  const isFullMode = captureMode === "full";
+
   return (
     <div
       role="note"
@@ -19,17 +21,43 @@ export function OnboardingBanner(): JSX.Element | null {
     >
       <div className="min-w-0 flex-1">
         <div className="mb-1 font-medium text-amber-600 dark:text-amber-400">
-          Agent Inspector is ready
+          {isFullMode
+            ? "Agent Inspector is ready in Full mode"
+            : "Agent Inspector is ready in Simple mode"}
         </div>
         <ul className="space-y-0.5 text-xs leading-relaxed text-muted-foreground">
+          {isFullMode ? (
+            <>
+              <li>
+                <strong>Full mode</strong>: raw headers, raw response, and SSE chunks are captured
+                for diagnostics.
+              </li>
+              <li>
+                <strong>Daily work</strong>: restart with <code>agent-inspector --mode simple</code>{" "}
+                to reduce capture overhead.
+              </li>
+            </>
+          ) : (
+            <>
+              <li>
+                <strong>Simple mode</strong>: lightweight capture for requests, responses, tools,
+                timing, and token usage.
+              </li>
+              <li>
+                <strong>Need diagnostics?</strong> Restart with{" "}
+                <code>agent-inspector --mode full</code> for raw headers, raw response, and SSE
+                chunks.
+              </li>
+            </>
+          )}
           <li>
-            <strong>Trace</strong>: requests, responses, streaming chunks, tools, and timing.
-          </li>
-          <li>
-            <strong>Replay</strong>: resend captured requests and compare provider behavior.
+            <strong>Replay and Memory</strong>: available in both modes for provider checks and
+            reviewable knowledge candidates.
           </li>
           <li>
-            <strong>Memory</strong>: create reviewable candidates before promotion to OpenClaw.
+            <strong>Agent setup</strong>: run <code>agent-inspector onboard --status</code>, then
+            use <code>/agent-inspector:onboard</code> in Claude Code or ask Codex to use{" "}
+            <code>agent-inspector-onboard</code>.
           </li>
         </ul>
       </div>

package/src/components/providers/SettingsDialog.tsx

@@ -75,7 +75,7 @@ export function SettingsDialog(): JSX.Element {
             <TabsTrigger value="onboarding">Onboarding</TabsTrigger>
           </TabsList>
 
-          <div className="mt-4 overflow-y-auto flex-1 pr-3">
+          <div className="mt-4 flex-1 overflow-x-hidden overflow-y-auto pr-3">
             <TabsContent value="providers">
               <ProvidersPanel
                 externalProviders={providers}
@@ -119,7 +119,7 @@ function CopyableSetupValue({
 }): JSX.Element {
   const copied = copiedId === id;
   return (
-    <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
+    <div className="min-w-0 rounded-md border border-border bg-muted/20 px-3 py-2">
       <div className="mb-1 text-xs font-medium text-muted-foreground">{label}</div>
       <div className="flex min-w-0 items-center gap-2">
         <code className="min-w-0 flex-1 truncate font-mono text-xs text-foreground">{value}</code>
@@ -146,10 +146,28 @@ function OnboardingSettingsTab(): JSX.Element {
   }, []);
   const values = useMemo(
     () => [
-      { id: "skill", label: "Codex skill", value: "agent-inspector onboard --force" },
+      { id: "status", label: "Check onboarding", value: "agent-inspector onboard --status" },
+      {
+        id: "status-json",
+        label: "Check onboarding JSON",
+        value: "agent-inspector onboard --status --json",
+      },
+      { id: "refresh", label: "Refresh generated files", value: "agent-inspector onboard --force" },
+      {
+        id: "uninstall",
+        label: "Remove matching generated files",
+        value: "agent-inspector onboard --uninstall",
+      },
+      { id: "claude", label: "Claude Code command", value: "/agent-inspector:onboard" },
+      {
+        id: "codex",
+        label: "Codex prompt",
+        value: "Use the agent-inspector-onboard skill",
+      },
       { id: "mcp", label: "MCP URL", value: `${origin}/api/mcp` },
       { id: "proxy", label: "Proxy URL", value: `${origin}/proxy` },
       { id: "anthropic", label: "Anthropic base", value: `ANTHROPIC_BASE_URL=${origin}/proxy` },
+      { id: "openai", label: "OpenAI base", value: `OPENAI_BASE_URL=${origin}/proxy` },
     ],
     [origin],
   );
@@ -162,7 +180,7 @@ function OnboardingSettingsTab(): JSX.Element {
   }, []);
 
   return (
-    <div className="space-y-4">
+    <div className="min-w-0 space-y-4">
       <div className="flex items-center gap-2">
         <Terminal className="size-4 text-muted-foreground" />
         <h3 className="text-sm font-semibold">Agent onboarding</h3>

package/src/lib/useOnboarding.ts

@@ -1,14 +1,18 @@
 import useSWR, { type SWRResponse, useSWRConfig } from "swr";
 import { fetchJson } from "./apiClient";
 import {
+  DEFAULT_CAPTURE_MODE,
   DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
   DEFAULT_TIME_DISPLAY_FORMAT,
   RuntimeConfigSchema,
+  type CaptureMode,
   type RuntimeConfig,
 } from "./runtimeConfig";
 
 export const ONBOARDING_SWR_KEY = "/api/config";
 
+type RuntimeConfigPatch = Partial<Omit<RuntimeConfig, "captureMode">>;
+
 async function fetcher(url: string): Promise<RuntimeConfig> {
   return fetchJson(
     url,
@@ -18,7 +22,7 @@ async function fetcher(url: string): Promise<RuntimeConfig> {
   );
 }
 
-async function patchRuntimeConfig(patch: Partial<RuntimeConfig>): Promise<RuntimeConfig> {
+async function patchRuntimeConfig(patch: RuntimeConfigPatch): Promise<RuntimeConfig> {
   return fetchJson(
     ONBOARDING_SWR_KEY,
     RuntimeConfigSchema,
@@ -33,6 +37,7 @@ async function patchRuntimeConfig(patch: Partial<RuntimeConfig>): Promise<Runtim
 
 export type UseOnboarding = {
   hasSeenOnboarding: boolean;
+  captureMode: CaptureMode;
   isLoading: boolean;
   markSeen: () => Promise<void>;
 };
@@ -59,6 +64,7 @@ export function useOnboarding(): UseOnboarding {
   const { mutate: globalMutate } = useSWRConfig();
 
   const hasSeenOnboarding = response.data?.hasSeenOnboarding ?? false;
+  const captureMode = response.data?.captureMode ?? DEFAULT_CAPTURE_MODE;
 
   const markSeen = async (): Promise<void> => {
     await globalMutate(ONBOARDING_SWR_KEY, patchRuntimeConfig({ hasSeenOnboarding: true }), {
@@ -68,6 +74,7 @@ export function useOnboarding(): UseOnboarding {
         slowResponseThresholdSeconds:
           response.data?.slowResponseThresholdSeconds ?? DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
         timeDisplayFormat: response.data?.timeDisplayFormat ?? DEFAULT_TIME_DISPLAY_FORMAT,
+        captureMode,
       },
       rollbackOnError: true,
       revalidate: false,
@@ -76,6 +83,7 @@ export function useOnboarding(): UseOnboarding {
 
   return {
     hasSeenOnboarding,
+    captureMode,
     isLoading: response.isLoading,
     markSeen,
   };

package/.output/public/assets/_sessionId-9ICCw6YA.js

@@ -1 +0,0 @@
-import{R as s,j as e}from"./main-Biir9ZGe.js";import{P as i}from"./ProxyViewerContainer-CofGRJoO.js";function t(){const{sessionId:o}=s.useParams();return e.jsx(i,{initialSessionId:o},o)}export{t as component};

package/.output/public/assets/index-DVkMYH8H.js

@@ -1 +0,0 @@
-import{P as o}from"./ProxyViewerContainer-CofGRJoO.js";import"./main-Biir9ZGe.js";const r=o;export{r as component};

package/scripts/setup-codex-skill.mjs

@@ -1,38 +0,0 @@
-import { existsSync } from "node:fs";
-import { homedir } from "node:os";
-import { dirname, join } from "node:path";
-import { spawnSync } from "node:child_process";
-import { fileURLToPath } from "node:url";
-
-const scriptDir = dirname(fileURLToPath(import.meta.url));
-const packageRoot = dirname(scriptDir);
-const cliEntry = join(packageRoot, ".output", "cli.js");
-const codexHome = process.env["CODEX_HOME"] ?? join(homedir(), ".codex");
-
-function shouldSkip() {
-  return (
-    process.env["AGENT_INSPECTOR_SKIP_CODEX_SKILL"] === "1" ||
-    !existsSync(cliEntry) ||
-    (!existsSync(codexHome) && process.env["AGENT_INSPECTOR_INSTALL_CODEX_SKILL"] !== "1")
-  );
-}
-
-function main() {
-  if (shouldSkip()) return;
-
-  const result = spawnSync(process.execPath, [cliEntry, "onboard", "--codex-only"], {
-    stdio: "ignore",
-    windowsHide: true,
-  });
-
-  if (result.status !== 0) {
-    console.warn("Skipping Codex onboard skill installation.");
-  }
-}
-
-try {
-  main();
-} catch (error) {
-  const message = error instanceof Error ? error.message : String(error);
-  console.warn(`Skipping Codex onboard skill installation: ${message}`);
-}