@tonyclaw/agent-inspector 2.0.0

package/src/lib/useProviders.ts

@@ -0,0 +1,30 @@
+import useSWR, { type SWRResponse } from "swr";
+import { fetchJson } from "./apiClient";
+import { ProviderConfigSchema, type ProviderConfig } from "./providerContract";
+
+async function fetcher(url: string): Promise<ProviderConfig[]> {
+  return fetchJson(
+    url,
+    ProviderConfigSchema.array(),
+    undefined,
+    (response) => `Failed to fetch ${url}: ${response.status}`,
+  );
+}
+
+export function useProviders() {
+  const response: SWRResponse<ProviderConfig[], Error> = useSWR<ProviderConfig[], Error>(
+    "/api/providers",
+    fetcher,
+    {
+      revalidateOnFocus: false,
+      revalidateIfStale: false,
+    },
+  );
+
+  return {
+    providers: response.data ?? [],
+    isLoading: response.isLoading,
+    isError: response.error,
+    mutate: response.mutate,
+  };
+}

package/src/lib/useStripConfig.ts

@@ -0,0 +1,108 @@
+import useSWR, { type SWRResponse, useSWRConfig } from "swr";
+import { fetchJson } from "./apiClient";
+import {
+  DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+  RuntimeConfigSchema,
+  type RuntimeConfig,
+} from "./runtimeConfig";
+
+export const STRIP_CONFIG_SWR_KEY = "/api/config";
+
+async function fetcher(url: string): Promise<RuntimeConfig> {
+  return fetchJson(
+    url,
+    RuntimeConfigSchema,
+    undefined,
+    (response) => `Failed to fetch ${url}: ${response.status}`,
+  );
+}
+
+/**
+ * PATCH the runtime config. Exported separately for testability.
+ */
+export async function setRuntimeConfig(patch: Partial<RuntimeConfig>): Promise<RuntimeConfig> {
+  return fetchJson(
+    STRIP_CONFIG_SWR_KEY,
+    RuntimeConfigSchema,
+    {
+      method: "PATCH",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(patch),
+    },
+    (response) => `PATCH failed with status ${response.status}`,
+  );
+}
+
+export type UseStripConfig = {
+  strip: boolean;
+  slowResponseThresholdSeconds: number;
+  isLoading: boolean;
+  isError: boolean;
+  setStrip: (next: boolean) => Promise<void>;
+  setSlowResponseThresholdSeconds: (next: number) => Promise<void>;
+};
+
+/**
+ * Hook reading the runtime config from /api/config.
+ *
+ * - `strip` is the live value from the server (or the optimistic value mid-PATCH).
+ * - `slowResponseThresholdSeconds` controls the UI's slow-response indicator.
+ * - `setStrip(next)` PATCHes the server with optimistic update; on failure
+ *   it throws and SWR rolls back the optimistic value.
+ */
+export function useStripConfig(): UseStripConfig {
+  const response: SWRResponse<RuntimeConfig, Error> = useSWR<RuntimeConfig, Error>(
+    STRIP_CONFIG_SWR_KEY,
+    fetcher,
+    {
+      revalidateOnFocus: false,
+      revalidateIfStale: false,
+    },
+  );
+  const { mutate: globalMutate } = useSWRConfig();
+
+  const strip = response.data?.stripClaudeCodeBillingHeader ?? false;
+  const slowResponseThresholdSeconds =
+    response.data?.slowResponseThresholdSeconds ?? DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS;
+
+  const optimisticConfig = (patch: Partial<RuntimeConfig>): RuntimeConfig => ({
+    stripClaudeCodeBillingHeader: response.data?.stripClaudeCodeBillingHeader ?? false,
+    hasSeenOnboarding: response.data?.hasSeenOnboarding ?? false,
+    slowResponseThresholdSeconds:
+      response.data?.slowResponseThresholdSeconds ?? DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+    ...patch,
+  });
+
+  const setStrip = async (next: boolean): Promise<void> => {
+    await globalMutate(
+      STRIP_CONFIG_SWR_KEY,
+      setRuntimeConfig({ stripClaudeCodeBillingHeader: next }),
+      {
+        optimisticData: optimisticConfig({ stripClaudeCodeBillingHeader: next }),
+        rollbackOnError: true,
+        revalidate: false,
+      },
+    );
+  };
+
+  const setSlowResponseThresholdSeconds = async (next: number): Promise<void> => {
+    await globalMutate(
+      STRIP_CONFIG_SWR_KEY,
+      setRuntimeConfig({ slowResponseThresholdSeconds: next }),
+      {
+        optimisticData: optimisticConfig({ slowResponseThresholdSeconds: next }),
+        rollbackOnError: true,
+        revalidate: false,
+      },
+    );
+  };
+
+  return {
+    strip,
+    slowResponseThresholdSeconds,
+    isLoading: response.isLoading,
+    isError: response.error !== undefined,
+    setStrip,
+    setSlowResponseThresholdSeconds,
+  };
+}

