Mac in the headset: stream Mac windows and screens into the Frame as panels

Frame Control can now show any Mac window, or a whole screen, as its own
SteamVR panel on the Steam Frame (Tools -> Mac in the headset, macOS only).
Place it with the SteamVR dashboard; the laser clicks and scrolls, and the
Mac's own keyboard types.

- mac/frame-mac-view (Swift, no dependencies): ScreenCaptureKit capture per
  window or display, VideoToolbox H.264 with low-latency rate control (JPEG
  fallback), a loopback HTTP/WebSocket server, CGEvent/AX input playback,
  and a display-awake assertion while anyone watches.
- ui/frame_macview.py: starts the agent, runs an ssh -R tunnel with a
  supervisor that reopens it on the same port, and launches a Chromium app
  window per stream on gamescope's :0, tagged with STEAM_GAME for its own panel.
- Frame Control's key never leaves the Mac: viewers get single-use,
  per-source tickets and reconnect keys that Stop revokes.
- ui/mac-view.html: WebCodecs decode, keyframe recovery, pointer/wheel/keys back.
- Bundled in the Mac app build; tests/test_macview.py builds and drives the
  agent on macOS.

Verified on the Frame (build 20260925.6191901) with the test pattern: panel
in about 1.5 s, about 60 fps, Mac-to-window about 11-17 ms, tunnel recovery
in 4 s. Laser input and real window capture still need a person in the headset.

Also commits the other thread's first-party rule (steam-frame skill) and
the first-party options table in docs/streaming.md.

Reviewed by GPT-6 Astra (xhigh, read-only) over six rounds; all findings fixed.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

ui/index.html

@@ -309,6 +309,11 @@
   .game-card .bar > i { display: block; height: 100%; background: var(--action); }
   .f-0 { color: var(--muted); }
   /* ---- Android display ---- */
