@assistant-ui/react-o11y 0.0.1

package/dist/context/SpanByIndexProvider.d.ts

@@ -0,0 +1,5 @@
+import type { FC, PropsWithChildren } from "react";
+export declare const SpanByIndexProvider: FC<PropsWithChildren<{
+    index: number;
+}>>;
+//# sourceMappingURL=SpanByIndexProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanByIndexProvider.d.ts","sourceRoot":"","sources":["../../src/context/SpanByIndexProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGnD,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAexE,CAAC"}

package/dist/context/SpanByIndexProvider.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAui, AuiProvider, Derived } from "@assistant-ui/store";
+export const SpanByIndexProvider = ({ index, children, }) => {
+    const parentAui = useAui();
+    const aui = useAui({
+        span: Derived({
+            source: "span",
+            query: { index },
+            get: () => parentAui.span().child({ index }),
+        }),
+    });
+    return _jsx(AuiProvider, { value: aui, children: children });
+};
+//# sourceMappingURL=SpanByIndexProvider.js.map

package/dist/context/SpanByIndexProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpanByIndexProvider.js","sourceRoot":"","sources":["../../src/context/SpanByIndexProvider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAEnE,MAAM,CAAC,MAAM,mBAAmB,GAA6C,CAAC,EAC5E,KAAK,EACL,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAE3B,MAAM,GAAG,GAAG,MAAM,CAAC;QACjB,IAAI,EAAE,OAAO,CAAC;YACZ,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,EAAE,KAAK,EAAE;YAChB,GAAG,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC;SAC7C,CAAC;KACH,CAAC,CAAC;IAEH,OAAO,KAAC,WAAW,IAAC,KAAK,EAAE,GAAG,YAAG,QAAQ,GAAe,CAAC;AAC3D,CAAC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * as SpanPrimitive from "./primitives/span/index.js";
+export { SpanResource } from "./resources/SpanResource.js";
+export type { SpanData } from "./resources/SpanResource.js";
+export type { SpanItemState, SpanState } from "./o11y-scope.js";
+export { SpanByIndexProvider } from "./context/SpanByIndexProvider.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,aAAa,mCAA0B;AAEnD,OAAO,EAAE,YAAY,EAAE,oCAAiC;AACxD,YAAY,EAAE,QAAQ,EAAE,oCAAiC;AACzD,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,wBAAqB;AAE7D,OAAO,EAAE,mBAAmB,EAAE,yCAAsC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export * as SpanPrimitive from "./primitives/span/index.js";
+export { SpanResource } from "./resources/SpanResource.js";
+export { SpanByIndexProvider } from "./context/SpanByIndexProvider.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,aAAa,mCAA0B;AAEnD,OAAO,EAAE,YAAY,EAAE,oCAAiC;AAIxD,OAAO,EAAE,mBAAmB,EAAE,yCAAsC"}

package/dist/o11y-scope.d.ts

@@ -0,0 +1,44 @@
+import "@assistant-ui/store";
+export type SpanItemState = {
+    id: string;
+    parentSpanId: string | null;
+    name: string;
+    type: string;
+    status: "running" | "completed" | "failed" | "skipped";
+    startedAt: number;
+    endedAt: number | null;
+    latencyMs: number | null;
+    depth: number;
+    hasChildren: boolean;
+    isCollapsed: boolean;
+};
+export type SpanState = SpanItemState & {
+    children: SpanItemState[];
+    timeRange: {
+        min: number;
+        max: number;
+    };
+};
+type SpanMethods = {
+    getState: () => SpanState;
+    child: (lookup: SpanMeta["query"]) => SpanMethods;
+    toggleCollapse: () => void;
+};
+type SpanMeta = {
+    source: "span";
+    query: {
+        index: number;
+    } | {
+        key: string;
+    };
+};
+declare module "@assistant-ui/store" {
+    interface ScopeRegistry {
+        span: {
+            methods: SpanMethods;
+            meta: SpanMeta;
+        };
+    }
+}
+export {};
+//# sourceMappingURL=o11y-scope.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"o11y-scope.d.ts","sourceRoot":"","sources":["../src/o11y-scope.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAE7B,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG;IACtC,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,SAAS,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;CACzC,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,MAAM,SAAS,CAAC;IAC1B,KAAK,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC;IAClD,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,KAAK,QAAQ,GAAG;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5C,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,aAAa;QACrB,IAAI,EAAE;YACJ,OAAO,EAAE,WAAW,CAAC;YACrB,IAAI,EAAE,QAAQ,CAAC;SAChB,CAAC;KACH;CACF"}

package/dist/o11y-scope.js

@@ -0,0 +1,2 @@
+import "@assistant-ui/store";
+//# sourceMappingURL=o11y-scope.js.map

package/dist/o11y-scope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"o11y-scope.js","sourceRoot":"","sources":["../src/o11y-scope.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC"}

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

@@ -0,0 +1,17 @@
+import { type ComponentType, type FC } from "react";
+export declare namespace SpanPrimitiveChildren {
+    type Props = {
+        components: {
+            Span: ComponentType;
+        };
+    };
+}
+export declare namespace SpanPrimitiveChildByIndex {
+    type Props = {
+        index: number;
+        components: SpanPrimitiveChildren.Props["components"];
+    };
+}
+export declare const SpanPrimitiveChildByIndex: FC<SpanPrimitiveChildByIndex.Props>;
+export declare const SpanPrimitiveChildren: FC<SpanPrimitiveChildren.Props>;
+//# sourceMappingURL=SpanChildren.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanChildren.d.ts","sourceRoot":"","sources":["../../../src/primitives/span/SpanChildren.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,EAAE,EAAiB,MAAM,OAAO,CAAC;AAInE,yBAAiB,qBAAqB,CAAC;IACrC,KAAY,KAAK,GAAG;QAClB,UAAU,EAAE;YACV,IAAI,EAAE,aAAa,CAAC;SACrB,CAAC;KACH,CAAC;CACH;AAED,yBAAiB,yBAAyB,CAAC;IACzC,KAAY,KAAK,GAAG;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,qBAAqB,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;KACvD,CAAC;CACH;AAED,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC,yBAAyB,CAAC,KAAK,CAYvE,CAAC;AAuBJ,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAGjE,CAAC"}

