dsh-global-todo 0.6.3 → 0.6.4

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [0.6.4] — 2026-10-20
+
+The settings panel, rebuilt as an inspector instead of a stack of labelled rows.
+
+- **Header and footer, finally.** A title row with a close button, three labelled groups divided
+  by hairlines, and a save row pinned at the bottom — the token field no longer pushes the save
+  buttons into the middle of the form with a field stranded beneath them.
+- **Every field says what it does.** Help text sits under each label (`settings.*Hint`) rather than
+  being implied by the label; the label-and-control grid keeps number inputs aligned at a fixed
+  76px right-aligned box.
+- **Ingest fields dim when ingest is off**, and `New token` becomes a quiet text link on the token
+  label row (`Rotate token`) instead of a third equal-weight button.
+- **About section** shows the data file and version on labelled rows; the card sizes to its content
+  and scrolls internally when the window is short.
+- `npm run screenshots` now also photographs a settings variant, so the README image is
+  reproducible instead of hand-made.
+
 ## [0.6.3] — 2026-10-20
 
 States that were still speaking to nobody.

package/README.md

@@ -33,6 +33,8 @@ one record:
 
 ![One row opened: inline editing, attachments with 打开 / 复制路径, activity](docs/screenshots/panel-detail.png)
 
+![Settings: grouped fields, hints under each label, one save row](docs/screenshots/panel-settings.png)
+
 These are produced by `npm run screenshots` (which chains `npm run preview`): the real client
 half is rendered to static HTML with no Host and no dependencies, then photographed at 1280×720
 into `docs/screenshots/`. Playwright is not a dependency — the tool borrows the copy a DSH
@@ -339,7 +341,7 @@ npm run preview       # render the panel to preview/panel.html (+ detail and sel
 npm run screenshots   # re-photograph those previews into docs/screenshots/, 1280×720
 ```
 
-The three PNGs under `docs/screenshots/` ship with the package and are embedded in both
+The PNGs under `docs/screenshots/` ship with the package and are embedded in both
 READMEs, so re-run `npm run screenshots` whenever the panel UI changes.
 
 ```text

package/README.zh.md

@@ -30,6 +30,8 @@ DSH 自带的 `todo_write` 属于**某一个 agent 会话**：整表替换、三
 
 ![展开一条：就地编辑、附件带「打开 / 复制路径」、动态轨迹](docs/screenshots/panel-detail.png)
 
+![设置：分组字段、说明写在标签下方、底部一行保存](docs/screenshots/panel-settings.png)
+
 图都由 `npm run screenshots`（内部串起 `npm run preview`）生成：先把真实的客户端半区渲染成静态
 HTML（不依赖宿主、零依赖），再以 1280×720 拍进 `docs/screenshots/`。Playwright 不是依赖——工具
 借的是 DSH profile 里已经装好的那份，或 `DSH_PLAYWRIGHT` 指向的那份。
@@ -230,7 +232,7 @@ npm run preview       # 把面板渲染成 preview/panel.html（另附详情态
 npm run screenshots   # 把这些预览重新拍成 docs/screenshots/，1280×720
 ```
 
-`docs/screenshots/` 下那三张 PNG 会随包发布、并嵌在两份 README 里，所以面板 UI 一改就要重跑
+`docs/screenshots/` 下那几张 PNG 会随包发布、并嵌在两份 README 里，所以面板 UI 一改就要重跑
 `npm run screenshots`。
 
 ```text

package/lib/client.js

