effect-start 0.27.0 → 0.28.0

package/src/tower/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 TowerStore from "../../TowerStore.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={TowerStore.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/tower/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 TowerStore from "../../TowerStore.ts"
+import * as System from "../../ui/System.tsx"
+import * as Shell from "../../ui/Shell.tsx"
+
+export default Route.get(
+  HyperRoute.html(function* () {
+    const stats = TowerStore.store.process
+    return (
+      <Shell.Shell prefix={TowerStore.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('${TowerStore.store.prefix}/system')`} />
+        </div>
+      </Shell.Shell>
+    )
+  }),
+  Route.sse(
+    Stream.fromPubSub(TowerStore.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/tower/routes/traceDetail.tsx

@@ -0,0 +1,30 @@
+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 TowerStore from "../TowerStore.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) {
+    let traceId: bigint
+    try {
+      traceId = BigInt(ctx.pathParams.id)
+    } catch {
+      return (
+        <Shell.Shell prefix={TowerStore.store.prefix} active="traces">
+          <div class="empty">Trace not found</div>
+        </Shell.Shell>
+      )
+    }
+    const spans = yield* TowerStore.spansByTraceId(TowerStore.store.sql, traceId)
+
+    return (
+      <Shell.Shell prefix={TowerStore.store.prefix} active="traces">
+        <Traces.TraceDetail prefix={TowerStore.store.prefix} spans={spans} />
+      </Shell.Shell>
+    )
+  }),
+)

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

@@ -0,0 +1,72 @@
+import * as Effect from "effect/Effect"
+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 TowerStore from "../../TowerStore.ts"
+import * as Shell from "../../ui/Shell.tsx"
+import * as Traces from "../../ui/Traces.tsx"
+
+const prefix = TowerStore.store.prefix
+
+export default Route.get(
+  HyperRoute.html(function* (ctx) {
+    const url = new URL(ctx.request.url)
+    const search = url.searchParams.get("traceSearch") || ""
+    const allSpans = yield* TowerStore.allSpans(TowerStore.store.sql)
+    const names = Array.from(new Set(allSpans.map((s) => s.name))).sort()
+    let spans = allSpans
+    if (search) {
+      const lower = search.toLowerCase()
+      spans = spans.filter((s) => s.name.toLowerCase().startsWith(lower))
+    }
+
+    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(TowerStore.store.events).pipe(
+      Stream.filter((e) => e._tag === "SpanStart" || e._tag === "SpanEnd"),
+      Stream.mapEffect(() =>
+        Effect.gen(function* () {
+          const spans = yield* TowerStore.allSpans(TowerStore.store.sql)
+          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/tower/routes/tree.ts

@@ -0,0 +1,28 @@
+import * as Route from "../../Route.ts"
+import errorsRoute from "./errors/route.tsx"
+import fiberDetailRoute from "./fiberDetail.tsx"
+import fibersRoute from "./fibers/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,
+})

package/src/tower/ui/Errors.tsx

@@ -0,0 +1,80 @@
+import * as Unique from "../../Unique.ts"
+import * as TowerStore from "../TowerStore.ts"
+
+export function ErrorLine(options: { error: TowerStore.TowerError }) {
+  const time = new Date(Number(Unique.snowflake.timestamp(options.error.id))).toLocaleTimeString(
+    "en",
+    {
+      hour12: false,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    },
+  )
+  const firstLine = options.error.prettyPrint.split("\n")[0] ?? ""
+  const tags = options.error.details.map((d) => d.tag).filter(Boolean)
+
+  const allSpans = options.error.details.map((d) => d.span).filter(Boolean)
+  const allProps = options.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={`${TowerStore.store.prefix}/fibers/${options.error.fiberId.replace("#", "")}`}
+            style="color:#9ca3af;text-decoration:none"
+          >
+            {options.error.fiberId}
+          </a>
+        </div>
+        <pre style="color:#9ca3af;font-size:11px;padding:0;margin:0;white-space:pre-wrap;word-break:break-all">
+          {options.error.prettyPrint}
+        </pre>
+      </div>
+    </details>
+  )
+}

package/src/tower/ui/Fibers.tsx

@@ -0,0 +1,336 @@
+import * as Unique from "../../Unique.ts"
+import * as TowerStore from "../TowerStore.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(options: { label: string; value: string | number | bigint | undefined | null }) {
+  if (options.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">{options.label}</span>
+      <span style="color:#e2e8f0;font-family:monospace;word-break:break-all">
+        {String(options.value)}
+      </span>
+    </div>
+  )
+}
+
+function StatusBadge(options: { status: string }) {
+  const bg =
+    options.status === "ok" ? "#166534" : options.status === "error" ? "#7f1d1d" : "#713f12"
+  const fg =
+    options.status === "ok" ? "#4ade80" : options.status === "error" ? "#fca5a5" : "#fde047"
+  return (
+    <span style={`font-size:11px;padding:2px 8px;border-radius:4px;background:${bg};color:${fg}`}>
+      {options.status}
+    </span>
+  )
+}
+
+export interface FiberSummary {
+  readonly id: string
+  logCount: number
+  spanCount: number
+  lastSeen: number | 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<TowerStore.TowerLog>,
+  spans: Array<TowerStore.TowerSpan>,
+): Array<FiberSummary> {
+  const map = new Map<string, FiberSummary>()
+  const counter = TowerStore.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)
+    const logTimestamp = Number(Unique.snowflake.timestamp(log.id))
+    if (!fiber.lastSeen || logTimestamp > fiber.lastSeen) {
+      fiber.lastSeen = logTimestamp
+    }
+  }
+
+  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 < 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(options: { fiber: FiberSummary; prefix: string }) {
+  const aliveColor =
+    options.fiber.alive === "alive"
+      ? "#4ade80"
+      : options.fiber.alive === "dead"
+        ? "#ef4444"
+        : "#94a3b8"
+  const aliveBg =
+    options.fiber.alive === "alive"
+      ? "#166534"
+      : options.fiber.alive === "dead"
+        ? "#7f1d1d"
+        : "#334155"
+  const lastSeen = options.fiber.lastSeen
+    ? new Date(options.fiber.lastSeen).toLocaleTimeString("en", {
+        hour12: false,
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      })
+    : "—"
+
+  return (
+    <a
+      href={`${options.prefix}/fibers/${options.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">
+        {options.fiber.id}
+      </span>
+      <span
+        style={`font-size:10px;padding:2px 8px;border-radius:4px;background:${aliveBg};color:${aliveColor}`}
+      >
+        {options.fiber.alive}
+      </span>
+      <span style="color:#94a3b8;font-size:12px">
+        {options.fiber.spanCount} span{options.fiber.spanCount !== 1 ? "s" : ""}
+      </span>
+      <span style="color:#94a3b8;font-size:12px">
+        {options.fiber.logCount} log{options.fiber.logCount !== 1 ? "s" : ""}
+      </span>
+      {options.fiber.levels.has("ERROR") && (
+        <span style="font-size:10px;padding:1px 6px;border-radius:4px;background:#7f1d1d;color:#fca5a5">
+          ERROR
+        </span>
+      )}
+      {options.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(options: { fibers: Array<FiberSummary>; prefix: string }) {
+  if (options.fibers.length === 0) {
+    return <div class="empty">Waiting for fibers...</div>
+  }
+  return (
+    <>
+      {options.fibers.map((f) => (
+        <FiberRow fiber={f} prefix={options.prefix} />
+      ))}
+    </>
+  )
+}
+
+export function FiberDetail(options: {
+  prefix: string
+  fiberId: string
+  logs: Array<TowerStore.TowerLog>
+  spans: Array<TowerStore.TowerSpan>
+  alive: "alive" | "dead" | "unknown"
+  parents: Array<string>
+  context: TowerStore.FiberContext | undefined
+}) {
+  const aliveColor =
+    options.alive === "alive" ? "#4ade80" : options.alive === "dead" ? "#ef4444" : "#94a3b8"
+  const aliveBg =
+    options.alive === "alive" ? "#166534" : options.alive === "dead" ? "#7f1d1d" : "#334155"
+
+  return (
+    <>
+      <div class="tab-header">
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
+          <a
+            href={`${options.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">{options.fiberId}</span>
+          <span
+            style={`font-size:11px;padding:2px 8px;border-radius:4px;background:${aliveBg};color:${aliveColor}`}
+          >
+            {options.alive}
+          </span>
+        </div>
+        <div style="display:flex;gap:16px;font-size:12px;color:#94a3b8">
+          <span>
+            {options.logs.length} log{options.logs.length !== 1 ? "s" : ""}
+          </span>
+          <span>
+            {options.spans.length} span{options.spans.length !== 1 ? "s" : ""}
+          </span>
+        </div>
+      </div>
+      <div class="tab-body">
+        {options.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">
+              {options.parents.map((id) => (
+                <a
+                  href={`${options.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>
+        )}
+
+        {options.context &&
+          (options.context.spanName ||
+            options.context.traceId ||
+            Object.keys(options.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">
+                {options.context.spanName && (
+                  <KeyValue label="Span" value={options.context.spanName} />
+                )}
+                {options.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={`${options.prefix}/traces/${options.context.traceId}`}
+                      style="color:#38bdf8;font-family:monospace;word-break:break-all;text-decoration:none"
+                    >
+                      {options.context.traceId}
+                    </a>
+                  </div>
+                )}
+                {Object.entries(options.context.annotations).map(([k, v]) => (
+                  <KeyValue
+                    label={k}
+                    value={typeof v === "object" ? JSON.stringify(v) : String(v)}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+        {options.spans.length > 0 && (
+          <div style="padding:8px 16px">
+            <div style="color:#94a3b8;font-size:12px;font-weight:600;margin-bottom:8px">Spans</div>
+            {options.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={`${options.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>
+        )}
+
+        {options.logs.length > 0 && (
+          <div style="padding:8px 16px">
+            <div style="color:#94a3b8;font-size:12px;font-weight:600;margin-bottom:8px">Logs</div>
+            {options.logs.map((l) => (
+              <Logs.LogLine log={l} />
+            ))}
+          </div>
+        )}
+
+        {options.logs.length === 0 && options.spans.length === 0 && (
+          <div class="empty">No data found for fiber {options.fiberId}</div>
+        )}
+      </div>
+    </>
+  )
+}

package/src/tower/ui/Logs.tsx

@@ -0,0 +1,50 @@
+import * as Unique from "../../Unique.ts"
+import * as TowerStore from "../TowerStore.ts"
+
+function levelColor(level: string): string {
+  if (level === "DEBUG") return "#94a3b8"
+  if (level === "INFO") return "#60a5fa"
+  if (level === "WARNING") return "#fbbf24"
+  if (level === "ERROR") return "#ef4444"
+  if (level === "FATAL") return "#dc2626"
+  return "#e5e7eb"
+}
+
+export function LogLine(options: { log: TowerStore.TowerLog }) {
+  const color = levelColor(options.log.level)
+  const time = new Date(Number(Unique.snowflake.timestamp(options.log.id))).toLocaleTimeString(
+    "en",
+    {
+      hour12: false,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    },
+  )
+
+  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"
+    >
+      <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>
+      <a
+        href={`${TowerStore.store.prefix}/fibers/${options.log.fiberId.replace("#", "")}`}
+        style="color:#6b7280;white-space:nowrap;margin-left:8px;text-decoration:none"
+      >
+        {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>
+  )
+}