Fix test-ui registry and stream handling

- Fix registry hook to use DurableStream writer client for JSON mode
  - Changed from manual Buffer append to using writer's append() method
  - Registry events now properly stored as individual JSON objects
  - Updated createRegistryHooks to accept serverUrl parameter
  - Added @durable-streams/writer as dependency to server package
- Fix test-ui to handle JSON array responses from registry
  - Updated __root.tsx to parse both array and individual event formats
- Remove empty placeholder on home route
  - Changed index route to return null instead of rendering empty div
- Add redirect for missing streams
  - Stream route loader now redirects to home if stream doesn't exist

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <[email protected]>

Author: KyleAMathews

packages/cli/example-server.ts

@@ -15,12 +15,12 @@ const server = new DurableStreamTestServer({
   host: `0.0.0.0`,
 })
 
+const url = await server.start()
+
 // Add hooks to maintain a __registry__ stream for observability
-const hooks = createRegistryHooks(server.store)
+const hooks = createRegistryHooks(server.store, url)
 ;(server as any).options.onStreamCreated = hooks.onStreamCreated
 ;(server as any).options.onStreamDeleted = hooks.onStreamDeleted
-
-const url = await server.start()
 console.log(`✓ Durable Streams server running at ${url}`)
 console.log(`\nYou can now use the CLI to interact with streams:`)
 console.log(`  export STREAM_URL=${url}`)

packages/server/package.json

@@ -19,6 +19,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@durable-streams/writer": "workspace:*",
     "@neophi/sieve-cache": "^1.0.0",
     "lmdb": "^3.3.0"
   },

packages/server/src/registry-hook.ts

@@ -3,6 +3,7 @@
  * This stream records all create/delete events for observability.
  */
 
+import { DurableStream } from "@durable-streams/writer"
 import type { StreamLifecycleHook } from "./types"
 import type { StreamStore } from "./store"
 import type { FileBackedStreamStore } from "./file-store"
@@ -14,14 +15,20 @@ const REGISTRY_PATH = `/v1/stream/__registry__`
  * Any client can read this stream to discover all streams and their lifecycle events.
  */
 export function createRegistryHooks(
-  store: StreamStore | FileBackedStreamStore
+  store: StreamStore | FileBackedStreamStore,
+  serverUrl: string
 ): {
   onStreamCreated: StreamLifecycleHook
   onStreamDeleted: StreamLifecycleHook
 } {
-  const ensureRegistryExists = () => {
+  const registryStream = new DurableStream({
+    url: `${serverUrl}${REGISTRY_PATH}`,
+  })
+
+  const ensureRegistryExists = async () => {
     if (!store.has(REGISTRY_PATH)) {
-      store.create(REGISTRY_PATH, {
+      await DurableStream.create({
+        url: `${serverUrl}${REGISTRY_PATH}`,
         contentType: `application/json`,
       })
     }
@@ -35,36 +42,28 @@ export function createRegistryHooks(
 
   return {
     onStreamCreated: async (event) => {
-      ensureRegistryExists()
+      await ensureRegistryExists()
 
       const streamName = extractStreamName(event.path)
 
-      const record = JSON.stringify({
+      await registryStream.append({
         type: event.type,
         path: streamName,
         contentType: event.contentType,
         timestamp: event.timestamp,
       })
-
-      await Promise.resolve(
-        store.append(REGISTRY_PATH, Buffer.from(record + `\n`))
-      )
     },
 
     onStreamDeleted: async (event) => {
-      ensureRegistryExists()
+      await ensureRegistryExists()
 
       const streamName = extractStreamName(event.path)
 
-      const record = JSON.stringify({
+      await registryStream.append({
         type: event.type,
         path: streamName,
         timestamp: event.timestamp,
       })
-
-      await Promise.resolve(
-        store.append(REGISTRY_PATH, Buffer.from(record + `\n`))
-      )
     },
   }
 }

packages/test-ui/src/routes/__root.tsx

@@ -49,19 +49,24 @@ function RootLayout() {
 
             for (const line of lines) {
               try {
-                const event = JSON.parse(line)
-                console.log(`Registry event:`, event)
-                if (event.type === `created`) {
-                  loadedStreams.push({
-                    path: event.path,
-                    contentType: event.contentType,
-                  })
-                } else if (event.type === `deleted`) {
-                  const index = loadedStreams.findIndex(
-                    (s) => s.path === event.path
-                  )
-                  if (index !== -1) {
-                    loadedStreams.splice(index, 1)
+                const parsed = JSON.parse(line)
+                console.log(`Registry event:`, parsed)
+
+                const events = Array.isArray(parsed) ? parsed : [parsed]
+
+                for (const event of events) {
+                  if (event.type === `created`) {
+                    loadedStreams.push({
+                      path: event.path,
+                      contentType: event.contentType,
+                    })
+                  } else if (event.type === `deleted`) {
+                    const index = loadedStreams.findIndex(
+                      (s) => s.path === event.path
+                    )
+                    if (index !== -1) {
+                      loadedStreams.splice(index, 1)
+                    }
                   }
                 }
               } catch (e) {

packages/test-ui/src/routes/index.tsx

@@ -5,5 +5,5 @@ export const Route = createFileRoute(`/`)({
 })
 
 function Index() {
-  return <div className="placeholder" />
+  return null
 }

packages/test-ui/src/routes/stream.$streamPath.tsx

@@ -1,17 +1,21 @@
-import { createFileRoute } from "@tanstack/react-router"
+import { createFileRoute, redirect } from "@tanstack/react-router"
 import { useEffect, useRef, useState } from "react"
 import { DurableStream } from "@durable-streams/writer"
 
 const SERVER_URL = `http://${typeof window !== `undefined` ? window.location.hostname : `localhost`}:8787`
 
 export const Route = createFileRoute(`/stream/$streamPath`)({
   loader: async ({ params }) => {
-    const stream = new DurableStream({
-      url: `${SERVER_URL}/v1/stream/${params.streamPath}`,
-    })
-    const metadata = await stream.head()
-    return {
-      contentType: metadata.contentType || null,
+    try {
+      const stream = new DurableStream({
+        url: `${SERVER_URL}/v1/stream/${params.streamPath}`,
+      })
+      const metadata = await stream.head()
+      return {
+        contentType: metadata.contentType || null,
+      }
+    } catch {
+      throw redirect({ to: `/` })
     }
   },
   component: StreamViewer,