@loopstack/loopstack-studio 0.29.5 → 0.30.0

package/dist/features/documents/document-details/DocumentDetails.js

@@ -1,425 +1,625 @@
+import { useDocumentConfigs } from "../../../hooks/useConfig.js";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../../components/ui/accordion.js";
+import { Button } from "../../../components/ui/button.js";
 import { Badge } from "../../../components/ui/badge.js";
-import { Card, CardContent } from "../../../components/ui/card.js";
+import { CodeBlock } from "../../../components/ai-elements/code-block.js";
+import { extractApiResponseInfo, formatDurationMs, formatNumber, formatRelativeTime, summarizeDocumentContent } from "./document-debug-utils.js";
 import { c } from "react/compiler-runtime";
-import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Code, FileText, Tag } from "lucide-react";
+import React, { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle, CheckIcon, CopyIcon, Cpu, FileJson, Settings2, Timer, Workflow } from "lucide-react";
 var formatDate = (e) => {
 	try {
 		return new Date(e).toLocaleString();
 	} catch {
-		return e;
+		return String(e);
 	}
-}, DocumentDetails_default = (he) => {
-	let n = c(101), { data: r } = he;
-	if (!r) return null;
+}, DetailRow = (e) => {
+	let t = c(7), { label: n, children: r } = e, i;
+	t[0] === n ? i = t[1] : (i = /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground font-medium",
+		children: n
+	}), t[0] = n, t[1] = i);
+	let a;
+	t[2] === r ? a = t[3] : (a = /* @__PURE__ */ jsx("span", {
+		className: "min-w-0 wrap-break-word",
+		children: r
+	}), t[2] = r, t[3] = a);
+	let o;
+	return t[4] !== i || t[5] !== a ? (o = /* @__PURE__ */ jsxs("div", {
+		className: "grid min-w-0 grid-cols-[7.5rem_1fr] gap-x-3 gap-y-0.5 text-sm",
+		children: [i, a]
+	}), t[4] = i, t[5] = a, t[6] = o) : o = t[6], o;
+}, CopyableId = (e) => {
+	let t = c(12), { value: n } = e, [r, i] = useState(!1), o;
+	t[0] === n ? o = t[1] : (o = async () => {
+		await navigator.clipboard.writeText(n), i(!0), setTimeout(() => i(!1), 1500);
+	}, t[0] = n, t[1] = o);
+	let s = o, l;
+	t[2] === n ? l = t[3] : (l = /* @__PURE__ */ jsx("code", {
+		className: "bg-muted min-w-0 flex-1 truncate rounded px-1.5 py-0.5 font-mono text-xs",
+		children: n
+	}), t[2] = n, t[3] = l);
+	let u;
+	t[4] === r ? u = t[5] : (u = jsx(r ? CheckIcon : CopyIcon, { className: "size-3" }), t[4] = r, t[5] = u);
+	let d;
+	t[6] !== s || t[7] !== u ? (d = /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "ghost",
+		size: "icon",
+		className: "size-6 shrink-0",
+		onClick: s,
+		children: u
+	}), t[6] = s, t[7] = u, t[8] = d) : d = t[8];
+	let f;
+	return t[9] !== l || t[10] !== d ? (f = /* @__PURE__ */ jsxs("span", {
+		className: "flex w-full min-w-0 items-center gap-1.5",
+		children: [l, d]
+	}), t[9] = l, t[10] = d, t[11] = f) : f = t[11], f;
+}, BadgeList = (e) => {
+	let t = c(6), { items: n, emptyLabel: r } = e, i = r === void 0 ? "None" : r;
+	if (!n?.length) {
+		let e;
+		return t[0] === i ? e = t[1] : (e = /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: i
+		}), t[0] = i, t[1] = e), e;
+	}
+	let a;
+	t[2] === n ? a = t[3] : (a = n.map(_temp), t[2] = n, t[3] = a);
+	let o;
+	return t[4] === a ? o = t[5] : (o = /* @__PURE__ */ jsx("span", {
+		className: "flex flex-wrap gap-1",
+		children: a
+	}), t[4] = a, t[5] = o), o;
+}, ContentSummarySection = (e) => {
+	let t = c(25), { summary: n } = e, r;
+	t[0] === n.kind ? r = t[1] : (r = /* @__PURE__ */ jsx(DetailRow, {
+		label: "Type",
+		children: n.kind
+	}), t[0] = n.kind, t[1] = r);
 	let i;
-	n[0] === r.schema ? i = n[1] : (i = typeof r.schema == "string" ? r.schema : JSON.stringify(r.schema, null, 2), n[0] = r.schema, n[1] = i);
-	let ge = i, a;
-	n[2] === r.content ? a = n[3] : (a = typeof r.content == "string" ? r.content : JSON.stringify(r.content, null, 2), n[2] = r.content, n[3] = a);
-	let _e = a, o;
-	n[4] === Symbol.for("react.memo_cache_sentinel") ? (o = [
-		"document-info",
-		"content",
-		"schema"
-	], n[4] = o) : o = n[4];
+	t[2] === n.role ? i = t[3] : (i = n.role && /* @__PURE__ */ jsx(DetailRow, {
+		label: "Role",
+		children: n.role
+	}), t[2] = n.role, t[3] = i);
+	let a;
+	t[4] === n.messageId ? a = t[5] : (a = n.messageId && /* @__PURE__ */ jsx(DetailRow, {
+		label: "Message ID",
+		children: /* @__PURE__ */ jsx(CopyableId, { value: n.messageId })
+	}), t[4] = n.messageId, t[5] = a);
+	let o;
+	t[6] === n.stopReason ? o = t[7] : (o = n.stopReason && /* @__PURE__ */ jsx(DetailRow, {
+		label: "Stop reason",
+		children: n.stopReason
+	}), t[6] = n.stopReason, t[7] = o);
 	let s;
-	n[5] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ jsx(AccordionTrigger, {
-		className: "text-base font-semibold",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" }), "Document Information"]
-		})
-	}), n[5] = s) : s = n[5];
+	t[8] === n.charCount ? s = t[9] : (s = n.charCount != null && /* @__PURE__ */ jsxs(DetailRow, {
+		label: "Size",
+		children: [formatNumber(n.charCount), " chars"]
+	}), t[8] = n.charCount, t[9] = s);
 	let l;
