@linkshell/host 0.4.44 → 0.4.46

package/dist/host/src/screen-viewer.js

@@ -421,6 +421,132 @@ function cleanShortcuts(list) {
   }
   return out;
 }
+
+/** A configuration belongs to this socket; only its latest acknowledgement may restore input. */
+function createScreenSession(initial, effects) {
+  let desired = { active: true, display: 0, width: "1920" }, hidden = false;
+  let capabilities = null, opened = false, closed = false, scheduled = false;
+  let requestId = 0, pending = null, sentKey = "", error = "", inputReady = true, generation;
+  const clean = (next) => {
+    const out = {};
+    if (!next || typeof next !== "object") return out;
+    if (typeof next.active === "boolean") out.active = next.active;
+    if (Number.isSafeInteger(next.display) && next.display >= 0) out.display = next.display;
+    if (next.width === "native") out.width = "native";
+    else if ((typeof next.width === "string" || typeof next.width === "number") && Number.isInteger(Number(next.width)) && Number(next.width) >= 640 && Number(next.width) <= 3840) out.width = String(Number(next.width));
+    if ([30, 60, 120].includes(next.maxFps)) out.maxFps = next.maxFps;
+    return out;
+  };
+  desired = Object.assign(desired, clean(initial));
+  const original = { ...desired };
+  const state = () => ({ display: desired.display, width: desired.width, ...(desired.maxFps ? { maxFps: desired.maxFps } : {}), paused: !desired.active || hidden });
+  const key = () => JSON.stringify(state());
+  const targetChanged = () => ["display", "width", "maxFps"].some((name) => desired[name] !== original[name]);
+  const changed = () => effects.changed?.({ ...desired, paused: state().paused, inputReady, error });
+  const suspend = () => { effects.release(); inputReady = false; };
+  const pump = () => {
+    scheduled = false;
+    if (closed || !opened || !capabilities) return;
+    const next = state(), nextKey = key();
+    if (capabilities.configure) {
+      if (nextKey === sentKey) return;
+      suspend();
+      sentKey = nextKey;
+      pending = { requestId: ++requestId, key: nextKey, ...next };
+      effects.send({ t: "screen.configure", requestId, ...next });
+    } else {
+      if (targetChanged() && !next.paused) {
+        if (nextKey !== sentKey) effects.reload({ display: desired.display, width: desired.width, maxFps: desired.maxFps });
+        inputReady = false;
+      } else inputReady = !next.paused;
+      sentKey = nextKey;
+    }
+    changed();
+  };
+  const schedule = () => {
+    if (!scheduled && !closed) { scheduled = true; effects.defer(pump); }
+  };
+  return {
+    desired: () => ({ ...desired }),
+    active: () => !closed && !state().paused,
+    canInput: () => !closed && !state().paused && inputReady,
+    generation: () => generation,
+    supported: () => capabilities?.configure === true,
+    known: () => capabilities !== null,
+    open() {
+      if (closed) return;
+      opened = true;
+      if (state().paused) { suspend(); effects.send({ t: "hidden" }); }
+      schedule();
+    },
+    update(next) {
+      if (closed) return;
+      const before = key();
+      desired = Object.assign({}, desired, clean(next));
+      if (key() === before && !error) return;
+      suspend();
+      // A pause can reach the native receiver before this microtask runs. Even a
+      // quick return to the same target needs a fresh apply and input generation.
+      pending = null;
+      sentKey = "";
+      error = "";
+      if (!capabilities?.configure && opened && state().paused !== JSON.parse(before).paused) effects.send({ t: state().paused ? "hidden" : "shown" });
+      changed();
+      schedule();
+    },
+    visibility(nextHidden) {
+      if (closed || hidden === nextHidden) return;
+      hidden = nextHidden;
+      suspend();
+      pending = null;
+      sentKey = "";
+      error = "";
+      if (!capabilities?.configure && opened) effects.send({ t: state().paused ? "hidden" : "shown" });
+      changed();
+      schedule();
+    },
+    receive(message) {
+      if (closed || !message || typeof message !== "object") return;
+      if (message.t === "capabilities") {
+        capabilities = { ...message, configure: message.version === 1 && message.configure === true, pause: message.version === 1 && message.pause === true };
+        sentKey = "";
+        pending = null;
+        if (capabilities.configure || state().paused || targetChanged()) suspend();
+        else inputReady = true;
+        effects.report(capabilities);
+        changed();
+        schedule();
+        return;
+      }
+      if (!pending || message.requestId !== pending.requestId || pending.key !== key()) return;
+      if (message.t !== "configured" && message.t !== "error") return;
+      if (message.t === "configured" && (message.display !== pending.display || message.paused !== pending.paused || !Number.isSafeInteger(message.generation) || message.generation < 0)) return;
+      inputReady = message.t === "configured" && !message.paused;
+      if (message.t === "configured") generation = message.generation;
+      error = message.t === "error" ? message.message || "屏幕配置失败，请重试" : "";
+      pending = null;
+      if (error) sentKey = "";
+      effects.report(message);
+      changed();
+    },
+    close() {
+      if (closed) return;
+      suspend();
+      closed = true;
+      pending = null;
+      changed();
+    },
+    reconnect() {
+      if (closed) return;
+      suspend();
+      capabilities = pending = null;
+      generation = undefined;
+      sentKey = "";
+      error = "";
+      changed();
+    },
+  };
+}
 `;
 const BODY = String.raw `
 const $ = (id) => document.getElementById(id);
