effect-start 0.31.0 → 0.33.0

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/layout.html

@@ -261,21 +261,12 @@
       }
       .tl-row {
         border-bottom: 1px solid #1e293b;
+        color: inherit;
+        text-decoration: none;
       }
-      .tl-row[open] {
+      .tl-row:hover {
         background: #111827;
       }
-      .tl-summary {
-        cursor: pointer;
-        user-select: none;
-        list-style: none;
-      }
-      .tl-summary::-webkit-details-marker {
-        display: none;
-      }
-      .tl-summary:hover {
-        background: #1e293b;
-      }
       .tl-cell {
         padding: 6px 8px;
         display: flex;

package/src/studio/routes/layout.tsx

@@ -1,4 +1,12 @@
+import * as Effect from "effect/Effect"
 import * as BunRoute from "../../bun/BunRoute.ts"
 import * as Route from "../../Route.ts"
+import * as StudioStore from "../StudioStore.ts"
 
-export default Route.use(BunRoute.htmlBundle(() => import("./layout.html")))
+export default Route.use(
+  Route.filter(function* () {
+    yield* Effect.annotateCurrentSpan(StudioStore.studioTraceAttribute, true)
+    return { context: {} }
+  }),
+  BunRoute.htmlBundle(() => import("./layout.html")),
+)

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 = StudioStore.filterOutStudioSpans(yield* StudioStore.allSpans())
     const names = Array.from(new Set(allSpans.map((s) => s.name))).sort()
     let spans = allSpans
     if (search) {
@@ -52,17 +52,24 @@ 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)
+          if (StudioStore.isStudioTrace(traceSpans)) {
+            return undefined
+          }
+          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}`,
           }
         }),
       ),
+      Stream.filter((event): event is { event: string; data: string } => event !== undefined),
     ),
   ),
 )

package/src/studio/ui/Errors.tsx

@@ -31,7 +31,7 @@ export function ErrorLine(options: { error: StudioStore.StudioError }) {
                 <span style="color:#64748b">tag </span>
                 <span
                   style="color:#fca5a5;text-decoration:underline;cursor:copy"
-                  data-on:click={`(e) => { e.signals.errorTag.value = '${t}'; e.actions.get(location.href, { contentType: 'form' }) }`}
+                  data-on:click={`(e) => { e.signals.errorTag = '${t}'; e.actions.get(location.href, { contentType: 'form' }) }`}
                 >
                   {t}
                 </span>

package/src/studio/ui/Fibers.tsx

@@ -1,6 +1,7 @@
 import * as Unique from "../../Unique.ts"
 import * as StudioStore from "../StudioStore.ts"
 import * as Logs from "./Logs.tsx"
+import * as PrettyValue from "./_PrettyValue.tsx"
 
 function formatDuration(ms: number | undefined): string {
   if (ms == null) return "..."
@@ -9,14 +10,20 @@ function formatDuration(ms: number | undefined): string {
   return `${(ms / 1000).toFixed(2)}s`
 }
 
-function KeyValue(options: { label: string; value: string | number | bigint | undefined | null }) {
+function KeyValue(options: { label: string; value: unknown }) {
   if (options.value == null) return null
   return (
-    <div style="display:flex;gap:8px;padding:4px 0;border-bottom:1px solid #1e293b;font-size:12px">
+    <div
+      style="display:flex;align-items:flex-start;gap:8px;padding:4px 0;border-bottom:1px solid #1e293b;font-size:12px"
+    >
       <span style="color:#64748b;min-width:120px">{options.label}</span>
-      <span style="color:#e2e8f0;font-family:monospace;word-break:break-all">
-        {String(options.value)}
-      </span>
+      <div style="flex:1;min-width:0">
+        <PrettyValue.PrettyValue
+          value={options.value}
+          style="color:#e2e8f0;font-family:monospace;word-break:break-all"
+          preStyle="color:#e2e8f0;font-family:monospace;word-break:break-all;white-space:pre-wrap;margin:0"
+        />
+      </div>
     </div>
   )
 }
@@ -276,10 +283,7 @@ export function FiberDetail(options: {
                   </div>
                 )}
                 {Object.entries(options.context.annotations).map(([k, v]) => (
-                  <KeyValue
-                    label={k}
-                    value={typeof v === "object" ? JSON.stringify(v) : String(v)}
-                  />
+                  <KeyValue label={k} value={v} />
                 ))}
               </div>
             </div>
@@ -310,7 +314,7 @@ export function FiberDetail(options: {
                   {Object.entries(s.attributes)
                     .filter(([k]) => k !== "code.stacktrace")
                     .map(([k, v]) => (
-                      <KeyValue label={k} value={String(v)} />
+                      <KeyValue label={k} value={v} />
                     ))}
                 </div>
               )

package/src/studio/ui/Logs.tsx

@@ -1,5 +1,6 @@
 import * as Unique from "../../Unique.ts"
 import * as StudioStore from "../StudioStore.ts"
+import * as PrettyValue from "./_PrettyValue.tsx"
 
 function levelColor(level: string): string {
   if (level === "DEBUG") return "#94a3b8"
@@ -25,26 +26,30 @@ export function LogLine(options: { log: StudioStore.StudioLog }) {
   return (
     <div
       id={`log-${options.log.id}`}
-      style="padding:3px 8px;border-bottom:1px solid #1f2937;font-family:monospace;font-size:12px;display:flex;align-items:baseline"
+      style="padding:6px 8px;border-bottom:1px solid #1f2937;font-family:monospace;font-size:12px;display:flex;align-items:flex-start;gap:8px"
     >
       <span style="color:#6b7280;white-space:nowrap">{time}</span>
       <span style={`color:${color};font-weight:600;width:56px;text-align:center;flex-shrink:0`}>
         {options.log.level}
       </span>
-      <span style="color:#e5e7eb;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis">
-        {options.log.message}
-      </span>
+      <div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:4px">
+        <PrettyValue.PreformattedText
+          text={options.log.message}
+          style="color:#e5e7eb;margin:0;white-space:pre-wrap;word-break:break-word;font:inherit"
+        />
+        {options.log.cause && (
+          <PrettyValue.PreformattedText
+            text={options.log.cause}
+            style="color:#ef4444;font-size:11px;margin:0;white-space:pre-wrap;word-break:break-word;font:inherit"
+          />
+        )}
+      </div>
       <a
         href={`${StudioStore.store.prefix}/fibers/${options.log.fiberId.replace("#", "")}`}
-        style="color:#6b7280;white-space:nowrap;margin-left:8px;text-decoration:none"
+        style="color:#6b7280;white-space:nowrap;text-decoration:none;flex-shrink:0"
       >
         {options.log.fiberId}
       </a>
-      {options.log.cause && (
-        <div style="color:#ef4444;font-size:11px;padding:2px 0 0 0;white-space:pre-wrap;width:100%">
-          {options.log.cause}
-        </div>
-      )}
     </div>
   )
 }

package/src/studio/ui/Traces.tsx

@@ -1,4 +1,6 @@
+import * as Pretty from "../_Pretty.ts"
 import * as StudioStore from "../StudioStore.ts"
+import * as PrettyValue from "./_PrettyValue.tsx"
 
 function formatDuration(ms: number | undefined): string {
   if (ms == null) return "..."
@@ -13,14 +15,20 @@ function statusColor(status: string): string {
   return "#eab308"
 }
 
-function KeyValue(options: { label: string; value: string | number | bigint | undefined | null }) {
+function KeyValue(options: { label: string; value: unknown }) {
   if (options.value == null) return null
   return (
-    <div style="display:flex;gap:8px;padding:4px 0;border-bottom:1px solid #1e293b;font-size:12px">
+    <div
+      style="display:flex;align-items:flex-start;gap:8px;padding:4px 0;border-bottom:1px solid #1e293b;font-size:12px"
+    >
       <span style="color:#64748b;min-width:120px">{options.label}</span>
-      <span style="color:#e2e8f0;font-family:monospace;word-break:break-all">
-        {String(options.value)}
-      </span>
+      <div style="flex:1;min-width:0">
+        <PrettyValue.PrettyValue
+          value={options.value}
+          style="color:#e2e8f0;font-family:monospace;word-break:break-all"
+          preStyle="color:#e2e8f0;font-family:monospace;word-break:break-all;white-space:pre-wrap;margin:0"
+        />
+      </div>
     </div>
   )
 }
@@ -47,6 +55,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 +91,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 +124,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,73 +261,30 @@ 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">
-      <summary class="tl-summary tl-cols">
-        <span class="tl-cell tl-cell-status">
-          <span
-            style={`width:8px;height:8px;border-radius:50%;background:${statusColor(status)};display:block`}
-          />
-        </span>
-        <span class="tl-cell tl-cell-name">{root.name}</span>
-        <span class="tl-cell tl-cell-spans">{options.spans.length}</span>
-        <span class="tl-cell tl-cell-dur">{formatDuration(totalMs)}</span>
-        <span class="tl-cell tl-cell-id">{String(traceId).slice(0, 12)}</span>
-      </summary>
-      <div class="tl-body">
-        <div style="display:flex;gap:12px;align-items:center;margin-bottom:8px">
-          <a
-            href={`${StudioStore.store.prefix}/traces/${traceId}`}
-            style="color:#38bdf8;font-size:12px;text-decoration:none"
-          >
-            Full trace view
-          </a>
-          <StatusBadge status={status} />
-          <span style="color:#64748b;font-size:11px">
-            {options.spans.length} span{options.spans.length !== 1 ? "s" : ""}
-          </span>
-          <span style="color:#64748b;font-size:11px;font-family:monospace">
-            {formatDuration(totalMs)}
-          </span>
-          <span style="color:#475569;font-size:10px;font-family:monospace">{traceId}</span>
-        </div>
-        {options.spans.map((s) => {
-          const offsetMs = Number(s.startTime - rootStart) / 1_000_000
-          const leftPct = totalMs > 0 ? Math.min(100, (offsetMs / totalMs) * 100) : 0
-          const widthPct =
-            totalMs > 0
-              ? Math.max(0.5, Math.min(100 - leftPct, ((s.durationMs ?? 0) / totalMs) * 100))
-              : 100
-          return (
-            <div style="display:flex;align-items:center;gap:8px;padding:2px 0;font-size:11px;font-family:monospace">
-              <span style={`color:${statusColor(s.status)};min-width:10px`}>
-                {s.parentSpanId ? "  " : ""}
-              </span>
-              <span style="color:#d1d5db;min-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
-                {s.name}
-              </span>
-              <div style="flex:1;height:10px;background:#1f2937;border-radius:2px;position:relative;overflow:hidden">
-                <div
-                  style={`position:absolute;height:100%;border-radius:2px;background:${statusColor(s.status)};left:${leftPct}%;width:${widthPct}%`}
-                />
-              </div>
-              <span style="color:#9ca3af;min-width:60px;text-align:right">
-                {formatDuration(s.durationMs)}
-              </span>
-            </div>
-          )
-        })}
-      </div>
-    </details>
+    <a
+      id={`trace-${traceId}`}
+      class="tl-row tl-cols"
+      href={`${StudioStore.store.prefix}/traces/${traceId}`}
+    >
+      <span class="tl-cell tl-cell-status">
+        <span
+          style={`width:8px;height:8px;border-radius:50%;background:${statusColor(status)};display:block`}
+        />
+      </span>
+      <span class="tl-cell tl-cell-name">{root.name}</span>
+      <span class="tl-cell tl-cell-spans">{options.spans.length}</span>
+      <span class="tl-cell tl-cell-dur">{formatDuration(totalMs)}</span>
+      <span class="tl-cell tl-cell-id">{String(traceId).slice(0, 12)}</span>
+    </a>
   )
 }
 
@@ -324,7 +317,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
@@ -375,7 +368,7 @@ export function TraceDetail(options: { prefix: string; spans: Array<StudioStore.
           const customAttrs = Object.entries(s.attributes).filter(([k]) => k !== "code.stacktrace")
 
           return (
-            <details class="span-panel" style="margin-bottom:4px">
+            <details class="span-panel" style="margin-bottom:4px" open>
               <summary class="span-panel-header">
                 <span
                   style={`width:8px;height:8px;border-radius:50%;background:${statusColor(s.status)};flex-shrink:0`}
@@ -394,16 +387,23 @@ export function TraceDetail(options: { prefix: string; spans: Array<StudioStore.
                 {s.parentSpanId && <KeyValue label="Parent" value={s.parentSpanId} />}
                 {stacktrace && <KeyValue label="Source" value={stacktrace} />}
                 {customAttrs.map(([k, v]) => (
-                  <KeyValue label={k} value={String(v)} />
+                  <KeyValue label={k} value={v} />
                 ))}
                 {s.events.length > 0 && (
                   <div style="margin-top:4px">
                     <span style="color:#64748b;font-size:11px">Events:</span>
                     {s.events.map((ev) => (
-                      <div style="padding:2px 0;font-size:11px;color:#94a3b8;font-family:monospace">
-                        {ev.name}
+                      <div
+                        style="display:flex;align-items:flex-start;gap:8px;padding:4px 0;font-size:11px;color:#94a3b8;font-family:monospace"
+                      >
+                        <span>{ev.name}</span>
                         {ev.attributes && (
-                          <span style="color:#64748b"> {JSON.stringify(ev.attributes)}</span>
+                          <div style="flex:1;min-width:0">
+                            <PrettyValue.PreformattedText
+                              text={Pretty.prettyPrintJson(ev.attributes)}
+                              style="color:#64748b;white-space:pre-wrap;word-break:break-all;margin:0;font:inherit"
+                            />
+                          </div>
                         )}
                       </div>
                     ))}

package/src/studio/ui/_PrettyValue.tsx

@@ -0,0 +1,34 @@
+import * as Pretty from "../_Pretty.ts"
+
+const htmlEscapeMap: Record<string, string> = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;",
+}
+
+function escapeHtml(text: string): string {
+  return text.replace(/[&<>"']/g, (char) => htmlEscapeMap[char]!)
+}
+
+function toPreHtml(text: string): string {
+  return escapeHtml(text).replaceAll("\n", "&#10;")
+}
+
+export function PreformattedText(options: { text: string; style?: string }) {
+  return <pre style={options.style} dangerouslySetInnerHTML={{ __html: toPreHtml(options.text) }} />
+}
+
+export function PrettyValue(options: { value: unknown; style?: string; preStyle?: string }) {
+  if (options.value == null) return null
+  if (Pretty.isStructuredValue(options.value)) {
+    return (
+      <PreformattedText
+        text={Pretty.prettyPrintJson(options.value)}
+        style={options.preStyle}
+      />
+    )
+  }
+  return <span style={options.style}>{String(options.value)}</span>
+}