package/dist/primitives/span/SpanChildren.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { useAuiState } from "@assistant-ui/store";
+import { SpanByIndexProvider } from "../../context/SpanByIndexProvider.js";
+export const SpanPrimitiveChildByIndex = memo(({ index, components }) => {
+    return (_jsx(SpanByIndexProvider, { index: index, children: _jsx(components.Span, {}) }));
+}, (prev, next) => prev.index === next.index &&
+    prev.components.Span === next.components.Span);
+SpanPrimitiveChildByIndex.displayName = "SpanPrimitive.ChildByIndex";
+const SpanPrimitiveChildrenImpl = ({ components, }) => {
+    const childrenLength = useAuiState((s) => s.span.children.length);
+    const childElements = useMemo(() => {
+        if (childrenLength === 0)
+            return null;
+        return Array.from({ length: childrenLength }, (_, index) => (_jsx(SpanPrimitiveChildByIndex, { index: index, components: components }, index)));
+    }, [childrenLength, components]);
+    return childElements;
+};
+export const SpanPrimitiveChildren = memo(SpanPrimitiveChildrenImpl, (prev, next) => prev.components.Span === next.components.Span);
+SpanPrimitiveChildren.displayName = "SpanPrimitive.Children";
+//# sourceMappingURL=SpanChildren.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanChildren.js","sourceRoot":"","sources":["../../../src/primitives/span/SpanChildren.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA+B,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,6CAA0C;AAiBxE,MAAM,CAAC,MAAM,yBAAyB,GACpC,IAAI,CACF,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE;IACxB,OAAO,CACL,KAAC,mBAAmB,IAAC,KAAK,EAAE,KAAK,YAC/B,KAAC,UAAU,CAAC,IAAI,KAAG,GACC,CACvB,CAAC;AACJ,CAAC,EACD,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CACb,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;IACzB,IAAI,CAAC,UAAU,CAAC,IAAI,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAChD,CAAC;AAEJ,yBAAyB,CAAC,WAAW,GAAG,4BAA4B,CAAC;AAErE,MAAM,yBAAyB,GAAoC,CAAC,EAClE,UAAU,GACX,EAAE,EAAE;IACH,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAElE,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,cAAc,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QACtC,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1D,KAAC,yBAAyB,IAExB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,IAFjB,KAAK,CAGV,CACH,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC,CAAC;IAEjC,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAoC,IAAI,CACxE,yBAAyB,EACzB,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAC9D,CAAC;AAEF,qBAAqB,CAAC,WAAW,GAAG,wBAAwB,CAAC"}

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

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef, type ComponentRef } from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+export declare namespace SpanPrimitiveCollapseToggle {
+    type Element = ComponentRef<typeof Primitive.button>;
+    type Props = ComponentPropsWithoutRef<typeof Primitive.button>;
+}
+export declare const SpanPrimitiveCollapseToggle: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=SpanCollapseToggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanCollapseToggle.d.ts","sourceRoot":"","sources":["../../../src/primitives/span/SpanCollapseToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGtD,yBAAiB,2BAA2B,CAAC;IAC3C,KAAY,OAAO,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC;IAC5D,KAAY,KAAK,GAAG,wBAAwB,CAAC,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC;CACvE;AAED,eAAO,MAAM,2BAA2B;;6DAuBtC,CAAC"}

package/dist/primitives/span/SpanCollapseToggle.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAui, useAuiState } from "@assistant-ui/store";
+export const SpanPrimitiveCollapseToggle = forwardRef((props, ref) => {
+    const hasChildren = useAuiState((s) => s.span.hasChildren);
+    const isCollapsed = useAuiState((s) => s.span.isCollapsed);
+    const aui = useAui();
+    if (!hasChildren)
+        return null;
+    return (_jsx(Primitive.button, { type: "button", ...props, ref: ref, "data-collapsed": isCollapsed, onClick: (e) => {
+            e.stopPropagation();
+            aui.span().toggleCollapse();
+            props.onClick?.(e);
+        } }));
+});
+SpanPrimitiveCollapseToggle.displayName = "SpanPrimitive.CollapseToggle";
+//# sourceMappingURL=SpanCollapseToggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanCollapseToggle.js","sourceRoot":"","sources":["../../../src/primitives/span/SpanCollapseToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,GACX,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAO1D,MAAM,CAAC,MAAM,2BAA2B,GAAG,UAAU,CAGnD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC3D,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC3D,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,IAAI,CAAC,WAAW;QAAE,OAAO,IAAI,CAAC;IAE9B,OAAO,CACL,KAAC,SAAS,CAAC,MAAM,IACf,IAAI,EAAC,QAAQ,KACT,KAAK,EACT,GAAG,EAAE,GAAG,oBACQ,WAAW,EAC3B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,GAAG,CAAC,IAAI,EAAE,CAAC,cAAc,EAAE,CAAC;YAC5B,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACrB,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,2BAA2B,CAAC,WAAW,GAAG,8BAA8B,CAAC"}

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