@@ -50,7 +50,7 @@ window.__ModuleLoader__.load({
      * different mechanisms (restart vs. hot reload), so "which one am I looking
      * at" needs an answer that the bundle itself carries.
      */
-    const UI_REV = 'ui39'
+    const UI_REV = 'ui40'
     /** Last language resolved for the shell; module-level so a fetch failure can be worded too. */
     let activeLang = 'zh'
 
@@ -100,12 +100,18 @@ window.__ModuleLoader__.load({
       'settings.ingestEnable': '启用外部写入',
       'settings.token': '访问 token',
       'settings.tokenSet': '已设置，留空保持不变',
-      'settings.generate': '生成新 token',
-      'settings.confirmBelow': '低于此置信度进收件箱',
+      'settings.generate': '轮换 token',
+      'settings.confirmBelow': '置信度阈值',
       'settings.save': '保存',
       'settings.cancel': '取消',
       'settings.saved': '设置已保存',
       'settings.about': '关于',
+      'settings.remindersHint': '到期时在面板顶部提示，并按设置提前。',
+      'settings.ingestHint': '允许其他工具带 token 写入，先进收件箱。',
+      'settings.tokenHint': '留空表示不改动；轮换后旧 token 立刻失效。',
+      'settings.confirmBelowHint': '置信度低于这个值的条目进收件箱，不进清单。',
+      'settings.storeFile': '数据文件',
+      'settings.version': '版本',
       'inbox.explain': '以下由外部写入或 Agent 提交，确认后才进入清单。',
       'notice.exported': '已导出 {n} 条待办',
       'notice.imported': '已导入 {n} 条（合并，现有共 {total} 条）',
@@ -347,12 +353,18 @@ window.__ModuleLoader__.load({
       'settings.ingestEnable': 'Accept external writes',
       'settings.token': 'Access token',
       'settings.tokenSet': 'Set — leave blank to keep',
-      'settings.generate': 'New token',
-      'settings.confirmBelow': 'Below this confidence → inbox',
+      'settings.generate': 'Rotate token',
+      'settings.confirmBelow': 'Confidence threshold',
       'settings.save': 'Save',
       'settings.cancel': 'Cancel',
       'settings.saved': 'Settings saved',
       'settings.about': 'About',
+      'settings.remindersHint': 'Flag a deadline at the top of the panel when it comes due.',
+      'settings.ingestHint': 'Let other tools POST todos with a token; they start in the inbox.',
+      'settings.tokenHint': 'Leave blank to keep the current one; rotating invalidates the old token.',
+      'settings.confirmBelowHint': 'Items below this confidence go to the inbox instead of the list.',
+      'settings.storeFile': 'Data file',
+      'settings.version': 'Version',
       'inbox.explain': 'Written by external sources or the agent. Confirm it before it joins the list.',
       'notice.exported': 'Exported {n} todos',
       'notice.imported': 'Imported {n} (merged; {total} in the list now)',
@@ -1102,9 +1114,35 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
   border-radius: 6px; cursor: pointer; max-width: 300px; overflow: hidden; text-overflow: ellipsis;
   white-space: nowrap; }
 .gt-reminder-item:hover { background: var(--dsw-alias-button-ghost-active-fill); }
-.gt-settings { display: flex; flex-direction: column; gap: 12px; padding: 16px; width: 340px;
-  box-sizing: border-box; border: 1px solid var(--dsw-alias-border-l2); border-radius: 12px;
-  background: var(--dsw-alias-bg-overlay); font-size: 13px; line-height: 20px; }
+.gt-settings { display: flex; flex-direction: column; width: 360px; max-width: 100%;
+  box-sizing: border-box; overflow: hidden; border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 12px; background: var(--dsw-alias-bg-overlay); font-size: 13px; line-height: 20px; }
+.gt-settings-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between;
+  gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--dsw-alias-border-l1); }
+.gt-settings-title { font-size: 14px; font-weight: 600; }
+.gt-settings-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 16px;
+  padding: 14px 16px; overflow: auto; min-height: 0; }
+.gt-settings-group { display: flex; flex-direction: column; gap: 8px; }
+.gt-settings-group + .gt-settings-group { border-top: 1px solid var(--dsw-alias-border-l1); padding-top: 14px; }
+.gt-settings-group-title { font-size: 12px; line-height: 18px; font-weight: 600;
+  color: var(--dsw-alias-label-secondary); }
+.gt-check-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
+.gt-check-row input { margin: 3px 0 0; flex: 0 0 auto; }
+.gt-check-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.gt-check-label { color: var(--dsw-alias-label-primary); }
+.gt-hint { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); }
+.gt-field { display: flex; flex-direction: column; gap: 6px; }
+.gt-field[data-muted="1"], .gt-field-row[data-muted="1"] { opacity: .55; }
+.gt-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+.gt-field-label { font-size: 13px; color: var(--dsw-alias-label-primary); }
+.gt-field-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
+.gt-input-num { width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
+.gt-link-btn { border: none; background: transparent; padding: 0; font: inherit; font-size: 12px;
+  color: var(--dsw-alias-link); cursor: pointer; }
+.gt-link-btn:disabled { color: var(--dsw-alias-label-secondary); cursor: default; }
+.gt-about-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: baseline; gap: 8px; }
+.gt-settings-foot { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 8px;
+  padding: 12px 16px; border-top: 1px solid var(--dsw-alias-border-l1); }
 .gt-group-select { display: none; min-height: 28px; max-width: 150px; padding: 0 8px; font: inherit;
   font-size: 12.5px; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-1);
   border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; }
