Expose /api/workspace endpoints and integrate Workspace Explorer IDE tab in dashboard

backend.py

@@ -815,6 +815,61 @@ async def list_models(authorization: str = Header(None)):
 # /health — Health check
 # ---------------------------------------------------------------------------
 
+@app.get("/api/workspace/tree")
+async def get_workspace_tree():
+    def build_tree(current_path: Path, relative_to: Path) -> dict:
+        name = current_path.name
+        try:
+            rel_path = str(current_path.relative_to(relative_to)).replace("\\", "/")
+        except ValueError:
+            rel_path = ""
+        if rel_path == ".":
+            rel_path = ""
+            
+        if current_path.is_dir():
+            children = []
+            try:
+                for child in sorted(current_path.iterdir(), key=lambda x: (not x.is_dir(), x.name)):
+                    if child.name in [".git", "node_modules", ".next", "__pycache__", ".agents", ".gemini"]:
+                        continue
+                    children.append(build_tree(child, relative_to))
+            except Exception:
+                pass
+            return {
+                "name": name or "workspace",
+                "path": rel_path,
+                "type": "directory",
+                "children": children
+            }
+        else:
+            return {
+                "name": name,
+                "path": rel_path,
+                "type": "file",
+                "size": current_path.stat().st_size if current_path.exists() else 0
+            }
+            
+    try:
+        w_path = Path(WORKSPACE_DIR).resolve()
+        if not w_path.exists():
+            w_path.mkdir(parents=True, exist_ok=True)
+        return build_tree(w_path, w_path)
+    except Exception as e:
+        return {"error": str(e)}
+
+
+@app.get("/api/workspace/file")
+async def get_workspace_file(path: str):
+    try:
+        safe_p = _safe_path(path)
+        if not safe_p.exists() or not safe_p.is_file():
+            raise HTTPException(status_code=404, detail="File not found")
+        content = safe_p.read_text(encoding="utf-8", errors="replace")
+        return {"path": path, "content": content}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
 # ---------------------------------------------------------------------------
 # Dashboard and Status API
 # ---------------------------------------------------------------------------
@@ -858,24 +913,34 @@ DASHBOARD_HTML = """
         </div>
     </header>
 
-    <main class="max-w-7xl w-full mx-auto px-6 mt-8 flex-1 grid grid-cols-1 lg:grid-cols-3 gap-8">
-        <!-- Left: Models Grid -->
-        <div class="lg:col-span-2 space-y-6">
+    <!-- Navigation Tabs -->
+    <div class="border-b border-gray-800 max-w-7xl w-full mx-auto px-6 mt-6 flex space-x-6 text-sm">
+        <button onclick="switchTab('models')" id="tab-btn-models" class="pb-3 border-b-2 border-blue-500 font-semibold text-blue-400 transition-all">NIM Models</button>
+        <button onclick="switchTab('logs')" id="tab-btn-logs" class="pb-3 border-b-2 border-transparent text-gray-400 hover:text-gray-200 font-semibold transition-all">Live Logs</button>
+        <button onclick="switchTab('explorer')" id="tab-btn-explorer" class="pb-3 border-b-2 border-transparent text-gray-400 hover:text-gray-200 font-semibold flex items-center space-x-1 transition-all">
+            <span>Workspace Explorer (IDE)</span>
+            <span class="px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-400 border border-blue-500/20 text-[10px] font-bold">VS Code View</span>
+        </button>
+    </div>
+
+    <!-- MAIN SECTIONS -->
+    <main class="max-w-7xl w-full mx-auto px-6 mt-8 flex-1">
+        
+        <!-- SECTION: Models -->
+        <div id="section-models" class="space-y-6">
             <div class="flex items-center justify-between">
                 <h2 class="text-lg font-bold tracking-tight text-gray-300">Nvidia NIM Models & Health Status</h2>
-                <span class="text-xs text-gray-500">Checked every 5 mins</span>
+                <span class="text-xs text-gray-500">Checked every 15 mins</span>
             </div>
-            
-            <div id="models-container" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div id="models-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 <!-- Dynamically loaded models go here -->
             </div>
         </div>
 
-        <!-- Right: Log Viewer -->
-        <div class="space-y-6 flex flex-col h-full">
+        <!-- SECTION: Logs -->
+        <div id="section-logs" class="hidden space-y-6">
             <h2 class="text-lg font-bold tracking-tight text-gray-300">System Activity Logs</h2>
-            
-            <div class="border border-gray-800 rounded-lg overflow-hidden bg-gray-950 flex flex-col flex-1 min-h-[400px]">
+            <div class="border border-gray-800 rounded-lg overflow-hidden bg-gray-950 flex flex-col min-h-[500px]">
                 <div class="bg-gray-900 px-4 py-2 border-b border-gray-800 flex items-center justify-between">
                     <span class="text-xs text-gray-400 font-semibold code-font">agent-stdout.log</span>
                     <div class="flex space-x-1.5">
@@ -884,14 +949,81 @@ DASHBOARD_HTML = """
                         <span class="w-2.5 h-2.5 rounded-full bg-green-500/30"></span>
                     </div>
                 </div>
