@tonyclaw/llm-inspector 1.14.8 → 1.14.9

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

@@ -3,61 +3,39 @@ import { cn } from "../../lib/utils";
 import type { StopReason } from "../../lib/stopReason";
 
 export type ThreadConnectorProps = {
-  /** The stop reason extracted from this log entry's response. */
   stopReason: StopReason;
-  /** True when the response is still in-flight (responseStatus === null). */
   isPending: boolean;
-  /** True when this is the first entry in the group. */
   isFirst: boolean;
-  /** True when this is the last entry in the group. */
   isLast: boolean;
+  /** True when this entry starts a new turn (first overall, or after end_turn/stop). */
+  isTurnStart: boolean;
 };
 
 /**
- * Renders the vertical timeline connector on the left side of a log entry
- * in thread view. A continuous line runs through intermediate entries, with:
- * - Line starts from the top for the first entry
- * - Line continues through intermediate entries
- * - Line ends at a turn-boundary dot/cap when stop_reason is end_turn/stop
- * - Dimmed/dashed line for pending (in-flight) entries
- * - A solid dot marks turn boundaries
+ * Vertical timeline connector for thread view. Uses flexbox layout (no
+ * absolute positioning) so the connector naturally tracks its sibling
+ * LogEntry height — no scroll jitter.
  */
 export function ThreadConnector({
   stopReason,
   isPending,
   isFirst,
-  isLast,
+  isLast: _isLast,
+  isTurnStart,
 }: ThreadConnectorProps): JSX.Element {
-  // Turn boundary: "end_turn" for Anthropic, "stop" for OpenAI
   const isBoundary = stopReason === "end_turn" || stopReason === "stop";
-  // Tool use: the turn continues
   const isToolUse = stopReason === "tool_use";
 
-  // Compute classes for each segment of the connector:
-  // - top half line (from previous entry down to this entry's top)
-  // - center dot/circle (this entry's response marker)
-  // - bottom half line (from this entry's bottom down to the next entry)
-
-  const lineClass = cn(
-    "w-0.5 bg-muted-foreground/30",
-    isPending && "border-dashed bg-transparent border-l-2 border-muted-foreground/20",
-  );
-
   return (
-    <div className="flex items-stretch h-full w-6 shrink-0 relative">
-      {/* Top line segment */}
-      <div className="absolute left-1/2 -translate-x-1/2 w-0.5 top-0 flex flex-col items-center">
-        {!isFirst && (
-          <div
-            className={cn("w-0.5 grow", "bg-muted-foreground/30", "h-4")}
-            style={{ minHeight: "0.5rem" }}
-          />
-        )}
-        {isFirst && <div className="h-4" />}
+    <div className="flex flex-col items-center w-6 shrink-0">
+      {/* Top: incoming line from previous entry, or empty spacer for first.
+           Fixed height so the marker stays near the LogEntry header row. */}
+      <div className="flex justify-center h-4">
+        {!isFirst && <div className="w-0.5 bg-muted-foreground/30" />}
       </div>
 
-      {/* Center marker */}
-      <div className="absolute left-1/2 -translate-x-1/2 top-4 flex items-center justify-center z-10">
+      {/* Center marker — aligned with the LogEntry header row */}
+      <div className="flex items-center justify-center py-0.5">
         {isBoundary ? (
           <div
             className={cn(
@@ -69,8 +47,13 @@ export function ThreadConnector({
           />
         ) : isToolUse ? (
           <div
-            className="size-2 rounded-full bg-muted-foreground/25"
-            title="Tool Use — turn continues"
+            className={cn(
+              "size-2 rounded-full",
+              isTurnStart
+                ? "bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.5)]"
+                : "bg-muted-foreground/25",
+            )}
+            title={isTurnStart ? "Tool Use — start of turn" : "Tool Use — turn continues"}
           />
         ) : isPending ? (
           <div
@@ -78,26 +61,32 @@ export function ThreadConnector({
             title="Response pending"
           />
         ) : (
-          <div className="size-1.5 rounded-full bg-muted-foreground/30" />
+          <div
+            className={cn(
+              "size-1.5 rounded-full",
+              isTurnStart
+                ? "bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.5)]"
+                : "bg-muted-foreground/30",
+            )}
+          />
         )}
       </div>
 
-      {/* Bottom line segment */}
-      <div
-        className="absolute left-1/2 -translate-x-1/2 w-0.5 top-4 flex flex-col items-center"
-        style={{ bottom: 0 }}
-      >
-        {!isBoundary && (
+      {/* Bottom: outgoing line to next entry, or short terminator at boundaries.
+           flex-1 fills the remaining height of the LogEntry card. */}
+      <div className="flex-1 flex justify-center min-h-1">
+        {isBoundary ? (
+          <div className="w-0.5 bg-muted-foreground/10 h-4" />
+        ) : (
           <div
             className={cn(
-              "w-0.5 flex-1",
+              "w-0.5 h-full",
               isPending
                 ? "border-dashed bg-transparent border-l-2 border-muted-foreground/20"
                 : "bg-muted-foreground/30",
             )}
           />
         )}
-        {isBoundary && <div className="w-0.5 h-4 bg-muted-foreground/10" />}
       </div>
     </div>
   );

package/src/proxy/formats/anthropic/handler.ts

@@ -60,11 +60,8 @@ export const AnthropicFormatHandler: FormatHandler = {
       const json: unknown = JSON.parse(rawBody);
       if (typeof json === "object" && json !== null && !Array.isArray(json)) {
         const keys = Object.keys(json);
-        if (keys.includes("model") && keys.includes("messages")) {
-          if (keys.includes("system") || keys.includes("tools")) {
-            return true;
-          }
-        }
+        // Anthropic puts `system` as a top-level key alongside `model` and `messages`
+        return keys.includes("model") && keys.includes("messages") && keys.includes("system");
       }
       return false;
     } catch {

package/src/proxy/formats/openai/handler.ts

@@ -25,11 +25,41 @@ export const OpenAIFormatHandler: FormatHandler = {
   extractTokens(responseBody: string): TokenUsage {
     const parsed = parseOpenAIResponse(responseBody);
     if (parsed) {
+      // OpenAI puts cached_tokens in usage.prompt_tokens_details (passthrough field)
+      let cacheReadInputTokens: number | null = null;
+      try {
+        const raw: unknown = JSON.parse(responseBody);
+        if (raw !== null && typeof raw === "object" && !Array.isArray(raw)) {
+          const usageDesc = Object.getOwnPropertyDescriptor(raw, "usage");
+          if (
+            usageDesc !== undefined &&
+            typeof usageDesc.value === "object" &&
+            usageDesc.value !== null
+          ) {
+            const detailsDesc = Object.getOwnPropertyDescriptor(
+              usageDesc.value,
+              "prompt_tokens_details",
+            );
+            if (
+              detailsDesc !== undefined &&
+              typeof detailsDesc.value === "object" &&
+              detailsDesc.value !== null
+            ) {
+              const cacheDesc = Object.getOwnPropertyDescriptor(detailsDesc.value, "cached_tokens");
+              if (cacheDesc !== undefined && typeof cacheDesc.value === "number") {
+                cacheReadInputTokens = cacheDesc.value;
+              }
+            }
+          }
+        }
+      } catch {
+        // ignore parse errors
+      }
       return {
         inputTokens: parsed.usage.prompt_tokens ?? null,
         outputTokens: parsed.usage.completion_tokens ?? null,
         cacheCreationInputTokens: null,
-        cacheReadInputTokens: null,
+        cacheReadInputTokens,
       };
     }
     return {
@@ -55,12 +85,8 @@ export const OpenAIFormatHandler: FormatHandler = {
       const json: unknown = JSON.parse(rawBody);
       if (typeof json === "object" && json !== null && !Array.isArray(json)) {
         const keys = Object.keys(json);
-        if (keys.includes("model") && keys.includes("messages")) {
-          // OpenAI doesn't use "system" or "tools" keys at root level
-          if (!keys.includes("system") && !keys.includes("tools")) {
-            return true;
-          }
-        }
+        // OpenAI has `model` and `messages` at the top level, but NOT `system`
+        return keys.includes("model") && keys.includes("messages") && !keys.includes("system");
       }
       return false;
     } catch {

package/src/proxy/formats/openai/schemas.ts

@@ -73,6 +73,7 @@ export const OpenAIRequestSchema = z.object({
   tools: z.array(OpenAIToolDefinition).optional(),
   tool_choice: z
     .union([
+      z.enum(["auto", "none", "required"]),
       z.object({ type: z.literal("auto") }),
       z.object({ type: z.literal("none") }),
       z.object({ type: z.literal("function"), function: z.object({ name: z.string() }) }),

package/src/proxy/formats/openai/stream.ts

@@ -93,6 +93,30 @@ export function extractOpenAIStream(
         promptTokens = chunk.usage.prompt_tokens ?? 0;
         completionTokens = chunk.usage.completion_tokens ?? 0;
         log.inputTokens = promptTokens;
+        // Extract cached_tokens from raw parsed object (passthrough field in usage)
+        if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
+          const usageDesc = Object.getOwnPropertyDescriptor(parsed, "usage");
+          if (
+            usageDesc !== undefined &&
+            typeof usageDesc.value === "object" &&
+            usageDesc.value !== null
+          ) {
+            const detailsDesc = Object.getOwnPropertyDescriptor(
+              usageDesc.value,
+              "prompt_tokens_details",
+            );
+            if (
+              detailsDesc !== undefined &&
+              typeof detailsDesc.value === "object" &&
+              detailsDesc.value !== null
+            ) {
+              const cacheDesc = Object.getOwnPropertyDescriptor(detailsDesc.value, "cached_tokens");
+              if (cacheDesc !== undefined && typeof cacheDesc.value === "number") {
+                log.cacheReadInputTokens = cacheDesc.value;
+              }
+            }
+          }
+        }
         usageCaptured = true;
       }
 

package/src/proxy/handler.ts

@@ -5,7 +5,7 @@ import { extractRequestMetadata } from "./schemas";
 import { registry } from "./formats";
 import { findProviderByModel } from "./providers";
 import { getClientInfo } from "./socketTracker";
-import { formatForPath, type FormatHandler } from "./formats";
+import { formatForPath, formatRegistry, type FormatHandler } from "./formats";
 import {
   PROXY_IDENTITY,
   PRESERVE_HEADERS,
@@ -308,6 +308,12 @@ export async function handleProxy(req: Request): Promise<Response> {
   upstreamHeaders.forEach((value, key) => {
     upstreamHeadersObj[key.toLowerCase()] = value;
   });
+  // Detect the true format from the request body for accurate UI display.
+  // The path-based format (formatHandler.format) drives routing, but the body
+  // structure determines whether it's actually Anthropic or OpenAI.
+  const bodyFormat = formatRegistry.detectFormat(requestBody);
+  const displayApiFormat = bodyFormat !== "unknown" ? bodyFormat : formatHandler.format;
+
   const log = await createLog(
     req.method,
     parsed.apiPath,
@@ -316,7 +322,7 @@ export async function handleProxy(req: Request): Promise<Response> {
     clientInfo,
     rawHeaders,
     upstreamHeadersObj,
-    formatHandler.format,
+    displayApiFormat,
     model,
     sessionId,
     preAcquiredId,

package/src/proxy/schemas.ts

@@ -111,9 +111,12 @@ function detectFormat(rawBody: string | null): RequestFormat {
   try {
     const json: unknown = JSON.parse(rawBody);
     if (typeof json === "object" && json !== null && !Array.isArray(json)) {
-      const keys = Object.keys(json);
-      if (keys.includes("model") && keys.includes("messages")) {
-        if (keys.includes("system") || keys.includes("tools")) {
+      const hasModel = safeGetProperty(json, "model") !== undefined;
+      const hasMessages = safeGetProperty(json, "messages") !== undefined;
+      if (hasModel && hasMessages) {
+        // Anthropic requests put `system` as a top-level key; OpenAI does not.
+        // Both formats can have `tools`, so we check `system` as the discriminator.
+        if (safeGetProperty(json, "system") !== undefined) {
           return "anthropic";
         }
         const msgVal = safeGetProperty(json, "messages");