@telorun/debug-ui 0.6.0 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telorun/debug-ui",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Browser-safe debug event UI for Telo: wire types, filtering, SSE client, and React components for watching a running app's event stream.",
   "keywords": [
     "telo",
@@ -46,7 +46,7 @@
     "@dagrejs/dagre": "^3.0.0",
     "@xyflow/react": "^12.10.2",
     "lucide-react": "^1.8.0",
-    "@telorun/debug-wire": "0.3.0"
+    "@telorun/debug-wire": "0.4.0"
   },
   "peerDependencies": {
     "react": ">=18",

package/src/components/DebugPanel.tsx

@@ -2,7 +2,7 @@ import { type ReactNode, useMemo, useState } from "react";
 import type { AppEndpoint, EndpointReachability } from "../endpoints.js";
 import { distinctSuffixes, type EventFilter, matchesFilter } from "../filter.js";
 import { type DebugTheme, loadStoredTheme, storeTheme, useResolvedTheme } from "../theme.js";
-import { type DebugEvent, type DebugFrame, isLogFrame } from "../wire.js";
+import { type DebugFrame, isEventFrame, isLogFrame } from "../wire.js";
 import { EndpointLinks } from "./EndpointLinks.js";
 import { EventGraph } from "./EventGraph.js";
 import { EventTable } from "./EventTable.js";
@@ -79,10 +79,9 @@ export function DebugPanel({
 
   // `revision` is the in-place-mutation signal; `frames` covers the fresh-array
   // pattern. Either changing recomputes the split.
-  const events = useMemo(
-    () => frames.filter((f): f is DebugEvent => !isLogFrame(f)),
-    [frames, revision],
-  );
+  // Structured `record` frames are neither events nor raw lines; narrowing on
+  // "not a log" would feed them to the event views, where `event` is undefined.
+  const events = useMemo(() => frames.filter(isEventFrame), [frames, revision]);
   const logs = useMemo(() => frames.filter(isLogFrame), [frames, revision]);
   const suffixes = useMemo(() => distinctSuffixes(events), [events]);
   const visible = useMemo(

package/src/graph.ts

@@ -1,4 +1,4 @@
-import { type DebugEvent, type DebugFrame, eventSuffix, isLogFrame } from "./wire.js";
+import { type DebugEvent, type DebugFrame, eventSuffix, isEventFrame } from "./wire.js";
 
 /**
  * Pure, framework-agnostic derivation of a resource graph from a debug event
@@ -171,8 +171,8 @@ export function deriveGraph(frames: readonly DebugFrame[]): GraphState {
   const edges = new Map<string, GraphEdge>();
 
   frames.forEach((frame, seq) => {
-    if (isLogFrame(frame)) return;
-    const event = frame as DebugEvent;
+    if (!isEventFrame(frame)) return;
+    const event = frame;
     const suffix = eventSuffix(event.event);
 
     if (suffix === "Created") {
@@ -436,8 +436,8 @@ export function deriveInvocations(frames: readonly DebugFrame[]): TraceState {
   const roots: Invocation[] = [];
 
   for (const frame of frames) {
-    if (isLogFrame(frame)) continue;
-    const event = frame as DebugEvent;
+    if (!isEventFrame(frame)) continue;
+    const event = frame;
     const p = (event.payload ?? undefined) as Record<string, unknown> | undefined;
     const id = num(p?.spanId);
     if (id === undefined || byId.has(id)) continue;