gantry-web 0.3.5 → 0.4.0

package/src/socket.ts

@@ -1,187 +1,227 @@
-// One websocket connects the frontend to the Go ui.App: Tea renders
-// come down, events go up, paired pushes fan out. Reconnects with
-// backoff (webview reloads, dev server restarts, HMR) and re-announces
-// the active page on every connect so the server always re-renders.
-
-export type WireNode = {
-  type: string;
-  key?: string;
-  props?: Record<string, unknown>;
-  handlers?: Record<string, string>;
-  children?: WireNode[];
-};
-
-type RenderListener = (tree: WireNode) => void;
-type PushListener = (event: string, payload: unknown) => void;
-type StateListener = () => void;
-
-let ws: WebSocket | null = null;
-let url = "";
-let activePage = "";
-let backoff = 300;
-let renderListener: RenderListener | null = null;
-const pushListeners = new Map<string, Set<PushListener>>();
-const sendQueue: string[] = [];
-
-// Awaited calls: id -> resolver, with a timeout so a dead server
-// cannot leak promises forever.
-let nextCallId = 0;
-const pending = new Map<string, { resolve: (v: unknown) => void; reject: (e: Error) => void; timer: number }>();
-
-// Shared Go state (useGoState): the latest value per key + subscribers.
-const stateValues = new Map<string, unknown>();
-const stateListeners = new Map<string, Set<StateListener>>();
-
-function defaultURL(): string {
-  const proto = location.protocol === "https:" ? "wss:" : "ws:";
-  return proto + "//" + location.host + "/gantry/ws";
-}
-
-/** connect opens (or reuses) the app socket. createApp calls this. */
-export function connect(customURL?: string): void {
-  if (ws) return;
-  url = customURL ?? url ?? "";
-  if (!url) url = defaultURL();
-  open();
-}
-
-function open(): void {
-  const sock = new WebSocket(url);
-  ws = sock;
-  sock.onopen = () => {
-    backoff = 300;
-    if (activePage) sock.send(JSON.stringify({ t: "ready", page: activePage }));
-    while (sendQueue.length > 0) sock.send(sendQueue.shift() as string);
-  };
-  sock.onmessage = (e) => {
-    let msg: {
-      t: string;
-      tree?: WireNode;
-      key?: string;
-      name?: string;
-      p?: unknown;
-      id?: string;
-      ok?: boolean;
-      err?: string;
-    };
-    try {
-      msg = JSON.parse(e.data as string);
-    } catch {
-      return;
-    }
-    if (msg.t === "render" && msg.tree) {
-      renderListener?.(msg.tree);
-    } else if (msg.t === "push" && msg.key && msg.name) {
-      pushListeners.get(msg.key)?.forEach((fn) => fn(msg.name as string, msg.p));
-    } else if (msg.t === "reply" && msg.id) {
-      const p = pending.get(msg.id);
-      if (p) {
-        pending.delete(msg.id);
-        clearTimeout(p.timer);
-        if (msg.ok) p.resolve(msg.p);
-        else p.reject(new Error(msg.err ?? "call failed"));
-      }
-    } else if (msg.t === "state" && msg.key) {
-      stateValues.set(msg.key, msg.p);
-      stateListeners.get(msg.key)?.forEach((fn) => fn());
-    }
-  };
-  sock.onclose = () => {
-    if (ws !== sock) return; // superseded
-    ws = null;
-    setTimeout(() => {
-      if (!ws) open();
-    }, backoff);
-    backoff = Math.min(backoff * 2, 5000);
-  };
-  sock.onerror = () => sock.close();
-}
-
-function send(obj: unknown): void {
-  const data = JSON.stringify(obj);
-  if (ws && ws.readyState === WebSocket.OPEN) {
-    ws.send(data);
-  } else {
-    sendQueue.push(data);
-    connect();
-  }
-}
-
-/** ready announces the mounted page; the server activates its Model. */
-export function ready(pageKey: string): void {
-  activePage = pageKey;
-  send({ t: "ready", page: pageKey });
-}
-
-/** sendTeaEvent fires a Tea handler by its render-generation id. */
-export function sendTeaEvent(handlerId: string, payload?: unknown): void {
-  send({ t: "event", h: handlerId, p: payload });
-}
-
-/** sendPaired fires a named event on a page/component's Go half. */
-export function sendPaired(key: string, name: string, payload?: unknown): void {
-  send({ t: "event", key, name, p: payload });
-}
-
-/** onRender subscribes the (single) Tea tree consumer. */
-export function onRender(fn: RenderListener | null): void {
-  renderListener = fn;
-}
-
-/** onPush subscribes to pushes for one paired key; returns unsubscribe. */
-export function onPush(key: string, fn: PushListener): () => void {
-  let set = pushListeners.get(key);
-  if (!set) {
-    set = new Set();
-    pushListeners.set(key, set);
-  }
-  set.add(fn);
-  return () => {
-    set.delete(fn);
-    if (set.size === 0) pushListeners.delete(key);
-  };
-}
-
-/** callGo awaits a Go function: a pair's Call entry or a service's. */
-export function callGo(key: string, name: string, payload?: unknown, timeoutMs = 30_000): Promise<unknown> {
-  const id = "c" + ++nextCallId;
-  return new Promise((resolve, reject) => {
-    const timer = window.setTimeout(() => {
-      pending.delete(id);
-      reject(new Error(`call ${key}.${name} timed out`));
-    }, timeoutMs);
-    pending.set(id, { resolve, reject, timer });
-    send({ t: "call", key, name, id, p: payload });
-  });
-}
-
-/** getGoState reads the latest synced value for a state key. */
-export function getGoState(key: string): unknown {
-  return stateValues.get(key);
-}
-
-/** hasGoState reports whether the server has sent this key yet. */
-export function hasGoState(key: string): boolean {
-  return stateValues.has(key);
-}
-
-/** setGoState applies a local write and sends it to Go (no echo). */
-export function setGoState(key: string, value: unknown): void {
-  stateValues.set(key, value);
-  stateListeners.get(key)?.forEach((fn) => fn());
-  send({ t: "setstate", key, p: value });
-}
-
-/** onGoState subscribes to changes of one state key. */
-export function onGoState(key: string, fn: StateListener): () => void {
-  let set = stateListeners.get(key);
-  if (!set) {
-    set = new Set();
-    stateListeners.set(key, set);
-  }
-  set.add(fn);
-  return () => {
-    set.delete(fn);
-    if (set.size === 0) stateListeners.delete(key);
-  };
-}
+// One websocket connects the frontend to the Go ui.App: Tea renders
+// come down, events go up, paired pushes fan out. Reconnects with
+// backoff (webview reloads, dev server restarts, HMR) and re-announces
+// the active page on every connect so the server always re-renders.
+
+/** GantryCallError rejects a failed callGo with the gerr code the Go
+ * side attached ("panic.call", or the code of the returned error), so
+ * callers can switch on it. */
+export class GantryCallError extends Error {
+  code?: string;
+  constructor(message: string, code?: string) {
+    super(message);
+    this.name = "GantryCallError";
+    this.code = code;
+  }
+}
+
+/** The (single) consumer of server {"t":"error"} frames; errors.ts
+ * subscribes. Registered lazily to keep this module UI-free. */
+let errorListener: ((p: unknown) => void) | null = null;
+export function onServerError(fn: (p: unknown) => void): void {
+  errorListener = fn;
+}
+
+export type WireNode = {
+  type: string;
+  key?: string;
+  props?: Record<string, unknown>;
+  handlers?: Record<string, string>;
+  children?: WireNode[];
+};
+
+type RenderListener = (tree: WireNode) => void;
+type PushListener = (event: string, payload: unknown) => void;
+type StateListener = () => void;
+
+let ws: WebSocket | null = null;
+let url = "";
+let activePage = "";
+// The active page's captured route params, re-sent on every (re)connect
+// alongside the page key so the Go side can read them. Normalized to
+// arrays on the wire: a [id] value is a single-element array, a [...slug]
+// catch-all keeps all its segments.
+let activeParams: Record<string, string[]> = {};
+let backoff = 300;
+let renderListener: RenderListener | null = null;
+const pushListeners = new Map<string, Set<PushListener>>();
+const sendQueue: string[] = [];
+
+// Awaited calls: id -> resolver, with a timeout so a dead server
+// cannot leak promises forever.
+let nextCallId = 0;
+const pending = new Map<string, { resolve: (v: unknown) => void; reject: (e: Error) => void; timer: number }>();
+
+// Shared Go state (useGoState): the latest value per key + subscribers.
+const stateValues = new Map<string, unknown>();
+const stateListeners = new Map<string, Set<StateListener>>();
+
+function defaultURL(): string {
+  const proto = location.protocol === "https:" ? "wss:" : "ws:";
+  return proto + "//" + location.host + "/gantry/ws";
+}
+
+/** connect opens (or reuses) the app socket. createApp calls this. */
+export function connect(customURL?: string): void {
+  if (ws) return;
+  url = customURL ?? url ?? "";
+  if (!url) url = defaultURL();
+  open();
+}
+
+function open(): void {
+  const sock = new WebSocket(url);
+  ws = sock;
+  sock.onopen = () => {
+    backoff = 300;
+    if (activePage) sock.send(JSON.stringify({ t: "ready", page: activePage, params: activeParams }));
+    while (sendQueue.length > 0) sock.send(sendQueue.shift() as string);
+  };
+  sock.onmessage = (e) => {
+    let msg: {
+      t: string;
+      tree?: WireNode;
+      key?: string;
+      name?: string;
+      p?: unknown;
+      id?: string;
+      ok?: boolean;
+      err?: string;
+      code?: string;
+    };
+    try {
+      msg = JSON.parse(e.data as string);
+    } catch {
+      return;
+    }
+    if (msg.t === "render" && msg.tree) {
+      renderListener?.(msg.tree);
+    } else if (msg.t === "push" && msg.key && msg.name) {
+      pushListeners.get(msg.key)?.forEach((fn) => fn(msg.name as string, msg.p));
+    } else if (msg.t === "reply" && msg.id) {
+      const p = pending.get(msg.id);
+      if (p) {
+        pending.delete(msg.id);
+        clearTimeout(p.timer);
+        if (msg.ok) p.resolve(msg.p);
+        else p.reject(new GantryCallError(msg.err ?? "call failed", msg.code));
+      }
+    } else if (msg.t === "state" && msg.key) {
+      stateValues.set(msg.key, msg.p);
+      stateListeners.get(msg.key)?.forEach((fn) => fn());
+    } else if (msg.t === "error") {
+      errorListener?.(msg.p);
+    }
+  };
+  sock.onclose = () => {
+    if (ws !== sock) return; // superseded
+    ws = null;
+    setTimeout(() => {
+      if (!ws) open();
+    }, backoff);
+    backoff = Math.min(backoff * 2, 5000);
+  };
+  sock.onerror = () => sock.close();
+}
+
+function send(obj: unknown): void {
+  const data = JSON.stringify(obj);
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(data);
+  } else {
+    sendQueue.push(data);
+    connect();
+  }
+}
+
+/** ready announces the mounted page (and its captured route params); the
+ * server activates its Model and records the params for the Go half. */
+export function ready(pageKey: string, params?: Record<string, string | string[]>): void {
+  activePage = pageKey;
+  activeParams = normalizeParams(params);
+  send({ t: "ready", page: pageKey, params: activeParams });
+}
+
+// normalizeParams puts every value in array form so the Go side sees one
+// stable shape (map[string][]string): a [id] becomes ["7"], a [...slug]
+// keeps its segments.
+function normalizeParams(params?: Record<string, string | string[]>): Record<string, string[]> {
+  const out: Record<string, string[]> = {};
+  for (const [k, v] of Object.entries(params ?? {})) {
+    out[k] = Array.isArray(v) ? v : [v];
+  }
+  return out;
+}
+
+/** sendTeaEvent fires a Tea handler by its render-generation id. */
+export function sendTeaEvent(handlerId: string, payload?: unknown): void {
+  send({ t: "event", h: handlerId, p: payload });
+}
+
+/** sendPaired fires a named event on a page/component's Go half. */
+export function sendPaired(key: string, name: string, payload?: unknown): void {
+  send({ t: "event", key, name, p: payload });
+}
+
+/** onRender subscribes the (single) Tea tree consumer. */
+export function onRender(fn: RenderListener | null): void {
+  renderListener = fn;
+}
+
+/** onPush subscribes to pushes for one paired key; returns unsubscribe. */
+export function onPush(key: string, fn: PushListener): () => void {
+  let set = pushListeners.get(key);
+  if (!set) {
+    set = new Set();
+    pushListeners.set(key, set);
+  }
+  set.add(fn);
+  return () => {
+    set.delete(fn);
+    if (set.size === 0) pushListeners.delete(key);
+  };
+}
+
+/** callGo awaits a Go function: a pair's Call entry or a service's. */
+export function callGo(key: string, name: string, payload?: unknown, timeoutMs = 30_000): Promise<unknown> {
+  const id = "c" + ++nextCallId;
+  return new Promise((resolve, reject) => {
+    const timer = window.setTimeout(() => {
+      pending.delete(id);
+      reject(new Error(`call ${key}.${name} timed out`));
+    }, timeoutMs);
+    pending.set(id, { resolve, reject, timer });
+    send({ t: "call", key, name, id, p: payload });
+  });
+}
+
+/** getGoState reads the latest synced value for a state key. */
+export function getGoState(key: string): unknown {
+  return stateValues.get(key);
+}
+
+/** hasGoState reports whether the server has sent this key yet. */
+export function hasGoState(key: string): boolean {
+  return stateValues.has(key);
+}
+
+/** setGoState applies a local write and sends it to Go (no echo). */
+export function setGoState(key: string, value: unknown): void {
+  stateValues.set(key, value);
+  stateListeners.get(key)?.forEach((fn) => fn());
+  send({ t: "setstate", key, p: value });
+}
+
+/** onGoState subscribes to changes of one state key. */
+export function onGoState(key: string, fn: StateListener): () => void {
+  let set = stateListeners.get(key);
+  if (!set) {
+    set = new Set();
+    stateListeners.set(key, set);
+  }
+  set.add(fn);
+  return () => {
+    set.delete(fn);
+    if (set.size === 0) stateListeners.delete(key);
+  };
+}

