npm - antri_cli - Versions diffs - 1.57.6 → 1.57.7 - Mend

antri_cli 1.57.6 → 1.57.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/dist/cli/shortcuts.d.ts.map +1 -1
package/dist/cli/shortcuts.js +12 -10
package/dist/cli/shortcuts.js.map +1 -1
package/dist/core/agent.d.ts.map +1 -1
package/dist/core/agent.js +17 -12
package/dist/core/agent.js.map +1 -1
package/dist/core/artifactManager.d.ts +1 -0
package/dist/core/artifactManager.d.ts.map +1 -1
package/dist/core/artifactManager.js +372 -292
package/dist/core/artifactManager.js.map +1 -1
package/dist/core/updater.d.ts +1 -1
package/dist/core/updater.js +1 -1
package/dist/desktop/public/index.html +1 -1
package/dist/desktop/server.d.ts.map +1 -1
package/dist/desktop/server.js +3 -624
package/dist/desktop/server.js.map +1 -1
package/package.json +1 -1

package/dist/core/artifactManager.js CHANGED Viewed

@@ -45,23 +45,34 @@ export class ArtifactManager {
     saveArtifact(artifact) {
         this.ensureDirectory();
         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 +92,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 +116,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 +132,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 +166,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 +290,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(rootNode);
-      svg.setAttribute('viewBox', '0 0 ' + Math.max(800, curY * 1.8) + ' ' + Math.max(500, curY + 60));
+      draw(rootTree);
+      applyTransform();
+    }
+    function applyTransform() {
+      const g = document.getElementById('viewportGroup');
+      if (g) {
+        g.setAttribute('transform', 'translate(' + currentX + ', ' + currentY + ') scale(' + currentScale + ')');
+      }
+    }
+    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 +624,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 +646,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 +672,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 +737,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;