dsh-better-setting-page 0.0.1 → 0.1.0

package/README.md

@@ -1,20 +1,142 @@
-# Better Setting Page · 全屏设置页
+# Better Setting Page
 
-**This is a placeholder release (0.0.1).** The package name is reserved and the
-plugin is a no-op: installing it changes nothing in the UI.
+Makes the DeepSeek Harness settings dialog a full-window page, and lets its
+section rail collapse to a 56px icon column.
 
-Planned scope:
+Settings in this harness open as an 800px-wide modal. That is fine for three
+rows of switches and cramped for anything else — a category page with a card
+per category is unreadable at that width, and the wasted screen is the user's.
+This plugin does not add settings; it gives the page the room it should have had.
 
-  - Open the settings dialog as a full page instead of a small modal.
-  - Let the settings navigation rail collapse to icons only.
-  - Remember both choices per machine.
-
-Until then, nothing is registered and nothing is styled.
+Verified against harness `0.2.2-rc.1` (`@deepseek-ai/dsh-client-ui-settings-general`
+0.2.2-rc.1 in the unpacked asar) — see [How it works](#how-it-works) for the exact
+anchors, so you can tell whether a later build still matches.
 
 ## Install
 
     dsh plugin --profile <profile> add dsh-better-setting-page
 
+Restart that profile's window afterwards: the browser caches the old bundle.
+
+## What you get
+
+| | |
+|---|---|
+| Full-window page | The dialog fills the window; the panel radius and drop shadow go away. On desktop the title-bar height is kept as padding, and that strip still drags the window. |
+| Collapsible rail | A chevron in the page header collapses the section list to 56px of icons. Section names stay in the accessibility tree, so screen readers and `Tab` still announce them. |
+| Remembered in this browser | Both switches live in this browser profile's `localStorage`, key `dsh.better-setting-page.settings`. |
+| Its own settings page | Under **Settings → Settings page** you get two switches and **Restore defaults**. Without that page, a user who dislikes full screen would have to uninstall the plugin. |
+
+Full screen is **on by default**; the rail is **expanded by default**. Both are
+switchable, and both choices survive a restart.
+
+Closing works exactly as it did before: `Esc`, the close button, and a click on
+the mask. The mask is still there and still clickable — with full screen on it is
+simply covered by the panel, so in practice `Esc` and the close button are what
+you reach for.
+
+The rail is collapsed by CSS only; the section names are visually hidden, not
+removed, so `Tab` still lands on each entry and a screen reader still announces
+it. There is no hover-to-expand: the arrow toggles, nothing else moves.
+
+## How it works
+
+Everything hangs off two attributes this plugin owns on `<html>`:
+
+    <html data-bsp-fullscreen="on" data-bsp-nav="collapsed">
+
+One stylesheet reads them. No `MutationObserver`, no re-render on the host's
+React tree, no writes to any host store. The host may mount, unmount and
+remount the settings panel at will; the state is already on the root element.
+
+Three things about the shipped DOM are worth knowing before you write a similar
+patch.
+
+**1. `[data-slot="…"]` is a renderer anchor, not a container.** The renderer's
+`SlotOutlet` emits it with `style: { display: "contents" }`, so the element
+generates no box: its children take part in the *grandparent's* layout. It also
+sits inside `.actions` / `.options`, never directly under `.header`. So:
+
+    /* correct: match the header row by descendant */
+    div[data-shortcut-modal="settings"] > div:has([data-slot="settings.action"])
+    /* wrong, silently matches .actions: */
+    div[data-shortcut-modal="settings"] > div:has(> [data-slot="settings.action"])
+
+**2. The mask owns click-outside-to-close.** `div.mask` carries `onClick={onClose}`.
+`display: none` or `pointer-events: none` on it does not "clean up the overlay",
+it deletes a feature with no error. This plugin only strips the mask's *paint*
+(`background: transparent; backdrop-filter: none`) and leaves its box alone.
+
+**3. The grid area names are CSS-Modules hashes.** Override only the
+`grid-template-columns` longhand. Rewriting the `grid-template` shorthand would
+also reset `"title header" / "nav options"` and collapse the layout.
+
+There is no `!important` and no host class name in the stylesheet: every rule is
+anchored on `div[data-shortcut-modal="settings"]`, which is a stable data
+attribute and already more specific (0,1,1) than the shipped module classes
+(0,1,0).
+
+## Switches
+
+| Field | Default | Meaning |
+|---|---|---|
+| `fullscreen` | `true` | Fill the window instead of 800px. |
+| `navCollapsed` | `false` | Collapse the section rail to icons. |
+
+Stored shape:
+
+```json
+{ "version": 1, "fullscreen": true, "navCollapsed": false, "unknown": {} }
+```
+
+Keys this version does not recognise are carried in `unknown` and written back,
+so a downgrade or a newer build does not lose data. A malformed record falls
+back to defaults instead of throwing.
+
+## Limits
+
+- **Not a full-screen window.** `html[data-fullscreen]` is the *window's* state,
+  not this plugin's; forcing it would also change where the host anchors its
+  menus. This page fills the window that exists.
+- **Desktop only for the drag strip — and not yet verified there.** On the web
+  runtime there is no title bar (`--dsh-frame-top-clearance` is unset), so the
+  computed padding is `max(0px, 0px)`: the plugin adds no strip and no drag
+  region, which means the one thing this release cannot demonstrate is the thing
+  the strip exists for. Until a real Desktop app run says otherwise, treat the
+  40px drag area as **unverified**.
+- **Narrow windows keep the host layout.** Below 768px the harness turns the
+  panel into a full-screen sheet on its own; collapsing to 56px there would
+  leave nothing, so the collapse rule is behind `@media (min-width: 768px)`.
+- **Settings are per origin.** A different port is a different profile: your two
+  switches reset there.
+
+## Files
+
+    client.js            browser half: stylesheet, rail toggle, settings page
+    index.js             host half: exists so the bundle resolves, injects nothing
+    cordis.patch.yml     bundle patch
+    test/settings-page.test.mjs   30 checks, no dependencies
+
+## Tests
+
+    node --check client.js
+    node --check index.js
+    node test/settings-page.test.mjs     # → PASS — 30 groups
+
+The test executes the real `client.js` with a stubbed `window.__ModuleLoader__`
+and asserts on the exported strings and store, including two regression traps:
+one fails if the header selector is ever "simplified" back to a direct child,
+the other fails if the full-screen rules stop being gated on this plugin's own
+attribute. Whether the page really fills the window is a machine check, not a
+unit test.
+
+On the web runtime (Harness `0.2.2-rc.1`, 1600×950) that machine check was run
+and three of four items passed: the panel rect equals the viewport
+(`{0,0,1600,950}`), the rail goes `188px 1412px` → `56px 1544px` with
+`aria-expanded="false"`, and the choice survives a reload while `Esc` and the
+close button still close. The fourth — the desktop 40px title-bar drag strip —
+**was not verified**: see [Limits](#limits).
+
 ## License
 
-MIT
+MIT

package/README.zh.md

@@ -0,0 +1,123 @@
+# Better Setting Page · 全屏设置页
+
+把 DeepSeek Harness 的设置面板变成**铺满整个窗口的页面**，并让左侧分类栏**收成
+56px 的图标列**。
+
+这个宿主的设置默认是 800px 宽的弹窗。三五行开关够用，再多就挤：一页「每类一张卡」
+的设置在这个宽度里根本读不下去，而屏幕上剩下的大片空白是用户的。这个插件不增加
+任何设置项，只是把设置页本该有的地方还给它。
+
+对照版本：宿主 `0.2.2-rc.1`（解包 asar 里的 `@deepseek-ai/dsh-client-ui-settings-general`
+0.2.2-rc.1）。下面[「它怎么做到的」](#它怎么做到的)写清了每一处锚点，宿主改版后你可以
+照着判断还对不对得上。
+
+## 安装
+
+    dsh plugin --profile <profile> add dsh-better-setting-page
+
+装完要重启那个 profile 的窗口：浏览器缓存着旧的 bundle。
+
+## 你会得到什么
+
+| | |
+|---|---|
+| 铺满窗口 | 面板占满整个窗口，圆角与投影去掉。桌面版把标题栏高度留成上边距，那一条仍然能拖动窗口。 |
+| 可收起的分类栏 | 页头多一个箭头，一点就把分类栏收成 56px 宽的图标列。分类名留在无障碍树里，读屏和 `Tab` 仍然念得出来。 |
+| 记在这个浏览器里 | 两个开关存在本机浏览器 profile 的 `localStorage`，键 `dsh.better-setting-page.settings`。 |
+| 自己的一页设置 | **设置 → 设置页** 里有这两个开关和**恢复默认**。没有这一页，讨厌全屏的用户除了卸载插件没别的办法。 |
+
+全屏**默认开**，分类栏**默认展开**。两个都能切，切完重启仍然记得。
+
+关闭方式和以前完全一样：`Esc`、关闭按钮、点遮罩。遮罩还在、还能点，只是全屏时它被
+面板盖住了，实际上你会用 `Esc` 或关闭按钮。
+
+分类栏收起是纯 CSS：分类名只是视觉隐藏，没有从文档里删，所以 `Tab` 仍然逐个聚焦、读屏
+仍然念得出来。没有「悬停临时展开」：只有那个箭头会切换状态，别的都不动。
+
+## 它怎么做到的
+
+全部状态是这个插件挂在 `<html>` 上的两个属性：
+
+    <html data-bsp-fullscreen="on" data-bsp-nav="collapsed">
+
+一份样式表读它们。没有 `MutationObserver`，不碰宿主 React 树的重渲染，不写宿主的
+任何 store。宿主随时可以挂载、卸载、再挂载设置面板，状态早就在根元素上了。
+
+写类似补丁之前，关于宿主 DOM 的三件事值得先知道。
+
+**1. `[data-slot="…"]` 是渲染器的锚点，不是容器。** 渲染器的 `SlotOutlet` 把它输出成
+`style: { display: "contents" }`，所以这个元素不产生盒子：它的子元素直接参与**祖父
+层**的布局。而且它挂在 `.actions` / `.options` 里面，从来不是 `.header` 的直接子级。
+所以：
+
+    /* 对：用后代匹配找到页头所在的那一行 */
+    div[data-shortcut-modal="settings"] > div:has([data-slot="settings.action"])
+    /* 错：会静默匹配到 .actions */
+    div[data-shortcut-modal="settings"] > div:has(> [data-slot="settings.action"])
+
+**2. 遮罩上挂着「点外面关闭」。** `div.mask` 带 `onClick={onClose}`。给它
+`display: none` 或 `pointer-events: none` 不是「顺手清干净浮层」，而是无声无息删掉
+一个功能。这个插件只摘掉遮罩的**外观**（`background: transparent;
+backdrop-filter: none`），盒子和命中区原样留着。
+
+**3. 网格区域名是 CSS-Modules 的哈希。** 只覆盖 `grid-template-columns` 这个长写属性。
+重写 `grid-template` 简写会连 `"title header" / "nav options"` 一起重置，布局直接塌。
+
+样式表里没有 `!important`，也没有任何宿主类名：每条规则都锚在
+`div[data-shortcut-modal="settings"]` 这个稳定的 data 属性上，特异性 (0,1,1) 本来就
+高于宿主的模块类 (0,1,0)。
+
+## 开关
+
+| 字段 | 默认 | 含义 |
+|---|---|---|
+| `fullscreen` | `true` | 铺满窗口，而不是 800px。 |
+| `navCollapsed` | `false` | 把分类栏收成图标列。 |
+
+存储形状：
+
+```json
+{ "version": 1, "fullscreen": true, "navCollapsed": false, "unknown": {} }
+```
+
+这个版本不认识的键会放进 `unknown` 原样写回，降级或更高版本都不会丢数据。记录坏掉
+时回落默认值，不抛错。
+
+## 限制
+
+- **这不是「窗口全屏」。** `html[data-fullscreen]` 是**窗口**的状态，不是这个插件的；
+  硬写它连宿主菜单的锚定位置都会一起变。这里只让设置页填满已有的窗口。
+- **拖拽带只在桌面版有，而且还没在桌面版验过。** 网页运行时没有标题栏
+  （`--dsh-frame-top-clearance` 无值），于是补白算出来是 `max(0px, 0px)`：插件既不补
+  上边距、也不加拖拽区 —— 也就是说，这条拖拽带存在的理由，恰好是这一版没法证明的
+  东西。在真机桌面版跑过之前，那 40px 拖拽区请当作**未验证**。
+- **窄窗口保持宿主布局。** 768px 以下宿主自己就把面板变成全屏 sheet；这时候再收成
+  56px 会什么都不剩，因此收起规则放在 `@media (min-width: 768px)` 里。
+- **设置按 origin 隔离。** 换个端口就是另一个 profile，两个开关会回到默认。
+
+## 文件
+
+    client.js           浏览器半边：样式表、分类栏开关、设置页
+    index.js            host 半边：只为让 bundle 解析得到，不注入任何东西
+    cordis.patch.yml    bundle patch
+    test/settings-page.test.mjs   30 条断言，零依赖
+
+## 测试
+
+    node --check client.js
+    node --check index.js
+    node test/settings-page.test.mjs     # → PASS — 30 groups
+
+测试用桩掉的 `window.__ModuleLoader__` 执行真的 `client.js`，然后对导出的字符串和
+store 下断言，其中埋了两条**回归陷阱**：一条在页头选择器被「顺手简化」回直接子级时
+失败，另一条在全屏规则不再挂在本插件自己的属性上时失败。页面是不是真的铺满窗口属于
+机器验证，不是单测能证明的事。
+
+那次机器验证在网页运行时跑过了（Harness `0.2.2-rc.1`，1600×950），四项里过了三项：
+面板 rect 等于视口（`{0,0,1600,950}`）、左栏 `188px 1412px` → `56px 1544px` 且
+`aria-expanded="false"`、刷新后选择仍在且 `Esc` 与关闭键仍能关。第四项 —— 桌面版
+40px 标题带的拖拽区 —— **没有验过**，见[限制](#限制)。
+
+## 许可
+
+MIT

package/client.js

@@ -1,17 +1,701 @@
 /**
- * Browser half of `dsh-better-setting-page` — placeholder.
+ * Browser half of `dsh-better-setting-page` — full-screen settings page with a
+ * collapsible navigation rail.
  *
- * Loaded by the harness module loader. It registers no slot entry and injects no
- * stylesheet, so installing this version is a no-op. Keep the module id equal to
- * the package name: the loader rejects a mismatch.
+ * What it does (and nothing else):
+ *   1. One stylesheet that turns the shipped settings dialog into a full-window
+ *      page and narrows its left rail to 56px when collapsed. Every rule hangs
+ *      off two attributes we own on `<html>`, so the panel can be unmounted and
+ *      remounted by the host at any time and the state survives without any
+ *      MutationObserver.
+ *   2. One button in the `settings.action` slot (the content-column header, left
+ *      of the shipped "document" button) that toggles the rail.
+ *   3. One `settings.section` page with the two switches and "restore defaults",
+ *      because a plugin that can only be undone by clearing localStorage is a
+ *      plugin the user cannot turn off.
+ *
+ * Deliberate non-goals: no `settings.header` takeover (that slot is the dialog's
+ * `aria-labelledby` target and shadows shipped UI), no `display:none` on the
+ * mask (its `onClick` is the click-outside-to-close handler), no `!important`,
+ * no hash class names, no host store writes.
+ *
+ * Selector notes that are easy to get wrong (verified against the shipped DOM):
+ *   - `[data-slot="…"]` is emitted by the renderer's `SlotOutlet` with
+ *     `style:{display:"contents"}`. It produces no box, so it can be used to
+ *     anchor a selector but never as a sized container.
+ *   - It sits inside `.actions` / `.options`, never directly under `.header`.
+ *     Matching the header row therefore has to use a descendant combinator:
+ *     `> div:has([data-slot="settings.action"])`.
+ *   - `clip` alone does not hide anything: the visually-hidden utility below
+ *     needs absolute positioning plus `clip-path`.
  */
+
 window.__ModuleLoader__.load({
   id: 'dsh-better-setting-page',
-  factory() {
-    return {
-      apply(ctx) {
-        void ctx
-      },
+  factory(require) {
+    const React = require('react')
+    const h = React.createElement
+
+    /** Locale namespace and the prefix of every DOM attribute we own. */
+    const NS = 'better-setting-page'
+    const VERSION = '0.1.0'
+
+    /** localStorage key. Bumping `SETTINGS_VERSION` requires a migration. */
+    const STORE_KEY = 'dsh.better-setting-page.settings'
+    const SETTINGS_VERSION = 1
+
+    const DEFAULTS = {
+      version: SETTINGS_VERSION,
+      fullscreen: true,
+      navCollapsed: false,
+    }
+
+    /** `<html>` attributes: the only state the stylesheet reads. */
+    const FULLSCREEN_ATTR = 'data-bsp-fullscreen'
+    const NAV_ATTR = 'data-bsp-nav'
+    /** Id we lend to the host's `<nav>` so `aria-controls` has a target. */
+    const NAV_ID = 'dsh-bsp-nav'
+
+    const PANEL = 'div[data-shortcut-modal="settings"]'
+
+    const SECTION_ID = 'better-setting-page'
+    const SECTION_ORDER = 50
+    const ACTION_ID = 'better-setting-page.rail-toggle'
+
+    //#region stylesheet
+    /**
+     * The whole visual layer. No `!important` anywhere: `div[data-shortcut-modal
+     * ="settings"]` is (0,1,1) against the shipped module classes at (0,1,0), and
+     * every rule below is at least that specific.
+     */
+    const CSS = `
+/* ── 1. Full-screen panel ───────────────────────────────────────────────── */
+html[data-bsp-fullscreen="on"] div[data-shortcut-modal="settings"]{
+  --bsp-top-pad: max(var(--dsh-windows-titlebar-height, 0px), var(--dsh-frame-top-clearance, 0px));
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  border-radius: 0;
+  box-shadow: none;
+  padding-top: var(--bsp-top-pad);
+  background: var(--dsw-alias-bg-layer-2);
+}
+
+/* A genuinely full-screen window has no title bar, so there is nothing to pad. */
+html[data-bsp-fullscreen="on"][data-fullscreen] div[data-shortcut-modal="settings"]{
+  --bsp-top-pad: 0px;
+}
+
+/* The pad strip is window chrome, not page content: keep it draggable, but only
+   on desktop, where that strip actually exists. */
+html[data-windows-titlebar][data-bsp-fullscreen="on"] div[data-shortcut-modal="settings"]::before,
+html[data-platform="darwin"][data-bsp-fullscreen="on"] div[data-shortcut-modal="settings"]::before{
+  content: "";
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: var(--bsp-top-pad);
+  -webkit-app-region: drag;
+}
+
+/* ── 2. Mask keeps its hit area, loses only its paint ───────────────────── */
+/* The mask owns the click-outside-to-close handler. Hiding it or switching off
+   its pointer events does not "clean up the overlay", it deletes a feature with
+   no error. Only the paint is removed here; the box stays. */
+html[data-bsp-fullscreen="on"] div:has(> div[data-shortcut-modal="settings"]) > div:first-child{
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+/* ── 3. Content column ──────────────────────────────────────────────────── */
+/* Header row: the action slot lives inside .actions, so match by descendant. */
+html[data-bsp-fullscreen="on"] div[data-shortcut-modal="settings"] > div:has([data-slot="settings.action"]){
+  padding-right: 26px;
+}
+/* Content column is the direct parent of the section outlet. */
+html[data-bsp-fullscreen="on"] div[data-shortcut-modal="settings"] > div:has(> [data-slot="settings.section"]){
+  min-height: 0;
+}
+/* Wide windows get breathing room; narrow ones keep the host's tighter padding. */
+@media (min-width: 768px){
+  html[data-bsp-fullscreen="on"] div[data-shortcut-modal="settings"] > div:has(> [data-slot="settings.section"]){
+    padding: 0 40px 40px;
+  }
+}
+/* A full-width page would otherwise run a line across the whole monitor. */
+html[data-bsp-fullscreen="on"] div[data-shortcut-modal="settings"] [data-slot="settings.section"] > *{
+  max-width: 880px;
+}
+
+/* ── 4. Collapsible rail ────────────────────────────────────────────────── */
+/* Everything about collapsing is behind the same breakpoint the host uses to
+   turn the rail into a horizontal tab bar (<=767px). Collapsing a horizontal bar
+   has no meaning, and hiding its labels there would leave an unlabelled strip. */
+@media (min-width: 768px){
+  /* Only the grid-template-columns longhand: the area names in the shorthand are
+     CSS-Modules hashes and would break on the next build. */
+  html[data-bsp-nav="collapsed"] div[data-shortcut-modal="settings"]{
+    grid-template-columns: 56px minmax(0, 1fr);
+  }
+  html[data-bsp-nav="collapsed"] div[data-shortcut-modal="settings"] > nav{
+    padding: 10px 8px 0;
+  }
+  html[data-bsp-nav="collapsed"] div[data-shortcut-modal="settings"] > nav > div > button{
+    /* Anchors the visually-hidden label to its own cell instead of the panel. */
+    position: relative;
+    justify-content: center;
+    padding: 9px 0;
+    gap: 0;
+  }
+  /* The panel title stays readable, it just loses its 24px indent. Hiding it
+     would also hide the dialog's accessible name, which is this node. */
+  html[data-bsp-nav="collapsed"] div[data-shortcut-modal="settings"] > div[id]{
+    padding: 22px 4px 8px;
+    overflow: hidden;
+    font-size: 13px;
+    line-height: 24px;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  /* Visually hidden, still in the accessibility tree: with the label gone the
+     icon is all that is left, and the icon carries no accessible name of its
+     own. Second span rather than last-child, so that a cell rendered without an
+     icon span never causes the icon itself to be hidden. */
+  html[data-bsp-nav="collapsed"] div[data-shortcut-modal="settings"] > nav > div > button > span:nth-child(2){
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+/* ── 5. Rail toggle button (settings.action) ────────────────────────────── */
+[data-slot="settings.action"] > .bsp-rail-toggle{
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--dsw-radius-sm);
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+}
+[data-slot="settings.action"] > .bsp-rail-toggle:hover{
+  background-color: var(--dsw-alias-interactive-bg-hover);
+}
+[data-slot="settings.action"] > .bsp-rail-toggle:focus-visible{
+  outline: var(--dsw-focus-ring-width, 2px) solid
+           var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: -2px;
+}
+
+/* ── 6. Our own settings page ───────────────────────────────────────────── */
+.bsp-page{
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: 880px;
+  padding: 8px 2px 28px;
+}
+.bsp-head{ padding: 4px 0 12px; }
+.bsp-title{
+  margin: 0 0 6px;
+  font-size: 16px;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  color: var(--dsw-alias-label-primary);
+}
+.bsp-sub{
+  margin: 0;
+  max-width: 64ch;
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--dsw-alias-label-tertiary);
+}
+.bsp-row{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 16px 0;
+  border-bottom: .5px solid var(--dsw-alias-border-l2);
+}
+.bsp-rowText{ min-width: 0; }
+.bsp-rowLabel{
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-primary);
+}
+.bsp-rowHint{
+  margin-top: 4px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-secondary);
+}
+.bsp-check{
+  flex: none;
+  width: 16px;
+  height: 16px;
+  accent-color: var(--dsw-alias-brand-primary);
+  cursor: pointer;
+}
+.bsp-actions{
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 0 4px;
+}
+.bsp-button{
+  min-height: 32px;
+  padding: 0 14px;
+  border: .5px solid var(--dsw-alias-border-l4);
+  border-radius: var(--dsw-radius-md);
+  background: var(--dsw-alias-bg-layer-3);
+  color: var(--dsw-alias-label-primary);
+  font-size: 13px;
+  cursor: pointer;
+}
+.bsp-button:hover{ background-color: var(--dsw-alias-interactive-bg-hover); }
+.bsp-button:focus-visible{
+  outline: var(--dsw-focus-ring-width, 2px) solid
+           var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 1px;
+}
+.bsp-notice{
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-tertiary);
+}
+.bsp-note{
+  margin: 12px 0 0;
+  max-width: 64ch;
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--dsw-alias-label-tertiary);
+}
+`.trim()
+    //#endregion
+
+    //#region dictionaries
+    const ZH = {
+      'section.nav': '设置页',
+      'rail.expand': '展开分类栏',
+      'rail.collapse': '收起分类栏',
+      'page.title': '设置页外观',
+      'page.intro': '这个插件只改设置页的呈现方式，不读也不写任何设置值。',
+      'page.fullscreen': '全屏设置页',
+      'page.fullscreenHint': '铺满整个窗口。桌面版会在顶部留出标题栏高度，那一条仍然可以拖动窗口。',
+      'page.navCollapsed': '默认收起左侧分类栏',
+      'page.navCollapsedHint': '收成 56px 图标栏，分类名保留给读屏。点右上角箭头可随时切换。',
+      'page.reset': '恢复默认',
+      'page.resetDone': '已恢复默认',
+      'page.saveFailed': '浏览器拒绝保存（localStorage 已满或被禁用），这次改动没有生效。',
+      'page.note': '这两项存在本机浏览器的 localStorage（键 dsh.better-setting-page.settings），换端口或清站点数据会丢。不认识的字段会原样保留。',
+    }
+
+    const EN = {
+      'section.nav': 'Settings page',
+      'rail.expand': 'Expand section list',
+      'rail.collapse': 'Collapse section list',
+      'page.title': 'Settings page appearance',
+      'page.intro': 'This plugin only changes how the settings page is drawn. It reads and writes no setting of its own.',
+      'page.fullscreen': 'Full-screen settings',
+      'page.fullscreenHint': 'Fill the whole window. On desktop the title-bar height is kept as padding, and that strip still drags the window.',
+      'page.navCollapsed': 'Collapse the section list by default',
+      'page.navCollapsedHint': 'Shrinks the rail to a 56px icon column; section names stay in the accessibility tree. Toggle it any time with the arrow in the header.',
+      'page.reset': 'Restore defaults',
+      'page.resetDone': 'Defaults restored',
+      'page.saveFailed': 'The browser refused to save this (localStorage full or blocked); the change did not stick.',
+      'page.note': 'Both switches live in this browser profile’s localStorage (key dsh.better-setting-page.settings), so a different port or cleared site data resets them. Unknown fields are preserved as-is.',
+    }
+    //#endregion
+
+    //#region settings store
+    function isPlainObject(value) {
+      return typeof value === 'object' && value !== null && !Array.isArray(value)
+    }
+
+    /**
+     * Turn whatever was on disk into the exact shape this version understands.
+     * Unknown top-level keys are carried in `unknown` so a downgrade or a future
+     * version does not lose data the user (or a newer build) wrote.
+     */
+    function sanitizeSettings(raw) {
+      const next = { version: SETTINGS_VERSION }
+      const unknown = isPlainObject(raw) && isPlainObject(raw.unknown) ? { ...raw.unknown } : {}
+      if (isPlainObject(raw)) {
+        for (const key of Object.keys(raw)) {
+          if (key === 'unknown' || key === 'version' || key in DEFAULTS) continue
+          unknown[key] = raw[key]
+        }
+      }
+      next.fullscreen = isPlainObject(raw) && typeof raw.fullscreen === 'boolean'
+        ? raw.fullscreen
+        : DEFAULTS.fullscreen
+      next.navCollapsed = isPlainObject(raw) && typeof raw.navCollapsed === 'boolean'
+        ? raw.navCollapsed
+        : DEFAULTS.navCollapsed
+      next.unknown = unknown
+      return next
+    }
+
+    /** Last write/read problem, surfaced on the settings page. */
+    let lastError = null
+
+    function readSettings() {
+      let raw = null
+      try {
+        const text = window.localStorage.getItem(STORE_KEY)
+        if (typeof text === 'string' && text !== '') raw = JSON.parse(text)
+        lastError = null
+      } catch (error) {
+        lastError = 'read'
+        raw = null
+      }
+      return sanitizeSettings(raw)
+    }
+
+    function persist(settings) {
+      try {
+        window.localStorage.setItem(STORE_KEY, JSON.stringify(settings))
+        lastError = null
+      } catch (error) {
+        lastError = 'write'
+      }
+    }
+
+    let cache = null
+    const listeners = new Set()
+
+    function currentSettings() {
+      if (cache === null) cache = readSettings()
+      return cache
+    }
+
+    /**
+     * Push a sanitized snapshot everywhere: disk, `<html>` attributes, listeners.
+     * The `storage` event does not fire in the document that wrote it, so we
+     * notify our own subscribers here instead of waiting for the event.
+     */
+    function commit(next) {
+      cache = next
+      persist(next)
+      applyToDocument(next)
+      for (const fn of listeners) fn(next)
+      return next
+    }
+
+    function writeSettings(patch) {
+      // Base the merge on what is on disk, not on the in-memory cache: another
+      // window may have written unknown keys that this one has never seen, and
+      // a patch must not drop them.
+      const base = readSettings()
+      const merged = isPlainObject(patch) ? { ...base, ...patch } : base
+      return commit(sanitizeSettings(merged))
+    }
+
+    function resetSettings() {
+      return writeSettings({
+        fullscreen: DEFAULTS.fullscreen,
+        navCollapsed: DEFAULTS.navCollapsed,
+      })
+    }
+
+    function subscribeSettings(listener) {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    }
+
+    /** The only DOM this plugin writes outside its own subtree. */
+    function applyToDocument(settings) {
+      if (typeof document === 'undefined') return
+      const root = document.documentElement
+      if (root === null || root === undefined) return
+      root.setAttribute(FULLSCREEN_ATTR, settings.fullscreen === true ? 'on' : 'off')
+      root.setAttribute(NAV_ATTR, settings.navCollapsed === true ? 'collapsed' : 'expanded')
+    }
+
+    function clearDocument() {
+      if (typeof document === 'undefined') return
+      const root = document.documentElement
+      if (root === null || root === undefined) return
+      root.removeAttribute(FULLSCREEN_ATTR)
+      root.removeAttribute(NAV_ATTR)
+    }
+
+    /** Another window sharing this profile changed the settings. */
+    function watchStorage() {
+      const handler = (event) => {
+        if (event.key !== null && event.key !== STORE_KEY) return
+        const next = readSettings()
+        cache = next
+        applyToDocument(next)
+        for (const fn of listeners) fn(next)
+      }
+      window.addEventListener('storage', handler)
+      return () => window.removeEventListener('storage', handler)
+    }
+
+    function useSettings() {
+      const [value, setValue] = React.useState(currentSettings)
+      React.useEffect(() => {
+        // A write can land between render and effect; resync once, then subscribe.
+        setValue(currentSettings())
+        return subscribeSettings(setValue)
+      }, [])
+      return value
+    }
+    //#endregion
+
+    //#region components
+    function translateOf(props) {
+      return typeof props.t === 'function' ? props.t : (key) => key
+    }
+
+    /** Chevron, 14px, drawn by hand so a missing primitives module cannot break us. */
+    function Chevron(props) {
+      const pointsRight = props.direction === 'right'
+      return h('svg', {
+        width: 14,
+        height: 14,
+        viewBox: '0 0 16 16',
+        fill: 'none',
+        'aria-hidden': 'true',
+        focusable: 'false',
+      }, h('path', {
+        d: pointsRight ? 'M6.25 3.5 10.75 8l-4.5 4.5' : 'M9.75 3.5 5.25 8l4.5 4.5',
+        stroke: 'currentColor',
+        strokeWidth: 1.5,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+      }))
+    }
+
+    /** `settings.action`: the rail toggle that sits left of the shipped buttons. */
+    function RailToggle(props) {
+      const t = translateOf(props)
+      const settings = useSettings()
+      const buttonRef = React.useRef(null)
+      const ownedNavId = React.useRef(false)
+      const [controls, setControls] = React.useState(NAV_ID)
+      const collapsed = settings.navCollapsed === true
+
+      React.useEffect(() => {
+        // Lend the host's <nav> an id so aria-controls has something to point at.
+        const button = buttonRef.current
+        const panel = typeof button?.closest === 'function' ? button.closest(PANEL) : null
+        const nav = panel === null ? null : panel.querySelector(':scope > nav')
+        if (nav === null) return undefined
+        if (nav.id === '') {
+          nav.id = NAV_ID
+          ownedNavId.current = true
+          setControls(NAV_ID)
+        } else {
+          setControls(nav.id)
+        }
+        return () => {
+          if (ownedNavId.current && nav.isConnected !== false) nav.removeAttribute('id')
+        }
+      }, [])
+
+      const label = collapsed ? t('rail.expand') : t('rail.collapse')
+
+      return h('button', {
+        ref: buttonRef,
+        type: 'button',
+        className: 'bsp-rail-toggle',
+        'aria-expanded': collapsed ? 'false' : 'true',
+        'aria-controls': controls,
+        'aria-label': label,
+        title: label,
+        onClick: () => {
+          writeSettings({ navCollapsed: !collapsed })
+        },
+      }, h(Chevron, { direction: collapsed ? 'right' : 'left' }))
+    }
+
+    /** `settings.section.icon`: two panes, one narrow — the thing this plugin does. */
+    function SectionIcon(props) {
+      const size = typeof props.size === 'number' ? props.size : 16
+      return h('svg', {
+        width: size,
+        height: size,
+        viewBox: '0 0 16 16',
+        fill: 'none',
+        'aria-hidden': 'true',
+        focusable: 'false',
+      }, [
+        h('rect', {
+          key: 'frame',
+          x: 2,
+          y: 3,
+          width: 12,
+          height: 10,
+          rx: 2,
+          stroke: 'currentColor',
+          strokeWidth: 1.3,
+        }),
+        h('path', {
+          key: 'rail',
+          d: 'M6.5 3v10',
+          stroke: 'currentColor',
+          strokeWidth: 1.3,
+        }),
+      ])
+    }
+
+    /** `settings.section`: the two switches plus "restore defaults". */
+    function SettingsPage(props) {
+      const t = translateOf(props)
+      const settings = useSettings()
+      const [notice, setNotice] = React.useState('')
+
+      React.useEffect(() => {
+        if (notice === '') return undefined
+        const id = setTimeout(() => setNotice(''), 4000)
+        return () => clearTimeout(id)
+      }, [notice])
+
+      /** Every write goes through here, so a failed write is never silent. */
+      const write = (patch) => {
+        writeSettings(patch)
+        if (lastError === 'write') setNotice(t('page.saveFailed'))
+      }
+
+      const row = (titleKey, hintKey, checked, onToggle) => h('div', {
+        key: titleKey,
+        className: 'bsp-row',
+      }, [
+        h('div', { key: 'text', className: 'bsp-rowText' }, [
+          h('div', { key: 'label', className: 'bsp-rowLabel' }, t(titleKey)),
+          h('div', { key: 'hint', className: 'bsp-rowHint' }, t(hintKey)),
+        ]),
+        h('input', {
+          key: 'check',
+          type: 'checkbox',
+          className: 'bsp-check',
+          checked,
+          'aria-label': t(titleKey),
+          onChange: (event) => onToggle(event.target.checked),
+        }),
+      ])
+
+      return h('div', { className: 'bsp-page' }, [
+        h('div', { key: 'head', className: 'bsp-head' }, [
+          h('h2', { key: 'title', className: 'bsp-title' }, t('page.title')),
+          h('p', { key: 'intro', className: 'bsp-sub' }, t('page.intro')),
+        ]),
+        row('page.fullscreen', 'page.fullscreenHint', settings.fullscreen === true,
+          (next) => write({ fullscreen: next })),
+        row('page.navCollapsed', 'page.navCollapsedHint', settings.navCollapsed === true,
+          (next) => write({ navCollapsed: next })),
+        h('div', { key: 'actions', className: 'bsp-actions' }, [
+          h('button', {
+            key: 'reset',
+            type: 'button',
+            className: 'bsp-button',
+            onClick: () => {
+              resetSettings()
+              setNotice(lastError === 'write' ? t('page.saveFailed') : t('page.resetDone'))
+            },
+          }, t('page.reset')),
+          h('span', { key: 'notice', className: 'bsp-notice', role: 'status' }, notice),
+        ]),
+        h('p', { key: 'note', className: 'bsp-note' }, t('page.note')),
+      ])
+    }
+    //#endregion
+
+    //#region entry
+    function apply(ctx) {
+      const t = ctx.locale.bind(NS)
+      cache = readSettings()
+      applyToDocument(cache)
+
+      ctx.effect(() => ctx.locale.register(NS, { zh: ZH, en: EN }), `${NS}: dictionaries`)
+
+      ctx.effect(() => {
+        const style = document.createElement('style')
+        style.dataset.plugin = NS
+        style.textContent = CSS
+        document.head.appendChild(style)
+        return () => {
+          style.remove()
+          clearDocument()
+        }
+      }, `${NS}: styles`)
+
+      ctx.effect(() => subscribeSettings(applyToDocument), `${NS}: attributes`)
+      ctx.effect(() => watchStorage(), `${NS}: storage`)
+
+      ctx.slots.inject('settings.action', () => ctx.slots.register({
+        name: 'settings.action',
+        id: ACTION_ID,
+        order: 0,
+        locale: NS,
+      }, (props) => h(RailToggle, { t })))
+
+      ctx.slots.inject('settings.section', () => ctx.slots.register({
+        name: 'settings.section',
+        id: SECTION_ID,
+        order: SECTION_ORDER,
+        label: () => t('section.nav'),
+        locale: NS,
+      }, (props) => h(SettingsPage, { close: props.close, t })))
+
+      ctx.slots.inject('settings.section.icon', () => ctx.slots.register({
+        name: 'settings.section.icon',
+        id: SECTION_ID,
+        order: SECTION_ORDER,
+      }, SectionIcon))
+    }
+
+    const module = {
+      inject: ['slots', 'locale'],
+      apply,
+      // Test surface. The loader only reads `apply` / `inject`; the rest exist so
+      // `test/settings-page.test.mjs` can assert on the real strings and store.
+      VERSION,
+      NS,
+      CSS,
+      STORE_KEY,
+      SETTINGS_VERSION,
+      DEFAULTS,
+      FULLSCREEN_ATTR,
+      NAV_ATTR,
+      NAV_ID,
+      PANEL,
+      SECTION_ID,
+      SECTION_ORDER,
+      ACTION_ID,
+      ZH,
+      EN,
+      sanitizeSettings,
+      readSettings,
+      writeSettings,
+      resetSettings,
+      subscribeSettings,
+      applyToDocument,
+      clearDocument,
+      currentSettings,
+      lastErrorOf: () => lastError,
+      RailToggle,
+      SettingsPage,
+      SectionIcon,
+      Chevron,
     }
+    return module
   },
-})
+})

package/cordis.patch.yml

@@ -1,4 +1,8 @@
-# Placeholder bundle patch: activating the bundle loads the two halves above.
+# Bundle patch: one row for dsh-better-setting-page.
+# The client half (dsh.client) owns the whole feature: one stylesheet that turns
+# the settings dialog into a full-window page, an action button that collapses
+# the navigation rail, and a small settings section holding the two switches.
+# The host half injects nothing; it exists so this patch resolves.
 - insert:
     - id: better-setting-page
-      name: 'dsh-better-setting-page'
+      name: 'dsh-better-setting-page'

package/index.js

@@ -1,12 +1,12 @@
 /**
- * Host half of `dsh-better-setting-page` — placeholder.
+ * Host half of `dsh-better-setting-page`.
  *
- * A DSH plugin bundle is activated through its Cordis patch; this file exists so
- * the package resolves and so the real host-side code has a home. It injects
- * nothing and registers no service.
+ * The whole feature is a browser-side stylesheet plus two slot entries, so this
+ * half only has to exist for the bundle to resolve and for the Cordis patch to
+ * have something to mount. It injects no service and serves no route.
  */
 export const name = 'dsh-better-setting-page'
 export const inject = []
 export function apply(ctx) {
   void ctx
-}
+}

package/package.json

@@ -1,20 +1,25 @@
 {
   "name": "dsh-better-setting-page",
-  "version": "0.0.1",
-  "description": "Placeholder release: a full-screen settings page with a collapsible navigation rail for DeepSeek Harness. The real implementation ships in a later version.",
+  "version": "0.1.0",
+  "private": false,
+  "description": "Full-screen settings page with a collapsible navigation rail for DeepSeek Harness, plus a small page holding the two switches.",
   "license": "MIT",
   "author": { "name": "MeruSu" },
   "repository": { "type": "git", "url": "git+https://github.com/MeruSu/dsh-better-setting-page.git" },
-  "keywords": ["dsh", "deepseek-harness", "dsh-plugin", "ui"],
+  "keywords": ["dsh", "dsh-plugin", "deepseek-harness", "web-ui", "settings"],
   "type": "module",
+  "main": "index.js",
   "exports": {
     ".": "./index.js",
     "./client": "./client.js",
     "./package.json": "./package.json"
   },
-  "files": ["index.js", "client.js", "cordis.patch.yml", "README.md", "LICENSE"],
+  "files": ["index.js", "client.js", "cordis.patch.yml", "README.md", "README.zh.md", "LICENSE"],
   "dsh": {
     "bundle": { "patch": "./cordis.patch.yml" },
-    "client": { "platform": "web" }
+    "client": {
+      "platform": "web",
+      "immediately": true
+    }
   }
-}
+}