vg-coder-cli 2.0.34 → 2.0.36

package/src/server/views/dashboard.html

@@ -18,122 +18,79 @@
 
     <!-- MAIN DASHBOARD INTERFACE -->
     <div class="split-layout">
-        <div class="left-panel">
-            <div class="container">
-                <div class="header">
-                    <div class="header-top-row">
-                        <div class="header-left-group">
-                            <span class="status" id="status" style="font-size: 14px;">●</span>
-                            <div class="project-switcher">
-                                <select id="project-selector" class="project-selector" onchange="window.switchProject(this.value)" title="Switch Project">
-                                    <option value="">Loading...</option>
-                                </select>
-                                <span class="project-count" id="project-count">1 project</span>
-                            </div>
-                        </div>
-                        <div class="header-actions">
-                            <button class="stop-server-btn" id="stop-server-btn" onclick="window.stopServer()" title="Stop Server">🛑</button>
-                            <button class="theme-toggle" id="theme-toggle" title="Toggle Dark Mode">
-                                <span id="theme-icon">🌙</span>
-                            </button>
-                        </div>
-                    </div>
-                    <div class="header-bottom-row">
-                        <div class="project-meta" id="project-meta">...</div>
-                        <div id="project-name" style="display: none;"></div>
-                    </div>
-                </div>
+        
+        <!-- TOOL WINDOW BAR (IDE-Style Sidebar) -->
+        <div id="tool-window-bar" class="tool-window-bar">
+            <button class="tool-window-icon" data-panel="project" data-tooltip="Project" title="Project">
+                📁
+            </button>
+            <button class="tool-window-icon" data-panel="git" data-tooltip="Git" title="Git">
+                🔀
+            </button>
+            <button class="tool-window-icon" data-panel="commands" data-tooltip="Commands" title="Saved Commands">
+                ⚡
+            </button>
+            
+            <!-- Action Buttons at bottom -->
+            <div class="tool-window-spacer"></div>
+            <button class="tool-window-action-btn" id="stop-server-btn" onclick="window.stopServer()" title="Stop Server">🛑</button>
+            <button class="tool-window-action-btn" id="theme-toggle" title="Toggle Dark Mode">
+                <span id="theme-icon">🌙</span>
+            </button>
+        </div>
 
-                <!-- Saved Commands -->
-                <div class="endpoint-card saved-commands-panel">
-                    <div class="saved-commands-header">
-                        <div class="saved-commands-title"><span class="command-icon-header">💾</span><span>Saved Commands</span></div>
-                        <div class="saved-commands-actions">
-                            <button class="btn-new-terminal" onclick="createNewTerminal()" title="New Terminal">🖥️</button>
-                            <button class="btn-add-command" onclick="openAddCommandModal()" title="Add Command">➕</button>
-                        </div>
+        <!-- TOOL PANEL CONTAINER (Expandable Panels) -->
+        <div id="tool-panel-container" class="tool-panel-container">
+            <!-- Project Panel -->
+            <div id="tool-panel-project" class="tool-panel">
+                <div class="tool-panel-header">
+                    <div class="tool-panel-title">
+                        <span>📁</span>
+                        <span>Project</span>
                     </div>
-                    <div class="saved-commands-content" id="saved-commands-content">
-                        <div id="commands-list" class="commands-list"></div>
-                        <div class="empty-state" id="commands-empty-state" style="display: none;">
-                            <p style="color: #888; text-align: center; padding: 15px 10px; font-size: 12px; margin: 0;">Click ➕ to add a command</p>
-                        </div>
+                    <div class="tool-panel-actions">
+                        <button class="tool-panel-action-btn" onclick="window.closeToolPanels()" title="Close">✕</button>
                     </div>
                 </div>
+                <div id="project-panel-content" class="tool-panel-content">
+                    <!-- Project tree will be rendered here by project-panel.js -->
+                </div>
+            </div>
 
-                <div class="system-prompt-card">
-                    <div class="system-prompt-header" onclick="toggleSystemPrompt()">
-                        <div class="header-title-group">
-                            <button class="btn-icon-head" onclick="copySystemPromptFromHeader(event)" title="Copy System Prompt">📋</button>
-                            <h2>System Prompt</h2>
-                        </div>
-                        <span class="toggle-icon" id="toggle-icon">▼</span>
+            <!-- Git Panel -->
+            <div id="tool-panel-git" class="tool-panel">
+                <div class="tool-panel-header">
+                    <div class="tool-panel-title">
+                        <span>🔀</span>
+                        <span>Git</span>
                     </div>
