@tonyclaw/agent-inspector 2.0.5 → 2.0.7

package/src/components/proxy-viewer/anatomy/SegmentBar.tsx

@@ -1,9 +1,9 @@
 import { type JSX, memo, useMemo } from "react";
 import { cn, formatTokens } from "../../../lib/utils";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip";
-import type { AnatomyRole, AnatomySegment } from "./types";
+import { ANATOMY_ROLE_LABELS, type AnatomyRole, type AnatomySegment } from "./types";
 
-const ROLE_COLOR_CLASSES: Record<AnatomyRole, string> = {
+export const ROLE_COLOR_CLASSES: Record<AnatomyRole, string> = {
   system: "bg-sky-500/70",
   user: "bg-emerald-500/70",
   assistant: "bg-violet-500/70",
@@ -21,59 +21,69 @@ const ROLE_FOCUS_RING: Record<AnatomyRole, string> = {
 
 const MAX_VISIBLE_SEGMENTS = 12;
 const MIN_SEGMENT_PERCENT = 1;
-
 const TOOLTIP_PREVIEW_LIMIT = 80;
 const LABEL_TRUNCATE_LIMIT = 24;
 
 function truncateLabel(label: string): string {
   if (label.length <= LABEL_TRUNCATE_LIMIT) return label;
-  return `${label.slice(0, LABEL_TRUNCATE_LIMIT - 1)}…`;
+  return `${label.slice(0, LABEL_TRUNCATE_LIMIT - 3)}...`;
 }
 
 function truncatePreview(text: string): string {
   const singleLine = text.replace(/\s+/g, " ").trim();
   if (singleLine.length <= TOOLTIP_PREVIEW_LIMIT) return singleLine;
-  return `${singleLine.slice(0, TOOLTIP_PREVIEW_LIMIT)}…`;
+  return `${singleLine.slice(0, TOOLTIP_PREVIEW_LIMIT)}...`;
+}
+
+function formatPercent(value: number): string {
+  if (value >= 10) return `${value.toFixed(0)}%`;
+  if (value >= 1) return `${value.toFixed(1)}%`;
+  if (value > 0) return "<1%";
+  return "0%";
 }
 
 export type SegmentBarProps = {
   segments: ReadonlyArray<AnatomySegment>;
   totalTokens: number;
+  showLabels?: boolean;
   onActivate?: (segment: AnatomySegment) => void;
 };
 
 /**
- * Render a horizontal stacked bar showing the relative size of each
- * request segment, with role-based color, per-segment labels, and
- * an overflow pill that aggregates any segments beyond the visible
- * cap. Click or keyboard activation (Enter / Space) calls `onActivate`.
+ * Render a horizontal stacked bar showing the relative size of each request
+ * context segment. Segment mode can activate a JSON path; aggregate modes stay
+ * static so they do not imply a misleading jump target.
  */
 export const SegmentBar = memo(function SegmentBar({
   segments,
   totalTokens,
+  showLabels = true,
   onActivate,
 }: SegmentBarProps): JSX.Element {
   const total = useMemo(() => {
     if (totalTokens > 0) return totalTokens;
-    return segments.reduce((sum, s) => sum + s.size, 0);
+    return segments.reduce((sum, segment) => sum + segment.size, 0);
   }, [segments, totalTokens]);
 
   const visibleSegments = segments.slice(0, MAX_VISIBLE_SEGMENTS);
   const overflowSegments = segments.slice(MAX_VISIBLE_SEGMENTS);
-  const overflowSize = overflowSegments.reduce((sum, s) => sum + s.size, 0);
+  const overflowSize = overflowSegments.reduce((sum, segment) => sum + segment.size, 0);
   const overflowCount = overflowSegments.length;
   const overflowStartIndex = MAX_VISIBLE_SEGMENTS;
   const overflowEndIndex = overflowStartIndex + overflowCount - 1;
   const hasOverflow = overflowCount > 0;
+  const interactive = onActivate !== undefined;
 
   const visibleTotal = useMemo(
-    () => visibleSegments.reduce((sum, s) => sum + s.size, 0),
+    () => visibleSegments.reduce((sum, segment) => sum + segment.size, 0),
     [visibleSegments],
   );
 
   const ariaLabel = useMemo(
     () =>
-      `Request anatomy: ~${formatTokens(total)} tokens across ${segments.length} segment${segments.length === 1 ? "" : "s"}`,
+      `Request context: ~${formatTokens(total)} tokens across ${segments.length} segment${
+        segments.length === 1 ? "" : "s"
+      }`,
     [segments.length, total],
   );
 
@@ -91,36 +101,48 @@ export const SegmentBar = memo(function SegmentBar({
           {visibleSegments.map((segment, index) => {
             const rawPercent = total > 0 ? (segment.size / total) * 100 : 0;
             const percent = Math.max(MIN_SEGMENT_PERCENT, rawPercent);
+            const segmentClassName = cn(
+              "h-full border-r border-background/80 last:border-r-0",
+              interactive
+                ? "opacity-90 hover:opacity-100 focus:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background"
+                : "opacity-90",
+              ROLE_COLOR_CLASSES[segment.role],
+              interactive ? ROLE_FOCUS_RING[segment.role] : "",
+            );
+            const segmentStyle = { width: `${percent}%` };
+            const ariaText = `${segment.label}, ${formatPercent(rawPercent)}, ~${formatTokens(
+              segment.size,
+            )} tokens`;
             return (
               <Tooltip key={`${segment.path}-${index}`}>
                 <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    role="button"
-                    tabIndex={0}
-                    onClick={() => onActivate?.(segment)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        onActivate?.(segment);
-                      }
-                    }}
-                    data-anatomy-path={segment.path}
-                    aria-label={`${segment.label}, ~${formatTokens(segment.size)} tokens`}
-                    className={cn(
-                      "h-full border-r border-background/80 last:border-r-0",
-                      "opacity-90 hover:opacity-100 focus:opacity-100",
-                      "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
-                      ROLE_COLOR_CLASSES[segment.role],
-                      ROLE_FOCUS_RING[segment.role],
-                    )}
-                    style={{ width: `${percent}%` }}
-                  />
+                  {interactive ? (
+                    <button
+                      type="button"
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => onActivate(segment)}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter" || event.key === " ") {
+                          event.preventDefault();
+                          onActivate(segment);
+                        }
+                      }}
+                      data-anatomy-path={segment.path}
+                      aria-label={ariaText}
+                      className={segmentClassName}
+                      style={segmentStyle}
+                    />
+                  ) : (
+                    <span aria-label={ariaText} className={segmentClassName} style={segmentStyle} />
+                  )}
                 </TooltipTrigger>
                 <TooltipContent side="bottom" className="max-w-sm text-xs p-2 space-y-0.5">
                   <div className="font-semibold">
-                    {segment.label} · ~{formatTokens(segment.size)} tokens
+                    {segment.label} - {formatPercent(rawPercent)} - ~{formatTokens(segment.size)}{" "}
+                    tokens
                   </div>
+                  <div className="text-muted-foreground">{ANATOMY_ROLE_LABELS[segment.role]}</div>
                   <div className="text-muted-foreground">
                     {segment.characters.toLocaleString()} chars
                   </div>
@@ -144,51 +166,54 @@ export const SegmentBar = memo(function SegmentBar({
                     width: `${Math.max(MIN_SEGMENT_PERCENT, (overflowSize / total) * 100)}%`,
                   }}
                 >
-                  … +{overflowCount}
+                  ... +{overflowCount}
                 </div>
               </TooltipTrigger>
               <TooltipContent side="bottom" className="text-xs">
                 {overflowCount} more segment{overflowCount === 1 ? "" : "s"} (indices{" "}
-                {overflowStartIndex}–{overflowEndIndex})
+                {overflowStartIndex}-{overflowEndIndex})
               </TooltipContent>
             </Tooltip>
           )}
         </div>
 
-        <div className="flex w-full gap-1 text-[10px] text-muted-foreground">
-          {visibleSegments.map((segment, index) => {
-            const rawPercent = total > 0 ? (segment.size / total) * 100 : 0;
-            const percent = Math.max(MIN_SEGMENT_PERCENT, rawPercent);
-            return (
+        {showLabels && (
+          <div className="flex w-full gap-1 text-[10px] text-muted-foreground">
+            {visibleSegments.map((segment, index) => {
+              const rawPercent = total > 0 ? (segment.size / total) * 100 : 0;
+              const percent = Math.max(MIN_SEGMENT_PERCENT, rawPercent);
+              return (
+                <div
+                  key={`label-${segment.path}-${index}`}
+                  className="flex flex-col gap-0.5 truncate"
+                  style={{ width: `${percent}%` }}
+                  title={`${segment.label} - ${formatPercent(rawPercent)} - ~${formatTokens(
+                    segment.size,
+                  )} tokens`}
+                >
+                  <span className="truncate font-mono text-foreground/80">
+                    {truncateLabel(segment.label)}
+                  </span>
+                  <span className="truncate font-mono text-muted-foreground/70">
+                    {formatPercent(rawPercent)} - ~{formatTokens(segment.size)}
+                  </span>
+                </div>
+              );
+            })}
+            {hasOverflow && (
               <div
-                key={`label-${segment.path}-${index}`}
-                className="flex flex-col gap-0.5 truncate"
-                style={{ width: `${percent}%` }}
-                title={`${segment.label} · ~${formatTokens(segment.size)} tokens`}
+                className="flex flex-col gap-0.5 truncate text-muted-foreground"
+                style={{ width: `${Math.max(MIN_SEGMENT_PERCENT, (overflowSize / total) * 100)}%` }}
               >
-                <span className="truncate font-mono text-foreground/80">
-                  {truncateLabel(segment.label)}
-                </span>
-                <span className="truncate font-mono text-muted-foreground/70">
-                  ~{formatTokens(segment.size)}
+                <span className="truncate font-mono text-foreground/60">... +{overflowCount}</span>
+                <span className="truncate font-mono text-muted-foreground/60">
+                  ~{formatTokens(overflowSize)}
                 </span>
               </div>
-            );
-          })}
-          {hasOverflow && (
-            <div
-              className="flex flex-col gap-0.5 truncate text-muted-foreground"
-              style={{ width: `${Math.max(MIN_SEGMENT_PERCENT, (overflowSize / total) * 100)}%` }}
-            >
-              <span className="truncate font-mono text-foreground/60">… +{overflowCount}</span>
-              <span className="truncate font-mono text-muted-foreground/60">
-                ~{formatTokens(overflowSize)}
-              </span>
-            </div>
-          )}
-        </div>
+            )}
+          </div>
+        )}
 
-        {/* Spacer to maintain minimum bar height for tiny segments */}
         {visibleTotal < total * 0.1 && <div className="h-0" />}
       </div>
     </TooltipProvider>

package/src/components/proxy-viewer/anatomy/types.ts

@@ -1,23 +1,21 @@
 /**
- * Role of a request segment. Drives the segment's color in the anatomy bar.
+ * Role of a request segment. Drives the segment's color in the context bar.
  *
  * - `system`: the system prompt (Anthropic `system`, or leading system-role message in OpenAI)
  * - `user`: a user-role message
  * - `assistant`: an assistant-role message
- * - `tool`: a tool-role message (OpenAI only — Anthropic uses tool_result blocks inside user messages)
- * - `tools`: the synthetic "tool definitions" segment that aggregates the `tools` array
+ * - `tool`: a tool-role message (OpenAI only; Anthropic uses tool_result blocks inside user messages)
+ * - `tools`: the synthetic tool definitions segment that aggregates the `tools` array
  */
 export type AnatomyRole = "system" | "user" | "assistant" | "tool" | "tools";
 
 /**
- * A single segment of a request as visualized in the Anatomy tab.
+ * A single segment of a request as visualized in the request context tab.
  *
  * `path` is a JSON-pointer-style path into the parsed body
  * (e.g. `/system`, `/messages/0`, `/tools`). The path is opaque to
- * consumers — it is matched against the same path emitted by the
- * request analyzer, and is used to drive click-to-jump in the
- * `JsonViewer`. A `null` path is allowed for the synthetic `tools`
- * segment in the rare case where the tools array cannot be located.
+ * consumers: it is matched against the same path emitted by the request
+ * analyzer and is used to drive click-to-jump in the `JsonViewer`.
  */
 export type AnatomySegment = {
   /** Stable role used for color and label prefix. */
@@ -30,10 +28,14 @@ export type AnatomySegment = {
   characters: number;
   /** Raw text of the segment used to compute `size`. Used in the tooltip preview. */
   text: string;
-  /**
-   * JSON-pointer-style path into the parsed body (e.g. `/messages/3`).
-   * `null` when the segment does not correspond to a single node
-   * (e.g. the synthetic `tools` segment that aggregates the array).
-   */
+  /** JSON-pointer-style path into the parsed body (e.g. `/messages/3`). */
   path: string;
 };
+
+export const ANATOMY_ROLE_LABELS: Record<AnatomyRole, string> = {
+  system: "System",
+  user: "User",
+  assistant: "Assistant",
+  tool: "Tool Results",
+  tools: "Tool Definitions",
+};

package/src/components/proxy-viewer/log-formats/anthropic.ts

@@ -155,7 +155,7 @@ export const anthropicLogFormatAdapter: LogFormatAdapter = {
     if (parsed === null || typeof parsed !== "object") return null;
     // We deliberately skip AnthropicRequestSchema validation here:
     // real Anthropic requests accept `system` as either a string or
-    // an array, and we want the Anatomy view to render even when the
+    // an array, and we want the Context view to render even when the
     // body shape is slightly off-schema (e.g. system: "string" vs
     // system: [{type:"text",text:"..."}]).
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions

package/src/components/proxy-viewer/log-formats/openai.ts

@@ -128,7 +128,7 @@ export const openAILogFormatAdapter: LogFormatAdapter = {
   anatomySegments(parsed) {
     if (parsed === null || typeof parsed !== "object") return null;
     // We deliberately skip OpenAIRequestSchema validation here for the
-    // same reason as the Anthropic adapter: the Anatomy view should
+    // same reason as the Anthropic adapter: the Context view should
     // render even when the body shape is slightly off-schema. We only
     // need the top-level `messages` and `tools` arrays.
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions

package/src/components/proxy-viewer/log-formats/types.ts

@@ -18,7 +18,7 @@ export type LogFormatAdapter = {
   analyzeRequest(rawBody: string | null): RequestAnalysis;
   analyzeResponse(responseText: string | null): ResponseAnalysis;
   /**
-   * Derive the ordered list of segments shown in the Anatomy tab for a
+   * Derive the ordered list of segments shown in the Context tab for a
    * parsed request body. Returns `null` when the body is `null` or fails
    * the format's schema (e.g. unknown format).
    */

package/src/components/proxy-viewer/requestTools.ts

@@ -0,0 +1,213 @@
+import { safeGetOwnProperty } from "../../lib/objectUtils";
+
+export type RequestToolCategory = "file" | "shell" | "browser" | "web" | "mcp" | "code" | "other";
+
+export type RequestToolDefinition = {
+  name: string;
+  description: string | null;
+  descriptionPreview: string | null;
+  category: RequestToolCategory;
+  parameterCount: number;
+  requiredParameters: string[];
+  schema: unknown | null;
+};
+
+export type RequestToolCategorySummary = {
+  category: RequestToolCategory;
+  count: number;
+};
+
+export type RequestToolsSummary = {
+  tools: RequestToolDefinition[];
+  toolChoiceLabel: string | null;
+  categories: RequestToolCategorySummary[];
+};
+
+const CATEGORY_ORDER: RequestToolCategory[] = [
+  "file",
+  "shell",
+  "browser",
+  "web",
+  "mcp",
+  "code",
+  "other",
+];
+
+function firstTextSlice(value: string): string {
+  const normalized = value.replace(/\s+/g, " ").trim();
+  if (normalized.length <= 120) return normalized;
+  return `${normalized.slice(0, 119)}...`;
+}
+
+function previewDescription(description: string | null): string | null {
+  if (description === null) return null;
+  const normalized = description.replace(/\s+/g, " ").trim();
+  if (normalized.length === 0) return null;
+  const sentenceEnd = normalized.search(/[.!?。！？]/);
+  if (sentenceEnd >= 24) return firstTextSlice(normalized.slice(0, sentenceEnd + 1));
+  return firstTextSlice(normalized);
+}
+
+function lowerHaystack(name: string, description: string | null): string {
+  return `${name} ${description ?? ""}`.toLowerCase();
+}
+
+function includesAny(value: string, needles: readonly string[]): boolean {
+  return needles.some((needle) => value.includes(needle));
+}
+
+function categorizeTool(name: string, description: string | null): RequestToolCategory {
+  const haystack = lowerHaystack(name, description);
+  if (
+    name.startsWith("mcp__") ||
+    name.startsWith("inspector_") ||
+    includesAny(haystack, [" mcp", "model context protocol"])
+  ) {
+    return "mcp";
+  }
+  if (
+    includesAny(haystack, ["bash", "shell", "terminal", "command", "powershell", "exec", "process"])
+  ) {
+    return "shell";
+  }
+  if (
+    includesAny(haystack, [
+      "browser",
+      "playwright",
+      "screenshot",
+      "click",
+      "navigate",
+      "page",
+      "tab",
+    ])
+  ) {
+    return "browser";
+  }
+  if (
+    includesAny(haystack, [
+      "read",
+      "write",
+      "edit",
+      "file",
+      "glob",
+      "grep",
+      "patch",
+      "filesystem",
+      "directory",
+    ])
+  ) {
+    return "file";
+  }
+  if (includesAny(haystack, ["web", "search", "http", "url", "fetch"])) {
+    return "web";
+  }
+  if (includesAny(haystack, ["code", "typescript", "javascript", "python", "repl"])) {
+    return "code";
+  }
+  return "other";
+}
+
+function parameterNames(schema: unknown): string[] {
+  const properties = safeGetOwnProperty(schema, "properties");
+  if (properties === null || typeof properties !== "object" || Array.isArray(properties)) {
+    return [];
+  }
+  return Object.keys(properties).sort((a, b) => a.localeCompare(b));
+}
+
+function requiredParameterNames(schema: unknown): string[] {
+  const required = safeGetOwnProperty(schema, "required");
+  if (!Array.isArray(required)) return [];
+  const names: string[] = [];
+  for (const item of required) {
+    if (typeof item === "string" && item.length > 0) names.push(item);
+  }
+  return names.sort((a, b) => a.localeCompare(b));
+}
+
+function parseAnthropicTool(tool: unknown): RequestToolDefinition | null {
+  const name = safeGetOwnProperty(tool, "name");
+  if (typeof name !== "string" || name.length === 0) return null;
+  const description = safeGetOwnProperty(tool, "description");
+  const schema = safeGetOwnProperty(tool, "input_schema") ?? null;
+  const normalizedDescription = typeof description === "string" ? description : null;
+  return {
+    name,
+    description: normalizedDescription,
+    descriptionPreview: previewDescription(normalizedDescription),
+    category: categorizeTool(name, normalizedDescription),
+    parameterCount: parameterNames(schema).length,
+    requiredParameters: requiredParameterNames(schema),
+    schema,
+  };
+}
+
+function parseOpenAITool(tool: unknown): RequestToolDefinition | null {
+  const fn = safeGetOwnProperty(tool, "function");
+  const name = safeGetOwnProperty(fn, "name");
+  if (typeof name !== "string" || name.length === 0) return null;
+  const description = safeGetOwnProperty(fn, "description");
+  const schema = safeGetOwnProperty(fn, "parameters") ?? null;
+  const normalizedDescription = typeof description === "string" ? description : null;
+  return {
+    name,
+    description: normalizedDescription,
+    descriptionPreview: previewDescription(normalizedDescription),
+    category: categorizeTool(name, normalizedDescription),
+    parameterCount: parameterNames(schema).length,
+    requiredParameters: requiredParameterNames(schema),
+    schema,
+  };
+}
+
+function parseTool(tool: unknown): RequestToolDefinition | null {
+  const openAITool = parseOpenAITool(tool);
+  if (openAITool !== null) return openAITool;
+  return parseAnthropicTool(tool);
+}
+
+function formatToolChoice(choice: unknown): string | null {
+  if (choice === undefined || choice === null) return null;
+  if (typeof choice === "string") return choice;
+  const type = safeGetOwnProperty(choice, "type");
+  const name = safeGetOwnProperty(choice, "name");
+  const fnName = safeGetOwnProperty(safeGetOwnProperty(choice, "function"), "name");
+  if (typeof type === "string" && typeof fnName === "string" && fnName.length > 0) {
+    return `${type}: ${fnName}`;
+  }
+  if (typeof type === "string" && typeof name === "string" && name.length > 0) {
+    return `${type}: ${name}`;
+  }
+  if (typeof type === "string") return type;
+  const encoded = JSON.stringify(choice);
+  return encoded === undefined ? null : firstTextSlice(encoded);
+}
+
+function summarizeCategories(tools: RequestToolDefinition[]): RequestToolCategorySummary[] {
+  const counts = new Map<RequestToolCategory, number>();
+  for (const tool of tools) {
+    counts.set(tool.category, (counts.get(tool.category) ?? 0) + 1);
+  }
+  return CATEGORY_ORDER.flatMap((category) => {
+    const count = counts.get(category) ?? 0;
+    return count > 0 ? [{ category, count }] : [];
+  });
+}
+
+export function parseRequestTools(parsed: unknown): RequestToolsSummary | null {
+  const rawTools = safeGetOwnProperty(parsed, "tools");
+  if (!Array.isArray(rawTools) || rawTools.length === 0) return null;
+
+  const tools: RequestToolDefinition[] = [];
+  for (const rawTool of rawTools) {
+    const tool = parseTool(rawTool);
+    if (tool !== null) tools.push(tool);
+  }
+  if (tools.length === 0) return null;
+
+  return {
+    tools,
+    toolChoiceLabel: formatToolChoice(safeGetOwnProperty(parsed, "tool_choice")),
+    categories: summarizeCategories(tools),
+  };
+}

package/src/components/ui/json-viewer.tsx

@@ -380,7 +380,7 @@ export type JsonViewerProps = {
   bulkRevision?: number;
   /**
    * Set of JSON-pointer-style paths whose row should expose a
-   * `data-anatomy-path` attribute. Used by the Anatomy view to
+   * `data-anatomy-path` attribute. Used by the Context view to
    * locate rows for click-to-jump. When `null` or `undefined`,
    * no `data-anatomy-path` attribute is emitted (zero cost).
    */

package/.output/public/assets/CompareDrawer-3nRwtk8J.js

@@ -1 +0,0 @@
-import{r as h,j as t}from"./main-2NlGzgOe.js";import{c as X,g as O,r as P,a as q,X as Y,b as x,B as Z,f as $,R as ee,C as te,M as _,d as J,e as M,h as V,i as re,j as ne}from"./ProxyViewerContainer-CbW5VRER.js";import{J as N}from"./json-viewer-IXejqXB0.js";const se=[["line",{x1:"5",x2:"19",y1:"9",y2:"9",key:"1nwqeh"}],["line",{x1:"5",x2:"19",y1:"15",y2:"15",key:"g8yjpy"}]],ae=X("equal",se),oe="";function j(e){if(e.length===0)return oe;let r="";for(let n=0;n<e.length;n++){const s=e[n];s!==void 0&&(typeof s=="number"?r+=`[${s}]`:n===0?r+=s:r+=`.${s}`)}return r}function de(e){return typeof e=="object"&&e!==null&&!Array.isArray(e)}function D(e){if(typeof e=="string")try{return C(JSON.parse(e))}catch{return{kind:"primitive",value:e}}return C(e)}function C(e){if(e===null)return{kind:"primitive",value:null};if(typeof e=="string")return{kind:"primitive",value:e};if(typeof e=="number")return{kind:"primitive",value:e};if(typeof e=="boolean")return{kind:"primitive",value:e};if(Array.isArray(e))return{kind:"array",value:e.map(r=>C(r))};if(de(e)){const r={};for(const n of Object.keys(e).sort())r[n]=C(e[n]);return{kind:"object",value:r}}return{kind:"primitive",value:null}}function ie(e,r){const n=[];return R([],e,r,n),n}function R(e,r,n,s){const d=j(e);if(E(r,n)){s.push({kind:"equal",path:d,value:r});return}if(r.kind!==n.kind){s.push({kind:"changed",path:d,left:r,right:n});return}if(r.kind==="primitive"&&n.kind==="primitive"){s.push({kind:"changed",path:d,left:r,right:n});return}if(r.kind==="object"&&n.kind==="object"){const o=Object.keys(r.value),a=Object.keys(n.value),m=new Set(a);for(const i of o){const f=r.value[i];if(f!==void 0)if(!m.has(i))s.push({kind:"removed",path:j([...e,i]),value:f});else{const p=n.value[i];if(p===void 0)continue;R([...e,i],f,p,s)}}for(const i of a){if(o.includes(i))continue;const f=n.value[i];f!==void 0&&s.push({kind:"added",path:j([...e,i]),value:f})}return}if(r.kind==="array"&&n.kind==="array"){const o=Math.min(r.value.length,n.value.length);for(let a=0;a<o;a++){const m=r.value[a],i=n.value[a];m===void 0||i===void 0||R([...e,a],m,i,s)}for(let a=o;a<n.value.length;a++){const m=n.value[a];m!==void 0&&s.push({kind:"added",path:j([...e,a]),value:m})}for(let a=o;a<r.value.length;a++){const m=r.value[a];m!==void 0&&s.push({kind:"removed",path:j([...e,a]),value:m})}}}function E(e,r){if(e.kind!==r.kind)return!1;if(e.kind==="primitive"&&r.kind==="primitive")return e.value===r.value;if(e.kind==="array"&&r.kind==="array"){if(e.value.length!==r.value.length)return!1;for(let n=0;n<e.value.length;n++){const s=e.value[n],d=r.value[n];if(s===void 0||d===void 0||!E(s,d))return!1}return!0}if(e.kind==="object"&&r.kind==="object"){const n=Object.keys(e.value),s=Object.keys(r.value);if(n.length!==s.length)return!1;for(const d of n){const o=e.value[d],a=r.value[d];if(o===void 0||a===void 0||!E(o,a))return!1}return!0}return!1}function v(e,r=80){let n;switch(e.kind){case"primitive":n=e.value===null?"null":JSON.stringify(e.value);break;case"array":n=`[… ${e.value.length} items]`;break;case"object":n=`{… ${Object.keys(e.value).length} keys}`;break}return n.length>r&&(n=`${n.slice(0,r-1)}…`),n}function w(e,r=2){return JSON.stringify(S(e),null,r)}function S(e){switch(e.kind){case"primitive":return e.value;case"array":return e.value.map(S);case"object":{const r={};for(const[n,s]of Object.entries(e.value))r[n]=S(s);return r}}}function K(e){if(e==="")return"";for(let r=e.length-1;r>=0;r--){const n=e[r];if(n==="."||n==="[")return e.substring(0,r)}return""}function L(e){return e.kind==="equal"&&(e.value.kind==="object"||e.value.kind==="array")}function le(e){const r=[];let n=0;for(;n<e.length;){const s=e[n];if(s!==void 0&&L(s)){const d=K(s.path);let o=n+1;for(;o<e.length;){const a=e[o];if(a===void 0||!L(a)||K(a.path)!==d)break;o++}if(o-n>1){const a=[];for(let m=n;m<o;m++){const i=e[m];i!==void 0&&i.kind==="equal"&&a.push(i)}r.push({kind:"equal-run",ops:a}),n=o;continue}}s!==void 0&&r.push({kind:"single",op:s}),n++}return r}const B={added:{icon:J,accent:"text-emerald-600 dark:text-emerald-400",bg:"bg-emerald-500/5 hover:bg-emerald-500/10",border:"border-l-emerald-500",label:"ADDED"},removed:{icon:_,accent:"text-rose-600 dark:text-rose-400",bg:"bg-rose-500/5 hover:bg-rose-500/10",border:"border-l-rose-500",label:"REMOVED"},changed:{icon:M,accent:"text-amber-600 dark:text-amber-400",bg:"bg-amber-500/5 hover:bg-amber-500/10",border:"border-l-amber-500",label:"CHANGED"},equal:{icon:ae,accent:"text-muted-foreground/70",bg:"bg-muted/20 hover:bg-muted/30",border:"border-l-muted-foreground/20",label:"EQUAL"}};function ce({ops:e,expanded:r,onToggle:n}){const s=e[0],d=e[e.length-1];if(s===void 0||d===void 0)return t.jsx("div",{className:"text-muted-foreground/40 text-xs",children:"—"});const o=s.path,a=d.path,m=e.length===1?o:`${o} … ${a}`,i=s.value.kind==="array"?`${e.length} equal arrays`:s.value.kind==="object"?`${e.length} equal objects`:"equal",f=B.equal;return t.jsxs("div",{className:x("border-l-4 rounded-sm",f.border,f.bg),children:[t.jsxs("button",{type:"button",onClick:n,className:"w-full text-left flex items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground cursor-pointer",children:[t.jsx(V,{className:x("size-3 transition-transform shrink-0",r&&"rotate-90")}),t.jsx(f.icon,{className:x("size-3 shrink-0",f.accent)}),t.jsx("span",{className:"font-mono truncate flex-1",title:`${o} … ${a}`,children:m}),t.jsx("span",{className:x("text-[10px] uppercase tracking-wider shrink-0",f.accent),children:f.label}),t.jsxs("span",{className:"text-muted-foreground/60 shrink-0",children:["(",i,")"]})]}),r&&t.jsx("div",{className:"ml-5 mt-1 mb-2 space-y-2 pr-2",children:e.map(p=>t.jsxs("div",{className:"border border-border/50 rounded p-2 bg-muted/20",children:[t.jsx("div",{className:"font-mono text-xs text-muted-foreground mb-1",children:p.path}),t.jsx(N,{text:w(p.value),defaultExpandDepth:0})]},p.path))})]})}function ue({op:e,idx:r,copiedPath:n,onCopyPath:s,expanded:d,onToggle:o}){const a=B[e.kind],m=a.icon,i=e.kind==="added"||e.kind==="removed"?e.value.kind==="object"||e.value.kind==="array":e.kind==="changed"?e.left.kind==="object"||e.left.kind==="array"||e.right.kind==="object"||e.right.kind==="array":!1,f=e.kind==="changed"?[{text:v(e.left,400),tone:"text-rose-700 dark:text-rose-300 line-through"},{text:v(e.right,400),tone:"text-emerald-700 dark:text-emerald-300"}]:e.kind==="removed"?[{text:v(e.value,400),tone:"text-rose-700 dark:text-rose-300 line-through"}]:e.kind==="added"?[{text:v(e.value,400),tone:"text-emerald-700 dark:text-emerald-300"}]:[{text:v(e.value,400),tone:"text-muted-foreground"}],p=n===e.path&&e.path!=="";return t.jsxs("div",{"data-diff-idx":r,"data-diff-kind":e.kind,className:x("border-l-4 rounded-sm px-3 py-2 my-0.5 transition-colors",a.border,a.bg),children:[t.jsxs("button",{type:"button",onClick:o,disabled:!i,className:x("w-full flex items-center gap-2 text-xs text-left rounded-sm",i?"cursor-pointer":"cursor-default"),"aria-expanded":i?d:void 0,"aria-label":i?d?`Collapse ${e.path||"root"}`:`Expand ${e.path||"root"}`:void 0,children:[i?t.jsx(V,{className:x("size-3 shrink-0 transition-transform",a.accent,d&&"rotate-90")}):t.jsx("span",{className:"size-3 shrink-0","aria-hidden":"true"}),t.jsx(m,{className:x("size-3.5 shrink-0",a.accent),strokeWidth:2.5}),t.jsx("span",{className:"font-mono truncate flex-1 min-w-0",title:e.path||"(root)",children:e.path===""?"(root)":e.path}),t.jsx("span",{className:x("text-[9px] font-bold uppercase tracking-wider shrink-0 px-1.5 py-0.5 rounded",a.accent,e.kind==="equal"?"bg-muted/40":"bg-background/60"),children:a.label}),e.path!==""&&t.jsx("span",{role:"button",tabIndex:0,onClick:b=>{b.stopPropagation(),s(e.path)},onKeyDown:b=>{(b.key==="Enter"||b.key===" ")&&(b.stopPropagation(),b.preventDefault(),s(e.path))},className:x("shrink-0 p-1 rounded transition-colors cursor-pointer inline-flex items-center justify-center",p?"text-emerald-500":"text-muted-foreground/50 hover:text-foreground hover:bg-muted"),"aria-label":p?"Copied":"Copy",title:p?"Copied!":"Copy",children:p?t.jsx(re,{className:"size-3"}):t.jsx(ne,{className:"size-3"})})]}),f.map((b,y)=>t.jsx("div",{className:x("font-mono text-xs mt-1 break-all pl-5",b.tone),children:b.text},y)),t.jsx("div",{className:"overflow-hidden transition-all duration-200",style:{maxHeight:d&&i?"2000px":"0"},"aria-hidden":!d,children:d&&i&&e.kind!=="equal"?t.jsx(me,{op:e}):null})]})}function me({op:e}){if(e.kind==="added"||e.kind==="removed")return t.jsx("div",{className:"pl-5 mt-2 border border-border/50 rounded p-2 bg-muted/20",children:t.jsx(N,{text:w(e.value),defaultExpandDepth:0})});const r=e.left.kind==="object"||e.left.kind==="array",n=e.right.kind==="object"||e.right.kind==="array";return!r&&!n?t.jsx("div",{className:"pl-5 mt-2 text-xs text-muted-foreground/70 italic",children:"Primitive values are shown inline above."}):t.jsxs("div",{className:"pl-5 mt-2 grid grid-cols-1 md:grid-cols-2 gap-2",children:[t.jsxs("div",{className:"border border-rose-500/30 rounded p-2 bg-rose-500/5",children:[t.jsx("div",{className:"text-[10px] uppercase tracking-wider text-rose-500 mb-1",children:"Old"}),t.jsx(N,{text:w(e.left),defaultExpandDepth:0})]}),t.jsxs("div",{className:"border border-emerald-500/30 rounded p-2 bg-emerald-500/5",children:[t.jsx("div",{className:"text-[10px] uppercase tracking-wider text-emerald-500 mb-1",children:"New"}),t.jsx(N,{text:w(e.right),defaultExpandDepth:0})]})]})}function xe({counts:e,onJumpTo:r}){const n=e.added+e.removed+e.changed;return t.jsxs("div",{className:"px-4 py-2 border-b border-border bg-muted/20 flex items-center gap-2 text-xs flex-wrap",children:[t.jsxs("span",{className:"text-muted-foreground font-medium",children:[n," ",n===1?"change":"changes"]}),t.jsxs("button",{type:"button",onClick:()=>r("removed"),disabled:e.removed===0,className:x("inline-flex items-center gap-1 px-2 py-0.5 rounded-full border cursor-pointer transition-colors",e.removed>0?"border-rose-500/40 text-rose-600 dark:text-rose-400 bg-rose-500/10 hover:bg-rose-500/20":"border-border text-muted-foreground/40 cursor-not-allowed"),title:e.removed>0?"Jump to first removed":"No removals",children:[t.jsx(_,{className:"size-3"}),e.removed," removed"]}),t.jsxs("button",{type:"button",onClick:()=>r("added"),disabled:e.added===0,className:x("inline-flex items-center gap-1 px-2 py-0.5 rounded-full border cursor-pointer transition-colors",e.added>0?"border-emerald-500/40 text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20":"border-border text-muted-foreground/40 cursor-not-allowed"),title:e.added>0?"Jump to first added":"No additions",children:[t.jsx(J,{className:"size-3"}),e.added," added"]}),t.jsxs("button",{type:"button",onClick:()=>r("changed"),disabled:e.changed===0,className:x("inline-flex items-center gap-1 px-2 py-0.5 rounded-full border cursor-pointer transition-colors",e.changed>0?"border-amber-500/40 text-amber-600 dark:text-amber-400 bg-amber-500/10 hover:bg-amber-500/20":"border-border text-muted-foreground/40 cursor-not-allowed"),title:e.changed>0?"Jump to first changed":"No changes",children:[t.jsx(M,{className:"size-3"}),e.changed," changed"]})]})}function fe({mode:e,onChange:r}){return t.jsxs("div",{className:"inline-flex rounded-md border border-border overflow-hidden",children:[t.jsxs("button",{type:"button",onClick:()=>r("unified"),"aria-pressed":e==="unified",className:x("flex items-center gap-1 px-2 py-1 text-xs transition-colors cursor-pointer",e==="unified"?"bg-muted text-foreground":"hover:bg-muted/50 text-muted-foreground"),title:"Unified view (single column, emphasized diffs)",children:[t.jsx(ee,{className:"size-3"}),"Unified"]}),t.jsxs("button",{type:"button",onClick:()=>r("split"),"aria-pressed":e==="split",className:x("flex items-center gap-1 px-2 py-1 text-xs transition-colors border-l border-border cursor-pointer",e==="split"?"bg-muted text-foreground":"hover:bg-muted/50 text-muted-foreground"),title:"Split view (path | left | right)",children:[t.jsx(te,{className:"size-3"}),"Split"]})]})}function A({log:e,side:r}){const n=q(e);return t.jsxs("div",{className:"flex-1 min-w-0 space-y-1 text-xs",children:[t.jsxs("div",{className:"flex items-center gap-2",children:[t.jsx(Z,{variant:"outline",className:x("text-[10px] px-1.5 py-0 h-5 font-mono shrink-0",r==="left"?"border-rose-500/40 text-rose-400":"border-emerald-500/40 text-emerald-400"),children:r==="left"?"← Left":"Right →"}),t.jsxs("span",{className:"font-mono text-blue-400/80",children:["#",e.id]}),e.model!==null&&t.jsx("span",{className:"font-mono text-muted-foreground truncate",children:e.model})]}),t.jsxs("div",{className:"flex items-center gap-3 text-muted-foreground font-mono",children:[e.cacheCreationInputTokens!==null&&e.cacheCreationInputTokens>0&&t.jsxs("span",{className:"text-emerald-400",children:["KV Cache +",$(e.cacheCreationInputTokens)]}),e.cacheReadInputTokens!==null&&e.cacheReadInputTokens>0&&t.jsxs("span",{className:"text-purple-400",children:["KV Cache ~",$(e.cacheReadInputTokens)]}),t.jsx("span",{className:"truncate",title:e.timestamp,children:e.timestamp})]}),t.jsxs("div",{className:"text-muted-foreground/70 font-mono truncate",title:n,children:["session: ",n]})]})}function ge({left:e,right:r,onClose:n}){const s=h.useMemo(()=>{const l=O(P(e)).analyzeRequest(e.rawRequestBody),c=O(P(r)).analyzeRequest(r.rawRequestBody),u=D(l.comparisonValue),g=D(c.comparisonValue);return ie(u,g)},[e.apiFormat,e.path,e.rawRequestBody,r.apiFormat,r.path,r.rawRequestBody]),d=h.useMemo(()=>le(s),[s]),o=h.useMemo(()=>{let l=0,c=0,u=0;for(const g of d)if(g.kind==="single")switch(g.op.kind){case"added":l++;break;case"removed":c++;break;case"changed":u++;break}return{added:l,removed:c,changed:u}},[d]),[a,m]=h.useState(new Set),i=l=>{m(c=>{const u=new Set(c);return u.has(l)?u.delete(l):u.add(l),u})},[f,p]=h.useState(new Set),b=l=>{p(c=>{const u=new Set(c);return u.has(l)?u.delete(l):u.add(l),u})};h.useEffect(()=>{p(new Set)},[e.id,r.id]);const[y,F]=h.useState("unified"),T=h.useRef(null),[U,z]=h.useState(null),k=h.useRef(null),H=l=>{window.navigator.clipboard.writeText(l).then(()=>{z(l),k.current!==null&&clearTimeout(k.current),k.current=setTimeout(()=>z(null),1500)})};h.useEffect(()=>()=>{k.current!==null&&clearTimeout(k.current)},[]);const G=l=>{const c=d.findIndex(I=>I.kind==="single"&&I.op.kind===l);if(c===-1)return;const u=T.current;if(u===null)return;const g=u.querySelector(`[data-diff-idx="${c}"]`);g!==null&&g.scrollIntoView({behavior:"smooth",block:"center"})};h.useEffect(()=>{const l=u=>{u.key==="Escape"&&n()};document.addEventListener("keydown",l);const c=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.removeEventListener("keydown",l),document.body.style.overflow=c}},[n]);const Q=q(e)===q(r),W=s.length===1&&s[0]?.kind==="equal";return t.jsxs("div",{className:"fixed inset-0 z-50 flex justify-end",role:"dialog","aria-modal":"true","aria-label":"Compare two log requests",children:[t.jsx("button",{type:"button",onClick:n,"aria-label":"Close compare drawer",className:"absolute inset-0 bg-black/40 cursor-default",tabIndex:-1}),t.jsxs("div",{className:x("relative bg-background border-l border-border shadow-xl","w-full md:w-[70vw] max-w-[1100px] flex flex-col h-full"),onClick:l=>l.stopPropagation(),onKeyDown:l=>l.stopPropagation(),children:[t.jsxs("div",{className:"flex items-start gap-4 px-4 py-3 border-b border-border",children:[t.jsxs("div",{className:"flex-1 flex gap-4 min-w-0",children:[t.jsx(A,{log:e,side:"left"}),t.jsx(A,{log:r,side:"right"})]}),t.jsxs("div",{className:"flex items-center gap-2 shrink-0",children:[t.jsx(fe,{mode:y,onChange:F}),t.jsx("button",{type:"button",onClick:n,"aria-label":"Close",className:"p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer",children:t.jsx(Y,{className:"size-4"})})]})]}),!Q&&t.jsx("div",{className:"px-4 py-1.5 text-xs text-amber-400 bg-amber-500/10 border-b border-border",children:"Heads up: the two selected logs are from different sessions."}),W?t.jsx("div",{className:"flex-1 min-h-0 overflow-y-auto flex items-center justify-center text-muted-foreground text-sm",children:"The two Request payloads are identical."}):t.jsxs(t.Fragment,{children:[t.jsx(xe,{counts:o,onJumpTo:G}),t.jsx("div",{ref:T,className:"flex-1 min-h-0 overflow-y-auto",children:y==="unified"?t.jsx("div",{className:"px-3 py-2 space-y-0.5",children:d.map((l,c)=>{if(l.kind==="equal-run")return t.jsx(ce,{ops:l.ops,expanded:a.has(c),onToggle:()=>i(c)},`r${c}`);const u=l.op;return t.jsx(ue,{op:u,idx:c,copiedPath:U,onCopyPath:H,expanded:f.has(c),onToggle:()=>b(c)},`o${c}`)})}):t.jsx(pe,{grouped:d,left:e,right:r})})]})]})]})}function pe({grouped:e,left:r,right:n}){return t.jsxs("div",{className:"grid grid-cols-[200px_1fr_1fr] gap-x-2 gap-y-0.5 px-3 py-2 text-xs",children:[t.jsxs("div",{className:"grid grid-cols-[200px_1fr_1fr] gap-x-2 col-span-3 pb-2 mb-2 border-b border-border text-[10px] uppercase tracking-wider text-muted-foreground",children:[t.jsx("span",{children:"Path"}),t.jsxs("span",{children:["Left (Log #",r.id,")"]}),t.jsxs("span",{children:["Right (Log #",n.id,")"]})]}),e.map((s,d)=>{if(s.kind==="equal-run")return t.jsxs("div",{className:"col-span-3 px-2 py-1 text-xs text-muted-foreground/60",children:[s.ops.length," equal siblings collapsed — switch to Unified to expand"]},d);const o=s.op;return o.kind==="equal"?t.jsxs("div",{className:"col-span-3 grid grid-cols-[200px_1fr_1fr] gap-x-2 px-2 py-0.5 text-muted-foreground",children:[t.jsx("span",{className:"font-mono text-xs truncate",title:o.path,children:o.path}),t.jsx("span",{className:"font-mono text-xs break-all opacity-60",children:v(o.value,200)}),t.jsx("span",{className:"font-mono text-xs break-all opacity-60",children:v(o.value,200)})]},d):o.kind==="added"?t.jsxs("div",{className:"col-span-3 px-2 py-1 rounded text-xs border-l-2 border-l-emerald-400/70 bg-emerald-500/5",children:[t.jsx("div",{className:"font-mono text-xs text-muted-foreground mb-0.5",children:o.path}),t.jsxs("div",{className:"font-mono break-all text-emerald-300/90",children:["+ ",v(o.value,400)]})]},d):o.kind==="removed"?t.jsxs("div",{className:"col-span-3 px-2 py-1 rounded text-xs border-l-2 border-l-rose-400/70 bg-rose-500/5",children:[t.jsx("div",{className:"font-mono text-xs text-muted-foreground mb-0.5",children:o.path}),t.jsxs("div",{className:"font-mono break-all text-rose-300/90 line-through",children:["− ",v(o.value,400)]})]},d):t.jsxs("div",{className:"col-span-3 px-2 py-1 rounded text-xs border-l-2 border-l-amber-400/70 bg-amber-500/5",children:[t.jsx("div",{className:"font-mono text-xs text-muted-foreground mb-1",children:o.path}),t.jsxs("div",{className:"grid grid-cols-2 gap-2",children:[t.jsx("div",{className:"font-mono text-rose-300/90 break-all line-through",children:v(o.left,400)}),t.jsx("div",{className:"font-mono text-emerald-300/90 break-all",children:v(o.right,400)})]})]},d)})]})}export{ge as CompareDrawer};