dsh-worktodo 0.1.0 → 0.2.0

package/src/client/index.js

@@ -1,4 +1,6 @@
 import React from 'react';
+// 与宿主共用同一份解析器：人机一致，且零依赖（会被 esbuild 内联进 bundle）
+import { parseNaturalDue } from '../parse-due.mjs';
 
 /**
  * worktodo 浏览器半侧：DSH 侧栏入口 + 中栏「工作待办」面板。
@@ -63,6 +65,26 @@ const zh = {
   'groupWeek': '本周',
   'groupLater': '以后',
   'groupCompleted': '已完成',
+  'viewDue': '按截止',
+  'viewProject': '按项目',
+  'noProject': '未归类',
+  'sortLabel': '排序',
+  'sortManual': '手动',
+  'sortPriority': '优先级',
+  'sortCreated': '创建时间',
+  'dragHint': '拖动调整顺序（会自动切到手动排序）',
+  'versionLabel': '版本',
+  'versionHint': '当前安装的 dsh-worktodo 版本',
+  'updateAvailable': '有新版本',
+  'updateHint': '更新命令（重启 DSH 生效）',
+  'addOpen': '新增待办',
+  'addCancel': '取消',
+  'prioNone': '无',
+  'dateUnset': '日期 · 未设',
+  'timeUnset': '时间 · 未设',
+  'todayWord': '今天',
+  'fromParsed': '识别',
+  'dueTimeLabel': '时间',
   'expand': '展开',
   'collapse': '收起',
   'empty': '还没有待办',
@@ -122,6 +144,26 @@ const en = {
   'groupWeek': 'This week',
   'groupLater': 'Later',
   'groupCompleted': 'Completed',
+  'viewDue': 'By due',
+  'viewProject': 'By project',
+  'noProject': 'Uncategorized',
+  'sortLabel': 'Sort',
+  'sortManual': 'Manual',
+  'sortPriority': 'Priority',
+  'sortCreated': 'Created',
+  'dragHint': 'Drag to reorder (switches to manual sort)',
+  'versionLabel': 'Version',
+  'versionHint': 'Installed dsh-worktodo version',
+  'updateAvailable': 'Update available',
+  'updateHint': 'Update command (restart DSH to apply)',
+  'addOpen': 'New todo',
+  'addCancel': 'Cancel',
+  'prioNone': 'None',
+  'dateUnset': 'Date · unset',
+  'timeUnset': 'Time · unset',
+  'todayWord': 'Today',
+  'fromParsed': 'parsed',
+  'dueTimeLabel': 'Time',
   'expand': 'Expand',
   'collapse': 'Collapse',
   'empty': 'No to-dos yet',
@@ -158,6 +200,13 @@ const en = {
  * 不写任何颜色字面量兜底——兜底值等于写死某一种主题下的颜色，另一套主题就花了。
  * 需要「淡淡的底色」时用 color-mix 把语义色混进 transparent，仍然是变量驱动。
  * ------------------------------------------------------------------ */
