effect-start 0.29.0 → 0.30.1

package/src/RouteBody.ts

@@ -3,6 +3,7 @@ import type * as Stream from "effect/Stream"
 import type * as Utils from "effect/Utils"
 import * as Entity from "./Entity.ts"
 import * as Route from "./Route.ts"
+import * as StreamExtra from "./_StreamExtra.ts"
 import type * as Values from "./_Values.ts"
 
 export type Format = "text" | "html" | "json" | "bytes" | "*"
@@ -21,21 +22,36 @@ type YieldError<T> = T extends Utils.YieldWrap<Effect.Effect<any, infer E, any>>
 
 type YieldContext<T> = T extends Utils.YieldWrap<Effect.Effect<any, any, infer R>> ? R : never
 
+type Next<B, A> = (context?: Partial<B> & Record<string, unknown>) => Entity.Entity<UnwrapStream<A>>
+
+type HandlerReturn<A> =
+  | A
+  | Entity.Entity<A>
+  | ((self: Route.RouteSet.Any) => Route.RouteSet.Any)
+
+type HandlerFunction<B, A, E, R> = (
+  context: Values.Simplify<B>,
+  next: Next<B, A>,
+) =>
+  | Effect.Effect<HandlerReturn<A>, E, R>
+  | Generator<Utils.YieldWrap<Effect.Effect<unknown, E, R>>, HandlerReturn<A>, unknown>
+
 export type GeneratorHandler<B, A, Y> = (
   context: Values.Simplify<B>,
-  next: (context?: Partial<B> & Record<string, unknown>) => Entity.Entity<UnwrapStream<A>>,
-) => Generator<Y, A | Entity.Entity<A>, never>
+  next: Next<B, A>,
+) => Generator<Y, HandlerReturn<A>, never>
 
 export type HandlerInput<B, A, E, R> =
   | A
   | Entity.Entity<A>
