feat(sidebar): 桌面兼容三方案——自动检测(WCO 标准几何)/壳预设/自定义 CSS (#284)

* feat(sidebar): 桌面兼容三方案——自动检测(WCO 标准几何)/壳预设/自定义 CSS 核心只保留 Web 标准机制，壳专属适配全部下沉到用户空间（KISS）： - prefs 新增 titleBarScheme(默认 auto)/titleBarPresetId/customCss，旧 titleBarCompat 布尔自动迁移（true→custom 保留 stripPx，false/缺失→auto） - wco.ts：navigator.windowControlsOverlay 反应式几何（geometrychange 实时更新； visible=false 的幽灵 API 视为缺失），实现 #257 - titlebar-strip.ts 唯一 strip 取值链：WCO → dsh-desktop-titlebar-inset 契约参数 → 预设 stripFor → 手动 px → 0；desktop-env.ts 移除 win32 32px 硬编码 - shell-presets.ts 数据驱动预设（准入：issue/PR 提及 + 100+ star；v1 仅 anywhere-labs DSH Desktop：darwin 20px / win32 无 WCO 时 32px），opt-in 手动 - 预设/自定义 CSS 注入（data-dsh-preset-css / data-dsh-custom-css 标签）， chrome 补稳定寻址面 data-dsh-toggle-cluster / data-dsh-panel - 交互 chrome 统一 -webkit-app-region: no-drag（吸收 #111/#153） - layout.css 底栏推挤复合锚点（[data-pane] 与 :has(> [data-slot]) 双保险， rc.8 实测前者失效、后者命中，吸收 #226 思路） - 设置 UI：位置兼容模式齿轮弹窗改三方案（自动检测/壳兼容方案/自定义方案） - 测试：wco/titlebar-strip/shell-presets 单测 + prefs 迁移 + e2e 5 场景（保守 auto/WCO 反应式/预设/自定义 CSS/复合锚点），挂载门禁 12/12 全绿核心 grep 无壳专属类名；为某壳做的兼容在另一壳会再坏——预设与自定义 CSS 是唯一出路（AGENTS.md §8 契约已更新）。 * refine(sidebar): 位置兼容模式改主行下拉四选项——自动检测/DSH官方Web/壳预设/自定义按用户反馈定稿 UI： - 主行下拉：自动检测（默认）/ DSH官方Web（显式零适配，连 WCO 也强制 0）/ 各壳预设（命中环境带「已检测」后缀，仅提示）/ 自定义方案（保留齿轮弹窗：下移距离 + 自定义 CSS） - 旧文档迁移：titleBarCompat=true 或 titleBarStripPx 非默认值（此前已有配置） → 默认落到 custom 方案保留用户数值；干净文档 → auto - prefs 新增 'web' 方案；strip 取值链最优先处理 web→0 - 测试：prefs 迁移（stripPx 48→custom / 40→auto）、web 强制 0、下拉渲染断言 - 单测 693 通过，挂载 e2e 12/12 全绿 * refine(sidebar): 方案下拉复用 SelectMenu 组件，不用原生 <select> - 抽出可复用 SelectMenu（primitives Menu：锚点按钮 + 下拉选项卡，支持 icon/desc/多选），SelectRow 改为其薄壳 - 位置兼容模式方案下拉改用 SelectMenu；选项带描述（自动检测/DSH官方Web/ 各壳预设(命中带「已检测」后缀)/自定义方案） - 移除原生 select 样式；单测 693 通过，挂载 e2e 12/12 全绿
2026-08-21 01:28:17 +08:00
parent 4e52923970
commit 50a888845f
26 changed files with 1312 additions and 181 deletions
@@ -702,3 +702,34 @@ test('bottom panel never flashes full-width after a width drag release (issue #2
    ).toBeLessThanOrEqual(8)
  }
 })