+  #mvQuality { background: rgba(0,0,0,.28); color: var(--text); border: 1px solid transparent; border-radius: 3px; padding: 4px 6px; font: inherit; font-size: 12px; }
+  .mv-windows { max-height: 420px; overflow-y: auto; }
+  .mv-perm { background: rgba(255,190,60,.08); border: 1px solid rgba(255,190,60,.25); border-radius: 4px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; }
+  .mv-perm .row { margin-top: 8px; }
+  .mv-live { color: var(--green, #7fd67f); font-size: 12px; }
   .disp select { width: 100%; background: rgba(0,0,0,.28); color: var(--text); border: 1px solid transparent; border-radius: 3px;
                  padding: 8px 10px; font: inherit; font-size: 13px; }
   .disp select:focus { outline: none; border-color: var(--blue); }
@@ -642,6 +647,25 @@
         <div><a href="https://framedropvr.com" target="_blank">FrameDrop</a>: sideloader (Windows only for now)</div>
       </div>
     </section>
+
+    <section class="panel" id="macview" hidden>
+      <div class="shelf-head"><h2>Mac in the headset</h2><span class="count" id="mvCount"></span><span class="spacer"></span>
+        <select id="mvQuality" title="Picture quality and bandwidth">
+          <option value="sharp">Sharp</option><option value="balanced" selected>Balanced</option>
+          <option value="light">Light</option><option value="compatible">Compatible (JPEG)</option>
+        </select>
+        <button class="small" id="mvRefresh">Refresh</button></div>
+      <div class="mv-perm" id="mvPerm" hidden></div>
+      <div class="list" id="mvDisplays"></div>
+      <div class="shelf-head" style="margin-top:16px"><h2>Windows</h2><span class="count" id="mvWinCount"></span></div>
+      <div class="list mv-windows" id="mvWindows"><div class="sub">Loading…</div></div>
+      <div class="row" style="margin-top:12px">
+        <button class="small" data-mv="show" data-src="test" data-title="Test pattern">Test pattern</button>
+        <button class="small danger" data-mv="stopall">Stop all</button>
+      </div>
+      <div class="hint">Each window or screen becomes its own panel in the headset. Place it with the SteamVR dashboard
+        (Float in World, Move, Size). Point and click with the laser, scroll with the thumbstick, and type on the Mac's keyboard.</div>
+    </section>
   </div>
   </div>
 </main>
@@ -2107,10 +2131,64 @@ $("shotsRefresh").onclick = loadShots;
 $("shotsSaveNew").onclick = e => saveShots(shots.list.filter(s => !s.saved), e.currentTarget);
 $("shotsFolder").onclick = e => act($("shotsFolder").textContent, () => api("/api/open", { what: "shots" }), e.currentTarget);
 
+// ---- Mac in the headset: windows and displays as panels (ui/frame_macview.py) ----
+let mvSeq = 0;
+function mvRow(src, title, sub, w, h, streaming) {
+  return `<div class="item"><div class="grow"><div class="t">${esc(title)}</div>
+      <div class="s">${esc(sub)}${streaming ? ' · <span class="mv-live">in the headset</span>' : ""}</div></div>
+    ${streaming ? `<button class="small" data-mv="stop" data-src="${esc(src)}">Stop</button>`
+                : `<button class="small action" data-mv="show" data-src="${esc(src)}" data-title="${esc(title)}" data-w="${w}" data-h="${h}">Show</button>`}
+  </div>`;
+}
+async function loadMacView(restart) {
+  const seq = ++mvSeq;
+  let s, err;
+  try { s = await api("/api/macview" + (restart ? "?restart=1" : "")); } catch (e) { err = e; }
+  if (seq !== mvSeq) return;
+  const box = $("macview");
+  if (err) { box.hidden = false; return failed($("mvWindows"), err); }
+  if (!s.available) { box.hidden = true; return; }
+  box.hidden = false;
+  const live = new Set((s.streams || []).map(x => x.src));
+  $("mvCount").textContent = live.size ? `${live.size} showing` : "";
+  const perm = [];
+  if (!s.screen) perm.push(`Frame Control needs <b>Screen Recording</b> permission to show your windows.`);
+  if (!s.accessibility) perm.push(`Allow <b>Accessibility</b> too, so clicks and keys from the headset reach the Mac.`);
+  $("mvPerm").hidden = !perm.length;
+  $("mvPerm").innerHTML = perm.join(" ") + `<div class="row"><button class="small action" data-mv="perm">Allow…</button>
+    <span class="sub">Then press Refresh. macOS may ask you to reopen Frame Control.</span></div>`;
+  $("mvDisplays").innerHTML = (s.displays || []).map(d =>
+    mvRow(d.src, `Whole screen: ${d.name}`, `${d.w}×${d.h}${d.main ? " · main display" : ""}`, d.w, d.h, live.has(d.src))).join("");
+  const wins = s.windows || [];
+  $("mvWinCount").textContent = wins.length ? `${wins.length}` : "";
+  $("mvWindows").innerHTML = !s.screen ? `<div class="sub">Windows appear here once Screen Recording is allowed.</div>`
+    : wins.length ? wins.map(w => mvRow(w.src, w.title || w.app, `${w.title ? w.app + " · " : ""}${w.w}×${w.h}`, w.w, w.h, live.has(w.src))).join("")
+    : `<div class="sub">No windows open on this Mac's current desktop.</div>`;
+}
+$("mvRefresh").onclick = () => loadMacView(true);
+$("macview").onclick = async e => {
+  const b = e.target.closest("[data-mv]"); if (!b) return;
+  const src = b.dataset.src;
+  if (b.dataset.mv === "show") {
+    await act(`Show ${b.dataset.title} in the headset`, async () => {
+      const r = await api("/api/macview", { action: "show", src, quality: $("mvQuality").value,
+                                            w: +b.dataset.w || undefined, h: +b.dataset.h || undefined });
+      return { message: `${b.dataset.title} is a panel in the headset now. Float it with the SteamVR dashboard.`, ...r };
+    }, b);
+  } else if (b.dataset.mv === "stop") {
+    await act("Stop showing it", () => api("/api/macview", { action: "stop", src }), b);
+  } else if (b.dataset.mv === "stopall") {
+    await act("Stop everything in the headset", () => api("/api/macview", { action: "stop" }), b);
+  } else if (b.dataset.mv === "perm") {
+    await act("Ask macOS for permission", () => api("/api/macview", { action: "permissions" }), b);
+  }
+  setTimeout(loadMacView, 800);
+};
+
 // ---- pages: #home, #games, #android, #tools (older section links still work) ----
 const PAGES = ["home", "games", "android", "tools"];
 const SECTION_PAGE = { view: "home", device: "home", shots: "home", library: "games", sideloaded: "games", getgames: "games",
-                       display: "android", transfer: "tools", apps: "tools", power: "tools" };
+                       display: "android", transfer: "tools", apps: "tools", power: "tools", macview: "tools" };
 let page = "home";
 function showPage() {
   const id = location.hash.slice(1);
@@ -2122,6 +2200,7 @@ function showPage() {
   document.title = page === "home" ? "Frame Control" : `${page[0].toUpperCase() + page.slice(1)} · Frame Control`;
   const section = !PAGES.includes(id) && id && $(id);
   if (section) section.scrollIntoView(); else window.scrollTo(0, 0);
+  if (page === "tools") loadMacView();
 }
 window.addEventListener("hashchange", showPage);
 // While a text field has focus, phones hide the bottom tab bar (see body.typing in the CSS).