@linxin666/dsh-remote-web-ui 0.1.6 → 0.1.7

package/README.md

@@ -230,10 +230,19 @@ Notes:
 - Quick tunnels are free and need no login, but the hostname is random per
   run: every `cloudflared` restart changes it, so update `--trusted-host`
   and `publicBaseUrl` together. Cloudflare documents no uptime guarantees;
-  in-flight-request concurrency is capped (HTTP 429 past it), and Quick
-  Tunnels do not support Server-Sent Events — harmless here, because the
-  only SSE surface (the desktop panel status stream) is loopback-only and
-  the phone side uses plain requests plus heartbeats.
+  in-flight-request concurrency is capped (HTTP 429 past it), and **Quick
+  Tunnels do not forward Server-Sent Events**. `Tailscale Serve` (and
+  `tailscale serve` on a single port) behaves the same way. SSE is how the
+  phone receives **live messages** in real time, so over a quick tunnel or
+  Tailscale Serve the mobile chat falls back to polling: the phone still
+  sends and receives messages (everything else rides plain HTTP, which does
+  forward), only a new message may arrive a few seconds late instead of
+  instantly. The plugin polls `session.history` on a short interval once the
+  SSE channel goes silent, and resumes streaming as soon as SSE works again.
+  For true real-time push, point the QR at a tunnel that forwards SSE — a
+  Cloudflare **named tunnel** (domain hosted on Cloudflare, see below), or a
+  plain TCP port forward (LAN address, the `tailscale up` virtual-interface
+  address, or a manual `ssh -L` / cloudflared TCP tunnel to the port).
 - A quick tunnel is public: anyone with the URL can load the static page.
   The pairing gate is the real fence — unpaired devices get 403 on every
   `/api` call — so keep `requirePairingForLan` on.
@@ -346,4 +355,4 @@ QR as a dependency-free SVG component — no canvas, no server-side image
 generation. It is inlined into the client bundle at build time (like the
 official skin/turtle-ui plugins inline their non-shared deps), so profile
 installations need no extra runtime dependency beyond the dsh peer closure.
-`schemastery` is the DSH-standard config schema validator.
+`schemastery` is the DSH-standard config schema validator.

package/lib/mobile.js

