@assistant-ui/react-o11y 0.0.33 → 0.0.34

package/README.md

@@ -13,7 +13,7 @@ npm install @assistant-ui/react-o11y
 ```tsx
 "use client";
 
-import { AuiProvider, useAui } from "@assistant-ui/store";
+import { AuiProvider, AuiConfig } from "@assistant-ui/store";
 import { SpanPrimitive, SpanResource } from "@assistant-ui/react-o11y";
 
 const spans = [
@@ -22,9 +22,9 @@ const spans = [
 ];
 
 export function Waterfall() {
-  const aui = useAui({ span: SpanResource({ spans }) });
+  const config = AuiConfig({ span: SpanResource({ spans }) });
   return (
-    <AuiProvider value={aui}>
+    <AuiProvider extends={null} config={config}>
       <SpanPrimitive.Timeline>
         <SpanPrimitive.Children>
           {() => (

package/dist/context/SpanByIndexProvider.js

@@ -1,40 +1,36 @@
 import { c } from "@assistant-ui/tap/react-shim/compiler-runtime";
-import { AuiProvider, Derived, useAui } from "@assistant-ui/store";
+import { AuiConfig, AuiProvider, Derived, useAui } from "@assistant-ui/store";
 import { jsx } from "react/jsx-runtime";
 //#region src/context/SpanByIndexProvider.tsx
 const SpanByIndexProvider = (t0) => {
-	const $ = c(8);
+	const $ = c(7);
 	const { index, children } = t0;
 	const parentAui = useAui();
 	let t1;
 	if ($[0] !== index || $[1] !== parentAui) {
-		t1 = Derived({
+		t1 = AuiConfig({ span: Derived({
 			source: "span",
 			query: { index },
 			get: () => parentAui.span.child({ index })
-		});
+		}) });
 		$[0] = index;
 		$[1] = parentAui;
 		$[2] = t1;
 	} else t1 = $[2];
+	const config = t1;
 	let t2;
-	if ($[3] !== t1) {
-		t2 = { span: t1 };
-		$[3] = t1;
-		$[4] = t2;
-	} else t2 = $[4];
-	const aui = useAui(t2);
-	let t3;
-	if ($[5] !== aui || $[6] !== children) {
-		t3 = /* @__PURE__ */ jsx(AuiProvider, {
-			value: aui,
+	if ($[3] !== children || $[4] !== config || $[5] !== parentAui) {
+		t2 = /* @__PURE__ */ jsx(AuiProvider, {
+			extends: parentAui,
+			config,
 			children
 		});
-		$[5] = aui;
-		$[6] = children;
-		$[7] = t3;
-	} else t3 = $[7];
-	return t3;
+		$[3] = children;
+		$[4] = config;
+		$[5] = parentAui;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
 };
 //#endregion
 export { SpanByIndexProvider };

package/dist/context/SpanByIndexProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpanByIndexProvider.js","names":["FC","PropsWithChildren","useAui","AuiProvider","Derived","SpanByIndexProvider","index","t0","$","_c","children","parentAui","t1","source","query","get","span","child","t2","aui","t3"],"sources":["../../src/context/SpanByIndexProvider.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { useAui, AuiProvider, Derived } from \"@assistant-ui/store\";\n\nexport const SpanByIndexProvider: FC<PropsWithChildren<{ index: number }>> = ({\n  index,\n  children,\n}) => {\n  const parentAui = useAui();\n\n  const aui = useAui({\n    span: Derived({\n      source: \"span\",\n      query: { index },\n      get: () => parentAui.span.child({ index }),\n    }),\n  });\n\n  return <AuiProvider value={aui}>{children}</AuiProvider>;\n};\n"],"mappings":";;;;AAGA,MAAaK,uBAAgEE,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAC,MAAA,EAAAH,OAAAI,aAAAH;CAI5E,MAAAI,YAAkBT,OAAO;CAAE,IAAAU;CAAA,IAAAJ,EAAA,OAAAF,SAAAE,EAAA,OAAAG,WAAA;EAGnBC,KAAAR,QAAQ;GAAAS,QACJ;GAAMC,OACP,EAAAR,MAAQ;GAACS,WACLJ,UAASK,KAAKC,MAAO,EAAAX,MAAQ,CAAC;EAC3C,CAAC;EAACE,EAAA,KAAAF;EAAAE,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAI,IAAA;EALeM,KAAA,EAAAF,MACXJ,GAKR;EAACJ,EAAA,KAAAI;EAAAJ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAND,MAAAW,MAAYjB,OAAOgB,EAMlB;CAAE,IAAAE;CAAA,IAAAZ,EAAA,OAAAW,OAAAX,EAAA,OAAAE,UAAA;EAEIU,KAAA,oBAAC,aAAD;GAAoBD,OAAAA;GAAMT;EAAd,CAAA;EAAqCF,EAAA,KAAAW;EAAAX,EAAA,KAAAE;EAAAF,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OAAjDY;AAAiD"}
+{"version":3,"file":"SpanByIndexProvider.js","names":["FC","PropsWithChildren","useAui","AuiConfig","AuiProvider","Derived","SpanByIndexProvider","index","t0","$","_c","children","parentAui","t1","span","source","query","get","child","config","t2"],"sources":["../../src/context/SpanByIndexProvider.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { useAui, AuiConfig, AuiProvider, Derived } from \"@assistant-ui/store\";\n\nexport const SpanByIndexProvider: FC<PropsWithChildren<{ index: number }>> = ({\n  index,\n  children,\n}) => {\n  const parentAui = useAui();\n\n  const config = AuiConfig({\n    span: Derived({\n      source: \"span\",\n      query: { index },\n      get: () => parentAui.span.child({ index }),\n    }),\n  });\n  return (\n    <AuiProvider extends={parentAui} config={config}>\n      {children}\n    </AuiProvider>\n  );\n};\n"],"mappings":";;;;AAGA,MAAaM,uBAAgEE,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAC,MAAA,EAAAH,OAAAI,aAAAH;CAI5E,MAAAI,YAAkBV,OAAO;CAAE,IAAAW;CAAA,IAAAJ,EAAA,OAAAF,SAAAE,EAAA,OAAAG,WAAA;EAEZC,KAAAV,UAAU,EAAAW,MACjBT,QAAQ;GAAAU,QACJ;GAAMC,OACP,EAAAT,MAAQ;GAACU,WACLL,UAASE,KAAKI,MAAO,EAAAX,MAAQ,CAAC;EAC3C,CAAC,EACH,CAAC;EAACE,EAAA,KAAAF;EAAAE,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CANF,MAAAU,SAAeN;CAMZ,IAAAO;CAAA,IAAAX,EAAA,OAAAE,YAAAF,EAAA,OAAAU,UAAAV,EAAA,OAAAG,WAAA;EAEDQ,KAAA,oBAAC,aAAD;GAAsBR,SAAAA;GAAmBO;GACtCR;EADS,CAAA;EAEEF,EAAA,KAAAE;EAAAF,EAAA,KAAAU;EAAAV,EAAA,KAAAG;EAAAH,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OAFdW;AAEc"}

package/dist/resources/SpanResource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpanResource.d.ts","names":[],"sources":["../../src/resources/SpanResource.tsx"],"mappings":";;;KAOY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;cA8LW,0CAAY,SAAA;EA/DhB,OAAA"}
+{"version":3,"file":"SpanResource.d.ts","names":[],"sources":["../../src/resources/SpanResource.tsx"],"mappings":";;;KAOY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;cA6PW,0CAAY,SAAA;EAlEhB,OAAA"}

package/dist/resources/SpanResource.js

@@ -3,32 +3,68 @@ import { useState } from "@assistant-ui/tap/react-shim";
 import { useClientLookup } from "@assistant-ui/store";
 import { resource, withKey } from "@assistant-ui/tap";
 //#region src/resources/SpanResource.tsx
-function calculateDepth(spanId, spanMap, cache) {
+function calculateDepth(spanId, parents, cache) {
 	const cached = cache.get(spanId);
 	if (cached !== void 0) return cached;
-	const span = spanMap.get(spanId);
-	if (!span?.parentSpanId) {
-		cache.set(spanId, 0);
-		return 0;
+	const path = [];
+	let current = spanId;
+	let depth = -1;
+	while (current !== null) {
+		const currentDepth = cache.get(current);
+		if (currentDepth !== void 0) {
+			depth = currentDepth;
+			break;
+		}
+		path.push(current);
+		current = parents.get(current) ?? null;
+	}
+	for (let index = path.length - 1; index >= 0; index--) {
+		depth += 1;
+		cache.set(path[index], depth);
 	}
-	const depth = calculateDepth(span.parentSpanId, spanMap, cache) + 1;
-	cache.set(spanId, depth);
 	return depth;
 }
+function normalizeSpanParents(spanMap) {
+	const parents = /* @__PURE__ */ new Map();
+	for (const span of spanMap.values()) parents.set(span.id, span.parentSpanId && spanMap.has(span.parentSpanId) ? span.parentSpanId : null);
+	const resolved = /* @__PURE__ */ new Set();
+	for (const spanId of spanMap.keys()) {
+		if (resolved.has(spanId)) continue;
+		const path = [];
+		const pathIds = /* @__PURE__ */ new Set();
+		let current = spanId;
+		while (current !== null && !resolved.has(current)) {
+			if (pathIds.has(current)) {
+				parents.set(current, null);
+				break;
+			}
+			path.push(current);
+			pathIds.add(current);
+			current = parents.get(current) ?? null;
+		}
+		for (const id of path) resolved.add(id);
+	}
+	return parents;
+}
 function enrichSpans(rawSpans) {
 	const spanMap = /* @__PURE__ */ new Map();
 	for (const span of rawSpans) spanMap.set(span.id, span);
+	const parents = normalizeSpanParents(spanMap);
 	const depthCache = /* @__PURE__ */ new Map();
 	const childrenCount = /* @__PURE__ */ new Map();
-	for (const span of rawSpans) if (span.parentSpanId) childrenCount.set(span.parentSpanId, (childrenCount.get(span.parentSpanId) ?? 0) + 1);
+	for (const span of rawSpans) {
+		const parentSpanId = parents.get(span.id);
+		if (parentSpanId) childrenCount.set(parentSpanId, (childrenCount.get(parentSpanId) ?? 0) + 1);
+	}
 	const allSpans = /* @__PURE__ */ new Map();
 	let min = Infinity;
 	let max = -Infinity;
 	for (const span of rawSpans) {
-		const depth = calculateDepth(span.id, spanMap, depthCache);
+		const depth = calculateDepth(span.id, parents, depthCache);
 		const hasChildren = (childrenCount.get(span.id) ?? 0) > 0;
 		allSpans.set(span.id, {
 			...span,
+			parentSpanId: parents.get(span.id) ?? null,
 			depth,
 			hasChildren,
 			isCollapsed: false
@@ -42,16 +78,17 @@ function enrichSpans(rawSpans) {
 	if (max === min) max = min + 100;
 	return {
 		allSpans,
+		parents,
 		timeRange: {
 			min,
 			max
 		}
 	};
 }
-function buildFlatList(allSpans, collapsedIds) {
+function buildFlatList(allSpans, parents, collapsedIds) {
 	const children = /* @__PURE__ */ new Map();
 	for (const span of allSpans.values()) {
-		const parent = span.parentSpanId ?? null;
+		const parent = parents.get(span.id) ?? null;
 		let group = children.get(parent);
 		if (!group) {
 			group = [];
@@ -93,7 +130,7 @@ const useSpanChildResource = ({ span, timeRange, onToggleCollapse }) => {
 };
 const SpanChildResource = resource(useSpanChildResource);
 const useSpanResource = (t0) => {
-	const $ = c(19);
+	const $ = c(20);
 	const { spans } = t0;
 	let t1;
 	if ($[0] !== spans) {
@@ -101,18 +138,19 @@ const useSpanResource = (t0) => {
 		$[0] = spans;
 		$[1] = t1;
 	} else t1 = $[1];
-	const { allSpans, timeRange } = t1;
+	const { allSpans, parents, timeRange } = t1;
 	const [collapsedIds, setCollapsedIds] = useState(_temp);
 	let t2;
-	if ($[2] !== allSpans || $[3] !== collapsedIds) {
-		t2 = buildFlatList(allSpans, collapsedIds);
+	if ($[2] !== allSpans || $[3] !== collapsedIds || $[4] !== parents) {
+		t2 = buildFlatList(allSpans, parents, collapsedIds);
 		$[2] = allSpans;
 		$[3] = collapsedIds;
-		$[4] = t2;
-	} else t2 = $[4];
+		$[4] = parents;
+		$[5] = t2;
+	} else t2 = $[5];
 	const visibleSpans = t2;
 	let t3;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = (spanId) => {
 			setCollapsedIds((prev) => {
 				const next = new Set(prev);
@@ -121,31 +159,31 @@ const useSpanResource = (t0) => {
 				return next;
 			});
 		};
-		$[5] = t3;
-	} else t3 = $[5];
+		$[6] = t3;
+	} else t3 = $[6];
 	const toggleCollapse = t3;
 	let t4;
-	if ($[6] !== timeRange || $[7] !== visibleSpans) {
+	if ($[7] !== timeRange || $[8] !== visibleSpans) {
 		let t5;
-		if ($[9] !== timeRange) {
+		if ($[10] !== timeRange) {
 			t5 = (span) => withKey(span.id, SpanChildResource({
 				span,
 				timeRange,
 				onToggleCollapse: toggleCollapse
 			}));
-			$[9] = timeRange;
-			$[10] = t5;
-		} else t5 = $[10];
+			$[10] = timeRange;
+			$[11] = t5;
+		} else t5 = $[11];
 		t4 = visibleSpans.map(t5);
-		$[6] = timeRange;
-		$[7] = visibleSpans;
-		$[8] = t4;
-	} else t4 = $[8];
+		$[7] = timeRange;
+		$[8] = visibleSpans;
+		$[9] = t4;
+	} else t4 = $[9];
 	const lookup = useClientLookup(t4);
 	const t5 = timeRange.max - timeRange.min;
 	const t6 = lookup.state.length > 0;
 	let t7;
-	if ($[11] !== lookup.state || $[12] !== t5 || $[13] !== t6 || $[14] !== timeRange) {
+	if ($[12] !== lookup.state || $[13] !== t5 || $[14] !== t6 || $[15] !== timeRange) {
 		const rootState = {
 			id: "__root__",
 			parentSpanId: null,
@@ -162,23 +200,23 @@ const useSpanResource = (t0) => {
 			timeRange
 		};
 		t7 = () => rootState;
-		$[11] = lookup.state;
-		$[12] = t5;
-		$[13] = t6;
-		$[14] = timeRange;
-		$[15] = t7;
-	} else t7 = $[15];
+		$[12] = lookup.state;
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = timeRange;
+		$[16] = t7;
+	} else t7 = $[16];
 	let t8;
-	if ($[16] !== lookup.get || $[17] !== t7) {
+	if ($[17] !== lookup.get || $[18] !== t7) {
 		t8 = {
 			getState: t7,
 			child: lookup.get,
 			toggleCollapse: _temp2
 		};
-		$[16] = lookup.get;
-		$[17] = t7;
-		$[18] = t8;
-	} else t8 = $[18];
+		$[17] = lookup.get;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
 	return t8;
 };
 const SpanResource = resource(useSpanResource);

package/dist/resources/SpanResource.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpanResource.js","names":["useMemo","useState","resource","withKey","useClientLookup","ClientOutput","SpanItemState","SpanState","SpanData","id","parentSpanId","name","type","status","startedAt","endedAt","latencyMs","calculateDepth","spanId","spanMap","Map","cache","cached","get","undefined","span","set","depth","enrichSpans","rawSpans","allSpans","timeRange","min","max","depthCache","childrenCount","Infinity","hasChildren","isCollapsed","end","Date","now","buildFlatList","collapsedIds","Set","children","values","parent","group","push","sort","a","b","result","dfs","parentId","kids","has","useSpanChildResource","onToggleCollapse","state","getState","child","Error","toggleCollapse","SpanChildResource","useSpanResource","t0","$","_c","spans","t1","setCollapsedIds","_temp","t2","visibleSpans","t3","Symbol","for","prev","next","delete","add","t4","t5","map","lookup","t6","length","t7","rootState","t8","_temp2","SpanResource"],"sources":["../../src/resources/SpanResource.tsx"],"sourcesContent":["import \"../o11y-scope\";\n\nimport { useMemo, useState } from \"react\";\nimport { resource, withKey } from \"@assistant-ui/tap\";\nimport { useClientLookup, type ClientOutput } from \"@assistant-ui/store\";\nimport type { SpanItemState, SpanState } from \"../o11y-scope\";\n\nexport type SpanData = {\n  id: string;\n  parentSpanId: string | null;\n  name: string;\n  type: string;\n  status: \"running\" | \"completed\" | \"failed\" | \"skipped\";\n  startedAt: number;\n  endedAt: number | null;\n  latencyMs: number | null;\n};\n\nfunction calculateDepth(\n  spanId: string,\n  spanMap: Map<string, SpanData>,\n  cache: Map<string, number>,\n): number {\n  const cached = cache.get(spanId);\n  if (cached !== undefined) return cached;\n\n  const span = spanMap.get(spanId);\n  if (!span?.parentSpanId) {\n    cache.set(spanId, 0);\n    return 0;\n  }\n\n  const depth = calculateDepth(span.parentSpanId, spanMap, cache) + 1;\n  cache.set(spanId, depth);\n  return depth;\n}\n\nfunction enrichSpans(rawSpans: SpanData[]): {\n  allSpans: Map<string, SpanItemState>;\n  timeRange: { min: number; max: number };\n} {\n  const spanMap = new Map<string, SpanData>();\n  for (const span of rawSpans) {\n    spanMap.set(span.id, span);\n  }\n\n  const depthCache = new Map<string, number>();\n  const childrenCount = new Map<string, number>();\n  for (const span of rawSpans) {\n    if (span.parentSpanId) {\n      childrenCount.set(\n        span.parentSpanId,\n        (childrenCount.get(span.parentSpanId) ?? 0) + 1,\n      );\n    }\n  }\n\n  const allSpans = new Map<string, SpanItemState>();\n  let min = Infinity;\n  let max = -Infinity;\n\n  for (const span of rawSpans) {\n    const depth = calculateDepth(span.id, spanMap, depthCache);\n    const hasChildren = (childrenCount.get(span.id) ?? 0) > 0;\n    allSpans.set(span.id, { ...span, depth, hasChildren, isCollapsed: false });\n\n    if (span.startedAt < min) min = span.startedAt;\n    const end = span.endedAt ?? Date.now();\n    if (end > max) max = end;\n  }\n\n  if (min === Infinity) min = Date.now();\n  if (max === -Infinity) max = Date.now();\n  if (max === min) max = min + 100;\n\n  return { allSpans, timeRange: { min, max } };\n}\n\nfunction buildFlatList(\n  allSpans: Map<string, SpanItemState>,\n  collapsedIds: Set<string>,\n): SpanItemState[] {\n  const children = new Map<string | null, SpanItemState[]>();\n  for (const span of allSpans.values()) {\n    const parent = span.parentSpanId ?? null;\n    let group = children.get(parent);\n    if (!group) {\n      group = [];\n      children.set(parent, group);\n    }\n    group.push(span);\n  }\n\n  for (const group of children.values()) {\n    group.sort((a, b) => a.startedAt - b.startedAt);\n  }\n\n  const result: SpanItemState[] = [];\n  function dfs(parentId: string | null) {\n    const kids = children.get(parentId);\n    if (!kids) return;\n    for (const span of kids) {\n      result.push({ ...span, isCollapsed: collapsedIds.has(span.id) });\n      if (!collapsedIds.has(span.id)) {\n        dfs(span.id);\n      }\n    }\n  }\n  dfs(null);\n  return result;\n}\n\nconst useSpanChildResource = ({\n  span,\n  timeRange,\n  onToggleCollapse,\n}: {\n  span: SpanItemState;\n  timeRange: { min: number; max: number };\n  onToggleCollapse: (spanId: string) => void;\n}): ClientOutput<\"span\"> => {\n  const state: SpanState = {\n    ...span,\n    children: [],\n    timeRange,\n  };\n  return {\n    getState: () => state,\n    child: () => {\n      throw new Error(\"child spans do not have children in flat mode\");\n    },\n    toggleCollapse: () => {\n      onToggleCollapse(span.id);\n    },\n  };\n};\n\nconst SpanChildResource = resource(useSpanChildResource);\n\nconst useSpanResource = ({\n  spans,\n}: {\n  spans: SpanData[];\n}): ClientOutput<\"span\"> => {\n  const { allSpans, timeRange } = useMemo(() => enrichSpans(spans), [spans]);\n\n  const [collapsedIds, setCollapsedIds] = useState<Set<string>>(\n    () => new Set(),\n  );\n\n  const visibleSpans = useMemo(\n    () => buildFlatList(allSpans, collapsedIds),\n    [allSpans, collapsedIds],\n  );\n\n  const toggleCollapse = (spanId: string) => {\n    setCollapsedIds((prev) => {\n      const next = new Set(prev);\n      if (next.has(spanId)) {\n        next.delete(spanId);\n      } else {\n        next.add(spanId);\n      }\n      return next;\n    });\n  };\n\n  const lookup = useClientLookup(\n    visibleSpans.map((span) =>\n      withKey(\n        span.id,\n        SpanChildResource({\n          span,\n          timeRange,\n          onToggleCollapse: toggleCollapse,\n        }),\n      ),\n    ),\n  );\n\n  const rootState: SpanState = {\n    id: \"__root__\",\n    parentSpanId: null,\n    name: \"\",\n    type: \"root\",\n    status: \"completed\",\n    startedAt: timeRange.min,\n    endedAt: timeRange.max,\n    latencyMs: timeRange.max - timeRange.min,\n    depth: -1,\n    hasChildren: lookup.state.length > 0,\n    isCollapsed: false,\n    children: lookup.state,\n    timeRange,\n  };\n\n  return {\n    getState: () => rootState,\n    child: lookup.get,\n    toggleCollapse: () => {\n      // Root span collapse is a no-op\n    },\n  };\n};\n\nexport const SpanResource = resource(useSpanResource);\n"],"mappings":"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"}
+{"version":3,"file":"SpanResource.js","names":["useMemo","useState","resource","withKey","useClientLookup","ClientOutput","SpanItemState","SpanState","SpanData","id","parentSpanId","name","type","status","startedAt","endedAt","latencyMs","calculateDepth","spanId","parents","Map","cache","cached","get","undefined","path","current","depth","currentDepth","push","index","length","set","normalizeSpanParents","spanMap","span","values","has","resolved","Set","keys","pathIds","add","enrichSpans","rawSpans","allSpans","timeRange","min","max","depthCache","childrenCount","Infinity","hasChildren","isCollapsed","end","Date","now","buildFlatList","collapsedIds","children","parent","group","sort","a","b","result","dfs","parentId","kids","useSpanChildResource","onToggleCollapse","state","getState","child","Error","toggleCollapse","SpanChildResource","useSpanResource","t0","$","_c","spans","t1","setCollapsedIds","_temp","t2","visibleSpans","t3","Symbol","for","prev","next","delete","t4","t5","map","lookup","t6","t7","rootState","t8","_temp2","SpanResource"],"sources":["../../src/resources/SpanResource.tsx"],"sourcesContent":["import \"../o11y-scope\";\n\nimport { useMemo, useState } from \"react\";\nimport { resource, withKey } from \"@assistant-ui/tap\";\nimport { useClientLookup, type ClientOutput } from \"@assistant-ui/store\";\nimport type { SpanItemState, SpanState } from \"../o11y-scope\";\n\nexport type SpanData = {\n  id: string;\n  parentSpanId: string | null;\n  name: string;\n  type: string;\n  status: \"running\" | \"completed\" | \"failed\" | \"skipped\";\n  startedAt: number;\n  endedAt: number | null;\n  latencyMs: number | null;\n};\n\nfunction calculateDepth(\n  spanId: string,\n  parents: Map<string, string | null>,\n  cache: Map<string, number>,\n): number {\n  const cached = cache.get(spanId);\n  if (cached !== undefined) return cached;\n\n  const path: string[] = [];\n  let current: string | null = spanId;\n  let depth = -1;\n\n  while (current !== null) {\n    const currentDepth = cache.get(current);\n    if (currentDepth !== undefined) {\n      depth = currentDepth;\n      break;\n    }\n\n    path.push(current);\n    current = parents.get(current) ?? null;\n  }\n\n  for (let index = path.length - 1; index >= 0; index--) {\n    depth += 1;\n    cache.set(path[index]!, depth);\n  }\n\n  return depth;\n}\n\nfunction normalizeSpanParents(\n  spanMap: Map<string, SpanData>,\n): Map<string, string | null> {\n  const parents = new Map<string, string | null>();\n  for (const span of spanMap.values()) {\n    parents.set(\n      span.id,\n      span.parentSpanId && spanMap.has(span.parentSpanId)\n        ? span.parentSpanId\n        : null,\n    );\n  }\n\n  const resolved = new Set<string>();\n  for (const spanId of spanMap.keys()) {\n    if (resolved.has(spanId)) continue;\n\n    const path: string[] = [];\n    const pathIds = new Set<string>();\n    let current: string | null = spanId;\n\n    while (current !== null && !resolved.has(current)) {\n      if (pathIds.has(current)) {\n        parents.set(current, null);\n        break;\n      }\n\n      path.push(current);\n      pathIds.add(current);\n      current = parents.get(current) ?? null;\n    }\n\n    for (const id of path) resolved.add(id);\n  }\n\n  return parents;\n}\n\nfunction enrichSpans(rawSpans: SpanData[]): {\n  allSpans: Map<string, SpanItemState>;\n  parents: Map<string, string | null>;\n  timeRange: { min: number; max: number };\n} {\n  const spanMap = new Map<string, SpanData>();\n  for (const span of rawSpans) {\n    spanMap.set(span.id, span);\n  }\n\n  const parents = normalizeSpanParents(spanMap);\n  const depthCache = new Map<string, number>();\n  const childrenCount = new Map<string, number>();\n  for (const span of rawSpans) {\n    const parentSpanId = parents.get(span.id);\n    if (parentSpanId) {\n      childrenCount.set(\n        parentSpanId,\n        (childrenCount.get(parentSpanId) ?? 0) + 1,\n      );\n    }\n  }\n\n  const allSpans = new Map<string, SpanItemState>();\n  let min = Infinity;\n  let max = -Infinity;\n\n  for (const span of rawSpans) {\n    const depth = calculateDepth(span.id, parents, depthCache);\n    const hasChildren = (childrenCount.get(span.id) ?? 0) > 0;\n    allSpans.set(span.id, {\n      ...span,\n      parentSpanId: parents.get(span.id) ?? null,\n      depth,\n      hasChildren,\n      isCollapsed: false,\n    });\n\n    if (span.startedAt < min) min = span.startedAt;\n    const end = span.endedAt ?? Date.now();\n    if (end > max) max = end;\n  }\n\n  if (min === Infinity) min = Date.now();\n  if (max === -Infinity) max = Date.now();\n  if (max === min) max = min + 100;\n\n  return { allSpans, parents, timeRange: { min, max } };\n}\n\nfunction buildFlatList(\n  allSpans: Map<string, SpanItemState>,\n  parents: Map<string, string | null>,\n  collapsedIds: Set<string>,\n): SpanItemState[] {\n  const children = new Map<string | null, SpanItemState[]>();\n  for (const span of allSpans.values()) {\n    const parent = parents.get(span.id) ?? null;\n    let group = children.get(parent);\n    if (!group) {\n      group = [];\n      children.set(parent, group);\n    }\n    group.push(span);\n  }\n\n  for (const group of children.values()) {\n    group.sort((a, b) => a.startedAt - b.startedAt);\n  }\n\n  const result: SpanItemState[] = [];\n  function dfs(parentId: string | null) {\n    const kids = children.get(parentId);\n    if (!kids) return;\n    for (const span of kids) {\n      result.push({ ...span, isCollapsed: collapsedIds.has(span.id) });\n      if (!collapsedIds.has(span.id)) {\n        dfs(span.id);\n      }\n    }\n  }\n  dfs(null);\n  return result;\n}\n\nconst useSpanChildResource = ({\n  span,\n  timeRange,\n  onToggleCollapse,\n}: {\n  span: SpanItemState;\n  timeRange: { min: number; max: number };\n  onToggleCollapse: (spanId: string) => void;\n}): ClientOutput<\"span\"> => {\n  const state: SpanState = {\n    ...span,\n    children: [],\n    timeRange,\n  };\n  return {\n    getState: () => state,\n    child: () => {\n      throw new Error(\"child spans do not have children in flat mode\");\n    },\n    toggleCollapse: () => {\n      onToggleCollapse(span.id);\n    },\n  };\n};\n\nconst SpanChildResource = resource(useSpanChildResource);\n\nconst useSpanResource = ({\n  spans,\n}: {\n  spans: SpanData[];\n}): ClientOutput<\"span\"> => {\n  const { allSpans, parents, timeRange } = useMemo(\n    () => enrichSpans(spans),\n    [spans],\n  );\n\n  const [collapsedIds, setCollapsedIds] = useState<Set<string>>(\n    () => new Set(),\n  );\n\n  const visibleSpans = useMemo(\n    () => buildFlatList(allSpans, parents, collapsedIds),\n    [allSpans, parents, collapsedIds],\n  );\n\n  const toggleCollapse = (spanId: string) => {\n    setCollapsedIds((prev) => {\n      const next = new Set(prev);\n      if (next.has(spanId)) {\n        next.delete(spanId);\n      } else {\n        next.add(spanId);\n      }\n      return next;\n    });\n  };\n\n  const lookup = useClientLookup(\n    visibleSpans.map((span) =>\n      withKey(\n        span.id,\n        SpanChildResource({\n          span,\n          timeRange,\n          onToggleCollapse: toggleCollapse,\n        }),\n      ),\n    ),\n  );\n\n  const rootState: SpanState = {\n    id: \"__root__\",\n    parentSpanId: null,\n    name: \"\",\n    type: \"root\",\n    status: \"completed\",\n    startedAt: timeRange.min,\n    endedAt: timeRange.max,\n    latencyMs: timeRange.max - timeRange.min,\n    depth: -1,\n    hasChildren: lookup.state.length > 0,\n    isCollapsed: false,\n    children: lookup.state,\n    timeRange,\n  };\n\n  return {\n    getState: () => rootState,\n    child: lookup.get,\n    toggleCollapse: () => {\n      // Root span collapse is a no-op\n    },\n  };\n};\n\nexport const SpanResource = resource(useSpanResource);\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react-o11y",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "description": "Observability primitives for @assistant-ui",
   "keywords": [
     "observability",
@@ -29,8 +29,8 @@
   "sideEffects": false,
   "dependencies": {
     "@radix-ui/react-primitive": "^2.1.10",
-    "@assistant-ui/store": "0.3.3",
-    "@assistant-ui/tap": "0.9.9"
+    "@assistant-ui/store": "0.3.4",
+    "@assistant-ui/tap": "0.9.10"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -47,7 +47,7 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "vitest": "^4.1.10",
-    "@assistant-ui/x-buildutils": "0.0.20"
+    "@assistant-ui/x-buildutils": "0.0.21"
   },
   "publishConfig": {
     "access": "public",

package/src/context/SpanByIndexProvider.tsx

@@ -1,5 +1,5 @@
 import type { FC, PropsWithChildren } from "react";
-import { useAui, AuiProvider, Derived } from "@assistant-ui/store";
+import { useAui, AuiConfig, AuiProvider, Derived } from "@assistant-ui/store";
 
 export const SpanByIndexProvider: FC<PropsWithChildren<{ index: number }>> = ({
   index,
@@ -7,13 +7,16 @@ export const SpanByIndexProvider: FC<PropsWithChildren<{ index: number }>> = ({
 }) => {
   const parentAui = useAui();
 
-  const aui = useAui({
+  const config = AuiConfig({
     span: Derived({
       source: "span",
       query: { index },
       get: () => parentAui.span.child({ index }),
     }),
   });
-
-  return <AuiProvider value={aui}>{children}</AuiProvider>;
+  return (
+    <AuiProvider extends={parentAui} config={config}>
+      {children}
+    </AuiProvider>
+  );
 };

package/src/resources/SpanResource.test.tsx

@@ -0,0 +1,106 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { AuiProvider, useAui } from "@assistant-ui/store";
+import * as SpanPrimitive from "../primitives/span";
+import { SpanResource, type SpanData } from "./SpanResource";
+
+const createSpan = (id: string, parentSpanId: string | null): SpanData => ({
+  id,
+  parentSpanId,
+  name: id,
+  type: "test",
+  status: "completed",
+  startedAt: 0,
+  endedAt: 1,
+  latencyMs: 1,
+});
+
+const SpanFixture = ({ spans }: { spans: SpanData[] }) => {
+  const aui = useAui({ span: SpanResource({ spans }) });
+
+  return (
+    <AuiProvider value={aui}>
+      <SpanPrimitive.Children>
+        {({ span }) => (
+          <span
+            data-span-id={span.id}
+            data-parent-span-id={span.parentSpanId ?? "root"}
+            data-span-depth={span.depth}
+          />
+        )}
+      </SpanPrimitive.Children>
+    </AuiProvider>
+  );
+};
+
+const renderSpans = (spans: SpanData[]) =>
+  renderToStaticMarkup(<SpanFixture spans={spans} />);
+
+describe("SpanResource", () => {
+  it("preserves valid parent hierarchies", () => {
+    const html = renderSpans([
+      createSpan("root", null),
+      createSpan("child", "root"),
+    ]);
+
+    expect(html).toContain(
+      'data-span-id="root" data-parent-span-id="root" data-span-depth="0"',
+    );
+    expect(html).toContain(
+      'data-span-id="child" data-parent-span-id="root" data-span-depth="1"',
+    );
+  });
+
+  it("renders cyclic parent hierarchies without recursing indefinitely", () => {
+    const html = renderSpans([
+      createSpan("first", "second"),
+      createSpan("second", "first"),
+    ]);
+
+    expect(html.match(/data-span-id=/g)).toHaveLength(2);
+    expect(html).toContain(
+      'data-span-id="first" data-parent-span-id="root" data-span-depth="0"',
+    );
+    expect(html).toContain(
+      'data-span-id="second" data-parent-span-id="first" data-span-depth="1"',
+    );
+  });
+
+  it("renders every span when a parent chain enters a longer cycle", () => {
+    const html = renderSpans([
+      createSpan("branch", "first"),
+      createSpan("first", "second"),
+      createSpan("second", "third"),
+      createSpan("third", "first"),
+    ]);
+
+    expect(html.match(/data-span-id=/g)).toHaveLength(4);
+    expect(html).toContain(
+      'data-span-id="first" data-parent-span-id="root" data-span-depth="0"',
+    );
+    expect(html).toContain(
+      'data-span-id="third" data-parent-span-id="first" data-span-depth="1"',
+    );
+    expect(html).toContain(
+      'data-span-id="second" data-parent-span-id="third" data-span-depth="2"',
+    );
+    expect(html).toContain(
+      'data-span-id="branch" data-parent-span-id="first" data-span-depth="1"',
+    );
+  });
+
+  it("renders self-parented and orphaned spans as roots", () => {
+    const html = renderSpans([
+      createSpan("self", "self"),
+      createSpan("orphan", "missing"),
+    ]);
+
+    expect(html.match(/data-span-id=/g)).toHaveLength(2);
+    expect(html).toContain(
+      'data-span-id="self" data-parent-span-id="root" data-span-depth="0"',
+    );
+    expect(html).toContain(
+      'data-span-id="orphan" data-parent-span-id="root" data-span-depth="0"',
+    );
+  });
+});

package/src/resources/SpanResource.tsx

@@ -18,25 +18,76 @@ export type SpanData = {
 
 function calculateDepth(
   spanId: string,
-  spanMap: Map<string, SpanData>,
+  parents: Map<string, string | null>,
   cache: Map<string, number>,
 ): number {
   const cached = cache.get(spanId);
   if (cached !== undefined) return cached;
 
-  const span = spanMap.get(spanId);
-  if (!span?.parentSpanId) {
-    cache.set(spanId, 0);
-    return 0;
+  const path: string[] = [];
+  let current: string | null = spanId;
+  let depth = -1;
+
+  while (current !== null) {
+    const currentDepth = cache.get(current);
+    if (currentDepth !== undefined) {
+      depth = currentDepth;
+      break;
+    }
+
+    path.push(current);
+    current = parents.get(current) ?? null;
+  }
+
+  for (let index = path.length - 1; index >= 0; index--) {
+    depth += 1;
+    cache.set(path[index]!, depth);
   }
 
-  const depth = calculateDepth(span.parentSpanId, spanMap, cache) + 1;
-  cache.set(spanId, depth);
   return depth;
 }
 
+function normalizeSpanParents(
+  spanMap: Map<string, SpanData>,
+): Map<string, string | null> {
+  const parents = new Map<string, string | null>();
+  for (const span of spanMap.values()) {
+    parents.set(
+      span.id,
+      span.parentSpanId && spanMap.has(span.parentSpanId)
+        ? span.parentSpanId
+        : null,
+    );
+  }
+
+  const resolved = new Set<string>();
+  for (const spanId of spanMap.keys()) {
+    if (resolved.has(spanId)) continue;
+
+    const path: string[] = [];
+    const pathIds = new Set<string>();
+    let current: string | null = spanId;
+
+    while (current !== null && !resolved.has(current)) {
+      if (pathIds.has(current)) {
+        parents.set(current, null);
+        break;
+      }
+
+      path.push(current);
+      pathIds.add(current);
+      current = parents.get(current) ?? null;
+    }
+
+    for (const id of path) resolved.add(id);
+  }
+
+  return parents;
+}
+
 function enrichSpans(rawSpans: SpanData[]): {
   allSpans: Map<string, SpanItemState>;
+  parents: Map<string, string | null>;
   timeRange: { min: number; max: number };
 } {
   const spanMap = new Map<string, SpanData>();
@@ -44,13 +95,15 @@ function enrichSpans(rawSpans: SpanData[]): {
     spanMap.set(span.id, span);
   }
 
+  const parents = normalizeSpanParents(spanMap);
   const depthCache = new Map<string, number>();
   const childrenCount = new Map<string, number>();
   for (const span of rawSpans) {
-    if (span.parentSpanId) {
+    const parentSpanId = parents.get(span.id);
+    if (parentSpanId) {
       childrenCount.set(
-        span.parentSpanId,
-        (childrenCount.get(span.parentSpanId) ?? 0) + 1,
+        parentSpanId,
+        (childrenCount.get(parentSpanId) ?? 0) + 1,
       );
     }
   }
@@ -60,9 +113,15 @@ function enrichSpans(rawSpans: SpanData[]): {
   let max = -Infinity;
 
   for (const span of rawSpans) {
-    const depth = calculateDepth(span.id, spanMap, depthCache);
+    const depth = calculateDepth(span.id, parents, depthCache);
     const hasChildren = (childrenCount.get(span.id) ?? 0) > 0;
-    allSpans.set(span.id, { ...span, depth, hasChildren, isCollapsed: false });
+    allSpans.set(span.id, {
+      ...span,
+      parentSpanId: parents.get(span.id) ?? null,
+      depth,
+      hasChildren,
+      isCollapsed: false,
+    });
 
     if (span.startedAt < min) min = span.startedAt;
     const end = span.endedAt ?? Date.now();
@@ -73,16 +132,17 @@ function enrichSpans(rawSpans: SpanData[]): {
   if (max === -Infinity) max = Date.now();
   if (max === min) max = min + 100;
 
-  return { allSpans, timeRange: { min, max } };
+  return { allSpans, parents, timeRange: { min, max } };
 }
 
 function buildFlatList(
   allSpans: Map<string, SpanItemState>,
+  parents: Map<string, string | null>,
   collapsedIds: Set<string>,
 ): SpanItemState[] {
   const children = new Map<string | null, SpanItemState[]>();
   for (const span of allSpans.values()) {
-    const parent = span.parentSpanId ?? null;
+    const parent = parents.get(span.id) ?? null;
     let group = children.get(parent);
     if (!group) {
       group = [];
@@ -142,15 +202,18 @@ const useSpanResource = ({
 }: {
   spans: SpanData[];
 }): ClientOutput<"span"> => {
-  const { allSpans, timeRange } = useMemo(() => enrichSpans(spans), [spans]);
+  const { allSpans, parents, timeRange } = useMemo(
+    () => enrichSpans(spans),
+    [spans],
+  );
 
   const [collapsedIds, setCollapsedIds] = useState<Set<string>>(
     () => new Set(),
   );
 
   const visibleSpans = useMemo(
-    () => buildFlatList(allSpans, collapsedIds),
-    [allSpans, collapsedIds],
+    () => buildFlatList(allSpans, parents, collapsedIds),
+    [allSpans, parents, collapsedIds],
   );
 
   const toggleCollapse = (spanId: string) => {