-	n[6] === Symbol.for("react.memo_cache_sentinel") ? (l = /* @__PURE__ */ jsx("span", {
-		className: "font-medium",
-		children: "ID:"
-	}), n[6] = l) : l = n[6];
+	t[10] === n.itemCount ? l = t[11] : (l = n.itemCount != null && /* @__PURE__ */ jsx(DetailRow, {
+		label: "Items",
+		children: n.itemCount
+	}), t[10] = n.itemCount, t[11] = l);
 	let u;
-	n[7] === r.id ? u = n[8] : (u = /* @__PURE__ */ jsxs("div", {
-		className: "text-sm",
-		children: [
-			l,
-			" ",
-			r.id
-		]
-	}), n[7] = r.id, n[8] = u);
-	let d;
-	n[9] === Symbol.for("react.memo_cache_sentinel") ? (d = /* @__PURE__ */ jsx("span", {
-		className: "font-medium",
-		children: "Name:"
-	}), n[9] = d) : d = n[9];
+	t[12] === n.topLevelKeys ? u = t[13] : (u = n.topLevelKeys && n.topLevelKeys.length > 0 && /* @__PURE__ */ jsx(DetailRow, {
+		label: "Fields",
+		children: /* @__PURE__ */ jsx(BadgeList, {
+			items: n.topLevelKeys,
+			emptyLabel: "—"
+		})
+	}), t[12] = n.topLevelKeys, t[13] = u);
 	let f;
-	n[10] === r.name ? f = n[11] : (f = /* @__PURE__ */ jsxs("div", {
-		className: "text-sm",
-		children: [
-			d,
-			" ",
-			r.name
-		]
-	}), n[10] = r.name, n[11] = f);
+	t[14] === n.blocks ? f = t[15] : (f = n.blocks && n.blocks.length > 0 && /* @__PURE__ */ jsx(DetailRow, {
+		label: "Blocks",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "flex flex-col gap-1",
+			children: n.blocks.map(_temp3)
+		})
+	}), t[14] = n.blocks, t[15] = f);
 	let p;
-	n[12] === Symbol.for("react.memo_cache_sentinel") ? (p = /* @__PURE__ */ jsx("span", {
-		className: "font-medium",
-		children: "Version:"
-	}), n[12] = p) : p = n[12];
-	let m;
-	n[13] === r.version ? m = n[14] : (m = /* @__PURE__ */ jsxs("div", {
-		className: "text-sm",
+	return t[16] !== r || t[17] !== i || t[18] !== a || t[19] !== o || t[20] !== s || t[21] !== l || t[22] !== u || t[23] !== f ? (p = /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2 pb-1",
 		children: [
-			p,
-			" ",
-			r.version
+			r,
+			i,
+			a,
+			o,
+			s,
+			l,
+			u,
+			f
 		]
-	}), n[13] = r.version, n[14] = m);
+	}), t[16] = r, t[17] = i, t[18] = a, t[19] = o, t[20] = s, t[21] = l, t[22] = u, t[23] = f, t[24] = p) : p = t[24], p;
+}, LlmMetadataSection = (e) => {
+	let a = c(21), { provider: o, apiInfo: l, rawResponse: u } = e, f;
+	a[0] === o ? f = a[1] : (f = o && /* @__PURE__ */ jsx(DetailRow, {
+		label: "Provider",
+		children: o
+	}), a[0] = o, a[1] = f);
+	let p;
+	a[2] === l.model ? p = a[3] : (p = l.model && /* @__PURE__ */ jsx(DetailRow, {
+		label: "Model",
+		children: l.model
+	}), a[2] = l.model, a[3] = p);
 	let h;
-	n[15] === Symbol.for("react.memo_cache_sentinel") ? (h = /* @__PURE__ */ jsx("span", {
-		className: "font-medium",
-		children: "Index:"
-	}), n[15] = h) : h = n[15];
+	a[4] === l.id ? h = a[5] : (h = l.id && /* @__PURE__ */ jsx(DetailRow, {
+		label: "Response ID",
+		children: /* @__PURE__ */ jsx(CopyableId, { value: l.id })
+	}), a[4] = l.id, a[5] = h);
 	let g;
-	n[16] === r.index ? g = n[17] : (g = /* @__PURE__ */ jsxs("div", {
-		className: "text-sm",
+	a[6] === l.stopReason ? g = a[7] : (g = l.stopReason && /* @__PURE__ */ jsx(DetailRow, {
+		label: "Finish reason",
+		children: l.stopReason
+	}), a[6] = l.stopReason, a[7] = g);
+	let v;
+	a[8] === l.usage ? v = a[9] : (v = l.usage && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(DetailRow, {
+			label: "Input tokens",
+			children: formatNumber(l.usage.input)
+		}),
+		/* @__PURE__ */ jsx(DetailRow, {
+			label: "Output tokens",
+			children: formatNumber(l.usage.output)
+		}),
+		l.usage.cacheRead != null && l.usage.cacheRead > 0 && /* @__PURE__ */ jsx(DetailRow, {
+			label: "Cache read",
+			children: formatNumber(l.usage.cacheRead)
+		}),
+		l.usage.cacheWrite != null && l.usage.cacheWrite > 0 && /* @__PURE__ */ jsx(DetailRow, {
+			label: "Cache write",
+			children: formatNumber(l.usage.cacheWrite)
+		}),
+		l.usage.reasoning != null && l.usage.reasoning > 0 && /* @__PURE__ */ jsx(DetailRow, {
+			label: "Reasoning",
+			children: formatNumber(l.usage.reasoning)
+		})
+	] }), a[8] = l.usage, a[9] = v);
+	let y;
+	a[10] !== f || a[11] !== p || a[12] !== h || a[13] !== g || a[14] !== v ? (y = /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2 pb-1",
 		children: [
+			f,
+			p,
 			h,
-			" ",
-			r.index
+			g,
+			v
 		]
-	}), n[16] = r.index, n[17] = g);
-	let _;
-	n[18] === Symbol.for("react.memo_cache_sentinel") ? (_ = /* @__PURE__ */ jsx("div", {
-		className: "mb-2 text-sm font-medium",
-		children: "Labels:"
-	}), n[18] = _) : _ = n[18];
-	let v;
-	n[19] === r.labels ? v = n[20] : (v = r.labels && r.labels.length > 0 ? r.labels.map(_temp) : /* @__PURE__ */ jsx("span", {
-		className: "text-muted-foreground text-sm",
-		children: "None"
-	}), n[19] = r.labels, n[20] = v);
-	let y;
-	n[21] === v ? y = n[22] : (y = /* @__PURE__ */ jsxs("div", {
-		className: "pt-2",
-		children: [_, /* @__PURE__ */ jsx("div", {
-			className: "flex flex-wrap gap-2",
-			children: v
-		})]
-	}), n[21] = v, n[22] = y);
+	}), a[10] = f, a[11] = p, a[12] = h, a[13] = g, a[14] = v, a[15] = y) : y = a[15];
 	let b;
