@slack/radar-mcp 1.5.0 → 1.7.0

package/dist/web/public/next/screen.js

@@ -0,0 +1,180 @@
+// Screen overlay: a global right-docked panel mirroring the live device screen, available over
+// ANY tab. OFF by default; opens to a consent gate (the screen shows real DMs/message content).
+// Ported verbatim from the PoC screen.js. Consent is enforced server-side too (/screen/* refuse
+// frames before consent). Mounted as a router SIBLING (not inside the stream root), so it floats
+// over the feed / db / blank views alike.
+import { html } from "./html.js";
+import { useState, useEffect, useRef, useCallback } from "preact/hooks";
+// The MJPEG live stream runs at 20fps (measured sweet spot: 20 beats 12 on both frame
+// rate and jitter; 30/60 add no frames and worsen jitter). The cache-buster ?t pins a
+// fresh connection each time the <img> is (re)wired so a stale frame is never reused.
+const STREAM_FPS = 20;
+function streamSrc() {
+    return "/screen/stream?fps=" + STREAM_FPS + "&t=" + Date.now();
+}
+export function ScreenOverlay({ open, onClose }) {
+    const [caps, setCaps] = useState(null);
+    const [consent, setConsent] = useState(false);
+    const [recording, setRecording] = useState(false);
+    const [hint, setHint] = useState("");
+    const imgRef = useRef(null);
+    // The overlay is a permanent sibling in App (it returns null when closed but never
+    // unmounts), so an unmount-cleanup never fires to stop a recording on close. Track the
+    // live recording flag in a ref so the open-keyed effect below reads the CURRENT value
+    // (not a stale closure) when it tears down.
+    const recordingRef = useRef(false);
+    recordingRef.current = recording;
+    // Download whatever /screen/record/stop returns, then unset recording. Shared by the
+    // explicit stop button and the close-while-recording teardown so both behave identically.
+    const stopAndSave = useCallback(async () => {
+        const r = await (await fetch("/screen/record/stop", { method: "POST" })).json().catch(() => ({}));
+        setRecording(false);
+        if (!r.download)
+            return;
+        try {
+            const blob = await (await fetch(r.download)).blob();
+            const u = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = u;
+            a.download = r.file || "radar-screen.mp4";
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            setTimeout(() => URL.revokeObjectURL(u), 10000);
+        }
+        catch {
+            setHint("recording saved on host: " + (r.file || ""));
+        }
+    }, []);
+    // Stop + save a running recording when the panel closes. Without this, closing the panel
+    // (or toggling ▣ Screen) mid-recording unmounts the <img> and drops the live viewer, but
+    // the server keeps screenrecord + ffmpeg + a growing mp4 alive (removeViewer only cleans
+    // up when there is no recording) with no UI left to stop them. Auto-stopping saves the
+    // clip the user started and lets the server tear the pipeline down.
+    useEffect(() => {
+        if (!open && recordingRef.current)
+            void stopAndSave();
+    }, [open, stopAndSave]);
+    const loadCaps = useCallback(async () => {
+        try {
+            const c = await (await fetch("/screen/caps?refresh=1")).json();
+            setCaps(c);
+            setConsent(!!c.consent);
+        }
+        catch {
+            setCaps(null);
+        }
+    }, []);
+    useEffect(() => {
+        if (open)
+            loadCaps();
+    }, [open, loadCaps]);
+    // wire the live <img> once consent + ffmpeg are present
+    useEffect(() => {
+        if (!open || !consent)
+            return;
+        if (caps && caps.liveCast && imgRef.current) {
+            imgRef.current.src = streamSrc();
+            setHint("capturing first frame (~3s on a foldable)…");
+            const id = setTimeout(() => setHint("live. ▣ Screen again to close."), 3500);
+            return () => clearTimeout(id);
+        }
+    }, [open, consent, caps]);
+    const accept = useCallback(async () => {
+        try {
+            await fetch("/screen/consent", { method: "POST" });
+            setConsent(true);
+        }
+        catch {
+            setHint("consent failed");
+        }
+    }, []);
+    const shot = useCallback(async () => {
+        if (!consent) {
+            setHint("accept the notice first");
+            return;
+        }
+        try {
+            const blob = await (await fetch("/screen/shot?t=" + Date.now())).blob();
+            const u = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = u;
+            a.download = "radar-screen-" + Date.now() + ".png";
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            setTimeout(() => URL.revokeObjectURL(u), 10000);
+        }
+        catch {
+            setHint("screenshot failed");
+        }
+    }, [consent]);
+    const rec = useCallback(async () => {
+        if (!consent || !(caps && caps.liveCast)) {
+            setHint("recording needs ffmpeg + consent");
+            return;
+        }
+        if (!recording) {
+            setRecording(true);
+            await fetch("/screen/record/start", { method: "POST" }).catch(() => { });
+        }
+        else {
+            await stopAndSave();
+            // re-wire the live view: stopping the recording does not drop the stream, but
+            // re-pointing the <img> guarantees a fresh frame after the encoder handoff.
+            if (imgRef.current)
+                imgRef.current.src = streamSrc();
+        }
+    }, [consent, caps, recording, stopAndSave]);
+    const redetect = useCallback(async () => {
+        setHint("re-detecting active panel…");
+        const r = await (await fetch("/screen/redetect")).json().catch(() => ({}));
+        if (consent && caps && caps.liveCast && imgRef.current)
+            imgRef.current.src = streamSrc();
+        setHint("display: " + (r.display || "default"));
+    }, [consent, caps]);
+    if (!open)
+        return null;
+    let body;
+    if (!consent) {
+        body = html `
+      <div class="scconsent">
+        This mirrors the <b>live device screen</b>. It shows whatever is on the phone right now,
+        including open DMs, message content, and notifications. Review what is on screen before
+        sharing it. Frames are not requested until you accept, and the mirror stays on until you
+        restart the dashboard. If you <b>record</b>, the clip is saved to a file on this computer
+        (owner-only, removed when the dashboard restarts).
+        <button class="scaccept" onClick=${accept}>Show the screen</button>
+      </div>
+    `;
+    }
+    else if (caps && caps.liveCast) {
+        body = html `<img id="screenimg" ref=${imgRef} alt="device screen" onError=${() => setHint("stream dropped (device disconnected?). ⟳ to retry.")} />`;
+    }
+    else {
+        const cmd = caps && caps.installHint;
+        body = html `
+      <div class="scinstall">
+        Live mirroring needs <b>ffmpeg</b>, which is not installed.
+        ${cmd
+            ? html `<span> Install it with this command, then reopen this panel:<br /><br /><code>${cmd}</code> <button class="sccopy" onClick=${(e) => { navigator.clipboard?.writeText(cmd); e.currentTarget.textContent = "copied"; }}>copy</button></span>`
+            : html `<span> Install it with your system package manager (for example <code>brew install ffmpeg</code> on macOS, <code>winget install ffmpeg</code> on Windows, or <code>sudo apt install ffmpeg</code> on Debian/Ubuntu), then reopen this panel.</span>`}
+      </div>
+      <div class="scinstall">📷 Screenshot works without ffmpeg — use the button above.</div>
+      ${caps && caps.scrcpy ? html `<div class="scinstall">scrcpy is installed; for a native mirror window run <code>scrcpy</code> in a terminal.</div>` : null}
+    `;
+    }
+    return html `
+    <div id="screenpanel" class="on">
+      <div class="schead">
+        <span class="sctitle">Device screen</span>
+        <button class="scbtn" onClick=${shot} title="Full-resolution screenshot">📷</button>
+        <button class=${"scbtn" + (recording ? " rec" : "")} onClick=${rec} title="Record to mp4">${recording ? "■ stop" : "● rec"}</button>
+        <button class="scbtn" onClick=${redetect} title="Re-detect the active display">⟳</button>
+        <button class="scbtn" onClick=${onClose} title="Close">✕</button>
+      </div>
+      <div id="screenbody">${body}</div>
+      <div id="schint">${hint}</div>
+    </div>
+  `;
+}

package/dist/web/public/next/spec-types.js

@@ -0,0 +1 @@
+export {};