@assistant-ui/react-o11y 0.0.24 → 0.0.26

package/README.md

@@ -14,7 +14,7 @@ npm install @assistant-ui/react-o11y
 "use client";
 
 import { AuiProvider, useAui } from "@assistant-ui/store";
-import { SpanResource } from "@assistant-ui/react-o11y";
+import { SpanPrimitive, SpanResource } from "@assistant-ui/react-o11y";
 
 const spans = [
   { id: "a", parentSpanId: null, name: "request", type: "http", status: "completed", startedAt: 0, endedAt: 120, latencyMs: 120 },
@@ -25,12 +25,20 @@ export function Waterfall() {
   const aui = useAui({ span: SpanResource({ spans }) });
   return (
     <AuiProvider value={aui}>
-      {/* compose SpanPrimitive.* components here — see examples/waterfall for a full layout */}
+      <SpanPrimitive.Timeline>
+        <SpanPrimitive.Children>
+          {() => (
+            <div className="relative h-8">
+              <SpanPrimitive.TimelineBar className="top-1 h-6 rounded bg-blue-500" />
+            </div>
+          )}
+        </SpanPrimitive.Children>
+      </SpanPrimitive.Timeline>
     </AuiProvider>
   );
 }
 ```
 
-`SpanPrimitive.*` components rendered inside `<AuiProvider>` cover rows, indentation, names, status, and the collapse toggle.
+`SpanPrimitive.*` components rendered inside `<AuiProvider>` cover rows, indentation, names, status, collapse controls, and timeline bars. `SpanPrimitive.Timeline` provides the time range for its children; `SpanPrimitive.TimelineBar` positions each current span with CSS variables such as `--span-timeline-left` and `--span-timeline-width`. Running bars use the timeline range max unless you pass an explicit `now` timestamp from your own effect or animation loop.
 
 See [`examples/waterfall`](https://github.com/assistant-ui/assistant-ui/tree/main/examples/waterfall) for a complete waterfall implementation.

package/dist/context/SpanByIndexProvider.d.ts

@@ -1,5 +1,4 @@
 import { FC, PropsWithChildren } from "react";
-
 //#region src/context/SpanByIndexProvider.d.ts
 declare const SpanByIndexProvider: FC<PropsWithChildren<{
   index: number;

package/dist/context/SpanByIndexProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpanByIndexProvider.d.ts","names":[],"sources":["../../src/context/SpanByIndexProvider.tsx"],"mappings":";;;cAGa,mBAAA,EAAqB,EAAE,CAAC,iBAAA;EAAoB,KAAA;AAAA"}
+{"version":3,"file":"SpanByIndexProvider.d.ts","names":[],"sources":["../../src/context/SpanByIndexProvider.tsx"],"mappings":";;cAGa,qBAAqB,GAAG;EAAoB"}

package/dist/o11y-scope.d.ts

@@ -1,3 +1,4 @@
+import "@assistant-ui/store";
 //#region src/o11y-scope.d.ts
 type SpanItemState = {
   id: string;

package/dist/o11y-scope.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"o11y-scope.d.ts","names":[],"sources":["../src/o11y-scope.ts"],"mappings":";KAEY,aAAA;EACV,EAAA;EACA,YAAA;EACA,IAAA;EACA,IAAA;EACA,MAAA;EACA,SAAA;EACA,OAAA;EACA,SAAA;EACA,KAAA;EACA,WAAA;EACA,WAAA;AAAA;AAAA,KAGU,SAAA,GAAY,aAAA;EACtB,QAAA,EAAU,aAAa;EACvB,SAAA;IAAa,GAAA;IAAa,GAAA;EAAA;AAAA;AAAA,KAGvB,WAAA;EACH,QAAA,QAAgB,SAAA;EAChB,KAAA,GAAQ,MAAA,EAAQ,QAAA,cAAsB,WAAA;EACtC,cAAA;AAAA;AAAA,KAGG,QAAA;EACH,MAAA;EACA,KAAA;IAAS,KAAA;EAAA;IAAoB,GAAA;EAAA;AAAA;AAAA;EAAA,UAInB,aAAA;IACR,IAAA;MACE,OAAA,EAAS,WAAA;MACT,IAAA,EAAM,QAAQ;IAAA;EAAA;AAAA"}
+{"version":3,"file":"o11y-scope.d.ts","names":[],"sources":["../src/o11y-scope.ts"],"mappings":";;KAEY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;KAGU,YAAY;EACtB,UAAU;EACV;IAAa;IAAa;;;KAGvB;EACH,gBAAgB;EAChB,QAAQ,QAAQ,sBAAsB;EACtC;;KAGG;EACH;EACA;IAAS;;IAAoB;;;;YAInB;IACR;MACE,SAAS;MACT,MAAM"}

package/dist/primitives/span/SpanChildren.d.ts

@@ -1,6 +1,5 @@
 import { SpanState } from "../../o11y-scope.js";
 import { ComponentType, FC, ReactNode } from "react";
-
 //#region src/primitives/span/SpanChildren.d.ts
 type SpanChildrenComponentConfig = {
   Span: ComponentType;
@@ -10,7 +9,8 @@ declare namespace SpanPrimitiveChildren {
     components: SpanChildrenComponentConfig;
     children?: never;
   } | {
-    /** Render function called for each child span. Receives the span. */children: (value: {
+    /** Render function called for each child span. Receives the span. */
+    children: (value: {
       span: SpanState;
     }) => ReactNode;
     components?: never;

package/dist/primitives/span/SpanChildren.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpanChildren.d.ts","names":[],"sources":["../../../src/primitives/span/SpanChildren.tsx"],"mappings":";;;;KAWK,2BAAA;EACH,IAAA,EAAM,aAAa;AAAA;AAAA,kBAGJ,qBAAA;EAAA,KACH,KAAA;IAEN,UAAA,EAAY,2BAAA;IACZ,QAAA;EAAA;IAJ8B,qEAQ9B,QAAA,GAAW,KAAA;MAAS,IAAA,EAAM,SAAA;IAAA,MAAgB,SAAA;IAC1C,UAAA;EAAA;AAAA;AAAA,kBAIS,yBAAA;EAAA,KACH,KAAA;IACV,KAAA;IACA,UAAA,EAAY,2BAA2B;EAAA;AAAA;AAAA,cAI9B,yBAAA,EAA2B,EAAE,CAAC,yBAAA,CAA0B,KAAA;AAAA,cAuDxD,qBAAA,EAAuB,EAAE,CAAC,qBAAA,CAAsB,KAAA"}
+{"version":3,"file":"SpanChildren.d.ts","names":[],"sources":["../../../src/primitives/span/SpanChildren.tsx"],"mappings":";;;KAWK;EACH,MAAM;;kBAGS;OACH;IAEN,YAAY;IACZ;;;IAIA,WAAW;MAAS,MAAM;UAAgB;IAC1C;;;kBAIS;OACH;IACV;IACA,YAAY;;;cAIH,2BAA2B,GAAG,0BAA0B;cAuDxD,uBAAuB,GAAG,sBAAsB"}

package/dist/primitives/span/SpanCollapseToggle.d.ts

@@ -1,6 +1,5 @@
 import { ComponentPropsWithoutRef, ComponentRef } from "react";
 import { Primitive } from "@radix-ui/react-primitive";
-
 //#region src/primitives/span/SpanCollapseToggle.d.ts
 declare namespace SpanPrimitiveCollapseToggle {
   type Element = ComponentRef<typeof Primitive.button>;

package/dist/primitives/span/SpanCollapseToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpanCollapseToggle.d.ts","names":[],"sources":["../../../src/primitives/span/SpanCollapseToggle.tsx"],"mappings":";;;;kBAQiB,2BAAA;EAAA,KACH,OAAA,GAAU,YAAA,QAAoB,SAAA,CAAU,MAAA;EAAA,KACxC,KAAA,GAAQ,wBAAA,QAAgC,SAAA,CAAU,MAAA;AAAA;AAAA,cAGnD,2BAAA,kBAA2B,yBAAA,CAAA,IAAA,iBAAA,eAAA,CAAA,iBAAA,oBAAA,oBAAA,CAAA,iBAAA"}
+{"version":3,"file":"SpanCollapseToggle.d.ts","names":[],"sources":["../../../src/primitives/span/SpanCollapseToggle.tsx"],"mappings":";;;kBAQiB;OACH,UAAU,oBAAoB,UAAU;OACxC,QAAQ,gCAAgC,UAAU;;cAGnD,6CAA2B,0BAAA,qBAAA,gBAAA,qCAAA,qBAAA"}

package/dist/primitives/span/SpanIndent.d.ts

@@ -1,6 +1,5 @@
 import { ComponentPropsWithoutRef, ComponentRef } from "react";
 import { Primitive } from "@radix-ui/react-primitive";
-
 //#region src/primitives/span/SpanIndent.d.ts
 declare namespace SpanPrimitiveIndent {
   type Element = ComponentRef<typeof Primitive.div>;

package/dist/primitives/span/SpanIndent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpanIndent.d.ts","names":[],"sources":["../../../src/primitives/span/SpanIndent.tsx"],"mappings":";;;;kBASiB,mBAAA;EAAA,KACH,OAAA,GAAU,YAAA,QAAoB,SAAA,CAAU,GAAA;EAAA,KACxC,KAAA,GAAQ,wBAAA,QAAgC,SAAA,CAAU,GAAA;IAC5D,UAAA;IACA,cAAA;EAAA;AAAA;AAAA,cAIS,mBAAA,kBAAmB,yBAAA,CAAA,IAAA,iBAAA,eAAA,CAAA,cAAA,oBAAA,cAAA,CAAA,cAAA"}
+{"version":3,"file":"SpanIndent.d.ts","names":[],"sources":["../../../src/primitives/span/SpanIndent.tsx"],"mappings":";;;kBASiB;OACH,UAAU,oBAAoB,UAAU;OACxC,QAAQ,gCAAgC,UAAU;IAC5D;IACA;;;cAIS,qCAAmB,0BAAA,qBAAA,gBAAA,kCAAA,eAAA"}

package/dist/primitives/span/SpanName.d.ts

@@ -1,6 +1,5 @@
 import { ComponentPropsWithoutRef, ComponentRef } from "react";
 import { Primitive } from "@radix-ui/react-primitive";
-
 //#region src/primitives/span/SpanName.d.ts
 declare namespace SpanPrimitiveName {
   type Element = ComponentRef<typeof Primitive.span>;

package/dist/primitives/span/SpanName.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpanName.d.ts","names":[],"sources":["../../../src/primitives/span/SpanName.tsx"],"mappings":";;;;kBAQiB,iBAAA;EAAA,KACH,OAAA,GAAU,YAAA,QAAoB,SAAA,CAAU,IAAA;EAAA,KACxC,KAAA,GAAQ,wBAAA,QAAgC,SAAA,CAAU,IAAA;AAAA;AAAA,cAGnD,iBAAA,kBAAiB,yBAAA,CAAA,IAAA,iBAAA,eAAA,CAAA,eAAA,oBAAA,cAAA,CAAA,eAAA"}
+{"version":3,"file":"SpanName.d.ts","names":[],"sources":["../../../src/primitives/span/SpanName.tsx"],"mappings":";;;kBAQiB;OACH,UAAU,oBAAoB,UAAU;OACxC,QAAQ,gCAAgC,UAAU;;cAGnD,mCAAiB,0BAAA,qBAAA,gBAAA,mCAAA,eAAA"}

package/dist/primitives/span/SpanRoot.d.ts

@@ -1,6 +1,5 @@
 import { ComponentPropsWithoutRef, ComponentRef } from "react";
 import { Primitive } from "@radix-ui/react-primitive";
-
 //#region src/primitives/span/SpanRoot.d.ts
 declare namespace SpanPrimitiveRoot {
   type Element = ComponentRef<typeof Primitive.div>;

package/dist/primitives/span/SpanRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpanRoot.d.ts","names":[],"sources":["../../../src/primitives/span/SpanRoot.tsx"],"mappings":";;;;kBAQiB,iBAAA;EAAA,KACH,OAAA,GAAU,YAAA,QAAoB,SAAA,CAAU,GAAA;EAAA,KACxC,KAAA,GAAQ,wBAAA,QAAgC,SAAA,CAAU,GAAA;AAAA;AAAA,cAGnD,iBAAA,kBAAiB,yBAAA,CAAA,IAAA,iBAAA,eAAA,CAAA,cAAA,oBAAA,cAAA,CAAA,cAAA"}
+{"version":3,"file":"SpanRoot.d.ts","names":[],"sources":["../../../src/primitives/span/SpanRoot.tsx"],"mappings":";;;kBAQiB;OACH,UAAU,oBAAoB,UAAU;OACxC,QAAQ,gCAAgC,UAAU;;cAGnD,mCAAiB,0BAAA,qBAAA,gBAAA,kCAAA,eAAA"}

package/dist/primitives/span/SpanStatusIndicator.d.ts

@@ -1,6 +1,5 @@
 import { ComponentPropsWithoutRef, ComponentRef } from "react";
 import { Primitive } from "@radix-ui/react-primitive";
-
 //#region src/primitives/span/SpanStatusIndicator.d.ts
 declare namespace SpanPrimitiveStatusIndicator {
   type Element = ComponentRef<typeof Primitive.span>;

package/dist/primitives/span/SpanStatusIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpanStatusIndicator.d.ts","names":[],"sources":["../../../src/primitives/span/SpanStatusIndicator.tsx"],"mappings":";;;;kBAQiB,4BAAA;EAAA,KACH,OAAA,GAAU,YAAA,QAAoB,SAAA,CAAU,IAAA;EAAA,KACxC,KAAA,GAAQ,wBAAA,QAAgC,SAAA,CAAU,IAAA;AAAA;AAAA,cAGnD,4BAAA,kBAA4B,yBAAA,CAAA,IAAA,iBAAA,eAAA,CAAA,eAAA,oBAAA,cAAA,CAAA,eAAA"}
+{"version":3,"file":"SpanStatusIndicator.d.ts","names":[],"sources":["../../../src/primitives/span/SpanStatusIndicator.tsx"],"mappings":";;;kBAQiB;OACH,UAAU,oBAAoB,UAAU;OACxC,QAAQ,gCAAgC,UAAU;;cAGnD,8CAA4B,0BAAA,qBAAA,gBAAA,mCAAA,eAAA"}

package/dist/primitives/span/SpanTimeline.d.ts

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef, ComponentRef } from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+//#region src/primitives/span/SpanTimeline.d.ts
+type SpanTimelineRange = {
+  min: number;
+  max: number;
+};
+declare namespace SpanPrimitiveTimeline {
+  type Element = ComponentRef<typeof Primitive.div>;
+  type Props = ComponentPropsWithoutRef<typeof Primitive.div> & {
+    timeRange?: SpanTimelineRange | undefined;
+    paddingEnd?: number | undefined;
+  };
+}
+declare const SpanPrimitiveTimeline: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+  asChild?: boolean;
+}, "ref"> & {
+  timeRange?: SpanTimelineRange | undefined;
+  paddingEnd?: number | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace SpanPrimitiveTimelineBar {
+  type Element = ComponentRef<typeof Primitive.div>;
+  type Props = ComponentPropsWithoutRef<typeof Primitive.div> & {
+    now?: number | undefined;
+    timeRange?: SpanTimelineRange | undefined;
+  };
+}
+declare const getSpanTimelineBarVars: ({ startedAt, endedAt, timeRange, now }: {
+  startedAt: number;
+  endedAt: number | null;
+  timeRange: SpanTimelineRange;
+  now?: number | undefined;
+}) => {
+  leftPercent: number;
+  endPercent: number;
+  widthPercent: number;
+  durationMs: number;
+  effectiveEnd: number;
+};
+declare const SpanPrimitiveTimelineBar: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+  asChild?: boolean;
+}, "ref"> & {
+  now?: number | undefined;
+  timeRange?: SpanTimelineRange | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { SpanPrimitiveTimeline, SpanPrimitiveTimelineBar, SpanTimelineRange, getSpanTimelineBarVars };
+//# sourceMappingURL=SpanTimeline.d.ts.map

package/dist/primitives/span/SpanTimeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpanTimeline.d.ts","names":[],"sources":["../../../src/primitives/span/SpanTimeline.tsx"],"mappings":";;;KAYY;EAAsB;EAAa;;kBA6B9B;OACH,UAAU,oBAAoB,UAAU;OACxC,QAAQ,gCAAgC,UAAU;IAC5D,YAAY;IACZ;;;cAIS,uCAAqB,0BAAA,qBAAA,gBAAA,kCAAA,eAAA;;;cALlB;;;kBAuCC;OACH,UAAU,oBAAoB,UAAU;OACxC,QAAQ,gCAAgC,UAAU;IAC5D;IACA,YAAY;;;cAIH,2BAA0B,WAAA,SAAA,WAAA;EAMrC;EACA;EACA,WAAW;EACX;;;;;;;;cAqBW,0CAAwB,0BAAA,qBAAA,gBAAA,kCAAA,eAAA;;;;cAlCrB"}

package/dist/primitives/span/SpanTimeline.js

@@ -0,0 +1,215 @@
+import { c } from "@assistant-ui/tap/react-shim/compiler-runtime";
+import { createContext, forwardRef, useContext } from "@assistant-ui/tap/react-shim";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAuiState } from "@assistant-ui/store";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/span/SpanTimeline.tsx
+const clampPercent = (value) => Math.min(100, Math.max(0, value));
+const normalizeRange = (range, paddingEnd = 0) => {
+	const duration = Math.max(1, range.max - range.min);
+	const safePaddingEnd = Math.max(0, paddingEnd);
+	return {
+		min: range.min,
+		max: range.max + duration * safePaddingEnd
+	};
+};
+const SpanTimelineRangeContext = createContext(null);
+const SpanPrimitiveTimeline = forwardRef((t0, ref) => {
+	const $ = c(22);
+	let children;
+	let props;
+	let style;
+	let t1;
+	let timeRange;
+	if ($[0] !== t0) {
+		({timeRange, paddingEnd: t1, style, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = timeRange;
+	} else {
+		children = $[1];
+		props = $[2];
+		style = $[3];
+		t1 = $[4];
+		timeRange = $[5];
+	}
+	const paddingEnd = t1 === void 0 ? 0 : t1;
+	const spanTimeRange = useAuiState(_temp);
+	const t2 = timeRange ?? spanTimeRange;
+	let t3;
+	if ($[6] !== paddingEnd || $[7] !== t2) {
+		t3 = normalizeRange(t2, paddingEnd);
+		$[6] = paddingEnd;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	const resolvedRange = t3;
+	const rangeMs = Math.max(1, resolvedRange.max - resolvedRange.min);
+	let t4;
+	if ($[9] !== rangeMs || $[10] !== resolvedRange.max || $[11] !== resolvedRange.min || $[12] !== style) {
+		t4 = {
+			...style,
+			"--span-timeline-min-ms": resolvedRange.min,
+			"--span-timeline-max-ms": resolvedRange.max,
+			"--span-timeline-range-ms": rangeMs
+		};
+		$[9] = rangeMs;
+		$[10] = resolvedRange.max;
+		$[11] = resolvedRange.min;
+		$[12] = style;
+		$[13] = t4;
+	} else t4 = $[13];
+	const mergedStyle = t4;
+	let t5;
+	if ($[14] !== children || $[15] !== mergedStyle || $[16] !== props || $[17] !== ref) {
+		t5 = /* @__PURE__ */ jsx(Primitive.div, {
+			...props,
+			ref,
+			style: mergedStyle,
+			"data-span-timeline": "",
+			children
+		});
+		$[14] = children;
+		$[15] = mergedStyle;
+		$[16] = props;
+		$[17] = ref;
+		$[18] = t5;
+	} else t5 = $[18];
+	let t6;
+	if ($[19] !== resolvedRange || $[20] !== t5) {
+		t6 = /* @__PURE__ */ jsx(SpanTimelineRangeContext.Provider, {
+			value: resolvedRange,
+			children: t5
+		});
+		$[19] = resolvedRange;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	return t6;
+});
+SpanPrimitiveTimeline.displayName = "SpanPrimitive.Timeline";
+const getSpanTimelineBarVars = ({ startedAt, endedAt, timeRange, now }) => {
+	const rangeMs = Math.max(1, timeRange.max - timeRange.min);
+	const effectiveEnd = endedAt ?? now ?? timeRange.max;
+	const leftPercent = clampPercent((startedAt - timeRange.min) / rangeMs * 100);
+	const rawEndPercent = (effectiveEnd - timeRange.min) / rangeMs * 100;
+	const endPercent = clampPercent(Math.max(leftPercent, rawEndPercent));
+	return {
+		leftPercent,
+		endPercent,
+		widthPercent: endPercent - leftPercent,
+		durationMs: Math.max(0, effectiveEnd - startedAt),
+		effectiveEnd
+	};
+};
+const SpanPrimitiveTimelineBar = forwardRef((t0, ref) => {
+	const $ = c(23);
+	let now;
+	let props;
+	let style;
+	let timeRange;
+	if ($[0] !== t0) {
+		({now, timeRange, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = now;
+		$[2] = props;
+		$[3] = style;
+		$[4] = timeRange;
+	} else {
+		now = $[1];
+		props = $[2];
+		style = $[3];
+		timeRange = $[4];
+	}
+	const contextRange = useContext(SpanTimelineRangeContext);
+	const spanTimeRange = useAuiState(_temp2);
+	const startedAt = useAuiState(_temp3);
+	const endedAt = useAuiState(_temp4);
+	const status = useAuiState(_temp5);
+	const type = useAuiState(_temp6);
+	const t1 = timeRange ?? contextRange ?? spanTimeRange;
+	let t2;
+	if ($[5] !== endedAt || $[6] !== now || $[7] !== startedAt || $[8] !== t1) {
+		t2 = getSpanTimelineBarVars({
+			startedAt,
+			endedAt,
+			timeRange: t1,
+			now
+		});
+		$[5] = endedAt;
+		$[6] = now;
+		$[7] = startedAt;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	const vars = t2;
+	const t3 = `${vars.leftPercent}%`;
+	const t4 = `${vars.endPercent}%`;
+	const t5 = `${vars.widthPercent}%`;
+	let t6;
+	if ($[10] !== style || $[11] !== t3 || $[12] !== t4 || $[13] !== t5 || $[14] !== vars.durationMs) {
+		t6 = {
+			...style,
+			position: "absolute",
+			insetInlineStart: "var(--span-timeline-left)",
+			inlineSize: "max(var(--span-timeline-width), var(--span-timeline-min-width, 0px))",
+			"--span-timeline-left": t3,
+			"--span-timeline-end": t4,
+			"--span-timeline-width": t5,
+			"--span-timeline-duration-ms": vars.durationMs
+		};
+		$[10] = style;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = vars.durationMs;
+		$[15] = t6;
+	} else t6 = $[15];
+	const mergedStyle = t6;
+	const t7 = endedAt === null ? "" : void 0;
+	let t8;
+	if ($[16] !== mergedStyle || $[17] !== props || $[18] !== ref || $[19] !== status || $[20] !== t7 || $[21] !== type) {
+		t8 = /* @__PURE__ */ jsx(Primitive.div, {
+			...props,
+			ref,
+			style: mergedStyle,
+			"data-span-status": status,
+			"data-span-type": type,
+			"data-span-running": t7
+		});
+		$[16] = mergedStyle;
+		$[17] = props;
+		$[18] = ref;
+		$[19] = status;
+		$[20] = t7;
+		$[21] = type;
+		$[22] = t8;
+	} else t8 = $[22];
+	return t8;
+});
+SpanPrimitiveTimelineBar.displayName = "SpanPrimitive.TimelineBar";
+function _temp(s) {
+	return s.span.timeRange;
+}
+function _temp2(s) {
+	return s.span.timeRange;
+}
+function _temp3(s_0) {
+	return s_0.span.startedAt;
+}
+function _temp4(s_1) {
+	return s_1.span.endedAt;
+}
+function _temp5(s_2) {
+	return s_2.span.status;
+}
+function _temp6(s_3) {
+	return s_3.span.type;
+}
+//#endregion
+export { SpanPrimitiveTimeline, SpanPrimitiveTimelineBar, getSpanTimelineBarVars };
+
+//# sourceMappingURL=SpanTimeline.js.map

package/dist/primitives/span/SpanTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpanTimeline.js","names":["ComponentPropsWithoutRef","ComponentRef","CSSProperties","createContext","forwardRef","useContext","useMemo","Primitive","useAuiState","SpanTimelineRange","min","max","TimelineCssProperties","clampPercent","value","Math","normalizeRange","range","paddingEnd","duration","safePaddingEnd","SpanTimelineRangeContext","SpanPrimitiveTimeline","Element","div","Props","timeRange","t0","ref","$","_c","children","props","style","t1","undefined","spanTimeRange","_temp","t2","t3","resolvedRange","rangeMs","t4","mergedStyle","t5","t6","displayName","SpanPrimitiveTimelineBar","now","getSpanTimelineBarVars","startedAt","endedAt","effectiveEnd","leftPercent","rawEndPercent","endPercent","widthPercent","durationMs","contextRange","_temp2","_temp3","_temp4","status","_temp5","type","_temp6","vars","position","insetInlineStart","inlineSize","t7","t8","s","span","s_0","s_1","s_2","s_3"],"sources":["../../../src/primitives/span/SpanTimeline.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ComponentRef,\n  type CSSProperties,\n  createContext,\n  forwardRef,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { Primitive } from \"@radix-ui/react-primitive\";\nimport { useAuiState } from \"@assistant-ui/store\";\n\nexport type SpanTimelineRange = { min: number; max: number };\n\ntype TimelineCssProperties = CSSProperties & {\n  \"--span-timeline-min-ms\"?: number;\n  \"--span-timeline-max-ms\"?: number;\n  \"--span-timeline-range-ms\"?: number;\n  \"--span-timeline-left\"?: string;\n  \"--span-timeline-end\"?: string;\n  \"--span-timeline-width\"?: string;\n  \"--span-timeline-duration-ms\"?: number;\n  \"--span-timeline-min-width\"?: string | number;\n};\n\nconst clampPercent = (value: number) => Math.min(100, Math.max(0, value));\n\nconst normalizeRange = (\n  range: SpanTimelineRange,\n  paddingEnd = 0,\n): SpanTimelineRange => {\n  const duration = Math.max(1, range.max - range.min);\n  const safePaddingEnd = Math.max(0, paddingEnd);\n  return {\n    min: range.min,\n    max: range.max + duration * safePaddingEnd,\n  };\n};\n\nconst SpanTimelineRangeContext = createContext<SpanTimelineRange | null>(null);\n\nexport namespace SpanPrimitiveTimeline {\n  export type Element = ComponentRef<typeof Primitive.div>;\n  export type Props = ComponentPropsWithoutRef<typeof Primitive.div> & {\n    timeRange?: SpanTimelineRange | undefined;\n    paddingEnd?: number | undefined;\n  };\n}\n\nexport const SpanPrimitiveTimeline = forwardRef<\n  SpanPrimitiveTimeline.Element,\n  SpanPrimitiveTimeline.Props\n>(({ timeRange, paddingEnd = 0, style, children, ...props }, ref) => {\n  const spanTimeRange = useAuiState((s) => s.span.timeRange);\n  const resolvedRange = useMemo(\n    () => normalizeRange(timeRange ?? spanTimeRange, paddingEnd),\n    [timeRange, spanTimeRange, paddingEnd],\n  );\n  const rangeMs = Math.max(1, resolvedRange.max - resolvedRange.min);\n\n  const mergedStyle: TimelineCssProperties = {\n    ...style,\n    \"--span-timeline-min-ms\": resolvedRange.min,\n    \"--span-timeline-max-ms\": resolvedRange.max,\n    \"--span-timeline-range-ms\": rangeMs,\n  };\n\n  return (\n    <SpanTimelineRangeContext.Provider value={resolvedRange}>\n      <Primitive.div\n        {...props}\n        ref={ref}\n        style={mergedStyle}\n        data-span-timeline=\"\"\n      >\n        {children}\n      </Primitive.div>\n    </SpanTimelineRangeContext.Provider>\n  );\n});\n\nSpanPrimitiveTimeline.displayName = \"SpanPrimitive.Timeline\";\n\nexport namespace SpanPrimitiveTimelineBar {\n  export type Element = ComponentRef<typeof Primitive.div>;\n  export type Props = ComponentPropsWithoutRef<typeof Primitive.div> & {\n    now?: number | undefined;\n    timeRange?: SpanTimelineRange | undefined;\n  };\n}\n\nexport const getSpanTimelineBarVars = ({\n  startedAt,\n  endedAt,\n  timeRange,\n  now,\n}: {\n  startedAt: number;\n  endedAt: number | null;\n  timeRange: SpanTimelineRange;\n  now?: number | undefined;\n}) => {\n  const rangeMs = Math.max(1, timeRange.max - timeRange.min);\n  const effectiveEnd = endedAt ?? now ?? timeRange.max;\n  const leftPercent = clampPercent(\n    ((startedAt - timeRange.min) / rangeMs) * 100,\n  );\n  const rawEndPercent = ((effectiveEnd - timeRange.min) / rangeMs) * 100;\n  const endPercent = clampPercent(Math.max(leftPercent, rawEndPercent));\n  const widthPercent = endPercent - leftPercent;\n  const durationMs = Math.max(0, effectiveEnd - startedAt);\n\n  return {\n    leftPercent,\n    endPercent,\n    widthPercent,\n    durationMs,\n    effectiveEnd,\n  };\n};\n\nexport const SpanPrimitiveTimelineBar = forwardRef<\n  SpanPrimitiveTimelineBar.Element,\n  SpanPrimitiveTimelineBar.Props\n>(({ now, timeRange, style, ...props }, ref) => {\n  const contextRange = useContext(SpanTimelineRangeContext);\n  const spanTimeRange = useAuiState((s) => s.span.timeRange);\n  const startedAt = useAuiState((s) => s.span.startedAt);\n  const endedAt = useAuiState((s) => s.span.endedAt);\n  const status = useAuiState((s) => s.span.status);\n  const type = useAuiState((s) => s.span.type);\n\n  const vars = getSpanTimelineBarVars({\n    startedAt,\n    endedAt,\n    timeRange: timeRange ?? contextRange ?? spanTimeRange,\n    now,\n  });\n\n  const mergedStyle: TimelineCssProperties = {\n    ...style,\n    position: \"absolute\",\n    insetInlineStart: \"var(--span-timeline-left)\",\n    inlineSize:\n      \"max(var(--span-timeline-width), var(--span-timeline-min-width, 0px))\",\n    \"--span-timeline-left\": `${vars.leftPercent}%`,\n    \"--span-timeline-end\": `${vars.endPercent}%`,\n    \"--span-timeline-width\": `${vars.widthPercent}%`,\n    \"--span-timeline-duration-ms\": vars.durationMs,\n  };\n\n  return (\n    <Primitive.div\n      {...props}\n      ref={ref}\n      style={mergedStyle}\n      data-span-status={status}\n      data-span-type={type}\n      data-span-running={endedAt === null ? \"\" : undefined}\n    />\n  );\n});\n\nSpanPrimitiveTimelineBar.displayName = \"SpanPrimitive.TimelineBar\";\n"],"mappings":"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"}

package/dist/primitives/span/SpanTypeBadge.d.ts

@@ -1,6 +1,5 @@
 import { ComponentPropsWithoutRef, ComponentRef } from "react";
 import { Primitive } from "@radix-ui/react-primitive";
-
 //#region src/primitives/span/SpanTypeBadge.d.ts
 declare namespace SpanPrimitiveTypeBadge {
   type Element = ComponentRef<typeof Primitive.span>;

package/dist/primitives/span/SpanTypeBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpanTypeBadge.d.ts","names":[],"sources":["../../../src/primitives/span/SpanTypeBadge.tsx"],"mappings":";;;;kBAQiB,sBAAA;EAAA,KACH,OAAA,GAAU,YAAA,QAAoB,SAAA,CAAU,IAAA;EAAA,KACxC,KAAA,GAAQ,wBAAA,QAAgC,SAAA,CAAU,IAAA;AAAA;AAAA,cAGnD,sBAAA,kBAAsB,yBAAA,CAAA,IAAA,iBAAA,eAAA,CAAA,eAAA,oBAAA,cAAA,CAAA,eAAA"}
+{"version":3,"file":"SpanTypeBadge.d.ts","names":[],"sources":["../../../src/primitives/span/SpanTypeBadge.tsx"],"mappings":";;;kBAQiB;OACH,UAAU,oBAAoB,UAAU;OACxC,QAAQ,gCAAgC,UAAU;;cAGnD,wCAAsB,0BAAA,qBAAA,gBAAA,mCAAA,eAAA"}

package/dist/primitives/span.d.ts

@@ -5,11 +5,10 @@ import { SpanPrimitiveStatusIndicator } from "./span/SpanStatusIndicator.js";
 import { SpanPrimitiveCollapseToggle } from "./span/SpanCollapseToggle.js";
 import { SpanPrimitiveIndent } from "./span/SpanIndent.js";
 import { SpanPrimitiveChildren } from "./span/SpanChildren.js";
-
-//#region src/primitives/span.d.ts
+import { SpanPrimitiveTimeline, SpanPrimitiveTimelineBar, SpanTimelineRange } from "./span/SpanTimeline.js";
 declare namespace span_d_exports {
-  export { SpanPrimitiveChildren as Children, SpanPrimitiveCollapseToggle as CollapseToggle, SpanPrimitiveIndent as Indent, SpanPrimitiveName as Name, SpanPrimitiveRoot as Root, SpanPrimitiveStatusIndicator as StatusIndicator, SpanPrimitiveTypeBadge as TypeBadge };
+  export { SpanPrimitiveChildren as Children, SpanPrimitiveCollapseToggle as CollapseToggle, SpanPrimitiveIndent as Indent, SpanPrimitiveName as Name, SpanPrimitiveRoot as Root, SpanTimelineRange, SpanPrimitiveStatusIndicator as StatusIndicator, SpanPrimitiveTimeline as Timeline, SpanPrimitiveTimelineBar as TimelineBar, SpanPrimitiveTypeBadge as TypeBadge };
 }
 //#endregion
-export { SpanPrimitiveChildren as Children, SpanPrimitiveCollapseToggle as CollapseToggle, SpanPrimitiveIndent as Indent, SpanPrimitiveName as Name, SpanPrimitiveRoot as Root, SpanPrimitiveStatusIndicator as StatusIndicator, SpanPrimitiveTypeBadge as TypeBadge, span_d_exports };
+export { SpanPrimitiveChildren as Children, SpanPrimitiveCollapseToggle as CollapseToggle, SpanPrimitiveIndent as Indent, SpanPrimitiveName as Name, SpanPrimitiveRoot as Root, type SpanTimelineRange, SpanPrimitiveStatusIndicator as StatusIndicator, SpanPrimitiveTimeline as Timeline, SpanPrimitiveTimelineBar as TimelineBar, SpanPrimitiveTypeBadge as TypeBadge, span_d_exports };
 //# sourceMappingURL=span.d.ts.map

package/dist/primitives/span.js

@@ -6,6 +6,7 @@ import { SpanPrimitiveStatusIndicator } from "./span/SpanStatusIndicator.js";
 import { SpanPrimitiveCollapseToggle } from "./span/SpanCollapseToggle.js";
 import { SpanPrimitiveIndent } from "./span/SpanIndent.js";
 import { SpanPrimitiveChildren } from "./span/SpanChildren.js";
+import { SpanPrimitiveTimeline, SpanPrimitiveTimelineBar } from "./span/SpanTimeline.js";
 //#region src/primitives/span.ts
 var span_exports = /* @__PURE__ */ __exportAll({
 	Children: () => SpanPrimitiveChildren,
@@ -14,9 +15,11 @@ var span_exports = /* @__PURE__ */ __exportAll({
 	Name: () => SpanPrimitiveName,
 	Root: () => SpanPrimitiveRoot,
 	StatusIndicator: () => SpanPrimitiveStatusIndicator,
+	Timeline: () => SpanPrimitiveTimeline,
+	TimelineBar: () => SpanPrimitiveTimelineBar,
 	TypeBadge: () => SpanPrimitiveTypeBadge
 });
 //#endregion
-export { SpanPrimitiveChildren as Children, SpanPrimitiveCollapseToggle as CollapseToggle, SpanPrimitiveIndent as Indent, SpanPrimitiveName as Name, SpanPrimitiveRoot as Root, SpanPrimitiveStatusIndicator as StatusIndicator, SpanPrimitiveTypeBadge as TypeBadge, span_exports };
+export { SpanPrimitiveChildren as Children, SpanPrimitiveCollapseToggle as CollapseToggle, SpanPrimitiveIndent as Indent, SpanPrimitiveName as Name, SpanPrimitiveRoot as Root, SpanPrimitiveStatusIndicator as StatusIndicator, SpanPrimitiveTimeline as Timeline, SpanPrimitiveTimelineBar as TimelineBar, SpanPrimitiveTypeBadge as TypeBadge, span_exports };
 
 //# sourceMappingURL=span.js.map

package/dist/primitives/span.js.map

@@ -1 +1 @@
-{"version":3,"file":"span.js","names":["SpanPrimitiveRoot","Root","SpanPrimitiveName","Name","SpanPrimitiveTypeBadge","TypeBadge","SpanPrimitiveStatusIndicator","StatusIndicator","SpanPrimitiveCollapseToggle","CollapseToggle","SpanPrimitiveIndent","Indent","SpanPrimitiveChildren","Children"],"sources":["../../src/primitives/span.ts"],"sourcesContent":["export { SpanPrimitiveRoot as Root } from \"./span/SpanRoot\";\nexport { SpanPrimitiveName as Name } from \"./span/SpanName\";\nexport { SpanPrimitiveTypeBadge as TypeBadge } from \"./span/SpanTypeBadge\";\nexport { SpanPrimitiveStatusIndicator as StatusIndicator } from \"./span/SpanStatusIndicator\";\nexport { SpanPrimitiveCollapseToggle as CollapseToggle } from \"./span/SpanCollapseToggle\";\nexport { SpanPrimitiveIndent as Indent } from \"./span/SpanIndent\";\nexport { SpanPrimitiveChildren as Children } from \"./span/SpanChildren\";\n"],"mappings":""}
+{"version":3,"file":"span.js","names":["SpanPrimitiveRoot","Root","SpanPrimitiveName","Name","SpanPrimitiveTypeBadge","TypeBadge","SpanPrimitiveStatusIndicator","StatusIndicator","SpanPrimitiveCollapseToggle","CollapseToggle","SpanPrimitiveIndent","Indent","SpanPrimitiveChildren","Children","SpanPrimitiveTimeline","Timeline","SpanPrimitiveTimelineBar","TimelineBar","SpanTimelineRange"],"sources":["../../src/primitives/span.ts"],"sourcesContent":["export { SpanPrimitiveRoot as Root } from \"./span/SpanRoot\";\nexport { SpanPrimitiveName as Name } from \"./span/SpanName\";\nexport { SpanPrimitiveTypeBadge as TypeBadge } from \"./span/SpanTypeBadge\";\nexport { SpanPrimitiveStatusIndicator as StatusIndicator } from \"./span/SpanStatusIndicator\";\nexport { SpanPrimitiveCollapseToggle as CollapseToggle } from \"./span/SpanCollapseToggle\";\nexport { SpanPrimitiveIndent as Indent } from \"./span/SpanIndent\";\nexport { SpanPrimitiveChildren as Children } from \"./span/SpanChildren\";\nexport {\n  SpanPrimitiveTimeline as Timeline,\n  SpanPrimitiveTimelineBar as TimelineBar,\n  type SpanTimelineRange,\n} from \"./span/SpanTimeline\";\n"],"mappings":""}

package/dist/resources/SpanResource.d.ts

@@ -1,5 +1,5 @@
+import "../o11y-scope.js";
 import { ClientOutput } from "@assistant-ui/store";
-
 //#region src/resources/SpanResource.d.ts
 type SpanData = {
   id: string;

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

@@ -1 +1 @@
-{"version":3,"file":"SpanResource.d.ts","names":[],"sources":["../../src/resources/SpanResource.tsx"],"mappings":";;;KAOY,QAAA;EACV,EAAA;EACA,YAAA;EACA,IAAA;EACA,IAAA;EACA,MAAA;EACA,SAAA;EACA,OAAA;EACA,SAAA;AAAA;AAAA,cA8LW,YAAA,8BAAY,QAAA,CAAA,YAAA;SA/DhB,QAAQ;AAAA"}
+{"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;SA/DhB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react-o11y",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "description": "Observability primitives for @assistant-ui",
   "keywords": [
     "observability",
@@ -28,9 +28,9 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@radix-ui/react-primitive": "^2.1.5",
-    "@assistant-ui/store": "0.2.18",
-    "@assistant-ui/tap": "0.9.2"
+    "@radix-ui/react-primitive": "^2.1.7",
+    "@assistant-ui/store": "0.2.20",
+    "@assistant-ui/tap": "0.9.4"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -43,8 +43,11 @@
   },
   "devDependencies": {
     "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "react": "^19.2.7",
-    "@assistant-ui/x-buildutils": "0.0.15"
+    "react-dom": "^19.2.7",
+    "vitest": "^4.1.10",
+    "@assistant-ui/x-buildutils": "0.0.18"
   },
   "publishConfig": {
     "access": "public",
@@ -60,6 +63,7 @@
     "url": "https://github.com/assistant-ui/assistant-ui/issues"
   },
   "scripts": {
-    "build": "aui-build"
+    "build": "aui-build",
+    "test": "vitest run"
   }
 }

package/src/primitives/span/SpanTimeline.test.tsx

@@ -0,0 +1,192 @@
+import type { CSSProperties } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+import { AuiProvider, useAui } from "@assistant-ui/store";
+import * as SpanPrimitive from "../span";
+import { SpanResource, type SpanData } from "../../resources/SpanResource";
+import { getSpanTimelineBarVars } from "./SpanTimeline";
+
+const spans: SpanData[] = [
+  {
+    id: "root",
+    parentSpanId: null,
+    name: "request",
+    type: "http",
+    status: "completed",
+    startedAt: 0,
+    endedAt: 100,
+    latencyMs: 100,
+  },
+];
+
+const TimelineFixture = ({
+  paddingEnd,
+  now,
+  barStyle,
+}: {
+  paddingEnd?: number | undefined;
+  now?: number | undefined;
+  barStyle?: CSSProperties | undefined;
+}) => {
+  const aui = useAui({ span: SpanResource({ spans }) });
+
+  return (
+    <AuiProvider value={aui}>
+      <SpanPrimitive.Timeline paddingEnd={paddingEnd}>
+        <SpanPrimitive.Children>
+          {() => <SpanPrimitive.TimelineBar now={now} style={barStyle} />}
+        </SpanPrimitive.Children>
+      </SpanPrimitive.Timeline>
+    </AuiProvider>
+  );
+};
+
+const runningSpans: SpanData[] = [
+  {
+    id: "root",
+    parentSpanId: null,
+    name: "request",
+    type: "http",
+    status: "running",
+    startedAt: 0,
+    endedAt: null,
+    latencyMs: null,
+  },
+];
+
+const RunningFixture = () => {
+  const aui = useAui({ span: SpanResource({ spans: runningSpans }) });
+
+  return (
+    <AuiProvider value={aui}>
+      <SpanPrimitive.Timeline timeRange={{ min: 0, max: 100 }}>
+        <SpanPrimitive.Children>
+          {() => <SpanPrimitive.TimelineBar />}
+        </SpanPrimitive.Children>
+      </SpanPrimitive.Timeline>
+    </AuiProvider>
+  );
+};
+
+describe("SpanPrimitive.Timeline", () => {
+  it("computes stable timeline percentages for completed spans", () => {
+    expect(
+      getSpanTimelineBarVars({
+        startedAt: 25,
+        endedAt: 75,
+        timeRange: { min: 0, max: 100 },
+      }),
+    ).toMatchObject({
+      leftPercent: 25,
+      endPercent: 75,
+      widthPercent: 50,
+      durationMs: 50,
+      effectiveEnd: 75,
+    });
+  });
+
+  it("uses now for running spans without producing negative widths", () => {
+    expect(
+      getSpanTimelineBarVars({
+        startedAt: 100,
+        endedAt: null,
+        timeRange: { min: 0, max: 200 },
+        now: 80,
+      }),
+    ).toMatchObject({
+      leftPercent: 50,
+      endPercent: 50,
+      widthPercent: 0,
+      durationMs: 0,
+      effectiveEnd: 80,
+    });
+  });
+
+  it("uses the range boundary for running spans when now is omitted", () => {
+    const dateNow = vi.spyOn(Date, "now").mockReturnValue(1_000);
+
+    expect(
+      getSpanTimelineBarVars({
+        startedAt: 25,
+        endedAt: null,
+        timeRange: { min: 0, max: 100 },
+      }),
+    ).toMatchObject({
+      leftPercent: 25,
+      endPercent: 100,
+      widthPercent: 75,
+      durationMs: 75,
+      effectiveEnd: 100,
+    });
+    expect(dateNow).not.toHaveBeenCalled();
+
+    dateNow.mockRestore();
+  });
+
+  it("clamps bar geometry to the timeline when now or startedAt fall outside the range", () => {
+    expect(
+      getSpanTimelineBarVars({
+        startedAt: 25,
+        endedAt: null,
+        timeRange: { min: 0, max: 100 },
+        now: 10_000,
+      }),
+    ).toMatchObject({
+      leftPercent: 25,
+      endPercent: 100,
+      widthPercent: 75,
+      effectiveEnd: 10_000,
+    });
+
+    expect(
+      getSpanTimelineBarVars({
+        startedAt: -50,
+        endedAt: 50,
+        timeRange: { min: 0, max: 100 },
+      }),
+    ).toMatchObject({
+      leftPercent: 0,
+      endPercent: 50,
+      widthPercent: 50,
+    });
+  });
+
+  it("provides the padded timeline range to child bars", () => {
+    const html = renderToStaticMarkup(<TimelineFixture paddingEnd={1} />);
+
+    expect(html).toContain("data-span-timeline");
+    expect(html).toContain("--span-timeline-range-ms:200");
+    expect(html).toContain("--span-timeline-width:50%");
+    expect(html).toContain('data-span-status="completed"');
+    expect(html).toContain('data-span-type="http"');
+  });
+
+  it("marks running bars with data-span-running and omits it for completed spans", () => {
+    expect(renderToStaticMarkup(<RunningFixture />)).toContain(
+      "data-span-running",
+    );
+    expect(renderToStaticMarkup(<TimelineFixture />)).not.toContain(
+      "data-span-running",
+    );
+  });
+
+  it("passes a consumer --span-timeline-min-width through to the bar style", () => {
+    const html = renderToStaticMarkup(
+      <TimelineFixture
+        barStyle={{ "--span-timeline-min-width": "4px" } as CSSProperties}
+      />,
+    );
+
+    expect(html).toContain("--span-timeline-min-width:4px");
+    expect(html).toContain("position:absolute");
+  });
+
+  it("clamps a negative paddingEnd and leaves the default range unpadded", () => {
+    expect(renderToStaticMarkup(<TimelineFixture paddingEnd={-1} />)).toContain(
+      "--span-timeline-range-ms:100",
+    );
+    expect(renderToStaticMarkup(<TimelineFixture />)).toContain(
+      "--span-timeline-range-ms:100",
+    );
+  });
+});

package/src/primitives/span/SpanTimeline.tsx

@@ -0,0 +1,164 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  type CSSProperties,
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAuiState } from "@assistant-ui/store";
+
+export type SpanTimelineRange = { min: number; max: number };
+
+type TimelineCssProperties = CSSProperties & {
+  "--span-timeline-min-ms"?: number;
+  "--span-timeline-max-ms"?: number;
+  "--span-timeline-range-ms"?: number;
+  "--span-timeline-left"?: string;
+  "--span-timeline-end"?: string;
+  "--span-timeline-width"?: string;
+  "--span-timeline-duration-ms"?: number;
+  "--span-timeline-min-width"?: string | number;
+};
+
+const clampPercent = (value: number) => Math.min(100, Math.max(0, value));
+
+const normalizeRange = (
+  range: SpanTimelineRange,
+  paddingEnd = 0,
+): SpanTimelineRange => {
+  const duration = Math.max(1, range.max - range.min);
+  const safePaddingEnd = Math.max(0, paddingEnd);
+  return {
+    min: range.min,
+    max: range.max + duration * safePaddingEnd,
+  };
+};
+
+const SpanTimelineRangeContext = createContext<SpanTimelineRange | null>(null);
+
+export namespace SpanPrimitiveTimeline {
+  export type Element = ComponentRef<typeof Primitive.div>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.div> & {
+    timeRange?: SpanTimelineRange | undefined;
+    paddingEnd?: number | undefined;
+  };
+}
+
+export const SpanPrimitiveTimeline = forwardRef<
+  SpanPrimitiveTimeline.Element,
+  SpanPrimitiveTimeline.Props
+>(({ timeRange, paddingEnd = 0, style, children, ...props }, ref) => {
+  const spanTimeRange = useAuiState((s) => s.span.timeRange);
+  const resolvedRange = useMemo(
+    () => normalizeRange(timeRange ?? spanTimeRange, paddingEnd),
+    [timeRange, spanTimeRange, paddingEnd],
+  );
+  const rangeMs = Math.max(1, resolvedRange.max - resolvedRange.min);
+
+  const mergedStyle: TimelineCssProperties = {
+    ...style,
+    "--span-timeline-min-ms": resolvedRange.min,
+    "--span-timeline-max-ms": resolvedRange.max,
+    "--span-timeline-range-ms": rangeMs,
+  };
+
+  return (
+    <SpanTimelineRangeContext.Provider value={resolvedRange}>
+      <Primitive.div
+        {...props}
+        ref={ref}
+        style={mergedStyle}
+        data-span-timeline=""
+      >
+        {children}
+      </Primitive.div>
+    </SpanTimelineRangeContext.Provider>
+  );
+});
+
+SpanPrimitiveTimeline.displayName = "SpanPrimitive.Timeline";
+
+export namespace SpanPrimitiveTimelineBar {
+  export type Element = ComponentRef<typeof Primitive.div>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.div> & {
+    now?: number | undefined;
+    timeRange?: SpanTimelineRange | undefined;
+  };
+}
+
+export const getSpanTimelineBarVars = ({
+  startedAt,
+  endedAt,
+  timeRange,
+  now,
+}: {
+  startedAt: number;
+  endedAt: number | null;
+  timeRange: SpanTimelineRange;
+  now?: number | undefined;
+}) => {
+  const rangeMs = Math.max(1, timeRange.max - timeRange.min);
+  const effectiveEnd = endedAt ?? now ?? timeRange.max;
+  const leftPercent = clampPercent(
+    ((startedAt - timeRange.min) / rangeMs) * 100,
+  );
+  const rawEndPercent = ((effectiveEnd - timeRange.min) / rangeMs) * 100;
+  const endPercent = clampPercent(Math.max(leftPercent, rawEndPercent));
+  const widthPercent = endPercent - leftPercent;
+  const durationMs = Math.max(0, effectiveEnd - startedAt);
+
+  return {
+    leftPercent,
+    endPercent,
+    widthPercent,
+    durationMs,
+    effectiveEnd,
+  };
+};
+
+export const SpanPrimitiveTimelineBar = forwardRef<
+  SpanPrimitiveTimelineBar.Element,
+  SpanPrimitiveTimelineBar.Props
+>(({ now, timeRange, style, ...props }, ref) => {
+  const contextRange = useContext(SpanTimelineRangeContext);
+  const spanTimeRange = useAuiState((s) => s.span.timeRange);
+  const startedAt = useAuiState((s) => s.span.startedAt);
+  const endedAt = useAuiState((s) => s.span.endedAt);
+  const status = useAuiState((s) => s.span.status);
+  const type = useAuiState((s) => s.span.type);
+
+  const vars = getSpanTimelineBarVars({
+    startedAt,
+    endedAt,
+    timeRange: timeRange ?? contextRange ?? spanTimeRange,
+    now,
+  });
+
+  const mergedStyle: TimelineCssProperties = {
+    ...style,
+    position: "absolute",
+    insetInlineStart: "var(--span-timeline-left)",
+    inlineSize:
+      "max(var(--span-timeline-width), var(--span-timeline-min-width, 0px))",
+    "--span-timeline-left": `${vars.leftPercent}%`,
+    "--span-timeline-end": `${vars.endPercent}%`,
+    "--span-timeline-width": `${vars.widthPercent}%`,
+    "--span-timeline-duration-ms": vars.durationMs,
+  };
+
+  return (
+    <Primitive.div
+      {...props}
+      ref={ref}
+      style={mergedStyle}
+      data-span-status={status}
+      data-span-type={type}
+      data-span-running={endedAt === null ? "" : undefined}
+    />
+  );
+});
+
+SpanPrimitiveTimelineBar.displayName = "SpanPrimitive.TimelineBar";

package/src/primitives/span.ts

@@ -5,3 +5,8 @@ export { SpanPrimitiveStatusIndicator as StatusIndicator } from "./span/SpanStat
 export { SpanPrimitiveCollapseToggle as CollapseToggle } from "./span/SpanCollapseToggle";
 export { SpanPrimitiveIndent as Indent } from "./span/SpanIndent";
 export { SpanPrimitiveChildren as Children } from "./span/SpanChildren";
+export {
+  SpanPrimitiveTimeline as Timeline,
+  SpanPrimitiveTimelineBar as TimelineBar,
+  type SpanTimelineRange,
+} from "./span/SpanTimeline";