@tonyclaw/agent-inspector 2.0.3 → 2.0.5

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

@@ -0,0 +1,16 @@
+import type { JSX } from "react";
+import ReactMarkdown from "react-markdown";
+
+const ANSWER_MARKDOWN_CLASS =
+  "prose prose-sm dark:prose-invert max-w-none text-[13px] leading-[1.65] " +
+  "[&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] " +
+  "[&_p]:my-1 [&_p]:leading-[1.65] [&_ul]:my-1 [&_ol]:my-1 [&_li]:my-0.5 " +
+  "[&_li]:leading-[1.6]";
+
+export function AnswerMarkdown({ text }: { text: string }): JSX.Element {
+  return (
+    <div className={ANSWER_MARKDOWN_CLASS}>
+      <ReactMarkdown>{text}</ReactMarkdown>
+    </div>
+  );
+}

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

@@ -550,11 +550,13 @@ function SideSummary({ log, side }: { log: CapturedLog; side: "left" | "right" }
       <div className="flex items-center gap-3 text-muted-foreground font-mono">
         {log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && (
           <span className="text-emerald-400">
-            Cache +{formatTokens(log.cacheCreationInputTokens)}
+            KV Cache +{formatTokens(log.cacheCreationInputTokens)}
           </span>
         )}
         {log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && (
-          <span className="text-purple-400">Cache ~{formatTokens(log.cacheReadInputTokens)}</span>
+          <span className="text-purple-400">
+            KV Cache ~{formatTokens(log.cacheReadInputTokens)}
+          </span>
         )}
         <span className="truncate" title={log.timestamp}>
           {log.timestamp}

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

@@ -1,5 +1,6 @@
 import { useState, memo, useMemo } from "react";
 import type { JSX } from "react";
+import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import type { CapturedLog } from "../../proxy/schemas";
 import {
   ConversationHeader,
@@ -29,6 +30,10 @@ export type ConversationGroupProps = {
   comparisonPredecessors: Map<number, CapturedLog>;
   /** When true, skip the group header and render content directly. */
   standalone?: boolean;
+  /** When true, the route-level session context already shows rollup metrics. */
+  hasPinnedSessionContext?: boolean;
+  /** Controls whether timestamps render as compact local time or full ISO strings. */
+  timeDisplayFormat: TimeDisplayFormat;
   /** Clear all logs that belong to this group. */
   onClearGroup: (ids: number[]) => void;
 };
@@ -56,6 +61,8 @@ export const ConversationGroup = memo(function ({
   comparisonPredecessors,
   onClearGroup,
   standalone = false,
+  hasPinnedSessionContext = false,
+  timeDisplayFormat,
 }: ConversationGroupProps): JSX.Element {
   const [expanded, setExpanded] = useState(false);
   const stats = useMemo(() => computeStats(group.logs), [group.logs]);
@@ -63,6 +70,7 @@ export const ConversationGroup = memo(function ({
   const endTime = group.logs[group.logs.length - 1]?.timestamp ?? new Date().toISOString();
   const mixed = hasMixedApiFormat(group.logs);
   const isLoading = group.logs.some((log) => log.responseStatus === null);
+  const showTraceRollupMetrics = standalone && !hasPinnedSessionContext;
 
   // Pre-compute stop reasons for each log — used by turnIndices
   const turnGroups = useMemo(() => buildTurnGroups(group.logs), [group.logs]);
@@ -82,6 +90,7 @@ export const ConversationGroup = memo(function ({
           hideApiFormat={mixed}
           isLoading={isLoading}
           userAgent={group.logs[0]?.userAgent ?? null}
+          timeDisplayFormat={timeDisplayFormat}
           onClear={() => onClearGroup(group.logs.map((l) => l.id))}
         />
       )}
@@ -92,6 +101,8 @@ export const ConversationGroup = memo(function ({
             logs={group.logs}
             scopeId={group.conversationId}
             slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+            showRollupMetrics={showTraceRollupMetrics}
+            timeDisplayFormat={timeDisplayFormat}
           />
           {turnGroups.map((tg) => (
             <TurnGroup
@@ -100,6 +111,7 @@ export const ConversationGroup = memo(function ({
               viewMode={viewMode}
               strip={strip}
               slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+              timeDisplayFormat={timeDisplayFormat}
               cacheTrends={cacheTrends}
               onCompareWithPrevious={onCompareWithPrevious}
               comparisonPredecessors={comparisonPredecessors}

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

@@ -12,6 +12,8 @@ import {
 } from "lucide-react";
 import type { JSX } from "react";
 import { getSessionPath } from "../../lib/sessionUrl";
+import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
+import { formatTimestampRange } from "../../lib/timeDisplay";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
 import { Badge } from "../ui/badge";
@@ -43,16 +45,13 @@ export type ConversationHeaderProps = {
   isLoading?: boolean;
   /** User-Agent string from the first log in the group. */
   userAgent?: string | null;
+  /** Controls whether timestamps render as compact local time or full ISO strings. */
+  timeDisplayFormat: TimeDisplayFormat;
   /** Clear all logs in this group. After confirmation the parent removes them
    *  from the in-memory store; this header is then unmounted. */
   onClear?: () => void;
 };
 
-function formatTimestamp(iso: string): string {
-  const date = new Date(iso);
-  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
-}
-
 export function ConversationHeader({
   conversationId,
   startTime,
@@ -66,6 +65,7 @@ export function ConversationHeader({
   hideApiFormat = false,
   isLoading = false,
   userAgent,
+  timeDisplayFormat,
   onClear,
 }: ConversationHeaderProps): JSX.Element {
   const [confirmOpen, setConfirmOpen] = useState(false);
@@ -157,7 +157,7 @@ export function ConversationHeader({
       <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
         <Clock className="size-3" />
         <span className="font-mono tabular-nums">
-          {formatTimestamp(startTime)} - {formatTimestamp(endTime)}
+          {formatTimestampRange(startTime, endTime, timeDisplayFormat)}
         </span>
       </span>
 

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

@@ -2,6 +2,7 @@ import { GitCompareArrows } from "lucide-react";
 import { Suspense, type JSX } from "react";
 import { useMemo, useRef, useState, memo } from "react";
 import type { CapturedLog } from "../../proxy/schemas";
+import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import { stripClaudeCodeBillingHeader } from "../../proxy/claudeCodeStrip";
 import { Button } from "../ui/button";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
@@ -48,6 +49,8 @@ export type LogEntryProps = {
   strip: boolean;
   /** Slow-response threshold in seconds. `0` disables the warning indicator. */
   slowResponseThresholdSeconds: number;
+  /** Controls whether timestamps render as compact local time or full ISO strings. */
+  timeDisplayFormat: TimeDisplayFormat;
   /**
    * Per-log cache token trend, looked up in the viewer-level trend map.
    * `null` (or absent) means the header should render with no arrows.
@@ -119,6 +122,7 @@ export const LogEntry = memo(function ({
   viewMode = "simple",
   strip,
   slowResponseThresholdSeconds,
+  timeDisplayFormat,
   cacheTrend = null,
   onCompareWithPrevious,
 }: LogEntryProps): JSX.Element {
@@ -135,10 +139,6 @@ export const LogEntry = memo(function ({
     () => adapter.analyzeRequest(log.rawRequestBody),
     [adapter, log.rawRequestBody],
   );
-  const responseAnalysis = useMemo(
-    () => adapter.analyzeResponse(log.responseText),
-    [adapter, log.responseText],
-  );
   const strippedRequestBody = useMemo(() => {
     if (!strip || resolvedFormat !== "anthropic" || log.rawRequestBody === null) {
       return null;
@@ -296,9 +296,9 @@ export const LogEntry = memo(function ({
           toolCount={requestAnalysis.toolCount}
           expanded={expanded}
           onToggle={() => setExpanded(!expanded)}
-          responseToolNames={responseAnalysis.toolNames}
           cacheTrend={cacheTrend}
           slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+          timeDisplayFormat={timeDisplayFormat}
           activeTab={activeTab}
           tabActions={tabActions}
           onReplay={

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

@@ -22,7 +22,9 @@ import {
   Zap,
 } from "lucide-react";
 import type { JSX, MouseEvent } from "react";
-import { memo, useMemo } from "react";
+import { memo } from "react";
+import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
+import { formatTimestamp } from "../../lib/timeDisplay";
 import { cn, formatTokens, getStatusCategory, type StatusCategory } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
 import { Badge } from "../ui/badge";
@@ -105,8 +107,6 @@ export type LogEntryHeaderProps = {
   toolCount?: number | null;
   expanded: boolean;
   onToggle: () => void;
-  /** Tool call names extracted from the model response (e.g., ["read_file", "grep"]). */
-  responseToolNames?: string[] | null;
   /** Per-log cache token trend (creation + read) relative to the previous log
    * in the same conversation group. When `undefined` or a field is `null`,
    * the corresponding cache span renders as it did before — no arrow.
@@ -124,6 +124,8 @@ export type LogEntryHeaderProps = {
   onReplay?: () => void;
   /** Slow-response threshold in seconds. `0` disables the warning indicator. */
   slowResponseThresholdSeconds?: number;
+  /** Controls whether timestamps render as compact local time or full ISO strings. */
+  timeDisplayFormat: TimeDisplayFormat;
 };
 
 export const LogEntryHeader = memo(function ({
@@ -132,12 +134,12 @@ export const LogEntryHeader = memo(function ({
   toolCount = null,
   expanded,
   onToggle,
-  responseToolNames = null,
   cacheTrend = null,
   activeTab,
   tabActions,
   onReplay,
   slowResponseThresholdSeconds = 0,
+  timeDisplayFormat,
 }: LogEntryHeaderProps): JSX.Element {
   const statusCategory = getStatusCategory(log.responseStatus);
   const isSlowResponse =
@@ -146,7 +148,6 @@ export const LogEntryHeader = memo(function ({
     log.elapsedMs > slowResponseThresholdSeconds * 1000;
 
   const hasTokens = log.inputTokens !== null || log.outputTokens !== null;
-  const toolNamesJoined = useMemo(() => responseToolNames?.join(", ") ?? null, [responseToolNames]);
 
   return (
     <TooltipProvider>
@@ -178,7 +179,9 @@ export const LogEntryHeader = memo(function ({
         {/* Request start time */}
         <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
           <Clock className="size-3" />
-          <span className="font-mono tabular-nums">{log.timestamp}</span>
+          <span className="font-mono tabular-nums" title={log.timestamp}>
+            {formatTimestamp(log.timestamp, timeDisplayFormat)}
+          </span>
         </span>
 
         {/* Model — logo icon only, model name in tooltip */}
@@ -261,30 +264,20 @@ export const LogEntryHeader = memo(function ({
         )}
         {/* Cache tokens */}
         {log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="flex items-center gap-1 text-xs shrink-0">
-                <CacheTrendIndicator trend={cacheTrend?.creation ?? null} />
-                <span className="font-mono tabular-nums text-emerald-400">
-                  Cache +{formatTokens(log.cacheCreationInputTokens)}
-                </span>
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>Tokens cached for reuse, reducing future API cost</TooltipContent>
-          </Tooltip>
+          <span className="flex items-center gap-1 text-xs shrink-0">
+            <CacheTrendIndicator trend={cacheTrend?.creation ?? null} />
+            <span className="font-mono tabular-nums text-emerald-400">
+              KV Cache +{formatTokens(log.cacheCreationInputTokens)}
+            </span>
+          </span>
         )}
         {log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="flex items-center gap-1 text-xs shrink-0">
-                <CacheTrendIndicator trend={cacheTrend?.read ?? null} />
-                <span className="font-mono tabular-nums text-purple-400">
-                  Cache ~{formatTokens(log.cacheReadInputTokens)}
-                </span>
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>Tokens served from cache, reducing API cost</TooltipContent>
-          </Tooltip>
+          <span className="flex items-center gap-1 text-xs shrink-0">
+            <CacheTrendIndicator trend={cacheTrend?.read ?? null} />
+            <span className="font-mono tabular-nums text-purple-400">
+              KV Cache ~{formatTokens(log.cacheReadInputTokens)}
+            </span>
+          </span>
         )}
 
         {/* Message count */}
@@ -303,14 +296,6 @@ export const LogEntryHeader = memo(function ({
           </span>
         )}
 
-        {/* Response tool calls — tool names the model requested to invoke */}
-        {responseToolNames !== null && responseToolNames.length > 0 && (
-          <span className="flex items-center gap-1 text-amber-400/80 text-xs shrink-0">
-            <Wrench className="size-3" />
-            <span className="font-mono tabular-nums truncate max-w-[160px]">{toolNamesJoined}</span>
-          </span>
-        )}
-
         {/* Origin */}
         {log.origin !== null && (
           <span

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

@@ -1,22 +1,31 @@
 import { RotateCcw } from "lucide-react";
 import type { JSX } from "react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { z } from "zod";
+import { useProviders } from "../../lib/useProviders";
 import { Button } from "../ui/button";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { ResponseView } from "./ResponseView";
 import type { CapturedLog } from "../../proxy/schemas";
+import {
+  buildReplayComparisons,
+  buildReplayMetrics,
+  readRequestModel,
+  replaceRequestModel,
+  type ReplayMetricComparison,
+  type ReplayMetricValue,
+} from "./replayComparison";
 
 const ReplayResultSchema = z.object({
   success: z.boolean(),
   error: z.string().optional(),
-  responseStatus: z.number().optional(),
-  responseText: z.string().optional(),
-  inputTokens: z.number().optional(),
-  outputTokens: z.number().optional(),
-  elapsedMs: z.number().optional(),
+  responseStatus: z.number().nullable().optional(),
+  responseText: z.string().nullable().optional(),
+  inputTokens: z.number().nullable().optional(),
+  outputTokens: z.number().nullable().optional(),
+  elapsedMs: z.number().nullable().optional(),
   streaming: z.boolean().optional(),
 });
 
@@ -28,7 +37,91 @@ type ReplayDialogProps = {
   onOpenChange: (open: boolean) => void;
 };
 
+type ReplayModelOption = {
+  key: string;
+  providerName: string;
+  model: string;
+};
+
+function formatElapsed(ms: number): string {
+  if (ms < 1000) return `${String(ms)}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function formatMetricValue(
+  value: ReplayMetricValue,
+  metricId: ReplayMetricComparison["id"],
+): string {
+  if (value === null) return "-";
+  if (typeof value === "boolean") return value ? "stream" : "non-stream";
+  switch (metricId) {
+    case "elapsed":
+      return formatElapsed(value);
+    case "input":
+    case "output":
+    case "bytes":
+      return value.toLocaleString();
+    case "status":
+      return String(value);
+    case "streaming":
+      return value ? "stream" : "non-stream";
+  }
+}
+
+function formatDelta(delta: number | null, metricId: ReplayMetricComparison["id"]): string {
+  if (delta === null) return "-";
+  const sign = delta > 0 ? "+" : "";
+  switch (metricId) {
+    case "elapsed":
+      return `${sign}${formatElapsed(delta)}`;
+    case "input":
+    case "output":
+    case "bytes":
+    case "status":
+      return `${sign}${delta.toLocaleString()}`;
+    case "streaming":
+      return "-";
+  }
+}
+
+function deltaToneClass(delta: number | null): string {
+  if (delta === null || delta === 0) return "text-muted-foreground";
+  if (delta > 0) return "text-amber-400";
+  return "text-emerald-400";
+}
+
+function ReplayComparisonTable({
+  comparisons,
+}: {
+  comparisons: ReplayMetricComparison[];
+}): JSX.Element {
+  return (
+    <div className="overflow-hidden rounded-md border border-border">
+      <div className="grid grid-cols-[1fr_1fr_1fr_1fr] bg-muted/40 px-3 py-2 text-[11px] font-medium text-muted-foreground">
+        <span>Metric</span>
+        <span>Original</span>
+        <span>Replay</span>
+        <span>Delta</span>
+      </div>
+      {comparisons.map((comparison) => (
+        <div
+          key={comparison.id}
+          className="grid grid-cols-[1fr_1fr_1fr_1fr] border-t border-border px-3 py-2 text-xs"
+        >
+          <span className="text-muted-foreground">{comparison.label}</span>
+          <span className="font-mono">{formatMetricValue(comparison.original, comparison.id)}</span>
+          <span className="font-mono">{formatMetricValue(comparison.replay, comparison.id)}</span>
+          <span className={`font-mono ${deltaToneClass(comparison.delta)}`}>
+            {formatDelta(comparison.delta, comparison.id)}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JSX.Element {
+  const { providers } = useProviders();
   const [modifiedBody, setModifiedBody] = useState<string>(() => {
     return log.rawRequestBody ?? "{}";
   });
@@ -73,6 +166,55 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
     onOpenChange(false);
   }
 
+  const replayModelOptions = useMemo<ReplayModelOption[]>(() => {
+    const options: ReplayModelOption[] = [];
+    for (const provider of providers) {
+      for (const model of provider.models) {
+        if (model.trim().length === 0) continue;
+        options.push({
+          key: `${provider.id}:${model}`,
+          providerName: provider.name,
+          model,
+        });
+      }
+    }
+    return options;
+  }, [providers]);
+  const currentReplayModel = readRequestModel(modifiedBody) ?? log.model ?? "";
+
+  function handleReplayModelChange(model: string): void {
+    const result = replaceRequestModel(modifiedBody, model);
+    if (result.error !== null) {
+      setError(result.error);
+      return;
+    }
+    setModifiedBody(result.body);
+    setReplayResult(null);
+    setError(null);
+  }
+
+  const originalMetrics = buildReplayMetrics({
+    status: log.responseStatus,
+    elapsedMs: log.elapsedMs,
+    inputTokens: log.inputTokens,
+    outputTokens: log.outputTokens,
+    responseText: log.responseText,
+    streaming: log.streaming,
+  });
+  const replayMetrics =
+    replayResult === null
+      ? null
+      : buildReplayMetrics({
+          status: replayResult.responseStatus,
+          elapsedMs: replayResult.elapsedMs,
+          inputTokens: replayResult.inputTokens,
+          outputTokens: replayResult.outputTokens,
+          responseText: replayResult.responseText,
+          streaming: replayResult.streaming,
+        });
+  const replayComparisons =
+    replayMetrics === null ? [] : buildReplayComparisons(originalMetrics, replayMetrics);
+
   return (
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent className="max-w-4xl max-h-[85vh] overflow-auto">
@@ -88,9 +230,34 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
             <TabsTrigger value="modified">Modified Request</TabsTrigger>
             <TabsTrigger value="original">Original Response</TabsTrigger>
             {replayResult && <TabsTrigger value="replay">Replay Response</TabsTrigger>}
+            {replayResult && <TabsTrigger value="compare">Compare</TabsTrigger>}
           </TabsList>
 
           <TabsContent value="modified" className="space-y-4">
+            {replayModelOptions.length > 0 && (
+              <div className="grid gap-1.5">
+                <label htmlFor={`replay-model-${String(log.id)}`} className="text-sm font-medium">
+                  Replay target
+                </label>
+                <select
+                  id={`replay-model-${String(log.id)}`}
+                  value={currentReplayModel}
+                  onChange={(event) => handleReplayModelChange(event.currentTarget.value)}
+                  className="h-8 rounded-md border border-input bg-background px-2 text-sm"
+                >
+                  {currentReplayModel === "" && <option value="">Select model</option>}
+                  {currentReplayModel !== "" &&
+                    !replayModelOptions.some((option) => option.model === currentReplayModel) && (
+                      <option value={currentReplayModel}>{currentReplayModel}</option>
+                    )}
+                  {replayModelOptions.map((option) => (
+                    <option key={option.key} value={option.model}>
+                      {option.providerName} / {option.model}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
             <div>
               <label className="text-sm font-medium mb-2 block">Request Body (JSON)</label>
               <TooltipProvider>
@@ -127,6 +294,10 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
               </Button>
             </div>
 
+            {replayResult !== null && (
+              <ReplayComparisonTable comparisons={replayComparisons.slice(0, 4)} />
+            )}
+
             {replayResult && replayResult.success && (
               <Tabs defaultValue="parsed">
                 <TabsList>
@@ -184,7 +355,7 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
 
           {replayResult && replayResult.success && (
             <TabsContent value="replay">
-              {replayResult.responseText !== null ? (
+              {(replayResult.responseText ?? null) !== null ? (
                 <Tabs defaultValue="parsed">
                   <TabsList>
                     <TabsTrigger value="parsed">Response</TabsTrigger>
@@ -202,7 +373,7 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
                   </TabsContent>
                   <TabsContent value="raw">
                     <pre className="font-mono text-xs whitespace-pre-wrap bg-muted p-3 rounded-md max-h-96 overflow-auto">
-                      {replayResult.responseText}
+                      {replayResult.responseText ?? ""}
                     </pre>
                   </TabsContent>
                 </Tabs>
@@ -211,6 +382,17 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
               )}
             </TabsContent>
           )}
+
+          {replayResult && (
+            <TabsContent value="compare" className="space-y-3">
+              <ReplayComparisonTable comparisons={replayComparisons} />
+              {replayResult.success ? null : (
+                <div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
+                  {replayResult.error ?? "Replay failed"}
+                </div>
+              )}
+            </TabsContent>
+          )}
         </Tabs>
       </DialogContent>
     </Dialog>

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

@@ -2,9 +2,9 @@ import { AlertTriangle, Zap } from "lucide-react";
 import type { JSX } from "react";
 import { memo } from "react";
 import { useMemo } from "react";
-import ReactMarkdown from "react-markdown";
 import { cn, formatTokens, getStatusCategory, type StatusCategory } from "../../lib/utils";
 import type { RequestFormat } from "../../proxy/schemas";
+import { AnswerMarkdown } from "./AnswerMarkdown";
 import { formatViewFor } from "./formats";
 import { getLogFormatAdapter } from "./log-formats";
 
@@ -61,11 +61,7 @@ function ErrorResponseView({ text }: { text: string }): JSX.Element {
 }
 
 function MarkdownFallbackView({ text }: { text: string }): JSX.Element {
-  return (
-    <div className="prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
-      <ReactMarkdown>{text}</ReactMarkdown>
-    </div>
-  );
+  return <AnswerMarkdown text={text} />;
 }
 
 export const ResponseView = memo(function ResponseView({
@@ -152,14 +148,14 @@ export const ResponseView = memo(function ResponseView({
               cacheCreationInputTokens !== undefined &&
               cacheCreationInputTokens > 0 && (
                 <span className="font-mono tabular-nums text-emerald-400">
-                  Cache +{formatTokens(cacheCreationInputTokens)}
+                  KV Cache +{formatTokens(cacheCreationInputTokens)}
                 </span>
               )}
             {cacheReadInputTokens !== null &&
               cacheReadInputTokens !== undefined &&
               cacheReadInputTokens > 0 && (
                 <span className="font-mono tabular-nums text-purple-400">
-                  Cache ~{formatTokens(cacheReadInputTokens)}
+                  KV Cache ~{formatTokens(cacheReadInputTokens)}
                 </span>
               )}
           </span>