effect-start 0.22.1 → 0.23.1

package/src/console/routes/metrics/route.tsx

@@ -0,0 +1,36 @@
+import * as Stream from "effect/Stream"
+import * as Route from "../../../Route.ts"
+import * as HyperHtml from "../../../hyper/HyperHtml.ts"
+import * as HyperRoute from "../../../hyper/HyperRoute.ts"
+import * as ConsoleStore from "../../ConsoleStore.ts"
+import * as Metrics from "../../ui/Metrics.tsx"
+import * as Shell from "../../ui/Shell.tsx"
+
+export default Route.get(
+  HyperRoute.html(function* () {
+    return (
+      <Shell.Shell prefix={ConsoleStore.store.prefix} active="metrics">
+        <div class="tab-header">Metrics</div>
+        <div id="metrics-container" class="tab-body metrics-grid">
+          <Metrics.MetricsGrid metrics={ConsoleStore.store.metrics} />
+        </div>
+        <div data-init={`@get('${ConsoleStore.store.prefix}/metrics')`} />
+      </Shell.Shell>
+    )
+  }),
+  Route.sse(
+    Stream.fromPubSub(ConsoleStore.store.events).pipe(
+      Stream.filter((e) => e._tag === "MetricsSnapshot"),
+      Stream.map((e) => {
+        const html = HyperHtml.renderToString(<Metrics.MetricsGrid metrics={e.metrics} />).replace(
+          /\n/g,
+          "",
+        )
+        return {
+          event: "datastar-patch-elements",
+          data: `selector #metrics-container\nmode inner\nelements ${html}`,
+        }
+      }),
+    ),
+  ),
+)

package/src/console/routes/route.tsx

@@ -0,0 +1,8 @@
+import * as Route from "../../Route.ts"
+import * as ConsoleStore from "../ConsoleStore.ts"
+
+export default Route.get(
+  Route.render(function* () {
+    return Route.redirect(`${ConsoleStore.store.prefix}/traces`)
+  }),
+)

package/src/console/routes/routes/route.tsx

@@ -0,0 +1,30 @@
+import * as Route from "../../../Route.ts"
+import * as RouteTree from "../../../RouteTree.ts"
+import * as HyperRoute from "../../../hyper/HyperRoute.ts"
+import * as ConsoleStore from "../../ConsoleStore.ts"
+import * as Routes from "../../ui/Routes.tsx"
+import * as Shell from "../../ui/Shell.tsx"
+
+export default Route.get(
+  HyperRoute.html(function* () {
+    const tree = yield* Route.Routes
+    const routes: Array<Routes.RouteInfo> = []
+    for (const route of RouteTree.walk(tree)) {
+      const desc = Route.descriptor(route)
+      routes.push({
+        method: desc.method ?? "*",
+        path: desc.path ?? "/",
+        format: desc.format,
+      })
+    }
+
+    return (
+      <Shell.Shell prefix={ConsoleStore.store.prefix} active="routes">
+        <div class="tab-header">Routes</div>
+        <div class="tab-body">
+          <Routes.RouteList routes={routes} />
+        </div>
+      </Shell.Shell>
+    )
+  }),
+)

package/src/console/routes/services/route.tsx

@@ -0,0 +1,21 @@
+import * as Effect from "effect/Effect"
+import * as Route from "../../../Route.ts"
+import * as HyperRoute from "../../../hyper/HyperRoute.ts"
+import * as ConsoleStore from "../../ConsoleStore.ts"
+import * as Services from "../../ui/Services.tsx"
+import * as Shell from "../../ui/Shell.tsx"
+
+export default Route.get(
+  HyperRoute.html(function* () {
+    const ctx = yield* Effect.context<never>()
+    const services = Services.collectServices(ctx.unsafeMap)
+    return (
+      <Shell.Shell prefix={ConsoleStore.store.prefix} active="services">
+        <div class="tab-header">Services ({services.length})</div>
+        <div class="tab-body">
+          <Services.ServiceList services={services} />
+        </div>
+      </Shell.Shell>
+    )
+  }),
+)

package/src/console/routes/system/route.tsx

