@loopstack/loopstack-studio 0.29.4 → 0.30.0

package/dist/features/debug/components/WorkflowFlowViewer.js

@@ -8,79 +8,77 @@ import { c } from "react/compiler-runtime";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Loader2 } from "lucide-react";
-var nodeTypes = { stateNode: StateNode_default }, edgeTypes = { workflowTransition: WorkflowTransitionEdge_default }, WorkflowFlowViewer_default = (p) => {
-	let m = c(43), { workflowId: h, workflows: g, workflowConfig: _, direction: v } = p, y = v === void 0 ? "LR" : v, { data: b, isPending: x, isLoading: S } = useWorkflow(h), C;
-	m[0] === Symbol.for("react.memo_cache_sentinel") ? (C = [], m[0] = C) : C = m[0];
-	let [w, T, E] = useNodesState(C), D;
-	m[1] === Symbol.for("react.memo_cache_sentinel") ? (D = [], m[1] = D) : D = m[1];
-	let [O, k, A] = useEdgesState(D), { fitView: j } = useReactFlow(), M = useRef(!1), N;
-	m[2] === Symbol.for("react.memo_cache_sentinel") ? (N = {}, m[2] = N) : N = m[2];
-	let [P, F] = useState(N), [I, L] = useState(!0), R = b, z;
-	if (m[3] !== h || m[4] !== g) {
+var nodeTypes = { stateNode: StateNode_default }, edgeTypes = { workflowTransition: WorkflowTransitionEdge_default }, WorkflowFlowViewer_default = (f) => {
+	let p = c(41), { workflowId: m, workflows: h, workflowConfig: g, direction: _ } = f, v = _ === void 0 ? "LR" : _, { data: y, isPending: b, isLoading: x } = useWorkflow(m), S;
+	p[0] === Symbol.for("react.memo_cache_sentinel") ? (S = [], p[0] = S) : S = p[0];
+	let [C, w, T] = useNodesState(S), E;
+	p[1] === Symbol.for("react.memo_cache_sentinel") ? (E = [], p[1] = E) : E = p[1];
+	let [D, O, k] = useEdgesState(E), { fitView: A } = useReactFlow(), j = useRef(!1), M = useRef(m), N;
+	p[2] === Symbol.for("react.memo_cache_sentinel") ? (N = {}, p[2] = N) : N = p[2];
+	let [P, F] = useState(N), [I, L] = useState(!0), R = y, z;
+	if (p[3] !== m || p[4] !== h) {
 		let t;
-		m[6] === h ? t = m[7] : (t = (t) => t.id !== h, m[6] = h, m[7] = t), z = g.filter(t), m[3] = h, m[4] = g, m[5] = z;
-	} else z = m[5];
-	let B = z, V = Object.values(P).some(_temp), H = !!h && !b && (x || S) || V, U;
-	m[8] === Symbol.for("react.memo_cache_sentinel") ? (U = (t, d) => {
-		F((f) => f[t] === d ? f : {
-			...f,
-			[t]: d
+		p[6] === m ? t = p[7] : (t = (t) => t.id !== m, p[6] = m, p[7] = t), z = h.filter(t), p[3] = m, p[4] = h, p[5] = z;
+	} else z = p[5];
+	let B = z, V = Object.values(P).some(_temp), H = !!m && !y && (b || x) || V, U;
+	p[8] === Symbol.for("react.memo_cache_sentinel") ? (U = (t, u) => {
+		F((d) => d[t] === u ? d : {
+			...d,
+			[t]: u
 		});
-	}, m[8] = U) : U = m[8];
+	}, p[8] = U) : U = p[8];
 	let W = U, G;
-	m[9] !== k || m[10] !== T ? (G = (t, d, f) => {
-		T(d), k(f);
-	}, m[9] = k, m[10] = T, m[11] = G) : G = m[11];
-	let K = G, q;
-	m[12] !== k || m[13] !== T ? (q = () => {
-		M.current = !1, T([]), k([]);
-	}, m[12] = k, m[13] = T, m[14] = q) : q = m[14];
-	let J;
-	m[15] !== k || m[16] !== T || m[17] !== h ? (J = [
-		h,
-		T,
-		k
-	], m[15] = k, m[16] = T, m[17] = h, m[18] = J) : J = m[18], useLayoutEffect(q, J);
+	p[9] !== O || p[10] !== w ? (G = (t, u, d) => {
+		w(u), O(d);
+	}, p[9] = O, p[10] = w, p[11] = G) : G = p[11];
+	let K = G, q, J;
+	p[12] !== O || p[13] !== w || p[14] !== m ? (q = () => {
+		M.current !== m && (M.current = m, j.current = !1, w([]), O([]));
+	}, J = [
+		m,
+		w,
+		O
+	], p[12] = O, p[13] = w, p[14] = m, p[15] = q, p[16] = J) : (q = p[15], J = p[16]), useLayoutEffect(q, J);
 	let Y, X;
-	m[19] !== j || m[20] !== H || m[21] !== w.length ? (Y = () => {
-		if (!H && w.length > 0 && !M.current) {
-			M.current = !0;
+	p[17] !== A || p[18] !== H || p[19] !== C.length ? (Y = () => {
+		if (!H && C.length > 0 && !j.current) {
+			j.current = !0;
 			let t = setTimeout(() => {
-				j({ padding: .2 });
+				A({ padding: .2 });
 			}, 150);
 			return () => clearTimeout(t);
 		}
 	}, X = [
 		H,
-		w.length,
-		j
-	], m[19] = j, m[20] = H, m[21] = w.length, m[22] = Y, m[23] = X) : (Y = m[22], X = m[23]), useEffect(Y, X);
+		C.length,
+		A
+	], p[17] = A, p[18] = H, p[19] = C.length, p[20] = Y, p[21] = X) : (Y = p[20], X = p[21]), useEffect(Y, X);
 	let Z;
-	m[24] !== y || m[25] !== B || m[26] !== K || m[27] !== b || m[28] !== R || m[29] !== I || m[30] !== _ || m[31] !== h ? (Z = R && /* @__PURE__ */ jsx(WorkflowGraph_default, {
-		parentWorkflow: b,
+	p[22] !== v || p[23] !== B || p[24] !== K || p[25] !== y || p[26] !== R || p[27] !== I || p[28] !== g || p[29] !== m ? (Z = R && /* @__PURE__ */ jsx(WorkflowGraph_default, {
+		parentWorkflow: y,
 		workflow: R,
-		workflowConfig: _,
+		workflowConfig: g,
 		extraTransitionSources: B,
 		onGraphReady: K,
 		onLoadingChange: W,
-		direction: y,
+		direction: v,
 		hideSameStateTransitions: !I
-	}, h), m[24] = y, m[25] = B, m[26] = K, m[27] = b, m[28] = R, m[29] = I, m[30] = _, m[31] = h, m[32] = Z) : Z = m[32];
+	}, m), p[22] = v, p[23] = B, p[24] = K, p[25] = y, p[26] = R, p[27] = I, p[28] = g, p[29] = m, p[30] = Z) : Z = p[30];
 	let Q;
-	m[33] !== O || m[34] !== H || m[35] !== w || m[36] !== A || m[37] !== E || m[38] !== I ? (Q = H && w.length === 0 ? /* @__PURE__ */ jsx("div", {
+	p[31] !== D || p[32] !== H || p[33] !== C || p[34] !== k || p[35] !== T || p[36] !== I ? (Q = H && C.length === 0 ? /* @__PURE__ */ jsx("div", {
 		className: "flex h-full items-center justify-center",
 		children: /* @__PURE__ */ jsx(Loader2, { className: "text-muted-foreground h-8 w-8 animate-spin" })
-	}) : w.length === 0 ? /* @__PURE__ */ jsx("div", {
+	}) : C.length === 0 ? /* @__PURE__ */ jsx("div", {
 		className: "text-muted-foreground flex h-full items-center justify-center",
 		children: /* @__PURE__ */ jsx("p", {
 			className: "font-medium",
 			children: "No workflow transitions available"
 		})
 	}) : /* @__PURE__ */ jsxs(index, {
-		nodes: w,
-		edges: O,
-		onNodesChange: E,
-		onEdgesChange: A,
+		nodes: C,
+		edges: D,
+		onNodesChange: T,
+		onEdgesChange: k,
 		nodeTypes,
 		edgeTypes,
 		fitView: !0,
@@ -110,12 +108,12 @@ var nodeTypes = { stateNode: StateNode_default }, edgeTypes = { workflowTransiti
 			}),
 			/* @__PURE__ */ jsx(Controls, { className: "bg-card border-border rounded-lg border shadow-md" })
 		]
-	}), m[33] = O, m[34] = H, m[35] = w, m[36] = A, m[37] = E, m[38] = I, m[39] = Q) : Q = m[39];
+	}), p[31] = D, p[32] = H, p[33] = C, p[34] = k, p[35] = T, p[36] = I, p[37] = Q) : Q = p[37];
 	let $;
-	return m[40] !== Z || m[41] !== Q ? ($ = /* @__PURE__ */ jsxs("div", {
+	return p[38] !== Z || p[39] !== Q ? ($ = /* @__PURE__ */ jsxs("div", {
 		className: "h-full w-full",
 		children: [Z, Q]
-	}), m[40] = Z, m[41] = Q, m[42] = $) : $ = m[42], $;
+	}), p[38] = Z, p[39] = Q, p[40] = $) : $ = p[40], $;
 };
 function _temp(t) {
 	return t;

package/dist/features/documents/DocumentRenderer.js

@@ -1,6 +1,5 @@
+import { useDocumentConfigs } from "../../hooks/useConfig.js";
 import CompletionMessagePaper_default from "../../components/messages/CompletionMessagePaper.js";
-import { useFeatureRegistry } from "../feature-registry/FeatureRegistryProvider.js";
-import "../feature-registry/index.js";
 import OAuthPromptRenderer_default from "../oauth/OAuthPromptRenderer.js";
 import "../oauth/index.js";
 import AiMessage_default from "./renderers/AiMessage.js";
@@ -15,6 +14,8 @@ import LlmMessage_default from "./renderers/LlmMessage.js";
 import MarkdownMessageRenderer_default from "./renderers/MarkdownMessageRenderer.js";
 import PlainMessageRenderer_default from "./renderers/PlainMessageRenderer.js";
 import TextPromptRenderer_default from "./renderers/TextPromptRenderer.js";
+import { useFeatureRegistry } from "../feature-registry/FeatureRegistryProvider.js";
+import "../feature-registry/index.js";
 import { c } from "react/compiler-runtime";
 import React, { useMemo } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
@@ -31,12 +32,12 @@ var coreRendererRegistry = new Map([
 		className: "mb-4 flex",
 		children: /* @__PURE__ */ jsx(DocumentDebugRenderer_default, { document: e })
 	})],
-	["form", ({ parentWorkflow: _, workflow: v, document: y, isActive: b }) => /* @__PURE__ */ jsx(CompletionMessagePaper_default, {
+	["form", ({ parentWorkflow: e, workflow: v, document: y, isActive: b }) => /* @__PURE__ */ jsx(CompletionMessagePaper_default, {
 		role: "document",
 		fullWidth: !0,
 		timestamp: new Date(y.createdAt),
 		children: /* @__PURE__ */ jsx(DocumentFormRenderer_default, {
-			parentWorkflow: _,
+			parentWorkflow: e,
 			workflow: v,
 			document: y,
 			enabled: b,
@@ -73,23 +74,23 @@ var coreRendererRegistry = new Map([
 		isActive: y
 	})]
 ]);
-function resolveDocumentWidget(e) {
+function resolveWidgetName(e) {
 	let _ = e;
 	return _?.widgets?.[0]?.widget ? _.widgets[0].widget : _?.form?.widget ? _.form.widget : "form";
 }
-var DocumentRenderer_default = (e) => {
-	let v = c(8), y = useFeatureRegistry(), b = e.document, x;
-	if (v[0] !== b.ui || v[1] !== y) {
-		let e = resolveDocumentWidget(b.ui), _;
-		if (v[3] !== y) {
+var DocumentRenderer_default = (_) => {
+	let v = c(9), y = useFeatureRegistry(), b = useDocumentConfigs(), x = _.document, S;
+	if (v[0] !== x.documentName || v[1] !== b || v[2] !== y) {
+		let e = resolveWidgetName(b.get(x.documentName)?.ui), _;
+		if (v[4] !== y) {
 			_ = /* @__PURE__ */ new Map();
 			for (let e of y) if (e.documentRenderers) for (let [v, y] of Object.entries(e.documentRenderers)) _.set(v, y);
-			v[3] = y, v[4] = _;
-		} else _ = v[4];
-		let S = _;
-		x = coreRendererRegistry.get(e) ?? S.get(e), v[0] = b.ui, v[1] = y, v[2] = x;
-	} else x = v[2];
-	let S = x, C;
-	return v[5] !== S || v[6] !== e ? (C = /* @__PURE__ */ jsx("div", { children: S ? /* @__PURE__ */ jsx(S, { ...e }) : /* @__PURE__ */ jsx(Fragment$1, { children: "unknown document type" }) }), v[5] = S, v[6] = e, v[7] = C) : C = v[7], C;
+			v[4] = y, v[5] = _;
+		} else _ = v[5];
+		let C = _;
+		S = coreRendererRegistry.get(e) ?? C.get(e), v[0] = x.documentName, v[1] = b, v[2] = y, v[3] = S;
+	} else S = v[3];
+	let C = S, w;
+	return v[6] !== C || v[7] !== _ ? (w = /* @__PURE__ */ jsx("div", { children: C ? /* @__PURE__ */ jsx(C, { ..._ }) : /* @__PURE__ */ jsx(Fragment$1, { children: "unknown document type" }) }), v[6] = C, v[7] = _, v[8] = w) : w = v[8], w;
 };
 export { DocumentRenderer_default as default };

package/dist/features/documents/components/DocumentItem.js

@@ -1,27 +1,49 @@
+import { useDocumentConfigs } from "../../../hooks/useConfig.js";
+import { FadeIn } from "../../../components/motion/FadeIn.js";
 import DocumentRenderer_default from "../DocumentRenderer.js";
 import DocumentMetadataPills_default from "./DocumentMetadataPills.js";
 import { c } from "react/compiler-runtime";
 import React from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { omit } from "lodash";
-var DocumentItem_default = (s) => {
-	let l = c(13), { document: u, workflow: d, parentWorkflow: f, isActive: p, isLastItem: m, settings: h } = s, g = u.meta, _;
-	l[0] !== u || l[1] !== p || l[2] !== m || l[3] !== f || l[4] !== d ? (_ = /* @__PURE__ */ jsx(DocumentRenderer_default, {
-		document: u,
-		workflow: d,
-		parentWorkflow: f,
-		isActive: p,
-		isLastItem: m
-	}), l[0] = u, l[1] = p, l[2] = m, l[3] = f, l[4] = d, l[5] = _) : _ = l[5];
-	let v;
-	l[6] !== u || l[7] !== g || l[8] !== h.enableDebugMode ? (v = h.enableDebugMode ? /* @__PURE__ */ jsx(DocumentMetadataPills_default, { metaData: {
-		...g?.data ?? {},
-		document: {
-			...u,
-			meta: omit(g ?? {}, ["data"])
-		}
-	} }) : /* @__PURE__ */ jsx(Fragment$1, {}), l[6] = u, l[7] = g, l[8] = h.enableDebugMode, l[9] = v) : v = l[9];
-	let y;
-	return l[10] !== _ || l[11] !== v ? (y = /* @__PURE__ */ jsxs(Fragment$1, { children: [_, v] }), l[10] = _, l[11] = v, l[12] = y) : y = l[12], y;
+var DocumentItem_default = (l) => {
+	let u = c(27), { document: d, workflow: f, parentWorkflow: p, isActive: m, isLastItem: h, settings: g } = l, _ = useDocumentConfigs(), v;
+	if (u[0] !== d || u[1] !== _ || u[2] !== m || u[3] !== h || u[4] !== p || u[5] !== g.enableDebugMode || u[6] !== f) {
+		let e = _.get(d.documentName)?.meta, s = d.meta, l = d.place === f.place || !!e?.enableAtPlaces?.includes(f.place), y;
+		u[8] !== p.id || u[9] !== p.title || u[10] !== f.id ? (y = p.id === f.id ? {} : {
+			parentWorkflowId: p.id,
+			parentTitle: p.title
+		}, u[8] = p.id, u[9] = p.title, u[10] = f.id, u[11] = y) : y = u[11];
+		let b;
+		u[12] !== m || u[13] !== l || u[14] !== y || u[15] !== f.id || u[16] !== f.place || u[17] !== f.status || u[18] !== f.title || u[19] !== f.workflowName ? (b = {
+			workflowId: f.id,
+			workflowName: f.workflowName,
+			title: f.title,
+			status: f.status,
+			place: f.place,
+			isActive: m,
+			isDocumentActive: l,
+			...y
+		}, u[12] = m, u[13] = l, u[14] = y, u[15] = f.id, u[16] = f.place, u[17] = f.status, u[18] = f.title, u[19] = f.workflowName, u[20] = b) : b = u[20];
+		let x = b, S;
+		u[21] !== d || u[22] !== m || u[23] !== h || u[24] !== p || u[25] !== f ? (S = /* @__PURE__ */ jsx(DocumentRenderer_default, {
+			document: d,
+			workflow: f,
+			parentWorkflow: p,
+			isActive: m,
+			isLastItem: h
+		}), u[21] = d, u[22] = m, u[23] = h, u[24] = p, u[25] = f, u[26] = S) : S = u[26], v = /* @__PURE__ */ jsxs(FadeIn, { children: [S, g.enableDebugMode ? /* @__PURE__ */ jsx(DocumentMetadataPills_default, { metaData: {
+			...s?.data ?? {},
+			document: {
+				data: Object.assign({}, omit(d, ["content"]), {
+					meta: d.meta,
+					staticMeta: e
+				}),
+				content: d.content,
+				workflowContext: x
+			}
+		} }) : null] }), u[0] = d, u[1] = _, u[2] = m, u[3] = h, u[4] = p, u[5] = g.enableDebugMode, u[6] = f, u[7] = v;
+	} else v = u[7];
+	return v;
 };
 export { DocumentItem_default as default };

package/dist/features/documents/components/DocumentList.js

@@ -1,3 +1,4 @@
+import { useDocumentConfigs } from "../../../hooks/useConfig.js";
 import { WorkflowState } from "../../../packages/contracts/dist/enums/workflow-state.enum.js";
 import "../../../packages/contracts/dist/enums/index.js";
 import DocumentItem_default from "./DocumentItem.js";
@@ -5,44 +6,41 @@ import { c } from "react/compiler-runtime";
 import React, { useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useParams } from "react-router-dom";
-var DocumentList_default = (a) => {
-	let s = c(23), { workflow: l, childWorkflow: u, documents: d, scrollTo: f, settings: p } = a, { workflowId: m, clickId: h } = useParams(), g;
-	s[0] !== u.id || s[1] !== m || s[2] !== f ? (g = () => {
-		m === u.id && f(u.id);
-	}, s[0] = u.id, s[1] = m, s[2] = f, s[3] = g) : g = s[3];
-	let _;
-	s[4] !== u.id || s[5] !== h || s[6] !== m || s[7] !== f ? (_ = [
-		u.id,
-		m,
-		h,
-		f
-	], s[4] = u.id, s[5] = h, s[6] = m, s[7] = f, s[8] = _) : _ = s[8], useEffect(g, _);
-	let v = u.status === WorkflowState.Waiting, y;
-	if (s[9] !== u || s[10] !== d || s[11] !== v || s[12] !== p || s[13] !== l) {
+function getDocumentKey(e) {
+	let o = e.content;
+	return e.documentName === "llm_message" && typeof o?.id == "string" ? `llm-message-${o.id}` : e.id;
+}
+var DocumentList_default = (l) => {
+	let u = c(25), { workflow: d, childWorkflow: f, documents: p, scrollTo: m, settings: h } = l, { workflowId: g, clickId: _ } = useParams(), v = useDocumentConfigs(), y;
+	u[0] !== f.id || u[1] !== g || u[2] !== m ? (y = () => {
+		g === f.id && m(f.id);
+	}, u[0] = f.id, u[1] = g, u[2] = m, u[3] = y) : y = u[3];
+	let b;
+	u[4] !== f.id || u[5] !== _ || u[6] !== g || u[7] !== m ? (b = [
+		f.id,
+		g,
+		_,
+		m
+	], u[4] = f.id, u[5] = _, u[6] = g, u[7] = m, u[8] = b) : b = u[8], useEffect(y, b);
+	let x = f.status === WorkflowState.Waiting, S;
+	if (u[9] !== f || u[10] !== v || u[11] !== p || u[12] !== x || u[13] !== h || u[14] !== d) {
 		let e;
-		s[15] !== u || s[16] !== d.length || s[17] !== v || s[18] !== p || s[19] !== l ? (e = (e, i) => {
-			let a = e, o = e.place === u.place || !!a.meta?.enableAtPlaces?.includes(u.place);
-			return console.log({
-				isDocumentActive: o,
-				isWorkflowActive: v,
-				status: u.status,
-				place: u.place,
-				documentPlace: e.place,
-				availableTransitions: u.availableTransitions
-			}), /* @__PURE__ */ jsx(DocumentItem_default, {
+		u[16] !== f || u[17] !== v || u[18] !== p.length || u[19] !== x || u[20] !== h || u[21] !== d ? (e = (e, o) => {
+			let s = v.get(e.documentName), l = e.place === f.place || !!s?.meta?.enableAtPlaces?.includes(f.place);
+			return /* @__PURE__ */ jsx(DocumentItem_default, {
 				document: e,
-				workflow: u,
-				parentWorkflow: l,
-				isActive: v && o,
-				isLastItem: i === d.length - 1,
-				settings: p
-			}, e.id);
-		}, s[15] = u, s[16] = d.length, s[17] = v, s[18] = p, s[19] = l, s[20] = e) : e = s[20], y = d.map(e), s[9] = u, s[10] = d, s[11] = v, s[12] = p, s[13] = l, s[14] = y;
-	} else y = s[14];
-	let b;
-	return s[21] === y ? b = s[22] : (b = /* @__PURE__ */ jsx("div", {
+				workflow: f,
+				parentWorkflow: d,
+				isActive: x && l,
+				isLastItem: o === p.length - 1,
+				settings: h
+			}, getDocumentKey(e));
+		}, u[16] = f, u[17] = v, u[18] = p.length, u[19] = x, u[20] = h, u[21] = d, u[22] = e) : e = u[22], S = p.map(e), u[9] = f, u[10] = v, u[11] = p, u[12] = x, u[13] = h, u[14] = d, u[15] = S;
+	} else S = u[15];
+	let C;
+	return u[23] === S ? C = u[24] : (C = /* @__PURE__ */ jsx("div", {
 		className: "flex flex-col gap-3",
-		children: y
-	}), s[21] = y, s[22] = b), b;
+		children: S
+	}), u[23] = S, u[24] = C), C;
 };
 export { DocumentList_default as default };

package/dist/features/documents/components/DocumentMetadataPills.js

@@ -5,59 +5,112 @@ import PromptDetails_default from "../document-details/PromptDetails.js";
 import { c } from "react/compiler-runtime";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var DefaultMetadataRenderer = (e) => {
-	let s = c(4), { data: l } = e, u;
-	s[0] === l ? u = s[1] : (u = JSON.stringify(l, null, 2), s[0] = l, s[1] = u);
+var PILL_LABELS = {
+	document: "Document",
+	prompt: "LLM prompt"
+};
+function formatPillLabel(e) {
+	return PILL_LABELS[e] ? PILL_LABELS[e] : e.replace(/([A-Z])/g, " $1").replace(/^./, (e) => e.toUpperCase());
+}
+function isDocumentDebugPayload(e) {
+	return typeof e == "object" && !!e && "data" in e && "workflowContext" in e;
+}
+var StructuredMetadataRenderer = (e) => {
+	let l = c(2), { data: u } = e, d;
+	return l[0] === u ? d = l[1] : (d = /* @__PURE__ */ jsx("div", {
+		className: "min-w-0 space-y-2",
+		children: Object.entries(u).map(_temp)
+	}), l[0] = u, l[1] = d), d;
+}, DefaultMetadataRenderer = (e) => {
+	let l = c(6), { data: u } = e;
+	if (u && typeof u == "object" && !Array.isArray(u)) {
+		let e = u, d;
+		return l[0] === e ? d = l[1] : (d = /* @__PURE__ */ jsx(StructuredMetadataRenderer, { data: e }), l[0] = e, l[1] = d), d;
+	}
 	let d;
-	return s[2] === u ? d = s[3] : (d = /* @__PURE__ */ jsx("div", {
-		className: "bg-muted max-h-96 overflow-auto rounded-md p-4 font-mono whitespace-pre-wrap",
-		children: u
-	}), s[2] = u, s[3] = d), d;
+	l[2] === u ? d = l[3] : (d = JSON.stringify(u, null, 2), l[2] = u, l[3] = d);
+	let f;
+	return l[4] === d ? f = l[5] : (f = /* @__PURE__ */ jsx("pre", {
+		className: "bg-muted max-h-96 min-w-0 max-w-full overflow-x-auto overflow-y-auto rounded-md p-4 font-mono text-xs whitespace-pre-wrap",
+		children: d
+	}), l[4] = d, l[5] = f), f;
 }, metadataRenderers = {
 	prompt: (e) => /* @__PURE__ */ jsx(PromptDetails_default, { promptData: e }),
-	document: (e) => /* @__PURE__ */ jsx(DocumentDetails_default, { data: e })
-}, DocumentMetadataPills_default = (f) => {
-	let p = c(13), { metaData: m } = f, [h, g] = useState(null), [_, v] = useState(null), [y, b] = useState(!1), x;
-	p[0] === Symbol.for("react.memo_cache_sentinel") ? (x = (e, s) => {
-		g(e), v(s), b(!0);
-	}, p[0] = x) : x = p[0];
-	let S = x, C;
-	p[1] === h ? C = p[2] : (C = (e) => e && metadataRenderers[e] ? metadataRenderers[e](h) : /* @__PURE__ */ jsx(DefaultMetadataRenderer, { data: h }), p[1] = h, p[2] = C);
-	let w = C, T;
-	p[3] === m ? T = p[4] : (T = /* @__PURE__ */ jsx("div", {
-		className: "mb-8 flex flex-wrap gap-2",
-		children: Object.entries(m).map((s) => {
-			let [l, u] = s;
-			return /* @__PURE__ */ jsx(Badge, {
-				variant: "outline",
-				className: "hover:bg-accent hover:text-accent-foreground cursor-pointer rounded-full px-3 py-1 transition-colors",
-				onClick: () => S(u, l),
-				children: l
-			}, l);
-		})
-	}), p[3] = m, p[4] = T);
+	document: (e) => isDocumentDebugPayload(e) ? /* @__PURE__ */ jsx(DocumentDetails_default, {
+		data: e.data,
+		content: e.content,
+		workflowContext: e.workflowContext
+	}) : /* @__PURE__ */ jsx(DefaultMetadataRenderer, { data: e })
+}, DocumentMetadataPills_default = (p) => {
+	let m = c(29), { metaData: h } = p, [g, _] = useState(null), [v, y] = useState(null), [b, x] = useState(!1), S, C, w, T;
+	if (m[0] !== h || m[1] !== g) {
+		T = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			let l = Object.entries(h);
+			if (l.length === 0) {
+				T = null;
+				break bb0;
+			}
+			let u = (e, l) => {
+				_(e), y(l), x(!0);
+			}, d;
+			m[6] === g ? d = m[7] : (d = (e) => e && metadataRenderers[e] ? metadataRenderers[e](g) : /* @__PURE__ */ jsx(DefaultMetadataRenderer, { data: g }), m[6] = g, m[7] = d), S = d, C = "mb-8 flex flex-wrap items-center gap-2", w = l.map((l) => {
+				let [d, f] = l;
+				return /* @__PURE__ */ jsx(Badge, {
+					variant: "outline",
+					className: "hover:bg-accent hover:text-accent-foreground cursor-pointer rounded-full px-3 py-1 transition-colors",
+					onClick: () => u(f, d),
+					children: formatPillLabel(d)
+				}, d);
+			});
+		}
+		m[0] = h, m[1] = g, m[2] = S, m[3] = C, m[4] = w, m[5] = T;
+	} else S = m[2], C = m[3], w = m[4], T = m[5];
+	if (T !== Symbol.for("react.early_return_sentinel")) return T;
 	let E;
-	p[5] !== w || p[6] !== y || p[7] !== h || p[8] !== _ ? (E = h && /* @__PURE__ */ jsx(Dialog, {
-		open: y,
-		onOpenChange: b,
-		children: /* @__PURE__ */ jsxs(DialogContent, {
-			className: "max-h-3/4 max-w-2xl overflow-auto",
-			children: [/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(DialogTitle, {
-				className: "flex items-center gap-2",
-				children: [_, /* @__PURE__ */ jsx("span", {
-					className: "text-muted-foreground text-xs font-normal",
-					children: "Metadata"
-				})]
-			}) }), /* @__PURE__ */ jsx("div", {
-				className: "mt-4",
-				children: w(_)
-			})]
-		})
-	}), p[5] = w, p[6] = y, p[7] = h, p[8] = _, p[9] = E) : E = p[9];
+	m[8] !== C || m[9] !== w ? (E = /* @__PURE__ */ jsx("div", {
+		className: C,
+		children: w
+	}), m[8] = C, m[9] = w, m[10] = E) : E = m[10];
 	let D;
-	return p[10] !== T || p[11] !== E ? (D = /* @__PURE__ */ jsxs("div", {
-		className: "px-6",
-		children: [T, E]
-	}), p[10] = T, p[11] = E, p[12] = D) : D = p[12], D;
+	m[11] === v ? D = m[12] : (D = v ? formatPillLabel(v) : "Debug", m[11] = v, m[12] = D);
+	let O;
+	m[13] === D ? O = m[14] : (O = /* @__PURE__ */ jsx(DialogHeader, {
+		className: "shrink-0",
+		children: /* @__PURE__ */ jsx(DialogTitle, { children: D })
+	}), m[13] = D, m[14] = O);
+	let k;
+	m[15] !== S || m[16] !== v ? (k = v && S(v), m[15] = S, m[16] = v, m[17] = k) : k = m[17];
+	let A;
+	m[18] === k ? A = m[19] : (A = /* @__PURE__ */ jsx("div", {
+		className: "min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto",
+		children: k
+	}), m[18] = k, m[19] = A);
+	let j;
+	m[20] !== O || m[21] !== A ? (j = /* @__PURE__ */ jsxs(DialogContent, {
+		className: "flex max-h-[85vh] w-full max-w-2xl flex-col overflow-hidden",
+		children: [O, A]
+	}), m[20] = O, m[21] = A, m[22] = j) : j = m[22];
+	let M;
+	m[23] !== b || m[24] !== j ? (M = /* @__PURE__ */ jsx(Dialog, {
+		open: b,
+		onOpenChange: x,
+		children: j
+	}), m[23] = b, m[24] = j, m[25] = M) : M = m[25];
+	let N;
+	return m[26] !== M || m[27] !== E ? (N = /* @__PURE__ */ jsxs("div", { children: [E, M] }), m[26] = M, m[27] = E, m[28] = N) : N = m[28], N;
 };
+function _temp(e) {
+	let [l, u] = e;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid min-w-0 grid-cols-[7.5rem_1fr] gap-x-3 text-sm",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground font-medium",
+			children: formatPillLabel(l)
+		}), /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 overflow-x-auto font-mono text-xs wrap-break-word",
+			children: typeof u == "object" ? JSON.stringify(u, null, 2) : String(u)
+		})]
+	}, l);
+}
 export { DocumentMetadataPills_default as default };