+/** 本地时区的 YYYY-MM-DD（面板里判断"今天 / 逾期"用；与宿主 records.mjs 的 dayKey 同语义）。 */
+function dayKey(stamp) {
+  const d = new Date(stamp);
+  const pad = (n) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+
 const C = {
   label: 'var(--dsw-alias-label-primary)',
   label2: 'var(--dsw-alias-label-secondary)',
@@ -228,6 +277,32 @@ const STYLE_TEXT = `
   flex-direction: column; align-items: stretch; gap: 6px;
   border: 1px solid ${C.border1}; background: ${C.layer1};
 }
+.wt-seg {
+  display: inline-flex; align-items: center; border-radius: 8px; overflow: hidden;
+  border: 1px solid ${C.border}; background: ${C.bg2};
+}
+.wt-seg-btn {
+  appearance: none; border: 0; background: transparent; color: ${C.label2};
+  font: inherit; font-size: 11.5px; line-height: 1; padding: 5px 9px; cursor: pointer;
+}
+.wt-seg-btn.is-on { background: ${C.hover}; color: ${C.label}; font-weight: 600; }
+.wt-seg-btn:hover { color: ${C.label}; }
+.wt-row[draggable="true"] { cursor: grab; }
+.wt-row[draggable="true"]:active { cursor: grabbing; }
+.wt-plus {
+  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
+  padding: 12px 14px; margin-bottom: 10px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600;
+  color: ${C.label2}; background: ${C.layer1};
+  border: 1px dashed ${C.border}; border-radius: 12px;
+}
+.wt-plus:hover { color: ${C.label}; border-color: ${C.brand}; background: ${tint(C.brand, 8)}; }
+.wt-plus-mark { font-size: 24px; line-height: 1; font-weight: 400; color: ${C.brand}; }
+.wt-flag-btn {
+  appearance: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
+  font: inherit; font-size: 11.5px; padding: 5px 9px; border-radius: 9px;
+  background: transparent; border: 1px solid ${C.border}; color: ${C.label2};
+}
+.wt-flag-btn.is-on { border-color: currentColor; background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
 .wt-group-head {
   display: flex; align-items: center; gap: 7px; padding: 3px 8px; border-radius: 8px;
   cursor: pointer; user-select: none; color: ${C.label2};
@@ -362,8 +437,10 @@ async function postJson(path, body) {
  * （stale-while-revalidate）。侧栏来回点的时候不该每次都转圈。
  */
 let lastList = null;
+// 排序模式跨「切走再切回」保持；manual = 尊重拖动顺序
+let lastSort = 'manual';
 
-function useList() {
+function useList(sort) {
   const [state, setState] = React.useState(() => (lastList
     ? { status: 'ready', data: lastList, error: null }
     : { status: 'loading', data: null, error: null }));
@@ -376,7 +453,7 @@ function useList() {
      * 用 open 时 groups.completed 恒为空，「已完成」那一组就永远出不来（也就没法折叠/展开）。
      * 统计 stats 不受 filter 影响（宿主按全量算），所以顶部数字仍然是全局口径。
      */
-    fetch(`${ROUTE_LIST}?filter=all`, { cache: 'no-store', credentials: 'same-origin' })
+    fetch(`${ROUTE_LIST}?filter=all&sort=${encodeURIComponent(sort || 'manual')}`, { cache: 'no-store', credentials: 'same-origin' })
       .then(async (response) => {
         if (!response.ok) throw new Error(`HTTP ${response.status}`);
         const body = await response.json().catch(() => null);
@@ -395,7 +472,7 @@ function useList() {
         }
       });
     return () => { alive = false; };
-  }, [tick]);
+  }, [tick, sort]);
 
   const refresh = React.useCallback(() => setTick((n) => n + 1), []);
   return { ...state, refresh };
@@ -404,72 +481,220 @@ function useList() {
 /* ------------------------------------------------------------------ *
  * 快速添加
  * ------------------------------------------------------------------ */
+/** 小红旗图标：填充与描边都用 currentColor，颜色由按钮的 color 决定。 */
+
+/**
+ * 新增待办：平时只是一个**大加号**，点开才展开表单。
+ * 日期用原生日历（`type=date`）、时间用原生时钟（`type=time`），
+ * 优先级用三个不同颜色的**小红旗**表示（高=红、普通=琥珀、低=灰）。
+ */
+
+/** 小红旗图标：颜色由父级 color 决定；filled=选中档位。 */
+function IconFlag({ filled, dashed }) {
+  return React.createElement('svg', { width: 13, height: 13, viewBox: '0 0 16 16', 'aria-hidden': 'true' }, [
+    React.createElement('path', {
+      key: 'pole', d: 'M3.6 1.6v13', stroke: 'currentColor', strokeWidth: 1.6,
+      strokeLinecap: 'round', fill: 'none', strokeDasharray: dashed ? '1.5 1.5' : undefined,
+    }),
+    React.createElement('path', {
+      key: 'cloth', d: 'M5.2 2.4h7.4L11 5.2l1.6 2.8H5.2z',
+      fill: filled ? 'currentColor' : 'none', stroke: 'currentColor', strokeWidth: 1.3,
+      strokeLinejoin: 'round', strokeDasharray: dashed ? '1.5 1.5' : undefined,
+    }),
+  ]);
+}
+
+const IconCal = () => React.createElement('svg', { width: 13, height: 13, viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, 'aria-hidden': 'true' }, [
+  React.createElement('rect', { key: 'r', x: 2.2, y: 3.4, width: 11.6, height: 10.4, rx: 2 }),
+  React.createElement('path', { key: 'p', d: 'M2.2 6.6h11.6M5.4 2.2v2.4M10.6 2.2v2.4' }),
+]);
+const IconClock = () => React.createElement('svg', { width: 13, height: 13, viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, 'aria-hidden': 'true' }, [
+  React.createElement('circle', { key: 'c', cx: 8, cy: 8, r: 5.8 }),
+  React.createElement('path', { key: 'p', d: 'M8 4.9V8l2.2 1.4' }),
+]);
+
+/**
+ * 快速添加：两行布局（设计稿 v5）。
+ *   第一行：待办内容 + 添加；
+ *   第二行（更小）：日期 / 时间 / 优先级——显示**当前值**，点开才选。
+ * 标题里写了「明天下午3点」这类说法会被实时解析：第二行自动点亮并标"· 识别"，
+ * 且日期词会从标题里摘掉。**手动改过就不再被自动覆盖**（手动优先）。
+ */
 function QuickAdd({ t, onAdd, busy }) {
   const [title, setTitle] = React.useState('');
   const [due, setDue] = React.useState('');
-  const [priority, setPriority] = React.useState('normal');
+  const [dueTime, setDueTime] = React.useState('');
+  const [priority, setPriority] = React.useState('none');
+  const [parsed, setParsed] = React.useState(null);
+  const [manual, setManual] = React.useState(false); // 用户手动改过日期/时间
+  const [flagOpen, setFlagOpen] = React.useState(false);
+  // 点"整块胶囊"都要弹出选择器：Safari 里带值的 date/time 输入光靠点击只会聚焦，
+  // 所以统一主动调 showPicker()（不可用时退回 focus+click）
+  const dateRef = React.useRef(null);
+  const timeRef = React.useRef(null);
+  const openPicker = (ref) => {
+    const el = ref.current;
+    if (!el) return;
+    if (typeof el.showPicker === 'function') {
+      try { el.showPicker(); return; } catch { /* 某些环境不允许，走下面的兜底 */ }
+    }
+    el.focus();
+    try { el.click(); } catch { /* 忽略 */ }
+  };
+
+  // 输入防抖 300ms 再解析（每按一键就解析会闪烁）
+  React.useEffect(() => {
+    if (manual) return undefined;
+    const text = title;
+    if (!text || !text.trim()) { setParsed(null); return undefined; }
+    const timer = setTimeout(() => {
+      const result = parseNaturalDue(text, Date.now());
+      if (result.matched.length) {
+        setParsed(result);
+        setDue(result.due ?? '');
+        setDueTime(result.dueTime ?? '');
+      } else {
+        setParsed(null);
+      }
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [title, manual]);
 
   const submit = () => {
     if (busy) return;
-    // 截止日期与优先级是「这一批」的选择，加完保留：同一天连着加几件事时不用反复填
-    Promise.resolve(onAdd({ title, due, priority })).then((ok) => {
-      if (ok !== false) setTitle('');
-    }).catch(() => { /* onAdd 内部已经吞掉错误并显示在错误条上 */ });
+    let payloadTitle = title;
+    if (!manual) {
+      const result = parseNaturalDue(title, Date.now());
+      if (result.matched.length) payloadTitle = result.title; // 日期词摘掉
+    }
+    Promise.resolve(onAdd({
+      title: payloadTitle,
+      due: due || null,
+      dueTime: dueTime || null,
+      priority,
+    })).then((ok) => {
+      if (ok !== false) {
+        setTitle('');
+        setParsed(null);
+        setManual(false);
+        setFlagOpen(false);
+        // 日期/时间/优先级保留：连着录同一天的几件事不用重设
+      }
+    }).catch(() => { /* onAdd 内部已显示错误 */ });
   };
 
-  return React.createElement('div', {
-    style: { display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', marginBottom: 10 },
-  }, [
-    React.createElement('input', {
-      key: 'ti',
-      className: 'wt-input',
-      style: { flex: '1 1 200px', fontSize: 12.5, padding: '5px 9px' },
-      value: title,
-      placeholder: t('addPlaceholder'),
-      'aria-label': t('addPlaceholder'),
-      onChange: (event) => setTitle(event.target.value),
-      onKeyDown: (event) => { if (event.key === 'Enter') submit(); },
-    }),
-    React.createElement('label', {
-      key: 'due',
-      title: t('dueLabel'),
-      style: { display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11, color: C.label3 },
-    }, [
-      t('dueLabel'),
+  const today = dayKey(Date.now());
+  const dateLabel = due
+    ? (due === today ? t('todayWord') : `${due.slice(5).replace('-', '-')}`)
+    : t('dateUnset');
+  const timeLabel = dueTime || t('timeUnset');
+  const prioLabel = priority === 'high' ? t('prioHigh') : priority === 'normal' ? t('prioNormal') : priority === 'low' ? t('prioLow') : t('prioNone');
+  const prioColor = priority === 'high' ? C.error : priority === 'normal' ? C.warn : C.label3;
+
+  const flags = [
+    { value: 'none', label: t('prioNone'), color: C.label3, dashed: true },
+    { value: 'high', label: t('prioHigh'), color: C.error },
+    { value: 'normal', label: t('prioNormal'), color: C.warn },
+    { value: 'low', label: t('prioLow'), color: C.label3 },
+  ];
+
+  const setDate = (value) => {
+    setManual(true);
+    setDue(value);
+    if (!value) setDueTime(''); // 没日期就没时间
+    setFlagOpen(false);
+  };
+  const setTime = (value) => {
+    setManual(true);
+    if (value && !due) setDue(dayKey(Date.now())); // 只选时间＝今天
+    setDueTime(value);
+  };
+
+  return React.createElement('div', { key: 'qa', style: { marginBottom: 12 } }, [
+    // ---- 第一行：内容 + 添加 ----
+    React.createElement('div', { key: 'l1', style: { display: 'flex', alignItems: 'center', gap: 8 } }, [
       React.createElement('input', {
-        key: 'i',
+        key: 'ti',
         className: 'wt-input',
-        type: 'date',
-        value: due,
-        'aria-label': t('dueLabel'),
-        onChange: (event) => setDue(event.target.value),
+        style: { flex: '1 1 auto', fontSize: 13, padding: '7px 10px' },
+        value: title,
+        placeholder: t('addPlaceholder'),
+        'aria-label': t('addPlaceholder'),
+        onChange: (event) => {
+          const next = event.target.value;
+          setTitle(next);
+          // 手动优先，但把标题清空＝重新开始：交回给自动识别
+          if (!next.trim()) { setManual(false); setParsed(null); }
+        },
+        onKeyDown: (event) => { if (event.key === 'Enter') submit(); },
       }),
+      React.createElement('button', {
+        key: 'add', type: 'button', className: 'wt-btn wt-btn-primary',
+        disabled: Boolean(busy), onClick: submit,
+      }, t('add')),
     ]),
-    React.createElement('label', {
-      key: 'prio',
-      title: t('priorityLabel'),
-      style: { display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11, color: C.label3 },
-    }, [
-      t('priorityLabel'),
-      React.createElement('select', {
-        key: 's',
-        className: 'wt-input',
-        value: priority,
-        'aria-label': t('priorityLabel'),
-        onChange: (event) => setPriority(event.target.value),
+
+    // ---- 第二行（更小）：日期 / 时间 / 优先级 ----
+    React.createElement('div', { key: 'l2', style: { display: 'flex', alignItems: 'center', gap: 10, marginTop: 8, fontSize: 11.5, flexWrap: 'wrap' } }, [
+      // 日期：label 里套一个透明的原生 date 输入，点它即弹系统日历
+      React.createElement('label', {
+        key: 'due',
+        className: `wt-chip${parsed && parsed.due ? ' is-parsed' : ''}`,
+        title: t('dueLabel'),
+        onClick: (event) => { event.preventDefault(); openPicker(dateRef); },
+        style: { position: 'relative', cursor: 'pointer', color: due ? C.label : C.label3, borderColor: parsed && parsed.due ? C.brand : undefined },
       }, [
-        React.createElement('option', { key: 'high', value: 'high' }, t('prioHigh')),
-        React.createElement('option', { key: 'normal', value: 'normal' }, t('prioNormal')),
-        React.createElement('option', { key: 'low', value: 'low' }, t('prioLow')),
+        React.createElement(IconCal, { key: 'i' }),
+        React.createElement('span', { key: 'v' }, due ? `${today === due ? t('todayWord') : due}${parsed && parsed.due ? ` · ${t('fromParsed')}` : ''}` : t('dateUnset')),
+        React.createElement('input', {
+          key: 'in', ref: dateRef, type: 'date', value: due, 'aria-label': t('dueLabel'),
+          style: { position: 'absolute', inset: 0, opacity: 0, border: 0, padding: 0, width: '100%', height: '100%', cursor: 'pointer' },
+          onChange: (event) => setDate(event.target.value),
+        }),
+      ]),
+      // 时间：同样用原生 time 输入；只选时间时自动补今天
+      React.createElement('label', {
+        key: 'time',
+        className: `wt-chip${parsed && parsed.dueTime ? ' is-parsed' : ''}`,
+        title: t('dueTimeLabel'),
+        onClick: (event) => { event.preventDefault(); openPicker(timeRef); },
+        style: { position: 'relative', cursor: 'pointer', color: dueTime ? C.label : C.label3, borderColor: parsed && parsed.dueTime ? C.brand : undefined },
+      }, [
+        React.createElement(IconClock, { key: 'i' }),
+        React.createElement('span', { key: 'v' }, `${timeLabel}${parsed && parsed.dueTime ? ` · ${t('fromParsed')}` : ''}`),
+        React.createElement('input', {
+          key: 'in', ref: timeRef, type: 'time', value: dueTime, lang: 'zh-CN', 'aria-label': t('dueTimeLabel'),
+          style: { position: 'absolute', inset: 0, opacity: 0, border: 0, padding: 0, width: '100%', height: '100%', cursor: 'pointer' },
+          onChange: (event) => setTime(event.target.value),
+        }),
+      ]),
+      // 优先级：点开四个小旗
+      React.createElement('span', { key: 'prio', style: { position: 'relative' } }, [
+        React.createElement('button', {
+          key: 'btn', type: 'button', className: 'wt-chip', style: { color: prioColor, cursor: 'pointer', font: 'inherit', fontSize: 11.5 },
+          title: t('priorityLabel'), 'aria-expanded': flagOpen,
+          onClick: () => setFlagOpen((open) => !open),
+        }, [
+          React.createElement(IconFlag, { key: 'f', dashed: priority === 'none', filled: priority !== 'none' }),
+          React.createElement('span', { key: 'v' }, `${t('priorityLabel')} · ${prioLabel}`),
+        ]),
+        flagOpen ? React.createElement('div', {
+          key: 'pop',
+          style: {
+            position: 'absolute', top: '100%', left: 0, zIndex: 5, marginTop: 4, padding: 6, display: 'flex', gap: 4,
+            background: C.layer1, border: `1px solid ${C.border}`, borderRadius: 10, boxShadow: '0 8px 24px rgba(0,0,0,.12)',
+          },
+        }, flags.map((flag) => React.createElement('button', {
+          key: flag.value, type: 'button', className: 'wt-chip',
+          style: { color: flag.color, font: 'inherit', fontSize: 11.5, cursor: 'pointer', borderColor: priority === flag.value ? flag.color : undefined },
+          title: flag.label,
+          onClick: () => { setPriority(flag.value); setFlagOpen(false); },
+        }, [
+          React.createElement(IconFlag, { key: 'f', filled: priority === flag.value, dashed: flag.value === 'none' }),
+          React.createElement('span', { key: 'v' }, flag.label),
+        ]))) : null,
       ]),
     ]),
-    React.createElement('button', {
-      key: 'add',
-      type: 'button',
-      className: 'wt-btn wt-btn-primary',
-      disabled: Boolean(busy),
-      onClick: submit,
-    }, t('add')),
   ]);
 }
 
@@ -477,7 +702,7 @@ function QuickAdd({ t, onAdd, busy }) {
  * 单行：查看 / 行内编辑 / 二次确认删除
  * 状态都留在这一行内部，所以在别的行上敲字、或者列表刷新，都不会把正在编辑的内容冲掉。
  * ------------------------------------------------------------------ */
-function TodoRow({ todo, today, t, onToggle, onRemove, onSave }) {
+function TodoRow({ todo, today, t, onToggle, onRemove, onSave, drag }) {
   const [editing, setEditing] = React.useState(false);
   const [draft, setDraft] = React.useState(null);
   const [notesOpen, setNotesOpen] = React.useState(false);
@@ -501,6 +726,7 @@ function TodoRow({ todo, today, t, onToggle, onRemove, onSave }) {
       due,
       priority: row.priority === 'high' || row.priority === 'low' ? row.priority : 'normal',
       project: typeof row.project === 'string' ? row.project : '',
+      dueTime: typeof row.dueTime === 'string' ? row.dueTime : '',
       notes: typeof row.notes === 'string' ? row.notes : '',
     });
     setNotesOpen(Boolean(row.notes));
@@ -519,7 +745,12 @@ function TodoRow({ todo, today, t, onToggle, onRemove, onSave }) {
     const title = String(draft.title ?? '').trim();
     if (title !== (row.title ?? '')) patch.title = title;
     const nextDue = draft.due || '';
-    if (nextDue !== due) patch.due = nextDue; // 空串 = 清空截止日期
+    if (nextDue !== due) {
+      patch.due = nextDue; // 空串 = 清空截止日期
+      if (!nextDue) patch.dueTime = 'none'; // 没有日期就没有时间
+    }
+    const nextDueTime = String(draft.dueTime ?? '').trim();
+    if (nextDue && nextDueTime !== (row.dueTime ?? '')) patch.dueTime = nextDueTime === '' ? 'none' : nextDueTime;
     const priority = draft.priority || 'normal';
     if (priority !== (row.priority ?? 'normal')) patch.priority = priority;
     const project = String(draft.project ?? '').trim();
@@ -571,6 +802,11 @@ function TodoRow({ todo, today, t, onToggle, onRemove, onSave }) {
           'aria-label': t('dueLabel'),
           onChange: (event) => setDraft((prev) => ({ ...prev, due: event.target.value })),
         })),
+        field('tm', t('dueTimeLabel'), React.createElement('input', {
+          className: 'wt-input', style: inputStyle, type: 'time', value: draft.dueTime, disabled: !draft.due,
+          'aria-label': t('dueTimeLabel'),
+          onChange: (event) => setDraft((prev) => ({ ...prev, dueTime: event.target.value })),
+        })),
         field('prio', t('priorityLabel'), React.createElement('select', {
           className: 'wt-input', style: inputStyle, value: draft.priority,
           'aria-label': t('priorityLabel'),
@@ -644,7 +880,34 @@ function TodoRow({ todo, today, t, onToggle, onRemove, onSave }) {
     }, row.source === 'agent' ? t('sourceAgent') : t('sourceSession')));
   }
 
-  return React.createElement('div', { className: 'wt-row' }, [
+  // 拖动属性：只有父级给了 drag 才可拖（未启用时行为与以前完全一致）
+  const dragAttrs = drag
+    ? {
+      draggable: true,
+      onDragStart: (event) => {
+        try {
+          event.dataTransfer?.setData('text/plain', row.id ?? '');
+          if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
+        } catch { /* 少数环境不允许写 dataTransfer，忽略即可 */ }
+        drag.onStart?.(row.id);
+      },
+      onDragOver: (event) => { event.preventDefault(); drag.onOver?.(row.id); },
+      onDrop: (event) => { event.preventDefault(); drag.onDrop?.(row.id); },
+      onDragEnd: () => drag.onEnd?.(),
+      title: drag.hint,
+      style: drag.dragging ? { opacity: 0.45 } : undefined,
+    }
+    : {};
+  return React.createElement('div', { className: 'wt-row', ...dragAttrs, style: row.priority === 'high' ? { borderLeft: `2px solid ${C.error}`, paddingLeft: 8 } : undefined }, [
+    /* 优先级呈现（设计稿 v5）：高＝红色左缘 + 实心红旗；中＝琥珀；低＝灰；无＝什么都不显示 */
+    row.priority && row.priority !== 'none' ? React.createElement('span', {
+      key: 'prio-flag',
+      title: row.priority === 'high' ? t('prioHigh') : row.priority === 'normal' ? t('prioNormal') : t('prioLow'),
+      style: {
+        display: 'inline-flex', flex: '0 0 auto',
+        color: row.priority === 'high' ? C.error : row.priority === 'normal' ? C.warn : C.label3,
+      },
+    }, React.createElement(IconFlag, { filled: row.priority === 'high' })) : null,
     React.createElement('button', {
       key: 'check',
       type: 'button',
@@ -690,7 +953,7 @@ function TodoRow({ todo, today, t, onToggle, onRemove, onSave }) {
 /* ------------------------------------------------------------------ *
  * 分组：空组整块不渲染，避免五个空标题堆在面板上
  * ------------------------------------------------------------------ */
-function Group({ label, items, closed, t, today, onToggleOpen, onToggleTodo, onRemove, onSave }) {
+function Group({ label, items, meta, closed, t, today, onToggleOpen, onToggleTodo, onRemove, onSave, drag }) {
   const list = asArray(items);
   if (!list.length) return null;
   return React.createElement('div', { style: { marginTop: 6 } }, [
@@ -704,7 +967,7 @@ function Group({ label, items, closed, t, today, onToggleOpen, onToggleTodo, onR
     }, [
       React.createElement(IconChevron, { key: 'c', open: !closed }),
       React.createElement('span', { key: 'l', style: { fontWeight: 600, fontSize: 12 } }, label),
-      React.createElement('span', { key: 'n', style: { fontSize: 11, color: C.label3 } }, String(list.length)),
+      React.createElement('span', { key: 'n', style: { fontSize: 11, color: C.label3 } }, meta || String(list.length)),
       React.createElement('span', { key: 'sp', style: { flex: 1 } }),
       React.createElement('span', { key: 'h', style: { fontSize: 11, color: C.label3 } }, closed ? t('expand') : t('collapse')),
     ]),
@@ -716,6 +979,14 @@ function Group({ label, items, closed, t, today, onToggleOpen, onToggleTodo, onR
       onToggle: onToggleTodo,
       onRemove,
       onSave,
+        drag: drag ? {
+          dragging: drag.dragId === todo?.id,
+          hint: drag.hint,
+          onStart: drag.onStart,
+          onOver: drag.onOver,
+          onDrop: drag.onDrop,
+          onEnd: drag.onEnd,
+        } : undefined,
     }))),
   ]);
 }
@@ -779,7 +1050,11 @@ const GROUPS = [
 function WorkTodoPanel(props) {
   // t 由 locale 服务通过 slot props 注入；拿不到时退回中文，至少不显示裸 key
   const t = typeof props?.t === 'function' ? props.t : (key) => zh[key] ?? key;
-  const { status, data, error, refresh } = useList();
+  // 排序：manual（默认，尊重拖动）/ priority / created；必须在 useList(sort) 之前声明
+  const [sort, setSortState] = React.useState(lastSort);
+  const setSort = React.useCallback((next) => { lastSort = next; setSortState(next); }, []);
+  const [dragId, setDragId] = React.useState(null);
+  const { status, data, error, refresh } = useList(sort);
 
   // 写操作的错误条；readError 是拉取错误（用户关掉之后，只有换成新错误才再弹）
   const [barError, setBarError] = React.useState(null);
@@ -791,6 +1066,8 @@ function WorkTodoPanel(props) {
   const [pending, setPending] = React.useState(0);
   // 「已完成」默认折叠（做完的事不用占满屏幕），其余默认展开
   const [closed, setClosed] = React.useState({ completed: true });
+  // 视图：按截止（默认）或按项目
+  const [view, setView] = React.useState('due');
 
   /**
    * 所有写操作的统一外壳：成功清掉错误条，失败把宿主的 error 原文放上去，
@@ -830,6 +1107,60 @@ function WorkTodoPanel(props) {
   const handleRemove = React.useCallback((ref) => runWrite(() => postJson('/remove', { ref })), [runWrite]);
   const handleSave = React.useCallback((ref, patch) => runWrite(() => postJson('/update', { ref, ...patch })), [runWrite]);
 
+  /** 把 dragId 挪到目标之前，得到新的完整顺序并落盘（manual 模式生效） */
+
+  const handleDropOn = React.useCallback((targetId) => {
+
+    const dragging = dragId;
+
+    setDragId(null);
+
+    if (!dragging || !targetId || dragging === targetId) return Promise.resolve(false);
+
+    const ids = asArray(data?.todos).map((todo) => todo?.id).filter(Boolean);
+
+    const from = ids.indexOf(dragging);
+
+    if (from === -1) return Promise.resolve(false);
+
+    ids.splice(from, 1);
+
+    const to = ids.indexOf(targetId);
+
+    ids.splice(to === -1 ? ids.length : to, 0, dragging);
+
+    return runWrite(() => postJson('/reorder', { ids })).then((result) => result.ok);
+
+  }, [dragId, data, runWrite]);
+
+  
+
+  const dragHandlers = React.useMemo(() => ({
+
+    dragId,
+
+    hint: t('dragHint'),
+
+    onStart: (id) => {
+
+      setDragId(id);
+
+      // 拖了就说明想自己定顺序：自动切到手动，否则松手后看起来「没生效」
+
+      if (sort !== 'manual') setSort('manual');
+
+    },
+
+    onOver: () => {},
+
+    onDrop: (id) => handleDropOn(id),
+
+    onEnd: () => setDragId(null),
+
+  }), [dragId, sort, t, setSort, handleDropOn]);
+
+  
+
   const handleAdopt = React.useCallback((sessionTodos) => runWrite(() => postJson('/adopt', { todos: sessionTodos }))
     .then((result) => {
       // runWrite 已经刷新过列表，这里补一句「提升了几条、跳过几条」的回执，否则点完像没反应
@@ -877,9 +1208,21 @@ function WorkTodoPanel(props) {
   const stats = data?.stats ?? {};
   const today = typeof data?.today === 'string' && data.today ? data.today : localToday();
   const store = data?.store ?? null;
+  const version = typeof data?.version === 'string' ? data.version : '';
+  const update = data?.update ?? null;
   const num = (value) => (Number.isFinite(Number(value)) ? Number(value) : 0);
   const overdueCount = num(stats.overdue);
-  const totalVisible = GROUPS.reduce((sum, group) => sum + asArray(groups[group.key]).length, 0);
+  // 视图分桶：按截止（原有 GROUPS）或按项目（宿主给的 projectGroups，附 未完成/总数/逾期）
+  const projectGroups = asArray(data?.projectGroups);
+  const viewGroups = view === 'project'
+    ? projectGroups.map((bucket) => ({
+      key: `p:${bucket?.key ?? ''}`,
+      label: bucket?.project ? String(bucket.project) : t('noProject'),
+      meta: `${num(bucket?.open)}/${num(bucket?.total)}${num(bucket?.overdue) ? ` · ${t('statOverdue')} ${num(bucket.overdue)}` : ''}`,
+      items: bucket?.todos,
+    }))
+    : GROUPS.map((group) => ({ key: group.key, label: t(group.label), items: groups[group.key] }));
+  const totalVisible = viewGroups.reduce((sum, group) => sum + asArray(group.items).length, 0);
 
   const chips = [
     { key: 'open', label: t('statOpen'), value: num(stats.open) },
@@ -908,6 +1251,31 @@ function WorkTodoPanel(props) {
         React.createElement('span', { key: 'l', style: { color: C.label3 } }, chip.label),
         React.createElement('b', { key: 'v', style: { fontWeight: 650 } }, String(chip.value)),
       ])),
+      React.createElement('span', { key: 'sort', className: 'wt-seg', title: t('sortLabel') }, [
+        ...['manual', 'priority', 'created'].map((mode) => React.createElement('button', {
+          key: mode,
+          type: 'button',
+          className: `wt-seg-btn${sort === mode ? ' is-on' : ''}`,
+          title: mode === 'manual' ? t('dragHint') : `${t('sortLabel')}：${t(`sort${mode === 'manual' ? 'Manual' : mode === 'priority' ? 'Priority' : 'Created'}`)}`,
+          onClick: () => setSort(mode),
+        }, t(`sort${mode === 'manual' ? 'Manual' : mode === 'priority' ? 'Priority' : 'Created'}`))),
+      ]),
+      React.createElement('span', { key: 'view', className: 'wt-seg' }, [
+        React.createElement('button', {
+          key: 'due',
+          type: 'button',
+          className: `wt-seg-btn${view === 'due' ? ' is-on' : ''}`,
+          title: t('viewDue'),
+          onClick: () => setView('due'),
+        }, t('viewDue')),
+        React.createElement('button', {
+          key: 'proj',
+          type: 'button',
+          className: `wt-seg-btn${view === 'project' ? ' is-on' : ''}`,
+          title: t('viewProject'),
+          onClick: () => setView('project'),
+        }, t('viewProject')),
+      ]),
       React.createElement('span', { key: 'sp', style: { flex: 1 } }),
       React.createElement('button', {
         key: 'rf',
@@ -980,10 +1348,11 @@ function WorkTodoPanel(props) {
 
     /* 分组列表 */
     totalVisible
-      ? React.createElement('div', { key: 'groups' }, GROUPS.map((group) => React.createElement(Group, {
+      ? React.createElement('div', { key: 'groups' }, viewGroups.map((group) => React.createElement(Group, {
         key: group.key,
-        label: t(group.label),
-        items: groups[group.key],
+        label: group.label,
+        meta: group.meta,
+        items: group.items,
         closed: Boolean(closed[group.key]),
         t,
         today,
@@ -991,6 +1360,7 @@ function WorkTodoPanel(props) {
         onToggleTodo: handleToggle,
         onRemove: handleRemove,
         onSave: handleSave,
+        drag: dragHandlers,
       })))
       : React.createElement('div', {
         key: 'empty',
@@ -1004,13 +1374,34 @@ function WorkTodoPanel(props) {
     React.createElement('div', {
       key: 'foot',
       style: { marginTop: 14, paddingTop: 8, borderTop: `1px solid ${C.border1}`, fontSize: 10.5, color: C.label3, lineHeight: 1.7 },
-    }, store && store.location
-      ? React.createElement('div', {
-        key: 'store',
-        title: `${t('storeAt')}：${store.location}`,
-        style: { wordBreak: 'break-all' },
-      }, `${t('storeAt')} · ${store.kind === 'domain' ? t('storeDomain') : t('storeFile')} · ${store.location}`)
-      : null),
+    }, [
+      /* 角落信息：装了哪一版 + 有没有新版（一眼可见，不占主区） */
+      React.createElement('div', {
+        key: 'ver',
+        style: { display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', marginBottom: 2 },
+      }, [
+        React.createElement('span', {
+          key: 'v',
+          title: t('versionHint'),
+          style: { color: C.label3 },
+        }, `${t('versionLabel')} ${version ? `v${version}` : '—'}`),
+        update?.hasUpdate
+          ? React.createElement('span', {
+            key: 'u',
+            className: 'wt-chip',
+            style: { fontSize: 10, color: C.ok, borderColor: tint(C.ok, 50), background: tint(C.ok, 12) },
+            title: `${t('updateHint')}：dsh plugin --profile desktop add dsh-worktodo@${update.latest}`,
+          }, `${t('updateAvailable')} v${update.latest}`)
+          : null,
+      ]),
+      store && store.location
+        ? React.createElement('div', {
+          key: 'store',
+          title: `${t('storeAt')}：${store.location}`,
+          style: { wordBreak: 'break-all' },
+        }, `${t('storeAt')} · ${store.kind === 'domain' ? t('storeDomain') : t('storeFile')} · ${store.location}`)
+        : null,
+    ]),
   ]);
 }