claude-autopm 3.22.0 → 3.22.2

package/autopm/.claude/scripts/pm/dashboard-serve.js

@@ -132,8 +132,7 @@ function generateEpicFlowDiagram() {
     }
   } catch {}
   if (epics.length === 0 && prds.length === 0) {
-    lines.push('  N[No epics or PRDs found]');
-    return lines.join('\n');
+    return { mermaid: '', hasData: false };
   }
   let nodeId = 0;
   for (const prd of prds) {
@@ -159,7 +158,7 @@ function generateEpicFlowDiagram() {
       lines.push(`  ${eid} --> ${tid}["${t.name} ${t.icon}"]`);
     }
   }
-  return lines.join('\n');
+  return { mermaid: lines.join('\n'), hasData: true };
 }
 
 function generatePluginGraph() {
@@ -253,18 +252,22 @@ function getProjectDiagrams() {
   for (const f of entries) {
     if (!f.endsWith('.mmd')) continue;
     try {
-      diagrams.push({
-        name: f.replace(/\.mmd$/, ''),
-        content: fs.readFileSync(path.join(diagramsDir, f), 'utf8')
-      });
+      const name = f.replace(/\.mmd$/, '');
+      const d = { name, content: fs.readFileSync(path.join(diagramsDir, f), 'utf8') };
+      // Load metadata if available
+      const metaPath = path.join(diagramsDir, name + '.meta.json');
+      try { const meta = JSON.parse(fs.readFileSync(metaPath, 'utf8')); d.type = meta.type || 'custom'; } catch { d.type = 'custom'; }
+      diagrams.push(d);
     } catch { /* skip unreadable */ }
   }
   return diagrams;
 }
 
 function getDiagramsData() {
+  const epic = generateEpicFlowDiagram();
   return {
-    epicFlow: generateEpicFlowDiagram(),
+    epicFlow: epic.mermaid,
+    epicFlowHasData: epic.hasData,
     projectDiagrams: getProjectDiagrams(),
     pluginGraph: generatePluginGraph(),
     agentTree: generateAgentTree()
@@ -287,6 +290,7 @@ function renderHTML() {
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>AutoPM Config Dashboard</title>
 <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"><\/script>
+<script src="https://cdn.jsdelivr.net/npm/panzoom@9.4.3/dist/panzoom.min.js"><\/script>
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
   body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0d1117; color: #c9d1d9; padding: 24px; }
@@ -364,6 +368,67 @@ function renderHTML() {
   .toast.ok { background: #238636; }
   .toast.err { background: #da3633; }
   footer { margin-top: 24px; text-align: center; color: #484f58; font-size: 12px; }
+  /* Diagram list */
+  .diagram-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
+  .diagram-grid-item {
+    background: #0d1117; border: 1px solid #30363d; border-radius: 8px; padding: 16px; cursor: pointer; transition: border-color 0.15s;
+  }
+  .diagram-grid-item:hover { border-color: #58a6ff; }
+  .diagram-grid-item h4 { color: #58a6ff; margin-bottom: 4px; }
+  .diagram-grid-item .diagram-meta { color: #8b949e; font-size: 11px; }
+  .diagram-grid-item .diagram-preview { height: 100px; overflow: hidden; opacity: 0.6; margin-top: 8px; }
+  .diagram-grid-item .diagram-preview svg { max-height: 100px; width: 100%; }
+  /* Diagram split editor */
+  .diagram-editor { display: none; }
+  .diagram-editor.active { display: flex; flex-direction: column; }
+  .diagram-editor-toolbar {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 8px 0; margin-bottom: 8px;
+  }
+  .diagram-editor-toolbar .left { display: flex; align-items: center; gap: 12px; }
+  .diagram-editor-toolbar .right { display: flex; gap: 6px; }
+  .diagram-editor-toolbar button {
+    background: #21262d; color: #8b949e; border: 1px solid #30363d;
+    padding: 5px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;
+  }
+  .diagram-editor-toolbar button:hover { background: #30363d; color: #c9d1d9; }
+  .diagram-editor-toolbar .btn-save { background: #238636; color: #fff; border-color: #238636; }
+  .diagram-editor-toolbar .btn-save:hover { background: #2ea043; }
+  .diagram-editor-toolbar .btn-back { color: #58a6ff; }
+  .diagram-split {
+    display: flex; gap: 0; flex: 1; min-height: 500px;
+    border: 1px solid #30363d; border-radius: 8px; overflow: hidden;
+  }
+  .diagram-split .code-pane {
+    flex: 1; display: flex; flex-direction: column; border-right: 1px solid #30363d; min-width: 0;
+  }
+  .diagram-split .code-pane .pane-header {
+    background: #161b22; padding: 6px 12px; font-size: 11px; color: #8b949e;
+    border-bottom: 1px solid #30363d; display: flex; justify-content: space-between; align-items: center;
+  }
+  .diagram-split .code-pane textarea {
+    flex: 1; background: #0d1117; color: #c9d1d9; border: none; padding: 12px;
+    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 13px;
+    line-height: 1.5; resize: none; outline: none; tab-size: 2;
+  }
+  .diagram-split .preview-pane {
+    flex: 1; display: flex; flex-direction: column; background: #161b22; min-width: 0;
+  }
+  .diagram-split .preview-pane .pane-header {
+    background: #161b22; padding: 6px 12px; font-size: 11px; color: #8b949e;
+    border-bottom: 1px solid #30363d; display: flex; justify-content: space-between; align-items: center;
+  }
+  .diagram-split .preview-pane .pane-header button {
+    background: none; border: none; color: #8b949e; cursor: pointer; font-size: 11px; padding: 2px 6px;
+  }
+  .diagram-split .preview-pane .pane-header button:hover { color: #c9d1d9; }
+  .diagram-split .preview-container {
+    flex: 1; overflow: hidden; position: relative; background: #0d1117;
+  }
+  .diagram-split .preview-container svg { width: 100%; height: 100%; }
+  .panzoom-hint {
+    position: absolute; bottom: 8px; right: 12px; color: #484f58; font-size: 10px; pointer-events: none; z-index: 1;
+  }
 </style>
 </head>
 <body>
@@ -494,13 +559,44 @@ function renderHTML() {
 
   <!-- Diagrams Tab -->
   <div id="tab-diagrams" class="tab-content">
-    <div class="grid" style="grid-template-columns: 1fr 1fr;">
-      <div class="card">
-        <h3>Epic Flow</h3>
-        <pre class="mermaid" id="diagram-epic"></pre>
+    <!-- Diagram list view -->
+    <div id="diagram-list-view">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
+        <p class="desc" style="margin:0;">Click a diagram to view and edit. Create new: <code>/pm:diagram-new &lt;name&gt;</code></p>
+      </div>
+      <div id="diagram-grid" class="diagram-grid"></div>
+    </div>
+    <!-- Diagram editor view (split: code | preview) -->
+    <div id="diagram-editor-view" class="diagram-editor">
+      <div class="diagram-editor-toolbar">
+        <div class="left">
+          <button class="btn-back" onclick="closeDiagramEditor()">← Back</button>
+          <strong id="editor-diagram-name" style="color:#c9d1d9;font-size:14px;"></strong>
+          <span id="editor-diagram-meta" style="color:#8b949e;font-size:11px;"></span>
+          <span id="editor-unsaved" style="color:#d29922;font-size:11px;display:none;">● unsaved</span>
+        </div>
+        <div class="right">
+          <button onclick="downloadCurrentDiagram()">↓ .mmd</button>
+          <button class="btn-save" onclick="saveDiagram()">Save</button>
+        </div>
+      </div>
+      <div class="diagram-split">
+        <div class="code-pane">
+          <div class="pane-header"><span>Mermaid Source</span></div>
+          <textarea id="diagram-code" spellcheck="false"></textarea>
+        </div>
+        <div class="preview-pane">
+          <div class="pane-header">
+            <span>Preview</span>
+            <button onclick="resetPanZoom()">Reset zoom</button>
+          </div>
+          <div class="preview-container" id="diagram-preview-container">
+            <div id="diagram-preview-render"></div>
+            <div class="panzoom-hint">Scroll to zoom · Drag to pan</div>
+          </div>
+        </div>
       </div>
     </div>
-    <div id="project-diagrams"></div>
   </div>
 
   <!-- Tests Tab -->
@@ -534,56 +630,182 @@ const headers = { 'Authorization': 'Bearer ' + TOKEN, 'Content-Type': 'applicati
 function esc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
 
 function showTab(name, btn) {
+  // Close diagram editor if leaving diagrams tab
+  if (currentDiagramName && name !== 'diagrams') closeDiagramEditor();
   document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
   document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
   document.getElementById('tab-' + name).classList.add('active');
   btn.classList.add('active');
-  if (name === 'diagrams') renderMermaid();
+  if (name === 'diagrams') renderDiagramsTab();
+  // Pause auto-refresh on tabs with editable forms
+  editingLock = (name === 'mcp' || name === 'diagrams');
 }
 
-let diagramsRendered = false;
-function renderMermaid() {
-  if (diagramsRendered) return;
+// --- Diagram editor state ---
+let diagramsLoaded = false;
+let allDiagrams = [];
+let currentDiagramName = null;
+let currentDiagramSaved = '';
+let panzoomInstance = null;
+let previewDebounce = null;
+
+function renderDiagramsTab() {
+  if (diagramsLoaded) return;
   fetch('/api/diagrams', { headers: { 'Authorization': 'Bearer ' + TOKEN } })
     .then(r => r.json())
     .then(data => {
-      document.getElementById('diagram-epic').textContent = data.epicFlow;
-      document.getElementById('diagram-plugins').textContent = data.pluginGraph;
-      document.getElementById('diagram-agents').textContent = data.agentTree;
-      // Render project diagrams dynamically
-      const container = document.getElementById('project-diagrams');
-      container.innerHTML = '';
-      if (data.projectDiagrams && data.projectDiagrams.length > 0) {
+      // Merge system-generated + project diagrams into one list
+      allDiagrams = [];
+      if (data.epicFlowHasData) {
+        allDiagrams.push({ name: 'epic-flow', content: data.epicFlow, type: 'system', meta: 'PRD → Epic → Tasks' });
+      }
+      allDiagrams.push({ name: 'plugins', content: data.pluginGraph, type: 'system', meta: 'Plugin dependencies' });
+      allDiagrams.push({ name: 'agents', content: data.agentTree, type: 'system', meta: 'Agent selection tree' });
+      if (data.projectDiagrams) {
         data.projectDiagrams.forEach(d => {
-          const card = document.createElement('div');
-          card.className = 'card';
-          card.innerHTML = '<h3>' + esc(d.name) + '</h3>';
-          const pre = document.createElement('pre');
-          pre.className = 'mermaid';
-          pre.textContent = d.content;
-          card.appendChild(pre);
-          container.appendChild(card);
+          allDiagrams.push({ name: d.name, content: d.content, type: 'project', meta: d.type || 'custom' });
         });
-      } else {
-        const msg = document.createElement('div');
-        msg.className = 'card';
-        msg.innerHTML = '<p class="desc">No project diagrams yet. Run <code>/pm:diagram-new</code> to create your first diagram.</p>';
-        container.appendChild(msg);
       }
-      if (typeof mermaid !== 'undefined' && mermaid.run) {
-        mermaid.run();
-      } else {
-        const errorMsg = 'Mermaid library unavailable. Check network connection.';
-        ['diagram-epic','diagram-plugins','diagram-agents'].forEach(id => {
-          const el = document.getElementById(id);
-          if (el) el.textContent = errorMsg;
-        });
-        document.querySelectorAll('#project-diagrams .mermaid').forEach(el => {
-          el.textContent = errorMsg;
-        });
+      renderDiagramGrid();
+      diagramsLoaded = true;
+    });
+}
+
+function renderDiagramGrid() {
+  const grid = document.getElementById('diagram-grid');
+  grid.textContent = '';
+  if (allDiagrams.length === 0) {
+    grid.innerHTML = '<p class="desc">No diagrams yet. Run <code>/pm:diagram-new &lt;name&gt;</code> to create one.</p>';
+    return;
+  }
+  allDiagrams.forEach(d => {
+    const item = document.createElement('div');
+    item.className = 'diagram-grid-item';
+    item.setAttribute('role', 'button');
+    item.setAttribute('tabindex', '0');
+    item.onclick = function() { openDiagramEditor(d.name); };
+    item.onkeydown = function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openDiagramEditor(d.name); } };
+    const h4 = document.createElement('h4');
+    h4.textContent = d.name;
+    const meta = document.createElement('div');
+    meta.className = 'diagram-meta';
+    meta.textContent = d.type === 'system' ? '⚙ ' + d.meta : '📄 ' + d.meta;
+    const preview = document.createElement('div');
+    preview.className = 'diagram-preview';
+    const pre = document.createElement('pre');
+    pre.className = 'mermaid';
+    pre.textContent = d.content;
+    preview.appendChild(pre);
+    item.appendChild(h4);
+    item.appendChild(meta);
+    item.appendChild(preview);
+    grid.appendChild(item);
+  });
+  // Render mini previews
+  if (typeof mermaid !== 'undefined' && mermaid.run) {
+    mermaid.run({ nodes: grid.querySelectorAll('.mermaid') });
+  }
+}
+
+function openDiagramEditor(name) {
+  const d = allDiagrams.find(x => x.name === name);
+  if (!d) return;
+  currentDiagramName = name;
+  currentDiagramSaved = d.content;
+  document.getElementById('editor-diagram-name').textContent = name;
+  document.getElementById('editor-diagram-meta').textContent = d.type === 'system' ? '(system — read-only)' : '';
+  document.getElementById('editor-unsaved').style.display = 'none';
+  const codeEl = document.getElementById('diagram-code');
+  codeEl.value = d.content;
+  codeEl.readOnly = d.type === 'system';
+  document.getElementById('diagram-list-view').style.display = 'none';
+  document.getElementById('diagram-editor-view').classList.add('active');
+  renderPreview(d.content);
+}
+
+function closeDiagramEditor() {
+  clearTimeout(previewDebounce); previewDebounce = null;
+  if (panzoomInstance) { panzoomInstance.dispose(); panzoomInstance = null; }
+  document.getElementById('diagram-editor-view').classList.remove('active');
+  document.getElementById('diagram-list-view').style.display = '';
+  currentDiagramName = null;
+}
+
+function renderPreview(source) {
+  const container = document.getElementById('diagram-preview-render');
+  container.textContent = '';
+  if (panzoomInstance) { panzoomInstance.dispose(); panzoomInstance = null; }
+  if (!source || !source.trim()) { container.textContent = 'Empty diagram'; return; }
+  const pre = document.createElement('pre');
+  pre.className = 'mermaid';
+  pre.textContent = source;
+  container.appendChild(pre);
+  if (typeof mermaid !== 'undefined' && mermaid.run) {
+    mermaid.run({ nodes: [pre] }).then(function() {
+      const svg = container.querySelector('svg');
+      if (svg && typeof panzoom !== 'undefined') {
+        svg.style.width = '100%';
+        svg.style.height = '100%';
+        panzoomInstance = panzoom(svg, { maxZoom: 10, minZoom: 0.1, smoothScroll: false });
       }
-      diagramsRendered = true;
+    }).catch(function() {
+      container.textContent = 'Mermaid syntax error — check your code';
     });
+  }
+}
+
+function resetPanZoom() {
+  if (panzoomInstance) {
+    panzoomInstance.moveTo(0, 0);
+    panzoomInstance.zoomAbs(0, 0, 1);
+  }
+}
+
+// Live preview on code change
+document.addEventListener('DOMContentLoaded', function() {
+  const codeEl = document.getElementById('diagram-code');
+  if (codeEl) {
+    codeEl.addEventListener('input', function() {
+      document.getElementById('editor-unsaved').style.display = codeEl.value !== currentDiagramSaved ? '' : 'none';
+      clearTimeout(previewDebounce);
+      previewDebounce = setTimeout(function() { renderPreview(codeEl.value); }, 600);
+    });
+  }
+});
+
+async function saveDiagram() {
+  if (!currentDiagramName) return;
+  const d = allDiagrams.find(x => x.name === currentDiagramName);
+  if (d && d.type === 'system') { toast('System diagrams are read-only', false); return; }
+  const content = document.getElementById('diagram-code').value;
+  try {
+    await api('POST', '/api/diagrams/' + encodeURIComponent(currentDiagramName), { content: content });
+    currentDiagramSaved = content;
+    if (d) d.content = content;
+    document.getElementById('editor-unsaved').style.display = 'none';
+    // Re-render grid so mini previews reflect saved content
+    diagramsLoaded = false;
+    toast('Diagram saved', true);
+  } catch (e) {
+    toast('Save failed: ' + e.message, false);
+  }
+}
+
+function downloadCurrentDiagram() {
+  const src = document.getElementById('diagram-code').value;
+  if (!src || !currentDiagramName) return;
+  const safeName = currentDiagramName.replace(/[^a-zA-Z0-9_-]/g, '_') + '.mmd';
+  const blob = new Blob([src], { type: 'text/plain' });
+  const a = document.createElement('a');
+  const url = URL.createObjectURL(blob);
+  a.href = url;
+  a.download = safeName;
+  a.style.display = 'none';
+  document.body.appendChild(a);
+  try { a.click(); } finally {
+    document.body.removeChild(a);
+    setTimeout(function() { URL.revokeObjectURL(url); }, 100);
+  }
 }
 
 function renderTestPlan(md) {
@@ -963,7 +1185,11 @@ function addEnvSuggestion(key, val, hint) {
   addEnvRow(key, val);
 }
 
+// Pause auto-refresh while MCP & Keys tab is active (editing forms)
+let editingLock = false;
+
 async function refresh() {
+  if (editingLock) return;
   try {
     const data = await api('GET', '/api/status');
     loadStatus(data);
@@ -1030,6 +1256,41 @@ const server = http.createServer(async (req, res) => {
       return json(res, 200, getDiagramsData());
     }
 
+    // Save diagram content
+    const diagramMatch = parsedUrl.pathname.match(/^\/api\/diagrams\/([a-zA-Z0-9_-]+)$/);
+    if (req.method === 'POST' && diagramMatch) {
+      const name = decodeURIComponent(diagramMatch[1]);
+      if (!/^[a-zA-Z0-9_-]+$/.test(name)) return json(res, 400, { error: 'Invalid diagram name' });
+      const { body, err } = await parseJSONBody(req, res);
+      if (err) return;
+      if (typeof body.content !== 'string') return json(res, 400, { error: 'content must be a string' });
+      if (body.content.length > 500000) return json(res, 400, { error: 'content too large (max 500KB)' });
+      const diagramsDir = path.join(basePath, '.claude', 'pm', 'diagrams');
+      if (!fs.existsSync(diagramsDir)) fs.mkdirSync(diagramsDir, { recursive: true });
+      fs.writeFileSync(path.join(diagramsDir, name + '.mmd'), body.content, 'utf8');
+      // Update metadata timestamp if exists, or create
+      const metaPath = path.join(diagramsDir, name + '.meta.json');
+      let meta = {};
+      try { meta = JSON.parse(fs.readFileSync(metaPath, 'utf8')); } catch {}
+      meta.name = meta.name || name;
+      meta.updated = new Date().toISOString().replace(/\\.\\d{3}Z$/, 'Z');
+      if (!meta.created) meta.created = meta.updated;
+      fs.writeFileSync(metaPath, JSON.stringify(meta, null, 2), 'utf8');
+      return json(res, 200, { ok: true });
+    }
+
+    const diagramDeleteMatch = parsedUrl.pathname.match(/^\/api\/diagrams\/([a-zA-Z0-9_-]+)$/);
+    if (req.method === 'DELETE' && diagramDeleteMatch) {
+      const name = decodeURIComponent(diagramDeleteMatch[1]);
+      if (!/^[a-zA-Z0-9_-]+$/.test(name)) return json(res, 400, { error: 'Invalid diagram name' });
+      const diagramsDir = path.join(basePath, '.claude', 'pm', 'diagrams');
+      const mmdPath = path.join(diagramsDir, name + '.mmd');
+      const metaPath = path.join(diagramsDir, name + '.meta.json');
+      try { fs.unlinkSync(mmdPath); } catch {}
+      try { fs.unlinkSync(metaPath); } catch {}
+      return json(res, 200, { ok: true });
+    }
+
     if (req.method === 'GET' && parsedUrl.pathname === '/api/tests') {
       return json(res, 200, getTestsData());
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-autopm",
-  "version": "3.22.0",
+  "version": "3.22.2",
   "description": "Autonomous Project Management Framework for Claude Code - Advanced AI-powered development automation",
   "main": "bin/autopm.js",
   "workspaces": [