claude-autopm 3.21.0 → 3.22.1

package/autopm/.claude/commands/pm:diagram-list.md

@@ -0,0 +1,12 @@
+---
+allowed-tools: Bash, Read
+---
+
+# Diagram List
+
+List available project diagrams.
+
+## Usage
+```bash
+node .claude/scripts/pm/diagram-list.js
+```

package/autopm/.claude/commands/pm:diagram-new.md

@@ -0,0 +1,85 @@
+---
+allowed-tools: Bash, Read, Write, Glob, Grep
+---
+
+# Diagram New
+
+Create a project architecture diagram by analyzing the codebase.
+
+## Usage
+/pm:diagram-new <name> [--type architecture|modules|data-flow|dependencies]
+
+## Instructions
+
+1. Determine diagram type from --type flag or infer from project:
+   - **architecture**: High-level system components and how they connect
+   - **modules**: Import/require dependency graph between source files
+   - **data-flow**: How data moves through the system (API → service → DB)
+   - **dependencies**: package.json dependency tree
+
+2. Analyze the project:
+   - Read package.json for dependencies and project type
+   - Scan src/ or main source directory for imports/requires
+   - Check for docker-compose.yml, Dockerfile
+   - Check for API routes (Express, FastAPI, etc.)
+   - Check for database models/schemas
+   - Check for .env for external service connections
+     **NEVER include actual .env values (tokens, passwords, secrets) in diagram or metadata.**
+     Only infer service names/types from variable names, not values.
+
+3. Generate Mermaid diagram based on analysis:
+   - Use `graph TD` for hierarchical, `graph LR` for flow
+   - Group related modules in `subgraph` blocks
+   - Use icons: databases [(DB)], services [Service], external{{External}}
+   - Color-code using Mermaid classDef:
+     ```
+     classDef active fill:#d4f8db,stroke:#2f855a
+     classDef config fill:#e2e8f0,stroke:#4a5568
+     classDef api fill:#ebf4ff,stroke:#2b6cb0
+     class FastAPI api
+     class PostgreSQL active
+     ```
+
+4. Save diagram:
+   ```bash
+   mkdir -p .claude/pm/diagrams
+   ```
+   Write Mermaid syntax to `.claude/pm/diagrams/<name>.mmd`
+   Write metadata to `.claude/pm/diagrams/<name>.meta.json`:
+   ```json
+   {"name":"<name>","type":"<type>","created":"<ISO>","updated":"<ISO>","scope":"src/"}
+   ```
+
+5. Display the diagram in terminal (show the Mermaid source)
+
+## Example Output
+
+For a FastAPI + React project:
+```mermaid
+graph TD
+    subgraph Frontend
+        React[React App]
+        Redux[Redux Store]
+        API_Client[API Client]
+    end
+
+    subgraph Backend
+        FastAPI[FastAPI Server]
+        Auth[Auth Module]
+        Users[Users API]
+        ORM[SQLAlchemy ORM]
+    end
+
+    subgraph Data
+        PostgreSQL[(PostgreSQL)]
+        Redis[(Redis Cache)]
+    end
+
+    React --> API_Client
+    API_Client --> FastAPI
+    FastAPI --> Auth
+    FastAPI --> Users
+    Users --> ORM
+    ORM --> PostgreSQL
+    Auth --> Redis
+```

package/autopm/.claude/commands/pm:diagram-show.md

@@ -0,0 +1,14 @@
+---
+allowed-tools: Bash, Read
+---
+
+# Diagram Show
+
+Display a project diagram.
+
+## Usage
+```bash
+node .claude/scripts/pm/diagram-list.js --show <name>
+```
+
+Shows the Mermaid source of the diagram. View rendered version in `/pm:dashboard` Diagrams tab.

package/autopm/.claude/commands/pm:diagram-update.md

@@ -0,0 +1,24 @@
+---
+allowed-tools: Bash, Read, Write, Glob, Grep
+---
+
+# Diagram Update
+
+Update an existing project diagram after code changes.
+
+## Usage
+/pm:diagram-update <name>
+
+## Instructions
+
+1. Read existing diagram from `.claude/pm/diagrams/<name>.mmd`
+2. Read metadata from `.claude/pm/diagrams/<name>.meta.json` for type and scope
+3. If either file is missing: `❌ Diagram not found: Run /pm:diagram-new <name>`
+4. Re-analyze the project (same analysis as diagram-new, scoped to metadata scope)
+5. Compare with existing diagram — identify:
+   - New modules/components added
+   - Removed modules
+   - Changed connections
+6. Update the .mmd file with changes
+7. Update metadata: set `updated` to current timestamp (`date -u +"%Y-%m-%dT%H:%M:%SZ"`)
+8. Show diff summary: "Added: X, Removed: Y, Updated: Z connections"

