@tonyclaw/agent-inspector 2.0.3 → 2.0.5

package/.output/server/index.mjs

@@ -38,107 +38,107 @@ const assets = {
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-06-20T07:49:57.206Z",
+    "mtime": "2026-06-21T02:55:38.892Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/CompareDrawer-D5A4bTfV.js": {
+  "/assets/minimax-BPMzvuL-.jpeg": {
+    "type": "image/jpeg",
+    "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
+    "mtime": "2026-06-21T02:55:38.892Z",
+    "size": 6918,
+    "path": "../public/assets/minimax-BPMzvuL-.jpeg"
+  },
+  "/assets/CompareDrawer-3nRwtk8J.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"4a1f-mEPVKgxEcmIrRzyfYSrf+TEFNes"',
-    "mtime": "2026-06-20T07:49:57.206Z",
-    "size": 18975,
-    "path": "../public/assets/CompareDrawer-D5A4bTfV.js"
+    "etag": '"4a25-urgvq4zVkJNkh48bDzRCZpmV0XU"',
+    "mtime": "2026-06-21T02:55:38.893Z",
+    "size": 18981,
+    "path": "../public/assets/CompareDrawer-3nRwtk8J.js"
   },
-  "/assets/index-FqQZbfl2.js": {
+  "/assets/index-B_dffD3u.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"74-el2/zDM0d+yANqsiilX18eIScpc"',
-    "mtime": "2026-06-20T07:49:57.206Z",
+    "etag": '"74-G34R32wRb35yFy01Xx5+tisQpbk"',
+    "mtime": "2026-06-21T02:55:38.892Z",
     "size": 116,
-    "path": "../public/assets/index-FqQZbfl2.js"
+    "path": "../public/assets/index-B_dffD3u.js"
   },
-  "/assets/index-D7wwbwly.css": {
+  "/assets/index-CX796gvi.css": {
     "type": "text/css; charset=utf-8",
-    "etag": '"17293-5C6kMCq9PaxOjrbr7Or2ITIT6Lo"',
-    "mtime": "2026-06-20T07:49:57.206Z",
-    "size": 94867,
-    "path": "../public/assets/index-D7wwbwly.css"
-  },
-  "/assets/minimax-BPMzvuL-.jpeg": {
-    "type": "image/jpeg",
-    "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-06-20T07:49:57.206Z",
-    "size": 6918,
-    "path": "../public/assets/minimax-BPMzvuL-.jpeg"
+    "etag": '"17a41-dqXsKD+MttGurME/qf9nmjJckRY"',
+    "mtime": "2026-06-21T02:55:38.892Z",
+    "size": 96833,
+    "path": "../public/assets/index-CX796gvi.css"
   },
-  "/assets/json-viewer-BbU0n8eM.js": {
+  "/assets/json-viewer-IXejqXB0.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"1e652-M43x58m2bH0hBJMNDpGZ/fDfT5s"',
-    "mtime": "2026-06-20T07:49:57.207Z",
-    "size": 124498,
-    "path": "../public/assets/json-viewer-BbU0n8eM.js"
+    "etag": '"1e653-JGlILG827/WNy4+hkJi+2gTndaU"',
+    "mtime": "2026-06-21T02:55:38.893Z",
+    "size": 124499,
+    "path": "../public/assets/json-viewer-IXejqXB0.js"
   },
-  "/assets/main-CZT_F-gu.js": {
+  "/assets/ResponseView-Cvc-ct4E.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"5138c-VrHslavJjlr9YgDZ13bVuWsHMqQ"',
-    "mtime": "2026-06-20T07:49:57.207Z",
-    "size": 332684,
-    "path": "../public/assets/main-CZT_F-gu.js"
+    "etag": '"6aab-UwVVOTtKRLo51GriiJxR9m6Feak"',
+    "mtime": "2026-06-21T02:55:38.893Z",
+    "size": 27307,
+    "path": "../public/assets/ResponseView-Cvc-ct4E.js"
   },
-  "/assets/ReplayDialog-CxUk_TF0.js": {
+  "/assets/ReplayDialog-Cl62N9PI.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"11c0-esa6w7Upc98DpnzYsJtOduS9W7w"',
-    "mtime": "2026-06-20T07:49:57.207Z",
-    "size": 4544,
-    "path": "../public/assets/ReplayDialog-CxUk_TF0.js"
+    "etag": '"2383-flKSjr0F8tecuRkIDNpAYjivJcI"',
+    "mtime": "2026-06-21T02:55:38.893Z",
+    "size": 9091,
+    "path": "../public/assets/ReplayDialog-Cl62N9PI.js"
   },
-  "/assets/RequestAnatomy-DIlzjgjJ.js": {
+  "/assets/RequestAnatomy-DgQWGvjs.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"142a-Say/U0wBSXeJXbMdzIFCiD2Yq8o"',
-    "mtime": "2026-06-20T07:49:57.207Z",
-    "size": 5162,
-    "path": "../public/assets/RequestAnatomy-DIlzjgjJ.js"
+    "etag": '"1426-61x287FrHKfb80GSEu4faAyIsQQ"',
+    "mtime": "2026-06-21T02:55:38.893Z",
+    "size": 5158,
+    "path": "../public/assets/RequestAnatomy-DgQWGvjs.js"
   },
-  "/assets/ResponseView-DQCuKJ1G.js": {
+  "/assets/StreamingChunkSequence-BCQaCAIe.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"6c88-pdMfEcfub7CjHnge4PzxOHEcbPE"',
-    "mtime": "2026-06-20T07:49:57.207Z",
-    "size": 27784,
-    "path": "../public/assets/ResponseView-DQCuKJ1G.js"
+    "etag": '"d82-mxAzpHhDD3SrHO5SmP2+22ql54A"',
+    "mtime": "2026-06-21T02:55:38.893Z",
+    "size": 3458,
+    "path": "../public/assets/StreamingChunkSequence-BCQaCAIe.js"
   },
-  "/assets/zhipuai-BPNAnxo-.svg": {
-    "type": "image/svg+xml",
-    "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-20T07:49:57.206Z",
-    "size": 11256,
-    "path": "../public/assets/zhipuai-BPNAnxo-.svg"
+  "/assets/ProxyViewerContainer-CbW5VRER.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"7d8fb-FLtU4XIXbbkqJROwzR9ncAvk86E"',
+    "mtime": "2026-06-21T02:55:38.893Z",
+    "size": 514299,
+    "path": "../public/assets/ProxyViewerContainer-CbW5VRER.js"
   },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-20T07:49:57.206Z",
+    "mtime": "2026-06-21T02:55:38.892Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/_sessionId-dY1TTl7N.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"d2-gUdCO5tW0loAHOM6KOFd73K/+Es"',
-    "mtime": "2026-06-20T07:49:57.206Z",
-    "size": 210,
-    "path": "../public/assets/_sessionId-dY1TTl7N.js"
+  "/assets/zhipuai-BPNAnxo-.svg": {
+    "type": "image/svg+xml",
+    "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
+    "mtime": "2026-06-21T02:55:38.892Z",
+    "size": 11256,
+    "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
-  "/assets/ProxyViewerContainer-Da0jpBkp.js": {
+  "/assets/main-2NlGzgOe.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"79801-1JDGhvSsOIGys3Enbh6ed4oyMoE"',
-    "mtime": "2026-06-20T07:49:57.207Z",
-    "size": 497665,
-    "path": "../public/assets/ProxyViewerContainer-Da0jpBkp.js"
+    "etag": '"5138c-nIshtdU9NYoVXvBBEN1D74xi9gk"',
+    "mtime": "2026-06-21T02:55:38.892Z",
+    "size": 332684,
+    "path": "../public/assets/main-2NlGzgOe.js"
   },
-  "/assets/StreamingChunkSequence-DHk4SGGL.js": {
+  "/assets/_sessionId-CcD_aLGq.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"d81-q+WustPR2MRDE/q2wIQ/H/VHcAc"',
-    "mtime": "2026-06-20T07:49:57.207Z",
-    "size": 3457,
-    "path": "../public/assets/StreamingChunkSequence-DHk4SGGL.js"
+    "etag": '"d2-ELNVvbTmYkGjU2wEF0iGQm6YfmM"',
+    "mtime": "2026-06-21T02:55:38.892Z",
+    "size": 210,
+    "path": "../public/assets/_sessionId-CcD_aLGq.js"
   }
 };
 function readAsset(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/agent-inspector",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "type": "module",
   "description": "Agent observability and knowledge capture layer for AI coding tools.",
   "license": "MIT",

package/src/components/OnboardingBanner.tsx

@@ -3,13 +3,8 @@ import type { JSX } from "react";
 import { useOnboarding } from "../lib/useOnboarding";
 
 /**
- * First-launch onboarding banner. Shows once on a fresh install (or
- * any user who hasn't yet dismissed it), explains the per-tab data
- * shapes the proxy captures, and disappears forever on dismissal.
- *
- * The "seen" state lives in the server's runtime config — see
- * `useOnboarding` — so the dismissal persists across browser sessions
- * and devices for the same install.
+ * First-launch onboarding banner. Shows once on a fresh install and persists
+ * dismissal through the server runtime config.
  */
 export function OnboardingBanner(): JSX.Element | null {
   const { hasSeenOnboarding, isLoading, markSeen } = useOnboarding();
@@ -22,22 +17,19 @@ export function OnboardingBanner(): JSX.Element | null {
       aria-label="Onboarding tip"
       className="mx-4 mt-2 mb-1 flex items-start gap-3 rounded-md border border-amber-500/30 bg-amber-500/5 px-4 py-3 text-sm"
     >
-      <div className="flex-1 min-w-0">
-        <div className="font-medium text-amber-600 dark:text-amber-400 mb-1">
-          Quick tour of the log tabs
+      <div className="min-w-0 flex-1">
+        <div className="mb-1 font-medium text-amber-600 dark:text-amber-400">
+          Agent Inspector is ready
         </div>
-        <ul className="space-y-0.5 text-muted-foreground text-xs leading-relaxed">
+        <ul className="space-y-0.5 text-xs leading-relaxed text-muted-foreground">
           <li>
-            <strong>Request</strong> / <strong>Response</strong> — structured views of what the
-            proxy sent and received.
+            <strong>Trace</strong>: requests, responses, streaming chunks, tools, and timing.
           </li>
           <li>
-            <strong>Headers</strong> — request and response headers after proxy processing.
+            <strong>Replay</strong>: resend captured requests and compare provider behavior.
           </li>
           <li>
-            <strong>Raw Headers</strong> / <strong>Raw Request</strong> /{" "}
-            <strong>Raw Response</strong> — exact bytes from the upstream provider (visible in Full
-            mode).
+            <strong>Memory</strong>: create reviewable candidates before promotion to OpenClaw.
           </li>
         </ul>
       </div>
@@ -46,7 +38,7 @@ export function OnboardingBanner(): JSX.Element | null {
         onClick={() => {
           void markSeen();
         }}
-        className="inline-flex items-center gap-1.5 text-xs h-8 px-3 rounded-md border border-amber-500/40 text-amber-700 dark:text-amber-300 hover:bg-amber-500/10 transition-colors shrink-0"
+        className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md border border-amber-500/40 px-3 text-xs text-amber-700 transition-colors hover:bg-amber-500/10 dark:text-amber-300"
         aria-label="Dismiss onboarding tip"
       >
         <Check className="size-3.5" />
@@ -57,7 +49,7 @@ export function OnboardingBanner(): JSX.Element | null {
         onClick={() => {
           void markSeen();
         }}
-        className="text-muted-foreground hover:text-foreground transition-colors shrink-0 p-1 -m-1"
+        className="-m-1 shrink-0 p-1 text-muted-foreground transition-colors hover:text-foreground"
         aria-label="Dismiss"
       >
         <X className="size-3.5" />

package/src/components/ProxyViewer.tsx

@@ -3,6 +3,8 @@ import { ArrowLeft, Check, Copy, Download, Plus } from "lucide-react";
 
 import type { CapturedLog } from "../proxy/schemas";
 import { exportLogsAsZip } from "../lib/export-logs";
+import type { TimeDisplayFormat } from "../lib/runtimeConfig";
+import { formatTimestampRange } from "../lib/timeDisplay";
 import { formatTokens } from "../lib/utils";
 import packageJson from "../../package.json";
 import { ConversationGroup, groupLogsByConversation } from "./proxy-viewer";
@@ -33,17 +35,11 @@ function computeTokenSummary(logs: CapturedLog[]): { totalIn: number; totalOut:
   return { totalIn, totalOut };
 }
 
-function formatTimeRange(logs: CapturedLog[]): string | null {
+function formatTimeRange(logs: CapturedLog[], timeDisplayFormat: TimeDisplayFormat): string | null {
   const first = logs[0];
   const last = logs[logs.length - 1];
   if (first === undefined || last === undefined) return null;
-  const format = (iso: string): string =>
-    new Date(iso).toLocaleTimeString([], {
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-    });
-  return `${format(first.timestamp)} - ${format(last.timestamp)}`;
+  return formatTimestampRange(first.timestamp, last.timestamp, timeDisplayFormat);
 }
 
 function getFirstUserAgent(logs: CapturedLog[]): string | null {
@@ -132,14 +128,19 @@ function SessionContextBar({
   logs,
   totalIn,
   totalOut,
+  timeDisplayFormat,
 }: {
   sessionId: string;
   logs: CapturedLog[];
   totalIn: number;
   totalOut: number;
+  timeDisplayFormat: TimeDisplayFormat;
 }): JSX.Element {
   const [copied, setCopied] = useState(false);
-  const timeRange = useMemo(() => formatTimeRange(logs), [logs]);
+  const timeRange = useMemo(
+    () => formatTimeRange(logs, timeDisplayFormat),
+    [logs, timeDisplayFormat],
+  );
   const userAgent = useMemo(() => getFirstUserAgent(logs), [logs]);
 
   const handleCopyLink = useCallback(() => {
@@ -216,6 +217,8 @@ export type ProxyViewerProps = {
   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;
   /** Hide the session filter dropdown. Used on `/session/$id` routes where
    *  the session is already pinned by the URL and the dropdown would just
    *  fight the URL state. */
@@ -238,6 +241,7 @@ export function ProxyViewer({
   onViewModeChange,
   strip,
   slowResponseThresholdSeconds,
+  timeDisplayFormat,
   hideSessionFilter = false,
   pinnedSessionId,
 }: ProxyViewerProps): JSX.Element {
@@ -249,7 +253,7 @@ export function ProxyViewer({
   );
   const logListRef = useRef<HTMLDivElement>(null);
   const logListWrapperRef = useRef<HTMLDivElement>(null);
-  useKeyboardNavigation(logListRef, logListWrapperRef);
+  useKeyboardNavigation(logListRef, logListWrapperRef, { pageWide: true });
 
   useEffect(() => {
     const perCrabDuration = 400;
@@ -291,6 +295,7 @@ export function ProxyViewer({
   }, []);
 
   const groups = useMemo(() => groupLogsByConversation(logs), [logs]);
+  const hasPinnedSessionContext = pinnedSessionId !== undefined;
   const cacheTrends = useMemo(() => computeCacheTrends(groups), [groups]);
   const comparisonPredecessors = useMemo(() => buildValidPredecessors(groups), [groups]);
   const handleCompareWithPrevious = useCallback(
@@ -380,6 +385,7 @@ export function ProxyViewer({
             logs={logs}
             totalIn={totalIn}
             totalOut={totalOut}
+            timeDisplayFormat={timeDisplayFormat}
           />
         )}
 
@@ -438,12 +444,14 @@ export function ProxyViewer({
             </button>
           </div>
           <div className="flex-1" />
-          <span className="text-muted-foreground text-xs font-mono">
-            {logs.length} request{logs.length !== 1 ? "s" : ""}
-            {totalIn > 0 || totalOut > 0
-              ? ` · ${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out`
-              : ""}
-          </span>
+          {!hasPinnedSessionContext && (
+            <span className="text-muted-foreground text-xs font-mono">
+              {logs.length} request{logs.length !== 1 ? "s" : ""}
+              {totalIn > 0 || totalOut > 0
+                ? ` · ${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out`
+                : ""}
+            </span>
+          )}
           {logs.length > 0 && (
             <button
               type="button"
@@ -527,6 +535,8 @@ export function ProxyViewer({
                   comparisonPredecessors={comparisonPredecessors}
                   onClearGroup={onClearGroup}
                   standalone={groups.length === 1}
+                  hasPinnedSessionContext={hasPinnedSessionContext}
+                  timeDisplayFormat={timeDisplayFormat}
                 />
               ))}
             </div>

package/src/components/ProxyViewerContainer.tsx

@@ -330,7 +330,7 @@ export function ProxyViewerContainer({
 
   // Read the strip config once at the container so the virtualized list does
   // not need N independent SWR subscriptions per row.
-  const { strip, slowResponseThresholdSeconds } = useStripConfig();
+  const { strip, slowResponseThresholdSeconds, timeDisplayFormat } = useStripConfig();
 
   return (
     <>
@@ -354,6 +354,7 @@ export function ProxyViewerContainer({
         onViewModeChange={setViewMode}
         strip={strip}
         slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+        timeDisplayFormat={timeDisplayFormat}
         // Session filter is the URL's job when `initialSessionId` was given.
         hideSessionFilter={initialSessionId !== undefined}
         pinnedSessionId={initialSessionId}

package/src/components/providers/ProviderCard.tsx

@@ -110,30 +110,16 @@ function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
     }
     if (result.cacheCreationInputTokens !== undefined && result.cacheCreationInputTokens > 0) {
       tokenParts.push(
-        <TooltipProvider key="cache-create">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="font-mono tabular-nums text-emerald-400">
-                +{result.cacheCreationInputTokens} cache
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>Tokens cached for reuse, reducing future API cost</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>,
+        <span key="cache-create" className="font-mono tabular-nums text-emerald-400">
+          KV Cache +{result.cacheCreationInputTokens}
+        </span>,
       );
     }
     if (result.cacheReadInputTokens !== undefined && result.cacheReadInputTokens > 0) {
       tokenParts.push(
-        <TooltipProvider key="cache-read">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="font-mono tabular-nums text-purple-400">
-                ~{result.cacheReadInputTokens} cached
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>Tokens served from cache, reducing API cost</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>,
+        <span key="cache-read" className="font-mono tabular-nums text-purple-400">
+          KV Cache ~{result.cacheReadInputTokens}
+        </span>,
       );
     }
     const displayTokens: ReactNode[] = [];

package/src/components/providers/SettingsDialog.tsx

@@ -1,12 +1,16 @@
-import { type JSX, useState, useCallback } from "react";
-import { Settings } from "lucide-react";
+import { type JSX, useState, useCallback, useMemo } from "react";
+import { Check, Copy, Settings, Terminal } from "lucide-react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
 import { Button } from "../ui/button";
 import { ProvidersPanel } from "./ProvidersPanel";
 import { useProviders } from "../../lib/useProviders";
 import { useStripConfig } from "../../lib/useStripConfig";
-import { MAX_SLOW_RESPONSE_THRESHOLD_SECONDS } from "../../lib/runtimeConfig";
+import {
+  MAX_SLOW_RESPONSE_THRESHOLD_SECONDS,
+  TimeDisplayFormatSchema,
+  type TimeDisplayFormat,
+} from "../../lib/runtimeConfig";
 
 export function SettingsDialog(): JSX.Element {
   const [open, setOpen] = useState(false);
@@ -68,6 +72,7 @@ export function SettingsDialog(): JSX.Element {
           <TabsList>
             <TabsTrigger value="providers">Providers</TabsTrigger>
             <TabsTrigger value="proxy">Proxy</TabsTrigger>
+            <TabsTrigger value="onboarding">Onboarding</TabsTrigger>
           </TabsList>
 
           <div className="mt-4 overflow-y-auto flex-1 pr-3">
@@ -89,6 +94,9 @@ export function SettingsDialog(): JSX.Element {
             <TabsContent value="proxy">
               <ProxySettingsTab />
             </TabsContent>
+            <TabsContent value="onboarding">
+              <OnboardingSettingsTab />
+            </TabsContent>
           </div>
         </Tabs>
       </DialogContent>
@@ -96,13 +104,104 @@ export function SettingsDialog(): JSX.Element {
   );
 }
 
+function CopyableSetupValue({
+  id,
+  label,
+  value,
+  copiedId,
+  onCopy,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  copiedId: string | null;
+  onCopy: (id: string, value: string) => void;
+}): JSX.Element {
+  const copied = copiedId === id;
+  return (
+    <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
+      <div className="mb-1 text-xs font-medium text-muted-foreground">{label}</div>
+      <div className="flex min-w-0 items-center gap-2">
+        <code className="min-w-0 flex-1 truncate font-mono text-xs text-foreground">{value}</code>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="size-7 shrink-0"
+          onClick={() => onCopy(id, value)}
+          aria-label={copied ? `Copied ${label}` : `Copy ${label}`}
+        >
+          {copied ? <Check className="size-3.5 text-emerald-500" /> : <Copy className="size-3.5" />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function OnboardingSettingsTab(): JSX.Element {
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+  const origin = useMemo(() => {
+    if (typeof window === "undefined") return "http://localhost:25947";
+    return window.location.origin;
+  }, []);
+  const values = useMemo(
+    () => [
+      { id: "skill", label: "Codex skill", value: "agent-inspector onboard --force" },
+      { id: "mcp", label: "MCP URL", value: `${origin}/api/mcp` },
+      { id: "proxy", label: "Proxy URL", value: `${origin}/proxy` },
+      { id: "anthropic", label: "Anthropic base", value: `ANTHROPIC_BASE_URL=${origin}/proxy` },
+    ],
+    [origin],
+  );
+
+  const handleCopy = useCallback((id: string, value: string) => {
+    void window.navigator.clipboard.writeText(value).then(() => {
+      setCopiedId(id);
+      setTimeout(() => setCopiedId(null), 1600);
+    });
+  }, []);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <Terminal className="size-4 text-muted-foreground" />
+        <h3 className="text-sm font-semibold">Agent onboarding</h3>
+      </div>
+      <div className="grid gap-2">
+        {values.map((item) => (
+          <CopyableSetupValue
+            key={item.id}
+            id={item.id}
+            label={item.label}
+            value={item.value}
+            copiedId={copiedId}
+            onCopy={handleCopy}
+          />
+        ))}
+      </div>
+      <div className="grid gap-2 rounded-md border border-border bg-background px-3 py-2 text-xs text-muted-foreground">
+        <div className="flex items-center gap-2">
+          <Check className="size-3.5 text-emerald-500" />
+          <span>Provider test creates a traceable memory probe session.</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Check className="size-3.5 text-emerald-500" />
+          <span>Captured sessions can produce reviewable memory candidates.</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function ProxySettingsTab(): JSX.Element {
   const {
     strip,
     slowResponseThresholdSeconds,
+    timeDisplayFormat,
     isLoading,
     setStrip,
     setSlowResponseThresholdSeconds,
+    setTimeDisplayFormat,
   } = useStripConfig();
   const [error, setError] = useState<string | null>(null);
   const [pending, setPending] = useState(false);
@@ -137,6 +236,21 @@ function ProxySettingsTab(): JSX.Element {
     [setSlowResponseThresholdSeconds],
   );
 
+  const handleTimeDisplayFormatChange = useCallback(
+    async (next: TimeDisplayFormat) => {
+      setError(null);
+      setPending(true);
+      try {
+        await setTimeDisplayFormat(next);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setPending(false);
+      }
+    },
+    [setTimeDisplayFormat],
+  );
+
   return (
     <div className="space-y-4">
       <div className="space-y-1">
@@ -196,6 +310,29 @@ function ProxySettingsTab(): JSX.Element {
         </div>
       </div>
 
+      <div className="space-y-1">
+        <label htmlFor="time-display-format" className="text-sm font-semibold">
+          Time display
+        </label>
+        <p className="text-xs text-muted-foreground">
+          Controls timestamps in session summaries, conversation headers, and log rows.
+        </p>
+        <select
+          id="time-display-format"
+          value={timeDisplayFormat}
+          disabled={isLoading || pending}
+          onChange={(event) => {
+            const parsed = TimeDisplayFormatSchema.safeParse(event.currentTarget.value);
+            if (!parsed.success) return;
+            void handleTimeDisplayFormatChange(parsed.data);
+          }}
+          className="h-8 rounded-md border border-input bg-background px-2 text-sm disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <option value="time">Time only</option>
+          <option value="full">Full ISO</option>
+        </select>
+      </div>
+
       {error !== null && <p className="text-xs text-destructive">Failed to save: {error}</p>}
     </div>
   );