@telorun/debug-ui 0.1.0 → 0.2.0

package/src/index.ts

@@ -1,14 +1,21 @@
 // Browser-safe, framework-agnostic surface: wire types + filtering + SSE client.
 // No React, no Node built-ins — importable by the CLI (bun `source` condition),
-// the editor webview, and the standalone app alike.
+// the editor webview, and the standalone app alike. The wire types re-export
+// from `@telorun/debug-wire` (the shared contract).
 export {
+  type DebugFrame,
   type DebugEvent,
+  type DebugLog,
   type WireRef,
   type WireBlob,
+  isLogFrame,
+  isEventFrame,
   isWireRef,
   isWireBlob,
   eventSuffix,
 } from "./wire.js";
+export { type AppEndpoint, endpointHref, endpointLabel } from "./endpoints.js";
 export { type EventFilter, matchesFilter, distinctSuffixes } from "./filter.js";
+export type { DebugTheme } from "./theme.js";
 export { type DebugStreamHandlers, connectDebugStream } from "./sse-client.js";
 export { type FoundBlob, collectBlobs, blobDimensions, formatBytes } from "./media.js";

package/src/sse-client.ts

@@ -1,7 +1,8 @@
-import type { DebugEvent } from "./wire.js";
+import type { DebugFrame } from "./wire.js";
 
 export interface DebugStreamHandlers {
-  onEvent: (event: DebugEvent) => void;
+  /** One frame off the stream — a kernel event or a log line (route on `kind`). */
+  onFrame: (frame: DebugFrame) => void;
   /** Connection state changes — drives a status indicator. */
   onStatus?: (status: "connecting" | "open" | "closed") => void;
 }