@@ -0,0 +1,16 @@
+import { type ComponentPropsWithoutRef, type ComponentRef } from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+export declare namespace SpanPrimitiveIndent {
+    type Element = ComponentRef<typeof Primitive.div>;
+    type Props = ComponentPropsWithoutRef<typeof Primitive.div> & {
+        baseIndent?: number;
+        indentPerLevel?: number;
+    };
+}
+export declare const SpanPrimitiveIndent: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & {
+    baseIndent?: number;
+    indentPerLevel?: number;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SpanIndent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanIndent.d.ts","sourceRoot":"","sources":["../../../src/primitives/span/SpanIndent.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,YAAY,EAGlB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGtD,yBAAiB,mBAAmB,CAAC;IACnC,KAAY,OAAO,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC;IACzD,KAAY,KAAK,GAAG,wBAAwB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,GAAG;QACnE,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAED,eAAO,MAAM,mBAAmB;;;iBALf,MAAM;qBACF,MAAM;kDA0BzB,CAAC"}

package/dist/primitives/span/SpanIndent.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo, } from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAuiState } from "@assistant-ui/store";
+export const SpanPrimitiveIndent = forwardRef(({ baseIndent = 8, indentPerLevel = 12, style, ...props }, ref) => {
+    const depth = useAuiState((s) => s.span.depth);
+    const mergedStyle = useMemo(() => ({
+        ...style,
+        paddingLeft: baseIndent + depth * indentPerLevel,
+    }), [style, baseIndent, depth, indentPerLevel]);
+    return (_jsx(Primitive.div, { ...props, ref: ref, style: mergedStyle, "data-span-depth": depth }));
+});
+SpanPrimitiveIndent.displayName = "SpanPrimitive.Indent";
+//# sourceMappingURL=SpanIndent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanIndent.js","sourceRoot":"","sources":["../../../src/primitives/span/SpanIndent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,EACV,OAAO,GACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAUlD,MAAM,CAAC,MAAM,mBAAmB,GAAG,UAAU,CAG3C,CAAC,EAAE,UAAU,GAAG,CAAC,EAAE,cAAc,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAClE,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE/C,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC;QACL,GAAG,KAAK;QACR,WAAW,EAAE,UAAU,GAAG,KAAK,GAAG,cAAc;KACjD,CAAC,EACF,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,CAC3C,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,CAAC,GAAG,OACR,KAAK,EACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,WAAW,qBACD,KAAK,GACtB,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,WAAW,GAAG,sBAAsB,CAAC"}

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

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef, type ComponentRef } from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+export declare namespace SpanPrimitiveName {
+    type Element = ComponentRef<typeof Primitive.span>;
+    type Props = ComponentPropsWithoutRef<typeof Primitive.span>;
+}
+export declare const SpanPrimitiveName: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+    asChild?: boolean;
+}, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=SpanName.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanName.d.ts","sourceRoot":"","sources":["../../../src/primitives/span/SpanName.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGtD,yBAAiB,iBAAiB,CAAC;IACjC,KAAY,OAAO,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC;IAC1D,KAAY,KAAK,GAAG,wBAAwB,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC;CACrE;AAED,eAAO,MAAM,iBAAiB;;2DAW5B,CAAC"}

package/dist/primitives/span/SpanName.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAuiState } from "@assistant-ui/store";
+export const SpanPrimitiveName = forwardRef((props, ref) => {
+    const name = useAuiState((s) => s.span.name);
+    return (_jsx(Primitive.span, { ...props, ref: ref, children: props.children ?? name }));
+});
+SpanPrimitiveName.displayName = "SpanPrimitive.Name";
+//# sourceMappingURL=SpanName.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanName.js","sourceRoot":"","sources":["../../../src/primitives/span/SpanName.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,GACX,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAOlD,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAGzC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE7C,OAAO,CACL,KAAC,SAAS,CAAC,IAAI,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,YAChC,KAAK,CAAC,QAAQ,IAAI,IAAI,GACR,CAClB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,WAAW,GAAG,oBAAoB,CAAC"}

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

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef, type ComponentRef } from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+export declare namespace SpanPrimitiveRoot {
+    type Element = ComponentRef<typeof Primitive.div>;
+    type Props = ComponentPropsWithoutRef<typeof Primitive.div>;
+}
+export declare const SpanPrimitiveRoot: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SpanRoot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanRoot.d.ts","sourceRoot":"","sources":["../../../src/primitives/span/SpanRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGtD,yBAAiB,iBAAiB,CAAC;IACjC,KAAY,OAAO,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC;IACzD,KAAY,KAAK,GAAG,wBAAwB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC;CACpE;AAED,eAAO,MAAM,iBAAiB;;0DAqB5B,CAAC"}

package/dist/primitives/span/SpanRoot.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAuiState } from "@assistant-ui/store";
+export const SpanPrimitiveRoot = forwardRef((props, ref) => {
+    const spanId = useAuiState((s) => s.span.id);
+    const status = useAuiState((s) => s.span.status);
+    const type = useAuiState((s) => s.span.type);
+    const depth = useAuiState((s) => s.span.depth);
+    const isCollapsed = useAuiState((s) => s.span.isCollapsed);
+    return (_jsx(Primitive.div, { ...props, ref: ref, "data-span-id": spanId, "data-span-status": status, "data-span-type": type, "data-span-depth": depth, "data-collapsed": isCollapsed }));
+});
+SpanPrimitiveRoot.displayName = "SpanPrimitive.Root";
+//# sourceMappingURL=SpanRoot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanRoot.js","sourceRoot":"","sources":["../../../src/primitives/span/SpanRoot.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,GACX,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAOlD,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAGzC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjD,MAAM,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAE3D,OAAO,CACL,KAAC,SAAS,CAAC,GAAG,OACR,KAAK,EACT,GAAG,EAAE,GAAG,kBACM,MAAM,sBACF,MAAM,oBACR,IAAI,qBACH,KAAK,oBACN,WAAW,GAC3B,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,WAAW,GAAG,oBAAoB,CAAC"}

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

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef, type ComponentRef } from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+export declare namespace SpanPrimitiveStatusIndicator {
+    type Element = ComponentRef<typeof Primitive.span>;
+    type Props = ComponentPropsWithoutRef<typeof Primitive.span>;
+}
+export declare const SpanPrimitiveStatusIndicator: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+    asChild?: boolean;
+}, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=SpanStatusIndicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanStatusIndicator.d.ts","sourceRoot":"","sources":["../../../src/primitives/span/SpanStatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGtD,yBAAiB,4BAA4B,CAAC;IAC5C,KAAY,OAAO,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC;IAC1D,KAAY,KAAK,GAAG,wBAAwB,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC;CACrE;AAED,eAAO,MAAM,4BAA4B;;2DAOvC,CAAC"}

