effect-start 0.26.0 → 0.27.0

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

@@ -1,36 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,321 +0,0 @@
-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>
-    </>
-  )
-}