package/src/styles.css

@@ -307,3 +307,250 @@
   min-height: 0;
   overflow: auto;
 }
+
+/* ---- error UI (ErrorScreen.tsx) ---- */
+
+.gantry-error-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: color-mix(in srgb, var(--gantry-bg) 82%, black);
+}
+
+.gantry-error-card {
+  max-width: 720px;
+  max-height: 80vh;
+  overflow: auto;
+  padding: 20px 24px;
+  border: 1px solid color-mix(in srgb, var(--gantry-fg) 15%, transparent);
+  border-radius: 10px;
+  background: var(--gantry-bg);
+  color: var(--gantry-fg);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
+}
+
+.gantry-error-title {
+  font-size: 17px;
+  font-weight: 600;
+  color: #e5484d;
+  margin-bottom: 8px;
+}
+
+.gantry-error-message {
+  font-size: 14px;
+  margin-bottom: 12px;
+  word-break: break-word;
+}
+
+.gantry-error-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 10px;
+  font-size: 11px;
+}
+
+.gantry-error-meta > span {
+  padding: 2px 7px;
+  border-radius: 99px;
+  background: color-mix(in srgb, var(--gantry-fg) 8%, transparent);
+  opacity: 0.85;
+}
+
+.gantry-error-code {
+  font-family: var(--gantry-mono, ui-monospace, monospace);
+}
+
+.gantry-error-heading {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  opacity: 0.6;
+  margin: 12px 0 6px;
+}
+
+.gantry-error-stack {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--gantry-fg) 6%, transparent);
+  font-family: var(--gantry-mono, ui-monospace, monospace);
+  font-size: 11.5px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 260px;
+  overflow: auto;
+}
+
+.gantry-error-trail {
+  margin-top: 4px;
+}
+
+.gantry-error-crumb {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  padding: 2px 0;
+  font-size: 12px;
+}
+
+.gantry-error-crumb-failed .gantry-error-crumb-detail,
+.gantry-error-crumb-failed .gantry-error-crumb-type {
+  color: #e5484d;
+}
+
+.gantry-error-crumb-time {
+  min-width: 64px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.5;
+  font-size: 11px;
+}
+
+.gantry-error-crumb-type {
+  min-width: 62px;
+  font-size: 11px;
+  opacity: 0.65;
+}
+
+.gantry-error-crumb-detail {
+  font-family: var(--gantry-mono, ui-monospace, monospace);
+  word-break: break-word;
+}
+
+.gantry-error-actions {
+  margin-top: 16px;
+  display: flex;
+  gap: 8px;
+}
+
+.gantry-error-button {
+  padding: 6px 16px;
+  border: 1px solid color-mix(in srgb, var(--gantry-fg) 20%, transparent);
+  border-radius: 6px;
+  background: var(--gantry-accent);
+  color: white;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.gantry-error-banner {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  z-index: 9999;
+  width: min(520px, calc(100vw - 32px));
+  max-height: 45vh;
+  overflow: auto;
+  padding: 12px 14px;
+  border: 1px solid #e5484d;
+  border-radius: 8px;
+  background: var(--gantry-bg);
+  color: var(--gantry-fg);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
+}
+
+.gantry-error-banner + .gantry-error-banner {
+  display: none; /* stacked banners: newest wins, dismiss reveals the next */
+}
+
+.gantry-error-banner-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  justify-content: space-between;
+}
+
+.gantry-error-banner-title {
+  font-size: 13px;
+  font-weight: 500;
+  word-break: break-word;
+}
+
+.gantry-error-dismiss {
+  border: none;
+  background: none;
+  color: var(--gantry-fg);
+  opacity: 0.6;
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 2px;
+}
+
+.gantry-error-dismiss:hover {
+  opacity: 1;
+}
+
+/* ---- loading states (Await.tsx) ---- */
+
+.gantry-skeleton {
+  height: 14px;
+  border-radius: 4px;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--gantry-fg) 7%, transparent) 25%,
+    color-mix(in srgb, var(--gantry-fg) 13%, transparent) 50%,
+    color-mix(in srgb, var(--gantry-fg) 7%, transparent) 75%
+  );
+  background-size: 200% 100%;
+  animation: gantry-skeleton-shimmer 1.4s ease-in-out infinite;
+}
+
+.gantry-skeleton-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+@keyframes gantry-skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gantry-skeleton {
+    animation: none;
+  }
+}
+
+.gantry-await-error {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 1px solid color-mix(in srgb, #e5484d 40%, transparent);
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.gantry-await-error-code {
+  font-family: var(--gantry-mono, ui-monospace, monospace);
+  font-size: 11px;
+  opacity: 0.6;
+}
+
+.gantry-await-retry {
+  margin-left: auto;
+  padding: 3px 12px;
+  border: 1px solid color-mix(in srgb, var(--gantry-fg) 20%, transparent);
+  border-radius: 5px;
+  background: none;
+  color: var(--gantry-fg);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.gantry-await-retry:hover {
+  border-color: var(--gantry-accent);
+}