package/dist/primitives/span/SpanStatusIndicator.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAuiState } from "@assistant-ui/store";
+export const SpanPrimitiveStatusIndicator = forwardRef((props, ref) => {
+    const status = useAuiState((s) => s.span.status);
+    return _jsx(Primitive.span, { ...props, ref: ref, "data-span-status": status });
+});
+SpanPrimitiveStatusIndicator.displayName = "SpanPrimitive.StatusIndicator";
+//# sourceMappingURL=SpanStatusIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanStatusIndicator.js","sourceRoot":"","sources":["../../../src/primitives/span/SpanStatusIndicator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,GACX,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAOlD,MAAM,CAAC,MAAM,4BAA4B,GAAG,UAAU,CAGpD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAEjD,OAAO,KAAC,SAAS,CAAC,IAAI,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,sBAAoB,MAAM,GAAI,CAAC;AAC3E,CAAC,CAAC,CAAC;AAEH,4BAA4B,CAAC,WAAW,GAAG,+BAA+B,CAAC"}

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

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef, type ComponentRef } from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+export declare namespace SpanPrimitiveTypeBadge {
+    type Element = ComponentRef<typeof Primitive.span>;
+    type Props = ComponentPropsWithoutRef<typeof Primitive.span>;
+}
+export declare const SpanPrimitiveTypeBadge: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+    asChild?: boolean;
+}, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=SpanTypeBadge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanTypeBadge.d.ts","sourceRoot":"","sources":["../../../src/primitives/span/SpanTypeBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGtD,yBAAiB,sBAAsB,CAAC;IACtC,KAAY,OAAO,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC;IAC1D,KAAY,KAAK,GAAG,wBAAwB,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC;CACrE;AAED,eAAO,MAAM,sBAAsB;;2DAWjC,CAAC"}

package/dist/primitives/span/SpanTypeBadge.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAuiState } from "@assistant-ui/store";
+export const SpanPrimitiveTypeBadge = forwardRef((props, ref) => {
+    const type = useAuiState((s) => s.span.type);
+    return (_jsx(Primitive.span, { ...props, ref: ref, "data-span-type": type, children: props.children ?? type }));
+});
+SpanPrimitiveTypeBadge.displayName = "SpanPrimitive.TypeBadge";
+//# sourceMappingURL=SpanTypeBadge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanTypeBadge.js","sourceRoot":"","sources":["../../../src/primitives/span/SpanTypeBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,GACX,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAOlD,MAAM,CAAC,MAAM,sBAAsB,GAAG,UAAU,CAG9C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE7C,OAAO,CACL,KAAC,SAAS,CAAC,IAAI,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,oBAAkB,IAAI,YACtD,KAAK,CAAC,QAAQ,IAAI,IAAI,GACR,CAClB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,WAAW,GAAG,yBAAyB,CAAC"}

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

@@ -0,0 +1,8 @@
+export { SpanPrimitiveRoot as Root } from "./SpanRoot.js";
+export { SpanPrimitiveName as Name } from "./SpanName.js";
+export { SpanPrimitiveTypeBadge as TypeBadge } from "./SpanTypeBadge.js";
+export { SpanPrimitiveStatusIndicator as StatusIndicator } from "./SpanStatusIndicator.js";
+export { SpanPrimitiveCollapseToggle as CollapseToggle } from "./SpanCollapseToggle.js";
+export { SpanPrimitiveIndent as Indent } from "./SpanIndent.js";
+export { SpanPrimitiveChildren as Children } from "./SpanChildren.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/span/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,IAAI,IAAI,EAAE,sBAAmB;AACvD,OAAO,EAAE,iBAAiB,IAAI,IAAI,EAAE,sBAAmB;AACvD,OAAO,EAAE,sBAAsB,IAAI,SAAS,EAAE,2BAAwB;AACtE,OAAO,EAAE,4BAA4B,IAAI,eAAe,EAAE,iCAA8B;AACxF,OAAO,EAAE,2BAA2B,IAAI,cAAc,EAAE,gCAA6B;AACrF,OAAO,EAAE,mBAAmB,IAAI,MAAM,EAAE,wBAAqB;AAC7D,OAAO,EAAE,qBAAqB,IAAI,QAAQ,EAAE,0BAAuB"}

package/dist/primitives/span/index.js

@@ -0,0 +1,8 @@
+export { SpanPrimitiveRoot as Root } from "./SpanRoot.js";
+export { SpanPrimitiveName as Name } from "./SpanName.js";
+export { SpanPrimitiveTypeBadge as TypeBadge } from "./SpanTypeBadge.js";
+export { SpanPrimitiveStatusIndicator as StatusIndicator } from "./SpanStatusIndicator.js";
+export { SpanPrimitiveCollapseToggle as CollapseToggle } from "./SpanCollapseToggle.js";
+export { SpanPrimitiveIndent as Indent } from "./SpanIndent.js";
+export { SpanPrimitiveChildren as Children } from "./SpanChildren.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/primitives/span/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,IAAI,IAAI,EAAE,sBAAmB;AACvD,OAAO,EAAE,iBAAiB,IAAI,IAAI,EAAE,sBAAmB;AACvD,OAAO,EAAE,sBAAsB,IAAI,SAAS,EAAE,2BAAwB;AACtE,OAAO,EAAE,4BAA4B,IAAI,eAAe,EAAE,iCAA8B;AACxF,OAAO,EAAE,2BAA2B,IAAI,cAAc,EAAE,gCAA6B;AACrF,OAAO,EAAE,mBAAmB,IAAI,MAAM,EAAE,wBAAqB;AAC7D,OAAO,EAAE,qBAAqB,IAAI,QAAQ,EAAE,0BAAuB"}