@@ -12764,17 +12764,41 @@ discriminatedUnion("type", [
 function browserSource(url) {
 	return new EventSource(url);
 }
+const DEFAULT_POLL_INTERVAL_MS = 3e3;
+const DEFAULT_STALL_THRESHOLD_MS = 12e3;
+/** Poll window: enough recent events to cover a few seconds of agent output. */
+const DEFAULT_POLL_PAGE_SIZE = 50;
 /**
 * Keep one SSE subscription open, fanning validated frames out to
 * subscribers. EventSource owns reconnection (with its own backoff); this
-* class only manages the subscription lifecycle.
+* class only manages the subscription lifecycle, plus a polling fallback
+* that keeps the open session live when the SSE channel cannot deliver.
 */
 var MuxClient = class {
 	sourceFactory;
+	pollLatest;
+	pollIntervalMs;
+	stallThresholdMs;
+	now;
 	listeners = /* @__PURE__ */ new Set();
 	source;
 	stopped = false;
 	url;
+	/** The session to keep live via fallback polling (undefined = none). */
+	observeSessionId;
+	/** Last epoch ms the SSE channel produced a frame (or the stream opened). */
+	lastDataAt = 0;
+	/**
+	* Whether the SSE channel has ever delivered a frame in this stream (a
+	* delivered frame proves the tunnel forwards SSE; silence alone then means
+	* the agent idle, not a dead channel — only an onerror re-arms fallback).
+	*/
+	sseAlive = false;
+	/** Per-session highest event seq already emitted, for poll dedup. */
+	pollWatermark = /* @__PURE__ */ new Map();
+	stallTimer;
+	pollTimer;
+	polling = false;
 	/**
 	* @param url - the mobile events endpoint (browser-relative).
 	* @param options - seams.
@@ -12782,17 +12806,25 @@ var MuxClient = class {
 	constructor(url = "/m/api/events.mux", options = {}) {
 		this.url = url;
 		this.sourceFactory = options.sourceFactory ?? browserSource;
+		this.pollLatest = options.pollLatest ?? ((sessionId) => history(sessionId, void 0, DEFAULT_POLL_PAGE_SIZE));
+		this.pollIntervalMs = options.pollIntervalMs ?? DEFAULT_POLL_INTERVAL_MS;
+		this.stallThresholdMs = options.stallThresholdMs ?? DEFAULT_STALL_THRESHOLD_MS;
+		this.now = options.now ?? (() => Date.now());
 	}
 	/** Open the stream (idempotent; EventSource reconnects until {@link stop}). */
 	start() {
 		this.stopped = false;
-		if (this.source !== void 0) return;
-		this.connect();
+		this.lastDataAt = this.now();
+		if (this.source === void 0) this.connect();
+		this.startStallChecker();
 	}
 	/** Close for good. */
 	stop() {
 		this.stopped = true;
+		this.stopStallChecker();
+		this.stopPolling();
 		this.closeSource();
+		this.observeSessionId = void 0;
 	}
 	/** Subscribe to validated frames; returns an unsubscribe function. */
 	onFrame(listener) {
@@ -12801,16 +12833,94 @@ var MuxClient = class {
 			this.listeners.delete(listener);
 		};
 	}
+	/**
+	* Point the fallback at one open session (or `undefined` to stop it).
+	* While the SSE channel is stalled this client polls that session's
+	* history and re-emits new events as `session/event` frames.
+	*/
+	observe(sessionId) {
+		this.observeSessionId = sessionId;
+		if (sessionId === void 0) {
+			this.stopPolling();
+			return;
+		}
+		if (!this.polling && !this.stopped && !this.sseAlive && this.now() - this.lastDataAt > this.stallThresholdMs) this.startPolling();
+	}
 	connect() {
+		this.sseAlive = false;
 		const source = this.sourceFactory(this.url);
 		this.source = source;
 		source.onmessage = (event) => {
 			this.handleMessage(event.data);
 		};
 		source.onerror = () => {
-			if (this.stopped && this.source === source) this.closeSource();
+			if (this.stopped && this.source === source) {
+				this.closeSource();
+				return;
+			}
+			this.sseAlive = false;
+			if (this.observeSessionId !== void 0) this.startPolling();
 		};
 	}
+	startStallChecker() {
+		this.stopStallChecker();
+		this.stallTimer = setInterval(() => {
+			if (this.stopped) return;
+			if (this.observeSessionId === void 0) return;
+			if (this.polling) return;
+			if (this.sseAlive) return;
+			if (this.now() - this.lastDataAt > this.stallThresholdMs) this.startPolling();
+		}, 1e3);
+	}
+	stopStallChecker() {
+		if (this.stallTimer !== void 0) {
+			clearInterval(this.stallTimer);
+			this.stallTimer = void 0;
+		}
+	}
+	startPolling() {
+		if (this.polling || this.stopped) return;
+		this.polling = true;
+		this.pollTick();
+		this.pollTimer = setInterval(() => {
+			this.pollTick();
+		}, this.pollIntervalMs);
+	}
+	stopPolling() {
+		this.polling = false;
+		if (this.pollTimer !== void 0) {
+			clearInterval(this.pollTimer);
+			this.pollTimer = void 0;
+		}
+	}
+	/**
+	* Fetch the latest history page for the observed session and re-emit any
+	* event above the per-session watermark as a `session/event` frame.
+	* Idempotent by seq: listeners (and the fold) never see a duplicate.
+	*/
+	async pollTick() {
+		const sessionId = this.observeSessionId;
+		if (sessionId === void 0) {
+			this.stopPolling();
+			return;
+		}
+		try {
+			const page = await this.pollLatest(sessionId);
+			let maxSeq = this.pollWatermark.get(sessionId) ?? -1;
+			for (const entry of page.events) {
+				const event = entry.event;
+				const seq = typeof event?.seq === "number" ? event.seq : -1;
+				if (seq <= maxSeq) continue;
+				maxSeq = seq;
+				this.emit({
+					type: "session/event",
+					sessionId,
+					event
+				});
+			}
+			this.pollWatermark.set(sessionId, maxSeq);
+		} catch {}
+	}
 	handleMessage(data) {
 		if (typeof data !== "string" || data === "") return;
 		let parsed;
@@ -12823,8 +12933,14 @@ var MuxClient = class {
 		if (!envelope.success) return;
 		const frame = muxFrameSchema.safeParse(envelope.data.payload);
 		if (!frame.success) return;
+		this.sseAlive = true;
+		this.lastDataAt = this.now();
+		if (this.polling) this.stopPolling();
+		this.emit(frame.data);
+	}
+	emit(frame) {
 		for (const listener of this.listeners) try {
-			listener(frame.data);
+			listener(frame);
 		} catch {}
 	}
 	closeSource() {
@@ -13499,7 +13615,6 @@ function ChatView({ session, mux, onBack }) {
 			setLoading(false);
 			const projections = page.projections?.values;
 			setPermissions(parsePermissionSelect(projections?.["permissions"]));
-			scrollToBottom();
 		}, (reason) => {
 			if (cancelled) return;
 			setError(errorText(reason));
@@ -13523,14 +13638,20 @@ function ChatView({ session, mux, onBack }) {
 			if (frame.type === "session/projection" && frame.sessionId === session.sessionId && frame.key === "permissions") setPermissions(parsePermissionSelect(frame.value));
 		});
 	}, [mux, session.sessionId]);
-	(0, import_react.useEffect)(() => {
-		if (messages.some((message) => message.pending === true)) scrollToBottom();
-	}, [messages]);
 	const scrollToBottom = (0, import_react.useCallback)(() => {
 		const el = scrollRef.current;
 		if (el === void 0) return;
 		el.scrollTop = el.scrollHeight;
 	}, []);
+	const lastMessageKeyRef = (0, import_react.useRef)(void 0);
+	(0, import_react.useEffect)(() => {
+		const last = messages[messages.length - 1];
+		if (last === void 0) return;
+		const key = last.seq + ":" + (last.pending === true ? "p" : "f");
+		if (key === lastMessageKeyRef.current) return;
+		lastMessageKeyRef.current = key;
+		scrollToBottom();
+	}, [messages, scrollToBottom]);
 	/** Load one older page and prepend it. The fold is directional (incremental
 	*  tails only), so the older page folds standalone and concatenates ahead —
 	*  host page boundaries never cut a message, so the seam is exact. */
@@ -14535,6 +14656,9 @@ function App() {
 			mux.stop();
 		};
 	}, []);
+	(0, import_react.useEffect)(() => {
+		muxRef.current?.observe(route.kind === "chat" ? route.session.sessionId : void 0);
+	}, [route]);
 	const back = (0, import_react.useCallback)(() => {
 		setRoute((previous) => {
 			if (previous.kind === "chat") return {