-	n[23] === Symbol.for("react.memo_cache_sentinel") ? (b = /* @__PURE__ */ jsx("div", {
-		className: "mb-2 text-sm font-medium",
-		children: "Tags:"
-	}), n[23] = b) : b = n[23];
-	let x;
-	n[24] === r.tags ? x = n[25] : (x = r.tags && r.tags.length > 0 ? r.tags.map(_temp2) : /* @__PURE__ */ jsx("span", {
-		className: "text-muted-foreground text-sm",
-		children: "None"
-	}), n[24] = r.tags, n[25] = x);
-	let S;
-	n[26] === x ? S = n[27] : (S = /* @__PURE__ */ jsxs("div", {
-		className: "pt-2",
-		children: [b, /* @__PURE__ */ jsx("div", {
+	a[16] === u ? b = a[17] : (b = u != null && /* @__PURE__ */ jsx(Accordion, {
+		type: "single",
+		collapsible: !0,
+		className: "min-w-0",
+		children: /* @__PURE__ */ jsxs(AccordionItem, {
+			value: "raw-response",
+			children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+				className: "py-2 text-sm font-medium",
+				children: "Raw API response"
+			}), /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx(CodeBlock, {
+				code: JSON.stringify(u, null, 2),
+				language: "json",
+				className: "max-h-48 min-w-0 max-w-full"
+			}) })]
+		})
+	}), a[16] = u, a[17] = b);
+	let pe;
+	return a[18] !== y || a[19] !== b ? (pe = /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [y, b]
+	}), a[18] = y, a[19] = b, a[20] = pe) : pe = a[20], pe;
+}, DocumentDetails_default = (a) => {
+	let d = c(129), { data: h, content: g, workflowContext: _ } = a, y = useDocumentConfigs();
+	if (!h) return null;
+	let b, x, S, C, w, T, E, D, O, k, A, j, M, N;
+	if (d[0] !== g || d[1] !== h.createdAt || d[2] !== h.documentName || d[3] !== h.index || d[4] !== h.isInvalidated || d[5] !== h.labels || d[6] !== h.meta || d[7] !== h.place || d[8] !== h.tags || d[9] !== h.transition || d[10] !== h.updatedAt || d[11] !== h.validationError || d[12] !== y || d[13] !== _) {
+		let e = y.get(h.documentName), a = e?.meta, m = h.meta ?? {}, me = e?.ui?.widgets?.[0]?.widget ?? "form", P;
+		d[28] === g ? P = d[29] : (P = summarizeDocumentContent(g), d[28] = g, d[29] = P);
+		let F = P, I = extractApiResponseInfo(m.response), L = !!h.validationError, R = e?.schema && Object.keys(e.schema).length > 0, z = e?.ui && Object.keys(e.ui).length > 0, B = !!(m.provider || m.response || I.model || I.usage), V = F.kind !== "null", H, he;
+		if (d[30] !== h.createdAt || d[31] !== h.updatedAt) {
+			let e = new Date(h.createdAt);
+			d[34] === h.updatedAt ? H = d[35] : (H = new Date(h.updatedAt).getTime(), d[34] = h.updatedAt, d[35] = H), he = e.getTime(), d[30] = h.createdAt, d[31] = h.updatedAt, d[32] = H, d[33] = he;
+		} else H = d[32], he = d[33];
+		let ge = H - he, _e = Object.entries(m).filter(_temp4), U;
+		d[36] !== V || d[37] !== B || d[38] !== L || d[39] !== _ ? (U = ["overview", "context"], _ && U.push("workflow"), V && U.push("content-summary"), B && U.push("llm"), L && U.push("validation"), d[36] = V, d[37] = B, d[38] = L, d[39] = _, d[40] = U) : U = d[40], w = "min-w-0 space-y-3";
+		let ve;
+		d[41] === _?.isActive ? ve = d[42] : (ve = _?.isActive && /* @__PURE__ */ jsx(Badge, {
+			variant: "default",
+			className: "text-xs",
+			children: "Active"
+		}), d[41] = _?.isActive, d[42] = ve);
+		let ye;
+		d[43] === h.isInvalidated ? ye = d[44] : (ye = h.isInvalidated && /* @__PURE__ */ jsx(Badge, {
+			variant: "destructive",
+			className: "text-xs",
+			children: "Invalidated"
+		}), d[43] = h.isInvalidated, d[44] = ye);
+		let be;
+		d[45] === L ? be = d[46] : (be = L && /* @__PURE__ */ jsxs(Badge, {
+			variant: "destructive",
+			className: "gap-1 text-xs",
+			children: [/* @__PURE__ */ jsx(AlertCircle, { className: "size-3" }), "Validation error"]
+		}), d[45] = L, d[46] = be), T = /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-wrap gap-2",
-			children: x
-		})]
-	}), n[26] = x, n[27] = S);
-	let C;
-	n[28] === Symbol.for("react.memo_cache_sentinel") ? (C = /* @__PURE__ */ jsx("span", {
-		className: "font-medium",
-		children: "Created:"
-	}), n[28] = C) : C = n[28];
-	let w;
-	n[29] === r.createdAt ? w = n[30] : (w = formatDate(r.createdAt), n[29] = r.createdAt, n[30] = w);
-	let T;
-	n[31] === w ? T = n[32] : (T = /* @__PURE__ */ jsxs("div", {
-		className: "text-sm",
-		children: [
-			C,
-			" ",
-			w
-		]
-	}), n[31] = w, n[32] = T);
-	let E;
-	n[33] === Symbol.for("react.memo_cache_sentinel") ? (E = /* @__PURE__ */ jsx("span", {
-		className: "font-medium",
-		children: "Updated:"
-	}), n[33] = E) : E = n[33];
-	let D;
-	n[34] === r.updatedAt ? D = n[35] : (D = formatDate(r.updatedAt), n[34] = r.updatedAt, n[35] = D);
-	let O;
-	n[36] === D ? O = n[37] : (O = /* @__PURE__ */ jsxs("div", {
-		className: "text-sm",
-		children: [
-			E,
-			" ",
-			D
-		]
-	}), n[36] = D, n[37] = O);
-	let k;
-	n[38] !== T || n[39] !== O ? (k = /* @__PURE__ */ jsxs("div", {
-		className: "space-y-1 pt-2",
-		children: [T, O]
-	}), n[38] = T, n[39] = O, n[40] = k) : k = n[40];
-	let A;
-	n[41] === Symbol.for("react.memo_cache_sentinel") ? (A = /* @__PURE__ */ jsx("span", {
-		className: "font-medium",
-		children: "Workspace ID:"
-	}), n[41] = A) : A = n[41];
-	let j;
-	n[42] === r.workspaceId ? j = n[43] : (j = /* @__PURE__ */ jsxs("div", {
-		className: "text-sm",
-		children: [
-			A,
-			" ",
-			r.workspaceId
-		]
-	}), n[42] = r.workspaceId, n[43] = j);
-	let M;
-	n[44] === Symbol.for("react.memo_cache_sentinel") ? (M = /* @__PURE__ */ jsx("span", {
-		className: "font-medium",
-		children: "Workflow ID:"
-	}), n[44] = M) : M = n[44];
-	let N;
-	n[45] === r.workflowId ? N = n[46] : (N = /* @__PURE__ */ jsxs("div", {
-		className: "text-sm",
-		children: [
-			M,
-			" ",
-			r.workflowId
-		]
-	}), n[45] = r.workflowId, n[46] = N);
+			children: [
+				ve,
+				m.streaming && /* @__PURE__ */ jsx(Badge, {
+					variant: "secondary",
+					className: "text-xs",
+					children: "Streaming"
+				}),
+				ye,
+				be,
+				a?.level && /* @__PURE__ */ jsx(Badge, {
+					variant: "outline",
+					className: "text-xs capitalize",
+					children: a.level
+				}),
+				a?.hidden && /* @__PURE__ */ jsx(Badge, {
+					variant: "outline",
+					className: "text-xs",
+					children: "Hidden"
+				}),
+				m.invalidate && /* @__PURE__ */ jsx(Badge, {
+					variant: "outline",
+					className: "text-xs",
+					children: "Invalidates on update"
+				})
+			]
+		}), b = Accordion, x = "multiple", E = U, D = "min-w-0 space-y-1";
+		let xe;
+		d[47] === Symbol.for("react.memo_cache_sentinel") ? (xe = /* @__PURE__ */ jsx(AccordionTrigger, {
+			className: "py-3 text-sm font-semibold",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Workflow, { className: "size-4" }), "Overview"]
+			})
+		}), d[47] = xe) : xe = d[47];
+		let Se;
+		d[48] === h.documentName ? Se = d[49] : (Se = /* @__PURE__ */ jsx(DetailRow, {
+			label: "Document name",
+			children: h.documentName
+		}), d[48] = h.documentName, d[49] = Se);
+		let Ce;
+		d[50] === h.index ? Ce = d[51] : (Ce = /* @__PURE__ */ jsx(DetailRow, {
+			label: "Index",
+			children: h.index
+		}), d[50] = h.index, d[51] = Ce);
+		let we = /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2 pb-1",
+			children: [
+				Se,
+				/* @__PURE__ */ jsx(DetailRow, {
+					label: "Widget",
+					children: /* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						className: "font-mono text-xs",
+						children: me
+					})
+				}),
+				Ce,
+				a?.mimeType && /* @__PURE__ */ jsx(DetailRow, {
+					label: "MIME",
+					children: a.mimeType
+				})
+			]
+		}) });
+		d[52] === we ? O = d[53] : (O = /* @__PURE__ */ jsxs(AccordionItem, {
+			value: "overview",
+			children: [xe, we]
+		}), d[52] = we, d[53] = O), d[54] !== h.place || d[55] !== _ ? (k = _ && /* @__PURE__ */ jsxs(AccordionItem, {
+			value: "workflow",
+			children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+				className: "py-3 text-sm font-semibold",
+				children: "Workflow"
+			}), /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsxs("div", {
+				className: "space-y-2 pb-1",
+				children: [
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Title",
+						children: _.title
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Workflow",
+						children: _.workflowName
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Status",
+						children: /* @__PURE__ */ jsx(Badge, {
+							variant: "outline",
+							className: "text-xs capitalize",
+							children: _.status
+						})
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Current place",
+						children: _.place
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Document place",
+						children: h.place ?? "—"
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Place match",
+						children: h.place === _.place ? "Same as current" : "Different place"
+					}),
+					/* @__PURE__ */ jsx(DetailRow, {
+						label: "Interactive",
+						children: _.isDocumentActive ? _.isActive ? "Yes — awaiting input" : "Eligible, workflow not waiting" : "No"
+					}),
+					_.parentTitle && /* @__PURE__ */ jsx(DetailRow, {
+						label: "Parent",
+						children: _.parentTitle
+					})
+				]
+			}) })]
+		}), d[54] = h.place, d[55] = _, d[56] = k) : k = d[56];
+		let Te;
+		d[57] === Symbol.for("react.memo_cache_sentinel") ? (Te = /* @__PURE__ */ jsx(AccordionTrigger, {
+			className: "py-3 text-sm font-semibold",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Timer, { className: "size-4" }), "Execution context"]
+			})
+		}), d[57] = Te) : Te = d[57];
+		let Ee = h.transition ?? "—", W;
+		d[58] === Ee ? W = d[59] : (W = /* @__PURE__ */ jsx(DetailRow, {
+			label: "Transition",
+			children: Ee
+		}), d[58] = Ee, d[59] = W);
+		let De = h.place ?? "—", G;
+		d[60] === De ? G = d[61] : (G = /* @__PURE__ */ jsx(DetailRow, {
+			label: "Place",
+			children: De
+		}), d[60] = De, d[61] = G);
+		let K;
+		d[62] === h.labels ? K = d[63] : (K = /* @__PURE__ */ jsx(DetailRow, {
+			label: "Labels",
+			children: /* @__PURE__ */ jsx(BadgeList, { items: h.labels })
+		}), d[62] = h.labels, d[63] = K);
+		let q;
+		d[64] === h.tags ? q = d[65] : (q = /* @__PURE__ */ jsx(DetailRow, {
+			label: "Tags",
+			children: /* @__PURE__ */ jsx(BadgeList, { items: h.tags })
+		}), d[64] = h.tags, d[65] = q);
+		let J;
+		d[66] === h.createdAt ? J = d[67] : (J = formatDate(h.createdAt), d[66] = h.createdAt, d[67] = J);
+		let Y;
+		d[68] === h.createdAt ? Y = d[69] : (Y = formatRelativeTime(h.createdAt), d[68] = h.createdAt, d[69] = Y);
+		let X;
+		d[70] === Y ? X = d[71] : (X = /* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground ml-1 text-xs",
+			children: [
+				"(",
+				Y,
+				")"
+			]
+		}), d[70] = Y, d[71] = X);
+		let Z;
+		d[72] !== J || d[73] !== X ? (Z = /* @__PURE__ */ jsxs(DetailRow, {
+			label: "Created",
+			children: [J, X]
+		}), d[72] = J, d[73] = X, d[74] = Z) : Z = d[74];
+		let Q;
+		d[75] === h.updatedAt ? Q = d[76] : (Q = formatDate(h.updatedAt), d[75] = h.updatedAt, d[76] = Q);
+		let Oe;
+		d[77] === h.updatedAt ? Oe = d[78] : (Oe = formatRelativeTime(h.updatedAt), d[77] = h.updatedAt, d[78] = Oe);
+		let ke;
+		d[79] === Oe ? ke = d[80] : (ke = /* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground ml-1 text-xs",
+			children: [
+				"(",
+				Oe,
+				")"
+			]
+		}), d[79] = Oe, d[80] = ke);
+		let Ae;
+		d[81] !== Q || d[82] !== ke ? (Ae = /* @__PURE__ */ jsxs(DetailRow, {
+			label: "Updated",
+			children: [Q, ke]
+		}), d[81] = Q, d[82] = ke, d[83] = Ae) : Ae = d[83];
+		let $;
+		d[84] === ge ? $ = d[85] : ($ = ge > 0 && /* @__PURE__ */ jsx(DetailRow, {
+			label: "Edit window",
+			children: formatDurationMs(ge)
+		}), d[84] = ge, d[85] = $), d[86] !== W || d[87] !== G || d[88] !== K || d[89] !== q || d[90] !== Z || d[91] !== Ae || d[92] !== $ ? (A = /* @__PURE__ */ jsxs(AccordionItem, {
+			value: "context",
+			children: [Te, /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsxs("div", {
+				className: "space-y-2 pb-1",
+				children: [
+					W,
+					G,
+					K,
+					q,
+					Z,
+					Ae,
+					$
+				]
+			}) })]
+		}), d[86] = W, d[87] = G, d[88] = K, d[89] = q, d[90] = Z, d[91] = Ae, d[92] = $, d[93] = A) : A = d[93], d[94] !== F || d[95] !== V ? (j = V && /* @__PURE__ */ jsxs(AccordionItem, {
+			value: "content-summary",
+			children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+				className: "py-3 text-sm font-semibold",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(FileJson, { className: "size-4" }), "Content summary"]
+				})
+			}), /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx(ContentSummarySection, { summary: F }) })]
+		}), d[94] = F, d[95] = V, d[96] = j) : j = d[96], M = B && /* @__PURE__ */ jsxs(AccordionItem, {
+			value: "llm",
+			children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+				className: "py-3 text-sm font-semibold",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(Cpu, { className: "size-4" }), "LLM / API"]
+				})
+			}), /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx(LlmMetadataSection, {
+				provider: m.provider,
+				apiInfo: I,
+				rawResponse: m.response
+			}) })]
+		}), d[97] !== h.validationError || d[98] !== L ? (N = L && /* @__PURE__ */ jsxs(AccordionItem, {
+			value: "validation",
+			children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+				className: "py-3 text-sm font-semibold text-destructive",
+				children: "Validation error"
+			}), /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx(CodeBlock, {
+				code: JSON.stringify(h.validationError, null, 2),
+				language: "json",
+				className: "max-h-64 min-w-0 max-w-full"
+			}) })]
+		}), d[97] = h.validationError, d[98] = L, d[99] = N) : N = d[99], S = (z || R) && /* @__PURE__ */ jsxs(AccordionItem, {
+			value: "config",
+			children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+				className: "py-3 text-sm font-semibold",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(Settings2, { className: "size-4" }), "Configuration"]
+				})
+			}), /* @__PURE__ */ jsxs(AccordionContent, {
+				className: "space-y-3",
+				children: [z && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground mb-1.5 text-xs font-medium uppercase tracking-wide",
+					children: "UI"
+				}), /* @__PURE__ */ jsx(CodeBlock, {
+					code: JSON.stringify(e?.ui, null, 2),
+					language: "json",
+					className: "max-h-48 min-w-0 max-w-full"
+				})] }), R && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground mb-1.5 text-xs font-medium uppercase tracking-wide",
+					children: "Schema"
+				}), /* @__PURE__ */ jsx(CodeBlock, {
+					code: JSON.stringify(e?.schema, null, 2),
+					language: "json",
+					className: "max-h-48 min-w-0 max-w-full"
+				})] })]
+			})]
+		}), C = (a || _e.length > 0) && /* @__PURE__ */ jsxs(AccordionItem, {
+			value: "meta",
+			children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+				className: "py-3 text-sm font-semibold",
+				children: "Document meta"
+			}), /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsxs("div", {
+				className: "space-y-2 pb-1",
+				children: [
+					a?.enableAtPlaces && /* @__PURE__ */ jsx(DetailRow, {
+						label: "Show at",
+						children: /* @__PURE__ */ jsx(BadgeList, {
+							items: a.enableAtPlaces,
+							emptyLabel: "—"
+						})
+					}),
+					a?.hideAtPlaces && /* @__PURE__ */ jsx(DetailRow, {
+						label: "Hide at",
+						children: /* @__PURE__ */ jsx(BadgeList, {
+							items: a.hideAtPlaces,
+							emptyLabel: "—"
+						})
+					}),
+					_e.map(_temp5)
+				]
+			}) })]
+		}), d[0] = g, d[1] = h.createdAt, d[2] = h.documentName, d[3] = h.index, d[4] = h.isInvalidated, d[5] = h.labels, d[6] = h.meta, d[7] = h.place, d[8] = h.tags, d[9] = h.transition, d[10] = h.updatedAt, d[11] = h.validationError, d[12] = y, d[13] = _, d[14] = b, d[15] = x, d[16] = S, d[17] = C, d[18] = w, d[19] = T, d[20] = E, d[21] = D, d[22] = O, d[23] = k, d[24] = A, d[25] = j, d[26] = M, d[27] = N;
+	} else b = d[14], x = d[15], S = d[16], C = d[17], w = d[18], T = d[19], E = d[20], D = d[21], O = d[22], k = d[23], A = d[24], j = d[25], M = d[26], N = d[27];
 	let P;
