agentworkshop 0.7.44 → 0.7.47

package/app/components/workshop/TaskBoardView.vue

@@ -1,686 +1,260 @@
-<script setup lang="ts">
-/**
- * 任务板(open-tag TaskBoard 交互移植,按 AgentWorkShop 权限模型收敛):
- *  - 看板/列表双视图(localStorage 持久化);看板 = 全高等宽泳道(surface-strong),
- *    列表 = 按状态分组的行式列表;
- *  - 卡片拖拽:拖到「异常/取消」列 = cancelTask(HITL 中断);FAILED/CANCELED 卡拖回
- *    「待启动」列 = retryTask(重试派发);执行中/等待汇总/已完成由系统流转,不可手动移入;
- *  - 状态胶囊点击菜单:取消 / 重试 / 打开详情(与拖拽同一动作面);
- *  - 乐观更新:本地先改 state(FLIP 视觉即时),REST 失败回滚并以 WS 事件对齐。
- */
-import { message } from 'ant-design-vue'
-import { useEntitiesStore, type TaskView } from '@/app/stores/workshop/entities'
-import { useWorkshopApi } from '@/app/composables/workshop/useWorkshopApi'
-
-const { t } = useI18n()
-
-const props = defineProps<{ channelId: string }>()
-const emit = defineEmits<{ (e: 'openTask', taskId: string): void }>()
-
-const entities = useEntitiesStore()
-const api = useWorkshopApi()
-const tasks = computed(() => entities.tasks[props.channelId] ?? [])
-/** 实体快照是否已到达(未到时空态显示同步中,不误判"没有任务") */
-const synced = computed(() => entities.channels[props.channelId] !== undefined
-  || entities.tasks[props.channelId] !== undefined)
-
-/** 乐观覆盖:taskId → 预期 state(REST 进行中;WS 确认后由实体覆盖) */
-const optimistic = ref(new Map<string, string>())
-const mergedTasks = computed<TaskView[]>(() =>
-  tasks.value.map(t => (optimistic.value.has(t.id) ? { ...t, state: optimistic.value.get(t.id)! } : t)),
-)
-
-interface Column {
-  key: string
-  title: string
-  states: string[]
-  dot: string
-  /** 允许用户手动移入该列的动作(null = 系统流转列) */
-  moveAction: 'cancel' | 'retry' | null
-  items: TaskView[]
-}
-
-const BASE_COLUMNS: Array<Omit<Column, 'items'>> = [
-  { key: 'todo', title: t('taskBoardView.k3nf71d008'), states: ['SUBMITTED', 'ASSIGNED'], dot: 'var(--tone-neutral-dot)', moveAction: 'retry' },
-  { key: 'doing', title: t('taskBoardView.k3o5tz9009'), states: ['WORKING'], dot: 'var(--tone-info-dot)', moveAction: null },
-  { key: 'waiting', title: t('taskBoardView.k1hpx9p1010'), states: ['WAITING'], dot: 'var(--tone-warning-dot)', moveAction: null },
-  { key: 'done', title: t('taskBoardView.k3n77g3011'), states: ['COMPLETED'], dot: 'var(--tone-success-dot)', moveAction: null },
-  { key: 'bad', title: t('taskBoardView.k1veotws012'), states: ['FAILED', 'CANCELED'], dot: 'var(--tone-danger-dot)', moveAction: 'cancel' },
-]
-
-const columns = computed<Column[]>(() => BASE_COLUMNS.map(col => ({
-  ...col,
-  items: mergedTasks.value.filter(t => col.states.includes(t.state)),
-})))
-
-const agentName = (id: string): string =>
-  entities.agentById(props.channelId, id)?.name ?? id.slice(0, 6)
-const childCount = (id: string): number =>
-  mergedTasks.value.filter(t => t.parentId === id).length
-
-const stateOf = (t: TaskView): string => t.state
-
-// ===== 视图切换(看板/列表,持久化) =====
-const layout = ref<'board' | 'list'>(
-  (import.meta.client && localStorage.getItem('aw.tasks.boardLayout') === 'list') ? 'list' : 'board',
-)
-const setLayout = (l: 'board' | 'list') => {
-  layout.value = l
-  if (import.meta.client) localStorage.setItem('aw.tasks.boardLayout', l)
-}
-
-// ===== 拖拽(HTML5 DnD;整列作为放置目标) =====
-const dragId = ref<string | null>(null)
-const dragFrom = ref<string | null>(null)
-const dropOver = ref<string | null>(null)
-
-const taskById = (id: string): TaskView | undefined => mergedTasks.value.find(t => t.id === id)
-
-/** 该卡是否允许移入该列(动作存在且目标态 ≠ 当前态) */
-const canDrop = (taskId: string, col: Column): boolean => {
-  if (!col.moveAction) return false
-  const t = taskById(taskId)
-  if (!t) return false
-  if (col.states.includes(t.state)) return false
-  if (col.moveAction === 'retry') return ['FAILED', 'CANCELED'].includes(t.state)
-  return ['SUBMITTED', 'ASSIGNED', 'WORKING', 'WAITING', 'FAILED'].includes(t.state)
-}
-
-const onDragStart = (ev: DragEvent, t: TaskView, colKey: string) => {
-  dragId.value = t.id
-  dragFrom.value = colKey
-  if (ev.dataTransfer) {
-    ev.dataTransfer.effectAllowed = 'move'
-    ev.dataTransfer.setData('text/plain', t.id)
-  }
-}
-const onDragOver = (ev: DragEvent, col: Column) => {
-  if (!dragId.value || !canDrop(dragId.value, col)) return
-  ev.preventDefault()
-  if (ev.dataTransfer) ev.dataTransfer.dropEffect = 'move'
-}
-const onDragLeave = (colKey: string) => {
-  if (dropOver.value === colKey) dropOver.value = null
-}
-const onDragOverCol = (ev: DragEvent, col: Column) => {
-  dropOver.value = col.key
-  onDragOver(ev, col)
-}
-const onDragEnd = () => {
-  dragId.value = null
-  dragFrom.value = null
-  dropOver.value = null
-}
-/** 列样式态:可放 = 蓝调高亮;不可放 = 压暗;拖出来源列 = 微降透明 */
-const colClasses = (col: Column): Record<string, boolean> => ({
-  'drop-over': dropOver.value === col.key && !!dragId.value && canDrop(dragId.value, col),
-  'no-drop': !!dragId.value && dropOver.value === col.key && !canDrop(dragId.value, col),
-  'drag-origin': dragFrom.value === col.key,
-})
-const onDrop = async (ev: DragEvent, col: Column) => {
-  ev.preventDefault()
-  const id = dragId.value
-  dropOver.value = null
-  dragId.value = null
-  dragFrom.value = null
-  if (!id || !canDrop(id, col)) return
-  await applyMove(id, col.moveAction!)
-}
-
-// ===== 动作面(拖拽与胶囊菜单共用) =====
-const acting = ref(new Set<string>())
-const applyMove = async (taskId: string, action: 'cancel' | 'retry'): Promise<void> => {
-  if (acting.value.has(taskId)) return
-  const task = taskById(taskId)
-  if (!task) return
-  acting.value.add(taskId)
-  const prev = task.state
-  // 乐观预移:cancel → CANCELED;retry → ASSIGNED
-  const next = action === 'cancel' ? 'CANCELED' : 'ASSIGNED'
-  const opt = new Map(optimistic.value)
-  opt.set(taskId, next)
-  optimistic.value = opt
-  try {
-    await (action === 'cancel' ? api.cancelTask(taskId) : api.retryTask(taskId))
-    message.success(action === 'cancel' ? t('taskBoardView.k189y4q013') : t('taskBoardView.kv1l1j3014'))
-  }
-  catch (e) {
-    // 回滚乐观预移,弹错(WS 事件为准)
-    const revert = new Map(optimistic.value)
-    revert.set(taskId, prev)
-    optimistic.value = revert
-    const err = e as { data?: { message?: string }, message?: string }
-    message.error(apiErrorMessage(err, t('taskBoardView.k1e7zwuc015')))
-  }
-  finally {
-    acting.value.delete(taskId)
-    // REST 完成后短暂清理乐观层,交给 WS/实体收敛
-    setTimeout(() => {
-      const clean = new Map(optimistic.value)
-      clean.delete(taskId)
-      optimistic.value = clean
-    }, 4000)
-  }
-}
-
-/** 状态胶囊菜单(动作 + 详情);fixed 定位并按视口收敛 */
-const menu = ref<{ task: TaskView, x: number, y: number } | null>(null)
-const openMenu = (ev: MouseEvent, task: TaskView) => {
-  const x = Math.min(ev.clientX, Math.max(window.innerWidth - 156, 8))
-  const y = Math.min(ev.clientY, Math.max(window.innerHeight - 160, 8))
-  menu.value = { task, x, y }
-}
-const closeMenu = () => {
-  menu.value = null
-}
-const menuActions = computed(() => {
-  const task = menu.value?.task
-  if (!task) return []
-  const acts: Array<{ key: 'cancel' | 'retry' | 'detail', label: string, danger?: boolean }> = []
-  if (['SUBMITTED', 'ASSIGNED', 'WORKING', 'WAITING', 'FAILED'].includes(task.state)) {
-    acts.push({ key: 'cancel', label: t('taskBoardView.k1bs0t9b016'), danger: true })
-  }
-  if (['FAILED', 'CANCELED'].includes(task.state)) {
-    acts.push({ key: 'retry', label: t('taskBoardView.k1lclwk6017') })
-  }
-  acts.push({ key: 'detail', label: t('taskBoardView.k1dx9ysj018') })
-  return acts
-})
-const onMenuAction = async (key: 'cancel' | 'retry' | 'detail') => {
-  const t = menu.value?.task
-  closeMenu()
-  if (!t) return
-  if (key === 'detail') {
-    emit('openTask', t.id)
-  }
-  else {
-    await applyMove(t.id, key)
-  }
-}
-</script>
-
-<template>
-  <div class="board-shell">
-    <!-- 工具条:视图切换 + 计数 -->
-    <div class="toolbar">
-      <div class="aw-seg">
-        <button
-          type="button"
-          :class="{ on: layout === 'board' }"
-          @click="setLayout('board')"
-        >
-          {{ $t('taskBoardView.k43pyn001') }}
-        </button>
-        <button
-          type="button"
-          :class="{ on: layout === 'list' }"
-          @click="setLayout('list')"
-        >
-          {{ $t('taskBoardView.k3x7l0002') }}
-        </button>
-      </div>
-      <span class="count">{{ mergedTasks.length }} {{ $t('taskBoardView.k168w1ze004') }}</span>
-    </div>
-
-    <!-- 空态(快照未到 → 同步中,不误判为空) -->
-    <div
-      v-if="mergedTasks.length === 0"
-      class="pane-empty"
-    >
-      <span :class="synced ? 'pe-icon i-tabler-list-check' : 'pe-icon i-tabler-refresh'" />
-      <div class="pe-title">
-        {{ synced ? $t('taskBoardView.k3vkhhj006') : $t('taskBoardView.k1f9c17l019') }} <span class="aw-serif-accent-italic">{{ $t('taskBoardView.k3wcox003') }}</span>
-      </div>
-      <div class="pe-sub">
-        {{ synced ? $t('taskBoardView.emptySubNew') : $t('taskBoardView.emptySubSync') }}
-      </div>
-    </div>
-
-    <!-- 看板:全高等宽泳道 -->
-    <div
-      v-else-if="layout === 'board'"
-      class="board"
-    >
-      <div
-        v-for="col in columns"
-        :key="col.key"
-        class="task-col"
-        :class="colClasses(col)"
-        @dragover="onDragOverCol($event, col)"
-        @dragleave="onDragLeave(col.key)"
-        @drop="onDrop($event, col)"
-      >
-        <div class="sec">
-          <span
-            class="st-dot"
-            :style="{ background: col.dot }"
-          />
-          <span class="sec-title">{{ col.title }}</span>
-          <span class="sec-cnt">{{ col.items.length }}</span>
-        </div>
-        <div class="task-col-body">
-          <div
-            v-for="task in col.items"
-            :key="task.id"
-            class="card task"
-            :class="{ dragging: dragId === task.id }"
-            draggable="true"
-            @dragstart="onDragStart($event, task, col.key)"
-            @dragend="onDragEnd"
-            @click="emit('openTask', task.id)"
-          >
-            <div class="tk-chan">
-              <span>#{{ agentName(task.assigneeId) }}</span>
-              <span
-                v-if="childCount(task.id)"
-                class="tk-num"
-              >{{ $t('taskBoardView.k4b1x005') }} {{ childCount(task.id) }}</span>
-              <span
-                v-if="task.artifacts"
-                class="tk-num"
-              ><span class="i-tabler-package" /> {{ task.artifacts }}</span>
-            </div>
-            <div class="tk-title">
-              {{ task.title }}
-            </div>
-            <div
-              v-if="task.routeReason"
-              class="tk-route"
-              :title="$t('taskBoardView.k8m7hm6020', { p0: task.routeReason })"
-            >
-              ↳ {{ task.routeReason }}
-            </div>
-            <a-progress
-              v-if="task.state === 'WORKING' && task.progress > 0"
-              :percent="task.progress"
-              size="small"
-              :show-info="false"
-            />
-            <div class="tk-foot">
-              <button
-                type="button"
-                class="st-pill-btn"
-                @click.stop="openMenu($event, task)"
-              >
-                <span
-                  class="st-pill"
-                  :style="{ color: col.dot, borderColor: col.dot }"
-                >{{ col.title }}</span>
-              </button>
-            </div>
-          </div>
-          <div
-            v-if="col.items.length === 0"
-            class="col-empty"
-          >
-            {{ col.moveAction ? $t('taskBoardView.k13pad50007') : '-' }}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 列表:按状态分组 -->
-    <div
-      v-else
-      class="task-list"
-    >
-      <template
-        v-for="col in columns"
-        :key="col.key"
-      >
-        <div
-          v-if="col.items.length"
-          class="list-sec sec"
-        >
-          <span
-            class="st-dot"
-            :style="{ background: col.dot }"
-          />
-          <span class="sec-title">{{ col.title }}</span>
-          <span class="sec-cnt">{{ col.items.length }}</span>
-        </div>
-        <div
-          v-for="task in col.items"
-          :key="task.id"
-          class="list-row"
-          @click="emit('openTask', task.id)"
-        >
-          <span class="grow">{{ task.title }}</span>
-          <span class="lnum">#{{ agentName(task.assigneeId) }}</span>
-          <span class="meta">{{ task.id.slice(0, 8) }}</span>
-          <span
-            class="st-pill"
-            :style="{ color: col.dot, borderColor: col.dot }"
-          >
-            {{ stateOf(task) }}
-          </span>
-        </div>
-      </template>
-    </div>
-
-    <!-- 状态菜单(fixed 定位,随点击点) -->
-    <template v-if="menu">
-      <div
-        class="menu-backdrop"
-        @click="closeMenu"
-        @scroll="closeMenu"
-      />
-      <div
-        class="st-menu"
-        :style="{ left: `${menu.x}px`, top: `${menu.y}px` }"
-      >
-        <button
-          v-for="a in menuActions"
-          :key="a.key"
-          type="button"
-          :class="{ danger: a.danger }"
-          @click="onMenuAction(a.key)"
-        >
-          <span
-            :class="a.key === 'cancel'
-              ? 'i-tabler-circle-off'
-              : a.key === 'retry' ? 'i-tabler-rotate' : 'i-tabler-external-link'"
-          />
-          {{ a.label }}
-        </button>
-      </div>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-.board-shell {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
-  animation: view-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
-}
-@keyframes view-in {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: none; }
-}
-@media (prefers-reduced-motion: reduce) {
-  .board-shell { animation: none; }
-}
-
-.toolbar {
-  display: flex;
-  flex: 0 0 auto;
-  gap: 12px;
-  align-items: center;
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--line);
-}
-.count {
-  overflow: hidden;
-  font-size: 11.5px;
-  color: var(--ink-faint);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* 看板:全高等宽泳道(surface-strong 软底,白卡浮于其上) */
-.board {
-  overscroll-behavior: contain;
-  display: flex;
-  flex: 1 1 auto;
-  gap: 12px;
-  align-items: stretch;
-  min-height: 0;
-  padding: 12px 14px 14px;
-  overflow-x: auto;
-}
-.task-col {
-  display: flex;
-  flex: 0 0 300px;
-  flex-direction: column;
-  min-width: 280px;
-  min-height: 0;
-  padding: 2px 8px 8px;
-  background: var(--paper-deep);
-  border-radius: var(--radius-panel);
-}
-.task-col.drop-over {
-  background: var(--tone-info-bg);
-  outline: 2px dashed color-mix(in srgb, var(--tone-info-dot) 65%, transparent);
-  outline-offset: -2px;
-}
-.task-col.no-drop { opacity: 0.6; }
-.task-col.drag-origin { opacity: 0.85; }
-.sec {
-  display: flex;
-  gap: 7px;
-  align-items: center;
-  padding: 10px 6px 8px;
-}
-.sec-title {
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  color: var(--ink-soft);
-}
-.sec-cnt {
-  font-size: 11px;
-  font-variant-numeric: tabular-nums;
-  color: var(--ink-faint);
-}
-.st-dot {
-  flex: none;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-.task-col-body {
-  overscroll-behavior: contain;
-  flex: 1 1 auto;
-  min-height: 0;
-  padding: 0 2px;
-  overflow-y: auto;
-}
-
-/* 任务卡:白卡 + 悬停微抬(open-tag card.task) */
-.card.task {
-  position: relative;
-  padding: 10px 12px;
-  margin-bottom: 8px;
-  cursor: pointer;
-  background: var(--paper-raised);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-panel);
-  transition: transform 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
-}
-.card.task:hover {
-  border-color: var(--line-strong);
-  transform: translateY(-1px);
-}
-.card.task.dragging {
-  opacity: 0.45;
-  cursor: grabbing;
-}
-.tk-chan {
-  display: flex;
-  gap: 8px;
-  font-size: 11.5px;
-  color: var(--ink-faint);
-}
-.tk-num {
-  font-variant-numeric: tabular-nums;
-  color: var(--ink-faint);
-}
-.tk-title {
-  display: -webkit-box;
-  overflow: hidden;
-  margin: 3px 0 6px;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1.35;
-  color: var(--ink);
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-}
-.tk-route {
-  overflow: hidden;
-  margin-bottom: 4px;
-  font-size: 11px;
-  color: var(--ink-faint);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.tk-foot {
-  display: flex;
-  justify-content: flex-end;
-}
-.col-empty {
-  padding: 14px 8px;
-  font-size: 11.5px;
-  color: var(--ink-faint);
-  text-align: center;
-  border: 1.5px dashed var(--line-strong);
-  border-radius: var(--radius-panel);
-}
-
-/* 状态胶囊:hairline pill,色调随列 */
-.st-pill-btn {
-  padding: 0;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-}
-.st-pill {
-  display: inline-flex;
-  gap: 4px;
-  align-items: center;
-  padding: 1px 9px;
-  font-size: 11px;
-  font-weight: 600;
-  border: 1px solid var(--line-strong);
-  border-radius: var(--radius-pill);
-}
-.st-pill-btn:hover .st-pill { background: var(--hover-tint); }
-
-/* 列表视图 */
-.task-list {
-  overscroll-behavior: contain;
-  flex: 1 1 auto;
-  min-height: 0;
-  padding: 10px 16px 18px;
-  overflow-y: auto;
-}
-.list-sec { padding: 8px 2px 6px; }
-.list-row {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  padding: 9px 12px;
-  margin-bottom: 4px;
-  cursor: pointer;
-  background: var(--paper-raised);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-panel);
-  transition: border-color 0.12s ease;
-}
-.list-row:hover { border-color: var(--line-strong); }
-.list-row .grow {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  font-size: 13.5px;
-  color: var(--ink);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.lnum {
-  font-size: 12px;
-  color: var(--ink-faint);
-}
-.meta {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--ink-faint);
-}
-
-/* 状态菜单 */
-.menu-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 60;
-}
-.st-menu {
-  position: fixed;
-  z-index: 61;
-  min-width: 128px;
-  padding: 4px;
-  background: var(--paper-raised);
-  border: 1px solid var(--line-strong);
-  border-radius: var(--radius-panel-sm);
-  box-shadow: var(--shadow-float);
-}
-.st-menu button {
-  display: flex;
-  gap: 7px;
-  align-items: center;
-  width: 100%;
-  padding: 6px 9px;
-  font-family: var(--font-body);
-  font-size: 12.5px;
-  color: var(--ink-soft);
-  text-align: left;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-chip);
-}
-.st-menu button:hover { background: var(--paper-deep); color: var(--ink); }
-.st-menu button.danger { color: var(--tone-danger-dot); }
-
-/* ── 窄屏(≤1023):看板列从"全高等宽四列"改为"一次一列"的横向卷轴 ──
-   300px 定宽列在 390px 下只能露出半列 + 半列,状态语义读不出来;
-   改为 86% 宽 + scroll-snap:一屏一个状态列。列表视图行允许折行,不竖排。 */
-@media (max-width: 1023.98px) {
-  .toolbar {
-    flex-wrap: wrap;
-    gap: 8px;
-    padding: 10px;
-  }
-
-  .count,
-  .sec-cnt,
-  .tk-route,
-  .meta,
-  .st-pill {
-    font-size: 11.5px;
-  }
-
-  .board {
-    padding: 10px;
-    scroll-snap-type: x mandatory;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .task-col {
-    flex: 0 0 86%;
-    min-width: 0;
-    scroll-snap-align: center;
-  }
-
-  /* 行内四项(标题/成员/ID/状态)在 370px 下必然挤:允许折行,不允许压成竖排 */
-  .list-row {
-    flex-wrap: wrap;
-    row-gap: 4px;
-    min-height: 44px;
-  }
-
-  .list-row .grow {
-    flex: 1 1 60%;
-  }
-
-  .st-pill-btn {
-    min-height: 40px;
-  }
-
-  .st-menu button {
-    min-height: 44px;
-  }
-}
-</style>
+<script setup lang="ts">
+/**
+ * 任务板(open-tag TaskBoard 交互移植,按 AgentWorkShop 权限模型收敛):
+ *  - 看板/列表双视图(localStorage 持久化);看板 = 全高等宽泳道(surface-strong),
+ *    列表 = 按状态分组的行式列表;
+ *  - 卡片拖拽:拖到「异常/取消」列 = cancelTask(HITL 中断);FAILED 卡拖回
+ *    「待启动」列 = retryTask(重试派发);执行中/等待汇总/已完成由系统流转,不可手动移入;
+ *  - 状态胶囊点击菜单:取消 / 重试 / 打开详情(与拖拽同一动作面);
+ *  - 乐观更新:本地先改 state(FLIP 视觉即时),REST 失败回滚并以 WS 事件对齐。
+ *
+ * 本文件只做编排(状态 + 选路 + 把事件接到动作面):
+ *  - 状态与动作面 → app/composables/workshop/useTaskBoard{Tasks,Columns,Drag,Menu}.ts;
+ *  - 标记与其 scoped 规则 → app/components/workshop/task-board/{Column,Card,List,StatusMenu}.vue
+ *    (父组件的 scoped 样式不会作用于子组件内部标记,样式必须与拥有它的标记同址);
+ *  - 对外接口不变:props { channelId } + emit openTask(被 console/CenterPane.vue 使用)。
+ */
+import { useTaskBoardTasks } from '@/app/composables/workshop/useTaskBoardTasks'
+import { useTaskBoardColumns } from '@/app/composables/workshop/useTaskBoardColumns'
+import { useTaskBoardDrag } from '@/app/composables/workshop/useTaskBoardDrag'
+import { useTaskBoardMenu } from '@/app/composables/workshop/useTaskBoardMenu'
+import TaskBoardColumn from '@/app/components/workshop/task-board/Column.vue'
+import TaskBoardList from '@/app/components/workshop/task-board/List.vue'
+import TaskBoardStatusMenu from '@/app/components/workshop/task-board/StatusMenu.vue'
+import { useEntitiesStore } from '@/app/stores/workshop/entities'
+
+const props = defineProps<{ channelId: string }>()
+const emit = defineEmits<{ (e: 'openTask', taskId: string): void }>()
+
+const channelId = toRef(props, 'channelId')
+
+const { synced, mergedTasks, taskById, applyMove } = useTaskBoardTasks(channelId)
+const entities = useEntitiesStore()
+const { columns, agentName, childCount, stateOf } = useTaskBoardColumns(channelId, mergedTasks)
+const { dragId, onDragStart, onDragLeave, onDragOverCol, onDragEnd, colClasses, onDrop }
+  = useTaskBoardDrag({ taskById, applyMove })
+const { menu, openMenu, closeMenu, menuActions, onMenuAction } = useTaskBoardMenu({
+  applyMove,
+  openTask: (taskId: string): void => { emit('openTask', taskId) },
+})
+
+const rootQueue = computed(() => mergedTasks.value
+  .filter(t => !t.parentId && !['COMPLETED', 'FAILED', 'CANCELED'].includes(t.state))
+  .sort((a, b) => (a.rootQueueSeq ?? Number.MAX_SAFE_INTEGER) - (b.rootQueueSeq ?? Number.MAX_SAFE_INTEGER)))
+/**
+ * §2.2/§8:active root 与排队位次以后端权威投影为准(rootQueues store)。
+ * 本地派生的 rootQueue 只在后端投影尚未到达时兜底 —— 前后端对「谁在跑」必须同源。
+ */
+const authoritativeQueue = computed(() => entities.rootQueue(props.channelId))
+const activeRootId = computed(() => authoritativeQueue.value.activeRootId ?? rootQueue.value[0]?.id ?? null)
+const activeRoot = computed(() => mergedTasks.value.find(t => t.id === activeRootId.value) ?? null)
+const queuedRoots = computed(() => {
+  const queue = authoritativeQueue.value
+  if (queue.queuedRoots.length > 0) {
+    return queue.queuedRoots
+      .map(r => ({ position: r.position, task: mergedTasks.value.find(t => t.id === r.taskId) }))
+      .filter((x): x is { position: number, task: NonNullable<typeof x.task> } => !!x.task)
+  }
+  return rootQueue.value.slice(1).map((task, i) => ({ position: i + 2, task }))
+})
+/** 已完成根任务数(§2.2 completedRoots;无投影时本地兜底) */
+const completedRootCount = computed(() => authoritativeQueue.value.completedRoots
+  || mergedTasks.value.filter(t => !t.parentId && ['COMPLETED', 'FAILED', 'CANCELED'].includes(t.state)).length)
+
+// ===== 视图切换(看板/列表,持久化) =====
+const layout = ref<'board' | 'list'>(
+  (import.meta.client && localStorage.getItem('aw.tasks.boardLayout') === 'list') ? 'list' : 'board',
+)
+const setLayout = (l: 'board' | 'list') => {
+  layout.value = l
+  if (import.meta.client) localStorage.setItem('aw.tasks.boardLayout', l)
+}
+</script>
+
+<template>
+  <div class="board-shell">
+    <!-- 工具条:视图切换 + 计数 -->
+    <div class="toolbar">
+      <div class="aw-seg">
+        <button
+          type="button"
+          :class="{ on: layout === 'board' }"
+          @click="setLayout('board')"
+        >
+          {{ $t('taskBoardView.k43pyn001') }}
+        </button>
+        <button
+          type="button"
+          :class="{ on: layout === 'list' }"
+          @click="setLayout('list')"
+        >
+          {{ $t('taskBoardView.k3x7l0002') }}
+        </button>
+      </div>
+      <span class="count">{{ mergedTasks.length }} {{ $t('taskBoardView.k168w1ze004') }}</span>
+      <span
+        v-if="activeRoot"
+        class="root-pill active"
+      >
+        Active root · {{ activeRoot.title }}
+      </span>
+      <span
+        v-if="queuedRoots.length"
+        class="root-pill queued"
+      >
+        {{ queuedRoots.length }} queued root{{ queuedRoots.length === 1 ? '' : 's' }}
+        <span class="root-pos">#{{ queuedRoots.map(r => r.position).join(', #') }}</span>
+      </span>
+      <span
+        v-if="completedRootCount > 0"
+        class="root-pill done"
+      >
+        {{ completedRootCount }} done
+      </span>
+    </div>
+
+    <!-- 空态(快照未到 → 同步中,不误判为空) -->
+    <div
+      v-if="mergedTasks.length === 0"
+      class="pane-empty"
+    >
+      <span :class="synced ? 'pe-icon i-tabler-list-check' : 'pe-icon i-tabler-refresh'" />
+      <div class="pe-title">
+        {{ synced ? $t('taskBoardView.k3vkhhj006') : $t('taskBoardView.k1f9c17l019') }} <span class="aw-serif-accent-italic">{{ $t('taskBoardView.k3wcox003') }}</span>
+      </div>
+      <div class="pe-sub">
+        {{ synced ? $t('taskBoardView.emptySubNew') : $t('taskBoardView.emptySubSync') }}
+      </div>
+    </div>
+
+    <!-- 看板:全高等宽泳道(列 = 泳道子组件;拖拽裁决在容器) -->
+    <div
+      v-else-if="layout === 'board'"
+      class="board"
+    >
+      <TaskBoardColumn
+        v-for="col in columns"
+        :key="col.key"
+        :col="col"
+        :drag-id="dragId"
+        :classes="colClasses(col)"
+        :agent-name="agentName"
+        :child-count="childCount"
+        @drag-start="onDragStart"
+        @drag-end="onDragEnd"
+        @drag-over="onDragOverCol"
+        @drag-leave="onDragLeave"
+        @drop="onDrop"
+        @open="emit('openTask', $event.id)"
+        @open-menu="openMenu"
+      />
+    </div>
+
+    <!-- 列表:按状态分组 -->
+    <TaskBoardList
+      v-else
+      :columns="columns"
+      :agent-name="agentName"
+      :state-of="stateOf"
+      @open="emit('openTask', $event.id)"
+    />
+
+    <!-- 状态菜单(fixed 定位,随点击点) -->
+    <TaskBoardStatusMenu
+      v-if="menu"
+      :x="menu.x"
+      :y="menu.y"
+      :actions="menuActions"
+      @close="closeMenu"
+      @action="onMenuAction"
+    />
+  </div>
+</template>
+
+<style scoped>
+/* 本块的规则只作用于本组件自己的标记(外壳/工具条/看板滚动容器与空态);
+   列/卡片/列表/菜单的规则随标记搬进 app/components/workshop/task-board/ 各子组件的
+   scoped 块 —— scoped 不能外移成公共 css。 */
+.board-shell {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  animation: view-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+@keyframes view-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .board-shell { animation: none; }
+}
+
+.toolbar {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 12px;
+  align-items: center;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--line);
+}
+.count {
+  overflow: hidden;
+  font-size: 11.5px;
+  color: var(--ink-faint);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.root-pill {
+  max-width: min(42vw, 360px);
+  padding: 4px 8px;
+  overflow: hidden;
+  font-size: 10.5px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+}
+.root-pill.active { color: var(--ink); background: color-mix(in srgb, var(--accent) 12%, transparent); }
+.root-pill.queued { color: var(--ink-faint); background: var(--surface-strong); }
+.root-pill.done { color: var(--ink-faint); background: transparent; }
+.root-pos { margin-left: 4px; font-weight: 500; opacity: 0.75; }
+
+/* 看板:全高等宽泳道(surface-strong 软底,白卡浮于其上);泳道本体样式在 task-board/Column.vue */
+.board {
+  overscroll-behavior: contain;
+  display: flex;
+  flex: 1 1 auto;
+  gap: 12px;
+  align-items: stretch;
+  min-height: 0;
+  padding: 12px 14px 14px;
+  overflow-x: auto;
+}
+
+/* ── 窄屏(≤1023):看板列从"全高等宽四列"改为"一次一列"的横向卷轴 ──
+   300px 定宽列在 390px 下只能露出半列 + 半列,状态语义读不出来;
+   改为 86% 宽 + scroll-snap:一屏一个状态列。列表视图行允许折行,不竖排。
+   本块只留外壳/工具条/看板滚动容器;列/卡片/列表/菜单的窄屏规则在各自子组件里。 */
+@media (max-width: 1023.98px) {
+  .toolbar {
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 10px;
+  }
+
+  /* 有意重复:原 `.count, .sec-cnt, .tk-route, .meta, .st-pill` 是一条分组选择器,
+     标记分散到子组件后按各自 scoped 块逐字复制同一条「窄屏字号地板」——
+     不要合并成公共 css。 */
+  .count {
+    font-size: 11.5px;
+  }
+
+  .board {
+    padding: 10px;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+</style>