@@ -428,8 +554,15 @@ const stage = $("stage"), picture = $("picture"), canvas = $("screen"), ctx = ca
 const note = $("note"), bar = $("bar"), controlShell = $("control-shell"), orb = $("orb"), menu = $("menu"), connection = $("connection"), toast = $("toast"), keys = $("keys"), typing = $("typing"), shortcut = $("shortcut");
 const sheet = $("sheet"), actions = $("actions"), maker = $("maker"), naming = $("makername"), composer = $("composer"), words = $("words");
 const query = new URLSearchParams(location.search);
+const windowsHost = document.body.dataset.platform === "win32";
+if (windowsHost) Object.assign(MOD_SIGNS, { ctrl: "Ctrl+", alt: "Alt+", shift: "Shift+", cmd: "Win+" });
 const app = window.ReactNativeWebView;
 const tellApp = (message) => { if (app) app.postMessage(JSON.stringify(message)); };
+const tellSession = (session) => {
+  const message = { type: "screenSession", session };
+  tellApp(message);
+  if (typeof window.__linkshellSession === "function") window.__linkshellSession(message);
+};
 const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
 const coarse = matchMedia("(pointer: coarse)").matches;
 const android = /Android/i.test(navigator.userAgent);
@@ -442,7 +575,7 @@ const HINTS = {
 };
 let stored = null;
 try { stored = localStorage.getItem("linkshell.screen.mode"); } catch {}
-let mode = MODES.includes(query.get("mode")) ? query.get("mode") : MODES.includes(stored) ? stored : "view";
+let mode = MODES.includes(query.get("mode")) ? query.get("mode") : MODES.includes(window.__linkshellChrome?.mode) ? window.__linkshellChrome.mode : MODES.includes(stored) ? stored : "view";
 
 // What the app around the page has done to the phone's screen. A page in a plain browser has none of it.
 // "clear" is the side of a phone lying down that has no camera in it.
@@ -464,7 +597,8 @@ const mods = new Set();
 
 // ---- The picture ----------------------------------------------------------
 
