@agentprojectcontext/apx 1.80.2 → 1.89.1

package/src/interfaces/web/src/lib/live.ts

@@ -0,0 +1,252 @@
+// The live feed: one WebSocket for the whole panel, telling it when a
+// conversation moved somewhere else.
+//
+// Why one, shared: every screen wants the same feed, and a socket per hook
+// would open half a dozen against the same daemon and reconnect them all in
+// step. This module owns exactly one connection, opened when something first
+// subscribes and kept for the life of the page.
+//
+// A message frame is a SIGNAL, never content — see host/daemon/events-ws.js for
+// why. Subscribers react by re-fetching through the API they already use, which
+// is what makes the device that SENT a message not show it twice. The two
+// exceptions carry data because there is nothing to re-fetch YET: turn frames
+// (tokens mid-answer) and routine frames (a run's steps, which only reach the
+// ledger once the run is over).
+import { getToken } from "./http";
+import { wsUrl } from "./net";
+import type { RoutineFrame, TurnFrame } from "../types/daemon";
+
+export interface LiveEvent {
+  /** Which ledger moved. `resync` is not from the daemon — see below. */
+  scope: "global" | "project" | "conversation" | "resync";
+  channel: string | null;
+  /** Day file id for a channel thread (YYYY-MM-DD). */
+  thread: string | null;
+  project_id: number | string | null;
+  agent_slug: string | null;
+  conversation_id: string | null;
+  direction: string | null;
+  type: string | null;
+  /** A conversation write carries the role it was appended under
+   *  (user / assistant / tool) instead of a direction and a type. */
+  role?: string | null;
+  ts: string | null;
+}
+
+type Listener = (events: LiveEvent[]) => void;
+type TurnListener = (frame: TurnFrame) => void;
+type RoutineListener = (frame: RoutineFrame) => void;
+
+const listeners = new Set<Listener>();
+const turnListeners = new Set<TurnListener>();
+const routineListeners = new Set<RoutineListener>();
+
+let socket: WebSocket | null = null;
+let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+let attempts = 0;
+/** True once a connection has been up and gone away: the next open has a gap
+ *  to cover, so it announces a resync. A first connect has nothing to catch up
+ *  on — the page just loaded its data. */
+let missedWhileDown = false;
+
+/** The event that says "you were disconnected; whatever you are showing may be
+ *  stale". Matches everything, so every subscriber revalidates once. */
+const RESYNC: LiveEvent = {
+  scope: "resync",
+  channel: null,
+  thread: null,
+  project_id: null,
+  agent_slug: null,
+  conversation_id: null,
+  direction: null,
+  type: null,
+  ts: null,
+};
+
+function emit(events: LiveEvent[]) {
+  for (const fn of listeners) {
+    try {
+      fn(events);
+    } catch {
+      /* one screen's handler must not stop the others from updating */
+    }
+  }
+}
+
+function emitTurn(frame: TurnFrame) {
+  for (const fn of turnListeners) {
+    try {
+      fn(frame);
+    } catch {
+      /* one screen's handler must not stop the others */
+    }
+  }
+}
+
+function emitRoutine(frame: RoutineFrame) {
+  for (const fn of routineListeners) {
+    try {
+      fn(frame);
+    } catch {
+      /* one screen's handler must not stop the others */
+    }
+  }
+}
+
+function backoffMs(): number {
+  // 1s, 2s, 4s… capped at 15s. A phone that was asleep for an hour should come
+  // back quickly, not after a minute-long backoff.
+  return Math.min(15_000, 1000 * 2 ** Math.min(attempts, 4));
+}
+
+function scheduleReconnect() {
+  if (reconnectTimer || (!listeners.size && !turnListeners.size && !routineListeners.size)) return;
+  const delay = backoffMs();
+  attempts += 1;
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null;
+    connect();
+  }, delay);
+}
+
+function connect() {
+  if (socket || (!listeners.size && !turnListeners.size && !routineListeners.size)) return;
+  // No token yet (the bootstrap fetch is still in flight): the upgrade would be
+  // rejected with a 401. Wait one beat rather than burning a reconnect attempt.
+  const token = getToken();
+  if (!token) {
+    scheduleReconnect();
+    return;
+  }
+  let ws: WebSocket;
+  try {
+    ws = new WebSocket(wsUrl("/api/events/ws", { token }));
+  } catch {
+    scheduleReconnect();
+    return;
+  }
+  socket = ws;
+
+  ws.onopen = () => {
+    attempts = 0;
+    // Anything that happened while we were away was never delivered. Tell every
+    // screen to revalidate once, or a phone that spent the afternoon in a
+    // pocket comes back to a live socket over a stale conversation.
+    if (missedWhileDown) {
+      missedWhileDown = false;
+      emit([RESYNC]);
+    }
+  };
+
+  ws.onmessage = (msg) => {
+    let frame: { type?: string; events?: LiveEvent[] };
+    try {
+      frame = JSON.parse(String(msg.data));
+    } catch {
+      return;
+    }
+    if (frame.type === "messages" && Array.isArray(frame.events)) emit(frame.events);
+    else if (frame.type === "turn") emitTurn(frame as unknown as TurnFrame);
+    else if (frame.type === "routine") emitRoutine(frame as unknown as RoutineFrame);
+  };
+
+  const dropped = () => {
+    if (socket === ws) socket = null;
+    missedWhileDown = true;
+    scheduleReconnect();
+  };
+  ws.onclose = dropped;
+  ws.onerror = () => {
+    try { ws.close(); } catch { /* onclose still fires */ }
+  };
+}
+
+/** Reconnect NOW rather than on the backoff — the page just became visible or
+ *  the network came back, and both mean the old socket is probably dead. */
+function wakeUp() {
+  if (!listeners.size && !turnListeners.size && !routineListeners.size) return;
+  if (socket && socket.readyState === WebSocket.OPEN) return;
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer);
+    reconnectTimer = null;
+  }
+  // A socket the browser froze can sit in CONNECTING forever. Drop it first.
+  if (socket) {
+    const stale = socket;
+    socket = null;
+    try { stale.close(); } catch { /* already gone */ }
+  }
+  attempts = 0;
+  connect();
+}
+
+let wired = false;
+function wireWakeUps() {
+  if (wired || typeof window === "undefined") return;
+  wired = true;
+  // iOS suspends a backgrounded tab's socket without closing it, so returning
+  // to the app is the only reliable moment to find out the feed is dead.
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "visible") wakeUp();
+  });
+  window.addEventListener("online", wakeUp);
+  window.addEventListener("focus", wakeUp);
+}
+
+/** Subscribe to the feed. Returns the unsubscribe function. */
+export function subscribeLive(fn: Listener): () => void {
+  listeners.add(fn);
+  wireWakeUps();
+  connect();
+  return () => {
+    listeners.delete(fn);
+    // The socket stays open: screens mount and unmount constantly, and tearing
+    // the connection down between two of them would reconnect all day.
+  };
+}
+
+/** Subscribe to live-turn frames (token streams pushed by the daemon). Returns
+ *  the unsubscribe function. Keeps the shared socket open like subscribeLive. */
+export function subscribeTurns(fn: TurnListener): () => void {
+  turnListeners.add(fn);
+  wireWakeUps();
+  connect();
+  return () => { turnListeners.delete(fn); };
+}
+
+/** Subscribe to routine-run frames: a run starting, taking a step, or ending,
+ *  wherever it was started from. Keeps the shared socket open like subscribeLive.
+ *  Returns the unsubscribe function. */
+export function subscribeRoutineRuns(fn: RoutineListener): () => void {
+  routineListeners.add(fn);
+  wireWakeUps();
+  connect();
+  return () => { routineListeners.delete(fn); };
+}
+
+/** Does this event concern the channel thread on screen? */
+export function concernsThread(ev: LiveEvent, channel: string, threadId: string): boolean {
+  if (ev.scope === "resync") return true;
+  return ev.scope === "global" && ev.channel === channel && ev.thread === threadId;
+}
+
+/** Does this event concern the stored conversation on screen? */
+export function concernsConversation(ev: LiveEvent, agentSlug: string, convId: string): boolean {
+  if (ev.scope === "resync") return true;
+  if (ev.scope !== "conversation") return false;
+  return ev.agent_slug === agentSlug && ev.conversation_id === convId;
+}
+
+/** Test seam: drop the connection and every subscriber. */
+export function resetLive() {
+  listeners.clear();
+  turnListeners.clear();
+  routineListeners.clear();
+  if (reconnectTimer) clearTimeout(reconnectTimer);
+  reconnectTimer = null;
+  attempts = 0;
+  missedWhileDown = false;
+  const open = socket;
+  socket = null;
+  try { open?.close(); } catch { /* already gone */ }
+}

