vg-coder-cli 2.0.9 → 2.0.11

package/scripts/build.js

@@ -0,0 +1,40 @@
+const AdmZip = require('adm-zip');
+const path = require('path');
+const fs = require('fs-extra');
+
+async function build() {
+    try {
+        const rootDir = path.resolve(__dirname, '..');
+        const zipPath = path.join(rootDir, 'vg-coder.zip');
+        const targetDir = path.join(rootDir, 'src', 'server', 'views', 'vg-coder');
+
+        console.log('🏗️  Starting build process...');
+
+        // 1. Check if zip exists
+        if (!fs.existsSync(zipPath)) {
+            console.error('⚠️  vg-coder.zip not found at root. Skipping extension extraction.');
+            // We don't exit 1 here to allow build to continue if zip is missing in dev
+            return;
+        }
+
+        // 2. Clean old directory
+        if (fs.existsSync(targetDir)) {
+            console.log('🧹 Cleaning old extension directory...');
+            fs.removeSync(targetDir);
+        }
+
+        // 3. Unzip
+        console.log('📦 Unzipping vg-coder.zip...');
+        const zip = new AdmZip(zipPath);
+        zip.extractAllTo(targetDir, true);
+
+        console.log(`✅ Extension extracted to: ${targetDir}`);
+        console.log('🚀 Build completed successfully!');
+
+    } catch (error) {
+        console.error('❌ Build failed:', error);
+        process.exit(1);
+    }
+}
+
+build();

package/src/server/api-server.js

@@ -60,6 +60,21 @@ class ApiServer {
       });
     });
 