-const say = (text) => { note.textContent = text; note.classList.toggle("gone", !text); };
+let sessionError = "";
+const say = (text) => { text = sessionError || text; note.textContent = text; note.classList.toggle("gone", !text); };
 const round = (value, digits) => (value == null || !isFinite(value) ? null : +value.toFixed(digits === undefined ? 1 : digits));
 const hex = (n) => n.toString(16).padStart(2, "0");
 function sps(unit) {
@@ -480,8 +614,48 @@ const wantVideo = !nativePicture && "RTCPeerConnection" in window && (!app || ch
 // The iOS app owns the final transport fallback, so it can bypass a failed direct data channel.
 const relayFallback = !nativePicture && !!app && (chrome.relayFallback === true || query.get("fallback") === "relay") && query.get("video") !== "0";
 const unseeable = () => say("这个系统版本的浏览器内核不支持视频解码，请升级系统后再试。");
-if (!nativePicture && !wantVideo && !("VideoDecoder" in window)) unseeable();
+if (!windowsHost && !nativePicture && !wantVideo && !("VideoDecoder" in window)) unseeable();
 let decoder, skipping = false, skipped = 0, arrived = 0, keyAsked = -Infinity;
+const jpegStats = { frames: 0, bytes: 0, decode: 0, at: performance.now(), beforeFrames: 0, beforeBytes: 0, beforeDecode: 0, fps: 0, bitrateMbps: 0, decodeMs: 0 };
+function jpegVitals() {
+  const now = performance.now(), elapsed = now - jpegStats.at;
+  if (elapsed >= 1000) {
+    const frames = jpegStats.frames - jpegStats.beforeFrames;
+    jpegStats.fps = round(frames * 1000 / elapsed);
+    jpegStats.bitrateMbps = round((jpegStats.bytes - jpegStats.beforeBytes) * 8 / (elapsed * 1000), 2);
+    jpegStats.decodeMs = frames ? round((jpegStats.decode - jpegStats.beforeDecode) / frames, 2) : 0;
+    jpegStats.at = now; jpegStats.beforeFrames = jpegStats.frames; jpegStats.beforeBytes = jpegStats.bytes; jpegStats.beforeDecode = jpegStats.decode;
+  }
+  return { width: content.w, height: content.h, codec: "JPEG", fps: jpegStats.fps, bitrateMbps: jpegStats.bitrateMbps, decodeMs: jpegStats.decodeMs, live: false };
+}
+let jpegPending = null, jpegDecoding = false, jpegGeneration = 0;
+async function drawJpeg() {
+  if (jpegDecoding) return;
+  jpegDecoding = true;
+  try {
+    while (jpegPending && ws.readyState === 1 && session.active()) {
+      const next = jpegPending;
+      jpegPending = null;
+      const generation = jpegGeneration;
+      const started = performance.now();
+      const bitmap = await createImageBitmap(new Blob([next.unit], { type: "image/jpeg" }));
+      try {
+        if (generation !== jpegGeneration || ws.readyState !== 1 || !session.active()) continue;
+        if (live) show(false);
+        if (content.w !== bitmap.width || content.h !== bitmap.height) {
+          canvas.width = content.w = bitmap.width;
+          canvas.height = content.h = bitmap.height;
+          layout();
+        }
+        ctx.drawImage(bitmap, 0, 0);
+        jpegStats.frames++; jpegStats.decode += performance.now() - started;
+        shownUpTo(next.seq);
+        say("");
+      } finally { bitmap.close(); }
+    }
+  } catch (error) { say("屏幕画面解码失败：" + error.message); }
+  finally { jpegDecoding = false; }
+}
 // Only a keyframe gets a decoder that lost its place going again, and the host makes them when asked rather than by the clock.
 const askKey = () => { const now = performance.now(); if (now - keyAsked > 500) { keyAsked = now; send({ t: "keyframe" }); } };
 // The host is told which frame is on screen: that is how it knows when this end has fallen behind,
@@ -492,6 +666,7 @@ const lag = Number(query.get("lag")) || 0, lagUntil = performance.now() + (Numbe
 function shownUpTo(seq) {
   if (seq > lastShown) lastShown = seq;
   if (lag && performance.now() < lagUntil) { const late = lastShown; setTimeout(() => send({ t: "ack", n: late }), lag); return; }
+  if (windowsHost) return send({ t: "ack", n: lastShown });
   if (!telling) telling = setTimeout(() => { telling = 0; send({ t: "ack", n: lastShown }); }, 40);
 }
 let lighterAt = -Infinity, failures = 0;
@@ -499,12 +674,40 @@ const asked = new URLSearchParams(location.search);
 asked.delete("video");
 if (wantVideo) asked.set("video", "1");
 // How wide the video track may be (the socket's picture has its own ladder). The app says it in the address;
-// a plain browser remembers its own. A new choice loads the page again with it: the track is offered anew.
+// a plain browser remembers its own. A capable host applies a new choice to this same track.
 const WIDTHS = ["1280", "1920", "2560", "native"];
 let keptWidth = null;
 try { keptWidth = localStorage.getItem("linkshell.screen.width"); } catch {}
-const width = WIDTHS.includes(query.get("width")) ? query.get("width") : WIDTHS.includes(keptWidth) ? keptWidth : "1920";
+let width = WIDTHS.includes(query.get("width")) ? query.get("width") : WIDTHS.includes(keptWidth) ? keptWidth : "1920";
+const initialSession = typeof window.__linkshellSession === "object" && window.__linkshellSession ? window.__linkshellSession : {};
+const session = createScreenSession({ active: true, display: Number(query.get("display")) || 0, width, maxFps: Number(query.get("maxFps")) || undefined, ...initialSession }, {
+  send: (message) => send(message),
+  defer: (action) => Promise.resolve().then(action),
+  release: () => {
+    // A decoded bitmap from before a pause or display change belongs to the old surface.
+    jpegGeneration += 1;
+    jpegPending = null;
+    releaseInput();
+  },
+  report: tellSession,
+  reload: (state) => reloadSession(state),
+  changed: (state) => {
+    width = state.width;
+    const previousError = sessionError;
+    sessionError = state.error;
+    if (sessionError) say(sessionError);
+    else if (state.paused) say("屏幕已暂停");
+    else if (!state.inputReady) say("正在调整屏幕…");
+    else if (previousError || note.textContent === "屏幕已暂停" || note.textContent === "正在调整屏幕…") say("");
+    if (state.inputReady && mode !== "view") askControl();
+    refreshWidths();
+    refresh();
+  },
+});
+width = session.desired().width;
 asked.set("width", width);
+asked.set("display", String(session.desired().display));
+if (session.desired().maxFps) asked.set("maxFps", String(session.desired().maxFps));
 // A page that is a srcdoc (the gateway's web client puts it in one) has no address of its own to load again:
 // it asks the page around it to, where that page says it can, and offers no choice where it can't.
 const framed = document.URL === "about:srcdoc";
@@ -515,19 +718,52 @@ const ws = nativePicture
   : new WebSocket((location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/stream?" + asked);
 ws.binaryType = "arraybuffer";
 const send = (message) => { if (ws.readyState === 1) ws.send(JSON.stringify(message)); };
-ws.onopen = () => { if (mode !== "view") askControl(); if (document.hidden) send({ t: "hidden" }); };
+let capabilityTimer = 0, socketClosed = false;
+function waitForCapabilities() {
+  clearTimeout(capabilityTimer);
+  capabilityTimer = setTimeout(() => {
+    if (!session.known()) session.receive({ t: "capabilities", version: 1, configure: false, pause: false, retainMs: 0 });
+  }, 10000);
+}
+ws.onopen = () => { session.open(); waitForCapabilities(); if (mode !== "view") askControl(); };
 // Out of sight, a page answers late (its timers slow to one a second) and shows nothing: the host sends no
 // picture down the socket meanwhile, and starts again at a keyframe.
-document.addEventListener("visibilitychange", () => send({ t: document.hidden ? "hidden" : "shown" }));
+document.addEventListener("visibilitychange", () => session.visibility(document.hidden));
+window.linkshellSession = (state) => session.update(state);
+
+function reloadSession(state) {
+  if (nativePicture) return;
+  if (reloadVia) return reloadVia({ ...state, mode });
+  const next = new URLSearchParams(location.search);
+  for (const name of ["display", "width", "maxFps"]) if (state[name] !== undefined) next.set(name, String(state[name]));
+  next.set("mode", mode);
+  location.replace(location.pathname + "?" + next);
+}
+
+function refreshWidths() {
+  for (const tile of $("widths").querySelectorAll(".tile")) {
+    tile.classList.toggle("on", tile.dataset.width === width);
+    tile.setAttribute("aria-pressed", String(tile.dataset.width === width));
+  }
+}
 ws.onmessage = (event) => {
   if (typeof event.data === "string") return heard(JSON.parse(event.data));
-  if (!("VideoDecoder" in window)) return;
+  if (!(event.data instanceof ArrayBuffer) || event.data.byteLength < 6) return;
   // A frame: whether it is a keyframe, its number, the picture.
   const head = new DataView(event.data);
   const key = head.getUint8(0) === 1;
   const seq = head.getUint32(1);
   const unit = new Uint8Array(event.data, 5);
   arrived = seq;
+  if (head.getUint8(0) === 2) {
+    if (!session.active()) return shownUpTo(seq);
+    jpegStats.bytes += event.data.byteLength;
+    // A latest-frame mailbox keeps decoding work bounded when the viewer is slow.
+    jpegPending = { seq, unit };
+    void drawJpeg();
+    return;
+  }
+  if (!("VideoDecoder" in window)) return unseeable();
   // A decoder that can't keep up skips to the next keyframe; what it skips has still arrived.
   if (decoder && !key && (skipping || decoder.decodeQueueSize > 8)) { skipping = true; skipped += 1; askKey(); return shownUpTo(seq); }
   skipping = false;
@@ -559,18 +795,29 @@ ws.onmessage = (event) => {
   decoder.decode(new EncodedVideoChunk({ type: key ? "key" : "delta", timestamp: seq, data: unit }));
 };
 ws.onclose = () => {
+  if (socketClosed) return;
+  socketClosed = true;
+  clearTimeout(capabilityTimer);
+  session.close();
   // A video track is this socket's: without the one there is no finding the other again, and no hands.
   drop();
   if (requestRelay()) return;
+  tellApp({ type: "screenClosed" });
   if (blocked || note.classList.contains("gone") || note.textContent.startsWith("正在")) say("屏幕连接已断开");
   blocked = false;
 };
 
 function heard(message) {
+  if (message.session) {
+    if (message.session.t === "capabilities") clearTimeout(capabilityTimer);
+    return session.receive(message.session);
+  }
   if (message.error) return say(message.error);
   if (message.rtc) return signal(message.rtc);
   if (message.pong) return meter && meter.pong(message.pong);
   if (message.restart) {
+    jpegGeneration += 1;
+    jpegPending = null;
     // The host starts the stream again at another quality: a new decoder for it.
     try { if (decoder) decoder.close(); } catch {}
     decoder = undefined;
@@ -635,7 +882,7 @@ function signal(message) {
   if (!mine) return;
   if (message.t === "offer") {
     tried = true;
-    patience = setTimeout(() => giveUp("not connected within " + patienceSeconds + " s of the offer"), patienceSeconds * 1000);
+    patience = setTimeout(() => connectionPatience(mine), patienceSeconds * 1000);
     if (failAfter) setTimeout(() => { if (rtc === mine) giveUp("asked to (failAfter)"); }, failAfter * 1000);
     // The answer is the browser's own, as it made it: the sender's playout-delay header has to survive in it.
     mine.described = mine.pc.setRemoteDescription({ type: "offer", sdp: message.sdp })
@@ -702,16 +949,23 @@ function watch(mine) {
 }
 
 function away(mine, since) {
+  if (rtc !== mine) return;
   // A page that was put aside (another app, another tab) could not hear the path come back: once it is
   // looked at again it is given the time again.
   const now = performance.now();
-  if (document.hidden || now - since > 6000) mine.away = setTimeout(() => away(mine, now), 4000);
+  if (!session.active() || now - since > 6000) mine.away = setTimeout(() => away(mine, now), 4000);
   else giveUp("disconnected for more than 4 s");
 }
 
+function connectionPatience(mine) {
+  if (rtc !== mine) return;
+  if (!session.active()) patience = setTimeout(() => connectionPatience(mine), patienceSeconds * 1000);
+  else giveUp("not connected within " + patienceSeconds + " s of the offer");
+}
+
 function frameless() {
   // A page nobody is looking at is shown nothing, and one waiting for a tap has not begun: neither is the path's doing.
-  if (document.hidden || blocked) patience = setTimeout(frameless, 4000);
+  if (!session.active() || blocked) patience = setTimeout(frameless, 4000);
   else giveUp("connected, but no frame within 4 s");
 }
 
@@ -758,7 +1012,7 @@ function fallBack() {
   if (requestRelay()) return;
   if (blocked) say("正在连接电脑屏幕…");
   blocked = false;
-  if (!("VideoDecoder" in window)) return unseeable();
+  if (!windowsHost && !("VideoDecoder" in window)) return unseeable();
   if (tried) hint(live ? "直连断开了：已改用兼容方式传画面，延迟会高一些" : "没能和电脑直连：已改用兼容方式传画面，延迟会高一些", 5000);
 }
 
@@ -859,6 +1113,7 @@ async function presentTrack(track) {
     if (mine.stopped || !mine.latest) return;
     const frame = mine.latest;
     mine.latest = null;
+    if (!session.active()) { frame.close(); return; }
     try {
       // The canvas carries the frame's own pixels; the layout gives it its place on the page.
       if (gpu.width !== frame.displayWidth || gpu.height !== frame.displayHeight) {
@@ -914,6 +1169,7 @@ async function presentTrack(track) {
           if (value) value.close();
           break;
         }
+        if (!session.active()) { value.close(); continue; }
         if (mine.latest) {
           mine.latest.close();
           mine.dropped += 1;
@@ -1270,7 +1526,7 @@ function expandControls(open) {
 }
 function armControlsIdle() {
   clearTimeout(controls.timer);
-  if (!controlsMayCollapse() || controls.target === 0) return;
+  if (!session.active() || !controlsMayCollapse() || controls.target === 0) return;
   controls.timer = setTimeout(() => { if (controlsMayCollapse()) expandControls(false); }, 3000);
 }
 function layoutControls(safe, anchor) {
@@ -1310,7 +1566,7 @@ reducedMotion.addEventListener("change", () => {
 });
 orb.addEventListener("pointerdown", (event) => {
   event.preventDefault(); event.stopPropagation();
-  if (!controls.orb) return;
+  if (!session.active() || !controls.orb) return;
   try { orb.setPointerCapture(event.pointerId); } catch {}
   clearTimeout(controls.timer);
   controls.drag = { id: event.pointerId, x: event.clientX, y: event.clientY, origin: { ...controls.orb }, moved: false };
@@ -1542,12 +1798,12 @@ function panBy(dx, dy) {
 
 // ---- Sending --------------------------------------------------------------
 
-const controlling = () => mode !== "view" && control.available && control.trusted;
+const controlling = () => session.canInput() && mode !== "view" && control.available && control.trusted;
 
 function askControl() {
-  if (control.asked) return;
+  if (control.asked || !session.canInput()) return;
   control.asked = true;
-  send({ t: "control" });
+  send({ t: "control", ...(session.generation() !== undefined ? { screenGeneration: session.generation() } : {}) });
 }
 
 // Where an event travels: down the socket, in order, until a video's two channels to the app are open; then
@@ -1562,6 +1818,8 @@ function askControl() {
 // after something sent later.
 let wired = false, held = 0, sure = true, sent = 0, rest = 0, movedAt = -Infinity;
 const trail = [];
+const heldButtons = new Map();
+let inputEpoch = 0;
 
 function lanes() {
   if (nativePicture) { wired = true; return; }
@@ -1572,15 +1830,23 @@ function lanes() {
 }
 
 function post(message, lane) {
+  if (!session.canInput()) return;
+  if (session.generation() !== undefined) message.screenGeneration = session.generation();
+  transmitInput(message, lane);
+}
+
+function transmitInput(message, lane) {
   if (nativePicture) return nativePost({ kind: "input", message, replaceable: lane === "pointer" });
   if (!wired) return send(message);
   message.i = ++sent;
-  rtc.channels[lane].send(JSON.stringify(message));
+  const channel = rtc && rtc.channels[lane];
+  if (channel && channel.readyState === "open") channel.send(JSON.stringify(message));
 }
 
 let moveWaiting = false;
 /** Says where the pointer is: in order, when something is about to happen there. */
 function tell(placed) {
+  if (!session.canInput()) { moveWaiting = false; return; }
   lanes();
   moveWaiting = false;
   const now = performance.now(), lane = laneOf("move", placed, held > 0, false);
@@ -1597,6 +1863,7 @@ function tell(placed) {
 const flush = () => { if (moveWaiting) tell(false); };
 // A pointer position a frame: as often as the picture could show it.
 function moved() {
+  if (!session.canInput()) return;
   if (!moveWaiting) requestAnimationFrame(flush);
   moveWaiting = true;
   movedAt = performance.now();
@@ -1605,13 +1872,64 @@ function moved() {
 }
 // Everything else goes at once, after the position it happens at.
 function act(message) {
+  if (!session.canInput()) return;
   lanes();
   const placed = moveWaiting || !sure;
   if (placed) tell(true);
-  if (message.t === "down") held += 1;
+  if (message.t === "down") { heldButtons.set(message.b, { ...message }); held = heldButtons.size; }
   if (message.t === "scroll" && placed && gesture) gesture.tied = true;
   post(message, laneOf(message.t, placed, held > 0, !!gesture && !!gesture.tied));
-  if (message.t === "up") held = Math.max(0, held - 1);
+  if (message.t === "up") { heldButtons.delete(message.b); held = heldButtons.size; }
+}
+
+/** Input queued for the old display must never be replayed when the retained page is shown again. */
+function releaseInput() {
+  inputEpoch += 1;
+  control.asked = false;
+  lanes();
+  for (const button of heldButtons.values()) {
+    const released = { ...button, t: "up" };
+    if (session.generation() !== undefined) released.screenGeneration = session.generation();
+    transmitInput(released, "input");
+  }
+  heldButtons.clear();
+  held = 0;
+  sure = true;
+  moveWaiting = false;
+  clearTimeout(rest);
+  clearTimeout(fade);
+  clearTimeout(settling);
+  clearTimeout(toastTimer);
+  clearTimeout(disarming);
+  clearInterval(statusTimer);
+  clearTimeout(controls.timer);
+  if (gesture) clearTimeout(gesture.hold);
+  for (const id of touches.keys()) { try { stage.releasePointerCapture(id); } catch {} }
+  touches.clear();
+  gesture = lastTap = mouseHeld = null;
+  mouseClicks = { t: 0, n: 0, x: 0, y: 0, b: 0 };
+  movedAt = -Infinity;
+  trail.length = 0;
+  mods.clear();
+  composing = writing = false;
+  composed = "";
+  leftover = wanted = null;
+  askedAt = -Infinity;
+  keysOpen = false;
+  if (document.activeElement && document.activeElement !== document.body) document.activeElement.blur();
+  resetTyping();
+  shortcut.value = "";
+  disarm();
+  pointer.classList.remove("pressed", "on");
+  toast.classList.remove("on");
+  if (controls.drag) { try { orb.releasePointerCapture(controls.drag.id); } catch {} }
+  controls.drag = null;
+  for (const element of pressedControls) element.style.scale = "";
+  pressedControls.clear();
+  finishPresentation();
+  drawKeys();
+  clearTimeout(controls.timer);
+  clearTimeout(settling);
 }
 
 let fade = 0;
@@ -1687,7 +2005,7 @@ function endOne() {
 }
 
 stage.addEventListener("pointerdown", (event) => {
-  if (presentation.active) { event.preventDefault(); return; }
+  if (!session.active() || presentation.active) { event.preventDefault(); return; }
   if (!immersiveControls() || controls.target > 0) wake();
   // A touch that closes the menu, or the shortcuts, does nothing else.
   const closing = [closeMenu(), closeSheet()].some(Boolean);
@@ -1720,7 +2038,7 @@ stage.addEventListener("pointerdown", (event) => {
 });
 
 stage.addEventListener("pointermove", (event) => {
-  if (presentation.active) return;
+  if (!session.active() || presentation.active) return;
   if (event.pointerType === "mouse") return mouseMove(event);
   const touch = touches.get(event.pointerId);
   if (!touch || !gesture) return;
@@ -1852,7 +2170,7 @@ function mouseUp(event) {
 }
 stage.addEventListener("wheel", (event) => {
   event.preventDefault();
-  if (presentation.active) return;
+  if (!session.active() || presentation.active) return;
   if (controlling() && !event.ctrlKey) return act({ t: "scroll", dx: -event.deltaX, dy: -event.deltaY });
   zoomTo(zoom * Math.exp(-event.deltaY / 300), { x: event.clientX, y: event.clientY });
 }, { passive: false });
@@ -1990,6 +2308,7 @@ const keyboardShown = () => keyboardIsUp({
 
 /** Brings the phone's keyboard up for a field. Within a touch: a browser gives a keyboard to nothing else. */
 function ask(field, again) {
+  if (!session.canInput()) return;
   // A keyboard goes to the view the keys go to, and inside an app that is not always the page: the app
   // sees to it, and has the page ask once more (linkshellKeyboard) if no keyboard has come.
   if (!again) tellApp({ type: "keyboard" });
@@ -2055,7 +2374,8 @@ document.addEventListener("visibilitychange", () => { if (!document.hidden) sett
 
 /** A control that works on touch-up and never takes the focus (the keyboard stays as it is). */
 function tappable(element, action) {
-  element.addEventListener("pointerdown", (event) => { event.preventDefault(); event.stopPropagation(); wake(); pressFeedback(element, true); });
+  let epoch = -1;
+  element.addEventListener("pointerdown", (event) => { event.preventDefault(); event.stopPropagation(); if (!session.active()) return; epoch = inputEpoch; wake(); pressFeedback(element, true); });
   element.addEventListener("pointercancel", () => pressFeedback(element, false));
   element.addEventListener("pointerleave", () => pressFeedback(element, false));
   element.addEventListener("touchstart", (event) => event.preventDefault(), { passive: false });
@@ -2064,6 +2384,8 @@ function tappable(element, action) {
     event.preventDefault();
     event.stopPropagation();
     pressFeedback(element, false);
+    if (!session.active() || epoch !== inputEpoch) return;
+    epoch = -1;
     const box = element.getBoundingClientRect(), cx = box.left + box.width / 2, cy = box.top + box.height / 2;
     if (Math.abs(event.clientX - cx) <= element.offsetWidth / 2 && Math.abs(event.clientY - cy) <= element.offsetHeight / 2) action();
   });
@@ -2072,7 +2394,7 @@ function tappable(element, action) {
 /** The same inside something that scrolls: the touch is left to the browser, and counts if it stayed where it landed. */
 function pressable(element, action) {
   let from = null;
-  element.addEventListener("pointerdown", (event) => { event.stopPropagation(); wake(); pressFeedback(element, true); from = { id: event.pointerId, x: event.clientX, y: event.clientY }; });
+  element.addEventListener("pointerdown", (event) => { event.stopPropagation(); if (!session.active()) return; wake(); pressFeedback(element, true); from = { id: event.pointerId, x: event.clientX, y: event.clientY, epoch: inputEpoch }; });
   element.addEventListener("pointercancel", () => { from = null; pressFeedback(element, false); });
   element.addEventListener("pointerleave", () => pressFeedback(element, false));
   // The mouse's events a browser makes up after a touch would land on whatever the action has left under the
@@ -2084,7 +2406,7 @@ function pressable(element, action) {
     from = null;
     pressFeedback(element, false);
     event.stopPropagation();
-    if (was && was.id === event.pointerId && Math.hypot(event.clientX - was.x, event.clientY - was.y) < SLOP) action();
+    if (session.active() && was && was.epoch === inputEpoch && was.id === event.pointerId && Math.hypot(event.clientX - was.x, event.clientY - was.y) < SLOP) action();
   });
 }
 
@@ -2103,6 +2425,8 @@ function hint(text, ms) {
 
 /** Says why a controlling mode is not controlling, or how it works once it is. */
 function explain(was) {
+  if (!session.active()) return;
+  if (!session.canInput()) return hint("正在调整屏幕…", 0);
   if (!control.known) return hint("正在准备控制电脑…", 0);
   if (!control.available) return hint(control.reason || "这台电脑暂时不能被控制");
   if (!control.trusted) {
@@ -2220,7 +2544,7 @@ if (typeof window.__linkshellReport === "function") {
       previous = stats?.raw ?? null;
       window.__linkshellReport(stats
         ? { width: stats.width, height: stats.height, fps: stats.fps, codec: stats.codec, bitrateMbps: stats.bitrateMbps, presented: stats.presented, live: true }
-        : { width: content.w, height: content.h, live: false });
+        : windowsHost ? jpegVitals() : { width: content.w, height: content.h, live: false });
     } catch { /* A reconnect can close getStats while it is in flight. */ }
     finally { pending = false; }
   }, 2000);
@@ -2237,12 +2561,17 @@ async function status() {
     layout();
   };
   // The choice is the track's: the socket's picture follows its own ladder.
-  const choosing = live && canChooseWidth;
+  const choosing = (live || windowsHost) && (canChooseWidth || session.supported());
   if ($("widths").classList.contains("gone") === choosing) {
     $("widths").classList.toggle("gone", !choosing);
     layout();
   }
   const way = !content.w ? "正在连接…" : live ? "直连 · 视频" : (relayed ? "中继" : "直连") + " · 兼容\n" + content.w + "×" + content.h;
+  if (windowsHost && !live && content.w) {
+    const stats = jpegVitals();
+    put(way + "\n" + stats.fps + " 帧/秒 · " + stats.bitrateMbps + " Mbps");
+    return;
+  }
   if (nativePicture) {
     nativePost({ kind: "stats" });
     const detail = [content.w ? content.w + "×" + content.h : null,
@@ -2294,12 +2623,7 @@ for (const tile of $("widths").querySelectorAll(".tile")) {
     if (chosen === width) return;
     try { localStorage.setItem("linkshell.screen.width", chosen); } catch {}
     tellApp({ type: "width", width: chosen });
-    if (nativePicture) return;
-    if (reloadVia) return reloadVia({ width: chosen, mode });
-    const next = new URLSearchParams(location.search);
-    next.set("width", chosen);
-    next.set("mode", mode);
-    location.replace(location.pathname + "?" + next);
+    window.linkshellSession({ width: chosen });
   });
 }
 pressable($("full"), () => {
@@ -2335,7 +2659,11 @@ $("composekey").innerHTML = ICON.compose;
 // Keys for the computer that a phone's keyboard has not got, one tap each, by what they are for: name, key,
 // modifiers, and how the sheet takes the tap. "again": it stays, for another (the rest close it: what comes
 // next is on the picture). "sure": asked twice, being a slip of the finger away from losing work.
-const QUICK = [
+const QUICK = windowsHost ? [
+  ["常用", [["复制", "c", "ctrl"], ["粘贴", "v", "ctrl"], ["剪切", "x", "ctrl"], ["全选", "a", "ctrl"], ["撤销", "z", "ctrl", "again"], ["重做", "y", "ctrl", "again"], ["保存", "s", "ctrl"], ["查找", "f", "ctrl"]]],
+  ["窗口与应用", [["切换应用", "tab", "alt", "again"], ["新标签", "t", "ctrl"], ["关闭标签", "w", "ctrl"], ["关闭窗口", "f4", "alt", "sure"], ["显示桌面", "d", "cmd"]]],
+  ["系统", [["切换输入法", "space", "cmd", "again"], ["截图工具", "s", "shift cmd"], ["任务管理器", "escape", "ctrl shift"], ["锁定屏幕", "l", "cmd", "sure"]]],
+] : [
   ["常用", [["复制", "c", "cmd"], ["粘贴", "v", "cmd"], ["剪切", "x", "cmd"], ["全选", "a", "cmd"], ["撤销", "z", "cmd", "again"], ["重做", "z", "shift cmd", "again"],
     ["保存", "s", "cmd"], ["查找", "f", "cmd"]]],
   ["窗口与应用", [["切换应用", "tab", "cmd", "again"], ["同应用窗口", "\x60", "cmd", "again"], ["新标签", "t", "cmd"], ["关闭窗口", "w", "cmd"], ["最小化", "m", "cmd"],
@@ -2451,7 +2779,7 @@ function drawMaker() {
 function showMaker(on) {
   if (on) {
     making.clear();
-    making.add("cmd");
+    making.add(windowsHost ? "ctrl" : "cmd");
     makerKey.value = "a";
     naming.value = "";
     drawMaker();
@@ -2761,6 +3089,7 @@ if (!nativePicture && query.get("measure")) meter = (() => {
 resetTyping();
 refresh();
 wake();
+session.visibility(document.hidden);
 if (nativePicture) {
   window.linkshellNative = {
     picture: (size) => {
@@ -2776,6 +3105,8 @@ if (nativePicture) {
     stats: (stats) => { nativeStats = stats; },
     connecting: () => {
       nativeStats = null;
+      session.reconnect();
+      waitForCapabilities();
       Object.assign(control, { asked: false, known: false, trusted: false });
       say("正在连接电脑屏幕…");
       if (mode !== "view") askControl();
@@ -2796,13 +3127,13 @@ if (nativePicture) {
 tellApp({ type: "ready", mode });
 `;
 const SCRIPT = `(() => {${VIEWER_LOGIC}${BODY}})();`;
-export function viewerPage() {
+export function viewerPage(platform = "darwin") {
     return `<!doctype html>
 <html><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
 <title>屏幕</title>
 <style>${STYLE}</style></head>
-<body>
+<body data-platform="${platform === "win32" ? "win32" : "darwin"}">
 <div id="stage"><div id="picture"><canvas id="screen"></canvas><canvas id="gpu" class="gone"></canvas><video id="video" class="gone" autoplay playsinline muted></video><div id="pointer"></div></div></div>
 <div id="note">正在连接电脑屏幕…</div>
 <div id="toast" class="glass"></div>
@@ -2845,9 +3176,9 @@ export function viewerPage() {
     <div class="group"><span>添加快捷键</span><span id="makersign"></span></div>
     <div class="tiles" id="makermods">
       <div class="tile" data-mod="ctrl"><b>⌃</b><span>control</span></div>
-      <div class="tile" data-mod="alt"><b>⌥</b><span>option</span></div>
+      <div class="tile" data-mod="alt"><b>${platform === "win32" ? "Alt" : "⌥"}</b><span>${platform === "win32" ? "alt" : "option"}</span></div>
       <div class="tile" data-mod="shift"><b>⇧</b><span>shift</span></div>
-      <div class="tile" data-mod="cmd"><b>⌘</b><span>command</span></div>
+      <div class="tile" data-mod="cmd"><b>${platform === "win32" ? "Win" : "⌘"}</b><span>${platform === "win32" ? "windows" : "command"}</span></div>
     </div>
     <label class="field"><span>按键</span><select id="makerkey" aria-label="按键"></select></label>
     <label class="field"><span>名称</span><input id="makername" type="text" maxlength="16" placeholder="可不填" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" enterkeyhint="done" aria-label="名称"></label>
@@ -2870,8 +3201,8 @@ export function viewerPage() {
   <div class="key word" data-key="escape">esc</div>
   <div class="key word" data-key="tab">tab</div>
   <div class="key" data-mod="ctrl">⌃</div>
-  <div class="key" data-mod="alt">⌥</div>
-  <div class="key" data-mod="cmd">⌘</div>
+  <div class="key" data-mod="alt">${platform === "win32" ? "Alt" : "⌥"}</div>
+  <div class="key" data-mod="cmd">${platform === "win32" ? "Win" : "⌘"}</div>
   <div class="key" data-mod="shift">⇧</div>
   <div class="key" data-key="left">←</div>
   <div class="key" data-key="down">↓</div>