@tonyclaw/agent-inspector 2.0.3 → 2.0.4

package/src/components/proxy-viewer/formats/anthropic/ContentBlocks.tsx

@@ -1,7 +1,7 @@
 import { Brain, ChevronDown, ChevronRight, Terminal } from "lucide-react";
 import { type JSX, memo, useState } from "react";
-import ReactMarkdown from "react-markdown";
 import type { ResponseContentBlockType } from "../../../../proxy/schemas";
+import { AnswerMarkdown } from "../../AnswerMarkdown";
 import { Badge } from "../../../ui/badge";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../ui/collapsible";
 import { JsonViewer } from "../../../ui/json-viewer";
@@ -30,9 +30,7 @@ function SystemReminderBlock({ text }: { text: string }): JSX.Element {
       </CollapsibleTrigger>
       <CollapsibleContent>
         <div className="pl-4 pt-1">
-          <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>
+          <AnswerMarkdown text={text} />
         </div>
       </CollapsibleContent>
     </Collapsible>
@@ -50,11 +48,7 @@ export const TextBlock = memo(function TextBlock({ text }: { text: string }): JS
   return (
     <div className="space-y-2">
       {thinking !== null && <ThinkingBlock thinking={thinking} />}
-      {remainingText.length > 0 && (
-        <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>{remainingText}</ReactMarkdown>
-        </div>
-      )}
+      {remainingText.length > 0 && <AnswerMarkdown text={remainingText} />}
       {thinking === null && remainingText.length === 0 && (
         <p className="text-xs text-muted-foreground italic">Empty text block</p>
       )}
@@ -113,9 +107,9 @@ export const ToolUseBlock = memo(function ToolUseBlock({
 
   return (
     <Collapsible open={open} onOpenChange={setOpen}>
-      <div className="border-l-2 border-blue-500/40 my-1">
-        <CollapsibleTrigger className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-blue-500/5 transition-colors rounded-r-sm group">
-          <Terminal className="size-3.5 text-blue-400 shrink-0" />
+      <div className="border-l-2 border-sky-400/25 my-1">
+        <CollapsibleTrigger className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-sky-400/[0.04] transition-colors rounded-r-sm group">
+          <Terminal className="size-3.5 text-sky-400/70 shrink-0" />
           <Badge variant="outline" className="text-[10px] font-mono px-1.5 py-0 h-4">
             {name}
           </Badge>

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

@@ -1,8 +1,8 @@
 import { StopCircle, Terminal, Zap } from "lucide-react";
 import { memo, useState, type JSX } from "react";
-import ReactMarkdown from "react-markdown";
 import type { OpenAIResponse, OpenAIToolCall } from "../../../../proxy/schemas";
 import { formatTokens } from "../../../../lib/utils";
+import { AnswerMarkdown } from "../../AnswerMarkdown";
 import { Badge } from "../../../ui/badge";
 import { JsonViewer } from "../../../ui/json-viewer";
 import { safeJsonValue } from "../../../ui/json-viewer-bulk";
@@ -29,8 +29,8 @@ function parseToolArguments(raw: string | undefined): unknown {
 }
 
 /** One collapsible tool_use row, mirroring the Anthropic ToolUseBlock visual
- *  treatment (Terminal icon, blue accent, name as a Badge, JSON input in a
- *  scrollable JsonViewer). */
+ *  treatment (Terminal icon, soft tool accent, name as a Badge, JSON input in
+ *  a scrollable JsonViewer). */
 function OpenAIToolCallBlock({ call }: { call: OpenAIToolCall }): JSX.Element {
   const [open, setOpen] = useState(false);
   const name = call.function.name ?? "(unnamed tool)";
@@ -38,9 +38,9 @@ function OpenAIToolCallBlock({ call }: { call: OpenAIToolCall }): JSX.Element {
 
   return (
     <Collapsible open={open} onOpenChange={setOpen}>
-      <div className="border-l-2 border-blue-500/40 my-1">
-        <CollapsibleTrigger className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-blue-500/5 transition-colors rounded-r-sm group">
-          <Terminal className="size-3.5 text-blue-400 shrink-0" />
+      <div className="border-l-2 border-sky-400/25 my-1">
+        <CollapsibleTrigger className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-sky-400/[0.04] transition-colors rounded-r-sm group">
+          <Terminal className="size-3.5 text-sky-400/70 shrink-0" />
           <Badge variant="outline" className="text-[10px] font-mono px-1.5 py-0 h-4">
             {name}
           </Badge>
@@ -133,11 +133,7 @@ export const OpenAIResponseView = memo(function OpenAIResponseView({
               <div className="space-y-2">
                 {/* Show thinking from tags only if no reasoning_content field */}
                 {thinking !== null && !hasReasoningField && <ThinkingBlock thinking={thinking} />}
-                {remainingText.length > 0 && (
-                  <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>{remainingText}</ReactMarkdown>
-                  </div>
-                )}
+                {remainingText.length > 0 && <AnswerMarkdown text={remainingText} />}
               </div>
             );
           })()}
@@ -146,10 +142,10 @@ export const OpenAIResponseView = memo(function OpenAIResponseView({
           <OpenAIToolCallBlock key={call.id ?? `tc-${i}`} call={call} />
         ))}
         {message?.function_call !== null && message?.function_call !== undefined && (
-          <div className="border border-blue-500/30 rounded-md p-3 bg-blue-500/5">
-            <div className="text-xs text-blue-400 font-mono mb-1">function_call</div>
+          <div className="border border-sky-400/20 rounded-md p-3 bg-muted/20">
+            <div className="text-xs text-sky-400/80 font-mono mb-1">function_call</div>
             <div className="font-mono text-xs">
-              <span className="text-blue-300">{message.function_call.name}</span>
+              <span className="text-foreground/80">{message.function_call.name}</span>
               <span className="text-muted-foreground">({message.function_call.arguments})</span>
             </div>
           </div>

package/src/lib/runtimeConfig.ts

@@ -2,6 +2,11 @@ import { z } from "zod";
 
 export const DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS = 10;
 export const MAX_SLOW_RESPONSE_THRESHOLD_SECONDS = 600;
+export const DEFAULT_TIME_DISPLAY_FORMAT = "time";
+
+export const TimeDisplayFormatSchema = z.enum(["time", "full"]);
+
+export type TimeDisplayFormat = z.infer<typeof TimeDisplayFormatSchema>;
 
 /**
  * Schema for the runtime proxy config. Shared between server
@@ -20,6 +25,7 @@ export const RuntimeConfigSchema = z.object({
     .min(0)
     .max(MAX_SLOW_RESPONSE_THRESHOLD_SECONDS)
     .default(DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS),
+  timeDisplayFormat: TimeDisplayFormatSchema.default(DEFAULT_TIME_DISPLAY_FORMAT),
 });
 
 export type RuntimeConfig = z.infer<typeof RuntimeConfigSchema>;

package/src/lib/timeDisplay.ts

@@ -0,0 +1,22 @@
+import type { TimeDisplayFormat } from "./runtimeConfig";
+
+export function formatTimestamp(iso: string, format: TimeDisplayFormat): string {
+  switch (format) {
+    case "full":
+      return iso;
+    case "time":
+      return new Date(iso).toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      });
+  }
+}
+
+export function formatTimestampRange(
+  startedAt: string,
+  endedAt: string,
+  format: TimeDisplayFormat,
+): string {
+  return `${formatTimestamp(startedAt, format)} - ${formatTimestamp(endedAt, format)}`;
+}

package/src/lib/useOnboarding.ts

@@ -2,6 +2,7 @@ import useSWR, { type SWRResponse, useSWRConfig } from "swr";
 import { fetchJson } from "./apiClient";
 import {
   DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+  DEFAULT_TIME_DISPLAY_FORMAT,
   RuntimeConfigSchema,
   type RuntimeConfig,
 } from "./runtimeConfig";
@@ -66,6 +67,7 @@ export function useOnboarding(): UseOnboarding {
         hasSeenOnboarding: true,
         slowResponseThresholdSeconds:
           response.data?.slowResponseThresholdSeconds ?? DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+        timeDisplayFormat: response.data?.timeDisplayFormat ?? DEFAULT_TIME_DISPLAY_FORMAT,
       },
       rollbackOnError: true,
       revalidate: false,

package/src/lib/useStripConfig.ts

@@ -2,7 +2,9 @@ import useSWR, { type SWRResponse, useSWRConfig } from "swr";
 import { fetchJson } from "./apiClient";
 import {
   DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+  DEFAULT_TIME_DISPLAY_FORMAT,
   RuntimeConfigSchema,
+  type TimeDisplayFormat,
   type RuntimeConfig,
 } from "./runtimeConfig";
 
@@ -36,10 +38,12 @@ export async function setRuntimeConfig(patch: Partial<RuntimeConfig>): Promise<R
 export type UseStripConfig = {
   strip: boolean;
   slowResponseThresholdSeconds: number;
+  timeDisplayFormat: TimeDisplayFormat;
   isLoading: boolean;
   isError: boolean;
   setStrip: (next: boolean) => Promise<void>;
   setSlowResponseThresholdSeconds: (next: number) => Promise<void>;
+  setTimeDisplayFormat: (next: TimeDisplayFormat) => Promise<void>;
 };
 
 /**
@@ -64,12 +68,14 @@ export function useStripConfig(): UseStripConfig {
   const strip = response.data?.stripClaudeCodeBillingHeader ?? false;
   const slowResponseThresholdSeconds =
     response.data?.slowResponseThresholdSeconds ?? DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS;
+  const timeDisplayFormat = response.data?.timeDisplayFormat ?? DEFAULT_TIME_DISPLAY_FORMAT;
 
   const optimisticConfig = (patch: Partial<RuntimeConfig>): RuntimeConfig => ({
     stripClaudeCodeBillingHeader: response.data?.stripClaudeCodeBillingHeader ?? false,
     hasSeenOnboarding: response.data?.hasSeenOnboarding ?? false,
     slowResponseThresholdSeconds:
       response.data?.slowResponseThresholdSeconds ?? DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+    timeDisplayFormat: response.data?.timeDisplayFormat ?? DEFAULT_TIME_DISPLAY_FORMAT,
     ...patch,
   });
 
@@ -97,12 +103,22 @@ export function useStripConfig(): UseStripConfig {
     );
   };
 
+  const setTimeDisplayFormat = async (next: TimeDisplayFormat): Promise<void> => {
+    await globalMutate(STRIP_CONFIG_SWR_KEY, setRuntimeConfig({ timeDisplayFormat: next }), {
+      optimisticData: optimisticConfig({ timeDisplayFormat: next }),
+      rollbackOnError: true,
+      revalidate: false,
+    });
+  };
+
   return {
     strip,
     slowResponseThresholdSeconds,
+    timeDisplayFormat,
     isLoading: response.isLoading,
     isError: response.error !== undefined,
     setStrip,
     setSlowResponseThresholdSeconds,
+    setTimeDisplayFormat,
   };
 }

package/src/proxy/config.ts

@@ -12,6 +12,7 @@ import { logger } from "./logger";
 import { getDataDir } from "./dataDir";
 import {
   DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+  DEFAULT_TIME_DISPLAY_FORMAT,
   RuntimeConfigSchema,
   type RuntimeConfig,
 } from "../lib/runtimeConfig";
@@ -79,6 +80,7 @@ function resolveInitialConfig(): RuntimeConfig {
       stripClaudeCodeBillingHeader: true,
       hasSeenOnboarding: false,
       slowResponseThresholdSeconds: DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+      timeDisplayFormat: DEFAULT_TIME_DISPLAY_FORMAT,
     };
   }
 
@@ -87,6 +89,7 @@ function resolveInitialConfig(): RuntimeConfig {
     stripClaudeCodeBillingHeader: false,
     hasSeenOnboarding: false,
     slowResponseThresholdSeconds: DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+    timeDisplayFormat: DEFAULT_TIME_DISPLAY_FORMAT,
   };
 }
 

package/src/routes/api/config.ts

@@ -1,6 +1,9 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { z } from "zod";
-import { MAX_SLOW_RESPONSE_THRESHOLD_SECONDS } from "../../lib/runtimeConfig";
+import {
+  MAX_SLOW_RESPONSE_THRESHOLD_SECONDS,
+  TimeDisplayFormatSchema,
+} from "../../lib/runtimeConfig";
 import { getConfig, setConfig, RuntimeConfigSchema } from "../../proxy/config";
 
 // Partial schema for PATCH: at least one known field must be present.
@@ -14,6 +17,7 @@ const RuntimeConfigPatchSchema = z
       .min(0)
       .max(MAX_SLOW_RESPONSE_THRESHOLD_SECONDS)
       .optional(),
+    timeDisplayFormat: TimeDisplayFormatSchema.optional(),
   })
   .strict()
   .refine((v) => Object.keys(v).length > 0, {