lopata 0.6.0 → 0.8.1

package/dist/dashboard/{chunk-4y88h3dc.js → chunk-yxzrcvyh.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,
@@ -6251,6 +6264,325 @@ function truncateUrl(url) {
   }
 }
 
+// src/dashboard/views/generations.tsx
+var STATE_COLORS = {
+  active: "bg-emerald-500/15 text-emerald-500",
+  draining: "bg-yellow-500/15 text-yellow-500",
+  stopped: "bg-gray-500/15 text-gray-400"
+};
+var STATE_DESCRIPTIONS = {
+  active: "Receiving new requests",
+  draining: "Finishing in-flight requests, no new requests accepted",
+  stopped: "All work finished, will be removed shortly"
+};
+function formatRelativeTime(timestamp) {
+  const diff = Date.now() - timestamp;
+  if (diff < 1000)
+    return "just now";
+  if (diff < 60000)
+    return `${Math.floor(diff / 1000)}s ago`;
+  if (diff < 3600000)
+    return `${Math.floor(diff / 60000)}m ago`;
+  return `${Math.floor(diff / 3600000)}h ago`;
+}
+function GenerationCard({ gen, onReload, onStop }) {
+  const [detail, setDetail] = d2(null);
+  const [expanded, setExpanded] = d2(false);
+  y2(() => {
+    if (!expanded)
+      return;
+    rpc("generations.detail", { id: gen.id, workerName: gen.workerName }).then(setDetail).catch(() => {});
+  }, [expanded, gen.id]);
+  return /* @__PURE__ */ u3("div", {
+    class: "bg-panel rounded-lg border border-border p-4",
+    children: [
+      /* @__PURE__ */ u3("div", {
+        class: "flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ u3("div", {
+            class: "flex items-center gap-3",
+            children: [
+              /* @__PURE__ */ u3("span", {
+                class: "text-lg font-bold font-mono text-ink",
+                children: [
+                  "#",
+                  gen.id
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ u3("span", {
+                title: STATE_DESCRIPTIONS[gen.state],
+                children: /* @__PURE__ */ u3(StatusBadge, {
+                  status: gen.state,
+                  colorMap: STATE_COLORS
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              gen.workerName && /* @__PURE__ */ u3("span", {
+                class: "inline-flex px-2 py-0.5 rounded-md text-xs font-medium bg-panel-hover text-text-secondary",
+                children: gen.workerName
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ u3("div", {
+            class: "flex items-center gap-2",
+            children: [
+              gen.state === "active" && /* @__PURE__ */ u3("button", {
+                onClick: onReload,
+                class: "rounded-md px-3 py-1.5 text-xs font-medium bg-panel border border-border text-text-secondary hover:bg-panel-hover transition-all",
+                children: "Reload"
+              }, undefined, false, undefined, this),
+              gen.state === "draining" && /* @__PURE__ */ u3("button", {
+                onClick: () => onStop(gen.id),
+                class: "rounded-md px-3 py-1.5 text-xs font-medium bg-panel border border-border text-text-secondary btn-danger transition-all",
+                children: "Force Stop"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ u3("div", {
+        class: "mt-3 flex items-center gap-4 text-xs text-text-muted",
+        children: [
+          /* @__PURE__ */ u3("span", {
+            title: new Date(gen.createdAt).toLocaleString(),
+            children: [
+              "Loaded ",
+              formatRelativeTime(gen.createdAt)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ u3("span", {
+            title: "Number of HTTP requests currently being processed by this generation",
+            children: [
+              gen.activeRequests,
+              " in-flight request",
+              gen.activeRequests !== 1 ? "s" : ""
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      gen.durableObjects && gen.durableObjects.length > 0 && /* @__PURE__ */ u3("div", {
+        class: "mt-3 flex flex-wrap gap-2",
+        children: gen.durableObjects.map((d3) => /* @__PURE__ */ u3("span", {
+          class: "inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs bg-panel-hover text-text-secondary",
+          title: `Durable Object class "${d3.namespace}": ${d3.activeInstances} active instance(s), ${d3.totalWebSockets} WebSocket connection(s)`,
+          children: [
+            d3.namespace,
+            ":",
+            /* @__PURE__ */ u3("span", {
+              class: "font-medium text-ink",
+              children: d3.activeInstances
+            }, undefined, false, undefined, this),
+            " instance",
+            d3.activeInstances !== 1 ? "s" : "",
+            d3.totalWebSockets > 0 && /* @__PURE__ */ u3("span", {
+              class: "text-text-muted",
+              children: [
+                "(",
+                d3.totalWebSockets,
+                " ws)"
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, d3.namespace, true, undefined, this))
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ u3("button", {
+        onClick: () => setExpanded(!expanded),
+        class: "mt-2 text-xs text-text-muted hover:text-ink transition-colors",
+        children: expanded ? "Hide DO instances" : "Show DO instances"
+      }, undefined, false, undefined, this),
+      expanded && detail && /* @__PURE__ */ u3("div", {
+        class: "mt-3 border-t border-border pt-3",
+        children: detail.doNamespaces.length === 0 ? /* @__PURE__ */ u3("div", {
+          class: "text-xs text-text-muted",
+          children: "No active Durable Object instances in this generation"
+        }, undefined, false, undefined, this) : detail.doNamespaces.map((ns) => /* @__PURE__ */ u3("div", {
+          class: "mb-3",
+          children: [
+            /* @__PURE__ */ u3("div", {
+              class: "text-xs font-medium text-text-secondary mb-1",
+              children: ns.namespace
+            }, undefined, false, undefined, this),
+            ns.instances.length === 0 ? /* @__PURE__ */ u3("div", {
+              class: "text-xs text-text-muted ml-2",
+              children: "No active instances"
+            }, undefined, false, undefined, this) : /* @__PURE__ */ u3("div", {
+              class: "ml-2 space-y-0.5",
+              children: ns.instances.map((inst) => /* @__PURE__ */ u3("div", {
+                class: "text-xs font-mono text-text-data flex items-center gap-2",
+                children: [
+                  /* @__PURE__ */ u3("span", {
+                    class: "truncate max-w-[200px]",
+                    title: inst.id,
+                    children: inst.id
+                  }, undefined, false, undefined, this),
+                  inst.wsCount > 0 && /* @__PURE__ */ u3("span", {
+                    class: "text-text-muted",
+                    title: "Active WebSocket connections",
+                    children: [
+                      inst.wsCount,
+                      " ws"
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, inst.id, true, undefined, this))
+            }, undefined, false, undefined, this)
+          ]
+        }, ns.namespace, true, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function GenerationsView() {
+  const { data, refetch } = useQuery("generations.list");
+  const reload = useMutation("generations.reload");
+  const drain = useMutation("generations.drain");
+  const configMutation = useMutation("generations.config");
+  const [gracePeriod, setGracePeriod] = d2("");
+  y2(() => {
+    if (data?.gracePeriodMs != null && gracePeriod === "") {
+      setGracePeriod(String(data.gracePeriodMs));
+    }
+  }, [data?.gracePeriodMs]);
+  y2(() => {
+    const timer = setInterval(refetch, 2000);
+    return () => clearInterval(timer);
+  }, [refetch]);
+  const handleReload = q2(async (workerName) => {
+    await reload.mutate(workerName ? { workerName } : undefined);
+    refetch();
+  }, [reload, refetch]);
+  const handleStop = q2(async (workerName) => {
+    await drain.mutate(workerName ? { workerName } : undefined);
+    refetch();
+  }, [drain, refetch]);
+  const handleGracePeriodSave = q2(() => {
+    const ms = parseInt(gracePeriod, 10);
+    if (Number.isNaN(ms) || ms < 0)
+      return;
+    configMutation.mutate({ gracePeriodMs: ms });
+  }, [gracePeriod, configMutation]);
+  if (!data) {
+    return /* @__PURE__ */ u3("div", {
+      class: "p-4 sm:p-8",
+      children: [
+        /* @__PURE__ */ u3(PageHeader, {
+          title: "Generations"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ u3("div", {
+          class: "text-text-muted text-sm text-center py-12",
+          children: "Loading..."
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  const generations = data.generations;
+  return /* @__PURE__ */ u3("div", {
+    class: "p-4 sm:p-8",
+    children: [
+      /* @__PURE__ */ u3(PageHeader, {
+        title: "Generations",
+        subtitle: `${generations.length} generation(s)`,
+        actions: /* @__PURE__ */ u3("div", {
+          class: "flex items-center gap-2",
+          children: [
+            /* @__PURE__ */ u3("div", {
+              class: "flex items-center gap-1",
+              title: "How long to wait for in-flight requests to finish before force-stopping an old generation",
+              children: [
+                /* @__PURE__ */ u3("label", {
+                  class: "text-xs text-text-muted",
+                  children: "Grace period (ms):"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ u3("input", {
+                  type: "number",
+                  value: gracePeriod,
+                  onInput: (e3) => setGracePeriod(e3.target.value),
+                  onBlur: handleGracePeriodSave,
+                  class: "bg-panel border border-border rounded-md px-2 py-1 text-xs w-24 outline-none focus:border-border focus:ring-1 focus:ring-border"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ u3("button", {
+              onClick: () => handleReload(),
+              disabled: reload.isLoading,
+              class: "rounded-md px-3 py-1.5 text-sm font-medium bg-accent-lime text-surface hover:bg-accent-lime/90 disabled:opacity-50 transition-all",
+              children: reload.isLoading ? "Reloading..." : "Reload"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ u3("p", {
+        class: "text-xs text-text-muted mb-6 max-w-xl leading-relaxed",
+        children: [
+          "A generation is a snapshot of your worker code at a point in time. When code changes, a new generation is created and the old one is drained (finishes in-flight work, then stops). Each request and Durable Object is tied to the generation that was active when it started. The",
+          " ",
+          /* @__PURE__ */ u3("span", {
+            class: "font-mono",
+            children: "Gen"
+          }, undefined, false, undefined, this),
+          " column in Traces shows which generation handled each request."
+        ]
+      }, undefined, true, undefined, this),
+      generations.length === 0 ? /* @__PURE__ */ u3(EmptyState, {
+        message: "No generations yet. Start your dev server to see generations here."
+      }, undefined, false, undefined, this) : /* @__PURE__ */ u3("div", {
+        class: "space-y-4",
+        children: generations.map((gen) => /* @__PURE__ */ u3(GenerationCard, {
+          gen,
+          onReload: () => handleReload(),
+          onStop: (id) => handleStop()
+        }, gen.id, false, undefined, this))
+      }, undefined, false, undefined, this),
+      data.workers && data.workers.length > 0 && /* @__PURE__ */ u3("div", {
+        class: "mt-8",
+        children: [
+          /* @__PURE__ */ u3("h2", {
+            class: "text-lg font-bold text-ink mb-1",
+            children: "Per-Worker Generations"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ u3("p", {
+            class: "text-xs text-text-muted mb-4",
+            children: "In multi-worker mode, each worker has its own independent generation lifecycle."
+          }, undefined, false, undefined, this),
+          data.workers.map((w3) => /* @__PURE__ */ u3("div", {
+            class: "mb-6",
+            children: [
+              /* @__PURE__ */ u3("div", {
+                class: "flex items-center gap-3 mb-3",
+                children: [
+                  /* @__PURE__ */ u3("h3", {
+                    class: "text-sm font-bold text-ink",
+                    children: w3.workerName
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ u3("span", {
+                    class: "text-xs text-text-muted",
+                    children: [
+                      w3.generations.length,
+                      " generation(s)"
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ u3("button", {
+                    onClick: () => handleReload(w3.workerName),
+                    class: "rounded-md px-2 py-1 text-xs font-medium bg-panel border border-border text-text-secondary hover:bg-panel-hover transition-all",
+                    children: "Reload"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ u3("div", {
+                class: "space-y-3",
+                children: w3.generations.map((gen) => /* @__PURE__ */ u3(GenerationCard, {
+                  gen,
+                  onReload: () => handleReload(w3.workerName),
+                  onStop: () => handleStop(w3.workerName)
+                }, gen.id, false, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, w3.workerName, true, undefined, this))
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
 // src/dashboard/views/home.tsx
 var INVENTORY = [
   { key: "kv", label: "KV", path: "/kv", icon: "kv" },
@@ -7582,6 +7914,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 +7936,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");
@@ -7634,7 +8007,8 @@ function useTraceStream() {
                 startTime: s3.startTime,
                 durationMs: s3.durationMs,
                 spanCount: 1,
-                errorCount: 0
+                errorCount: 0,
+                generationId: typeof s3.attributes["lopata.generation_id"] === "number" ? s3.attributes["lopata.generation_id"] : null
               });
             } else if (event.type === "span.end" && event.span.parentSpanId === null) {
               const s3 = event.span;
@@ -7707,7 +8081,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 +8177,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)
@@ -7910,6 +8290,10 @@ function TracesView() {
                           class: "text-left px-4 py-2.5 text-xs text-text-muted font-medium",
                           children: "Worker"
                         }, undefined, false, undefined, this),
+                        /* @__PURE__ */ u3("th", {
+                          class: "text-left px-4 py-2.5 text-xs text-text-muted font-medium",
+                          children: "Gen"
+                        }, undefined, false, undefined, this),
                         /* @__PURE__ */ u3("th", {
                           class: "text-left px-4 py-2.5 text-xs text-text-muted font-medium",
                           style: { minWidth: "140px" },
@@ -7957,6 +8341,16 @@ function TracesView() {
                             children: trace.workerName
                           }, undefined, false, undefined, this)
                         }, undefined, false, undefined, this),
+                        /* @__PURE__ */ u3("td", {
+                          class: "px-4 py-2.5",
+                          children: trace.generationId != null && /* @__PURE__ */ u3("span", {
+                            class: "inline-flex px-1.5 py-0.5 rounded text-[10px] font-mono font-medium bg-panel-hover text-text-secondary",
+                            children: [
+                              "#",
+                              trace.generationId
+                            ]
+                          }, undefined, true, undefined, this)
+                        }, undefined, false, undefined, this),
                         /* @__PURE__ */ u3("td", {
                           class: "px-4 py-2.5",
                           children: /* @__PURE__ */ u3(DurationBar, {
@@ -8001,6 +8395,139 @@ 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),
+                  typeof rootSpan?.attributes["lopata.generation_id"] === "number" && /* @__PURE__ */ u3("span", {
+                    class: "ml-2 inline-flex px-1.5 py-0.5 rounded text-[10px] font-mono font-medium bg-panel-hover text-text-secondary",
+                    children: [
+                      "Gen #",
+                      rootSpan.attributes["lopata.generation_id"]
+                    ]
+                  }, undefined, true, 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 +8625,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 +8650,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 +8659,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 +8740,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 +8766,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 +8794,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 +8803,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 +8889,7 @@ function TraceDrawer({ traceId, onClose, onAddAttributeFilter }) {
                 /* @__PURE__ */ u3(TraceWaterfall, {
                   spans,
                   events,
-                  onAddAttributeFilter
+                  onAddAttributeFilter: onAddAttributeFilter ?? (() => {})
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this)
@@ -9361,9 +9875,13 @@ 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("/generations"))
+      return /* @__PURE__ */ u3(GenerationsView, {}, undefined, false, undefined, this);
     if (route.startsWith("/kv"))
       return /* @__PURE__ */ u3(KvView, {
         route
@@ -9480,8 +9998,26 @@ function App() {
       }, undefined, true, undefined, this),
       /* @__PURE__ */ u3("div", {
         class: "border-t border-border px-2 py-2",
-        children: /* @__PURE__ */ u3(ThemeSwitcher, {}, undefined, false, undefined, this)
-      }, undefined, false, undefined, this)
+        children: [
+          /* @__PURE__ */ u3("a", {
+            href: "#/generations",
+            class: `flex items-center gap-2 w-full px-3 py-1.5 text-xs font-mono rounded-md transition-colors ${activeSection === "/generations" ? "text-ink bg-panel-hover" : "text-text-muted hover:text-ink hover:bg-panel-hover"}`,
+            children: [
+              /* @__PURE__ */ u3("span", {
+                class: "w-4 text-center opacity-60",
+                children: /* @__PURE__ */ u3(BindingIcon, {
+                  type: "workers",
+                  class: "w-4 text-center opacity-60 flex items-center justify-center"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ u3("span", {
+                children: "Generations"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ u3(ThemeSwitcher, {}, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
     ]
   }, undefined, true, undefined, this);
   return /* @__PURE__ */ u3("div", {