@qnote/q-ai-note 1.0.13 → 1.0.15

package/dist/web/aserRuntimeView.js

@@ -0,0 +1,2152 @@
+import { API_BASE, apiRequest, safeText } from './shared.js';
+
+function byId(id) {
+  return document.getElementById(id);
+}
+
+function formatDateTime(value) {
+  if (!value) return '-';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return String(value);
+  return date.toLocaleString();
+}
+
+function parseOptionalJsonText(rawValue) {
+  const raw = String(rawValue || '').trim();
+  if (!raw) return {};
+  try {
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return {};
+    return parsed;
+  } catch {
+    throw new Error('payload JSON 格式不正确');
+  }
+}
+
+const PM_STAGE_ORDER = [
+  'create_requirement',
+  'design_system',
+  'clarify_design',
+  'implement_feature',
+  'review_code',
+  'report_issue',
+  'escalate_issue',
+];
+
+const PM_STAGE_LABELS = {
+  create_requirement: '需求定义',
+  design_system: '架构设计',
+  clarify_design: '澄清回路',
+  implement_feature: '开发实现',
+  review_code: '评审验收',
+  report_issue: '问题记录',
+  escalate_issue: '管理上升',
+};
+
+const DEFAULT_PROTOCOL_PRESET = {
+  id: 'engineering_protocol_v1',
+  version: 1,
+  roles: [
+    { role_id: 'product_manager', intents: ['create_requirement', 'escalate_issue'] },
+    { role_id: 'architect', intents: ['design_system', 'clarify_design'] },
+    { role_id: 'developer', intents: ['implement_feature', 'report_issue', 'clarify_design'] },
+    { role_id: 'reviewer', intents: ['review_code', 'escalate_issue'] },
+  ],
+  intents: PM_STAGE_ORDER,
+  intent_rules: [
+    { intent: 'design_system', requires: ['create_requirement'] },
+    { intent: 'clarify_design', requires: ['design_system'] },
+    { intent: 'implement_feature', requires: ['design_system', 'clarify_design'] },
+    { intent: 'review_code', requires: ['implement_feature'] },
+    { intent: 'report_issue', requires: ['implement_feature'] },
+    { intent: 'escalate_issue', requires: ['report_issue'] },
+  ],
+  evaluation_templates: [],
+  quality_gates: [
+    { gate_id: 'G1', stage: 'create_requirement', required_evidence: ['requirement_doc'], pass_when: 'requirement_is_complete' },
+    { gate_id: 'G2', stage: 'design_system', required_evidence: ['design_doc'], pass_when: 'design_review_passed' },
+    { gate_id: 'G3', stage: 'implement_feature', required_evidence: ['pr', 'test_report'], pass_when: 'implementation_tests_passed' },
+    { gate_id: 'G4', stage: 'review_code', required_evidence: ['review_record'], pass_when: 'review_accepted' },
+    { gate_id: 'G5', stage: 'escalate_issue', required_evidence: ['risk_summary'], pass_when: 'escalation_acknowledged' },
+  ],
+  loop_actions: [
+    { id: 'L1', taxonomy: 'clarify_design', trigger_event_types: ['message_posted'], required_links: ['parent'], closure_evidence: ['clarification_note'] },
+    { id: 'L2', taxonomy: 'report_issue', trigger_event_types: ['issue_reported', 'task_blocked'], required_links: ['parent'], closure_evidence: ['issue_record'] },
+    { id: 'L3', taxonomy: 'escalate_issue', trigger_event_types: ['escalation_requested'], required_links: ['parent', 'related'], closure_evidence: ['risk_summary'] },
+  ],
+  updated_at: new Date().toISOString(),
+};
+
+const ROLE_STYLE = {
+  product_manager: { label: 'PM', tone: 'pm' },
+  architect: { label: 'ARCH', tone: 'arch' },
+  developer: { label: 'DEV', tone: 'dev' },
+  reviewer: { label: 'REV', tone: 'rev' },
+};
+const ROLE_ORDER = ['product_manager', 'architect', 'developer', 'reviewer', 'system'];
+
+function taskStatusClass(status) {
+  const normalized = String(status || 'created');
+  if (normalized === 'accepted' || normalized === 'completed') return 'is-done';
+  if (normalized === 'blocked' || normalized === 'failed') return 'is-risk';
+  if (normalized === 'evaluating') return 'is-review';
+  if (normalized === 'in_progress') return 'is-progress';
+  return 'is-created';
+}
+
+function isReplayEligibleStatus(status) {
+  const normalized = String(status || '');
+  return normalized === 'accepted' || normalized === 'completed';
+}
+
+function protocolCoverageStatus(stats) {
+  const safe = stats || { total: 0, done: 0, active: 0, blocked: 0 };
+  if (safe.blocked > 0) return { key: 'risk', label: '阻塞' };
+  if (safe.active > 0) return { key: 'active', label: '进行中' };
+  if (safe.done > 0) return { key: 'done', label: '已完成' };
+  return { key: 'idle', label: '未触发' };
+}
+
+function clampNumber(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+
+function isLoopTaxonomy(taxonomy) {
+  return ['clarify_design', 'report_issue', 'escalate_issue'].includes(String(taxonomy || ''));
+}
+
+function classifySystemInput(rawText) {
+  const text = String(rawText || '').toLowerCase();
+  if (!text) return null;
+  if (text.includes('上升') || text.includes('escalat') || text.includes('风险')) {
+    return { type: 'escalation_requested', role: 'reviewer', actor: 'Reviewer Carol', actorKind: 'human', taxonomy: 'escalate_issue' };
+  }
+  if (text.includes('问题') || text.includes('阻塞') || text.includes('issue') || text.includes('block')) {
+    return { type: 'issue_reported', role: 'developer', actor: 'DevAgent', actorKind: 'agent', taxonomy: 'report_issue' };
+  }
+  if (text.includes('评审') || text.includes('review')) {
+    return { type: 'review_requested', role: 'reviewer', actor: 'Reviewer Carol', actorKind: 'human', taxonomy: 'review_code' };
+  }
+  if (text.includes('实现') || text.includes('开发') || text.includes('implement')) {
+    return { type: 'implementation_reported', role: 'developer', actor: 'DevAgent', actorKind: 'agent', taxonomy: 'implement_feature' };
+  }
+  if (text.includes('设计') || text.includes('架构') || text.includes('design')) {
+    return { type: 'design_defined', role: 'architect', actor: 'Architect Bob', actorKind: 'human', taxonomy: 'design_system' };
+  }
+  if (text.includes('需求') || text.includes('requirement')) {
+    return { type: 'requirement_defined', role: 'product_manager', actor: 'PM Alice', actorKind: 'human', taxonomy: 'create_requirement' };
+  }
+  return { type: 'message_posted', role: 'developer', actor: 'DevAgent', actorKind: 'agent', taxonomy: 'clarify_design' };
+}
+
+export function createAserRuntimeView(options = {}) {
+  const state = {
+    readonly: Boolean(options.readonly),
+    hasAccess: Boolean(options.hasAccess),
+    projects: [],
+    selectedProjectId: '',
+    selectedProject: null,
+    selectedProjectState: null,
+    selectedProtocol: null,
+    selectedProtocolPresetId: DEFAULT_PROTOCOL_PRESET.id,
+    protocolViewMode: 'graph',
+    protocolCoverageEnabled: true,
+    protocolPresets: [DEFAULT_PROTOCOL_PRESET],
+    projectListPage: 1,
+    projectListPageSize: 6,
+    viewMode: 'chat',
+    threadFilter: 'all',
+    focusedEntity: null,
+    selectedRunTeamId: '',
+    demo: {
+      started: false,
+      running: false,
+      auto: false,
+      stepIndex: -1,
+      projectId: '',
+      context: {},
+      logs: [],
+      steps: [],
+    },
+  };
+
+  function sleep(ms) {
+    return new Promise((resolve) => {
+      window.setTimeout(resolve, ms);
+    });
+  }
+
+  function getTasks() {
+    const tasks = Array.isArray(state.selectedProject?.tasks) ? [...state.selectedProject.tasks] : [];
+    return tasks.sort((a, b) => String(a.created_at || '').localeCompare(String(b.created_at || '')));
+  }
+
+  function getActiveProtocol() {
+    if (state.selectedProtocol && state.selectedProtocol.id === state.selectedProtocolPresetId) {
+      return state.selectedProtocol;
+    }
+    const fromPreset = state.protocolPresets.find((preset) => String(preset.id) === String(state.selectedProtocolPresetId));
+    return fromPreset || state.selectedProtocol || DEFAULT_PROTOCOL_PRESET;
+  }
+
+  function findTaskById(taskId) {
+    return getTasks().find((task) => String(task.id) === String(taskId)) || null;
+  }
+
+  function getFocusedTask() {
+    if (!state.focusedEntity?.taskId) return null;
+    return findTaskById(state.focusedEntity.taskId);
+  }
+
+  function setFocusedTask(taskId, source) {
+    const task = findTaskById(taskId);
+    if (!task) return;
+    state.focusedEntity = { type: 'task', source, taskId: task.id };
+    renderAll();
+  }
+
+  function openDialog(id) {
+    const dialog = byId(id);
+    if (dialog instanceof HTMLDialogElement) dialog.showModal();
+  }
+
+  function closeDialog(id) {
+    const dialog = byId(id);
+    if (dialog instanceof HTMLDialogElement) dialog.close();
+  }
+
+  function setAccessContext(input = {}) {
+    if (typeof input.readonly === 'boolean') state.readonly = input.readonly;
+    if (typeof input.hasAccess === 'boolean') state.hasAccess = input.hasAccess;
+    renderAll();
+  }
+
+  function getTeamList() {
+    const input = typeof options.getTeams === 'function' ? options.getTeams() : [];
+    return Array.isArray(input) ? input : [];
+  }
+
+  function getProjectTeamAssignments() {
+    const input = typeof options.getProjectTeamAssignments === 'function' ? options.getProjectTeamAssignments() : {};
+    if (!input || typeof input !== 'object') return {};
+    return input;
+  }
+
+  function getAssignedTeamId(projectId) {
+    const pid = String(projectId || '').trim();
+    if (!pid) return '';
+    const assignmentMap = getProjectTeamAssignments();
+    return String(assignmentMap[pid] || '').trim();
+  }
+
+  function getTeamById(teamId) {
+    const id = String(teamId || '').trim();
+    if (!id) return null;
+    return getTeamList().find((team) => String(team?.id || '') === id) || null;
+  }
+
+  function refreshSelectedRunTeam() {
+    const teams = getTeamList();
+    const assignedTeamId = getAssignedTeamId(state.selectedProjectId);
+    if (assignedTeamId && teams.some((team) => String(team.id) === assignedTeamId)) {
+      state.selectedRunTeamId = assignedTeamId;
+      return;
+    }
+    if (state.selectedRunTeamId && teams.some((team) => String(team.id) === String(state.selectedRunTeamId))) return;
+    state.selectedRunTeamId = teams[0] ? String(teams[0].id || '') : '';
+  }
+
+  function renderRunTeamSelector() {
+    const select = byId('aser-run-team-select');
+    if (!(select instanceof HTMLSelectElement)) return;
+    const teams = getTeamList();
+    refreshSelectedRunTeam();
+    if (!teams.length) {
+      select.innerHTML = '<option value="">暂无 Team（先去 Agent Club/Teams 定义）</option>';
+      select.value = '';
+      return;
+    }
+    select.innerHTML = teams
+      .map((team) => `<option value="${safeText(team.id)}">${safeText(team.name || team.id)}</option>`)
+      .join('');
+    select.value = String(state.selectedRunTeamId || teams[0].id || '');
+  }
+
+  function renderControls() {
+    const writeDisabled = state.readonly || !state.hasAccess;
+    const projectDisabled = writeDisabled || !state.selectedProjectId;
+    const teams = getTeamList();
+    const hasTeamOptions = teams.length > 0;
+    refreshSelectedRunTeam();
+    const runTeamMissing = !String(state.selectedRunTeamId || '').trim();
+    const focusedTask = getFocusedTask();
+    const replayEligible = Boolean(focusedTask && isReplayEligibleStatus(focusedTask.status));
+    renderRunTeamSelector();
+    const controlMap = {
+      'aser-open-create-project-dialog-btn': writeDisabled,
+      'aser-load-complex-scenario-btn': writeDisabled,
+      'aser-open-protocol-dialog-btn': projectDisabled,
+      'aser-submit-event-btn': projectDisabled,
+      'aser-run-team-select': writeDisabled || !hasTeamOptions,
+      'aser-assign-team-btn': projectDisabled || !hasTeamOptions || runTeamMissing,
+      'aser-start-run-btn': projectDisabled || !hasTeamOptions || runTeamMissing,
+      'aser-thread-filter-select': projectDisabled,
+      'aser-protocol-preset-select': writeDisabled,
+      'aser-create-project-protocol-select': writeDisabled,
+      'aser-create-project-btn': writeDisabled,
+      'aser-load-protocol-btn': projectDisabled,
+      'aser-save-protocol-btn': projectDisabled,
+      'aser-demo-start-btn': writeDisabled || !replayEligible,
+      'aser-demo-next-btn': writeDisabled || !replayEligible || !state.demo.started || state.demo.running,
+      'aser-demo-auto-btn': writeDisabled || !replayEligible || !state.demo.started || state.demo.running,
+      'aser-demo-stop-btn': writeDisabled || !state.demo.auto,
+      'aser-demo-reset-btn': writeDisabled || !replayEligible || state.demo.running,
+    };
+    Object.entries(controlMap).forEach(([id, disabled]) => {
+      const el = byId(id);
+      if (el instanceof HTMLButtonElement || el instanceof HTMLSelectElement) el.disabled = disabled;
+    });
+  }
+
+  function renderSummary() {
+    const total = byId('aser-summary-total-projects');
+    const updated = byId('aser-summary-last-updated');
+    if (total instanceof HTMLElement) total.textContent = String(state.projects.length);
+    if (updated instanceof HTMLElement) {
+      const latest = [...state.projects]
+        .sort((a, b) => String(b.updated_at || '').localeCompare(String(a.updated_at || '')))[0];
+      updated.textContent = latest ? formatDateTime(latest.updated_at) : '-';
+    }
+  }
+
+  function renderProtocolPresetSelectors() {
+    const topSelect = byId('aser-protocol-preset-select');
+    const createSelect = byId('aser-create-project-protocol-select');
+    const options = state.protocolPresets.map((preset) => (
+      `<option value="${safeText(preset.id)}">${safeText(preset.id)} (v${safeText(String(preset.version || 1))})</option>`
+    )).join('');
+    if (topSelect instanceof HTMLSelectElement) {
+      topSelect.innerHTML = options;
+      topSelect.value = state.selectedProtocolPresetId || '';
+    }
+    if (createSelect instanceof HTMLSelectElement) {
+      createSelect.innerHTML = options;
+      createSelect.value = state.selectedProtocolPresetId || '';
+    }
+  }
+
+  function renderDemoPanel() {
+    const titleEl = byId('aser-replay-title');
+    const actionWrap = byId('aser-replay-actions');
+    const progress = byId('aser-demo-progress');
+    const progressInner = byId('aser-demo-progress-inner');
+    const stepsEl = byId('aser-demo-steps');
+    const logsEl = byId('aser-demo-logs');
+    const focusedTask = getFocusedTask();
+    const replayEligible = Boolean(focusedTask && isReplayEligibleStatus(focusedTask.status));
+    const tasks = getTasks();
+    const events = Array.isArray(state.selectedProject?.events) ? [...state.selectedProject.events] : [];
+    const latestUserInputEvent = events
+      .filter((row) => String(row?.payload?.source || '') === 'system_input')
+      .sort((a, b) => String(b.created_at || '').localeCompare(String(a.created_at || '')))[0] || null;
+    const projectState = state.selectedProjectState || null;
+    const totalTasks = Number(projectState?.total_tasks || tasks.length || 0);
+    const acceptedTasks = Number(projectState?.accepted_tasks || 0);
+    const blockedTasks = Number(projectState?.blocked_tasks || 0);
+    const inProgressTasks = Math.max(0, totalTasks - acceptedTasks - blockedTasks);
+    const completion = Number(projectState?.feature_completion || 0);
+    const latestInputText = latestUserInputEvent
+      ? String(
+        latestUserInputEvent.payload?.user_input
+        || latestUserInputEvent.payload?.raw_input
+        || '-',
+      )
+      : '-';
+    const latestInputMeta = latestUserInputEvent
+      ? `${formatDateTime(latestUserInputEvent.created_at)}`
+      : '暂无用户输入记录';
+
+    if (!replayEligible && state.demo.started) {
+      state.demo.started = false;
+      state.demo.auto = false;
+      state.demo.running = false;
+      state.demo.stepIndex = -1;
+      state.demo.steps = [];
+    }
+    if (titleEl instanceof HTMLElement) {
+      titleEl.textContent = replayEligible
+        ? `任务重访（${focusedTask.title || focusedTask.id}）`
+        : '最新状态全景';
+    }
+    if (actionWrap instanceof HTMLElement) {
+      actionWrap.classList.toggle('hidden', !replayEligible);
+    }
+
+    const totalSteps = state.demo.steps.length || 0;
+    const doneSteps = Math.max(0, Math.min(totalSteps, state.demo.stepIndex + 1));
+    if (progress instanceof HTMLElement) {
+      if (!replayEligible) {
+        progress.textContent = '当前任务未完成，展示最新状态全景。';
+      } else if (!state.demo.started) {
+        progress.textContent = '未开始重放';
+      } else if (state.demo.stepIndex >= state.demo.steps.length - 1) {
+        progress.textContent = `重放完成（${totalSteps}/${totalSteps}）`;
+      } else {
+        progress.textContent = `重放中：第 ${doneSteps} / ${totalSteps} 步${state.demo.auto ? '（自动播放）' : ''}`;
+      }
+    }
+    if (progressInner instanceof HTMLElement) {
+      const ratio = totalSteps <= 0 ? 0 : (doneSteps / totalSteps) * 100;
+      progressInner.style.width = `${Math.max(0, Math.min(100, ratio))}%`;
+    }
+    if (stepsEl instanceof HTMLElement) {
+      if (!replayEligible) {
+        stepsEl.innerHTML = `
+          <div class="aser-demo-step done">任务输入：${safeText(latestInputText)}</div>
+          <div class="aser-demo-step">输入时间：${safeText(latestInputMeta)}</div>
+          <div class="aser-demo-step">执行情况：总任务 ${safeText(String(totalTasks))} | 完成 ${safeText(String(acceptedTasks))} | 进行 ${safeText(String(inProgressTasks))} | 阻塞 ${safeText(String(blockedTasks))}</div>
+          <div class="aser-demo-step">完成度：${safeText(String(completion))}%</div>
+        `;
+      } else if (!state.demo.started || !state.demo.steps.length) {
+        stepsEl.innerHTML = '<div class="aser-demo-empty">该任务已完成，可点击“开始重放”。</div>';
+      } else {
+        stepsEl.innerHTML = state.demo.steps.map((step, index) => {
+          const done = index <= state.demo.stepIndex;
+          const active = index === state.demo.stepIndex + 1 && state.demo.running;
+          const canJump = done && !state.demo.running;
+          return `<div class="aser-demo-step ${done ? 'done' : ''} ${active ? 'active' : ''} ${canJump ? 'can-jump' : ''}" data-aser-demo-step-index="${index}">${safeText(step.label)}</div>`;
+        }).join('');
+      }
+    }
+    if (logsEl instanceof HTMLElement) {
+      const logs = state.demo.logs.slice(-8);
+      logsEl.innerHTML = logs.length
+        ? logs.map((log) => `<div class="aser-demo-log">${safeText(log)}</div>`).join('')
+        : (replayEligible
+          ? '<div class="aser-demo-log">暂无重放日志。</div>'
+          : '<div class="aser-demo-log">全景模式不展示重放日志。</div>');
+    }
+  }
+
+  function renderProjectList() {
+    const list = byId('aser-project-list');
+    const pager = byId('aser-project-list-pager');
+    if (!(list instanceof HTMLElement)) return;
+    const writeDisabled = state.readonly || !state.hasAccess;
+    if (!state.hasAccess) {
+      list.innerHTML = '<div class="empty-state">当前权限不可访问 ASER 子系统。</div>';
+      return;
+    }
+    if (!state.projects.length) {
+      list.innerHTML = '<div class="empty-state">暂无 ASER 项目，先创建一个项目开始。</div>';
+      if (pager instanceof HTMLElement) pager.innerHTML = '';
+      return;
+    }
+    const filteredProjects = state.projects.filter((project) => {
+      const pid = String(project?.protocol?.id || '');
+      return !state.selectedProtocolPresetId || pid === String(state.selectedProtocolPresetId);
+    });
+    if (!filteredProjects.length) {
+      list.innerHTML = '<div class="empty-state">当前流程下暂无项目，可基于该流程新建 Project。</div>';
+      if (pager instanceof HTMLElement) pager.innerHTML = '';
+      return;
+    }
+    const pageSize = Math.max(1, Number(state.projectListPageSize || 6));
+    const totalPages = Math.max(1, Math.ceil(filteredProjects.length / pageSize));
+    const currentPage = Math.max(1, Math.min(totalPages, Number(state.projectListPage || 1)));
+    state.projectListPage = currentPage;
+    const start = (currentPage - 1) * pageSize;
+    const pageProjects = filteredProjects.slice(start, start + pageSize);
+
+    list.innerHTML = pageProjects.map((project) => {
+      const active = String(project.id) === String(state.selectedProjectId) ? ' active' : '';
+      return `
+        <div class="aser-project-item${active}" data-aser-project-id="${safeText(project.id)}">
+          <button type="button" class="aser-project-main-btn" data-aser-project-open-id="${safeText(project.id)}">
+            <span class="aser-project-name">${safeText(project.name)}</span>
+            <span class="aser-project-meta">protocol: ${safeText(project?.protocol?.id || '-')}</span>
+            <span class="aser-project-meta">更新：${safeText(formatDateTime(project.updated_at))}</span>
+          </button>
+          <button type="button" class="btn btn-secondary btn-sm aser-project-delete-btn" title="删除项目" aria-label="删除项目" data-aser-project-delete-id="${safeText(project.id)}" ${writeDisabled ? 'disabled' : ''}>🗑</button>
+        </div>
+      `;
+    }).join('');
+    if (pager instanceof HTMLElement) {
+      pager.innerHTML = `
+        <button type="button" class="btn btn-secondary btn-sm" data-aser-project-page-action="prev" ${currentPage <= 1 ? 'disabled' : ''}>上一页</button>
+        <span class="aser-project-pager-text">第 ${safeText(String(currentPage))} / ${safeText(String(totalPages))} 页</span>
+        <button type="button" class="btn btn-secondary btn-sm" data-aser-project-page-action="next" ${currentPage >= totalPages ? 'disabled' : ''}>下一页</button>
+      `;
+    }
+  }
+
+  function inferRoleFromText(rawValue) {
+    const text = String(rawValue || '').toLowerCase();
+    if (!text) return 'system';
+    if (text.includes('pm') || text.includes('product_manager') || text.includes('产品')) return 'product_manager';
+    if (text.includes('arch') || text.includes('architect') || text.includes('架构')) return 'architect';
+    if (text.includes('dev') || text.includes('developer') || text.includes('开发')) return 'developer';
+    if (text.includes('rev') || text.includes('review') || text.includes('评审')) return 'reviewer';
+    return 'system';
+  }
+
+  function renderProjectSummary() {
+    const detail = byId('aser-project-detail');
+    const title = byId('aser-selected-project-title');
+    const desc = byId('aser-selected-project-description');
+    const updated = byId('aser-selected-project-updated');
+    const runtimeState = byId('aser-selected-project-state');
+    const threadState = byId('aser-selected-thread-state');
+    if (!(detail instanceof HTMLElement)
+      || !(title instanceof HTMLElement)
+      || !(desc instanceof HTMLElement)
+      || !(updated instanceof HTMLElement)
+      || !(runtimeState instanceof HTMLElement)
+      || !(threadState instanceof HTMLElement)) {
+      return;
+    }
+    const selected = state.selectedProject;
+    if (!selected) {
+      title.textContent = '未选择项目';
+      desc.textContent = '从左侧选择或新建一个项目。';
+      updated.textContent = '-';
+      runtimeState.textContent = '-';
+      threadState.textContent = '-';
+      detail.classList.add('is-empty');
+      return;
+    }
+    title.textContent = selected.name || '-';
+    desc.textContent = selected.description || '暂无描述';
+    updated.textContent = formatDateTime(selected.updated_at);
+    const projectState = state.selectedProjectState;
+    runtimeState.textContent = projectState
+      ? `完成度 ${projectState.feature_completion}% | blocked ${projectState.blocked_tasks} | review pending ${projectState.review_pending_tasks} | failed ${projectState.failed_tasks} | gate blocked ${projectState.quality_gate_blocked_events || 0}`
+      : '-';
+    const groups = buildThreadGroups();
+    const loopTasks = getTasks().filter((task) => {
+      const intent = (state.selectedProject?.intents || []).find((row) => String(row.id) === String(task.intent_id));
+      return ['clarify_design', 'escalate_issue', 'report_issue'].includes(String(intent?.taxonomy || ''));
+    }).length;
+    const assignedTeamId = getAssignedTeamId(selected.id);
+    const assignedTeam = getTeamById(assignedTeamId);
+    const teamLabel = assignedTeam ? `${assignedTeam.name} (${assignedTeam.id})` : '未分派';
+    threadState.textContent = `线程 ${groups.length} 条 | 回路任务 ${loopTasks} 个 | Team ${teamLabel}`;
+    detail.classList.remove('is-empty');
+  }
+
+  function buildStageStats() {
+    const intents = Array.isArray(state.selectedProject?.intents) ? state.selectedProject.intents : [];
+    const tasks = getTasks();
+    const acceptedByIntent = {};
+    tasks.forEach((task) => {
+      const intent = intents.find((row) => String(row.id) === String(task.intent_id));
+      const taxonomy = String(intent?.taxonomy || '').trim();
+      if (!taxonomy) return;
+      acceptedByIntent[taxonomy] = acceptedByIntent[taxonomy] || { total: 0, accepted: 0, blocked: 0 };
+      acceptedByIntent[taxonomy].total += 1;
+      if (String(task.status) === 'accepted') acceptedByIntent[taxonomy].accepted += 1;
+      if (String(task.status) === 'blocked') acceptedByIntent[taxonomy].blocked += 1;
+    });
+    return acceptedByIntent;
+  }
+
+  function buildProtocolCoverageByIntent() {
+    const map = {};
+    const intents = Array.isArray(state.selectedProject?.intents) ? state.selectedProject.intents : [];
+    const tasks = getTasks();
+    tasks.forEach((task) => {
+      const intent = intents.find((row) => String(row.id) === String(task.intent_id));
+      const taxonomy = String(intent?.taxonomy || '').trim();
+      if (!taxonomy) return;
+      if (!map[taxonomy]) {
+        map[taxonomy] = { total: 0, done: 0, active: 0, blocked: 0 };
+      }
+      map[taxonomy].total += 1;
+      const status = String(task.status || '');
+      if (status === 'accepted' || status === 'completed') {
+        map[taxonomy].done += 1;
+      } else if (status === 'blocked' || status === 'failed') {
+        map[taxonomy].blocked += 1;
+      } else {
+        map[taxonomy].active += 1;
+      }
+    });
+    return map;
+  }
+
+  function buildThreadGroups() {
+    const tasks = getTasks();
+    const map = new Map(tasks.map((task) => [String(task.id), task]));
+    const taxonomyByTaskId = buildIntentTaxonomyByTaskId();
+    const childrenMap = new Map();
+    tasks.forEach((task) => {
+      const parent = String(task.parent || '');
+      if (!parent || !map.has(parent)) return;
+      if (!childrenMap.has(parent)) childrenMap.set(parent, []);
+      childrenMap.get(parent).push(task);
+    });
+    const roots = tasks.filter((task) => !task.parent || !map.has(String(task.parent)));
+    const groups = roots.map((root) => {
+      const queue = [root];
+      const members = [];
+      while (queue.length) {
+        const current = queue.shift();
+        members.push(current);
+        const children = childrenMap.get(String(current.id)) || [];
+        children.forEach((child) => queue.push(child));
+      }
+      const blocked = members.filter((task) => ['blocked', 'failed'].includes(String(task.status))).length;
+      const done = members.filter((task) => ['accepted', 'completed'].includes(String(task.status))).length;
+      const active = Math.max(0, members.length - blocked - done);
+      const rework = members.filter((task) => String(task.status) === 'failed').length;
+      const escalations = members.filter((task) => taxonomyByTaskId[String(task.id)] === 'escalate_issue').length;
+      const clarifies = members.filter((task) => taxonomyByTaskId[String(task.id)] === 'clarify_design').length;
+      const roundTrips = rework + escalations + clarifies;
+      const firstAt = [...members]
+        .sort((a, b) => String(a.created_at || '').localeCompare(String(b.created_at || '')))[0]?.created_at || null;
+      const lastAt = [...members]
+        .sort((a, b) => String(b.updated_at || '').localeCompare(String(a.updated_at || '')))[0]?.updated_at || null;
+      const firstMs = firstAt ? Date.parse(String(firstAt)) : 0;
+      const lastMs = lastAt ? Date.parse(String(lastAt)) : 0;
+      const durationHours = firstMs > 0 && lastMs > 0 && lastMs >= firstMs
+        ? Number(((lastMs - firstMs) / 3600000).toFixed(2))
+        : 0;
+      const completionRate = members.length > 0 ? done / members.length : 0;
+      const healthScore = clampNumber(
+        Math.round(
+          100
+          - blocked * 18
+          - rework * 12
+          - escalations * 8
+          - clarifies * 5
+          + completionRate * 20,
+        ),
+        0,
+        100,
+      );
+      const health = healthScore >= 80 ? 'healthy' : healthScore >= 60 ? 'watch' : 'risky';
+      const healthLabel = health === 'healthy' ? '健康' : health === 'watch' ? '关注' : '高风险';
+      return {
+        rootId: String(root.id),
+        title: root.title || root.id,
+        size: members.length,
+        blocked,
+        done,
+        active,
+        rework,
+        escalations,
+        clarifies,
+        roundTrips,
+        durationHours,
+        completionRate,
+        healthScore,
+        health,
+        healthLabel,
+        members,
+      };
+    });
+    return groups.sort((a, b) => b.size - a.size);
+  }
+
+  function buildIntentTaxonomyByTaskId() {
+    const intents = Array.isArray(state.selectedProject?.intents) ? state.selectedProject.intents : [];
+    const tasks = getTasks();
+    const map = {};
+    tasks.forEach((task) => {
+      const intent = intents.find((row) => String(row.id) === String(task.intent_id));
+      map[String(task.id)] = String(intent?.taxonomy || '');
+    });
+    return map;
+  }
+
+  function renderProtocolVisual() {
+    const protocolVisual = byId('aser-protocol-visual');
+    const protocolFlow = byId('aser-protocol-flow');
+    const protocolFullscreen = byId('aser-protocol-flow-fullscreen');
+    const protocolInput = byId('aser-protocol-json-input');
+    const graphBtn = byId('aser-protocol-view-graph-btn');
+    const textBtn = byId('aser-protocol-view-text-btn');
+    const coverageToggle = byId('aser-protocol-coverage-toggle');
+    if (!(protocolVisual instanceof HTMLElement) || !(protocolFlow instanceof HTMLElement)) return;
+    if (graphBtn instanceof HTMLButtonElement) graphBtn.classList.toggle('active', state.protocolViewMode === 'graph');
+    if (textBtn instanceof HTMLButtonElement) textBtn.classList.toggle('active', state.protocolViewMode === 'text');
+    if (coverageToggle instanceof HTMLInputElement) {
+      coverageToggle.checked = Boolean(state.protocolCoverageEnabled);
+      coverageToggle.disabled = !state.selectedProjectId;
+    }
+    const activeProtocol = getActiveProtocol();
+    if (protocolInput instanceof HTMLTextAreaElement) {
+      protocolInput.value = activeProtocol ? JSON.stringify(activeProtocol, null, 2) : '';
+    }
+    if (!activeProtocol) {
+      protocolVisual.innerHTML = '<div class="empty-state">未加载 Protocol。</div>';
+      protocolFlow.innerHTML = '<div class="empty-state">未加载流程定义。</div>';
+      if (protocolFullscreen instanceof HTMLElement) {
+        protocolFullscreen.innerHTML = '<div class="empty-state">未加载流程定义。</div>';
+      }
+      return;
+    }
+    const roles = Array.isArray(activeProtocol.roles) ? activeProtocol.roles : [];
+    const rules = Array.isArray(activeProtocol.intent_rules) ? activeProtocol.intent_rules : [];
+    const intents = Array.isArray(activeProtocol.intents) ? activeProtocol.intents : [];
+    const coverage = buildProtocolCoverageByIntent();
+    const overlayOn = Boolean(state.protocolCoverageEnabled && state.selectedProjectId);
+    protocolVisual.innerHTML = `
+      <div class="aser-protocol-meta">id: ${safeText(activeProtocol.id || '-')} | version: ${safeText(String(activeProtocol.version || '-'))}</div>
+      <div class="aser-protocol-block">
+        <div class="aser-protocol-block-title">Roles</div>
+        ${(roles.length
+    ? roles.map((role) => `<div class="aser-protocol-line"><strong>${safeText(role.role_id)}</strong>: ${safeText((role.intents || []).join(', '))}</div>`).join('')
+    : '<div class="aser-protocol-line">无</div>')}
+      </div>
+      <div class="aser-protocol-block">
+        <div class="aser-protocol-block-title">Intent Rules</div>
+        ${(rules.length
+    ? rules.map((rule) => {
+      const stats = coverage[String(rule.intent || '')] || { total: 0, done: 0, active: 0, blocked: 0 };
+      const coverageStatus = protocolCoverageStatus(stats);
+      const coverageText = overlayOn
+        ? `<span class="aser-protocol-coverage-meta ${safeText(`is-${coverageStatus.key}`)}">状态 ${safeText(coverageStatus.label)}</span>`
+        : '';
+      return `<div class="aser-protocol-line">${safeText(rule.intent)} <= ${safeText((rule.requires || []).join(', ') || 'none')} ${coverageText}</div>`;
+    }).join('')
+    : '<div class="aser-protocol-line">无</div>')}
+      </div>
+    `;
+    protocolVisual.classList.toggle('hidden', state.protocolViewMode !== 'text');
+    const stageRows = PM_STAGE_ORDER
+      .filter((intent) => intents.includes(intent))
+      .map((intent, index) => {
+        const requires = rules.find((row) => row.intent === intent)?.requires || [];
+        const stats = coverage[intent] || { total: 0, done: 0, active: 0, blocked: 0 };
+        const coverageStatus = protocolCoverageStatus(stats);
+        const prev = index <= 0 ? '' : '<span class="aser-flow-arrow">→</span>';
+        let className = intent === 'clarify_design'
+          ? 'is-clarify'
+          : intent === 'escalate_issue'
+            ? 'is-escalate'
+            : '';
+        if (overlayOn) {
+          if (stats.blocked > 0) className += ' is-coverage-risk';
+          else if (stats.active > 0) className += ' is-coverage-active';
+          else if (stats.done > 0) className += ' is-coverage-done';
+        }
+        const coverageLine = overlayOn
+          ? `<span class="aser-flow-node-status aser-status-${safeText(coverageStatus.key)}" title="${safeText(`状态: ${coverageStatus.label}`)}"></span>`
+          : '';
+        return `
+          ${prev}
+          <span class="aser-flow-node ${className}">
+            <span>${safeText(PM_STAGE_LABELS[intent] || intent)}</span>
+            <small class="aser-flow-require">依赖: ${safeText(requires.join(', ') || 'none')}</small>
+            ${coverageLine}
+          </span>
+        `;
+      }).join('');
+    protocolFlow.innerHTML = stageRows || '<div class="empty-state">当前协议未定义可展示的流程节点。</div>';
+    protocolFlow.classList.toggle('hidden', state.protocolViewMode !== 'graph');
+
+    if (protocolFullscreen instanceof HTMLElement) {
+      const detailFlow = PM_STAGE_ORDER
+        .filter((intent) => intents.includes(intent))
+        .map((intent, index) => {
+          const requires = rules.find((row) => row.intent === intent)?.requires || [];
+          const stats = coverage[intent] || { total: 0, done: 0, active: 0, blocked: 0 };
+          const coverageStatus = protocolCoverageStatus(stats);
+          const prev = index <= 0 ? '' : '<span class="aser-flow-arrow detail">→</span>';
+          const statusTag = overlayOn
+            ? `<span class="aser-protocol-coverage-meta ${safeText(`is-${coverageStatus.key}`)}">${safeText(coverageStatus.label)}</span>`
+            : '';
+          let className = 'detail';
+          if (overlayOn) {
+            if (stats.blocked > 0) className += ' is-coverage-risk';
+            else if (stats.active > 0) className += ' is-coverage-active';
+            else if (stats.done > 0) className += ' is-coverage-done';
+          }
+          return `
+            ${prev}
+            <span class="aser-flow-node ${className}">
+              <div class="aser-flow-node-head">
+                <strong>${safeText(PM_STAGE_LABELS[intent] || intent)}</strong>
+                ${statusTag}
+              </div>
+              <small>intent: ${safeText(intent)}</small>
+              <small class="aser-flow-require">依赖: ${safeText(requires.join(', ') || 'none')}</small>
+              <small>次数 ${safeText(String(stats.total))} | 完成 ${safeText(String(stats.done))} | 进行 ${safeText(String(stats.active))} | 阻塞 ${safeText(String(stats.blocked))}</small>
+            </span>
+          `;
+        }).join('');
+      protocolFullscreen.innerHTML = detailFlow
+        ? `<div class="aser-protocol-flow-detailed">${detailFlow}</div>`
+        : '<div class="empty-state">当前协议未定义可展示的流程节点。</div>';
+    }
+  }
+
+  function renderPmBoard() {
+    const board = byId('aser-pm-board');
+    if (!(board instanceof HTMLElement)) return;
+    if (!state.selectedProject) {
+      board.innerHTML = '<div class="empty-state">选择项目后展示 PM 过程看板。</div>';
+      return;
+    }
+    const stageStats = buildStageStats();
+    const cards = PM_STAGE_ORDER.map((intent) => {
+      const stats = stageStats[intent] || { total: 0, accepted: 0, blocked: 0 };
+      const riskClass = stats.blocked > 0 || intent === 'escalate_issue' ? 'risk' : '';
+      return `
+        <div class="aser-pm-card ${riskClass}">
+          <div class="aser-pm-card-title">${safeText(PM_STAGE_LABELS[intent])}</div>
+          <div class="aser-pm-card-meta">任务: ${safeText(String(stats.total))}</div>
+          <div class="aser-pm-card-meta">通过: ${safeText(String(stats.accepted))}</div>
+          <div class="aser-pm-card-meta">阻塞: ${safeText(String(stats.blocked))}</div>
+        </div>
+      `;
+    }).join('');
+    board.innerHTML = `
+      <div class="aser-pm-kpi-row">
+        <div class="aser-pm-kpi">澄清任务: ${safeText(String(stageStats.clarify_design?.total || 0))}</div>
+        <div class="aser-pm-kpi">上升任务: ${safeText(String(stageStats.escalate_issue?.total || 0))}</div>
+        <div class="aser-pm-kpi">问题记录: ${safeText(String(stageStats.report_issue?.total || 0))}</div>
+      </div>
+      <div class="aser-pm-card-grid">${cards}</div>
+    `;
+  }
+
+  function renderThreadSummary() {
+    const panel = byId('aser-thread-summary');
+    if (!(panel instanceof HTMLElement)) return;
+    if (!state.selectedProject) {
+      panel.innerHTML = '<div class="empty-state">选择项目后展示 thread 摘要。</div>';
+      return;
+    }
+    const groups = buildThreadGroups();
+    if (!groups.length) {
+      panel.innerHTML = '<div class="empty-state">当前项目暂无 thread 数据。</div>';
+      return;
+    }
+    panel.innerHTML = groups.map((group) => `
+      <article class="aser-thread-summary-row" data-aser-thread-root-id="${safeText(group.rootId)}">
+        <div class="aser-thread-summary-main">
+          <span>${safeText(group.title)}</span>
+          <span class="aser-health-badge ${safeText(group.health)}">${safeText(`${group.healthLabel} ${group.healthScore}`)}</span>
+        </div>
+        <div class="aser-thread-summary-meta">任务 ${safeText(String(group.size))} | 完成 ${safeText(String(group.done))} | 进行 ${safeText(String(group.active))} | 阻塞 ${safeText(String(group.blocked))}</div>
+        <div class="aser-thread-summary-meta">回路 ${safeText(String(group.roundTrips))} | 上升 ${safeText(String(group.escalations))} | 返工 ${safeText(String(group.rework))} | 用时 ${safeText(String(group.durationHours))}h</div>
+      </article>
+    `).join('');
+  }
+
+  function renderGovernanceAdvice() {
+    const panel = byId('aser-governance-advice');
+    if (!(panel instanceof HTMLElement)) return;
+    if (!state.selectedProject) {
+      panel.innerHTML = '<div class="empty-state">选择项目后显示治理建议。</div>';
+      return;
+    }
+    const groups = buildThreadGroups();
+    if (!groups.length) {
+      panel.innerHTML = '<div class="empty-state">暂无 thread 数据。</div>';
+      return;
+    }
+    const sorted = [...groups].sort((a, b) => {
+      const scoreA = a.healthScore - a.blocked * 8 - a.roundTrips * 3;
+      const scoreB = b.healthScore - b.blocked * 8 - b.roundTrips * 3;
+      return scoreA - scoreB;
+    });
+    const top = sorted[0];
+    const eventRows = Array.isArray(state.selectedProject?.events) ? state.selectedProject.events : [];
+    const topMemberIds = new Set((top.members || []).map((row) => String(row.id)));
+    const gateBlockedCount = eventRows.filter((row) => {
+      if (String(row.type || '') !== 'quality_gate_blocked') return false;
+      const taskId = String(row.payload?.task_id || '');
+      return Boolean(taskId) && topMemberIds.has(taskId);
+    }).length;
+    const reasons = [];
+    if (top.blocked > 0) reasons.push(`阻塞 ${top.blocked}`);
+    if (top.rework > 0) reasons.push(`返工 ${top.rework}`);
+    if (top.escalations > 0) reasons.push(`上升 ${top.escalations}`);
+    if (top.clarifies > 0) reasons.push(`澄清 ${top.clarifies}`);
+    if (gateBlockedCount > 0) reasons.push(`闸门拦截 ${gateBlockedCount}`);
+    const reasonText = reasons.length ? reasons.join(' / ') : '线程存在波动';
+    panel.innerHTML = `
+      <div class="aser-governance-card">
+        <div class="aser-governance-title">优先治理线程</div>
+        <div class="aser-governance-main">${safeText(top.title)}</div>
+        <div class="aser-governance-meta">健康度：${safeText(String(top.healthScore))}（${safeText(top.healthLabel)}）</div>
+        <div class="aser-governance-meta">原因：${safeText(reasonText)}</div>
+        <div class="aser-governance-meta">闸门拦截：${safeText(String(gateBlockedCount))}</div>
+        <div class="aser-governance-meta">建议：先处理阻塞来源，再收敛回路任务，最后关闭上升项。</div>
+      </div>
+    `;
+  }
+
+  function renderPulledTask() {
+    const pulledTaskPreview = byId('aser-pulled-task-preview');
+    if (!(pulledTaskPreview instanceof HTMLElement)) return;
+    if (!state.pulledTask?.task) {
+      pulledTaskPreview.textContent = '暂无拉取结果';
+      return;
+    }
+    pulledTaskPreview.textContent = `task: ${state.pulledTask.task.title}
+status: ${state.pulledTask.task.status}
+owner: ${state.pulledTask.task.owner_role}`;
+  }
+
+  function renderChatProcess() {
+    const container = byId('aser-chat-process-list');
+    if (!(container instanceof HTMLElement)) return;
+    const tasks = getTasks();
+    const intents = Array.isArray(state.selectedProject?.intents) ? state.selectedProject.intents : [];
+    const evaluations = Array.isArray(state.selectedProject?.evaluations) ? state.selectedProject.evaluations : [];
+    const artifacts = Array.isArray(state.selectedProject?.artifacts) ? state.selectedProject.artifacts : [];
+    const events = Array.isArray(state.selectedProject?.events) ? state.selectedProject.events : [];
+    if (!tasks.length) {
+      container.innerHTML = '<div class="empty-state">暂无任务过程，先提交事件驱动任务生成。</div>';
+      return;
+    }
+    const taskById = new Map(tasks.map((task) => [String(task.id), task]));
+    const intentById = new Map(intents.map((intent) => [String(intent.id), intent]));
+
+    function buildTaskInteractionRows(task) {
+      const taskEvents = events
+        .filter((row) => {
+          const payload = row?.payload || {};
+          const direct = String(payload?.task_id || '') === String(task.id);
+          const parent = String(payload?.parent || '') === String(task.id);
+          const related = Array.isArray(payload?.related) && payload.related.map((v) => String(v)).includes(String(task.id));
+          const byIntent = String(payload?.intent_title || '').includes(String(task.title || ''));
+          return direct || parent || related || byIntent;
+        })
+        .map((row) => ({
+          ts: row.timestamp || row.created_at || '',
+          type: 'event',
+          label: `event: ${String(row.type || '-')}`,
+          detail: `actor ${String(row.actor || '-')} (${String(row.actor_kind || '-')})`,
+        }));
+      const taskArtifacts = artifacts
+        .filter((row) => String(row.task_id) === String(task.id))
+        .map((row) => ({
+          ts: row.created_at || '',
+          type: 'artifact',
+          label: `artifact: ${String(row.type || '-')}`,
+          detail: String(row.summary || row.uri || '-'),
+        }));
+      const taskEvaluations = evaluations
+        .filter((row) => String(row.task_id) === String(task.id))
+        .map((row) => {
+          const decision = String(row.decision || '-');
+          const normalized = decision === 'accept' ? 'approved' : decision;
+          return {
+            ts: row.created_at || '',
+            type: 'evaluation',
+            label: `state: ${normalized}`,
+            detail: `by ${String(row.evaluator || '-')} | ${String(row.comments || '-')}`,
+          };
+        });
+      return [...taskEvents, ...taskArtifacts, ...taskEvaluations]
+        .sort((a, b) => String(a.ts).localeCompare(String(b.ts)))
+        .slice(-10);
+    }
+
+    container.innerHTML = tasks.map((task) => {
+      const intent = intents.find((row) => String(row.id) === String(task.intent_id));
+      const stage = PM_STAGE_LABELS[String(intent?.taxonomy || '')] || String(intent?.taxonomy || 'unknown');
+      const role = String(task.owner_role || 'developer');
+      const roleStyle = ROLE_STYLE[role] || { label: role.toUpperCase().slice(0, 4), tone: 'dev' };
+      const threadHint = task.parent ? `thread: reply to ${task.parent}` : `thread root: ${task.id}`;
+      const parentTask = task.parent ? taskById.get(String(task.parent)) : null;
+      const upstreamIntent = parentTask ? intentById.get(String(parentTask.intent_id || '')) : null;
+      const interactionRows = buildTaskInteractionRows(task);
+      return `
+      <article class="aser-chat-task ${state.focusedEntity?.taskId === task.id ? 'active' : ''}" data-aser-chat-task-id="${safeText(task.id)}">
+        <div class="aser-chat-task-head">
+          <span class="aser-role-badge ${safeText(roleStyle.tone)}">${safeText(roleStyle.label)}</span>
+          <span class="aser-chat-task-title">${safeText(task.title || task.id)}</span>
+          <span class="aser-chat-task-status ${taskStatusClass(task.status)}">${safeText(task.status || 'created')}</span>
+        </div>
+        <div class="aser-chat-task-meta">阶段: ${safeText(stage)}</div>
+        <div class="aser-chat-task-meta">owner: ${safeText(task.owner_role || '-')} | agent: ${safeText(task.preferred_agent || '-')}</div>
+        <div class="aser-chat-task-meta">驱动链: ${safeText(parentTask ? `${parentTask.owner_role || '-'} -> ${task.owner_role || '-'}` : 'system -> ' + (task.owner_role || '-'))}</div>
+        <div class="aser-chat-task-meta">上游任务: ${safeText(parentTask?.title || 'none')} | 上游阶段: ${safeText(PM_STAGE_LABELS[String(upstreamIntent?.taxonomy || '')] || '-')}</div>
+        <div class="aser-chat-task-meta">${safeText(threadHint)}</div>
+        <div class="aser-chat-task-meta">updated: ${safeText(formatDateTime(task.updated_at))}</div>
+        <div class="aser-chat-task-timeline">
+          ${interactionRows.length
+    ? interactionRows.map((row) => `
+              <div class="aser-chat-task-interaction ${safeText(row.type)}">
+                <span>${safeText(formatDateTime(row.ts))}</span>
+                <strong>${safeText(row.label)}</strong>
+                <span>${safeText(row.detail)}</span>
+              </div>
+            `).join('')
+    : '<div class="aser-chat-task-interaction">暂无交互细节</div>'}
+        </div>
+      </article>
+    `;
+    }).join('');
+  }
+
+  function renderTaskGraph() {
+    const graph = byId('aser-task-graph');
+    if (!(graph instanceof HTMLElement)) return;
+    const tasks = getTasks();
+    if (!tasks.length) {
+      graph.innerHTML = '<div class="empty-state">暂无可绘制的任务图。</div>';
+      return;
+    }
+    const taskById = new Map(tasks.map((task) => [String(task.id), task]));
+    const artifacts = Array.isArray(state.selectedProject?.artifacts) ? state.selectedProject.artifacts : [];
+    const evaluations = Array.isArray(state.selectedProject?.evaluations) ? state.selectedProject.evaluations : [];
+    const events = Array.isArray(state.selectedProject?.events) ? state.selectedProject.events : [];
+    const roleLane = ROLE_ORDER.filter((role) => tasks.some((task) => String(task.owner_role) === String(role)));
+    const laneRoles = roleLane.length ? roleLane : ROLE_ORDER.slice(0, 4);
+    const laneCenters = laneRoles.map((_, index) => ((index + 0.5) * 100) / laneRoles.length);
+    const interactions = [];
+
+    tasks.forEach((task) => {
+      const fromTask = task.parent ? taskById.get(String(task.parent)) : null;
+      const fromRole = fromTask ? String(fromTask.owner_role || 'system') : 'system';
+      const toRole = String(task.owner_role || 'developer');
+      interactions.push({
+        id: String(task.id),
+        fromRole,
+        toRole,
+        action: 'created',
+        title: String(task.title || task.id),
+        time: String(task.created_at || ''),
+      });
+      artifacts
+        .filter((row) => String(row.task_id) === String(task.id))
+        .forEach((row) => {
+          interactions.push({
+            id: String(task.id),
+            fromRole: toRole,
+            toRole,
+            action: 'in_progress',
+            title: `${String(task.title || task.id)} | artifact ${String(row.type || '-')}`,
+            time: String(row.created_at || task.updated_at || ''),
+          });
+        });
+      evaluations
+        .filter((row) => String(row.task_id) === String(task.id))
+        .forEach((row) => {
+          const decision = String(row.decision || '');
+          interactions.push({
+            id: String(task.id),
+            fromRole: inferRoleFromText(row.evaluator),
+            toRole,
+            action: decision === 'accept' ? 'approved' : decision || 'evaluating',
+            title: `${String(task.title || task.id)} | evaluation`,
+            time: String(row.created_at || task.updated_at || ''),
+          });
+        });
+      events
+        .filter((row) => String(row.payload?.task_id || '') === String(task.id))
+        .forEach((row) => {
+          interactions.push({
+            id: String(task.id),
+            fromRole: inferRoleFromText(row.actor_role || row.actor),
+            toRole,
+            action: String(row.type || 'event'),
+            title: `${String(task.title || task.id)} | event ${String(row.type || '-')}`,
+            time: String(row.timestamp || row.created_at || task.updated_at || ''),
+          });
+        });
+      const finalStatus = String(task.status || 'created');
+      interactions.push({
+        id: String(task.id),
+        fromRole: toRole,
+        toRole,
+        action: finalStatus === 'accepted' ? 'approved' : finalStatus,
+        title: `${String(task.title || task.id)} | final`,
+        time: String(task.updated_at || task.created_at || ''),
+      });
+    });
+
+    interactions.sort((a, b) => String(a.time).localeCompare(String(b.time)));
+    const previousStatus = {};
+    const timeline = interactions.map((row) => {
+      const prev = previousStatus[row.id] || 'none';
+      previousStatus[row.id] = row.action;
+      return {
+        ...row,
+        transition: prev === row.action ? row.action : `${prev} -> ${row.action}`,
+      };
+    });
+
+    const laneHeader = laneRoles.map((role) => `
+      <div class="aser-sequence-lane" style="width:${safeText(String(100 / laneRoles.length))}%">
+        <span class="aser-role-badge ${(ROLE_STYLE[role] || { tone: 'dev' }).tone}">${safeText((ROLE_STYLE[role] || { label: role }).label || role)}</span>
+        <small>${safeText(role)}</small>
+      </div>
+    `).join('');
+
+    const rows = timeline.map((row) => {
+      const fromIdx = Math.max(0, laneRoles.indexOf(row.fromRole));
+      const toIdx = Math.max(0, laneRoles.indexOf(row.toRole));
+      const left = laneCenters[Math.min(fromIdx, toIdx)] || laneCenters[0];
+      const right = laneCenters[Math.max(fromIdx, toIdx)] || laneCenters[0];
+      const width = Math.max(2, right - left);
+      const reverse = toIdx < fromIdx ? 'reverse' : '';
+      return `
+        <div class="aser-sequence-row">
+          <div class="aser-sequence-arrow ${safeText(reverse)}" style="left:${left}%; width:${width}%"></div>
+          <button type="button" class="aser-sequence-message ${taskStatusClass(row.action)} ${state.focusedEntity?.taskId === row.id ? 'active' : ''}" data-aser-graph-task-id="${safeText(row.id)}">
+            <span class="aser-sequence-time">${safeText(formatDateTime(row.time))}</span>
+            <strong>${safeText(row.fromRole)} -> ${safeText(row.toRole)}</strong>
+            <span>${safeText(row.title)}</span>
+            <span class="aser-sequence-transition">${safeText(`状态变化: ${row.transition}`)}</span>
+          </button>
+        </div>
+      `;
+    }).join('');
+    graph.innerHTML = `
+      <div class="aser-graph-overview">UML Sequence: 角色泳道 ${laneRoles.length} | 交互 ${timeline.length}</div>
+      <div class="aser-sequence-header">${laneHeader}</div>
+      <div class="aser-sequence-body">${rows}</div>
+    `;
+  }
+
+  function renderTaskThread() {
+    const thread = byId('aser-task-thread');
+    if (!(thread instanceof HTMLElement)) return;
+    const tasks = getTasks();
+    if (!tasks.length) {
+      thread.innerHTML = '<div class="empty-state">暂无 thread 记录。</div>';
+      return;
+    }
+    const taxonomyByTaskId = buildIntentTaxonomyByTaskId();
+    const childrenMap = new Map();
+    tasks.forEach((task) => {
+      const parent = String(task.parent || '');
+      if (!parent) return;
+      if (!childrenMap.has(parent)) childrenMap.set(parent, []);
+      childrenMap.get(parent).push(task);
+    });
+    const roots = tasks
+      .filter((task) => !task.parent || !tasks.some((row) => String(row.id) === String(task.parent)))
+      .sort((a, b) => String(a.created_at || '').localeCompare(String(b.created_at || '')));
+
+    function collectMembers(root) {
+      const queue = [root];
+      const members = [];
+      while (queue.length) {
+        const current = queue.shift();
+        members.push(current);
+        const children = childrenMap.get(String(current.id)) || [];
+        children.forEach((child) => queue.push(child));
+      }
+      return members;
+    }
+
+    const filteredRoots = roots.filter((root) => {
+      if (state.threadFilter === 'all') return true;
+      const members = collectMembers(root);
+      const taxonomies = members.map((row) => taxonomyByTaskId[String(row.id)]).filter(Boolean);
+      if (state.threadFilter === 'blocked') {
+        return members.some((row) => ['blocked', 'failed'].includes(String(row.status)));
+      }
+      if (state.threadFilter === 'loop') {
+        return taxonomies.some((row) => ['clarify_design', 'escalate_issue', 'report_issue'].includes(String(row)));
+      }
+      if (state.threadFilter === 'rework') {
+        return members.filter((row) => String(row.status) === 'failed').length > 0;
+      }
+      return true;
+    });
+
+    function renderNode(task, depth) {
+      const children = childrenMap.get(String(task.id)) || [];
+      const taxonomy = taxonomyByTaskId[String(task.id)] || '';
+      const stage = PM_STAGE_LABELS[taxonomy] || taxonomy || 'unknown';
+      const rowClass = depth <= 0 ? 'aser-thread-root' : 'aser-thread-child';
+      const flowClass = isLoopTaxonomy(taxonomy) ? 'loop' : 'mainline';
+      const flowLabel = isLoopTaxonomy(taxonomy) ? '回路' : '主线';
+      const childrenRows = children.map((child) => renderNode(child, depth + 1)).join('');
+      return `
+        <div class="${rowClass} ${flowClass}" style="margin-left: ${depth * 14}px" data-aser-thread-task-id="${safeText(task.id)}">
+          <span>${safeText(task.title || task.id)}</span>
+          <span class="aser-thread-related">${safeText(stage)} | ${safeText(String(task.status || 'created'))}</span>
+          <span class="aser-thread-flow-tag ${safeText(flowClass)}">${safeText(flowLabel)}</span>
+        </div>
+        ${childrenRows}
+      `;
+    }
+
+    const lines = filteredRoots.map((root) => {
+      const members = collectMembers(root);
+      const blocked = members.filter((row) => ['blocked', 'failed'].includes(String(row.status))).length;
+      const done = members.filter((row) => ['accepted', 'completed'].includes(String(row.status))).length;
+      const active = Math.max(0, members.length - blocked - done);
+      const riskTag = blocked > 0 ? '<span class="aser-thread-badge risk">risk</span>' : '<span class="aser-thread-badge normal">stable</span>';
+      return `
+        <section class="aser-thread-group">
+          <div class="aser-thread-group-head" data-aser-thread-task-id="${safeText(root.id)}">
+            <strong>${safeText(root.title || root.id)}</strong>
+            <span class="aser-thread-related">任务 ${safeText(String(members.length))} | 完成 ${safeText(String(done))} | 进行 ${safeText(String(active))} | 阻塞 ${safeText(String(blocked))}</span>
+            ${riskTag}
+          </div>
+          <div class="aser-thread-group-body">
+            ${renderNode(root, 0)}
+          </div>
+        </section>
+      `;
+    });
+
+    thread.innerHTML = lines.join('') || '<div class="empty-state">当前筛选下暂无 thread 记录。</div>';
+  }
+
+  function renderModePanels() {
+    const chatBtn = byId('aser-view-mode-chat-btn');
+    const graphBtn = byId('aser-view-mode-graph-btn');
+    const threadBtn = byId('aser-view-mode-thread-btn');
+    const chatPanel = byId('aser-chat-process-container');
+    const graphPanel = byId('aser-graph-process-container');
+    const threadPanel = byId('aser-thread-process-container');
+    const threadFilterSelect = byId('aser-thread-filter-select');
+    if (chatBtn instanceof HTMLButtonElement) chatBtn.classList.toggle('active', state.viewMode === 'chat');
+    if (graphBtn instanceof HTMLButtonElement) graphBtn.classList.toggle('active', state.viewMode === 'graph');
+    if (threadBtn instanceof HTMLButtonElement) threadBtn.classList.toggle('active', state.viewMode === 'thread');
+    if (chatPanel instanceof HTMLElement) chatPanel.classList.toggle('hidden', state.viewMode !== 'chat');
+    if (graphPanel instanceof HTMLElement) graphPanel.classList.toggle('hidden', state.viewMode !== 'graph');
+    if (threadPanel instanceof HTMLElement) threadPanel.classList.toggle('hidden', state.viewMode !== 'thread');
+    if (threadFilterSelect instanceof HTMLSelectElement) threadFilterSelect.value = state.threadFilter;
+    if (state.viewMode === 'chat') renderChatProcess();
+    if (state.viewMode === 'graph') renderTaskGraph();
+    if (state.viewMode === 'thread') renderTaskThread();
+  }
+
+  function renderFocusDetail() {
+    const detail = byId('aser-focus-detail');
+    if (!(detail instanceof HTMLElement)) return;
+    if (!state.selectedProject) {
+      detail.textContent = '请先选择 Project。';
+      return;
+    }
+    if (!state.focusedEntity?.taskId) {
+      detail.textContent = '点击中间区域中的 chat 任务或图形 task，查看详细信息。';
+      return;
+    }
+    const task = findTaskById(state.focusedEntity.taskId);
+    if (!task) {
+      detail.textContent = '选中对象不存在或已被更新。';
+      return;
+    }
+    const artifacts = (state.selectedProject?.artifacts || []).filter((artifact) => artifact.task_id === task.id);
+    const evaluations = (state.selectedProject?.evaluations || []).filter((row) => row.task_id === task.id);
+    const children = getTasks().filter((row) => String(row.parent || '') === String(task.id));
+    const related = Array.isArray(task.related) ? task.related : [];
+    const lastEvaluation = evaluations
+      .slice()
+      .sort((a, b) => String(b.created_at || '').localeCompare(String(a.created_at || '')))[0] || null;
+    const intents = Array.isArray(state.selectedProject?.intents) ? state.selectedProject.intents : [];
+    const intent = intents.find((row) => String(row.id) === String(task.intent_id));
+    const sourceEvent = (state.selectedProject?.events || []).find((eventRow) => String(eventRow.id) === String(intent?.source_event_id || ''));
+    const protocol = getActiveProtocol();
+    const gates = Array.isArray(protocol?.quality_gates) ? protocol.quality_gates : [];
+    const gate = gates.find((row) => String(row.stage || '') === String(intent?.taxonomy || ''));
+    const expectedEvidence = Array.isArray(gate?.required_evidence) ? gate.required_evidence : [];
+    const providedEvidenceTypes = artifacts.map((row) => String(row.type || '').trim()).filter(Boolean);
+    const missingEvidence = expectedEvidence.filter((type) => !providedEvidenceTypes.includes(String(type)));
+    const evidenceSummary = expectedEvidence.length
+      ? `gate ${safeText(String(gate?.gate_id || '-'))}: 需要 ${safeText(expectedEvidence.join(', '))}`
+      : '当前阶段未配置闸门证据要求';
+    const acceptBlockedByGate = expectedEvidence.length > 0 && missingEvidence.length > 0;
+    const stage = PM_STAGE_LABELS[String(intent?.taxonomy || '')] || String(intent?.taxonomy || 'unknown');
+    const replayButton = isReplayEligibleStatus(task.status)
+      ? `<button class="btn btn-secondary btn-sm" data-focus-action="replay-task" data-focus-task-id="${safeText(task.id)}" type="button">重访任务</button>`
+      : '';
+    const evidenceGapBlock = `
+      <section class="aser-focus-section">
+        <div class="aser-focus-section-title">证据缺口</div>
+        <div class="aser-focus-line">${evidenceSummary}</div>
+        <div class="aser-focus-line">已提交：${safeText(providedEvidenceTypes.join(', ') || '-')}</div>
+        <div class="aser-evidence-gap-row">
+          ${missingEvidence.length
+    ? missingEvidence.map((item) => `<span class="aser-evidence-chip missing">${safeText(item)}</span>`).join('')
+    : '<span class="aser-evidence-chip done">证据齐全</span>'}
+        </div>
+      </section>
+    `;
+    const focusSections = `
+      <section class="aser-focus-section">
+        <div class="aser-focus-section-title">上下文</div>
+        <div class="aser-focus-line">source: ${safeText(state.focusedEntity.source || '-')}</div>
+        <div class="aser-focus-line">stage: ${safeText(stage)}</div>
+        <div class="aser-focus-line">status: ${safeText(task.status || '-')}</div>
+        <div class="aser-focus-line">owner: ${safeText(task.owner_role || '-')} | agent: ${safeText(task.preferred_agent || '-')}</div>
+        <div class="aser-focus-line">thread: parent ${safeText(task.parent || 'none')} | children ${safeText(String(children.length))} | related ${safeText(String(related.length))}</div>
+      </section>
+      <section class="aser-focus-section">
+        <div class="aser-focus-section-title">执行证据</div>
+        <div class="aser-focus-line">acceptance: ${safeText(task.acceptance_criteria || '-')}</div>
+        <div class="aser-focus-line">evaluation_policy: ${safeText(task.evaluation_policy || '-')}</div>
+        <div class="aser-focus-line">artifacts: ${safeText(String(artifacts.length))}</div>
+        <div class="aser-focus-line">evaluations: ${safeText(String(evaluations.length))}</div>
+        <div class="aser-focus-line">source_event: ${safeText(sourceEvent?.type || '-')} | at ${safeText(formatDateTime(sourceEvent?.timestamp || sourceEvent?.created_at))}</div>
+        <div class="aser-focus-line">last_evaluation: ${safeText(lastEvaluation ? `${lastEvaluation.decision} by ${lastEvaluation.evaluator}` : '-')}</div>
+      </section>
+      ${evidenceGapBlock}
+    `;
+    detail.innerHTML = `
+      <div class="aser-focus-title">${safeText(task.title || task.id)}</div>
+      ${focusSections}
+      <div class="aser-inline-actions">
+        ${replayButton}
+        <button class="btn btn-secondary btn-sm" data-focus-action="loop-clarify" data-focus-task-id="${safeText(task.id)}" type="button">发起澄清回路</button>
+        <button class="btn btn-secondary btn-sm" data-focus-action="loop-escalate" data-focus-task-id="${safeText(task.id)}" type="button">发起上升回路</button>
+        <button class="btn btn-secondary btn-sm" data-focus-action="add-artifact" data-focus-task-id="${safeText(task.id)}" type="button">添加产物</button>
+        <button class="btn btn-secondary btn-sm" data-focus-action="eval-accept" data-focus-task-id="${safeText(task.id)}" type="button" ${acceptBlockedByGate ? 'disabled' : ''} title="${acceptBlockedByGate ? '缺少闸门证据，无法直接通过' : ''}">评价通过</button>
+        <button class="btn btn-secondary btn-sm" data-focus-action="eval-revise" data-focus-task-id="${safeText(task.id)}" type="button">评价修订</button>
+      </div>
+    `;
+  }
+
+  function renderAll() {
+    renderControls();
+    renderSummary();
+    renderProtocolPresetSelectors();
+    renderDemoPanel();
+    renderProjectList();
+    renderProjectSummary();
+    renderProtocolVisual();
+    renderPmBoard();
+    renderThreadSummary();
+    renderGovernanceAdvice();
+    renderModePanels();
+    renderFocusDetail();
+  }
+
+  async function deleteProject(projectId) {
+    if (state.readonly || !state.hasAccess || !projectId) return;
+    const hit = state.projects.find((row) => String(row.id) === String(projectId));
+    const ok = window.confirm(`确认删除 Project「${hit?.name || projectId}」？\n该操作不可恢复。`);
+    if (!ok) return;
+    await apiRequest(`${API_BASE}/aser-runtime/projects/${projectId}`, { method: 'DELETE' });
+    if (String(state.selectedProjectId) === String(projectId)) {
+      state.selectedProjectId = '';
+      state.focusedEntity = null;
+    }
+    if (typeof options.assignProjectTeam === 'function') {
+      options.assignProjectTeam(projectId, '');
+    }
+    await loadProjects();
+  }
+
+  async function loadProjectDetail(projectId) {
+    if (!projectId) {
+      state.selectedProject = null;
+      state.selectedProjectState = null;
+      state.selectedProtocol = null;
+      state.focusedEntity = null;
+      return;
+    }
+    const [project, projectState] = await Promise.all([
+      apiRequest(`${API_BASE}/aser-runtime/projects/${projectId}`),
+      apiRequest(`${API_BASE}/aser-runtime/projects/${projectId}/state`),
+    ]);
+    state.selectedProject = project || null;
+    state.selectedProjectState = projectState || null;
+    state.pulledTask = null;
+    state.focusedEntity = null;
+    refreshSelectedRunTeam();
+    try {
+      const protocol = await apiRequest(`${API_BASE}/aser-runtime/projects/${projectId}/protocol`);
+      state.selectedProtocol = protocol || null;
+      if (protocol?.id) {
+        const existed = state.protocolPresets.some((row) => String(row.id) === String(protocol.id));
+        if (!existed) state.protocolPresets.push(protocol);
+        state.selectedProtocolPresetId = String(protocol.id);
+      }
+    } catch {
+      state.selectedProtocol = null;
+    }
+  }
+
+  async function loadProjects() {
+    if (!state.hasAccess) {
+      state.projects = [];
+      state.selectedProjectId = '';
+      state.selectedProject = null;
+      state.selectedProjectState = null;
+      state.focusedEntity = null;
+      renderAll();
+      return;
+    }
+    const projects = await apiRequest(`${API_BASE}/aser-runtime/projects`);
+    state.projects = Array.isArray(projects) ? projects : [];
+    if (!state.selectedProjectId && state.projects.length) {
+      state.selectedProjectId = String(state.projects[0].id || '');
+    }
+    if (state.selectedProjectId && !state.projects.some((project) => String(project.id) === String(state.selectedProjectId))) {
+      state.selectedProjectId = state.projects[0] ? String(state.projects[0].id || '') : '';
+    }
+    refreshSelectedRunTeam();
+    await loadProjectDetail(state.selectedProjectId);
+    renderProtocolPresetSelectors();
+    renderAll();
+  }
+
+  async function createProject() {
+    if (state.readonly || !state.hasAccess) return;
+    const nameInput = byId('aser-project-name-input');
+    const descInput = byId('aser-project-description-input');
+    const protocolSelect = byId('aser-create-project-protocol-select');
+    if (!(nameInput instanceof HTMLInputElement)
+      || !(descInput instanceof HTMLTextAreaElement)
+      || !(protocolSelect instanceof HTMLSelectElement)) {
+      return;
+    }
+    const name = nameInput.value.trim();
+    if (!name) {
+      alert('请输入项目名称');
+      return;
+    }
+    const description = descInput.value.trim();
+    const protocolPresetId = String(protocolSelect.value || state.selectedProtocolPresetId || DEFAULT_PROTOCOL_PRESET.id);
+    const created = await apiRequest(`${API_BASE}/aser-runtime/projects`, {
+      method: 'POST',
+      body: JSON.stringify({ name, description }),
+    });
+    const selectedPreset = state.protocolPresets.find((row) => String(row.id) === protocolPresetId) || DEFAULT_PROTOCOL_PRESET;
+    if (created?.id && selectedPreset) {
+      await apiRequest(`${API_BASE}/aser-runtime/projects/${created.id}/protocol`, {
+        method: 'PUT',
+        body: JSON.stringify(selectedPreset),
+      });
+    }
+    nameInput.value = '';
+    descInput.value = '';
+    await loadProjects();
+    if (created?.id) {
+      state.selectedProjectId = String(created.id);
+      await loadProjectDetail(state.selectedProjectId);
+      renderAll();
+    }
+    closeDialog('aser-create-project-dialog');
+  }
+
+  async function injectComplexScenario() {
+    if (state.readonly || !state.hasAccess) return;
+    const selectedPreset = state.protocolPresets.find((row) => String(row.id) === String(state.selectedProtocolPresetId)) || DEFAULT_PROTOCOL_PRESET;
+    const created = await apiRequest(`${API_BASE}/aser-runtime/projects`, {
+      method: 'POST',
+      body: JSON.stringify({
+        name: `Thread 波折场景 ${new Date().toLocaleTimeString()}`,
+        description: '模拟多轮反复：澄清、返工、阻塞、上升、恢复、验收',
+      }),
+    });
+    const projectId = String(created?.id || '');
+    if (!projectId) return;
+    await apiRequest(`${API_BASE}/aser-runtime/projects/${projectId}/protocol`, {
+      method: 'PUT',
+      body: JSON.stringify(selectedPreset),
+    });
+
+    const createByEvent = async (payload) => {
+      const result = await apiRequest(`${API_BASE}/aser-runtime/projects/${projectId}/submit-event`, {
+        method: 'POST',
+        body: JSON.stringify(payload),
+      });
+      return String(result?.task?.id || '');
+    };
+
+    const submitResult = async (taskId, role, actor, input = {}) => {
+      if (!taskId) return;
+      await apiRequest(`${API_BASE}/aser-runtime/projects/${projectId}/tasks/${taskId}/submit-result`, {
+        method: 'POST',
+        body: JSON.stringify({
+          role,
+          actor,
+          artifacts: Array.isArray(input.artifacts) ? input.artifacts : [],
+          mark_blocked: Boolean(input.mark_blocked),
+          blocked_reason: String(input.blocked_reason || ''),
+        }),
+      });
+    };
+
+    const evalTask = async (taskId, decision, evaluator, comments, score = 80) => {
+      if (!taskId) return;
+      await apiRequest(`${API_BASE}/aser-runtime/projects/${projectId}/tasks/${taskId}/evaluations`, {
+        method: 'POST',
+        body: JSON.stringify({
+          evaluator,
+          decision,
+          comments,
+          score,
+        }),
+      });
+    };
+
+    const reqTask = await createByEvent({
+      actor: 'PM Alice',
+      actor_kind: 'human',
+      actor_role: 'product_manager',
+      type: 'requirement_defined',
+      payload: { intent_title: '多渠道支付API需求', task_title: 'T1 需求定义' },
+    });
+    await submitResult(reqTask, 'product_manager', 'PM Alice', {
+      artifacts: [{ type: 'requirement_doc', uri: 'mock://req/v1', summary: '支付成功率SLO与回调约束' }],
+    });
+    await evalTask(reqTask, 'accept', 'PM Alice', '需求通过', 92);
+
+    const designV1 = await createByEvent({
+      actor: 'Architect Bob',
+      actor_kind: 'human',
+      actor_role: 'architect',
+      type: 'design_defined',
+      payload: { intent_title: '架构方案v1', task_title: 'T2 方案设计v1', parent: reqTask, related: [reqTask] },
+    });
+    await submitResult(designV1, 'architect', 'Architect Bob', {
+      artifacts: [{ type: 'design_doc', uri: 'mock://design/v1', summary: '初版架构' }],
+    });
+    await evalTask(designV1, 'revise', 'Reviewer Carol', '幂等策略与重试窗口不充分', 65);
+
+    const clarify1 = await createByEvent({
+      actor: 'DevAgent',
+      actor_kind: 'agent',
+      actor_role: 'developer',
+      type: 'message_posted',
+      payload: { intent_taxonomy: 'clarify_design', intent_title: '澄清重试与幂等', task_title: 'T3 澄清回路#1', parent: designV1, related: [designV1] },
+    });
+    await submitResult(clarify1, 'developer', 'DevAgent', {
+      artifacts: [{ type: 'clarification_note', uri: 'mock://clarify/1', summary: '补充澄清说明' }],
+    });
+    await evalTask(clarify1, 'accept', 'Architect Bob', '澄清通过', 85);
+
+    const designV2 = await createByEvent({
+      actor: 'Architect Bob',
+      actor_kind: 'human',
+      actor_role: 'architect',
+      type: 'design_defined',
+      payload: { intent_title: '架构方案v2', task_title: 'T4 方案设计v2', parent: clarify1, related: [designV1, clarify1] },
+    });
+    await submitResult(designV2, 'architect', 'Architect Bob', {
+      artifacts: [{ type: 'design_doc', uri: 'mock://design/v2', summary: '修订后架构' }],
+    });
+    await evalTask(designV2, 'accept', 'Reviewer Carol', '设计通过', 90);
+
+    const implV1 = await createByEvent({
+      actor: 'DevAgent',
+      actor_kind: 'agent',
+      actor_role: 'developer',
+      type: 'implementation_reported',
+      payload: { intent_title: '实现迭代1', task_title: 'T5 开发实现v1', parent: designV2, related: [designV2] },
+    });
+    await submitResult(implV1, 'developer', 'DevAgent', {
+      artifacts: [{ type: 'pr', uri: 'mock://pr/101', summary: '实现v1' }],
+      mark_blocked: true,
+      blocked_reason: '第三方风控网关超时，联调阻塞',
+    });
+
+    const issue1 = await createByEvent({
+      actor: 'DevAgent',
+      actor_kind: 'agent',
+      actor_role: 'developer',
+      type: 'issue_reported',
+      payload: { intent_taxonomy: 'report_issue', intent_title: '联调阻塞问题', task_title: 'T6 问题记录', parent: implV1, related: [implV1] },
+    });
+    await submitResult(issue1, 'developer', 'DevAgent');
+    await evalTask(issue1, 'accept', 'Reviewer Carol', '问题确认', 84);
+
+    const escalate1 = await createByEvent({
+      actor: 'Reviewer Carol',
+      actor_kind: 'human',
+      actor_role: 'reviewer',
+      type: 'escalation_requested',
+      payload: { intent_taxonomy: 'escalate_issue', intent_title: '上升风险到PM', task_title: 'T7 上升回路', parent: issue1, related: [issue1, implV1] },
+    });
+    await submitResult(escalate1, 'reviewer', 'Reviewer Carol', {
+      artifacts: [{ type: 'risk_summary', uri: 'mock://risk/1', summary: '风险升级记录' }],
+    });
+    await evalTask(escalate1, 'accept', 'PM Alice', '上升已确认并分配资源', 91);
+
+    const implV2 = await createByEvent({
+      actor: 'DevAgent',
+      actor_kind: 'agent',
+      actor_role: 'developer',
+      type: 'implementation_reported',
+      payload: { intent_title: '实现迭代2', task_title: 'T8 开发实现v2', parent: implV1, related: [implV1, escalate1] },
+    });
+    await submitResult(implV2, 'developer', 'DevAgent', {
+      artifacts: [
+        { type: 'pr', uri: 'mock://pr/102', summary: '修复后实现' },
+        { type: 'test_report', uri: 'mock://report/102', summary: '回归测试通过' },
+      ],
+    });
+    await evalTask(implV2, 'accept', 'Reviewer Carol', '实现恢复通过', 94);
+
+    const review = await createByEvent({
+      actor: 'Reviewer Carol',
+      actor_kind: 'human',
+      actor_role: 'reviewer',
+      type: 'review_requested',
+      payload: { intent_title: '最终代码评审', task_title: 'T9 最终评审', parent: implV2, related: [implV2] },
+    });
+    await submitResult(review, 'reviewer', 'Reviewer Carol', {
+      artifacts: [{ type: 'review_record', uri: 'mock://review/9', summary: '最终评审记录' }],
+    });
+    await evalTask(review, 'accept', 'Reviewer Carol', '最终验收通过', 93);
+
+    await loadProjects();
+    state.selectedProjectId = projectId;
+    state.viewMode = 'thread';
+    await loadProjectDetail(projectId);
+    renderAll();
+  }
+
+  function buildDemoSteps(targetTaskId) {
+    const task = findTaskById(targetTaskId);
+    if (!task) return [];
+    const intent = (state.selectedProject?.intents || []).find((row) => String(row.id) === String(task.intent_id));
+    const stage = PM_STAGE_LABELS[String(intent?.taxonomy || '')] || String(intent?.taxonomy || 'unknown');
+    const artifacts = (state.selectedProject?.artifacts || []).filter((row) => row.task_id === task.id);
+    const evaluations = (state.selectedProject?.evaluations || []).filter((row) => row.task_id === task.id);
+    const steps = [
+      { label: `Step 1: 创建任务 (${stage})`, taskId: String(task.id) },
+    ];
+    if (artifacts.length) steps.push({ label: `Step ${steps.length + 1}: 提交执行产物 x${artifacts.length}`, taskId: String(task.id) });
+    if (evaluations.length) steps.push({ label: `Step ${steps.length + 1}: 进入评审 x${evaluations.length}`, taskId: String(task.id) });
+    steps.push({ label: `Step ${steps.length + 1}: 任务完成 (${task.status})`, taskId: String(task.id) });
+    return steps;
+  }
+
+  async function runDemoStep(stepIndex) {
+    if (!state.demo.started || stepIndex < 0 || stepIndex >= state.demo.steps.length) return;
+    if (state.demo.running) return;
+    state.demo.running = true;
+    const startAt = Date.now();
+    try {
+      const step = state.demo.steps[stepIndex];
+      await sleep(280);
+      state.demo.stepIndex = stepIndex;
+      const focusTaskId = String(step.taskId || '');
+      if (focusTaskId) setFocusedTask(String(focusTaskId), state.viewMode);
+      const elapsed = Date.now() - startAt;
+      state.demo.logs.push(`[${new Date().toLocaleTimeString()}] 回放: ${step.label} (${elapsed}ms)`);
+    } finally {
+      state.demo.running = false;
+      renderAll();
+    }
+  }
+
+  async function runDemoNext() {
+    const next = state.demo.stepIndex + 1;
+    if (next >= state.demo.steps.length) return;
+    await runDemoStep(next);
+  }
+
+  async function runDemoAuto() {
+    if (!state.demo.started || state.demo.running) return;
+    state.demo.auto = true;
+    renderAll();
+    while (state.demo.auto && state.demo.stepIndex < state.demo.steps.length - 1) {
+      // Controlled interval to let UI render each phase.
+      await runDemoNext();
+      await sleep(700);
+    }
+    state.demo.auto = false;
+    renderAll();
+  }
+
+  function resetDemo() {
+    state.demo.auto = false;
+    state.demo.running = false;
+    state.demo.started = false;
+    state.demo.stepIndex = -1;
+    state.demo.projectId = '';
+    state.demo.context = {};
+    state.demo.logs = [];
+    state.demo.steps = [];
+    renderAll();
+  }
+
+  function stopDemoAuto() {
+    state.demo.auto = false;
+    renderAll();
+  }
+
+  function startDemo(targetTaskId) {
+    if (!state.selectedProjectId || !state.selectedProject) {
+      alert('请先选择一个项目');
+      return;
+    }
+    const focusTask = targetTaskId ? findTaskById(targetTaskId) : getFocusedTask();
+    if (!focusTask || !isReplayEligibleStatus(focusTask.status)) {
+      alert('请先选择一个已完成任务再重放');
+      return;
+    }
+    state.demo.started = true;
+    state.demo.stepIndex = -1;
+    state.demo.projectId = state.selectedProjectId;
+    state.demo.context = {};
+    state.demo.logs = [];
+    state.demo.steps = buildDemoSteps(String(focusTask.id));
+    if (!state.demo.steps.length) {
+      state.demo.logs.push(`[${new Date().toLocaleTimeString()}] 该任务暂无可重放节点。`);
+    } else {
+      state.demo.logs.push(`[${new Date().toLocaleTimeString()}] 已初始化任务重放：${focusTask.title || focusTask.id}，共 ${state.demo.steps.length} 步`);
+    }
+    renderAll();
+  }
+
+  function assignTeamToSelectedProject() {
+    if (state.readonly || !state.hasAccess || !state.selectedProjectId) return;
+    const teamId = String(state.selectedRunTeamId || '').trim();
+    if (!teamId) {
+      alert('请先选择 Team');
+      return;
+    }
+    if (typeof options.assignProjectTeam === 'function') {
+      options.assignProjectTeam(state.selectedProjectId, teamId);
+    }
+    const team = getTeamById(teamId);
+    if (team) {
+      alert(`已将项目分派给 Team：${team.name}`);
+    }
+    renderAll();
+  }
+
+  async function startRunWithSelectedTeam() {
+    if (state.readonly || !state.hasAccess || !state.selectedProjectId) return;
+    const teamId = String(state.selectedRunTeamId || '').trim();
+    if (!teamId) {
+      alert('请先选择 Team');
+      return;
+    }
+    const team = getTeamById(teamId);
+    if (!team) {
+      alert('所选 Team 不存在，请重新选择');
+      return;
+    }
+    if (typeof options.assignProjectTeam === 'function') {
+      options.assignProjectTeam(state.selectedProjectId, teamId);
+    }
+    await apiRequest(`${API_BASE}/aser-runtime/projects/${state.selectedProjectId}/submit-event`, {
+      method: 'POST',
+      body: JSON.stringify({
+        actor: 'Team Dispatcher',
+        actor_kind: 'human',
+        actor_role: 'product_manager',
+        type: 'requirement_defined',
+        payload: {
+          intent_taxonomy: 'create_requirement',
+          intent_title: `Team dispatch: ${team.name}`,
+          task_title: `启动执行：${team.name}`,
+          source: 'manual_team_selection',
+          team_id: teamId,
+          team_name: team.name,
+          team_agent_ids: Array.isArray(team.agent_ids) ? team.agent_ids : [],
+        },
+      }),
+    });
+    await loadProjects();
+  }
+
+  async function submitEventDriven() {
+    if (state.readonly || !state.hasAccess || !state.selectedProjectId) return;
+    const systemInput = byId('aser-system-input');
+    if (!(systemInput instanceof HTMLTextAreaElement)) {
+      return;
+    }
+    const text = systemInput.value.trim();
+    if (!text) {
+      alert('请输入系统指令');
+      return;
+    }
+    const classified = classifySystemInput(text);
+    if (!classified) return;
+    const result = await apiRequest(`${API_BASE}/aser-runtime/projects/${state.selectedProjectId}/submit-event`, {
+      method: 'POST',
+      body: JSON.stringify({
+        actor: classified.actor,
+        actor_kind: classified.actorKind,
+        actor_role: classified.role,
+        type: classified.type,
+        payload: {
+          user_input: text,
+          raw_input: text,
+          intent_taxonomy: classified.taxonomy,
+          intent_title: text,
+          task_title: text,
+          source: 'system_input',
+        },
+      }),
+    });
+    const violations = Array.isArray(result?.violations) ? result.violations : [];
+    if (violations.length) {
+      alert(`协议校验未通过：${violations.join(', ')}`);
+    }
+    systemInput.value = '';
+    await loadProjects();
+    if (result?.task?.id) setFocusedTask(String(result.task.id), 'chat');
+  }
+
+  async function submitLoopActionFromTask(taskId, kind) {
+    if (state.readonly || !state.hasAccess || !state.selectedProjectId) return;
+    const baseTask = findTaskById(taskId);
+    if (!baseTask) return;
+    const isEscalate = kind === 'escalate';
+    const title = window.prompt(
+      isEscalate
+        ? '输入上升原因（例如：跨团队依赖阻塞）'
+        : '输入澄清问题（例如：支付回调重试策略）',
+      '',
+    ) || '';
+    if (!title.trim()) return;
+    const baseRole = String(baseTask.owner_role || 'developer');
+    const role = isEscalate ? 'reviewer' : baseRole;
+    const actor = role === 'developer'
+      ? 'DevAgent'
+      : role === 'architect'
+        ? 'Architect Bob'
+        : role === 'product_manager'
+          ? 'PM Alice'
+          : 'Reviewer Carol';
+    const actorKind = role === 'developer' ? 'agent' : 'human';
+    const related = [...new Set([String(baseTask.id), ...(Array.isArray(baseTask.related) ? baseTask.related : [])])];
+    const result = await apiRequest(`${API_BASE}/aser-runtime/projects/${state.selectedProjectId}/submit-event`, {
+      method: 'POST',
+      body: JSON.stringify({
+        actor,
+        actor_kind: actorKind,
+        actor_role: role,
+        type: isEscalate ? 'escalation_requested' : 'message_posted',
+        payload: {
+          intent_title: isEscalate ? 'Escalate delivery risk' : 'Clarify design details',
+          task_title: isEscalate ? `上升回路: ${title}` : `澄清回路: ${title}`,
+          intent_taxonomy: isEscalate ? 'escalate_issue' : 'clarify_design',
+          note: title,
+          parent: String(baseTask.id),
+          related,
+        },
+      }),
+    });
+    await loadProjects();
+    if (result?.task?.id) setFocusedTask(String(result.task.id), state.viewMode);
+  }
+
+  async function loadProtocol() {
+    if (!state.selectedProjectId) return;
+    const protocol = await apiRequest(`${API_BASE}/aser-runtime/projects/${state.selectedProjectId}/protocol`);
+    state.selectedProtocol = protocol || null;
+    renderAll();
+  }
+
+  async function saveProtocol() {
+    if (state.readonly || !state.hasAccess || !state.selectedProjectId) return;
+    const protocolInput = byId('aser-protocol-json-input');
+    if (!(protocolInput instanceof HTMLTextAreaElement)) return;
+    let payload = {};
+    try {
+      payload = parseOptionalJsonText(protocolInput.value);
+    } catch (error) {
+      alert(error?.message || error);
+      return;
+    }
+    await apiRequest(`${API_BASE}/aser-runtime/projects/${state.selectedProjectId}/protocol`, {
+      method: 'PUT',
+      body: JSON.stringify(payload),
+    });
+    await loadProjects();
+    if (state.selectedProtocol?.id) state.selectedProtocolPresetId = String(state.selectedProtocol.id);
+    closeDialog('aser-protocol-dialog');
+  }
+
+  async function pullTaskByRole() {
+    if (state.readonly || !state.hasAccess || !state.selectedProjectId) return;
+    const roleSelect = byId('aser-pull-role-select');
+    if (!(roleSelect instanceof HTMLSelectElement)) return;
+    const role = String(roleSelect.value || '').trim();
+    if (!role) return;
+    const pulled = await apiRequest(`${API_BASE}/aser-runtime/projects/${state.selectedProjectId}/pull-task?role=${encodeURIComponent(role)}`);
+    state.pulledTask = pulled || null;
+    if (state.pulledTask?.task?.id) {
+      setFocusedTask(String(state.pulledTask.task.id), 'chat');
+      return;
+    }
+    renderAll();
+  }
+
+  async function submitPulledTaskResult() {
+    if (!state.pulledTask?.task?.id || !state.selectedProjectId) return;
+    const taskId = state.pulledTask.task.id;
+    const role = state.pulledTask.task.owner_role || 'developer';
+    const uri = window.prompt('提交执行结果 artifact.uri（可空）', '') || '';
+    const artifacts = uri
+      ? [{ type: 'execution_report', uri, summary: 'submitted from pull panel' }]
+      : [];
+    await apiRequest(`${API_BASE}/aser-runtime/projects/${state.selectedProjectId}/tasks/${taskId}/submit-result`, {
+      method: 'POST',
+      body: JSON.stringify({
+        role,
+        actor: role,
+        artifacts,
+      }),
+    });
+    await loadProjects();
+  }
+
+  async function addTaskArtifact(taskId) {
+    const type = window.prompt('artifact.type（例如 test_report）', 'test_report');
+    if (!type) return;
+    const uri = window.prompt('artifact.uri（例如 https://ci/report/123）', '');
+    if (!uri) return;
+    const summary = window.prompt('artifact.summary（可选）', '') || '';
+    await apiRequest(`${API_BASE}/aser-runtime/projects/${state.selectedProjectId}/tasks/${taskId}/artifacts`, {
+      method: 'POST',
+      body: JSON.stringify({ type, uri, summary }),
+    });
+    await loadProjects();
+    setFocusedTask(taskId, state.viewMode);
+  }
+
+  async function evaluateTask(taskId, decision) {
+    const evaluator = window.prompt('evaluator（例如 QA Lead）', 'QA Lead');
+    if (!evaluator) return;
+    const scoreRaw = window.prompt('score（0-100，可选）', '80') || '0';
+    const comments = window.prompt('comments（可选）', '') || '';
+    const result = await apiRequest(`${API_BASE}/aser-runtime/projects/${state.selectedProjectId}/tasks/${taskId}/evaluations`, {
+      method: 'POST',
+      body: JSON.stringify({
+        evaluator,
+        decision,
+        score: Number(scoreRaw || 0),
+        comments,
+      }),
+    });
+    if (decision === 'accept' && String(result?.decision || '') !== 'accept') {
+      alert(`质量闸门拦截：本次评价已自动降级为 ${String(result?.decision || 'revise')}，请先补齐证据。`);
+    }
+    await loadProjects();
+    setFocusedTask(taskId, state.viewMode);
+  }
+
+  function bindEvents() {
+    byId('aser-open-create-project-dialog-btn')?.addEventListener('click', () => {
+      renderProtocolPresetSelectors();
+      openDialog('aser-create-project-dialog');
+    });
+    byId('aser-open-protocol-dialog-btn')?.addEventListener('click', async () => {
+      try {
+        await loadProtocol();
+        openDialog('aser-protocol-dialog');
+      } catch (error) {
+        alert(`加载 Protocol 失败: ${error?.message || error}`);
+      }
+    });
+    byId('aser-cancel-create-project-dialog-btn')?.addEventListener('click', () => closeDialog('aser-create-project-dialog'));
+    byId('aser-cancel-protocol-dialog-btn')?.addEventListener('click', () => closeDialog('aser-protocol-dialog'));
+
+    byId('aser-create-project-btn')?.addEventListener('click', () => {
+      createProject().catch((error) => alert(`创建 ASER 项目失败: ${error?.message || error}`));
+    });
+    byId('aser-load-complex-scenario-btn')?.addEventListener('click', () => {
+      injectComplexScenario().catch((error) => alert(`注入复杂场景失败: ${error?.message || error}`));
+    });
+    byId('aser-protocol-preset-select')?.addEventListener('change', (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLSelectElement)) return;
+      state.selectedProtocolPresetId = String(target.value || DEFAULT_PROTOCOL_PRESET.id);
+      const next = state.projects.find((project) => String(project?.protocol?.id || '') === state.selectedProtocolPresetId);
+      state.selectedProjectId = next ? String(next.id || '') : '';
+      state.projectListPage = 1;
+      loadProjectDetail(state.selectedProjectId).then(() => renderAll()).catch(() => renderAll());
+    });
+    byId('aser-create-project-protocol-select')?.addEventListener('change', (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLSelectElement)) return;
+      state.selectedProtocolPresetId = String(target.value || DEFAULT_PROTOCOL_PRESET.id);
+      renderAll();
+    });
+
+    byId('aser-project-list')?.addEventListener('click', (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLElement)) return;
+      const deleteBtn = target.closest('[data-aser-project-delete-id]');
+      if (deleteBtn instanceof HTMLElement) {
+        const projectId = String(deleteBtn.dataset.aserProjectDeleteId || '').trim();
+        if (!projectId) return;
+        deleteProject(projectId).catch((error) => alert(`删除 ASER 项目失败: ${error?.message || error}`));
+        return;
+      }
+      const openBtn = target.closest('[data-aser-project-open-id]');
+      if (!(openBtn instanceof HTMLElement)) return;
+      const projectId = String(openBtn.dataset.aserProjectOpenId || '').trim();
+      if (!projectId) return;
+      state.selectedProjectId = projectId;
+      loadProjectDetail(projectId).then(() => renderAll()).catch((error) => alert(`加载 ASER 项目详情失败: ${error?.message || error}`));
+    });
+    byId('aser-project-list-pager')?.addEventListener('click', (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLElement)) return;
+      const btn = target.closest('[data-aser-project-page-action]');
+      if (!(btn instanceof HTMLElement)) return;
+      const action = String(btn.dataset.aserProjectPageAction || '');
+      if (action === 'prev') state.projectListPage = Math.max(1, Number(state.projectListPage || 1) - 1);
+      if (action === 'next') state.projectListPage = Number(state.projectListPage || 1) + 1;
+      renderProjectList();
+    });
+
+    byId('aser-submit-event-btn')?.addEventListener('click', () => {
+      submitEventDriven().catch((error) => alert(`提交事件失败: ${error?.message || error}`));
+    });
+    byId('aser-run-team-select')?.addEventListener('change', (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLSelectElement)) return;
+      state.selectedRunTeamId = String(target.value || '').trim();
+      renderControls();
+    });
+    byId('aser-assign-team-btn')?.addEventListener('click', () => assignTeamToSelectedProject());
+    byId('aser-start-run-btn')?.addEventListener('click', () => {
+      startRunWithSelectedTeam().catch((error) => alert(`启动执行失败: ${error?.message || error}`));
+    });
+    byId('aser-demo-start-btn')?.addEventListener('click', () => startDemo());
+    byId('aser-demo-next-btn')?.addEventListener('click', () => {
+      runDemoNext().catch((error) => alert(`演示下一步失败: ${error?.message || error}`));
+    });
+    byId('aser-demo-auto-btn')?.addEventListener('click', () => {
+      runDemoAuto().catch((error) => alert(`自动演示失败: ${error?.message || error}`));
+    });
+    byId('aser-demo-stop-btn')?.addEventListener('click', () => stopDemoAuto());
+    byId('aser-demo-reset-btn')?.addEventListener('click', () => resetDemo());
+    byId('aser-demo-steps')?.addEventListener('click', (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLElement)) return;
+      const row = target.closest('[data-aser-demo-step-index]');
+      if (!(row instanceof HTMLElement)) return;
+      const stepIndex = Number(row.dataset.aserDemoStepIndex || -1);
+      if (!Number.isInteger(stepIndex) || stepIndex < 0 || stepIndex > state.demo.stepIndex) return;
+      state.demo.logs.push(`[${new Date().toLocaleTimeString()}] 回看: ${state.demo.steps[stepIndex]?.label || stepIndex}`);
+      renderAll();
+    });
+    byId('aser-load-protocol-btn')?.addEventListener('click', () => {
+      loadProtocol().catch((error) => alert(`加载 Protocol 失败: ${error?.message || error}`));
+    });
+    byId('aser-save-protocol-btn')?.addEventListener('click', () => {
+      saveProtocol().catch((error) => alert(`保存 Protocol 失败: ${error?.message || error}`));
+    });
+    byId('aser-view-mode-chat-btn')?.addEventListener('click', () => {
+      state.viewMode = 'chat';
+      renderAll();
+    });
+    byId('aser-view-mode-graph-btn')?.addEventListener('click', () => {
+      state.viewMode = 'graph';
+      renderAll();
+    });
+    byId('aser-view-mode-thread-btn')?.addEventListener('click', () => {
+      state.viewMode = 'thread';
+      renderAll();
+    });
+    byId('aser-thread-filter-select')?.addEventListener('change', (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLSelectElement)) return;
+      state.threadFilter = String(target.value || 'all');
+      renderAll();
+    });
+    byId('aser-protocol-view-graph-btn')?.addEventListener('click', () => {
+      state.protocolViewMode = 'graph';
+      renderAll();
+    });
+    byId('aser-protocol-view-text-btn')?.addEventListener('click', () => {
+      state.protocolViewMode = 'text';
+      renderAll();
+    });
+    byId('aser-protocol-expand-btn')?.addEventListener('click', () => {
+      renderProtocolVisual();
+      openDialog('aser-protocol-flow-dialog');
+    });
+    byId('aser-close-protocol-flow-dialog-btn')?.addEventListener('click', () => closeDialog('aser-protocol-flow-dialog'));
+    byId('aser-protocol-coverage-toggle')?.addEventListener('change', (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLInputElement)) return;
+      state.protocolCoverageEnabled = Boolean(target.checked);
+      renderAll();
+    });
+
+    byId('aser-chat-process-list')?.addEventListener('click', (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLElement)) return;
+      const card = target.closest('[data-aser-chat-task-id]');
+      if (!(card instanceof HTMLElement)) return;
+      const taskId = String(card.dataset.aserChatTaskId || '').trim();
+      if (!taskId) return;
+      setFocusedTask(taskId, 'chat');
+    });
+    byId('aser-task-graph')?.addEventListener('click', (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLElement)) return;
+      const node = target.closest('[data-aser-graph-task-id]');
+      if (!(node instanceof HTMLElement)) return;
+      const taskId = String(node.dataset.aserGraphTaskId || '').trim();
+      if (!taskId) return;
+      setFocusedTask(taskId, 'graph');
+    });
+    byId('aser-task-thread')?.addEventListener('click', (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLElement)) return;
+      const row = target.closest('[data-aser-thread-task-id]');
+      if (!(row instanceof HTMLElement)) return;
+      const taskId = String(row.dataset.aserThreadTaskId || '').trim();
+      if (!taskId) return;
+      setFocusedTask(taskId, 'thread');
+    });
+    byId('aser-thread-summary')?.addEventListener('click', (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLElement)) return;
+      const row = target.closest('[data-aser-thread-root-id]');
+      if (!(row instanceof HTMLElement)) return;
+      const taskId = String(row.dataset.aserThreadRootId || '').trim();
+      if (!taskId) return;
+      state.viewMode = 'thread';
+      setFocusedTask(taskId, 'thread');
+    });
+    byId('aser-focus-detail')?.addEventListener('click', (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLElement)) return;
+      const action = String(target.dataset.focusAction || '').trim();
+      const taskId = String(target.dataset.focusTaskId || '').trim();
+      if (!action || !taskId) return;
+      if (action === 'add-artifact') {
+        addTaskArtifact(taskId).catch((error) => alert(`添加产物失败: ${error?.message || error}`));
+        return;
+      }
+      if (action === 'replay-task') {
+        startDemo(taskId);
+        return;
+      }
+      if (action === 'loop-clarify') {
+        submitLoopActionFromTask(taskId, 'clarify').catch((error) => alert(`发起澄清回路失败: ${error?.message || error}`));
+        return;
+      }
+      if (action === 'loop-escalate') {
+        submitLoopActionFromTask(taskId, 'escalate').catch((error) => alert(`发起上升回路失败: ${error?.message || error}`));
+        return;
+      }
+      if (action === 'eval-accept') {
+        evaluateTask(taskId, 'accept').catch((error) => alert(`任务评价失败: ${error?.message || error}`));
+        return;
+      }
+      if (action === 'eval-revise') {
+        evaluateTask(taskId, 'revise').catch((error) => alert(`任务评价失败: ${error?.message || error}`));
+      }
+    });
+  }
+
+  function mount() {
+    bindEvents();
+    renderAll();
+  }
+
+  function refreshTeamContext() {
+    refreshSelectedRunTeam();
+    renderAll();
+  }
+
+  return {
+    mount,
+    setAccessContext,
+    loadProjects,
+    refreshTeamContext,
+  };
+}