@windypro-rourou/dsh-logcat 0.6.6 → 0.8.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); }
@@ -157,6 +238,53 @@ window.__ModuleLoader__.load({
 .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)); }
+/* ---- design pass: token layer + refinements ------------------------------
+   Colours resolve from the DSH design tokens when the host exposes them and
+   fall back to a hand-tuned pair otherwise, so the panel reads native on 0.2
+   and still looks right on older clients. One accent (blue); severity hues are
+   data encoding, not decoration. */
+.lc-panel {
+  --lc-accent: var(--dsw-alias-brand-primary, #3b82f6);
+  --lc-accent-soft: light-dark(rgba(59,130,246,.10), rgba(59,130,246,.20));
+  --lc-raised: var(--dsw-alias-bg-layer-2, light-dark(#f7f8fa, #1c1f26));
+  --lc-fg: var(--dsw-alias-label-primary, light-dark(#16181d, #e6e9ef));
+  --lc-fg-2: var(--dsw-alias-label-secondary, light-dark(#4a4f57, #a8afba));
+  --lc-dim: var(--dsw-alias-label-caption, light-dark(#6b7078, #8b93a0));
+  --lc-border: var(--dsw-alias-border-l2, light-dark(rgba(0,0,0,.10), rgba(255,255,255,.12)));
+  --lc-border-strong: var(--dsw-alias-border-l4, light-dark(rgba(0,0,0,.20), rgba(255,255,255,.22)));
+  --lc-hover: var(--dsw-alias-interactive-bg-hover, light-dark(rgba(0,0,0,.045), rgba(255,255,255,.07)));
+  background: var(--dsw-alias-bg-layer-1, light-dark(#ffffff, #16181d));
+  color: var(--lc-fg);
+  font-family: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+}
+.lc-header { padding: 11px 14px; gap: 9px; border-bottom-color: var(--lc-border); }
+.lc-title { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
+.lc-tabs { gap: 2px; padding: 0 10px; border-bottom-color: var(--lc-border); }
+.lc-tab { font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: 0; box-shadow: none; opacity: .62; transition: opacity .12s ease, color .12s ease; }
+.lc-tab:hover { opacity: .95; background: transparent; }
+.lc-tab[data-on] { opacity: 1; background: transparent; color: var(--lc-accent); box-shadow: inset 0 -2px 0 var(--lc-accent); }
+.lc-chip { background: light-dark(rgba(0,0,0,.035), rgba(255,255,255,.05)); font-variant-numeric: tabular-nums; }
+.lc-icobtn { width: 28px; height: 26px; border-radius: 8px; border-color: transparent; color: var(--lc-fg-2); transition: background .12s ease, color .12s ease, border-color .12s ease; }
+.lc-icobtn:hover { background: var(--lc-hover); color: var(--lc-fg); }
+.lc-icobtn[data-on] { background: var(--lc-accent-soft); border-color: var(--lc-accent); color: var(--lc-accent); }
+.lc-btn { border-color: transparent; border-radius: 8px; color: var(--lc-fg-2); transition: background .12s ease, color .12s ease; }
+.lc-btn:hover { background: var(--lc-hover); color: var(--lc-fg); }
+.lc-btn[data-on] { background: var(--lc-accent-soft); color: var(--lc-accent); }
+.lc-icobtn:focus-visible, .lc-btn:focus-visible, .lc-key:focus-visible, .lc-tab:focus-visible { outline: 2px solid var(--lc-accent); outline-offset: 1px; }
+.lc-key { display: inline-flex; align-items: center; gap: 4px; border-radius: 7px; border-color: transparent; background: light-dark(rgba(0,0,0,.035), rgba(255,255,255,.05)); }
+.lc-key:hover { background: var(--lc-hover); }
+.lc-search, .lc-select { border-radius: 8px; border-color: var(--lc-border); background: var(--lc-raised); transition: border-color .12s ease, background .12s ease; }
+.lc-search:focus, .lc-select:focus { border-color: var(--lc-accent); background: light-dark(#ffffff, #16181d); outline: none; }
+.lc-line { font-family: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace; font-size: 12px; font-variant-numeric: tabular-nums; }
+.lc-line:hover { background: var(--lc-hover); }
+.lc-log.compact .lc-line { font-size: 11px; }
+.lc-status { background: light-dark(rgba(0,0,0,.015), rgba(255,255,255,.022)); font-variant-numeric: tabular-nums; border-top-color: var(--lc-border); }
+.lc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--lc-dim); font-size: 12.5px; text-align: center; }
+.lc-empty-icon { color: light-dark(rgba(0,0,0,.20), rgba(255,255,255,.22)); }
+.lc-overlay { background: light-dark(rgba(15,23,42,.28), rgba(0,0,0,.48)); backdrop-filter: blur(2px); }
+.lc-modal { border-radius: 14px; border-color: var(--lc-border-strong); box-shadow: 0 24px 64px light-dark(rgba(15,23,42,.20), rgba(0,0,0,.55)); }
+.lc-hit { background: var(--lc-accent-soft); }
+.lc-re-head { text-transform: none; letter-spacing: 0; }
 `;
 		//#endregion
 
@@ -190,9 +318,11 @@ 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 }) {
+		function LogcatPanel({ controller, embedded }) {
 			const [adbPath, setAdbPath] = useState("");
 			const [adbReady, setAdbReady] = useState(false);
 			const [devices, setDevices] = useState([]);
@@ -253,6 +383,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 +416,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 +485,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 +513,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 +553,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 +623,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 +1003,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 +1127,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 +1144,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 +1159,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 +1219,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 +1271,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 +1303,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 + "]"))),
+					embedded === true ? null : h("button", { type: "button", className: "lc-close", onClick: () => controller.close(), title: "关闭面板" }, h(Icon, { name: "close", size: 14 })),
 				),
 				h("div", { className: "lc-stats" },
 					stats?.model
@@ -1052,11 +1467,11 @@ window.__ModuleLoader__.load({
 							style: { maxWidth: 180 },
 						}),
 						h("button", { type: "button", className: "lc-btn", onClick: () => setPackageFilter(pkgInput), title: "按包名过滤日志（agent 侧 logcat_recent 同步生效）" }, "包名"),
-						h("button", { type: "button", className: "lc-icobtn", onClick: takeScreenshot, title: "截取真机屏幕并下载 PNG" }, "📷"),
-						h("button", { type: "button", className: "lc-icobtn", onClick: loadHistory, title: "从磁盘加载历史日志（重启不丢）" }, "🕘"),
-						h("button", { type: "button", className: "lc-icobtn", "data-on": eventsOn ? "" : undefined, onClick: toggleEvents, title: "logcat -b events 事件缓冲（应用启动/崩溃/生命周期）" }, "📑"),
-						h("button", { type: "button", className: "lc-icobtn", onClick: openCrashModal, title: "崩溃自动快照历史（截图+上下文）" }, "💥"),
-						h("button", { type: "button", className: "lc-icobtn", onClick: () => setWifiOpen(true), title: "WiFi 无线调试（adb pair + connect）" }, "📶"),
+						h("button", { type: "button", className: "lc-icobtn", onClick: takeScreenshot, title: "截取真机屏幕并下载 PNG" }, h(Icon, { name: "camera" })),
+						h("button", { type: "button", className: "lc-icobtn", onClick: loadHistory, title: "从磁盘加载历史日志（重启不丢）" }, h(Icon, { name: "history" })),
+						h("button", { type: "button", className: "lc-icobtn", "data-on": eventsOn ? "" : undefined, onClick: toggleEvents, title: "logcat -b events 事件缓冲（应用启动/崩溃/生命周期）" }, h(Icon, { name: "events" })),
+						h("button", { type: "button", className: "lc-icobtn", onClick: openCrashModal, title: "崩溃自动快照历史（截图+上下文）" }, h(Icon, { name: "crash" })),
+						h("button", { type: "button", className: "lc-icobtn", onClick: () => setWifiOpen(true), title: "WiFi 无线调试（adb pair + connect）" }, h(Icon, { name: "wifi" })),
 						h("input", {
 							ref: fileInputRef,
 							type: "file",
@@ -1064,25 +1479,25 @@ window.__ModuleLoader__.load({
 							style: { display: "none" },
 							onChange: (e) => { installApkFile(e.target.files?.[0] ?? null); e.target.value = ""; },
 						}),
-						h("button", { type: "button", className: "lc-icobtn", onClick: () => fileInputRef.current?.click(), title: "选择本地 APK 安装到当前设备", disabled: installingApk ? true : undefined }, "📦"),
+						h("button", { type: "button", className: "lc-icobtn", onClick: () => fileInputRef.current?.click(), title: "选择本地 APK 安装到当前设备", disabled: installingApk ? true : undefined }, h(Icon, { name: "package" })),
 						h("button", { type: "button", className: "lc-icobtn", "data-on": paused ? "" : undefined, onClick: togglePause, title: "暂停冻结视图（新日志缓冲） / 继续回放" },
-							paused ? "▶" : "⏸"),
-						h("button", { type: "button", className: "lc-icobtn", onClick: clearLog, title: "清空当前视图" }, "🗑"),
-						h("button", { type: "button", className: "lc-icobtn", onClick: copyLog, title: "复制过滤后日志" }, "📋"),
-						h("button", { type: "button", className: "lc-icobtn", onClick: exportLog, title: "导出过滤后日志 .txt" }, "⬇"),
+							paused ? h(Icon, { name: "play" }) : h(Icon, { name: "pause" })),
+						h("button", { type: "button", className: "lc-icobtn", onClick: clearLog, title: "清空当前视图" }, h(Icon, { name: "trash" })),
+						h("button", { type: "button", className: "lc-icobtn", onClick: copyLog, title: "复制过滤后日志" }, h(Icon, { name: "copy" })),
+						h("button", { type: "button", className: "lc-icobtn", onClick: exportLog, title: "导出过滤后日志 .txt" }, h(Icon, { name: "download" })),
 						h("button", {
 							type: "button",
 							className: "lc-icobtn",
 							"data-on": autoScroll ? "" : undefined,
 							title: "新日志自动滚到底部",
 							onClick: () => setAutoScroll(!autoScroll),
-						}, "📌"),
+						}, h(Icon, { name: "pin" })),
 					)
 					: null,
 				tab === "log" || tab === "screen"
 					? h("div", { className: "lc-keys" },
-						[["home", "⌂ Home"], ["back", "← 返回"], ["recents", "▦ 最近"], ["wakeup", "☀ 唤醒"], ["power", "⏻ 电源"], ["volume_up", "🔊+"], ["volume_down", "🔉−"]].map(([key, label]) =>
-							h("button", { key, type: "button", className: "lc-key", title: "发送按键 " + key, onClick: () => sendKey(key) }, label)))
+						[["home", "home", "Home"], ["back", "back", "返回"], ["recents", "grid", "最近"], ["wakeup", "sun", "唤醒"], ["power", "power", "电源"], ["volume_up", "volumeUp", ""], ["volume_down", "volumeDown", ""]].map(([key, icon, label]) =>
+							h("button", { key, type: "button", className: "lc-key", title: "发送按键 " + key, onClick: () => sendKey(key) }, h(Icon, { name: icon, size: 14 }), label)))
 					: null,
 				lastCrash !== null
 					? h("div", { className: "lc-crashbar" },
@@ -1101,7 +1516,7 @@ window.__ModuleLoader__.load({
 					: null,
 				paused && tab === "log" && !eventsOn
 					? h("div", { className: "lc-pausedbar" },
-						h("span", { style: { flex: 1 } }, "⏸ 已暂停 — 新日志缓冲中（" + pendingCount + " 条），列表已冻结"),
+						h("span", { style: { flex: 1 } }, h(Icon, { name: "pause", size: 14 }), "已暂停 — 新日志缓冲中（" + pendingCount + " 条），列表已冻结"),
 						h("button", { type: "button", className: "lc-btn", onClick: togglePause, title: "恢复实时，回放缓冲日志" }, "继续"),
 					)
 					: null,
@@ -1155,18 +1570,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" }, "点击=点按 · 拖动=滑动"),
+									h("button", { type: "button", className: "lc-btn", onClick: toggleScreenFullscreen, title: "全屏查看（Esc 退出）" }, h(Icon, { name: "expand", size: 14 })),
 								),
-								!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(Icon, { name: "crash", size: 26 })),
+										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(Icon, { name: "plug", size: 26 })),
+												h("span", null, devices.length === 0 ? "连接设备并开启 USB 调试后自动开始投屏" : "正在建立投屏流…"))
+											: null,
 									),
 							)
 							: eventsOn
@@ -1174,10 +1632,12 @@ 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" }, h(Icon, { name: paused ? "pause" : devices.length === 0 ? "plug" : "file", size: 26 })),
+									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: "暂停：冻结当前视图（新日志进入缓冲）" }, "⏸ 暂停")
+						? h("button", { type: "button", className: "lc-fab", onClick: togglePause, title: "暂停：冻结当前视图（新日志进入缓冲）" }, h(Icon, { name: "pause", size: 14 }), "暂停")
 						: null,
 				),
 				crashModal
@@ -1193,7 +1653,7 @@ window.__ModuleLoader__.load({
 									? h("span", null, "暂无崩溃快照")
 									: crashList.map((c) =>
 										h("div", { key: c.id, className: "lc-crash-item", onClick: () => toggleCrashDetail(c.id) },
-											h("div", { className: "t" }, c.ts + "  [" + c.kind + "]" + (c.hasScreenshot ? "  📷" : "")),
+											h("div", { className: "t" }, c.ts + "  [" + c.kind + "]", c.hasScreenshot ? h(Icon, { name: "camera", size: 12 }) : null),
 											h("div", { className: "s" }, c.summary),
 											crashOpenId === c.id && crashDetail !== null
 												? h("div", { className: "lc-crash-detail" },
@@ -1570,6 +2030,91 @@ window.__ModuleLoader__.load({
 		//#endregion
 
 		//#region entry
+		//#region icons
+		/**
+		 * Minimal geometric glyphs on one 24px grid, stroked with currentColor —
+		 * deliberately dependency-free (the client bundle may only require shell
+		 * seeds), so the panel ships its own small, consistent icon set instead of
+		 * emoji or an external icon package.
+		 */
+		const ICONS = {
+			camera: '<path d="M4 8.8h3.2L8.7 6.4h6.6l1.5 2.4H20v9.2H4z"/><circle cx="12" cy="13" r="3.1"/>',
+			history: '<path d="M4.4 12a7.6 7.6 0 1 1 2.2 5.4"/><path d="M4 4.6v3.2h3.2"/><path d="M12 8.4V12l2.6 1.8"/>',
+			events: '<path d="M4 6.5h16M4 12h16M4 17.5h10"/>',
+			crash: '<path d="M12 4 20.5 19H3.5z"/><path d="M12 9.5v4.2"/><path d="M12 16.6h.01"/>',
+			wifi: '<path d="M4 9.2a12 12 0 0 1 16 0"/><path d="M7 12.6a8 8 0 0 1 10 0"/><path d="M10 16a4 4 0 0 1 4 0"/><path d="M12 19h.01"/>',
+			package: '<path d="M12 3.4 20 7.8v8.4L12 20.6 4 16.2V7.8z"/><path d="M4 7.8 12 12l8-4.2"/><path d="M12 12v8.6"/>',
+			pause: '<path d="M9.2 6v12M14.8 6v12"/>',
+			play: '<path d="M8.4 5.4 18.6 12 8.4 18.6z"/>',
+			trash: '<path d="M5 7h14"/><path d="M10 7V5h4v2"/><path d="M6.6 7l1 13h8.8l1-13"/><path d="M10.5 10.5v6M13.5 10.5v6"/>',
+			copy: '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M15 5.5H5.5V15"/>',
+			download: '<path d="M12 4v11"/><path d="M7.6 10.8 12 15.2l4.4-4.4"/><path d="M5 19h14"/>',
+			pin: '<path d="M12 3.6c2.9 0 4.8 2 4.8 4.4 0 2.9-2.4 4.8-3.4 7.6h-2.8C9.6 12.8 7.2 10.9 7.2 8 7.2 5.6 9.1 3.6 12 3.6z"/><path d="M12 15.6V20.4"/>',
+			expand: '<path d="M9.5 4.5H4.5v5"/><path d="M14.5 4.5h5v5"/><path d="M14.5 19.5h5v-5"/><path d="M9.5 19.5h-5v-5"/>',
+			home: '<path d="M4.5 11 12 4.6 19.5 11v8.4h-15z"/><path d="M10 19.4v-4.6h4v4.6"/>',
+			back: '<path d="M14.6 5.6 8.2 12l6.4 6.4"/>',
+			grid: '<rect x="4.5" y="4.5" width="6" height="6" rx="1.4"/><rect x="13.5" y="4.5" width="6" height="6" rx="1.4"/><rect x="4.5" y="13.5" width="6" height="6" rx="1.4"/><rect x="13.5" y="13.5" width="6" height="6" rx="1.4"/>',
+			sun: '<circle cx="12" cy="12" r="4"/><path d="M12 3.4v2.2M12 18.4v2.2M4.6 12H6.8M17.2 12h2.2M6.8 6.8l1.6 1.6M15.6 15.6l1.6 1.6M17.2 6.8l-1.6 1.6M8.4 15.6l-1.6 1.6"/>',
+			power: '<path d="M12 4v8"/><path d="M7.6 7.2a7 7 0 1 0 8.8 0"/>',
+			volumeUp: '<path d="M4.5 9.8h3l4-3v10.4l-4-3h-3z"/><path d="M15 9.6a3.6 3.6 0 0 1 0 4.8"/><path d="M17.6 7.6a6.8 6.8 0 0 1 0 8.8"/>',
+			volumeDown: '<path d="M4.5 9.8h3l4-3v10.4l-4-3h-3z"/><path d="M15 10.4a3 3 0 0 1 0 3.2"/>',
+			plug: '<path d="M9.5 3.6v4.8M14.5 3.6v4.8"/><path d="M6.4 8.4h11.2v2.6a5.6 5.6 0 0 1-11.2 0z"/><path d="M12 16.6v3.8"/>',
+			file: '<path d="M6.6 3.6h7.2l4 4v12.8H6.6z"/><path d="M13.8 3.6v4h4"/><path d="M9.4 12.4h5.2M9.4 15.6h5.2"/>',
+			close: '<path d="M6.4 6.4 17.6 17.6M17.6 6.4 6.4 17.6"/>',
+			search: '<circle cx="11" cy="11" r="5.6"/><path d="M15.2 15.2 19.4 19.4"/>',
+		};
+
+		/** One glyph from the set above, at the requested square edge. */
+		function Icon({ name, size = 16 }) {
+			const body = ICONS[name];
+			if (body === undefined) return null;
+			return h("svg", {
+				width: size,
+				height: size,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 1.7,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": true,
+				dangerouslySetInnerHTML: { __html: body },
+			});
+		}
+		//#endregion
+
+		//#region dsh 0.2 native integration
+		/** The glyph the left sidebar shows for this panel. */
+		function SidebarLogcatIcon({ size = 16 }) {
+			return h(Icon, { name: "file", size: size ?? 16 });
+		}
+
+		/**
+		 * Register the panel as a first-class 0.2 surface: the central `main` panel
+		 * (selected by the sidebar entry id) plus its `sidebar.panellist` row.
+		 * @returns whether the host accepted the native seats synchronously — when
+		 * it did, the legacy drawer is not mounted at all.
+		 */
+		function registerNative(ctx, makePanel) {
+			if (ctx?.slots === undefined || typeof ctx.slots.inject !== "function") return false;
+			let active = false;
+			try {
+				ctx.slots.inject("main", () => {
+					active = true;
+					return ctx.slots.register({ name: "main", key: "logcat" }, makePanel);
+				});
+				ctx.slots.inject("sidebar.panellist", () => ctx.slots.register(
+					{ name: "sidebar.panellist", id: "logcat", order: 100, label: "Logcat" },
+					SidebarLogcatIcon,
+				));
+			} catch (error) {
+				console.warn("[dsh-logcat] native slot registration unavailable:", error);
+				return false;
+			}
+			return active;
+		}
+		//#endregion
+
 		/** Required services (fiber inject waiting — the runtime must be up first). */
 		const inject = ["slots"];
 
@@ -1590,16 +2135,23 @@ window.__ModuleLoader__.load({
 			styleGuard.observe(document.head, { childList: true });
 
 			const controller = new PanelController();
-			const disposers = [];
-			try {
-				disposers.push(mountSidebarEntry(controller));
-				disposers.push(mountPanel(controller));
-			} catch (error) {
-				console.warn("[dsh-logcat] mount failed:", error);
-			}
+			const legacy = [];
+			const mountLegacy = () => {
+				try {
+					legacy.push(mountSidebarEntry(controller));
+					legacy.push(mountPanel(controller));
+				} catch (error) {
+					console.warn("[dsh-logcat] legacy mount failed:", error);
+				}
+			};
+			// dsh 0.2 exposes `main` + `sidebar.panellist`: the panel becomes a native
+			// central surface with its own sidebar row. Clients that do not offer those
+			// seats keep the self-healing sidebar entry and the right-hand drawer.
+			const native = registerNative(ctx, () => h(LogcatPanel, { controller, embedded: true }));
+			if (!native) mountLegacy();
 			ctx.effect(() => () => {
 				styleGuard.disconnect();
-				for (const dispose of disposers.splice(0)) dispose();
+				for (const dispose of legacy.splice(0)) dispose();
 				style.remove();
 			}, "dsh-logcat: ui mounts");
 		}