-                <div id="terminal-content" class="p-4 flex-1 overflow-y-auto code-font text-xs text-green-400 bg-black/90 space-y-1 select-all">
+                <div id="terminal-content" class="p-4 flex-1 overflow-y-auto code-font text-xs text-green-400 bg-black/90 space-y-1 select-all h-[450px]">
                     <!-- Logs go here -->
                 </div>
             </div>
         </div>
+
+        <!-- SECTION: Workspace Explorer -->
+        <div id="section-explorer" class="hidden space-y-6">
+            <div class="flex items-center justify-between">
+                <h2 class="text-lg font-bold tracking-tight text-gray-300">Visual Workspace IDE</h2>
+                <button onclick="refreshFileTree()" class="text-xs px-2.5 py-1 rounded bg-blue-500/10 text-blue-400 border border-blue-500/20 hover:bg-blue-500/20 transition-all font-semibold">
+                    🔄 Refresh Tree
+                </button>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 border border-gray-800 rounded-xl bg-gray-950 overflow-hidden h-[600px]">
+                <!-- File Tree Sidebar -->
+                <div class="border-r border-gray-800 flex flex-col bg-gray-950 h-full">
+                    <div class="px-4 py-2 border-b border-gray-800 bg-gray-900 text-xs font-semibold tracking-wider text-gray-400 code-font">
+                        📁 EXPLORER: WORKSPACE
+                    </div>
+                    <div id="file-tree" class="p-3 flex-1 overflow-y-auto space-y-0.5 select-none">
+                        <!-- Tree will be loaded here -->
+                        <span class="text-xs text-gray-500 italic px-2">Loading directory tree...</span>
+                    </div>
+                </div>
+
+                <!-- Editor panel -->
+                <div class="md:col-span-2 flex flex-col bg-black/40 h-full">
+                    <div class="px-4 py-2 border-b border-gray-800 bg-gray-900 flex items-center justify-between">
+                        <span id="editor-title" class="text-xs font-semibold text-gray-400 code-font">📄 Welcome screen</span>
+                        <div class="flex space-x-1.5">
+                            <span class="w-2 h-2 rounded-full bg-gray-700"></span>
+                            <span class="w-2 h-2 rounded-full bg-gray-700"></span>
+                        </div>
+                    </div>
+                    <div class="flex-1 p-4 overflow-auto code-font text-xs text-gray-200">
+                        <pre id="editor-content" class="whitespace-pre overflow-x-auto select-text h-[500px]">
+Welcome to Claude Code Workspace Explorer.
+Select a file from the sidebar explorer on the left to read its code contents in real-time.
+                        </pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+
     </main>
 
     <script>