-  | Effect.Effect<A | Entity.Entity<A>, E, R>
-  | ((
-      context: Values.Simplify<B>,
-      next: (context?: Partial<B> & Record<string, unknown>) => Entity.Entity<UnwrapStream<A>>,
-    ) =>
-      | Effect.Effect<A | Entity.Entity<A>, E, R>
-      | Generator<Utils.YieldWrap<Effect.Effect<unknown, E, R>>, A | Entity.Entity<A>, unknown>)
+  | Effect.Effect<HandlerReturn<A>, E, R>
+  | HandlerFunction<B, A, E, R>
+
+function isHandlerFunction<B, A, E, R>(
+  handler: HandlerInput<B, A, E, R>,
+): handler is HandlerFunction<B, A, E, R> {
+  return typeof handler === "function"
+}
 
 export function handle<B, A, Y extends Utils.YieldWrap<Effect.Effect<any, any, any>>>(
   handler: GeneratorHandler<B, A, Y>,
@@ -46,38 +62,44 @@ export function handle<B, A, E, R>(
 export function handle<B, A, E, R>(
   handler: HandlerInput<B, A, E, R>,
 ): Route.Route.Handler<B, A, E, R> {
-  if (typeof handler === "function") {
-    return (
-      context: B,
-      next: (context?: Partial<B> & Record<string, unknown>) => Entity.Entity<A>,
-    ): Effect.Effect<Entity.Entity<A>, E, R> => {
-      const result = (handler as Function)(context, next)
+  if (isHandlerFunction(handler)) {
+    return ((context: any, next: any) => {
+      const result = handler(context, next)
       const effect = Effect.isEffect(result)
-        ? (result as Effect.Effect<A | Entity.Entity<A>, E, R>)
-        : (Effect.gen(function* () {
+        ? result
+        : Effect.gen(function* () {
             return yield* result
-          }) as Effect.Effect<A | Entity.Entity<A>, E, R>)
-      return Effect.map(effect, normalizeToEntity)
-    }
+          })
+      return Effect.flatMap(effect, normalizeToEntity)
+    }) as Route.Route.Handler<B, A, E, R>
   }
   if (Effect.isEffect(handler)) {
-    return (_context, _next) =>
-      Effect.map(handler, normalizeToEntity) as Effect.Effect<Entity.Entity<A>, E, R>
+    return ((_context: any, _next: any) =>
+      Effect.flatMap(handler, normalizeToEntity)) as Route.Route.Handler<B, A, E, R>
   }
   if (Entity.isEntity(handler)) {
     return (_context, _next) => Effect.succeed(handler as Entity.Entity<A>)
   }
-  return (_context, _next) => Effect.succeed(normalizeToEntity(handler as A) as Entity.Entity<A>)
+  return ((_context: any, _next: any) =>
+    normalizeToEntity(handler)) as Route.Route.Handler<B, A, E, R>
 }
 
-function normalizeToEntity<A>(value: A | Entity.Entity<A>): Entity.Entity<A> {
+function normalizeToEntity(value: unknown): Effect.Effect<Entity.Entity<any>> {
+  if (typeof value === "function") {
+    const result = (value as (self: Route.RouteSet.Any) => Route.RouteSet.Any)(Route.empty)
+    const routes = Route.items(result)
+    const route = routes[0]
+    if (route) {
+      return route.handler({}, () => Entity.make("")) as Effect.Effect<Entity.Entity<any>>
+    }
+  }
   if (Entity.isEntity(value)) {
-    return value as Entity.Entity<A>
+    return Effect.succeed(value)
   }
-  return Entity.make(value as A, { status: 200 })
+  return Effect.succeed(Entity.make(value, { status: 200 }))
 }
 
-export interface BuildReturn<Value, F extends Format> {
+export interface BuildReturn<Value, F extends Format, Body = never> {
   <
     D extends Route.RouteDescriptor.Any,
     B,
@@ -91,7 +113,7 @@ export interface BuildReturn<Value, F extends Format> {
   ) => Route.RouteSet.RouteSet<
     D,
     B,
-    [...I, Route.Route.Route<{ format: F }, {}, A, YieldError<Y>, YieldContext<Y>>]
+    [...I, Route.Route.Route<{ format: F }, {}, [Body] extends [never] ? A : Body, YieldError<Y>, YieldContext<Y>>]
   >
 
   <
@@ -105,50 +127,54 @@ export interface BuildReturn<Value, F extends Format> {
     handler: HandlerInput<NoInfer<D & B & Route.ExtractBindings<I> & { format: F }>, A, E, R>,
   ): (
     self: Route.RouteSet.RouteSet<D, B, I>,
-  ) => Route.RouteSet.RouteSet<D, B, [...I, Route.Route.Route<{ format: F }, {}, A, E, R>]>
+  ) => Route.RouteSet.RouteSet<D, B, [...I, Route.Route.Route<{ format: F }, {}, [Body] extends [never] ? A : Body, E, R>]>
 }
 
-export function build<Value, F extends Format>(descriptors: { format: F }) {
+export function build<Value, F extends Format>(options: { format: F }): BuildReturn<Value, F>
+export function build<Value, Body, F extends Format>(options: {
+  format: F
+  handle: (body: Value) => Body
+}): BuildReturn<Value, F, Body>
+export function build<Value, F extends Format>(options: {
+  format: F
+  handle?: (body: any) => any
+}): any {
+  const { handle: handleBody, ...descriptors } = options
   return function <
     D extends Route.RouteDescriptor.Any,
-    B extends {},
+    B,
     I extends Route.Route.Tuple,
     A extends F extends "json" ? Value : Value | Stream.Stream<Value, any, any>,
     E = never,
     R = never,
   >(handler: HandlerInput<NoInfer<D & B & Route.ExtractBindings<I> & { format: F }>, A, E, R>) {
-    return function (self: Route.RouteSet.RouteSet<D, B, I>) {
+    return (self: Route.RouteSet.RouteSet<D, B, I>) => {
       const contentType = formatToContentType[descriptors.format]
       const baseHandler = handle(handler)
-      const wrappedHandler: Route.Route.Handler<
-        D & B & Route.ExtractBindings<I> & { format: F },
-        A,
-        E,
-        R
-      > = (ctx, next) =>
-        Effect.map(baseHandler(ctx as any, next as any), (entity) =>
-          entity.headers["content-type"]
-            ? entity
-            : Entity.make(entity.body, {
-                status: entity.status,
-                url: entity.url,
-                headers: { ...entity.headers, "content-type": contentType },
-              }),
+      const wrappedHandler: Route.Route.Handler<{ format: F }, A, E, R> = (ctx, next) =>
+        baseHandler(ctx as D & B & Route.ExtractBindings<I> & { format: F }, next).pipe(
+          Effect.map((entity) => {
+            const body = handleBody && !StreamExtra.isStream(entity.body) ? handleBody(entity.body) : entity.body
+            if (body === entity.body && (entity.headers["content-type"] || contentType === undefined))
+              return entity
+            return Entity.make(body as A, {
+              status: entity.status,
+              url: entity.url,
+              headers: entity.headers["content-type"] || contentType === undefined
+                ? entity.headers
+                : { ...entity.headers, "content-type": contentType },
+            })
+          }),
         )
 
-      const route = Route.make<{ format: F }, {}, A, E, R>(wrappedHandler as any, descriptors)
-
-      const items: [...I, Route.Route.Route<{ format: F }, {}, A, E, R>] = [
-        ...Route.items(self),
-        route,
-      ]
+      const route = Route.make<{ format: F }, {}, A, E, R>(wrappedHandler, descriptors)
 
       return Route.set<D, B, [...I, Route.Route.Route<{ format: F }, {}, A, E, R>]>(
-        items,
+        [...Route.items(self), route],
         Route.descriptor(self),
       )
     }
-  } as unknown as BuildReturn<Value, F>
+  } as BuildReturn<Value, F>
 }
 
 export type RenderValue = string | Uint8Array | Stream.Stream<string | Uint8Array, any, any>
@@ -188,16 +214,15 @@ export function render<
   E = never,
   R = never,
 >(handler: HandlerInput<NoInfer<D & B & Route.ExtractBindings<I> & { format: "*" }>, A, E, R>) {
-  return function (self: Route.RouteSet.RouteSet<D, B, I>) {
-    const route = Route.make<{ format: "*" }, {}, A, E, R>(handle(handler) as any, { format: "*" })
-
-    const items: [...I, Route.Route.Route<{ format: "*" }, {}, A, E, R>] = [
-      ...Route.items(self),
-      route,
-    ]
+  return (self: Route.RouteSet.RouteSet<D, B, I>) => {
+    const baseHandler = handle(handler)
+    const route = Route.make<{ format: "*" }, {}, A, E, R>(
+      (ctx, next) => baseHandler(ctx as D & B & Route.ExtractBindings<I> & { format: "*" }, next),
+      { format: "*" },
+    )
 
     return Route.set<D, B, [...I, Route.Route.Route<{ format: "*" }, {}, A, E, R>]>(
-      items,
+      [...Route.items(self), route],
       Route.descriptor(self),
     )
   }

package/src/RouteHttp.ts

@@ -8,6 +8,7 @@ import type * as ParseResult from "effect/ParseResult"
 import * as Runtime from "effect/Runtime"
 import * as Stream from "effect/Stream"
 import * as ContentNegotiation from "./_ContentNegotiation.ts"
+import * as Development from "./Development.ts"
 import * as Entity from "./Entity.ts"
 import type * as Http from "./_Http.ts"
 import * as Route from "./Route.ts"
@@ -388,9 +389,26 @@ export function* walkHandles(
   runtime: Runtime.Runtime<never> = Runtime.defaultRuntime,
 ): Generator<[path: string, handler: Http.WebHandler]> {
   const pathGroups = new Map<string, Array<RouteMount.MountedRoute>>()
+  const runSync = Runtime.runSync(runtime)
+  const inDevelopment = Option.isSome(runSync(Development.option))
+  const developmentPaths = new Set<string>()
 
   for (const route of RouteTree.walk(tree)) {
-    const path = Route.descriptor(route).path
+    const descriptor = Route.descriptor<{ path: string; dev?: boolean }>(route)
+    if (descriptor.dev === true) {
+      developmentPaths.add(descriptor.path)
+    }
+  }
+
+  for (const route of RouteTree.walk(tree)) {
+    const descriptor = Route.descriptor<{ path: string; dev?: boolean }>(route)
+    if (descriptor.dev === true) {
+      continue
+    }
+    const path = descriptor.path
+    if (!inDevelopment && developmentPaths.has(path)) {
+      continue
+    }
     const group = pathGroups.get(path) ?? []
     group.push(route)
     pathGroups.set(path, group)

package/src/RouteMount.ts

@@ -83,7 +83,7 @@ function makeMethodDescriber<M extends RouteMount.Method>(method: M): RouteMount
     const result = f(methodSet)
     const resultItems = Route.items(result)
 
-    // Items are already flat (only Routes), just merge method into each descriptor
+    // Items are already flat (only Routes), merge method into each descriptor
     const flattenedItems = resultItems.map((item) => {
       const itemDescriptor = Route.descriptor(item)
       const newDescriptor = { method, ...itemDescriptor }

package/src/System.ts

@@ -67,7 +67,7 @@ export const which = (name: string): Effect.Effect<string, SystemError> =>
   )
 
 export const spawn = (
-  cmd: readonly [string, ...Array<string>],
+  cmd: [string, ...Array<string>] | string[],
   options?: ChildProcess.Command.Options,
 ): Effect.Effect<
   ChildProcess.ChildProcessHandle,

package/src/_ChildProcess.ts

@@ -57,7 +57,7 @@ const CommandProto = {
 export const isCommand = (u: unknown): u is Command => Predicate.hasProperty(u, TypeId)
 
 export const make = (
-  cmd: readonly [string, ...Array<string>],
+  cmd: [string, ...Array<string>] | string[],
   options?: Command.Options,
 ): Command =>
   Object.assign(Object.create(CommandProto), {

package/src/bun/BunRoute.ts

@@ -1,11 +1,12 @@
-import type * as Bun from "bun"
+import * as Bun from "bun"
+import * as NPath from "node:path"
 import * as Data from "effect/Data"
 import * as Either from "effect/Either"
 import * as Effect from "effect/Effect"
+import * as FiberRef from "effect/FiberRef"
 import * as Option from "effect/Option"
 import * as Entity from "../Entity.ts"
-import * as Hyper from "../hyper/Hyper.ts"
-import * as HyperHtml from "../hyper/HyperHtml.ts"
+import * as Html from "../Html.ts"
 import * as PathPattern from "../_PathPattern.ts"
 import * as Route from "../Route.ts"
 import * as Unique from "../Unique.ts"
@@ -36,6 +37,8 @@ export function descriptors(
 
 type HTMLBundleModule = Bun.HTMLBundle | { default: Bun.HTMLBundle }
 
+const bundleDepthRef = FiberRef.unsafeMake(0)
+
 export function htmlBundle(load: () => HTMLBundleModule | Promise<HTMLBundleModule>) {
   const bunPrefix = `/.BunRoute-${Unique.token(10)}`
   const bunLoad = () =>
@@ -66,6 +69,7 @@ export function htmlBundle(load: () => HTMLBundleModule | Promise<HTMLBundleModu
     > = (context, next) =>
       Effect.gen(function* () {
         const originalRequest = context.request
+        const bundleDepth = yield* FiberRef.get(bundleDepthRef)
 
         if (originalRequest.headers.get(INTERNAL_FETCH_HEADER) === "true") {
           const url = new URL(originalRequest.url)
@@ -79,60 +83,83 @@ export function htmlBundle(load: () => HTMLBundleModule | Promise<HTMLBundleModu
           )
         }
 
-        const bunServer = yield* BunServer.BunServer
-        const url = new URL(originalRequest.url)
+        let html = ""
+        let status = 200
+        let contentType = "text/html;charset=utf-8"
 
-        const internalPath = `${bunPrefix}${url.pathname}`
-        const internalUrl = new URL(internalPath, bunServer.server.url)
+        if (bundleDepth === 0) {
+          const bunServer = yield* BunServer.BunServer
+          const url = new URL(originalRequest.url)
 
-        const headers = new Headers(originalRequest.headers)
-        headers.set(INTERNAL_FETCH_HEADER, "true")
+          const internalPath = `${bunPrefix}${url.pathname}`
+          const internalUrl = new URL(internalPath, bunServer.server.url)
 
-        const proxyRequest = new Request(internalUrl, {
-          method: originalRequest.method,
-          headers,
-        })
+          const headers = new Headers(originalRequest.headers)
+          headers.set(INTERNAL_FETCH_HEADER, "true")
 
-        const response = yield* Effect.tryPromise({
-          try: () => fetch(proxyRequest),
-          catch: (error) =>
-            new BunRouteError({
-              reason: "ProxyError",
-              pattern: internalPath,
-              message: `Failed to fetch internal HTML bundle: ${String(error)}`,
-            }),
-        })
+          const proxyRequest = new Request(internalUrl, {
+            method: originalRequest.method,
+            headers,
+          })
 
-        let html = yield* Effect.tryPromise({
-          try: () => response.text(),
-          catch: (error) =>
-            new BunRouteError({
-              reason: "ProxyError",
-              pattern: internalPath,
-              message: String(error),
-            }),
-        })
+          const response = yield* Effect.tryPromise({
+            try: () => fetch(proxyRequest),
+            catch: (error) =>
+              new BunRouteError({
+                reason: "ProxyError",
+                pattern: internalPath,
+                message: `Failed to fetch internal HTML bundle: ${String(error)}`,
+              }),
+          })
 
-        const childEntity = yield* next(context)
+          html = yield* Effect.tryPromise({
+            try: () => response.text(),
+            catch: (error) =>
+              new BunRouteError({
+                reason: "ProxyError",
+                pattern: internalPath,
+                message: String(error),
+              }),
+          })
+          status = response.status
+          contentType = response.headers.get("content-type") ?? contentType
+        } else {
+          html = yield* readBundleHtml(bunLoad).pipe(
+            Effect.mapError(
+              (error) =>
+                new BunRouteError({
+                  reason: "ProxyError",
+                  pattern: bunPrefix,
+                  message: `Failed to load nested HTML bundle: ${String(error)}`,
+                }),
+            ),
+          )
+        }
+
+        const childEntity = yield* next(context).pipe(
+          Effect.locally(bundleDepthRef, bundleDepth + 1),
+        )
         const children = childEntity?.body ?? childEntity
 
         let childrenHtml = ""
         if (children != null) {
           if ((children as unknown) instanceof Response) {
             childrenHtml = yield* Effect.promise(() => (children as unknown as Response).text())
-          } else if (Hyper.isGenericJsxObject(children)) {
-            childrenHtml = HyperHtml.renderToString(children)
+          } else if (Html.isGenericJsxObject(children)) {
+            childrenHtml = Html.renderToString(children)
           } else {
             childrenHtml = String(children)
           }
         }
 
-        html = html.replace(/%children%/g, childrenHtml)
+        childrenHtml = yield* stripInjectedBunScripts(childrenHtml)
+
+        html = html.replaceAll("%children%", childrenHtml)
 
         return Entity.make(html, {
-          status: response.status,
+          status,
           headers: {
-            "content-type": response.headers.get("content-type"),
+            "content-type": contentType,
           },
         })
       })
@@ -149,6 +176,67 @@ export function htmlBundle(load: () => HTMLBundleModule | Promise<HTMLBundleModu
   }
 }
 
+function stripInjectedBunScripts(html: string) {
+  let removeNextInlineScript = false
+  const rewriter = new HTMLRewriter().on("script", {
+    element(element) {
+      const src = element.getAttribute("src")
+      const hasDevAttribute = element.getAttribute("data-bun-dev-server-script") !== null
+
+      if (hasDevAttribute || (src !== null && src.startsWith("/_bun/client/"))) {
+        element.remove()
+        removeNextInlineScript = true
+        return
+      }
+
+      if (removeNextInlineScript && src === null) {
+        element.remove()
+        removeNextInlineScript = false
+        return
+      }
+
+      removeNextInlineScript = false
+    },
+  })
+
+  return Effect.tryPromise({
+    try: () => rewriter.transform(new Response(html)).text(),
+    catch: (error) =>
+      new BunRouteError({
+        reason: "ProxyError",
+        pattern: "stripInjectedBunScripts",
+        message: String(error),
+      }),
+  })
+}
+
+function readBundleHtml(bunLoad: () => Promise<Bun.HTMLBundle>) {
+  return Effect.tryPromise({
+    try: () => bunLoad(),
+    catch: (error) =>
+      new BunRouteError({
+        reason: "ProxyError",
+        pattern: "readBundleHtml",
+        message: String(error),
+      }),
+  }).pipe(
+    Effect.andThen((bundle) => {
+      const indexPath = NPath.isAbsolute(bundle.index)
+        ? bundle.index
+        : NPath.resolve(NPath.dirname(Bun.main), bundle.index)
+      return Effect.tryPromise({
+        try: () => Bun.file(indexPath).text(),
+        catch: (error) =>
+          new BunRouteError({
+            reason: "ProxyError",
+            pattern: indexPath,
+            message: String(error),
+          }),
+      })
+    }),
+  )
+}
+
 type BunServerFetchHandler = (
   request: Request,
   server: Bun.Server<unknown>,

package/src/bun/BunServer.ts

@@ -19,6 +19,7 @@ import * as StartApp from "../_StartApp.ts"
 import type * as RouteMount from "../RouteMount.ts"
 import * as RouteTree from "../RouteTree.ts"
 import * as BunRoute from "./BunRoute.ts"
+
 export interface WebSocketContext {
   readonly deferred: Deferred.Deferred<Bun.ServerWebSocket<WebSocketContext>>
   readonly closeDeferred: Deferred.Deferred<void, Socket.SocketError>

package/src/{x/cloudflare → cloudflare}/CloudflareTunnel.ts

@@ -1,4 +1,4 @@
-import * as System from "../../System.ts"
+import * as System from "../System.ts"
 import { Config, Effect, Layer, LogLevel, Option, pipe, Stream, String } from "effect"
 
 export const start = (opts: {

package/src/index.ts

@@ -1,6 +1,8 @@
 export * as Bundle from "./bundler/Bundle.ts"
-export * as Development from "./_Development.ts"
+export * as Development from "./Development.ts"
 export * as Entity from "./Entity.ts"
+export { html } from "./Html.ts"
+export * as Html from "./Html.ts"
 export * as FileRouter from "./FileRouter.ts"
 export * as Route from "./Route.ts"
 export * as Start from "./Start.ts"

package/src/jsx-runtime.ts

@@ -0,0 +1,15 @@
+import * as Html from "./Html.ts"
+import type { JSX } from "./jsx.d.ts"
+
+function Fragment(props: { children: JSX.Element }) {
+  return props.children
+}
+
+function jsx<T extends Html.ElementType>(
+  type: T,
+  props: T extends string ? Html.ElemenetProps : T extends (props: infer P) => any ? P : never,
+): Html.Element {
+  return Html.make(type, props)
+}
+
+export { Fragment, type JSX, jsx, jsx as jsxDEV, jsx as jsxs }

package/src/{hyper/jsx.d.ts → jsx.d.ts}

@@ -1,5 +1,5 @@
-import type * as HyperNode from "./HyperNode.ts"
-import type { DatastarAttributes } from "../datastar/jsx.d.ts"
+import type * as Html from "./Html.ts"
+import type { DatastarAttributes } from "./datastar/jsx.d.ts"
 
 /**
  * Based on JSX types for Surplus, Inferno, and dom-expressions.
@@ -17,7 +17,7 @@ import type { DatastarAttributes } from "../datastar/jsx.d.ts"
 type DOMElement = never
 
 export namespace JSX {
-  type Element = HyperNode.HyperNode
+  type Element = Html.Element
   type Child = Element | string | number | bigint
   type Children = Child | SilentChild | Iterable<Children>
 

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

@@ -1,7 +1,6 @@
 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 Html from "../../../Html.ts"
 import * as StudioStore from "../../StudioStore.ts"
 import * as Errors from "../../ui/Errors.tsx"
 import * as Shell from "../../ui/Shell.tsx"
@@ -9,7 +8,7 @@ import * as Shell from "../../ui/Shell.tsx"
 const prefix = StudioStore.store.prefix
 
 export default Route.get(
-  HyperRoute.html(function* (ctx) {
+  Route.html(function* (ctx) {
     const url = new URL(ctx.request.url)
     const search = url.searchParams.get("errorSearch") || ""
     const tag = url.searchParams.get("errorTag") || ""
@@ -76,7 +75,7 @@ export default Route.get(
     Stream.fromPubSub(StudioStore.store.events).pipe(
       Stream.filter((e) => e._tag === "Error"),
       Stream.map((e) => {
-        const html = HyperHtml.renderToString(<Errors.ErrorLine error={e.error} />).replace(
+        const html = Html.renderToString(<Errors.ErrorLine error={e.error} />).replace(
           /\n/g,
           "",
         )

package/src/studio/routes/fiberDetail.tsx

@@ -2,14 +2,13 @@ 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 StudioStore from "../StudioStore.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) {
+  Route.html(function* (ctx) {
     const fiberId = ctx.pathParams.id
     const fiberName = fiberId.startsWith("#") ? fiberId : `#${fiberId}`
 

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

@@ -1,14 +1,13 @@
 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 Html from "../../../Html.ts"
 import * as StudioStore from "../../StudioStore.ts"
 import * as Fibers from "../../ui/Fibers.tsx"
 import * as Shell from "../../ui/Shell.tsx"
 
 export default Route.get(
-  HyperRoute.html(function* () {
+  Route.html(function* () {
     const logs = yield* StudioStore.allLogs(StudioStore.store.sql)
     const spans = yield* StudioStore.allSpans(StudioStore.store.sql)
     const fibers = Fibers.collectFibers(logs, spans)
@@ -32,7 +31,7 @@ export default Route.get(
           const logs = yield* StudioStore.allLogs(StudioStore.store.sql)
           const spans = yield* StudioStore.allSpans(StudioStore.store.sql)
           const fibers = Fibers.collectFibers(logs, spans)
-          const html = HyperHtml.renderToString(
+          const html = Html.renderToString(
             <Fibers.FiberList fibers={fibers} prefix={StudioStore.store.prefix} />,
           ).replace(/\n/g, "")
           return {