@cartanova/qgrid-cli 1.9.0 → 2.0.1

package/bundle/web-dist/server/assets/{show-j1j13Hq1.js → show-Dxz6UJnD.js}

@@ -1,8 +1,8 @@
-import { D as require_react, E as require_jsx_runtime, it as __exportAll, ot as __toESM, rt as __commonJSMin } from "./sd.generated-CkiEsOwK.js";
-import { n as RequestLogService } from "./services.generated-Q2ZIxMdn.js";
-import { a as Link } from "./lazyRouteComponent-CcyhCAoL.js";
+import { K as __commonJSMin, Y as __toESM, g as require_react, h as require_jsx_runtime, q as __exportAll } from "./sd.generated-BeUHLWKH.js";
+import { n as RequestLogService, r as RequestLogStepService } from "./services.generated-C39hdSv0.js";
+import { a as Link } from "./lazyRouteComponent-BEaI4mOq.js";
 import { t as Route } from "../entry-server.generated.js";
-import { n as lucideCheck, t as lucideCopy } from "./copy-SIUvcEcZ.js";
+import { t as formatMicroUsd } from "./cost-DdHTzQDR.js";
 import minpath from "node:path";
 import minproc from "node:process";
 import { fileURLToPath as urlToPath } from "node:url";
@@ -25025,6 +25025,22 @@ var lucideArrowLeft = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sv
 	})
 });
 //#endregion
+//#region ~icons/lucide/check.jsx
+var lucideCheck = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em",
+	...props,
+	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		d: "M20 6L9 17l-5-5"
+	})
+});
+//#endregion
 //#region ~icons/lucide/chevron-down.jsx
 var lucideChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
 	viewBox: "0 0 24 24",
@@ -25041,6 +25057,29 @@ var lucideChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("
 	})
 });
 //#endregion
