dsh-apk-vm 0.6.1 → 0.6.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.6.2
+
+Sidebar usability.
+
+### Added
+
+- **Expand / restore button** in the VM panel header. It turns the panel into a
+  full-window overlay so a narrow `dsh-better-sidebar` tab can show a large phone screen;
+  press Escape or click the button again to restore the sidebar layout.
+- The overlay hides the APK/debug aside, keeps the H.264 stream and input controls, and
+  reuses the existing canvas/WebSocket session (no second stream).
+
 ## 0.6.1
 
 Network panel completeness.

package/README.md

@@ -8,6 +8,26 @@
 
 **Run a real Android APK inside a local, rooted, open-source Android VM and preview it in the DeepSeek Harness sidebar — streamed as H.264/WebCodecs video at up to 60 fps.**
 
+<p align="center">
+  <a href="docs/screenshot-panel.png">
+    <img src="docs/screenshot-panel.png" alt="APK Virtual Machine panel with a live H.264 Android screen in DeepSeek Harness" width="820">
+  </a>
+</p>
+<p align="center"><sub>Real panel capture: rooted Android 14 guest, live H.264 stream, input controls and installed-app tools — no mockup.</sub></p>
+<p align="center">
+  <code>dsh plugin --profile web add dsh-apk-vm</code>
+  &nbsp;·&nbsp;
+  <a href="examples/README.md">reproducible demo</a>
+</p>
+
+**Why it is useful**
+
+- **Sidebar-first Android** — install and use an APK without opening a separate emulator window.
+- **Real, low-latency stream** — H.264/WebCodecs up to 60 fps with tap, swipe, key and text input.
+- **Agent-native** — `apk_vm` tools, a live UI Inspector, copy-ready selectors and record/replay flows.
+- **Local and inspectable** — open-source AOSP emulator, rooted debug API, network/storage controls, no telemetry.
+- **Expandable viewer** — turn the narrow sidebar panel into a full-window VM with one click; Escape restores it.
+
 This repository contains the static DSH plugin `dsh-apk-vm`. It adds a first-class sidebar
 entry ("APK Virtual Machine" / "APK 虚拟机") whose main panel boots an AOSP Android Emulator,
 installs an APK into the guest, streams the guest display into the panel, and forwards
@@ -24,7 +44,7 @@ same-origin, loopback-only debug HTTP API and an `apk_vm` Agent tool.
 > 当前 **Windows x64 与 Linux x86_64（headless）为端到端已验证平台**；macOS 仅做探测/CI
 > 覆盖，详见 `docs/LINUX-E2E.md`。
 