-	n[47] === Symbol.for("react.memo_cache_sentinel") ? (P = /* @__PURE__ */ jsx("span", {
-		className: "font-medium",
-		children: "Workflow ID:"
-	}), n[47] = P) : P = n[47];
+	d[100] === Symbol.for("react.memo_cache_sentinel") ? (P = /* @__PURE__ */ jsx(AccordionTrigger, {
+		className: "py-3 text-sm font-semibold",
+		children: "Identifiers"
+	}), d[100] = P) : P = d[100];
 	let F;
-	n[48] === r.workflowId ? F = n[49] : (F = /* @__PURE__ */ jsxs("div", {
-		className: "text-sm",
-		children: [
-			P,
-			" ",
-			r.workflowId
-		]
-	}), n[48] = r.workflowId, n[49] = F);
+	d[101] === h.id ? F = d[102] : (F = /* @__PURE__ */ jsx(DetailRow, {
+		label: "Document",
+		children: /* @__PURE__ */ jsx(CopyableId, { value: h.id })
+	}), d[101] = h.id, d[102] = F);
 	let I;
-	n[50] !== j || n[51] !== N || n[52] !== F ? (I = /* @__PURE__ */ jsxs("div", {
-		className: "space-y-1 pt-2",
-		children: [
-			j,
-			N,
-			F
-		]
-	}), n[50] = j, n[51] = N, n[52] = F, n[53] = I) : I = n[53];
+	d[103] === h.workflowId ? I = d[104] : (I = /* @__PURE__ */ jsx(DetailRow, {
+		label: "Workflow",
+		children: /* @__PURE__ */ jsx(CopyableId, { value: h.workflowId })
+	}), d[103] = h.workflowId, d[104] = I);
 	let L;
