effect-start 0.26.0 → 0.28.0

package/src/tower/ui/Shell.tsx

@@ -0,0 +1,74 @@
+export type NavTab =
+  | "traces"
+  | "metrics"
+  | "logs"
+  | "errors"
+  | "fibers"
+  | "routes"
+  | "system"
+  | "services"
+
+export function Sidebar(options: { prefix: string; active: NavTab }) {
+  return (
+    <div class="sidebar">
+      <div class="sidebar-title">Effect Tower</div>
+      <a
+        href={`${options.prefix}/traces`}
+        class={options.active === "traces" ? "nav-link active" : "nav-link"}
+      >
+        Traces
+      </a>
+      <a
+        href={`${options.prefix}/metrics`}
+        class={options.active === "metrics" ? "nav-link active" : "nav-link"}
+      >
+        Metrics
+      </a>
+      <a
+        href={`${options.prefix}/logs`}
+        class={options.active === "logs" ? "nav-link active" : "nav-link"}
+      >
+        Logs
+      </a>
+      <a
+        href={`${options.prefix}/errors`}
+        class={options.active === "errors" ? "nav-link active" : "nav-link"}
+      >
+        Errors
+      </a>
+      <a
+        href={`${options.prefix}/fibers`}
+        class={options.active === "fibers" ? "nav-link active" : "nav-link"}
+      >
+        Fibers
+      </a>
+      <a
+        href={`${options.prefix}/routes`}
+        class={options.active === "routes" ? "nav-link active" : "nav-link"}
+      >
+        Routes
+      </a>
+      <a
+        href={`${options.prefix}/system`}
+        class={options.active === "system" ? "nav-link active" : "nav-link"}
+      >
+        System
+      </a>
+      <a
+        href={`${options.prefix}/services`}
+        class={options.active === "services" ? "nav-link active" : "nav-link"}
+      >
+        Services
+      </a>
+    </div>
+  )
+}
+
+export function Shell(options: { prefix: string; active: NavTab; children: any }) {
+  return (
+    <div class="shell">
+      <Sidebar prefix={options.prefix} active={options.active} />
+      <div class="content">{options.children}</div>
+    </div>
+  )
+}

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

