@tonyclaw/agent-inspector 3.1.32 → 4.0.2

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

@@ -1,446 +0,0 @@
-import { BrainCircuit, Loader2, RotateCcw, Send, Sparkles } from "lucide-react";
-import { useMemo, useState, type ChangeEvent, type JSX } from "react";
-import {
-  buildPiAgentHistory,
-  createEmptyPiAgentConversation,
-  getPiAgentResultLogIds,
-  normalizePiAgentResponse,
-  PI_AGENT_STARTERS,
-  type PiAgentConversationMessage,
-  type PiAgentEvidenceView,
-  type PiAgentMetricView,
-  type PiAgentResponseView,
-} from "./piAgentChatLogic";
-import { useProviders } from "../../lib/useProviders";
-import { fetchControl } from "../../lib/apiClient";
-import { dispatchLogFocusRequest } from "../proxy-viewer/logFocus";
-import { AnswerMarkdown } from "../proxy-viewer/AnswerMarkdown";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
-
-type PiAgentPanelProps = {
-  currentSessionId: string | null;
-  logCount: number;
-  onResultChange: (result: PiAgentSearchResult | null) => void;
-};
-
-export type PiAgentSearchResult = {
-  question: string;
-  logIds: number[];
-  reportedLogCount: number;
-};
-
-const DEFAULT_QUESTION = "What looks abnormal, slow, or likely to hang?";
-
-function providerSupportsPiAgent(provider: {
-  anthropicBaseUrl?: string;
-  openaiBaseUrl?: string;
-  openaiResponsesBaseUrl?: string;
-}): boolean {
-  return (
-    provider.openaiResponsesBaseUrl !== undefined ||
-    provider.openaiBaseUrl !== undefined ||
-    provider.anthropicBaseUrl !== undefined
-  );
-}
-
-function providerProtocolLabel(provider: {
-  anthropicBaseUrl?: string;
-  openaiBaseUrl?: string;
-  openaiResponsesBaseUrl?: string;
-}): string {
-  if (provider.openaiResponsesBaseUrl !== undefined && provider.openaiResponsesBaseUrl !== "") {
-    return "Responses";
-  }
-  if (provider.openaiBaseUrl !== undefined && provider.openaiBaseUrl !== "") {
-    return "Chat";
-  }
-  return "Anthropic";
-}
-
-function sortProviderBySource<T extends { name: string; source?: "company" | "personal" }>(
-  providers: readonly T[],
-): T[] {
-  return providers.toSorted((left, right) => {
-    const leftCompanyRank = left.source === "company" ? 0 : 1;
-    const rightCompanyRank = right.source === "company" ? 0 : 1;
-    if (leftCompanyRank !== rightCompanyRank) return leftCompanyRank - rightCompanyRank;
-    return left.name.localeCompare(right.name);
-  });
-}
-
-function nextMessageId(role: "user" | "assistant"): string {
-  return `${role}-${String(Date.now())}-${String(Math.random()).slice(2)}`;
-}
-
-function TerminalLabel({
-  label,
-  value,
-  tone = "muted",
-}: {
-  label: string;
-  value?: string;
-  tone?: "cyan" | "muted";
-}): JSX.Element {
-  return (
-    <div className="flex min-w-0 items-center gap-1.5 font-mono text-[10px]">
-      <span className={tone === "cyan" ? "text-cyan-100" : "text-muted-foreground"}>{label}</span>
-      {value !== undefined && (
-        <>
-          <span className="text-muted-foreground/55">:</span>
-          <span className="truncate text-muted-foreground">{value}</span>
-        </>
-      )}
-    </div>
-  );
-}
-
-function MetricStrip({ metrics }: { metrics: readonly PiAgentMetricView[] }): JSX.Element | null {
-  if (metrics.length === 0) return null;
-  return (
-    <div className="grid grid-cols-2 gap-1.5">
-      {metrics.slice(0, 8).map((metric) => (
-        <div
-          key={metric.key}
-          className="rounded-sm bg-black/25 px-2 py-1 shadow-[inset_2px_0_0_rgba(103,232,249,0.22)]"
-        >
-          <div className="truncate font-mono text-[9px] text-muted-foreground">{metric.label}</div>
-          <div className="truncate font-mono text-[11px] text-cyan-50/95">{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/25 px-2 py-2 text-left shadow-[inset_2px_0_0_rgba(103,232,249,0.22),inset_0_0_0_1px_rgba(255,255,255,0.045)] transition-colors hover:bg-black/35 disabled:cursor-default disabled:hover:bg-black/25"
-    >
-      <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="overflow-hidden rounded-md bg-[#050b12]/85 shadow-[inset_0_0_0_1px_rgba(103,232,249,0.12),0_10px_24px_rgba(0,0,0,0.18)]">
-      <div className="flex min-w-0 items-center justify-between gap-2 border-b border-cyan-100/[0.08] bg-cyan-400/[0.045] px-3 py-2">
-        <TerminalLabel label="assistant@inspector" value="output" tone="cyan" />
-        <span className="shrink-0 font-mono text-[9px] text-muted-foreground">
-          {String(response.logCount)} logs
-        </span>
-      </div>
-      <div className="space-y-3 p-3">
-        <div className="rounded-sm bg-black/20 px-2.5 py-2 text-xs leading-5 shadow-[inset_2px_0_0_rgba(103,232,249,0.28)]">
-          <AnswerMarkdown text={response.answer} />
-        </div>
-        <div className="grid gap-1.5 rounded-sm bg-black/20 px-2 py-1.5">
-          <TerminalLabel label="provider" value={response.providerName} />
-          <TerminalLabel label="model" value={response.model} />
-          <TerminalLabel label="protocol" value={response.protocol} />
-        </div>
-        {(response.summaryMetrics.length > 0 || response.queryMetrics.length > 0) && (
-          <div className="space-y-1.5">
-            <TerminalLabel label="metrics" tone="cyan" />
-            <MetricStrip metrics={[...response.summaryMetrics, ...response.queryMetrics]} />
-          </div>
-        )}
-        {response.evidence.length > 0 && (
-          <div className="space-y-1.5">
-            <TerminalLabel label="evidence" value="click to inspect source log" tone="cyan" />
-            {response.evidence.slice(0, 6).map((evidence) => (
-              <EvidenceCard key={`${evidence.source}-${evidence.id}`} evidence={evidence} />
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function ConversationMessage({ message }: { message: PiAgentConversationMessage }): JSX.Element {
-  if (message.role === "assistant" && message.response !== null) {
-    return <AssistantMessage response={message.response} />;
-  }
-  return (
-    <div className="overflow-hidden rounded-md bg-black/25 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]">
-      <div className="border-b border-white/[0.06] px-3 py-1.5">
-        <TerminalLabel label="user@inspector" value="query" tone="cyan" />
-      </div>
-      <div className="px-3 py-2 font-mono text-[11px] leading-5 text-cyan-50">
-        <span className="select-none text-cyan-100/60">&gt; </span>
-        {message.content}
-      </div>
-    </div>
-  );
-}
-
-export function PiAgentPanel({
-  currentSessionId,
-  logCount,
-  onResultChange,
-}: PiAgentPanelProps): JSX.Element | null {
-  const { providers } = useProviders();
-  const piProviders = useMemo(
-    () => sortProviderBySource(providers.filter(providerSupportsPiAgent)),
-    [providers],
-  );
-  const [conversation, setConversation] = useState(() => ({
-    ...createEmptyPiAgentConversation(),
-    question: DEFAULT_QUESTION,
-  }));
-  const [providerId, setProviderId] = useState<string>("__auto__");
-  const [model, setModel] = useState<string>("__auto__");
-  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;
-
-  if (piProviders.length === 0) return null;
-
-  const handleQuestionChange = (event: ChangeEvent<HTMLTextAreaElement>): void => {
-    setConversation((current) => ({ ...current, question: event.currentTarget.value }));
-  };
-
-  const handleProviderChange = (value: string): void => {
-    setProviderId(value);
-    setModel("__auto__");
-  };
-
-  const resetConversation = (): void => {
-    setConversation({ ...createEmptyPiAgentConversation(), question: DEFAULT_QUESTION });
-    onResultChange(null);
-  };
-
-  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);
-    setConversation((current) => ({
-      ...current,
-      messages: [...current.messages, userMessage],
-      question: "",
-      error: null,
-    }));
-
-    const body = {
-      question: trimmedQuestion,
-      history,
-      ...(currentSessionId !== null ? { sessionId: currentSessionId } : {}),
-      ...(providerId !== "__auto__" ? { providerId } : {}),
-      ...(model !== "__auto__" ? { model } : {}),
-      logLimit: 16,
-    };
-
-    void fetchControl("/api/pi-agent", {
-      method: "POST",
-      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) {
-          setConversation((current) => ({
-            ...current,
-            error: `Inspector Assistant failed: HTTP ${String(response.status)} ${raw}`,
-          }));
-          return;
-        }
-        const parsedJson: unknown = JSON.parse(raw);
-        const normalized = normalizePiAgentResponse(parsedJson);
-        if (normalized === null) {
-          setConversation((current) => ({
-            ...current,
-            error: "Inspector Assistant returned an unexpected response.",
-          }));
-          return;
-        }
-        setConversation((current) => ({
-          ...current,
-          messages: [
-            ...current.messages,
-            {
-              id: nextMessageId("assistant"),
-              role: "assistant",
-              content: normalized.answer,
-              response: normalized,
-            },
-          ],
-        }));
-        onResultChange({
-          question: trimmedQuestion,
-          logIds: getPiAgentResultLogIds(normalized),
-          reportedLogCount: normalized.logCount,
-        });
-      })
-      .catch((err: unknown) => {
-        setConversation((current) => ({
-          ...current,
-          error: err instanceof Error ? err.message : "Inspector Assistant request failed.",
-        }));
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  };
-
-  return (
-    <section className="rounded-md bg-black/20 px-3 py-3 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]">
-      <div className="flex items-center gap-2">
-        <BrainCircuit className="size-4 text-cyan-200" />
-        <div className="min-w-0 flex-1">
-          <div className="text-xs font-semibold text-foreground">Assistant</div>
-          <div className="text-[11px] text-muted-foreground">
-            {currentSessionId === null ? "All evidence" : "Current session"}
-          </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>
-
-      {conversation.messages.length === 0 && (
-        <p className="mt-3 text-[11px] leading-5 text-muted-foreground">
-          Ask about failures, latency, tokens, and tools.
-        </p>
-      )}
-
-      <div className="mt-3 grid grid-cols-2 gap-2">
-        <Select value={providerId} onValueChange={handleProviderChange}>
-          <SelectTrigger className="h-8 border-0 bg-black/25 text-xs shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]">
-            <SelectValue placeholder="Provider" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__auto__">Auto provider</SelectItem>
-            {piProviders.map((provider) => (
-              <SelectItem key={provider.id} value={provider.id}>
-                {provider.name} / {providerProtocolLabel(provider)}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Select value={model} onValueChange={setModel}>
-          <SelectTrigger className="h-8 border-0 bg-black/25 text-xs shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]">
-            <SelectValue placeholder="Model" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__auto__">Auto model</SelectItem>
-            {modelOptions.map((modelName) => (
-              <SelectItem key={modelName} value={modelName}>
-                {modelName}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </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-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 about this Inspector data..."
-      />
-
-      <button
-        type="button"
-        onClick={askPiAgent}
-        disabled={!canAsk}
-        className="mt-2 inline-flex h-8 w-full items-center justify-center gap-2 rounded-md bg-cyan-400/12 px-3 text-xs font-medium text-cyan-100 shadow-[inset_0_0_0_1px_rgba(103,232,249,0.18)] transition-colors hover:bg-cyan-400/18 disabled:cursor-not-allowed disabled:opacity-50"
-      >
-        {loading ? <Loader2 className="size-3.5 animate-spin" /> : <Send className="size-3.5" />}
-        <span>{loading ? "Searching..." : "Ask Assistant"}</span>
-      </button>
-
-      {conversation.error !== null && (
-        <p className="mt-2 break-words text-[11px] leading-5 text-red-200">{conversation.error}</p>
-      )}
-      {logCount === 0 && (
-        <p className="mt-2 text-[11px] leading-5 text-muted-foreground">
-          No logs in this scope. Setup questions still work.
-        </p>
-      )}
-    </section>
-  );
-}