@tonyclaw/agent-inspector 3.0.29 → 3.0.31

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

@@ -1,7 +1,18 @@
-import { BrainCircuit, Loader2, Send } from "lucide-react";
+import { BrainCircuit, Loader2, RotateCcw, Send, Sparkles } from "lucide-react";
 import { useMemo, useState, type ChangeEvent, type JSX } from "react";
-import { PiAgentResponseSchema } from "../../lib/piAgentContract";
+import {
+  buildPiAgentHistory,
+  createEmptyPiAgentConversation,
+  normalizePiAgentResponse,
+  PI_AGENT_STARTERS,
+  type PiAgentConversationMessage,
+  type PiAgentEvidenceView,
+  type PiAgentMetricView,
+  type PiAgentResponseView,
+} from "./piAgentChatLogic";
 import { useProviders } from "../../lib/useProviders";
+import { dispatchLogFocusRequest } from "../proxy-viewer/logFocus";
+import { AnswerMarkdown } from "../proxy-viewer/AnswerMarkdown";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 
 type PiAgentPanelProps = {
@@ -49,25 +60,115 @@ function sortProviderBySource<T extends { name: string; source?: "company" | "pe
   });
 }
 
+function nextMessageId(role: "user" | "assistant"): string {
+  return `${role}-${String(Date.now())}-${String(Math.random()).slice(2)}`;
+}
+
+function MetricStrip({ metrics }: { metrics: readonly PiAgentMetricView[] }): JSX.Element | null {
+  if (metrics.length === 0) return null;
+  return (
+    <div className="mt-2 grid grid-cols-2 gap-1.5">
+      {metrics.slice(0, 8).map((metric) => (
+        <div key={metric.key} className="rounded-sm bg-black/20 px-2 py-1">
+          <div className="truncate text-[9px] uppercase text-muted-foreground">{metric.label}</div>
+          <div className="truncate font-mono text-[11px] text-cyan-50">{metric.value}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function EvidenceCard({ evidence }: { evidence: PiAgentEvidenceView }): JSX.Element {
+  const openLog = (): void => {
+    if (evidence.logId === null) return;
+    dispatchLogFocusRequest({ logId: evidence.logId, tab: "anatomy" });
+  };
+  const title =
+    evidence.logId === null
+      ? `${evidence.source}:${evidence.id}`
+      : `${evidence.source}:log #${String(evidence.logId)}`;
+
+  return (
+    <button
+      type="button"
+      onClick={openLog}
+      disabled={evidence.logId === null}
+      className="w-full rounded-sm bg-black/20 px-2 py-2 text-left shadow-[inset_0_0_0_1px_rgba(255,255,255,0.05)] transition-colors hover:bg-black/30 disabled:cursor-default disabled:hover:bg-black/20"
+    >
+      <div className="flex min-w-0 items-center justify-between gap-2">
+        <span className="truncate font-mono text-[10px] text-cyan-100">{title}</span>
+        {evidence.score !== null && (
+          <span className="shrink-0 font-mono text-[9px] text-muted-foreground">
+            {evidence.score.toFixed(1)}
+          </span>
+        )}
+      </div>
+      <div className="mt-1 flex flex-wrap gap-x-2 gap-y-1 text-[10px] text-muted-foreground">
+        {evidence.providerName !== null && <span>{evidence.providerName}</span>}
+        {evidence.model !== null && <span>{evidence.model}</span>}
+        {evidence.status !== null && <span>status {String(evidence.status)}</span>}
+        {evidence.elapsedMs !== null && <span>{String(evidence.elapsedMs)} ms</span>}
+      </div>
+      <p className="mt-1 line-clamp-3 text-[11px] leading-4 text-foreground/85">
+        {evidence.excerpt}
+      </p>
+    </button>
+  );
+}
+
+function AssistantMessage({ response }: { response: PiAgentResponseView }): JSX.Element {
+  return (
+    <div className="rounded-md bg-black/25 p-3 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.05)]">
+      <AnswerMarkdown text={response.answer} />
+      <div className="mt-2 break-words font-mono text-[10px] text-cyan-100/70">
+        {response.providerName} / {response.model} / {response.protocol} /{" "}
+        {String(response.logCount)} matched logs
+      </div>
+      <MetricStrip metrics={response.summaryMetrics} />
+      <MetricStrip metrics={response.queryMetrics} />
+      {response.evidence.length > 0 && (
+        <div className="mt-2 space-y-1.5">
+          {response.evidence.slice(0, 6).map((evidence) => (
+            <EvidenceCard key={`${evidence.source}-${evidence.id}`} evidence={evidence} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ConversationMessage({ message }: { message: PiAgentConversationMessage }): JSX.Element {
+  if (message.role === "assistant" && message.response !== null) {
+    return <AssistantMessage response={message.response} />;
+  }
+  return (
+    <div className="rounded-md bg-cyan-400/10 px-3 py-2 text-xs leading-5 text-cyan-50">
+      {message.content}
+    </div>
+  );
+}
+
 export function PiAgentPanel({ currentSessionId, logCount }: PiAgentPanelProps): JSX.Element {
   const { providers } = useProviders();
   const piProviders = useMemo(
     () => sortProviderBySource(providers.filter(providerSupportsPiAgent)),
     [providers],
   );
-  const [question, setQuestion] = useState(DEFAULT_QUESTION);
+  const [conversation, setConversation] = useState(() => ({
+    ...createEmptyPiAgentConversation(),
+    question: DEFAULT_QUESTION,
+  }));
   const [providerId, setProviderId] = useState<string>("__auto__");
   const [model, setModel] = useState<string>("__auto__");
-  const [answer, setAnswer] = useState<string>("");
-  const [status, setStatus] = useState<string>("");
   const [loading, setLoading] = useState(false);
 
   const selectedProvider = piProviders.find((provider) => provider.id === providerId);
   const modelOptions = selectedProvider?.models ?? [];
+  const question = conversation.question;
   const canAsk = question.trim() !== "" && piProviders.length > 0 && !loading;
 
   const handleQuestionChange = (event: ChangeEvent<HTMLTextAreaElement>): void => {
-    setQuestion(event.currentTarget.value);
+    setConversation((current) => ({ ...current, question: event.currentTarget.value }));
   };
 
   const handleProviderChange = (value: string): void => {
@@ -75,48 +176,86 @@ export function PiAgentPanel({ currentSessionId, logCount }: PiAgentPanelProps):
     setModel("__auto__");
   };
 
+  const resetConversation = (): void => {
+    setConversation({ ...createEmptyPiAgentConversation(), question: DEFAULT_QUESTION });
+  };
+
+  const setStarter = (questionText: string): void => {
+    setConversation((current) => ({ ...current, question: questionText, error: null }));
+  };
+
   const askPiAgent = (): void => {
     if (!canAsk) return;
+    const trimmedQuestion = question.trim();
+    const history = buildPiAgentHistory(conversation.messages);
+    const userMessage: PiAgentConversationMessage = {
+      id: nextMessageId("user"),
+      role: "user",
+      content: trimmedQuestion,
+      response: null,
+    };
+
     setLoading(true);
-    setStatus("");
-    setAnswer("");
+    setConversation((current) => ({
+      ...current,
+      messages: [...current.messages, userMessage],
+      question: "",
+      error: null,
+    }));
 
     const body = {
-      question: question.trim(),
+      question: trimmedQuestion,
+      history,
       ...(currentSessionId !== null ? { sessionId: currentSessionId } : {}),
       ...(providerId !== "__auto__" ? { providerId } : {}),
       ...(model !== "__auto__" ? { model } : {}),
-      logLimit: 24,
+      logLimit: 16,
     };
 
     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) => {
         const raw = await response.text();
         if (!response.ok) {
-          setStatus(`Pi Agent failed: HTTP ${String(response.status)}`);
-          setAnswer(raw);
+          setConversation((current) => ({
+            ...current,
+            error: `Pi Agent failed: HTTP ${String(response.status)} ${raw}`,
+          }));
           return;
         }
         const parsedJson: unknown = JSON.parse(raw);
-        const parsed = PiAgentResponseSchema.safeParse(parsedJson);
-        if (!parsed.success) {
-          setStatus("Pi Agent returned an unexpected response.");
-          setAnswer(raw);
+        const normalized = normalizePiAgentResponse(parsedJson);
+        if (normalized === null) {
+          setConversation((current) => ({
+            ...current,
+            error: "Pi Agent returned an unexpected response.",
+          }));
           return;
         }
-        setStatus(
-          `${parsed.data.providerName} / ${parsed.data.model} / ${parsed.data.protocol} / ${String(
-            parsed.data.logCount,
-          )} logs`,
-        );
-        setAnswer(parsed.data.answer);
+        setConversation((current) => ({
+          ...current,
+          messages: [
+            ...current.messages,
+            {
+              id: nextMessageId("assistant"),
+              role: "assistant",
+              content: normalized.answer,
+              response: normalized,
+            },
+          ],
+        }));
       })
       .catch((err: unknown) => {
-        setStatus(err instanceof Error ? err.message : "Pi Agent request failed.");
+        setConversation((current) => ({
+          ...current,
+          error: err instanceof Error ? err.message : "Pi Agent request failed.",
+        }));
       })
       .finally(() => {
         setLoading(false);
@@ -130,9 +269,17 @@ export function PiAgentPanel({ currentSessionId, logCount }: PiAgentPanelProps):
         <div className="min-w-0 flex-1">
           <div className="text-xs font-semibold text-foreground">Pi Agent</div>
           <div className="text-[11px] text-muted-foreground">
-            {currentSessionId === null ? "Inspector-wide analysis" : "Session analysis"}
+            {currentSessionId === null ? "Inspector-wide ChatBI" : "Session ChatBI"}
           </div>
         </div>
+        <button
+          type="button"
+          onClick={resetConversation}
+          className="inline-flex size-7 items-center justify-center rounded-md bg-black/25 text-muted-foreground transition-colors hover:text-foreground"
+          title="Reset conversation"
+        >
+          <RotateCcw className="size-3.5" />
+        </button>
       </div>
 
       <div className="mt-3 grid grid-cols-2 gap-2">
@@ -164,11 +311,43 @@ export function PiAgentPanel({ currentSessionId, logCount }: PiAgentPanelProps):
         </Select>
       </div>
 
+      {conversation.messages.length === 0 && (
+        <div className="mt-3 flex flex-wrap gap-1.5">
+          {PI_AGENT_STARTERS.map((starter) => (
+            <button
+              key={starter.id}
+              type="button"
+              onClick={() => {
+                setStarter(starter.question);
+              }}
+              className="inline-flex h-7 items-center gap-1.5 rounded-sm bg-black/25 px-2 text-[11px] text-cyan-50 transition-colors hover:bg-cyan-400/12"
+            >
+              <Sparkles className="size-3" />
+              <span>{starter.label}</span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {conversation.messages.length > 0 && (
+        <div className="mt-3 max-h-96 space-y-2 overflow-y-auto pr-1">
+          {conversation.messages.map((message) => (
+            <ConversationMessage key={message.id} message={message} />
+          ))}
+          {loading && (
+            <div className="inline-flex items-center gap-2 rounded-md bg-black/25 px-3 py-2 text-xs text-muted-foreground">
+              <Loader2 className="size-3.5 animate-spin" />
+              <span>Searching Inspector...</span>
+            </div>
+          )}
+        </div>
+      )}
+
       <textarea
         value={question}
         onChange={handleQuestionChange}
-        className="mt-2 min-h-24 w-full resize-y rounded-md bg-black/25 px-3 py-2 text-xs leading-5 text-foreground outline-none shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring"
-        placeholder="Ask Pi Agent about this session..."
+        className="mt-3 min-h-20 w-full resize-y rounded-md bg-black/25 px-3 py-2 text-xs leading-5 text-foreground outline-none shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring"
+        placeholder="Ask Pi Agent across saved Inspector data..."
       />
 
       <button
@@ -181,19 +360,14 @@ export function PiAgentPanel({ currentSessionId, logCount }: PiAgentPanelProps):
         <span>{loading ? "Thinking..." : "Ask Pi"}</span>
       </button>
 
+      {conversation.error !== null && (
+        <p className="mt-2 break-words text-[11px] leading-5 text-red-200">{conversation.error}</p>
+      )}
       {piProviders.length === 0 && (
         <p className="mt-2 text-[11px] leading-5 text-muted-foreground">
           Configure a Provider with Responses, Chat, or Anthropic URL to enable Pi Agent.
         </p>
       )}
-      {status !== "" && (
-        <p className="mt-2 break-words font-mono text-[10px] text-cyan-100/70">{status}</p>
-      )}
-      {answer !== "" && (
-        <div className="mt-3 max-h-64 overflow-y-auto whitespace-pre-wrap rounded-md bg-black/25 p-3 text-xs leading-5 text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.05)]">
-          {answer}
-        </div>
-      )}
       {logCount === 0 && (
         <p className="mt-2 text-[11px] leading-5 text-muted-foreground">
           No logs are visible in this scope yet; Pi Agent can still answer Provider setup questions.