From a09b519ba296ff97afb6a4c5f4ff0af3d74842bc Mon Sep 17 00:00:00 2001
From: yibo <yibo@yiboM5MacBook-Air.local>
Date: Mon, 31 Aug 2026 01:23:09 +0800
Subject: [PATCH] feat(task-board): 任务看板改造成可搜索/筛选/排序的表格视图

---
 server/routes/company.js                          |   1 +
 web/src/components/task-board/TaskDetailModal.vue | 296 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/components/task-board/TaskTable.vue       | 218 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/views/TaskBoard.vue                       |  89 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------
 4 files changed, 576 insertions(+), 28 deletions(-)
 create mode 100644 web/src/components/task-board/TaskDetailModal.vue
 create mode 100644 web/src/components/task-board/TaskTable.vue

diff --git a/server/routes/company.js b/server/routes/company.js
index f47a210..0b31f88 100644
--- a/server/routes/company.js
+++ b/server/routes/company.js
@@ -1022,6 +1022,7 @@ function taskView(t, progress = null, positions = null) {
     queuePosition: (positions && positions.get(t.id)) || null,
     blockedReason: t.blocked_reason,
     reportTo: t.report_to,
+    assigneeAgentId: t.assignee_agent_id || null,
     createdAt: t.created_at,
     queuedAt: t.queued_at,
     startedAt: t.started_at,
diff --git a/web/src/components/task-board/TaskDetailModal.vue b/web/src/components/task-board/TaskDetailModal.vue
new file mode 100644
index 0000000..7709a6b
--- /dev/null
+++ b/web/src/components/task-board/TaskDetailModal.vue
@@ -0,0 +1,296 @@
+<!--
+  任务详情/新建弹窗 —— TaskTable.vue 专用。`task` 为 null 时是新建模式。
+
+  增删改查落地方式：
+  - 读：`task` prop 本身就是 taskView() 的完整形状，摊平自 TaskBoard 已经拉好的 goals 树，
+    不再单独请求（后端目前也没有单任务 GET 端点）。
+  - 改：PATCH /:cid/tasks/:taskId（title/priority 随时可改；description/mode 在 queuedAt
+    非空后会被服务端 409 拒绝，这里提前禁用输入框并给出同样的理由）。
+  - 增：POST /:cid/tasks，固定带 draft:true —— 先建草稿，不自动派发。
+  - 删：DELETE /:cid/tasks/:taskId（归档，运行中/排队中会 409，错误原样显示）。
+  - 状态流转（下达/开始/取消/重跑/强制放行/停止）：`taskActions()` 给可执行操作，
+    这里的 runAction() 是 GoalTaskPane.vue 的 runTaskAction() 的等价物，端点表照抄不重新设计。
+-->
+<template>
+  <div class="overlay" @click.self="$emit('close')">
+    <div class="modal">
+      <header class="head">
+        <b>{{ isCreate ? '新建任务' : '任务详情' }}</b>
+        <button class="x" @click="$emit('close')">×</button>
+      </header>
+
+      <div class="body">
+        <template v-if="!isCreate">
+          <div class="row">
+            <span class="dot" :style="dotStyle(taskStyle(task.status))"></span>
+            {{ taskStyle(task.status).label }}
+            <span v-if="queueBadge(task)" class="qb" :title="queueBadge(task).title">{{ queueBadge(task).text }}</span>
+            <span class="tid">{{ task.taskId }}</span>
+          </div>
+          <p v-if="task.status === 'blocked'" class="blocked-hint">{{ blockedLabel(task) || '挂起，原因未知' }}</p>
+        </template>
+
+        <label class="field">
+          <span class="lbl">标题</span>
+          <input v-model="form.title" class="in" :placeholder="isCreate ? '（留空则用描述自动生成）' : ''" />
+        </label>
+
+        <label class="field">
+          <span class="lbl">任务描述{{ frozen ? '（已下达，不可改）' : '' }}</span>
+          <textarea v-model="form.description" class="in ta" rows="4" :disabled="frozen"
+            placeholder="要交给 agent 执行的完整描述"></textarea>
+        </label>
+
+        <div class="grid2">
+          <label class="field">
+            <span class="lbl">优先级</span>
+            <input v-model="form.priority" class="in" placeholder="P1" />
+          </label>
+          <label class="field">
+            <span class="lbl">执行模式{{ frozen ? '（已下达，不可改）' : '' }}</span>
+            <select v-model="form.mode" class="in" :disabled="frozen">
+              <option value="manual">manual（需人点「立即开始」）</option>
+              <option value="auto">auto（有空位自动开跑）</option>
+            </select>
+          </label>
+        </div>
+
+        <label v-if="isCreate" class="field">
+          <span class="lbl">所属目标</span>
+          <select v-model="form.goalId" class="in">
+            <option value="">（自动新建一个同名目标）</option>
+            <option v-for="g in goals" :key="g.goalId" :value="g.goalId">{{ g.title || g.goalId }}</option>
+          </select>
+        </label>
+
+        <template v-if="!isCreate">
+          <div class="grid2">
+            <div class="field ro"><span class="lbl">所属目标</span><span>{{ goalTitle }}</span></div>
+            <div class="field ro"><span class="lbl">负责 Agent</span><span>{{ assigneeLabel }}</span></div>
+          </div>
+          <div class="grid2">
+            <div class="field ro"><span class="lbl">创建时间</span><span>{{ fmt(task.createdAt) }}</span></div>
+            <div class="field ro"><span class="lbl">下达时间</span><span>{{ fmt(task.queuedAt) }}</span></div>
+          </div>
+          <div class="grid2">
+            <div class="field ro"><span class="lbl">开始时间</span><span>{{ fmt(task.startedAt) }}</span></div>
+            <div class="field ro"><span class="lbl">结束时间</span><span>{{ fmt(task.finishedAt) }}</span></div>
+          </div>
+          <div v-if="task.dependsOn && task.dependsOn.length" class="field ro">
+            <span class="lbl">依赖任务</span>
+            <span>{{ task.dependsOn.join('、') }}</span>
+          </div>
+          <div v-if="task.budget" class="field ro">
+            <span class="lbl">预算</span>
+            <span class="mono">{{ JSON.stringify(task.budget) }}</span>
+          </div>
+          <router-link class="graph-link" :to="`/${companyId}/graph-console?goal=${task.goalId}&task=${task.taskId}`">
+            🕸️ 查看执行图
+          </router-link>
+        </template>
+
+        <p v-if="error" class="err">{{ error }}</p>
+      </div>
+
+      <footer class="foot">
+        <div class="actions" v-if="!isCreate">
+          <button v-if="task.status === 'draft'" class="btn" :disabled="busy" @click="enqueue">下达</button>
+          <button
+            v-for="act in actions" :key="act.key"
+            class="btn" :class="{ danger: act.danger }"
+            :disabled="act.disabled || busy" :title="act.title"
+            @click="runAction(act)"
+          >{{ act.label }}</button>
+        </div>
+        <div class="spacer"></div>
+        <button class="btn ghost" @click="$emit('close')">取消</button>
+        <button class="btn primary" :disabled="busy || !form.description.trim()" @click="save">
+          {{ isCreate ? '创建' : '保存' }}
+        </button>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import {
+  taskStyle, queueBadge, blockedLabel, taskActions, parseBlockedReason,
+} from '../graph-console/goal-task-model.js';
+
+const props = defineProps({
+  companyId: { type: String, required: true },
+  task: { type: Object, default: null },
+  goals: { type: Array, default: () => [] },
+  agents: { type: Array, default: () => [] },
+});
+const emit = defineEmits(['close', 'saved']);
+
+const isCreate = computed(() => !props.task);
+/** 已经下达过（queuedAt 非空）：description/mode 服务端会 409，界面提前禁用 */
+const frozen = computed(() => !isCreate.value && !!props.task.queuedAt);
+
+const form = reactive({
+  title: props.task?.title || '',
+  description: props.task?.description || '',
+  priority: props.task?.priority || 'P1',
+  mode: props.task?.mode || 'manual',
+  goalId: '',
+});
+
+const goalTitle = computed(() => {
+  const t = props.task;
+  if (!t) return '';
+  const g = (props.goals || []).find((x) => x.goalId === t.goalId);
+  return (g && g.title) || t.goalId;
+});
+
+const assigneeLabel = computed(() => {
+  const t = props.task;
+  if (!t || !t.assigneeAgentId) return '未分配';
+  if (t.assigneeAgentId === 'org-graph') return '组织图执行';
+  const a = (props.agents || []).find((x) => x.id === t.assigneeAgentId);
+  return (a && a.name) || t.assigneeAgentId;
+});
+
+const actions = computed(() => (props.task ? taskActions(props.task) : []));
+
+const busy = ref(false);
+const error = ref('');
+
+async function call(method, url, body) {
+  const r = await fetch(url, {
+    method,
+    headers: body === undefined ? undefined : { 'Content-Type': 'application/json' },
+    body: body === undefined ? undefined : JSON.stringify(body),
+  });
+  const d = await r.json().catch(() => ({}));
+  if (!r.ok) throw new Error([d.error || `HTTP ${r.status}`, d.hint].filter(Boolean).join(' · '));
+  return d;
+}
+
+async function guarded(fn) {
+  if (busy.value) return;
+  busy.value = true;
+  error.value = '';
+  try {
+    await fn();
+    emit('saved');
+  } catch (e) {
+    error.value = e.message;
+  } finally {
+    busy.value = false;
+  }
+}
+
+function save() {
+  const cid = props.companyId;
+  if (isCreate.value) {
+    return guarded(() => call('POST', `/api/company/${cid}/tasks`, {
+      task: form.description.trim(),
+      goal_id: form.goalId || undefined,
+      priority: form.priority || undefined,
+      mode: form.mode,
+      draft: true,
+    }));
+  }
+  const patch = { title: form.title, priority: form.priority };
+  if (!frozen.value) {
+    patch.description = form.description;
+    patch.mode = form.mode;
+  }
+  return guarded(() => call('PATCH', `/api/company/${cid}/tasks/${props.task.taskId}`, patch));
+}
+
+function enqueue() {
+  return guarded(() => call('POST', `/api/company/${props.companyId}/tasks/${props.task.taskId}/enqueue`));
+}
+
+/** taskActions() 给的 key → 具体端点，逐条抄自 GoalTaskPane.vue 的 runTaskAction */
+function runAction(act) {
+  if (act.disabled || busy.value) return;
+  const cid = props.companyId;
+  const t = props.task;
+  return guarded(async () => {
+    if (act.key === 'stop') {
+      await call('POST', `/api/graph-runs/${t.runId}/stop`);
+      return;
+    }
+    if (act.key === 'release') {
+      const p = parseBlockedReason(t.blockedReason);
+      const deps = t.dependsOn || [];
+      const next = deps.filter((id) => id !== (p && p.upstreamId));
+      if (next.length === deps.length) {
+        throw new Error(`放行失败：blocked 原因指向 ${p && p.upstreamId}，但这条任务的依赖里没有它（依赖刚被改过？刷新再看）`);
+      }
+      await call('PATCH', `/api/company/${cid}/tasks/${t.taskId}`, { depends_on: next });
+      return;
+    }
+    if (act.key === 'start') {
+      await call('POST', `/api/company/${cid}/tasks/${t.taskId}/start`);
+      return;
+    }
+    if (act.key === 'cancel') {
+      await call('POST', `/api/company/${cid}/tasks/${t.taskId}/cancel`);
+      return;
+    }
+    if (act.key === 'rerun') {
+      await call('POST', `/api/company/${cid}/tasks/${t.taskId}/rerun`);
+      return;
+    }
+    if (act.key === 'rerun-upstream') {
+      if (!act.upstreamId) throw new Error('这条任务的 blocked 原因里没有上游 id，重跑不了');
+      await call('POST', `/api/company/${cid}/tasks/${act.upstreamId}/rerun`);
+      return;
+    }
+    // archive —— 归档后这条 task 会从 goals 树里消失，父组件在 @saved 里发现找不到就会关掉弹窗
+    await call('DELETE', `/api/company/${cid}/tasks/${t.taskId}`);
+  });
+}
+
+function dotStyle(s) {
+  return s.hollow ? { background: 'transparent', borderColor: s.color } : { background: s.color, borderColor: s.color };
+}
+function fmt(iso) {
+  if (!iso) return '—';
+  try { return new Date(iso).toLocaleString('zh-CN'); } catch { return iso; }
+}
+</script>
+
+<style scoped>
+.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 100; }
+.modal { width: min(560px, 92vw); max-height: 88vh; display: flex; flex-direction: column; background: #fff; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
+
+.head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #eee; }
+.head b { font-size: 14px; }
+.x { border: none; background: none; font-size: 18px; cursor: pointer; color: #999; line-height: 1; }
+.x:hover { color: #333; }
+
+.body { padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
+.row { display: flex; align-items: center; gap: 6px; color: #444; }
+.tid { margin-left: auto; color: #bbb; font-size: 11px; font-family: monospace; }
+.blocked-hint { margin: 0; color: #d33; font-size: 11px; }
+.qb { color: #7aa7dd; font-size: 11px; }
+
+.field { display: flex; flex-direction: column; gap: 4px; }
+.field.ro span:last-child { color: #333; }
+.lbl { font-size: 11px; color: #888; }
+.in { font: inherit; font-size: 12px; padding: 6px 9px; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: #1a1a1a; }
+.in:disabled { background: #f7f7f9; color: #999; }
+.ta { resize: vertical; font-family: inherit; }
+.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.mono { font-family: monospace; font-size: 11px; color: #555; }
+.graph-link { align-self: flex-start; font-size: 11px; color: #2b6cb0; text-decoration: none; }
+.graph-link:hover { text-decoration: underline; }
+
+.err { margin: 0; color: #dc2626; font-size: 11px; }
+
+.foot { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-top: 1px solid #eee; flex-wrap: wrap; }
+.actions { display: flex; gap: 6px; flex-wrap: wrap; }
+.spacer { flex: 1; }
+.btn { border: 1px solid #ddd; background: #fff; border-radius: 6px; font-size: 12px; padding: 6px 12px; cursor: pointer; }
+.btn:disabled { opacity: .5; cursor: not-allowed; }
+.btn.danger { color: #b91c1c; }
+.btn.primary { background: #2b6cb0; border-color: transparent; color: #fff; font-weight: 600; }
+.btn.ghost { background: transparent; }
+</style>
diff --git a/web/src/components/task-board/TaskTable.vue b/web/src/components/task-board/TaskTable.vue
new file mode 100644
index 0000000..df96297
--- /dev/null
+++ b/web/src/components/task-board/TaskTable.vue
@@ -0,0 +1,218 @@
+<!--
+  任务看板的表格视图 —— TaskBoard.vue 专用，不是 GoalTaskPane 的替代品（那个还在
+  GraphConsole 左栏服役，两边分开维护）。数据摊平自 goals[].tasks[]，不额外请求。
+-->
+<template>
+  <div class="tt">
+    <div class="toolbar">
+      <input v-model="search" class="in search" placeholder="搜索任务标题 / 描述…" />
+      <select v-model="statusFilter" class="in sel">
+        <option value="">全部状态</option>
+        <option v-for="s in STATUS_OPTIONS" :key="s" :value="s">{{ taskStyle(s).label }}</option>
+      </select>
+      <select v-model="goalFilter" class="in sel">
+        <option value="">全部目标</option>
+        <option v-for="g in goals" :key="g.goalId" :value="g.goalId">{{ g.title || g.goalId }}</option>
+      </select>
+      <select v-model="assigneeFilter" class="in sel">
+        <option value="">全部负责人</option>
+        <option v-for="o in assigneeOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
+      </select>
+      <span class="count">{{ sorted.length }} / {{ flatTasks.length }} 条</span>
+      <button class="btn primary" @click="$emit('create')">+ 新建任务</button>
+    </div>
+
+    <div class="scroll">
+      <table>
+        <thead>
+          <tr>
+            <th class="c-status" @click="toggleSort('status')">状态{{ sortArrow('status') }}</th>
+            <th class="c-desc">任务描述</th>
+            <th class="c-goal">所属目标</th>
+            <th class="c-assignee">负责 Agent</th>
+            <th class="c-priority" @click="toggleSort('priority')">优先级{{ sortArrow('priority') }}</th>
+            <th class="c-time" @click="toggleSort('createdAt')">创建时间{{ sortArrow('createdAt') }}</th>
+            <th class="c-time" @click="toggleSort('startedAt')">开始时间{{ sortArrow('startedAt') }}</th>
+            <th class="c-time" @click="toggleSort('finishedAt')">结束时间{{ sortArrow('finishedAt') }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="loading && !flatTasks.length"><td colspan="8" class="empty">加载中…</td></tr>
+          <tr v-else-if="!sorted.length"><td colspan="8" class="empty">没有匹配的任务</td></tr>
+          <tr
+            v-for="t in sorted" :key="t.taskId"
+            class="row" :class="{ blocked: t.status === 'blocked' }"
+            @click="$emit('select', t)"
+          >
+            <td class="c-status">
+              <span class="dot" :class="{ pulse: taskStyle(t.status).pulse }" :style="dotStyle(taskStyle(t.status))"></span>
+              {{ taskStyle(t.status).label }}
+              <span v-if="queueBadge(t)" class="qb" :title="queueBadge(t).title">{{ queueBadge(t).text }}</span>
+            </td>
+            <td class="c-desc">
+              <div class="title">{{ t.title || '（无标题）' }}</div>
+              <div v-if="t.description" class="desc" :title="t.description">{{ t.description }}</div>
+              <div v-if="t.status === 'blocked'" class="blocked-line">{{ blockedLabel(t, siblingsOf(t)) || '挂起' }}</div>
+            </td>
+            <td class="c-goal">{{ t.goalTitle }}</td>
+            <td class="c-assignee">{{ assigneeLabel(t) }}</td>
+            <td class="c-priority">{{ t.priority || '—' }}</td>
+            <td class="c-time">{{ fmt(t.createdAt) }}</td>
+            <td class="c-time">{{ fmt(t.startedAt) }}</td>
+            <td class="c-time">{{ fmt(t.finishedAt) }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { taskStyle, queueBadge, blockedLabel } from '../graph-console/goal-task-model.js';
+
+const props = defineProps({
+  companyId: { type: String, required: true },
+  goals: { type: Array, default: () => [] },
+  agents: { type: Array, default: () => [] },
+  loading: { type: Boolean, default: false },
+});
+defineEmits(['select', 'create']);
+
+const STATUS_OPTIONS = ['draft', 'queued', 'running', 'completed', 'failed', 'blocked', 'cancelled'];
+
+const flatTasks = computed(() => {
+  const out = [];
+  for (const g of props.goals || []) {
+    for (const t of g.tasks || []) out.push({ ...t, goalTitle: g.title || g.goalId });
+  }
+  return out;
+});
+
+/** 同 goal 下的兄弟任务，blockedLabel 解析「上游 #N 未完成」要用 */
+function siblingsOf(t) {
+  const g = (props.goals || []).find((x) => x.goalId === t.goalId);
+  return (g && g.tasks) || [];
+}
+
+function dotStyle(s) {
+  return s.hollow ? { background: 'transparent', borderColor: s.color } : { background: s.color, borderColor: s.color };
+}
+
+const agentNameById = computed(() => {
+  const m = new Map();
+  for (const a of props.agents || []) m.set(a.id, a.name || a.id);
+  return m;
+});
+
+/** assignee_agent_id 是 null（还没派）/ 'org-graph'（被组织图接管，没有真实派单对象）/ 真实 role_name 三种 */
+function assigneeLabel(t) {
+  if (!t.assigneeAgentId) return '未分配';
+  if (t.assigneeAgentId === 'org-graph') return '组织图执行';
+  return agentNameById.value.get(t.assigneeAgentId) || t.assigneeAgentId;
+}
+
+const assigneeOptions = computed(() => {
+  const seen = new Map(); // value -> label
+  for (const t of flatTasks.value) {
+    const v = t.assigneeAgentId || '__none__';
+    if (!seen.has(v)) seen.set(v, assigneeLabel(t));
+  }
+  return [...seen.entries()].map(([value, label]) => ({ value, label }));
+});
+
+const search = ref('');
+const statusFilter = ref('');
+const goalFilter = ref('');
+const assigneeFilter = ref('');
+
+const filtered = computed(() => {
+  let list = flatTasks.value;
+  const q = search.value.trim().toLowerCase();
+  if (q) list = list.filter((t) => (t.title || '').toLowerCase().includes(q) || (t.description || '').toLowerCase().includes(q));
+  if (statusFilter.value) list = list.filter((t) => t.status === statusFilter.value);
+  if (goalFilter.value) list = list.filter((t) => t.goalId === goalFilter.value);
+  if (assigneeFilter.value) list = list.filter((t) => (t.assigneeAgentId || '__none__') === assigneeFilter.value);
+  return list;
+});
+
+const sortKey = ref('createdAt');
+const sortDir = ref('desc');
+
+function toggleSort(key) {
+  if (sortKey.value === key) sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc';
+  else { sortKey.value = key; sortDir.value = 'asc'; }
+}
+function sortArrow(key) {
+  if (sortKey.value !== key) return '';
+  return sortDir.value === 'asc' ? ' ▲' : ' ▼';
+}
+
+/** 状态按中文标签排序（用户比较的是眼睛看到的字，不是内部枚举值），其余字段原值比较 */
+function sortValue(t, key) {
+  if (key === 'status') return taskStyle(t.status).label;
+  return t[key] == null ? '' : t[key];
+}
+
+const sorted = computed(() => {
+  const list = filtered.value.slice();
+  const dir = sortDir.value === 'asc' ? 1 : -1;
+  list.sort((a, b) => {
+    const av = sortValue(a, sortKey.value);
+    const bv = sortValue(b, sortKey.value);
+    if (av < bv) return -1 * dir;
+    if (av > bv) return 1 * dir;
+    return 0;
+  });
+  return list;
+});
+
+function fmt(iso) {
+  if (!iso) return '—';
+  try { return new Date(iso).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }); }
+  catch { return iso; }
+}
+</script>
+
+<style scoped>
+.tt { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
+
+.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.in { font: inherit; font-size: 12px; padding: 6px 9px; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: #1a1a1a; }
+.search { flex: 1 1 220px; min-width: 160px; }
+.sel { flex: 0 0 auto; }
+.count { font-size: 11px; color: #999; white-space: nowrap; }
+.btn { border: 1px solid #ddd; background: #fff; border-radius: 6px; font-size: 12px; padding: 6px 12px; cursor: pointer; }
+.btn.primary { background: #2b6cb0; border-color: transparent; color: #fff; font-weight: 600; }
+
+.scroll { flex: 1 1 auto; overflow: auto; border: 1px solid #eee; border-radius: 8px; }
+table { width: 100%; border-collapse: collapse; font-size: 12px; }
+thead th {
+  position: sticky; top: 0; background: #fafafa; text-align: left; padding: 8px 10px;
+  border-bottom: 1px solid #eee; font-weight: 600; color: #555; white-space: nowrap; cursor: pointer; user-select: none;
+}
+thead th:hover { color: #2b6cb0; }
+.c-status:not(th), td.c-status { cursor: default; }
+tbody td { padding: 8px 10px; border-bottom: 1px solid #f4f4f6; vertical-align: top; }
+.row { cursor: pointer; }
+.row:hover { background: #f7f9fc; }
+.row.blocked { background: #fffaf9; box-shadow: inset 2px 0 0 #d33; }
+.empty { text-align: center; color: #999; padding: 24px 0; }
+
+.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid transparent; margin-right: 5px; vertical-align: middle; }
+.dot.pulse { animation: pulse 1.6s ease-in-out infinite; }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
+.qb { margin-left: 6px; font-size: 10px; color: #7aa7dd; }
+
+.c-desc { min-width: 220px; max-width: 360px; }
+.title { font-weight: 600; color: #1a1a1a; }
+.desc { margin-top: 2px; color: #888; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.blocked-line { margin-top: 2px; color: #d33; font-size: 11px; }
+.c-goal, .c-assignee { color: #555; white-space: nowrap; }
+.c-priority { white-space: nowrap; }
+.c-time { white-space: nowrap; color: #666; }
+
+@media (max-width: 900px) {
+  .c-goal, .c-priority { display: none; }
+}
+</style>
diff --git a/web/src/views/TaskBoard.vue b/web/src/views/TaskBoard.vue
index de7e3fd..2968ab4 100644
--- a/web/src/views/TaskBoard.vue
+++ b/web/src/views/TaskBoard.vue
@@ -1,12 +1,9 @@
 <!--
   任务看板 —— goal/task 两级模型的独立页面（39 号文档 §二 P2）。
 
-  在此之前 goal/task 只能在 GraphConsole 左栏的窄侧栏里看，这里把同一份组件
-  （GoalTaskPane + goal-task-model.js）铺满整页，数据层原样不动，不重写。
-
-  点一条 task 不在本页画执行图（那是 GraphConsole 的活），而是跳过去 ——
-  `/:id/graph-console?goal=...&task=...` 是 GraphConsole 已经支持的选中态复原路径
-  （见该文件 onMounted 里 `route.query.goal` / `route.query.task` 那两行），不新开一条协议。
+  表格视图（TaskTable + TaskDetailModal），数据层沿用原来那份（GET /goals?withTasks=1，
+  20s 轮询），只是不再走 GoalTaskPane 那套折叠列表 —— GoalTaskPane 还在 GraphConsole
+  左栏服役，两边分开维护，改这里不会动到那边。
 -->
 <template>
   <div class="board">
@@ -20,43 +17,60 @@
     </header>
 
     <div class="body">
-      <GoalTaskPane
+      <TaskTable
         :company-id="companyId"
         :goals="goals"
+        :agents="agents"
         :loading="goalsLoading"
-        :selected-task-id="selectedTaskId"
-        :selected-goal-id="selectedGoalId"
-        :slots="slots"
-        @select="goToDetail"
-        @refresh="loadGoals"
+        @select="openDetail"
+        @create="openCreate"
       />
     </div>
+
+    <TaskDetailModal
+      v-if="showModal"
+      :company-id="companyId"
+      :task="modalTask"
+      :goals="goals"
+      :agents="agents"
+      @close="closeModal"
+      @saved="onSaved"
+    />
   </div>
 </template>
 
 <script setup>
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import GoalTaskPane from '@/components/graph-console/GoalTaskPane.vue';
+import { useRoute } from 'vue-router';
+import TaskTable from '@/components/task-board/TaskTable.vue';
+import TaskDetailModal from '@/components/task-board/TaskDetailModal.vue';
 
 const route = useRoute();
-const router = useRouter();
 const props = defineProps({ id: { type: String, default: '' } });
 const companyId = computed(() => props.id || route.params.id);
 
 const company = ref(null);
 const goals = ref([]);
 const goalsLoading = ref(false);
-const slots = ref(null);
-const selectedGoalId = ref('');
+const agents = ref([]);
+
 const selectedTaskId = ref('');
+const showCreate = ref(false);
+const showModal = computed(() => showCreate.value || !!selectedTaskId.value);
+/** 从当前 goals 树里现查，而不是缓存点击那一刻的快照——刷新之后弹窗跟着显示最新状态 */
+const modalTask = computed(() => {
+  if (!selectedTaskId.value) return null;
+  for (const g of goals.value) {
+    const t = (g.tasks || []).find((x) => x.taskId === selectedTaskId.value);
+    if (t) return t;
+  }
+  return null;
+});
 
 let treePoll = null;
 
 onMounted(async () => {
-  selectedGoalId.value = String(route.query.goal || '');
-  selectedTaskId.value = String(route.query.task || '');
-  await Promise.all([loadCompany(), loadGoals()]);
+  await Promise.all([loadCompany(), loadGoals(), loadAgents()]);
   // 与 GraphConsole 同款兜底：没有公司级 SSE 通道，靠轮询看到别处发生的状态变化
   treePoll = setInterval(() => { loadGoals(); }, 20000);
 });
@@ -76,18 +90,37 @@ async function loadGoals() {
     if (!r.ok) return;
     const j = await r.json();
     goals.value = j.goals || [];
-    slots.value = j.slots || null;
   } catch { /* 轮询失败保留上一份树 */ } finally {
     goalsLoading.value = false;
   }
 }
 
-/** 点一条 task：跳到执行控制台看它的图，选中态通过 query 带过去 */
-function goToDetail({ goalId, taskId }) {
-  selectedGoalId.value = goalId || '';
-  selectedTaskId.value = taskId || '';
-  if (!taskId) return;
-  router.push({ path: `/${companyId.value}/graph-console`, query: { goal: goalId || '', task: taskId } });
+/** agent 花名册不常变，拉一次即可，不用跟 goals 一起轮询 */
+async function loadAgents() {
+  try {
+    const r = await fetch(`/api/company/${companyId.value}/agents`);
+    if (r.ok) agents.value = await r.json();
+  } catch { /* 拉不到就退回显示 assignee 原始 id，不影响其余功能 */ }
+}
+
+function openDetail(t) {
+  showCreate.value = false;
+  selectedTaskId.value = t.taskId;
+}
+function openCreate() {
+  selectedTaskId.value = '';
+  showCreate.value = true;
+}
+function closeModal() {
+  showCreate.value = false;
+  selectedTaskId.value = '';
+}
+
+/** 弹窗里任一增删改查动作成功后：重新拉 goals；新建 / 归档导致弹窗没有对象可显示时关掉它 */
+async function onSaved() {
+  await loadGoals();
+  if (showCreate.value) { closeModal(); return; }
+  if (selectedTaskId.value && !modalTask.value) closeModal();
 }
 </script>
 
@@ -104,7 +137,7 @@ function goToDetail({ goalId, taskId }) {
 .to-console { text-decoration: none; color: #2b6cb0; font-size: 12px; font-weight: 600; }
 .to-console:hover { text-decoration: underline; }
 
-.body { flex: 1 1 auto; overflow-y: auto; padding: 16px 24px; max-width: 900px; width: 100%; margin: 0 auto; box-sizing: border-box; }
+.body { flex: 1 1 auto; overflow-y: auto; padding: 16px 24px; box-sizing: border-box; }
 
 @media (max-width: 700px) {
   .body { padding: 12px; }
--
libgit2 0.21.4