@tonyclaw/agent-inspector 3.0.29 → 3.0.31

package/src/components/pi-agent/piAgentChatLogic.ts

@@ -0,0 +1,263 @@
+import { safeGetOwnProperty } from "../../lib/objectUtils";
+
+export type PiAgentChatRole = "user" | "assistant";
+
+export type PiAgentHistoryMessage = {
+  role: PiAgentChatRole;
+  content: string;
+};
+
+export type PiAgentEvidenceView = {
+  source: string;
+  id: string;
+  logId: number | null;
+  sessionId: string | null;
+  timestamp: string | null;
+  model: string | null;
+  providerName: string | null;
+  path: string | null;
+  status: string | number | null;
+  elapsedMs: number | null;
+  inputTokens: number | null;
+  outputTokens: number | null;
+  totalTokens: number | null;
+  score: number | null;
+  matchedFields: string[];
+  excerpt: string;
+};
+
+export type PiAgentMetricView = {
+  key: string;
+  label: string;
+  value: string;
+};
+
+export type PiAgentResponseView = {
+  answer: string;
+  providerId: string;
+  providerName: string;
+  model: string;
+  protocol: string;
+  logCount: number;
+  evidence: PiAgentEvidenceView[];
+  summaryMetrics: PiAgentMetricView[];
+  queryMetrics: PiAgentMetricView[];
+};
+
+export type PiAgentConversationMessage = PiAgentHistoryMessage & {
+  id: string;
+  response: PiAgentResponseView | null;
+};
+
+export type PiAgentConversationState = {
+  messages: PiAgentConversationMessage[];
+  question: string;
+  error: string | null;
+};
+
+export type PiAgentStarter = {
+  id: "reliability" | "performance" | "tokens" | "providers" | "tools";
+  label: string;
+  question: string;
+};
+
+export const PI_AGENT_STARTERS: readonly PiAgentStarter[] = [
+  {
+    id: "reliability",
+    label: "Reliability",
+    question: "Which requests failed, stalled, or look most likely to hang, and why?",
+  },
+  {
+    id: "performance",
+    label: "Performance",
+    question: "Summarize latency and identify the slowest requests with supporting evidence.",
+  },
+  {
+    id: "tokens",
+    label: "Token usage",
+    question: "Where are tokens being spent, and which requests have unusually high usage?",
+  },
+  {
+    id: "providers",
+    label: "Providers",
+    question: "Compare Provider and model reliability, latency, and token usage in this scope.",
+  },
+  {
+    id: "tools",
+    label: "Tool activity",
+    question: "Which tools were used most, and where did tool calls fail or produce warnings?",
+  },
+];
+
+const MAX_HISTORY_MESSAGES = 10;
+const MAX_HISTORY_CONTENT_CHARS = 4_000;
+const MAX_METRICS = 12;
+
+export function createEmptyPiAgentConversation(): PiAgentConversationState {
+  return { messages: [], question: "", error: null };
+}
+
+export function buildPiAgentHistory(
+  messages: readonly PiAgentConversationMessage[],
+): PiAgentHistoryMessage[] {
+  return messages
+    .filter((message) => message.content.trim().length > 0)
+    .slice(-MAX_HISTORY_MESSAGES)
+    .map((message) => ({
+      role: message.role,
+      content: message.content.trim().slice(0, MAX_HISTORY_CONTENT_CHARS),
+    }));
+}
+
+function readString(value: unknown, ...keys: string[]): string | null {
+  for (const key of keys) {
+    const candidate = safeGetOwnProperty(value, key);
+    if (typeof candidate === "string" && candidate.trim().length > 0) return candidate;
+  }
+  return null;
+}
+
+function readNumber(value: unknown, ...keys: string[]): number | null {
+  for (const key of keys) {
+    const candidate = safeGetOwnProperty(value, key);
+    if (typeof candidate === "number" && Number.isFinite(candidate)) return candidate;
+  }
+  return null;
+}
+
+function readStringArray(value: unknown, key: string): string[] {
+  const candidate = safeGetOwnProperty(value, key);
+  if (!Array.isArray(candidate)) return [];
+  return candidate.filter((item): item is string => typeof item === "string").slice(0, 8);
+}
+
+function evidenceView(value: unknown): PiAgentEvidenceView | null {
+  const source = readString(value, "source") ?? "log";
+  const id = readString(value, "id") ?? "";
+  const logId = readNumber(value, "logId", "id");
+  if (id === "" && logId === null) return null;
+  if (logId !== null && (!Number.isInteger(logId) || logId < 0)) return null;
+  const inputTokens = readNumber(value, "inputTokens");
+  const outputTokens = readNumber(value, "outputTokens");
+  const explicitTotal = readNumber(value, "totalTokens", "tokenCount");
+  const statusNumber = readNumber(value, "responseStatus", "status");
+  const statusString = readString(value, "responseStatus", "status");
+
+  return {
+    source,
+    id: id !== "" ? id : String(logId),
+    logId,
+    sessionId: readString(value, "sessionId"),
+    timestamp: readString(value, "timestamp"),
+    model: readString(value, "model"),
+    providerName: readString(value, "providerName", "provider"),
+    path: readString(value, "path"),
+    status: statusNumber ?? statusString,
+    elapsedMs: readNumber(value, "elapsedMs", "latencyMs"),
+    inputTokens,
+    outputTokens,
+    totalTokens:
+      explicitTotal ??
+      (inputTokens === null && outputTokens === null
+        ? null
+        : (inputTokens ?? 0) + (outputTokens ?? 0)),
+    score: readNumber(value, "score", "relevanceScore"),
+    matchedFields: readStringArray(value, "matchedFields"),
+    excerpt: readString(value, "excerpt", "snippet") ?? "No excerpt available.",
+  };
+}
+
+function humanizeMetricKey(key: string): string {
+  const spaced = key
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .replace(/[_-]+/g, " ")
+    .trim();
+  return spaced.length === 0 ? "Metric" : `${spaced[0]?.toUpperCase() ?? ""}${spaced.slice(1)}`;
+}
+
+function metricValue(value: unknown): string | null {
+  if (typeof value === "number" && Number.isFinite(value)) return value.toLocaleString();
+  if (typeof value === "string" && value.trim().length > 0) return value;
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (Array.isArray(value)) {
+    const items = value
+      .filter(
+        (item): item is string | number =>
+          typeof item === "string" || (typeof item === "number" && Number.isFinite(item)),
+      )
+      .slice(0, 6);
+    return items.length > 0 ? items.join(", ") : null;
+  }
+  return null;
+}
+
+function objectMetricEntries(value: object): [string, unknown][] {
+  return Object.getOwnPropertyNames(value).map((key) => [key, safeGetOwnProperty(value, key)]);
+}
+
+export function metricViews(value: unknown): PiAgentMetricView[] {
+  if (value === null || typeof value !== "object" || Array.isArray(value)) return [];
+  const entries: PiAgentMetricView[] = [];
+
+  for (const [key, rawValue] of objectMetricEntries(value)) {
+    const directValue = metricValue(rawValue);
+    if (directValue !== null) {
+      entries.push({ key, label: humanizeMetricKey(key), value: directValue });
+      if (entries.length >= MAX_METRICS) break;
+      continue;
+    }
+    if (rawValue === null || typeof rawValue !== "object" || Array.isArray(rawValue)) continue;
+    for (const [nestedKey, nestedValue] of objectMetricEntries(rawValue)) {
+      const formatted = metricValue(nestedValue);
+      if (formatted === null) continue;
+      const metricKey = `${key}.${nestedKey}`;
+      entries.push({
+        key: metricKey,
+        label: `${humanizeMetricKey(key)} ${humanizeMetricKey(nestedKey).toLowerCase()}`,
+        value: formatted,
+      });
+      if (entries.length >= MAX_METRICS) break;
+    }
+    if (entries.length >= MAX_METRICS) break;
+  }
+  return entries;
+}
+
+export function normalizePiAgentResponse(value: unknown): PiAgentResponseView | null {
+  const answer = readString(value, "answer");
+  const providerId = readString(value, "providerId");
+  const providerName = readString(value, "providerName");
+  const model = readString(value, "model");
+  const protocol = readString(value, "protocol");
+  const logCount = readNumber(value, "logCount");
+  if (
+    answer === null ||
+    providerId === null ||
+    providerName === null ||
+    model === null ||
+    protocol === null ||
+    logCount === null
+  ) {
+    return null;
+  }
+
+  const rawEvidence = safeGetOwnProperty(value, "evidence");
+  const evidence = Array.isArray(rawEvidence)
+    ? rawEvidence
+        .map(evidenceView)
+        .filter((item): item is PiAgentEvidenceView => item !== null)
+        .slice(0, 12)
+    : [];
+
+  return {
+    answer,
+    providerId,
+    providerName,
+    model,
+    protocol,
+    logCount,
+    evidence,
+    summaryMetrics: metricViews(safeGetOwnProperty(value, "summary")),
+    queryMetrics: metricViews(safeGetOwnProperty(value, "queryStats")),
+  };
+}