+
+test('the bottom-push anchor resolves through the composite selectors (at least one; same element when both)', async ({ page }) => {
+  // layout.css pushes the bottom panel via the center column. The selector
+  // is COMPOSITE on purpose: `[data-pane="conversation"]` (0.1.x naming)
+  // and `:has(> [data-slot="conversation"])` (rc.8-era naming) — HOST
+  // VERSIONS MAY RENAME THE ATTRIBUTE (issue #208 comment / PR #226), so
+  // the contract is "at least one resolves", and when both resolve they
+  // must hit the SAME element (otherwise the push would land twice).
+  await page.goto(BASE_URL, { waitUntil: 'domcontentloaded' })
+  await expect(page.locator('[data-dsh-better-sidebar]')).toBeAttached({ timeout: 90_000 })
+  const anchors = await page.evaluate(() => {
+    const a = document.querySelector('#root [data-dsh-frame] > [data-pane="conversation"]')
+    const b = document.querySelector('#root :has(> [data-slot="conversation"])')
+    const frame = document.querySelector('#root [data-dsh-frame]')
+    return {
+      a: a !== null,
+      b: b !== null,
+      same: a !== null && b !== null && a === b,
+      frameChildren: frame !== null
+        ? [...frame.children].map(el => `${el.tagName}[${[...el.attributes].map(attr => attr.name).filter(name => name.startsWith('data-')).join(',')}]`)
+        : [],
+    }
+  })
+  expect(
+    anchors.a || anchors.b,
+    `at least one bottom-push anchor must resolve on this host (frame children: ${anchors.frameChildren.join(' / ') || 'no [data-dsh-frame]'})`,
+  ).toBe(true)
+  if (anchors.a && anchors.b) {
+    expect(anchors.same, 'both selectors must hit the SAME center-column element').toBe(true)
+  }
+})
@@ -341,20 +341,122 @@ test('plugin mounts into the DSH shell and survives a built-in tab sweep', async
  await page.screenshot({ path: 'test-results/mount-final.png' })
 })