package/dist/resources/SpanResource.d.ts

@@ -0,0 +1,18 @@
+import "../o11y-scope.js";
+import { type ClientOutput } from "@assistant-ui/store";
+export type SpanData = {
+    id: string;
+    parentSpanId: string | null;
+    name: string;
+    type: string;
+    status: "running" | "completed" | "failed" | "skipped";
+    startedAt: number;
+    endedAt: number | null;
+    latencyMs: number | null;
+};
+export declare const SpanResource: (props: {
+    spans: SpanData[];
+}) => import("@assistant-ui/tap").ResourceElement<ClientOutput<"span">, {
+    spans: SpanData[];
+}>;
+//# sourceMappingURL=SpanResource.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanResource.d.ts","sourceRoot":"","sources":["../../src/resources/SpanResource.tsx"],"names":[],"mappings":"AAAA,0BAAuB;AAGvB,OAAO,EAAmB,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGzE,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,CAAC;AA2HF,eAAO,MAAM,YAAY;WACF,QAAQ,EAAE;;WAAV,QAAQ,EAAE;EA+DhC,CAAC"}

package/dist/resources/SpanResource.js

@@ -0,0 +1,139 @@
+import "../o11y-scope.js";
+import { resource, tapMemo, tapState, withKey } from "@assistant-ui/tap";
+import { tapClientLookup } from "@assistant-ui/store";
+function calculateDepth(spanId, spanMap, cache) {
+    const cached = cache.get(spanId);
+    if (cached !== undefined)
+        return cached;
+    const span = spanMap.get(spanId);
+    if (!span || !span.parentSpanId) {
+        cache.set(spanId, 0);
+        return 0;
+    }
+    const depth = calculateDepth(span.parentSpanId, spanMap, cache) + 1;
+    cache.set(spanId, depth);
+    return depth;
+}
+function enrichSpans(rawSpans) {
+    const spanMap = new Map();
+    for (const span of rawSpans) {
+        spanMap.set(span.id, span);
+    }
+    const depthCache = new Map();
+    const childrenCount = new Map();
+    for (const span of rawSpans) {
+        if (span.parentSpanId) {
+            childrenCount.set(span.parentSpanId, (childrenCount.get(span.parentSpanId) ?? 0) + 1);
+        }
+    }
+    const allSpans = new Map();
+    let min = Infinity;
+    let max = -Infinity;
+    for (const span of rawSpans) {
+        const depth = calculateDepth(span.id, spanMap, depthCache);
+        const hasChildren = (childrenCount.get(span.id) ?? 0) > 0;
+        allSpans.set(span.id, { ...span, depth, hasChildren, isCollapsed: false });
+        if (span.startedAt < min)
+            min = span.startedAt;
+        const end = span.endedAt ?? Date.now();
+        if (end > max)
+            max = end;
+    }
+    if (min === Infinity)
+        min = Date.now();
+    if (max === -Infinity)
+        max = Date.now();
+    if (max === min)
+        max = min + 100;
+    return { allSpans, timeRange: { min, max } };
+}
+function buildFlatList(allSpans, collapsedIds) {
+    const children = new Map();
+    for (const span of allSpans.values()) {
+        const parent = span.parentSpanId ?? null;
+        let group = children.get(parent);
+        if (!group) {
+            group = [];
+            children.set(parent, group);
+        }
+        group.push(span);
+    }
+    for (const group of children.values()) {
+        group.sort((a, b) => a.startedAt - b.startedAt);
+    }
+    const result = [];
+    function dfs(parentId) {
+        const kids = children.get(parentId);
+        if (!kids)
+            return;
+        for (const span of kids) {
+            result.push({ ...span, isCollapsed: collapsedIds.has(span.id) });
+            if (!collapsedIds.has(span.id)) {
+                dfs(span.id);
+            }
+        }
+    }
+    dfs(null);
+    return result;
+}
+const SpanChildResource = resource(({ span, timeRange, onToggleCollapse, }) => {
+    const state = {
+        ...span,
+        children: [],
+        timeRange,
+    };
+    return {
+        getState: () => state,
+        child: () => {
+            throw new Error("child spans do not have children in flat mode");
+        },
+        toggleCollapse: () => {
+            onToggleCollapse(span.id);
+        },
+    };
+});
+export const SpanResource = resource(({ spans }) => {
+    const { allSpans, timeRange } = tapMemo(() => enrichSpans(spans), [spans]);
+    const [collapsedIds, setCollapsedIds] = tapState(() => new Set());
+    const visibleSpans = tapMemo(() => buildFlatList(allSpans, collapsedIds), [allSpans, collapsedIds]);
+    const toggleCollapse = (spanId) => {
+        setCollapsedIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(spanId)) {
+                next.delete(spanId);
+            }
+            else {
+                next.add(spanId);
+            }
+            return next;
+        });
+    };
+    const lookup = tapClientLookup(() => visibleSpans.map((span) => withKey(span.id, SpanChildResource({
+        span,
+        timeRange,
+        onToggleCollapse: toggleCollapse,
+    }))), [visibleSpans, timeRange, toggleCollapse]);
+    const rootState = {
+        id: "__root__",
+        parentSpanId: null,
+        name: "",
+        type: "root",
+        status: "completed",
+        startedAt: timeRange.min,
+        endedAt: timeRange.max,
+        latencyMs: timeRange.max - timeRange.min,
+        depth: -1,
+        hasChildren: lookup.state.length > 0,
+        isCollapsed: false,
+        children: lookup.state,
+        timeRange,
+    };
+    return {
+        getState: () => rootState,
+        child: lookup.get,
+        toggleCollapse: () => {
+            // Root span collapse is a no-op
+        },
+    };
+});
+//# sourceMappingURL=SpanResource.js.map

