dsh-global-todo 0.6.3 → 0.6.5

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## [0.6.5] — 2026-10-20
+
+The three loose ends the spec called out but the earlier passes left behind.
+
+- **Five type sizes, for real.** 12.5/11.5/10.5 collapse into 12 and 11, so the panel now uses
+  exactly 20 / 14 / 13 / 12 / 11 — one ladder instead of eight near-identical steps.
+- **Group actions move behind one kebab.** `Collect` and `Exempt` stop competing with the group
+  title; an exemption keeps a small always-visible mute mark (it is a state, not an action) and
+  the menu states both intents in words (`Collect from this conversation`, `Mute this workspace`).
+- **Escape closes the innermost layer.** Settings, then the add form, then the open row — and a
+  click outside the settings card dismisses it, matching every other popover. The gear toggles.
+
+## [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 = 'ui41'
     /** Last language resolved for the shell; module-level so a fetch failure can be worded too. */
     let activeLang = 'zh'
 
@@ -100,12 +100,22 @@ 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': '关于',
+      'group.actions': '分组操作',
+      'group.capture': '从本对话抓取',
+      'group.exemptOn': '本工作区免打扰',
+      'group.exemptOff': '取消本工作区免打扰',
+      '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 +357,22 @@ 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',
+      'group.actions': 'Group actions',
+      'group.capture': 'Collect from this conversation',
+      'group.exemptOn': 'Mute this workspace',
+      'group.exemptOff': 'Unmute this workspace',
+      '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)',
@@ -971,7 +991,7 @@ window.__ModuleLoader__.load({
   font: inherit; font-size: 13px; padding: 0; min-width: 0; }
 .gt-search input:focus { outline: none; }
 .gt-search:focus-within { border-color: var(--dsw-alias-brand-primary); }
-.gt-kbd { font-size: 10.5px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 4px;
+.gt-kbd { font-size: 11px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 4px;
   padding: 0 4px; color: var(--dsw-alias-label-secondary); }
 .gt-dir { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
   color: var(--dsw-alias-label-secondary); border: 1px solid var(--dsw-alias-border-l1);
@@ -1002,7 +1022,7 @@ window.__ModuleLoader__.load({
    the two toggles. Chips stay for facts about a todo (tags, levels, notes). */
 .gt-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--dsw-alias-bg-layer-2); }
 .gt-tab { border: none; background: transparent; color: var(--dsw-alias-label-secondary); font: inherit;
-  font-size: 12.5px; border-radius: 6px; padding: 0 10px; min-height: 24px; box-sizing: border-box;
+  font-size: 12px; border-radius: 6px; padding: 0 10px; min-height: 24px; box-sizing: border-box;
   cursor: pointer; white-space: nowrap; }
 .gt-tab:hover { color: var(--dsw-alias-label-primary); }
 .gt-tab[data-on="1"] { background: var(--dsw-alias-button-ghost-active-fill); color: var(--dsw-alias-label-primary); font-weight: 600; }
@@ -1035,29 +1055,26 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
   display: inline-flex; align-items: center; gap: 6px; font: inherit; padding: 2px 0; }
 .gt-group-head svg { transition: transform .12s ease; transform: rotate(90deg); }
 .gt-group[data-collapsed="1"] .gt-group-head svg { transform: rotate(0deg); }
-.gt-group-action { margin-left: 4px; border: 1px solid transparent; background: transparent; color: inherit;
-  border-radius: 999px; padding: 3px 8px; min-height: 24px; box-sizing: border-box; font: inherit;
-  font-size: 0; letter-spacing: .04em; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
-  opacity: .72; transition: opacity .12s ease; }
-.gt-group:hover .gt-group-action, .gt-group-action:focus-visible { font-size: 11px; }
-.gt-group:hover .gt-group-action, .gt-group-action:focus-visible { opacity: 1; }
-.gt-group-action:hover { color: var(--dsw-alias-label-primary); border-color: var(--dsw-alias-border-l2); }
-/* An exemption is a state, not an action: it stays visible and reads as "on" without a hover. */
-.gt-group-action[data-on="1"] { opacity: 1; color: var(--dsw-alias-label-primary);
-  border-color: var(--dsw-alias-border-l2); }
+.gt-group-flag { margin-left: 2px; display: inline-flex; align-items: center; color: var(--dsw-alias-label-secondary); }
+/* The group kebab stays quiet until the row is hovered or focused. */
+.gt-group-head .gt-iconbtn { margin-left: 2px; min-width: 24px; min-height: 24px; opacity: 0;
+  transition: opacity .12s ease; }
+.gt-group:hover .gt-group-head .gt-iconbtn, .gt-group-head .gt-iconbtn:focus-visible,
+.gt-group-head .gt-iconbtn[aria-expanded="true"] { opacity: .72; }
+.gt-group-head .gt-iconbtn:hover { opacity: 1; }
 .gt-group-count { color: var(--dsw-alias-label-secondary); font-size: 12px; font-weight: 400; }
 /* A group's level is redundant while it is expanded — the rows show it. */
 .gt-group:not([data-collapsed="1"]) .gt-group-head .gt-level { display: none; }
 .gt-group-label { color: var(--dsw-alias-label-primary); font-weight: 600; font-size: 12px;
   line-height: 18px; max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.gt-level { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; padding: 0;
+.gt-level { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 0;
   border: none; color: var(--dsw-alias-label-secondary); }
 .gt-level[data-level="urgent"] { color: var(--dsw-alias-state-error-primary); border-color: var(--dsw-alias-state-error-primary); font-weight: 600; }
 .gt-level[data-level="high"] { color: var(--dsw-alias-state-warn-primary); border-color: var(--dsw-alias-state-warn-primary); }
 .gt-level[data-level="low"] { color: var(--dsw-alias-label-secondary); }
 .gt-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--dsw-alias-state-success-primary);
   display: inline-block; }
-.gt-here { font-size: 10.5px; padding: 0 5px; border-radius: 999px; border: 1px solid var(--dsw-alias-brand-primary);
+.gt-here { font-size: 11px; padding: 0 5px; border-radius: 999px; border: 1px solid var(--dsw-alias-brand-primary);
   color: var(--dsw-alias-brand-primary); }
 .gt-list { display: flex; flex-direction: column; gap: 8px; }
 .gt-item { position: relative; display: flex; flex-direction: column; gap: 8px;
@@ -1090,7 +1107,7 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
 .gt-item-title { font-weight: 600; font-size: 14px; word-break: break-word; line-height: 22px;
   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .gt-input-xs { width: 64px; flex: 0 0 auto; min-width: 0; padding: 0 8px; min-height: 28px;
-  box-sizing: border-box; font-size: 12.5px; }
+  box-sizing: border-box; font-size: 12px; }
 .gt-seq { font-variant-numeric: tabular-nums; color: var(--dsw-alias-label-secondary); }
 .gt-reminders { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px;
   min-height: 36px; box-sizing: border-box; border: 1px solid var(--dsw-alias-border-l1);
@@ -1102,20 +1119,45 @@ 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);
+  font-size: 12px; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-1);
   border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; }
 .gt-root[data-wide="0"] .gt-group-tabs { display: none; }
 .gt-root[data-wide="0"] .gt-group-select { display: inline-flex; align-items: center; }
 .gt-inbox-note { padding: 0 2px 2px; color: var(--dsw-alias-label-secondary); font-size: 13px;
   line-height: 20px; }
-.gt-settings-path { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gt-settings-path { font-size: 11px; 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; }
@@ -1133,7 +1175,7 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .gt-truncated { color: var(--dsw-alias-state-warn-primary); font-size: 12px; }
 .gt-bulk-tag { flex: 0 1 120px; min-width: 90px; }
-.gt-inbox { margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 600;
+.gt-inbox { margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 600;
   color: var(--dsw-alias-state-warn-primary); border: 1px solid var(--dsw-alias-state-warn-primary);
   vertical-align: 1px; }
 .gt-item[data-status="done"] .gt-item-title, .gt-item[data-status="cancelled"] .gt-item-title {
@@ -1192,17 +1234,17 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
 .gt-link-main { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
 .gt-note-item { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; }
 .gt-note-item + .gt-note-item { border-top: 1px solid var(--dsw-alias-border-l1); }
-.gt-note-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--dsw-alias-label-secondary);
+.gt-note-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dsw-alias-label-secondary);
   white-space: nowrap; }
 .gt-note-text { font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-width: 68ch; }
 .gt-link a { color: var(--dsw-alias-brand-primary); text-decoration: none; }
 .gt-link a:hover { text-decoration: underline; }
 .gt-link-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
-.gt-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
+.gt-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
   color: var(--dsw-alias-label-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .gt-banner { border-radius: 9px; padding: 8px 11px; border: 1px solid var(--dsw-alias-state-error-primary);
   color: var(--dsw-alias-state-error-primary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-.gt-activity { display: flex; flex-direction: column; gap: 3px; color: var(--dsw-alias-label-secondary); font-size: 11.5px; }
+.gt-activity { display: flex; flex-direction: column; gap: 3px; color: var(--dsw-alias-label-secondary); font-size: 12px; }
 .gt-empty { display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center;
   color: var(--dsw-alias-label-secondary); padding: 42px 16px; text-align: center; flex: 1; }
 .gt-empty-title { font-size: 14px; color: var(--dsw-alias-label-primary); }
@@ -2169,6 +2211,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 +2232,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
@@ -2371,6 +2416,8 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
       // The wide-screen detail card floats over the panel, so its offsets are measured from
       // the panel's own column rather than derived from the viewport width.
       const innerRef = useRef(null)
+      const settingsRef = useRef(null)
+      const settingsTriggerRef = useRef(null)
       const [detailAnchor, setDetailAnchor] = useState(null)
       const titleRef = useRef(null)
       const searchRef = useRef(null)
@@ -2436,13 +2483,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 +2506,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(() => {
@@ -2525,8 +2579,8 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
         return () => clearInterval(timer)
       }, [reload])
 
-      // Keyboard: `/` search, `n` new, Escape collapse — but never while the
-      // user is typing in a field.
+      // Keyboard: `/` search, `n` new, Escape closes the innermost layer — but never
+      // while the user is typing in a field, where the first Escape only drops focus.
       useEffect(() => {
         if (typeof document === 'undefined') return undefined
         const onKey = (event) => {
@@ -2536,8 +2590,16 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
             target !== undefined &&
             (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable === true)
           if (event.key === 'Escape') {
-            setExpandedId('')
             if (typing && typeof target.blur === 'function') target.blur()
+            if (settingsOpen) {
+              setSettingsOpen(false)
+              return
+            }
+            if (adding) {
+              setAdding(false)
+              return
+            }
+            setExpandedId('')
             return
           }
           if (typing || event.metaKey || event.ctrlKey || event.altKey) return
@@ -2551,7 +2613,23 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
         }
         document.addEventListener('keydown', onKey)
         return () => document.removeEventListener('keydown', onKey)
-      }, [])
+      }, [settingsOpen, adding])
+
+      // The settings card floats over the list, so a click anywhere else dismisses it
+      // the way every other popover on the web does.
+      useEffect(() => {
+        if (!settingsOpen || typeof document === 'undefined') return undefined
+        const onDown = (event) => {
+          const card = settingsRef.current
+          const gear = settingsTriggerRef.current
+          if (card === null) return
+          if (card.contains(event.target) === true) return
+          if (gear !== null && gear.contains(event.target) === true) return
+          setSettingsOpen(false)
+        }
+        document.addEventListener('mousedown', onDown)
+        return () => document.removeEventListener('mousedown', onDown)
+      }, [settingsOpen])
 
       const run = async (id, operation) => {
         setBusyId(id)
@@ -3226,15 +3304,20 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
               'div',
               { className: 'gt-head-actions' },
               h(
-                'button',
-                {
-                  type: 'button',
-                  className: 'gt-iconbtn',
-                  title: t('settings.title'),
-                  'aria-label': t('settings.title'),
-                  onClick: openSettings,
-                },
-                h(Icon, { name: 'gear' }),
+                'span',
+                { ref: settingsTriggerRef, style: { display: 'inline-flex' } },
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'gt-iconbtn',
+                    title: t('settings.title'),
+                    'aria-label': t('settings.title'),
+                    'aria-expanded': settingsOpen,
+                    onClick: () => (settingsOpen ? setSettingsOpen(false) : openSettings()),
+                  },
+                  h(Icon, { name: 'gear' }),
+                ),
               ),
               h(
                 'button',
@@ -3276,6 +3359,7 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
             ? h(
                 'div',
                 {
+                  ref: settingsRef,
                   className: 'gt-settings',
                   role: 'dialog',
                   'aria-label': t('settings.title'),
@@ -3286,77 +3370,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,
 
@@ -3997,39 +4145,59 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
                             ? h('span', { className: 'gt-dot', title: t('meta.session.live'), 'aria-label': t('meta.session.live') })
                             : null,
                         ),
-                        group.sessionId === undefined
-                          ? null
-                          : h(
-                              'button',
-                              {
-                                type: 'button',
-                                className: 'gt-group-action',
-                                title: t('action.captureGroupHint'),
-                                onClick: (event) => {
-                                  event.stopPropagation()
-                                  void requestCapture(group.sessionId, group.label)
-                                },
-                              },
-                              h(Icon, { name: 'doc', size: 11 }),
-                              t('action.captureShort'),
-                            ),
-                        group.dir === undefined || group.dir === ''
-                          ? null
-                          : h(
-                              'button',
+                        // An exemption is a state, so it keeps a small always-visible mark; the
+                        // actions themselves live behind one kebab instead of two text buttons
+                        // competing with the group title.
+                        exemptGroup
+                          ? h(
+                              'span',
                               {
-                                type: 'button',
-                                className: 'gt-group-action',
-                                'data-on': exemptGroup ? '1' : '0',
-                                title: exemptGroup ? t('action.exemptHintOn') : t('action.exemptHint'),
-                                onClick: (event) => {
-                                  event.stopPropagation()
-                                  void toggleExemptWorkspace(group.dir, !exemptGroup)
-                                },
+                                className: 'gt-group-flag',
+                                title: t('action.exemptHintOn'),
                               },
                               h(Icon, { name: 'mute', size: 11 }),
-                              exemptGroup ? t('action.exemptOn') : t('action.exempt'),
-                            ),
+                            )
+                          : null,
+                        [
+                          group.sessionId === undefined
+                            ? null
+                            : {
+                                key: 'capture',
+                                label: t('action.captureShort'),
+                                icon: 'doc',
+                                onSelect: () => void requestCapture(group.sessionId, group.label),
+                              },
+                          group.dir === undefined || group.dir === ''
+                            ? null
+                            : {
+                                key: 'exempt',
+                                label: exemptGroup ? t('action.exemptOn') : t('action.exempt'),
+                                icon: 'mute',
+                                onSelect: () => void toggleExemptWorkspace(group.dir, !exemptGroup),
+                              },
+                        ].filter((item) => item !== null).length === 0
+                          ? null
+                          : h(Menu, {
+                              label: t('group.actions'),
+                              items: [
+                                group.sessionId === undefined
+                                  ? null
+                                  : {
+                                      key: 'capture',
+                                      label: t('group.capture'),
+                                      icon: 'doc',
+                                      onSelect: () => void requestCapture(group.sessionId, group.label),
+                                    },
+                                group.dir === undefined || group.dir === ''
+                                  ? null
+                                  : {
+                                      key: 'exempt',
+                                      label: exemptGroup ? t('group.exemptOff') : t('group.exemptOn'),
+                                      icon: 'mute',
+                                      onSelect: () => void toggleExemptWorkspace(group.dir, !exemptGroup),
+                                    },
+                              ].filter((item) => item !== null && item !== undefined),
+                            }),
                       ),
                       isCollapsed
                         ? 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.5'
 
 /** 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.5",
   "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",