@windypro-rourou/dsh-logcat 0.5.0-preview.1 → 0.5.0-preview.3

package/lib/client.js

@@ -33,51 +33,64 @@ window.__ModuleLoader__.load({
 [data-dsh-logcat-entry][data-active] { background: rgba(128,128,128,.22); }
 [data-dsh-logcat-entry] .lc-entry-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; }
 [data-dsh-logcat-entry] .lc-entry-label { font-size: 13px; line-height: 1.2; opacity: .92; }
-.dsh-logcat-view { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 94vw); display: flex; flex-direction: column; background: var(--lc-bg, #ffffff); border-left: 1px solid rgba(128,128,128,.3); box-shadow: -10px 0 28px rgba(0,0,0,.18); z-index: 9999; }
+.dsh-logcat-view { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 94vw); z-index: 9999; }
 .dsh-logcat-view[hidden] { display: none !important; }
+.dsh-logcat-panel {
+  position: absolute; inset: 0; display: flex; flex-direction: column;
+  background: light-dark(#ffffff, #171a1f);
+  color: light-dark(#1a1d23, #dfe3ea);
+  border-left: 1px solid light-dark(rgba(0,0,0,.12), rgba(255,255,255,.14));
+  box-shadow: -10px 0 28px rgba(0,0,0,.22);
+}
 .dsh-logcat-resize { position: absolute; left: -6px; top: 0; bottom: 0; width: 12px; cursor: col-resize; z-index: 2; display: flex; align-items: center; justify-content: center; }
-.dsh-logcat-resize::before { content: ""; width: 3px; height: 48px; border-radius: 2px; background: rgba(128,128,128,.35); transition: background .15s, height .15s; }
-.dsh-logcat-resize:hover::before, .dsh-logcat-resize[data-drag]::before { background: rgba(128,128,128,.75); height: 72px; }
-.dsh-logcat-resize:hover, .dsh-logcat-resize[data-drag] { background: rgba(128,128,128,.16); }
+.dsh-logcat-resize::before { content: ""; width: 3px; height: 48px; border-radius: 2px; background: light-dark(rgba(0,0,0,.3), rgba(255,255,255,.35)); transition: background .15s, height .15s; }
+.dsh-logcat-resize:hover::before, .dsh-logcat-resize[data-drag]::before { background: light-dark(rgba(0,0,0,.6), rgba(255,255,255,.75)); height: 72px; }
+.dsh-logcat-resize:hover, .dsh-logcat-resize[data-drag] { background: light-dark(rgba(0,0,0,.08), rgba(255,255,255,.14)); }
 .lc-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; }
-.lc-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(128,128,128,.25); flex: none; }
+.lc-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid light-dark(rgba(0,0,0,.1), rgba(255,255,255,.12)); flex: none; }
 .lc-back { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px; font-size: 13px; }
-.lc-back:hover { background: rgba(128,128,128,.14); }
-.lc-title { font-size: 15px; font-weight: 600; margin: 0; }
+.lc-back:hover { background: light-dark(rgba(0,0,0,.06), rgba(255,255,255,.1)); }
+.lc-title { font-size: 15px; font-weight: 700; margin: 0; letter-spacing: .2px; }
 .lc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
