claude-coding-flow 1.3.2 → 1.4.1

package/dashboard/static/app.js

@@ -16,7 +16,10 @@ const TAB_CONFIG = {
 let currentTab = "doc-gen";
 let _ctxTaskId = null;
 let _ctxModuleId = null;
+let _ctxModuleType = "";
+let _ctxModuleTaskCount = 0;
 let _ctxTabType = null;
+let _editingFilePath = null;
 
 // ── Tab Switching ──
 
@@ -68,8 +71,9 @@ async function loadTabContent(tab) {
 
 function renderModuleShell(mod, innerHtml, color) {
   const tasks = mod.tasks || [];
+  const modType = mod.type || "code-gen";
   return `<div class="module-section">
-    <div class="module-header" data-module-id="${mod.id}" onclick="toggleModule('${mod.id}')">
+    <div class="module-header" data-module-id="${mod.id}" data-type="${modType}" data-task-count="${tasks.length}" 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>
@@ -111,7 +115,15 @@ async function renderTaskChain(tasks, tabType) {
     await Promise.all(relPromises);
   }
 
-  const roots = tasks.filter(t => !t.prev_task_id);
+  // Build chain parent: prev_task_id first, then related_task_id (for doc-gen iterations)
+  const taskIds = new Set(tasks.map(t => t.id));
+  function chainParent(t) {
+    if (t.prev_task_id && taskIds.has(t.prev_task_id)) return { id: t.prev_task_id, label: "迭代" };
+    if (t.related_task_id && taskIds.has(t.related_task_id)) return { id: t.related_task_id, label: "迭代" };
+    return null;
+  }
+
+  const roots = tasks.filter(t => !chainParent(t));
   const visited = new Set();
 
   for (const root of roots) {
@@ -119,7 +131,9 @@ async function renderTaskChain(tasks, tabType) {
     while (cur) {
       if (visited.has(cur.id)) break;
       visited.add(cur.id);
-      const next = tasks.find(t => t.prev_task_id === cur.id);
+      const nextInfo = tasks.map(t => ({ task: t, parent: chainParent(t) })).find(x => x.parent && x.parent.id === cur.id);
+      const next = nextInfo ? nextInfo.task : null;
+      const linkLabel = nextInfo ? nextInfo.parent.label : "迭代";
 
       lines.push(`<div class="chain-node">
         <span class="chain-dot ${cur.status}"></span>
@@ -130,7 +144,7 @@ async function renderTaskChain(tasks, tabType) {
       if (next) {
         lines.push(`<div class="chain-link">
           <span class="material-icons chain-arrow">arrow_downward</span>
-          <span class="chain-link-label">迭代</span>
+          <span class="chain-link-label">${linkLabel}</span>
         </div>`);
       }
       cur = next;
@@ -149,7 +163,7 @@ async function renderTaskChain(tasks, tabType) {
   return `<div class="task-chain">${lines.join("")}</div>`;
 }
 
-function _renderCrossBadge(relations) {
+function _renderCrossBadge(relations, tabType) {
   if (!relations || relations.length === 0) return "";
   const badges = relations.map(r => {
     if (r.type === "based-on") {
@@ -187,8 +201,14 @@ function renderCodeGenCard(task) {
 
   const progress = calcProgress(task);
 
+  const bugBadges = (task.bug_fix_details || []).map(b => {
+    const statusText = b.status === "resolved" ? "已解决" : "未解决";
+    const cls = b.status === "resolved" ? "resolved" : "unresolved";
+    return `<span class="cross-badge traces-to" title="Bug: ${esc(b.title)} (${statusText})">Bug: ${esc(b.title)} (${statusText})</span>`;
+  }).join("");
+
   return `<div class="task-card" data-id="${task.id}" data-type="code-gen">
-    <div class="task-header" onclick="toggleDetail('${task.id}')">
+    <div class="task-header" onclick="loadTaskDetail('${task.id}')">
       <div>
         <div class="task-title">${esc(task.title)}</div>
         <div class="task-meta">${task.id}</div>
@@ -197,11 +217,11 @@ function renderCodeGenCard(task) {
         <span class="status-badge ${task.status}">${statusLabel(task.status)}</span>
       </div>
     </div>
+    ${bugBadges ? `<div style="padding:0 20px 4px">${bugBadges}</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>`;
@@ -225,11 +245,12 @@ function renderDocGenCard(task) {
   const sketchFolder = task.sketch_folder || "无";
   const outputDoc = task.output_doc || "未生成";
   const imgCount = task._image_count || 0;
+  const figmaCount = task._figma_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 class="task-header" onclick="loadTaskDetail('${task.id}')">
       <div>
         <div class="task-title">${esc(task.title)}</div>
         <div class="task-meta">${task.id}</div>
@@ -240,13 +261,14 @@ function renderDocGenCard(task) {
     </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>
+      ${imgCount > 0 ? `<span class="artifact-tag"><span class="material-icons">image</span>${imgCount} 张图片</span>` : ""}
+      ${figmaCount > 0 ? `<span class="artifact-tag figma"><span class="material-icons">design_services</span>${figmaCount} 个 Figma</span>` : ""}
+      ${imgCount === 0 && figmaCount === 0 ? `<span class="artifact-tag"><span class="material-icons">image</span>无图片</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>`;
@@ -283,7 +305,7 @@ function renderBugFixCard(task) {
   }
 
   return `<div class="bug-card" data-id="${task.id}" data-type="bug-fix">
-    <div class="bug-header">
+    <div class="bug-header" onclick="loadTaskDetail('${task.id}')" style="cursor:pointer">
       <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>
@@ -292,12 +314,11 @@ function renderBugFixCard(task) {
       </div>
       <span class="status-badge ${resolved ? 'resolved' : 'unresolved'}">${resolved ? '已解决' : '未解决'}</span>
     </div>
-    <div class="phases-row" style="padding-left:44px">${phases}</div>
+    <div class="phases-row" style="padding-left:52px">${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>`;
@@ -334,6 +355,12 @@ document.addEventListener("contextmenu", e => {
   if (modHeader && !e.target.closest(".task-card") && !e.target.closest(".bug-card")) {
     e.preventDefault();
     _ctxModuleId = modHeader.dataset.moduleId;
+    _ctxModuleType = modHeader.dataset.type || "";
+    _ctxModuleTaskCount = parseInt(modHeader.dataset.taskCount || "0");
+    // doc-gen 不显示菜单，有任务的模块也不显示
+    if (_ctxModuleType === "doc-gen" || _ctxModuleTaskCount > 0) {
+      return;
+    }
     showCtx("ctx-module", e.clientX, e.clientY);
     return;
   }
@@ -398,6 +425,7 @@ document.querySelectorAll(".ctx-menu").forEach(menu => {
     else if (action === "view-detail") viewDetail();
     else if (action === "view-snapshot") viewSnapshot();
     else if (action === "delete-task") deleteTask();
+    else if (action === "delete-module") deleteModule();
     else if (action === "view-req-doc") viewReqDoc();
     else if (action === "view-images") viewImages();
     else if (action === "view-dev-doc") viewDevDoc();
@@ -420,6 +448,17 @@ async function deleteTask() {
   else showToast("删除失败");
 }
 
+async function deleteModule() {
+  if (!_ctxModuleId) return;
+  if (!confirm(`确定删除模块 ${_ctxModuleId}？`)) return;
+  const res = await fetch(`/api/modules/${_ctxModuleId}`, { method: "DELETE" });
+  if (res.ok) { showToast("已删除模块"); loadTabContent(currentTab); }
+  else {
+    const data = await res.json().catch(() => ({}));
+    showToast(data.detail || "删除失败");
+  }
+}
+
 // ── View Detail Modal ──
 
 async function viewDetail() {
@@ -455,7 +494,7 @@ async function viewSnapshot() {
     const res = await fetch(`/api/tasks/${_ctxTaskId}/snapshots/files/changes.diff`);
     if (res.ok) {
       const data = await res.json();
-      body.innerHTML = renderDiff(data.content || "");
+      body.innerHTML = renderDiffByFile(data.content || "");
     } else {
       body.innerHTML = '<div class="no-data">加载 diff 失败</div>';
     }
@@ -480,6 +519,8 @@ async function viewFile(taskId, snapName, filepath) {
 
   document.getElementById("modal-file-title").textContent = filepath;
   document.getElementById("modal-file-body").innerHTML = renderFileContent(filepath, content);
+  _editingFilePath = null;
+  resetFileEditButtons(false);
   openModal("modal-file");
 }
 
@@ -490,11 +531,13 @@ async function viewReqDoc() {
   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}`);
+  const res = await fetch(`/api/tasks/${_ctxTaskId}/doc-artifacts/prds/${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>`;
+  _editingFilePath = null;
+  resetFileEditButtons(false);
   openModal("modal-file");
 }
 
@@ -510,9 +553,59 @@ async function viewDevDoc() {
   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>`;
+  _editingFilePath = { taskId: _ctxTaskId, type: "develop", path: art.develop_doc, rawContent: data.content || "" };
+  resetFileEditButtons(true);
   openModal("modal-file");
 }
 
+function resetFileEditButtons(showEdit) {
+  document.getElementById("btn-edit-file").classList.toggle("hidden", !showEdit);
+  document.getElementById("btn-save-file").classList.add("hidden");
+  document.getElementById("btn-cancel-edit").classList.add("hidden");
+  document.getElementById("modal-file-body").classList.remove("hidden");
+  document.getElementById("file-editor").classList.add("hidden");
+}
+
+function closeModal(id) {
+  document.getElementById(id).classList.add("hidden");
+  _editingFilePath = null;
+  resetFileEditButtons(false);
+}
+
+function toggleFileEdit() {
+  if (!_editingFilePath) return;
+  const editor = document.getElementById("file-editor");
+  editor.value = _editingFilePath.rawContent;
+  document.getElementById("modal-file-body").classList.add("hidden");
+  editor.classList.remove("hidden");
+  document.getElementById("btn-edit-file").classList.add("hidden");
+  document.getElementById("btn-save-file").classList.remove("hidden");
+  document.getElementById("btn-cancel-edit").classList.remove("hidden");
+}
+
+function cancelFileEdit() {
+  resetFileEditButtons(true);
+}
+
+async function saveFileEdit() {
+  if (!_editingFilePath) return;
+  const content = document.getElementById("file-editor").value;
+  const { taskId, type, path } = _editingFilePath;
+  const res = await fetch(`/api/tasks/${taskId}/doc-artifacts/${type}/${path}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ content }),
+  });
+  if (res.ok) {
+    _editingFilePath.rawContent = content;
+    document.getElementById("modal-file-body").innerHTML = `<div class="log-md-content">${renderDiffMarkers(marked.parse(content))}</div>`;
+    resetFileEditButtons(true);
+    showToast("已保存");
+  } else {
+    showToast("保存失败");
+  }
+}
+
 // ── Doc-gen: View Sketch Images ──
 
 async function viewImages() {
@@ -521,7 +614,7 @@ async function viewImages() {
   const body = document.getElementById("modal-gallery-body");
 
   if (!art.images || art.images.length === 0) {
-    body.innerHTML = '<div class="no-data">暂无草图图片</div>';
+    body.innerHTML = '<div class="no-data">暂无图片</div>';
   } else {
     body.innerHTML = `<div class="image-grid">
       ${art.images.map(img =>
@@ -556,6 +649,49 @@ function renderDiff(content) {
   return `<div class="diff-viewer">${html}</div>`;
 }
 
+function renderDiffByFile(content) {
+  const lines = content.split("\n");
+  const files = [];
+  let current = null;
+  for (const line of lines) {
+    if (line.startsWith("diff --git ")) {
+      const match = line.match(/^diff --git a\/(.+?) b\/(.+)$/);
+      const fileName = match ? match[2] : line;
+      current = { name: fileName, lines: [] };
+      files.push(current);
+    }
+    if (current) current.lines.push(line);
+  }
+  if (files.length <= 1) return renderDiff(content);
+
+  let idx = 0;
+  const fileItems = files.map(f => {
+    const addCount = f.lines.filter(l => l.startsWith("+") && !l.startsWith("+++")).length;
+    const delCount = f.lines.filter(l => l.startsWith("-") && !l.startsWith("---")).length;
+    return `<div class="snap-file-item" onclick="toggleDiffFile(this, 'diff-file-${idx}')">
+      <span class="material-icons">description</span>
+      <span style="flex:1">${esc(f.name)}</span>
+      <span style="color:var(--green-600);font-size:11px">+${addCount}</span>
+      <span style="color:var(--red-600);font-size:11px">-${delCount}</span>
+      <span class="material-icons" style="font-size:16px;color:var(--g400)">expand_more</span>
+    </div>
+    <div id="diff-file-${idx++}" style="display:none">${renderDiff(f.lines.join("\n"))}</div>`;
+  }).join("");
+  return fileItems;
+}
+
+function toggleDiffFile(item, diffId) {
+  const el = document.getElementById(diffId);
+  const icon = item.querySelector('.material-icons:last-child');
+  if (el.style.display === "none") {
+    el.style.display = "block";
+    icon.textContent = "expand_less";
+  } else {
+    el.style.display = "none";
+    icon.textContent = "expand_more";
+  }
+}
+
 function renderFileContent(filepath, content) {
   const ext = filepath.split(".").pop().toLowerCase();
   const langMap = {
@@ -577,19 +713,15 @@ 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");
+  el.addEventListener("mousedown", e => {
+    if (e.target === el) closeModal(el.id);
   });
 });
 
 document.addEventListener("keydown", e => {
   if (e.key === "Escape") {
-    document.querySelectorAll(".modal-overlay:not(.hidden)").forEach(el => el.classList.add("hidden"));
+    document.querySelectorAll(".modal-overlay:not(.hidden)").forEach(el => closeModal(el.id));
   }
 });
 
@@ -606,7 +738,7 @@ function esc(text) {
 }
 
 function statusLabel(status) {
-  return { running: "运行中", completed: "已完成", failed: "失败" }[status] || status;
+  return { pending: "进行中", running: "运行中", completed: "已完成", failed: "失败" }[status] || status;
 }
 
 function calcProgress(task) {

package/dashboard/static/index.html

@@ -99,7 +99,6 @@
 
   <!-- 右键菜单: code-gen 任务 -->
   <div id="ctx-code-gen" class="ctx-menu hidden">
-    <div class="ctx-item" data-action="copy-id"><span class="material-icons">content_copy</span>拷贝 ID</div>
     <div class="ctx-item" data-action="view-detail"><span class="material-icons">info</span>查看详情</div>
     <div class="ctx-item" data-action="view-snapshot"><span class="material-icons">code</span>查看代码快照</div>
     <div class="ctx-sep"></div>
@@ -109,23 +108,21 @@
   <!-- 右键菜单: doc-gen 任务 -->
   <div id="ctx-doc-gen" class="ctx-menu hidden">
     <div class="ctx-item" data-action="view-req-doc"><span class="material-icons">article</span>查看需求文档</div>
-    <div class="ctx-item" data-action="view-images"><span class="material-icons">image</span>查看草图图片</div>
+    <div class="ctx-item" data-action="view-images"><span class="material-icons">image</span>查看图片</div>
     <div class="ctx-item" data-action="view-dev-doc"><span class="material-icons">auto_awesome</span>查看开发文档</div>
-    <div class="ctx-sep"></div>
-    <div class="ctx-item" data-action="copy-id"><span class="material-icons">content_copy</span>拷贝 ID</div>
   </div>
 
   <!-- 右键菜单: bug-fix 任务 -->
   <div id="ctx-bug-fix" class="ctx-menu hidden">
     <div class="ctx-item" data-action="view-detail"><span class="material-icons">info</span>查看详情</div>
-    <div class="ctx-item" data-action="copy-id"><span class="material-icons">content_copy</span>拷贝 ID</div>
+    <div class="ctx-item" data-action="view-snapshot"><span class="material-icons">code</span>查看代码快照</div>
     <div class="ctx-sep"></div>
     <div class="ctx-item danger" data-action="delete-task"><span class="material-icons">delete</span>删除任务</div>
   </div>
 
   <!-- 右键菜单: 模块 -->
   <div id="ctx-module" class="ctx-menu hidden">
-    <div class="ctx-item" data-action="copy-module-id"><span class="material-icons">content_copy</span>拷贝模块 ID</div>
+    <div class="ctx-item danger" data-action="delete-module"><span class="material-icons">delete</span>删除模块</div>
   </div>
 
   <!-- 通用弹框: 详情 -->
@@ -150,14 +147,20 @@
     </div>
   </div>
 
-  <!-- 通用弹框: 文件查看 -->
+  <!-- 通用弹框: 文件查看/编辑 -->
   <div id="modal-file" class="modal-overlay hidden">
     <div class="modal-box wide">
       <div class="modal-head">
         <span class="modal-title" id="modal-file-title">文件内容</span>
-        <span class="material-icons modal-close" onclick="closeModal('modal-file')">close</span>
+        <div class="modal-head-right">
+          <button class="head-btn" id="btn-edit-file" onclick="toggleFileEdit()"><span class="material-icons" style="font-size:16px">edit</span>编辑</button>
+          <button class="head-btn head-btn-save hidden" id="btn-save-file" onclick="saveFileEdit()"><span class="material-icons" style="font-size:16px">save</span>保存</button>
+          <button class="head-btn head-btn-cancel hidden" id="btn-cancel-edit" onclick="cancelFileEdit()"><span class="material-icons" style="font-size:16px">close</span>取消</button>
+          <span class="material-icons modal-close" onclick="closeModal('modal-file')">close</span>
+        </div>
       </div>
       <div class="modal-body" id="modal-file-body"></div>
+      <textarea class="file-editor hidden" id="file-editor"></textarea>
     </div>
   </div>
 
@@ -165,7 +168,7 @@
   <div id="modal-gallery" class="modal-overlay hidden">
     <div class="modal-box wide">
       <div class="modal-head">
-        <span class="modal-title">草图图片</span>
+        <span class="modal-title">图片</span>
         <span class="material-icons modal-close" onclick="closeModal('modal-gallery')">close</span>
       </div>
       <div class="modal-body" id="modal-gallery-body"></div>

package/dashboard/static/style.css

@@ -116,7 +116,7 @@ body {
 }
 
 .nav-item:hover {
-  background: var(--sidebar-hover);
+  background: #1e2230;
   color: var(--g200);
 }
 
@@ -297,7 +297,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 20px;
+  padding: 10px 20px;
   background: var(--surface);
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
   cursor: pointer;
@@ -319,7 +319,7 @@ body {
 .module-expand.open { transform: rotate(180deg); }
 
 .module-name {
-  font-size: 14px; font-weight: 600; color: var(--g900);
+  font-size: 15px; font-weight: 600; color: var(--g900);
 }
 
 .module-id {
@@ -333,7 +333,7 @@ body {
 }
 
 .module-count {
-  font-size: 12px; color: var(--g500);
+  font-size: 13px; color: var(--g500);
 }
 
 /* ── Module Drawer ── */
@@ -393,7 +393,7 @@ body {
 }
 
 .chain-title {
-  font-size: 12px; font-weight: 500; color: var(--g700);
+  font-size: 13px; font-weight: 500; color: var(--g700);
 }
 
 .chain-arrow {
@@ -457,10 +457,10 @@ body {
   transition: background .15s;
 }
 
-.task-card:hover { background: var(--surface-dim); }
+.task-card:hover { background: #f4f6f9; }
 
 .task-header {
-  padding: 14px 20px;
+  padding: 10px 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -468,12 +468,12 @@ body {
 }
 
 .task-title {
-  font-size: 13px; font-weight: 600; color: var(--g900);
+  font-size: 14px; font-weight: 600; color: var(--g900);
 }
 
 .task-meta {
-  font-size: 11px; color: var(--g500);
-  margin-top: 3px;
+  font-size: 12px; color: var(--g500);
+  margin-top: 2px;
   display: flex; align-items: center; gap: 6px;
 }
 
@@ -484,15 +484,15 @@ body {
 /* ── Phase Chips ── */
 
 .phases-row {
-  padding: 8px 20px 12px;
-  display: flex; flex-wrap: wrap; gap: 6px;
+  padding: 6px 20px 10px;
+  display: flex; flex-wrap: wrap; gap: 5px;
 }
 
 .phase-chip {
   display: inline-flex; align-items: center;
   padding: 3px 10px;
   border-radius: 14px;
-  font-size: 11px; font-weight: 500;
+  font-size: 12px; font-weight: 500;
   white-space: nowrap;
   transition: transform .12s;
 }
@@ -508,12 +508,13 @@ body {
 /* ── Status Badge ── */
 
 .status-badge {
-  font-size: 11px;
+  font-size: 12px;
   padding: 3px 12px;
   border-radius: 12px;
   font-weight: 600;
   letter-spacing: .2px;
 }
+.status-badge.pending   { background: var(--g100);     color: var(--g600); }
 .status-badge.running   { background: var(--blue-50);  color: var(--blue-600); }
 .status-badge.completed { background: var(--green-100); color: var(--green-700); }
 .status-badge.failed    { background: var(--red-100);   color: var(--red-600); }
@@ -575,18 +576,25 @@ body {
 
 .artifact-tag .material-icons { font-size: 14px; }
 
+.artifact-tag.figma {
+  background: #f0e6ff;
+  color: #7c3aed;
+  border-color: #e0d0ff;
+}
+
 /* ── Bug Card ── */
 
 .bug-card {
   border-top: 1px solid var(--g100);
-  padding: 14px 20px;
+  padding: 0;
   transition: background .15s;
 }
 
-.bug-card:hover { background: var(--surface-dim); }
+.bug-card:hover { background: #f4f6f9; }
 
 .bug-header {
   display: flex; align-items: flex-start; gap: 12px;
+  padding: 10px 20px;
 }
 
 .bug-status-icon {
@@ -598,12 +606,12 @@ body {
 .bug-info { flex: 1; min-width: 0; }
 
 .bug-title {
-  font-size: 13px; font-weight: 600; color: var(--g900);
+  font-size: 14px; font-weight: 600; color: var(--g900);
 }
 
 .bug-desc {
-  font-size: 12px; color: var(--g600);
-  margin-top: 4px;
+  font-size: 13px; color: var(--g600);
+  margin-top: 3px;
   line-height: 1.5;
 }
 
@@ -625,6 +633,7 @@ body {
 
 .bug-footer {
   margin-top: 8px;
+  padding: 0 20px 12px;
   font-size: 11px; color: var(--g500);
   display: flex; gap: 14px;
 }
@@ -642,7 +651,7 @@ body {
   border: 1px solid var(--g200);
 }
 
-.ctx-menu.hidden { display: none; }
+.ctx-menu.hidden, .hidden, button.hidden { display: none !important; }
 
 .ctx-sep {
   height: 1px;
@@ -714,6 +723,9 @@ body {
   padding: 16px 20px;
   border-bottom: 1px solid var(--g100);
 }
+.modal-head-right {
+  display: flex; align-items: center; gap: 8px;
+}
 
 .modal-title {
   font-size: 14px; font-weight: 600; color: var(--g900);
@@ -1032,3 +1044,35 @@ body {
   .panel-header { padding: 16px 20px 12px; }
   .panel-content { padding: 12px 16px 32px; }
 }
+
+/* ── File Editor ── */
+
+.head-btn {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 4px 12px; border-radius: 6px;
+  background: rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.12);
+  color: #b0b8c8; font-size: 13px; cursor: pointer;
+  transition: all 0.15s;
+}
+.head-btn:hover { background: rgba(255,255,255,0.1); color: #e0e4ec; }
+.head-btn-save { color: #34d399; border-color: rgba(52,211,153,0.3); }
+.head-btn-save:hover { background: rgba(52,211,153,0.1); }
+.head-btn-cancel { color: #f87171; border-color: rgba(248,113,113,0.3); }
+.head-btn-cancel:hover { background: rgba(248,113,113,0.1); }
+.file-editor {
+  width: 100%;
+  min-height: 400px;
+  padding: 16px;
+  background: #0d1117;
+  color: #c9d1d9;
+  border: 1px solid #30363d;
+  border-radius: 6px;
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  resize: vertical;
+  outline: none;
+  tab-size: 2;
+}
+.file-editor:focus { border-color: #58a6ff; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-coding-flow",
-  "version": "1.3.2",
+  "version": "1.4.1",
   "description": "Claude Code skills for requirement analysis, code generation and bug fixing",
   "bin": {
     "flow": "bin/flow.js"