+        let currentTab = 'models';
+
+        function switchTab(tabId) {
+            currentTab = tabId;
+            // Toggle sections
+            document.getElementById('section-models').classList.add('hidden');
+            document.getElementById('section-logs').classList.add('hidden');
+            document.getElementById('section-explorer').classList.add('hidden');
+            
+            document.getElementById('tab-btn-models').className = 'pb-3 border-b-2 border-transparent text-gray-400 hover:text-gray-200 font-semibold transition-all';
+            document.getElementById('tab-btn-logs').className = 'pb-3 border-b-2 border-transparent text-gray-400 hover:text-gray-200 font-semibold transition-all';
+            document.getElementById('tab-btn-explorer').className = 'pb-3 border-b-2 border-transparent text-gray-400 hover:text-gray-200 font-semibold flex items-center space-x-1 transition-all';
+
+            if (tabId === 'models') {
+                document.getElementById('section-models').classList.remove('hidden');
+                document.getElementById('tab-btn-models').className = 'pb-3 border-b-2 border-blue-500 font-semibold text-blue-400 transition-all';
+            } else if (tabId === 'logs') {
+                document.getElementById('section-logs').classList.remove('hidden');
+                document.getElementById('tab-btn-logs').className = 'pb-3 border-b-2 border-blue-500 font-semibold text-blue-400 transition-all';
+            } else if (tabId === 'explorer') {
+                document.getElementById('section-explorer').classList.remove('hidden');
+                document.getElementById('tab-btn-explorer').className = 'pb-3 border-b-2 border-blue-500 font-semibold text-blue-400 flex items-center space-x-1 transition-all';
+                refreshFileTree();
+            }
+        }
+
         async function fetchSystemData() {
             try {
                 const res = await fetch('/health');
@@ -914,7 +1046,7 @@ DASHBOARD_HTML = """
                 
                 models.forEach(model => {
                     const isRec = model.is_recommended;
-                    const isOnline = model.status === 'ONLINE';
+                    const isOnline = model.status.includes('ONLINE');
                     
                     const card = document.createElement('div');
                     card.className = `p-4 border rounded-xl bg-gray-950 transition-all ${
@@ -944,6 +1076,7 @@ DASHBOARD_HTML = """
         }
 
         async function fetchLogs() {
+            if (currentTab !== 'logs') return;
             try {
                 const res = await fetch('/api/logs');
                 if (!res.ok) return;
@@ -960,6 +1093,71 @@ DASHBOARD_HTML = """
             }
         }
 
+        // File Explorer Logic
+        async function refreshFileTree() {
+            try {
+                const res = await fetch('/api/workspace/tree');
+                if (!res.ok) return;
+                const root = await res.json();
+                
+                const container = document.getElementById('file-tree');
+                container.innerHTML = renderNode(root);
+            } catch (e) {
+                console.error(e);
+            }
+        }
+
+        function renderNode(node, depth = 0) {
+            const isDir = node.type === 'directory';
+            const icon = isDir ? '📁' : '📄';
+            const indent = depth * 12;
+            
+            let html = `
+                <div class="flex items-center py-1 px-2 hover:bg-gray-800 rounded cursor-pointer transition-all text-xs" 
+                     style="padding-left: ${indent}px"
+                     onclick="${isDir ? `toggleDir('${node.path}')` : `openFile('${node.path}')`}">
+                    <span class="mr-2">${icon}</span>
+                    <span class="truncate ${isDir ? 'text-gray-300 font-medium' : 'text-gray-400'}">${node.name}</span>
+                </div>
+            `;
+            
+            if (isDir && node.children && node.children.length > 0) {
+                html += `<div id="dir-${node.path.replace(/\\/g, '-').replace(/\\//g, '-')}" class="space-y-0.5">`;
+                node.children.forEach(child => {
+                    html += renderNode(child, depth + 1);
+                });
+                html += `</div>`;
+            } else if (isDir && (!node.children || node.children.length === 0)) {
+                html += `<div class="text-[10px] text-gray-600 italic" style="padding-left: ${indent + 16}px">(empty)</div>`;
+            }
+            
+            return html;
+        }
+
+        async function openFile(path) {
+            document.getElementById('editor-title').innerText = `📄 ${path}`;
+            document.getElementById('editor-content').innerText = "Loading file content...";
+            try {
+                const res = await fetch(`/api/workspace/file?path=${encodeURIComponent(path)}`);
+                if (!res.ok) {
+                    document.getElementById('editor-content').innerText = "Error: Failed to fetch file content.";
+                    return;
+                }
+                const data = await res.json();
+                document.getElementById('editor-content').innerText = data.content;
+            } catch (e) {
+                document.getElementById('editor-content').innerText = `Error: ${e.message}`;
+            }
+        }
+
+        function toggleDir(path) {
+            const safeId = `dir-${path.replace(/\\/g, '-').replace(/\\//g, '-')}`;
+            const elem = document.getElementById(safeId);
+            if (elem) {
+                elem.classList.toggle('hidden');
+            }
+        }
+
         setInterval(fetchSystemData, 3000);
         setInterval(fetchModels, 3000);
         setInterval(fetchLogs, 2000);