-                    <div class="system-prompt-content" id="system-prompt-content">
-                        <div class="prompt-text" id="prompt-text"></div>
-                        <button class="btn btn-copy" onclick="copySystemPrompt(event)">
-                            <span id="copy-icon">📋</span>
-                            <span id="copy-text">Copy System Prompt</span>
-                        </button>
+                    <div class="tool-panel-actions">
+                        <button class="tool-panel-action-btn" id="git-panel-refresh-btn" title="Refresh">🔄</button>
+                        <button class="tool-panel-action-btn" onclick="window.closeToolPanels()" title="Close">✕</button>
                     </div>
                 </div>
+                <div id="git-panel-content" class="tool-panel-content">
+                    <!-- Git view will be rendered here by git-panel.js -->
+                </div>
+            </div>
 
-                <div class="endpoints">
-                    <div class="endpoint-card">
-                        <div class="endpoint-header">
-                            <div class="endpoint-title-group"><span class="method post">POST</span><span class="endpoint-path">/execute</span></div>
-                        </div>
-                        <div class="form-group">
-                            <textarea id="execute-bash" placeholder="mkdir -p src/test&#10;echo 'Hello' > src/test/hello.txt"></textarea>
-                        </div>
-                        <div class="btn-group">
-                            <button class="btn" onclick="testExecute(event)"><span>▶️</span> Run</button>
-                            <button class="btn" onclick="executeFromClipboard(event)"><span>📋</span> Paste & Run</button>
-                        </div>
-                        <div class="response" id="execute-response"></div>
-                    </div>
-
-                    <div class="endpoint-card">
-                        <div class="endpoint-header">
-                            <div class="endpoint-title-group">
-                                <span class="method get" style="background: var(--ios-blue); color: white;">GET</span>
-                                <span class="endpoint-path">/structure</span>
-                            </div>
-                            <button class="btn-icon-head" onclick="copySelectedStructure(event)" title="Copy Selected">📋</button>
-                        </div>
-                        <div class="form-group">
-                            <input type="text" id="structure-path" value="." placeholder="Project path">
-                        </div>
-                        <div class="btn-group">
-                            <button class="btn" onclick="testStructure(event)"><span>🌳</span> View</button>
-                        </div>
-                        <div class="tree-container" id="structure-tree" style="display: none;">
-                            <div class="tree-header"><span>Tree</span><span class="tree-total-tokens" id="total-tokens-badge">0 tokens</span></div>
-                            <div class="tree-content" id="tree-content"></div>
-                        </div>
-                        <div class="response" id="structure-response" style="display: none;"></div>
+            <!-- Commands Panel -->
+            <div id="tool-panel-commands" class="tool-panel">
+                <div class="tool-panel-header">
+                    <div class="tool-panel-title">
+                        <span>⚡</span>
+                        <span>Commands</span>
                     </div>
-
-                    <div class="endpoint-card">
-                        <div class="endpoint-header">
-                            <div class="endpoint-title-group"><span class="method post">POST</span><span class="endpoint-path">/analyze</span></div>
-                            <button class="btn-icon-head" onclick="testAnalyze(event)" title="Download Project Source">📥</button>
-                        </div>
-                        <div class="form-group">
-                            <input type="text" id="analyze-path" value="." placeholder="Project path (e.g. .)">
-                        </div>
-                        <div class="btn-group">
-                            <button class="btn btn-copy" onclick="copyAnalyzeResult(event)">
-                                <span id="analyze-copy-icon">📋</span>
-                                <span id="analyze-copy-text">Copy Text</span>
-                            </button>
-                        </div>
-                        <div class="response" id="analyze-response"></div>
+                    <div class="tool-panel-actions">
+                        <button class="tool-panel-action-btn" onclick="window.closeToolPanels()" title="Close">✕</button>
                     </div>
                 </div>
-                <div style="height: 50px;"></div>
+                <div id="commands-panel-content" class="tool-panel-content">
+                    <!-- Content will be rendered by commands-panel.js -->
+                </div>
             </div>
         </div>
+
         <div id="resize-handler" class="resize-handler"></div>
 
         <div class="right-panel">
@@ -173,6 +130,25 @@
         </div>
     </div>
     
+    <!-- Keyboard Shortcuts Help Overlay -->
+    <div id="shortcuts-help" class="vg-shortcuts-help">
+        <div class="vg-shortcuts-panel">
+            <div class="vg-shortcuts-header">
+                <div class="vg-shortcuts-title">
+                    <span>⌨️</span>
+                    <span>Keyboard Shortcuts</span>
+                </div>
+                <button class="vg-shortcuts-close" onclick="window.toggleShortcutsHelp()">×</button>
+            </div>
+            <div id="shortcuts-list" class="vg-shortcuts-list">
+                <!-- Shortcuts will be rendered dynamically by keyboard-shortcuts.js -->
+            </div>
+            <div class="vg-shortcuts-footer">
+                Press <kbd class="vg-shortcut-key">Cmd</kbd> + <kbd class="vg-shortcut-key">/</kbd> to toggle this help
+            </div>
+        </div>
+    </div>
+    
     <!-- Scripts injected via Gulp -->
 </body>
 </html>

