effect-start 0.27.0 → 0.28.0

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

@@ -0,0 +1,90 @@
+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 Errors from "../../ui/Errors.tsx"
+import * as Shell from "../../ui/Shell.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("errorSearch") || ""
+    const tag = url.searchParams.get("errorTag") || ""
+    const allErrors = yield* TowerStore.allErrors(TowerStore.store.sql)
+    const tagSet = new Set<string>()
+    for (const error of allErrors) {
+      for (const d of error.details) {
+        if (d.tag) tagSet.add(d.tag)
+      }
+    }
+    const sortedTags = Array.from(tagSet).sort()
+    let errors = allErrors
+    if (tag) {
+      errors = errors.filter((e) => e.details.some((d) => d.tag && d.tag.startsWith(tag)))
+    }
+    if (search) {
+      const lower = search.toLowerCase()
+      errors = errors.filter((e) => {
+        const firstLine = e.prettyPrint.split("\n")[0] ?? ""
+        return firstLine.toLowerCase().includes(lower)
+      })
+    }
+    errors = errors.reverse()
+
+    return (
+      <Shell.Shell prefix={prefix} active="errors">
+        <form
+          data-signals={{ errorSearch: "", errorTag: "" }}
+          style="display:flex;flex-direction:column;flex:1;overflow:hidden"
+        >
+          <div class="tab-header">Errors</div>
+          <div class="filter-bar">
+            <input
+              type="text"
+              name="errorSearch"
+              placeholder="Search..."
+              data-bind:errorSearch
+              data-on:input={(c) => c.actions.get(location.href, { contentType: "form" })}
+            />
+            <input
+              type="text"
+              name="errorTag"
+              placeholder="Tag..."
+              list="error-tags"
+              data-bind:errorTag
+              data-on:input={(c) => c.actions.get(location.href, { contentType: "form" })}
+            />
+            <datalist id="error-tags">
+              {sortedTags.map((t) => (
+                <option value={t} />
+              ))}
+            </datalist>
+          </div>
+          <div id="errors-list" class="tab-body">
+            {errors.map((e) => (
+              <Errors.ErrorLine error={e} />
+            ))}
+          </div>
+        </form>
+      </Shell.Shell>
+    )
+  }),
+  Route.sse(
+    Stream.fromPubSub(TowerStore.store.events).pipe(
+      Stream.filter((e) => e._tag === "Error"),
+      Stream.map((e) => {
+        const html = HyperHtml.renderToString(<Errors.ErrorLine error={e.error} />).replace(
+          /\n/g,
+          "",
+        )
+        return {
+          event: "datastar-patch-elements",
+          data: `selector #errors-list\nmode prepend\nelements ${html}`,
+        }
+      }),
+    ),
+  ),
+)

package/src/tower/routes/fiberDetail.tsx

@@ -0,0 +1,51 @@
+import * as Schema from "effect/Schema"
+import * as Route from "../../Route.ts"
+import * as RouteSchema from "../../RouteSchema.ts"
+import * as Unique from "../../Unique.ts"
+import * as HyperRoute from "../../hyper/HyperRoute.ts"
+import * as TowerStore from "../TowerStore.ts"
+import * as Fibers from "../ui/Fibers.tsx"
+import * as Shell from "../ui/Shell.tsx"
+
+export default Route.get(
+  RouteSchema.schemaPathParams(Schema.Struct({ id: Schema.String })),
+  HyperRoute.html(function* (ctx) {
+    const fiberId = ctx.pathParams.id
+    const fiberName = fiberId.startsWith("#") ? fiberId : `#${fiberId}`
+
+    const fiberLogs = yield* TowerStore.logsByFiberId(TowerStore.store.sql, fiberName)
+    const fiberSpans = yield* TowerStore.spansByFiberId(TowerStore.store.sql, fiberName)
+
+    const fiberNum = parseInt(fiberName.slice(1), 10)
+    const counter = TowerStore.fiberIdCounter()
+    let alive: "alive" | "dead" | "unknown" = "unknown"
+    if (!isNaN(fiberNum)) {
+      if (fiberNum < counter) alive = "dead"
+      else alive = "unknown"
+    }
+    if (fiberLogs.length > 0 || fiberSpans.length > 0) {
+      const hasRecent = fiberLogs.some(
+        (l) => Date.now() - Number(Unique.snowflake.timestamp(l.id)) < 5000,
+      )
+      if (hasRecent) alive = "alive"
+      else if (fiberNum < counter) alive = "dead"
+    }
+
+    const parents = yield* TowerStore.getParentChain(TowerStore.store.sql, fiberName)
+    const fiberContext = yield* TowerStore.getFiberContext(TowerStore.store.sql, fiberName)
+
+    return (
+      <Shell.Shell prefix={TowerStore.store.prefix} active="fibers">
+        <Fibers.FiberDetail
+          prefix={TowerStore.store.prefix}
+          fiberId={fiberName}
+          logs={fiberLogs}
+          spans={fiberSpans}
+          alive={alive}
+          parents={parents}
+          context={fiberContext}
+        />
+      </Shell.Shell>
+    )
+  }),
+)

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

