@linxin666/dsh-remote-web-ui 0.4.4 → 0.4.5

package/lib/types/lan-bind.js

@@ -49,16 +49,96 @@ function readPatchContent(file) {
         return '';
     return readFileSync(file, 'utf8');
 }
-/** Escape one literal string for embedding into a RegExp pattern. */
-function escapeRegex(text) {
-    return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+/**
+ * Split a block-sequence region into its top-level items. Only a column-0 `-`
+ * starts an item: that is the shape every writer of this file produces - the
+ * managed block itself and the YAML document API's block-style re-emission.
+ * @param region - text between two line boundaries.
+ * @returns the items in source order; text outside them is not returned.
+ */
+function blockItems(region) {
+    const items = [];
+    let start = -1;
+    let offset = 0;
+    for (const line of region.split('\n')) {
+        if (line.startsWith('- ') || line === '-') {
+            if (start !== -1)
+                items.push({ start, end: offset, text: region.slice(start, offset) });
+            start = offset;
+        }
+        offset += line.length + 1;
+    }
+    if (start !== -1)
+        items.push({ start, end: region.length, text: region.slice(start) });
+    return items;
 }
-/** Remove the managed block (and its markers) from patch content. */
+/**
+ * Whether one top-level item is the webserver row this plugin's block owns.
+ * The row id is the whole signal: the markers declare everything inside them
+ * managed, our block always writes `- id: webserver`, and a same-id row later
+ * in the patch replaces this one wholesale anyway - so an id-webserver row
+ * found inside our markers is this plugin's row (a hand-truncated block may
+ * have lost its `name` line).
+ * @param item - one top-level item's text.
+ * @returns true when the item is the managed webserver row.
+ */
+function isManagedWebserverItem(item) {
+    return /^- id:\s*['"]?webserver['"]?[ \t]*(?:\r?\n|$)/.test(item);
+}
+/**
+ * The text between a block's BEGIN and END markers: from the character after
+ * the BEGIN line's terminator to the start of the END marker's line (or to
+ * the end of the content without an END marker).
+ * @param content - the patch file text.
+ * @param begin - index of the BEGIN marker.
+ * @param end - index of the END marker, or -1 when the block is unterminated.
+ * @returns the region's text.
+ */
+function managedRegion(content, begin, end) {
+    const newlineAfterBegin = content.indexOf('\n', begin);
+    const innerStart = newlineAfterBegin === -1 ? content.length : newlineAfterBegin + 1;
+    const endLineStart = end === -1 ? content.length : content.lastIndexOf('\n', end - 1) + 1;
+    return content.slice(innerStart, Math.max(innerStart, endLineStart));
+}
+/**
+ * Remove the managed block (its markers and the webserver row this plugin
+ * wrote) from patch content, keeping every other row.
+ *
+ * The markers travel with the file through writers that append rows through
+ * the YAML document API: the appended rows land at the end of the sequence,
+ * which is BEFORE a trailing END comment, so the region between the markers
+ * can hold rows this plugin never wrote. Deleting the whole region silently
+ * removed the user's model, plugin and remote-control rows on the next rewrite
+ * - the remote-control row carries the LAN toggle itself, so the feature reset
+ * to `undefined` and the phone was locked out again after a restart (DSH
+ * Desktop report, 2026-09-30). Only the managed item is removed here; every
+ * foreign row is kept in place and the fresh block is appended after them (the
+ * same-id row last wins).
+ * @param content - the patch file text.
+ * @returns the text with the markers and the managed row removed.
+ */
 export function stripManagedBlock(content) {
-    const begin = escapeRegex(LAN_BIND_BLOCK_BEGIN);
-    const end = escapeRegex(LAN_BIND_BLOCK_END);
-    const pattern = new RegExp(`\\r?\\n?${begin}[\\s\\S]*?${end}\\r?\\n?`, 'g');
-    return content.replace(pattern, '\n');
+    let text = content;
+    for (;;) {
+        const begin = text.indexOf(LAN_BIND_BLOCK_BEGIN);
+        if (begin === -1)
+            return text;
+        const end = text.indexOf(LAN_BIND_BLOCK_END, begin);
+        const blockStart = text.lastIndexOf('\n', begin - 1) + 1;
+        const newlineAfterEnd = end === -1 ? -1 : text.indexOf('\n', end);
+        const resumeAt = end === -1 ? text.length : (newlineAfterEnd === -1 ? text.length : newlineAfterEnd + 1);
+        const region = managedRegion(text, begin, end);
+        let kept = '';
+        let cursor = 0;
+        for (const item of blockItems(region)) {
+            if (!isManagedWebserverItem(item.text))
+                continue;
+            kept += region.slice(cursor, item.start);
+            cursor = item.end;
+        }
+        kept += region.slice(cursor);
+        text = text.slice(0, blockStart) + kept + text.slice(resumeAt);
+    }
 }
 /**
  * Render the managed block for one bind state. The values are static: the
@@ -149,9 +229,16 @@ export function managedBindOf(content) {
     if (begin === -1)
         return undefined;
     const end = content.indexOf(LAN_BIND_BLOCK_END, begin);
-    const block = end === -1 ? content.slice(begin) : content.slice(begin, end);
-    const hostMatch = /host:\s*'([^']+)'/.exec(block);
-    const portMatch = /port:\s*(\d+)/.exec(block);
+    const region = managedRegion(content, begin, end);
+    // Read the bind out of the managed row itself. A region a YAML writer
+    // displaced holds foreign rows too, and their `host`/`port` keys are not
+    // this block's bind - reading them made the boot re-assert
+    // believe the block was already applied. A region without a recognizable
+    // managed row (hand-edited literals) keeps the historical whole-region read.
+    const items = blockItems(region).filter(item => isManagedWebserverItem(item.text));
+    const scope = items.length > 0 ? items.map(item => item.text).join('') : region;
+    const hostMatch = /host:\s*'([^']+)'/.exec(scope);
+    const portMatch = /port:\s*(\d+)/.exec(scope);
     return {
         host: hostMatch?.[1] ?? '',
         port: portMatch !== null ? Number(portMatch[1]) : undefined,
@@ -169,9 +256,10 @@ export function lanBindState(profile, home = dshHome()) {
  * patch file is preserved; the block is rewritten atomically (unique temp
  * file + rename, so concurrent writers can never rename a half-written
  * file) with the original file's permissions preserved. A hand-truncated
- * unterminated block (BEGIN marker without END, which stripManagedBlock
- * cannot match) is truncated at its BEGIN marker first so the rewrite can
- * never stack a second webserver row onto the orphan.
+ * unterminated block (BEGIN marker without END) is consumed by
+ * stripManagedBlock as well - markers and managed row removed, foreign rows
+ * kept - so the rewrite can never stack a second webserver row onto the
+ * orphan.
  *
  * The written file is always exactly one valid YAML document: a base the
  * plugin manager left in flow style is re-emitted as a block sequence before
@@ -179,9 +267,7 @@ export function lanBindState(profile, home = dshHome()) {
  */
 export function writeLanBind(host, port, profile, home = dshHome()) {
     const file = profilePatchFile(profile, home);
-    const stripped = stripManagedBlock(readPatchContent(file));
-    const orphanBegin = stripped.indexOf(LAN_BIND_BLOCK_BEGIN);
-    const rawBase = (orphanBegin === -1 ? stripped : stripped.slice(0, orphanBegin)).trimEnd();
+    const rawBase = stripManagedBlock(readPatchContent(file)).trimEnd();
     const base = rawBase.replace(/\[\s*\]\s*$/, '').trimEnd();
     const block = managedBlock(host, port);
     const content = mergePatchContent(base, block, file);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linxin666/dsh-remote-web-ui",
   "description": "Scan-to-pair remote access for the dsh web GUI that shares one official interface: a QR beside the settings button pairs phones and PCs into the same Web GUI (a portrait-touch adaptation layer for phones, full desktop on PCs) through one-time tokens and revocable device sessions, with a LAN bind toggle, optional Cloudflare tunnel, and one-click family self-update",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "icon": "icon.svg",
   "type": "module",
   "engines": {
@@ -38,7 +38,7 @@
   "license": "Apache-2.0",
   "dsh": {
     "engines": {
-      "dsh": ">=0.2.0-rc.1"
+      "dsh": ">=0.2.0-rc.2"
     },
     "bundle": {
       "patch": "./cordis.patch.yml"
@@ -61,28 +61,28 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@deepseek-ai/dsh": ">=0.2.0-rc.1",
+    "@deepseek-ai/dsh": ">=0.2.0-rc.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@deepseek-ai/cordis": "^4.0.4",
-    "@deepseek-ai/dsh-agent": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-api-remotes": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-api-session-controller": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-api-workspace-controller": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-connection": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-locale": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-store": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-primitives": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-renderer": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-settings": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-sidebar": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-commands": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-host-webserver": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-invariants": "^0.2.0-rc.1",
-    "@deepseek-ai/dsh-settings": "^0.2.0-rc.1",
+    "@deepseek-ai/dsh-agent": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-api-remotes": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-api-session-controller": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-api-workspace-controller": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-connection": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-locale": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-store": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-renderer": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-settings": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-sidebar": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-commands": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-host-webserver": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-invariants": "^0.2.0-rc.2",
+    "@deepseek-ai/dsh-settings": "^0.2.0-rc.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^22.20.0",

package/src/client/PluginSettingsCard.tsx

@@ -41,6 +41,13 @@ export interface PluginSettingsCardProps<TKey extends string = string> {
   descriptionKey: TKey
   /** Optional rich header description rendered instead of the plain t(descriptionKey) text (the plain text stays as the tooltip). */
   descriptionNode?: ReactNode
+  /**
+   * Optional leading mark identifying the plugin. A card without one keeps the
+   * plain official header shape, so the chrome stays a readable sibling of the
+   * built-in PluginCard wherever a family plugin lands in the official bundle
+   * seat.
+   */
+  icon?: ReactNode
   /** The card's form state: availability, writability, and what a save would do. */
   state: CardShell
   /** Write every staged edit. */
@@ -91,6 +98,7 @@ export function PluginSettingsCard<TKey extends string = string>(props: PluginSe
   const header = alwaysOpen === true
     ? (
       <div className={css.headerStatic}>
+        {props.icon !== undefined ? <span className={css.mark} aria-hidden="true">{props.icon}</span> : null}
         <span className={css.headText}>
           <span className={css.name} title={title}>{title}</span>
           <span className={css.description} title={description}>{props.descriptionNode ?? description}</span>
@@ -106,6 +114,7 @@ export function PluginSettingsCard<TKey extends string = string>(props: PluginSe
         aria-label={`${props.t(open ? 'settings.collapse' : 'settings.expand')}: ${title}`}
         onClick={() => { setOpen(!open) }}
       >
+        {props.icon !== undefined ? <span className={css.mark} aria-hidden="true">{props.icon}</span> : null}
         <span className={css.headText}>
           <span className={css.name} title={title}>{title}</span>
           <span className={css.description} title={description}>{props.descriptionNode ?? description}</span>

package/src/client/RemoteSettingsCard.tsx

@@ -9,6 +9,7 @@ import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-cli
 import type { ConfigForm } from '@deepseek-ai/dsh-client-ui-settings/client'
 import type { SnapshotStore } from '@deepseek-ai/dsh-client-store'
 import { PluginSettingsCard, ValueField, BooleanField } from './PluginSettingsCard.tsx'
+import { PhoneIcon } from './PhoneIcon.tsx'
 import { CardForm, booleanField, numberField, secretField, textField, type CardActions, type CardShell, type FieldState as CardFieldState } from './settings-form.ts'
 import { LanBindStatusError, readLanBindStatus, shouldStopLanBindPoll, type LanBindFrame } from './pair-api.ts'
 import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
@@ -173,6 +174,7 @@ export function RemoteSettingsCard(props: RemoteSettingsCardProps) {
       t={t}
       titleKey="settings.title"
       descriptionKey="settings.description"
+      icon={<PhoneIcon size={18} />}
       defaultOpen={false}
       state={state}
       onSave={props.save}

package/src/client/index.ts

@@ -242,9 +242,9 @@ export function apply(ctx: ClientContext): void {
 
   const t = ctx.locale.bind(NS)
   // Hand the `remote` translate seat to the module-scope adaptation layer:
-  // the whale/compact-picker labels were rendered with the English fallback
-  // before any dictionary existed; the wiring plus the layer's own sync tick
-  // re-render them in the active locale.
+  // the whale label was rendered with the English fallback before any
+  // dictionary existed; the wiring plus the layer's own sync tick re-renders
+  // it in the active locale.
   if (adapt !== undefined) adapt.translate = t
   // The settings form this card edits. The family group's binder resolves a
   // family namespace to the profile entry that owns it and binds that entry's

package/src/client/locales.ts

@@ -4,8 +4,6 @@
 export const zh = {
   'entry.label': '远程访问',
   'mobile.whale.open': '打开侧边栏',
-  'mobile.composer.pickModel': '选择模型',
-  'mobile.composer.pickEffort': '选择推理等级',
   'title': '远程访问',
   'subtitle': '通过手机或另一台电脑配对，远程使用同一份 Web 界面（官方界面 + 移动端适配）',
   'card.title': '设备配对',
@@ -15,7 +13,7 @@ export const zh = {
   'status.disconnected': '已配对设备离线',
   'status.stopped': '已停止远程访问',
   'status.lanRequired': '此功能需要局域网绑定或公网地址才能使用',
-  'status.lanRequiredHint': '当前服务仅绑定在 127.0.0.1 且未配置公网地址，手机无法访问。请在本插件的设置卡片中打开“局域网访问”（装在全家桶里时在「设置 → Web 插件 → 远程访问设置」，单独安装时在设置 → 插件 → 本插件行），或用 dsh web --host 0.0.0.0 重新启动，或填写内网穿透的公网地址。',
+  'status.lanRequiredHint': '当前服务仅绑定在 127.0.0.1 且未配置公网地址，手机无法访问。请在本插件的设置卡片中打开“局域网访问”（装在全家桶里时在「设置 → Web 插件 → 远程访问」，单独安装时在设置 → 插件 → 本插件行），或用 dsh web --host 0.0.0.0 重新启动，或填写内网穿透的公网地址。',
   'status.loopbackRequired': '配对面板仅限本机使用',
   'status.loopbackRequiredHint': '请通过 http://127.0.0.1 打开此页面后重试；手机请使用配对链接访问。',
   'status.unreachable': '无法连接配对服务',
@@ -72,8 +70,8 @@ export const zh = {
   'relay.failed': '固定域名同步失败：{error}。正在自动重试，期间二维码可能使用临时地址。',
   'close.label': '关闭远程访问面板',
   // 插件设置卡片（家族 list 席位，或官方 plugins.bundle.config 席位）。
-  'settings.title': '远程访问设置',
-  'settings.description': '配对安全与设备限额。',
+  'settings.title': '远程访问',
+  'settings.description': '手机配对、公网隧道与设备限额。',
   'settings.enabled': '启用远程访问',
   'settings.enabledHint': '关闭后移除侧边栏入口并停用配对路由与局域网栅栏。',
   'settings.tokenTtlMs': '配对令牌有效期（毫秒）',
@@ -135,8 +133,6 @@ export type SettingsCardKey = RemoteKey
 export const en = {
   'entry.label': 'Remote access',
   'mobile.whale.open': 'Open sidebar',
-  'mobile.composer.pickModel': 'Pick model',
-  'mobile.composer.pickEffort': 'Pick reasoning effort',
   'title': 'Remote access',
   'subtitle': 'Pair a phone or another computer to share the same Web GUI (official UI + mobile adaptation)',
   'card.title': 'Pair a device',
@@ -203,8 +199,8 @@ export const en = {
   'relay.failed': 'Stable-hostname sync failed: {error}. Retrying automatically; the QR may use the ephemeral address meanwhile.',
   'close.label': 'Close remote access panel',
   // Plugin settings card (the family list seat, or the official bundle-config seat).
-  'settings.title': 'Remote access settings',
-  'settings.description': 'Pairing security and device limits.',
+  'settings.title': 'Remote access',
+  'settings.description': 'Phone pairing, public tunnel and device limits.',
   'settings.enabled': 'Enable remote access',
   'settings.enabledHint': 'When off, the sidebar entry is removed and pairing routes plus the LAN fence stop.',
   'settings.tokenTtlMs': 'Pairing token lifetime (ms)',

package/src/client/mobile-adapt.ts

@@ -32,8 +32,8 @@ export interface RemoteAdaptGlobal {
   closeDetails: (() => void) | null
   /**
    * Wired by the plugin apply once the `remote` locale namespace is bound:
-   * the translate seat the injected surfaces (whale, compact picker) read
-   * their labels from. Null until then; label reads fall back to English
+   * the translate seat the injected surface (the whale) reads its label
+   * from. Null until then; label reads fall back to English
    * (the SDK's universal fallback) and the 600ms sync tick re-renders the
    * labels once the seat is wired.
    */
@@ -67,12 +67,6 @@ const STYLE_SELECTOR = `style[data-plugin-css="${ADAPT_CSS_ID}"]`
 
 /** Whale button id. */
 const WHALE_ID = 'dshRemoteWhale'
-/** Compact picker: synthesized model button id. */
-const MODEL_BTN_ID = 'dshRemoteModelPick'
-/** Compact picker: synthesized effort button id. */
-const EFFORT_BTN_ID = 'dshRemoteEffortPick'
-/** Body class while the compact picker buttons are wired. */
-const COMPACT_CLASS = 'dsh-remote-compact-picker'
 /** Body class while the header actions are seated in the tabs row. */
 const HEADER_SEATED_CLASS = 'dsh-remote-header-seated'
 /**
@@ -81,15 +75,6 @@ const HEADER_SEATED_CLASS = 'dsh-remote-header-seated'
  * reserving the space with padding.
  */
 const HEADER_RESERVE_VAR = '--dsh-remote-header-actions-reserve'
-/** The two composer picker entries the compact buttons drill into. */
-type PickerKind = 'model' | 'effort'
-/** Locale-dependent fast path for the official picker cells (zh/en). */
-const PICKER_CELL_PATTERN: Record<PickerKind, RegExp> = {
-  model: /模型|Model/, // i18n-allow: matches official picker cell text, not plugin copy
-  effort: /推理等级|Reasoning|Effort/i, // i18n-allow: matches official picker cell text, not plugin copy
-}
-/** Position of each drill cell among the sheet's chevron cells. */
-const DRILL_INDEX: Record<PickerKind, number> = { model: 0, effort: 1 }
 /**
  * The official application frame. The layout column classes are the anchor:
  * `_frame` is shared by unrelated official components (the chat turn rail,
@@ -218,26 +203,12 @@ const ADAPT_CSS: readonly string[] = [
   '[class$="_composerSeat"]{transform:none !important}',
   '[class$="_composerSeat"] [class$="_menu"]{position:fixed !important;left:8px !important;right:8px !important;top:auto !important;bottom:calc(8px + env(safe-area-inset-bottom)) !important;width:auto !important;max-width:none !important;max-height:70dvh !important;overflow-y:auto !important;z-index:2147482000}',
   '[class$="_composerSeat"] [class$="_menu"] [class$="_cell"]{height:44px;min-height:44px;font-size:13px}',
-  // v79 (compact picker): when the row is too narrow for the desktop text
-  // triggers, the phone falls back to icon entries — the context ring stays
-  // official, and two synthesized buttons open the picker sheet straight on
-  // the model list and the effort list (drill-through, so one tap lands on
-  // the same list the user's mock shows). The original text trigger hides
-  // only while the wired buttons exist (body class): a failed wiring
-  // degrades back to the usable text trigger instead of no picker.
-  `body.${COMPACT_CLASS} [class$="_composerSeat"] [class$="_trailing"] [class$="_trigger"]:has([class$="_triggerEffort"]){display:none}`,
-  // The icon buttons sit inline in the tools row (parallel to the
-  // permission trigger), so the trailing line collapses to zero and the
-  // context ring + send re-anchor to the row itself. The ring shifts a
-  // few px right: at its desktop offset its hit box kisses the effort
-  // button.
-  `body.${COMPACT_CLASS} [class$="_composerSeat"] [class$="_trailing"]{flex-basis:auto;position:static;min-height:0;padding:0;width:0}`,
-  `body.${COMPACT_CLASS} [class$="_composerSeat"] [class$="_trailing"] > [class$="_root"]:has([class$="_track"]){right:44px}`,
-  `#${MODEL_BTN_ID},#${EFFORT_BTN_ID}{width:26px;height:32px;min-width:26px;padding:0;border-radius:9px;background:var(--dsw-alias-bg-module-platform);border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;margin-left:4px}`,
-
-
-  `#${MODEL_BTN_ID} svg,#${EFFORT_BTN_ID} svg{width:16px;height:16px;display:block}`,
-  `#${MODEL_BTN_ID}:active,#${EFFORT_BTN_ID}:active{opacity:.7}`,
+  // v79's compact picker (two synthesized model/effort icon buttons in the
+  // tools row, the trailing text trigger hidden behind a body class, and the
+  // trailing line collapsed to zero width) was removed at the user's request.
+  // The portrait composer keeps the official text trigger with the trailing
+  // line rules above; the bottom-sheet rules immediately above still apply to
+  // the official menu.
   // Bottom stats line (N rounds / M steps) two sizes below the tabs; v55
   // wraps freely but clamps at two lines (the official rule is nowrap +
   // single-line ellipsis); v60 drops the official 32px right padding.
@@ -311,20 +282,23 @@ const ADAPT_CSS: readonly string[] = [
   // v68: settings modal on mobile — the official panel is a fixed 800px
   // two-column layout (nav + content); switch to a column layout: the
   // section nav becomes a horizontal scrollable row on top.
-  '[class$="_overlay"] [class$="_panel"]{flex-direction:column;max-height:calc(100dvh - 32px)}',
-  '[class$="_overlay"] [class$="_panel"] [class$="_nav"]{flex-direction:row;gap:4px;width:100%;padding:12px 12px 0;overflow-x:auto;overflow-y:hidden}',
-  '[class$="_overlay"] [class$="_panel"] [class$="_navTitle"]{display:none}',
-  '[class$="_overlay"] [class$="_panel"] [class$="_navList"]{flex-direction:row;gap:4px}',
-  '[class$="_overlay"] [class$="_panel"] [class$="_navCell"]{height:34px;padding:0 12px;gap:6px;flex:none;border-radius:10px}',
-  '[class$="_overlay"] [class$="_panel"] [class$="_navLabel"]{font-size:13px}',
-  '[class$="_overlay"] [class$="_panel"] [class$="_content"]{flex:1;min-height:0}',
+  // Scoped to the portrait body class like the suppressions above: these
+  // are the only rules in this array that reshape an official two-column
+  // surface, and the overlay portal is shared with every other dialog.
+  // Unscoped, the tag — which lives in <head> for as long as the layer
+  // is active and is restored by the sync tick after a revert —
+  // collapsed the DESKTOP settings panel into a stacked column (measured
+  // on a real 1440px host: panel flex-direction row -> column, nav 800px
+  // tall -> 236px, content 612px -> 800px wide and pushed below the nav).
+  `body.${ACTIVE_CLASS} [class$="_overlay"] [class$="_panel"]{flex-direction:column;max-height:calc(100dvh - 32px)}`,
+  `body.${ACTIVE_CLASS} [class$="_overlay"] [class$="_panel"] [class$="_nav"]{flex-direction:row;gap:4px;width:100%;padding:12px 12px 0;overflow-x:auto;overflow-y:hidden}`,
+  `body.${ACTIVE_CLASS} [class$="_overlay"] [class$="_panel"] [class$="_navTitle"]{display:none}`,
+  `body.${ACTIVE_CLASS} [class$="_overlay"] [class$="_panel"] [class$="_navList"]{flex-direction:row;gap:4px}`,
+  `body.${ACTIVE_CLASS} [class$="_overlay"] [class$="_panel"] [class$="_navCell"]{height:34px;padding:0 12px;gap:6px;flex:none;border-radius:10px}`,
+  `body.${ACTIVE_CLASS} [class$="_overlay"] [class$="_panel"] [class$="_navLabel"]{font-size:13px}`,
+  `body.${ACTIVE_CLASS} [class$="_overlay"] [class$="_panel"] [class$="_content"]{flex:1;min-height:0}`,
 ]
 
-/** Cube glyph for the compact model button (a plain box outline). */
-const CUBE_ICON = '<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>'
-/** Level glyph for the compact effort button (three rising bars). */
-const LEVELS_ICON = '<path d="M4 6h16"/><path d="M7 12h10"/><path d="M10 18h4"/>'
-
 /** The DeepSeek fish glyph (the official brand mark path). */
 const FISH_PATH = 'M22.9168 1.43018C22.6713 1.31018 22.5658 1.53918 22.4223 1.65519C22.3733 1.69269 22.3318 1.74169 22.2903 1.78669C21.9317 2.1697 21.5127 2.42121 20.9657 2.39121C20.1657 2.34621 19.4827 2.59771 18.8787 3.20973C18.7502 2.45521 18.3236 2.0047 17.6746 1.71569C17.3351 1.56568 16.9916 1.41518 16.7536 1.08867C16.5876 0.856163 16.5421 0.597155 16.4591 0.341647C16.4061 0.187643 16.3536 0.0301382 16.1761 0.00363739C15.9836 -0.0263635 15.9081 0.135141 15.8326 0.270145C15.5306 0.822162 15.4136 1.43018 15.4251 2.0462C15.4516 3.43174 16.0366 4.53527 17.1991 5.3203C17.3311 5.4103 17.3651 5.5003 17.3236 5.63181C17.2441 5.90231 17.1501 6.16482 17.0671 6.43533C17.0141 6.60784 16.9351 6.64584 16.7501 6.57033C16.1121 6.30383 15.5611 5.90931 15.074 5.4328C14.2475 4.63328 13.5 3.75075 12.568 3.05973C12.349 2.89822 12.13 2.74822 11.9034 2.60522C10.9524 1.68169 12.028 0.923165 12.277 0.833162C12.5375 0.739159 12.3675 0.41615 11.5259 0.42015C10.6844 0.42365 9.91439 0.705658 8.93286 1.08117C8.78935 1.13767 8.63835 1.17867 8.48384 1.21267C7.59332 1.04367 6.66829 1.00617 5.70226 1.11517C3.88321 1.31768 2.43016 2.1777 1.36213 3.64575C0.0790928 5.4103 -0.222916 7.41536 0.146595 9.50642C0.535106 11.7105 1.66014 13.535 3.38869 14.9616C5.18125 16.4406 7.24581 17.1657 9.60138 17.0266C11.0319 16.9441 12.6245 16.7526 14.421 15.2321C14.874 15.4576 15.3496 15.5476 16.1381 15.6151C16.7456 15.6716 17.3306 15.5851 17.7836 15.4911C18.4931 15.3411 18.4441 14.6841 18.1876 14.5636C16.1081 13.595 16.5646 13.9891 16.1496 13.67C17.2061 12.42 18.8202 10.1979 19.3182 7.17235C19.3672 6.83834 19.4297 6.36783 19.4222 6.09732C19.4182 5.93231 19.4562 5.86831 19.6447 5.84931C20.1657 5.78931 20.6712 5.64681 21.1357 5.3913C22.4833 4.65528 23.0268 3.44624 23.1548 1.9972C23.1738 1.77569 23.1508 1.54668 22.9168 1.43018Z'
 
@@ -435,7 +409,6 @@ export function startMobileAdapt(): void {
     active = false
     unseatHeaderActions()
     restoreRowDrag()
-    removeCompactPicker()
     document.body.classList.remove(ACTIVE_CLASS)
     document.body.classList.remove(RAIL_HIDDEN_CLASS)
     const tag = document.querySelector(`style[data-plugin-css="${ADAPT_CSS_ID}"]`)
@@ -505,88 +478,6 @@ export function startMobileAdapt(): void {
     }
   }
 
-  /**
-   * Compact picker (v79): a phone row cannot fit the desktop text triggers,
-   * so the model/effort entries become two icon buttons in the trailing
-   * row. Both forward to the official picker trigger (its menu renders as
-   * the bottom sheet) and then drill straight into the asked cell — model
-   * list or effort list — so one tap lands on the list, matching the
-   * cube-model / brain-effort mapping. The official context ring next to
-   * the send button keeps its own semantics untouched.
-   */
-  function removeCompactPicker(): void {
-    document.body.classList.remove(COMPACT_CLASS)
-    document.getElementById(MODEL_BTN_ID)?.remove()
-    document.getElementById(EFFORT_BTN_ID)?.remove()
-  }
-
-  function drillIntoPicker(kind: PickerKind): void {
-    const trigger = document.querySelector('[class$="_composerSeat"] [class$="_trailing"] [class$="_trigger"]:has([class$="_triggerEffort"])') as HTMLElement | null
-    if (trigger === null) return
-    trigger.click()
-    // The sheet mount takes a beat (observed ~0.2-0.6s on a cold phone
-    // mirror); poll until the asked cell exists instead of a fixed delay.
-    let tries = 0
-    const tapCell = (): void => {
-      tries += 1
-      const cells = Array.from(document.querySelectorAll('[class$="_composerSeat"] [class$="_menu"] [class$="_cell"]'))
-      // The official cell copy is localized (zh/en/ru), so the label match is
-      // only the fast path; the sheet's drill cells (label + value + chevron)
-      // are the structural anchor: model first, effort second, on every locale.
-      const byLabel = cells.find((c) => PICKER_CELL_PATTERN[kind].test(c.textContent ?? ''))
-      const drillable = cells.filter((c) => c.querySelector('[class*="_cellChevron"], [class*="_chevron"]'))
-      const cell = byLabel ?? drillable[DRILL_INDEX[kind]]
-      if (cell !== undefined) {
-        ;(cell as HTMLElement).click()
-        return
-      }
-      if (tries < 8) window.setTimeout(tapCell, 150)
-    }
-    window.setTimeout(tapCell, 150)
-  }
-
-  function makeCompactButton(id: string, title: string, icon: string, kind: PickerKind): HTMLButtonElement {
-    const btn = document.createElement('button')
-    btn.id = id
-    btn.type = 'button'
-    btn.dataset.dshPlugin = 'remote-web-ui'
-    btn.title = title
-    btn.setAttribute('aria-label', title)
-    btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${icon}</svg>`
-    btn.addEventListener('click', () => { drillIntoPicker(kind) })
-    return btn
-  }
-
-  function syncCompactPicker(): void {
-    if (!active) return
-    const tools = nodeOf('[class$="_composerSeat"] [class$="_tools"]')
-    const trigger = tools?.parentElement?.querySelector('[class$="_triggerEffort"]')?.parentElement
-    if (tools === null || trigger === null) {
-      removeCompactPicker()
-      return
-    }
-    if (document.getElementById(MODEL_BTN_ID) === null) {
-      // The cell pattern matches the OFFICIAL picker cell text (the official
-      // client's own zh/en copy), not plugin-owned text.
-      tools.appendChild(makeCompactButton(MODEL_BTN_ID, surfaceText('mobile.composer.pickModel', 'Pick model'), CUBE_ICON, 'model'))
-    }
-    if (document.getElementById(EFFORT_BTN_ID) === null) {
-      tools.appendChild(makeCompactButton(EFFORT_BTN_ID, surfaceText('mobile.composer.pickEffort', 'Pick reasoning effort'), LEVELS_ICON, 'effort'))
-    }
-    // Titles re-read every tick so a locale switch (or the translate seat
-    // arriving after this layer installed) is picked up without a reload.
-    for (const [id, key, fallback] of [
-      [MODEL_BTN_ID, 'mobile.composer.pickModel', 'Pick model'],
-      [EFFORT_BTN_ID, 'mobile.composer.pickEffort', 'Pick reasoning effort'],
-    ] as const) {
-      const btn = document.getElementById(id)
-      if (btn === null) continue
-      const label = surfaceText(key, fallback)
-      btn.title = label
-      btn.setAttribute('aria-label', label)
-    }
-    document.body.classList.add(COMPACT_CLASS)
-  }
   /**
    * The official sidebar toggle in the logo row. The row's own `_toggle` class
    * is the precise anchor; the row's last button is the fallback for cohorts
@@ -911,7 +802,6 @@ export function startMobileAdapt(): void {
     disableRowDrag()
     seatHeaderActions()
     alignActionsText()
-    syncCompactPicker()
   }
 
   // v67: on mobile the header actions (agent-preset mode label + background

package/src/client/settings-card.module.css

@@ -36,8 +36,8 @@
   border: 0;
   border-radius: 12px;
   align-items: center;
-  gap: 12px;
-  padding: 14px 16px;
+  gap: 13px;
+  padding: 16px;
   display: flex;
 }
 
@@ -51,8 +51,8 @@
   box-sizing: border-box;
   border-radius: 12px;
   align-items: center;
-  gap: 12px;
-  padding: 14px 16px;
+  gap: 13px;
+  padding: 16px;
   display: flex;
 }
 
@@ -64,6 +64,25 @@
   display: flex;
 }
 
+/* Optional leading plugin mark: a quiet tile that takes the ink color on
+   hover and while the card is open, so the whole row reads as one control. */
+.mark {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+  transition: color 0.16s;
+}
+
+.header:hover .mark,
+.cardOpen .mark {
+  color: var(--dsw-alias-label-primary);
+}
+
 .name {
   color: var(--dsw-alias-label-primary);
   font-size: 15px;
@@ -95,7 +114,13 @@
 .chevron {
   color: var(--dsw-alias-label-tertiary);
   flex: none;
-  transition: transform 0.16s;
+  width: 16px;
+  height: 16px;
+  transition: transform 0.16s, color 0.16s;
+}
+
+.header:hover .chevron {
+  color: var(--dsw-alias-label-secondary);
 }
 
 .chevronOpen {
@@ -406,6 +431,7 @@
 @media (prefers-reduced-motion: reduce) {
   .card,
   .header,
+  .mark,
   .chevron,
   .chevronOpen,
   .discard,