@@ -24,7 +25,7 @@ export function connectDebugStream(url: string, handlers: DebugStreamHandlers):
   source.onmessage = (msg) => {
     if (!msg.data) return;
     try {
-      handlers.onEvent(JSON.parse(msg.data) as DebugEvent);
+      handlers.onFrame(JSON.parse(msg.data) as DebugFrame);
     } catch {
       // A malformed frame shouldn't kill the stream; skip it.
     }

package/src/theme.ts

@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+
+/** Requested color theme. `"system"` (the default) follows the OS preference. */
+export type DebugTheme = "light" | "dark" | "system";
+
+const MEDIA = "(prefers-color-scheme: dark)";
+const STORAGE_KEY = "telo-debug-ui:theme";
+
+/** The persisted standalone theme choice, or `"system"`. Used when the panel
+ *  owns its mode (no host-supplied `theme`) so the toggle survives a reload. */
+export function loadStoredTheme(): DebugTheme {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (raw === "light" || raw === "dark" || raw === "system") return raw;
+  } catch {
+    // localStorage may be unavailable — fall back to system.
+  }
+  return "system";
+}
+
+export function storeTheme(theme: DebugTheme): void {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, theme);
+  } catch {
+    // Non-fatal — the choice just won't persist across reloads.
+  }
+}
+
+function systemTheme(): "light" | "dark" {
+  if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+    return window.matchMedia(MEDIA).matches ? "dark" : "light";
+  }
+  return "dark";
+}
+
+/** Resolve a {@link DebugTheme} to a concrete `"light"` / `"dark"`. When `theme`
+ *  is `"system"` (or omitted) it tracks the OS preference and updates live; an
+ *  explicit `"light"` / `"dark"` (e.g. passed by an embedding host) wins. */
+export function useResolvedTheme(theme: DebugTheme = "system"): "light" | "dark" {
+  const [system, setSystem] = useState<"light" | "dark">(systemTheme);
+  useEffect(() => {
+    if (theme !== "system") return;
+    const mq = window.matchMedia(MEDIA);
+    const onChange = (): void => setSystem(mq.matches ? "dark" : "light");
+    onChange();
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [theme]);
+  return theme === "system" ? system : theme;
+}

package/src/wire.ts

@@ -1,77 +1,4 @@
-/**
- * The Telo debug event wire format — the language-neutral contract between a
- * kernel runtime (the producer: Node today, Rust/Go later) and any consumer
- * (this UI, the editor). A producer serializes each emitted event to this shape;
- * consumers only ever parse it. The companion JSON Schema (`wire-schema.json`)
- * is the source of truth a non-TypeScript producer conforms to.
- */
-
-/** One event as it travels over the wire (one JSON object per SSE message / JSONL line). */
-export interface DebugEvent {
-  /** ISO-8601 timestamp set by the producer when the event was emitted. */
-  timestamp: string;
-  /** Dotted event name, e.g. `Server.Listening`, `MyKind.MyName.Invoked`. */
-  event: string;
-  /** Arbitrary event payload, already reduced to wire-safe values (see encoding rules). */
-  payload?: unknown;
-  /** Optional producer-attached metadata (namespace, resource, kind, name, …). */
-  metadata?: Record<string, unknown>;
-}
-
-/**
- * Value-encoding rules a producer applies before a value enters `payload`:
- *  - a resolved `!ref` (a live resource instance) → `{ kind, name }`
- *  - any other live / unrepresentable value (controller instance, stream, client,
- *    function, bigint) → a `"[Marker]"` string (e.g. `"[Stream]"`, `"[Kernel]"`)
- *  - a reference cycle → `"[Circular]"`
- *  - everything else → plain JSON
- * Consumers shouldn't assume `payload` is any particular shape.
- */
-
-/** A resolved-reference value as it appears in a payload. */
-export interface WireRef {
-  kind: string;
-  name: string;
-}
-
-/**
- * A binary value offloaded to the producer's blob store. The bytes are NOT in the
- * payload — `$blob` is a path (relative to the producer origin) the consumer
- * fetches on demand (e.g. `<img src>`, a download link). The object key this sits
- * under is preserved; only the bytes left the log.
- */
-export interface WireBlob {
-  $blob: string;
-  mediaType: string;
-  byteLength: number;
-}
-
-/** Narrow a payload value to a {@link WireBlob}. */
-export function isWireBlob(value: unknown): value is WireBlob {
-  return (
-    !!value &&
-    typeof value === "object" &&
-    !Array.isArray(value) &&
-    typeof (value as WireBlob).$blob === "string" &&
-    typeof (value as WireBlob).mediaType === "string"
-  );
-}
-
-/** Narrow a payload value to a {@link WireRef} (e.g. to render it as a chip/link). */
-export function isWireRef(value: unknown): value is WireRef {
-  return (
-    !!value &&
-    typeof value === "object" &&
-    !Array.isArray(value) &&
-    typeof (value as WireRef).kind === "string" &&
-    typeof (value as WireRef).name === "string" &&
-    Object.keys(value as object).length === 2
-  );
-}
-
-/** The trailing segment of a dotted event name — the "kind" of event
- *  (`Invoked`, `Failed`, `Listening`, …). Used for facet filtering and color. */
-export function eventSuffix(event: string): string {
-  const dot = event.lastIndexOf(".");
-  return dot >= 0 ? event.slice(dot + 1) : event;
-}
+// The wire format now lives in `@telorun/debug-wire` (the language-neutral
+// frame contract shared by the producer, runner, editor, and this UI). This
+// module re-exports it so the UI's internal `./wire.js` imports keep working.
+export * from "@telorun/debug-wire";

package/app-dist/assets/index-npnCjha3.css

@@ -1 +0,0 @@
-.tdbg-root{--tdbg-bg: #0f1115;--tdbg-panel: #161a21;--tdbg-line: #232a34;--tdbg-text: #d7dce3;--tdbg-muted: #7a8493;--tdbg-accent: #4f9cf0;display:flex;flex-direction:column;height:100%;min-height:0;font:13px/1.5 ui-monospace,SF Mono,Menlo,Consolas,monospace;color:var(--tdbg-text);background:var(--tdbg-bg)}.tdbg-bar{position:sticky;top:0;z-index:1;padding:8px 10px;background:var(--tdbg-panel);border-bottom:1px solid var(--tdbg-line)}.tdbg-bar-row{display:flex;align-items:center;gap:8px}.tdbg-search{flex:1}.tdbg-search,.tdbg-kind{padding:5px 8px;color:var(--tdbg-text);background:var(--tdbg-bg);border:1px solid var(--tdbg-line);border-radius:5px;font:inherit}.tdbg-kind{width:140px}.tdbg-btn{padding:5px 10px;color:var(--tdbg-text);background:var(--tdbg-bg);border:1px solid var(--tdbg-line);border-radius:5px;cursor:pointer;font:inherit}.tdbg-btn:hover{border-color:var(--tdbg-accent)}.tdbg-counts{color:var(--tdbg-muted);white-space:nowrap}.tdbg-status{width:9px;height:9px;border-radius:50%;background:var(--tdbg-muted);flex:0 0 auto}.tdbg-status-open{background:#3fb950}.tdbg-status-connecting{background:#d29922}.tdbg-status-closed{background:#f85149}.tdbg-facets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.tdbg-facet{padding:2px 8px;color:var(--tdbg-muted);background:var(--tdbg-bg);border:1px solid var(--tdbg-line);border-radius:999px;cursor:pointer;font:inherit}.tdbg-facet-on{color:#fff;border-color:var(--tdbg-accent);background:#4f9cf02e}.tdbg-table{flex:1;min-height:0;overflow:auto}.tdbg-empty{padding:24px;color:var(--tdbg-muted);text-align:center}.tdbg-row{border-bottom:1px solid var(--tdbg-line)}.tdbg-rowhead{display:flex;align-items:baseline;gap:8px;width:100%;padding:4px 10px;background:none;border:none;color:inherit;cursor:pointer;text-align:left;font:inherit}.tdbg-rowhead:hover{background:var(--tdbg-panel)}.tdbg-caret{width:12px;color:var(--tdbg-muted)}.tdbg-time{color:var(--tdbg-muted);white-space:nowrap}.tdbg-badge{padding:1px 6px;border-radius:4px;background:var(--tdbg-line);color:var(--tdbg-text);white-space:nowrap}.tdbg-suffix-failed,.tdbg-suffix-rejected,.tdbg-suffix-cancelled{background:#f8514933;color:#ff8079}.tdbg-suffix-invoked,.tdbg-suffix-listening,.tdbg-suffix-started,.tdbg-suffix-initialized{background:#3fb9502e;color:#5fd673}.tdbg-name{white-space:nowrap}.tdbg-preview{color:var(--tdbg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tdbg-payload-wrap{background:var(--tdbg-panel)}.tdbg-payload{margin:0;padding:8px 10px 10px 30px;background:var(--tdbg-panel);overflow:auto;white-space:pre-wrap;word-break:break-word}.tdbg-media{display:flex;flex-wrap:wrap;gap:12px;padding:10px 10px 4px 30px}.tdbg-blob{margin:0;display:flex;flex-direction:column;gap:4px;max-width:320px}.tdbg-blob-img{max-width:320px;max-height:240px;border:1px solid var(--tdbg-line);border-radius:6px;background:repeating-conic-gradient(#1b202840 0% 25%,transparent 0% 50%) 50% / 16px 16px;object-fit:contain}.tdbg-blob-file{display:inline-block;padding:8px 12px;color:var(--tdbg-accent);border:1px solid var(--tdbg-line);border-radius:6px;text-decoration:none}.tdbg-blob-file:hover{border-color:var(--tdbg-accent)}.tdbg-blob-cap{color:var(--tdbg-muted);font-size:11px;word-break:break-all}.tdbg-muted{color:var(--tdbg-muted)}.tdbg-ref{color:var(--tdbg-accent)}