package/src/components/providers/ImportWizardDialog.tsx

@@ -3,27 +3,14 @@ import { z } from "zod";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
 import { Button } from "../ui/button";
 import { fetchJsonWithTimeout } from "../../lib/apiClient";
+import {
+  ProviderScanResponseSchema,
+  type ScannedProviderDto,
+} from "../../lib/providerImportContract";
 import { ClientLogo } from "../clients/ClientLogo";
 
 import { Loader2, Download, AlertCircle } from "lucide-react";
 
-const ExternalProviderSchema = z.object({
-  name: z.string(),
-  apiKey: z.string(),
-  format: z.enum(["anthropic", "openai"]),
-  anthropicBaseUrl: z.string(),
-  openaiBaseUrl: z.string(),
-  openaiResponsesBaseUrl: z.string().optional().default(""),
-  models: z.array(z.string()),
-  sourceTool: z.enum(["claude-code", "opencode", "mimo-code"]),
-  alreadyExists: z.boolean(),
-});
-
-const ScanResponseSchema = z.object({
-  providers: z.array(ExternalProviderSchema),
-  warnings: z.array(z.string()).optional(),
-});
-
 const ImportResponseSchema = z.object({
   success: z.boolean().optional(),
   imported: z.number().optional(),
@@ -46,7 +33,8 @@ export function ImportWizardDialog({
 }: ImportWizardDialogProps): JSX.Element {
   const [scanning, setScanning] = useState(false);
   const [scanError, setScanError] = useState<string | null>(null);
-  const [providers, setProviders] = useState<z.infer<typeof ExternalProviderSchema>[]>([]);
+  const [scanId, setScanId] = useState<string | null>(null);
+  const [providers, setProviders] = useState<ScannedProviderDto[]>([]);
   const [warnings, setWarnings] = useState<string[]>([]);
   const [selected, setSelected] = useState<Set<number>>(new Set());
   const [importing, setImporting] = useState(false);
@@ -61,6 +49,7 @@ export function ImportWizardDialog({
     setScanning(true);
     setScanError(null);
     setWarnings([]);
+    setScanId(null);
     setProviders([]);
     setSelected(new Set());
     setImportResult(null);
@@ -68,13 +57,14 @@ export function ImportWizardDialog({
 
     void fetchJsonWithTimeout(
       "/api/providers/scan",
-      ScanResponseSchema,
+      ProviderScanResponseSchema,
       PROVIDER_IMPORT_TIMEOUT_MS,
-      undefined,
+      { method: "POST" },
       (response) => `Scan failed (${String(response.status)})`,
     )
       .then((data) => {
         if (scanRequestIdRef.current !== requestId) return;
+        setScanId(data.scanId);
         setProviders(data.providers);
         setWarnings(data.warnings ?? []);
         const indices = new Set<number>();
@@ -122,7 +112,7 @@ export function ImportWizardDialog({
 
   const importSelected = useCallback(() => {
     const toImport = providers.filter((_, i) => selected.has(i));
-    if (toImport.length === 0) return;
+    if (toImport.length === 0 || scanId === null) return;
 
     const requestId = importRequestIdRef.current + 1;
     importRequestIdRef.current = requestId;
@@ -130,21 +120,6 @@ export function ImportWizardDialog({
     setImportError(null);
     setImportResult(null);
 
-    // Convert ExternalProvider[] to ProviderConfig shape for import
-    const now = new Date().toISOString();
-    const providersPayload = toImport.map((p) => ({
-      id: window.crypto.randomUUID(),
-      name: p.name,
-      apiKey: p.apiKey,
-      format: p.format,
-      anthropicBaseUrl: p.anthropicBaseUrl,
-      openaiBaseUrl: p.openaiBaseUrl,
-      openaiResponsesBaseUrl: p.openaiResponsesBaseUrl,
-      models: p.models,
-      createdAt: now,
-      updatedAt: now,
-    }));
-
     void fetchJsonWithTimeout(
       "/api/providers/import",
       ImportResponseSchema,
@@ -152,7 +127,10 @@ export function ImportWizardDialog({
       {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ providers: providersPayload }),
+        body: JSON.stringify({
+          scanId,
+          selectionIds: toImport.map((provider) => provider.selectionId),
+        }),
       },
       (response) => `Import failed (${String(response.status)})`,
     )
@@ -183,7 +161,7 @@ export function ImportWizardDialog({
         if (importRequestIdRef.current !== requestId) return;
         setImporting(false);
       });
-  }, [providers, selected, onImportComplete]);
+  }, [providers, scanId, selected, onImportComplete]);
 
   const hasSelectable = providers.some((p) => !p.alreadyExists);
 
@@ -226,7 +204,7 @@ export function ImportWizardDialog({
           {!scanning &&
             providers.map((p, i) => (
               <label
-                key={`${p.sourceTool}-${p.name}`}
+                key={p.selectionId}
                 className={`flex items-start gap-3 p-3 border rounded-md ${p.alreadyExists ? "" : "cursor-pointer hover:bg-muted/50"}`}
               >
                 {!p.alreadyExists && (
@@ -257,9 +235,7 @@ export function ImportWizardDialog({
                         : p.openaiBaseUrl}
                   </div>
                   <div className="text-xs text-muted-foreground mt-0.5 font-mono">
-                    {p.apiKey.length > 8
-                      ? `${p.apiKey.slice(0, 4)}••••${p.apiKey.slice(-4)}`
-                      : "••••"}
+                    {p.apiKeyHint}
                   </div>
                 </div>
               </label>

package/src/components/providers/ProviderLogo.tsx

@@ -5,7 +5,7 @@ import OpenAILogoSvg from "../../assets/logos/openai.svg";
 import DeepSeekLogoSvg from "../../assets/logos/deepseek.svg";
 import MiniMaxLogoSvg from "../../assets/logos/minimax.jpeg";
 import AlibabaLogoSvg from "../../assets/logos/alibaba.svg";
-import QwenLogoSvg from "../../assets/logos/qwen.png";
+import QwenLogoSvg from "../../assets/logos/qwen.webp";
 import ZhipuAILogoSvg from "../../assets/logos/zhipuai.svg";
 
 export type Provider =

package/src/components/providers/ProvidersPanel.tsx

@@ -15,7 +15,7 @@ import {
 } from "../../lib/apiClient";
 import { copyTextToClipboard } from "../../lib/clipboard";
 import {
-  ProviderConfigSchema,
+  RedactedProviderDtoSchema,
   type ProviderConfig,
   type ProviderModelMetadata,
 } from "../../lib/providerContract";
@@ -41,7 +41,7 @@ const ImportResponseSchema = z.object({
 });
 
 const ModelMetadataRefreshResponseSchema = z.object({
-  provider: ProviderConfigSchema,
+  provider: RedactedProviderDtoSchema,
   imported: z.number(),
   matchedModels: z.array(z.string()),
   missingModels: z.array(z.string()),
@@ -385,7 +385,7 @@ export function ProvidersPanel({
       try {
         const newProvider = await fetchJsonWithTimeout(
           "/api/providers",
-          ProviderConfigSchema,
+          RedactedProviderDtoSchema,
           PROVIDER_WRITE_TIMEOUT_MS,
           {
             method: "POST",
@@ -413,7 +413,7 @@ export function ProvidersPanel({
       try {
         const updated = await fetchJsonWithTimeout(
           `/api/providers/${editingProvider.id}`,
-          ProviderConfigSchema,
+          RedactedProviderDtoSchema,
           PROVIDER_WRITE_TIMEOUT_MS,
           {
             method: "PUT",
@@ -563,7 +563,10 @@ export function ProvidersPanel({
 
   return (
     <div className="space-y-4">
-      <div className="sticky top-0 z-10 flex items-center justify-end gap-2 rounded-[8px] bg-background/95 px-1 py-1 backdrop-blur">
+      <div
+        data-provider-toolbar="true"
+        className="sticky top-0 z-10 flex min-w-0 flex-wrap items-center justify-start gap-2 rounded-[8px] bg-background/95 px-1 py-1 backdrop-blur sm:justify-end"
+      >
         <Button
           variant="outline"
           size="sm"

package/src/components/providers/SettingsDialog.tsx

@@ -17,6 +17,29 @@ import {
   type TimeDisplayFormat,
 } from "../../lib/runtimeConfig";
 
+export const SETTINGS_SECTIONS = [
+  { value: "providers", label: "Providers" },
+  { value: "proxy", label: "Proxy" },
+  { value: "storage", label: "Storage" },
+  { value: "mcp", label: "MCP" },
+  { value: "onboarding", label: "Onboarding" },
+];
+
+export function ResponsiveSettingsTabs(): JSX.Element {
+  return (
+    <TabsList
+      aria-label="Settings sections"
+      className="grid w-full grid-cols-3 justify-stretch gap-1 bg-muted/35 p-1 group-data-[orientation=horizontal]/tabs:h-auto sm:grid-cols-5"
+    >
+      {SETTINGS_SECTIONS.map((section) => (
+        <TabsTrigger key={section.value} value={section.value} className="min-w-0 w-full">
+          {section.label}
+        </TabsTrigger>
+      ))}
+    </TabsList>
+  );
+}
+
 export function SettingsDialog(): JSX.Element {
   const [open, setOpen] = useState(false);
   const [activeTab, setActiveTab] = useState("providers");
@@ -74,21 +97,19 @@ export function SettingsDialog(): JSX.Element {
           <span className="sr-only">Settings</span>
         </Button>
       </DialogTrigger>
-      <DialogContent className="flex max-h-[80vh] max-w-2xl flex-col overflow-hidden">
+      <DialogContent className="flex max-h-[calc(100vh-1rem)] w-[calc(100%-1rem)] max-w-2xl flex-col overflow-hidden p-4 sm:max-h-[80vh] sm:p-6">
         <DialogHeader>
           <DialogTitle>Settings</DialogTitle>
         </DialogHeader>
 
-        <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 overflow-hidden">
-          <TabsList className="w-full justify-start bg-muted/35">
-            <TabsTrigger value="providers">Providers</TabsTrigger>
-            <TabsTrigger value="proxy">Proxy</TabsTrigger>
-            <TabsTrigger value="storage">Storage</TabsTrigger>
-            <TabsTrigger value="mcp">MCP</TabsTrigger>
-            <TabsTrigger value="onboarding">Onboarding</TabsTrigger>
-          </TabsList>
+        <Tabs
+          value={activeTab}
+          onValueChange={setActiveTab}
+          className="min-h-0 min-w-0 flex-1 overflow-hidden"
+        >
+          <ResponsiveSettingsTabs />
 
-          <div className="mt-4 flex-1 overflow-x-hidden overflow-y-auto pr-2">
+          <div className="mt-4 min-w-0 flex-1 overflow-x-hidden overflow-y-auto pr-1 sm:pr-2">
             <TabsContent value="providers">
               <ProvidersPanel
                 externalProviders={providers}
@@ -283,7 +304,9 @@ function CopyableSetupValue({
     <div className="min-w-0 rounded-md border border-border/45 bg-muted/15 px-3 py-2 transition-colors hover:bg-muted/25">
       <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>
+        <code className="min-w-0 flex-1 truncate font-mono text-xs text-foreground" title={value}>
+          {value}
+        </code>
         <Button
           type="button"
           variant="ghost"

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

@@ -0,0 +1,63 @@
+import { type JSX, type ReactNode } from "react";
+import packageJson from "../../../package.json";
+import { CrabLogo } from "../ui/crab-logo";
+import { LiveConnectionBadge } from "./LiveConnectionStatus";
+import type { LiveConnectionState } from "./liveConnectionState";
+
+export function ApplicationBar({
+  liveConnection,
+  alertsAction,
+  settingsAction,
+}: {
+  liveConnection: LiveConnectionState | undefined;
+  alertsAction: ReactNode;
+  settingsAction: ReactNode;
+}): JSX.Element {
+  return (
+    <header
+      data-application-bar="true"
+      className="border-border/70 bg-background/95 sticky top-0 z-50 shrink-0 border-b px-3 py-2 shadow-[0_10px_30px_rgba(0,0,0,0.14)] backdrop-blur lg:px-4"
+    >
+      <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2 sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]">
+        <a
+          href="/"
+          aria-label="Agent Inspector home"
+          className="flex min-w-0 items-center gap-2 rounded-md focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
+        >
+          <CrabLogo className="size-7 shrink-0 text-amber-500" />
+          <span className="min-w-0">
+            <span className="block truncate text-sm font-bold leading-4">Agent Inspector</span>
+            <span className="hidden truncate text-[10px] font-medium text-muted-foreground md:block">
+              Local First. Evidence First.
+            </span>
+          </span>
+          <span className="hidden shrink-0 font-mono text-[10px] text-muted-foreground lg:inline">
+            v{packageJson.version}
+          </span>
+        </a>
+
+        <div className="order-3 col-span-2 flex min-w-0 justify-start sm:order-2 sm:col-span-1 sm:justify-center">
+          {liveConnection === undefined ? (
+            <span
+              data-connection-state="stored"
+              className="border-border/70 bg-muted/50 inline-flex h-7 max-w-full items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium text-muted-foreground"
+            >
+              <span className="size-1.5 shrink-0 rounded-full bg-slate-400" />
+              Stored session
+            </span>
+          ) : (
+            <LiveConnectionBadge state={liveConnection} />
+          )}
+        </div>
+
+        <nav
+          aria-label="Application actions"
+          className="order-2 flex shrink-0 items-center justify-end gap-1 sm:order-3"
+        >
+          {alertsAction}
+          {settingsAction}
+        </nav>
+      </div>
+    </header>
+  );
+}