dsh-global-todo 0.5.3 → 0.6.1

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+## [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.
+
+- **The layout is a column, not a wrapping row.** `.gt-root`/`.gt-inner` gained `min-width: 0` so the
+  column shrinks with its slot instead of overflowing at 1280 and 1100; the header wraps its actions
+  and the toolbar is two semantic rows (filter/search above, context above the list). The working
+  directory, handoff target and browse controls move behind a single Context toggle, collapsed by
+  default.
+- **Five type sizes and one weight scale.** 20/28 panel title, 14/22 row title, 13/20 controls and
+  body, 12/18 metadata and section labels, 11.5 mono for paths. Buttons, inputs and tabs share a
+  28px control height; the settings card is a 340px floating inspector (fixed, mutually exclusive
+  with the detail card) instead of an in-flow block that pushed the list down.
+- **Rows read top-down.** The title opens the detail (the kebab remains as a redundant door); the
+  dispatch button is a quiet action instead of an outlined primary; metadata loses the origin path
+  and the stray separator (CSS-generated dots), and tags cap at four. Group-level priority hides
+  while the group is expanded, where every row already shows it.
+- **Copy and states.** Full-width colons no longer leak into the English UI, `1 items` is fixed,
+  priority chips say Urgent/High/Normal/Low instead of P-codes, the empty state has a primary
+  action, the error banner can be dismissed, and the reminder bar keeps its accent on a 2px edge
+  (amber text failed contrast). The footer's store path and version move into Settings → About.
+
 ## [0.5.3] — 2026-10-20
 
 Settings a person can reach, and reminders that behave like reminders.

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 = 'ui35'
+    const UI_REV = 'ui37'
     /** Last language resolved for the shell; module-level so a fetch failure can be worded too. */
     let activeLang = 'zh'
 