@@ -0,0 +1,43 @@
+import * as Stream from "effect/Stream"
+import * as Route from "../../../Route.ts"
+import * as HyperHtml from "../../../hyper/HyperHtml.ts"
+import * as HyperRoute from "../../../hyper/HyperRoute.ts"
+import * as ConsoleStore from "../../ConsoleStore.ts"
+import * as System from "../../ui/System.tsx"
+import * as Shell from "../../ui/Shell.tsx"
+
+export default Route.get(
+  HyperRoute.html(function* () {
+    const stats = ConsoleStore.store.process
+    return (
+      <Shell.Shell prefix={ConsoleStore.store.prefix} active="system">
+        <div style="display:flex;flex-direction:column;flex:1;overflow:hidden">
+          <div class="tab-header">System</div>
+          <div id="system-container" class="tab-body">
+            {stats ? (
+              <System.SystemStatsView stats={stats} />
+            ) : (
+              <div class="empty">Waiting for system data...</div>
+            )}
+          </div>
+          <div data-init={`@get('${ConsoleStore.store.prefix}/system')`} />
+        </div>
+      </Shell.Shell>
+    )
+  }),
+  Route.sse(
+    Stream.fromPubSub(ConsoleStore.store.events).pipe(
+      Stream.filter((e) => e._tag === "ProcessSnapshot"),
+      Stream.map((e) => {
+        const html = HyperHtml.renderToString(<System.SystemStatsView stats={e.stats} />).replace(
+          /\n/g,
+          "",
+        )
+        return {
+          event: "datastar-patch-elements",
+          data: `selector #system-container\nmode inner\nelements ${html}`,
+        }
+      }),
+    ),
+  ),
+)

package/src/console/routes/traceDetail.tsx

@@ -0,0 +1,22 @@
+import * as Schema from "effect/Schema"
+import * as Route from "../../Route.ts"
+import * as RouteSchema from "../../RouteSchema.ts"
+import * as HyperRoute from "../../hyper/HyperRoute.ts"
+import * as ConsoleStore from "../ConsoleStore.ts"
+import * as Shell from "../ui/Shell.tsx"
+import * as Traces from "../ui/Traces.tsx"
+
+export default Route.get(
+  RouteSchema.schemaPathParams(Schema.Struct({ id: Schema.String })),
+  HyperRoute.html(function* (ctx) {
+    const allSpans = ConsoleStore.store.spans.toArray()
+    const groups = Traces.groupByTraceId(allSpans)
+    const spans = groups.get(ctx.pathParams.id) ?? []
+
+    return (
+      <Shell.Shell prefix={ConsoleStore.store.prefix} active="traces">
+        <Traces.TraceDetail prefix={ConsoleStore.store.prefix} spans={spans} />
+      </Shell.Shell>
+    )
+  }),
+)

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

@@ -0,0 +1,81 @@
+import * as Stream from "effect/Stream"
+import * as Route from "../../../Route.ts"
+import * as HyperHtml from "../../../hyper/HyperHtml.ts"
+import * as HyperRoute from "../../../hyper/HyperRoute.ts"
+import * as ConsoleStore from "../../ConsoleStore.ts"
+import * as Shell from "../../ui/Shell.tsx"
+import * as Traces from "../../ui/Traces.tsx"
+
+const prefix = ConsoleStore.store.prefix
+
+function collectNames(): Array<string> {
+  const names = new Set<string>()
+  for (const span of ConsoleStore.store.spans.toArray()) {
+    if (span.name) names.add(span.name)
+  }
+  return Array.from(names).sort()
+}
+
+function filterSpans(url: URL): Array<ConsoleStore.ConsoleSpan> {
+  const search = url.searchParams.get("traceSearch") || ""
+  let spans = ConsoleStore.store.spans.toArray()
+  if (search) {
+    const lower = search.toLowerCase()
+    spans = spans.filter((s) => s.name.toLowerCase().startsWith(lower))
+  }
+  return spans
+}
+
+export default Route.get(
+  HyperRoute.html(function* (ctx) {
+    const url = new URL(ctx.request.url)
+    const spans = filterSpans(url)
+    const names = collectNames()
+
+    return (
+      <Shell.Shell prefix={prefix} active="traces">
+        <form
+          data-signals={{ traceSearch: "" }}
+          style="display:flex;flex-direction:column;flex:1;overflow:hidden"
+        >
+          <div class="tab-header">Traces</div>
+          <div class="filter-bar">
+            <input
+              type="text"
+              name="traceSearch"
+              placeholder="Search trace name..."
+              list="trace-names"
+              data-bind:traceSearch
+              data-on:input={(c) => c.actions.get(location.href, { contentType: "form" })}
+            />
+            <datalist id="trace-names">
+              {names.map((n) => (
+                <option value={n} />
+              ))}
+            </datalist>
+          </div>
+          <div id="traces-container" class="tab-body">
+            <Traces.TraceGroups spans={spans} />
+          </div>
+        </form>
+        <div data-init={`@get('${prefix}/traces')`} />
+      </Shell.Shell>
+    )
+  }),
+  Route.sse(
+    Stream.fromPubSub(ConsoleStore.store.events).pipe(
+      Stream.filter((e) => e._tag === "SpanStart" || e._tag === "SpanEnd"),
+      Stream.map(() => {
+        const spans = ConsoleStore.store.spans.toArray()
+        const html = HyperHtml.renderToString(<Traces.TraceGroups spans={spans} />).replace(
+          /\n/g,
+          "",
+        )
+        return {
+          event: "datastar-patch-elements",
+          data: `selector #traces-container\nmode inner\nelements ${html}`,
+        }
+      }),
+    ),
+  ),
+)

