claude-coding-flow 1.0.0 → 1.1.0

package/dashboard/static/app.js

@@ -0,0 +1,639 @@
+// ═══════════════════════════════════════════
+//  Flow Dashboard — app.js
+// ═══════════════════════════════════════════
+
+const PHASE_ICONS = {
+  pending: "schedule", running: "autorenew",
+  completed: "check_circle", failed: "error",
+};
+
+const TAB_CONFIG = {
+  "doc-gen": { color: "amber", label: "需求分析" },
+  "code-gen": { color: "blue",  label: "代码开发" },
+  "bug-fix":  { color: "red",   label: "Bug修复" },
+};
+
+let currentTab = "doc-gen";
+let _ctxTaskId = null;
+let _ctxModuleId = null;
+let _ctxTabType = null;
+
+// ── Tab Switching ──
+
+document.querySelectorAll(".nav-item").forEach(item => {
+  item.addEventListener("click", () => switchTab(item.dataset.tab));
+});
+
+function switchTab(tab) {
+  currentTab = tab;
+  document.querySelectorAll(".nav-item").forEach(n => n.classList.remove("active"));
+  document.querySelector(`.nav-item[data-tab="${tab}"]`).classList.add("active");
+  document.querySelectorAll(".tab-panel").forEach(p => p.classList.remove("active"));
+  document.getElementById(`tab-${tab}`).classList.add("active");
+  loadTabContent(tab);
+}
+
+async function loadTabContent(tab) {
+  const container = document.getElementById(`content-${tab}`);
+  try {
+    const res = await fetch(`/api/modules/type/${tab}`);
+    const modules = await res.json();
+
+    // Update sidebar count
+    const countEl = document.getElementById(`count-${tab}`);
+    if (countEl) {
+      const total = modules.reduce((s, m) => s + (m.task_count || 0), 0);
+      countEl.textContent = total;
+    }
+
+    if (modules.length === 0) {
+      container.innerHTML = `<div class="empty-state"><span class="material-icons">inbox</span><p>暂无${TAB_CONFIG[tab].label}任务</p></div>`;
+      return;
+    }
+
+    const detailed = await Promise.all(
+      modules.map(m => fetch(`/api/modules/${m.id}`).then(r => r.json()))
+    );
+
+    if (tab === "doc-gen") await renderDocGen(container, detailed);
+    else if (tab === "code-gen") await renderCodeGen(container, detailed);
+    else if (tab === "bug-fix") renderBugFix(container, detailed);
+  } catch (e) {
+    console.error(`Failed to load ${tab}`, e);
+    container.innerHTML = `<div class="empty-state"><span class="material-icons">error</span><p>加载失败</p></div>`;
+  }
+}
+
+// ── Shared: Module Rendering ──
+
+function renderModuleShell(mod, innerHtml, color) {
+  const tasks = mod.tasks || [];
+  return `<div class="module-section">
+    <div class="module-header" data-module-id="${mod.id}" onclick="toggleModule('${mod.id}')">
+      <div class="module-left">
+        <span class="material-icons module-expand" id="expand-${mod.id}">expand_more</span>
+        <span class="module-name">${esc(mod.name)}</span>
+        <span class="module-id">${mod.id}</span>
+        <span class="module-count">${tasks.length} 个任务</span>
+      </div>
+    </div>
+    <div class="module-drawer" id="drawer-${mod.id}">
+      ${innerHtml}
+    </div>
+  </div>`;
+}
+
+function toggleModule(moduleId) {
+  const drawer = document.getElementById("drawer-" + moduleId);
+  const icon = document.getElementById("expand-" + moduleId);
+  if (drawer) {
+    drawer.classList.toggle("open");
+    icon.classList.toggle("open");
+  }
+}
+
+// ── Task Chain Rendering ──
+
+async function renderTaskChain(tasks, tabType) {
+  if (tasks.length <= 1 && tabType !== "code-gen") return "";
+  const taskMap = {};
+  tasks.forEach(t => taskMap[t.id] = t);
+  const lines = [];
+
+  // Collect cross-type relations for all tasks
+  const crossMap = {};
+  if (tabType === "code-gen" || tabType === "doc-gen") {
+    const relPromises = tasks.map(t =>
+      fetch(`/api/tasks/${t.id}/cross-relations`).then(r => r.json()).then(data => {
+        if (data.relations && data.relations.length > 0) crossMap[t.id] = data.relations;
+      }).catch(() => {})
+    );
+    await Promise.all(relPromises);
+  }
+
+  const roots = tasks.filter(t => !t.prev_task_id);
+  const visited = new Set();
+
+  for (const root of roots) {
+    let cur = root;
+    while (cur) {
+      if (visited.has(cur.id)) break;
+      visited.add(cur.id);
+      const next = tasks.find(t => t.prev_task_id === cur.id);
+
+      lines.push(`<div class="chain-node">
+        <span class="chain-dot ${cur.status}"></span>
+        <span class="chain-title">${esc(cur.title)}</span>
+        ${_renderCrossBadge(crossMap[cur.id])}
+      </div>`);
+
+      if (next) {
+        lines.push(`<div class="chain-link">
+          <span class="material-icons chain-arrow">arrow_downward</span>
+          <span class="chain-link-label">迭代</span>
+        </div>`);
+      }
+      cur = next;
+    }
+  }
+  // Orphan tasks
+  for (const t of tasks) {
+    if (!visited.has(t.id)) {
+      lines.push(`<div class="chain-node">
+        <span class="chain-dot ${t.status}"></span>
+        <span class="chain-title">${esc(t.title)}</span>
+        ${_renderCrossBadge(crossMap[t.id])}
+      </div>`);
+    }
+  }
+  return `<div class="task-chain">${lines.join("")}</div>`;
+}
+
+function _renderCrossBadge(relations) {
+  if (!relations || relations.length === 0) return "";
+  const badges = relations.map(r => {
+    if (r.type === "based-on") {
+      return `<span class="cross-badge based-on" title="基于 ${r.to_task_title} 的 ${r.artifact}">基于: ${esc(r.to_task_title)} → ${esc(r.artifact)}</span>`;
+    }
+    if (r.type === "used-by") {
+      return `<span class="cross-badge used-by" title="被 ${r.from_task_title} 引用">引用方: ${esc(r.from_task_title)}</span>`;
+    }
+    if (r.type === "traces-to") {
+      return `<span class="cross-badge traces-to" title="溯源至 ${r.to_task_title}">溯源: ${esc(r.to_task_title)}</span>`;
+    }
+    return "";
+  });
+  return badges.join("");
+}
+
+// ── Code-gen Rendering ──
+
+async function renderCodeGen(container, modules) {
+  const parts = [];
+  for (const mod of modules) {
+    const tasks = mod.tasks || [];
+    const chain = await renderTaskChain(tasks, "code-gen");
+    const cards = tasks.map(t => renderCodeGenCard(t)).join("");
+    parts.push(renderModuleShell(mod, chain + cards, "blue"));
+  }
+  container.innerHTML = parts.join("");
+}
+
+function renderCodeGenCard(task) {
+  const phases = (task.phases || []).map(p => {
+    const icon = PHASE_ICONS[p.status] || "schedule";
+    return `<span class="phase-chip ${p.status}"><span class="material-icons">${icon}</span>${p.name}</span>`;
+  }).join("");
+
+  const progress = calcProgress(task);
+
+  return `<div class="task-card" data-id="${task.id}" data-type="code-gen">
+    <div class="task-header" onclick="toggleDetail('${task.id}')">
+      <div>
+        <div class="task-title">${esc(task.title)}</div>
+        <div class="task-meta">${task.id}</div>
+      </div>
+      <div class="task-right">
+        <span class="status-badge ${task.status}">${statusLabel(task.status)}</span>
+      </div>
+    </div>
+    <div class="phases-row">${phases}</div>
+    <div class="progress-bar-wrap"><div class="progress-bar blue ${task.status === 'failed' ? 'failed' : ''}" style="width:${progress}%"></div></div>
+    <div class="task-footer">
+      <span>${task.created_at || ''}</span>
+      <a class="log-toggle" onclick="event.stopPropagation();loadTaskDetail('${task.id}')">日志详情</a>
+    </div>
+    <div class="task-detail-content hidden" id="detail-${task.id}"></div>
+  </div>`;
+}
+
+// ── Doc-gen Rendering ──
+
+async function renderDocGen(container, modules) {
+  const parts = [];
+  for (const mod of modules) {
+    const tasks = mod.tasks || [];
+    const chain = await renderTaskChain(tasks, "doc-gen");
+    const cards = tasks.map(t => renderDocGenCard(t)).join("");
+    parts.push(renderModuleShell(mod, chain + cards, "amber"));
+  }
+  container.innerHTML = parts.join("");
+}
+
+function renderDocGenCard(task) {
+  const reqDoc = task.requirement_doc || "未指定";
+  const sketchFolder = task.sketch_folder || "无";
+  const outputDoc = task.output_doc || "未生成";
+  const imgCount = task._image_count || 0;
+
+  const progress = calcProgress(task);
+
+  return `<div class="task-card" data-id="${task.id}" data-type="doc-gen">
+    <div class="task-header" onclick="toggleDetail('${task.id}')">
+      <div>
+        <div class="task-title">${esc(task.title)}</div>
+        <div class="task-meta">${task.id}</div>
+      </div>
+      <div class="task-right">
+        <span class="status-badge ${task.status}">${statusLabel(task.status)}</span>
+      </div>
+    </div>
+    <div class="artifact-tags">
+      <span class="artifact-tag"><span class="material-icons">article</span>${esc(reqDoc)}</span>
+      <span class="artifact-tag"><span class="material-icons">image</span>${imgCount} 张草图</span>
+      <span class="artifact-tag"><span class="material-icons">auto_awesome</span>${esc(outputDoc)}</span>
+    </div>
+    <div class="progress-bar-wrap"><div class="progress-bar amber" style="width:${progress}%"></div></div>
+    <div class="task-footer">
+      <span>${task.created_at || ''}</span>
+      <a class="log-toggle" onclick="event.stopPropagation();loadTaskDetail('${task.id}')">日志详情</a>
+    </div>
+    <div class="task-detail-content hidden" id="detail-${task.id}"></div>
+  </div>`;
+}
+
+// ── Bug-fix Rendering ──
+
+function renderBugFix(container, modules) {
+  container.innerHTML = modules.map(mod => {
+    const tasks = mod.tasks || [];
+    const cards = tasks.map(t => renderBugFixCard(t)).join("");
+    return renderModuleShell(mod, cards, "red");
+  }).join("");
+}
+
+function renderBugFixCard(task) {
+  const bugStatus = task.bug_status || "unresolved";
+  const resolved = bugStatus === "resolved";
+  const src = task.source_info || {};
+
+  const progress = calcProgress(task);
+  const phases = (task.phases || []).map(p => {
+    const icon = PHASE_ICONS[p.status] || "schedule";
+    return `<span class="phase-chip ${p.status}"><span class="material-icons">${icon}</span>${p.name}</span>`;
+  }).join("");
+
+  let sourceHtml = "";
+  if (src.requirement || src.iteration || src.location) {
+    sourceHtml = `<div class="bug-source">
+      ${src.requirement ? `<span class="bug-source-tag"><span class="material-icons" style="font-size:12px">link</span>需求: ${esc(src.requirement)}</span>` : ""}
+      ${src.iteration ? `<span class="bug-source-tag"><span class="material-icons" style="font-size:12px">history</span>迭代: ${esc(src.iteration)}</span>` : ""}
+      ${src.location ? `<span class="bug-source-tag"><span class="material-icons" style="font-size:12px">place</span>${esc(src.location)}</span>` : ""}
+    </div>`;
+  }
+
+  return `<div class="bug-card" data-id="${task.id}" data-type="bug-fix">
+    <div class="bug-header">
+      <span class="material-icons bug-status-icon ${resolved ? 'resolved' : ''}">${resolved ? 'check_circle' : 'error_outline'}</span>
+      <div class="bug-info">
+        <div class="bug-title">${esc(task.title)}</div>
+        <div class="bug-desc">${esc(task.bug_description || '')}</div>
+        ${sourceHtml}
+      </div>
+      <span class="status-badge ${resolved ? 'resolved' : 'unresolved'}">${resolved ? '已解决' : '未解决'}</span>
+    </div>
+    <div class="phases-row" style="padding-left:44px">${phases}</div>
+    <div class="progress-bar-wrap"><div class="progress-bar red" style="width:${progress}%"></div></div>
+    <div class="bug-footer">
+      <span>${task.id}</span>
+      <span>${task.created_at || ''}</span>
+      <a class="log-toggle" onclick="event.stopPropagation();loadTaskDetail('${task.id}')">日志详情</a>
+    </div>
+    <div class="task-detail-content hidden" id="detail-${task.id}"></div>
+  </div>`;
+}
+
+// ── Task Detail (inline) ──
+
+async function loadTaskDetail(taskId) {
+  const container = document.getElementById("detail-" + taskId);
+  if (!container) return;
+  if (container.dataset.loaded === "true") {
+    container.classList.toggle("hidden");
+    return;
+  }
+  const logRes = await fetch(`/api/tasks/${taskId}/logs`).then(r => r.json());
+  let html = "";
+  if (logRes.text_log) {
+    html += `<div class="log-md-content">${renderDiffMarkers(marked.parse(logRes.text_log))}</div>`;
+  } else {
+    html = '<div class="no-data">暂无日志</div>';
+  }
+  container.innerHTML = html;
+  container.dataset.loaded = "true";
+  container.classList.remove("hidden");
+}
+
+// ── Context Menu ──
+
+document.addEventListener("contextmenu", e => {
+  hideAllCtx();
+
+  // Module header
+  const modHeader = e.target.closest(".module-header");
+  if (modHeader && !e.target.closest(".task-card") && !e.target.closest(".bug-card")) {
+    e.preventDefault();
+    _ctxModuleId = modHeader.dataset.moduleId;
+    showCtx("ctx-module", e.clientX, e.clientY);
+    return;
+  }
+
+  // Code-gen task card
+  const codeCard = e.target.closest(".task-card[data-type='code-gen']");
+  if (codeCard) {
+    e.preventDefault();
+    _ctxTaskId = codeCard.dataset.id;
+    _ctxTabType = "code-gen";
+    showCtx("ctx-code-gen", e.clientX, e.clientY);
+    return;
+  }
+
+  // Doc-gen task card
+  const docCard = e.target.closest(".task-card[data-type='doc-gen']");
+  if (docCard) {
+    e.preventDefault();
+    _ctxTaskId = docCard.dataset.id;
+    _ctxTabType = "doc-gen";
+    showCtx("ctx-doc-gen", e.clientX, e.clientY);
+    return;
+  }
+
+  // Bug-fix card
+  const bugCard = e.target.closest(".bug-card");
+  if (bugCard) {
+    e.preventDefault();
+    _ctxTaskId = bugCard.dataset.id;
+    _ctxTabType = "bug-fix";
+    showCtx("ctx-bug-fix", e.clientX, e.clientY);
+    return;
+  }
+});
+
+document.addEventListener("click", hideAllCtx);
+
+function showCtx(id, x, y) {
+  const menu = document.getElementById(id);
+  menu.classList.remove("hidden");
+  const mw = 200, mh = menu.offsetHeight || 180;
+  if (x + mw > window.innerWidth) x = window.innerWidth - mw - 8;
+  if (y + mh > window.innerHeight) y = window.innerHeight - mh - 8;
+  menu.style.left = x + "px";
+  menu.style.top = y + "px";
+}
+
+function hideAllCtx() {
+  document.querySelectorAll(".ctx-menu").forEach(m => m.classList.add("hidden"));
+}
+
+// ── Context Menu Actions ──
+
+document.querySelectorAll(".ctx-menu").forEach(menu => {
+  menu.addEventListener("click", e => {
+    const item = e.target.closest(".ctx-item");
+    if (!item) return;
+    const action = item.dataset.action;
+
+    if (action === "copy-id" && _ctxTaskId) copyId(_ctxTaskId);
+    else if (action === "copy-module-id" && _ctxModuleId) copyId(_ctxModuleId);
+    else if (action === "view-detail") viewDetail();
+    else if (action === "view-snapshot") viewSnapshot();
+    else if (action === "delete-task") deleteTask();
+    else if (action === "view-req-doc") viewReqDoc();
+    else if (action === "view-images") viewImages();
+    else if (action === "view-dev-doc") viewDevDoc();
+
+    hideAllCtx();
+  });
+});
+
+function copyId(id) {
+  navigator.clipboard.writeText(id)
+    .then(() => showToast("已拷贝: " + id))
+    .catch(() => showToast("拷贝失败"));
+}
+
+async function deleteTask() {
+  if (!_ctxTaskId) return;
+  if (!confirm(`确定删除任务 ${_ctxTaskId}？`)) return;
+  const res = await fetch(`/api/tasks/${_ctxTaskId}`, { method: "DELETE" });
+  if (res.ok) { showToast("已删除"); loadTabContent(currentTab); }
+  else showToast("删除失败");
+}
+
+// ── View Detail Modal ──
+
+async function viewDetail() {
+  if (!_ctxTaskId) return;
+  const logRes = await fetch(`/api/tasks/${_ctxTaskId}/logs`).then(r => r.json());
+  let html = "";
+  if (logRes.text_log) {
+    html = `<div class="log-md-content">${renderDiffMarkers(marked.parse(logRes.text_log))}</div>`;
+  } else {
+    html = '<div class="no-data">暂无日志</div>';
+  }
+  document.getElementById("modal-detail-body").innerHTML = html;
+  openModal("modal-detail");
+}
+
+// ── View Snapshot Modal ──
+
+async function viewSnapshot() {
+  if (!_ctxTaskId) return;
+  const snapshots = await fetch(`/api/tasks/${_ctxTaskId}/snapshots`).then(r => r.json());
+  const body = document.getElementById("modal-snapshot-body");
+
+  if (!snapshots || snapshots.length === 0) {
+    body.innerHTML = '<div class="no-data">暂无代码快照</div>';
+    openModal("modal-snapshot");
+    return;
+  }
+
+  const filesGroup = snapshots.find(s => s.name === "files");
+  const hasDiff = filesGroup && filesGroup.files && filesGroup.files.includes("changes.diff");
+
+  if (hasDiff) {
+    const res = await fetch(`/api/tasks/${_ctxTaskId}/snapshots/files/changes.diff`);
+    if (res.ok) {
+      const data = await res.json();
+      body.innerHTML = renderDiff(data.content || "");
+    } else {
+      body.innerHTML = '<div class="no-data">加载 diff 失败</div>';
+    }
+  } else {
+    const items = snapshots.flatMap(s =>
+      (s.files || []).map(f =>
+        `<div class="snap-file-item" onclick="viewFile('${esc(_ctxTaskId)}','${esc(s.name)}','${esc(f)}')">
+          <span class="material-icons">description</span>${esc(f)}
+        </div>`
+      )
+    ).join("");
+    body.innerHTML = items || '<div class="no-data">无变更文件</div>';
+  }
+  openModal("modal-snapshot");
+}
+
+async function viewFile(taskId, snapName, filepath) {
+  const res = await fetch(`/api/tasks/${taskId}/snapshots/${snapName}/${filepath}`);
+  if (!res.ok) { showToast("加载失败"); return; }
+  const data = await res.json();
+  const content = data.content || "";
+
+  document.getElementById("modal-file-title").textContent = filepath;
+  document.getElementById("modal-file-body").innerHTML = renderFileContent(filepath, content);
+  openModal("modal-file");
+}
+
+// ── Doc-gen: View Requirement Doc ──
+
+async function viewReqDoc() {
+  if (!_ctxTaskId) return;
+  const art = await fetch(`/api/tasks/${_ctxTaskId}/doc-artifacts`).then(r => r.json());
+  if (!art.requirement_doc) { showToast("无需求文档"); return; }
+
+  const res = await fetch(`/api/tasks/${_ctxTaskId}/doc-artifacts/requirement/${art.requirement_doc}`);
+  if (!res.ok) { showToast("加载失败"); return; }
+  const data = await res.json();
+  document.getElementById("modal-file-title").textContent = art.requirement_doc;
+  document.getElementById("modal-file-body").innerHTML = `<div class="log-md-content">${renderDiffMarkers(marked.parse(data.content || ''))}</div>`;
+  openModal("modal-file");
+}
+
+// ── Doc-gen: View Development Doc ──
+
+async function viewDevDoc() {
+  if (!_ctxTaskId) return;
+  const art = await fetch(`/api/tasks/${_ctxTaskId}/doc-artifacts`).then(r => r.json());
+  if (!art.develop_doc) { showToast("无开发文档"); return; }
+
+  const res = await fetch(`/api/tasks/${_ctxTaskId}/doc-artifacts/develop/${art.develop_doc}`);
+  if (!res.ok) { showToast("加载失败"); return; }
+  const data = await res.json();
+  document.getElementById("modal-file-title").textContent = art.develop_doc;
+  document.getElementById("modal-file-body").innerHTML = `<div class="log-md-content">${renderDiffMarkers(marked.parse(data.content || ''))}</div>`;
+  openModal("modal-file");
+}
+
+// ── Doc-gen: View Sketch Images ──
+
+async function viewImages() {
+  if (!_ctxTaskId) return;
+  const art = await fetch(`/api/tasks/${_ctxTaskId}/doc-artifacts`).then(r => r.json());
+  const body = document.getElementById("modal-gallery-body");
+
+  if (!art.images || art.images.length === 0) {
+    body.innerHTML = '<div class="no-data">暂无草图图片</div>';
+  } else {
+    body.innerHTML = `<div class="image-grid">
+      ${art.images.map(img =>
+        `<div class="image-thumb" onclick="openLightbox('${esc(_ctxTaskId)}','${esc(img)}')">
+          <img src="/api/tasks/${_ctxTaskId}/doc-artifacts/images/${img}" alt="${esc(img)}" loading="lazy">
+          <span class="image-name">${esc(img)}</span>
+        </div>`
+      ).join("")}
+    </div>`;
+  }
+  openModal("modal-gallery");
+}
+
+function openLightbox(taskId, imgName) {
+  document.getElementById("lightbox-img").src = `/api/tasks/${taskId}/doc-artifacts/images/${imgName}`;
+  document.getElementById("lightbox-name").textContent = imgName;
+  openModal("modal-lightbox");
+}
+
+// ── Diff / File Rendering ──
+
+function renderDiff(content) {
+  const lines = content.split("\n");
+  const html = lines.map(line => {
+    let cls = "diff-line";
+    if (line.startsWith("+++ ") || line.startsWith("--- ")) cls += " diff-header";
+    else if (line.startsWith("@@")) cls += " diff-hunk";
+    else if (line.startsWith("+")) cls += " diff-add";
+    else if (line.startsWith("-")) cls += " diff-del";
+    return `<div class="${cls}">${esc(line)}</div>`;
+  }).join("");
+  return `<div class="diff-viewer">${html}</div>`;
+}
+
+function renderFileContent(filepath, content) {
+  const ext = filepath.split(".").pop().toLowerCase();
+  const langMap = {
+    java: "Java", kt: "Kotlin", py: "Python", js: "JavaScript",
+    ts: "TypeScript", html: "HTML", css: "CSS", json: "JSON",
+    xml: "XML", yml: "YAML", md: "Markdown",
+    go: "Go", rs: "Rust", swift: "Swift", dart: "Dart",
+  };
+  const lang = langMap[ext] || "";
+  const lines = content.split("\n").map((line, i) =>
+    `<div class="code-line"><span class="code-line-no">${i + 1}</span>${esc(line)}</div>`
+  ).join("");
+  return `<div class="file-header">${esc(filepath)}${lang ? ` <span class="code-lang">${lang}</span>` : ""}</div><div class="code-viewer">${lines}</div>`;
+}
+
+// ── Modal Helpers ──
+
+function openModal(id) {
+  document.getElementById(id).classList.remove("hidden");
+}
+
+function closeModal(id) {
+  document.getElementById(id).classList.add("hidden");
+}
+
+document.querySelectorAll(".modal-overlay").forEach(el => {
+  el.addEventListener("click", e => {
+    if (e.target === el) el.classList.add("hidden");
+  });
+});
+
+document.addEventListener("keydown", e => {
+  if (e.key === "Escape") {
+    document.querySelectorAll(".modal-overlay:not(.hidden)").forEach(el => el.classList.add("hidden"));
+  }
+});
+
+// ── Utilities ──
+
+function renderDiffMarkers(html) {
+  return html.replace(/\[(新增|修改|删除)\]/g, '<span style="color:red">[$1]</span>');
+}
+
+function esc(text) {
+  const div = document.createElement("div");
+  div.textContent = text || "";
+  return div.innerHTML;
+}
+
+function statusLabel(status) {
+  return { running: "运行中", completed: "已完成", failed: "失败" }[status] || status;
+}
+
+function calcProgress(task) {
+  if (!task.phases || task.phases.length === 0) return 0;
+  const done = task.phases.filter(p => p.status === "completed").length;
+  return Math.round((done / task.phases.length) * 100);
+}
+
+function showToast(msg) {
+  const toast = document.getElementById("toast");
+  toast.textContent = msg;
+  toast.classList.remove("hidden");
+  clearTimeout(toast._timer);
+  toast._timer = setTimeout(() => toast.classList.add("hidden"), 2200);
+}
+
+// ── Init ──
+
+loadTabContent("doc-gen");
+
+// Also preload counts for other tabs
+["code-gen", "bug-fix"].forEach(tab => {
+  fetch(`/api/modules/type/${tab}`)
+    .then(r => r.json())
+    .then(modules => {
+      const el = document.getElementById(`count-${tab}`);
+      if (el) el.textContent = modules.reduce((s, m) => s + (m.task_count || 0), 0);
+    })
+    .catch(() => {});
+});