@telorun/debug-ui 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telorun/debug-ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "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",

package/src/components/DebugPanel.tsx

@@ -1,5 +1,5 @@
 import { type ReactNode, useMemo, useState } from "react";
-import type { AppEndpoint } from "../endpoints.js";
+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";
@@ -34,6 +34,9 @@ export interface DebugPanelProps {
    *  header. The standalone {@link DebugWatcher} sources these from the producer's
    *  handshake; the editor passes its resolved run endpoints. */
   endpoints?: readonly AppEndpoint[];
+  /** Per-port reachability for the endpoint badges (spinner / ok / error). The
+   *  editor sources it from the runner's `reachability` events. */
+  endpointReachability?: ReadonlyMap<number, EndpointReachability>;
   /** Color theme. Defaults to `"system"` (follows the OS); an embedding host
    *  (e.g. the editor) passes its own resolved `"light"` / `"dark"`. */
   theme?: DebugTheme;
@@ -58,6 +61,7 @@ export function DebugPanel({
   logsSlot,
   defaultTab = "graph",
   endpoints,
+  endpointReachability,
   theme,
 }: DebugPanelProps) {
   const [tab, setTab] = useState<Tab>(defaultTab);
@@ -109,7 +113,9 @@ export function DebugPanel({
           Logs{logsSlot ? null : <span className="tdbg-tabcount">{logs.length}</span>}
         </button>
         <span className="tdbg-tabs-spacer" />
-        {endpoints && endpoints.length > 0 && <EndpointLinks endpoints={endpoints} />}
+        {endpoints && endpoints.length > 0 && (
+          <EndpointLinks endpoints={endpoints} reachability={endpointReachability} />
+        )}
         <button className="tdbg-btn" onClick={onTogglePause}>
           {paused ? "Resume" : "Pause"}
         </button>

package/src/components/EndpointLinks.tsx

@@ -1,14 +1,23 @@
-import { ExternalLink } from "lucide-react";
-import { type AppEndpoint, endpointHref, endpointLabel } from "../endpoints.js";
+import { CheckCircle2, ExternalLink, Loader2, XCircle } from "lucide-react";
+import {
+  type AppEndpoint,
+  type EndpointReachability,
+  endpointHref,
+  endpointLabel,
+} from "../endpoints.js";
 
 export interface EndpointLinksProps {
   endpoints: readonly AppEndpoint[];
+  /** Per-port reachability, rendered as a status icon on each tcp link. A tcp
+   *  endpoint with no entry yet shows the `checking` spinner. */
+  reachability?: ReadonlyMap<number, EndpointReachability>;
 }
 
 /** The running application's exposed addresses, rendered in the panel header.
- *  tcp endpoints are clickable links to the app; udp endpoints show as a plain
- *  label (not reachable over http). Renders nothing when there are no endpoints. */
-export function EndpointLinks({ endpoints }: EndpointLinksProps) {
+ *  tcp endpoints are clickable links to the app, each carrying a reachability
+ *  status icon (spinner while checking, ok/error once known); udp endpoints show
+ *  as a plain label. Renders nothing when there are no endpoints. */
+export function EndpointLinks({ endpoints, reachability }: EndpointLinksProps) {
   if (endpoints.length === 0) return null;
   return (
     <span className="tdbg-endpoints">
@@ -32,11 +41,42 @@ export function EndpointLinks({ endpoints }: EndpointLinksProps) {
             rel="noreferrer"
             title={`Open ${href}`}
           >
-            <ExternalLink size={11} aria-hidden />
+            {reachability && (
+              <ReachabilityIcon state={reachability.get(endpoint.port) ?? "checking"} />
+            )}
             {label}
+            <ExternalLink size={11} aria-hidden />
           </a>
         );
       })}
     </span>
   );
 }
+
+function ReachabilityIcon({ state }: { state: EndpointReachability }) {
+  if (state === "reachable") {
+    return (
+      <CheckCircle2
+        size={11}
+        className="tdbg-endpoint-status tdbg-endpoint-status--reachable"
+        aria-label="reachable"
+      />
+    );
+  }
+  if (state === "unreachable") {
+    return (
+      <XCircle
+        size={11}
+        className="tdbg-endpoint-status tdbg-endpoint-status--unreachable"
+        aria-label="not reachable"
+      />
+    );
+  }
+  return (
+    <Loader2
+      size={11}
+      className="tdbg-endpoint-status tdbg-endpoint-status--checking tdbg-spin"
+      aria-label="checking reachability"
+    />
+  );
+}

package/src/components/styles.css

@@ -88,6 +88,26 @@
 .tdbg-endpoint-link:hover {
   border-color: var(--tdbg-accent);
 }
+.tdbg-endpoint-status {
+  flex: none;
+}
+.tdbg-endpoint-status--checking {
+  color: var(--tdbg-muted);
+}
+.tdbg-endpoint-status--reachable {
+  color: var(--tdbg-good);
+}
+.tdbg-endpoint-status--unreachable {
+  color: var(--tdbg-bad);
+}
+.tdbg-spin {
+  animation: tdbg-spin 0.8s linear infinite;
+}
+@keyframes tdbg-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 
 .tdbg-bar {
   position: sticky;

package/src/endpoints.ts

@@ -13,6 +13,12 @@ export interface AppEndpoint {
   url?: string;
 }
 
+/** Per-port reachability of a running app's endpoint, surfaced as a status icon
+ *  beside the link: a spinner while `checking`, ok when `reachable`, error when
+ *  `unreachable`. Mirrors the runner contract's `ReachabilityState`, kept local so
+ *  debug-ui stays browser-safe with no dependency on the runner package. */
+export type EndpointReachability = "checking" | "reachable" | "unreachable";
+
 /** The link a tcp endpoint resolves to, or `null` for a non-linkable (udp)
  *  endpoint. Prefers an explicit `url`; otherwise derives `http://host:port`. */
 export function endpointHref(endpoint: AppEndpoint): string | null {