dsh-mobile-flow 0.1.1 → 0.2.0

package/README.md

@@ -17,7 +17,8 @@ On viewports ≤720px (the same breakpoint the official question card uses):
 1. **The composer seat joins the document flow** — input bar and confirmation cards now live at the end of the transcript. Swipe up and they scroll out of view; the transcript becomes full-screen.
 2. **Short conversations still dock to the bottom** — when the transcript is shorter than one screen, the message area stretches so the composer stays flush with the viewport floor, visually identical to the stock behavior. Long conversations get the full-screen treatment.
 3. **Floating controls re-anchor** — the back-to-bottom button and turn navigator no longer reserve height for the sticky seat and sit close to the viewport floor again.
-4. **Edge-to-edge** — the content-layer paddings that keep the transcript, header, input card, and confirmation cards off the screen edges (16–32px per side) collapse to zero, so narrow screens use every pixel. The page shell itself never adds whitespace; the gaps come entirely from these paddings.
+4. **Slim edges** — the content-layer paddings that keep the transcript, header, input card, and confirmation cards well off the screen edges (16–32px per side) shrink to a slim 4px side inset (8px top), reclaiming most of the wasted width without the cramped feel of full-bleed. The page shell itself never adds whitespace; the gaps come entirely from these paddings.
+5. **No auto-focus on session switch** — the stock UI returns focus to the input box on every mount / session switch (a desktop convenience), which pops the on-screen keyboard over half the screen on phones. In narrow viewports the programmatic focus is swallowed; tapping the input box still focuses it normally.
 
 Desktop (wide viewports) is completely unaffected.
 

package/README.zh.md

@@ -17,7 +17,8 @@
 1. **composer 座位回归文档流** —— 输入框和确认卡片位于消息流末尾。上滑时随内容滚出视口，消息全屏可读。
 2. **短会话仍然贴底** —— 消息不足一屏时消息区自动拉伸，输入框保持贴视口底，视觉与官方行为完全一致；长会话则享受全屏阅读。
 3. **浮动控件重新锚定** —— 回到底部按钮、轮次导航不再为吸底座位预留高度，回到贴近视口底的位置。
-4. **全面贴边** —— 消息区、会话头部、输入卡、确认卡片与屏幕边缘之间的内容层 padding（每边 16–32px）全部归零，窄屏充分利用每一像素。页面外壳本身不产生空白，间隙完全来自这些 padding。
+4. **纤细边距** —— 消息区、会话头部、输入卡、确认卡片与屏幕边缘之间的内容层 padding（每边 16–32px）收窄为左右 4px、顶部 8px 的纤细边距，收复大部分被浪费的宽度，又不像完全贴边那样局促。页面外壳本身不产生空白，间隙完全来自这些 padding。
+5. **切会话不自动聚焦** —— 官方在每次挂载/切换会话时把焦点还给输入框（桌面便利设计），手机上会弹出输入法占掉半屏。窄屏时拦截这类程序化聚焦；你主动点输入框时照常聚焦。
 
 桌面端（宽视口）完全不受影响。
 

package/lib/client.js