@@ -1114,8 +1152,7 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
   line-height: 20px; }
 .gt-settings-path { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .gt-settings .gt-input { flex: 0 0 auto; width: 100%; min-height: 32px; }
-.gt-settings .gt-check-line .gt-input { width: 64px; }
-.gt-settings-head { font-weight: 650; font-size: 14px; }
+.gt-settings .gt-input-num { width: 76px; }
 .gt-check-line { display: flex; align-items: center; gap: 8px; justify-content: flex-start;
   color: var(--dsw-alias-label-primary); }
 .gt-settings-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@@ -2169,6 +2206,9 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
       // The preview harness cannot re-render after a click, so it may ask to start in
       // selection mode; a person toggles it with the `选择` control.
       const [selectMode, setSelectMode] = useState(props.initialSelectMode === true)
+      // Only the static preview asks for this: the panel opens settings by click, but the
+      // SSR harness cannot click, so the screenshot variant has to start there.
+      const initialSettingsOpen = props.initialSettingsOpen === true
       // The picker's filters mirror the shell's own visibility rule, but the shape of the
       // real snapshot has never been observable from here — a preview fixture is written by
       // the same hand as the filter, so it can only confirm itself. Report the shape once per
@@ -2187,7 +2227,7 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
       const [importAsk, setImportAsk] = useState(null)
       // One settings popover: reminders and the external door both need a place a person can
       // reach without curl.
-      const [settingsOpen, setSettingsOpen] = useState(false)
+      const [settingsOpen, setSettingsOpen] = useState(initialSettingsOpen)
       const [settingsBox, setSettingsBox] = useState(null)
       // The detail card's breakpoint follows the panel's own width, not the viewport: the
       // slot is ~265px narrower than the window, so a viewport query opens the two-column
@@ -2436,13 +2476,15 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
       useEffect(() => {
         const element = innerRef.current
         if (element === null || typeof window === 'undefined') return undefined
+        // The static preview supplies a `window` stub without event plumbing.
+        const listen = typeof window.addEventListener === 'function'
         const measure = () => setPanelWidth(element.getBoundingClientRect().width)
         measure()
-        window.addEventListener('resize', measure)
+        if (listen === true) window.addEventListener('resize', measure)
         const observer = typeof window.ResizeObserver === 'function' ? new window.ResizeObserver(measure) : null
         if (observer !== null) observer.observe(element)
         return () => {
-          window.removeEventListener('resize', measure)
+          if (listen === true) window.removeEventListener('resize', measure)
           if (observer !== null) observer.disconnect()
         }
       }, [])
@@ -2457,14 +2499,19 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
           if (element === null) return
           const rect = element.getBoundingClientRect()
           setSettingsBox({
-            top: Math.round(rect.top + 210),
+            // Just under the title block: high enough that the whole card fits, low enough
+            // that it never covers the panel title or the header actions.
+            top: Math.round(rect.top + 56),
             right: Math.round(window.innerWidth - rect.right + 20),
             bottom: Math.round(window.innerHeight - rect.bottom + 20),
           })
         }
+        const listen = typeof window.addEventListener === 'function'
         measure()
-        window.addEventListener('resize', measure)
-        return () => window.removeEventListener('resize', measure)
+        if (listen === true) window.addEventListener('resize', measure)
+        return () => {
+          if (listen === true) window.removeEventListener('resize', measure)
+        }
       }, [settingsOpen, lang])
 
       useEffect(() => {
@@ -3286,77 +3333,141 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
                           position: 'fixed',
                           top: `${settingsBox.top}px`,
                           right: `${settingsBox.right}px`,
-                          bottom: `${settingsBox.bottom}px`,
-                          maxHeight: 'none',
-                          overflow: 'auto',
+                          // Height follows the content, capped by the room below: stretching to
+                          // `bottom` left a tall empty card with the footer stranded at the floor.
+                          maxHeight: `calc(100dvh - ${settingsBox.top + 20}px)`,
                           zIndex: 40,
                         },
                 },