+//#region ~icons/lucide/copy.jsx
+var lucideCopy = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em",
+	...props,
+	children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+			width: 14,
+			height: 14,
+			x: 8,
+			y: 8,
+			rx: 2,
+			ry: 2
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })]
+	})
+});
+//#endregion
 //#region src/routes/requests/show.tsx?tsr-split=component
 function RequestShowPage() {
 	const { id } = Route.useSearch();
@@ -25049,15 +25088,6 @@ function RequestShowPage() {
 function formatNum(n) {
 	return n.toLocaleString();
 }
-function formatDateTime(iso) {
-	return new Date(iso).toLocaleString("ko-KR", {
-		month: "2-digit",
-		day: "2-digit",
-		hour: "2-digit",
-		minute: "2-digit",
-		second: "2-digit"
-	});
-}
 function tryParseJson(text) {
 	try {
 		return JSON.parse(text);
@@ -25065,6 +25095,14 @@ function tryParseJson(text) {
 		return null;
 	}
 }
+function safeParseJson(text) {
+	if (!text) return {};
+	try {
+		return JSON.parse(text);
+	} catch {
+		return text;
+	}
+}
 function CopyButton({ text }) {
 	const [copied, setCopied] = (0, import_react.useState)(false);
 	(0, import_react.useEffect)(() => {
@@ -25088,7 +25126,7 @@ function FormattedContent({ text, markdown }) {
 	const [mode, setMode] = (0, import_react.useState)("pretty");
 	if (parsed === null) {
 		if (markdown) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-			className: "prose prose-sm prose-sand max-w-none",
+			className: "prose prose-sm prose-qgrid max-w-none",
 			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Markdown, {
 				remarkPlugins: [remarkGfm],
 				children: text
@@ -25126,178 +25164,498 @@ function FormattedContent({ text, markdown }) {
 function Section({ title, defaultOpen = true, children }) {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", {
 		open: defaultOpen,
-		className: "group",
+		className: "group panel overflow-hidden",
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("summary", {
-			className: "flex items-center gap-1 cursor-pointer select-none list-none",
+			className: "panel-header flex items-center gap-1.5 cursor-pointer select-none list-none px-4 py-2.5",
 			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideChevronDown, { className: "size-3.5 text-sand-400 transition-transform group-open:rotate-0 -rotate-90" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-				className: "text-[10px] uppercase tracking-wider text-sand-500 font-medium",
+				className: "text-[11px] uppercase tracking-wider text-sand-500 font-medium",
 				children: title
 			})]
 		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-			className: "mt-1.5",
+			className: "p-4",
 			children
 		})]
 	});
 }
+function Metric({ label, value }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", {
+		className: "text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+		children: label
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", {
+		className: "text-[15px] font-semibold text-sand-800 tabular-nums mt-0.5",
+		children: value
+	})] });
+}
+var STATUS_STYLE = {
+	running: "bg-blue-100 text-blue-600",
+	succeeded: "bg-sage-100 text-sage-600",
+	error: "bg-red-100 text-red-600",
+	aborted: "bg-caution-400/15 text-caution-500"
+};
+function ErrorPanel({ message }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "panel overflow-hidden border border-red-200 bg-red-50/60",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "px-4 py-2.5 border-b border-red-100 flex items-center gap-1.5",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-[11px] uppercase tracking-wider text-red-600 font-medium",
+				children: "Error"
+			})
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "p-4",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", {
+				className: "text-[12px] text-red-700 whitespace-pre-wrap break-words font-mono leading-relaxed max-h-80 overflow-auto",
+				children: message
+			})
+		})]
+	});
+}
+function HeaderBar({ data }) {
+	const status = data.status;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "panel overflow-hidden px-5 py-3 flex items-center gap-2",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-[15px] font-semibold text-sand-900",
+				children: data.model_name ?? "Unknown model"
+			}),
+			status && status !== "succeeded" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: `text-[10px] px-1.5 py-0.5 rounded-full font-medium uppercase ${STATUS_STYLE[status] ?? "bg-sand-100 text-sand-500"}`,
+				children: status
+			}),
+			data.effort && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+				className: "text-[11px] px-1.5 py-0.5 rounded-md bg-sand-100 text-sand-500 font-mono",
+				children: ["effort=", data.effort]
+			}),
+			data.project_name && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+				className: "text-[12px] text-sand-400",
+				children: ["· project=", data.project_name]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "ml-auto text-[11px] text-sand-400",
+				children: data.token_name
+			})
+		]
+	});
+}
+function MetricsPanel({ data, toolCallCount }) {
+	const denom = data.input_tokens;
+	const cacheHitRate = denom > 0 ? `${Math.round(data.cache_read_tokens / denom * 100)}%` : "—";
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "panel overflow-hidden px-5 py-3 space-y-3",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "grid grid-cols-4 gap-x-6",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+					label: "Duration",
+					value: `${(data.duration_ms / 1e3).toFixed(1)}s`
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+					label: "Cost",
+					value: data.cost_usd !== null ? formatMicroUsd(data.cost_usd) : "—"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+					label: "Tool Calls",
+					value: `${toolCallCount}회`
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+					label: "Cache Hit",
+					value: cacheHitRate
+				})
+			]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "border-t border-sand-100/60 pt-3 grid grid-cols-4 gap-x-6",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+					label: "Input",
+					value: formatNum(data.input_tokens)
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+					label: "Output",
+					value: formatNum(data.output_tokens)
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+					label: "Cache Read",
+					value: formatNum(data.cache_read_tokens)
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+					label: "Cache Write",
+					value: formatNum(data.cache_creation_tokens)
+				})
+			]
+		})]
+	});
+}
+function formatDurationMs(ms) {
+	if (ms == null) return "—";
+	return ms >= 1e3 ? `${(ms / 1e3).toFixed(1)}s` : `${ms}ms`;
+}
+function CompactMetric({ label, value }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+		children: label
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "mt-0.5 text-[13px] font-semibold text-sand-800 tabular-nums",
+		children: value
+	})] });
+}
+function ToolCallItem({ entry }) {
+	const hasError = !!entry.error;
+	const [opened, setOpened] = (0, import_react.useState)(false);
+	const { data: detail } = RequestLogStepService.useRequestLogStep("A", entry.id, { enabled: opened });
+	const args = detail ? safeParseJson(detail.tool_args) : null;
+	const result = detail ? safeParseJson(detail.tool_result) : null;
+	const error = detail?.error ?? entry.error;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", {
+		className: "group/tool",
+		onToggle: (e) => setOpened(e.currentTarget.open),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("summary", {
+			className: "flex items-center gap-2 px-3 py-2 cursor-pointer select-none list-none hover:bg-sand-50 transition-colors rounded-md",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideChevronDown, { className: "size-3 text-sand-400 transition-transform group-open/tool:rotate-0 -rotate-90 shrink-0" }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: "text-[10px] px-1.5 py-0.5 rounded bg-sand-100 text-sand-500 font-mono shrink-0",
+					children: ["call ", entry.callIndex + 1]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "text-[13px] font-medium text-sand-800 font-mono truncate",
+					children: entry.toolName
+				}),
+				hasError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "text-[10px] px-1.5 py-0.5 rounded-full bg-red-100 text-red-600 font-medium uppercase shrink-0",
+					children: "error"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "ml-auto text-[11px] text-sand-400 tabular-nums shrink-0",
+					children: formatDurationMs(entry.durationMs)
+				})
+			]
+		}), opened && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "mt-1 mx-1 mb-3 space-y-2",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "text-[10px] uppercase tracking-wider text-sand-400 font-medium px-2",
+					children: "Request"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "mt-1 rounded-md bg-sand-50 p-3 overflow-auto",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedContent, { text: detail ? JSON.stringify(args) : "Loading..." })
+				})] }),
+				error && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "text-[10px] uppercase tracking-wider text-red-500 font-medium px-2",
+					children: "Error"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "mt-1 rounded-md bg-red-50 border border-red-100 p-3 overflow-auto",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedContent, { text: error })
+				})] }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "text-[10px] uppercase tracking-wider text-sand-400 font-medium px-2",
+					children: "Response"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "mt-1 rounded-md bg-sand-50 p-3 overflow-auto",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedContent, {
+						text: detail ? typeof result === "string" ? result : JSON.stringify(result) : "Loading...",
+						markdown: true
+					})
+				})] })
+			]
+		})]
+	});
+}
+function ReasoningBlock({ stepId }) {
+	const [opened, setOpened] = (0, import_react.useState)(false);
+	const { data: detail } = RequestLogStepService.useRequestLogStep("A", stepId, { enabled: opened });
+	const reasoningText = detail?.reasoning_text ?? null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", {
+		className: "group/reason mt-3",
+		onToggle: (e) => setOpened(e.currentTarget.open),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("summary", {
+			className: "flex items-center gap-2 cursor-pointer select-none list-none",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideChevronDown, { className: "size-3 text-sand-400 transition-transform group-open/reason:rotate-0 -rotate-90 shrink-0" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-[10px] uppercase tracking-wider text-sand-500 font-medium",
+				children: "Reasoning"
+			})]
+		}), opened && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "mt-2 rounded-md bg-white/70 border border-sand-100 p-3 overflow-auto",
+			children: reasoningText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedContent, {
+				text: reasoningText,
+				markdown: true
+			}) : !detail ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-sm text-sand-400",
+				children: "Loading..."
+			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-sm text-sand-400",
+				children: "No reasoning text captured."
+			})
+		})]
+	});
+}
+function StepTreeItem({ entry }) {
+	const generate = entry.generate;
+	const hasReasoning = generate != null && generate.reasoningTokens != null && generate.reasoningTokens > 0;
+	const errorCount = entry.toolCalls.filter((toolCall) => toolCall.error).length;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", {
+		open: true,
+		className: "group/step border-l border-sand-200 pl-3",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("summary", {
+			className: "flex items-center gap-2 py-2 cursor-pointer select-none list-none",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideChevronDown, { className: "size-3.5 text-sand-400 transition-transform group-open/step:rotate-0 -rotate-90 shrink-0" }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: "text-[10px] px-1.5 py-0.5 rounded bg-sienna-100 text-sienna-700 font-mono shrink-0",
+					children: ["step ", entry.stepIndex + 1]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "text-[13px] font-semibold text-sand-900",
+					children: "LLM call"
+				}),
+				generate?.finishReason && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "text-[10px] px-1.5 py-0.5 rounded bg-sand-100 text-sand-500 font-mono shrink-0",
+					children: generate.finishReason
+				}),
+				hasReasoning && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "text-[10px] px-1.5 py-0.5 rounded bg-blue-100 text-blue-600 font-medium shrink-0",
+					children: "reasoning"
+				}),
+				errorCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: "text-[10px] px-1.5 py-0.5 rounded-full bg-red-100 text-red-600 font-medium uppercase shrink-0",
+					children: [errorCount, " error"]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: "ml-auto text-[11px] text-sand-400 tabular-nums shrink-0",
+					children: [entry.toolCalls.length, " tools"]
+				})
+			]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "ml-4 mb-4 space-y-3",
+			children: [generate && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "rounded-md border border-sand-100 bg-sand-50/70 p-3",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "grid grid-cols-3 md:grid-cols-6 gap-3",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CompactMetric, {
+							label: "Duration",
+							value: formatDurationMs(generate.durationMs)
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CompactMetric, {
+							label: "Input",
+							value: formatNum(generate.inputTokens ?? 0)
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CompactMetric, {
+							label: "Output",
+							value: formatNum(generate.outputTokens ?? 0)
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CompactMetric, {
+							label: "Cache Read",
+							value: formatNum(generate.cacheReadTokens ?? 0)
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CompactMetric, {
+							label: "Cache Write",
+							value: formatNum(generate.cacheCreationTokens ?? 0)
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CompactMetric, {
+							label: "Reasoning",
+							value: generate.reasoningTokens != null ? formatNum(generate.reasoningTokens) : "—"
+						})
+					]
+				}), hasReasoning && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReasoningBlock, { stepId: generate.id })]
+			}), entry.toolCalls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "space-y-0.5",
+				children: entry.toolCalls.map((toolCall) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolCallItem, { entry: toolCall }, `${toolCall.stepIndex}-${toolCall.callIndex}-${toolCall.toolCallId}`))
+			})]
+		})]
+	});
+}
+function StepTreeSection({ steps }) {
+	const toolCallCount = steps.reduce((sum, step) => sum + step.toolCalls.length, 0);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, {
+		title: `Steps (${steps.length} steps · ${toolCallCount} tool calls)`,
+		defaultOpen: true,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "space-y-1",
+			children: steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StepTreeItem, { entry: step }, step.stepIndex))
+		})
+	});
+}
+function buildStepTree(steps) {
+	const grouped = /* @__PURE__ */ new Map();
+	function ensureStep(stepIndex) {
+		const existing = grouped.get(stepIndex);
+		if (existing) return existing;
+		const next = {
+			stepIndex,
+			generate: null,
+			toolCalls: []
+		};
+		grouped.set(stepIndex, next);
+		return next;
+	}
+	for (const step of steps) {
+		const group = ensureStep(step.step_index);
+		if (step.type === "generate") {
+			group.generate = {
+				id: step.id,
+				stepIndex: step.step_index,
+				inputTokens: step.input_tokens,
+				outputTokens: step.output_tokens,
+				cacheReadTokens: step.cache_read_tokens,
+				cacheCreationTokens: step.cache_creation_tokens,
+				durationMs: step.duration_ms,
+				finishReason: step.finish_reason,
+				reasoningTokens: step.reasoning_tokens
+			};
+			continue;
+		}
+		if (step.type === "tool_call") group.toolCalls.push({
+			id: step.id,
+			stepIndex: step.step_index,
+			callIndex: step.tool_call_index ?? group.toolCalls.length,
+			toolCallId: step.tool_call_id ?? "",
+			toolName: step.tool_name ?? "",
+			durationMs: step.tool_duration_ms ?? 0,
+			error: step.error
+		});
+	}
+	return [...grouped.values()].map((step) => ({
+		...step,
+		toolCalls: step.toolCalls.toSorted((a, b) => a.callIndex - b.callIndex)
+	})).toSorted((a, b) => a.stepIndex - b.stepIndex);
+}
+function historyItemBg(item) {
+	if (item.type === "function_call" || item.type === "function_call_output") return "bg-caution-400/10";
+	if (item.role === "assistant") return "bg-sage-50";
+	return "bg-sand-50";
+}
+function historyItemLabel(item) {
+	if (item.type === "function_call") return `fn: ${item.name ?? "unknown"}`;
+	if (item.type === "function_call_output") return `fn result`;
+	return item.role ?? item.type;
+}
+function extractText(content) {
+	if (typeof content === "string") return content;
+	if (Array.isArray(content)) return content.map((c) => {
+		if (typeof c === "object" && c !== null && "text" in c) return c.text;
+		return JSON.stringify(c);
+	}).join("\n");
+	return JSON.stringify(content);
+}
+function HistorySection({ history }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, {
+		title: "History",
+		defaultOpen: false,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "space-y-1.5",
+			children: history.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: `rounded-md px-3 py-2 ${historyItemBg(item)}`,
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "text-[10px] uppercase tracking-wider text-sand-500 font-medium mb-1",
+						children: historyItemLabel(item)
+					}),
+					item.content != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", {
+						className: "text-[12px] text-sand-700 whitespace-pre-wrap wrap-break-word font-mono leading-relaxed max-h-40 overflow-auto",
+						children: extractText(item.content)
+					}),
+					item.arguments && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", {
+						className: "text-[12px] text-sand-700 whitespace-pre-wrap wrap-break-word font-mono leading-relaxed max-h-40 overflow-auto",
+						children: item.arguments
+					}),
+					item.output && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", {
+						className: "text-[12px] text-sand-700 whitespace-pre-wrap wrap-break-word font-mono leading-relaxed max-h-40 overflow-auto",
+						children: item.output
+					})
+				]
+			}, `hist-${i}`))
+		})
+	});
+}
 function RequestDetail({ id }) {
 	const { data, isLoading } = RequestLogService.useRequestLog("A", id);
+	const { data: stepsData } = RequestLogStepService.useRequestLogSteps("T", {
+		request_log_id: id,
+		num: 0,
+		page: 1,
+		orderBy: "id-asc"
+	});
 	if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: "max-w-300 mx-auto -translate-x-4 space-y-4",
+		className: "max-w-6xl mx-auto space-y-4",
 		children: [
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-32 bg-sand-200 rounded animate-pulse" }),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-40 bg-sand-100 rounded-lg animate-pulse" }),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-32 bg-sand-100 rounded-lg animate-pulse" })
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-40 panel animate-pulse" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-32 panel animate-pulse" })
 		]
 	});
 	if (!data) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: "max-w-300 mx-auto -translate-x-4",