package/autopm/.claude/mcp/autopm.md

@@ -0,0 +1,44 @@
+---
+name: autopm
+command: node
+args: [".claude/scripts/mcp/autopm-server.js"]
+description: AutoPM project management — issues, epics, PRDs, learnings, checkpoints
+category: project-management
+status: inactive
+---
+
+# AutoPM MCP Server
+
+Local MCP server exposing AutoPM project management data. Reuses local providers — same data as slash commands.
+
+## Tools (13)
+- `autopm_list_issues` — list issues (filter by status)
+- `autopm_show_issue` — issue details
+- `autopm_create_issue` — create new issue
+- `autopm_start_issue` — start working (set in_progress)
+- `autopm_close_issue` — close issue
+- `autopm_list_epics` — list epics with progress
+- `autopm_show_epic` — epic with tasks
+- `autopm_list_prds` — list PRDs
+- `autopm_show_prd` — PRD details
+- `autopm_status` — project overview
+- `autopm_learn` — save learning
+- `autopm_recall` — get learnings
+- `autopm_checkpoint` — create checkpoint
+
+## Resources (5)
+- `autopm://config` — config.json
+- `autopm://agents` — agent-registry.xml
+- `autopm://events` — recent events
+- `autopm://learnings` — all learnings
+- `autopm://test-plan` — test plan
+
+## Prompts (3)
+- `autopm_issue_template` — issue XML template
+- `autopm_prd_template` — PRD XML template
+- `autopm_epic_template` — epic XML template
+
+## Enable
+```bash
+autopm mcp enable autopm
+```

package/autopm/.claude/scripts/mcp/autopm-server.js