-                h('div', { className: 'gt-settings-head' }, t('settings.title')),
-                h('div', { className: 'gt-section-title' }, t('settings.reminders')),
-                h(
-                  'label',
-                  { className: 'gt-check-line' },
-                  h('input', { type: 'checkbox', checked: remindersDraft, onChange: (event) => setRemindersDraft(event.target.checked) }),
-                  t('settings.remindersEnable'),
-                ),
                 h(
-                  'label',
-                  { className: 'gt-check-line' },
-                  t('settings.lead'),
-                  h('input', {
-                    type: 'number',
-                    min: 0,
-                    max: 1440,
-                    className: 'gt-input gt-input-xs',
-                    value: leadDraft,
-                    onChange: (event) => setLeadDraft(event.target.value),
-                  }),
+                  'div',
+                  { className: 'gt-settings-head' },
+                  h('span', { className: 'gt-settings-title' }, t('settings.title')),
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'gt-iconbtn',
+                      title: t('settings.cancel'),
+                      'aria-label': t('settings.cancel'),
+                      onClick: () => setSettingsOpen(false),
+                    },
+                    h(Icon, { name: 'close', size: 13 }),
+                  ),
                 ),
-                h('div', { className: 'gt-section-title' }, t('settings.ingest')),
                 h(
-                  'label',
-                  { className: 'gt-check-line' },
-                  h('input', { type: 'checkbox', checked: ingestDraft, onChange: (event) => setIngestDraft(event.target.checked) }),
-                  t('settings.ingestEnable'),
+                  'div',
+                  { className: 'gt-settings-body' },
+                  h(
+                    'div',
+                    { className: 'gt-settings-group' },
+                    h('div', { className: 'gt-settings-group-title' }, t('settings.reminders')),
+                    h(
+                      'label',
+                      { className: 'gt-check-row' },
+                      h('input', { type: 'checkbox', checked: remindersDraft, onChange: (event) => setRemindersDraft(event.target.checked) }),
+                      h(
+                        'span',
+                        { className: 'gt-check-main' },
+                        h('span', { className: 'gt-check-label' }, t('settings.remindersEnable')),
+                        h('span', { className: 'gt-hint' }, t('settings.remindersHint')),
+                      ),
+                    ),
+                    h(
+                      'div',
+                      { className: 'gt-field-row' },
+                      h('label', { className: 'gt-field-label', htmlFor: 'gt-lead' }, t('settings.lead')),
+                      h('input', {
+                        id: 'gt-lead',
+                        type: 'number',
+                        min: 0,
+                        max: 1440,
+                        className: 'gt-input gt-input-num',
+                        disabled: remindersDraft !== true,
+                        value: leadDraft,
+                        onChange: (event) => setLeadDraft(event.target.value),
+                      }),
+                    ),
+                  ),
+                  h(
+                    'div',
+                    { className: 'gt-settings-group' },
+                    h('div', { className: 'gt-settings-group-title' }, t('settings.ingest')),
+                    h(
+                      'label',
+                      { className: 'gt-check-row' },
+                      h('input', { type: 'checkbox', checked: ingestDraft, onChange: (event) => setIngestDraft(event.target.checked) }),
+                      h(
+                        'span',
+                        { className: 'gt-check-main' },
+                        h('span', { className: 'gt-check-label' }, t('settings.ingestEnable')),
+                        h('span', { className: 'gt-hint' }, t('settings.ingestHint')),
+                      ),
+                    ),
+                    h(
+                      'div',
+                      { className: 'gt-field', 'data-muted': ingestDraft === true ? '0' : '1' },
+                      h(
+                        'div',
+                        { className: 'gt-field-head' },
+                        h('label', { className: 'gt-field-label', htmlFor: 'gt-token' }, t('settings.token')),
+                        h('button', { type: 'button', className: 'gt-link-btn', disabled: ingestDraft !== true, onClick: generateToken }, t('settings.generate')),
+                      ),
+                      h('input', {
+                        id: 'gt-token',
+                        className: 'gt-input',
+                        type: 'password',
+                        disabled: ingestDraft !== true,
+                        value: tokenDraft,
+                        placeholder:
+                          state.health?.settings?.ingest?.tokenSet === true ? t('settings.tokenSet') : t('settings.token'),
+                        autoComplete: 'new-password',
+                        onChange: (event) => setTokenDraft(event.target.value),
+                      }),
+                      h('span', { className: 'gt-hint' }, t('settings.tokenHint')),
+                    ),
+                    h(
+                      'div',
+                      { className: 'gt-field-row', 'data-muted': ingestDraft === true ? '0' : '1' },
+                      h('label', { className: 'gt-field-label', htmlFor: 'gt-below' }, t('settings.confirmBelow')),
+                      h('input', {
+                        id: 'gt-below',
+                        type: 'number',
+                        min: 0,
+                        max: 1,
+                        step: 0.05,
+                        className: 'gt-input gt-input-num',
+                        disabled: ingestDraft !== true,
+                        value: belowDraft,
+                        onChange: (event) => setBelowDraft(event.target.value),
+                      }),
+                    ),
+                    h('span', { className: 'gt-hint' }, t('settings.confirmBelowHint')),
+                  ),
+                  h(
+                    'div',
+                    { className: 'gt-settings-group' },
+                    h('div', { className: 'gt-settings-group-title' }, t('settings.about')),
+                    h(
+                      'div',
+                      { className: 'gt-about-row' },
+                      h('span', { className: 'gt-field-label' }, t('settings.storeFile')),
+                      h('span', { className: 'gt-mono gt-settings-path', title: state.health?.store?.file ?? '' }, state.health?.store?.file ?? ''),
+                    ),
+                    h(
+                      'div',
+                      { className: 'gt-about-row' },
+                      h('span', { className: 'gt-field-label' }, t('settings.version')),
+                      h('span', { className: 'gt-mono gt-hint' }, `v${state.health?.version ?? ''} · ${UI_REV}`),
+                    ),
+                  ),
                 ),
