dsh-taskboard 0.1.0

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "dsh-taskboard",
+  "description": "Agent-first task board for the DSH web GUI: host-authoritative task ledger with taskboard_* agent tools, project (= workspace) claim boundaries, per-task model execution in fresh sessions, host-side cron scheduling, and a live SSE kanban view. Mounts via the official dsh plugin system — no DSH source changes.",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "lib/index.js",
+  "exports": {
+    ".": "./lib/index.js",
+    "./invariant": "./lib/invariant.js",
+    "./client": "./lib/client.js",
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [],
+      "platform": "web"
+    }
+  },
+  "files": [
+    "lib/**/*.js",
+    "lib/**/*.js.map",
+    "src",
+    "cordis.patch.yml",
+    "LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "author": "cloader",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cloader/dsh-taskboard.git"
+  },
+  "bugs": {
+    "url": "https://github.com/cloader/dsh-taskboard/issues"
+  },
+  "homepage": "https://github.com/cloader/dsh-taskboard#readme",
+  "keywords": [
+    "dsh",
+    "deepseek-harness",
+    "dsh-plugin",
+    "taskboard",
+    "kanban",
+    "agent"
+  ],
+  "scripts": {
+    "build": "npm run build:host && npm run build:client",
+    "build:host": "tsdown -c tsdown.host.config.ts",
+    "build:client": "tsdown -c tsdown.client.config.ts && node scripts/wrap-client.mjs",
+    "watch": "tsdown -c tsdown.host.config.ts --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/dsh-agent": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-home-paths": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-system-prompt": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-tools": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-workspace": "^0.1.0-rc.6",
+    "@deepseek-ai/schemastery": "^3.18.1",
+    "@types/node": "^22.20.1",
+    "@types/react": "~18.3.1",
+    "@types/react-dom": "^18.3.7",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsdown": "0.22.2",
+    "typescript": "~5.7.2",
+    "vitest": "^3.0.0"
+  }
+}

package/src/client/api.ts

