effect-start 0.31.0 → 0.32.0

package/src/studio/StudioStore.ts

@@ -114,6 +114,8 @@ export interface StudioMetricSnapshot {
 export type StudioEvent =
   | { readonly _tag: "SpanStart"; readonly span: StudioSpan }
   | { readonly _tag: "SpanEnd"; readonly span: StudioSpan }
+  | { readonly _tag: "TraceStart"; readonly traceId: bigint }
+  | { readonly _tag: "TraceEnd"; readonly traceId: bigint }
   | { readonly _tag: "Log"; readonly log: StudioLog }
   | { readonly _tag: "Error"; readonly error: StudioError }
   | { readonly _tag: "MetricsSnapshot"; readonly metrics: Array<StudioMetricSnapshot> }
@@ -327,179 +329,221 @@ function deserializeError(row: ErrorRow): StudioError {
   }
 }
 
-export function insertSpan(sql: SqlClient.SqlClient, span: StudioSpan) {
-  return sql`INSERT INTO Span ${sql({
-    spanId: span.spanId,
-    traceId: span.traceId,
-    fiberId: span.fiberId ?? null,
-    name: span.name,
-    kind: span.kind,
-    parentSpanId: span.parentSpanId ?? null,
-    startTime: span.startTime.toString(),
-    endTime: span.endTime?.toString() ?? null,
-    durationMs: span.durationMs ?? null,
-    status: span.status,
-    attributes: JSON.stringify(span.attributes),
-    events: JSON.stringify(serializeBigint(span.events)),
-  })}`
-}
-
-export function updateSpan(sql: SqlClient.SqlClient, span: StudioSpan) {
-  return sql`UPDATE Span SET
-    endTime = ${span.endTime?.toString() ?? null},
-    durationMs = ${span.durationMs ?? null},
-    status = ${span.status},
-    attributes = ${JSON.stringify(span.attributes)},
-    events = ${JSON.stringify(serializeBigint(span.events))}
-    WHERE spanId = ${span.spanId}`
-}
-
-export function insertLog(sql: SqlClient.SqlClient, log: StudioLog) {
-  return sql`INSERT INTO Log ${sql({
-    id: log.id,
-    level: log.level,
-    message: log.message,
-    fiberId: log.fiberId,
-    cause: log.cause ?? null,
-    spans: JSON.stringify(log.spans),
-    annotations: JSON.stringify(log.annotations),
-  })}`
-}
-
-export function insertError(sql: SqlClient.SqlClient, error: StudioError) {
-  return sql`INSERT INTO Error ${sql({
-    id: error.id,
-    fiberId: error.fiberId,
-    interrupted: error.interrupted ? 1 : 0,
-    prettyPrint: error.prettyPrint,
-    details: JSON.stringify(error.details),
-  })}`
+const withSql = <A, E>(
+  f: (sql: SqlClient.SqlClient) => Effect.Effect<A, E>,
+): Effect.Effect<A, E, SqlClient.SqlClient> => Effect.flatMap(SqlClient.SqlClient, f)
+
+export function insertSpan(span: StudioSpan) {
+  return withSql((sql) =>
+    sql`INSERT INTO Span ${sql({
+      spanId: span.spanId,
+      traceId: span.traceId,
+      fiberId: span.fiberId ?? null,
+      name: span.name,
+      kind: span.kind,
+      parentSpanId: span.parentSpanId ?? null,
+      startTime: span.startTime.toString(),
+      endTime: span.endTime?.toString() ?? null,
+      durationMs: span.durationMs ?? null,
+      status: span.status,
+      attributes: JSON.stringify(span.attributes),
+      events: JSON.stringify(serializeBigint(span.events)),
+    })}`,
+  )
+}
+
+export function updateSpan(span: StudioSpan) {
+  return withSql(
+    (sql) => sql`UPDATE Span SET
+      endTime = ${span.endTime?.toString() ?? null},
+      durationMs = ${span.durationMs ?? null},
+      status = ${span.status},
+      attributes = ${JSON.stringify(span.attributes)},
+      events = ${JSON.stringify(serializeBigint(span.events))}
+      WHERE spanId = ${span.spanId}`,
+  )
+}
+
+export function insertLog(log: StudioLog) {
+  return withSql((sql) =>
+    sql`INSERT INTO Log ${sql({
+      id: log.id,
+      level: log.level,
+      message: log.message,
+      fiberId: log.fiberId,
+      cause: log.cause ?? null,
+      spans: JSON.stringify(log.spans),
+      annotations: JSON.stringify(log.annotations),
+    })}`,
+  )
+}
+
+export function insertError(error: StudioError) {
+  return withSql((sql) =>
+    sql`INSERT INTO Error ${sql({
+      id: error.id,
+      fiberId: error.fiberId,
+      interrupted: error.interrupted ? 1 : 0,
+      prettyPrint: error.prettyPrint,
+      details: JSON.stringify(error.details),
+    })}`,
+  )
 }
 
 export function upsertFiber(
-  sql: SqlClient.SqlClient,
   id: string,
   parentId: string | undefined,
   spanName: string | undefined,
   traceId: bigint | undefined,
   annotations: Record<string, unknown>,
 ) {
-  return sql`INSERT OR REPLACE INTO Fiber ${sql({
-    id,
-    parentId: parentId ?? null,
-    spanName: spanName ?? null,
-    traceId: traceId ?? null,
-    annotations: JSON.stringify(annotations),
-  })}`
-}
-
-export function evict(sql: SqlClient.SqlClient, table: string, capacity: number) {
-  return Effect.gen(function* () {
-    const [{ cnt }] = yield* sql<{ cnt: number }>`SELECT count(*) as cnt FROM ${sql(table)}`
-    if (cnt > capacity) {
-      const excess = cnt - capacity
-      yield* sql`DELETE FROM ${sql(table)} WHERE rowid IN (SELECT rowid FROM ${sql(table)} ORDER BY rowid LIMIT ${excess})`
-    }
-  })
+  return withSql((sql) =>
+    sql`INSERT OR REPLACE INTO Fiber ${sql({
+      id,
+      parentId: parentId ?? null,
+      spanName: spanName ?? null,
+      traceId: traceId ?? null,
+      annotations: JSON.stringify(annotations),
+    })}`,
+  )
 }
 
-export function runWrite(effect: Effect.Effect<unknown, SqlClient.SqlError>) {
+export function evict(table: string, capacity: number) {
+  return withSql((sql) =>
+    Effect.gen(function* () {
+      const [{ cnt }] = yield* sql<{ cnt: number }>`SELECT count(*) as cnt FROM ${sql(table)}`
+      if (cnt > capacity) {
+        const excess = cnt - capacity
+        yield* sql`DELETE FROM ${sql(table)} WHERE rowid IN (SELECT rowid FROM ${sql(table)} ORDER BY rowid LIMIT ${excess})`
+      }
+    }),
+  )
+}
+
+export function runWrite(effect: Effect.Effect<unknown, SqlClient.SqlError, SqlClient.SqlClient>) {
+  const sql = store.sql
+  if (!sql) return
   writeQueue = writeQueue
-    .then(() => Effect.runPromise(Effect.withTracerEnabled(effect, false)).then(() => undefined))
+    .then(() =>
+      Effect.runPromise(
+        Effect.withTracerEnabled(
+          Effect.provideService(effect, SqlClient.SqlClient, sql),
+          false,
+        ),
+      ).then(() => undefined),
+    )
     .catch(() => undefined)
 }
 
 let writeQueue = Promise.resolve<void>(undefined)
 
-const noTrace = <A, E>(effect: Effect.Effect<A, E>): Effect.Effect<A, E> =>
+const noTrace = <A, E, R>(effect: Effect.Effect<A, E, R>): Effect.Effect<A, E, R> =>
   Effect.withTracerEnabled(effect, false)
 
-export function allSpans(sql: SqlClient.SqlClient) {
+export function allSpans() {
   return noTrace(
-    Effect.map(sql<SpanRow>`SELECT * FROM Span ORDER BY rowid`, (rows) =>
-      rows.map(deserializeSpan),
+    withSql((sql) =>
+      Effect.map(sql<SpanRow>`SELECT * FROM Span ORDER BY rowid`, (rows) =>
+        rows.map(deserializeSpan),
+      ),
     ),
   )
 }
 
-export function allLogs(sql: SqlClient.SqlClient) {
+export function allLogs() {
   return noTrace(
-    Effect.map(sql<LogRow>`SELECT * FROM Log ORDER BY rowid`, (rows) => rows.map(deserializeLog)),
+    withSql((sql) =>
+      Effect.map(sql<LogRow>`SELECT * FROM Log ORDER BY rowid`, (rows) => rows.map(deserializeLog)),
+    ),
   )
 }
 
-export function allErrors(sql: SqlClient.SqlClient) {
+export function allErrors() {
   return noTrace(
-    Effect.map(sql<ErrorRow>`SELECT * FROM Error ORDER BY rowid`, (rows) =>
-      rows.map(deserializeError),
+    withSql((sql) =>
+      Effect.map(sql<ErrorRow>`SELECT * FROM Error ORDER BY rowid`, (rows) =>
+        rows.map(deserializeError),
+      ),
     ),
   )
 }
 
-export function spansByTraceId(sql: SqlClient.SqlClient, traceId: bigint) {
+export function spansByTraceId(traceId: bigint) {
   return noTrace(
-    Effect.map(sql<SpanRow>`SELECT * FROM Span WHERE traceId = ${traceId} ORDER BY rowid`, (rows) =>
-      rows.map(deserializeSpan),
+    withSql((sql) =>
+      Effect.map(sql<SpanRow>`SELECT * FROM Span WHERE traceId = ${traceId} ORDER BY rowid`, (rows) =>
+        rows.map(deserializeSpan),
+      ),
     ),
   )
 }
 
-export function spansByFiberId(sql: SqlClient.SqlClient, fiberId: string) {
+export function spansByFiberId(fiberId: string) {
   return noTrace(
-    Effect.map(sql<SpanRow>`SELECT * FROM Span WHERE fiberId = ${fiberId} ORDER BY rowid`, (rows) =>
-      rows.map(deserializeSpan),
+    withSql((sql) =>
+      Effect.map(sql<SpanRow>`SELECT * FROM Span WHERE fiberId = ${fiberId} ORDER BY rowid`, (rows) =>
+        rows.map(deserializeSpan),
+      ),
     ),
   )
 }
 
-export function logsByFiberId(sql: SqlClient.SqlClient, fiberId: string) {
+export function logsByFiberId(fiberId: string) {
   return noTrace(
-    Effect.map(sql<LogRow>`SELECT * FROM Log WHERE fiberId = ${fiberId} ORDER BY rowid`, (rows) =>
-      rows.map(deserializeLog),
+    withSql((sql) =>
+      Effect.map(sql<LogRow>`SELECT * FROM Log WHERE fiberId = ${fiberId} ORDER BY rowid`, (rows) =>
+        rows.map(deserializeLog),
+      ),
     ),
   )
 }
 
-export function getFiber(sql: SqlClient.SqlClient, fiberId: string) {
+export function getFiber(fiberId: string) {
   return noTrace(
-    Effect.map(sql<FiberRow>`SELECT * FROM Fiber WHERE id = ${fiberId}`, (rows) =>
-      rows.length > 0 ? rows[0] : undefined,
+    withSql((sql) =>
+      Effect.map(sql<FiberRow>`SELECT * FROM Fiber WHERE id = ${fiberId}`, (rows) =>
+        rows.length > 0 ? rows[0] : undefined,
+      ),
     ),
   )
 }
 
-export function getParentChain(sql: SqlClient.SqlClient, fiberId: string) {
+export function getParentChain(fiberId: string) {
   return noTrace(
-    Effect.gen(function* () {
-      const chain: Array<string> = []
-      const visited = new Set<string>()
-      let current = fiberId
-      while (true) {
-        const rows = yield* sql<FiberRow>`SELECT * FROM Fiber WHERE id = ${current}`
-        if (rows.length === 0 || !rows[0].parentId) break
-        const parentId = rows[0].parentId
-        if (visited.has(parentId)) break
-        chain.push(parentId)
-        visited.add(parentId)
-        current = parentId
-      }
-      return chain.reverse()
-    }),
+    withSql((sql) =>
+      Effect.gen(function* () {
+        const chain: Array<string> = []
+        const visited = new Set<string>()
+        let current = fiberId
+        while (true) {
+          const rows = yield* sql<FiberRow>`SELECT * FROM Fiber WHERE id = ${current}`
+          if (rows.length === 0 || !rows[0].parentId) break
+          const parentId = rows[0].parentId
+          if (visited.has(parentId)) break
+          chain.push(parentId)
+          visited.add(parentId)
+          current = parentId
+        }
+        return chain.reverse()
+      }),
+    ),
   )
 }
 
-export function getFiberContext(sql: SqlClient.SqlClient, fiberId: string) {
+export function getFiberContext(fiberId: string) {
   return noTrace(
-    Effect.map(
-      sql<FiberRow>`SELECT * FROM Fiber WHERE id = ${fiberId}`,
-      (rows): FiberContext | undefined =>
-        rows.length > 0
-          ? {
-              spanName: rows[0].spanName ?? undefined,
-              traceId: rows[0].traceId != null ? BigInt(rows[0].traceId) : undefined,
-              annotations: JSON.parse(rows[0].annotations),
-            }
-          : undefined,
+    withSql((sql) =>
+      Effect.map(
+        sql<FiberRow>`SELECT * FROM Fiber WHERE id = ${fiberId}`,
+        (rows): FiberContext | undefined =>
+          rows.length > 0
+            ? {
+                spanName: rows[0].spanName ?? undefined,
+                traceId: rows[0].traceId != null ? BigInt(rows[0].traceId) : undefined,
+                annotations: JSON.parse(rows[0].annotations),
+              }
+            : undefined,
+      ),
     ),
   )
 }

package/src/studio/StudioTracer.ts

@@ -62,11 +62,14 @@ const make = (store: StudioStore.StudioStoreShape): Tracer.Tracer =>
 
       StudioStore.runWrite(
         Effect.zipRight(
-          StudioStore.insertSpan(store.sql, studioSpan),
-          StudioStore.evict(store.sql, "Span", store.spanCapacity),
+          StudioStore.insertSpan(studioSpan),
+          StudioStore.evict("Span", store.spanCapacity),
         ),
       )
       publish(store, { _tag: "SpanStart", span: studioSpan })
+      if (parentSpanId === undefined) {
+        publish(store, { _tag: "TraceStart", traceId })
+      }
 
       const attrs = new Map<string, unknown>(Object.entries(attributes))
       const spanLinks = [...links]
@@ -97,17 +100,20 @@ const make = (store: StudioStore.StudioStoreShape): Tracer.Tracer =>
           studioSpan.endTime = endTime
           studioSpan.durationMs = Number(endTime - studioSpan.startTime) / 1_000_000
           studioSpan.status = Exit.isSuccess(exit) ? "ok" : "error"
-          StudioStore.runWrite(StudioStore.updateSpan(store.sql, studioSpan))
+          StudioStore.runWrite(StudioStore.updateSpan(studioSpan))
           publish(store, { _tag: "SpanEnd", span: studioSpan })
+          if (parentSpanId === undefined) {
+            publish(store, { _tag: "TraceEnd", traceId })
+          }
         },
         attribute(key, value) {
           attrs.set(key, value)
           ;(studioSpan.attributes as Record<string, unknown>)[key] = value
-          StudioStore.runWrite(StudioStore.updateSpan(store.sql, studioSpan))
+          StudioStore.runWrite(StudioStore.updateSpan(studioSpan))
         },
         event(name, startTime, attributes) {
           studioSpan.events.push({ name, startTime, attributes })
-          StudioStore.runWrite(StudioStore.updateSpan(store.sql, studioSpan))
+          StudioStore.runWrite(StudioStore.updateSpan(studioSpan))
         },
         addLinks(newLinks) {
           spanLinks.push(...newLinks)

package/src/studio/routes/errors/route.tsx

@@ -12,7 +12,7 @@ export default Route.get(
     const url = new URL(ctx.request.url)
     const search = url.searchParams.get("errorSearch") || ""
     const tag = url.searchParams.get("errorTag") || ""
-    const allErrors = yield* StudioStore.allErrors(StudioStore.store.sql)
+    const allErrors = yield* StudioStore.allErrors()
     const tagSet = new Set<string>()
     for (const error of allErrors) {
       for (const d of error.details) {
@@ -67,6 +67,8 @@ export default Route.get(
               <Errors.ErrorLine error={e} />
             ))}
           </div>
+
+          <div data-init={`@get('${prefix}/errors')`} />
         </form>
       </Shell.Shell>
     )

package/src/studio/routes/fiberDetail.tsx

@@ -12,8 +12,8 @@ export default Route.get(
     const fiberId = ctx.pathParams.id
     const fiberName = fiberId.startsWith("#") ? fiberId : `#${fiberId}`
 
-    const fiberLogs = yield* StudioStore.logsByFiberId(StudioStore.store.sql, fiberName)
-    const fiberSpans = yield* StudioStore.spansByFiberId(StudioStore.store.sql, fiberName)
+    const fiberLogs = yield* StudioStore.logsByFiberId(fiberName)
+    const fiberSpans = yield* StudioStore.spansByFiberId(fiberName)
 
     const fiberNum = parseInt(fiberName.slice(1), 10)
     const counter = StudioStore.fiberIdCounter()
@@ -30,8 +30,8 @@ export default Route.get(
       else if (fiberNum < counter) alive = "dead"
     }
 
-    const parents = yield* StudioStore.getParentChain(StudioStore.store.sql, fiberName)
-    const fiberContext = yield* StudioStore.getFiberContext(StudioStore.store.sql, fiberName)
+    const parents = yield* StudioStore.getParentChain(fiberName)
+    const fiberContext = yield* StudioStore.getFiberContext(fiberName)
 
     return (
       <Shell.Shell prefix={StudioStore.store.prefix} active="fibers">

package/src/studio/routes/fibers/route.tsx

@@ -8,8 +8,8 @@ import * as Shell from "../../ui/Shell.tsx"
 
 export default Route.get(
   Route.html(function* () {
-    const logs = yield* StudioStore.allLogs(StudioStore.store.sql)
-    const spans = yield* StudioStore.allSpans(StudioStore.store.sql)
+    const logs = yield* StudioStore.allLogs()
+    const spans = yield* StudioStore.allSpans()
     const fibers = Fibers.collectFibers(logs, spans)
     return (
       <Shell.Shell prefix={StudioStore.store.prefix} active="fibers">
@@ -28,8 +28,8 @@ export default Route.get(
       Stream.filter((e) => e._tag === "SpanStart" || e._tag === "SpanEnd" || e._tag === "Log"),
       Stream.mapEffect(() =>
         Effect.gen(function* () {
-          const logs = yield* StudioStore.allLogs(StudioStore.store.sql)
-          const spans = yield* StudioStore.allSpans(StudioStore.store.sql)
+          const logs = yield* StudioStore.allLogs()
+          const spans = yield* StudioStore.allSpans()
           const fibers = Fibers.collectFibers(logs, spans)
           const html = Html.renderToString(
             <Fibers.FiberList fibers={fibers} prefix={StudioStore.store.prefix} />,

package/src/studio/routes/logs/route.tsx

@@ -12,7 +12,7 @@ export default Route.get(
     const url = new URL(ctx.request.url)
     const level = url.searchParams.get("logLevel") || ""
     const search = url.searchParams.get("logSearch") || ""
-    let logs = yield* StudioStore.allLogs(StudioStore.store.sql)
+    let logs = yield* StudioStore.allLogs()
     if (level) logs = logs.filter((l) => l.level === level)
     if (search) {
       const lower = search.toLowerCase()
@@ -53,6 +53,8 @@ export default Route.get(
               <Logs.LogLine log={l} />
             ))}
           </div>
+
+          <div data-init={`@get('${prefix}/logs')`} />
         </form>
       </Shell.Shell>
     )

package/src/studio/routes/traceDetail.tsx

@@ -18,7 +18,7 @@ export default Route.get(
         </Shell.Shell>
       )
     }
-    const spans = yield* StudioStore.spansByTraceId(StudioStore.store.sql, traceId)
+    const spans = yield* StudioStore.spansByTraceId(traceId)
 
     return (
       <Shell.Shell prefix={StudioStore.store.prefix} active="traces">

package/src/studio/routes/traces/route.tsx

@@ -12,7 +12,7 @@ export default Route.get(
   Route.html(function* (ctx) {
     const url = new URL(ctx.request.url)
     const search = url.searchParams.get("traceSearch") || ""
-    const allSpans = yield* StudioStore.allSpans(StudioStore.store.sql)
+    const allSpans = yield* StudioStore.allSpans()
     const names = Array.from(new Set(allSpans.map((s) => s.name))).sort()
     let spans = allSpans
     if (search) {
@@ -52,14 +52,17 @@ export default Route.get(
   }),
   Route.sse(
     Stream.fromPubSub(StudioStore.store.events).pipe(
-      Stream.filter((e) => e._tag === "SpanStart" || e._tag === "SpanEnd"),
-      Stream.mapEffect(() =>
+      Stream.filter((e) => e._tag === "TraceEnd"),
+      Stream.mapEffect((e) =>
         Effect.gen(function* () {
-          const spans = yield* StudioStore.allSpans(StudioStore.store.sql)
-          const html = Html.renderToString(<Traces.TraceGroups spans={spans} />).replace(/\n/g, "")
+          const traceSpans = yield* StudioStore.spansByTraceId(e.traceId)
+          const traceHtml = Html.renderToString(
+            <Traces.TraceGroup id={e.traceId} spans={traceSpans} />,
+          )
+
           return {
             event: "datastar-patch-elements",
-            data: `selector #traces-container\nmode inner\nelements ${html}`,
+            data: `selector .tl-header\nmode after\nelements ${traceHtml}`,
           }
         }),
       ),

package/src/studio/ui/Traces.tsx

@@ -47,6 +47,20 @@ interface TreeSpan {
   ancestorHasNextSibling: Array<boolean>
 }
 
+function sortByStartTime(a: StudioStore.StudioSpan, b: StudioStore.StudioSpan): number {
+  if (a.startTime < b.startTime) return -1
+  if (a.startTime > b.startTime) return 1
+  return 0
+}
+
+function pickRootSpan(spans: Array<StudioStore.StudioSpan>): StudioStore.StudioSpan {
+  const spanIds = new Set(spans.map((span) => span.spanId))
+  return (
+    spans.find((span) => !span.parentSpanId || !spanIds.has(span.parentSpanId)) ??
+    spans.slice().sort(sortByStartTime)[0]
+  )
+}
+
 function buildSpanTree(spans: Array<StudioStore.StudioSpan>): Array<TreeSpan> {
   const byId = new Map<bigint, StudioStore.StudioSpan>()
   const childrenOf = new Map<bigint, Array<StudioStore.StudioSpan>>()
@@ -69,23 +83,31 @@ function buildSpanTree(spans: Array<StudioStore.StudioSpan>): Array<TreeSpan> {
     }
   }
 
-  const sortByStart = (a: StudioStore.StudioSpan, b: StudioStore.StudioSpan) =>
-    Number(a.startTime - b.startTime)
-
-  roots.sort(sortByStart)
+  roots.sort(sortByStartTime)
   for (const children of childrenOf.values()) {
-    children.sort(sortByStart)
+    children.sort(sortByStartTime)
   }
 
   const result: Array<TreeSpan> = []
+  const visited = new Set<bigint>()
 
   function walk(
     span: StudioStore.StudioSpan,
     depth: number,
     isLast: boolean,
     ancestors: Array<boolean>,
+    lineage: Set<bigint>,
   ) {
-    const children = childrenOf.get(span.spanId) ?? []
+    if (lineage.has(span.spanId) || visited.has(span.spanId)) return
+
+    const nextLineage = new Set(lineage)
+    nextLineage.add(span.spanId)
+
+    const children = (childrenOf.get(span.spanId) ?? []).filter(
+      (child) => !nextLineage.has(child.spanId) && !visited.has(child.spanId),
+    )
+
+    visited.add(span.spanId)
     result.push({
       span,
       depth,
@@ -94,12 +116,18 @@ function buildSpanTree(spans: Array<StudioStore.StudioSpan>): Array<TreeSpan> {
       ancestorHasNextSibling: [...ancestors],
     })
     for (let i = 0; i < children.length; i++) {
-      walk(children[i], depth + 1, i === children.length - 1, [...ancestors, !isLast])
+      walk(children[i], depth + 1, i === children.length - 1, [...ancestors, !isLast], nextLineage)
     }
   }
 
   for (let i = 0; i < roots.length; i++) {
-    walk(roots[i], 0, i === roots.length - 1, [])
+    walk(roots[i], 0, i === roots.length - 1, [], new Set())
+  }
+
+  const remaining = spans.filter((span) => !visited.has(span.spanId)).sort(sortByStartTime)
+
+  for (let i = 0; i < remaining.length; i++) {
+    walk(remaining[i], 0, i === remaining.length - 1, [], new Set())
   }
 
   return result
@@ -225,17 +253,17 @@ export function groupByTraceId(
   return groups
 }
 
-export function TraceGroup(options: { spans: Array<StudioStore.StudioSpan> }) {
+export function TraceGroup(options: { id?: bigint; spans: Array<StudioStore.StudioSpan> }) {
   if (options.spans.length === 0) return null
-  const root = options.spans.find((s) => !s.parentSpanId) ?? options.spans[0]
-  const traceId = root.traceId
+  const root = pickRootSpan(options.spans)
+  const traceId = options.id ?? root.traceId
   const totalMs = root.durationMs ?? 0
   const rootStart = root.startTime
   const hasError = options.spans.some((s) => s.status === "error")
   const status = hasError ? "error" : root.status
 
   return (
-    <details class="tl-row">
+    <details id={`trace-${traceId}`} class="tl-row">
       <summary class="tl-summary tl-cols">
         <span class="tl-cell tl-cell-status">
           <span
@@ -324,7 +352,7 @@ export function TraceDetail(options: { prefix: string; spans: Array<StudioStore.
   if (options.spans.length === 0) {
     return <div class="empty">Trace not found</div>
   }
-  const root = options.spans.find((s) => !s.parentSpanId) ?? options.spans[0]
+  const root = pickRootSpan(options.spans)
   const traceId = root.traceId
   const totalMs = root.durationMs ?? 0
   const rootStart = root.startTime