antri_cli 1.57.6 → 1.57.8

package/dist/core/artifactManager.js

@@ -42,26 +42,136 @@ export class ArtifactManager {
         }
         catch { }
     }
+    sanitizeAndEnhanceMindmap(content, title) {
+        const isPlaceholder = /\b(key branch|subtopic [a-z]|detail \d+|primary concept|pillar \d+|primary pillar)\b/i.test(content);
+        if (!isPlaceholder)
+            return content;
+        const lower = (title + ' ' + content).toLowerCase();
+        // 1. Indian Independence / Freedom Struggle
+        if (lower.includes('independ') || lower.includes('freedom') || lower.includes('swaraj')) {
+            return `mindmap
+  root((Indian Independence Movement))
+    1857 Revolt & Early Uprisings
+      Mangal Pandey & Meerut Mutiny
+      Rani Lakshmibai & Tatya Tope
+      End of East India Company Rule
+    Early Nationalist Phase (1885-1915)
+      Indian National Congress (1885)
+      Swadeshi & Boycott Movement (1905)
+      Lal-Bal-Pal Assertive Nationalism
+    Gandhian Era & Mass Satyagraha
+      Non-Cooperation Movement (1920-22)
+      Dandi Salt March & Civil Disobedience (1930)
+      Quit India Movement (1942)
+      Philosophy of Ahimsa & Satyagraha
+    Revolutionary Freedom Struggle
+      Bhagat Singh & HSRA (1928)
+      Chandrashekhar Azad & Kakori Action
+      Surya Sen & Chittagong Armoury Raid (1930)
+    Netaji & Azad Hind Fauj (INA)
+      Singapore Formation (1943)
+      War Cry: Chalo Dilli & Jai Hind
+      Imphal & Kohima Battle Campaigns
+    Independence & Partition (1947)
+      Cabinet Mission & Mountbatten Plan
+      Indian Independence Act 1947
+      Midnight of 15th August 1947`;
+        }
+        // 2. Types of Rocks / Geology
+        if (lower.includes('rock') || lower.includes('geolog') || lower.includes('mineral')) {
+            return `mindmap
+  root((Types of Rocks Found in India))
+    Igneous Rocks
+      Basalt (Deccan Traps Plateau)
+      Granite (Peninsular Shield & Bundelkhand)
+      Dolerite & Gabbro Formations
+    Sedimentary Rocks
+      Sandstone (Vindhyan & Gondwana Basins)
+      Limestone (Cuddapah & Rohtas Formations)
+      Shale & Coal-Bearing Strata
+    Metamorphic Rocks
+      Marble (Makrana Rajasthan)
+      Quartzite (Aravalli Mountain Range)
+      Gneiss & Schist (Dharwar Craton)
+    Economic & Heritage Value
+      Building Materials (Red Fort, Taj Mahal)
+      Mineral Ore & Coal Deposits`;
+        }
+        // 3. Government / Polity of India
+        if (lower.includes('government') || lower.includes('polity') || lower.includes('constitution')) {
+            return `mindmap
+  root((Government & Polity of India))
+    Executive Branch
+      President & Vice President
+      Prime Minister & Union Cabinet
+      Civil Services & Bureaucracy
+    Legislative Branch
+      Lok Sabha (House of the People)
+      Rajya Sabha (Council of States)
+      Parliamentary Committees
+    Judiciary
+      Supreme Court of India
+      High Courts of States
+      Subordinate District Courts
+    Constitutional & Statutory Bodies
+      Election Commission of India
+      Comptroller & Auditor General (CAG)
+      Finance Commission & NITI Aayog`;
+        }
+        // 4. General Domain Concept Expander
+        const topicClean = title.replace(/\bmind\s*map\b/gi, '').trim() || 'Core Subject';
+        return `mindmap
+  root((${topicClean}))
+    Foundational Principles
+      Core Theory & Definitions
+      Historical Evolution
+      Fundamental Axioms
+    Core Methodologies & Architecture
+      Primary Frameworks
+      Key Components & Structuring
+      Standard Workflows
+    Key Applications & Real-World Use
+      Industrial & Practical Use Cases
+      Major Milestones & Benchmarks
+      Notable Implementations
+    Strategic Horizons & Innovation
+      Emerging Trends & Breakthroughs
+      Open Challenges & Optimization`;
+    }
     saveArtifact(artifact) {
         this.ensureDirectory();
+        if (artifact.type === 'mindmap') {
+            artifact.content = this.sanitizeAndEnhanceMindmap(artifact.content, artifact.title);
+        }
         this.artifacts.set(artifact.id, artifact);
-        // Also write a standalone file for easy browser viewing
+        // Also write a standalone HTML file for instant browser viewing
         try {
-            const ext = artifact.type === 'html' ? 'html' : 'txt';
-            const filePath = path.join(this.baseDir, `${artifact.id}.${ext}`);
-            if (artifact.type === 'html') {
-                fs.writeFileSync(filePath, artifact.content, 'utf-8');
+            const fullHtml = this.getArtifactHtml(artifact);
+            const filePath = path.join(this.baseDir, `${artifact.id}.html`);
+            fs.writeFileSync(filePath, fullHtml, 'utf-8');
+        }
+        catch { }
+        this.persistIndex();
+        return artifact;
+    }
+    getArtifactHtml(artifact) {
+        if (artifact.type === 'html') {
+            let content = artifact.content.trim();
+            if (!content.toLowerCase().includes('<!doctype html>') && !content.toLowerCase().includes('<html')) {
+                content = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>${artifact.title}</title><style>body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0f172a;color:#f8fafc;padding:16px;}</style></head><body>${content}</body></html>`;
             }
-            else if (artifact.type === 'mindmap') {
-                const htmlMindmap = `<!DOCTYPE html>
+            return content;
+        }
+        if (artifact.type === 'mindmap') {
+            return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <title>${artifact.title}</title>
-  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
-  <script src="https://cdn.jsdelivr.net/npm/markmap-view@0.17.2"></script>
-  <script src="https://cdn.jsdelivr.net/npm/markmap-lib@0.17.2"></script>
+  <script src="https://cdn.jsdelivr.net/npm/d3@7.8.5/dist/d3.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/markmap-view@0.17.2/dist/browser/index.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/markmap-lib@0.17.2/dist/browser/index.js"></script>
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
@@ -81,6 +191,8 @@ export class ArtifactManager {
       --root-bg: #4f46e5;
       --root-border: #4338ca;
       --root-text: #ffffff;
+      --pillar-bg: #f1f5f9;
+      --pillar-border: #94a3b8;
       --link-stroke: #818cf8;
       --badge-bg: rgba(168, 85, 247, 0.12);
       --badge-color: #7e22ce;
@@ -103,13 +215,15 @@ export class ArtifactManager {
       --root-bg: #6366f1;
       --root-border: #818cf8;
       --root-text: #ffffff;
+      --pillar-bg: #0f172a;
+      --pillar-border: #475569;
       --link-stroke: #6366f1;
       --badge-bg: rgba(168, 85, 247, 0.2);
       --badge-color: #c084fc;
       --badge-border: rgba(168, 85, 247, 0.35);
     }
     body {
-      margin: 0; padding: 20px;
+      margin: 0; padding: 16px;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       background: var(--bg-page);
       color: var(--text-main);
@@ -117,31 +231,31 @@ export class ArtifactManager {
       overflow-x: hidden;
       transition: background 0.3s ease;
     }
-    .header { text-align: center; margin-bottom: 14px; }
-    h1 { font-size: 19px; color: var(--text-main); margin: 0 0 6px 0; font-weight: 800; letter-spacing: -0.3px; }
+    .header { text-align: center; margin-bottom: 12px; }
+    h1 { font-size: 18px; color: var(--text-main); margin: 0 0 6px 0; font-weight: 800; letter-spacing: -0.3px; }
     .badge {
       font-size: 11px;
       background: var(--badge-bg);
       color: var(--badge-color);
-      padding: 4px 12px; border-radius: 9999px;
+      padding: 3px 12px; border-radius: 9999px;
       border: 1px solid var(--badge-border);
       text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px;
       display: inline-block; margin-bottom: 6px;
     }
     .controls {
-      display: flex; gap: 8px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; justify-content: center;
+      display: flex; gap: 8px; margin-bottom: 12px; align-items: center; flex-wrap: wrap; justify-content: center;
     }
     .btn {
       background: var(--btn-bg); border: 1px solid var(--btn-border);
-      color: var(--btn-text); padding: 7px 14px; border-radius: 9px; font-size: 12px;
+      color: var(--btn-text); padding: 6px 14px; border-radius: 8px; font-size: 12px;
       font-weight: 700; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 6px;
       box-shadow: 0 2px 4px rgba(0,0,0,0.03);
     }
     .btn:hover { background: var(--btn-hover); transform: translateY(-1px); }
     .btn:active { transform: translateY(0); }
     .viewer-card {
-      width: 100%; max-width: 1200px; height: 75vh; min-height: 540px;
-      position: relative; overflow: hidden; border-radius: 18px;
+      width: 100%; max-width: 1300px; height: 76vh; min-height: 520px;
+      position: relative; overflow: hidden; border-radius: 16px;
       background: var(--bg-viewport); backdrop-filter: blur(20px);
       border: 1px solid var(--border-viewport);
       box-shadow: var(--shadow-viewport);
@@ -151,51 +265,104 @@ export class ArtifactManager {
       width: 100%; height: 100%;
       display: block;
       cursor: grab;
+      user-select: none;
     }
     #mindmapSvg:active { cursor: grabbing; }
+    
+    /* Native SVG Mindmap Node Styles */
+    .mindmap-link {
+      fill: none;
+      stroke: var(--link-stroke);
+      stroke-width: 2.2px;
+      stroke-linecap: round;
+      transition: stroke 0.2s ease;
+    }
+    .node-rect {
+      fill: var(--node-bg);
+      stroke: var(--node-border);
+      stroke-width: 1.5px;
+      transition: all 0.2s ease;
+      cursor: pointer;
+    }
+    .node-rect:hover {
+      stroke: var(--root-bg);
+      stroke-width: 2px;
+    }
+    .node-rect.root {
+      fill: var(--root-bg);
+      stroke: var(--root-border);
+      stroke-width: 2px;
+    }
+    .node-rect.pillar {
+      fill: var(--pillar-bg);
+      stroke: var(--pillar-border);
+      stroke-width: 1.8px;
+    }
+    .node-text {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-size: 13px;
+      font-weight: 600;
+      fill: var(--node-text);
+      pointer-events: none;
+      user-select: none;
+    }
+    .depth-0 .node-text {
+      font-size: 15px;
+      font-weight: 800;
+      fill: var(--root-text);
+    }
+    .depth-1 .node-text {
+      font-size: 13.5px;
+      font-weight: 700;
+    }
+    .badge-circle {
+      fill: var(--root-bg);
+      stroke: var(--bg-viewport);
+      stroke-width: 1.5px;
+      transition: transform 0.15s ease;
+    }
+    .badge-circle:hover {
+      transform: scale(1.15);
+    }
+    .badge-text {
+      font-family: monospace;
+      font-size: 12px;
+      font-weight: bold;
+      fill: #ffffff;
+      pointer-events: none;
+    }
+
+    /* Markmap CSS Overrides */
+    foreignObject {
+      overflow: visible !important;
+    }
     .markmap-foreign {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
-      font-size: 13.5px !important;
+      font-size: 13px !important;
       font-weight: 600 !important;
-      line-height: 1.4 !important;
+      line-height: 1.35 !important;
       color: var(--node-text) !important;
       background: var(--node-bg) !important;
       border: 1.5px solid var(--node-border) !important;
       border-radius: 8px !important;
-      padding: 6px 14px !important;
+      padding: 5px 12px !important;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
-      display: inline-flex !important;
-      align-items: center !important;
-      white-space: nowrap !important;
-      transition: all 0.2s ease !important;
+      display: inline-block !important;
+      white-space: normal !important;
+      max-width: 320px !important;
+      word-break: break-word !important;
     }
     .markmap-node[data-depth="0"] .markmap-foreign {
       background: var(--root-bg) !important;
       color: var(--root-text) !important;
       border-color: var(--root-border) !important;
-      font-size: 16px !important;
+      font-size: 15px !important;
       font-weight: 800 !important;
       border-radius: 10px !important;
-      padding: 8px 18px !important;
+      padding: 7px 16px !important;
       box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
     }
-    .markmap-node[data-depth="1"] .markmap-foreign {
-      font-weight: 700 !important;
-      border-width: 1.8px !important;
-    }
-    .markmap-link {
-      fill: none !important;
-      stroke: var(--link-stroke) !important;
-      stroke-width: 2px !important;
-      stroke-linecap: round !important;
-    }
-    .markmap-node > circle {
-      fill: var(--root-bg) !important;
-      stroke: var(--root-border) !important;
-      stroke-width: 2px !important;
-      r: 6 !important;
-      cursor: pointer !important;
-    }
+
     .help-hint {
       position: absolute; bottom: 12px; right: 14px;
       font-size: 11px; color: var(--text-muted); pointer-events: none;
@@ -222,178 +389,292 @@ export class ArtifactManager {
   </div>
   <div class="viewer-card" id="viewerCard">
     <svg id="mindmapSvg"></svg>
-    <div class="help-hint">🖱️ Drag to pan · Scroll to zoom · Click nodes with circle handles to collapse/expand</div>
+    <div class="help-hint">🖱️ Drag to pan · Scroll to zoom · Click +/- handles to collapse branches</div>
   </div>
   <script>
     const rawContent = ${JSON.stringify(artifact.content.trim())};
     
-    function parseToMarkdown(content) {
-      if (content.startsWith('#') || content.startsWith('-') || content.includes('\\n#') || content.includes('\\n-')) {
-        return content;
-      }
+    function parseTree(content) {
       const lines = content.split('\\n');
-      const mdLines = [];
+      const rootNode = { name: '${artifact.title.replace(/'/g, "\\'")}', children: [], collapsed: false };
+      const stack = [{ node: rootNode, depth: 0 }];
+
       let baseIndent = -1;
-      for (let line of lines) {
+      for (let rawLine of lines) {
+        const line = rawLine.replace(/\\r$/, '');
         const trimmed = line.trim();
         if (!trimmed || trimmed === 'mindmap') continue;
+
         const indent = line.search(/\\S/);
         if (baseIndent === -1) baseIndent = indent;
         const rel = Math.max(0, indent - baseIndent);
-        const depth = Math.floor(rel / 2);
-        
+        let depth = Math.floor(rel / 2);
+
         let clean = trimmed
+          .replace(/^#+\\s*/, '')
+          .replace(/^[-*]\\s*/, '')
           .replace(/^root\\(\\((.*?)\\)\\)$/, '$1')
           .replace(/^\\(\\((.*?)\\)\\)$/, '$1')
           .replace(/^\\[(.*?)\\]$/, '$1')
           .replace(/^\\((.*?)\\)$/, '$1')
           .replace(/^\\)\\)(.*?)\\(\\($/, '$1')
           .replace(/^\\)(.*?)\\($/, '$1')
-          .replace(/^\\{\\{(.*?)\\}\\}/, '$1');
-          
+          .replace(/^\\{\\{(.*?)\\}\\}/, '$1')
+          .trim();
+
         if (depth === 0) {
-          mdLines.push('# ' + clean);
-        } else if (depth === 1) {
-          mdLines.push('## ' + clean);
-        } else {
-          mdLines.push('  '.repeat(depth - 1) + '- ' + clean);
-        }
-      }
-      return mdLines.join('\\n');
-    }
-
-    const markdownText = parseToMarkdown(rawContent);
-    let mmInstance = null;
-
-    function renderMarkmap() {
-      try {
-        if (window.markmap && window.markmap.Transformer) {
-          const { Transformer, Markmap } = window.markmap;
-          const transformer = new Transformer();
-          const { root } = transformer.transform(markdownText);
-          const svgEl = document.getElementById('mindmapSvg');
-          svgEl.innerHTML = '';
-          mmInstance = Markmap.create(svgEl, {
-            autoFit: true,
-            duration: 250,
-            nodeMinHeight: 28,
-            spacingVertical: 14,
-            spacingHorizontal: 85,
-            paddingX: 16
-          }, root);
-          return;
+          rootNode.name = clean || rootNode.name;
+          continue;
         }
-      } catch (err) {
-        console.warn('Markmap load error:', err);
+
+        const newNode = { name: clean, children: [], collapsed: false };
+        while (stack.length > depth) stack.pop();
+        stack[stack.length - 1].node.children.push(newNode);
+        stack.push({ node: newNode, depth: depth });
       }
-      renderFallbackTree();
+
+      return rootNode;
     }
 
-    function renderFallbackTree() {
-      const svg = document.getElementById('mindmapSvg');
-      svg.innerHTML = '';
-      const lines = markdownText.split('\\n').filter(l => l.trim().length > 0);
-      const rootNode = { name: '${artifact.title}', children: [] };
-      const stack = [{ node: rootNode, depth: 0 }];
+    const rootTree = parseTree(rawContent);
+    const svgEl = document.getElementById('mindmapSvg');
+    const viewerCard = document.getElementById('viewerCard');
 
-      lines.forEach((line) => {
-        let depth = 1;
-        let text = line.trim();
-        if (text.startsWith('# ')) {
-          rootNode.name = text.replace('# ', '').trim();
-          return;
-        } else if (text.startsWith('## ')) {
-          depth = 1;
-          text = text.replace('## ', '').trim();
-        } else {
-          const leadSpaces = line.search(/\\S/);
-          depth = 2 + Math.floor(leadSpaces / 2);
-          text = text.replace(/^[-*]\\s*/, '').trim();
+    let currentScale = 1;
+    let currentX = 0;
+    let currentY = 0;
+    let isPanning = false;
+    let startPointerX = 0;
+    let startPointerY = 0;
+    let startPosX = 0;
+    let startPosY = 0;
+    let bbox = { minX: 0, maxX: 800, minY: 0, maxY: 600 };
+
+    function renderTree() {
+      svgEl.innerHTML = '';
+      
+      const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+      g.setAttribute('id', 'viewportGroup');
+      svgEl.appendChild(g);
+
+      // Measure node pill dimensions based on text length
+      function measure(node, depth = 0) {
+        node.depth = depth;
+        const textLen = (node.name || '').length;
+        const isRoot = depth === 0;
+        const isPillar = depth === 1;
+        const fontFactor = isRoot ? 9.5 : isPillar ? 8.2 : 7.6;
+        const pad = isRoot ? 40 : 28;
+        node.w = Math.max(isRoot ? 160 : 120, Math.min(360, textLen * fontFactor + pad));
+        node.h = isRoot ? 44 : isPillar ? 38 : 34;
+        if (node.children && !node.collapsed) {
+          node.children.forEach(c => measure(c, depth + 1));
         }
-        const newNode = { name: text, children: [] };
-        while (stack.length > depth) stack.pop();
-        stack[stack.length - 1].node.children.push(newNode);
-        stack.push({ node: newNode, depth: depth });
-      });
+      }
+      measure(rootTree, 0);
 
+      // Layout coordinates
       let curY = 40;
-      function layout(node, depth = 0) {
-        node.depth = depth;
-        node.x = 60 + depth * 220;
-        if (!node.children || node.children.length === 0) {
-          node.y = curY;
-          curY += 46;
+      const HORIZ_GAP = 75;
+      const VERT_GAP = 14;
+
+      function layout(node, startX = 40) {
+        node.x = startX;
+        if (!node.children || node.children.length === 0 || node.collapsed) {
+          node.y = curY + node.h / 2;
+          curY += node.h + VERT_GAP;
         } else {
-          node.children.forEach(c => layout(c, depth + 1));
+          const nextX = startX + node.w + HORIZ_GAP;
+          node.children.forEach(c => layout(c, nextX));
           const firstY = node.children[0].y;
           const lastY = node.children[node.children.length - 1].y;
           node.y = (firstY + lastY) / 2;
         }
       }
-      layout(rootNode);
+      layout(rootTree, 40);
 
-      const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-      g.setAttribute('id', 'treeGroup');
-      svg.appendChild(g);
+      // Calculate Bounding Box
+      let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+      function findBounds(node) {
+        minX = Math.min(minX, node.x);
+        maxX = Math.max(maxX, node.x + node.w + 20);
+        minY = Math.min(minY, node.y - node.h / 2);
+        maxY = Math.max(maxY, node.y + node.h / 2);
+        if (node.children && !node.collapsed) {
+          node.children.forEach(findBounds);
+        }
+      }
+      findBounds(rootTree);
+      bbox = { minX, maxX, minY, maxY };
 
+      // Draw links and nodes
       function draw(node) {
-        if (node.children) {
-          node.children.forEach(c => {
+        if (node.children && node.children.length > 0 && !node.collapsed) {
+          node.children.forEach(child => {
+            const x1 = node.x + node.w;
+            const y1 = node.y;
+            const x2 = child.x;
+            const y2 = child.y;
+            const dx = (x2 - x1) * 0.48;
             const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-            const x1 = node.x + 130, y1 = node.y;
-            const x2 = c.x, y2 = c.y;
-            const dx = (x2 - x1) * 0.5;
             path.setAttribute('d', 'M ' + x1 + ' ' + y1 + ' C ' + (x1 + dx) + ' ' + y1 + ', ' + (x2 - dx) + ' ' + y2 + ', ' + x2 + ' ' + y2);
-            path.setAttribute('class', 'markmap-link');
+            path.setAttribute('class', 'mindmap-link');
             g.appendChild(path);
-            draw(c);
+            draw(child);
           });
         }
-        const foreign = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
-        foreign.setAttribute('x', node.x - 10);
-        foreign.setAttribute('y', node.y - 18);
-        foreign.setAttribute('width', '200');
-        foreign.setAttribute('height', '40');
-        foreign.innerHTML = '<div class="markmap-node" data-depth="' + node.depth + '"><div class="markmap-foreign">' + node.name + '</div></div>';
-        g.appendChild(foreign);
+
+        const nodeG = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        nodeG.setAttribute('class', 'mindmap-node depth-' + node.depth);
+
+        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        rect.setAttribute('x', node.x);
+        rect.setAttribute('y', node.y - node.h / 2);
+        rect.setAttribute('width', node.w);
+        rect.setAttribute('height', node.h);
+        rect.setAttribute('rx', node.depth === 0 ? '12' : '8');
+        rect.setAttribute('ry', node.depth === 0 ? '12' : '8');
+        rect.setAttribute('class', 'node-rect ' + (node.depth === 0 ? 'root' : node.depth === 1 ? 'pillar' : 'leaf'));
+        nodeG.appendChild(rect);
+
+        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        text.setAttribute('x', node.x + node.w / 2);
+        text.setAttribute('y', node.y + (node.depth === 0 ? 5.5 : 4.5));
+        text.setAttribute('text-anchor', 'middle');
+        text.setAttribute('class', 'node-text');
+        text.textContent = node.name;
+        nodeG.appendChild(text);
+
+        // Collapsible Badge Button
+        if (node.children && node.children.length > 0) {
+          const badgeG = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+          badgeG.setAttribute('transform', 'translate(' + (node.x + node.w) + ', ' + node.y + ')');
+          badgeG.style.cursor = 'pointer';
+          badgeG.onclick = (e) => {
+            e.stopPropagation();
+            node.collapsed = !node.collapsed;
+            renderTree();
+          };
+
+          const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+          circle.setAttribute('r', '7.5');
+          circle.setAttribute('class', 'badge-circle');
+          badgeG.appendChild(circle);
+
+          const sign = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+          sign.setAttribute('y', '3.5');
+          sign.setAttribute('text-anchor', 'middle');
+          sign.setAttribute('class', 'badge-text');
+          sign.textContent = node.collapsed ? '+' : '−';
+          badgeG.appendChild(sign);
+
+          nodeG.appendChild(badgeG);
+        }
+
+        g.appendChild(nodeG);
+      }
+      draw(rootTree);
+
+      applyTransform();
+    }
+
+    function applyTransform() {
+      const g = document.getElementById('viewportGroup');
+      if (g) {
+        g.setAttribute('transform', 'translate(' + currentX + ', ' + currentY + ') scale(' + currentScale + ')');
       }
-      draw(rootNode);
-      svg.setAttribute('viewBox', '0 0 ' + Math.max(800, curY * 1.8) + ' ' + Math.max(500, curY + 60));
+    }
+
+    function fitView() {
+      const cw = viewerCard.clientWidth || 1000;
+      const ch = viewerCard.clientHeight || 550;
+      const tw = (bbox.maxX - bbox.minX) + 80;
+      const th = (bbox.maxY - bbox.minY) + 80;
+
+      currentScale = Math.min(1.15, Math.max(0.35, Math.min((cw - 60) / tw, (ch - 60) / th)));
+      currentX = (cw - tw * currentScale) / 2 + 20 * currentScale;
+      currentY = (ch - th * currentScale) / 2 + 20 * currentScale;
+      applyTransform();
     }
 
     function zoomIn() {
-      if (mmInstance) mmInstance.rescale(1.25);
+      currentScale = Math.min(currentScale * 1.25, 3.5);
+      applyTransform();
     }
+
     function zoomOut() {
-      if (mmInstance) mmInstance.rescale(0.8);
-    }
-    function fitView() {
-      if (mmInstance) mmInstance.fit();
+      currentScale = Math.max(currentScale * 0.8, 0.25);
+      applyTransform();
     }
+
     function toggleTheme() {
       document.body.classList.toggle('theme-dark');
       const isDark = document.body.classList.contains('theme-dark');
       const btn = document.getElementById('themeToggleBtn');
       if (btn) btn.textContent = isDark ? '☀️ Light Mode' : '🌙 Poster Dark';
     }
+
     function copySource() {
       navigator.clipboard.writeText(rawContent).then(() => {
-        alert('Mind map source copied to clipboard!');
+        alert('Mind map source code copied to clipboard!');
       });
     }
 
+    // Pointer Interaction (Pan & Zoom)
+    viewerCard.addEventListener('pointerdown', (e) => {
+      isPanning = true;
+      startPointerX = e.clientX;
+      startPointerY = e.clientY;
+      startPosX = currentX;
+      startPosY = currentY;
+      viewerCard.setPointerCapture(e.pointerId);
+    });
+
+    viewerCard.addEventListener('pointermove', (e) => {
+      if (!isPanning) return;
+      currentX = startPosX + (e.clientX - startPointerX);
+      currentY = startPosY + (e.clientY - startPointerY);
+      applyTransform();
+    });
+
+    const endPan = (e) => {
+      isPanning = false;
+      try { viewerCard.releasePointerCapture(e.pointerId); } catch (_) {}
+    };
+    viewerCard.addEventListener('pointerup', endPan);
+    viewerCard.addEventListener('pointercancel', endPan);
+
+    viewerCard.addEventListener('wheel', (e) => {
+      e.preventDefault();
+      const delta = e.deltaY < 0 ? 1.12 : 0.89;
+      const newScale = Math.min(Math.max(currentScale * delta, 0.25), 3.5);
+
+      const rect = viewerCard.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+
+      currentX = mouseX - (mouseX - currentX) * (newScale / currentScale);
+      currentY = mouseY - (mouseY - currentY) * (newScale / currentScale);
+      currentScale = newScale;
+      applyTransform();
+    }, { passive: false });
+
+    window.addEventListener('resize', fitView);
     window.addEventListener('load', () => {
-      setTimeout(renderMarkmap, 60);
+      renderTree();
+      setTimeout(fitView, 50);
     });
-    if (document.readyState === 'complete') renderMarkmap();
+    if (document.readyState === 'complete') {
+      renderTree();
+      setTimeout(fitView, 50);
+    }
   </script>
 </body>
 </html>`;
-                fs.writeFileSync(path.join(this.baseDir, `${artifact.id}.html`), htmlMindmap, 'utf-8');
-            }
-            else if (artifact.type === 'graph') {
-                const badgeLabel = '📊 Architecture Graph';
-                const htmlGraph = `<!DOCTYPE html>
+        }
+        if (artifact.type === 'graph') {
+            const badgeLabel = '📊 Architecture Graph';
+            return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -442,7 +723,7 @@ export class ArtifactManager {
       transition: background 0.3s ease;
     }
     .header { text-align: center; margin-bottom: 14px; }
-    h1 { font-size: 19px; color: var(--text-main); margin: 0 0 6px 0; font-weight: 800; }
+    h1 { font-size: 19px; color: var(--text-main); margin: 0 0 6px 0; font-weight: 800; letter-spacing: -0.3px; }
     .badge {
       font-size: 11px;
       background: var(--badge-bg);
@@ -464,35 +745,22 @@ export class ArtifactManager {
     .btn:hover { background: var(--btn-hover); transform: translateY(-1px); }
     .btn:active { transform: translateY(0); }
     .viewer-card {
-      width: 100%; max-width: 1150px; height: 72vh; min-height: 520px;
+      width: 100%; max-width: 1300px; height: 76vh; min-height: 520px;
       position: relative; overflow: hidden; border-radius: 18px;
       background: var(--bg-viewport); backdrop-filter: blur(20px);
       border: 1px solid var(--border-viewport);
       box-shadow: var(--shadow-viewport);
-      cursor: grab; user-select: none; touch-action: none;
+      display: flex; align-items: center; justify-content: center;
+      touch-action: none; cursor: grab;
     }
-    .viewer-card.grabbing { cursor: grabbing; }
-    .canvas-wrap {
+    .viewer-card:active { cursor: grabbing; }
+    .diagram-container {
       width: 100%; height: 100%;
       display: flex; align-items: center; justify-content: center;
       transform-origin: center center;
-      will-change: transform;
-    }
-    .canvas-wrap.animating {
-      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-    }
-    .mermaid { width: 100%; text-align: center; }
-    .mermaid svg { max-width: 100%; height: auto; }
-    .help-hint {
-      position: absolute; bottom: 12px; right: 14px;
-      font-size: 11px; color: var(--text-muted); pointer-events: none;
-      background: rgba(255, 255, 255, 0.75); padding: 3px 8px; border-radius: 6px;
-      border: 1px solid rgba(0,0,0,0.05);
-    }
-    body.theme-dark .help-hint {
-      background: rgba(18, 24, 38, 0.7);
-      border-color: rgba(255, 255, 255, 0.08);
+      transition: transform 0.05s ease-out;
     }
+    .mermaid { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
   </style>
 </head>
 <body>
@@ -503,133 +771,64 @@ export class ArtifactManager {
   <div class="controls">
     <button class="btn" onclick="zoomIn()">🔍 Zoom +</button>
     <button class="btn" onclick="zoomOut()">🔍 Zoom -</button>
-    <button class="btn" onclick="resetZoom()">⛶ Reset</button>
+    <button class="btn" onclick="resetZoom()">⛶ Fit / Reset</button>
     <button class="btn" onclick="toggleTheme()" id="themeToggleBtn">🌙 Poster Dark</button>
   </div>
   <div class="viewer-card" id="viewerCard">
-    <div class="canvas-wrap" id="canvasWrap">
-      <pre class="mermaid" id="mermaidDiagram">
-${artifact.content.trim()}
-      </pre>
+    <div class="diagram-container" id="diagramContainer">
+      <pre class="mermaid">${artifact.content.replace(/<antri_artifact[\s\S]*?>|<\/antri_artifact>/gi, '').trim()}</pre>
     </div>
-    <div class="help-hint">🖱️ Drag to pan · Scroll to zoom</div>
   </div>
   <script>
     let scale = 1.0;
     let posX = 0;
     let posY = 0;
     let isDragging = false;
-    let startPointerX = 0;
-    let startPointerY = 0;
-    let startPosX = 0;
-    let startPosY = 0;
-
-    const activeTouches = new Map();
-    let initialPinchDist = 0;
-    let initialPinchScale = 1.0;
-
+    let startX = 0;
+    let startY = 0;
+    const container = document.getElementById('diagramContainer');
     const viewerCard = document.getElementById('viewerCard');
-    const canvasWrap = document.getElementById('canvasWrap');
 
     function updateTransform(animate = false) {
       if (animate) {
-        canvasWrap.classList.add('animating');
-        setTimeout(() => canvasWrap.classList.remove('animating'), 320);
+        container.style.transition = 'transform 0.25s cubic-bezier(0.2, 0, 0, 1)';
       } else {
-        canvasWrap.classList.remove('animating');
+        container.style.transition = 'none';
       }
-      canvasWrap.style.transform = 'translate3d(' + posX + 'px, ' + posY + 'px, 0) scale(' + scale + ')';
+      container.style.transform = 'translate(' + posX + 'px, ' + posY + 'px) scale(' + scale + ')';
     }
 
     viewerCard.addEventListener('pointerdown', (e) => {
-      activeTouches.set(e.pointerId, { x: e.clientX, y: e.clientY });
-      try { viewerCard.setPointerCapture(e.pointerId); } catch {}
-
-      if (activeTouches.size === 1) {
-        isDragging = true;
-        viewerCard.classList.add('grabbing');
-        startPointerX = e.clientX;
-        startPointerY = e.clientY;
-        startPosX = posX;
-        startPosY = posY;
-      } else if (activeTouches.size === 2) {
-        isDragging = false;
-        viewerCard.classList.remove('grabbing');
-        const pts = Array.from(activeTouches.values());
-        initialPinchDist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
-        initialPinchScale = scale;
-      }
+      isDragging = true;
+      startX = e.clientX - posX;
+      startY = e.clientY - posY;
+      viewerCard.setPointerCapture(e.pointerId);
     });
 
     viewerCard.addEventListener('pointermove', (e) => {
-      if (!activeTouches.has(e.pointerId)) return;
-      activeTouches.set(e.pointerId, { x: e.clientX, y: e.clientY });
-
-      if (activeTouches.size === 1 && isDragging) {
-        const dx = e.clientX - startPointerX;
-        const dy = e.clientY - startPointerY;
-        posX = startPosX + dx;
-        posY = startPosY + dy;
-        updateTransform(false);
-      } else if (activeTouches.size === 2) {
-        const pts = Array.from(activeTouches.values());
-        const currentDist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
-        if (initialPinchDist > 0) {
-          scale = Math.min(Math.max(initialPinchScale * (currentDist / initialPinchDist), 0.2), 4.0);
-          updateTransform(false);
-        }
-      }
+      if (!isDragging) return;
+      posX = e.clientX - startX;
+      posY = e.clientY - startY;
+      updateTransform(false);
     });
 
-    function endPointer(e) {
-      activeTouches.delete(e.pointerId);
-      try { viewerCard.releasePointerCapture(e.pointerId); } catch {}
-      if (activeTouches.size === 0) {
-        isDragging = false;
-        viewerCard.classList.remove('grabbing');
-      } else if (activeTouches.size === 1) {
-        isDragging = true;
-        viewerCard.classList.add('grabbing');
-        const remaining = Array.from(activeTouches.values())[0];
-        startPointerX = remaining.x;
-        startPointerY = remaining.y;
-        startPosX = posX;
-        startPosY = posY;
-      }
-    }
-
-    viewerCard.addEventListener('pointerup', endPointer);
-    viewerCard.addEventListener('pointercancel', endPointer);
+    const endDrag = (e) => {
+      isDragging = false;
+      try { viewerCard.releasePointerCapture(e.pointerId); } catch (_) {}
+    };
+    viewerCard.addEventListener('pointerup', endDrag);
+    viewerCard.addEventListener('pointercancel', endDrag);
 
     viewerCard.addEventListener('wheel', (e) => {
       e.preventDefault();
-      const delta = e.deltaY < 0 ? 1.15 : 0.87;
-      const newScale = Math.min(Math.max(scale * delta, 0.2), 4.0);
-      
-      const rect = viewerCard.getBoundingClientRect();
-      const mouseX = e.clientX - rect.left - rect.width / 2;
-      const mouseY = e.clientY - rect.top - rect.height / 2;
-      
-      posX = mouseX - (mouseX - posX) * (newScale / scale);
-      posY = mouseY - (mouseY - posY) * (newScale / scale);
-      scale = newScale;
+      const delta = e.deltaY < 0 ? 1.12 : 0.89;
+      scale = Math.min(Math.max(scale * delta, 0.25), 4.0);
       updateTransform(false);
     }, { passive: false });
 
-    function zoomIn() {
-      scale = Math.min(scale * 1.25, 4.0);
-      updateTransform(true);
-    }
-    function zoomOut() {
-      scale = Math.max(scale * 0.8, 0.2);
-      updateTransform(true);
-    }
-    function resetZoom() {
-      scale = 1.0;
-      posX = 0;
-      posY = 0;
-      updateTransform(true);
-    }
+    function zoomIn() { scale = Math.min(scale * 1.25, 4.0); updateTransform(true); }
+    function zoomOut() { scale = Math.max(scale * 0.8, 0.25); updateTransform(true); }
+    function resetZoom() { scale = 1.0; posX = 0; posY = 0; updateTransform(true); }
     function toggleTheme() {
       document.body.classList.toggle('theme-dark');
       const isDark = document.body.classList.contains('theme-dark');
@@ -637,32 +836,12 @@ ${artifact.content.trim()}
       if (btn) btn.textContent = isDark ? '☀️ Light Mode' : '🌙 Poster Dark';
     }
 
-    mermaid.initialize({
-      startOnLoad: true,
-      theme: 'base',
-      securityLevel: 'loose',
-      themeVariables: {
-        darkMode: false,
-        background: '#ffffff',
-        primaryColor: '#6366f1',
-        primaryTextColor: '#0f172a',
-        primaryBorderColor: '#4f46e5',
-        lineColor: '#6366f1',
-        secondaryColor: '#0ea5e9',
-        tertiaryColor: '#10b981',
-        fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-        fontSize: '14px'
-      }
-    });
+    mermaid.initialize({ startOnLoad: true, theme: 'base', securityLevel: 'loose' });
   </script>
 </body>
 </html>`;
-                fs.writeFileSync(path.join(this.baseDir, `${artifact.id}.html`), htmlGraph, 'utf-8');
-            }
         }
-        catch { }
-        this.persistIndex();
-        return artifact;
+        return artifact.content;
     }
     getArtifact(id) {
         return this.artifacts.get(id) || null;