@@ -0,0 +1,325 @@
+#!/usr/bin/env node
+/**
+ * AutoPM MCP Server
+ *
+ * Exposes PM data (issues, epics, PRDs, learnings, config) via Model Context Protocol.
+ * Reuses local providers as backend — no data duplication.
+ *
+ * Usage:
+ *   node .claude/scripts/mcp/autopm-server.js
+ *
+ * In .claude/mcp-servers.json:
+ *   { "autopm": { "command": "node", "args": [".claude/scripts/mcp/autopm-server.js"] } }
+ */
+
+const { Server } = require('@modelcontextprotocol/sdk/server/index.js');
+const { StdioServerTransport } = require('@modelcontextprotocol/sdk/server/stdio.js');
+const {
+  CallToolRequestSchema,
+  ListToolsRequestSchema,
+  ListResourcesRequestSchema,
+  ReadResourceRequestSchema,
+  ListPromptsRequestSchema,
+  GetPromptRequestSchema
+} = require('@modelcontextprotocol/sdk/types.js');
+
+const fs = require('fs');
+const path = require('path');
+
+const basePath = process.cwd();
+const settings = { basePath };
+
+// Lazy-load providers to avoid errors when files don't exist
+function loadProvider(name) {
+  const providerPath = path.join(basePath, '.claude', 'providers', 'local', name + '.js');
+  if (fs.existsSync(providerPath)) return require(providerPath);
+  // Fallback to autopm path
+  const autopmPath = path.join(__dirname, '..', '..', 'providers', 'local', name + '.js');
+  if (fs.existsSync(autopmPath)) return require(autopmPath);
+  return null;
+}
+
+function readFile(relativePath) {
+  const fullPath = path.join(basePath, relativePath);
+  if (fs.existsSync(fullPath)) return fs.readFileSync(fullPath, 'utf8');
+  return null;
+}
+
+function readJSON(relativePath) {
+  const content = readFile(relativePath);
+  if (!content) return null;
+  try { return JSON.parse(content); } catch { return null; }
+}
+
+// ── Server Setup ──
+
+const server = new Server(
+  { name: 'autopm', version: '1.0.0' },
+  { capabilities: { tools: {}, resources: {}, prompts: {} } }
+);
+
+// ── Tools ──
+
+const TOOLS = [
+  { name: 'autopm_list_issues', description: 'List local issues with optional status filter', inputSchema: { type: 'object', properties: { status: { type: 'string', description: 'Filter: open, in_progress, closed' } } } },
+  { name: 'autopm_show_issue', description: 'Show issue details by ID', inputSchema: { type: 'object', properties: { id: { type: 'number', description: 'Issue number' } }, required: ['id'] } },
+  { name: 'autopm_create_issue', description: 'Create a new local issue', inputSchema: { type: 'object', properties: { title: { type: 'string' }, labels: { type: 'array', items: { type: 'string' } }, body: { type: 'string' } }, required: ['title'] } },
+  { name: 'autopm_start_issue', description: 'Start working on an issue (set in_progress)', inputSchema: { type: 'object', properties: { id: { type: 'number' }, no_branch: { type: 'boolean' } }, required: ['id'] } },
+  { name: 'autopm_close_issue', description: 'Close an issue', inputSchema: { type: 'object', properties: { id: { type: 'number' } }, required: ['id'] } },
+  { name: 'autopm_list_epics', description: 'List epics with progress', inputSchema: { type: 'object', properties: { status: { type: 'string' } } } },
+  { name: 'autopm_show_epic', description: 'Show epic with tasks', inputSchema: { type: 'object', properties: { name: { type: 'string' } }, required: ['name'] } },
+  { name: 'autopm_list_prds', description: 'List PRDs', inputSchema: { type: 'object', properties: { status: { type: 'string' } } } },
+  { name: 'autopm_show_prd', description: 'Show PRD details', inputSchema: { type: 'object', properties: { name: { type: 'string' } }, required: ['name'] } },
+  { name: 'autopm_status', description: 'Project overview — counts, recent activity', inputSchema: { type: 'object', properties: {} } },
+  { name: 'autopm_learn', description: 'Save a project learning', inputSchema: { type: 'object', properties: { learning: { type: 'string' }, tags: { type: 'array', items: { type: 'string' } } }, required: ['learning'] } },
+  { name: 'autopm_recall', description: 'Get project learnings', inputSchema: { type: 'object', properties: { tag: { type: 'string' }, limit: { type: 'number' } } } },
+  { name: 'autopm_checkpoint', description: 'Create a project checkpoint', inputSchema: { type: 'object', properties: { description: { type: 'string' } }, required: ['description'] } }
+];
+
+server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: TOOLS }));
+
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+  const { name, arguments: args } = request.params;
+
+  try {
+    switch (name) {
+      case 'autopm_list_issues': {
+        const provider = loadProvider('issue-list');
+        if (!provider) return text('Issue list provider not available');
+        const result = await provider.execute(args || {}, settings);
+        return text(JSON.stringify(result, null, 2));
+      }
+      case 'autopm_show_issue': {
+        const provider = loadProvider('issue-show');
+        if (!provider) return text('Issue show provider not available');
+        const result = await provider.execute(args, settings);
+        return text(JSON.stringify(result, null, 2));
+      }
+      case 'autopm_create_issue': {
+        const provider = loadProvider('issue-create');
+        if (!provider) return text('Issue create provider not available');
+        const result = await provider.execute(args, settings);
+        return text(JSON.stringify(result, null, 2));
+      }
+      case 'autopm_start_issue': {
+        const provider = loadProvider('issue-start');
+        if (!provider) return text('Issue start provider not available');
+        const result = await provider.execute(args, settings);
+        return text(JSON.stringify(result, null, 2));
+      }
+      case 'autopm_close_issue': {
+        const provider = loadProvider('issue-close');
+        if (!provider) return text('Issue close provider not available');
+        const result = await provider.execute(args, settings);
+        return text(JSON.stringify(result, null, 2));
+      }
+      case 'autopm_list_epics': {
+        const provider = loadProvider('epic-list');
+        if (!provider) return text('Epic list provider not available');
+        const result = await provider.execute(args || {}, settings);
+        return text(JSON.stringify(result, null, 2));
+      }
+      case 'autopm_show_epic': {
+        const provider = loadProvider('epic-show');
+        if (!provider) return text('Epic show provider not available');
+        const result = await provider.execute(args, settings);
+        return text(JSON.stringify(result, null, 2));
+      }
+      case 'autopm_list_prds': {
+        const provider = loadProvider('prd-list');
+        if (!provider) return text('PRD list provider not available');
+        const result = await provider.execute(args || {}, settings);
+        return text(JSON.stringify(result, null, 2));
+      }
+      case 'autopm_show_prd': {
+        const provider = loadProvider('prd-show');
+        if (!provider) return text('PRD show provider not available');
+        const result = await provider.execute(args, settings);
+        return text(JSON.stringify(result, null, 2));
+      }
+      case 'autopm_status': {
+        const issues = loadProvider('issue-list');
+        const epics = loadProvider('epic-list');
+        const prds = loadProvider('prd-list');
+        const status = {
+          issues: issues ? await issues.execute({}, settings) : { count: 0 },
+          epics: epics ? await epics.execute({}, settings) : { count: 0 },
+          prds: prds ? await prds.execute({}, settings) : { count: 0 }
+        };
+        // Add recent events
+        try {
+          const loggerPath = path.join(basePath, '.claude', 'lib', 'event-logger');
+          const { readEvents } = require(loggerPath);
+          status.recentEvents = readEvents(10, null, basePath);
+        } catch { status.recentEvents = []; }
+        return text(JSON.stringify(status, null, 2));
+      }
+      case 'autopm_learn': {
+        try {
+          const learningsPath = path.join(basePath, '.claude', 'pm', 'learnings.jsonl');
+          const dir = path.dirname(learningsPath);
+          if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+          const entry = { timestamp: new Date().toISOString(), type: 'learning', learning: args.learning, tags: args.tags || [] };
+          fs.appendFileSync(learningsPath, JSON.stringify(entry) + '\n');
+          try {
+            const loggerPath = path.join(basePath, '.claude', 'lib', 'event-logger');
+            const { logEvent } = require(loggerPath);
+            logEvent('learning.saved', { learning: args.learning, tags: args.tags || [] }, basePath);
+          } catch { /* best effort */ }
+          return text(JSON.stringify({ success: true, learning: args.learning }));
+        } catch (e) { return text(JSON.stringify({ error: e.message })); }
+      }
+      case 'autopm_recall': {
+        const learningsPath = path.join(basePath, '.claude', 'pm', 'learnings.jsonl');
+        if (!fs.existsSync(learningsPath)) return text(JSON.stringify({ learnings: [] }));
+        let entries = fs.readFileSync(learningsPath, 'utf8').trim().split('\n')
+          .map(l => { try { return JSON.parse(l); } catch { return null; } }).filter(Boolean);
+        if (args && args.tag) entries = entries.filter(e => (e.tags || []).includes(args.tag));
+        const limit = (args && args.limit) || 20;
+        return text(JSON.stringify({ learnings: entries.slice(-limit).reverse() }));
+      }
+      case 'autopm_checkpoint': {
+        try {
+          const { execSync } = require('child_process');
+          const cpDir = path.join(basePath, '.claude', 'pm', 'checkpoints');
+          if (!fs.existsSync(cpDir)) fs.mkdirSync(cpDir, { recursive: true });
+          const now = new Date().toISOString();
+          let gitInfo = {};
+          try {
+            gitInfo.branch = execSync('git branch --show-current', { encoding: 'utf8', cwd: basePath }).trim();
+            gitInfo.hash = execSync('git rev-parse --short HEAD', { encoding: 'utf8', cwd: basePath }).trim();
+            gitInfo.clean = !execSync('git status --porcelain', { encoding: 'utf8', cwd: basePath }).trim();
+          } catch { /* not a git repo */ }
+          // Count PM artifacts to match CLI checkpoint format
+          const counts = {};
+          for (const [key, dir] of [['issues', 'issues'], ['epics', 'epics'], ['prds', 'prds']]) {
+            const d = path.join(basePath, '.claude', dir);
+            try { counts[key] = fs.readdirSync(d).filter(f => f.endsWith('.md')).length; } catch { counts[key] = 0; }
+          }
+          // Load recent learnings
+          let learnings = [];
+          try {
+            const lPath = path.join(basePath, '.claude', 'pm', 'learnings.jsonl');
+            if (fs.existsSync(lPath)) {
+              learnings = fs.readFileSync(lPath, 'utf8').trim().split('\n')
+                .map(l => { try { return JSON.parse(l); } catch { return null; } }).filter(Boolean).slice(-5);
+            }
+          } catch { /* ignore */ }
+          const checkpoint = { timestamp: now, description: args.description, git: gitInfo, counts, learnings, config_snapshot: null };
+          fs.writeFileSync(path.join(cpDir, now.replace(/[:.]/g, '-') + '.json'), JSON.stringify(checkpoint, null, 2));
+          return text(JSON.stringify({ success: true, checkpoint }));
+        } catch (e) { return text(JSON.stringify({ error: e.message })); }
+      }
+      default:
+        return text(`Unknown tool: ${name}`);
+    }
+  } catch (e) {
+    return text(JSON.stringify({ error: e.message }));
+  }
+});
+
+// ── Resources ──
+
+const RESOURCES = [
+  { uri: 'autopm://config', name: 'Project Config', description: 'Current .claude/config.json', mimeType: 'application/json' },
+  { uri: 'autopm://agents', name: 'Agent Registry', description: 'Loaded agents from agent-registry.xml', mimeType: 'text/xml' },
+  { uri: 'autopm://events', name: 'Recent Events', description: 'Last 50 events from events.jsonl', mimeType: 'application/json' },
+  { uri: 'autopm://learnings', name: 'Project Learnings', description: 'All learnings from learnings.jsonl', mimeType: 'application/json' },
+  { uri: 'autopm://test-plan', name: 'Test Plan', description: 'Current test plan', mimeType: 'text/markdown' }
+];
+
+server.setRequestHandler(ListResourcesRequestSchema, async () => ({ resources: RESOURCES }));
+
+server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
+  const { uri } = request.params;
+
+  switch (uri) {
+    case 'autopm://config':
+      return resource(uri, readFile('.claude/config.json') || '{}', 'application/json');
+    case 'autopm://agents':
+      return resource(uri, readFile('.claude/agents/agent-registry.xml') || '<agent-registry/>', 'text/xml');
+    case 'autopm://events': {
+      try {
+        const loggerPath = path.join(basePath, '.claude', 'lib', 'event-logger');
+        const { readEvents } = require(loggerPath);
+        return resource(uri, JSON.stringify(readEvents(50, null, basePath), null, 2), 'application/json');
+      } catch { return resource(uri, '[]', 'application/json'); }
+    }
+    case 'autopm://learnings': {
+      const content = readFile('.claude/pm/learnings.jsonl');
+      if (!content) return resource(uri, '[]', 'application/json');
+      const entries = content.trim().split('\n').map(l => { try { return JSON.parse(l); } catch { return null; } }).filter(Boolean);
+      return resource(uri, JSON.stringify(entries, null, 2), 'application/json');
+    }
+    case 'autopm://test-plan':
+      return resource(uri, readFile('.claude/pm/test-plan.md') || 'No test plan. Run /pm:test-plan to generate.', 'text/markdown');
+    default:
+      throw new Error(`Unknown resource: ${uri}`);
+  }
+});
+
+// ── Prompts ──
+
+const PROMPTS = [
+  { name: 'autopm_issue_template', description: 'Template for creating a new issue' },
+  { name: 'autopm_prd_template', description: 'Template for creating a new PRD' },
+  { name: 'autopm_epic_template', description: 'Template for creating a new epic' }
+];
+
+server.setRequestHandler(ListPromptsRequestSchema, async () => ({ prompts: PROMPTS }));
+
+server.setRequestHandler(GetPromptRequestSchema, async (request) => {
+  const { name } = request.params;
+
+  try {
+    const templateReaderPath = path.join(basePath, '.claude', 'lib', 'template-reader');
+    const { readTemplate, generateMarkdown, resolveTemplatePath } = require(templateReaderPath);
+
+    const templateMap = {
+      autopm_issue_template: 'issue.xml',
+      autopm_prd_template: 'prd.xml',
+      autopm_epic_template: 'epic.xml'
+    };
+
+    const templateFile = templateMap[name];
+    if (!templateFile) throw new Error(`Unknown prompt: ${name}`);
+
+    const templatePath = resolveTemplatePath(templateFile, basePath);
+    const template = readTemplate(templatePath);
+    const markdown = generateMarkdown(template, {});
+
+    return {
+      messages: [{
+        role: 'user',
+        content: [{ type: 'text', text: `Use this template to create a new ${templateFile.replace('.xml', '')}:\n\n${markdown}` }]
+      }]
+    };
+  } catch (e) {
+    return {
+      messages: [{
+        role: 'user',
+        content: [{ type: 'text', text: `Template not available: ${e.message}. Run autopm install first.` }]
+      }]
+    };
+  }
+});
+
+// ── Helpers ──
+
+function text(content) {
+  return { content: [{ type: 'text', text: content }] };
+}
+
+function resource(uri, content, mimeType) {
+  return { contents: [{ uri, text: content, mimeType }] };
+}
+
+// ── Start ──
+
+async function main() {
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  console.error('AutoPM MCP Server running on stdio');
+}
+
+main().catch(console.error);

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() {
@@ -263,8 +262,10 @@ function getProjectDiagrams() {
 }
 
 function getDiagramsData() {
+  const epic = generateEpicFlowDiagram();
   return {
-    epicFlow: generateEpicFlowDiagram(),
+    epicFlow: epic.mermaid,
+    epicFlowHasData: epic.hasData,
     projectDiagrams: getProjectDiagrams(),
     pluginGraph: generatePluginGraph(),
     agentTree: generateAgentTree()
@@ -364,6 +365,42 @@ function renderHTML() {
   .toast.ok { background: #238636; }
   .toast.err { background: #da3633; }
   footer { margin-top: 24px; text-align: center; color: #484f58; font-size: 12px; }
+  /* Diagram cards */
+  .diagram-card { position: relative; }
+  .diagram-card .diagram-toolbar { display: flex; gap: 6px; position: absolute; top: 12px; right: 12px; z-index: 2; }
+  .diagram-card .diagram-toolbar button {
+    background: #21262d; color: #8b949e; border: 1px solid #30363d;
+    padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;
+  }
+  .diagram-card .diagram-toolbar button:hover { background: #30363d; color: #c9d1d9; }
+  .diagram-card .mermaid-wrap { overflow: auto; max-height: 400px; cursor: pointer; }
+  .diagram-card .mermaid-wrap:hover { outline: 1px solid #30363d; border-radius: 4px; }
+  /* Fullscreen modal */
+  .diagram-modal {
+    display: none; position: fixed; inset: 0; z-index: 1000;
+    background: rgba(0,0,0,0.85); justify-content: center; align-items: center;
+  }
+  .diagram-modal.open { display: flex; }
+  .diagram-modal .modal-inner {
+    background: #161b22; border: 1px solid #30363d; border-radius: 12px;
+    width: 95vw; height: 92vh; display: flex; flex-direction: column; position: relative;
+  }
+  .diagram-modal .modal-header {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 12px 20px; border-bottom: 1px solid #30363d;
+  }
+  .diagram-modal .modal-header h3 { color: #c9d1d9; font-size: 14px; }
+  .diagram-modal .modal-header .modal-actions { display: flex; gap: 8px; }
+  .diagram-modal .modal-header button {
+    background: #21262d; color: #8b949e; border: 1px solid #30363d;
+    padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 12px;
+  }
+  .diagram-modal .modal-header button:hover { background: #30363d; color: #c9d1d9; }
+  .diagram-modal .modal-body {
+    flex: 1; overflow: auto; padding: 20px; display: flex;
+    justify-content: center; align-items: flex-start;
+  }
+  .diagram-modal .modal-body svg { max-width: 100%; height: auto; }
 </style>
 </head>
 <body>
@@ -494,15 +531,33 @@ 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>
+    <div id="diagram-epic-card" class="card diagram-card" style="display:none;">
+      <h3>Epic Flow <span style="color:#8b949e;font-size:11px;font-weight:normal;margin-left:8px;">PRD → Epic → Tasks workflow</span></h3>
+      <div class="diagram-toolbar">
+        <button onclick="downloadMermaid('diagram-epic')">↓ .mmd</button>
+        <button onclick="openDiagramModal('diagram-epic','Epic Flow')">⤢ Fullscreen</button>
+      </div>
+      <div class="mermaid-wrap" onclick="openDiagramModal('diagram-epic','Epic Flow')">
         <pre class="mermaid" id="diagram-epic"></pre>
       </div>
     </div>
     <div id="project-diagrams"></div>
   </div>
 
+  <!-- Diagram fullscreen modal -->
+  <div class="diagram-modal" id="diagram-modal" role="dialog" aria-modal="true" aria-labelledby="modal-diagram-title" onclick="if(event.target===this)closeDiagramModal()">
+    <div class="modal-inner">
+      <div class="modal-header">
+        <h3 id="modal-diagram-title"></h3>
+        <div class="modal-actions">
+          <button onclick="downloadMermaid(currentModalDiagram)">↓ Download .mmd</button>
+          <button onclick="closeDiagramModal()">✕ Close</button>
+        </div>
+      </div>
+      <div class="modal-body" id="modal-diagram-body"></div>
+    </div>
+  </div>
+
   <!-- Tests Tab -->
   <div id="tab-tests" class="tab-content">
     <div class="card">
@@ -542,26 +597,68 @@ function showTab(name, btn) {
 }
 
 let diagramsRendered = false;
+const diagramSources = {};
+const diagramNames = {};
+let currentModalDiagram = null;
+
 function renderMermaid() {
   if (diagramsRendered) return;
   fetch('/api/diagrams', { headers: { 'Authorization': 'Bearer ' + TOKEN } })
     .then(r => r.json())
     .then(data => {
-      document.getElementById('diagram-epic').textContent = data.epicFlow;
+      // Epic Flow — only show if there are actual epics/PRDs
+      const epicCard = document.getElementById('diagram-epic-card');
+      const epicEl = document.getElementById('diagram-epic');
+      if (data.epicFlowHasData) {
+        epicCard.style.display = '';
+        epicEl.className = 'mermaid';
+        epicEl.textContent = data.epicFlow;
+        diagramSources['diagram-epic'] = data.epicFlow;
+        diagramNames['diagram-epic'] = 'epic-flow';
+      } else {
+        epicCard.style.display = 'none';
+        epicEl.className = '';
+        epicEl.textContent = '';
+      }
       document.getElementById('diagram-plugins').textContent = data.pluginGraph;
       document.getElementById('diagram-agents').textContent = data.agentTree;
+      diagramSources['diagram-plugins'] = data.pluginGraph;
+      diagramSources['diagram-agents'] = data.agentTree;
+      diagramNames['diagram-plugins'] = 'plugins';
+      diagramNames['diagram-agents'] = 'agents';
       // Render project diagrams dynamically
       const container = document.getElementById('project-diagrams');
       container.innerHTML = '';
       if (data.projectDiagrams && data.projectDiagrams.length > 0) {
-        data.projectDiagrams.forEach(d => {
+        data.projectDiagrams.forEach((d, i) => {
+          const id = 'proj-diagram-' + i;
+          diagramSources[id] = d.content;
+          diagramNames[id] = d.name;
           const card = document.createElement('div');
-          card.className = 'card';
-          card.innerHTML = '<h3>' + esc(d.name) + '</h3>';
+          card.className = 'card diagram-card';
+          const h3 = document.createElement('h3');
+          h3.textContent = d.name;
+          card.appendChild(h3);
+          const toolbar = document.createElement('div');
+          toolbar.className = 'diagram-toolbar';
+          const dlBtn = document.createElement('button');
+          dlBtn.textContent = '↓ .mmd';
+          dlBtn.onclick = function(e) { e.stopPropagation(); downloadMermaid(id); };
+          const fsBtn = document.createElement('button');
+          fsBtn.textContent = '⤢ Fullscreen';
+          fsBtn.onclick = function(e) { e.stopPropagation(); openDiagramModal(id, d.name); };
+          toolbar.appendChild(dlBtn);
+          toolbar.appendChild(fsBtn);
+          card.appendChild(toolbar);
+          const wrap = document.createElement('div');
+          wrap.className = 'mermaid-wrap';
+          wrap.onclick = function() { openDiagramModal(id, d.name); };
           const pre = document.createElement('pre');
           pre.className = 'mermaid';
+          pre.id = id;
           pre.textContent = d.content;
-          card.appendChild(pre);
+          wrap.appendChild(pre);
+          card.appendChild(wrap);
           container.appendChild(card);
         });
       } else {
@@ -586,6 +683,59 @@ function renderMermaid() {
     });
 }
 
+function openDiagramModal(diagramId, title) {
+  currentModalDiagram = diagramId;
+  document.getElementById('modal-diagram-title').textContent = title || diagramId;
+  const body = document.getElementById('modal-diagram-body');
+  body.textContent = '';
+  const source = diagramSources[diagramId];
+  if (source) {
+    const pre = document.createElement('pre');
+    pre.className = 'mermaid';
+    pre.textContent = source;
+    body.appendChild(pre);
+    if (typeof mermaid !== 'undefined' && mermaid.run) {
+      mermaid.run({ nodes: body.querySelectorAll('.mermaid') });
+    }
+  } else {
+    body.textContent = 'Diagram not available.';
+  }
+  const modal = document.getElementById('diagram-modal');
+  modal.classList.add('open');
+  modalPrevFocus = document.activeElement;
+  const closeBtn = modal.querySelector('.modal-actions button:last-child');
+  if (closeBtn) closeBtn.focus();
+  document.addEventListener('keydown', modalEscHandler);
+}
+
+let modalPrevFocus = null;
+function closeDiagramModal() {
+  document.getElementById('diagram-modal').classList.remove('open');
+  document.removeEventListener('keydown', modalEscHandler);
+  currentModalDiagram = null;
+  if (modalPrevFocus) { modalPrevFocus.focus(); modalPrevFocus = null; }
+}
+
+function modalEscHandler(e) { if (e.key === 'Escape') closeDiagramModal(); }
+
+function downloadMermaid(diagramId) {
+  const src = diagramSources[diagramId];
+  if (!src) return;
+  const label = diagramNames[diagramId] || diagramId.replace('proj-diagram-', 'diagram-').replace('diagram-', '');
+  const safeName = label.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) {
   if (!md) { document.getElementById('test-plan-content').textContent = 'No test plan found. Run /pm:test-plan to generate.'; return; }
   const lines = md.split('\\n');
@@ -963,7 +1113,22 @@ function addEnvSuggestion(key, val, hint) {
   addEnvRow(key, val);
 }
 
+// Pause auto-refresh while user is editing MCP or env forms
+let editingLock = false;
+document.addEventListener('focusin', function(e) {
+  if (e.target.closest('#mcp-list, #env-list, .mcp-entry, .env-row')) editingLock = true;
+});
+document.addEventListener('focusout', function(e) {
+  if (e.target.closest('#mcp-list, #env-list, .mcp-entry, .env-row')) {
+    setTimeout(function() {
+      const active = document.activeElement;
+      if (!active || !active.closest('#mcp-list, #env-list, .mcp-entry, .env-row')) editingLock = false;
+    }, 200);
+  }
+});
+
 async function refresh() {
+  if (editingLock) return;
   try {
     const data = await api('GET', '/api/status');
     loadStatus(data);

package/autopm/.claude/scripts/pm/diagram-list.js

@@ -0,0 +1,94 @@
+#!/usr/bin/env node
+
+/**
+ * PM Diagram List/Show Script
+ *
+ * Lists diagrams from .claude/pm/diagrams/*.mmd with metadata.
+ * With --show <name>: displays diagram content.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const DIAGRAMS_DIR = path.join('.claude', 'pm', 'diagrams');
+
+function findDiagrams() {
+  if (!fs.existsSync(DIAGRAMS_DIR)) {
+    return [];
+  }
+  return fs.readdirSync(DIAGRAMS_DIR)
+    .filter(f => f.endsWith('.mmd'))
+    .map(f => f.replace('.mmd', ''));
+}
+
+function loadMeta(name) {
+  const metaPath = path.join(DIAGRAMS_DIR, `${name}.meta.json`);
+  if (!fs.existsSync(metaPath)) {
+    return { name, type: 'unknown', created: '-', updated: '-' };
+  }
+  try {
+    const raw = JSON.parse(fs.readFileSync(metaPath, 'utf8'));
+    return {
+      name: raw.name || name,
+      type: raw.type || 'unknown',
+      created: (raw.created || '-').slice(0, 10),
+      updated: (raw.updated || '-').slice(0, 10)
+    };
+  } catch {
+    return { name, type: 'unknown', created: '-', updated: '-' };
+  }
+}
+
+function listDiagrams() {
+  const names = findDiagrams();
+  if (names.length === 0) {
+    console.log('No diagrams found.');
+    console.log('Create one with: /pm:diagram-new <name>');
+    return;
+  }
+
+  const rows = names.map(loadMeta);
+
+  console.log('## Project Diagrams\n');
+  console.log('| Name | Type | Created | Updated |');
+  console.log('|------|------|---------|---------|');
+  for (const r of rows) {
+    const escapedName = r.name.replace(/\|/g, '\\|');
+    const escapedType = (r.type || '').replace(/\|/g, '\\|');
+    console.log(`| ${escapedName} | ${escapedType} | ${r.created} | ${r.updated} |`);
+  }
+  console.log(`\nTotal: ${rows.length} diagram${rows.length === 1 ? '' : 's'}`);
+  console.log('View in dashboard: /pm:dashboard → Diagrams tab');
+}
+
+function showDiagram(name) {
+  const mmdPath = path.join(DIAGRAMS_DIR, `${name}.mmd`);
+  if (!fs.existsSync(mmdPath)) {
+    console.error(`❌ Diagram "${name}" not found. Run: /pm:diagram-new ${name}`);
+    process.exit(1);
+  }
+
+  const content = fs.readFileSync(mmdPath, 'utf8');
+  const meta = loadMeta(name);
+
+  console.log(`## Diagram: ${meta.name} (${meta.type})\n`);
+  console.log('```mermaid');
+  console.log(content.trim());
+  console.log('```');
+}
+
+// Parse args
+const args = process.argv.slice(2);
+const showIdx = args.indexOf('--show');
+
+if (showIdx !== -1 && args[showIdx + 1]) {
+  const name = args[showIdx + 1];
+  const safeName = path.basename(name || '');
+  if (!safeName || !/^[a-z0-9_-]+$/i.test(safeName)) {
+    console.log('Invalid diagram name. Use alphanumeric, hyphens, underscores only.');
+    process.exit(1);
+  }
+  showDiagram(safeName);
+} else {
+  listDiagrams();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-autopm",
-  "version": "3.21.0",
+  "version": "3.22.1",
   "description": "Autonomous Project Management Framework for Claude Code - Advanced AI-powered development automation",
   "main": "bin/autopm.js",
   "workspaces": [
@@ -126,6 +126,7 @@
   ],
   "dependencies": {
     "@anthropic-ai/sdk": "^0.67.0",
+    "@modelcontextprotocol/sdk": "^1.29.0",
     "@octokit/rest": "^22.0.0",
     "azure-devops-node-api": "^15.1.1",
     "chalk": "4.1.2",