package/src/lib/utils.ts

@@ -0,0 +1,21 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
+
+export function formatTokens(count: number): string {
+  if (count >= 1_000_000) return (count / 1_000_000).toFixed(1).replace(/\.0$/, "") + "M";
+  return (count / 1000).toFixed(1).replace(/\.0$/, "") + "K";
+}
+
+export type StatusCategory = "success" | "client_error" | "server_error" | "pending";
+
+export function getStatusCategory(status: number | null): StatusCategory {
+  if (status === null) return "pending";
+  if (status >= 200 && status < 300) return "success";
+  if (status >= 400 && status < 500) return "client_error";
+  if (status >= 500) return "server_error";
+  return "pending";
+}

package/src/mcp/loopback.ts

@@ -0,0 +1,76 @@
+/* eslint-disable functional/no-throw-statements */
+/**
+ * HTTP loopback helper for MCP tool handlers.
+ *
+ * Why HTTP loopback (not direct function calls): see
+ * `openspec/changes/add-mcp-server/design.md` decision D2. All MCP tools
+ * delegate to existing `/api/*` endpoints so any future cross-cutting
+ * middleware (auth, rate-limit, audit, metrics) added to `/api` is
+ * automatically inherited by MCP without duplicate plumbing.
+ *
+ * NOTE: TanStack Start / Nitro may expose an in-process route invocation
+ * API (e.g. Nitro's `$fetch` helper) that would let us skip the real HTTP
+ * round-trip while preserving the routing contract. As of this writing
+ * that investigation is open (tasks.md 2.3). If/when adopted, the public
+ * surface of this module — `callApi(path, init?)` returning a `Response`
+ * — should stay identical so callers don't change.
+ */
+
+import { getCurrentPort } from "../lib/serverPort";
+
+const DEFAULT_TIMEOUT_MS = 30_000;
+
+export type CallApiOptions = RequestInit & {
+  /** Override default 30s timeout. */
+  timeoutMs?: number;
+};
+
+export class LoopbackTimeoutError extends Error {
+  constructor(
+    public readonly path: string,
+    public readonly timeoutMs: number,
+  ) {
+    super(`Loopback call to ${path} timed out after ${timeoutMs}ms`);
+    this.name = "LoopbackTimeoutError";
+  }
+}
+
+/**
+ * Make an HTTP request to one of the inspector's own /api/* endpoints
+ * via 127.0.0.1 loopback. The returned Response is a standard Web
+ * Response; callers decide whether to call .json(), .text(), .arrayBuffer().
+ *
+ * `path` MUST start with `/` (e.g. `/api/logs`).
+ */
+export async function callApi(path: string, options: CallApiOptions = {}): Promise<Response> {
+  if (!path.startsWith("/")) {
+    throw new Error(`callApi: path must start with '/', got: ${path}`);
+  }
+  const port = getCurrentPort();
+  const url = `http://127.0.0.1:${port}${path}`;
+
+  const { timeoutMs = DEFAULT_TIMEOUT_MS, signal: userSignal, ...rest } = options;
+
+  const controller = new AbortController();
+  const timeoutHandle = setTimeout(() => controller.abort(), timeoutMs);
+
+  // If caller passed their own signal, chain it.
+  if (userSignal !== undefined && userSignal !== null) {
+    if (userSignal.aborted) {
+      controller.abort();
+    } else {
+      userSignal.addEventListener("abort", () => controller.abort(), { once: true });
+    }
+  }
+
+  try {
+    return await fetch(url, { ...rest, signal: controller.signal });
+  } catch (err) {
+    if (err instanceof Error && err.name === "AbortError") {
+      throw new LoopbackTimeoutError(path, timeoutMs);
+    }
+    throw err;
+  } finally {
+    clearTimeout(timeoutHandle);
+  }
+}

package/src/mcp/previewExtractor.ts