package/dist/resources/SpanResource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpanResource.js","sourceRoot":"","sources":["../../src/resources/SpanResource.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@assistant-ui/react-o11y",
+  "version": "0.0.1",
+  "description": "Observability primitives for @assistant-ui",
+  "keywords": [
+    "observability",
+    "tracing",
+    "spans",
+    "waterfall",
+    "assistant-ui",
+    "react"
+  ],
+  "author": "AgentbaseAI Inc.",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "aui-source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "aui-build"
+  },
+  "dependencies": {
+    "@assistant-ui/store": "workspace:*",
+    "@assistant-ui/tap": "workspace:*",
+    "@radix-ui/react-primitive": "^2.1.4"
+  },
+  "peerDependencies": {
+    "@types/react": "*",
+    "react": "^18 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@assistant-ui/x-buildutils": "workspace:*",
+    "@types/react": "^19.2.13",
+    "react": "^19.2.4"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": false
+  },
+  "homepage": "https://www.assistant-ui.com/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/assistant-ui/assistant-ui.git",
+    "directory": "packages/react-o11y"
+  },
+  "bugs": {
+    "url": "https://github.com/assistant-ui/assistant-ui/issues"
+  }
+}

package/src/context/SpanByIndexProvider.tsx

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

package/src/index.ts

@@ -0,0 +1,7 @@
+export * as SpanPrimitive from "./primitives/span";
+
+export { SpanResource } from "./resources/SpanResource";
+export type { SpanData } from "./resources/SpanResource";
+export type { SpanItemState, SpanState } from "./o11y-scope";
+
+export { SpanByIndexProvider } from "./context/SpanByIndexProvider";

package/src/o11y-scope.ts

@@ -0,0 +1,40 @@
+import "@assistant-ui/store";
+
+export type SpanItemState = {
+  id: string;
+  parentSpanId: string | null;
+  name: string;
+  type: string;
+  status: "running" | "completed" | "failed" | "skipped";
+  startedAt: number;
+  endedAt: number | null;
+  latencyMs: number | null;
+  depth: number;
+  hasChildren: boolean;
+  isCollapsed: boolean;
+};
+
+export type SpanState = SpanItemState & {
+  children: SpanItemState[];
+  timeRange: { min: number; max: number };
+};
+
+type SpanMethods = {
+  getState: () => SpanState;
+  child: (lookup: SpanMeta["query"]) => SpanMethods;
+  toggleCollapse: () => void;
+};
+
+type SpanMeta = {
+  source: "span";
+  query: { index: number } | { key: string };
+};
+
+declare module "@assistant-ui/store" {
+  interface ScopeRegistry {
+    span: {
+      methods: SpanMethods;
+      meta: SpanMeta;
+    };
+  }
+}

package/src/primitives/span/SpanChildren.tsx

@@ -0,0 +1,60 @@
+import { type ComponentType, type FC, memo, useMemo } from "react";
+import { useAuiState } from "@assistant-ui/store";
+import { SpanByIndexProvider } from "../../context/SpanByIndexProvider";
+
+export namespace SpanPrimitiveChildren {
+  export type Props = {
+    components: {
+      Span: ComponentType;
+    };
+  };
+}
+
+export namespace SpanPrimitiveChildByIndex {
+  export type Props = {
+    index: number;
+    components: SpanPrimitiveChildren.Props["components"];
+  };
+}
+
+export const SpanPrimitiveChildByIndex: FC<SpanPrimitiveChildByIndex.Props> =
+  memo(
+    ({ index, components }) => {
+      return (
+        <SpanByIndexProvider index={index}>
+          <components.Span />
+        </SpanByIndexProvider>
+      );
+    },
+    (prev, next) =>
+      prev.index === next.index &&
+      prev.components.Span === next.components.Span,
+  );
+
+SpanPrimitiveChildByIndex.displayName = "SpanPrimitive.ChildByIndex";
+
+const SpanPrimitiveChildrenImpl: FC<SpanPrimitiveChildren.Props> = ({
+  components,
+}) => {
+  const childrenLength = useAuiState((s) => s.span.children.length);
+
+  const childElements = useMemo(() => {
+    if (childrenLength === 0) return null;
+    return Array.from({ length: childrenLength }, (_, index) => (
+      <SpanPrimitiveChildByIndex
+        key={index}
+        index={index}
+        components={components}
+      />
+    ));
+  }, [childrenLength, components]);
+
+  return childElements;
+};
+
+export const SpanPrimitiveChildren: FC<SpanPrimitiveChildren.Props> = memo(
+  SpanPrimitiveChildrenImpl,
+  (prev, next) => prev.components.Span === next.components.Span,
+);
+
+SpanPrimitiveChildren.displayName = "SpanPrimitive.Children";

package/src/primitives/span/SpanCollapseToggle.tsx

@@ -0,0 +1,39 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export namespace SpanPrimitiveCollapseToggle {
+  export type Element = ComponentRef<typeof Primitive.button>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.button>;
+}
+
+export const SpanPrimitiveCollapseToggle = forwardRef<
+  SpanPrimitiveCollapseToggle.Element,
+  SpanPrimitiveCollapseToggle.Props
+>((props, ref) => {
+  const hasChildren = useAuiState((s) => s.span.hasChildren);
+  const isCollapsed = useAuiState((s) => s.span.isCollapsed);
+  const aui = useAui();
+
+  if (!hasChildren) return null;
+
+  return (
+    <Primitive.button
+      type="button"
+      {...props}
+      ref={ref}
+      data-collapsed={isCollapsed}
+      onClick={(e) => {
+        e.stopPropagation();
+        aui.span().toggleCollapse();
+        props.onClick?.(e);
+      }}
+    />
+  );
+});
+
+SpanPrimitiveCollapseToggle.displayName = "SpanPrimitive.CollapseToggle";

