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

package/lib/client.js

@@ -136,9 +136,13 @@ 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); }
+.lc-pausedbar { display: flex; align-items: center; gap: 8px; padding: 5px 12px; background: light-dark(rgba(251,192,45,.16), rgba(251,192,45,.18)); border-bottom: 1px solid rgba(251,192,45,.45); flex: none; font-size: 12px; color: #fbc02d; }
+.lc-pausedbar .lc-btn { padding: 2px 10px; }
+.lc-fab { position: absolute; right: 14px; bottom: 14px; z-index: 4; border: 1px solid rgba(66,133,244,.45); background: light-dark(rgba(66,133,244,.14), rgba(66,133,244,.24)); color: #4285f4; font: inherit; font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.22); }
+.lc-fab:hover { background: light-dark(rgba(66,133,244,.22), rgba(66,133,244,.34)); }
 `;
 		//#endregion
 
@@ -183,6 +187,7 @@ window.__ModuleLoader__.load({
 			const [entries, setEntries] = useState([]);
 			const [connected, setConnected] = useState(false);
 			const [paused, setPaused] = useState(false);
+			const [pendingCount, setPendingCount] = useState(0);
 			const [currentPackage, setCurrentPackage] = useState("");
 			const [pkgInput, setPkgInput] = useState("");
 			const [installingAdb, setInstallingAdb] = useState(false);
@@ -225,6 +230,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 +248,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]);
@@ -293,10 +304,19 @@ window.__ModuleLoader__.load({
 
 			const appendEntries = (incoming) => {
 				const next = entriesRef.current.concat(incoming);
-				if (next.length > 2000) next.splice(0, next.length - 2000);
+				let removed = 0;
+				if (next.length > 5000) { removed = next.length - 5000; next.splice(0, removed); }
 				entriesRef.current = next;
 				setEntries(next);
-				if (autoScrollRef.current) requestAnimationFrame(() => scrollToBottom());
+				if (autoScrollRef.current) {
+					requestAnimationFrame(() => scrollToBottom());
+				} else if (removed > 0) {
+					// Anchor the viewport: trimming old rows shifts array indexes, so
+					// compensate the scroll position to keep what the user is reading
+					// visually in place (no jumping while auto-scroll is off).
+					const body = bodyRef.current;
+					if (body !== null) body.scrollTop = Math.max(0, body.scrollTop - removed * 20);
+				}
 			};
 
 			const applyFrame = (frame) => {
@@ -328,6 +348,7 @@ window.__ModuleLoader__.load({
 					if (pausedRef.current) {
 						pendingRef.current.push(frame);
 						if (pendingRef.current.length > 800) pendingRef.current.splice(0, pendingRef.current.length - 800);
+						setPendingCount(pendingRef.current.length);
 						return;
 					}
 					if (frame.serial !== serialRef.current) return;
@@ -489,10 +510,13 @@ window.__ModuleLoader__.load({
 			const togglePause = () => {
 				const next = !paused;
 				setPaused(next);
-				if (!next && pendingRef.current.length > 0) {
-					const replay = pendingRef.current.filter((f) => f.serial === serialRef.current);
-					pendingRef.current = [];
-					if (replay.length > 0) appendEntries(replay.map((f) => f.entry));
+				if (!next) {
+					setPendingCount(0);
+					if (pendingRef.current.length > 0) {
+						const replay = pendingRef.current.filter((f) => f.serial === serialRef.current);
+						pendingRef.current = [];
+						if (replay.length > 0) appendEntries(replay.map((f) => f.entry));
+					}
 				}
 			};
 
@@ -671,6 +695,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 +757,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 +790,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 +850,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" },
@@ -911,7 +971,7 @@ window.__ModuleLoader__.load({
 						}),
 						h("button", { type: "button", className: "lc-btn", onClick: () => fileInputRef.current?.click(), title: "选择本地 APK 安装到当前设备", disabled: installingApk ? true : undefined }, installingApk ? "安装中…" : "装APK"),
 						h("button", { type: "button", className: "lc-btn", "data-on": paused ? "" : undefined, onClick: togglePause },
-							paused ? "继续" : "暂停"),
+							paused ? "继续(" + pendingCount + ")" : "暂停"),
 						h("button", { type: "button", className: "lc-btn", onClick: clearLog }, "清空"),
 						h("button", { type: "button", className: "lc-btn", onClick: copyLog }, "复制"),
 						h("button", { type: "button", className: "lc-btn", onClick: exportLog }, "导出"),
@@ -944,10 +1004,15 @@ window.__ModuleLoader__.load({
 						h("button", { type: "button", className: "lc-btn", onClick: () => setHistoryNote("") }, "关闭"),
 					)
 					: null,
+				paused && tab === "log" && !eventsOn
+					? h("div", { className: "lc-pausedbar" },
+						h("span", { style: { flex: 1 } }, "⏸ 已暂停 — 新日志缓冲中（" + pendingCount + " 条），列表已冻结"),
+						h("button", { type: "button", className: "lc-btn", onClick: togglePause, title: "恢复实时，回放缓冲日志" }, "继续"),
+					)
+					: null,
 				h("div", { className: "lc-body", ref: bodyRef },
 					tab === "re"
-						? h("div", { className: "lc-re" },
-							h("div", { className: "lc-re-top" },
+						? h("div", { className: "lc-re" },							h("div", { className: "lc-re-top" },
 								h("input", { placeholder: "进程过滤…", value: reFilter, onChange: (e) => setReFilter(e.target.value), onKeyDown: (e) => { if (e.key === "Enter") loadProcesses(); }, style: { width: 120 } }),
 								h("button", { type: "button", className: "lc-btn", onClick: loadProcesses }, "进程"),
 								h("input", { placeholder: "搜索: hello 或 hex:48656c6c6f", value: rePattern, onChange: (e) => setRePattern(e.target.value), onKeyDown: (e) => { if (e.key === "Enter") reSearch(); }, style: { flex: 1, minWidth: 140 } }),
@@ -957,7 +1022,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 +1045,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 +1053,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
@@ -998,6 +1064,9 @@ window.__ModuleLoader__.load({
 							: (filtered.length === 0
 								? h("div", { className: "lc-empty" }, paused ? "已暂停（" + entries.length + " 条已缓冲）" : "暂无日志")
 								: h(VirtualLog, { entries: filtered, scrollTop, onScrollTop: setScrollTop, bodyRef })),
+					tab === "log" && !eventsOn && live && !paused
+						? h("button", { type: "button", className: "lc-fab", onClick: togglePause, title: "暂停：冻结当前视图（新日志进入缓冲）" }, "⏸ 暂停")
+						: null,
 				),
 				crashModal
 					? h("div", { className: "lc-overlay", onClick: () => setCrashModal(false) },

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",
   "type": "module",
   "packageManager": "pnpm@11.22.0",
   "engines": {