dsh-global-todo 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [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 = 'ui37'
     /** Last language resolved for the shell; module-level so a fetch failure can be worded too. */
     let activeLang = 'zh'
 
@@ -1051,7 +1051,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); }
@@ -1105,6 +1105,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 +1142,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 +1161,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; }
@@ -2166,6 +2168,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 +2412,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 +3177,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 +3219,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 +3373,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

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.1'
 
 /** 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.1",
   "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",