@@ -1,4 +1,4 @@
-import type * as ConsoleStore from "../ConsoleStore.ts"
+import type * as TowerStore from "../TowerStore.ts"
 
 function formatBytes(bytes: number): string {
   if (bytes < 1024) return `${bytes}B`
@@ -18,25 +18,27 @@ function formatUptime(seconds: number): string {
   return `${s}s`
 }
 
-function StatCard({ label, value, sub }: { label: string; value: string; sub?: string }) {
+function StatCard(options: { label: string; value: string; sub?: string }) {
   return (
     <div style="background:#111827;border:1px solid #374151;border-radius:6px;padding:12px;min-width:180px">
-      <div style="color:#9ca3af;font-size:11px;margin-bottom:4px">{label}</div>
-      <div style="color:#f3f4f6;font-size:22px;font-weight:700;font-family:monospace">{value}</div>
-      {sub && <div style="color:#6b7280;font-size:10px;margin-top:2px">{sub}</div>}
+      <div style="color:#9ca3af;font-size:11px;margin-bottom:4px">{options.label}</div>
+      <div style="color:#f3f4f6;font-size:22px;font-weight:700;font-family:monospace">
+        {options.value}
+      </div>
+      {options.sub && <div style="color:#6b7280;font-size:10px;margin-top:2px">{options.sub}</div>}
     </div>
   )
 }
 
-function BarMeter({ label, used, total }: { label: string; used: number; total: number }) {
-  const pct = total > 0 ? (used / total) * 100 : 0
+function BarMeter(options: { label: string; used: number; total: number }) {
+  const pct = options.total > 0 ? (options.used / options.total) * 100 : 0
   const color = pct > 90 ? "#ef4444" : pct > 70 ? "#f59e0b" : "#22c55e"
   return (
     <div style="background:#111827;border:1px solid #374151;border-radius:6px;padding:12px">
       <div style="display:flex;justify-content:space-between;margin-bottom:6px">
-        <span style="color:#9ca3af;font-size:11px">{label}</span>
+        <span style="color:#9ca3af;font-size:11px">{options.label}</span>
         <span style="color:#e5e7eb;font-size:11px;font-family:monospace">
-          {formatBytes(used)} / {formatBytes(total)}
+          {formatBytes(options.used)} / {formatBytes(options.total)}
         </span>
       </div>
       <div style="height:8px;background:#1f2937;border-radius:4px;overflow:hidden">
@@ -51,41 +53,45 @@ function BarMeter({ label, used, total }: { label: string; used: number; total:
   )
 }
 
-export function SystemStatsView({ stats }: { stats: ConsoleStore.ProcessStats }) {
-  const cpuTotal = stats.cpu.user + stats.cpu.system
+export function SystemStatsView(options: { stats: TowerStore.ProcessStats }) {
+  const cpuTotal = options.stats.cpu.user + options.stats.cpu.system
   return (
     <>
       <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:12px">
         <StatCard
           label="PID"
-          value={String(stats.pid)}
-          sub={`${stats.system.platform} ${stats.system.arch}`}
+          value={String(options.stats.pid)}
+          sub={`${options.stats.system.platform} ${options.stats.system.arch}`}
         />
-        <StatCard label="Uptime" value={formatUptime(stats.uptime)} />
+        <StatCard label="Uptime" value={formatUptime(options.stats.uptime)} />
         <StatCard
           label="CPU Time"
           value={`${(cpuTotal / 1_000_000).toFixed(2)}s`}
-          sub={`user ${(stats.cpu.user / 1_000_000).toFixed(2)}s / sys ${(stats.cpu.system / 1_000_000).toFixed(2)}s`}
+          sub={`user ${(options.stats.cpu.user / 1_000_000).toFixed(2)}s / sys ${(options.stats.cpu.system / 1_000_000).toFixed(2)}s`}
         />
         <StatCard
           label="Load Average"
-          value={stats.system.loadavg[0].toFixed(2)}
-          sub={`${stats.system.loadavg[0].toFixed(2)} / ${stats.system.loadavg[1].toFixed(2)} / ${stats.system.loadavg[2].toFixed(2)}  (${stats.system.cpuCount} cores)`}
+          value={options.stats.system.loadavg[0].toFixed(2)}
+          sub={`${options.stats.system.loadavg[0].toFixed(2)} / ${options.stats.system.loadavg[1].toFixed(2)} / ${options.stats.system.loadavg[2].toFixed(2)}  (${options.stats.system.cpuCount} cores)`}
         />
       </div>
       <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;padding:0 12px 12px">
-        <BarMeter label="Heap Memory" used={stats.memory.heapUsed} total={stats.memory.heapTotal} />
+        <BarMeter
+          label="Heap Memory"
+          used={options.stats.memory.heapUsed}
+          total={options.stats.memory.heapTotal}
+        />
         <BarMeter
           label="System Memory"
-          used={stats.system.totalmem - stats.system.freemem}
-          total={stats.system.totalmem}
+          used={options.stats.system.totalmem - options.stats.system.freemem}
+          total={options.stats.system.totalmem}
         />
       </div>
       <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:0 12px 12px">
-        <StatCard label="RSS" value={formatBytes(stats.memory.rss)} />
-        <StatCard label="Peak RSS" value={formatBytes(stats.resourceUsage.maxRSS)} />
-        <StatCard label="External" value={formatBytes(stats.memory.external)} />
-        <StatCard label="Array Buffers" value={formatBytes(stats.memory.arrayBuffers)} />
+        <StatCard label="RSS" value={formatBytes(options.stats.memory.rss)} />
+        <StatCard label="Peak RSS" value={formatBytes(options.stats.resourceUsage.maxRSS)} />
+        <StatCard label="External" value={formatBytes(options.stats.memory.external)} />
+        <StatCard label="Array Buffers" value={formatBytes(options.stats.memory.arrayBuffers)} />
       </div>
       <div style="padding:0 12px 12px">
         <div style="background:#111827;border:1px solid #374151;border-radius:6px;padding:12px">
@@ -94,33 +100,37 @@ export function SystemStatsView({ stats }: { stats: ConsoleStore.ProcessStats })
             <div style="display:flex;justify-content:space-between;font-size:12px">
               <span style="color:#6b7280">Page Faults (minor)</span>
               <span style="color:#e5e7eb;font-family:monospace">
-                {stats.resourceUsage.minorPageFault}
+                {options.stats.resourceUsage.minorPageFault}
               </span>
             </div>
             <div style="display:flex;justify-content:space-between;font-size:12px">
               <span style="color:#6b7280">Page Faults (major)</span>
               <span style="color:#e5e7eb;font-family:monospace">
-                {stats.resourceUsage.majorPageFault}
+                {options.stats.resourceUsage.majorPageFault}
               </span>
             </div>
             <div style="display:flex;justify-content:space-between;font-size:12px">
               <span style="color:#6b7280">FS Reads</span>
-              <span style="color:#e5e7eb;font-family:monospace">{stats.resourceUsage.fsRead}</span>
+              <span style="color:#e5e7eb;font-family:monospace">
+                {options.stats.resourceUsage.fsRead}
+              </span>
             </div>
             <div style="display:flex;justify-content:space-between;font-size:12px">
               <span style="color:#6b7280">FS Writes</span>
-              <span style="color:#e5e7eb;font-family:monospace">{stats.resourceUsage.fsWrite}</span>
+              <span style="color:#e5e7eb;font-family:monospace">
+                {options.stats.resourceUsage.fsWrite}
+              </span>
             </div>
             <div style="display:flex;justify-content:space-between;font-size:12px">
               <span style="color:#6b7280">Context Switches (vol)</span>
               <span style="color:#e5e7eb;font-family:monospace">
-                {stats.resourceUsage.voluntaryContextSwitches}
+                {options.stats.resourceUsage.voluntaryContextSwitches}
               </span>
             </div>
             <div style="display:flex;justify-content:space-between;font-size:12px">
               <span style="color:#6b7280">Context Switches (invol)</span>
               <span style="color:#e5e7eb;font-family:monospace">
-                {stats.resourceUsage.involuntaryContextSwitches}
+                {options.stats.resourceUsage.involuntaryContextSwitches}
               </span>
             </div>
           </div>

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

@@ -1,4 +1,4 @@
-import * as ConsoleStore from "../ConsoleStore.ts"
+import * as TowerStore from "../TowerStore.ts"
 
 function formatDuration(ms: number | undefined): string {
   if (ms == null) return "..."
@@ -13,22 +13,26 @@ function statusColor(status: string): string {
   return "#eab308"
 }
 
-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>
   )
 }
@@ -36,22 +40,22 @@ function StatusBadge({ status }: { status: string }) {
 // --- Tree building ---
 
 interface TreeSpan {
-  span: ConsoleStore.ConsoleSpan
+  span: TowerStore.TowerSpan
   depth: number
   childCount: number
   isLastChild: boolean
   ancestorHasNextSibling: Array<boolean>
 }
 
-function buildSpanTree(spans: Array<ConsoleStore.ConsoleSpan>): Array<TreeSpan> {
-  const byId = new Map<string, ConsoleStore.ConsoleSpan>()
-  const childrenOf = new Map<string, Array<ConsoleStore.ConsoleSpan>>()
+function buildSpanTree(spans: Array<TowerStore.TowerSpan>): Array<TreeSpan> {
+  const byId = new Map<bigint, TowerStore.TowerSpan>()
+  const childrenOf = new Map<bigint, Array<TowerStore.TowerSpan>>()
 
   for (const s of spans) {
     byId.set(s.spanId, s)
   }
 
-  const roots: Array<ConsoleStore.ConsoleSpan> = []
+  const roots: Array<TowerStore.TowerSpan> = []
   for (const s of spans) {
     if (s.parentSpanId && byId.has(s.parentSpanId)) {
       let children = childrenOf.get(s.parentSpanId)
@@ -65,7 +69,7 @@ function buildSpanTree(spans: Array<ConsoleStore.ConsoleSpan>): Array<TreeSpan>
     }
   }
 
-  const sortByStart = (a: ConsoleStore.ConsoleSpan, b: ConsoleStore.ConsoleSpan) =>
+  const sortByStart = (a: TowerStore.TowerSpan, b: TowerStore.TowerSpan) =>
     Number(a.startTime - b.startTime)
 
   roots.sort(sortByStart)
@@ -76,7 +80,7 @@ function buildSpanTree(spans: Array<ConsoleStore.ConsoleSpan>): Array<TreeSpan>
   const result: Array<TreeSpan> = []
 
   function walk(
-    span: ConsoleStore.ConsoleSpan,
+    span: TowerStore.TowerSpan,
     depth: number,
     isLast: boolean,
     ancestors: Array<boolean>,
@@ -103,25 +107,27 @@ function buildSpanTree(spans: Array<ConsoleStore.ConsoleSpan>): Array<TreeSpan>
 
 // --- Components ---
 
-function TreeConnectors({ tree }: { tree: TreeSpan }) {
-  if (tree.depth === 0) return null
+function TreeConnectors(options: { tree: TreeSpan }) {
+  if (options.tree.depth === 0) return null
 
-  const indent = tree.depth * 20
+  const indent = options.tree.depth * 20
   const elements: Array<any> = []
 
-  for (let i = 0; i < tree.ancestorHasNextSibling.length; i++) {
-    if (tree.ancestorHasNextSibling[i]) {
+  for (let i = 0; i < options.tree.ancestorHasNextSibling.length; i++) {
+    if (options.tree.ancestorHasNextSibling[i]) {
       elements.push(<div class="wf-vline" style={`left:${i * 20 + 6}px`} />)
     }
   }
 
-  if (tree.isLastChild) {
-    elements.push(<div class="wf-elbow" style={`left:${(tree.depth - 1) * 20 + 6}px`} />)
+  if (options.tree.isLastChild) {
+    elements.push(<div class="wf-elbow" style={`left:${(options.tree.depth - 1) * 20 + 6}px`} />)
   } else {
-    elements.push(<div class="wf-vline" style={`left:${(tree.depth - 1) * 20 + 6}px`} />)
+    elements.push(<div class="wf-vline" style={`left:${(options.tree.depth - 1) * 20 + 6}px`} />)
   }
 
-  elements.push(<div class="wf-hline" style={`left:${(tree.depth - 1) * 20 + 6}px;top:50%`} />)
+  elements.push(
+    <div class="wf-hline" style={`left:${(options.tree.depth - 1) * 20 + 6}px;top:50%`} />,
+  )
 
   return (
     <div class="wf-tree" style={`width:${indent}px;position:relative`}>
@@ -130,11 +136,11 @@ function TreeConnectors({ tree }: { tree: TreeSpan }) {
   )
 }
 
-function TimeAxis({ totalMs }: { totalMs: number }) {
+function TimeAxis(options: { totalMs: number }) {
   const ticks = 5
   const labels: Array<string> = []
   for (let i = 0; i <= ticks; i++) {
-    labels.push(formatDuration((totalMs / ticks) * i))
+    labels.push(formatDuration((options.totalMs / ticks) * i))
   }
   return (
     <div class="wf-axis">
@@ -148,21 +154,15 @@ function TimeAxis({ totalMs }: { totalMs: number }) {
   )
 }
 
-function WaterfallRow({
-  tree,
-  totalMs,
-  rootStart,
-}: {
-  tree: TreeSpan
-  totalMs: number
-  rootStart: bigint
-}) {
-  const s = tree.span
-  const offsetMs = Number(s.startTime - rootStart) / 1_000_000
+function WaterfallRow(options: { tree: TreeSpan; totalMs: number; rootStart: bigint }) {
+  const s = options.tree.span
+  const offsetMs = Number(s.startTime - options.rootStart) / 1_000_000
   const durMs = s.durationMs ?? 0
-  const leftPct = totalMs > 0 ? Math.min(100, (offsetMs / totalMs) * 100) : 0
+  const leftPct = options.totalMs > 0 ? Math.min(100, (offsetMs / options.totalMs) * 100) : 0
   const widthPct =
-    totalMs > 0 ? Math.max(0.5, Math.min(100 - leftPct, (durMs / totalMs) * 100)) : 100
+    options.totalMs > 0
+      ? Math.max(0.5, Math.min(100 - leftPct, (durMs / options.totalMs) * 100))
+      : 100
   const color = statusColor(s.status)
 
   const durLabelLeft = leftPct + widthPct + 0.5
@@ -170,9 +170,9 @@ function WaterfallRow({
   return (
     <div class="wf-row">
       <div class="wf-name">
-        <TreeConnectors tree={tree} />
+        <TreeConnectors tree={options.tree} />
         <span style="overflow:hidden;text-overflow:ellipsis">{s.name}</span>
-        {tree.childCount > 0 && <span class="wf-badge">{tree.childCount}</span>}
+        {options.tree.childCount > 0 && <span class="wf-badge">{options.tree.childCount}</span>}
       </div>
       <div class="wf-bar-cell">
         <div class="wf-bar" style={`left:${leftPct}%;width:${widthPct}%;background:${color}`} />
@@ -184,23 +184,19 @@ function WaterfallRow({
   )
 }
 
-function MiniWaterfall({
-  spans,
-  totalMs,
-  rootStart,
-}: {
-  spans: Array<ConsoleStore.ConsoleSpan>
+function MiniWaterfall(options: {
+  spans: Array<TowerStore.TowerSpan>
   totalMs: number
   rootStart: bigint
 }) {
-  if (totalMs <= 0) return <div class="mini-wf" />
+  if (options.totalMs <= 0) return <div class="mini-wf" />
   return (
     <div class="mini-wf">
-      {spans.map((s) => {
-        const offsetMs = Number(s.startTime - rootStart) / 1_000_000
+      {options.spans.map((s) => {
+        const offsetMs = Number(s.startTime - options.rootStart) / 1_000_000
         const durMs = s.durationMs ?? 0
-        const leftPct = Math.min(100, (offsetMs / totalMs) * 100)
-        const widthPct = Math.max(0.3, Math.min(100 - leftPct, (durMs / totalMs) * 100))
+        const leftPct = Math.min(100, (offsetMs / options.totalMs) * 100)
+        const widthPct = Math.max(0.3, Math.min(100 - leftPct, (durMs / options.totalMs) * 100))
         return (
           <div
             class="mini-wf-bar"
@@ -215,9 +211,9 @@ function MiniWaterfall({
 // --- Exports ---
 
 export function groupByTraceId(
-  spans: Array<ConsoleStore.ConsoleSpan>,
-): Map<string, Array<ConsoleStore.ConsoleSpan>> {
-  const groups = new Map<string, Array<ConsoleStore.ConsoleSpan>>()
+  spans: Array<TowerStore.TowerSpan>,
+): Map<bigint, Array<TowerStore.TowerSpan>> {
+  const groups = new Map<bigint, Array<TowerStore.TowerSpan>>()
   for (const span of spans) {
     let group = groups.get(span.traceId)
     if (!group) {
@@ -229,13 +225,13 @@ export function groupByTraceId(
   return groups
 }
 
-export function TraceGroup({ spans }: { spans: Array<ConsoleStore.ConsoleSpan> }) {
-  if (spans.length === 0) return null
-  const root = spans.find((s) => !s.parentSpanId) ?? spans[0]
+export function TraceGroup(options: { spans: Array<TowerStore.TowerSpan> }) {
+  if (options.spans.length === 0) return null
+  const root = options.spans.find((s) => !s.parentSpanId) ?? options.spans[0]
   const traceId = root.traceId
   const totalMs = root.durationMs ?? 0
   const rootStart = root.startTime
-  const hasError = spans.some((s) => s.status === "error")
+  const hasError = options.spans.some((s) => s.status === "error")
   const status = hasError ? "error" : root.status
 
   return (
@@ -247,28 +243,28 @@ export function TraceGroup({ spans }: { spans: Array<ConsoleStore.ConsoleSpan> }
           />
         </span>
         <span class="tl-cell tl-cell-name">{root.name}</span>
-        <span class="tl-cell tl-cell-spans">{spans.length}</span>
+        <span class="tl-cell tl-cell-spans">{options.spans.length}</span>
         <span class="tl-cell tl-cell-dur">{formatDuration(totalMs)}</span>
-        <span class="tl-cell tl-cell-id">{traceId.slice(0, 12)}</span>
+        <span class="tl-cell tl-cell-id">{String(traceId).slice(0, 12)}</span>
       </summary>
       <div class="tl-body">
         <div style="display:flex;gap:12px;align-items:center;margin-bottom:8px">
           <a
-            href={`${ConsoleStore.store.prefix}/traces/${traceId}`}
+            href={`${TowerStore.store.prefix}/traces/${traceId}`}
             style="color:#38bdf8;font-size:12px;text-decoration:none"
           >
             Full trace view
           </a>
           <StatusBadge status={status} />
           <span style="color:#64748b;font-size:11px">
-            {spans.length} span{spans.length !== 1 ? "s" : ""}
+            {options.spans.length} span{options.spans.length !== 1 ? "s" : ""}
           </span>
           <span style="color:#64748b;font-size:11px;font-family:monospace">
             {formatDuration(totalMs)}
           </span>
           <span style="color:#475569;font-size:10px;font-family:monospace">{traceId}</span>
         </div>
-        {spans.map((s) => {
+        {options.spans.map((s) => {
           const offsetMs = Number(s.startTime - rootStart) / 1_000_000
           const leftPct = totalMs > 0 ? Math.min(100, (offsetMs / totalMs) * 100) : 0
           const widthPct =
@@ -299,8 +295,8 @@ export function TraceGroup({ spans }: { spans: Array<ConsoleStore.ConsoleSpan> }
   )
 }
 
-export function TraceGroups({ spans }: { spans: Array<ConsoleStore.ConsoleSpan> }) {
-  const groups = groupByTraceId(spans)
+export function TraceGroups(options: { spans: Array<TowerStore.TowerSpan> }) {
+  const groups = groupByTraceId(options.spans)
   const sorted = Array.from(groups.values())
     .sort((a, b) => Number(b[0].startTime) - Number(a[0].startTime))
     .slice(0, 50)
@@ -324,28 +320,25 @@ export function TraceGroups({ spans }: { spans: Array<ConsoleStore.ConsoleSpan>
   )
 }
 
-export function TraceDetail({
-  prefix,
-  spans,
-}: {
-  prefix: string
-  spans: Array<ConsoleStore.ConsoleSpan>
-}) {
-  if (spans.length === 0) {
+export function TraceDetail(options: { prefix: string; spans: Array<TowerStore.TowerSpan> }) {
+  if (options.spans.length === 0) {
     return <div class="empty">Trace not found</div>
   }
-  const root = spans.find((s) => !s.parentSpanId) ?? spans[0]
+  const root = options.spans.find((s) => !s.parentSpanId) ?? options.spans[0]
   const traceId = root.traceId
   const totalMs = root.durationMs ?? 0
   const rootStart = root.startTime
   const startDate = new Date(Number(rootStart) / 1_000_000)
-  const tree = buildSpanTree(spans)
+  const tree = buildSpanTree(options.spans)
 
   return (
     <>
       <div style="padding:12px 16px;border-bottom:1px solid #1e293b">
         <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
-          <a href={`${prefix}/traces`} style="color:#64748b;text-decoration:none;font-size:12px">
+          <a
+            href={`${options.prefix}/traces`}
+            style="color:#64748b;text-decoration:none;font-size:12px"
+          >
             Traces
           </a>
           <span style="color:#475569">/</span>
@@ -354,7 +347,7 @@ export function TraceDetail({
         <div style="display:flex;gap:16px;font-size:12px;color:#94a3b8;align-items:center">
           <StatusBadge status={root.status} />
           <span>
-            {spans.length} span{spans.length !== 1 ? "s" : ""}
+            {options.spans.length} span{options.spans.length !== 1 ? "s" : ""}
           </span>
           <span>{formatDuration(totalMs)}</span>
           <span>{startDate.toLocaleTimeString("en", { hour12: false })}</span>
@@ -363,7 +356,7 @@ export function TraceDetail({
       </div>
 
       <div style="padding:8px 16px">
-        <MiniWaterfall spans={spans} totalMs={totalMs} rootStart={rootStart} />
+        <MiniWaterfall spans={options.spans} totalMs={totalMs} rootStart={rootStart} />
       </div>
 
       <div style="padding:0 8px">

package/src/x/cloudflare/CloudflareTunnel.ts

@@ -20,7 +20,7 @@ export const start = (opts: {
       opts.tunnelName,
     ].flatMap((v) => v)
 
-    const proc = yield* System.spawn(command, args)
+    const proc = yield* System.spawn([command, ...args])
 
     yield* Effect.logInfo(
       `Cloudflare tunnel started name=${opts.tunnelName} pid=${proc.pid} tunnelUrl=${

package/src/x/tailscale/TailscaleTunnel.ts

@@ -18,7 +18,7 @@ interface TailscaleStatus {
 
 const getStatus = (command: string) =>
   Effect.gen(function* () {
-    const proc = yield* System.spawn(command, ["status", "--json"])
+    const proc = yield* System.spawn([command, "status", "--json"])
     const exitCode = yield* proc.exitCode
 
     if (exitCode !== 0) {
@@ -56,9 +56,9 @@ const serve = (opts: {
 }) =>
   Effect.gen(function* () {
     const logPrefix = opts.logPrefix ?? "TailscaleTunnel: "
-    const args = [opts.public ? "funnel" : "serve", String(opts.port)]
+    const subcommand = opts.public ? "funnel" : "serve"
 
-    const proc = yield* System.spawn(opts.command, args)
+    const proc = yield* System.spawn([opts.command, subcommand, String(opts.port)])
 
     yield* Function.pipe(
       Stream.merge(proc.stdout, proc.stderr),

package/src/x/tailwind/compile.ts

@@ -20,24 +20,21 @@ export interface CompileOptions {
   customJsResolver?: Resolver
 }
 
-function createCompileOptions({
-  base,
-  from,
-  polyfills,
-  onDependency,
-
-  customCssResolver,
-  customJsResolver,
-}: CompileOptions) {
+function createCompileOptions(options: CompileOptions) {
   return {
-    base,
-    polyfills,
-    from,
+    base: options.base,
+    polyfills: options.polyfills,
+    from: options.from,
     async loadModule(id: string, base: string) {
-      return loadModule(id, base, onDependency, customJsResolver)
+      return loadModule(id, base, options.onDependency, options.customJsResolver)
     },
     async loadStylesheet(id: string, sheetBase: string) {
-      let sheet = await loadStylesheet(id, sheetBase, onDependency, customCssResolver)
+      let sheet = await loadStylesheet(
+        id,
+        sheetBase,
+        options.onDependency,
+        options.customCssResolver,
+      )
 
       return sheet
     },