-test('desktop shell stamps auto-enable the win32 title-bar compatibility mode', async ({ page }) => {
+test('conservative auto: URL stamps alone never modify the layout; plugin chrome carries the stable data attributes', async ({ page }) => {
  // The official DSH Desktop shell stamps every render URL with
-  // dsh-desktop-mode / dsh-desktop-platform (and exposes a preload marker).
-  // The win32 advanced shell reserves a 32px overlay for the window
-  // controls where the toggle cluster sits — the sidebar must auto-drop
-  // below it (body[data-dsh-title-bar-compat]) without any manual pref.
+  // dsh-desktop-mode / dsh-desktop-platform. Under the conservative AUTO
+  // scheme, shell stamps are REPORTS, not geometry: without the standard
+  // Window Controls Overlay API the layout must stay untouched (plain-web
+  // semantics) — the strip/body attribute appear only for real standard
+  // geometry (see the WCO scenario below) or an opt-in preset.
  await page.goto(`${BASE_URL}?dsh-desktop-mode=advanced&dsh-desktop-platform=win32`, { waitUntil: 'domcontentloaded' })
  await expect(page.locator('[data-dsh-better-sidebar]')).toBeAttached({ timeout: 90_000 })
  await expect(
    page.locator('body[data-dsh-title-bar-compat]'),
-    'win32 advanced shell must auto-enable title-bar compatibility',
-  ).toBeAttached({ timeout: 90_000 })
-  // The strip variable must be sized to the shell's 32px overlay.
+    'stamps alone must NOT auto-enable title-bar compatibility under auto',
+  ).toHaveCount(0)
  await expect
    .poll(() => page.evaluate(() => document.documentElement.style.getPropertyValue('--dsh-title-bar-strip')))
-    .toBe('32px')
+    .toBe('')
+  // The stable addressing surface for presets / custom CSS is mounted.
+  await expect(page.locator('[data-dsh-toggle-cluster]')).toBeAttached()
+  await expect(page.locator('[data-dsh-panel]').first()).toBeAttached()
+  // The plugin's interactive chrome opts out of Electron drag regions
+  // (issues #103/#111) — inert in plain browsers, present in the bundle
+  // (the bundler minifies the property's whitespace, so match loosely).
+  const hasNoDragRule = await page.evaluate(() => {
+    for (const tag of document.querySelectorAll('style')) {
+      if (tag.textContent !== null && /-webkit-app-region:\s*no-drag/.test(tag.textContent)) return true
+    }
+    return false
+  })
+  expect(hasNoDragRule, 'the bundle must ship the drag-region opt-out rule').toBe(true)
+})
+
+test('standard WCO geometry drives the strip reactively (issue #257)', async ({ page }) => {
+  // The Window Controls Overlay API is the STANDARD signal for shells that
+  // draw the native caption buttons over web content (Electron
+  // `titleBarOverlay`). Mock it with the real API shape: the strip must
+  // follow the reported rect and react to geometrychange (maximize/restore).
+  await page.addInitScript(() => {
+    const rect = { x: 0, y: 0, width: 138, height: 36 }
+    const listeners = new Set<() => void>()
+    Object.defineProperty(navigator, 'windowControlsOverlay', {
+      configurable: true,
+      value: {
+        visible: true,
+        getTitlebarAreaRect: () => ({ ...rect }),
+        addEventListener: (type: string, listener: () => void) => { if (type === 'geometrychange') listeners.add(listener) },
+        removeEventListener: (type: string, listener: () => void) => { if (type === 'geometrychange') listeners.delete(listener) },
+      },
+    })
+    ;(globalThis as { __wcoMock?: { setHeight: (height: number) => void } }).__wcoMock = {
+      setHeight: (height: number) => {
+        rect.height = height
+        for (const listener of listeners) listener()
+      },
+    }
+  })
+  await page.goto(BASE_URL, { waitUntil: 'domcontentloaded' })
+  await expect(page.locator('[data-dsh-better-sidebar]')).toBeAttached({ timeout: 90_000 })
+  // Real reported height (36px, not a hardcoded 32) drives the strip.
+  await expect(page.locator('body[data-dsh-title-bar-compat]')).toBeAttached({ timeout: 90_000 })
+  await expect
+    .poll(() => page.evaluate(() => document.documentElement.style.getPropertyValue('--dsh-title-bar-strip')))
+    .toBe('36px')
+  // Maximize → the overlay reports a zero rect → the strip is removed.
+  await page.evaluate(() => (globalThis as { __wcoMock?: { setHeight: (height: number) => void } }).__wcoMock?.setHeight(0))
+  await expect(page.locator('body[data-dsh-title-bar-compat]')).toHaveCount(0)
+  await expect
+    .poll(() => page.evaluate(() => document.documentElement.style.getPropertyValue('--dsh-title-bar-strip')))
+    .toBe('')
+  // Restore → the strip comes back.
+  await page.evaluate(() => (globalThis as { __wcoMock?: { setHeight: (height: number) => void } }).__wcoMock?.setHeight(36))
+  await expect(page.locator('body[data-dsh-title-bar-compat]')).toBeAttached()
+})
+
+test('opt-in shell preset applies its strip when WCO is absent (data-driven, manual)', async ({ request, page }) => {
+  // The anywhere-labs DSH Desktop preset (shell-presets.ts) is OPT-IN: under
+  // the preset scheme the win32 advanced stamp resolves to its 32px fallback
+  // even without the WCO API; auto never does this.
+  const update = await request.post(`${BASE_URL}/sidebar/api/settings.update`, {
+    data: { patch: { titleBarScheme: 'preset', titleBarPresetId: 'dsh-desktop', titleBarCompat: true } },
+  })
+  expect(update.ok(), `settings.update: ${update.status()}`).toBe(true)
+  try {
+    await page.goto(`${BASE_URL}?dsh-desktop-mode=advanced&dsh-desktop-platform=win32`, { waitUntil: 'domcontentloaded' })
+    await expect(page.locator('[data-dsh-better-sidebar]')).toBeAttached({ timeout: 90_000 })
+    await expect(page.locator('body[data-dsh-title-bar-compat]')).toBeAttached({ timeout: 90_000 })
+    await expect
+      .poll(() => page.evaluate(() => document.documentElement.style.getPropertyValue('--dsh-title-bar-strip')))
+      .toBe('32px')
+    // The v1 anywhere-labs preset is PURE STRIP DATA (no extra CSS — the
+    // injection mechanism is exercised by the custom-scheme test). Assert
+    // the absence explicitly: a future preset that ADDS css would trip
+    // here instead of silently shipping unstyled.
+    await expect(page.locator('style[data-dsh-preset-css]')).toHaveCount(0)
+  } finally {
+    // Restore the shared server state for the lanes after this one.
+    await request.post(`${BASE_URL}/sidebar/api/settings.update`, {
+      data: { patch: { titleBarScheme: 'auto', titleBarPresetId: '', customCss: '', titleBarCompat: false } },
+    })
+  }
+})
+
+test('custom scheme injects the user stylesheet live', async ({ request, page }) => {
+  const update = await request.post(`${BASE_URL}/sidebar/api/settings.update`, {
+    data: { patch: { titleBarScheme: 'custom', customCss: 'html { --dsh-e2e-marker: 1; }', titleBarCompat: true } },
+  })
+  expect(update.ok(), `settings.update: ${update.status()}`).toBe(true)
+  try {
+    await page.goto(BASE_URL, { waitUntil: 'domcontentloaded' })
+    await expect(page.locator('[data-dsh-better-sidebar]')).toBeAttached({ timeout: 90_000 })
+    await expect(page.locator('style[data-dsh-custom-css="custom"]')).toBeAttached()
+    // The injected CSS is live (a custom property the page can read back).
+    const marker = await page.evaluate(() => getComputedStyle(document.documentElement).getPropertyValue('--dsh-e2e-marker').trim())
+    expect(marker).toBe('1')
+  } finally {
+    await request.post(`${BASE_URL}/sidebar/api/settings.update`, {
+      data: { patch: { titleBarScheme: 'auto', titleBarPresetId: '', customCss: '', titleBarCompat: false } },
+    })
+  }
 })