@tonyclaw/agent-inspector 3.0.28 → 3.0.30

package/src/components/errors/SafeErrorBoundary.tsx

@@ -0,0 +1,201 @@
+import {
+  Component,
+  type ErrorInfo,
+  type JSX,
+  type ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
+
+import { copyTextToClipboard } from "../../lib/clipboard";
+import { createSafeDiagnosticReference } from "../../lib/safeDiagnostic";
+import { Button } from "../ui/button";
+import { CrabLogo } from "../ui/crab-logo";
+
+export type SafeErrorFallbackProps = {
+  reference: string;
+  title: string;
+  description: string;
+  variant: "page" | "feature";
+  onRetry?: () => void;
+  onReload?: () => void;
+};
+
+export function SafeErrorFallback({
+  reference,
+  title,
+  description,
+  variant,
+  onRetry,
+  onReload,
+}: SafeErrorFallbackProps): JSX.Element {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(() => {
+    void copyTextToClipboard(reference).then((success) => {
+      if (!success) return;
+      setCopied(true);
+    });
+  }, [reference]);
+
+  const content = (
+    <div
+      role="alert"
+      className={
+        variant === "page"
+          ? "border-border/70 bg-card/80 rounded-lg border p-7 shadow-sm"
+          : "border-amber-400/20 bg-amber-500/[0.07] rounded-lg border p-4 shadow-sm"
+      }
+    >
+      <div className="flex items-center gap-3">
+        <CrabLogo className="size-9 shrink-0 text-amber-500" />
+        <div>
+          <div className="text-muted-foreground text-xs font-semibold uppercase tracking-wider">
+            Agent Inspector recovery
+          </div>
+          <h1 className={variant === "page" ? "mt-1 text-xl font-semibold" : "mt-1 font-semibold"}>
+            {title}
+          </h1>
+        </div>
+      </div>
+      <p className="text-muted-foreground mt-4 max-w-xl text-sm leading-6">{description}</p>
+      <div className="border-border/60 bg-background/70 mt-4 flex flex-wrap items-center gap-2 rounded-md border px-3 py-2">
+        <span className="text-muted-foreground text-xs">Diagnostic reference</span>
+        <code className="min-w-0 flex-1 break-all font-mono text-xs text-foreground">
+          {reference}
+        </code>
+        <Button type="button" variant="outline" size="sm" onClick={handleCopy}>
+          {copied ? "Copied" : "Copy reference"}
+        </Button>
+      </div>
+      <p className="text-muted-foreground mt-2 text-xs">
+        Error details are hidden to protect captured prompts, source content, headers, and secrets.
+      </p>
+      <div className="mt-5 flex flex-wrap gap-2">
+        {onRetry !== undefined && (
+          <Button type="button" size="sm" onClick={onRetry}>
+            Retry
+          </Button>
+        )}
+        {onReload !== undefined && (
+          <Button type="button" variant="outline" size="sm" onClick={onReload}>
+            Reload Inspector
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+
+  if (variant === "feature") {
+    return content;
+  }
+
+  return (
+    <main className="min-h-screen bg-background text-foreground">
+      <div className="mx-auto flex min-h-screen w-full max-w-3xl flex-col justify-center px-6 py-16">
+        {content}
+      </div>
+    </main>
+  );
+}
+
+type SafeErrorBoundaryProps = {
+  children: ReactNode;
+  scope: string;
+  title: string;
+  description: string;
+  variant?: "page" | "feature";
+  onRetry?: () => void;
+};
+
+type SafeErrorBoundaryState = {
+  caughtAt: number;
+  error: unknown;
+  failed: boolean;
+};
+
+const INITIAL_ERROR_STATE: SafeErrorBoundaryState = {
+  caughtAt: 0,
+  error: null,
+  failed: false,
+};
+
+export class SafeErrorBoundary extends Component<SafeErrorBoundaryProps, SafeErrorBoundaryState> {
+  override state: SafeErrorBoundaryState = INITIAL_ERROR_STATE;
+
+  static getDerivedStateFromError(error: unknown): SafeErrorBoundaryState {
+    return { caughtAt: Date.now(), error, failed: true };
+  }
+
+  override componentDidCatch(_error: unknown, _errorInfo: ErrorInfo): void {
+    // The safe reference is intentionally the only error detail exposed by this boundary.
+  }
+
+  private readonly retry = (): void => {
+    this.setState(INITIAL_ERROR_STATE);
+    this.props.onRetry?.();
+  };
+
+  override render(): ReactNode {
+    if (!this.state.failed) {
+      return this.props.children;
+    }
+
+    const reference = createSafeDiagnosticReference(
+      this.props.scope,
+      this.state.error,
+      this.state.caughtAt,
+    );
+    return (
+      <SafeErrorFallback
+        reference={reference}
+        title={this.props.title}
+        description={this.props.description}
+        variant={this.props.variant ?? "feature"}
+        onRetry={this.retry}
+        onReload={() => window.location.reload()}
+      />
+    );
+  }
+}
+
+export function LazyFeatureBoundary({
+  feature,
+  children,
+}: {
+  feature: string;
+  children: ReactNode;
+}): JSX.Element {
+  return (
+    <SafeErrorBoundary
+      scope={`lazy-${feature}`}
+      title={`${feature} could not be displayed`}
+      description="The rest of the workspace is still available. Retry this feature or reload Inspector."
+      variant="feature"
+    >
+      {children}
+    </SafeErrorBoundary>
+  );
+}
+
+export function SafeRouteError({
+  error,
+  reset,
+  scope,
+}: {
+  error: Error;
+  reset: () => void;
+  scope: string;
+}): JSX.Element {
+  const reference = useMemo(() => createSafeDiagnosticReference(scope, error), [error, scope]);
+  return (
+    <SafeErrorFallback
+      reference={reference}
+      title="Inspector workspace could not be displayed"
+      description="Agent Inspector stopped this view safely. Retry the route or reload the application."
+      variant="page"
+      onRetry={reset}
+      onReload={() => window.location.reload()}
+    />
+  );
+}

package/src/components/pi-agent/PiAgentPanel.tsx

@@ -91,7 +91,10 @@ export function PiAgentPanel({ currentSessionId, logCount }: PiAgentPanelProps):
 
     void fetch("/api/pi-agent", {
       method: "POST",
-      headers: { "content-type": "application/json" },
+      headers: {
+        "content-type": "application/json",
+        "x-agent-inspector-csrf": "1",
+      },
       body: JSON.stringify(body),
     })
       .then(async (response) => {

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>
+  );
+}