dsh-global-todo 0.6.0 → 0.6.2

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [0.6.2] — 2026-10-20
+
+The narrow-width details the spec called for after the two-column work.
+
+- **Grouping becomes a dropdown when the column is narrow.** The three segmented buttons collapse
+  into one `select` (Conversation / Time / Level) below 960px, so the toolbar stops taking a row
+  for grouping at the width where rows are already tight.
+- **The inbox explains itself.** Opening the inbox view now leads with one line: items were written
+  by external sources or the agent and only join the list after confirmation.
+- **Toasts are anchored to the panel.** `position: absolute` on the panel root instead of `fixed`
+  against the viewport, so a notice appears above the list rather than at the bottom of the window.
+
+## [0.6.1] — 2026-10-20
+
+The follow-up pass from the design spec: the breakpoint now follows the panel, not the window,
+and the form stops competing with itself.
+
+- **Panel-measured breakpoint.** A `ResizeObserver` on the column sets `data-wide`; the detail card
+  becomes a right-hand card only when the column itself is at least 960px. At 1100 the detail now
+  expands inline under its row instead of squeezing the list into a 416px strip.
+- **Inline detail stops repeating itself.** The card title is hidden in inline mode (the row title
+  is directly above it) and keeps only the close affordance.
+- **Add form.** The header action turns into an icon-only close while the form is open, so there is
+  one `+ Add` on screen; the form orders 更多字段 before 添加, matching the spec.
+- **Rows are 72px tall** at minimum, matching the spec's rhythm, and the detail/card radius is 10px.
+- Dark theme verified against the real host: layer-2 rows, overlay inspector and ghost-active
+  selected states all resolve correctly.
+
 ## [0.6.0] — 2026-10-20
 
 A design pass over the whole panel: one list, fewer competing controls, one type scale.

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 = 'ui36'
+    const UI_REV = 'ui38'
     /** Last language resolved for the shell; module-level so a fetch failure can be worded too. */
     let activeLang = 'zh'
 