@@ -45,38 +45,30 @@ window.__ModuleLoader__.load({
       "  [data-conversation-scroll]:not(:has([data-conversation-composer-overlay])) {",
       "    --dsh-composer-height: 0px !important;",
       "  }",
-      "  /* 4) Edge-to-edge: the page shell itself carries no whitespace",
-      "     (html/body margin 0, viewport-fit correct, AppFrame is a full-width",
-      "     grid) — the side gaps come from content-layer paddings, cleared",
-      "     here so narrow screens use every pixel. */",
-      "  /* a) Shared side-clearance variable -> 0: the input card root and the",
-      "     question-card frame reference it via calc(); zeroing collapses",
-      "     their side insets and the composer width axis in one place. */",
+      "  /* 4) Slim edges: the stock content-layer paddings (16-32px per side)",
+      "     waste too much of a narrow screen, while full-bleed zero feels",
+      "     cramped — keep a slim 4px side inset (8px top) instead. The page",
+      "     shell itself never adds whitespace; only these paddings matter. */",
+      "  /* a) Shared side-clearance variable -> 4px: the input card root and",
+      "     the question-card frame reference it via calc(). */",
       "  [data-phase] {",
-      "    --dsh-composer-side-clearance: 0px !important;",
+      "    --dsh-composer-side-clearance: 4px !important;",
       "  }",
-      "  /* b) Transcript scroller (CSS-Modules _scroll class): fixed 16px",
-      "     side pads and 16px top pad -> 0 (the variable above only removes",
-      "     half of the side value; the fixed rest needs a direct hit). */",
+      "  /* b) Transcript scroller (CSS-Modules _scroll class): 32px sides and",
+      "     16px top -> 4px sides / 8px top (the variable above only removes",
+      "     part of the side value; the fixed rest needs a direct hit). */",
       "  [data-conversation-scroll] [class*='_scroll'] {",
-      "    padding: 0 !important;",
+      "    padding: 8px 4px !important;",
       "  }",
       "  /* c) Session header (the _header element inside the session.header",
-      "     slot container): 12px top + 28/20px sides -> 0, title and tabs go",
-      "     flush with the screen edges. */",
+      "     slot container): 12px top + 28/20px sides -> 8px top / 6px sides. */",
       "  [data-slot='conversation.session.header'] > [class*='_header'] {",
-      "    padding: 0 !important;",
+      "    padding: 8px 6px 0 !important;",
       "  }",
-      "  /* d) Input-bar root (_root): bottom 8px -> 0 (sides already zeroed",
-      "     via the variable; the hero container sharing the _root suffix has",
-      "     zero vertical padding already, so this is a no-op there). */",
-      "  [data-composer-seat] [class*='_root'] {",
-      "    padding-bottom: 0 !important;",
-      "  }",
-      "  /* e) Question/approval card frame (_frame): 6px top / 10px bottom",
-      "     plus the side calc -> 0, confirmation cards sit flush too. */",
+      "  /* d) Question/approval card frame (_frame): stock side calc",
+      "     (clearance + 16px) -> 4px; vertical rhythm kept as stock. */",
       "  [data-composer-seat] [class*='_frame'] {",
-      "    padding: 0 !important;",
+      "    padding: 6px 4px 10px !important;",
       "  }",
       "}",
     ].join("\n");
@@ -92,6 +84,60 @@ window.__ModuleLoader__.load({
           tag.remove();
         };
       });
+
+      ctx.effect(function () {
+        return installNoAutoFocus();
+      });
+    }
+
+    /* 5) No auto-focus on session switch (narrow viewports): InputBar's
+       unlock effect focuses the contenteditable on every mount / session
+       switch (packages/client/ui-conversation/.../InputBar.tsx, deps
+       [locked, sessionId, editor]) — a desktop convenience that pops the
+       IME over half the screen on phones. Swallow programmatic focus() on
+       the composer's editable unless the user just tapped it (or is
+       keyboard-navigating); taps reach the box via the normal focus path.
+       Question-card textareas (autoFocus on purpose) are not contenteditable
+       and stay untouched. */
+    function installNoAutoFocus() {
+      if (typeof window.matchMedia !== "function") return function () {};
+      var narrow = window.matchMedia("(max-width: 720px)");
+      var lastPointer = { target: null, time: 0 };
+      var lastKey = 0;
+      var onPointerDown = function (e) {
+        lastPointer.target = e.target;
+        lastPointer.time = Date.now();
+      };
+      var onKeyDown = function () { lastKey = Date.now(); };
+      document.addEventListener("pointerdown", onPointerDown, true);
+      document.addEventListener("keydown", onKeyDown, true);
+
+      function userInitiated(el) {
+        var now = Date.now();
+        if (now - lastKey < 500) return true;
+        if (now - lastPointer.time > 600) return false;
+        var t = lastPointer.target;
+        return t !== null && (t === el || (typeof t.contains === "function" && t.contains(el)));
+      }
+
+      var nativeFocus = HTMLElement.prototype.focus;
+      HTMLElement.prototype.focus = function (opts) {
+        if (
+          narrow.matches &&
+          this.isContentEditable === true &&
+          typeof this.closest === "function" &&
+          this.closest("[data-composer-seat]") !== null &&
+          !userInitiated(this)
+        ) {
+          return; /* swallow programmatic focus on the composer */
+        }
+        return nativeFocus.call(this, opts);
+      };
+      return function () {
+        HTMLElement.prototype.focus = nativeFocus;
+        document.removeEventListener("pointerdown", onPointerDown, true);
+        document.removeEventListener("keydown", onKeyDown, true);
+      };
     }
 
     exports.apply = apply;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-mobile-flow",
-  "version": "0.1.1",
-  "description": "Mobile in-flow composer for the DeepSeek Harness Web UI: on narrow (≤720px) screens the input bar and AI confirmation cards scroll with the page instead of pinning to the viewport floor. Pure client-side CSS overlay.",
+  "version": "0.2.0",
+  "description": "Mobile in-flow composer for the DeepSeek Harness Web UI: on narrow (≤720px) screens the input bar and AI confirmation cards scroll with the page instead of pinning to the viewport floor, edges slim down, and session switches no longer auto-focus the input. Client-side CSS overlay plus a narrow-only focus guard.",
   "license": "MIT",
   "type": "module",
   "main": "lib/index.js",