@@ -64,6 +64,7 @@ window.__ModuleLoader__.load({
       'action.retry': '重试',
       'action.add': '添加',
       'action.more': '更多字段',
+      'action.overflow': '更多操作',
       'action.less': '收起字段',
       'action.detail': '详情',
       'action.hide': '收起',
@@ -91,6 +92,7 @@ window.__ModuleLoader__.load({
       'action.exportHint': '把整份清单导出成 JSON 文件（就是存储用的那份文档）',
       'action.importHint': '从 JSON 文件导入：同 id 覆盖、新 id 追加，不删除现有待办',
       'settings.title': '设置',
+      'settings.context': '上下文',
       'settings.reminders': '到点提醒',
       'settings.remindersEnable': '开启到点提醒',
       'settings.lead': '提前（分钟）',
@@ -103,6 +105,7 @@ window.__ModuleLoader__.load({
       'settings.save': '保存',
       'settings.cancel': '取消',
       'settings.saved': '设置已保存',
+      'settings.about': '关于',
       'notice.exported': '已导出 {n} 条待办',
       'notice.imported': '已导入 {n} 条（合并，现有共 {total} 条）',
       'import.badJson': '这个文件不是合法的 JSON',
@@ -124,7 +127,7 @@ window.__ModuleLoader__.load({
       'notice.bulk': '已更新 {n} 条',
       'notice.bulkPartial': '已更新 {n} 条，跳过 {m} 条',
       'select.clear': '清除',
-      'select.done': '完成',
+      'select.done': '退出选择',
       'select.hint': '先勾几条待办，再点「一键分配」：优先回到写下它的那个对话，其次同工作区的对话，都找不到才让你选。',
       'assign.working': '正在分配…',
       'assign.summary': '已分配 {n} 条（原对话 {origin} · 同工作区 {workspace} · 你选的 {chosen}）',
@@ -218,10 +221,10 @@ window.__ModuleLoader__.load({
       'field.linkValue': '文档绝对路径或网址',
       'field.linkTitle': '给它起个短名字（可空）',
       'field.search': '搜标题、描述、标签、附件…',
-      'priority.low': 'P3 低',
-      'priority.normal': 'P2 常规',
-      'priority.high': 'P1 高',
-      'priority.urgent': 'P0 紧急',
+      'priority.low': '低',
+      'priority.normal': '常规',
+      'priority.high': '高',
+      'priority.urgent': '紧急',
       'group.by': '分组',
       'group.conversation': '对话',
       'group.time': '时间',
@@ -229,6 +232,7 @@ window.__ModuleLoader__.load({
       'group.manual': '手动添加',
       'group.other': '其他',
       'group.items': '{n} 条',
+      'group.item': '1 条',
       'group.thisConversation': '本对话',
       'group.overdue': '逾期',
       'group.today': '今天',
@@ -238,6 +242,7 @@ window.__ModuleLoader__.load({
       'group.done': '已完成',
       'group.cancelled': '已取消',
       'empty.none': '还没有待办。上面写一句，回车就记下了。',
+      'empty.add': '记第一条',
       'empty.filtered': '这个筛选下没有待办。',
       'meta.added': '加入于',
       'meta.due': '截止',
@@ -300,6 +305,7 @@ window.__ModuleLoader__.load({
       'action.retry': 'Retry',
       'action.add': 'Add',
       'action.more': 'More fields',
+      'action.overflow': 'More actions',
       'action.less': 'Fewer fields',
       'action.detail': 'Details',
       'action.hide': 'Hide',
@@ -327,6 +333,7 @@ window.__ModuleLoader__.load({
       'action.exportHint': 'Download the whole list as JSON (the document the store keeps)',
       'action.importHint': 'Import a JSON file: same ids are updated, new ids appended, nothing deleted',
       'settings.title': 'Settings',
+      'settings.context': 'Context',
       'settings.reminders': 'Due reminders',
       'settings.remindersEnable': 'Announce deadlines',
       'settings.lead': 'Lead time (min)',
@@ -339,6 +346,7 @@ window.__ModuleLoader__.load({
       'settings.save': 'Save',
       'settings.cancel': 'Cancel',
       'settings.saved': 'Settings saved',
+      'settings.about': 'About',
       'notice.exported': 'Exported {n} todos',
       'notice.imported': 'Imported {n} (merged; {total} in the list now)',
       'import.badJson': 'That file is not valid JSON',
@@ -456,16 +464,17 @@ window.__ModuleLoader__.load({
       'field.linkValue': 'Absolute document path or URL',
       'field.linkTitle': 'Short label (optional)',
       'field.search': 'Search title, description, tags, attachments…',
-      'priority.low': 'P3 Low',
-      'priority.normal': 'P2 Normal',
-      'priority.high': 'P1 High',
-      'priority.urgent': 'P0 Urgent',
+      'priority.low': 'Low',
+      'priority.normal': 'Normal',
+      'priority.high': 'High',
+      'priority.urgent': 'Urgent',
       'group.by': 'Group',
       'group.time': 'Time',
       'group.level': 'Level',
       'group.manual': 'Added by hand',
       'group.other': 'Other',
       'group.items': '{n} items',
+      'group.item': '1 item',
       'group.thisConversation': 'this conversation',
       'group.overdue': 'Overdue',
       'group.today': 'Today',
@@ -475,6 +484,7 @@ window.__ModuleLoader__.load({
       'group.done': 'Done',
       'group.cancelled': 'Cancelled',
       'empty.none': 'No todos yet. Write one above and press Enter.',
+      'empty.add': 'Add your first todo',
       'empty.filtered': 'Nothing matches this filter.',
       'meta.added': 'added',
       'meta.due': 'due',
@@ -871,6 +881,17 @@ window.__ModuleLoader__.load({
         )
       }
       if (props.name === 'clock') return h('svg', common, h('circle', { cx: 8, cy: 8, r: 5.6 }), h('path', { d: 'M8 4.8V8l2.2 1.4' }))
+      if (props.name === 'close') return h('svg', common, h('path', { d: 'M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6' }))
+      if (props.name === 'gear') {
+        return h(
+          'svg',
+          common,
+          h('path', { d: 'M2.6 4.4h10.8M2.6 8h10.8M2.6 11.6h10.8' }),
+          h('circle', { cx: 6, cy: 4.4, r: 1.5, fill: 'currentColor', stroke: 'none' }),
+          h('circle', { cx: 10, cy: 8, r: 1.5, fill: 'currentColor', stroke: 'none' }),
+          h('circle', { cx: 5.2, cy: 11.6, r: 1.5, fill: 'currentColor', stroke: 'none' }),
+        )
+      }
       if (props.name === 'chevron') return h('svg', common, h('path', { d: 'M5.6 3.8L10 8l-4.4 4.2' }))
       if (props.name === 'flag') return h('svg', common, h('path', { d: 'M4 14V2.6h7l-1.2 2.8L11 8.2H4' }))
       if (props.name === 'mute') {
@@ -887,25 +908,29 @@ window.__ModuleLoader__.load({
     // ------------------------------------------------------------------ 样式
 
     const CSS = `
-.gt-root { display: flex; flex-direction: column; height: 100%; min-height: 0;
-  color: var(--dsw-alias-label-primary); font-size: 13px; }
-.gt-inner { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 980px;
-  margin: 0 auto; padding: 16px 20px 28px; min-height: 0; flex: 1; }
-.gt-head { display: flex; align-items: flex-start; gap: 12px; }
+.gt-root { 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; }
+.gt-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.gt-head-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
 .gt-headline { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.gt-title { font-size: 17px; font-weight: 650; letter-spacing: .2px; }
-.gt-sub { color: var(--dsw-alias-label-secondary); font-size: 12px; }
+.gt-title { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: 0; }
+.gt-sub { color: var(--dsw-alias-label-secondary); font-size: 13px; line-height: 20px; }
 .gt-spacer { flex: 1; }
 .gt-iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px;
   background: transparent; color: var(--dsw-alias-label-secondary); border: 1px solid transparent;
-  border-radius: 8px; padding: 5px 7px; font: inherit; cursor: pointer; }
+  border-radius: 8px; padding: 0 7px; min-height: 28px; min-width: 28px; box-sizing: border-box;
+  font: inherit; cursor: pointer; }
 .gt-iconbtn:hover { color: var(--dsw-alias-label-primary); border-color: var(--dsw-alias-border-l1);
   background: var(--dsw-alias-bg-layer-1); }
-.gt-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--dsw-alias-bg-layer-1);
+.gt-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--dsw-alias-bg-layer-1);
   color: var(--dsw-alias-label-primary); border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px;
-  padding: 4px 9px; font: inherit; cursor: pointer; white-space: nowrap; }
+  padding: 0 11px; min-height: 28px; box-sizing: border-box; font: inherit; font-size: 13px;
+  font-weight: 500; line-height: 20px; cursor: pointer; white-space: nowrap; }
 .gt-btn:hover { border-color: var(--dsw-alias-border-l2); }
-.gt-btn:disabled { opacity: .5; cursor: default; }
+.gt-btn:disabled { opacity: 1; background: var(--dsw-alias-border-l1); color: var(--dsw-alias-label-secondary);
+  border-color: transparent; cursor: default; }
 .gt-btn-primary { background: var(--dsw-alias-brand-primary); border-color: var(--dsw-alias-brand-primary);
   color: var(--dsw-alias-bg-base); font-weight: 600; }
 .gt-btn-primary:hover { border-color: var(--dsw-alias-brand-primary); }
@@ -922,22 +947,22 @@ window.__ModuleLoader__.load({
 .gt-new { display: flex; flex-direction: column; gap: 10px; }
 .gt-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
 .gt-input, .gt-select, .gt-textarea { background: var(--dsw-alias-bg-base); color: var(--dsw-alias-label-primary);
-  border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; padding: 6px 9px; font: inherit; }
+  border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; padding: 7px 10px; font: inherit; }
 .gt-input:focus, .gt-select:focus, .gt-textarea:focus { outline: none; border-color: var(--dsw-alias-brand-primary); }
 .gt-input { flex: 1; min-width: 120px; }
 .gt-input-sm { flex: 0 1 auto; min-width: 96px; }
 .gt-textarea { width: 100%; min-height: 54px; resize: vertical; font-family: inherit; }
 .gt-select { padding: 6px 7px; }
-.gt-search { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 160px;
+.gt-search { display: flex; align-items: center; gap: 6px; flex: 1 1 220px; min-width: 0;
   background: var(--dsw-alias-bg-base); border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px;
-  padding: 0 9px; color: var(--dsw-alias-label-secondary); }
+  min-height: 30px; box-sizing: border-box; padding: 0 9px; color: var(--dsw-alias-label-secondary); }
 .gt-search input { flex: 1; background: transparent; border: none; color: var(--dsw-alias-label-primary);
-  font: inherit; padding: 6px 0; min-width: 0; }
+  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;
   padding: 0 4px; color: var(--dsw-alias-label-secondary); }
-.gt-dir { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
+.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);
   border-radius: 8px; padding: 3px 6px 3px 8px; max-width: 560px; }
 /* Only the path may shrink. Everything else in the pill used to shrink with it, so a
@@ -946,20 +971,30 @@ window.__ModuleLoader__.load({
 .gt-dir > .gt-muted, .gt-dir > .gt-btn, .gt-dir > svg { white-space: nowrap; flex-shrink: 0; }
 .gt-dir-path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--dsw-alias-label-primary);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
-.gt-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.gt-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
+  gap: 8px 10px; }
+.gt-toolbar-main { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center;
+  gap: 8px; min-width: 0; flex-wrap: nowrap; }
+.gt-toolbar-main .gt-search { flex: 1 1 auto; }
+.gt-toolbar > .gt-spacer { display: none; }
+.gt-toolbar > .gt-context-summary { grid-row: 2; grid-column: 1; min-width: 0; }
+.gt-toolbar > .gt-tabs { grid-row: 2; grid-column: 2; justify-self: end; }
+.gt-toolbar > .gt-context-details { grid-column: 1 / -1; grid-row: 3; }
+@media (max-width: 1250px) { .gt-toolbar-main { flex-wrap: wrap; } }
 .gt-seg { display: inline-flex; background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l1);
   border-radius: 9px; padding: 2px; gap: 2px; }
 .gt-seg button { border: none; background: transparent; color: var(--dsw-alias-label-secondary); font: inherit;
   border-radius: 7px; padding: 3px 10px; cursor: pointer; }
-.gt-seg button[data-on="1"] { background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-primary); font-weight: 600; }
+.gt-seg button[data-on="1"] { background: var(--dsw-alias-button-ghost-active-fill); color: var(--dsw-alias-label-primary); font-weight: 600; }
 .gt-chips { display: flex; gap: 6px; flex-wrap: wrap; }
 /* One segmented style for every control that is "pick one of these": filters, grouping,
    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: 12px; border-radius: 6px; padding: 3px 9px; cursor: pointer; white-space: nowrap; }
+  font-size: 12.5px; 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-bg-layer-1); color: var(--dsw-alias-label-primary); font-weight: 600; }
+.gt-tab[data-on="1"] { background: var(--dsw-alias-button-ghost-active-fill); color: var(--dsw-alias-label-primary); font-weight: 600; }
 .gt-summary { color: var(--dsw-alias-label-secondary); font-size: 12px; }
 .gt-browse { border: 1px solid var(--dsw-alias-border-l1); border-radius: 9px; padding: 8px 10px;
   display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
@@ -971,7 +1006,7 @@ window.__ModuleLoader__.load({
 .gt-browse-item:hover { color: var(--dsw-alias-label-primary); border-color: var(--dsw-alias-brand-primary); }
 .gt-divider { width: 1px; height: 16px; background: var(--dsw-alias-border-l1); }
 .gt-context { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
-.gt-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 2px 8px;
+.gt-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 16px; padding: 2px 8px;
   border-radius: 999px; border: 1px solid var(--dsw-alias-border-l1); background: transparent;
   color: var(--dsw-alias-label-secondary); }
 button.gt-chip { cursor: pointer; font-family: inherit; }
@@ -981,27 +1016,31 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
 .gt-chip-warn { color: var(--dsw-alias-state-warn-primary); border-color: var(--dsw-alias-state-warn-primary); }
 .gt-chip-bad { color: var(--dsw-alias-state-error-primary); border-color: var(--dsw-alias-state-error-primary); }
 .gt-chip-ok { color: var(--dsw-alias-state-success-primary); }
-.gt-groups { display: flex; flex-direction: column; gap: 14px; overflow: auto; min-height: 0; flex: 1; }
+.gt-groups { display: flex; flex-direction: column; gap: 18px; overflow: auto; min-height: 0; flex: 1; }
 .gt-group { display: flex; flex-direction: column; gap: 6px; }
-.gt-group-head { display: flex; align-items: center; gap: 7px; color: var(--dsw-alias-label-secondary);
-  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; padding: 0 2px; }
+.gt-group-head { display: flex; align-items: center; gap: 8px; color: var(--dsw-alias-label-secondary);
+  font-size: 12px; line-height: 18px; padding: 0 2px; }
 .gt-group-head button { border: none; background: transparent; color: inherit; cursor: pointer;
   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: 1px 8px; font: inherit; font-size: 11px; letter-spacing: .04em; cursor: pointer;
-  display: inline-flex; align-items: center; gap: 5px; opacity: .72; transition: opacity .12s ease; }
+  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-count { color: var(--dsw-alias-label-secondary); }
-.gt-group-label { color: var(--dsw-alias-label-primary); font-weight: 600; text-transform: none;
-  letter-spacing: 0; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.gt-level { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 0 5px;
-  border-radius: 999px; border: 1px solid var(--dsw-alias-border-l1); color: var(--dsw-alias-label-secondary); }
+.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;
+  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); }
@@ -1009,57 +1048,79 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
   display: inline-block; }
 .gt-here { font-size: 10.5px; 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: 6px; }
-.gt-item { position: relative; display: flex; flex-direction: column; gap: 9px;
+.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: 11px; padding: 11px 13px; }
+  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); }
 .gt-item[data-status="done"], .gt-item[data-status="cancelled"] { opacity: .72; }
 .gt-item[data-open="1"] { border-color: var(--dsw-alias-brand-primary); }
 .gt-item-head { display: flex; gap: 10px; align-items: flex-start; }
-.gt-check { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 1px; border-radius: 999px; cursor: pointer;
+.gt-check { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 0; border-radius: 999px; cursor: pointer;
   border: 1.4px solid var(--dsw-alias-border-l2); background: transparent; color: transparent;
   display: inline-flex; align-items: center; justify-content: center; padding: 0; }
 .gt-check:hover { border-color: var(--dsw-alias-state-success-primary); color: var(--dsw-alias-state-success-primary); }
 .gt-check[data-on="1"] { border-color: var(--dsw-alias-state-success-primary);
   background: var(--dsw-alias-state-success-primary); color: var(--dsw-alias-bg-base); }
-.gt-pick { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; border-radius: 5px; cursor: pointer;
+.gt-pick { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; cursor: pointer;
   border: 1.4px solid var(--dsw-alias-border-l2); background: transparent; color: transparent;
   display: inline-flex; align-items: center; justify-content: center; padding: 0; }
 .gt-pick[data-on="1"] { border-color: var(--dsw-alias-brand-primary); background: var(--dsw-alias-brand-primary); color: var(--dsw-alias-bg-base); }
 .gt-item[data-selected="1"] { border-color: var(--dsw-alias-brand-primary); }
-.gt-selectbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px;
-  border: 1px solid var(--dsw-alias-brand-primary); border-radius: 9px; background: var(--dsw-alias-bg-layer-1); font-size: 12.5px; }
-.gt-item-body { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
-.gt-item-title { font-weight: 600; font-size: 13.5px; word-break: break-word; line-height: 1.45; }
-.gt-input-xs { width: 68px; padding: 3px 6px; font-size: 12px; }
+.gt-selectbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px;
+  border: 1px solid var(--dsw-alias-brand-primary); border-radius: 10px; background: var(--dsw-alias-bg-layer-1); font-size: 13px; }
+.gt-item-body { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; cursor: pointer; }
+.gt-item-body:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 2px; border-radius: 6px; }
+.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; }
 .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 10px;
-  border: 1px solid var(--dsw-alias-state-warn-primary); border-radius: 10px;
-  background: var(--dsw-alias-bg-layer-1); font-size: 12.5px; }
-.gt-reminders-title { color: var(--dsw-alias-state-warn-primary); font-weight: 600; }
-.gt-reminder-item { border: 1px solid var(--dsw-alias-border-l1); background: var(--dsw-alias-bg-layer-2);
-  color: var(--dsw-alias-label-primary); font: inherit; font-size: 12.5px; padding: 3px 8px;
-  border-radius: 999px; cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
+.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);
+  border-radius: 10px; background: var(--dsw-alias-bg-layer-1); font-size: 13px; }
+.gt-reminders { border-left: 2px solid var(--dsw-alias-state-warn-primary); }
+.gt-reminders-title { color: var(--dsw-alias-label-primary); font-weight: 600; }
+.gt-reminder-item { border: 1px solid transparent; background: transparent;
+  color: var(--dsw-alias-label-primary); font: inherit; font-size: 13px; padding: 2px 6px;
+  border-radius: 6px; cursor: pointer; max-width: 300px; overflow: hidden; text-overflow: ellipsis;
   white-space: nowrap; }
-.gt-settings { align-self: flex-end; width: 330px; display: flex; flex-direction: column; gap: 8px;
-  padding: 12px 14px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 12px;
-  background: var(--dsw-alias-bg-layer-1); font-size: 12.5px; }
-.gt-settings-head { font-weight: 650; }
-.gt-check-line { display: flex; align-items: center; gap: 8px; justify-content: space-between;
+.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-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-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; }
+.gt-settings-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
+.gt-context-summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
+.gt-context-summary .gt-chip { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gt-context-details { display: none; flex-direction: column; gap: 8px; padding: 10px 12px;
+  border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px;
+  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; }
+.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;
   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 {
   text-decoration: line-through; color: var(--dsw-alias-label-secondary); }
-.gt-meta { display: flex; gap: 5px 8px; flex-wrap: wrap; color: var(--dsw-alias-label-secondary); font-size: 11.5px;
-  align-items: center; }
+.gt-meta { display: flex; gap: 2px 0; flex-wrap: wrap; color: var(--dsw-alias-label-secondary); font-size: 12px;
+  line-height: 18px; align-items: center; }
 .gt-meta > span { display: inline-flex; align-items: center; }
-.gt-meta-sep { opacity: .45; }
+.gt-meta > span + span::before { content: '·'; margin: 0 6px; opacity: .45; }
 .gt-tag { color: var(--dsw-alias-brand-primary); }
 /* The dispatch action stays put: hiding the only way to hand work to an agent
    behind a hover makes a lone todo look like it can do nothing. */
@@ -1068,25 +1129,25 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
 .gt-attach .gt-chip { max-width: 280px; color: var(--dsw-alias-label-secondary); }
 .gt-attach a.gt-chip:hover { color: var(--dsw-alias-label-primary); border-color: var(--dsw-alias-border-l2); }
 .gt-attach-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.gt-menu { position: absolute; top: 40px; right: 10px; z-index: 3; min-width: 168px; display: flex;
-  flex-direction: column; padding: 4px; background: var(--dsw-alias-bg-overlay);
+.gt-menu { position: absolute; top: 40px; right: 10px; z-index: 3; min-width: 184px; display: flex;
+  flex-direction: column; padding: 5px; background: var(--dsw-alias-bg-overlay);
   border: 1px solid var(--dsw-alias-border-l2); border-radius: 10px; }
 .gt-menu button { display: flex; align-items: center; gap: 8px; text-align: left; border: none;
-  background: transparent; color: var(--dsw-alias-label-primary); font: inherit; padding: 6px 8px;
+  background: transparent; color: var(--dsw-alias-label-primary); font: inherit; font-size: 13px; padding: 8px 10px;
   border-radius: 7px; cursor: pointer; }
-.gt-menu button:hover { background: var(--dsw-alias-bg-layer-2); }
+.gt-menu button:hover { background: var(--dsw-alias-button-ghost-active-fill); }
 .gt-menu button[data-danger="1"] { color: var(--dsw-alias-state-error-primary); }
-.gt-detail { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--dsw-alias-border-l1);
-  padding-top: 10px; margin-top: 2px; }
+.gt-detail { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--dsw-alias-border-l1);
+  padding-top: 12px; margin-top: 2px; }
 /* 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: 1100px) {
+/* 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: 380px; }
-  .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
@@ -1095,21 +1156,24 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
        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;
+    right: var(--gt-detail-right, max(24px, calc((100vw - 1040px) / 2 + 24px)));
+    bottom: var(--gt-detail-bottom, 64px); width: 340px;
     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: 11.5px; text-transform: uppercase;
-  letter-spacing: .06em; }
+.gt-section-title { color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 18px; font-weight: 600; }
 .gt-pre { white-space: pre-wrap; word-break: break-word; margin: 0; line-height: 1.6; }
 .gt-muted { color: var(--dsw-alias-label-secondary); }
 .gt-links { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
 .gt-link { display: flex; gap: 8px; align-items: center; padding: 4px 0; min-width: 0; }
 .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);
+  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; }
@@ -1471,9 +1535,19 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
       if (Number.isInteger(todo.seq) && todo.seq > 0) {
         meta.push(h('span', { key: 'seq', className: 'gt-seq', title: t('meta.seqHint') }, `#${todo.seq}`))
       }
-      meta.push(
-        h('span', { key: 'added', title: new Date(todo.createdAt).toLocaleString() }, `${t('meta.added')} ${absoluteTime(todo.createdAt)}（${ageText(lang, todo.createdAt, now)}）`),
-      )
+      if (todo.dueAt !== null) {
+        meta.push(
+          h(
+            'span',
+            { key: 'due', className: overdue ? 'gt-chip-bad' : '', title: new Date(todo.dueAt).toLocaleString() },
+            overdue
+              ? t('meta.overdue', { n: daysLate(todo.dueAt, now) })
+              : sameLocalDay(Date.parse(todo.dueAt), now)
+                ? t('meta.today')
+                : `${t('meta.due')} ${absoluteTime(Date.parse(todo.dueAt))}`,
+          ),
+        )
+      }
       if (todo.priority !== 'normal') {
         meta.push(
           h(
@@ -1484,23 +1558,17 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
           ),
         )
       }
-      if (todo.dueAt !== null) {
+      meta.push(h('span', { key: 'added', title: new Date(todo.createdAt).toLocaleString() }, ageText(lang, todo.createdAt, now)))
+      if (todo.tags.length > 0) {
+        const shown = todo.tags.slice(0, 4)
         meta.push(
           h(
             'span',
-            { key: 'due', className: overdue ? 'gt-chip-bad' : '', title: new Date(todo.dueAt).toLocaleString() },
-            overdue
-              ? t('meta.overdue', { n: daysLate(todo.dueAt, now) })
-              : sameLocalDay(Date.parse(todo.dueAt), now)
-                ? t('meta.today')
-                : `${t('meta.due')} ${absoluteTime(Date.parse(todo.dueAt))}`,
+            { key: 'tags', className: 'gt-tag', title: todo.tags.map((tag) => `#${tag}`).join(' ') },
+            shown.map((tag) => `#${tag}`).join(' ') + (todo.tags.length > shown.length ? ` +${todo.tags.length - shown.length}` : ''),
           ),
         )
       }
-      if (todo.tags.length > 0) {
-        meta.push(h('span', { key: 'tags', className: 'gt-tag' }, todo.tags.map((tag) => `#${tag}`).join(' ')))
-      }
-      meta.push(h('span', { key: 'by' }, t(`meta.by.${todo.createdBy === 'agent' ? 'agent' : 'human'}`)))
       if (Array.isArray(todo.notes) && todo.notes.length > 0) {
         const latest = todo.notes[todo.notes.length - 1]
         meta.push(h('span', { key: 'notes', title: latest.text }, t('note.count', { n: todo.notes.length })))
@@ -1508,12 +1576,8 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
       if (todo.completion !== null && todo.completion !== undefined) {
         meta.push(h('span', { key: 'completed', title: todo.completion.summary }, t('meta.completed', { when: absoluteTime(todo.completion.at) })))
       }
-      if (typeof todo.originDir === 'string' && todo.originDir !== '') {
-        meta.push(h('span', { key: 'origin', title: todo.originDir }, t('meta.origin', { dir: shortPath(todo.originDir) })))
-      }
+      meta.push(h('span', { key: 'by' }, t(`meta.by.${todo.createdBy === 'agent' ? 'agent' : 'human'}`)))
       if (todo.sessionId !== '') {
-        // A live conversation with no working directory cannot do the work. Say
-        // so on the row instead of letting the next hand-off land there again.
         const stranded = todo.sessionAlive === true && (todo.sessionDir ?? '') === ''
         meta.push(
           h(
@@ -1521,9 +1585,7 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
             {
               key: 'session',
               className: stranded ? 'gt-chip-warn' : todo.sessionAlive === true ? 'gt-chip-ok' : '',
-              title: stranded
-                ? t('meta.session.noDirHint')
-                : (todo.sessionDir ?? ''),
+              title: stranded ? t('meta.session.noDirHint') : (todo.sessionDir ?? ''),
             },
             stranded ? t('meta.session.noDir') : todo.sessionAlive === true ? t('meta.session.live') : t('meta.session.bound'),
           ),
@@ -1588,7 +1650,21 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
           ),
           h(
             'div',
-            { className: 'gt-item-body' },
+            {
+              className: 'gt-item-body',
+              role: 'button',
+              tabIndex: 0,
+              'aria-expanded': open,
+              onClick: (event) => {
+                if (event.target?.closest?.('a,button,input,textarea,select') !== null) return
+                onToggleOpen(todo.id)
+              },
+              onKeyDown: (event) => {
+                if (event.key !== 'Enter' && event.key !== ' ') return
+                event.preventDefault()
+                onToggleOpen(todo.id)
+              },
+            },
             h(
               'div',
               { className: 'gt-item-title' },
@@ -1600,9 +1676,7 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
             h(
               'div',
               { className: 'gt-meta' },
-              meta.flatMap((node, index) =>
-                index === 0 ? [node] : [h('span', { key: `sep${index}`, className: 'gt-meta-sep' }, '·'), node],
-              ),
+              meta,
             ),
             // What is attached is half the point of the list, so the first few are
             // shown as chips instead of being reported as a number.
@@ -1701,7 +1775,7 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
               'button',
               {
                 type: 'button',
-                className: 'gt-btn gt-btn-brand',
+                className: 'gt-btn gt-btn-quiet',
                 disabled: busy,
                 title: dispatchLabel,
                 onClick: () => onAction('dispatch', todo),
@@ -1752,6 +1826,16 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
           ? h(
               'div',
               { className: 'gt-detail' },
+              h(
+                'div',
+                { className: 'gt-detail-head' },
+                h('span', { className: 'gt-detail-title' }, `${Number.isInteger(todo.seq) && todo.seq > 0 ? `#${todo.seq} ` : ''}${todo.title}`),
+                h(
+                  'button',
+                  { type: 'button', className: 'gt-iconbtn', title: t('action.hide'), 'aria-label': t('action.hide'), onClick: () => onToggleOpen(todo.id) },
+                  h(Icon, { name: 'close', size: 13 }),
+                ),
+              ),
               h(
                 'div',
                 { className: 'gt-section' },
@@ -1836,14 +1920,15 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
                       (todo.notes ?? []).map((entry, index) =>
                         h(
                           'li',
-                          { className: 'gt-link', key: `note:${index}:${entry.at}` },
+                          { className: 'gt-note-item', key: `note:${index}:${entry.at}` },
                           h(
-                            'span',
-                            { className: 'gt-link-main' },
-                            h(Icon, { name: 'doc', size: 13 }),
-                            h('span', { className: 'gt-muted' }, `${absoluteTime(entry.at)} · ${entry.by === 'agent' ? t('note.by.agent') : t('note.by.human')}`),
-                            h('span', { className: 'gt-completion' }, entry.text),
+                            'div',
+                            { className: 'gt-note-meta' },
+                            h(Icon, { name: 'doc', size: 12 }),
+                            h('span', null, absoluteTime(entry.at)),
+                            h('span', null, entry.by === 'agent' ? t('note.by.agent') : t('note.by.human')),
                           ),
+                          h('div', { className: 'gt-note-text' }, entry.text),
                         ),
                       ),
                     ),
@@ -2082,6 +2167,12 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
       // One settings popover: reminders and the external door both need a place a person can
       // 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)
       const [belowDraft, setBelowDraft] = useState('0.8')
@@ -2321,6 +2412,40 @@ 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)
+          return undefined
+        }
+        const measure = () => {
+          const element = innerRef.current
+          if (element === null) return
+          const rect = element.getBoundingClientRect()
+          setSettingsBox({
+            top: Math.round(rect.top + 210),
+            right: Math.round(window.innerWidth - rect.right + 20),
+            bottom: Math.round(window.innerHeight - rect.bottom + 20),
+          })
+        }
+        measure()
+        window.addEventListener('resize', measure)
+        return () => window.removeEventListener('resize', measure)
+      }, [settingsOpen, lang])
+
       useEffect(() => {
         if (expandedId === '' || typeof window === 'undefined') {
           setDetailAnchor(null)
@@ -2916,6 +3041,8 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
 
       /** Fill the popover from the host's state, so saving cannot send stale values. */
       const openSettings = () => {
+        // One inspector at a time: the settings card and the detail card occupy the same side.
+        setExpandedId('')
         const current = state.health?.settings ?? {}
         setIngestDraft(current.ingest?.enabled === true)
         setBelowDraft(String(current.ingest?.confirmBelow ?? 0.8))
@@ -3050,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:
@@ -3071,71 +3199,48 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
               'div',
               { className: 'gt-headline' },
               h('div', { className: 'gt-title' }, t('panel.title')),
-              h(
-                'div',
-                { className: 'gt-sub' },
-                t('panel.subtitle'),
-                h('span', { className: 'gt-summary' }, ' · '),
-                h('span', { className: 'gt-summary' }, t('summary.active', { n: counts.open + counts.doing })),
-                counts.overdue > 0
-                  ? h('span', { className: 'gt-summary' }, ` · ${t('summary.overdue', { n: counts.overdue })}`)
-                  : null,
-                counts.done > 0
-                  ? h('span', { className: 'gt-summary' }, ` · ${t('summary.done', { n: counts.done })}`)
-                  : null,
-              ),
+              h('div', { className: 'gt-sub' }, t('panel.subtitle')),
             ),
-            h('div', { className: 'gt-spacer' }),
             h(
-              'button',
-              {
-                type: 'button',
-                className: 'gt-btn gt-btn-primary',
-                'aria-expanded': adding,
-                onClick: () => {
-                  setAdding((value) => !value)
-                  setMore(false)
+              '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: 'plus', size: 13 }),
-              t('action.add'),
-            ),
-            h(
-              'button',
-              { type: 'button', className: 'gt-iconbtn', onClick: () => void reload(), disabled: loading, title: t('action.refresh'), 'aria-label': t('action.refresh') },
-              h(Icon, { name: 'refresh' }),
-            ),
-            // Import/export of the same document the store keeps: the small door
-            // out of a plugin whose whole point is that the list is a file.
-            h(
-              'button',
-              {
-                type: 'button',
-                className: 'gt-btn gt-btn-quiet',
-                title: t('action.exportHint'),
-                onClick: () => void exportJson(),
-              },
-              t('action.export'),
-            ),
-            h(
-              'button',
-              {
-                type: 'button',
-                className: 'gt-btn gt-btn-quiet',
-                title: t('action.importHint'),
-                onClick: () => importRef.current?.click?.(),
-              },
-              t('action.import'),
+                h(Icon, { name: 'gear' }),
+              ),
+              h(
+                'button',
+                {
+                  type: 'button',
+                  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: adding ? 'close' : 'plus', size: 13 }),
+                adding ? '' : t('action.add'),
             ),
-            h(
-              'button',
-              {
-                type: 'button',
-                className: 'gt-btn gt-btn-quiet',
-                'aria-expanded': settingsOpen,
-                onClick: () => (settingsOpen ? setSettingsOpen(false) : openSettings()),
-              },
-              t('settings.title'),
+            // One overflow menu instead of four competing buttons: the primary action is
+            // adding a todo; everything else is occasional.
+            h(Menu, {
+              label: t('action.overflow'),
+              items: [
+                { key: 'refresh', label: t('action.refresh'), icon: 'refresh', onSelect: () => void reload() },
+                { key: 'export', label: t('action.export'), icon: 'doc', onSelect: () => void exportJson() },
+                { key: 'import', label: t('action.import'), icon: 'plus', onSelect: () => importRef.current?.click?.() },
+                { key: 'settings', label: t('settings.title'), icon: 'gear', onSelect: () => openSettings() },
+              ],
+            }),
             ),
             h('input', {
               ref: importRef,
@@ -3149,7 +3254,23 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
           settingsOpen
             ? h(
                 'div',
-                { className: 'gt-settings', role: 'dialog', 'aria-label': t('settings.title') },
+                {
+                  className: 'gt-settings',
+                  role: 'dialog',
+                  'aria-label': t('settings.title'),
+                  style:
+                    settingsBox === null
+                      ? undefined
+                      : {
+                          position: 'fixed',
+                          top: `${settingsBox.top}px`,
+                          right: `${settingsBox.right}px`,
+                          bottom: `${settingsBox.bottom}px`,
+                          maxHeight: 'none',
+                          overflow: 'auto',
+                          zIndex: 40,
+                        },
+                },
                 h('div', { className: 'gt-settings-head' }, t('settings.title')),
                 h('div', { className: 'gt-section-title' }, t('settings.reminders')),
                 h(
@@ -3191,8 +3312,8 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
                   'div',
                   { className: 'gt-settings-row' },
                   h('button', { type: 'button', className: 'gt-btn gt-btn-quiet', onClick: generateToken }, t('settings.generate')),
-                  h('button', { type: 'button', className: 'gt-btn gt-btn-brand', onClick: () => void saveSettings() }, t('settings.save')),
                   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',
@@ -3208,6 +3329,13 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
                     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,
 
@@ -3215,8 +3343,13 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
             ? h(
                 'div',
                 { className: 'gt-banner', role: 'alert' },
-                `${t('error.prefix')}: ${error.message} (${error.reason ?? 'internal'})`,
+                h('span', { className: 'gt-banner-text' }, `${t('error.prefix')}: ${error.message}`),
                 h('button', { type: 'button', className: 'gt-btn', onClick: () => void reload() }, t('action.retry')),
+                h(
+                  'button',
+                  { type: 'button', className: 'gt-iconbtn', title: t('action.hide'), 'aria-label': t('action.hide'), onClick: () => setError(null) },
+                  h(Icon, { name: 'close', size: 13 }),
+                ),
               )
             : null,
 
@@ -3240,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
@@ -3306,6 +3439,7 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
           h(
             'div',
             { className: 'gt-toolbar' },
+            h('div', { className: 'gt-toolbar-main' },
             h(
               'span',
               { className: 'gt-tabs', role: 'group', 'aria-label': t('filter.label') },
@@ -3361,12 +3495,37 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
                 ),
               ),
             ),
+            ),
             h('div', { className: 'gt-spacer' }),
+            h(
+              'div',
+              { className: 'gt-context-summary' },
+              h(
+                'button',
+                { type: 'button', className: 'gt-chip', title: effectiveDir === '' ? t('dir.none') : effectiveDir, onClick: () => setContextOpen((value) => !value) },
+                h(Icon, { name: 'doc', size: 12 }),
+                effectiveDir === '' ? t('dir.none') : effectiveDir,
+              ),
+              h(
+                'button',
+                { type: 'button', className: 'gt-chip', title: t('target.pick'), onClick: () => setContextOpen((value) => !value) },
+                h(Icon, { name: 'play', size: 11 }),
+                `${t('target.label')}: ${conversations.find((entry) => entry.id === targetValue)?.title ?? t('target.auto')}`,
+              ),
+              h(
+                'button',
+                { type: 'button', className: 'gt-btn gt-btn-quiet', 'aria-expanded': contextOpen, onClick: () => setContextOpen((value) => !value) },
+                t('settings.context'),
+              ),
+            ),
+            h(
+              'div',
+              { className: 'gt-context-details', 'data-open': contextOpen ? '1' : '0' },
             h(
               'span',
               { className: 'gt-dir', title: effectiveDir === '' ? t('dir.none') : effectiveDir },
               h(Icon, { name: 'doc', size: 12 }),
-              h('span', { className: 'gt-muted' }, `${t('field.dir')}：`),
+              h('span', { className: 'gt-muted' }, `${t('field.dir')}: `),
               h('span', { className: 'gt-dir-path' }, effectiveDir === '' ? t('dir.none') : effectiveDir),
               h('span', { className: 'gt-muted' }, pickedDir === '' ? t('dir.fromSession') : t('dir.picked')),
               h('button', { type: 'button', className: 'gt-btn gt-btn-quiet', onClick: () => void chooseDir() }, t('action.pickDir')),
@@ -3471,7 +3630,7 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
                             ),
                           ),
                 ),
-            h('span', { className: 'gt-muted' }, `${t('target.label')}：`),
+            h('span', { className: 'gt-muted' }, `${t('target.label')}: `),
             h(
               'select',
               {
@@ -3501,6 +3660,7 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
                 { value: 'auto', label: t('target.auto') },
               ].map((option) => h('option', { key: option.value, value: option.value }, option.label)),
             ),
+                ),
             h('span', { className: 'gt-spacer' }),
             h('span', { className: 'gt-tabs', role: 'group', 'aria-label': t('autoCollect.label') }, togglesNodes),
           ),
@@ -3731,6 +3891,20 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
                   'div',
                   { className: 'gt-empty' },
                   h('div', { className: 'gt-empty-title' }, (state.counts?.total ?? 0) === 0 && query.trim() === '' ? t('empty.none') : t('empty.filtered')),
+                  (state.counts?.total ?? 0) === 0 && query.trim() === ''
+                    ? h(
+                        'button',
+                        {
+                          type: 'button',
+                          className: 'gt-btn gt-btn-primary',
+                          onClick: () => {
+                            setAdding(true)
+                            setMore(false)
+                          },
+                        },
+                        t('empty.add'),
+                      )
+                    : null,
                   h('div', { className: 'gt-sub' }, t('hint.keys')),
                 )
               : h(
@@ -3755,7 +3929,11 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
                           },
                           h(Icon, { name: 'chevron', size: 12 }),
                           h('span', { className: 'gt-group-label' }, group.label),
-                          h('span', { className: 'gt-group-count' }, t('group.items', { n: group.todos.length })),
+                          h(
+                            'span',
+                            { className: 'gt-group-count' },
+                            group.todos.length === 1 ? t('group.item') : t('group.items', { n: group.todos.length }),
+                          ),
                           group.level === 'normal'
                             ? null
                             : h(
@@ -3821,7 +3999,10 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
                                 open: expandedId === todo.id,
                                 dispatchLabel,
                                 onAction,
-                                onToggleOpen: (id) => setExpandedId((current) => (current === id ? '' : id)),
+                                onToggleOpen: (id) => {
+                                  setSettingsOpen(false)
+                                  setExpandedId((current) => (current === id ? '' : id))
+                                },
                               }),
                             ),
                           ),
@@ -3837,15 +4018,6 @@ button.gt-chip[data-on="1"] { color: var(--dsw-alias-label-primary); border-colo
               )
             : null,
 
-          h(
-            'div',
-            { className: 'gt-foot' },
-            state.health !== null ? h('span', null, t('store.at', { file: state.health.store?.file ?? '' })) : null,
-            state.health !== null
-              ? h('span', { className: 'gt-mono' }, `v${state.health.version ?? ''}·${UI_REV}`)
-              : null,
-            h('span', null, t('hint.keys')),
-          ),
         ),
         notice !== null && notice !== undefined
           ? h(

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.5.3'
+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.5.3",
+  "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",