lopata 0.5.2 → 0.7.0

package/dist/dashboard/{chunk-rae638a4.js → chunk-5nxa3jfc.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),
@@ -5718,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)
@@ -5883,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,
@@ -7554,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);
@@ -7568,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");
@@ -7679,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("");
@@ -7766,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)
@@ -7973,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);
@@ -8070,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))
@@ -8098,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);
@@ -8108,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) => {
@@ -8188,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)
@@ -8213,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", {
@@ -8274,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", {
@@ -8284,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", {
@@ -8347,7 +8548,7 @@ function TraceDrawer({ traceId, onClose, onAddAttributeFilter }) {
                 /* @__PURE__ */ u3(TraceWaterfall, {
                   spans,
                   events,
-                  onAddAttributeFilter
+                  onAddAttributeFilter: onAddAttributeFilter ?? (() => {})
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this)
@@ -9333,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-a68x1m5f.css → chunk-pqnphvm2.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);
   }
@@ -824,6 +828,10 @@
     width: 100%;
   }
 
+  .w-px {
+    width: 1px;
+  }
+
   .max-w-4xl {
     max-width: var(--container-4xl);
   }
@@ -880,6 +888,10 @@
     min-width: calc(var(--spacing) * 0);
   }
 
+  .min-w-\[16px\] {
+    min-width: 16px;
+  }
+
   .min-w-\[20px\] {
     min-width: 20px;
   }
@@ -1370,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-a68x1m5f.css"><script type="module" crossorigin src="/__dashboard/assets/chunk-rae638a4.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.5.2",
+	"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>