@@ -0,0 +1,46 @@
+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 Fibers from "../../ui/Fibers.tsx"
+import * as Shell from "../../ui/Shell.tsx"
+
+export default Route.get(
+  HyperRoute.html(function* () {
+    const logs = yield* TowerStore.allLogs(TowerStore.store.sql)
+    const spans = yield* TowerStore.allSpans(TowerStore.store.sql)
+    const fibers = Fibers.collectFibers(logs, spans)
+    return (
+      <Shell.Shell prefix={TowerStore.store.prefix} active="fibers">
+        <div style="display:flex;flex-direction:column;flex:1;overflow:hidden">
+          <div class="tab-header">Fibers</div>
+          <div id="fibers-container" class="tab-body">
+            <Fibers.FiberList fibers={fibers} prefix={TowerStore.store.prefix} />
+          </div>
+          <div data-init={`@get('${TowerStore.store.prefix}/fibers')`} />
+        </div>
+      </Shell.Shell>
+    )
+  }),
+  Route.sse(
+    Stream.fromPubSub(TowerStore.store.events).pipe(
+      Stream.filter((e) => e._tag === "SpanStart" || e._tag === "SpanEnd" || e._tag === "Log"),
+      Stream.mapEffect(() =>
+        Effect.gen(function* () {
+          const logs = yield* TowerStore.allLogs(TowerStore.store.sql)
+          const spans = yield* TowerStore.allSpans(TowerStore.store.sql)
+          const fibers = Fibers.collectFibers(logs, spans)
+          const html = HyperHtml.renderToString(
+            <Fibers.FiberList fibers={fibers} prefix={TowerStore.store.prefix} />,
+          ).replace(/\n/g, "")
+          return {
+            event: "datastar-patch-elements",
+            data: `selector #fibers-container\nmode inner\nelements ${html}`,
+          }
+        }),
+      ),
+    ),
+  ),
+)

package/src/tower/routes/layout.html

