lopata 0.5.1 → 0.6.0

package/dist/dashboard/{chunk-a68x1m5f.css → chunk-3q3dhs4j.css}

@@ -683,6 +683,10 @@
     height: calc(var(--spacing) * 2.5);
   }
 
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
+
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
@@ -880,6 +884,10 @@
     min-width: calc(var(--spacing) * 0);
   }
 
+  .min-w-\[16px\] {
+    min-width: 16px;
+  }
+
   .min-w-\[20px\] {
     min-width: 20px;
   }

package/dist/dashboard/{chunk-rae638a4.js → chunk-4y88h3dc.js}

@@ -5044,28 +5044,38 @@ function TraceWaterfall({ spans, events, highlightSpanId, onAddAttributeFilter }
       childMap.set(key, []);
     childMap.get(key).push(s3);
   }
+  const processedSpanIdsRef = A2(new Set);
   const spanIdKey = spans.map((s3) => s3.spanId).join(",");
   y2(() => {
     if (spans.length === 0)
       return;
-    const autoCollapsed = new Set;
-    function walk(parentId, depth) {
-      const children = childMap.get(parentId) ?? [];
-      for (const child of children) {
-        const hasChildren = (childMap.get(child.spanId) ?? []).length > 0;
-        if (hasChildren) {
-          const spanDur = child.durationMs ?? 0;
-          const significantDuration = spanDur > traceDuration * 0.1;
-          if (depth >= 2 && !significantDuration) {
-            autoCollapsed.add(child.spanId);
+    const previousProcessed = processedSpanIdsRef.current;
+    const currentIds = spans.map((s3) => s3.spanId);
+    const newSpanIds = new Set(currentIds.filter((id) => !previousProcessed.has(id)));
+    processedSpanIdsRef.current = new Set(currentIds);
+    if (newSpanIds.size === 0)
+      return;
+    setCollapsedSpans((prev) => {
+      const next = new Set(prev);
+      function walk(parentId, depth) {
+        const children = childMap.get(parentId) ?? [];
+        for (const child of children) {
+          if (newSpanIds.has(child.spanId)) {
+            const hasChildren = (childMap.get(child.spanId) ?? []).length > 0;
+            if (hasChildren) {
+              const spanDur = child.durationMs ?? 0;
+              const significantDuration = spanDur > traceDuration * 0.1;
+              if (depth >= 2 && !significantDuration) {
+                next.add(child.spanId);
+              }
+            }
           }
+          walk(child.spanId, depth + 1);
         }
-        walk(child.spanId, depth + 1);
       }
-    }
-    walk(null, 0);
-    setCollapsedSpans(autoCollapsed);
-    setExpandedSpan(null);
+      walk(null, 0);
+      return next;
+    });
   }, [spanIdKey]);
   const toggleCollapse = (spanId) => {
     setCollapsedSpans((prev) => {
@@ -5090,6 +5100,19 @@ function TraceWaterfall({ spans, events, highlightSpanId, onAddAttributeFilter }
     return result;
   }
   const flatSpans = flattenTree(null, 0);
+  const descendantErrorCount = new Map;
+  function countErrors(parentId) {
+    let count = 0;
+    for (const child of childMap.get(parentId) ?? []) {
+      if (child.status === "error")
+        count++;
+      const childErrors = countErrors(child.spanId);
+      count += childErrors;
+      descendantErrorCount.set(child.spanId, childErrors);
+    }
+    return count;
+  }
+  countErrors(null);
   const getParentAttributes = (span) => {
     if (!span.parentSpanId)
       return {};
@@ -5146,8 +5169,13 @@ function TraceWaterfall({ spans, events, highlightSpanId, onAddAttributeFilter }
                         class: "inline-block w-4 flex-shrink-0"
                       }, undefined, false, undefined, this),
                       /* @__PURE__ */ u3("span", {
-                        class: "truncate",
+                        class: `truncate ${span.status === "error" ? "text-red-400" : ""}`,
                         children: span.name
+                      }, undefined, false, undefined, this),
+                      (descendantErrorCount.get(span.spanId) ?? 0) > 0 && /* @__PURE__ */ u3("span", {
+                        class: "ml-1 flex-shrink-0 inline-flex items-center justify-center min-w-[16px] h-4 px-1 rounded-full text-[10px] font-medium",
+                        style: { background: "var(--color-badge-red-bg)", color: "var(--color-badge-red-text)" },
+                        children: descendantErrorCount.get(span.spanId)
                       }, undefined, false, undefined, this)
                     ]
                   }, undefined, true, undefined, this),

package/dist/dashboard/index.html

@@ -8,7 +8,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
   
-<link rel="stylesheet" crossorigin href="/__dashboard/assets/chunk-a68x1m5f.css"><script type="module" crossorigin src="/__dashboard/assets/chunk-rae638a4.js"></script></head>
+<link rel="stylesheet" crossorigin href="/__dashboard/assets/chunk-3q3dhs4j.css"><script type="module" crossorigin src="/__dashboard/assets/chunk-4y88h3dc.js"></script></head>
 <body class="h-full bg-surface text-ink" style="font-family: system-ui, -apple-system, sans-serif;">
   <script>
     // Apply saved theme before first paint to prevent flash

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lopata",
-	"version": "0.5.1",
+	"version": "0.6.0",
 	"type": "module",
 	"license": "MIT",
 	"repository": {

package/src/plugin.ts

@@ -1,102 +1,18 @@
 import { plugin } from 'bun'
 import type { BrowserBinding } from './bindings/browser'
-import { SqliteCacheStorage } from './bindings/cache'
-import { FixedLengthStream, IdentityTransformStream } from './bindings/cf-streams'
 import { ContainerBase, getContainer, getRandom } from './bindings/container'
-import { patchGlobalCrypto } from './bindings/crypto-extras'
 import { DurableObjectBase, WebSocketRequestResponsePair } from './bindings/durable-object'
 import { EmailMessage } from './bindings/email'
-import { HTMLRewriter } from './bindings/html-rewriter'
 import type { ImageTransformOptions, OutputOptions } from './bindings/images'
 import { WebSocketPair } from './bindings/websocket-pair'
 import { NonRetryableError, WorkflowEntrypointBase } from './bindings/workflow'
-import { getDatabase } from './db'
 import { globalEnv } from './env'
 import { getActiveExecutionContext } from './execution-context'
+import { setupCloudflareGlobals } from './setup-globals'
 import { getActiveContext } from './tracing/context'
-import { instrumentBinding } from './tracing/instrument'
-import { addSpanEvent, setSpanAttribute, startSpan } from './tracing/span'
-
-// Register global `caches` object (CacheStorage) with tracing
-const rawCacheStorage = new SqliteCacheStorage(getDatabase())
-const cacheMethods = ['match', 'put', 'delete']
-
-// Instrument the default cache
-rawCacheStorage.default = instrumentBinding(rawCacheStorage.default, {
-	type: 'cache',
-	name: 'default',
-	methods: cacheMethods,
-}) as typeof rawCacheStorage.default
-
-// Wrap open() to return instrumented caches
-const originalOpen = rawCacheStorage.open.bind(rawCacheStorage)
-rawCacheStorage.open = async (cacheName: string) => {
-	const cache = await originalOpen(cacheName)
-	return instrumentBinding(cache, {
-		type: 'cache',
-		name: cacheName,
-		methods: cacheMethods,
-	})
-}
-
-Object.defineProperty(globalThis, 'caches', {
-	value: rawCacheStorage,
-	writable: false,
-	configurable: true,
-})
-
-// Register global `HTMLRewriter` class
-Object.defineProperty(globalThis, 'HTMLRewriter', {
-	value: HTMLRewriter,
-	writable: false,
-	configurable: true,
-})
-
-// Register global `WebSocketPair` class
-Object.defineProperty(globalThis, 'WebSocketPair', {
-	value: WebSocketPair,
-	writable: false,
-	configurable: true,
-})
-
-// Register global CF stream classes
-Object.defineProperty(globalThis, 'IdentityTransformStream', {
-	value: IdentityTransformStream,
-	writable: false,
-	configurable: true,
-})
-
-Object.defineProperty(globalThis, 'FixedLengthStream', {
-	value: FixedLengthStream,
-	writable: false,
-	configurable: true,
-})
-
-// Patch crypto with CF-specific extensions (timingSafeEqual, DigestStream)
-patchGlobalCrypto()
-
-// Set navigator.userAgent to match Cloudflare Workers
-Object.defineProperty(globalThis.navigator, 'userAgent', {
-	value: 'Cloudflare-Workers',
-	writable: false,
-	configurable: true,
-})
-
-// Set navigator.language (behind enable_navigator_language compat flag in CF)
-if (!globalThis.navigator.language) {
-	Object.defineProperty(globalThis.navigator, 'language', {
-		value: 'en',
-		writable: false,
-		configurable: true,
-	})
-}
+import { addSpanEvent, persistError, setSpanAttribute, startSpan } from './tracing/span'
 
-// Set performance.timeOrigin to 0 (CF semantics)
-Object.defineProperty(globalThis.performance, 'timeOrigin', {
-	value: 0,
-	writable: false,
-	configurable: true,
-})
+setupCloudflareGlobals()
 
 // Register addEventListener shim for legacy service worker syntax
 // Workers that use addEventListener("fetch", handler) instead of export default { fetch }
@@ -113,17 +29,6 @@ Object.defineProperty(globalThis, 'addEventListener', {
 }) /** @internal Get the registered service worker fetch handler */
 ;(globalThis as any).__lopata_sw_handlers = _serviceWorkerHandlers
 
-// Register scheduler.wait(ms) — await-able setTimeout alternative
-Object.defineProperty(globalThis, 'scheduler', {
-	value: {
-		wait(ms: number): Promise<void> {
-			return new Promise((resolve) => setTimeout(resolve, ms))
-		},
-	},
-	writable: false,
-	configurable: true,
-})
-
 // ─── Console instrumentation ─────────────────────────────────────────
 // Captures console.log/info/warn/error/debug as span events when inside a trace context.
 
@@ -151,6 +56,10 @@ for (const method of consoleMethods) {
 		if (!ctx) return
 		const message = args.map(formatConsoleArg).join(' ')
 		addSpanEvent(`console.${method}`, method, message)
+		if (method === 'error') {
+			const errorArg = args.find((a) => a instanceof Error)
+			persistError(errorArg ?? new Error(message), 'console.error')
+		}
 	}
 }
 

package/src/setup-globals.ts

@@ -0,0 +1,129 @@
+import { SqliteCacheStorage } from './bindings/cache'
+import { FixedLengthStream, IdentityTransformStream } from './bindings/cf-streams'
+import { patchGlobalCrypto } from './bindings/crypto-extras'
+import { HTMLRewriter } from './bindings/html-rewriter'
+import { WebSocketPair } from './bindings/websocket-pair'
+import { getDatabase } from './db'
+import { instrumentBinding } from './tracing/instrument'
+import { addSpanEvent, setSpanAttribute, startSpan } from './tracing/span'
+
+let initialized = false
+
+/**
+ * Sets up global Cloudflare-compatible APIs:
+ * caches, HTMLRewriter, WebSocketPair, IdentityTransformStream, FixedLengthStream,
+ * navigator.userAgent, navigator.language, performance.timeOrigin, scheduler.wait(),
+ * crypto extensions, and __lopata userland tracing API.
+ *
+ * Idempotent — safe to call multiple times.
+ */
+export function setupCloudflareGlobals() {
+	if (initialized) return
+	initialized = true // ─── Userland tracing API ────────────────────────────────────────────
+	 // Exposes a lightweight global that user code can call to create custom
+	// spans visible in the Lopata dashboard.  In production (without Lopata)
+	// the global is simply absent, so the user's thin wrapper becomes a no-op.
+	;(globalThis as any).__lopata = {
+		trace<T>(name: string, attrsOrFn: Record<string, unknown> | (() => T | Promise<T>), maybeFn?: () => T | Promise<T>): Promise<T> {
+			const fn = typeof attrsOrFn === 'function' ? attrsOrFn : maybeFn!
+			const attributes = typeof attrsOrFn === 'function' ? undefined : attrsOrFn
+			return startSpan({ name, attributes }, fn)
+		},
+		setAttribute: setSpanAttribute,
+		addEvent(name: string, message?: string, attrs?: Record<string, unknown>): void {
+			addSpanEvent(name, 'info', message ?? '', attrs)
+		},
+	}
+
+	// Register global `caches` object (CacheStorage) with tracing
+	const rawCacheStorage = new SqliteCacheStorage(getDatabase())
+	const cacheMethods = ['match', 'put', 'delete']
+
+	// Instrument the default cache
+	rawCacheStorage.default = instrumentBinding(rawCacheStorage.default, {
+		type: 'cache',
+		name: 'default',
+		methods: cacheMethods,
+	}) as typeof rawCacheStorage.default
+
+	// Wrap open() to return instrumented caches
+	const originalOpen = rawCacheStorage.open.bind(rawCacheStorage)
+	rawCacheStorage.open = async (cacheName: string) => {
+		const cache = await originalOpen(cacheName)
+		return instrumentBinding(cache, {
+			type: 'cache',
+			name: cacheName,
+			methods: cacheMethods,
+		})
+	}
+
+	Object.defineProperty(globalThis, 'caches', {
+		value: rawCacheStorage,
+		writable: false,
+		configurable: true,
+	})
+
+	// Register global `HTMLRewriter` class
+	Object.defineProperty(globalThis, 'HTMLRewriter', {
+		value: HTMLRewriter,
+		writable: false,
+		configurable: true,
+	})
+
+	// Register global `WebSocketPair` class
+	Object.defineProperty(globalThis, 'WebSocketPair', {
+		value: WebSocketPair,
+		writable: false,
+		configurable: true,
+	})
+
+	// Register global CF stream classes
+	Object.defineProperty(globalThis, 'IdentityTransformStream', {
+		value: IdentityTransformStream,
+		writable: false,
+		configurable: true,
+	})
+
+	Object.defineProperty(globalThis, 'FixedLengthStream', {
+		value: FixedLengthStream,
+		writable: false,
+		configurable: true,
+	})
+
+	// Patch crypto with CF-specific extensions (timingSafeEqual, DigestStream)
+	patchGlobalCrypto()
+
+	// Set navigator.userAgent to match Cloudflare Workers
+	Object.defineProperty(globalThis.navigator, 'userAgent', {
+		value: 'Cloudflare-Workers',
+		writable: false,
+		configurable: true,
+	})
+
+	// Set navigator.language (behind enable_navigator_language compat flag in CF)
+	if (!globalThis.navigator.language) {
+		Object.defineProperty(globalThis.navigator, 'language', {
+			value: 'en',
+			writable: false,
+			configurable: true,
+		})
+	}
+
+	// Set performance.timeOrigin to 0 (CF semantics)
+	Object.defineProperty(globalThis.performance, 'timeOrigin', {
+		value: 0,
+		writable: false,
+		configurable: true,
+	})
+
+	// Register scheduler.wait(ms) — await-able setTimeout alternative
+	Object.defineProperty(globalThis, 'scheduler', {
+		value: {
+			wait(ms: number): Promise<void> {
+				return new Promise((resolve) => setTimeout(resolve, ms))
+			},
+		},
+		writable: false,
+		configurable: true,
+	})
+}

package/src/tracing/global.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Lopata userland tracing API.
+ *
+ * Available on `globalThis.__lopata` when running under Lopata dev server.
+ * In production (Cloudflare Workers) the global is `undefined` — wrap calls
+ * in a thin helper that falls back to a no-op:
+ *
+ * ```ts
+ * // app/lib/trace.ts
+ * type TraceFn = <T>(name: string, fn: () => T | Promise<T>) => Promise<T>
+ *
+ * export const trace: TraceFn = (name, fn) =>
+ *   globalThis.__lopata?.trace(name, fn) ?? fn()
+ *
+ * export const setAttribute = (key: string, value: unknown) =>
+ *   globalThis.__lopata?.setAttribute(key, value)
+ *
+ * export const addEvent = (name: string, message?: string) =>
+ *   globalThis.__lopata?.addEvent(name, message)
+ * ```
+ *
+ * Add this file to your tsconfig types to get autocomplete:
+ * ```json
+ * { "compilerOptions": { "types": ["lopata/src/tracing/global"] } }
+ * ```
+ */
+
+interface LopataTracing {
+	/**
+	 * Create a traced span around `fn`. The span is visible in the Lopata
+	 * dashboard and becomes a child of the currently active span (if any).
+	 */
+	trace<T>(name: string, fn: () => T | Promise<T>): Promise<T>
+	/**
+	 * Create a traced span with custom attributes.
+	 */
+	trace<T>(name: string, attrs: Record<string, unknown>, fn: () => T | Promise<T>): Promise<T>
+
+	/**
+	 * Set an attribute on the currently active span.
+	 */
+	setAttribute(key: string, value: unknown): void
+
+	/**
+	 * Add an event (log entry) to the currently active span.
+	 */
+	addEvent(name: string, message?: string, attrs?: Record<string, unknown>): void
+}
+
+declare var __lopata: LopataTracing | undefined

package/src/vite-plugin/globals-plugin.ts

@@ -3,13 +3,11 @@ import type { Plugin } from 'vite'
 let initialized = false
 
 /**
- * Sets up global Cloudflare-compatible APIs in the Bun process:
- * caches, HTMLRewriter, WebSocketPair, IdentityTransformStream, FixedLengthStream,
- * navigator.userAgent, scheduler.wait(), crypto extensions.
+ * Sets up global Cloudflare-compatible APIs in the Bun process.
  *
  * Runs once on configureServer (before middleware), idempotent.
- * Imports are lazy because the plugin is externalized by Vite's config bundler —
- * dynamic imports run at dev server startup time through Bun's native loader.
+ * Uses dynamic import because the plugin file is externalized by Vite's config bundler —
+ * the import runs at dev server startup time through Bun's native loader.
  */
 export function globalsPlugin(): Plugin {
 	return {
@@ -19,80 +17,8 @@ export function globalsPlugin(): Plugin {
 			if (initialized) return
 			initialized = true
 
-			const { SqliteCacheStorage } = await import('../bindings/cache.ts')
-			const { HTMLRewriter } = await import('../bindings/html-rewriter.ts')
-			const { WebSocketPair } = await import('../bindings/websocket-pair.ts')
-			const { IdentityTransformStream, FixedLengthStream } = await import('../bindings/cf-streams.ts')
-			const { patchGlobalCrypto } = await import('../bindings/crypto-extras.ts')
-			const { getDatabase } = await import('../db.ts')
-			const { instrumentBinding } = await import('../tracing/instrument.ts')
-
-			// Global caches (CacheStorage)
-			const cacheMethods = ['match', 'put', 'delete']
-			const rawCacheStorage = new SqliteCacheStorage(getDatabase())
-			rawCacheStorage.default = instrumentBinding(rawCacheStorage.default, {
-				type: 'cache',
-				name: 'default',
-				methods: cacheMethods,
-			}) as typeof rawCacheStorage.default
-
-			const originalOpen = rawCacheStorage.open.bind(rawCacheStorage)
-			rawCacheStorage.open = async (cacheName: string) => {
-				const cache = await originalOpen(cacheName)
-				return instrumentBinding(cache, {
-					type: 'cache',
-					name: cacheName,
-					methods: cacheMethods,
-				})
-			}
-
-			Object.defineProperty(globalThis, 'caches', {
-				value: rawCacheStorage,
-				writable: false,
-				configurable: true,
-			})
-
-			Object.defineProperty(globalThis, 'HTMLRewriter', {
-				value: HTMLRewriter,
-				writable: false,
-				configurable: true,
-			})
-
-			Object.defineProperty(globalThis, 'WebSocketPair', {
-				value: WebSocketPair,
-				writable: false,
-				configurable: true,
-			})
-
-			Object.defineProperty(globalThis, 'IdentityTransformStream', {
-				value: IdentityTransformStream,
-				writable: false,
-				configurable: true,
-			})
-
-			Object.defineProperty(globalThis, 'FixedLengthStream', {
-				value: FixedLengthStream,
-				writable: false,
-				configurable: true,
-			})
-
-			patchGlobalCrypto()
-
-			Object.defineProperty(globalThis.navigator, 'userAgent', {
-				value: 'Cloudflare-Workers',
-				writable: false,
-				configurable: true,
-			})
-
-			Object.defineProperty(globalThis, 'scheduler', {
-				value: {
-					wait(ms: number): Promise<void> {
-						return new Promise((resolve) => setTimeout(resolve, ms))
-					},
-				},
-				writable: false,
-				configurable: true,
-			})
+			const { setupCloudflareGlobals } = await import('../setup-globals.ts')
+			setupCloudflareGlobals()
 		},
 	}
 }