lopata 0.6.0 → 0.7.0

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

@@ -5746,14 +5746,11 @@ function ErrorList() {
                         /* @__PURE__ */ u3("td", {
                           class: "px-4 py-2.5 text-right",
                           children: err.traceId ? /* @__PURE__ */ u3("a", {
-                            href: `#/traces?trace=${err.traceId}`,
+                            href: `#/traces/${err.traceId}`,
                             onClick: (e3) => e3.stopPropagation(),
                             class: "text-link hover:text-accent-lime text-xs font-mono",
-                            children: [
-                              err.traceId.slice(0, 8),
-                              "..."
-                            ]
-                          }, undefined, true, undefined, this) : /* @__PURE__ */ u3("span", {
+                            children: err.traceId
+                          }, undefined, false, undefined, this) : /* @__PURE__ */ u3("span", {
                             class: "text-text-dim text-xs",
                             children: "-"
                           }, undefined, false, undefined, this)
@@ -5911,14 +5908,30 @@ function ErrorDetailPage({ errorId }) {
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      traceSpans && traceSpans.length > 0 && /* @__PURE__ */ u3(Section, {
+      detail.traceId && /* @__PURE__ */ u3(Section, {
         title: "Trace",
         open: true,
-        children: /* @__PURE__ */ u3(SimpleTraceWaterfall, {
-          spans: traceSpans,
-          highlightSpanId: detail.spanId
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
+        children: [
+          /* @__PURE__ */ u3("div", {
+            class: "px-4 py-2.5 border-b border-border-subtle flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ u3("span", {
+                class: "text-xs text-text-muted",
+                children: "Trace ID:"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ u3("a", {
+                href: `#/traces/${detail.traceId}`,
+                class: "text-link hover:text-accent-lime text-xs font-mono",
+                children: detail.traceId
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          traceSpans && traceSpans.length > 0 && /* @__PURE__ */ u3(SimpleTraceWaterfall, {
+            spans: traceSpans,
+            highlightSpanId: detail.spanId
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
       data.request.method && data.request.url && /* @__PURE__ */ u3(Section, {
         title: "Request",
         open: true,
@@ -7582,6 +7595,14 @@ function ScheduledList() {
 }
 
 // src/dashboard/views/traces.tsx
+var SOURCE_BADGE_STYLES = {
+  fetch: { bg: "var(--color-badge-blue-bg)", color: "var(--color-badge-blue-text)" },
+  scheduled: { bg: "var(--color-badge-purple-bg)", color: "var(--color-badge-purple-text)" },
+  queue: { bg: "var(--color-badge-orange-bg)", color: "var(--color-badge-orange-text)" },
+  alarm: { bg: "var(--color-badge-yellow-bg)", color: "var(--color-badge-yellow-text)" },
+  workflow: { bg: "var(--color-badge-emerald-bg)", color: "var(--color-badge-emerald-text)" }
+};
+var DEFAULT_BADGE_STYLE = { bg: "var(--color-badge-red-bg)", color: "var(--color-badge-red-text)" };
 var eventListeners = new Set;
 function onTraceEvents(fn) {
   eventListeners.add(fn);
@@ -7596,6 +7617,39 @@ function emitTraceEvents(events) {
     } catch {}
   }
 }
+function useTraceData(traceId) {
+  const [spans, setSpans] = d2([]);
+  const [events, setEvents] = d2([]);
+  const [traceErrors, setTraceErrors] = d2([]);
+  const [isLoading, setIsLoading] = d2(true);
+  y2(() => {
+    setIsLoading(true);
+    rpc("traces.getTrace", { traceId }).then((data) => {
+      setSpans(data.spans);
+      setEvents(data.events);
+      setIsLoading(false);
+    });
+    rpc("traces.errors", { traceId }).then(setTraceErrors).catch(() => {});
+  }, [traceId]);
+  y2(() => {
+    return onTraceEvents((traceEvents) => {
+      for (const ev of traceEvents) {
+        if (ev.type === "span.start" && ev.span.traceId === traceId) {
+          setSpans((prev) => {
+            if (prev.some((s3) => s3.spanId === ev.span.spanId))
+              return prev;
+            return [...prev, ev.span];
+          });
+        } else if (ev.type === "span.end" && ev.span.traceId === traceId) {
+          setSpans((prev) => prev.map((s3) => s3.spanId === ev.span.spanId ? ev.span : s3));
+        } else if (ev.type === "span.event" && ev.event.traceId === traceId) {
+          setEvents((prev) => [...prev, ev.event]);
+        }
+      }
+    });
+  }, [traceId]);
+  return { spans, events, traceErrors, isLoading };
+}
 function useTraceStream() {
   const [traces, setTraces] = d2(new Map);
   const [wsStatus, setWsStatus] = d2("connecting");
@@ -7707,7 +7761,16 @@ var TIME_RANGE_OPTIONS = [
   { label: "24h", ms: 24 * 60 * 60 * 1000 },
   { label: "All", ms: 0 }
 ];
-function TracesView() {
+function TracesView({ route }) {
+  const traceIdFromRoute = route.startsWith("/traces/") ? route.slice("/traces/".length) : null;
+  if (traceIdFromRoute) {
+    return /* @__PURE__ */ u3(TraceDetailPage, {
+      traceId: traceIdFromRoute
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ u3(TracesListView, {}, undefined, false, undefined, this);
+}
+function TracesListView() {
   const { traces, setFilter, wsStatus } = useTraceStream();
   const [selectedTraceId, setSelectedTraceId] = d2(null);
   const [pathFilter, setPathFilter] = d2("");
@@ -7794,10 +7857,7 @@ function TracesView() {
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ u3("button", {
-            onClick: () => {
-              clearTraces.mutate();
-              setSelectedTraceId(null);
-            },
+            onClick: () => clearTraces.mutate(),
             class: "rounded-md px-3 py-1.5 text-sm font-medium bg-panel border border-border text-text-secondary btn-danger transition-all",
             children: "Clear all"
           }, undefined, false, undefined, this)
@@ -8001,6 +8061,132 @@ function TracesView() {
     ]
   }, undefined, true, undefined, this);
 }
+function TraceDetailPage({ traceId }) {
+  const { spans, events, traceErrors, isLoading } = useTraceData(traceId);
+  const rootSpan = spans.find((s3) => !s3.parentSpanId);
+  return /* @__PURE__ */ u3("div", {
+    class: "p-4 sm:p-8 h-full flex flex-col",
+    children: [
+      /* @__PURE__ */ u3("div", {
+        class: "flex items-center gap-3 mb-6",
+        children: [
+          /* @__PURE__ */ u3("button", {
+            onClick: () => navigate("/traces"),
+            class: "flex items-center gap-1.5 text-sm text-text-secondary hover:text-ink transition-colors",
+            children: [
+              /* @__PURE__ */ u3("svg", {
+                class: "w-4 h-4",
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                children: /* @__PURE__ */ u3("path", {
+                  "fill-rule": "evenodd",
+                  d: "M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z",
+                  "clip-rule": "evenodd"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              "Back to traces"
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ u3("div", {
+            class: "h-5 w-px bg-border"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ u3("div", {
+            children: [
+              /* @__PURE__ */ u3("div", {
+                class: "flex items-center gap-2",
+                children: [
+                  rootSpan && /* @__PURE__ */ u3(TraceStatusBadge, {
+                    status: rootSpan.status
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ u3("h1", {
+                    class: "text-lg font-bold text-ink",
+                    children: rootSpan?.name ?? "Loading..."
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ u3("div", {
+                class: "text-xs text-text-muted font-mono mt-0.5",
+                children: [
+                  "Trace ",
+                  traceId,
+                  rootSpan?.workerName && /* @__PURE__ */ u3("span", {
+                    class: "ml-2 inline-flex px-2 py-0.5 rounded-md text-xs font-medium bg-panel-hover text-text-secondary",
+                    children: rootSpan.workerName
+                  }, undefined, false, undefined, this),
+                  rootSpan?.durationMs != null && /* @__PURE__ */ u3("span", {
+                    class: "ml-2 text-text-secondary",
+                    children: formatDuration(rootSpan.durationMs)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ u3("div", {
+        class: "flex-1 overflow-y-auto scrollbar-thin min-h-0",
+        children: isLoading ? /* @__PURE__ */ u3("div", {
+          class: "text-text-muted text-sm py-12 text-center",
+          children: "Loading trace..."
+        }, undefined, false, undefined, this) : /* @__PURE__ */ u3("div", {
+          children: [
+            traceErrors.length > 0 && /* @__PURE__ */ u3("div", {
+              class: "mb-4",
+              children: [
+                /* @__PURE__ */ u3("div", {
+                  class: "text-xs font-medium text-text-muted uppercase tracking-wider mb-2",
+                  children: [
+                    "Errors (",
+                    traceErrors.length,
+                    ")"
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ u3("div", {
+                  class: "space-y-1",
+                  children: traceErrors.map((err) => /* @__PURE__ */ u3("a", {
+                    href: `#/errors/${err.id}`,
+                    class: "flex items-center gap-2 px-3 py-2 rounded-md text-xs no-underline transition-colors",
+                    style: { background: "var(--color-error-highlight)", borderColor: "var(--color-error-ring)" },
+                    children: [
+                      err.source && (() => {
+                        const s3 = SOURCE_BADGE_STYLES[err.source] ?? DEFAULT_BADGE_STYLE;
+                        return /* @__PURE__ */ u3("span", {
+                          class: "inline-flex px-1.5 py-0.5 rounded text-[10px] font-medium",
+                          style: { background: s3.bg, color: s3.color },
+                          children: err.source
+                        }, undefined, false, undefined, this);
+                      })(),
+                      /* @__PURE__ */ u3("span", {
+                        class: "font-medium",
+                        style: { color: "var(--color-badge-red-text)" },
+                        children: err.errorName
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ u3("span", {
+                        style: { color: "var(--color-badge-red-text)" },
+                        class: "truncate",
+                        children: err.errorMessage
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ u3("span", {
+                        style: { color: "var(--color-badge-red-text)", opacity: 0.7 },
+                        class: "font-mono ml-auto flex-shrink-0",
+                        children: formatTimestamp(err.timestamp)
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, err.id, true, undefined, this))
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ u3(TraceWaterfall, {
+              spans,
+              events,
+              onAddAttributeFilter: () => {}
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
 function SpansListTab() {
   const [spans, setSpans] = d2([]);
   const [cursor, setCursor] = d2(null);
@@ -8098,11 +8284,8 @@ function SpansListTab() {
                       children: /* @__PURE__ */ u3("button", {
                         onClick: () => setSelectedTraceId(span.traceId),
                         class: "text-link hover:text-accent-lime text-xs font-mono",
-                        children: [
-                          span.traceId.slice(0, 8),
-                          "..."
-                        ]
-                      }, undefined, true, undefined, this)
+                        children: span.traceId
+                      }, undefined, false, undefined, this)
                     }, undefined, false, undefined, this)
                   ]
                 }, span.spanId, true, undefined, this))
@@ -8126,8 +8309,7 @@ function SpansListTab() {
       }, undefined, false, undefined, this),
       selectedTraceId && /* @__PURE__ */ u3(TraceDrawer, {
         traceId: selectedTraceId,
-        onClose: () => setSelectedTraceId(null),
-        onAddAttributeFilter: () => {}
+        onClose: () => setSelectedTraceId(null)
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
@@ -8136,6 +8318,7 @@ function LogsListTab() {
   const [logs, setLogs] = d2([]);
   const [cursor, setCursor] = d2(null);
   const [isLoading, setIsLoading] = d2(true);
+  const [selectedTraceId, setSelectedTraceId] = d2(null);
   const loadLogs = q2((cur) => {
     setIsLoading(true);
     rpc("traces.listLogs", { limit: 50, cursor: cur }).then((data) => {
@@ -8216,12 +8399,13 @@ function LogsListTab() {
                       children: formatTimestamp(log.timestamp)
                     }, undefined, false, undefined, this),
                     /* @__PURE__ */ u3("td", {
-                      class: "px-4 py-2.5 text-right font-mono text-xs text-text-muted",
-                      children: [
-                        log.traceId.slice(0, 8),
-                        "..."
-                      ]
-                    }, undefined, true, undefined, this)
+                      class: "px-4 py-2.5 text-right",
+                      children: /* @__PURE__ */ u3("button", {
+                        onClick: () => setSelectedTraceId(log.traceId),
+                        class: "text-link hover:text-accent-lime text-xs font-mono",
+                        children: log.traceId
+                      }, undefined, false, undefined, this)
+                    }, undefined, false, undefined, this)
                   ]
                 }, log.id, true, undefined, this))
               }, undefined, false, undefined, this)
@@ -8241,49 +8425,16 @@ function LogsListTab() {
       isLoading && logs.length === 0 && /* @__PURE__ */ u3("div", {
         class: "text-text-muted text-sm text-center py-12",
         children: "Loading logs..."
+      }, undefined, false, undefined, this),
+      selectedTraceId && /* @__PURE__ */ u3(TraceDrawer, {
+        traceId: selectedTraceId,
+        onClose: () => setSelectedTraceId(null)
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
-var SOURCE_BADGE_STYLES = {
-  fetch: { bg: "var(--color-badge-blue-bg)", color: "var(--color-badge-blue-text)" },
-  scheduled: { bg: "var(--color-badge-purple-bg)", color: "var(--color-badge-purple-text)" },
-  queue: { bg: "var(--color-badge-orange-bg)", color: "var(--color-badge-orange-text)" },
-  alarm: { bg: "var(--color-badge-yellow-bg)", color: "var(--color-badge-yellow-text)" },
-  workflow: { bg: "var(--color-badge-emerald-bg)", color: "var(--color-badge-emerald-text)" }
-};
-var DEFAULT_BADGE_STYLE = { bg: "var(--color-badge-red-bg)", color: "var(--color-badge-red-text)" };
 function TraceDrawer({ traceId, onClose, onAddAttributeFilter }) {
-  const [spans, setSpans] = d2([]);
-  const [events, setEvents] = d2([]);
-  const [traceErrors, setTraceErrors] = d2([]);
-  const [isLoading, setIsLoading] = d2(true);
-  y2(() => {
-    setIsLoading(true);
-    rpc("traces.getTrace", { traceId }).then((data) => {
-      setSpans(data.spans);
-      setEvents(data.events);
-      setIsLoading(false);
-    });
-    rpc("traces.errors", { traceId }).then(setTraceErrors).catch(() => {});
-  }, [traceId]);
-  y2(() => {
-    return onTraceEvents((traceEvents) => {
-      for (const ev of traceEvents) {
-        if (ev.type === "span.start" && ev.span.traceId === traceId) {
-          setSpans((prev) => {
-            if (prev.some((s3) => s3.spanId === ev.span.spanId))
-              return prev;
-            return [...prev, ev.span];
-          });
-        } else if (ev.type === "span.end" && ev.span.traceId === traceId) {
-          setSpans((prev) => prev.map((s3) => s3.spanId === ev.span.spanId ? ev.span : s3));
-        } else if (ev.type === "span.event" && ev.event.traceId === traceId) {
-          setEvents((prev) => [...prev, ev.event]);
-        }
-      }
-    });
-  }, [traceId]);
+  const { spans, events, traceErrors, isLoading } = useTraceData(traceId);
   return /* @__PURE__ */ u3(k, {
     children: [
       /* @__PURE__ */ u3("div", {
@@ -8302,8 +8453,7 @@ function TraceDrawer({ traceId, onClose, onAddAttributeFilter }) {
                     class: "text-xs text-text-muted font-mono",
                     children: [
                       "Trace ",
-                      traceId.slice(0, 12),
-                      "..."
+                      traceId
                     ]
                   }, undefined, true, undefined, this),
                   /* @__PURE__ */ u3("div", {
@@ -8312,11 +8462,34 @@ function TraceDrawer({ traceId, onClose, onAddAttributeFilter }) {
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ u3("button", {
-                onClick: onClose,
-                class: "w-7 h-7 flex items-center justify-center rounded-md hover:bg-panel-hover transition-colors text-text-muted hover:text-ink",
-                children: "×"
-              }, undefined, false, undefined, this)
+              /* @__PURE__ */ u3("div", {
+                class: "flex items-center gap-1",
+                children: [
+                  /* @__PURE__ */ u3("a", {
+                    href: `#/traces/${traceId}`,
+                    class: "w-7 h-7 flex items-center justify-center rounded-md hover:bg-panel-hover transition-colors text-text-muted hover:text-ink",
+                    title: "Open full page",
+                    children: /* @__PURE__ */ u3("svg", {
+                      class: "w-4 h-4",
+                      viewBox: "0 0 20 20",
+                      fill: "currentColor",
+                      children: [
+                        /* @__PURE__ */ u3("path", {
+                          d: "M4.75 5.75a.75.75 0 00.75.75h4.69l-4.22 4.22a.75.75 0 001.06 1.06L11.25 7.56v4.69a.75.75 0 001.5 0v-6.5a.75.75 0 00-.75-.75h-6.5a.75.75 0 00-.75.75z"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ u3("path", {
+                          d: "M3 13.5a1.5 1.5 0 011.5-1.5h1.25a.75.75 0 010 1.5H4.5v4h4v-1.25a.75.75 0 011.5 0v1.25a1.5 1.5 0 01-1.5 1.5h-4A1.5 1.5 0 013 17.5v-4z"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this)
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ u3("button", {
+                    onClick: onClose,
+                    class: "w-7 h-7 flex items-center justify-center rounded-md hover:bg-panel-hover transition-colors text-text-muted hover:text-ink",
+                    children: "×"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ u3("div", {
@@ -8375,7 +8548,7 @@ function TraceDrawer({ traceId, onClose, onAddAttributeFilter }) {
                 /* @__PURE__ */ u3(TraceWaterfall, {
                   spans,
                   events,
-                  onAddAttributeFilter
+                  onAddAttributeFilter: onAddAttributeFilter ?? (() => {})
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this)
@@ -9361,7 +9534,9 @@ function App() {
         route
       }, undefined, false, undefined, this);
     if (route.startsWith("/traces"))
-      return /* @__PURE__ */ u3(TracesView, {}, undefined, false, undefined, this);
+      return /* @__PURE__ */ u3(TracesView, {
+        route
+      }, undefined, false, undefined, this);
     if (route.startsWith("/workers"))
       return /* @__PURE__ */ u3(WorkersView, {}, undefined, false, undefined, this);
     if (route.startsWith("/kv"))

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

@@ -828,6 +828,10 @@
     width: 100%;
   }
 
+  .w-px {
+    width: 1px;
+  }
+
   .max-w-4xl {
     max-width: var(--container-4xl);
   }
@@ -1378,6 +1382,10 @@
     background-color: var(--color-blue-600);
   }
 
+  .bg-border {
+    background-color: var(--color-border);
+  }
+
   .bg-cyan-500\/15 {
     background-color: #00b7d726;
   }

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-3q3dhs4j.css"><script type="module" crossorigin src="/__dashboard/assets/chunk-4y88h3dc.js"></script></head>
+<link rel="stylesheet" crossorigin href="/__dashboard/assets/chunk-pqnphvm2.css"><script type="module" crossorigin src="/__dashboard/assets/chunk-5nxa3jfc.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.6.0",
+	"version": "0.7.0",
 	"type": "module",
 	"license": "MIT",
 	"repository": {

package/src/bindings/do-websocket-bridge.ts

@@ -28,6 +28,7 @@ export class BridgeWebSocket extends EventTarget {
 	readonly wsId: string
 	readyState = 1 // OPEN
 	private _postMessage: (msg: WsBridgeOutbound) => void
+	private _attachment: any = null
 
 	constructor(wsId: string, postMessage: (msg: WsBridgeOutbound) => void) {
 		super()
@@ -35,6 +36,14 @@ export class BridgeWebSocket extends EventTarget {
 		this._postMessage = postMessage
 	}
 
+	serializeAttachment(attachment: any): void {
+		this._attachment = JSON.parse(JSON.stringify(attachment))
+	}
+
+	deserializeAttachment(): any | null {
+		return this._attachment
+	}
+
 	send(data: string | ArrayBuffer): void {
 		if (this.readyState !== 1) return
 		this._postMessage({ type: 'ws-send', wsId: this.wsId, data })

package/src/bindings/durable-object.ts

@@ -602,6 +602,12 @@ export class DurableObjectStateImpl {
 		if (this._acceptedWebSockets.size >= this._limits.maxConcurrentWebSockets) {
 			throw new Error(`Exceeded max concurrent WebSocket connections (${this._limits.maxConcurrentWebSockets})`)
 		}
+
+		// Implicitly accept the WebSocket (in CF production, ctx.acceptWebSocket handles this)
+		if ('accept' in ws && typeof ws.accept === 'function') {
+			;(ws as any).accept()
+		}
+
 		const entry: AcceptedWebSocket = { ws, tags: tagList, autoResponseTimestamp: null }
 		this._acceptedWebSockets.add(entry)
 

package/src/bindings/websocket-pair.ts

@@ -41,6 +41,7 @@ export class CFWebSocket extends EventTarget {
 	/** @internal */ _peer: CFWebSocket | null = null
 	/** @internal */ _accepted = false
 	/** @internal */ _eventQueue: WSEvent[] = []
+	/** @internal */ _attachment: any = null
 
 	// Callback-style handlers (standard WebSocket compat)
 	onopen: ((ev: Event) => void) | null = null
@@ -48,6 +49,18 @@ export class CFWebSocket extends EventTarget {
 	onclose: ((ev: CloseEvent) => void) | null = null
 	onerror: ((ev: Event) => void) | null = null
 
+	/**
+	 * CF-specific: attach serializable data to this WebSocket.
+	 * Survives hibernation in production; here it's just in-memory.
+	 */
+	serializeAttachment(attachment: any): void {
+		this._attachment = JSON.parse(JSON.stringify(attachment))
+	}
+
+	deserializeAttachment(): any | null {
+		return this._attachment
+	}
+
 	/**
 	 * CF-specific: begin dispatching events.
 	 * Must be called before messages can be sent or received.

package/src/cli/dev.ts

@@ -333,6 +333,9 @@ export async function run(ctx: CliContext) {
 					const ce = ev as CloseEvent
 					ws.close(ce.code, ce.reason)
 				})
+				// Accept the client side so events from server.send() are dispatched
+				// (in CF production the runtime handles this; here we bridge manually)
+				cfSocket.accept()
 			},
 			message(ws, message) {
 				const data = ws.data as unknown as Record<string, unknown>

package/src/setup-globals.ts

@@ -1,6 +1,7 @@
 import { SqliteCacheStorage } from './bindings/cache'
 import { FixedLengthStream, IdentityTransformStream } from './bindings/cf-streams'
 import { patchGlobalCrypto } from './bindings/crypto-extras'
+import { WebSocketRequestResponsePair } from './bindings/durable-object'
 import { HTMLRewriter } from './bindings/html-rewriter'
 import { WebSocketPair } from './bindings/websocket-pair'
 import { getDatabase } from './db'
@@ -77,6 +78,26 @@ export function setupCloudflareGlobals() {
 		configurable: true,
 	})
 
+	// Register global `WebSocketRequestResponsePair` class (used by DO hibernation API)
+	Object.defineProperty(globalThis, 'WebSocketRequestResponsePair', {
+		value: WebSocketRequestResponsePair,
+		writable: false,
+		configurable: true,
+	})
+
+	// Patch Response to preserve CF-specific `webSocket` property from init
+	const OriginalResponse = globalThis.Response
+	globalThis.Response = class extends OriginalResponse {
+		webSocket?: InstanceType<typeof WebSocketPair>[0]
+
+		constructor(body?: any, init?: ResponseInit & { webSocket?: InstanceType<typeof WebSocketPair>[0] }) {
+			super(body, init)
+			if (init && 'webSocket' in init) {
+				this.webSocket = init.webSocket
+			}
+		}
+	}
+
 	// Register global CF stream classes
 	Object.defineProperty(globalThis, 'IdentityTransformStream', {
 		value: IdentityTransformStream,

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

@@ -19,7 +19,7 @@ class LopataDevEnvironment extends DevEnvironment {
 
 	get runner(): ModuleRunner {
 		if (!this._runner) {
-			this._runner = createServerModuleRunner(this, { hmr: false })
+			this._runner = createServerModuleRunner(this, { hmr: {} })
 		}
 		return this._runner
 	}
@@ -42,15 +42,19 @@ export function configPlugin(envName: string): Plugin {
 		name: 'lopata:config',
 		config() {
 			return {
+				// Disable Vite's SPA fallback (history API fallback) — Lopata handles
+				// all requests via worker.fetch(), so no index.html rewriting is needed.
+				appType: 'custom',
 				server: {
 					watch: {
-						ignored: ['**/.lopata/**'],
+						ignored: ['**/.lopata/**', '**/.wrangler/**', '**/.react-router/**'],
 					},
 				},
 				environments: {
 					[envName]: {
 						resolve: {
 							externalConditions: ['workerd', 'worker'],
+							dedupe: ['react', 'react-dom', 'react-router', 'react-router-dom'],
 						},
 						dev: {
 							createEnvironment(name, config) {

package/src/vite-plugin/dev-server-plugin.ts

@@ -52,8 +52,53 @@ export function devServerPlugin(options: DevServerPluginOptions): Plugin {
 	let currentModule: Record<string, unknown> | null = null
 	// Serializes module reload — prevents concurrent wireClassRefs calls
 	let reloadLock: Promise<void> | null = null
-	// Files changed since last request — coalesced into a single invalidation batch
-	let changedFiles: Set<string> = new Set()
+
+	/**
+	 * Import the worker module through Vite's SSR runner and re-wire
+	 * class refs when the module identity changes (HMR invalidation).
+	 * Serialized via reloadLock to prevent concurrent wireClassRefs calls.
+	 */
+	async function ensureWorkerModule(): Promise<Record<string, unknown>> {
+		const ssrEnv = server.environments[options.envName]
+		if (!ssrEnv || !('runner' in ssrEnv)) {
+			throw new Error(`SSR environment "${options.envName}" not found or has no runner`)
+		}
+
+		const entrypoint = resolve(server.config.root, config.main)
+
+		// Wait for any in-progress reload before importing
+		if (reloadLock) await reloadLock
+
+		const workerModule = await (ssrEnv as any).runner.import(entrypoint) as Record<string, unknown>
+
+		// Re-wire class refs when module changes (HMR invalidation)
+		if (workerModule !== currentModule) {
+			if (reloadLock) {
+				// Another request started reloading while we were importing — wait for it
+				await reloadLock
+			} else {
+				let resolveReload!: () => void
+				reloadLock = new Promise(r => {
+					resolveReload = r
+				})
+				try {
+					currentModule = workerModule
+					wireClassRefs(registry, workerModule, env, workerRegistry)
+					setGlobalEnv(env)
+					console.log('[lopata:vite] Worker module (re)loaded, classes wired')
+				} catch (err) {
+					// Reset so next request retries
+					currentModule = null
+					throw err
+				} finally {
+					reloadLock = null
+					resolveReload()
+				}
+			}
+		}
+
+		return currentModule ?? workerModule
+	}
 
 	return {
 		name: 'lopata:dev-server',
@@ -167,23 +212,7 @@ export function devServerPlugin(options: DevServerPluginOptions): Plugin {
 				apiMod.setWorkerRegistry(workerRegistry)
 			}
 
-			// 5. Track SSR-relevant file changes.
-			// Collect changed file paths; the next request will invalidate only
-			// the affected modules (and their transitive importers) instead of
-			// clearing the entire runner cache.  HMR on the runner is disabled
-			// (hmr: false in config-plugin) so there's no async race.
-			server.watcher.on('change', (file) => {
-				const ssrEnv = server.environments[options.envName]
-				if (!ssrEnv) return
-				const normalizedFile = file.replace(/\\/g, '/')
-				const mods = ssrEnv.moduleGraph.getModulesByFile(normalizedFile)
-				if (mods && mods.size > 0) {
-					changedFiles.add(normalizedFile)
-					currentModule = null
-				}
-			})
-
-			// 6. Set up WebSocket trace streaming on httpServer
+			// 5. Set up WebSocket trace streaming on httpServer
 			setupTraceWebSocket(server)
 
 			// 6. Return middleware callback (post-middleware — runs after framework plugins)
@@ -232,63 +261,11 @@ export function devServerPlugin(options: DevServerPluginOptions): Plugin {
 					}
 
 					try {
-						const ssrEnv = server.environments[options.envName]
-						if (!ssrEnv || !('runner' in ssrEnv)) {
-							console.error(`[lopata:vite] SSR environment "${options.envName}" not found or has no runner`)
-							return next()
-						}
-
-						const entrypoint = resolve(server.config.root, config.main)
-
-						// Wait for any in-progress reload before importing
-						if (reloadLock) await reloadLock
-
-						// Granular invalidation: only invalidate modules for changed
-						// files and their transitive importers, instead of wiping the
-						// entire runner cache.  This preserves cached evaluations of
-						// unchanged modules for faster re-evaluation.
-						if (changedFiles.size > 0) {
-							const files = changedFiles
-							changedFiles = new Set()
-							const runner = (ssrEnv as any).runner
-							const count = invalidateChangedModules(runner.evaluatedModules, files)
-							if (count > 0) {
-								console.log(`[lopata:vite] Invalidated ${count} module(s) (${files.size} file(s) changed)`)
-							}
-						}
-
-						const workerModule = await (ssrEnv as any).runner.import(entrypoint) as Record<string, unknown>
-
-						// Re-wire class refs when module changes (HMR invalidation)
-						if (workerModule !== currentModule) {
-							if (reloadLock) {
-								// Another request started reloading while we were importing — wait for it
-								await reloadLock
-							} else {
-								let resolveReload!: () => void
-								reloadLock = new Promise(r => {
-									resolveReload = r
-								})
-								try {
-									currentModule = workerModule
-									wireClassRefs(registry, workerModule, env, workerRegistry)
-									setGlobalEnv(env)
-									console.log('[lopata:vite] Worker module (re)loaded, classes wired')
-								} catch (err) {
-									// Reset so next request retries
-									currentModule = null
-									throw err
-								} finally {
-									reloadLock = null
-									resolveReload()
-								}
-							}
-						}
+						const activeModule = await ensureWorkerModule()
 
 						const request = nodeReqToRequest(req)
 						const parsedUrl = new URL(request.url)
 
-						const activeModule = currentModule ?? workerModule
 						const handler = activeModule.default as Record<string, unknown>
 						if (!handler || typeof handler.fetch !== 'function') {
 							console.error('[lopata:vite] Worker module default export has no fetch() method')
@@ -350,98 +327,28 @@ export function devServerPlugin(options: DevServerPluginOptions): Plugin {
 
 		// Dynamically import ws (available as Vite dependency)
 		import('ws').then(({ WebSocketServer }) => {
-			const wss = new WebSocketServer({ noServer: true })
+			const traceWss = new WebSocketServer({ noServer: true })
+			const workerWss = new WebSocketServer({ noServer: true })
 
 			httpServer.on('upgrade', (req: IncomingMessage, socket: any, head: Buffer) => {
 				const url = req.url ?? ''
-				if (!url.startsWith('/__api/traces/ws')) return
-
-				wss.handleUpgrade(req, socket, head, (ws: any) => {
-					const store = getTraceStore()
-					let filter: { path?: string; status?: string; attributeFilters?: Array<{ key: string; value: string; type: 'include' | 'exclude' }> } = {}
-					let buffer: any[] = []
-					const MAX_BUFFER = 1000
-					const allowedTraces = new Set<string>()
-					const excludedTraces = new Set<string>()
-
-					function isRootSpanFiltered(span: { name: string; status: string; parentSpanId: string | null; attributes: Record<string, unknown> }): boolean {
-						if (filter.status && filter.status !== 'all') {
-							if (span.status !== 'unset' && span.status !== filter.status) return true
-						}
-						if (filter.path) {
-							if (!matchGlob(span.name, filter.path)) return true
-						}
-						if (filter.attributeFilters && filter.attributeFilters.length > 0) {
-							const attrs = span.attributes
-							for (const af of filter.attributeFilters) {
-								const val = attrs[af.key]
-								const matches = val !== undefined && String(val).toLowerCase().includes(af.value.toLowerCase())
-								if (af.type === 'include' && !matches) return true
-								if (af.type === 'exclude' && matches) return true
-							}
-						}
-						return false
-					}
-
-					const unsubscribe = store.subscribe((event: any) => {
-						const traceId = event.type === 'span.event' ? event.event.traceId : event.span.traceId
-						if ((event.type === 'span.start' || event.type === 'span.end') && event.span.parentSpanId === null) {
-							if (isRootSpanFiltered(event.span)) {
-								excludedTraces.add(traceId)
-								allowedTraces.delete(traceId)
-								return
-							}
-							excludedTraces.delete(traceId)
-							allowedTraces.add(traceId)
-						} else {
-							if (excludedTraces.has(traceId)) return
-						}
-						if (buffer.length < MAX_BUFFER) {
-							buffer.push(event)
-						}
-					})
-
-					const interval = setInterval(() => {
-						if (buffer.length > 0) {
-							ws.send(JSON.stringify({ type: 'batch', events: buffer }))
-							buffer = []
-						}
-					}, 500)
 
-					// Parse filter from query params
-					try {
-						const reqUrl = new URL(req.url ?? '', `http://${req.headers.host ?? 'localhost'}`)
-						const statusParam = reqUrl.searchParams.get('status')
-						const pathParam = reqUrl.searchParams.get('path')
-						if (statusParam) filter.status = statusParam
-						if (pathParam) filter.path = pathParam
-					} catch {}
-
-					let sinceMs = 15 * 60 * 1000
-					const since = Date.now() - sinceMs
-					const recent = store.getRecentTraces(since, 200, filter)
-					ws.send(JSON.stringify({ type: 'initial', traces: recent }))
+				// Skip Vite HMR WebSocket — Vite uses sec-websocket-protocol
+				// "vite-hmr" / "vite-ping" to identify its connections
+				const wsProtocol = req.headers['sec-websocket-protocol']
+				if (wsProtocol === 'vite-hmr' || wsProtocol === 'vite-ping') return
 
-					ws.on('message', (data: any) => {
-						try {
-							const msg = JSON.parse(typeof data === 'string' ? data : data.toString())
-							if (msg.type === 'filter') {
-								filter = { path: msg.path, status: msg.status, attributeFilters: msg.attributeFilters }
-								if (msg.sinceMs !== undefined) sinceMs = msg.sinceMs
-								allowedTraces.clear()
-								excludedTraces.clear()
-								const freshSince = sinceMs > 0 ? Date.now() - sinceMs : 0
-								const freshTraces = store.getRecentTraces(freshSince, 200, filter)
-								ws.send(JSON.stringify({ type: 'initial', traces: freshTraces }))
-							}
-						} catch {}
+				if (url.startsWith('/__api/traces/ws')) {
+					traceWss.handleUpgrade(req, socket, head, (ws: any) => {
+						handleTraceWebSocket(ws, req)
 					})
+					return
+				}
 
-					ws.on('close', () => {
-						unsubscribe()
-						clearInterval(interval)
-					})
-				})
+				// Worker WebSocket upgrade — bridge to CF WebSocketPair
+				if (req.headers.upgrade?.toLowerCase() === 'websocket') {
+					handleWorkerWebSocketUpgrade(workerWss, req, socket, head)
+				}
 			})
 
 			console.log('[lopata:vite] Dashboard: http://localhost:5173/__dashboard')
@@ -450,51 +357,165 @@ export function devServerPlugin(options: DevServerPluginOptions): Plugin {
 			console.log('[lopata:vite] Dashboard available (trace streaming disabled — ws package not found)')
 		})
 	}
-}
 
-/**
- * Invalidate runner-evaluated modules for the given changed files and all
- * their transitive importers.  Virtual modules (IDs starting with `\0`) are
- * skipped to preserve shimmed CF modules (see commit 75b1736).
- *
- * Returns the number of modules invalidated.
- */
-function invalidateChangedModules(
-	evaluatedModules: { getModulesByFile(file: string): Iterable<{ id: string; importers: Set<any> }> | undefined; invalidateModule(node: any): void },
-	changedFiles: Set<string>,
-): number {
-	const toInvalidate = new Set<{ id: string; importers: Set<any> }>()
-
-	for (const file of changedFiles) {
-		const nodes = evaluatedModules.getModulesByFile(file)
-		if (!nodes) continue
-		for (const node of nodes) {
-			collectTransitiveImporters(node, toInvalidate)
+	function handleTraceWebSocket(ws: any, req: IncomingMessage) {
+		const store = getTraceStore()
+		let filter: { path?: string; status?: string; attributeFilters?: Array<{ key: string; value: string; type: 'include' | 'exclude' }> } = {}
+		let buffer: any[] = []
+		const MAX_BUFFER = 1000
+		const allowedTraces = new Set<string>()
+		const excludedTraces = new Set<string>()
+
+		function isRootSpanFiltered(span: { name: string; status: string; parentSpanId: string | null; attributes: Record<string, unknown> }): boolean {
+			if (filter.status && filter.status !== 'all') {
+				if (span.status !== 'unset' && span.status !== filter.status) return true
+			}
+			if (filter.path) {
+				if (!matchGlob(span.name, filter.path)) return true
+			}
+			if (filter.attributeFilters && filter.attributeFilters.length > 0) {
+				const attrs = span.attributes
+				for (const af of filter.attributeFilters) {
+					const val = attrs[af.key]
+					const matches = val !== undefined && String(val).toLowerCase().includes(af.value.toLowerCase())
+					if (af.type === 'include' && !matches) return true
+					if (af.type === 'exclude' && matches) return true
+				}
+			}
+			return false
 		}
-	}
 
-	for (const node of toInvalidate) {
-		evaluatedModules.invalidateModule(node)
+		const unsubscribe = store.subscribe((event: any) => {
+			const traceId = event.type === 'span.event' ? event.event.traceId : event.span.traceId
+			if ((event.type === 'span.start' || event.type === 'span.end') && event.span.parentSpanId === null) {
+				if (isRootSpanFiltered(event.span)) {
+					excludedTraces.add(traceId)
+					allowedTraces.delete(traceId)
+					return
+				}
+				excludedTraces.delete(traceId)
+				allowedTraces.add(traceId)
+			} else {
+				if (excludedTraces.has(traceId)) return
+			}
+			if (buffer.length < MAX_BUFFER) {
+				buffer.push(event)
+			}
+		})
+
+		const interval = setInterval(() => {
+			if (buffer.length > 0) {
+				ws.send(JSON.stringify({ type: 'batch', events: buffer }))
+				buffer = []
+			}
+		}, 500)
+
+		// Parse filter from query params
+		try {
+			const reqUrl = new URL(req.url ?? '', `http://${req.headers.host ?? 'localhost'}`)
+			const statusParam = reqUrl.searchParams.get('status')
+			const pathParam = reqUrl.searchParams.get('path')
+			if (statusParam) filter.status = statusParam
+			if (pathParam) filter.path = pathParam
+		} catch {}
+
+		let sinceMs = 15 * 60 * 1000
+		const since = Date.now() - sinceMs
+		const recent = store.getRecentTraces(since, 200, filter)
+		ws.send(JSON.stringify({ type: 'initial', traces: recent }))
+
+		ws.on('message', (data: any) => {
+			try {
+				const msg = JSON.parse(typeof data === 'string' ? data : data.toString())
+				if (msg.type === 'filter') {
+					filter = { path: msg.path, status: msg.status, attributeFilters: msg.attributeFilters }
+					if (msg.sinceMs !== undefined) sinceMs = msg.sinceMs
+					allowedTraces.clear()
+					excludedTraces.clear()
+					const freshSince = sinceMs > 0 ? Date.now() - sinceMs : 0
+					const freshTraces = store.getRecentTraces(freshSince, 200, filter)
+					ws.send(JSON.stringify({ type: 'initial', traces: freshTraces }))
+				}
+			} catch {}
+		})
+
+		ws.on('close', () => {
+			unsubscribe()
+			clearInterval(interval)
+		})
 	}
 
-	return toInvalidate.size
-}
+	async function handleWorkerWebSocketUpgrade(wss: any, req: IncomingMessage, socket: any, head: Buffer) {
+		try {
+			const { CFWebSocket } = await import('../bindings/websocket-pair.ts')
 
-/**
- * Collect `node` and all its transitive importers into `result`.
- * Skips virtual modules (IDs starting with `\0`) — these are CF module shims
- * that must not be invalidated or traversed further.
- */
-function collectTransitiveImporters(
-	node: { id: string; importers: Set<any> },
-	result: Set<{ id: string; importers: Set<any> }>,
-): void {
-	if (result.has(node)) return
-	// Skip virtual modules — CF shims must stay cached
-	if (node.id.startsWith('\0')) return
-	result.add(node)
-	for (const importer of node.importers) {
-		collectTransitiveImporters(importer, result)
+			const activeModule = await ensureWorkerModule()
+			const handler = activeModule.default as Record<string, unknown>
+			if (!handler || typeof handler.fetch !== 'function') {
+				socket.destroy()
+				return
+			}
+
+			const request = nodeReqToRequest(req)
+			const ctx = new ExecutionContext()
+			const response = await runWithExecutionContext(ctx, async () => {
+				return (handler.fetch as Function).call(handler, request, env, ctx) as Response
+			})
+
+			const cfSocket = (response as Response & { webSocket?: InstanceType<typeof CFWebSocket> }).webSocket
+			if (response.status !== 101 || !cfSocket || !(cfSocket instanceof CFWebSocket)) {
+				socket.destroy()
+				return
+			}
+
+			// Complete the upgrade and bridge
+			wss.handleUpgrade(req, socket, head, (ws: any) => {
+				// CF → real WS
+				cfSocket.addEventListener('message', (ev: Event) => {
+					const msgData = (ev as MessageEvent).data
+					try {
+						ws.send(msgData)
+					} catch {}
+				})
+				cfSocket.addEventListener('close', (ev: Event) => {
+					const ce = ev as CloseEvent
+					try {
+						ws.close(ce.code, ce.reason)
+					} catch {}
+				})
+				// Accept the client side so events from server.send() are dispatched
+				cfSocket.accept()
+
+				// Real WS → CF
+				ws.on('message', (data: Buffer, isBinary: boolean) => {
+					const msgData = isBinary
+						? data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength) as ArrayBuffer
+						: data.toString('utf-8')
+					const evt = { type: 'message' as const, data: msgData }
+					if (cfSocket._peer?._accepted) {
+						cfSocket._peer._dispatchWSEvent(evt)
+					} else if (cfSocket._peer) {
+						cfSocket._peer._eventQueue.push(evt)
+					}
+				})
+
+				ws.on('close', (code: number, reason: Buffer) => {
+					if (cfSocket._peer && cfSocket._peer.readyState !== 3) {
+						const evt = { type: 'close' as const, code: code ?? 1000, reason: reason?.toString('utf-8') ?? '', wasClean: true }
+						if (cfSocket._peer._accepted) {
+							cfSocket._peer._dispatchWSEvent(evt)
+						} else {
+							cfSocket._peer._eventQueue.push(evt)
+						}
+						cfSocket._peer.readyState = 3
+					}
+					cfSocket.readyState = 3
+				})
+			})
+		} catch (err) {
+			console.error('[lopata:vite] Worker WebSocket upgrade failed:', err)
+			socket.destroy()
+		}
 	}
 }