@windypro-rourou/dsh-logcat 0.6.6 → 0.7.0

package/lib/client.js

@@ -73,6 +73,87 @@ window.__ModuleLoader__.load({
 .lc-line.lw-E { border-left: 3px solid #ef5350; }
 .lc-line.lw-F { border-left: 3px solid #ab47bc; }
 .lc-screen-img:fullscreen { background: #000; }
+
+/* ---------------------------------------------------------------- v2 look */
+/* Layered surface + tighter rhythm; appended last so it overrides the base. */
+.dsh-logcat-panel {
+  background: light-dark(#fafbfc, #14171c);
+}
+.lc-header {
+  padding: 11px 14px; gap: 10px;
+  background: light-dark(rgba(0,0,0,.025), rgba(255,255,255,.025));
+  border-bottom: 1px solid light-dark(rgba(0,0,0,.09), rgba(255,255,255,.09));
+}
+.lc-title { font-size: 15px; font-weight: 700; letter-spacing: .2px; margin-right: 2px; }
+.lc-version { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: light-dark(rgba(66,133,244,.14), rgba(66,133,244,.2)); color: #4285f4; }
+.lc-close { width: 26px; height: 26px; border-radius: 8px; border: 1px solid light-dark(rgba(0,0,0,.12), rgba(255,255,255,.14)); background: transparent; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
+.lc-close:hover { background: light-dark(rgba(0,0,0,.06), rgba(255,255,255,.1)); }
+.lc-dot.on { animation: lc-pulse 2s ease-in-out infinite; }
+@keyframes lc-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(76,175,80,.55); } 50% { box-shadow: 0 0 0 5px rgba(76,175,80,0); } }
+
+/* chips → soft cards */
+.lc-stats { padding: 7px 14px; gap: 7px; }
+.lc-chip {
+  padding: 3px 9px; border-radius: 9px;
+  background: light-dark(rgba(255,255,255,.9), rgba(255,255,255,.055));
+  border: 1px solid light-dark(rgba(0,0,0,.07), rgba(255,255,255,.08));
+  box-shadow: 0 1px 2px rgba(0,0,0,.05);
+}
+.lc-chip:hover { border-color: light-dark(rgba(0,0,0,.14), rgba(255,255,255,.16)); }
+
+/* segmented tabs */
+.lc-tabs { padding: 8px 12px 0; gap: 4px; border-bottom: 1px solid light-dark(rgba(0,0,0,.07), rgba(255,255,255,.08)); }
+.lc-tab { border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 600; opacity: .68; transition: background .14s, opacity .14s, color .14s; }
+.lc-tab[data-on] {
+  opacity: 1; color: light-dark(#fff, #fff);
+  background: linear-gradient(135deg, #4285f4, #5b8def);
+  box-shadow: 0 2px 8px rgba(66,133,244,.35);
+}
+.lc-tab[data-on]:hover { background: linear-gradient(135deg, #3b78e0, #4f83e4); }
+
+/* toolbar grouping */
+.lc-toolgroup { display: inline-flex; align-items: center; gap: 4px; }
+.lc-toolsep { width: 1px; height: 18px; margin: 0 3px; background: light-dark(rgba(0,0,0,.12), rgba(255,255,255,.15)); }
+.lc-icobtn { transition: background .12s, border-color .12s, transform .08s; }
+.lc-icobtn:active { transform: scale(.93); }
+.lc-btn:active, .lc-key:active { transform: scale(.96); }
+
+/* live screen: device-like framing, badge, tap ripple */
+.lc-screen-img {
+  background: radial-gradient(120% 90% at 50% 0%, light-dark(#eef1f6, #1b2027) 0%, light-dark(#e4e8ef, #0d1014) 100%);
+  padding: 10px;
+}
+.lc-screen-img canvas {
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.06);
+  background: #000;
+}
+.lc-screen-badge {
+  position: absolute; top: 14px; left: 14px; z-index: 3;
+  font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
+  background: rgba(8,10,14,.62); color: #dfe6f2; backdrop-filter: blur(6px);
+  border: 1px solid rgba(255,255,255,.12); pointer-events: none;
+}
+.lc-screen-badge.warn { color: #ffd479; border-color: rgba(251,192,45,.4); }
+.lc-tap-ripple {
+  position: fixed; z-index: 4; width: 30px; height: 30px; margin: -15px 0 0 -15px;
+  border-radius: 50%; background: rgba(66,133,244,.5); pointer-events: none;
+  animation: lc-ripple .42s ease-out forwards;
+}
+@keyframes lc-ripple { from { transform: scale(.35); opacity: .95; } to { transform: scale(1.7); opacity: 0; } }
+
+/* friendlier empty states */
+.lc-empty { flex-direction: column; gap: 10px; text-align: center; padding: 0 24px; }
+.lc-empty-icon { font-size: 30px; opacity: .45; }
+
+/* log line polish */
+.lc-line { transition: background .1s; }
+.lc-line .tag { cursor: pointer; }
+.lc-line .tag:hover { text-decoration: underline; }
+.lc-hit { background: linear-gradient(180deg, rgba(66,133,244,.42), rgba(66,133,244,.28)); border-radius: 3px; padding: 0 1px; }
+
+/* RE workbench headers */
+.lc-re-head { letter-spacing: .2px; background: light-dark(rgba(0,0,0,.025), rgba(255,255,255,.03)); }
 .lc-toolbar { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid light-dark(rgba(0,0,0,.1), rgba(255,255,255,.12)); flex: none; flex-wrap: wrap; }
 .lc-select, .lc-search { 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: 5px 9px; }
 .lc-select:focus, .lc-search:focus { outline: 2px solid rgba(66,133,244,.35); border-color: rgba(66,133,244,.5); }
@@ -190,6 +271,8 @@ window.__ModuleLoader__.load({
 		const API_BASE = "/api/dsh-logcat";
 		const LEVELS = ["V", "D", "I", "W", "E", "F"];
 		const LEVEL_TITLES = { V: "详细", D: "调试", I: "信息", W: "警告", E: "错误", F: "致命" };
+		/** H.264 screen-stream tiers: encoded size → bitrate (bps). */
+		const VIDEO_TIERS = { "360x800": 1200000, "540x1200": 2500000, "720x1600": 4000000, "1080x2400": 6000000 };
 
 		/** The Logcat panel view. */
 		function LogcatPanel({ controller }) {
@@ -253,6 +336,16 @@ window.__ModuleLoader__.load({
 			const [screenFps, setScreenFps] = useState(0);
 			const [screenHasFrame, setScreenHasFrame] = useState(false);
 			const [hostScreenCapable, setHostScreenCapable] = useState(false);
+			// null = unknown (status not fetched yet); false = the running GUI host predates the
+			// H.264 engine, so the video stream cannot work until that process is restarted.
+			const [hostVideoCapable, setHostVideoCapable] = useState(null);
+			// serial -> { width, height, rotation }: the device's current oriented display
+			// geometry, used to translate touch positions out of frame space.
+			const [displays, setDisplays] = useState({});
+			const [screenMode, setScreenMode] = useState(() => { try { return localStorage.getItem("dsh-logcat-screenmode-v2") === "png" ? "png" : "video"; } catch { return "video"; } });
+			const [videoTier, setVideoTier] = useState(() => { try { const t = localStorage.getItem("dsh-logcat-videotier"); return t !== null && VIDEO_TIERS[t] !== undefined ? t : "540x1200"; } catch { return "540x1200"; } });
+			const [videoInfo, setVideoInfo] = useState(null);
+			const [ripples, setRipples] = useState([]);
 			const panelOpen = useSyncExternalStore(controller.subscribe, controller.getSnapshot).panelOpen;
 
 			const wsRef = useRef(null);
@@ -276,6 +369,12 @@ window.__ModuleLoader__.load({
 			const screenDecodingRef = useRef(false);
 			const screenPendingRef = useRef(null);
 			const screenFpsTsRef = useRef([]);
+			const decoderRef = useRef(null);
+			const screenModeRef = useRef(screenMode);
+			const videoTierRef = useRef(videoTier);
+			const videoInfoRef = useRef(null);
+			const videoFallbackTimerRef = useRef(null);
+			videoInfoRef.current = videoInfo;
 
 			useEffect(() => { serialRef.current = serial; }, [serial]);
 			useEffect(() => { pausedRef.current = paused; }, [paused]);
@@ -339,6 +438,22 @@ window.__ModuleLoader__.load({
 				}
 			};
 
+			/**
+			 * Re-assert the live-screen intent. `ready` also arrives after a reconnect, and the host
+			 * may have been restarted in the meantime — without this the panel would sit on a dead
+			 * stream until the user happens to toggle something.
+			 */
+			const reassertStream = () => {
+				const ws = wsRef.current;
+				const target = serialRef.current;
+				if (ws === null || ws.readyState !== WebSocket.OPEN || target === "" || !screenWantRef.current) return;
+				const useVideo = screenModeRef.current === "video" && typeof VideoDecoder !== "undefined";
+				const tier = videoTierRef.current;
+				ws.send(JSON.stringify({ type: "video", serial: target, on: useVideo, size: tier, bitRate: VIDEO_TIERS[tier] ?? 2500000 }));
+				ws.send(JSON.stringify({ type: "screen", serial: target, on: !useVideo }));
+				setScreenOn(true);
+			};
+
 			const applyFrame = (frame) => {
 				if (frame.type === "ready") {
 					setAdbPath(frame.adbPath ?? "");
@@ -351,6 +466,7 @@ window.__ModuleLoader__.load({
 						const first = (frame.devices ?? []).find((d) => d.state === "device");
 						if (first !== undefined) pickSerial(first.serial);
 					}
+					reassertStream();
 				} else if (frame.type === "devices") {
 					setDevices(frame.devices ?? []);
 					devicesRef.current = frame.devices ?? [];
@@ -390,6 +506,19 @@ window.__ModuleLoader__.load({
 					}
 				} else if (frame.type === "crash") {
 					setLastCrash(frame.crash ?? null);
+				} else if (frame.type === "svideo-init") {
+					if (frame.serial === serialRef.current) setupVideoDecoder(frame);
+				} else if (frame.type === "video-state") {
+					if (frame.serial !== serialRef.current) return;
+					if (frame.display !== undefined && frame.display !== null) setDisplays((prev) => ({ ...prev, [frame.serial]: frame.display }));
+					setVideoInfo((prev) => ({
+						...(prev ?? {}),
+						running: frame.running === true,
+						idle: frame.idle === true,
+						size: frame.size ?? prev?.size,
+						bitRate: frame.bitRate ?? prev?.bitRate,
+						error: frame.running === true ? (frame.error ?? prev?.error) : (frame.error ?? prev?.error ?? "视频流已停止"),
+					}));
 				}
 			};
 			applyFrameRef.current = applyFrame;
@@ -447,6 +576,8 @@ window.__ModuleLoader__.load({
 						setStreaming(body.streaming ?? []);
 						setEventsStreaming(body.eventsStreaming ?? []);
 						setHostScreenCapable(body.screenCapable === true);
+						setHostVideoCapable(body.videoCapable === true || Array.isArray(body.videoStreaming));
+						setDisplays(body.displays ?? {});
 						setCurrentPackage(body.currentPackage ?? "");
 						setCurrentVersion(body.currentVersion ?? "");
 						setLatestVersion(body.latestVersion ?? "");
@@ -825,20 +956,109 @@ window.__ModuleLoader__.load({
 				reDumpAt("0x" + addr.toLowerCase(), reDumpLen);
 			};
 
+			// Physical keyboard → device (while the Screen tab is focused and no text field is active).
+			useEffect(() => {
+				if (tab !== "screen" || !panelOpen || serial === "") return undefined;
+				const KEYS = { Enter: 66, Backspace: 67, Escape: 4, Tab: 61, Delete: 112, ArrowUp: 19, ArrowDown: 20, ArrowLeft: 21, ArrowRight: 22, Home: 3 };
+				const onKeyDown = (ev) => {
+					const el = document.activeElement;
+					if (el !== null && (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable === true)) return;
+					if (ev.ctrlKey || ev.metaKey || ev.altKey) return;
+					if (KEYS[ev.key] !== undefined) {
+						ev.preventDefault();
+						fetch(API_BASE + "/keyevent", {
+							method: "POST",
+							headers: { "content-type": "application/json" },
+							body: JSON.stringify({ serial, code: KEYS[ev.key] }),
+						}).catch(() => { /* offline */ });
+						return;
+					}
+					if (ev.key.length === 1) {
+						ev.preventDefault();
+						// Single printable char: ASCII only (use the text box for IME/Chinese input).
+						const ch = ev.key === " " ? "%s" : ev.key.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+						fetch(API_BASE + "/exec", {
+							method: "POST",
+							headers: { "content-type": "application/json" },
+							body: JSON.stringify({ serial, command: `input text "${ch}"` }),
+						}).catch(() => { /* offline */ });
+					}
+				};
+				window.addEventListener("keydown", onKeyDown);
+				return () => window.removeEventListener("keydown", onKeyDown);
+			}, [tab, panelOpen, serial]);
+
+			// Esc closes the panel — except on the Screen tab, where Esc is the device BACK key.
+			useEffect(() => {
+				if (!panelOpen || tab === "screen") return undefined;
+				const onKey = (ev) => {
+					if (ev.key !== "Escape") return;
+					const el = document.activeElement;
+					if (el !== null && (el.tagName === "INPUT" || el.tagName === "TEXTAREA")) {
+						if (typeof el.blur === "function") el.blur();
+						return;
+					}
+					controller.close();
+				};
+				window.addEventListener("keydown", onKey);
+				return () => window.removeEventListener("keydown", onKey);
+			}, [panelOpen, tab]);
+
 			// Live screen stream: on while the 屏幕 tab is open, the panel is open, and a device is selected.
+			// Preferred path is the H.264 stream (30fps+); the PNG screencap path is the fallback.
 			useEffect(() => {
 				const prev = prevSerialRef.current;
 				prevSerialRef.current = serial;
+				screenModeRef.current = screenMode;
+				videoTierRef.current = videoTier;
 				const want = tab === "screen" && serial !== "" && panelOpen;
 				screenWantRef.current = want;
 				const ws = wsRef.current;
+				const useVideo = want && screenMode === "video" && typeof VideoDecoder !== "undefined" && hostVideoCapable !== false;
 				if (ws !== null && ws.readyState === WebSocket.OPEN) {
-					if (prev !== "" && prev !== serial) ws.send(JSON.stringify({ type: "screen", serial: prev, on: false }));
-					ws.send(JSON.stringify({ type: "screen", serial, on: want }));
+					if (prev !== "" && prev !== serial) {
+						ws.send(JSON.stringify({ type: "screen", serial: prev, on: false }));
+						ws.send(JSON.stringify({ type: "video", serial: prev, on: false }));
+					}
+					ws.send(JSON.stringify({ type: "video", serial, on: useVideo, size: videoTier, bitRate: VIDEO_TIERS[videoTier] ?? 2500000 }));
+					ws.send(JSON.stringify({ type: "screen", serial, on: want && !useVideo }));
 				}
 				setScreenOn(want);
-				if (!want) setScreenImg(null);
-			}, [tab, serial, panelOpen]);
+				if (!want) {
+					setScreenHasFrame(false);
+					setVideoInfo(null);
+					closeVideoDecoder();
+				}
+				if (videoFallbackTimerRef.current !== null) { clearTimeout(videoFallbackTimerRef.current); videoFallbackTimerRef.current = null; }
+				if (useVideo) {
+					// If no avcC init arrives in 6s, the device/browser cannot do H.264 → PNG mode.
+					videoFallbackTimerRef.current = setTimeout(() => {
+						videoFallbackTimerRef.current = null;
+						if (videoInfoRef.current?.codec) return;
+						// A stale GUI host simply ignores the `video` request. Do NOT fall back to
+						// PNG mode here and do NOT persist anything: this is a host-version problem,
+						// and it must heal by itself once the host is restarted.
+						if (hostVideoCapable === false) {
+							setVideoInfo({ error: "宿主进程仍是旧版（v" + currentVersion + "），H.264 视频流不可用 —— 重启 GUI 后刷新即恢复" });
+							return;
+						}
+						setVideoInfo({ error: "视频流启动超时，已回退到截图模式" });
+						setScreenMode("png");
+						// Deliberately not persisted: an automatic fallback must never become sticky,
+						// otherwise a transient failure would disable the video path forever.
+					}, 6000);
+				}
+				// Keep the oriented display geometry fresh while the screen tab is open: touch
+				// mapping depends on it and the device can rotate at any moment.
+				if (!want) return;
+				const displayTimer = setInterval(() => {
+					fetch(API_BASE + "/status")
+						.then((res) => res.json())
+						.then((body) => { if (body.displays !== undefined) setDisplays(body.displays); })
+						.catch(() => { /* offline */ });
+				}, 4000);
+				return () => clearInterval(displayTimer);
+			}, [tab, serial, panelOpen, screenMode, videoTier, hostVideoCapable]);
 
 			// Binary WS frames: 4-byte JSON header length + header + PNG payload.
 			// Decoding goes through createImageBitmap into a canvas (no base64
@@ -860,6 +1080,11 @@ window.__ModuleLoader__.load({
 							c2d.drawImage(bmp, 0, 0);
 							bmp.close();
 							setScreenHasFrame(true);
+							const now = performance.now();
+							const ts = screenFpsTsRef.current;
+							ts.push(now);
+							while (ts.length > 0 && now - ts[0] > 1500) ts.shift();
+							setScreenFps(Math.min(Math.round(ts.length / 1.5), 120));
 						} catch { /* undecodable frame — skip */ }
 					}
 				} finally {
@@ -872,14 +1097,14 @@ window.__ModuleLoader__.load({
 					const view = new DataView(buffer);
 					const hlen = view.getUint32(0);
 					const header = JSON.parse(new TextDecoder().decode(new Uint8Array(buffer, 4, hlen)));
-					if (header.type !== "simage" || header.serial !== serialRef.current) return;
+					if (header.serial !== serialRef.current) return;
 					const bytes = new Uint8Array(buffer, 4 + hlen);
-					// 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));
+					if (header.type === "svideo") {
+						decodeVideoFrame(header, bytes);
+						return;
+					}
+					if (header.type !== "simage") return;
+					// PNG fallback path: keep only the newest pending frame.
 					screenPendingRef.current = bytes;
 					void pumpScreenFrame();
 				} catch { /* malformed frame */ }
@@ -887,19 +1112,55 @@ window.__ModuleLoader__.load({
 			handleBinaryRef.current = handleBinary;
 
 			const screenToDevice = (e) => {
-				const img = screenImgRef.current;
-				if (img === null || img.naturalWidth === 0) return null;
-				const imgRect = img.getBoundingClientRect();
-				const x = Math.round(((e.clientX - imgRect.left) / imgRect.width) * img.naturalWidth);
-				const y = Math.round(((e.clientY - imgRect.top) / imgRect.height) * img.naturalHeight);
-				if (x < 0 || y < 0 || x >= img.naturalWidth || y >= img.naturalHeight) return null;
-				return { x, y };
+				const canvas = screenCanvasRef.current;
+				if (canvas === null || canvas.width <= 1) return null;
+				const rect = canvas.getBoundingClientRect();
+				if (rect.width <= 0 || rect.height <= 0) return null;
+				const u = (e.clientX - rect.left) / rect.width;
+				const v = (e.clientY - rect.top) / rect.height;
+				if (u < 0 || u > 1 || v < 0 || v > 1) return null;
+				// Touch coordinates live in the device's CURRENT oriented display space, which is
+				// not the encoded frame space (a landscape device encodes a portrait frame unless
+				// the stream size follows the rotation).
+				const disp = displays[serial];
+				const w = disp !== undefined && disp.width > 0 ? disp.width : canvas.width;
+				const h = disp !== undefined && disp.height > 0 ? disp.height : canvas.height;
+				return { x: Math.round(u * w), y: Math.round(v * h) };
 			};
 
 			const screenMouseDown = (e) => {
+				if (e.button === 2) return; // right-click handled by contextmenu (back key)
 				const pt = screenToDevice(e);
 				if (pt === null) return;
-				screenDragRef.current = { ...pt, clientX: e.clientX, clientY: e.clientY };
+				const now = Date.now();
+				const last = screenDragRef.current;
+				// double-click → two taps
+				if (last !== null && last.tapOnly === true && now - last.endedAt < 320 && Math.abs(last.x - pt.x) < 48 && Math.abs(last.y - pt.y) < 48) {
+					screenDragRef.current = null;
+					tapAt(pt.x, pt.y);
+					tapAt(pt.x, pt.y);
+					return;
+				}
+				showRipple(e);
+				screenDragRef.current = { ...pt, clientX: e.clientX, clientY: e.clientY, startedAt: now, held: false };
+			};
+
+			/** Send a tap at device coordinates. */
+			const tapAt = (x, y) => {
+				fetch(API_BASE + "/exec", {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify({ serial, command: `input tap ${x} ${y}` }),
+				}).catch(() => { /* offline */ });
+			};
+
+			/** Send a swipe (used by drag, wheel and long-press). */
+			const swipeAt = (x1, y1, x2, y2, ms) => {
+				fetch(API_BASE + "/exec", {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify({ serial, command: `input swipe ${x1} ${y1} ${x2} ${y2} ${ms}` }),
+				}).catch(() => { /* offline */ });
 			};
 
 			const screenMouseUp = (e) => {
@@ -911,13 +1172,43 @@ window.__ModuleLoader__.load({
 				const dx = pt.x - drag.x;
 				const dy = pt.y - drag.y;
 				const dist = Math.sqrt(dx * dx + dy * dy);
-				const command = dist < 12
-					? `input tap ${drag.x} ${drag.y}`
-					: `input swipe ${drag.x} ${drag.y} ${pt.x} ${pt.y} 120`;
-				fetch(API_BASE + "/exec", {
+				const heldMs = Date.now() - (drag.startedAt ?? Date.now());
+				if (dist < 24 && heldMs > 620) {
+					// long press: swipe in place
+					swipeAt(drag.x, drag.y, drag.x, drag.y, 800);
+					screenDragRef.current = { x: pt.x, y: pt.y, tapOnly: true, endedAt: Date.now() };
+					return;
+				}
+				if (dist < 24) {
+					tapAt(drag.x, drag.y);
+					screenDragRef.current = { x: pt.x, y: pt.y, tapOnly: true, endedAt: Date.now() };
+					return;
+				}
+				swipeAt(drag.x, drag.y, pt.x, pt.y, 120);
+			};
+
+			/** Mouse wheel over the live screen → vertical swipe (natural scrolling). */
+			const lastWheelRef = { current: 0 };
+			const screenWheel = (e) => {
+				const pt = screenToDevice(e);
+				if (pt === null) return;
+				e.preventDefault();
+				const now = Date.now();
+				if (now - lastWheelRef.current < 220) return;
+				lastWheelRef.current = now;
+				const step = Math.round((e.deltaY > 0 ? 1 : -1) * Math.min(Math.abs(e.deltaY), 420));
+				const disp = displays[serial];
+				const dh = disp !== undefined && disp.height > 0 ? disp.height : 2408;
+				swipeAt(pt.x, pt.y, pt.x, Math.max(4, Math.min(dh - 12, pt.y - step)), 140);
+			};
+
+			/** Right click → Android BACK key. */
+			const screenContextMenu = (e) => {
+				e.preventDefault();
+				fetch(API_BASE + "/keyevent", {
 					method: "POST",
 					headers: { "content-type": "application/json" },
-					body: JSON.stringify({ serial, command }),
+					body: JSON.stringify({ serial, key: "back" }),
 				}).catch(() => { /* offline */ });
 			};
 
@@ -933,6 +1224,18 @@ window.__ModuleLoader__.load({
 				}).catch(() => { /* offline */ });
 			};
 
+			/** Show a short ripple where the user tapped the live screen. */
+			const showRipple = (e) => {
+				const wrap = screenWrapRef.current;
+				if (wrap === null) return;
+				const id = Date.now() + Math.random();
+				// Viewport-fixed: the ripple must sit under the cursor no matter how the canvas is
+				// scaled, letterboxed or rotated inside the wrapper.
+				const ripple = { id, x: e.clientX, y: e.clientY };
+				setRipples((prev) => [...prev.slice(-3), ripple]);
+				setTimeout(() => setRipples((prev) => prev.filter((r) => r.id !== id)), 430);
+			};
+
 			const downloadScreen = () => {
 				const canvas = screenCanvasRef.current;
 				if (canvas === null || canvas.width <= 1) return;
@@ -953,27 +1256,92 @@ window.__ModuleLoader__.load({
 				try { el.requestFullscreen?.(); } catch { /* denied */ }
 			};
 
+			// ---- H.264 path (WebCodecs): screenrecord stream → VideoDecoder → canvas ----
+
+			const closeVideoDecoder = () => {
+				const decoder = decoderRef.current;
+				decoderRef.current = null;
+				if (decoder !== null) { try { decoder.close(); } catch { /* already closed */ } }
+			};
+
+			/** Paint one decoded VideoFrame and update the fps readout. */
+			const drawVideoFrame = (frame) => {
+				try {
+					const canvas = screenCanvasRef.current;
+					if (canvas !== null) {
+						if (canvas.width !== frame.displayWidth) canvas.width = frame.displayWidth;
+						if (canvas.height !== frame.displayHeight) canvas.height = frame.displayHeight;
+						const c2d = canvas.getContext("2d");
+						c2d.drawImage(frame, 0, 0, canvas.width, canvas.height);
+						setScreenHasFrame(true);
+						const now = performance.now();
+						const ts = screenFpsTsRef.current;
+						ts.push(now);
+						while (ts.length > 0 && now - ts[0] > 1500) ts.shift();
+						setScreenFps(Math.min(Math.round(ts.length / 1.5), 120));
+					}
+				} finally {
+					try { frame.close(); } catch { /* already closed */ }
+				}
+			};
+
+			/** Configure a fresh VideoDecoder from the host's avcC description. */
+			const setupVideoDecoder = (init) => {
+				closeVideoDecoder();
+				if (typeof VideoDecoder === "undefined") {
+					setVideoInfo((prev) => ({ ...(prev ?? {}), error: "此浏览器不支持 WebCodecs，已回退截图模式" }));
+					return;
+				}
+				try {
+					const raw = atob(init.avcC);
+					const description = new Uint8Array(raw.length);
+					for (let i = 0; i < raw.length; i++) description[i] = raw.charCodeAt(i);
+					const decoder = new VideoDecoder({
+						output: drawVideoFrame,
+						error: (err) => setVideoInfo((prev) => ({ ...(prev ?? {}), error: String(err?.message ?? err) })),
+					});
+					decoder.configure({ codec: init.codec, description, optimizeForLatency: true, hardwareAcceleration: "prefer-hardware" });
+					decoderRef.current = decoder;
+					setVideoInfo((prev) => ({ ...(prev ?? {}), codec: init.codec, size: init.size ?? prev?.size, running: true, error: undefined }));
+				} catch (error) {
+					setVideoInfo((prev) => ({ ...(prev ?? {}), error: String(error?.message ?? error) }));
+					closeVideoDecoder();
+				}
+			};
+
+			/** Feed one AVCC access unit from the host into the decoder. */
+			const decodeVideoFrame = (header, bytes) => {
+				const decoder = decoderRef.current;
+				if (decoder === null || decoder.state !== "configured") return;
+				try {
+					decoder.decode(new EncodedVideoChunk({
+						type: header.key === true ? "key" : "delta",
+						timestamp: (Number(header.ts) || Date.now()) * 1000,
+						data: bytes,
+					}));
+				} catch { /* dropped frame */ }
+			};
+
 			return h("div", { className: "lc-panel" },
 				h("div", { className: "lc-header" },
-					h("button", { type: "button", className: "lc-back", onClick: () => controller.close() },
-						h("span", { "aria-hidden": true }, "‹"),
-						h("span", null, "关闭"),
-					),
 					h("h2", { className: "lc-title" }, "Logcat"),
+					currentVersion !== "" ? h("span", { className: "lc-version" }, "v" + currentVersion) : null,
 					h("span", { className: "lc-dot " + (live ? "on" : connected ? "warn" : "off") }),
-					h("span", { style: { fontSize: 12, color: "var(--lc-dim, #9e9e9e)" } },
-						live ? "实机日志流中" : devices.length === 0 ? "无设备" : connected ? "未选设备" : "未连接"),
+					h("span", { style: { fontSize: 12, color: "var(--lc-dim, #9e9e9e)", flex: "none" } },
+						live ? "流中" : devices.length === 0 ? "无设备" : connected ? "未选设备" : "未连接"),
 					h("select", {
 						className: "lc-select",
 						value: serial,
 						onChange: (e) => pickSerial(e.target.value),
 						title: "选择设备",
+						style: { flex: 1, minWidth: 0 },
 					},
 						devices.length === 0
 							? h("option", { value: "" }, "无设备 — 请连接并开启 USB 调试")
 							: devices.map((d) =>
 								h("option", { key: d.serial, value: d.serial },
 									(d.model !== "" ? d.model + " · " : "") + d.serial + " [" + d.state + "]"))),
+					h("button", { type: "button", className: "lc-close", onClick: () => controller.close(), title: "关闭面板" }, "✕"),
 				),
 				h("div", { className: "lc-stats" },
 					stats?.model
@@ -1155,18 +1523,61 @@ window.__ModuleLoader__.load({
 						: tab === "screen"
 							? 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 ? "投屏中 (~" + 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("span", { className: "lc-dot " + (screenOn ? (videoInfo?.error === undefined && videoInfo?.idle !== true ? "on" : "warn") : "off") }),
+									h("span", { title: videoInfo?.error ?? undefined },
+										hostVideoCapable === false ? "宿主版本过旧"
+											: screenOn
+												? (screenMode === "video"
+													? "流畅 " + screenFps + "fps · " + (videoInfo?.size ?? videoTier)
+													: "高清 " + screenFps + "fps · " + (videoInfo?.size ?? "PNG"))
+												: "投屏未开启"),
+									h("select", {
+										className: "lc-select",
+										value: screenMode,
+										onChange: (e) => { const m = e.target.value; setScreenMode(m); try { localStorage.setItem("dsh-logcat-screenmode-v2", m); } catch { /* private */ } },
+										title: "流畅=H.264 视频流（30fps+）；高清=PNG 截图（静帧清晰）",
+										style: { padding: "2px 6px" },
+									},
+										h("option", { value: "video" }, "流畅"),
+										h("option", { value: "png" }, "高清")),
+									h("select", {
+										className: "lc-select",
+										value: videoTier,
+										onChange: (e) => { const t = e.target.value; setVideoTier(t); try { localStorage.setItem("dsh-logcat-videotier", t); } catch { /* private */ } },
+										title: "投屏分辨率档位（越低越省带宽/CPU）",
+										style: { padding: "2px 6px" },
+									},
+										Object.keys(VIDEO_TIERS).map((t) => h("option", { key: t, value: t }, t))),
+									h("input", { placeholder: "输入文字后回车发送…", value: screenText, onChange: (e) => setScreenText(e.target.value), onKeyDown: (e) => { if (e.key === "Enter") sendScreenText(); }, style: { flex: 1, minWidth: 120 } }),
+									h("button", { type: "button", className: "lc-btn", onClick: () => sendKey("wakeup"), title: "唤醒设备屏幕（等效按电源键点亮）" }, "唤醒"),
 									h("button", { type: "button", className: "lc-btn", onClick: downloadScreen, title: "下载当前帧 PNG" }, "下载"),
 									h("button", { type: "button", className: "lc-btn", onClick: toggleScreenFullscreen, title: "全屏查看（Esc 退出）" }, "⛶"),
-									h("span", { className: "lc-screen-hint" }, "点击=点按 · 拖动=滑动"),
 								),
-								!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 },
-										h("canvas", { ref: screenCanvasRef, alt: "设备屏幕", style: { width: "1080px", height: "2408px" } }),
-										!screenHasFrame ? h("div", { className: "lc-empty" }, "等待画面…（设备连接后自动开始）") : null,
+								hostVideoCapable === false
+									? h("div", { className: "lc-empty" },
+										h("span", { className: "lc-empty-icon" }, "⚠"),
+										h("span", null, "运行中的 GUI 宿主版本过旧 —— 重启 GUI（dsh web）后刷新，投屏才会生效"))
+									: h("div", {
+										className: "lc-screen-img",
+										ref: screenWrapRef,
+										onMouseDown: screenMouseDown,
+										onMouseUp: screenMouseUp,
+										onMouseLeave: screenMouseUp,
+										onWheel: screenWheel,
+										onContextMenu: screenContextMenu,
+									},
+										h("canvas", { ref: screenCanvasRef, width: 540, height: 1200 }),
+										screenOn
+											? h("div", { className: "lc-screen-badge" + (videoInfo?.error !== undefined && videoInfo?.error !== null ? " warn" : videoInfo?.idle === true ? " warn" : "") },
+												(videoInfo?.idle === true ? "设备休眠 · 点「唤醒」" : (screenMode === "video" ? "H.264" : "PNG") + " · " + screenFps + "fps · " + (videoInfo?.size ?? videoTier))
+												+ (videoInfo?.error ? " · " + videoInfo.error : ""))
+											: null,
+										ripples.map((r) => h("span", { key: r.id, className: "lc-tap-ripple", style: { left: r.x, top: r.y } })),
+										!screenHasFrame
+											? h("div", { className: "lc-empty" },
+												h("span", { className: "lc-empty-icon" }, "📱"),
+												h("span", null, devices.length === 0 ? "连接设备并开启 USB 调试后自动开始投屏" : "正在建立投屏流…"))
+											: null,
 									),
 							)
 							: eventsOn
@@ -1174,7 +1585,9 @@ window.__ModuleLoader__.load({
 								? h("div", { className: "lc-empty" }, "events 事件缓冲（已开启流，等待事件…）")
 								: h(VirtualLog, { entries: filteredEvents, scrollTop, onScrollTop: setScrollTop, bodyRef, keyword, onTagClick: addKeyword, onLineDblClick: copyLine, rowDensity }))
 							: (filtered.length === 0
-								? h("div", { className: "lc-empty" }, paused ? "已暂停（" + entries.length + " 条已缓冲）" : (devices.length === 0 ? "连接设备并开启 USB 调试后自动开始…" : "暂无日志"))
+								? h("div", { className: "lc-empty" },
+									h("span", { className: "lc-empty-icon" }, paused ? "⏸" : devices.length === 0 ? "🔌" : "📄"),
+									h("span", null, paused ? "已暂停（" + entries.length + " 条已缓冲）" : (devices.length === 0 ? "连接设备并开启 USB 调试后自动开始…" : "暂无日志")))
 								: h(VirtualLog, { entries: filtered, scrollTop, onScrollTop: setScrollTop, bodyRef, keyword, onTagClick: addKeyword, onLineDblClick: copyLine, rowDensity })),
 					tab === "log" && !eventsOn && live && !paused
 						? h("button", { type: "button", className: "lc-fab", onClick: togglePause, title: "暂停：冻结当前视图（新日志进入缓冲）" }, "⏸ 暂停")