@@ -201,6 +273,7 @@ export default function RequestLoggerDetail({
}) {
const t = useTranslations("requestLogger.detail");
const locale = useLocale();
+ const modalScrollRef = useRef(null);
// Close on Escape key
useEffect(() => {
const handler = (e) => {
@@ -210,6 +283,21 @@ export default function RequestLoggerDetail({
return () => globalThis.removeEventListener("keydown", handler);
}, [onClose]);
+ // The overlay is full-viewport, but the modal panel itself is centered and
+ // narrower than the viewport (max-w-225), leaving backdrop margin on every
+ // side. A wheel event there has no scrollable target under the cursor, so
+ // scrolling only worked once the pointer happened to be over the panel's
+ // own content. Forward wheel scrolling from anywhere in the overlay to the
+ // panel instead, so the backdrop margin scrolls it too.
+ const handleOverlayWheel = (e) => {
+ const panel = modalScrollRef.current;
+ // Let native scrolling handle wheel events that already land inside the
+ // panel -- only forward the ones from the backdrop margin around it.
+ if (!panel || panel.contains(e.target)) return;
+ panel.scrollTop += e.deltaY;
+ e.preventDefault();
+ };
+
const statusStyle = getStatusStyle(log.status);
const protocolKey = log.sourceFormat || log.provider;
const protocol = getProtocolColor(protocolKey, log.provider);
@@ -377,12 +465,14 @@ export default function RequestLoggerDetail({
@@ -915,6 +1006,7 @@ export default function RequestLoggerDetail({
{streamChunks && streamChunks.provider && (
onCopy(section.json)}
/>
@@ -982,6 +1077,7 @@ export default function RequestLoggerDetail({
{payloadSections.length === 0 && responseJson && (
onCopy(responseJson)}
/>
@@ -990,6 +1086,7 @@ export default function RequestLoggerDetail({
{payloadSections.length === 0 && requestJson && (
onCopy(requestJson)}
/>
diff --git a/src/shared/hooks/useTimestampTitles.ts b/src/shared/hooks/useTimestampTitles.ts
new file mode 100644
index 0000000000..bad4511182
--- /dev/null
+++ b/src/shared/hooks/useTimestampTitles.ts
@@ -0,0 +1,72 @@
+"use client";
+
+import { useEffect, type RefObject } from "react";
+import type { JsonViewProps } from "react18-json-view";
+
+type CustomizeNode = NonNullable;
+
+// react18-json-view exposes no direct tooltip prop, but customizeNode gives a
+// per-value className hook without touching what value is actually rendered
+// -- the tree's byte-accurate rendering is the point, so a marker class + DOM
+// title-attribute pass is safer here than swapping in a replacement element
+// with hand-reproduced number formatting.
+export const TIMESTAMP_VALUE_MARKER_CLASS = "json-tree-number-value";
+
+const TIMESTAMP_FIELD_NAME = /created|updated|modified|timestamp|(^|_)ts$|_at$/i;
+// Unix epoch bounds spanning year 2000 to year 2100, checked at both
+// seconds and millisecond precision (both are common on the wire).
+const EPOCH_SECONDS_MIN = 946684800;
+const EPOCH_SECONDS_MAX = 4102444800;
+const EPOCH_MS_MIN = EPOCH_SECONDS_MIN * 1000;
+const EPOCH_MS_MAX = EPOCH_SECONDS_MAX * 1000;
+
+function epochValueToDate(value: number): Date | null {
+ if (!Number.isFinite(value)) return null;
+ if (value >= EPOCH_SECONDS_MIN && value <= EPOCH_SECONDS_MAX) return new Date(value * 1000);
+ if (value >= EPOCH_MS_MIN && value <= EPOCH_MS_MAX) return new Date(value);
+ return null;
+}
+
+// react18-json-view's customizeNode receives the key (indexOrName) and value
+// (node) together, so the timestamp-field-name check can run at the source
+// instead of a DOM sibling-walk -- it only needs to mark the match, the
+// tooltip text itself is still applied via useTimestampTitles below.
+export const timestampMarkerCustomizeNode: CustomizeNode = ({ node, indexOrName }) => {
+ if (typeof indexOrName !== "string" || !TIMESTAMP_FIELD_NAME.test(indexOrName)) {
+ return undefined;
+ }
+ if (typeof node !== "number" || !epochValueToDate(node)) {
+ return undefined;
+ }
+ return { className: TIMESTAMP_VALUE_MARKER_CLASS };
+};
+
+// Adds a human-readable date/time title (tooltip) to marked number values.
+// Re-runs on any DOM change inside the container (expanding an individual
+// node is internal react18-json-view state, not a prop change this
+// component would otherwise see) and is idempotent, so it's safe to call
+// repeatedly as the tree gets expanded/collapsed.
+export function useTimestampTitles(containerRef: RefObject, active: boolean) {
+ useEffect(() => {
+ const container = containerRef.current;
+ if (!active || !container) return;
+
+ const annotate = () => {
+ const values = container.querySelectorAll(`.${TIMESTAMP_VALUE_MARKER_CLASS}`);
+ for (const valueEl of values) {
+ if (valueEl.title) continue;
+ const date = epochValueToDate(Number(valueEl.textContent));
+ if (!date) continue;
+ valueEl.title = date.toLocaleString(undefined, {
+ dateStyle: "medium",
+ timeStyle: "medium",
+ });
+ }
+ };
+
+ annotate();
+ const observer = new MutationObserver(annotate);
+ observer.observe(container, { childList: true, subtree: true });
+ return () => observer.disconnect();
+ }, [containerRef, active]);
+}
diff --git a/src/shared/utils/formatting.ts b/src/shared/utils/formatting.ts
index 100321d897..bb6091c4f2 100644
--- a/src/shared/utils/formatting.ts
+++ b/src/shared/utils/formatting.ts
@@ -182,6 +182,24 @@ export function formatResetCountdown(resetAt: string | number | null | undefined
return `${seconds}s`;
}
+/**
+ * Extract a git-log-style short identifier from a tool/call id for compact
+ * display. IDs carry decorative prefixes that vary by provider (call_,
+ * call-, toolu_, or composite forms like call_call-_fc_cal_) and
+ * aren't unique on their own — naively slicing the whole id can leave as
+ * little as 3 significant characters visible. Finds the first UUID-shaped
+ * segment (or long hex run) and takes its leading characters instead, so the
+ * visible part is actually where the entropy is.
+ */
+export function shortCallId(id: string | null | undefined, length = 7): string {
+ if (!id) return "";
+ const uuidMatch = id.match(/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/i);
+ if (uuidMatch) return uuidMatch[0].slice(0, length);
+ const hexMatch = id.match(/[0-9a-f]{8,}/i);
+ if (hexMatch) return hexMatch[0].slice(0, length);
+ return id.slice(0, length);
+}
+
/**
* Coerces a persisted log `error` field into safe display text. It is
* legitimate for this field to be a structured object (e.g. `{ code,
diff --git a/src/store/jsonTreeExpandStore.ts b/src/store/jsonTreeExpandStore.ts
new file mode 100644
index 0000000000..17b25bd288
--- /dev/null
+++ b/src/store/jsonTreeExpandStore.ts
@@ -0,0 +1,63 @@
+"use client";
+
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+// The level a JSON tree node is rendered at (react18-json-view's own
+// `collapsed` numeric-depth prop) is 0-indexed, so this store's level uses
+// the same convention: level 0 means nothing is expanded ("collapse all"),
+// and a node at depth N is expanded when N < level.
+const MIN_LEVEL = 0;
+const MAX_LEVEL = 64; // deep enough for any real request/response payload
+export const DEFAULT_JSON_TREE_EXPAND_LEVEL = 2;
+
+// Level is tracked per section (keyed by a stable, locale-independent
+// sectionId -- e.g. "openaiRequest", "providerEventStream" -- not the
+// translated title), because different payload/stream boxes carry
+// "interesting" data at different nesting depths. The same sectionId across
+// different log entries shares one level, so it still carries over between
+// requests, just scoped per box instead of one setting for the whole page.
+interface JsonTreeExpandState {
+ levels: Record;
+ collapseAll: (sectionId: string) => void;
+ collapseOneLevel: (sectionId: string) => void;
+ expandOneLevel: (sectionId: string) => void;
+ expandAll: (sectionId: string) => void;
+}
+
+function clamp(level: number): number {
+ return Math.max(MIN_LEVEL, Math.min(MAX_LEVEL, level));
+}
+
+const useJsonTreeExpandStore = create()(
+ persist(
+ (set) => ({
+ levels: {},
+ collapseAll: (sectionId) => set((s) => ({ levels: { ...s.levels, [sectionId]: MIN_LEVEL } })),
+ collapseOneLevel: (sectionId) =>
+ set((s) => ({
+ levels: {
+ ...s.levels,
+ [sectionId]: clamp((s.levels[sectionId] ?? DEFAULT_JSON_TREE_EXPAND_LEVEL) - 1),
+ },
+ })),
+ expandOneLevel: (sectionId) =>
+ set((s) => ({
+ levels: {
+ ...s.levels,
+ [sectionId]: clamp((s.levels[sectionId] ?? DEFAULT_JSON_TREE_EXPAND_LEVEL) + 1),
+ },
+ })),
+ expandAll: (sectionId) => set((s) => ({ levels: { ...s.levels, [sectionId]: MAX_LEVEL } })),
+ }),
+ {
+ name: "omniroute-json-tree-expand-levels",
+ }
+ )
+);
+
+export function useJsonTreeExpandLevel(sectionId: string): number {
+ return useJsonTreeExpandStore((s) => s.levels[sectionId] ?? DEFAULT_JSON_TREE_EXPAND_LEVEL);
+}
+
+export default useJsonTreeExpandStore;
diff --git a/tests/unit/dashboard/payload-section-collapsible-json.test.tsx b/tests/unit/dashboard/payload-section-collapsible-json.test.tsx
new file mode 100644
index 0000000000..3154580acc
--- /dev/null
+++ b/tests/unit/dashboard/payload-section-collapsible-json.test.tsx
@@ -0,0 +1,81 @@
+// @vitest-environment jsdom
+//
+// Regression guard: PayloadSection rendered every payload (request/response
+// bodies, pipeline stages) as a flat
text dump, forcing operators to
+// scroll through the entire raw JSON to find anything in a nested request.
+// It now renders parseable JSON payloads as a collapsible tree
+// (react-json-view-lite) instead, while still falling back to the plain
+//
dump for anything that isn't valid JSON (e.g. a captured error
+// string), since the `json` prop is display text that isn't guaranteed
+// parseable.
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+
+vi.mock("next-intl", () => ({
+ useTranslations: () => (key: string) => key,
+}));
+
+vi.mock("@/shared/hooks/useTheme", () => ({
+ useTheme: () => ({ isDark: false }),
+}));
+
+const { PayloadSection } =
+ await import("../../../src/shared/components/RequestLoggerDetail.sections.tsx");
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+ container = document.createElement("div");
+ document.body.appendChild(container);
+ root = createRoot(container);
+});
+
+afterEach(() => {
+ act(() => root.unmount());
+ container.remove();
+ vi.clearAllMocks();
+});
+
+function renderPayload(json: string) {
+ act(() => {
+ root.render(
+
+ );
+ });
+}
+
+describe("PayloadSection collapsible JSON rendering", () => {
+ it("renders a valid JSON object payload as a collapsible tree, not a flat
dump for non-JSON payload text", () => {
+ renderPayload("Upstream request failed: Model is unavailable.");
+
+ const pre = container.querySelector("pre");
+ expect(pre).not.toBeNull();
+ expect(pre?.textContent).toBe("Upstream request failed: Model is unavailable.");
+ });
+
+ it("falls back to the plain
dump for a JSON primitive (not an object/array)", () => {
+ renderPayload(JSON.stringify("just a string"));
+
+ const pre = container.querySelector("pre");
+ expect(pre).not.toBeNull();
+ });
+});
diff --git a/tests/unit/dashboard/timestamp-titles.test.tsx b/tests/unit/dashboard/timestamp-titles.test.tsx
new file mode 100644
index 0000000000..15c6c645d2
--- /dev/null
+++ b/tests/unit/dashboard/timestamp-titles.test.tsx
@@ -0,0 +1,94 @@
+// @vitest-environment jsdom
+//
+// Regression guard: JSON tree values that are actually Unix timestamps
+// (e.g. `created: 1787562749` in an event-stream payload) rendered as a
+// bare number with no way to read the actual date/time without doing the
+// epoch math by hand. react-json-view-lite exposes no per-value render
+// hook, so useTimestampTitles walks the rendered tree and adds a
+// human-readable title/tooltip to number values whose field name looks
+// like a timestamp and whose value is a plausible Unix epoch -- without
+// changing the value actually displayed.
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+
+vi.mock("next-intl", () => ({
+ useTranslations: () => (key: string) => key,
+}));
+
+vi.mock("@/shared/hooks/useTheme", () => ({
+ useTheme: () => ({ isDark: false }),
+}));
+
+const { PayloadSection } =
+ await import("../../../src/shared/components/RequestLoggerDetail.sections.tsx");
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+ container = document.createElement("div");
+ document.body.appendChild(container);
+ root = createRoot(container);
+});
+
+afterEach(() => {
+ act(() => root.unmount());
+ container.remove();
+ vi.clearAllMocks();
+});
+
+function renderPayload(payload: unknown) {
+ act(() => {
+ root.render(
+
+ );
+ });
+}
+
+function findValueSpan(text: string): HTMLElement | undefined {
+ return Array.from(container.querySelectorAll("span")).find(
+ (el) => el.children.length === 0 && el.textContent === text
+ );
+}
+
+describe("timestamp title tooltips in JSON trees", () => {
+ it("adds a human-readable title to a field named created with a plausible epoch-seconds value", () => {
+ renderPayload({ id: "gen-1", created: 1787562749, model: "nemotron-3-ultra-free" });
+
+ const valueSpan = findValueSpan("1787562749");
+ expect(valueSpan).toBeDefined();
+ expect(valueSpan?.title).not.toBe("");
+ // 1787562749 seconds since epoch -> 2026-08-24-ish; just confirm it parsed
+ // as a real, non-garbage date rather than asserting an exact locale string.
+ expect(valueSpan?.title).toMatch(/202\d/);
+ });
+
+ it("does not add a title to a plain number field that only happens to share the epoch-seconds range", () => {
+ renderPayload({ id: "gen-1", max_tokens: 1787562749 });
+
+ const valueSpan = findValueSpan("1787562749");
+ expect(valueSpan).toBeDefined();
+ expect(valueSpan?.title).toBe("");
+ });
+
+ it("does not add a title to a timestamp-named field whose value is not a plausible epoch", () => {
+ renderPayload({ created: 42 });
+
+ const valueSpan = findValueSpan("42");
+ expect(valueSpan).toBeDefined();
+ expect(valueSpan?.title).toBe("");
+ });
+
+ it("leaves the displayed value unchanged -- only the title attribute is added", () => {
+ renderPayload({ created: 1787562749 });
+
+ const valueSpan = findValueSpan("1787562749");
+ expect(valueSpan?.textContent).toBe("1787562749");
+ });
+});
diff --git a/tests/unit/shared/json-tree-expand-store.test.ts b/tests/unit/shared/json-tree-expand-store.test.ts
new file mode 100644
index 0000000000..b202e27d3f
--- /dev/null
+++ b/tests/unit/shared/json-tree-expand-store.test.ts
@@ -0,0 +1,57 @@
+import assert from "node:assert/strict";
+import test, { beforeEach } from "node:test";
+import useJsonTreeExpandStore, {
+ DEFAULT_JSON_TREE_EXPAND_LEVEL,
+} from "../../../src/store/jsonTreeExpandStore.ts";
+
+// Regression guard: collapse/expand-level controls track one level per
+// section (sectionId), not one global level for the whole page -- different
+// payload/stream boxes carry "interesting" data at different nesting depths.
+// Level is 0-indexed to match react-json-view-lite's own
+// shouldExpandNode(level) convention: 0 means nothing is expanded.
+
+function reset() {
+ useJsonTreeExpandStore.setState({ levels: {} });
+}
+
+beforeEach(reset);
+
+test("an unset section defaults to the default expand level", () => {
+ assert.equal(useJsonTreeExpandStore.getState().levels.openaiRequest, undefined);
+});
+
+test("collapseAll sets only the given section's level to 0", () => {
+ useJsonTreeExpandStore.getState().collapseAll("openaiRequest");
+ assert.equal(useJsonTreeExpandStore.getState().levels.openaiRequest, 0);
+ assert.equal(useJsonTreeExpandStore.getState().levels.providerRequest, undefined);
+});
+
+test("expandAll sets only the given section's level to the max depth", () => {
+ useJsonTreeExpandStore.getState().expandAll("openaiRequest");
+ assert.equal(useJsonTreeExpandStore.getState().levels.openaiRequest, 64);
+ assert.equal(useJsonTreeExpandStore.getState().levels.providerRequest, undefined);
+});
+
+test("collapseOneLevel decrements from the default and clamps at 0, independently per section", () => {
+ const { collapseOneLevel } = useJsonTreeExpandStore.getState();
+ collapseOneLevel("openaiRequest");
+ assert.equal(
+ useJsonTreeExpandStore.getState().levels.openaiRequest,
+ DEFAULT_JSON_TREE_EXPAND_LEVEL - 1
+ );
+ assert.equal(useJsonTreeExpandStore.getState().levels.providerRequest, undefined);
+
+ collapseOneLevel("openaiRequest");
+ collapseOneLevel("openaiRequest");
+ collapseOneLevel("openaiRequest");
+ assert.equal(useJsonTreeExpandStore.getState().levels.openaiRequest, 0);
+});
+
+test("expandOneLevel increments and clamps at the max, independently per section", () => {
+ useJsonTreeExpandStore.setState({ levels: { openaiRequest: 63 } });
+ const { expandOneLevel } = useJsonTreeExpandStore.getState();
+ expandOneLevel("openaiRequest");
+ assert.equal(useJsonTreeExpandStore.getState().levels.openaiRequest, 64);
+ expandOneLevel("openaiRequest");
+ assert.equal(useJsonTreeExpandStore.getState().levels.openaiRequest, 64);
+});
diff --git a/tests/unit/shared/short-call-id.test.ts b/tests/unit/shared/short-call-id.test.ts
new file mode 100644
index 0000000000..850f49786e
--- /dev/null
+++ b/tests/unit/shared/short-call-id.test.ts
@@ -0,0 +1,38 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { shortCallId } from "../../../src/shared/utils/formatting.ts";
+
+// Regression guard: naive id.slice(0, 8) truncation showed as little as 3
+// significant characters for ids with decorative prefixes (call-, call_call-,
+// etc.), making tool-call/tool-result ids visually indistinguishable in the
+// conversation context view. shortCallId finds the actual guid/hex entropy
+// and truncates that instead, git-log-short-hash style.
+
+test("extracts a git-log-style short id from a real UUID-shaped call id", () => {
+ assert.equal(shortCallId("call-bf7c895d-ae74-421c-890b-6f47eab77508"), "bf7c895");
+});
+
+test("extracts the first uuid segment from a composite/doubled-prefix id", () => {
+ assert.equal(
+ shortCallId("call_call-c5602375-cb46-40e8-867a-4b6ac50f6d2d_fc_cal_f08ecb5ec5"),
+ "c560237"
+ );
+});
+
+test("falls back to a leading hex run when there is no full uuid", () => {
+ assert.equal(shortCallId("toolu_01a2b3c4d5e6f7089900"), "01a2b3c");
+});
+
+test("falls back to a plain slice when the id has no recognizable hex/uuid segment", () => {
+ assert.equal(shortCallId("call_1"), "call_1");
+});
+
+test("respects a custom length", () => {
+ assert.equal(shortCallId("call-bf7c895d-ae74-421c-890b-6f47eab77508", 4), "bf7c");
+});
+
+test("returns an empty string for missing input", () => {
+ assert.equal(shortCallId(null), "");
+ assert.equal(shortCallId(undefined), "");
+ assert.equal(shortCallId(""), "");
+});