package/src/server/views/js/api.js

@@ -98,6 +98,19 @@ export async function commitChanges(message) {
     return true;
 }
 
+export async function gitPush(remote = 'origin', branch = null) {
+    const res = await fetch(`${API_BASE}/api/git/push`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ remote, branch })
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || 'Push failed');
+    }
+    return await res.json();
+}
+
 export async function saveTreeState(excludedPaths) {
     const res = await fetch(`${API_BASE}/api/tree-state/save`, {
         method: 'POST',
@@ -131,3 +144,16 @@ export async function copyToClipboard(text) {
 export async function readFromClipboard() {
     return await navigator.clipboard.readText();
 }
+
+export async function countTokens(text) {
+    const res = await fetch(`${API_BASE}/api/count-tokens`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text })
+    });
+    if (!res.ok) {
+        throw new Error('Failed to count tokens');
+    }
+    const data = await res.json();
+    return data.tokens || 0;
+}

package/src/server/views/js/event-protocol.js

@@ -11,6 +11,7 @@ export const EVENT_TYPES = {
     TERMINAL_NEW: 'vg:terminal-new',
     TERMINAL_EXECUTE: 'vg:terminal-execute',
     FEATURE_TOGGLE: 'vg:feature-toggle',
+    COPY_PROMPT: 'vg:copy-prompt',
 };
 
 /**

package/src/server/views/js/features/bubble-features/copy-prompt-feature.js

@@ -0,0 +1,14 @@
+import { EVENT_TYPES } from '../../event-protocol.js';
+
+/**
+ * Copy System Prompt Feature
+ * Copies the system prompt to clipboard
+ */
+export const CopyPromptFeature = {
+    id: 'copy-prompt',
+    label: '📋 Copy System Prompt',
+    tooltip: 'Copy System Prompt',
+    eventType: EVENT_TYPES.COPY_PROMPT,
+    enabled: true,
+    order: 30,
+};

package/src/server/views/js/features/bubble-features/index.js

@@ -117,9 +117,14 @@ export class FeatureRegistry {
 // Create singleton registry
 export const featureRegistry = new FeatureRegistry();
 
+// Import features
+import { CopyPromptFeature } from './copy-prompt-feature.js';
+
 // Register built-in features
 featureRegistry.register(PasteRunFeature);
 featureRegistry.register(TerminalFeature);
+featureRegistry.register(CopyPromptFeature);
 
 // Export for external registration
-export { PasteRunFeature, TerminalFeature };
+export { PasteRunFeature, TerminalFeature, CopyPromptFeature };
+

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

@@ -0,0 +1,63 @@
+import { getById } from '../utils.js';
+
+let isInitialized = false;
+
+/**
+ * Initialize Commands Panel
+ */
+export function initCommandsPanel() {
+    if (isInitialized) return;
+    
+    console.log('[CommandsPanel] Initializing...');
+    
+    // Render panel content
+    renderCommandsPanel();
+    
+    isInitialized = true;
+    console.log('[CommandsPanel] Initialized successfully');
+}
+
+/**
+ * Render Commands Panel structure
+ */
+function renderCommandsPanel() {
+    const container = getById('commands-panel-content');
+    if (!container) {
+        console.error('[CommandsPanel] Container not found');
+        return;
+    }
+
+    // Render the same structure as old saved-commands
+    container.innerHTML = `
+        <div class="commands-panel-header">
+            <button class="commands-panel-btn" onclick="createNewTerminal()" title="New Terminal">
+                🖥️ New Terminal
+            </button>
+            <button class="commands-panel-btn" onclick="openAddCommandModal()" title="Add Command">
+                ➕ Add Command
+            </button>
+        </div>
+        <div class="saved-commands-content">
+            <div id="commands-list" class="commands-list"></div>
+            <div class="commands-empty-state" id="commands-empty-state" style="display: none;">
+                <p style="color: #888; text-align: center; padding: 15px 10px; font-size: 12px; margin: 0;">Click ➕ to add a command</p>
+            </div>
+        </div>
+    `;
+    
+    // Load saved commands after rendering
+    setTimeout(() => {
+        if (window.loadSavedCommands) {
+            window.loadSavedCommands();
+        }
+    }, 100);
+}
+
+/**
+ * Refresh commands list
+ */
+export function refreshCommandsList() {
+    if (window.loadSavedCommands) {
+        window.loadSavedCommands();
+    }
+}