@@ -0,0 +1,340 @@
+<!doctype html>
+<html style="height: 100%">
+  <head>
+    <title>Effect Tower</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script type="module" src="effect-start/datastar"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        height: 100%;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        background: #0f172a;
+        color: #e5e7eb;
+      }
+      .shell {
+        display: flex;
+        height: 100%;
+      }
+      .sidebar {
+        width: 180px;
+        background: #1e293b;
+        border-right: 1px solid #334155;
+        padding: 16px 0;
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+      }
+      .sidebar-title {
+        font-size: 14px;
+        font-weight: 700;
+        color: #f1f5f9;
+        padding: 0 16px 16px;
+        border-bottom: 1px solid #334155;
+        margin-bottom: 8px;
+      }
+      .nav-link {
+        display: block;
+        padding: 8px 16px;
+        color: #94a3b8;
+        text-decoration: none;
+        font-size: 13px;
+      }
+      .nav-link:hover {
+        color: #e2e8f0;
+        background: #334155;
+      }
+      .nav-link.active {
+        color: #38bdf8;
+        background: #0f172a;
+        border-right: 2px solid #38bdf8;
+      }
+      .content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+      .tab-header {
+        font-size: 15px;
+        font-weight: 600;
+        padding: 12px 16px;
+        border-bottom: 1px solid #1e293b;
+      }
+      .tab-body {
+        flex: 1;
+        overflow-y: auto;
+        padding: 8px;
+      }
+      .filter-bar {
+        display: flex;
+        gap: 8px;
+        padding: 8px 16px;
+        border-bottom: 1px solid #1e293b;
+      }
+      .filter-bar select,
+      .filter-bar input {
+        background: #1e293b;
+        border: 1px solid #334155;
+        color: #e5e7eb;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+      }
+      .filter-bar input {
+        flex: 1;
+      }
+      .metrics-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: 12px;
+      }
+      .empty {
+        color: #64748b;
+        font-size: 13px;
+        text-align: center;
+        padding: 48px 0;
+      }
+
+      /* Waterfall grid */
+      .wf-grid {
+        display: grid;
+        grid-template-columns: minmax(200px, 30%) 1fr;
+        font-size: 12px;
+      }
+      .wf-row {
+        display: contents;
+      }
+      .wf-row:hover > .wf-name,
+      .wf-row:hover > .wf-bar-cell {
+        background: #1e293b;
+      }
+      .wf-name {
+        padding: 4px 8px;
+        font-family: monospace;
+        color: #d1d5db;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        border-bottom: 1px solid #1e293b;
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+      .wf-bar-cell {
+        padding: 4px 8px;
+        position: relative;
+        border-bottom: 1px solid #1e293b;
+        display: flex;
+        align-items: center;
+      }
+      .wf-bar {
+        height: 14px;
+        border-radius: 2px;
+        position: absolute;
+        min-width: 2px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+      .wf-dur {
+        position: absolute;
+        color: #9ca3af;
+        font-family: monospace;
+        font-size: 11px;
+        white-space: nowrap;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+      .wf-axis {
+        display: grid;
+        grid-template-columns: minmax(200px, 30%) 1fr;
+        border-bottom: 1px solid #334155;
+        font-size: 11px;
+        color: #64748b;
+        font-family: monospace;
+      }
+      .wf-axis-ticks {
+        display: flex;
+        justify-content: space-between;
+        padding: 4px 8px;
+      }
+
+      /* Tree connectors */
+      .wf-tree {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        flex-shrink: 0;
+      }
+      .wf-vline {
+        position: absolute;
+        width: 1px;
+        background: #475569;
+        top: -4px;
+        bottom: -4px;
+      }
+      .wf-branch {
+        position: absolute;
+        height: 1px;
+        background: #475569;
+        width: 8px;
+      }
+      .wf-elbow {
+        position: absolute;
+        width: 1px;
+        background: #475569;
+        top: -4px;
+        bottom: 50%;
+      }
+      .wf-hline {
+        position: absolute;
+        height: 1px;
+        background: #475569;
+        width: 8px;
+      }
+
+      /* Child count badge */
+      .wf-badge {
+        font-size: 10px;
+        padding: 0 5px;
+        border-radius: 8px;
+        background: #1e293b;
+        color: #64748b;
+        flex-shrink: 0;
+      }
+
+      /* Mini waterfall */
+      .mini-wf {
+        height: 20px;
+        background: #1f2937;
+        border-radius: 3px;
+        position: relative;
+        overflow: hidden;
+      }
+      .mini-wf-bar {
+        position: absolute;
+        height: 6px;
+        border-radius: 1px;
+        min-width: 2px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      /* Trace cards */
+      .trace-card {
+        display: block;
+        margin-bottom: 8px;
+        background: #111827;
+        border: 1px solid #1e293b;
+        border-radius: 6px;
+        overflow: hidden;
+        text-decoration: none;
+        color: inherit;
+        transition: border-color 0.15s;
+      }
+      .trace-card:hover {
+        border-color: #475569;
+      }
+
+      /* Trace list */
+      .tl-grid {
+        font-size: 12px;
+      }
+      .tl-cols {
+        display: grid;
+        grid-template-columns: 24px 1fr 48px 72px 90px;
+      }
+      .tl-header {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        background: #0f172a;
+        border-bottom: 1px solid #334155;
+        color: #64748b;
+        font-size: 11px;
+      }
+      .tl-row {
+        border-bottom: 1px solid #1e293b;
+      }
+      .tl-row[open] {
+        background: #111827;
+      }
+      .tl-summary {
+        cursor: pointer;
+        user-select: none;
+        list-style: none;
+      }
+      .tl-summary::-webkit-details-marker {
+        display: none;
+      }
+      .tl-summary:hover {
+        background: #1e293b;
+      }
+      .tl-cell {
+        padding: 6px 8px;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+      }
+      .tl-cell-name {
+        font-family: monospace;
+        color: #e2e8f0;
+        font-weight: 600;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .tl-cell-spans {
+        color: #64748b;
+        font-size: 11px;
+        justify-content: flex-end;
+      }
+      .tl-cell-dur {
+        color: #64748b;
+        font-family: monospace;
+        font-size: 11px;
+        justify-content: flex-end;
+      }
+      .tl-cell-id {
+        color: #475569;
+        font-family: monospace;
+        font-size: 10px;
+      }
+      .tl-body {
+        padding: 8px 12px 12px;
+        border-top: 1px solid #1e293b;
+      }
+
+      /* Span detail panel */
+      .span-panel {
+        background: #111827;
+        border: 1px solid #1e293b;
+        border-radius: 6px;
+        overflow: hidden;
+        margin: 4px 0;
+      }
+      .span-panel-header {
+        padding: 6px 12px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        user-select: none;
+      }
+      .span-panel-header:hover {
+        background: #1e293b;
+      }
+      .span-panel-body {
+        padding: 0 12px 8px;
+      }
+    </style>
+  </head>
+  <body>
+    %children%
+  </body>
+</html>

package/src/tower/routes/layout.tsx

@@ -0,0 +1,4 @@
+import * as BunRoute from "../../bun/BunRoute.ts"
+import * as Route from "../../Route.ts"
+
+export default Route.use(BunRoute.htmlBundle(() => import("./layout.html")))

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

@@ -0,0 +1,73 @@
+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 Logs from "../../ui/Logs.tsx"
+import * as Shell from "../../ui/Shell.tsx"
+
+const prefix = TowerStore.store.prefix
+
+export default Route.get(
+  HyperRoute.html(function* (ctx) {
+    const url = new URL(ctx.request.url)
+    const level = url.searchParams.get("logLevel") || ""
+    const search = url.searchParams.get("logSearch") || ""
+    let logs = yield* TowerStore.allLogs(TowerStore.store.sql)
+    if (level) logs = logs.filter((l) => l.level === level)
+    if (search) {
+      const lower = search.toLowerCase()
+      logs = logs.filter((l) => l.message.toLowerCase().includes(lower))
+    }
+    logs = logs.reverse()
+
+    return (
+      <Shell.Shell prefix={prefix} active="logs">
+        <form
+          data-signals={{ logLevel: "", logSearch: "" }}
+          style="display:flex;flex-direction:column;flex:1;overflow:hidden"
+        >
+          <div class="tab-header">Logs</div>
+          <div class="filter-bar">
+            <select
+              name="logLevel"
+              data-bind:logLevel
+              data-on:change={(c) => c.actions.get(location.href, { contentType: "form" })}
+            >
+              <option value="">All levels</option>
+              <option value="DEBUG">DEBUG</option>
+              <option value="INFO">INFO</option>
+              <option value="WARNING">WARNING</option>
+              <option value="ERROR">ERROR</option>
+              <option value="FATAL">FATAL</option>
+            </select>
+            <input
+              type="text"
+              name="logSearch"
+              placeholder="Search..."
+              data-bind:logSearch
+              data-on:input={(c) => c.actions.get(location.href, { contentType: "form" })}
+            />
+          </div>
+          <div id="logs-container" class="tab-body">
+            {logs.map((l) => (
+              <Logs.LogLine log={l} />
+            ))}
+          </div>
+        </form>
+      </Shell.Shell>
+    )
+  }),
+  Route.sse(
+    Stream.fromPubSub(TowerStore.store.events).pipe(
+      Stream.filter((e) => e._tag === "Log"),
+      Stream.map((e) => {
+        const html = HyperHtml.renderToString(<Logs.LogLine log={e.log} />).replace(/\n/g, "")
+        return {
+          event: "datastar-patch-elements",
+          data: `selector #logs-container\nmode prepend\nelements ${html}`,
+        }
+      }),
+    ),
+  ),
+)

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

@@ -0,0 +1,36 @@
+import * as Stream from "effect/Stream"
+import * as Route from "../../../Route.ts"
+import * as HyperHtml from "../../../hyper/HyperHtml.ts"
+import * as HyperRoute from "../../../hyper/HyperRoute.ts"
+import * as TowerStore from "../../TowerStore.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={TowerStore.store.prefix} active="metrics">
+        <div class="tab-header">Metrics</div>
+        <div id="metrics-container" class="tab-body metrics-grid">
+          <Metrics.MetricsGrid metrics={TowerStore.store.metrics} />
+        </div>
+        <div data-init={`@get('${TowerStore.store.prefix}/metrics')`} />
+      </Shell.Shell>
+    )
+  }),
+  Route.sse(
+    Stream.fromPubSub(TowerStore.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/tower/routes/route.tsx

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

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

@@ -0,0 +1,30 @@
+import * as Route from "../../../Route.ts"
+import * as RouteTree from "../../../RouteTree.ts"
+import * as HyperRoute from "../../../hyper/HyperRoute.ts"
+import * as TowerStore from "../../TowerStore.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={TowerStore.store.prefix} active="routes">
+        <div class="tab-header">Routes</div>
+        <div class="tab-body">
+          <Routes.RouteList routes={routes} />
+        </div>
+      </Shell.Shell>
+    )
+  }),
+)