@@ -106,6 +106,7 @@ window.__ModuleLoader__.load({
       'settings.cancel': '取消',
       'settings.saved': '设置已保存',
       'settings.about': '关于',
+      'inbox.explain': '以下由外部写入或 Agent 提交，确认后才进入清单。',
       'notice.exported': '已导出 {n} 条待办',
       'notice.imported': '已导入 {n} 条（合并，现有共 {total} 条）',
       'import.badJson': '这个文件不是合法的 JSON',
@@ -347,6 +348,7 @@ window.__ModuleLoader__.load({
       'settings.cancel': 'Cancel',
       'settings.saved': 'Settings saved',
       'settings.about': 'About',
+      '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)',
       'import.badJson': 'That file is not valid JSON',
@@ -908,7 +910,7 @@ window.__ModuleLoader__.load({
     // ------------------------------------------------------------------ 样式
 
     const CSS = `
-.gt-root { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0;
+.gt-root { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0;
   color: var(--dsw-alias-label-primary); font-size: 13px; line-height: 1.5; }
 .gt-inner { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 1040px; min-width: 0;
   box-sizing: border-box; margin: 0 auto; padding: 20px 24px 32px; flex: 1; }
@@ -1051,7 +1053,7 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
 .gt-list { display: flex; flex-direction: column; gap: 8px; }
 .gt-item { position: relative; display: flex; flex-direction: column; gap: 8px;
   background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 12px; padding: 12px 14px; }
+  border-radius: 10px; padding: 12px 14px; min-height: 72px; box-sizing: border-box; }
 .gt-item:hover { border-color: var(--dsw-alias-border-l2); }
 .gt-item[data-status="doing"] { border-left: 2px solid var(--dsw-alias-brand-primary); }
 .gt-item[data-overdue="1"] { border-left: 2px solid var(--dsw-alias-state-error-primary); }
@@ -1091,6 +1093,13 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
 .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-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; }
+.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 .gt-input { flex: 0 0 auto; width: 100%; min-height: 32px; }
 .gt-settings .gt-check-line .gt-input { width: 64px; }
@@ -1105,6 +1114,9 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
   background: var(--dsw-alias-bg-layer-1); }
 .gt-context-details[data-open="1"] { display: flex; }
 .gt-detail-head { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; }
+/* Inline detail sits directly under its row: repeating the title would read as a second item. */
+.gt-root[data-wide="0"][data-wide-detail="1"] .gt-detail-title { display: none; }
+.gt-root[data-wide="0"][data-wide-detail="1"] .gt-detail-head { justify-content: flex-end; }
 .gt-detail-title { font-size: 14px; line-height: 22px; font-weight: 600; min-width: 0;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .gt-truncated { color: var(--dsw-alias-state-warn-primary); font-size: 12px; }
@@ -1139,12 +1151,12 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
 /* Wide screens: the open row's detail becomes a card on the right instead of pushing the list
    down. Deliberately CSS-only over unchanged markup: one detail implementation, and it only
    applies where there is room for a second column. */
-@media (min-width: 1224px) {
+/* Wide layout follows the panel's measured width (data-wide), not the viewport. */
   /* Only the list gives way: the title row and the toolbar keep their full width, so the
      controls never wrap or hide behind the card. */
-  .gt-root[data-wide-detail="1"] .gt-groups { padding-right: 360px; }
-  .gt-root[data-wide-detail="1"] .gt-inner { position: relative; }
-  .gt-root[data-wide-detail="1"] .gt-item[data-open="1"] .gt-detail {
+  .gt-root[data-wide="1"][data-wide-detail="1"] .gt-groups { padding-right: 360px; }
+  .gt-root[data-wide="1"][data-wide-detail="1"] .gt-inner { position: relative; }
+  .gt-root[data-wide="1"][data-wide-detail="1"] .gt-item[data-open="1"] .gt-detail {
     /* Anchored to the panel's own column (.gt-inner), not to the viewport: the slot does not
        always fill the window, and a viewport-centred offset put the card over the list. */
     /* The var fallback matters for the static previews (server-rendered, so effects never
@@ -1158,7 +1170,6 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
     overflow: auto; padding: 16px; margin: 0; border: 1px solid var(--dsw-alias-border-l2);
     border-radius: 12px; background: var(--dsw-alias-bg-overlay); z-index: 30;
   }
-}
 .gt-section { display: flex; flex-direction: column; gap: 5px; }
 .gt-completion { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
 .gt-section-title { color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 18px; font-weight: 600; }
@@ -1185,7 +1196,7 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
 .gt-empty-title { font-size: 14px; color: var(--dsw-alias-label-primary); }
 .gt-foot { color: var(--dsw-alias-label-secondary); font-size: 11px; display: flex; gap: 10px; flex-wrap: wrap;
   align-items: center; }
-.gt-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 5;
+.gt-toast { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 50;
   display: flex; align-items: center; gap: 12px; background: var(--dsw-alias-bg-overlay);
   border: 1px solid var(--dsw-alias-border-l2); border-radius: 10px; padding: 9px 13px;
   color: var(--dsw-alias-label-primary); }
@@ -2166,6 +2177,10 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
       // reach without curl.
       const [settingsOpen, setSettingsOpen] = useState(false)
       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
+      // layout while the panel is still too narrow for it.
+      const [panelWidth, setPanelWidth] = useState(null)
       const [contextOpen, setContextOpen] = useState(false)
       const [tokenDraft, setTokenDraft] = useState('')
       const [ingestDraft, setIngestDraft] = useState(false)
@@ -2406,6 +2421,20 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
         }
       }, [lang])
 
+      useEffect(() => {
+        const element = innerRef.current
+        if (element === null || typeof window === 'undefined') return undefined
+        const measure = () => setPanelWidth(element.getBoundingClientRect().width)
+        measure()
+        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 (observer !== null) observer.disconnect()
+        }
+      }, [])
+
       useEffect(() => {
         if (!settingsOpen || typeof window === 'undefined') {
           setSettingsBox(null)
@@ -3157,6 +3186,7 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
         {
           className: 'gt-root',
           'data-wide-detail': expandedId === '' ? '0' : '1',
+          'data-wide': panelWidth === null || panelWidth >= 960 ? '1' : '0',
           // The slot does not always fill the window, so the card's viewport offsets are
           // measured from the panel itself instead of assumed from 50vw.
           style:
@@ -3198,15 +3228,16 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
                 'button',
                 {
                   type: 'button',
-                  className: 'gt-btn gt-btn-primary',
-                'aria-expanded': adding,
-                onClick: () => {
-                  setAdding((value) => !value)
-                  setMore(false)
+                  className: adding ? 'gt-btn gt-btn-quiet' : 'gt-btn gt-btn-primary',
+                  'aria-expanded': adding,
+                  title: adding ? t('action.less') : t('action.add'),
+                  onClick: () => {
+                    setAdding((value) => !value)
+                    setMore(false)
+                  },
                 },
-              },
-              h(Icon, { name: 'plus', size: 13 }),
-              t('action.add'),
+                h(Icon, { name: adding ? 'close' : 'plus', size: 13 }),
+                adding ? '' : t('action.add'),
             ),
             // One overflow menu instead of four competing buttons: the primary action is
             // adding a todo; everything else is occasional.
@@ -3351,14 +3382,14 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
               }),
               h(
                 'button',
-                { type: 'button', className: 'gt-btn gt-btn-primary', disabled: busyId === '__new__' || draft.title.trim() === '', onClick: () => void submit() },
-                h(Icon, { name: 'plus', size: 13 }),
-                t('action.add'),
+                { type: 'button', className: 'gt-btn gt-btn-quiet', 'aria-expanded': more, onClick: () => setMore((value) => !value) },
+                more ? t('action.less') : t('action.more'),
               ),
               h(
                 'button',
-                { type: 'button', className: 'gt-btn gt-btn-quiet', 'aria-expanded': more, onClick: () => setMore((value) => !value) },
-                more ? t('action.less') : t('action.more'),
+                { type: 'button', className: 'gt-btn gt-btn-primary', disabled: busyId === '__new__' || draft.title.trim() === '', onClick: () => void submit() },
+                h(Icon, { name: 'plus', size: 13 }),
+                t('action.add'),
               ),
             ),
             more
@@ -3455,7 +3486,7 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
             h('div', { className: 'gt-spacer' }),
             h(
               'span',
-              { className: 'gt-tabs', role: 'group', 'aria-label': t('group.by'), title: t('group.by') },
+              { className: 'gt-tabs gt-group-tabs', role: 'group', 'aria-label': t('group.by'), title: t('group.by') },
               GROUP_MODES.map((mode) =>
                 h(
                   'button',
@@ -3473,6 +3504,20 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
                 ),
               ),
             ),
+            h(
+              'select',
+              {
+                className: 'gt-group-select',
+                value: groupMode,
+                'aria-label': t('group.by'),
+                title: t('group.by'),
+                onChange: (event) => {
+                  setGroupMode(event.target.value)
+                  storeStoredGroupMode(event.target.value)
+                },
+              },
+              GROUP_MODES.map((mode) => h('option', { key: mode, value: mode }, t(`group.${mode}`))),
+            ),
             ),
             h('div', { className: 'gt-spacer' }),
             h(
@@ -3888,6 +3933,7 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
               : h(
                   'div',
                   { className: 'gt-groups', role: 'list' },
+                  filter === 'inbox' ? h('div', { className: 'gt-inbox-note', role: 'note' }, t('inbox.explain')) : null,
                   groups.map((group) => {
                     const isCollapsed = collapsed[group.key] ?? group.collapsed === true
                     const exemptGroup = typeof group.dir === 'string' && group.dir !== '' && exemptWorkspaces.includes(group.dir)

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.0'
+export const VERSION = '0.6.2'
 
 /** 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.0",
+  "version": "0.6.2",
   "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",