package/src/primitives/span/SpanIndent.tsx

@@ -0,0 +1,42 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+  useMemo,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAuiState } from "@assistant-ui/store";
+
+export namespace SpanPrimitiveIndent {
+  export type Element = ComponentRef<typeof Primitive.div>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.div> & {
+    baseIndent?: number;
+    indentPerLevel?: number;
+  };
+}
+
+export const SpanPrimitiveIndent = forwardRef<
+  SpanPrimitiveIndent.Element,
+  SpanPrimitiveIndent.Props
+>(({ baseIndent = 8, indentPerLevel = 12, style, ...props }, ref) => {
+  const depth = useAuiState((s) => s.span.depth);
+
+  const mergedStyle = useMemo(
+    () => ({
+      ...style,
+      paddingLeft: baseIndent + depth * indentPerLevel,
+    }),
+    [style, baseIndent, depth, indentPerLevel],
+  );
+
+  return (
+    <Primitive.div
+      {...props}
+      ref={ref}
+      style={mergedStyle}
+      data-span-depth={depth}
+    />
+  );
+});
+
+SpanPrimitiveIndent.displayName = "SpanPrimitive.Indent";

package/src/primitives/span/SpanName.tsx

@@ -0,0 +1,27 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAuiState } from "@assistant-ui/store";
+
+export namespace SpanPrimitiveName {
+  export type Element = ComponentRef<typeof Primitive.span>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.span>;
+}
+
+export const SpanPrimitiveName = forwardRef<
+  SpanPrimitiveName.Element,
+  SpanPrimitiveName.Props
+>((props, ref) => {
+  const name = useAuiState((s) => s.span.name);
+
+  return (
+    <Primitive.span {...props} ref={ref}>
+      {props.children ?? name}
+    </Primitive.span>
+  );
+});
+
+SpanPrimitiveName.displayName = "SpanPrimitive.Name";

package/src/primitives/span/SpanRoot.tsx

@@ -0,0 +1,37 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAuiState } from "@assistant-ui/store";
+
+export namespace SpanPrimitiveRoot {
+  export type Element = ComponentRef<typeof Primitive.div>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.div>;
+}
+
+export const SpanPrimitiveRoot = forwardRef<
+  SpanPrimitiveRoot.Element,
+  SpanPrimitiveRoot.Props
+>((props, ref) => {
+  const spanId = useAuiState((s) => s.span.id);
+  const status = useAuiState((s) => s.span.status);
+  const type = useAuiState((s) => s.span.type);
+  const depth = useAuiState((s) => s.span.depth);
+  const isCollapsed = useAuiState((s) => s.span.isCollapsed);
+
+  return (
+    <Primitive.div
+      {...props}
+      ref={ref}
+      data-span-id={spanId}
+      data-span-status={status}
+      data-span-type={type}
+      data-span-depth={depth}
+      data-collapsed={isCollapsed}
+    />
+  );
+});
+
+SpanPrimitiveRoot.displayName = "SpanPrimitive.Root";

package/src/primitives/span/SpanStatusIndicator.tsx

@@ -0,0 +1,23 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAuiState } from "@assistant-ui/store";
+
+export namespace SpanPrimitiveStatusIndicator {
+  export type Element = ComponentRef<typeof Primitive.span>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.span>;
+}
+
+export const SpanPrimitiveStatusIndicator = forwardRef<
+  SpanPrimitiveStatusIndicator.Element,
+  SpanPrimitiveStatusIndicator.Props
+>((props, ref) => {
+  const status = useAuiState((s) => s.span.status);
+
+  return <Primitive.span {...props} ref={ref} data-span-status={status} />;
+});
+
+SpanPrimitiveStatusIndicator.displayName = "SpanPrimitive.StatusIndicator";

package/src/primitives/span/SpanTypeBadge.tsx

@@ -0,0 +1,27 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAuiState } from "@assistant-ui/store";
+
+export namespace SpanPrimitiveTypeBadge {
+  export type Element = ComponentRef<typeof Primitive.span>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.span>;
+}
+
+export const SpanPrimitiveTypeBadge = forwardRef<
+  SpanPrimitiveTypeBadge.Element,
+  SpanPrimitiveTypeBadge.Props
+>((props, ref) => {
+  const type = useAuiState((s) => s.span.type);
+
+  return (
+    <Primitive.span {...props} ref={ref} data-span-type={type}>
+      {props.children ?? type}
+    </Primitive.span>
+  );
+});
+
+SpanPrimitiveTypeBadge.displayName = "SpanPrimitive.TypeBadge";

package/src/primitives/span/index.ts

@@ -0,0 +1,7 @@
+export { SpanPrimitiveRoot as Root } from "./SpanRoot";
+export { SpanPrimitiveName as Name } from "./SpanName";
+export { SpanPrimitiveTypeBadge as TypeBadge } from "./SpanTypeBadge";
+export { SpanPrimitiveStatusIndicator as StatusIndicator } from "./SpanStatusIndicator";
+export { SpanPrimitiveCollapseToggle as CollapseToggle } from "./SpanCollapseToggle";
+export { SpanPrimitiveIndent as Indent } from "./SpanIndent";
+export { SpanPrimitiveChildren as Children } from "./SpanChildren";

package/src/resources/SpanResource.tsx

