@windypro-rourou/dsh-logcat 0.6.0-preview.4 → 0.6.0-preview.5

package/lib/client.js

@@ -136,8 +136,8 @@ window.__ModuleLoader__.load({
 .lc-screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
 .lc-screen-bar { display: flex; gap: 6px; padding: 6px 12px; border-bottom: 1px solid light-dark(rgba(0,0,0,.08), rgba(255,255,255,.1)); flex: none; align-items: center; flex-wrap: wrap; font-size: 11px; }
 .lc-screen-bar input { background: light-dark(rgba(0,0,0,.05), rgba(255,255,255,.08)); border: 1px solid light-dark(rgba(0,0,0,.16), rgba(255,255,255,.2)); border-radius: 7px; color: inherit; font: inherit; font-size: 12px; padding: 4px 8px; }
-.lc-screen-img { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; cursor: crosshair; background: light-dark(rgba(0,0,0,.03), rgba(255,255,255,.03)); }
-.lc-screen-img img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
+.lc-screen-img { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; cursor: crosshair; background: light-dark(rgba(0,0,0,.03), rgba(255,255,255,.03)); position: relative; }
+.lc-screen-img img, .lc-screen-img canvas { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
 .lc-screen-hint { color: light-dark(#6b7078, #9aa0a8); }
 `;
 		//#endregion
@@ -225,6 +225,8 @@ window.__ModuleLoader__.load({
 			const [screenImg, setScreenImg] = useState(null);
 			const [screenText, setScreenText] = useState("");
 			const [screenOn, setScreenOn] = useState(false);
+			const [screenFps, setScreenFps] = useState(0);
+			const [screenHasFrame, setScreenHasFrame] = useState(false);
 			const [hostScreenCapable, setHostScreenCapable] = useState(false);
 			const panelOpen = useSyncExternalStore(controller.subscribe, controller.getSnapshot).panelOpen;
 
@@ -241,10 +243,14 @@ window.__ModuleLoader__.load({
 			const fileInputRef = useRef(null);
 			const screenWrapRef = useRef(null);
 			const screenImgRef = useRef(null);
+			const screenCanvasRef = useRef(null);
 			const screenDragRef = useRef(null);
 			const screenWantRef = useRef(false);
 			const handleBinaryRef = useRef(null);
 			const prevSerialRef = useRef(serial);
+			const screenDecodingRef = useRef(false);
+			const screenPendingRef = useRef(null);
+			const screenFpsTsRef = useRef([]);
 
 			useEffect(() => { serialRef.current = serial; }, [serial]);
 			useEffect(() => { pausedRef.current = paused; }, [paused]);
@@ -671,6 +677,11 @@ window.__ModuleLoader__.load({
 					.catch(() => setWifiOut("网络错误"));
 			};
 
+			// RE workbench: auto-load the process list when the tab opens.
+			useEffect(() => {
+				if (tab === "re" && serial !== "") loadProcesses();
+			}, [tab, serial]);
+
 			const loadProcesses = () => {
 				fetch(API_BASE + "/processes?serial=" + encodeURIComponent(serial) + "&filter=" + encodeURIComponent(reFilter))
 					.then((res) => res.json())
@@ -728,6 +739,32 @@ window.__ModuleLoader__.load({
 			}, [tab, serial, panelOpen]);
 
 			// Binary WS frames: 4-byte JSON header length + header + PNG payload.
+			// Decoding goes through createImageBitmap into a canvas (no base64
+			// data-URL churn per frame); only the newest pending frame is kept.
+			const pumpScreenFrame = async () => {
+				if (screenDecodingRef.current) return;
+				screenDecodingRef.current = true;
+				try {
+					while (screenPendingRef.current !== null) {
+						const bytes = screenPendingRef.current;
+						screenPendingRef.current = null;
+						const canvas = screenCanvasRef.current;
+						if (canvas === null) break; // wait until the canvas mounts
+						try {
+							const bmp = await createImageBitmap(new Blob([bytes], { type: "image/png" }));
+							if (canvas.width !== bmp.width) canvas.width = bmp.width;
+							if (canvas.height !== bmp.height) canvas.height = bmp.height;
+							const c2d = canvas.getContext("2d");
+							c2d.drawImage(bmp, 0, 0);
+							bmp.close();
+							setScreenHasFrame(true);
+						} catch { /* undecodable frame — skip */ }
+					}
+				} finally {
+					screenDecodingRef.current = false;
+				}
+			};
+
 			const handleBinary = (buffer) => {
 				try {
 					const view = new DataView(buffer);
@@ -735,12 +772,14 @@ window.__ModuleLoader__.load({
 					const header = JSON.parse(new TextDecoder().decode(new Uint8Array(buffer, 4, hlen)));
 					if (header.type !== "simage" || header.serial !== serialRef.current) return;
 					const bytes = new Uint8Array(buffer, 4 + hlen);
-					let binary = "";
-					const CHUNK = 0x8000;
-					for (let i = 0; i < bytes.length; i += CHUNK) {
-						binary += String.fromCharCode.apply(null, bytes.subarray(i, i + CHUNK));
-					}
-					setScreenImg("data:image/png;base64," + btoa(binary));
+					// Sliding 1.5s window → rough fps readout.
+					const now = performance.now();
+					const ts = screenFpsTsRef.current;
+					ts.push(now);
+					while (ts.length > 0 && now - ts[0] > 1500) ts.shift();
+					setScreenFps(Math.min(ts.length, 10));
+					screenPendingRef.current = bytes;
+					void pumpScreenFrame();
 				} catch { /* malformed frame */ }
 			};
 			handleBinaryRef.current = handleBinary;
@@ -793,13 +832,16 @@ window.__ModuleLoader__.load({
 			};
 
 			const downloadScreen = () => {
-				if (screenImg === null) return;
-				const a = document.createElement("a");
-				a.href = screenImg;
-				a.download = "screen-" + (serial || "device") + "-" + new Date().toISOString().replace(/[:.]/g, "-") + ".png";
-				document.body.appendChild(a);
-				a.click();
-				a.remove();
+				const canvas = screenCanvasRef.current;
+				if (canvas === null || canvas.width <= 1) return;
+				try {
+					const a = document.createElement("a");
+					a.href = canvas.toDataURL("image/png");
+					a.download = "screen-" + (serial || "device") + "-" + new Date().toISOString().replace(/[:.]/g, "-") + ".png";
+					document.body.appendChild(a);
+					a.click();
+					a.remove();
+				} catch { /* empty canvas */ }
 			};
 
 			return h("div", { className: "lc-panel" },
@@ -957,7 +999,9 @@ window.__ModuleLoader__.load({
 								h("div", { className: "lc-re-col" },
 									h("div", { className: "lc-re-head" }, "进程 (" + rePids.length + ")"),
 									h("div", { className: "lc-re-list" },
-										rePids.map((p) =>
+										rePids.length === 0
+											? h("div", { className: "lc-re-row", title: "点击「进程」或等待自动加载" }, "(尚未加载 — 点击「进程」刷新)")
+											: rePids.map((p) =>
 											h("div", { key: p.pid, className: "lc-re-row", "data-on": rePid === p.pid ? "" : undefined, title: (p.user ?? "") + " " + p.name, onClick: () => { setRePid(p.pid); setReResults([]); setReDump(""); setReError(""); } },
 												p.pid + "  " + p.name)))),
 								h("div", { className: "lc-re-col2" },
@@ -978,7 +1022,7 @@ window.__ModuleLoader__.load({
 							? h("div", { className: "lc-screen" },
 								h("div", { className: "lc-screen-bar" },
 									h("span", { className: "lc-dot " + (screenOn && hostScreenCapable ? "on" : "off") }),
-									h("span", null, !hostScreenCapable ? "宿主版本过旧" : (screenOn ? "投屏中 (~1fps)" : "投屏未开启")),
+									h("span", null, !hostScreenCapable ? "宿主版本过旧" : (screenOn ? "投屏中 (~" + screenFps + "fps)" : "投屏未开启")),
 									h("input", { placeholder: "输入文字后回车发送…", value: screenText, onChange: (e) => setScreenText(e.target.value), onKeyDown: (e) => { if (e.key === "Enter") sendScreenText(); }, style: { flex: 1, minWidth: 140 } }),
 									h("button", { type: "button", className: "lc-btn", onClick: downloadScreen, title: "下载当前帧 PNG" }, "下载"),
 									h("span", { className: "lc-screen-hint" }, "点击=点按 · 拖动=滑动"),
@@ -986,9 +1030,8 @@ window.__ModuleLoader__.load({
 								!hostScreenCapable
 									? h("div", { className: "lc-empty" }, "⚠ 运行中的 GUI 宿主版本过旧（0.6.0-preview.1）——请重启 GUI（dsh web）后刷新，投屏功能才会生效")
 									: h("div", { className: "lc-screen-img", ref: screenWrapRef, onMouseDown: screenMouseDown, onMouseUp: screenMouseUp, onMouseLeave: screenMouseUp },
-										screenImg !== null
-											? h("img", { ref: screenImgRef, src: screenImg, alt: "设备屏幕", draggable: false })
-											: h("div", { className: "lc-empty" }, "等待画面…（设备连接后自动开始，1fps）"),
+										h("canvas", { ref: screenCanvasRef, alt: "设备屏幕", style: { width: "1080px", height: "2408px" } }),
+										!screenHasFrame ? h("div", { className: "lc-empty" }, "等待画面…（设备连接后自动开始）") : null,
 									),
 							)
 							: eventsOn

package/lib/index.js

@@ -687,19 +687,21 @@ export class AdbEngine {
     return picked.slice(-lines)
   }
 
-  /** Start / stop the ~1fps screen-stream loop for a device (panel live view). */
+  /** Start / stop the screen-stream loop for a device (panel live view). */
   setScreen(serial, on) {
     const existing = this.screenLoops.get(serial)
     if (on) {
       if (existing === undefined && this.adb !== null && this.devices.get(serial)?.state === 'device') {
-        const loop = { timer: null, busy: false }
+        const loop = { timer: null, busy: false, lastHash: null }
         this.screenLoops.set(serial, loop)
         const tick = () => {
           if (loop.busy || this.screenLoops.get(serial) !== loop) return
           loop.busy = true
-          void this.captureScreenFrame(serial).finally(() => { loop.busy = false })
+          void this.captureScreenFrame(serial, loop).finally(() => { loop.busy = false })
         }
-        loop.timer = setInterval(tick, 1000)
+        // 500ms cadence: screencap itself takes 300-700ms, so the busy flag
+        // throttles naturally; static screens are deduped by content hash.
+        loop.timer = setInterval(tick, 500)
         tick()
       }
     } else if (existing !== undefined) {
@@ -708,11 +710,20 @@ export class AdbEngine {
     }
   }
 
-  /** Capture one frame and broadcast it as a binary WS frame. */
-  async captureScreenFrame(serial) {
+  /** Capture one frame and broadcast it as a binary WS frame (deduped when the picture is unchanged). */
+  async captureScreenFrame(serial, loop) {
     try {
       const png = await runAdbBinary(this.adb, ['-s', serial, 'exec-out', 'screencap', '-p'], 8000)
       if (png.length < 100) return
+      // Cheap content hash (FNV-1a over the full buffer) — skip broadcasts of
+      // identical frames so idle screens cost nothing on the client.
+      let hash = 2166136261
+      for (let i = 0; i < png.length; i++) {
+        hash ^= png[i]
+        hash = Math.imul(hash, 16777619)
+      }
+      if (loop !== undefined && hash === loop.lastHash) return
+      if (loop !== undefined) loop.lastHash = hash
       this.broadcastBinary({ type: 'simage', serial, len: png.length, ts: Date.now() }, png)
     } catch { /* frame dropped */ }
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@windypro-rourou/dsh-logcat",
   "description": "Android Logcat viewer for the dsh web GUI: auto-connects to any adb device in debug mode, live logcat stream with level/keyword filters, pause/clear/export, plus agent tools (logcat_recent). Hot-pluggable — mounted via ~/.dsh/cordis.patch.yml + a profile node_modules copy, no dsh source changes.",
-  "version": "0.6.0-preview.4",
+  "version": "0.6.0-preview.5",
   "type": "module",
   "packageManager": "pnpm@11.22.0",
   "engines": {