-                h('input', {
-                  className: 'gt-input',
-                  type: 'password',
-                  value: tokenDraft,
-                  placeholder:
-                    state.health?.settings?.ingest?.tokenSet === true ? t('settings.tokenSet') : t('settings.token'),
-                  autoComplete: 'new-password',
-                  onChange: (event) => setTokenDraft(event.target.value),
-                }),
                 h(
                   'div',
-                  { className: 'gt-settings-row' },
-                  h('button', { type: 'button', className: 'gt-btn gt-btn-quiet', onClick: generateToken }, t('settings.generate')),
+                  { className: 'gt-settings-foot' },
                   h('button', { type: 'button', className: 'gt-btn gt-btn-quiet', onClick: () => setSettingsOpen(false) }, t('settings.cancel')),
                   h('button', { type: 'button', className: 'gt-btn gt-btn-primary', onClick: () => void saveSettings() }, t('settings.save')),
                 ),
-                h(
-                  'label',
-                  { className: 'gt-check-line' },
-                  t('settings.confirmBelow'),
-                  h('input', {
-                    type: 'number',
-                    min: 0,
-                    max: 1,
-                    step: 0.05,
-                    className: 'gt-input gt-input-xs',
-                    value: belowDraft,
-                    onChange: (event) => setBelowDraft(event.target.value),
-                  }),
-                ),
-                h('div', { className: 'gt-section-title' }, t('settings.about')),
-                h(
-                  'div',
-                  { className: 'gt-muted gt-mono gt-settings-path', title: state.health?.store?.file ?? '' },
-                  state.health?.store?.file ?? '',
-                ),
-                h('div', { className: 'gt-muted' }, `v${state.health?.version ?? ''} · ${UI_REV}`),
               )
             : null,
 

package/lib/index.js

@@ -36,7 +36,7 @@ import { createStore, resolveStorePath } from './store.js'
 import { createTools } from './tools.js'
 
 /** Must equal `package.json`'s version; `npm run check` enforces that. */
-export const VERSION = '0.6.3'
+export const VERSION = '0.6.4'
 
 /** Plugin id. Also the Loader row id in `cordis.patch.yml`. */
 export const name = 'dsh-global-todo'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-global-todo",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "icon": "./docs/icon.svg",
   "description": "Global, cross-session todos for DeepSeek Harness: one list owned by the human and the agent together, with creation time, attached documents and links, and one-click hand-off to an agent session. 全局待办：跨会话一份清单，记录加入时间，可挂文档与地址，可一键交给 Agent 继续干。",
   "type": "module",