-	n[54] === r.meta ? L = n[55] : (L = r.meta?.mimeType && /* @__PURE__ */ jsxs("div", {
-		className: "pt-2 text-sm",
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "font-medium",
-				children: "MIME Type:"
-			}),
-			" ",
-			r.meta.mimeType
-		]
-	}), n[54] = r.meta, n[55] = L);
+	d[105] === h.workspaceId ? L = d[106] : (L = /* @__PURE__ */ jsx(DetailRow, {
+		label: "Workspace",
+		children: /* @__PURE__ */ jsx(CopyableId, { value: h.workspaceId })
+	}), d[105] = h.workspaceId, d[106] = L);
 	let R;
-	n[56] === r.meta ? R = n[57] : (R = r.meta?.enableAtPlaces && /* @__PURE__ */ jsxs("div", {
-		className: "pt-2",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "mb-2 text-sm font-medium",
-			children: "Enable At Places:"
-		}), /* @__PURE__ */ jsx("div", {
-			className: "flex flex-wrap gap-2",
-			children: r.meta.enableAtPlaces.map(_temp3)
-		})]
-	}), n[56] = r.meta, n[57] = R);
-	let z;
-	n[58] === r.meta ? z = n[59] : (z = r.meta && Object.entries(r.meta).filter(_temp4).map(_temp5), n[58] = r.meta, n[59] = z);
-	let B;
-	n[60] === Symbol.for("react.memo_cache_sentinel") ? (B = /* @__PURE__ */ jsx("span", {
-		className: "font-medium",
-		children: "Invalidated:"
-	}), n[60] = B) : B = n[60];
-	let ve = r.isInvalidated ? "Yes" : "No", V;
-	n[61] === ve ? V = n[62] : (V = /* @__PURE__ */ jsxs("div", {
-		className: "text-sm",
-		children: [
-			B,
-			" ",
-			ve
-		]
-	}), n[61] = ve, n[62] = V);
-	let H;
-	n[63] === Symbol.for("react.memo_cache_sentinel") ? (H = /* @__PURE__ */ jsx("span", {
-		className: "font-medium",
-		children: "Pending Removal:"
-	}), n[63] = H) : H = n[63];
-	let ye = r.isPendingRemoval ? "Yes" : "No", U;
-	n[64] === ye ? U = n[65] : (U = /* @__PURE__ */ jsxs("div", {
-		className: "text-sm",
-		children: [
-			H,
-			" ",
-			ye
-		]
-	}), n[64] = ye, n[65] = U);
-	let W;
-	n[66] === Symbol.for("react.memo_cache_sentinel") ? (W = /* @__PURE__ */ jsx("span", {
-		className: "font-medium",
-		children: "Transition:"
-	}), n[66] = W) : W = n[66];
-	let G;
-	n[67] === r.transition ? G = n[68] : (G = /* @__PURE__ */ jsxs("div", {
-		className: "text-sm",
-		children: [
-			W,
-			" ",
-			r.transition
-		]
-	}), n[67] = r.transition, n[68] = G);
-	let K;
-	n[69] === Symbol.for("react.memo_cache_sentinel") ? (K = /* @__PURE__ */ jsx("span", {
-		className: "font-medium",
-		children: "Place:"
-	}), n[69] = K) : K = n[69];
-	let q;
-	n[70] === r.place ? q = n[71] : (q = /* @__PURE__ */ jsxs("div", {
-		className: "text-sm",
-		children: [
-			K,
-			" ",
-			r.place
-		]
-	}), n[70] = r.place, n[71] = q);
-	let J;
-	n[72] !== V || n[73] !== U || n[74] !== G || n[75] !== q ? (J = /* @__PURE__ */ jsxs("div", {
-		className: "space-y-1 pt-2",
-		children: [
-			V,
-			U,
-			G,
-			q
-		]
-	}), n[72] = V, n[73] = U, n[74] = G, n[75] = q, n[76] = J) : J = n[76];
-	let Y;
-	n[77] !== m || n[78] !== g || n[79] !== y || n[80] !== S || n[81] !== k || n[82] !== I || n[83] !== L || n[84] !== R || n[85] !== z || n[86] !== J || n[87] !== u || n[88] !== f ? (Y = /* @__PURE__ */ jsxs(AccordionItem, {
-		value: "document-info",
-		children: [s, /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsxs("div", {
-			className: "ml-6 space-y-2",
+	d[107] !== F || d[108] !== I || d[109] !== L ? (R = /* @__PURE__ */ jsxs(AccordionItem, {
+		value: "ids",
+		children: [P, /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2 pb-1",
 			children: [
-				u,
-				f,
-				m,
-				g,
-				y,
-				S,
-				k,
+				F,
 				I,
-				L,
-				R,
-				z,
-				J
+				L
 			]
 		}) })]
-	}), n[77] = m, n[78] = g, n[79] = y, n[80] = S, n[81] = k, n[82] = I, n[83] = L, n[84] = R, n[85] = z, n[86] = J, n[87] = u, n[88] = f, n[89] = Y) : Y = n[89];
-	let X;
-	n[90] === Symbol.for("react.memo_cache_sentinel") ? (X = /* @__PURE__ */ jsx(AccordionTrigger, {
-		className: "text-base font-semibold",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" }), "Content"]
-		})
-	}), n[90] = X) : X = n[90];
-	let be = `max-h-96 overflow-auto rounded bg-gray-100 p-2 text-xs wrap-break-word whitespace-pre-wrap ${r.meta?.mimeType === "text/markdown" ? "font-sans" : "font-mono"}`, Z;
-	n[91] !== _e || n[92] !== be ? (Z = /* @__PURE__ */ jsxs(AccordionItem, {
-		value: "content",
-		children: [X, /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx(Card, {
-			className: "bg-gray-50",
-			children: /* @__PURE__ */ jsx(CardContent, {
-				className: "p-4",
-				children: /* @__PURE__ */ jsx("pre", {
-					className: be,
-					children: _e
-				})
-			})
-		}) })]
-	}), n[91] = _e, n[92] = be, n[93] = Z) : Z = n[93];
-	let Q;
-	n[94] === Symbol.for("react.memo_cache_sentinel") ? (Q = /* @__PURE__ */ jsx(AccordionTrigger, {
-		className: "text-base font-semibold",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ jsx(Code, { className: "h-4 w-4" }), "Schema"]
-		})
-	}), n[94] = Q) : Q = n[94];
-	let $;
-	n[95] === ge ? $ = n[96] : ($ = /* @__PURE__ */ jsxs(AccordionItem, {
-		value: "schema",
-		children: [Q, /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx(Card, {
-			className: "bg-gray-50",
-			children: /* @__PURE__ */ jsx(CardContent, {
-				className: "p-4",
-				children: /* @__PURE__ */ jsx("pre", {
-					className: "rounded bg-gray-100 p-2 font-mono text-xs wrap-break-word whitespace-pre-wrap",
-					children: ge
-				})
-			})
-		}) })]
-	}), n[95] = ge, n[96] = $);
-	let xe;
-	return n[97] !== Y || n[98] !== Z || n[99] !== $ ? (xe = /* @__PURE__ */ jsx("div", {
-		className: "mt-4",
-		children: /* @__PURE__ */ jsxs(Accordion, {
-			type: "multiple",
-			defaultValue: o,
-			className: "space-y-2",
-			children: [
-				Y,
-				Z,
-				$
-			]
-		})
-	}), n[97] = Y, n[98] = Z, n[99] = $, n[100] = xe) : xe = n[100], xe;
+	}), d[107] = F, d[108] = I, d[109] = L, d[110] = R) : R = d[110];
+	let z;
+	d[111] !== b || d[112] !== x || d[113] !== S || d[114] !== C || d[115] !== R || d[116] !== E || d[117] !== D || d[118] !== O || d[119] !== k || d[120] !== A || d[121] !== j || d[122] !== M || d[123] !== N ? (z = /* @__PURE__ */ jsxs(b, {
+		type: x,
+		defaultValue: E,
+		className: D,
+		children: [
+			O,
+			k,
+			A,
+			j,
+			M,
+			N,
+			S,
+			C,
+			R
+		]
+	}), d[111] = b, d[112] = x, d[113] = S, d[114] = C, d[115] = R, d[116] = E, d[117] = D, d[118] = O, d[119] = k, d[120] = A, d[121] = j, d[122] = M, d[123] = N, d[124] = z) : z = d[124];
+	let B;
+	return d[125] !== w || d[126] !== T || d[127] !== z ? (B = /* @__PURE__ */ jsxs("div", {
+		className: w,
+		children: [T, z]
+	}), d[125] = w, d[126] = T, d[127] = z, d[128] = B) : B = d[128], B;
 };