package/src/console/routes/tree.ts

@@ -0,0 +1,30 @@
+import * as Route from "../../Route.ts"
+import errorsRoute from "./errors/route.tsx"
+import fiberDetailRoute from "./fiberDetail.tsx"
+import fibersRoute from "./fibers/route.tsx"
+import gitRoute from "./git/route.tsx"
+import layout from "./layout.tsx"
+import logsRoute from "./logs/route.tsx"
+import metricsRoute from "./metrics/route.tsx"
+import systemRoute from "./system/route.tsx"
+import rootRoute from "./route.tsx"
+import routesRoute from "./routes/route.tsx"
+import servicesRoute from "./services/route.tsx"
+import traceDetailRoute from "./traceDetail.tsx"
+import tracesRoute from "./traces/route.tsx"
+
+export default Route.tree({
+  "*": layout,
+  "/": rootRoute,
+  "/traces": tracesRoute,
+  "/traces/:id": traceDetailRoute,
+  "/metrics": metricsRoute,
+  "/logs": logsRoute,
+  "/errors": errorsRoute,
+  "/fibers": fibersRoute,
+  "/fibers/:id": fiberDetailRoute,
+  "/routes": routesRoute,
+  "/system": systemRoute,
+  "/services": servicesRoute,
+  "/git": gitRoute,
+})

package/src/console/ui/Errors.tsx