-**Status:** `0.6.1` · Apache-2.0 · no npm runtime dependencies · no build step.
+**Status:** `0.6.2` · Apache-2.0 · no npm runtime dependencies · no build step.
 
 This is an open-source DSH plugin published on npm as **`dsh-apk-vm`**. Repository:
 [github.com/yuxiaole-bili/dsh-apk-vm](https://github.com/yuxiaole-bili/dsh-apk-vm).

package/client.js

@@ -103,6 +103,8 @@ window.__ModuleLoader__.load({
       'action.installLaunch': 'Install & launch',
       'action.dismiss': 'Dismiss',
       'action.openSidebar': 'Open in side bar',
+      'action.expand': 'Expand',
+      'action.restore': 'Exit expanded',
       'a11y.refresh': 'Refresh VM state',
       'a11y.retry': 'Retry the request',
       'a11y.openSidebar': 'Open the APK VM in dsh-better-sidebar',
@@ -336,6 +338,8 @@ window.__ModuleLoader__.load({
       'action.installLaunch': '安装并启动',
       'action.dismiss': '关闭',
       'action.openSidebar': '在侧栏打开',
+      'action.expand': '放大',
+      'action.restore': '退出放大',
       'a11y.refresh': '刷新虚拟机状态',
       'a11y.retry': '重试请求',
       'a11y.openSidebar': '在 dsh-better-sidebar 中打开 APK 虚拟机',
@@ -1064,7 +1068,17 @@ window.__ModuleLoader__.load({
       '.apkvm-embedded .apkvm-phonewrap{flex:0 0 auto;min-height:320px}' +
       '.apkvm-embedded .apkvm-controls{max-width:none}' +
       '@media (max-width:900px){.apkvm-header{flex-wrap:wrap}}' +
-      '.apkvm-embedded .apkvm-header{flex-wrap:wrap}';
+      '.apkvm-embedded .apkvm-header{flex-wrap:wrap}' +
+      '.apkvm-page.apkvm-maximized{position:fixed;inset:0;z-index:2147483000;width:100vw;height:100vh;background:var(--dsw-alias-bg-base);box-shadow:0 0 0 1px var(--dsw-alias-border-l2)}' +
+      '.apkvm-page.apkvm-maximized .apkvm-header{flex:0 0 auto;background:var(--dsw-alias-bg-base)}' +
+      '.apkvm-page.apkvm-maximized .apkvm-body{flex:1 1 auto;min-height:0;padding:10px 16px 14px;gap:10px;overflow:hidden;flex-direction:row}' +
+      '.apkvm-page.apkvm-maximized .apkvm-aside{display:none}' +
+      '.apkvm-page.apkvm-maximized .apkvm-stage{flex:1 1 auto;min-height:0;max-height:none}' +
+      '.apkvm-page.apkvm-maximized .apkvm-phonewrap{flex:1 1 auto;min-height:0;padding:0}' +
+      '.apkvm-page.apkvm-maximized .apkvm-phone{height:100%;max-height:calc(100vh - 150px);padding:6px;border-radius:22px}' +
+      '.apkvm-page.apkvm-maximized .apkvm-screen{height:100%;max-height:calc(100vh - 170px);border-radius:16px}' +
+      '.apkvm-page.apkvm-maximized .apkvm-controls{max-width:760px}' +
+      '.apkvm-page.apkvm-maximized .apkvm-stagehint{max-width:760px}';
 
     /* ------------------------------------------------------------------ *
      * Render-error boundary: an unexpected exception inside the panel keeps
@@ -1373,6 +1387,10 @@ window.__ModuleLoader__.load({
         var canvasRef = React.useRef(null);
         var decoderRef = React.useRef(null);
         var wsRef = React.useRef(null);
+        var pageRef = React.useRef(null);
+        var maximizedState = React.useState(false);
+        var isMaximized = maximizedState[0];
+        var setIsMaximized = maximizedState[1];
 
         /* ---- derived snapshot values --------------------------------- */
         var vmInfo = snapshot ? snapshot.vm : null;
@@ -1528,6 +1546,21 @@ window.__ModuleLoader__.load({
           if (ready) loadNetwork();
         }, [ready, activeInstance]);
 
+        // Escape leaves the expanded VM view; the expand button is inside the
+        // full-screen overlay too, so mouse-only users are never trapped.
+        React.useEffect(function () {
+          if (!isMaximized || typeof document === 'undefined' || typeof document.addEventListener !== 'function') {
+            return undefined;
+          }
+          function onKeyDown(event) {
+            if (event && event.key === 'Escape') setIsMaximized(false);
+          }
+          document.addEventListener('keydown', onKeyDown);
+          return function () {
+            document.removeEventListener('keydown', onKeyDown);
+          };
+        }, [isMaximized]);
+
         // Track document visibility so the frame stream pauses when hidden.
         React.useEffect(function () {
           if (typeof document === 'undefined' || typeof document.addEventListener !== 'function') {
@@ -4516,6 +4549,17 @@ window.__ModuleLoader__.load({
               (videoMode === 'h264' ? T('fps.mode.h264') : T('fps.mode.png'))
           ),
           primaryAction,
+          actionBtn(T(isMaximized ? 'action.restore' : 'action.expand'), {
+            key: 'maximize',
+            small: true,
+            icon: h('span', { 'aria-hidden': 'true', style: { fontSize: '14px', lineHeight: '14px' } }, isMaximized ? '⛜' : '⛶'),
+            ariaLabel: T(isMaximized ? 'action.restore' : 'action.expand'),
+            onClick: function () {
+              setIsMaximized(function (value) {
+                return !value;
+              });
+            },
+          }),
           !embedded && sidebarService
             ? actionBtn(T('action.openSidebar'), {
                 key: 'open-sidebar',
@@ -4697,7 +4741,8 @@ window.__ModuleLoader__.load({
         return h(
           'div',
           {
-            className: 'apkvm-page' + (embedded ? ' apkvm-embedded' : ''),
+            className: 'apkvm-page' + (embedded ? ' apkvm-embedded' : '') + (isMaximized ? ' apkvm-maximized' : ''),
+            ref: pageRef,
             onDragEnter: onPageDragEnter,
             onDragOver: onPageDragOver,
             onDragLeave: onPageDragLeave,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-apk-vm",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "type": "module",
   "description": "Local AOSP Android VM for DeepSeek Harness: preview rooted APKs at up to 60 fps, automate UIAutomator flows, and give each Agent an isolated VM.",
   "license": "Apache-2.0",