-function _temp(e, t) {
+function _temp(e) {
 	return /* @__PURE__ */ jsx(Badge, {
 		variant: "outline",
 		className: "text-xs",
 		children: e
-	}, t);
+	}, e);
 }
-function _temp2(e, t) {
-	return /* @__PURE__ */ jsxs(Badge, {
-		variant: "secondary",
-		className: "text-xs",
-		children: [/* @__PURE__ */ jsx(Tag, { className: "mr-1 h-3 w-3" }), e]
-	}, t);
-}
-function _temp3(e, t) {
+function _temp2(e) {
 	return /* @__PURE__ */ jsx(Badge, {
 		variant: "outline",
-		className: "bg-blue-50 text-xs",
+		className: "text-xs",
 		children: e
-	}, t);
+	}, e);
+}
+function _temp3(e) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex flex-wrap items-center gap-1",
+		children: [/* @__PURE__ */ jsxs(Badge, {
+			variant: "secondary",
+			className: "font-mono text-xs",
+			children: [
+				e.type,
+				" × ",
+				e.count
+			]
+		}), e.labels?.map(_temp2)]
+	}, e.type);
 }
 function _temp4(e) {
-	let [t] = e;
-	return !["mimeType", "enableAtPlaces"].includes(t);
+	let [t, n] = e;
+	return ![
+		"data",
+		"response",
+		"provider",
+		"streaming"
+	].includes(t) && n != null && n !== "";
 }
 function _temp5(e) {
-	let [t, me] = e;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "text-sm",
-		children: [
-			/* @__PURE__ */ jsxs("span", {
-				className: "font-medium",
-				children: [t, ":"]
-			}),
-			" ",
-			typeof me == "object" ? JSON.stringify(me) : String(me)
-		]
+	let [t, n] = e;
+	return /* @__PURE__ */ jsx(DetailRow, {
+		label: t,
+		children: typeof n == "object" ? JSON.stringify(n) : String(n)
 	}, t);
 }
 export { DocumentDetails_default as default };