dsh-global-todo 0.4.5 → 0.4.7

package/CHANGELOG.md

@@ -7,6 +7,27 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.4.7] — 2026-10-19
+
+Verified against the running GUI this time, with measured numbers instead of arithmetic.
+
+- **The card no longer overlaps the list by its own padding.** `width: 360px` was applied
+  content-box, so the card was 394px wide while the list reserved 380px — a 14px overlap that
+  only showed up in a live box measurement. It is `box-sizing: border-box` now (990–1350 against
+  a list ending at 970 at 1440×900).
+- **Its vertical brackets come from the list, not the panel.** The panel fills the window, so
+  measuring its bottom put the card over the footer; the anchors now come from `.gt-groups`
+  (top + 10) and its bottom (+ 8 gap above the footer).
+## [0.4.6] — 2026-10-19
+
+The card existed; where it landed depended on a viewport assumption that the real shell does not
+honour.
+
+- **The detail card is measured from the panel, not from `50vw`.** In the GUI the plugin slot does
+  not fill the window, so the viewport-derived right edge put the card on top of the list; the card
+  now measures `.gt-inner` on open, on window resize and on a slot resize (sidebar collapse), and
+  positions itself from that rectangle. The CSS fallback (used by the static previews, which are
+  server-rendered and run no effects) assumes the centred 980px column.
 ## [0.4.5] — 2026-10-19
 
 Polishing where the side detail sits, now that it exists.

package/docs/DESIGN.md

@@ -63,7 +63,9 @@ Expanding a row inline is right on a narrow window and wrong on a wide one: the
 row you were reading slides away, and the rest of the screen sits empty. Above 1100px the open
 row's detail is lifted out of the flow into a card bracketed between the toolbar and the footer
 at the panel's right edge; only the list gives way (the toolbar keeps full width), and the list gets
-padding equal to that card. This is a CSS-only override over unchanged markup
+padding equal to that card. The card's offsets are measured from the panel's own column on mount
+and on resize — the slot does not always fill the window, so a viewport-derived offset put the card
+over the list inside the real GUI. This is a CSS-only override over unchanged markup
 (`.gt-root[data-wide-detail]` plus one media query) precisely so there is still exactly one
 detail implementation — a second render path for wide screens would drift from the inline one at
 the first field change.

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 = 'ui28'
+    const UI_REV = 'ui30'
     /** Last language resolved for the shell; module-level so a fetch failure can be worded too. */
     let activeLang = 'zh'
 
@@ -1014,13 +1014,19 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
 @media (min-width: 1100px) {
   /* 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: 400px; }
+  .gt-root[data-wide-detail="1"] .gt-groups { padding-right: 380px; }
+  .gt-root[data-wide-detail="1"] .gt-inner { position: relative; }
   .gt-root[data-wide-detail="1"] .gt-item[data-open="1"] .gt-detail {
-    /* Aligned to the panel's own right edge (centred, capped at 980px) and bracketed between
-       the toolbar and the footer, so it reads as a second column rather than a floating
-       dialog. */
-    position: fixed; top: 208px; bottom: 64px;
-    right: max(24px, calc(50vw - 466px)); width: 360px;
+    /* 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
+       run): they assume the panel is the centred 980px column. */
+    /* border-box matters: 360px is the whole card, so the list's 380px reservation leaves
+       a gap instead of overlapping by the padding width. */
+    box-sizing: border-box;
+    position: fixed; top: var(--gt-detail-top, 208px);
+    right: var(--gt-detail-right, max(24px, calc((100vw - 980px) / 2 + 24px)));
+    bottom: var(--gt-detail-bottom, 64px); width: 360px;
     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;
   }
@@ -2147,6 +2153,10 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
       // The store counts file changes made outside this process (another machine, a sync
       // client). A new count means the panel's view was stale a moment ago; say so once.
       const externalRef = useRef(null)
+      // 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 [detailAnchor, setDetailAnchor] = useState(null)
       const titleRef = useRef(null)
       const searchRef = useRef(null)
       const undoTimer = useRef(null)
@@ -2200,6 +2210,39 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
         }
       }, [lang])
 
+      useEffect(() => {
+        if (expandedId === '' || typeof window === 'undefined') {
+          setDetailAnchor(null)
+          return undefined
+        }
+        const measure = () => {
+          const element = innerRef.current
+          if (element === null) return
+          const rect = element.getBoundingClientRect()
+          // Bracket the card against the scrolling list, not the panel box: the footer sits
+          // below the list, and the panel's own bottom is below that.
+          const groups = document.querySelector('.gt-groups')
+          const list = groups === null ? null : groups.getBoundingClientRect()
+          setDetailAnchor({
+            top: Math.round((list === null ? rect.top + 190 : list.top) + 10),
+            right: Math.round(window.innerWidth - rect.right + 20),
+            bottom: Math.round(window.innerHeight - (list === null ? rect.bottom : list.bottom) + 8),
+          })
+        }
+        measure()
+        window.addEventListener('resize', measure)
+        // The slot can change width without a window resize (sidebar collapse), which would
+        // leave the card at stale coordinates.
+        // `window.` on purpose: the static scan rejects a bare global it cannot see defined.
+        const Observer = typeof window.ResizeObserver === 'function' ? window.ResizeObserver : null
+        const observer = Observer === null ? null : new Observer(measure)
+        if (observer !== null && innerRef.current !== null) observer.observe(innerRef.current)
+        return () => {
+          window.removeEventListener('resize', measure)
+          if (observer !== null) observer.disconnect()
+        }
+      }, [expandedId, lang])
+
       useEffect(() => {
         mounted.current = true
         void reload()
@@ -2777,10 +2820,23 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
 
       return h(
         'div',
-        { className: 'gt-root', 'data-wide-detail': expandedId === '' ? '0' : '1' },
+        {
+          className: 'gt-root',
+          'data-wide-detail': expandedId === '' ? '0' : '1',
+          // 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:
+            detailAnchor === null
+              ? undefined
+              : {
+                  '--gt-detail-top': `${detailAnchor.top}px`,
+                  '--gt-detail-right': `${detailAnchor.right}px`,
+                  '--gt-detail-bottom': `${detailAnchor.bottom}px`,
+                },
+        },
         h(
           'div',
-          { className: 'gt-inner' },
+          { className: 'gt-inner', ref: innerRef },
           h(
             'div',
             { className: 'gt-head' },

package/lib/index.js

@@ -35,7 +35,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.4.5'
+export const VERSION = '0.4.7'
 
 /** 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.4.5",
+  "version": "0.4.7",
   "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",