+    // NEW: Get Extension Path
+    this.app.get('/api/extension-path', (req, res) => {
+      try {
+        const extensionPath = path.join(__dirname, 'views', 'vg-coder');
+        const exists = fs.existsSync(extensionPath);
+        
+        res.json({
+          path: extensionPath,
+          exists: exists
+        });
+      } catch (error) {
+        res.status(500).json({ error: error.message });
+      }
+    });
+
     // Analyze endpoint - returns project.txt file
     this.app.post('/api/analyze', async (req, res) => {
       try {

package/src/server/views/css/iframe.css

@@ -0,0 +1,84 @@
+/* Right Panel Layout */
+.right-panel {
+    flex: 1;
+    height: 100%;
+    background: #fff;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+/* AI Header Styles */
+.ai-header {
+    height: 50px;
+    background: var(--ios-bg);
+    border-bottom: 1px solid var(--ios-separator);
+    display: flex;
+    align-items: center;
+    padding: 0 15px;
+    gap: 10px;
+    justify-content: space-between;
+}
+
+.ai-select-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 1;
+}
+
+.ai-select {
+    padding: 6px 12px;
+    border-radius: 8px;
+    border: 1px solid var(--ios-separator);
+    background: var(--ios-card);
+    color: var(--text-primary);
+    font-size: 13px;
+    font-weight: 500;
+    min-width: 200px;
+    outline: none;
+    cursor: pointer;
+}
+
+/* Iframe Container */
+.ai-iframe-container {
+    flex: 1;
+    position: relative;
+    width: 100%;
+    background: #fff;
+}
+
+.right-panel iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    position: relative;
+    z-index: 2;
+}
+
+/* Placeholder underneath iframe */
+.iframe-placeholder {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: var(--text-secondary);
+    z-index: 1;
+    width: 100%;
+}
+
+.link-fallback {
+    color: var(--ios-blue);
+    text-decoration: none;
+    margin-top: 10px;
+    display: inline-block;
+}
+
+/* Mobile Responsive adjustment for right panel */
+@media (max-width: 768px) {
+    .right-panel {
+        flex: 1;
+        height: 50vh;
+    }
+}

package/src/server/views/css/structure.css

@@ -1,74 +1,83 @@
-/* Tree View Styles */
+/* Tree View Styles Compact */
 .tree-container {
-    margin-top: 20px;
+    margin-top: 15px;
     background: var(--ios-input-bg);
-    border-radius: 12px;
+    border-radius: 8px;
     overflow: hidden;
-    border: 1px solid rgba(0,0,0,0.05);
+    border: 1px solid rgba(0, 0, 0, 0.05);
 }
 
 .tree-header {
-    padding: 12px 16px;
-    background: rgba(0,0,0,0.03);
-    border-bottom: 1px solid rgba(0,0,0,0.05);
+    padding: 8px 12px;
+    background: rgba(0, 0, 0, 0.03);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     font-weight: 600;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: var(--text-primary);
+    font-size: 12px;
 }
 
 .tree-content {
-    padding: 10px;
+    padding: 5px;
     font-family: 'SF Mono', 'Menlo', monospace;
-    font-size: 13px;
+    font-size: 11px;
+    /* Smaller tree font */
     overflow-x: auto;
+    max-height: 400px;
+    overflow-y: auto;
 }
 
 .tree-ul {
     list-style: none;
-    padding-left: 20px;
+    padding-left: 16px;
+    /* Reduced indentation */
     margin: 0;
     border-left: 1px solid var(--ios-separator);
 }
 
 /* Root level shouldn't have border */
-.tree-content > .tree-ul {
+.tree-content>.tree-ul {
     border-left: none;
     padding-left: 0;
 }
 
 .tree-li {
-    margin: 4px 0;
+    margin: 1px 0;
+    /* Compact spacing */
     position: relative;
 }
 
 .tree-item-row {
     display: flex;
     align-items: center;
-    padding: 4px 8px;
-    border-radius: 6px;
+    padding: 2px 6px;
+    /* Compact row padding */
+    border-radius: 4px;
     cursor: pointer;
     transition: background 0.1s;
+    line-height: 1.2;
 }
 
 .tree-item-row:hover {
-    background: rgba(0,0,0,0.05);
+    background: rgba(0, 0, 0, 0.05);
 }
 
 /* Checkbox Style */
 .tree-checkbox {
-    margin-right: 8px;
+    margin-right: 6px;
     cursor: pointer;
-    width: 16px;
-    height: 16px;
+    width: 14px;
+    /* Smaller checkbox */
+    height: 14px;
     accent-color: var(--ios-blue);
 }
 
 .tree-icon {
-    margin-right: 8px;
-    font-size: 14px;
-    width: 16px;
+    margin-right: 6px;
+    font-size: 12px;
+    width: 14px;
     text-align: center;
 }
 
@@ -77,46 +86,63 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    margin-right: 10px;
+    margin-right: 8px;
     color: var(--text-primary);
 }
 
 /* Token Badges */
 .token-badge {
-    font-size: 11px;
-    padding: 2px 6px;
-    border-radius: 4px;
+    font-size: 9px;
+    /* Very small badge */
+    padding: 1px 4px;
+    border-radius: 3px;
     font-weight: 600;
-    min-width: 40px;
+    min-width: 30px;
     text-align: center;
 }
 
-.token-low { background: rgba(52, 199, 89, 0.15); color: var(--ios-green); } /* < 2k */
-.token-med { background: rgba(255, 149, 0, 0.15); color: #FF9500; }         /* 2k - 5k */
-.token-high { background: rgba(255, 59, 48, 0.15); color: var(--ios-red); }  /* > 5k */
+.token-low {
+    background: rgba(52, 199, 89, 0.15);
+    color: var(--ios-green);
+}
+
+/* < 2k */
+.token-med {
+    background: rgba(255, 149, 0, 0.15);
+    color: #FF9500;
+}
+
+/* 2k - 5k */
+.token-high {
+    background: rgba(255, 59, 48, 0.15);
+    color: var(--ios-red);
+}
+
+/* > 5k */
 
 /* Folder toggle states */
-.tree-li > .tree-ul {
-    display: block; /* Default expanded */
+.tree-li>.tree-ul {
+    display: block;
+    /* Default expanded */
 }
 
-.tree-li.collapsed > .tree-ul {
+.tree-li.collapsed>.tree-ul {
     display: none;
 }
 
 .arrow {
     display: inline-block;
-    width: 12px;
-    font-size: 10px;
+    width: 10px;
+    font-size: 8px;
     color: var(--text-secondary);
     transition: transform 0.2s;
-    margin-right: 4px;
+    margin-right: 2px;
 }
 
-.tree-li.collapsed > .tree-item-row .arrow {
+.tree-li.collapsed>.tree-item-row .arrow {
     transform: rotate(-90deg);
 }
 
 .tree-li:not(.has-children) .arrow {
     visibility: hidden;
-}
+}