@@ -0,0 +1,90 @@
+/**
+ * Browser client for the /taskboard host routes: typed fetch wrappers
+ * (same origin as the GUI) and the SSE subscription with revision-gap
+ * reconciliation (a gap or a reconnect triggers one full state refetch).
+ *
+ * @module dsh-taskboard/client/api
+ */
+import type {
+  ApiResult,
+  ChangeEvent,
+  CreateTaskBody,
+  DeleteTaskBody,
+  MoveTaskBody,
+  StateResponse,
+  TaskRecord,
+  UpdateTaskBody,
+  WorkspaceView,
+} from '../shared/api.ts'
+import type { CommentRecord, TaskSummary } from '../shared/protocol.ts'
+
+/** Unwrap the envelope or throw a readable error. */
+async function unwrap<T>(pending: Response | Promise<Response>): Promise<T> {
+  const res = await pending
+  const body = (await res.json().catch(() => null)) as ApiResult<T> | null
+  if (body === null) throw new Error(`taskboard: HTTP ${res.status}`)
+  if (!body.ok) throw new Error(`taskboard: ${body.error.code}: ${body.error.message}`)
+  return body.value
+}
+
+async function post<T>(path: string, body: unknown): Promise<T> {
+  const res = await fetch(path, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  return unwrap<T>(res)
+}
+
+/** Route client face (the controller consumes this narrow surface). */
+export interface TaskboardClient {
+  state(): Promise<StateResponse>
+  workspaces(): Promise<WorkspaceView[]>
+  create(body: CreateTaskBody): Promise<TaskSummary>
+  get(id: string): Promise<TaskRecord>
+  update(id: string, body: UpdateTaskBody): Promise<TaskSummary>
+  move(id: string, body: MoveTaskBody): Promise<TaskSummary>
+  comment(id: string, bodyText: string): Promise<CommentRecord>
+  remove(id: string, body: DeleteTaskBody): Promise<{ trashed?: boolean; purged?: boolean }>
+  /** Trigger a manual run (fresh in-project session). */
+  run(id: string): Promise<{ executionId: string; sessionId: string }>
+  /** Subscribe to change frames; the disposer stops the stream. */
+  stream(onChange: (event: ChangeEvent) => void, onGap: () => void): () => void
+}
+
+/** Build the client over fetch + EventSource. */
+export function createClient(): TaskboardClient {
+  return {
+    state: () => unwrap<StateResponse>(fetch('/dsh-taskboard/state')),
+    workspaces: () => unwrap<WorkspaceView[]>(fetch('/dsh-taskboard/workspaces')),
+    create: body => post('/dsh-taskboard/tasks', body),
+    get: id => unwrap<TaskRecord>(fetch(`/dsh-taskboard/tasks/${encodeURIComponent(id)}`)),
+    update: (id, body) => post(`/dsh-taskboard/tasks/${encodeURIComponent(id)}/update`, body),
+    move: (id, body) => post(`/dsh-taskboard/tasks/${encodeURIComponent(id)}/move`, body),
+    comment: (id, bodyText) => post(`/dsh-taskboard/tasks/${encodeURIComponent(id)}/comment`, { body: bodyText }),
+    remove: (id, body) => post(`/dsh-taskboard/tasks/${encodeURIComponent(id)}/delete`, body),
+    run: id => post(`/dsh-taskboard/tasks/${encodeURIComponent(id)}/run`, {}),
+    stream(onChange, onGap) {
+      const es = new EventSource('/dsh-taskboard/events')
+      let revision: number | undefined
+      const hello = (event: MessageEvent): void => {
+        const payload = JSON.parse(event.data) as { revision: number }
+        if (revision !== undefined && payload.revision !== revision) onGap()
+        revision = payload.revision
+      }
+      const change = (event: MessageEvent): void => {
+        const payload = JSON.parse(event.data) as ChangeEvent
+        // A gap means we missed frames while disconnected: reconcile fully.
+        if (revision !== undefined && payload.revision !== revision + 1) onGap()
+        revision = payload.revision
+        onChange(payload)
+      }
+      es.addEventListener('hello', hello as EventListener)
+      es.addEventListener('change', change as EventListener)
+      es.onerror = () => { /* EventSource auto-reconnects; hello re-checks the gap */ }
+      return () => {
+        es.close()
+      }
+    },
+  }
+}

package/src/client/board/NewTaskModal.tsx

@@ -0,0 +1,8 @@
+/**
+ * Compatibility shim: the composer moved into TaskFormModal (create + edit
+ * in one dialog). Kept so existing imports keep working.
+ *
+ * @module dsh-taskboard/client/board/NewTaskModal
+ */
+export { TaskFormModal as NewTaskModal } from './TaskFormModal.tsx'
+export type { CatalogModel } from './TaskFormModal.tsx'

package/src/client/board/TaskBoard.tsx

@@ -0,0 +1,184 @@
+/**
+ * The main board view: toolbar (project filter, urgency chips, secondary tab,
+ * composer), five status columns, the detail pane, and the new-task modal.
+ *
+ * @module dsh-taskboard/client/board/TaskBoard
+ */
+import { useSyncExternalStore } from 'react'
+import type { BoardController, ControllerState } from '../controller.ts'
+import type { TaskRecord, TaskStatus, Urgency } from '../../shared/protocol.ts'
+import { MAIN_STATUSES } from '../../shared/protocol.ts'
+import { DRAG_TYPE, TaskCard } from './TaskCard.tsx'
+import { TaskDetail } from './TaskDetail.tsx'
+import { TaskFormModal } from './TaskFormModal.tsx'
+
+/** Column labels. */
+const COLUMN_LABELS: Readonly<Record<TaskStatus, string>> = {
+  backlog: '待规划',
+  todo: '待办',
+  in_progress: '进行中',
+  in_review: '待验收',
+  done: '已完成',
+  canceled: '已取消',
+  archived: '已归档',
+}
+
+/** The two columns between which cards may be dragged both ways. */
+const DRAGGABLE_STATUSES: ReadonlySet<TaskStatus> = new Set(['backlog', 'todo'])
+
+/** Urgency chip labels. */
+const URGENCY_LABELS: Readonly<Record<Urgency, string>> = {
+  urgent: '紧急',
+  normal: '一般',
+  relaxed: '不急',
+}
+
+/** Format an epoch ms as a short local stamp. */
+export function fmtTime(ms: number | undefined): string {
+  if (ms === undefined) return ''
+  const d = new Date(ms)
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
+}
+
+/** Apply the active filters to a task list. */
+function filterTasks(state: ControllerState, tasks: TaskRecord[]): TaskRecord[] {
+  return tasks.filter(t =>
+    (state.filters.workspaceId === undefined || t.workspaceId === state.filters.workspaceId)
+    && (state.filters.urgencies.length === 0 || state.filters.urgencies.includes(t.urgency)))
+}
+
+/**
+ * The board view root.
+ * @param controller - the controller.
+ */
+export function TaskBoard({ controller }: { controller: BoardController }) {
+  const state = useSyncExternalStore(
+    cb => controller.subscribe(cb),
+    () => controller.getSnapshot(),
+  )
+  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)
+
+  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>
+        <div className="dsh-atb-spacer" />
+        <select
+          className="dsh-atb-select"
+          value={state.filters.workspaceId ?? ''}
+          onChange={e => controller.setWorkspaceFilter(e.target.value === '' ? undefined : e.target.value)}
+        >
+          <option value="">全部项目</option>
+          {state.workspaces.map(ws => <option key={ws.id} value={ws.id}>{ws.title || ws.path}</option>)}
+        </select>
+        {(['urgent', 'normal', 'relaxed'] as const).map(u => (
+          <button
+            key={u}
+            type="button"
+            className="dsh-atb-chip"
+            data-urgency={u}
+            data-on={state.filters.urgencies.includes(u)}
+            onClick={() => controller.toggleUrgency(u)}
+          >
+            <span className="dsh-atb-dot" data-urgency={u} />
+            {URGENCY_LABELS[u]}
+          </button>
+        ))}
+        <button type="button" className="dsh-atb-btn" onClick={() => controller.toggleSecondary()}>
+          {state.secondaryOpen ? '返回看板' : '其它任务'}
+        </button>
+        <button type="button" className="dsh-atb-btn" data-primary="true" onClick={() => controller.setComposer(true)}>
+          + 新建任务
+        </button>
+      </div>
+
+      {state.error !== undefined && <div className="dsh-atb-error">{state.error}</div>}
+
+      {state.secondaryOpen
+        ? <SecondaryTab controller={controller} tasks={filterTasks(state, state.ledger.tasks)} />
+        : (
+          <div className="dsh-atb-columns">
+            {MAIN_STATUSES.map(status => {
+              const columnTasks = live.filter(t => t.status === status)
+              const dropTarget = DRAGGABLE_STATUSES.has(status)
+              return (
+                <div
+                  className="dsh-atb-column"
+                  key={status}
+                  onDragOver={dropTarget
+                    ? (e) => {
+                        if (e.dataTransfer.types.includes(DRAG_TYPE)) {
+                          e.preventDefault()
+                          e.dataTransfer.dropEffect = 'move'
+                          e.currentTarget.dataset.dragover = 'true'
+                        }
+                      }
+                    : undefined}
+                  onDragLeave={dropTarget
+                    ? (e) => { delete e.currentTarget.dataset.dragover }
+                    : undefined}
+                  onDrop={dropTarget
+                    ? (e) => {
+                        e.preventDefault()
+                        delete e.currentTarget.dataset.dragover
+                        const id = e.dataTransfer.getData(DRAG_TYPE)
+                        if (id.length === 0) return
+                        const task = state.ledger.tasks.find(t => t.id === id)
+                        if (task === undefined || task.status === status) return
+                        void controller.move(id, task.version, status)
+                      }
+                    : undefined}
+                >
+                  <div className="dsh-atb-colhead">
+                    {COLUMN_LABELS[status]}
+                    <span className="dsh-atb-colcount">{columnTasks.length}</span>
+                  </div>
+                  <div className="dsh-atb-cards">
+                    {columnTasks.map(task => (
+                      <TaskCard
+                        key={task.id}
+                        task={task}
+                        controller={controller}
+                        draggable={dropTarget}
+                      />
+                    ))}
+                    {columnTasks.length === 0 && <div className="dsh-atb-empty">无任务</div>}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+
+      {selected !== undefined && (
+        <div className="dsh-atb-detailpanel">
+          <TaskDetail task={selected} controller={controller} />
+        </div>
+      )}
+
+      {state.composerOpen && (
+        <TaskFormModal
+          controller={controller}
+          task={state.editingId === undefined ? undefined : state.ledger.tasks.find(t => t.id === state.editingId)}
+        />
+      )}
+    </div>
+  )
+}
+
+/** Secondary tab: canceled/archived/trashed rows. */
+function SecondaryTab({ controller, tasks }: { controller: BoardController; tasks: TaskRecord[] }) {
+  const rows = tasks.filter(t => t.status === 'canceled' || t.status === 'archived' || t.trashedAt !== undefined)
+  return (
+    <div className="dsh-atb-secondary">
+      {rows.length === 0 && <div className="dsh-atb-empty">无已取消 / 已归档 / 已删除任务</div>}
+      {rows.map(task => (
+        <TaskCard key={task.id} task={task} controller={controller} />
+      ))}
+      {void controller}
+    </div>
+  )
+}

package/src/client/board/TaskCard.tsx

@@ -0,0 +1,61 @@
+/**
+ * One board card: urgency edge, title, project/urgency/model/schedule/
+ * blocked/trashed badges, comment count, and the last execution outcome.
+ * Click opens the detail pane; cards in the backlog/todo columns are
+ * draggable between those two columns (HTML5 drag & drop).
+ *
+ * @module dsh-taskboard/client/board/TaskCard
+ */
+import type { BoardController } from '../controller.ts'
+import type { TaskRecord } from '../../shared/protocol.ts'
+import { fmtTime } from './TaskBoard.tsx'
+
+const URGENCY_LABEL: Record<TaskRecord['urgency'], string> = { urgent: '紧急', normal: '一般', relaxed: '不急' }
+const OUTCOME_LABEL: Record<string, string> = { running: '执行中', succeeded: '成功', failed: '失败', cancelled: '已取消' }
+
+/** dataTransfer type carrying the dragged task id. */
+export const DRAG_TYPE = 'application/x-dsh-atb-task'
+
+/**
+ * The card view.
+ * @param task - the task record.
+ * @param controller - the controller.
+ * @param draggable - enable dragging (backlog/todo columns only).
+ */
+export function TaskCard({ task, controller, draggable = false }: { task: TaskRecord; controller: BoardController; draggable?: boolean }) {
+  const last = task.executions.length > 0 ? task.executions[task.executions.length - 1] : undefined
+  return (
+    <button
+      type="button"
+      className="dsh-atb-card"
+      data-urgency={task.urgency}
+      draggable={draggable}
+      onDragStart={(e) => {
+        e.dataTransfer.setData(DRAG_TYPE, task.id)
+        e.dataTransfer.effectAllowed = 'move'
+        e.currentTarget.dataset.dragging = 'true'
+      }}
+      onDragEnd={(e) => { delete e.currentTarget.dataset.dragging }}
+      onClick={() => controller.select(task.id)}
+    >
+      <div className="dsh-atb-card-title">{task.title}</div>
+      <div className="dsh-atb-card-meta">
+        <span className="dsh-atb-badge">{URGENCY_LABEL[task.urgency]}</span>
+        {task.blocked && <span className="dsh-atb-badge" data-kind="blocked">受阻</span>}
+        {task.execution.mode === 'scheduled' && (
+          <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.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}>
+            {OUTCOME_LABEL[last.outcome] ?? last.outcome}
+          </span>
+        )}
+        {task.comments.length > 0 && <span>💬 {task.comments.length}</span>}
+        {task.trashedAt !== undefined && <span className="dsh-atb-badge" data-kind="trashed">待清除</span>}
+        <span style={{ marginLeft: 'auto' }}>{fmtTime(task.updatedAt)}</span>
+      </div>
+    </button>
+  )
+}

package/src/client/board/TaskDetail.tsx

@@ -0,0 +1,210 @@
+/**
+ * The task detail pane — visually polished: urgency accent header with
+ * status pill and meta chips, card-wrapped description/prompt, chat-style
+ * comment bubbles distinguishing user vs agent authors, a timeline of
+ * executions with outcome pills, grouped actions (run / transitions /
+ * danger zone), and the user comment composer.
+ *
+ * @module dsh-taskboard/client/board/TaskDetail
+ */
+import { useState, type ReactNode } from 'react'
+import type { BoardController } from '../controller.ts'
+import type { TaskRecord } from '../../shared/protocol.ts'
+import { canTransition } from '../../shared/protocol.ts'
+import { fmtTime } from './TaskBoard.tsx'
+
+/** Statuses a user may move this task to, per the state machine. */
+function moveTargets(task: TaskRecord): TaskRecord['status'][] {
+  const all: TaskRecord['status'][] = ['backlog', 'todo', 'in_progress', 'in_review', 'done', 'canceled', 'archived']
+  return all.filter(to => canTransition(task.status, to))
+}
+
+const MOVE_LABEL: Record<string, string> = {
+  backlog: '待规划', todo: '待办', in_progress: '进行中', in_review: '待验收',
+  done: '完成', canceled: '取消', archived: '归档',
+}
+const STATUS_LABEL: Record<string, string> = { ...MOVE_LABEL }
+const URGENCY_LABEL: Record<string, string> = { urgent: '紧急', normal: '一般', relaxed: '不急' }
+const OUTCOME_LABEL: Record<string, string> = { running: '执行中', succeeded: '成功', failed: '失败', cancelled: '已取消' }
+
+/** Compact session-id display. */
+function shortId(id: string | undefined): string {
+  if (id === undefined) return ''
+  return id.replace(/^session-/, '').slice(0, 8)
+}
+
+/** Execution duration between start and end. */
+function duration(startedAt: number | undefined, endedAt: number | undefined): string {
+  if (startedAt === undefined || endedAt === undefined) return ''
+  const s = Math.max(0, Math.round((endedAt - startedAt) / 1000))
+  if (s < 60) return `${s}s`
+  if (s < 3600) return `${Math.floor(s / 60)}m${s % 60}s`
+  return `${Math.floor(s / 3600)}h${Math.floor((s % 3600) / 60)}m`
+}
+
+/** Small labelled meta chip. */
+function Chip({ icon, children, tone }: { icon?: string; children: ReactNode; tone?: string }) {
+  return <span className="dsh-atb-chip2" data-tone={tone}>{icon !== undefined && <span className="dsh-atb-chip2-icon">{icon}</span>}{children}</span>
+}
+
+/**
+ * The detail view.
+ * @param task - the task record.
+ * @param controller - the controller.
+ */
+export function TaskDetail({ task, controller }: { task: TaskRecord; controller: BoardController }) {
+  const [comment, setComment] = useState('')
+  const [confirmDone, setConfirmDone] = useState(false)
+  const [confirmPurge, setConfirmPurge] = useState(false)
+  const ws = controller.getSnapshot().workspaces.find(w => w.id === task.workspaceId)
+  const canRun = task.status !== 'in_progress' && task.status !== 'done' && task.status !== 'archived'
+
+  return (
+    <div className="dsh-atb-detail" data-urgency={task.urgency}>
+      <div className="dsh-atb-detail-head">
+        <div className="dsh-atb-detail-titlewrap">
+          <div className="dsh-atb-detail-titlebar">
+            <h3>{task.title}</h3>
+            <span className="dsh-atb-statuspill" data-status={task.status}>{STATUS_LABEL[task.status] ?? task.status}</span>
+          </div>
+          <div className="dsh-atb-detail-chips">
+            <Chip tone={task.urgency}>● {URGENCY_LABEL[task.urgency] ?? task.urgency}</Chip>
+            <Chip icon="📁">{ws?.title ?? shortId(task.workspaceId)}</Chip>
+            {task.model !== undefined && <Chip icon="✦">{task.model.model}</Chip>}
+            {task.execution.mode === 'scheduled' && (
+              <Chip icon="⏰">{task.execution.cron} · 下次 {fmtTime(task.execution.nextRunAt)}</Chip>
+            )}
+            {task.blocked && <Chip icon="⛔" tone="urgent">受阻</Chip>}
+            {task.trashedAt !== undefined && <Chip icon="🗑" tone="urgent">已删除待清除</Chip>}
+            <Chip>v{task.version}</Chip>
+          </div>
+          <div className="dsh-atb-detail-sub">
+            更新 {fmtTime(task.updatedAt)} · 最近操作 {task.updatedBy.kind === 'agent' ? `🤖 ${shortId(task.updatedBy.sessionId)}` : '👤 用户'}
+          </div>
+        </div>
+        <div className="dsh-atb-detail-topbtns">
+          <button type="button" className="dsh-atb-detail-edit" onClick={() => controller.openEditor(task.id)}>✎ 编辑</button>
+          <button type="button" className="dsh-atb-detail-close" aria-label="关闭" onClick={() => controller.select(undefined)}>✕</button>
+        </div>
+      </div>
+
+      {task.description.length > 0 && (
+        <div className="dsh-atb-fieldcard">
+          <div className="dsh-atb-fieldcard-label">描述</div>
+          <div className="dsh-atb-desc">{task.description}</div>
+        </div>
+      )}
+
+      {task.prompt.length > 0 && (
+        <div className="dsh-atb-fieldcard" data-kind="prompt">
+          <div className="dsh-atb-fieldcard-label">执行 Prompt</div>
+          <div className="dsh-atb-promptbox">{task.prompt}</div>
+        </div>
+      )}
+
+      <div className="dsh-atb-detail-actions">
+        {canRun && (
+          <button type="button" className="dsh-atb-runbtn" onClick={() => void controller.run(task.id)}>
+            ▶ 执行 · 新会话{task.model !== undefined ? `（${task.model.model}）` : '（默认模型）'}
+          </button>
+        )}
+        <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>
+                      <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>
+                  )
+                : <button key={to} type="button" className="dsh-atb-movebtn" data-to={to} onClick={() => setConfirmDone(true)}>✓ {MOVE_LABEL[to]}</button>)
+            : (
+                <button key={to} type="button" className="dsh-atb-movebtn" data-to={to} onClick={() => void controller.move(task.id, task.version, to)}>
+                  {MOVE_LABEL[to]}
+                </button>
+              ))}
+          <button type="button" className="dsh-atb-movebtn" data-to="blocked" onClick={() => void controller.toggleBlocked(task)}>
+            {task.blocked ? '✓ 解除受阻' : '⛔ 标记受阻'}
+          </button>
+        </div>
+      </div>
+
+      <div className="dsh-atb-section">
+        <h4>评论{task.comments.length > 0 && <span className="dsh-atb-count2">{task.comments.length}</span>}</h4>
+        {task.comments.length === 0
+          ? <div className="dsh-atb-empty2">暂无评论 — agent 交接时会在这里汇报改动与验证结果</div>
+          : (
+              <div className="dsh-atb-commentlist">
+                {task.comments.map(c => (
+                  <div key={c.id} className="dsh-atb-bubble" data-from={c.threadId !== undefined ? 'agent' : 'user'}>
+                    <div className="dsh-atb-bubble-avatar">{c.threadId !== undefined ? '🤖' : '👤'}</div>
+                    <div className="dsh-atb-bubble-main">
+                      <div className="dsh-atb-bubble-meta">
+                        <b>{c.threadId !== undefined ? `agent ${shortId(c.threadId)}` : '用户'}</b>
+                        <span>{fmtTime(c.createdAt)}</span>
+                      </div>
+                      <div className="dsh-atb-bubble-body">{c.body}</div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+        <div className="dsh-atb-composer">
+          <textarea
+            className="dsh-atb-composer-input"
+            value={comment}
+            placeholder="以用户身份留言（agent 开工前会读）…"
+            onChange={e => setComment(e.target.value)}
+            onKeyDown={e => {
+              if ((e.ctrlKey || e.metaKey) && e.key === 'Enter' && comment.trim().length > 0) {
+                void controller.comment(task.id, comment)
+                setComment('')
+              }
+            }}
+          />
+          <button
+            type="button"
+            className="dsh-atb-composer-send"
+            disabled={comment.trim().length === 0}
+            onClick={() => { void controller.comment(task.id, comment); setComment('') }}
+          >
+            发表
+          </button>
+        </div>
+      </div>
+
+      {task.executions.length > 0 && (
+        <div className="dsh-atb-section">
+          <h4>执行记录<span className="dsh-atb-count2">{task.executions.length}</span></h4>
+          <div className="dsh-atb-execlist">
+            {task.executions.map(e => (
+              <div key={e.id} className="dsh-atb-exec-row">
+                <span className="dsh-atb-exec-dot" data-outcome={e.outcome} />
+                <span className="dsh-atb-exec-trigger">{e.trigger === 'manual' ? '手动' : '定时'}</span>
+                <span className="dsh-atb-exec-outcome" data-outcome={e.outcome}>{OUTCOME_LABEL[e.outcome] ?? e.outcome}</span>
+                <span className="dsh-atb-exec-time">{fmtTime(e.startedAt)}{e.endedAt !== undefined && ` · ${duration(e.startedAt, e.endedAt)}`}</span>
+                {e.sessionId !== undefined && <span className="dsh-atb-exec-session" title={e.sessionId}>🤖 {shortId(e.sessionId)}</span>}
+                {e.error !== undefined && <span className="dsh-atb-exec-error" title={e.error}>{e.error.slice(0, 80)}{e.error.length > 80 ? '…' : ''}</span>}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="dsh-atb-dangerzone">
+        {task.trashedAt === undefined
+          ? <button type="button" className="dsh-atb-btn" data-danger="true" onClick={() => void controller.remove(task.id, task.version, false)}>🗑 删除（标记待清除）</button>
+          : (confirmPurge
+              ? (
+                  <span className="dsh-atb-confirm">
+                    <span className="dsh-atb-confirm-label">物理清除不可恢复</span>
+                    <button type="button" className="dsh-atb-btn" data-danger="true" onClick={() => { void controller.remove(task.id, task.version, true); setConfirmPurge(false) }}>确认清除</button>
+                    <button type="button" className="dsh-atb-btn" onClick={() => setConfirmPurge(false)}>取消</button>
+                  </span>
+                )
+              : <button type="button" className="dsh-atb-btn" data-danger="true" onClick={() => setConfirmPurge(true)}>🔥 物理清除（需确认）</button>)}
+      </div>
+    </div>
+  )
+}