-.lc-dot.on { background: #4caf50; }
+.lc-dot.on { background: #4caf50; box-shadow: 0 0 6px rgba(76,175,80,.6); }
 .lc-dot.off { background: #9e9e9e; }
 .lc-dot.warn { background: #ff9800; }
-.lc-toolbar { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid rgba(128,128,128,.25); flex: none; flex-wrap: wrap; }
-.lc-select, .lc-search { background: rgba(128,128,128,.08); border: 1px solid rgba(128,128,128,.3); border-radius: 6px; color: inherit; font: inherit; font-size: 12px; padding: 4px 8px; }
-.lc-select:focus, .lc-search:focus { outline: 1px solid rgba(128,128,128,.5); }
+.lc-stats { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-bottom: 1px solid light-dark(rgba(0,0,0,.08), rgba(255,255,255,.1)); flex: none; flex-wrap: wrap; font-size: 11px; }
+.lc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: light-dark(rgba(0,0,0,.05), rgba(255,255,255,.08)); border: 1px solid light-dark(rgba(0,0,0,.08), rgba(255,255,255,.1)); color: light-dark(#4a4f58, #b9bec7); white-space: nowrap; }
+.lc-chip b { color: inherit; font-weight: 600; }
+.lc-mem-bar { display: inline-block; width: 44px; height: 5px; border-radius: 3px; background: light-dark(rgba(0,0,0,.12), rgba(255,255,255,.14)); overflow: hidden; vertical-align: middle; }
+.lc-mem-fill { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #4caf50, #fbc02d); }
+.lc-mem-fill.hot { background: linear-gradient(90deg, #fbc02d, #ef5350); }
+.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); }
 .lc-search { flex: 1; min-width: 120px; max-width: 320px; }
-.lc-levels { display: flex; gap: 2px; }
-.lc-level { border: 1px solid transparent; background: transparent; color: inherit; font: inherit; font-size: 12px; font-weight: 600; width: 24px; height: 24px; border-radius: 5px; cursor: pointer; }
-.lc-level:hover { background: rgba(128,128,128,.12); }
-.lc-level[data-on] { background: rgba(128,128,128,.22); border-color: rgba(128,128,128,.4); }
+.lc-levels { display: flex; gap: 2px; background: light-dark(rgba(0,0,0,.04), rgba(255,255,255,.06)); padding: 2px; border-radius: 7px; }
+.lc-level { border: 0; background: transparent; color: inherit; font: inherit; font-size: 12px; font-weight: 600; width: 24px; height: 22px; border-radius: 5px; cursor: pointer; }
+.lc-level:hover { background: light-dark(rgba(0,0,0,.08), rgba(255,255,255,.1)); }
+.lc-level[data-on] { background: light-dark(#fff, #2a2f37); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
 .lc-level.v { color: #9e9e9e; } .lc-level.d { color: #4fc3f7; } .lc-level.i { color: #4caf50; }
 .lc-level.w { color: #fbc02d; } .lc-level.e { color: #ef5350; } .lc-level.f { color: #ab47bc; }
-.lc-btn { border: 1px solid rgba(128,128,128,.3); background: transparent; color: inherit; font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
-.lc-btn:hover { background: rgba(128,128,128,.12); }
-.lc-btn[data-on] { background: rgba(128,128,128,.22); }
+.lc-btn { border: 1px solid light-dark(rgba(0,0,0,.16), rgba(255,255,255,.2)); background: transparent; color: inherit; font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 7px; cursor: pointer; transition: background .12s; }
+.lc-btn:hover { background: light-dark(rgba(0,0,0,.06), rgba(255,255,255,.1)); }
+.lc-btn[data-on] { background: light-dark(rgba(66,133,244,.12), rgba(66,133,244,.22)); border-color: rgba(66,133,244,.45); color: #4285f4; }
 .lc-body { flex: 1; min-height: 0; position: relative; overflow: hidden; }
 .lc-log { position: absolute; inset: 0; overflow: auto; font-family: Consolas, "Cascadia Mono", "Courier New", monospace; font-size: 12px; line-height: 20px; }
 .lc-log-inner { position: relative; }
 .lc-line { position: absolute; left: 0; right: 0; padding: 0 12px; white-space: pre; overflow: hidden; text-overflow: ellipsis; cursor: default; }
-.lc-line:hover { background: rgba(128,128,128,.12); }
-.lc-line .ts { color: var(--lc-dim, #9e9e9e); margin-right: 8px; }
-.lc-line .pid { color: var(--lc-dim, #9e9e9e); margin-right: 6px; }
+.lc-line:hover { background: light-dark(rgba(0,0,0,.05), rgba(255,255,255,.07)); }
+.lc-line .ts { color: light-dark(#9aa0a8, #7c838d); margin-right: 8px; }
+.lc-line .pid { color: light-dark(#9aa0a8, #7c838d); margin-right: 6px; }
 .lc-line .lv { display: inline-block; width: 14px; text-align: center; font-weight: 700; margin-right: 6px; }
 .lc-line .lv.V { color: #9e9e9e; } .lc-line .lv.D { color: #4fc3f7; } .lc-line .lv.I { color: #4caf50; }
 .lc-line .lv.W { color: #fbc02d; } .lc-line .lv.E { color: #ef5350; } .lc-line .lv.F { color: #ab47bc; }
 .lc-line .tag { color: #29b6f6; margin-right: 8px; }
-.lc-line.cont .msg { padding-left: 44px; color: var(--lc-dim, #9e9e9e); }
+.lc-line.cont .msg { padding-left: 44px; color: light-dark(#9aa0a8, #7c838d); }
 .lc-line.crash { background: rgba(239,83,80,.14); box-shadow: inset 2px 0 0 #ef5350; }
 .lc-line.crash .tag { color: #ef5350; font-weight: 700; }
 .lc-line.crash .msg { color: #ef5350; }
-.lc-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--lc-dim, #9e9e9e); font-size: 13px; }
-.lc-status { display: flex; align-items: center; gap: 14px; padding: 4px 12px; border-top: 1px solid rgba(128,128,128,.25); flex: none; font-size: 11px; color: var(--lc-dim, #9e9e9e); }
+.lc-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: light-dark(#9aa0a8, #7c838d); font-size: 13px; }
+.lc-status { display: flex; align-items: center; gap: 14px; padding: 5px 14px; border-top: 1px solid light-dark(rgba(0,0,0,.1), rgba(255,255,255,.12)); flex: none; font-size: 11px; color: light-dark(#6b7078, #9aa0a8); }
 .lc-status b { font-weight: 600; color: inherit; }
 `;
 		//#endregion
@@ -121,6 +134,7 @@ window.__ModuleLoader__.load({
 			const [updateAvailable, setUpdateAvailable] = useState(false);
 			const [updateKind, setUpdateKind] = useState("");
 			const [updateHint, setUpdateHint] = useState("");
+			const [stats, setStats] = useState(null);
 			const [level, setLevel] = useState("");
 			const [keyword, setKeyword] = useState("");
 			const [autoScroll, setAutoScroll] = useState(true);
@@ -270,6 +284,34 @@ window.__ModuleLoader__.load({
 					.catch(() => { /* host not up yet */ });
 			}, []);
 
+			// Live device stats (model / memory / cpu / battery) — refresh every 5s.
+			useEffect(() => {
+				let alive = true;
+				let timer = null;
+				const load = () => {
+					const target = serialRef.current;
+					if (target === "") { setStats(null); return; }
+					fetch(API_BASE + "/stats?serial=" + encodeURIComponent(target))
+						.then((res) => res.json())
+						.then((body) => { if (alive) setStats(body?.ready === true ? body : null); })
+						.catch(() => { /* device offline */ });
+				};
+				load();
+				timer = setInterval(load, 5000);
+				return () => { alive = false; if (timer !== null) clearInterval(timer); };
+			}, [serial]);
+
+			const parseCpu = (line) => {
+				if (!line) return undefined;
+				const m = /([\d.]+)%cpu\s+.*?\s+([\d.]+)%idle/.exec(line);
+				if (m === null) return undefined;
+				const total = Number(m[1]);
+				if (total <= 0) return undefined;
+				return Math.round(((total - Number(m[2])) / total) * 100);
+			};
+			const BATTERY_STATUS = { 1: "未知", 2: "充电中", 3: "放电", 4: "未充电", 5: "已满" };
+			const mb = (kb) => kb !== undefined ? (kb / 1024 / 1024).toFixed(1) : undefined;
+
 			const filtered = useMemo(() => {
 				const needle = keyword.trim().toLowerCase();
 				return entries.filter((e) => {
@@ -391,6 +433,33 @@ window.__ModuleLoader__.load({
 								h("option", { key: d.serial, value: d.serial },
 									(d.model !== "" ? d.model + " · " : "") + d.serial + " [" + d.state + "]"))),
 				),
+				h("div", { className: "lc-stats" },
+					stats?.model
+						? h("span", { className: "lc-chip", title: "设备型号 / 系统版本" },
+							stats.model + (stats.androidVersion ? " · Android " + stats.androidVersion : ""))
+						: null,
+					stats?.resolution
+						? h("span", { className: "lc-chip", title: "屏幕分辨率" }, stats.resolution)
+						: null,
+					stats?.memPct !== undefined
+						? h("span", { className: "lc-chip", title: "内存 " + (mb(stats.usedMemKb) ?? "?") + "G / " + (mb(stats.totalMemKb) ?? "?") + "G" },
+							"内存 ",
+							h("span", { className: "lc-mem-bar" },
+								h("span", {
+									className: "lc-mem-fill" + (stats.memPct > 85 ? " hot" : ""),
+									style: { width: stats.memPct + "%" },
+								})),
+							" " + stats.memPct + "%")
+						: null,
+					parseCpu(stats?.cpu) !== undefined
+						? h("span", { className: "lc-chip", title: "CPU 使用率（采样）" }, "CPU " + parseCpu(stats.cpu) + "%")
+						: null,
+					stats?.batteryLevel !== undefined
+						? h("span", { className: "lc-chip", title: "电量" },
+							"电量 " + stats.batteryLevel + "%" + (BATTERY_STATUS[stats.batteryStatus] !== undefined ? " · " + BATTERY_STATUS[stats.batteryStatus] : ""))
+						: null,
+					stats === null && serial !== "" ? h("span", { className: "lc-chip" }, "正在采集设备状态…") : null,
+				),
 				h("div", { className: "lc-toolbar" },
 					h("div", { className: "lc-levels", role: "group", "aria-label": "日志级别" },
 						h("button", {
@@ -689,6 +758,8 @@ window.__ModuleLoader__.load({
 				root = undefined;
 				container?.remove();
 				handle = undefined;
+				// Wrapper keeps the resize handle OUTSIDE the React root — createRoot clears
+				// the container's children on render, which used to delete the handle.
 				container = document.createElement("div");
 				container.dataset.dshLogcatView = "";
 				container.className = "dsh-logcat-view";
@@ -699,8 +770,11 @@ window.__ModuleLoader__.load({
 				handle.title = "拖拽调整宽度（双击重置）";
 				handle.addEventListener("mousedown", onDown);
 				container.appendChild(handle);
+				const panel = document.createElement("div");
+				panel.className = "dsh-logcat-panel";
+				container.appendChild(panel);
 				document.body.appendChild(container);
-				root = createRoot(container);
+				root = createRoot(panel);
 				root.render(h(LogcatPanel, { controller }));
 			};
 

package/lib/index.js

@@ -543,6 +543,36 @@ function writeJson(res, status, body) {
 /** The one WebSocket server for logcat fan-out. */
 const streamWss = new WebSocketServer({ noServer: true })
 
+/** One-shot device info + resource stats for the panel (single adb round-trip). */
+async function collectStats(engine, serial) {
+  const sh = 'getprop ro.product.model; getprop ro.product.brand; getprop ro.build.version.release; getprop ro.build.version.sdk; getprop ro.product.cpu.abi; wm size; grep -E "MemTotal|MemFree" /proc/meminfo; dumpsys battery | grep -E "level:|status:"; top -b -n 1 | head -3'
+  const result = await runAdbFull(engine.adb, ['-s', serial, 'shell', sh], 20000)
+  const lines = (result.stdout ?? '').split(/\r?\n/).map((s) => s.trim()).filter(Boolean)
+  const get = (i) => lines[i] ?? ''
+  const field = (prefix) => { const l = lines.find((x) => x.startsWith(prefix)); return l ? l.slice(prefix.length).trim() : undefined }
+  const kb = (prefix) => { const v = field(prefix); return v ? Number.parseInt(v, 10) || undefined : undefined }
+  const totalMemKb = kb('MemTotal') ?? 0
+  const freeMemKb = kb('MemFree') ?? 0
+  const usedMemKb = totalMemKb > 0 ? totalMemKb - freeMemKb : 0
+  return {
+    ready: true,
+    serial,
+    model: get(0) || undefined,
+    brand: get(1) || undefined,
+    androidVersion: get(2) || undefined,
+    sdk: get(3) || undefined,
+    abi: get(4) || undefined,
+    resolution: (lines.find((l) => l.startsWith('Physical size')) ?? '').replace('Physical size: ', '') || undefined,
+    totalMemKb,
+    freeMemKb,
+    usedMemKb,
+    memPct: totalMemKb > 0 ? Math.round((usedMemKb / totalMemKb) * 100) : undefined,
+    batteryLevel: kb('level'),
+    batteryStatus: field('status'),
+    cpu: lines.find((l) => /%cpu|Cpu\(s\)|CPU:/i.test(l)) ?? undefined,
+  }
+}
+
 /** Build every /api/dsh-logcat route plus the stream upgrade. */
 function makeRoutes(engine) {
   const routes = [
@@ -636,6 +666,26 @@ function makeRoutes(engine) {
         writeJson(res, 200, { package: pkg })
       },
     },
+    {
+      kind: 'exact',
+      path: API_BASE + '/stats',
+      handler: async (req, res) => {
+        if (!isLoopbackRequest(req)) { writeJson(res, 403, { error: 'forbidden: loopback-only' }); return }
+        if ((req.method ?? 'GET') !== 'GET') { writeJson(res, 405, { error: 'method not allowed' }); return }
+        if (engine.adb === null) { writeJson(res, 200, { ready: false }); return }
+        const url = new URL(req.url ?? '/', 'http://localhost')
+        const requested = url.searchParams.get('serial') ?? ''
+        const serial = requested !== '' && engine.devices.has(requested)
+          ? requested
+          : [...engine.devices.keys()].find((s) => engine.devices.get(s).state === 'device') ?? ''
+        if (serial === '') { writeJson(res, 200, { ready: false }); return }
+        try {
+          writeJson(res, 200, await collectStats(engine, serial))
+        } catch (error) {
+          writeJson(res, 500, { error: error instanceof Error ? error.message : String(error) })
+        }
+      },
+    },
     {
       kind: 'exact',
       path: API_BASE + '/screenshot',

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.5.0-preview.1",
+  "version": "0.5.0-preview.3",
   "type": "module",
   "packageManager": "pnpm@11.22.0",
   "engines": {