@@ -0,0 +1,76 @@
+import * as ConsoleStore from "../ConsoleStore.ts"
+
+export function ErrorLine({ error }: { error: ConsoleStore.ConsoleError }) {
+  const time = error.date.toLocaleTimeString("en", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  })
+  const firstLine = error.prettyPrint.split("\n")[0] ?? ""
+  const tags = error.details.map((d) => d.tag).filter(Boolean)
+
+  const allSpans = error.details.map((d) => d.span).filter(Boolean)
+  const allProps = error.details.flatMap((d) => Object.entries(d.properties))
+
+  return (
+    <details style="border-bottom:1px solid #1e293b">
+      <summary style="display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;font-size:12px;font-family:monospace">
+        <span style="color:#6b7280;flex-shrink:0">{time}</span>
+        <span style="color:#fca5a5">{firstLine}</span>
+      </summary>
+      <div style="padding:4px 12px 10px;font-size:12px;font-family:monospace">
+        {tags.length > 0 && (
+          <div style="display:flex;flex-wrap:wrap;gap:4px 12px;margin-bottom:6px">
+            {tags.map((t) => (
+              <div>
+                <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' }) }`}
+                >
+                  {t}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+        {allSpans.length > 0 && (
+          <div style="display:flex;flex-wrap:wrap;gap:4px 12px;margin-bottom:6px">
+            {allSpans.map((s) => (
+              <div>
+                <span style="color:#64748b">span </span>
+                <span style="color:#818cf8">{s}</span>
+              </div>
+            ))}
+          </div>
+        )}
+        {allProps.length > 0 && (
+          <div style="display:flex;flex-wrap:wrap;gap:4px 12px;margin-bottom:6px">
+            {allProps.map(([k, v]) => (
+              <div>
+                <span style="color:#64748b">{k}</span>
+                <span style="color:#4b5563">=</span>
+                <span style="color:#e2e8f0">
+                  {typeof v === "object" ? JSON.stringify(v) : String(v)}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+        <div style="margin-bottom:6px">
+          <span style="color:#64748b">fiber </span>
+          <a
+            href={`${ConsoleStore.store.prefix}/fibers/${error.fiberId.replace("#", "")}`}
+            style="color:#9ca3af;text-decoration:none"
+          >
+            {error.fiberId}
+          </a>
+        </div>
+        <pre style="color:#9ca3af;font-size:11px;padding:0;margin:0;white-space:pre-wrap;word-break:break-all">
+          {error.prettyPrint}
+        </pre>
+      </div>
+    </details>
+  )
+}

package/src/console/ui/Fibers.tsx

@@ -0,0 +1,321 @@
+import * as ConsoleStore from "../ConsoleStore.ts"
+import * as Logs from "./Logs.tsx"
+
+function formatDuration(ms: number | undefined): string {
+  if (ms == null) return "..."
+  if (ms < 1) return `${(ms * 1000).toFixed(0)}µs`
+  if (ms < 1000) return `${ms.toFixed(1)}ms`
+  return `${(ms / 1000).toFixed(2)}s`
+}
+
+function KeyValue({ label, value }: { label: string; value: string | undefined | null }) {
+  if (value == null) return null
+  return (
+    <div style="display:flex;gap:8px;padding:4px 0;border-bottom:1px solid #1e293b;font-size:12px">
+      <span style="color:#64748b;min-width:120px">{label}</span>
+      <span style="color:#e2e8f0;font-family:monospace;word-break:break-all">{value}</span>
+    </div>
+  )
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const bg = status === "ok" ? "#166534" : status === "error" ? "#7f1d1d" : "#713f12"
+  const fg = status === "ok" ? "#4ade80" : status === "error" ? "#fca5a5" : "#fde047"
+  return (
+    <span style={`font-size:11px;padding:2px 8px;border-radius:4px;background:${bg};color:${fg}`}>
+      {status}
+    </span>
+  )
+}
+
+export interface FiberSummary {
+  readonly id: string
+  logCount: number
+  spanCount: number
+  lastSeen: Date | undefined
+  alive: "alive" | "dead" | "unknown"
+  readonly levels: Set<string>
+}
+
+export function getParentChain(fiberId: string, fiberParents: Map<string, string>): Array<string> {
+  const chain: Array<string> = []
+  const visited = new Set<string>()
+  let current = fiberParents.get(fiberId)
+  while (current && !visited.has(current)) {
+    chain.push(current)
+    visited.add(current)
+    current = fiberParents.get(current)
+  }
+  return chain.reverse()
+}
+
+export function collectFibers(
+  logs: Array<ConsoleStore.ConsoleLog>,
+  spans: Array<ConsoleStore.ConsoleSpan>,
+): Array<FiberSummary> {
+  const map = new Map<string, FiberSummary>()
+  const counter = ConsoleStore.fiberIdCounter()
+  const now = Date.now()
+
+  for (const log of logs) {
+    let fiber = map.get(log.fiberId)
+    if (!fiber) {
+      fiber = {
+        id: log.fiberId,
+        logCount: 0,
+        spanCount: 0,
+        lastSeen: undefined,
+        alive: "unknown",
+        levels: new Set(),
+      }
+      map.set(log.fiberId, fiber)
+    }
+    fiber.logCount++
+    fiber.levels.add(log.level)
+    if (!fiber.lastSeen || log.date > fiber.lastSeen) {
+      fiber.lastSeen = log.date
+    }
+  }
+
+  for (const span of spans) {
+    const fiberId = span.attributes["fiber.id"] as string | undefined
+    if (!fiberId) continue
+    let fiber = map.get(fiberId)
+    if (!fiber) {
+      fiber = {
+        id: fiberId,
+        logCount: 0,
+        spanCount: 0,
+        lastSeen: undefined,
+        alive: "unknown",
+        levels: new Set(),
+      }
+      map.set(fiberId, fiber)
+    }
+    fiber.spanCount++
+  }
+
+  for (const fiber of map.values()) {
+    const num = parseInt(fiber.id.replace("#", ""), 10)
+    if (!isNaN(num)) {
+      if (fiber.lastSeen && now - fiber.lastSeen.getTime() < 5000) {
+        fiber.alive = "alive"
+      } else if (num < counter) {
+        fiber.alive = "dead"
+      }
+    }
+  }
+
+  return Array.from(map.values()).sort((a, b) => {
+    const na = parseInt(a.id.replace("#", ""), 10)
+    const nb = parseInt(b.id.replace("#", ""), 10)
+    return nb - na
+  })
+}
+
+function FiberRow({ fiber, prefix }: { fiber: FiberSummary; prefix: string }) {
+  const aliveColor =
+    fiber.alive === "alive" ? "#4ade80" : fiber.alive === "dead" ? "#ef4444" : "#94a3b8"
+  const aliveBg =
+    fiber.alive === "alive" ? "#166534" : fiber.alive === "dead" ? "#7f1d1d" : "#334155"
+  const lastSeen = fiber.lastSeen
+    ? fiber.lastSeen.toLocaleTimeString("en", {
+        hour12: false,
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      })
+    : "—"
+
+  return (
+    <a
+      href={`${prefix}/fibers/${fiber.id.replace("#", "")}`}
+      style="display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid #1e293b;text-decoration:none;transition:background .1s"
+      onmouseover="this.style.background='#1e293b'"
+      onmouseout="this.style.background='transparent'"
+    >
+      <span style="color:#e2e8f0;font-family:monospace;font-size:13px;font-weight:600;min-width:60px">
+        {fiber.id}
+      </span>
+      <span
+        style={`font-size:10px;padding:2px 8px;border-radius:4px;background:${aliveBg};color:${aliveColor}`}
+      >
+        {fiber.alive}
+      </span>
+      <span style="color:#94a3b8;font-size:12px">
+        {fiber.spanCount} span{fiber.spanCount !== 1 ? "s" : ""}
+      </span>
+      <span style="color:#94a3b8;font-size:12px">
+        {fiber.logCount} log{fiber.logCount !== 1 ? "s" : ""}
+      </span>
+      {fiber.levels.has("ERROR") && (
+        <span style="font-size:10px;padding:1px 6px;border-radius:4px;background:#7f1d1d;color:#fca5a5">
+          ERROR
+        </span>
+      )}
+      {fiber.levels.has("WARNING") && (
+        <span style="font-size:10px;padding:1px 6px;border-radius:4px;background:#713f12;color:#fde047">
+          WARN
+        </span>
+      )}
+      <span style="color:#6b7280;font-size:11px;margin-left:auto;font-family:monospace">
+        {lastSeen}
+      </span>
+    </a>
+  )
+}
+
+export function FiberList({ fibers, prefix }: { fibers: Array<FiberSummary>; prefix: string }) {
+  if (fibers.length === 0) {
+    return <div class="empty">Waiting for fibers...</div>
+  }
+  return (
+    <>
+      {fibers.map((f) => (
+        <FiberRow fiber={f} prefix={prefix} />
+      ))}
+    </>
+  )
+}
+
+export function FiberDetail({
+  prefix,
+  fiberId,
+  logs,
+  spans,
+  alive,
+  parents,
+  context,
+}: {
+  prefix: string
+  fiberId: string
+  logs: Array<ConsoleStore.ConsoleLog>
+  spans: Array<ConsoleStore.ConsoleSpan>
+  alive: "alive" | "dead" | "unknown"
+  parents: Array<string>
+  context: ConsoleStore.FiberContext | undefined
+}) {
+  const aliveColor = alive === "alive" ? "#4ade80" : alive === "dead" ? "#ef4444" : "#94a3b8"
+  const aliveBg = alive === "alive" ? "#166534" : alive === "dead" ? "#7f1d1d" : "#334155"
+
+  return (
+    <>
+      <div class="tab-header">
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
+          <a href={`${prefix}/fibers`} style="color:#64748b;text-decoration:none;font-size:12px">
+            Fibers
+          </a>
+          <span style="color:#475569">/</span>
+          <span style="color:#e2e8f0;font-size:13px;font-family:monospace">{fiberId}</span>
+          <span
+            style={`font-size:11px;padding:2px 8px;border-radius:4px;background:${aliveBg};color:${aliveColor}`}
+          >
+            {alive}
+          </span>
+        </div>
+        <div style="display:flex;gap:16px;font-size:12px;color:#94a3b8">
+          <span>
+            {logs.length} log{logs.length !== 1 ? "s" : ""}
+          </span>
+          <span>
+            {spans.length} span{spans.length !== 1 ? "s" : ""}
+          </span>
+        </div>
+      </div>
+      <div class="tab-body">
+        {parents.length > 0 && (
+          <div style="padding:8px 16px">
+            <div style="color:#94a3b8;font-size:12px;font-weight:600;margin-bottom:8px">
+              Parents
+            </div>
+            <div style="display:flex;gap:6px;flex-wrap:wrap">
+              {parents.map((id) => (
+                <a
+                  href={`${prefix}/fibers/${id.replace("#", "")}`}
+                  style="color:#38bdf8;font-family:monospace;font-size:13px;text-decoration:none;padding:4px 10px;background:#111827;border:1px solid #1e293b;border-radius:6px"
+                >
+                  {id}
+                </a>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {context &&
+          (context.spanName || context.traceId || Object.keys(context.annotations).length > 0) && (
+            <div style="padding:8px 16px">
+              <div style="color:#94a3b8;font-size:12px;font-weight:600;margin-bottom:8px">
+                Context
+              </div>
+              <div style="background:#111827;border:1px solid #1e293b;border-radius:6px;padding:8px 12px">
+                {context.spanName && <KeyValue label="Span" value={context.spanName} />}
+                {context.traceId && (
+                  <div style="display:flex;gap:8px;padding:4px 0;border-bottom:1px solid #1e293b;font-size:12px">
+                    <span style="color:#64748b;min-width:120px">Trace</span>
+                    <a
+                      href={`${prefix}/traces/${context.traceId}`}
+                      style="color:#38bdf8;font-family:monospace;word-break:break-all;text-decoration:none"
+                    >
+                      {context.traceId}
+                    </a>
+                  </div>
+                )}
+                {Object.entries(context.annotations).map(([k, v]) => (
+                  <KeyValue
+                    label={k}
+                    value={typeof v === "object" ? JSON.stringify(v) : String(v)}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+        {spans.length > 0 && (
+          <div style="padding:8px 16px">
+            <div style="color:#94a3b8;font-size:12px;font-weight:600;margin-bottom:8px">Spans</div>
+            {spans.map((s) => {
+              const stacktrace = s.attributes["code.stacktrace"] as string | undefined
+              return (
+                <div style="margin-bottom:6px;background:#111827;border:1px solid #1e293b;border-radius:6px;padding:8px 12px">
+                  <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
+                    <a
+                      href={`${prefix}/traces/${s.traceId}`}
+                      style="color:#38bdf8;font-family:monospace;font-size:13px;text-decoration:none"
+                    >
+                      {s.name}
+                    </a>
+                    <StatusBadge status={s.status} />
+                    <span style="color:#64748b;font-size:11px;margin-left:auto;font-family:monospace">
+                      {formatDuration(s.durationMs)}
+                    </span>
+                  </div>
+                  <KeyValue label="Trace" value={s.traceId} />
+                  <KeyValue label="Kind" value={s.kind} />
+                  {stacktrace && <KeyValue label="Source" value={stacktrace} />}
+                  {Object.entries(s.attributes)
+                    .filter(([k]) => k !== "code.stacktrace")
+                    .map(([k, v]) => (
+                      <KeyValue label={k} value={String(v)} />
+                    ))}
+                </div>
+              )
+            })}
+          </div>
+        )}
+
+        {logs.length > 0 && (
+          <div style="padding:8px 16px">
+            <div style="color:#94a3b8;font-size:12px;font-weight:600;margin-bottom:8px">Logs</div>
+            {logs.map((l) => (
+              <Logs.LogLine log={l} />
+            ))}
+          </div>
+        )}
+
+        {logs.length === 0 && spans.length === 0 && (
+          <div class="empty">No data found for fiber {fiberId}</div>
+        )}
+      </div>
+    </>
+  )
+}