vg-coder-cli 2.0.37 → 2.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vg-coder-cli",
-  "version": "2.0.37",
+  "version": "2.0.38",
   "description": "🚀 CLI tool to analyze projects, concatenate source files, count tokens, and export HTML with syntax highlighting and copy functionality",
   "main": "src/index.js",
   "bin": {
@@ -16,7 +16,7 @@
     "dev": "nodemon src/index.js",
     "build:extension": "cd vetgo-auto && npm run build",
     "build:copy": "node scripts/build.js",
-    "build": "npm run build:inject && npm run install:local",
+    "build": "npm run build:extension && npm run build:copy && npm run build:inject && npm run install:local",
     "push": "npm run build && npm pack && npm publish",
     "build:inject": "gulp"
   },
@@ -41,6 +41,8 @@
     "fs-extra": "^11.3.3",
     "highlight.js": "^11.9.0",
     "ignore": "^5.3.0",
+    "markdown-it": "^14.0.0",
+    "mermaid": "^11.4.1",
     "node-pty": "^1.1.0",
     "ora": "^5.4.1",
     "path": "^0.12.7",

package/src/server/views/css/code-viewer.css

@@ -56,3 +56,218 @@
     color: var(--ios-red, #ff3b30);
     font-family: monospace;
 }
+
+/* Markdown Styles */
+.cv-markdown {
+    background: var(--ios-bg, #0d1117);
+    padding: 20px;
+    min-height: 100%;
+}
+
+.markdown-body {
+    color: var(--text-primary, #c9d1d9);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.6;
+    max-width: 980px;
+    word-wrap: break-word;
+}
+
+/* Headers */
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+    line-height: 1.25;
+    color: var(--text-primary, #c9d1d9);
+}
+
+.markdown-body h1 {
+    font-size: 2em;
+    border-bottom: 1px solid var(--border-color, #30363d);
+    padding-bottom: 0.3em;
+}
+
+.markdown-body h2 {
+    font-size: 1.5em;
+    border-bottom: 1px solid var(--border-color, #30363d);
+    padding-bottom: 0.3em;
+}
+
+.markdown-body h3 { font-size: 1.25em; }
+.markdown-body h4 { font-size: 1em; }
+.markdown-body h5 { font-size: 0.875em; }
+.markdown-body h6 { font-size: 0.85em; color: var(--text-secondary, #8b949e); }
+
+/* Paragraphs */
+.markdown-body p {
+    margin-top: 0;
+    margin-bottom: 16px;
+}
+
+/* Lists */
+.markdown-body ul,
+.markdown-body ol {
+    margin-top: 0;
+    margin-bottom: 16px;
+    padding-left: 2em;
+}
+
+.markdown-body li {
+    margin-top: 0.25em;
+}
+
+.markdown-body li > p {
+    margin-top: 16px;
+}
+
+.markdown-body li + li {
+    margin-top: 0.25em;
+}
+
+/* Code */
+.markdown-body code {
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-size: 85%;
+    background-color: rgba(110, 118, 129, 0.4);
+    border-radius: 6px;
+    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+}
+
+.markdown-body pre {
+    margin-top: 0;
+    margin-bottom: 16px;
+    padding: 16px;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+    background-color: var(--code-block-bg, #161b22);
+    border-radius: 6px;
+}
+
+.markdown-body pre code {
+    display: block;
+    padding: 0;
+    margin: 0;
+    font-size: 100%;
+    word-break: normal;
+    white-space: pre;
+    background: transparent;
+    border: 0;
+}
+
+/* Links */
+.markdown-body a {
+    color: var(--link-color, #58a6ff);
+    text-decoration: none;
+}
+
+.markdown-body a:hover {
+    text-decoration: underline;
+}
+
+/* Blockquotes */
+.markdown-body blockquote {
+    margin: 0 0 16px 0;
+    padding: 0 1em;
+    color: var(--text-secondary, #8b949e);
+    border-left: 0.25em solid var(--border-color, #30363d);
+}
+
+.markdown-body blockquote > :first-child {
+    margin-top: 0;
+}
+
+.markdown-body blockquote > :last-child {
+    margin-bottom: 0;
+}
+
+/* Tables */
+.markdown-body table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    margin-top: 0;
+    margin-bottom: 16px;
+}
+
+.markdown-body table th,
+.markdown-body table td {
+    padding: 6px 13px;
+    border: 1px solid var(--border-color, #30363d);
+}
+
+.markdown-body table th {
+    font-weight: 600;
+    background-color: var(--table-header-bg, #161b22);
+}
+
+.markdown-body table tr {
+    background-color: var(--table-row-bg, #0d1117);
+    border-top: 1px solid var(--border-color, #30363d);
+}
+
+.markdown-body table tr:nth-child(2n) {
+    background-color: var(--table-row-alt-bg, #161b22);
+}
+
+/* Horizontal Rule */
+.markdown-body hr {
+    height: 0.25em;
+    padding: 0;
+    margin: 24px 0;
+    background-color: var(--border-color, #30363d);
+    border: 0;
+}
+
+/* Images */
+.markdown-body img {
+    max-width: 100%;
+    box-sizing: content-box;
+    background-color: var(--ios-bg, #0d1117);
+}
+
+/* Strong/Bold */
+.markdown-body strong {
+    font-weight: 600;
+}
+
+/* Emphasis/Italic */
+.markdown-body em {
+    font-style: italic;
+}
+
+/* Mermaid Diagrams */
+.markdown-body .mermaid-diagram {
+    margin: 16px 0;
+    padding: 20px;
+    background-color: var(--code-block-bg, #161b22);
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow-x: auto;
+    min-height: 100px;
+}
+
+.markdown-body .mermaid-diagram svg {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Mermaid error state */
+.markdown-body .mermaid-error {
+    margin: 16px 0;
+    padding: 16px;
+    background-color: rgba(255, 59, 48, 0.1);
+    border: 1px solid var(--ios-red, #ff3b30);
+    border-radius: 6px;
+    color: var(--ios-red, #ff3b30);
+    font-family: monospace;
+    font-size: 12px;
+}

package/src/server/views/js/features/code-viewer.js

@@ -2,6 +2,10 @@ import { API_BASE } from '../config.js';
 import { showToast, getById } from '../utils.js';
 // Import Highlight.js core
 import hljs from 'highlight.js/lib/core';
+// Import markdown-it for rendering .md files
+import markdownit from 'markdown-it';
+// Import mermaid for rendering diagrams
+import mermaid from 'mermaid';
 
 // Import common languages to reduce bundle size
 import javascript from 'highlight.js/lib/languages/javascript';
@@ -28,6 +32,79 @@ hljs.registerLanguage('python', python);
 hljs.registerLanguage('sql', sql);
 hljs.registerLanguage('markdown', markdown);
 
+// Initialize markdown-it with safe settings
+const md = markdownit({
+    html: false,        // Disable HTML tags in source for security (prevents XSS)
+    breaks: true,       // Convert line breaks to <br>
+    linkify: true,      // Auto-convert URLs to links
+    typographer: true,  // Enable smart quotes and other typographic replacements
+    highlight: function (str, lang) {
+        // Use highlight.js for code blocks within markdown
+        if (lang && hljs.getLanguage(lang)) {
+            try {
+                return hljs.highlight(str, { language: lang }).value;
+            } catch (__) {}
+        }
+        return ''; // Use default escaping
+    }
+});
+
+// Initialize mermaid with dark theme
+mermaid.initialize({
+    startOnLoad: false,      // We'll manually trigger rendering
+    theme: 'dark',           // Match VG Coder's dark theme
+    securityLevel: 'loose',  // Allow interaction in shadow DOM
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
+});
+
+/**
+ * Render mermaid diagrams in the container
+ * Finds all code.language-mermaid blocks and replaces them with rendered SVG
+ */
+async function renderMermaidDiagrams(container) {
+    const mermaidBlocks = container.querySelectorAll('code.language-mermaid');
+    
+    if (mermaidBlocks.length === 0) {
+        return; // No mermaid diagrams to render
+    }
+    
+    console.log(`[Mermaid] Found ${mermaidBlocks.length} diagram(s) to render`);
+    
+    for (let i = 0; i < mermaidBlocks.length; i++) {
+        const block = mermaidBlocks[i];
+        const code = block.textContent;
+        const pre = block.parentElement;
+        
+        try {
+            // Use mermaid.render() which is more compatible with shadow DOM
+            const id = `mermaid-diagram-${Date.now()}-${i}`;
+            const { svg, bindFunctions } = await mermaid.render(id, code);
+            
+            // Create wrapper div for mermaid
+            const wrapper = document.createElement('div');
+            wrapper.className = 'mermaid-diagram';
+            wrapper.innerHTML = svg;
+            
+            // Replace pre/code with wrapper
+            pre.replaceWith(wrapper);
+            
+            // Bind any interactive functions if present
+            if (bindFunctions) {
+                bindFunctions(wrapper);
+            }
+            
+            console.log(`[Mermaid] Successfully rendered diagram ${i + 1}`);
+        } catch (err) {
+            console.error(`[Mermaid] Failed to render diagram ${i + 1}:`, err);
+            // On error, show error message instead of broken diagram
+            const errorDiv = document.createElement('div');
+            errorDiv.className = 'mermaid-error';
+            errorDiv.textContent = `Mermaid rendering error: ${err.message}`;
+            pre.replaceWith(errorDiv);
+        }
+    }
+}
+
 export async function openFileInViewer(path) {
     const container = getById('code-viewer-container');
     if (!container) return;
@@ -41,22 +118,41 @@ export async function openFileInViewer(path) {
 
         if (res.ok) {
             const ext = path.split('.').pop().toLowerCase();
-            const language = getLanguageFromExt(ext);
-            
-            // Escape HTML tags to prevent XSS and ensure correct rendering
-            const escapedCode = escapeHtml(data.content);
             
-            // Render Code Block
-            container.innerHTML = `
-                <div class="cv-wrapper">
-                    <pre><code class="language-${language}">${escapedCode}</code></pre>
-                </div>
-            `;
+            // Check if file is markdown
+            if (ext === 'md') {
+                // Render as markdown
+                const htmlContent = md.render(data.content);
+                
+                container.innerHTML = `
+                    <div class="cv-wrapper cv-markdown">
+                        <div class="markdown-body">
+                            ${htmlContent}
+                        </div>
+                    </div>
+                `;
+                
+                // Render mermaid diagrams (if any)
+                await renderMermaidDiagrams(container);
+            } else {
+                // Render as code with syntax highlighting
+                const language = getLanguageFromExt(ext);
+                
+                // Escape HTML tags to prevent XSS and ensure correct rendering
+                const escapedCode = escapeHtml(data.content);
+                
+                // Render Code Block
+                container.innerHTML = `
+                    <div class="cv-wrapper">
+                        <pre><code class="language-${language}">${escapedCode}</code></pre>
+                    </div>
+                `;
 
-            // Apply Highlight.js
-            const codeBlock = container.querySelector('code');
-            if(codeBlock) {
-                hljs.highlightElement(codeBlock);
+                // Apply Highlight.js
+                const codeBlock = container.querySelector('code');
+                if(codeBlock) {
+                    hljs.highlightElement(codeBlock);
+                }
             }
 
         } else {

package/src/server/views/js/features/keyboard-shortcuts.js

@@ -112,10 +112,8 @@ function toggleDashboard() {
     
     if (isVisible) {
         appRoot.classList.remove('visible');
-        console.log('[Keyboard] Dashboard hidden');
     } else {
         appRoot.classList.add('visible');
-        console.log('[Keyboard] Dashboard shown');
     }
 }
 
@@ -132,7 +130,6 @@ function openGitPanel() {
     // First, make sure dashboard is visible
     if (!appRoot.classList.contains('visible')) {
         appRoot.classList.add('visible');
-        console.log('[Keyboard] Dashboard opened');
     }
     
     // Then activate Git panel using getRoot() to query in Shadow DOM
@@ -183,7 +180,6 @@ function handleKeyDown(event) {
     }
     
     const shortcutKey = getShortcutKey(event);
-    console.log('[Keyboard] Shortcut key detected:', shortcutKey);
     
     if (!shortcutKey) return;
     
@@ -191,7 +187,6 @@ function handleKeyDown(event) {
     const action = SHORTCUTS[shortcutKey];
     
     if (!action) {
-        console.log('[Keyboard] No action registered for:', shortcutKey);
         return;
     }
     
@@ -199,7 +194,6 @@ function handleKeyDown(event) {
     event.preventDefault();
     event.stopPropagation();
     
-    console.log(`[Keyboard] Shortcut triggered: ${shortcutKey} -> ${action}`);
     
     // Execute action
     switch (action) {
@@ -213,7 +207,7 @@ function handleKeyDown(event) {
             toggleShortcutsHelp();
             break;
         default:
-            console.warn(`[Keyboard] Unknown action: ${action}`);
+            return;
     }
 }
 
@@ -231,12 +225,10 @@ function toggleShortcutsHelp() {
     
     if (isVisible) {
         helpPanel.classList.remove('visible');
-        console.log('[Keyboard] Help panel hidden');
     } else {
         // Render shortcuts before showing
         renderHelpPanel();
         helpPanel.classList.add('visible');
-        console.log('[Keyboard] Help panel shown');
     }
 }
 

package/src/server/views/js/features/project-panel.js

@@ -45,7 +45,7 @@ export function initProjectPanel() {
         if (getById('project-panel-selector')) {
             loadProjectsIntoSelector();
         }
-    }, 5000);
+    }, 30000);
 
     console.log('[ProjectPanel] Initialized with polling (Socket.IO not available in shadow DOM)');
 }
@@ -131,35 +131,27 @@ async function loadProjectsIntoSelector() {
 
     // Save current selection to preserve it
     const currentValue = selector.value;
-    console.log('[ProjectPanel] Current selected project:', currentValue);
-
+    
     try {
         const apiBase = window.API_BASE || 'http://localhost:6868';
-        console.log('[ProjectPanel] Fetching projects from:', `${apiBase}/api/projects`);
         
         const response = await fetch(`${apiBase}/api/projects`);
         const data = await response.json();
         
-        console.log('[ProjectPanel] Received projects:', data);
-        
         if (data.projects && data.projects.length > 0) {
             const options = data.projects.map(p => 
                 `<option value="${p.id}" ${p.isActive ? 'selected' : ''}>${p.name}</option>`
             ).join('');
             
-            console.log('[ProjectPanel] Updating selector with', data.projects.length, 'projects');
             selector.innerHTML = options;
             
             // IMPORTANT: Restore previous selection if it still exists
             // This prevents auto-switching when new projects join
             if (currentValue && data.projects.some(p => p.id === currentValue)) {
                 selector.value = currentValue;
-                console.log('[ProjectPanel] ✅ Restored previous selection:', currentValue);
             } else {
-                console.log('[ProjectPanel] ℹ️ Using active project from API:', data.activeProjectId);
             }
         } else {
-            console.warn('[ProjectPanel] No projects returned from API');
             selector.innerHTML = '<option value="">No projects</option>';
         }
     } catch (err) {