@@ -0,0 +1,166 @@
+/**
+ * Format-parser-driven preview extractor for the MCP `inspector_list_logs`
+ * "thick summary" shape. See `openspec/changes/add-mcp-server/design.md`
+ * decision D5.
+ *
+ * Why we re-parse with the format schemas (not slice `rawRequestBody`):
+ * a 500-char prefix is almost always JSON envelope + system prompt boilerplate
+ * with zero signal about what the user actually asked. The format parsers
+ * give us the first text block of the last user message, which is what an
+ * agent needs to make a "is this the log I care about?" judgment from
+ * `list_logs` alone.
+ *
+ * Null returns are an expected and frequent outcome — they cover:
+ *   - `apiFormat === "unknown"`
+ *   - `rawRequestBody` / `responseText` is null
+ *   - JSON.parse failure
+ *   - schema validation failure
+ *   - no qualifying user / assistant message
+ *   - the relevant content is non-text (e.g., image-only multimodal block)
+ */
+
+import type { CapturedLog } from "../proxy/schemas";
+import {
+  AnthropicRequestSchema,
+  AnthropicResponseSchema,
+} from "../proxy/formats/anthropic/schemas";
+import { OpenAIRequestSchema, OpenAIResponseSchema } from "../proxy/formats/openai/schemas";
+
+/** Preview length cap, per design D5. */
+const PREVIEW_MAX_CHARS = 500;
+
+function truncate(text: string): string {
+  return text.length <= PREVIEW_MAX_CHARS ? text : text.slice(0, PREVIEW_MAX_CHARS);
+}
+
+/**
+ * Safely extract the first text from an Anthropic `Message.content` (string
+ * or array of blocks). Returns `null` for non-text-only or empty content.
+ */
+function firstAnthropicText(
+  content: string | ReadonlyArray<{ type: string; text?: string }>,
+): string | null {
+  if (typeof content === "string") {
+    return content.length > 0 ? content : null;
+  }
+  for (const block of content) {
+    if (block.type === "text" && typeof block.text === "string" && block.text.length > 0) {
+      return block.text;
+    }
+  }
+  return null;
+}
+
+/**
+ * Safely extract the first text from an OpenAI message content (string or
+ * array of `{type:"text"|"image_url",...}`). Returns `null` for non-text /
+ * empty content.
+ */
+function firstOpenAIText(
+  content: string | ReadonlyArray<{ type: string; text?: string }> | null | undefined,
+): string | null {
+  if (content === null || content === undefined) return null;
+  if (typeof content === "string") {
+    return content.length > 0 ? content : null;
+  }
+  for (const part of content) {
+    if (part.type === "text" && typeof part.text === "string" && part.text.length > 0) {
+      return part.text;
+    }
+  }
+  return null;
+}
+
+/**
+ * Extract a 500-char preview of the last `role: "user"` message's first text
+ * block. Returns `null` for unknown format, parse failures, or non-text
+ * content. See module-level docstring for the full null-case list.
+ */
+export function extractLastUserMessagePreview(log: CapturedLog): string | null {
+  if (log.apiFormat === "unknown") return null;
+  if (log.rawRequestBody === null) return null;
+
+  let json: unknown;
+  try {
+    json = JSON.parse(log.rawRequestBody);
+  } catch {
+    return null;
+  }
+
+  if (log.apiFormat === "anthropic") {
+    const parsed = AnthropicRequestSchema.safeParse(json);
+    if (!parsed.success) return null;
+    // Iterate from the end to find the most recent user turn.
+    for (let i = parsed.data.messages.length - 1; i >= 0; i--) {
+      const msg = parsed.data.messages[i];
+      if (msg && msg.role === "user") {
+        const text = firstAnthropicText(msg.content);
+        return text === null ? null : truncate(text);
+      }
+    }
+    return null;
+  }
+
+  if (log.apiFormat === "openai") {
+    const parsed = OpenAIRequestSchema.safeParse(json);
+    if (!parsed.success) return null;
+    for (let i = parsed.data.messages.length - 1; i >= 0; i--) {
+      const msg = parsed.data.messages[i];
+      if (msg && msg.role === "user") {
+        const text = firstOpenAIText(msg.content);
+        return text === null ? null : truncate(text);
+      }
+    }
+    return null;
+  }
+
+  return null;
+}
+
+/**
+ * Extract a 500-char preview of the assistant's response text. Returns
+ * `null` for unknown format, parse failures, missing response, or non-text
+ * content.
+ */
+export function extractResponsePreview(log: CapturedLog): string | null {
+  if (log.apiFormat === "unknown") return null;
+  if (log.responseText === null) return null;
+
+  let json: unknown;
+  try {
+    json = JSON.parse(log.responseText);
+  } catch {
+    return null;
+  }
+
+  if (log.apiFormat === "anthropic") {
+    const parsed = AnthropicResponseSchema.safeParse(json);
+    if (!parsed.success) return null;
+    for (const block of parsed.data.content) {
+      if (block.type === "text" && typeof block.text === "string" && block.text.length > 0) {
+        return truncate(block.text);
+      }
+    }
+    return null;
+  }
+
+  if (log.apiFormat === "openai") {
+    const parsed = OpenAIResponseSchema.safeParse(json);
+    if (!parsed.success) return null;
+    // Pick the first choice that actually carries a text-like content.
+    for (const choice of parsed.data.choices) {
+      const msg = choice.message;
+      if (!msg) continue;
+      const direct = firstOpenAIText(msg.content);
+      if (direct !== null) return truncate(direct);
+      // Some MiniMax / Moonshot-style providers stuff the text into
+      // reasoning_content / thinking / think instead of content. We surface
+      // whichever is the first non-empty one in a stable priority order.
+      const fallback = msg.reasoning_content ?? msg.thinking ?? msg.think;
+      if (typeof fallback === "string" && fallback.length > 0) return truncate(fallback);
+    }
+    return null;
+  }
+
+  return null;
+}