package/src/interfaces/web/src/lib/net.ts

@@ -0,0 +1,211 @@
+import { STORAGE } from "../constants";
+
+/**
+ * Which address the panel talks to.
+ *
+ * Normally: this page's own origin, and none of this file does anything. It
+ * matters when the panel is installed to a phone's home screen — the app then
+ * keeps launching at whatever URL it was installed from, which is a promise the
+ * network cannot keep. Installed from the Wi-Fi address, it is a dead icon on
+ * mobile data; installed from the tailnet, it is a dead icon while Tailscale is
+ * off.
+ *
+ * So the daemon publishes every address it answers at (GET /api/net/endpoints),
+ * the panel remembers them, and a request that cannot reach the current one
+ * tries the rest before giving up. The daemon allows exactly these
+ * cross-origin calls (see host/daemon/api/net.js) — one process, several names.
+ */
+
+export interface Endpoint {
+  url: string;
+  kind: "tailscale-https" | "tailscale" | "lan" | "loopback";
+  label: string;
+  secure: boolean;
+}
+
+const BASE_KEY = "apx.api.base";
+const CANDIDATES_KEY = "apx.api.candidates";
+
+/** Absolute base URL, or "" meaning "this page's own origin". */
+let base = read(BASE_KEY);
+
+function read(key: string): string {
+  try {
+    return localStorage.getItem(key) || "";
+  } catch {
+    return "";
+  }
+}
+
+function write(key: string, value: string) {
+  try {
+    if (value) localStorage.setItem(key, value);
+    else localStorage.removeItem(key);
+  } catch {
+    /* private mode / quota: the base still holds for this session */
+  }
+}
+
+export function apiBase(): string {
+  return base;
+}
+
+export function setApiBase(next: string) {
+  base = (next || "").replace(/\/+$/, "");
+  write(BASE_KEY, base);
+}
+
+/** Prefix a daemon path with the active base. Same-origin stays relative. */
+export function apiUrl(path: string): string {
+  return base ? `${base}${path}` : path;
+}
+
+/**
+ * The WebSocket URL for a daemon path — same address the HTTP calls use.
+ *
+ * Not `window.location.host`: an installed app can be talking to a base that is
+ * not the page's origin (see above), and a socket opened against the page would
+ * quietly go to a machine the rest of the panel stopped using.
+ */
+export function wsUrl(path: string, params: Record<string, string | null | undefined> = {}): string {
+  const href = apiUrl(path);
+  const url = new URL(href.startsWith("http") ? href : `${window.location.origin}${href}`);
+  url.protocol = url.protocol === "https:" ? "wss:" : "ws:";
+  for (const [key, value] of Object.entries(params)) {
+    if (value) url.searchParams.set(key, value);
+  }
+  return url.toString();
+}
+
+/** Remember where else this daemon answers, for the next time one address
+ *  stops working. Called whenever the endpoint list is successfully read. */
+export function rememberEndpoints(endpoints: Endpoint[]) {
+  write(CANDIDATES_KEY, JSON.stringify(endpoints.map((e) => e.url)));
+}
+
+export function knownCandidates(): string[] {
+  try {
+    const raw = JSON.parse(read(CANDIDATES_KEY) || "[]");
+    return Array.isArray(raw) ? raw.filter((u): u is string => typeof u === "string") : [];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Is an APX daemon answering at this address, right now?
+ *
+ * Not "did something answer": a LAN address is a lease, and the 192.168.x.x
+ * that was this Mac yesterday can be a printer today — one that cheerfully
+ * returns 200s, or 404s, for everything. So the check is that the body is
+ * OUR health payload. Short timeout, because the whole point is to move on
+ * quickly and an address that is not there fails by hanging.
+ */
+export async function probe(candidate: string, timeoutMs = 2500): Promise<boolean> {
+  const ctrl = new AbortController();
+  const timer = setTimeout(() => ctrl.abort(), timeoutMs);
+  try {
+    const res = await fetch(`${candidate.replace(/\/+$/, "")}/api/health`, {
+      signal: ctrl.signal,
+      // No credentials: /health is unauthenticated, and a preflight here would
+      // cost a round trip on every candidate we are only trying out.
+      cache: "no-store",
+    });
+    if (!res.ok) return false;
+    const body = (await res.json().catch(() => null)) as { status?: string; version?: string } | null;
+    return body?.status === "ok" && typeof body.version === "string";
+  } catch {
+    return false;
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+/**
+ * A response came back wrong in a way an address change would explain — a 404
+ * where a route should be, a gateway error. Confirm the daemon is still on the
+ * other end of the CURRENT address before believing it, and fail over when it
+ * is not.
+ *
+ * This is the half that a rejected fetch does not cover. Leaving the house does
+ * not always produce a network error: the same private address is handed out on
+ * every network, so the phone reconnects to *something* and gets a stranger's
+ * 404 instead of silence.
+ *
+ * Returns true when it moved (the caller should retry).
+ */
+export async function recoverIfAddressIsWrong(): Promise<boolean> {
+  const current = base || window.location.origin;
+  if (await probe(current, 1500)) return false; // the daemon is there; the error is real
+  return (await recoverConnection()) !== null;
+}
+
+/** Statuses worth a second look. A 401 is an auth problem and a 400 is our own
+ *  bad request — neither is fixed by talking to a different address. */
+export function mayBeWrongAddress(status: number): boolean {
+  return status === 404 || status === 502 || status === 503 || status === 504;
+}
+
+let recovering: Promise<string | null> | null = null;
+
+/**
+ * The current address stopped answering: find one that does.
+ *
+ * Tries this page's own origin first (the failure may have been a blip), then
+ * every remembered address in the order the daemon ranked them — the HTTPS
+ * tailnet name before the tailnet IP before the LAN, because that is the order
+ * of "keeps working the longest". Returns the new base, or null when nothing
+ * answered, in which case the caller's original error stands.
+ */
+export function recoverConnection(): Promise<string | null> {
+  if (recovering) return recovering;
+  recovering = (async () => {
+    const here = window.location.origin;
+    const tried = new Set<string>();
+    const order = [here, ...knownCandidates()];
+    for (const candidate of order) {
+      const url = candidate.replace(/\/+$/, "");
+      if (!url || tried.has(url)) continue;
+      tried.add(url);
+      if (!(await probe(url))) continue;
+      // Same origin as the page → back to relative URLs, which keeps requests
+      // out of CORS entirely.
+      setApiBase(url === here ? "" : url);
+      return base;
+    }
+    return null;
+  })().finally(() => {
+    recovering = null;
+  });
+  return recovering;
+}
+
+/** True when this page can use the browser features that need a secure
+ *  context: service workers (installing as an app), the microphone, the
+ *  clipboard. http:// on a LAN address cannot, whatever the daemon does. */
+export function isSecure(): boolean {
+  return typeof window !== "undefined" && window.isSecureContext;
+}
+
+/** Whether the panel is running as an installed app rather than in a tab. */
+/**
+ * Is this the Android app's WebView, rather than a browser?
+ *
+ * The native shell lays the WebView out BELOW the system bars, so a page that
+ * also pads by `env(safe-area-inset-top)` pays for the status bar twice. The
+ * bridge object is the only honest signal — a user-agent sniff would call a
+ * plain Chrome tab on the same phone the app.
+ */
+export function isNativeShell(): boolean {
+  return typeof window !== "undefined" && typeof window.APXAndroid?.openOptions === "function";
+}
+
+export function isInstalled(): boolean {
+  if (typeof window === "undefined") return false;
+  return (
+    window.matchMedia?.("(display-mode: standalone)").matches ||
+    (window.navigator as unknown as { standalone?: boolean }).standalone === true
+  );
+}
+
+export { STORAGE };