effect-start 0.26.0 → 0.28.0

package/src/{console → tower}/ui/Fibers.tsx

@@ -1,4 +1,5 @@
-import * as ConsoleStore from "../ConsoleStore.ts"
+import * as Unique from "../../Unique.ts"
+import * as TowerStore from "../TowerStore.ts"
 import * as Logs from "./Logs.tsx"
 
 function formatDuration(ms: number | undefined): string {
@@ -8,22 +9,26 @@ function formatDuration(ms: number | undefined): string {
   return `${(ms / 1000).toFixed(2)}s`
 }
 
-function KeyValue({ label, value }: { label: string; value: string | undefined | null }) {
-  if (value == null) return null
+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">{label}</span>
-      <span style="color:#e2e8f0;font-family:monospace;word-break:break-all">{value}</span>
+      <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({ status }: { status: string }) {
-  const bg = status === "ok" ? "#166534" : status === "error" ? "#7f1d1d" : "#713f12"
-  const fg = status === "ok" ? "#4ade80" : status === "error" ? "#fca5a5" : "#fde047"
+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}`}>
-      {status}
+      {options.status}
     </span>
   )
 }
@@ -32,7 +37,7 @@ export interface FiberSummary {
   readonly id: string
   logCount: number
   spanCount: number
-  lastSeen: Date | undefined
+  lastSeen: number | undefined
   alive: "alive" | "dead" | "unknown"
   readonly levels: Set<string>
 }
@@ -50,11 +55,11 @@ export function getParentChain(fiberId: string, fiberParents: Map<string, string
 }
 
 export function collectFibers(
-  logs: Array<ConsoleStore.ConsoleLog>,
-  spans: Array<ConsoleStore.ConsoleSpan>,
+  logs: Array<TowerStore.TowerLog>,
+  spans: Array<TowerStore.TowerSpan>,
 ): Array<FiberSummary> {
   const map = new Map<string, FiberSummary>()
-  const counter = ConsoleStore.fiberIdCounter()
+  const counter = TowerStore.fiberIdCounter()
   const now = Date.now()
 
   for (const log of logs) {
@@ -72,8 +77,9 @@ export function collectFibers(
     }
     fiber.logCount++
     fiber.levels.add(log.level)
-    if (!fiber.lastSeen || log.date > fiber.lastSeen) {
-      fiber.lastSeen = log.date
+    const logTimestamp = Number(Unique.snowflake.timestamp(log.id))
+    if (!fiber.lastSeen || logTimestamp > fiber.lastSeen) {
+      fiber.lastSeen = logTimestamp
     }
   }
 
@@ -98,7 +104,7 @@ export function collectFibers(
   for (const fiber of map.values()) {
     const num = parseInt(fiber.id.replace("#", ""), 10)
     if (!isNaN(num)) {
-      if (fiber.lastSeen && now - fiber.lastSeen.getTime() < 5000) {
+      if (fiber.lastSeen && now - fiber.lastSeen < 5000) {
         fiber.alive = "alive"
       } else if (num < counter) {
         fiber.alive = "dead"
@@ -113,13 +119,21 @@ export function collectFibers(
   })
 }
 
-function FiberRow({ fiber, prefix }: { fiber: FiberSummary; prefix: string }) {
+function FiberRow(options: { fiber: FiberSummary; prefix: string }) {
   const aliveColor =
-    fiber.alive === "alive" ? "#4ade80" : fiber.alive === "dead" ? "#ef4444" : "#94a3b8"
+    options.fiber.alive === "alive"
+      ? "#4ade80"
+      : options.fiber.alive === "dead"
+        ? "#ef4444"
+        : "#94a3b8"
   const aliveBg =
-    fiber.alive === "alive" ? "#166534" : fiber.alive === "dead" ? "#7f1d1d" : "#334155"
-  const lastSeen = fiber.lastSeen
-    ? fiber.lastSeen.toLocaleTimeString("en", {
+    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",
@@ -129,31 +143,31 @@ function FiberRow({ fiber, prefix }: { fiber: FiberSummary; prefix: string }) {
 
   return (
     <a
-      href={`${prefix}/fibers/${fiber.id.replace("#", "")}`}
+      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">
-        {fiber.id}
+        {options.fiber.id}
       </span>
       <span
         style={`font-size:10px;padding:2px 8px;border-radius:4px;background:${aliveBg};color:${aliveColor}`}
       >
-        {fiber.alive}
+        {options.fiber.alive}
       </span>
       <span style="color:#94a3b8;font-size:12px">
-        {fiber.spanCount} span{fiber.spanCount !== 1 ? "s" : ""}
+        {options.fiber.spanCount} span{options.fiber.spanCount !== 1 ? "s" : ""}
       </span>
       <span style="color:#94a3b8;font-size:12px">
-        {fiber.logCount} log{fiber.logCount !== 1 ? "s" : ""}
+        {options.fiber.logCount} log{options.fiber.logCount !== 1 ? "s" : ""}
       </span>
-      {fiber.levels.has("ERROR") && (
+      {options.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") && (
+      {options.fiber.levels.has("WARNING") && (
         <span style="font-size:10px;padding:1px 6px;border-radius:4px;background:#713f12;color:#fde047">
           WARN
         </span>
@@ -165,73 +179,70 @@ function FiberRow({ fiber, prefix }: { fiber: FiberSummary; prefix: string }) {
   )
 }
 
-export function FiberList({ fibers, prefix }: { fibers: Array<FiberSummary>; prefix: string }) {
-  if (fibers.length === 0) {
+export function FiberList(options: { fibers: Array<FiberSummary>; prefix: string }) {
+  if (options.fibers.length === 0) {
     return <div class="empty">Waiting for fibers...</div>
   }
   return (
     <>
-      {fibers.map((f) => (
-        <FiberRow fiber={f} prefix={prefix} />
+      {options.fibers.map((f) => (
+        <FiberRow fiber={f} prefix={options.prefix} />
       ))}
     </>
   )
 }
 
-export function FiberDetail({
-  prefix,
-  fiberId,
-  logs,
-  spans,
-  alive,
-  parents,
-  context,
-}: {
+export function FiberDetail(options: {
   prefix: string
   fiberId: string
-  logs: Array<ConsoleStore.ConsoleLog>
-  spans: Array<ConsoleStore.ConsoleSpan>
+  logs: Array<TowerStore.TowerLog>
+  spans: Array<TowerStore.TowerSpan>
   alive: "alive" | "dead" | "unknown"
   parents: Array<string>
-  context: ConsoleStore.FiberContext | undefined
+  context: TowerStore.FiberContext | undefined
 }) {
-  const aliveColor = alive === "alive" ? "#4ade80" : alive === "dead" ? "#ef4444" : "#94a3b8"
-  const aliveBg = alive === "alive" ? "#166534" : alive === "dead" ? "#7f1d1d" : "#334155"
+  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={`${prefix}/fibers`} style="color:#64748b;text-decoration:none;font-size:12px">
+          <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">{fiberId}</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}`}
           >
-            {alive}
+            {options.alive}
           </span>
         </div>
         <div style="display:flex;gap:16px;font-size:12px;color:#94a3b8">
           <span>
-            {logs.length} log{logs.length !== 1 ? "s" : ""}
+            {options.logs.length} log{options.logs.length !== 1 ? "s" : ""}
           </span>
           <span>
-            {spans.length} span{spans.length !== 1 ? "s" : ""}
+            {options.spans.length} span{options.spans.length !== 1 ? "s" : ""}
           </span>
         </div>
       </div>
       <div class="tab-body">
-        {parents.length > 0 && (
+        {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">
-              {parents.map((id) => (
+              {options.parents.map((id) => (
                 <a
-                  href={`${prefix}/fibers/${id.replace("#", "")}`}
+                  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}
@@ -241,26 +252,30 @@ export function FiberDetail({
           </div>
         )}
 
-        {context &&
-          (context.spanName || context.traceId || Object.keys(context.annotations).length > 0) && (
+        {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">
-                {context.spanName && <KeyValue label="Span" value={context.spanName} />}
-                {context.traceId && (
+                {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={`${prefix}/traces/${context.traceId}`}
+                      href={`${options.prefix}/traces/${options.context.traceId}`}
                       style="color:#38bdf8;font-family:monospace;word-break:break-all;text-decoration:none"
                     >
-                      {context.traceId}
+                      {options.context.traceId}
                     </a>
                   </div>
                 )}
-                {Object.entries(context.annotations).map(([k, v]) => (
+                {Object.entries(options.context.annotations).map(([k, v]) => (
                   <KeyValue
                     label={k}
                     value={typeof v === "object" ? JSON.stringify(v) : String(v)}
@@ -270,16 +285,16 @@ export function FiberDetail({
             </div>
           )}
 
-        {spans.length > 0 && (
+        {options.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) => {
+            {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={`${prefix}/traces/${s.traceId}`}
+                      href={`${options.prefix}/traces/${s.traceId}`}
                       style="color:#38bdf8;font-family:monospace;font-size:13px;text-decoration:none"
                     >
                       {s.name}
@@ -303,17 +318,17 @@ export function FiberDetail({
           </div>
         )}
 
-        {logs.length > 0 && (
+        {options.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) => (
+            {options.logs.map((l) => (
               <Logs.LogLine log={l} />
             ))}
           </div>
         )}
 
-        {logs.length === 0 && spans.length === 0 && (
-          <div class="empty">No data found for fiber {fiberId}</div>
+        {options.logs.length === 0 && options.spans.length === 0 && (
+          <div class="empty">No data found for fiber {options.fiberId}</div>
         )}
       </div>
     </>

package/src/{console → tower}/ui/Logs.tsx

@@ -1,4 +1,5 @@
-import * as ConsoleStore from "../ConsoleStore.ts"
+import * as Unique from "../../Unique.ts"
+import * as TowerStore from "../TowerStore.ts"
 
 function levelColor(level: string): string {
   if (level === "DEBUG") return "#94a3b8"
@@ -9,36 +10,39 @@ function levelColor(level: string): string {
   return "#e5e7eb"
 }
 
-export function LogLine({ log }: { log: ConsoleStore.ConsoleLog }) {
-  const color = levelColor(log.level)
-  const time = log.date.toLocaleTimeString("en", {
-    hour12: false,
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-  })
+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-${log.id}`}
+      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`}>
-        {log.level}
+        {options.log.level}
       </span>
       <span style="color:#e5e7eb;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis">
-        {log.message}
+        {options.log.message}
       </span>
       <a
-        href={`${ConsoleStore.store.prefix}/fibers/${log.fiberId.replace("#", "")}`}
+        href={`${TowerStore.store.prefix}/fibers/${options.log.fiberId.replace("#", "")}`}
         style="color:#6b7280;white-space:nowrap;margin-left:8px;text-decoration:none"
       >
-        {log.fiberId}
+        {options.log.fiberId}
       </a>
-      {log.cause && (
+      {options.log.cause && (
         <div style="color:#ef4444;font-size:11px;padding:2px 0 0 0;white-space:pre-wrap;width:100%">
-          {log.cause}
+          {options.log.cause}
         </div>
       )}
     </div>

package/src/{console → tower}/ui/Metrics.tsx

@@ -1,15 +1,15 @@
-import type * as ConsoleStore from "../ConsoleStore.ts"
+import type * as TowerStore from "../TowerStore.ts"
 
-function MetricValue({ metric }: { metric: ConsoleStore.ConsoleMetricSnapshot }) {
-  if (metric.type === "counter" || metric.type === "gauge") {
+function MetricValue(options: { metric: TowerStore.TowerMetricSnapshot }) {
+  if (options.metric.type === "counter" || options.metric.type === "gauge") {
     return (
       <div style="font-size:32px;font-weight:700;color:#e5e7eb;font-family:monospace;line-height:1.1">
-        {String(metric.value)}
+        {String(options.metric.value)}
       </div>
     )
   }
-  if (metric.type === "histogram") {
-    const h = metric.value as { count: number; sum: number; min: number; max: number }
+  if (options.metric.type === "histogram") {
+    const h = options.metric.value as { count: number; sum: number; min: number; max: number }
     return (
       <div style="display:grid;grid-template-columns:auto auto;gap:2px 12px;font-size:12px;font-family:monospace">
         <span style="color:#6b7280">count</span>
@@ -23,8 +23,8 @@ function MetricValue({ metric }: { metric: ConsoleStore.ConsoleMetricSnapshot })
       </div>
     )
   }
-  if (metric.type === "frequency") {
-    const occ = metric.value as Record<string, number>
+  if (options.metric.type === "frequency") {
+    const occ = options.metric.value as Record<string, number>
     return (
       <div style="display:grid;grid-template-columns:auto auto;gap:2px 12px;font-size:12px;font-family:monospace">
         {Object.entries(occ)
@@ -40,37 +40,37 @@ function MetricValue({ metric }: { metric: ConsoleStore.ConsoleMetricSnapshot })
   }
   return (
     <pre style="font-size:11px;color:#9ca3af;margin:0;white-space:pre-wrap">
-      {JSON.stringify(metric.value, null, 2)}
+      {JSON.stringify(options.metric.value, null, 2)}
     </pre>
   )
 }
 
-function MetricCard({ metric }: { metric: ConsoleStore.ConsoleMetricSnapshot }) {
+function MetricCard(options: { metric: TowerStore.TowerMetricSnapshot }) {
   return (
     <div style="background:#111827;border:1px solid #374151;border-radius:6px;padding:12px;min-width:200px">
       <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
-        <span style="color:#d1d5db;font-size:13px;font-weight:600">{metric.name}</span>
+        <span style="color:#d1d5db;font-size:13px;font-weight:600">{options.metric.name}</span>
         <span style="font-size:10px;padding:1px 6px;border-radius:4px;background:#1e3a5f;color:#60a5fa">
-          {metric.type}
+          {options.metric.type}
         </span>
       </div>
-      <MetricValue metric={metric} />
-      {metric.tags.length > 0 && (
+      <MetricValue metric={options.metric} />
+      {options.metric.tags.length > 0 && (
         <div style="font-size:10px;color:#6b7280;margin-top:4px">
-          {metric.tags.map((t) => `${t.key}=${t.value}`).join(" ")}
+          {options.metric.tags.map((t) => `${t.key}=${t.value}`).join(" ")}
         </div>
       )}
     </div>
   )
 }
 
-export function MetricsGrid({ metrics }: { metrics: Array<ConsoleStore.ConsoleMetricSnapshot> }) {
-  if (metrics.length === 0) {
+export function MetricsGrid(options: { metrics: Array<TowerStore.TowerMetricSnapshot> }) {
+  if (options.metrics.length === 0) {
     return <div class="empty">Waiting for metrics...</div>
   }
   return (
     <>
-      {metrics.map((m) => (
+      {options.metrics.map((m) => (
         <MetricCard metric={m} />
       ))}
     </>

package/src/{console → tower}/ui/Routes.tsx

@@ -41,26 +41,26 @@ function methodBg(method: string): string {
 
 const methodOrder = ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS", "*"]
 
-function MethodBadge({ method }: { method: string }) {
+function MethodBadge(options: { method: string }) {
   return (
     <span
-      style={`font-size:10px;font-weight:700;font-family:monospace;padding:2px 6px;border-radius:3px;background:${methodBg(method)};color:${methodColor(method)};min-width:48px;text-align:center;display:inline-block`}
+      style={`font-size:10px;font-weight:700;font-family:monospace;padding:2px 6px;border-radius:3px;background:${methodBg(options.method)};color:${methodColor(options.method)};min-width:48px;text-align:center;display:inline-block`}
     >
-      {method}
+      {options.method}
     </span>
   )
 }
 
-function FormatBadge({ format }: { format: string }) {
+function FormatBadge(options: { format: string }) {
   return (
     <span style="font-size:10px;padding:1px 6px;border-radius:3px;background:#1e3a5f;color:#60a5fa">
-      {format}
+      {options.format}
     </span>
   )
 }
 
-function ColoredPath({ path }: { path: string }) {
-  const segments = path.split("/").filter(Boolean)
+function ColoredPath(options: { path: string }) {
+  const segments = options.path.split("/").filter(Boolean)
   return (
     <span style="font-family:monospace;font-size:13px">
       {segments.length === 0 ? (
@@ -80,14 +80,14 @@ function ColoredPath({ path }: { path: string }) {
   )
 }
 
-function PathGroup({ path, routes }: { path: string; routes: Array<RouteInfo> }) {
+function PathGroup(options: { path: string; routes: Array<RouteInfo> }) {
   return (
     <div style="padding:8px 12px;border-bottom:1px solid #1e293b">
       <div style="margin-bottom:4px">
-        <ColoredPath path={path} />
+        <ColoredPath path={options.path} />
       </div>
       <div style="display:flex;flex-wrap:wrap;gap:4px">
-        {routes.map((r) => (
+        {options.routes.map((r) => (
           <div style="display:flex;align-items:center;gap:6px">
             <MethodBadge method={r.method} />
             {r.format && <FormatBadge format={r.format} />}
@@ -98,13 +98,13 @@ function PathGroup({ path, routes }: { path: string; routes: Array<RouteInfo> })
   )
 }
 
-export function RouteList({ routes }: { routes: Array<RouteInfo> }) {
-  if (routes.length === 0) {
+export function RouteList(options: { routes: Array<RouteInfo> }) {
+  if (options.routes.length === 0) {
     return <div class="empty">No routes registered</div>
   }
 
-  const groups = groupByPath(routes)
-  const routeCount = routes.length
+  const groups = groupByPath(options.routes)
+  const routeCount = options.routes.length
   const pathCount = groups.length
 
   return (

package/src/{console → tower}/ui/Services.tsx

@@ -173,8 +173,8 @@ function kindColor(kind: string): { bg: string; fg: string } {
   return { bg: "#1e3a5f", fg: "#60a5fa" }
 }
 
-function ServiceRow({ entry }: { entry: ServiceEntry }) {
-  const colors = kindColor(entry.type)
+function ServiceRow(options: { entry: ServiceEntry }) {
+  const colors = kindColor(options.entry.type)
   return (
     <details class="tl-row">
       <summary class="tl-summary tl-cols">
@@ -183,19 +183,19 @@ function ServiceRow({ entry }: { entry: ServiceEntry }) {
             style={`width:8px;height:8px;border-radius:50%;background:${colors.fg};display:block`}
           />
         </span>
-        <span class="tl-cell tl-cell-name">{entry.key}</span>
+        <span class="tl-cell tl-cell-name">{options.entry.key}</span>
         <span class="tl-cell tl-cell-dur">
           <span
             style={`font-size:10px;padding:1px 6px;border-radius:4px;background:${colors.bg};color:${colors.fg}`}
           >
-            {entry.kind}
+            {options.entry.kind}
           </span>
         </span>
       </summary>
       <div class="tl-body">
-        {entry.display ? (
+        {options.entry.display ? (
           <pre style="color:#e2e8f0;font-family:monospace;font-size:12px;margin:0;padding:8px;white-space:pre-wrap;word-break:break-all">
-            {entry.display}
+            {options.entry.display}
           </pre>
         ) : (
           <div style="padding:4px 8px;color:#64748b;font-size:12px">No inspectable values</div>
@@ -205,8 +205,8 @@ function ServiceRow({ entry }: { entry: ServiceEntry }) {
   )
 }
 
-export function ServiceList({ services }: { services: Array<ServiceEntry> }) {
-  if (services.length === 0) {
+export function ServiceList(options: { services: Array<ServiceEntry> }) {
+  if (options.services.length === 0) {
     return <div class="empty">No services registered</div>
   }
   return (
@@ -216,7 +216,7 @@ export function ServiceList({ services }: { services: Array<ServiceEntry> }) {
         <span class="tl-cell tl-cell-name">Service</span>
         <span class="tl-cell tl-cell-dur">Kind</span>
       </div>
-      {services.map((s) => (
+      {options.services.map((s) => (
         <ServiceRow entry={s} />
       ))}
     </div>