dsh-taskboard 0.3.3 → 0.4.0

package/src/client/board/ImportModal.tsx

@@ -0,0 +1,182 @@
+/**
+ * The ledger-import modal (0.4.0): pick a JSON file → dry-run preview
+ * (create / overwrite / invalid classification) → commit as merge or
+ * replace. Replace swaps the WHOLE ledger after an automatic backup and a
+ * double confirmation. Files exported by ⬇ JSON import as-is.
+ *
+ * @module dsh-taskboard/client/board/ImportModal
+ */
+import { useRef, useState } from 'react'
+import type { BoardController } from '../controller.ts'
+import type { ImportPreviewResponse } from '../../shared/api.ts'
+import { useAlert } from './AlertModal.tsx'
+
+/** One classified row (create / overwrite). */
+function PlanRow({ row }: { row: { id: string; title: string; status: string } }) {
+  return (
+    <div className="dsh-atb-imp-row" title={row.id}>
+      <span className="dsh-atb-imp-row-title">{row.title}</span>
+      <span className="dsh-atb-imp-row-status">{row.status}</span>
+    </div>
+  )
+}
+
+/**
+ * The import modal.
+ * @param controller - the controller.
+ */
+export function ImportModal({ controller }: { controller: BoardController }) {
+  const [fileName, setFileName] = useState('')
+  const [parsed, setParsed] = useState<unknown>(null)
+  const [parseError, setParseError] = useState<string | undefined>(undefined)
+  const [plan, setPlan] = useState<ImportPreviewResponse['plan'] | undefined>(undefined)
+  const [mode, setMode] = useState<'merge' | 'replace'>('merge')
+  const [busy, setBusy] = useState(false)
+  const [result, setResult] = useState<string | undefined>(undefined)
+  const [confirmReplace, setConfirmReplace] = useState(false)
+  const fileRef = useRef<HTMLInputElement>(null)
+  const { alert: showAlert, el: alertEl } = useAlert()
+
+  /** Read + parse the picked file, then dry-run the preview. */
+  const onFile = (file: File | undefined): void => {
+    setPlan(undefined)
+    setParseError(undefined)
+    setResult(undefined)
+    setConfirmReplace(false)
+    setFileName('')
+    setParsed(null)
+    if (file === undefined) return
+    void file.text().then(text => {
+      try {
+        const value: unknown = JSON.parse(text)
+        setParsed(value)
+        setFileName(file.name)
+        void controller.importPreview(value).then(p => {
+          if (p !== undefined) setPlan(p)
+        })
+      } catch {
+        setParseError('文件不是合法 JSON')
+      }
+    })
+  }
+
+  /** Commit the import (replace requires the inline double confirmation). */
+  const commit = (): void => {
+    if (parsed === null || plan === undefined || busy) return
+    if (mode === 'replace' && !confirmReplace) {
+      setConfirmReplace(true)
+      return
+    }
+    setBusy(true)
+    void controller.importCommit(mode, parsed).then(r => {
+      setBusy(false)
+      setConfirmReplace(false)
+      if (r === undefined) return
+      setResult(r.mode === 'replace'
+        ? `整册替换完成：导入 ${r.created + r.overwritten} 张（原 ${r.replacedTotal} 张已整册备份）`
+        : `合并完成：新增 ${r.created} 张、覆盖 ${r.overwritten} 张`)
+    })
+  }
+
+  const close = (): void => controller.closeImport()
+
+  return (
+    <div className="dsh-atb-modal-backdrop" onClick={e => { if (e.target === e.currentTarget) close() }}>
+      <div className="dsh-atb-modal dsh-atb-imp" role="dialog" aria-modal="true" aria-label="导入台账">
+        <div className="dsh-atb-modal-head">
+          <span className="dsh-atb-modal-headicon">⬆</span>
+          <div className="dsh-atb-modal-headtext">
+            <h3>导入台账</h3>
+            <p>选择导出的 JSON 备份文件：先预览、再合并或整册替换</p>
+          </div>
+          <button type="button" className="dsh-atb-modal-close" aria-label="关闭" onClick={close}>✕</button>
+        </div>
+        <div className="dsh-atb-modal-body">
+          <div className="dsh-atb-imp-picker">
+            <input
+              ref={fileRef}
+              type="file"
+              accept=".json,application/json"
+              onChange={e => onFile(e.target.files?.[0])}
+            />
+            {fileName.length > 0 && <span className="dsh-atb-imp-filename">{fileName}</span>}
+          </div>
+          <div className="dsh-atb-imp-note">⬇ JSON 导出的文件即为同格式备份，可直接导入恢复；导入文件的 schemaVersion 必须与当前版本一致。</div>
+
+          {parseError !== undefined && <div className="dsh-atb-imp-error">{parseError}</div>}
+          {plan === undefined && parseError === undefined && fileName.length > 0 && <div className="dsh-atb-empty2">预览中…</div>}
+
+          {plan !== undefined && (
+            <>
+              <div className="dsh-atb-imp-stats">
+                <div className="dsh-atb-imp-stat" data-tone="ok"><b>{plan.create.length}</b><span>新增</span></div>
+                <div className="dsh-atb-imp-stat" data-tone="warn"><b>{plan.overwrite.length}</b><span>覆盖（同 id）</span></div>
+                <div className="dsh-atb-imp-stat" data-tone={plan.invalid.length > 0 ? 'bad' : undefined}><b>{plan.invalid.length}</b><span>无效（跳过）</span></div>
+              </div>
+
+              {plan.create.length > 0 && (
+                <div className="dsh-atb-imp-sec">
+                  <h4>新增任务</h4>
+                  <div className="dsh-atb-imp-list">{plan.create.map(r => <PlanRow key={r.id} row={r} />)}</div>
+                </div>
+              )}
+              {plan.overwrite.length > 0 && (
+                <div className="dsh-atb-imp-sec">
+                  <h4>覆盖任务（整卡替换，含执行历史与评论）</h4>
+                  <div className="dsh-atb-imp-list">{plan.overwrite.map(r => <PlanRow key={r.id} row={r} />)}</div>
+                </div>
+              )}
+              {plan.invalid.length > 0 && (
+                <div className="dsh-atb-imp-sec">
+                  <h4>无效条目（不会导入）</h4>
+                  <div className="dsh-atb-imp-list">
+                    {plan.invalid.map((r, i) => (
+                      <div key={r.id ?? `invalid-${i}`} className="dsh-atb-imp-row" data-tone="bad" title={r.id ?? ''}>
+                        <span className="dsh-atb-imp-row-title">{r.id ?? '（无 id）'}</span>
+                        <span className="dsh-atb-imp-row-status">{r.reason}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              <div className="dsh-atb-mode-picker">
+                <button type="button" className="dsh-atb-mode-opt" data-on={mode === 'merge'} onClick={() => { setMode('merge'); setConfirmReplace(false) }}>
+                  <span className="dsh-atb-mode-name">⊕ 合并</span>
+                  <span className="dsh-atb-mode-hint">新增 + 按 id 覆盖，其余不动</span>
+                </button>
+                <button type="button" className="dsh-atb-mode-opt" data-on={mode === 'replace'} onClick={() => setMode('replace')}>
+                  <span className="dsh-atb-mode-name">💣 整册替换</span>
+                  <span className="dsh-atb-mode-hint">清空当前台账，以导入文件为准（先自动备份）</span>
+                </button>
+              </div>
+
+              {result !== undefined && <div className="dsh-atb-imp-result">{result}</div>}
+            </>
+          )}
+        </div>
+        <div className="dsh-atb-modal-foot">
+          <span className="dsh-atb-modal-hint">
+            {mode === 'replace'
+              ? confirmReplace ? '⚠ 再次点击确认执行整册替换（不可撤销，已自动备份）' : '整册替换需要二次确认'
+              : '合并只写入预览中列出的任务'}
+          </span>
+          <span className="dsh-atb-modal-footbtns">
+            <button type="button" className="dsh-atb-btn" onClick={close}>{result !== undefined ? '关闭' : '取消'}</button>
+            <button
+              type="button"
+              className="dsh-atb-btn"
+              data-primary="true"
+              data-danger={mode === 'replace' && confirmReplace ? 'true' : undefined}
+              disabled={plan === undefined || busy || (result !== undefined && false)}
+              onClick={commit}
+            >
+              {mode === 'replace' && confirmReplace ? '确认整册替换' : '执行导入'}
+            </button>
+          </span>
+        </div>
+      </div>
+      {alertEl}
+    </div>
+  )
+}

package/src/client/board/TaskBoard.tsx

@@ -12,6 +12,8 @@ import { PLUGIN_VERSION } from '../../shared/version.ts'
 import { DRAG_TYPE, TaskCard } from './TaskCard.tsx'
 import { TaskDetail } from './TaskDetail.tsx'
 import { TaskFormModal } from './TaskFormModal.tsx'
+import { ImportModal } from './ImportModal.tsx'
+import { TemplateManager } from './TemplateManager.tsx'
 import { useAlert } from './AlertModal.tsx'
 
 /** Column labels. */
@@ -85,15 +87,50 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
   const live = filterTasks(state, state.ledger.tasks.filter(t => t.trashedAt === undefined))
   const selected = state.selectedId === undefined ? undefined : state.ledger.tasks.find(t => t.id === state.selectedId)
   const { alert: showAlert, el: alertEl } = useAlert()
+  // + 新建任务 ▼ dropdown (0.4.0): blank / templates / manage / import.
+  const [newMenuOpen, setNewMenuOpen] = useState(false)
+  const closeMenu = (): void => setNewMenuOpen(false)
 
   return (
     <div className="dsh-atb-board">
       <div className="dsh-atb-toolbar">
         <h2 className="dsh-atb-title">Agent 任务看板</h2>
         <span className="dsh-atb-count">{live.length} 任务 · rev {state.ledger.revision}</span>
-        <button type="button" className="dsh-atb-btn" data-primary="true" onClick={() => controller.setComposer(true)}>
-          + 新建任务
-        </button>
+        <div className="dsh-atb-newmenu">
+          <button
+            type="button"
+            className="dsh-atb-btn"
+            data-primary="true"
+            onClick={() => {
+              const next = !newMenuOpen
+              setNewMenuOpen(next)
+              if (next) controller.prepareTemplateMenu()
+            }}
+          >
+            + 新建任务 ▼
+          </button>
+          {newMenuOpen && (
+            <>
+              <div className="dsh-atb-newmenu-backdrop" onClick={closeMenu} />
+              <div className="dsh-atb-newmenu-list">
+                <button type="button" className="dsh-atb-newmenu-opt" onClick={() => { closeMenu(); controller.setComposer(true) }}>空白任务</button>
+                {state.templates.map(t => (
+                  <button
+                    key={t.id}
+                    type="button"
+                    className="dsh-atb-newmenu-opt"
+                    title={t.task.description !== undefined && t.task.description.length > 0 ? t.task.description.slice(0, 120) : t.name}
+                    onClick={() => { closeMenu(); controller.newFromTemplate(t.task) }}
+                  >
+                    {t.name}{t.builtin === true ? '' : ''}
+                  </button>
+                ))}
+                <div className="dsh-atb-newmenu-sep" />
+                <button type="button" className="dsh-atb-newmenu-opt" onClick={() => { closeMenu(); controller.openTemplateManager() }}>⌗ 管理模板…</button>
+              </div>
+            </>
+          )}
+        </div>
         <div className="dsh-atb-spacer" />
         <input
           className="dsh-atb-input dsh-atb-search"
@@ -138,6 +175,7 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
           {state.secondaryOpen ? '返回看板' : '其它任务'}
         </button>
         <button type="button" className="dsh-atb-btn" title="健康诊断：遗留 worktree、台账基本项" onClick={() => controller.openDiagnostics()}>⚙ 诊断</button>
+        <button type="button" className="dsh-atb-btn" title="从 JSON 备份文件导入台账（预览后合并或整册替换）" onClick={() => controller.openImport()}>⬆ 导入</button>
         <button type="button" className="dsh-atb-btn" title="下载完整台账备份（JSON）" onClick={() => controller.exportJson()}>⬇ JSON</button>
         <button type="button" className="dsh-atb-btn" title="下载任务清单（CSV）" onClick={() => controller.exportCsv()}>⬇ CSV</button>
         <a
@@ -223,6 +261,10 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
 
       {state.diagOpen && <DiagnosticsPanel controller={controller} />}
 
+      {state.importOpen && <ImportModal controller={controller} />}
+
+      {state.tplManagerOpen && <TemplateManager controller={controller} />}
+
       {alertEl}
     </div>
   )

package/src/client/board/TaskCard.tsx

@@ -86,6 +86,15 @@ export function TaskCard({ task, controller, draggable = false, now, onAlert }:
           <span className="dsh-atb-badge" data-kind="scheduled">⏰ {fmtTime(task.execution.nextRunAt)}</span>
         )}
         {task.model !== undefined && <span className="dsh-atb-badge">{task.model.model}</span>}
+        {task.checklist !== undefined && task.checklist.length > 0 && (
+          <span
+            className="dsh-atb-badge"
+            data-kind={task.status === 'in_review' && task.checklist.some(i => !i.checked) ? 'blocked' : 'checklist'}
+            title={task.status === 'in_review' && task.checklist.some(i => !i.checked) ? '待验收：清单未全部勾选' : '验收清单进度'}
+          >
+            ☑ {task.checklist.filter(i => i.checked).length}/{task.checklist.length}
+          </span>
+        )}
         {task.status === 'done' && <span className="dsh-atb-badge" data-kind="done">完成</span>}
         {last !== undefined && (
           <span className="dsh-atb-badge" data-kind={last.outcome === 'running' ? 'running' : last.outcome}>

package/src/client/board/TaskDetail.tsx

@@ -7,10 +7,10 @@
  *
  * @module dsh-taskboard/client/board/TaskDetail
  */
-import { useState, type ReactNode } from 'react'
+import { useEffect, useState, type ReactNode } from 'react'
 import type { BoardController } from '../controller.ts'
 import type { ExecutionRecord, TaskRecord } from '../../shared/protocol.ts'
-import { canTransition } from '../../shared/protocol.ts'
+import { canTransition, checklistProgress } from '../../shared/protocol.ts'
 import { useAlert } from './AlertModal.tsx'
 import { fmtTime, isStaleClaim } from './TaskBoard.tsx'
 
@@ -58,6 +58,129 @@ function shortHash(hash: string | undefined): string {
   return hash === undefined ? '' : hash.slice(0, 8)
 }
 
+/** Extract the path from one `git status --porcelain` line (rename-aware). */
+function porcelainPath(line: string): string {
+  let p = line.slice(3)
+  const arrow = p.indexOf(' -> ')
+  if (arrow >= 0) p = p.slice(arrow + 4)
+  if (p.startsWith('"') && p.endsWith('"') && p.length > 1) p = p.slice(1, -1)
+  return p
+}
+
+/**
+ * Lazy diff viewer (0.4.0): loads on mount, renders inside a capped <pre>.
+ * @param spec - what to show: one commit hash, or one changed path.
+ */
+function DiffView({ controller, task, execution, commit, path }: {
+  controller: BoardController
+  task: TaskRecord
+  execution: ExecutionRecord
+  commit?: string
+  path?: string
+}) {
+  const [state, setState] = useState<{ loading: boolean; diff?: string; truncated?: boolean; failed?: boolean }>({ loading: true })
+  useEffect(() => {
+    let alive = true
+    setState({ loading: true })
+    void controller.fetchDiff(task.id, { execution: execution.id, ...(commit !== undefined ? { commit } : { path: path ?? '' }) }).then(result => {
+      if (!alive) return
+      if (result === undefined) setState({ loading: false, failed: true })
+      else setState({ loading: false, diff: result.diff, truncated: result.truncated })
+    })
+    return () => { alive = false }
+  }, [controller, task.id, execution.id, commit, path])
+  return (
+    <div className="dsh-atb-diffview">
+      <div className="dsh-atb-diffview-head">
+        <span className="dsh-atb-diffview-title">{commit !== undefined ? `提交 ${shortHash(commit)}` : `文件 ${path}`}</span>
+        {state.loading && <span className="dsh-atb-diffview-hint">读取中…</span>}
+        {state.truncated === true && <span className="dsh-atb-diffview-hint">⚠ 内容过长已截断</span>}
+      </div>
+      {state.failed === true
+        ? <div className="dsh-atb-diffview-error">获取失败（原因见看板顶部错误条；对象可能已随 worktree 删除丢失）</div>
+        : <pre className="dsh-atb-diffview-pre">{state.diff ?? ''}</pre>}
+    </div>
+  )
+}
+
+/**
+ * The DoD checklist block (0.4.0): user-togglable items, checker + evidence
+ * per row; unchecked items highlight while the task sits in in_review.
+ */
+function ChecklistBlock({ task, controller }: { task: TaskRecord; controller: BoardController }) {
+  const items = task.checklist ?? []
+  if (items.length === 0) return null
+  const { done, total } = checklistProgress(task)
+  const unchecked = total - done
+  const reviewing = task.status === 'in_review'
+  return (
+    <div className="dsh-atb-fieldcard" data-kind="checklist">
+      <div className="dsh-atb-fieldcard-label">
+        验收清单（DoD）
+        <span className="dsh-atb-cl-progress" data-tone={reviewing && unchecked > 0 ? 'bad' : undefined}>
+          ☑ {done}/{total}{reviewing && unchecked > 0 ? ` · ${unchecked} 项未完成` : done === total ? ' · 全部完成' : ''}
+        </span>
+      </div>
+      <div className="dsh-atb-cl-items">
+        {items.map(item => (
+          <label
+            key={item.id}
+            className="dsh-atb-cl-item"
+            data-checked={item.checked ? 'true' : undefined}
+            data-alert={reviewing && !item.checked ? 'true' : undefined}
+          >
+            <input
+              type="checkbox"
+              checked={item.checked}
+              onChange={() => void controller.toggleChecklistItem(task, item.id)}
+            />
+            <span className="dsh-atb-cl-text">{item.text}</span>
+            <span className="dsh-atb-cl-meta">
+              {item.checked
+                ? `${item.checkedBy === 'user' ? '👤 用户' : `🤖 ${shortId(item.checkedBy)}`} · ${fmtTime(item.checkedAt)}`
+                : '未完成'}
+              {item.note !== undefined && item.note.length > 0 && <span className="dsh-atb-cl-note" title={item.note}>证据：{item.note}</span>}
+            </span>
+          </label>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * The structured execution report block (0.4.0): the newest execution that
+ * carries one, rendered section by section for the reviewer.
+ */
+function ReportBlock({ task }: { task: TaskRecord }) {
+  const execution = [...task.executions].reverse().find(e => e.report !== undefined)
+  const report = execution?.report
+  if (execution === undefined || report === undefined) return null
+  const section = (label: string, rows: string[] | undefined): ReactNode => rows !== undefined && rows.length > 0
+    ? (
+        <div className="dsh-atb-rpt-sec">
+          <div className="dsh-atb-rpt-label">{label}</div>
+          <ul className="dsh-atb-rpt-list">{rows.map((row, i) => <li key={i}>{row}</li>)}</ul>
+        </div>
+      )
+    : null
+  return (
+    <div className="dsh-atb-fieldcard" data-kind="report">
+      <div className="dsh-atb-fieldcard-label">执行报告<span className="dsh-atb-cl-progress">由执行会话提交 · {fmtTime(execution.endedAt ?? execution.startedAt)}</span></div>
+      <div className="dsh-atb-rpt-summary">{report.summary}</div>
+      {section('改动文件', report.changedFiles)}
+      {section('自验情况', report.checks)}
+      {section('产物', report.artifacts)}
+      {report.risk.length > 0 && (
+        <div className="dsh-atb-rpt-sec">
+          <div className="dsh-atb-rpt-label">剩余风险</div>
+          <div className="dsh-atb-rpt-risk">{report.risk}</div>
+        </div>
+      )}
+    </div>
+  )
+}
+
 /**
  * The 0.3.0 isolation block: branch / baseline→head commits / change stats /
  * uncommitted-changes warning, plus the user-only git actions (merge /
@@ -68,6 +191,9 @@ function IsolationBlock({ task, controller }: { task: TaskRecord; controller: Bo
   const [confirmMerge, setConfirmMerge] = useState(false)
   const [confirmRemove, setConfirmRemove] = useState<'wt' | 'wtb' | null>(null)
   const [busy, setBusy] = useState(false)
+  // Diff viewer (0.4.0): which commit / changed path is expanded.
+  const [openDiff, setOpenDiff] = useState<{ commit?: string; path?: string } | null>(null)
+  const [dirtyOpen, setDirtyOpen] = useState(false)
   const execution = latestIsolated(task)
   const running = task.executions.some(e => e.outcome === 'running')
   if (execution === undefined) return null
@@ -124,9 +250,19 @@ function IsolationBlock({ task, controller }: { task: TaskRecord; controller: Bo
         ? (
             <div className="dsh-atb-iso-commits">
               {commits.slice(0, 10).map(c => (
-                <div key={c.hash} className="dsh-atb-iso-commit">
-                  <code>{shortHash(c.hash)}</code>
-                  <span>{c.subject}</span>
+                <div key={c.hash} className="dsh-atb-iso-commit" data-open={openDiff?.commit === c.hash ? 'true' : undefined}>
+                  <button
+                    type="button"
+                    className="dsh-atb-iso-commit-btn"
+                    title="点击展开该提交的 diff"
+                    onClick={() => setOpenDiff(openDiff?.commit === c.hash ? null : { commit: c.hash })}
+                  >
+                    <code>{shortHash(c.hash)}</code>
+                    <span>{c.subject}</span>
+                  </button>
+                  {openDiff?.commit === c.hash && (
+                    <DiffView controller={controller} task={task} execution={execution} commit={c.hash} />
+                  )}
                 </div>
               ))}
               {commitTotal > 10 && <div className="dsh-atb-iso-more">… 共 {commitTotal} 个提交</div>}
@@ -135,8 +271,32 @@ function IsolationBlock({ task, controller }: { task: TaskRecord; controller: Bo
         : <div className="dsh-atb-iso-nocommit">该次执行没有产生提交（改动可能未提交，见下方警告）</div>}
 
       {dirtyTotal > 0 && (
-        <div className="dsh-atb-iso-dirty" title={dirty.join('\n')}>
-          ⚠ 有 {dirtyTotal} 处未提交修改（合并前请让 agent 提交，或手动处理）
+        <div className="dsh-atb-iso-dirty">
+          <button type="button" className="dsh-atb-iso-dirty-toggle" onClick={() => setDirtyOpen(!dirtyOpen)}>
+            ⚠ 有 {dirtyTotal} 处未提交修改（合并前请让 agent 提交，或手动处理）{dirtyOpen ? ' ▲' : ' ▼ 查看文件'}
+          </button>
+          {dirtyOpen && (
+            <div className="dsh-atb-iso-dirty-files">
+              {dirty.slice(0, 30).map((line, index) => {
+                const filePath = porcelainPath(line)
+                return (
+                  <button
+                    key={`${line}-${index}`}
+                    type="button"
+                    className="dsh-atb-iso-dirty-file"
+                    title="点击查看该文件的未提交 diff"
+                    onClick={() => setOpenDiff(openDiff?.path === filePath ? null : { path: filePath })}
+                  >
+                    <code>{line.slice(0, 2)}</code> {filePath}
+                  </button>
+                )
+              })}
+              {dirtyTotal > 30 && <div className="dsh-atb-iso-more">… 共 {dirtyTotal} 处（完整列表见任务台账）</div>}
+            </div>
+          )}
+          {openDiff?.path !== undefined && dirtyOpen && (
+            <DiffView controller={controller} task={task} execution={execution} path={openDiff.path} />
+          )}
         </div>
       )}
 
@@ -220,6 +380,7 @@ export function TaskDetail({ task, controller, now }: { task: TaskRecord; contro
   const runningExecution = task.executions.find(e => e.outcome === 'running')
   const holder = task.status === 'in_progress' ? task.claimedBy : undefined
   const stale = now !== undefined && isStaleClaim(task, now)
+  const unchecked = (task.checklist ?? []).filter(i => !i.checked).length
 
   /** Jump to an execution's session; prompt precisely when it cannot open. */
   const jumpToSession = (sessionId: string): void => {
@@ -247,6 +408,11 @@ export function TaskDetail({ task, controller, now }: { task: TaskRecord; contro
               <Chip icon="⏰">{task.execution.cron} · 下次 {fmtTime(task.execution.nextRunAt)}</Chip>
             )}
             {task.blocked && <Chip icon="⛔" tone="urgent">受阻</Chip>}
+            {task.checklist !== undefined && task.checklist.length > 0 && (
+              <Chip icon="☑" tone={task.status === 'in_review' && task.checklist.some(i => !i.checked) ? 'urgent' : undefined}>
+                清单 {checklistProgress(task).done}/{task.checklist.length}
+              </Chip>
+            )}
             {task.branch !== undefined && (
               <Chip icon="🌿" tone={undefined}>Worktree · {task.branch.length > 28 ? `${task.branch.slice(0, 28)}…` : task.branch}</Chip>
             )}
@@ -273,6 +439,18 @@ export function TaskDetail({ task, controller, now }: { task: TaskRecord; contro
           >
             ⧉ 复制
           </button>
+          <button
+            type="button"
+            className="dsh-atb-detail-edit"
+            title="把此任务的配置（含清单）保存为模板，新建任务时可用"
+            onClick={() => {
+              void controller.saveAsTemplate(task).then(ok => {
+                if (ok) showAlert('已存为模板（新建任务 ▼ 下拉可用，可在模板管理中改名）')
+              })
+            }}
+          >
+            ⌗ 存为模板
+          </button>
           {canRun && task.branch !== undefined && (
             <button
               type="button"
@@ -332,13 +510,19 @@ export function TaskDetail({ task, controller, now }: { task: TaskRecord; contro
 
       <IsolationBlock task={task} controller={controller} />
 
+      <ReportBlock task={task} />
+
+      <ChecklistBlock task={task} controller={controller} />
+
       <div className="dsh-atb-detail-actions">
         <div className="dsh-atb-movebtns">
           {moveTargets(task).map(to => to === 'done'
             ? (confirmDone
                 ? (
                     <span key={to} className="dsh-atb-confirm">
-                      <span className="dsh-atb-confirm-label">确认完成？</span>
+                      <span className="dsh-atb-confirm-label" data-tone={unchecked > 0 ? 'bad' : undefined}>
+                        {unchecked > 0 ? `仍有 ${unchecked} 项清单未勾选，确认完成？` : '确认完成？'}
+                      </span>
                       <button type="button" className="dsh-atb-btn" data-primary="true" onClick={() => { void controller.move(task.id, task.version, 'done'); setConfirmDone(false) }}>确认</button>
                       <button type="button" className="dsh-atb-btn" onClick={() => setConfirmDone(false)}>取消</button>
                     </span>