+ {/* Top-level non-span events (orphans) */}
{orphans.map((e, i) => (
-
+
))}
- {/* Span tree */}
+ {/* Span tree roots */}
{roots.map((node) => (
))}
@@ -50,27 +50,44 @@ export function EventList({ events }: EventListProps) {
);
}
+/**
+ * Recursive component to render a span and its children.
+ * This component itself renders *nothing*, it just maps nodes to EventRows.
+ */
function SpanNodeView({ node, depth }: { node: SpanNode; depth: number }) {
return (
-
-
- {/* events attached to this span */}
+ <>
+ {/* Render the span row itself at the current depth */}
+
+
+ {/* Render attached events, indented one level deeper */}
{node.events.map((e, i) => (
-
-
-
+
))}
- {/* child spans */}
+
+ {/* Render children, indented one level deeper */}
{node.children.map((child) => (
))}
-
+
);
}
-function EventRow({ event }: { event: TracerEvent }) {
+/**
+ * Renders a single event row, with indentation.
+ */
+function EventRow({ event, depth }: { event: AppTracerEvent; depth: number }) {
+ const indentStyle: CSSProperties = {
+ // Apply the margin to the row itself
+ marginLeft: depth * 24, // 24px per level
+ // Border to visualize the hierarchy
+ borderLeft: depth > 0 ? "2px solid rgba(148, 163, 184, 0.1)" : "none",
+ paddingLeft: depth > 0 ? "1.1rem" : "1.2rem",
+ };
+
return (
-
+
+ {/* Metadata Column */}
{event.type}
@@ -80,30 +97,33 @@ function EventRow({ event }: { event: TracerEvent }) {
marginTop: "0.45rem",
fontSize: "0.78rem",
color: "rgba(148,163,184,0.85)",
- }}
- >
-
{event.provider ?? "unknown"}
-
{formatTimestamp(event.ts)}
-
-
{/* provider/model badge */}
{event.provider ? (
- ) : null}
+ ) : (
+
+ unknown
+
+ )}
+ {/* Timestamp */}
{formatTimestamp(event.ts)}
+ {/* End Metadata Column --- */}
+
+ {/* Body Column */}
- {event.model ?? event.ctx.spanId}
+ {/* Show operation for spans, model for others, fallback to spanId */}
+ {event.type === "span"
+ ? event.operation
+ : (event.model ?? event.ctx.spanId)}
@@ -121,11 +144,12 @@ function EventRow({ event }: { event: TracerEvent }) {
+ {/* End Body Column */}
);
}
-function EventBody({ event }: { event: TracerEvent }) {
+function EventBody({ event }: { event: AppTracerEvent }) {
switch (event.type) {
case "message":
return (
@@ -169,8 +193,8 @@ function EventBody({ event }: { event: TracerEvent }) {
color: "#fcd34d",
}}
>
- {event.ok ? "Result" : "Error"} from
{event.tool} (
- {event.latencyMs} ms)
+ {event.ok ? "Result" : "Error"} from
{event.tool}
+ {event.latencyMs != null ? ` (${event.latencyMs} ms)` : ""}
+
+