+		className: "max-w-6xl mx-auto",
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
-			to: "/",
-			className: "flex items-center gap-1 text-sm text-sand-500 hover:text-sienna-500 mb-4",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideArrowLeft, { className: "size-4" }), "Back to Dashboard"]
+			to: "/logs",
+			className: "flex items-center gap-1 text-[13px] text-sand-500 hover:text-sienna-500 mb-4",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideArrowLeft, { className: "size-3.5" }), "Back to Logs"]
 		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
 			className: "text-sand-400 text-sm",
 			children: "Request not found."
 		})]
 	});
-	const denom = data.input_tokens + data.cache_read_tokens + data.cache_creation_tokens;
-	const cacheHitRate = denom > 0 ? `${Math.round(data.cache_read_tokens / denom * 100)}%` : "—";
+	const stepTree = buildStepTree(stepsData?.rows ?? []);
+	const toolCalls = stepTree.flatMap((step) => step.toolCalls);
+	const hasSteps = stepTree.length > 0;
+	const history = data.history ?? null;
+	const hasHistory = history !== null && history.length > 0;
+	const promptSections = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, {
+			title: "System",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, { text: data.system_prompt ?? "null" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedContent, {
+					text: data.system_prompt ?? "null",
+					markdown: true
+				})]
+			})
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, {
+			title: "User",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, { text: data.user_prompt ?? "null" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedContent, {
+					text: data.user_prompt ?? "null",
+					markdown: true
+				})]
+			})
+		})]
+	});
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: "max-w-300 mx-auto -translate-x-4 space-y-5",
+		className: `mx-auto space-y-4 ${hasSteps ? "max-w-[120rem]" : "max-w-6xl"}`,
 		children: [
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
-				to: "/",
-				className: "flex items-center gap-1 text-sm text-sand-500 hover:text-sienna-500",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideArrowLeft, { className: "size-4" }), "Back to Dashboard"]
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
-				className: "text-xl font-medium text-sand-900 tracking-tight",
-				children: "Request Detail"
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, {
-				title: "System",
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "relative rounded-lg bg-sand-50 px-4 py-3",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, { text: data.system_prompt ?? "null" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedContent, { text: data.system_prompt ?? "null" })]
-				})
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, {
-				title: "User",
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "relative rounded-lg bg-sand-50 px-4 py-3",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, { text: data.user_prompt ?? "null" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedContent, { text: data.user_prompt ?? "null" })]
-				})
+				to: "/logs",
+				className: "inline-flex items-center gap-1 text-[13px] text-sand-500 hover:text-sienna-500 transition-colors",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideArrowLeft, { className: "size-3.5" }), "Back to Logs"]
 			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeaderBar, { data }),