@@ -0,0 +1,203 @@
+import "../o11y-scope";
+
+import { resource, tapMemo, tapState, withKey } from "@assistant-ui/tap";
+import { tapClientLookup, type ClientOutput } from "@assistant-ui/store";
+import type { SpanItemState, SpanState } from "../o11y-scope";
+
+export type SpanData = {
+  id: string;
+  parentSpanId: string | null;
+  name: string;
+  type: string;
+  status: "running" | "completed" | "failed" | "skipped";
+  startedAt: number;
+  endedAt: number | null;
+  latencyMs: number | null;
+};
+
+function calculateDepth(
+  spanId: string,
+  spanMap: Map<string, SpanData>,
+  cache: Map<string, number>,
+): number {
+  const cached = cache.get(spanId);
+  if (cached !== undefined) return cached;
+
+  const span = spanMap.get(spanId);
+  if (!span || !span.parentSpanId) {
+    cache.set(spanId, 0);
+    return 0;
+  }
+
+  const depth = calculateDepth(span.parentSpanId, spanMap, cache) + 1;
+  cache.set(spanId, depth);
+  return depth;
+}
+
+function enrichSpans(rawSpans: SpanData[]): {
+  allSpans: Map<string, SpanItemState>;
+  timeRange: { min: number; max: number };
+} {
+  const spanMap = new Map<string, SpanData>();
+  for (const span of rawSpans) {
+    spanMap.set(span.id, span);
+  }
+
+  const depthCache = new Map<string, number>();
+  const childrenCount = new Map<string, number>();
+  for (const span of rawSpans) {
+    if (span.parentSpanId) {
+      childrenCount.set(
+        span.parentSpanId,
+        (childrenCount.get(span.parentSpanId) ?? 0) + 1,
+      );
+    }
+  }
+
+  const allSpans = new Map<string, SpanItemState>();
+  let min = Infinity;
+  let max = -Infinity;
+
+  for (const span of rawSpans) {
+    const depth = calculateDepth(span.id, spanMap, depthCache);
+    const hasChildren = (childrenCount.get(span.id) ?? 0) > 0;
+    allSpans.set(span.id, { ...span, depth, hasChildren, isCollapsed: false });
+
+    if (span.startedAt < min) min = span.startedAt;
+    const end = span.endedAt ?? Date.now();
+    if (end > max) max = end;
+  }
+
+  if (min === Infinity) min = Date.now();
+  if (max === -Infinity) max = Date.now();
+  if (max === min) max = min + 100;
+
+  return { allSpans, timeRange: { min, max } };
+}
+
+function buildFlatList(
+  allSpans: Map<string, SpanItemState>,
+  collapsedIds: Set<string>,
+): SpanItemState[] {
+  const children = new Map<string | null, SpanItemState[]>();
+  for (const span of allSpans.values()) {
+    const parent = span.parentSpanId ?? null;
+    let group = children.get(parent);
+    if (!group) {
+      group = [];
+      children.set(parent, group);
+    }
+    group.push(span);
+  }
+
+  for (const group of children.values()) {
+    group.sort((a, b) => a.startedAt - b.startedAt);
+  }
+
+  const result: SpanItemState[] = [];
+  function dfs(parentId: string | null) {
+    const kids = children.get(parentId);
+    if (!kids) return;
+    for (const span of kids) {
+      result.push({ ...span, isCollapsed: collapsedIds.has(span.id) });
+      if (!collapsedIds.has(span.id)) {
+        dfs(span.id);
+      }
+    }
+  }
+  dfs(null);
+  return result;
+}
+
+const SpanChildResource = resource(
+  ({
+    span,
+    timeRange,
+    onToggleCollapse,
+  }: {
+    span: SpanItemState;
+    timeRange: { min: number; max: number };
+    onToggleCollapse: (spanId: string) => void;
+  }): ClientOutput<"span"> => {
+    const state: SpanState = {
+      ...span,
+      children: [],
+      timeRange,
+    };
+    return {
+      getState: () => state,
+      child: () => {
+        throw new Error("child spans do not have children in flat mode");
+      },
+      toggleCollapse: () => {
+        onToggleCollapse(span.id);
+      },
+    };
+  },
+);
+
+export const SpanResource = resource(
+  ({ spans }: { spans: SpanData[] }): ClientOutput<"span"> => {
+    const { allSpans, timeRange } = tapMemo(() => enrichSpans(spans), [spans]);
+
+    const [collapsedIds, setCollapsedIds] = tapState<Set<string>>(
+      () => new Set(),
+    );
+
+    const visibleSpans = tapMemo(
+      () => buildFlatList(allSpans, collapsedIds),
+      [allSpans, collapsedIds],
+    );
+
+    const toggleCollapse = (spanId: string) => {
+      setCollapsedIds((prev) => {
+        const next = new Set(prev);
+        if (next.has(spanId)) {
+          next.delete(spanId);
+        } else {
+          next.add(spanId);
+        }
+        return next;
+      });
+    };
+
+    const lookup = tapClientLookup(
+      () =>
+        visibleSpans.map((span) =>
+          withKey(
+            span.id,
+            SpanChildResource({
+              span,
+              timeRange,
+              onToggleCollapse: toggleCollapse,
+            }),
+          ),
+        ),
+      [visibleSpans, timeRange, toggleCollapse],
+    );
+
+    const rootState: SpanState = {
+      id: "__root__",
+      parentSpanId: null,
+      name: "",
+      type: "root",
+      status: "completed",
+      startedAt: timeRange.min,
+      endedAt: timeRange.max,
+      latencyMs: timeRange.max - timeRange.min,
+      depth: -1,
+      hasChildren: lookup.state.length > 0,
+      isCollapsed: false,
+      children: lookup.state,
+      timeRange,
+    };
+
+    return {
+      getState: () => rootState,
+      child: lookup.get,
+      toggleCollapse: () => {
+        // Root span collapse is a no-op
+      },
+    };
+  },
+);