+			data.error_message && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorPanel, { message: data.error_message }),
+			hasHistory && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HistorySection, { history }),
+			hasSteps ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex gap-4 items-start",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "flex-1 min-w-0",
+					children: promptSections
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "flex-1 min-w-0 space-y-4",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StepTreeSection, { steps: stepTree })
+				})]
+			}) : promptSections,
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, {
 				title: "Response",
 				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "relative rounded-lg bg-sand-50 px-4 py-3",
+					className: "relative",
 					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, { text: data.response }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedContent, {
 						text: data.response,
 						markdown: true
 					})]
 				})
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, {
-				title: "Token Breakdown",
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-					className: "rounded-lg bg-sand-50 px-5 py-4",
-					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", {
-						className: "w-full text-sm tabular-nums",
-						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tbody", {
-							className: "text-sand-700",
-							children: [
-								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "py-1.5",
-									children: "Input"
-								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "py-1.5 text-right font-medium text-sand-800",
-									children: formatNum(data.input_tokens)
-								})] }),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "py-1.5",
-									children: "Output"
-								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "py-1.5 text-right font-medium text-sand-800",
-									children: formatNum(data.output_tokens)
-								})] }),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "py-1.5",
-									children: "Cache Read"
-								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "py-1.5 text-right font-medium text-sand-800",
-									children: formatNum(data.cache_read_tokens)
-								})] }),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "py-1.5",
-									children: "Cache Write"
-								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "py-1.5 text-right font-medium text-sand-800",
-									children: formatNum(data.cache_creation_tokens)
-								})] }),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", {
-									className: "border-t border-sand-200/60",
-									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-										className: "py-1.5 font-medium text-sand-800",
-										children: "Cache Hit Rate"
-									}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-										className: "py-1.5 text-right font-medium text-sienna-500 text-base",
-										children: cacheHitRate
-									})]
-								})
-							]
-						})
-					})
-				})
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, {
-				title: "Info",
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-					className: "rounded-lg bg-sand-50 px-5 py-4",
-					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", {
-						className: "w-full text-sm",
-						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tbody", {
-							className: "text-sand-700",
-							children: [
-								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "py-1.5 text-sand-500",
-									children: "Project"
-								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "py-1.5 text-right font-medium text-sand-800",
-									children: data.project_name ?? "—"
-								})] }),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "py-1.5 text-sand-500",
-									children: "Token"
-								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "py-1.5 text-right font-medium text-sand-800",
-									children: data.token_name
-								})] }),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "py-1.5 text-sand-500",
-									children: "Model"
-								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "py-1.5 text-right font-medium text-sand-800",
-									children: data.model_name ?? "—"
-								})] }),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "py-1.5 text-sand-500",
-									children: "Time"
-								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "py-1.5 text-right font-medium text-sand-800",
-									children: formatDateTime(data.created_at)
-								})] }),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-									className: "py-1.5 text-sand-500",
-									children: "Duration"
-								}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", {
-									className: "py-1.5 text-right font-medium text-sand-800",
-									children: [(data.duration_ms / 1e3).toFixed(1), "s"]
-								})] })
-							]
-						})
-					})
-				})
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MetricsPanel, {
+				data,
+				toolCallCount: toolCalls.length
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pb-8" })
 		]