V2

.github/workflows/astro.yml

@@ -1,15 +1,10 @@
 name: Deploy to GitHub Pages
 
 on:
-  # Trigger the workflow every time you push to the `main` branch
-  # Using a different branch name? Replace `main` with your branch’s name
   push:
     branches: [ master ]
-  # Allows you to run this workflow manually from the Actions tab on GitHub.
   workflow_dispatch:
 
-
-# Allow this job to clone the repo and create a page deployment
 permissions:
   contents: read
   pages: write
@@ -19,21 +14,37 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout your repository using git
+      - name: Checkout
         uses: actions/checkout@v4
-      - name: Install, build, and upload your site
-        uses: withastro/action@v3
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 9
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
         with:
-          path: . # The root location of your Astro project inside the repository. (optional)
-          node-version: 22 # The specific version of Node that should be used to build your site. Defaults to 22. (optional)
-          package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
+          path: ./dist
 
   deploy:
-    needs: build
-    runs-on: ubuntu-latest
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
     steps:
       - name: Deploy to GitHub Pages
         id: deployment

App.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { Sidebar } from './components/Sidebar';
+import { Dashboard } from './components/Dashboard';
+import { BrowserSession } from './components/BrowserSession';
+import { FileScanner } from './components/FileScanner';
+import { Architecture } from './components/Architecture';
+import { Logs } from './components/Logs';
+import { LandingPage } from './components/LandingPage';
+import { View } from './types';
+
+const App: React.FC = () => {
+  const [currentView, setCurrentView] = useState<View>(View.LANDING);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+
+  const renderView = () => {
+    switch (currentView) {
+      case View.DASHBOARD: return <Dashboard />;
+      case View.BROWSER: return <BrowserSession />;
+      case View.FILE_SCANNER: return <FileScanner />;
+      case View.ARCHITECTURE: return <Architecture />;
+      case View.LOGS: return <Logs />;
+      default: return <Dashboard />;
+    }
+  };
+
+  // If on Landing Page, render full screen without sidebar
+  if (currentView === View.LANDING) {
+    return <LandingPage onNavigate={setCurrentView} />;
+  }
+
+  // Main App Layout
+  return (
+    <div className="min-h-screen bg-slate-950 text-slate-200 flex font-sans">
+      <Sidebar 
+        currentView={currentView} 
+        onChangeView={setCurrentView}
+        collapsed={sidebarCollapsed}
+        setCollapsed={setSidebarCollapsed}
+      />
+
+      <main 
+        className={`flex-1 transition-all duration-300 ${
+          sidebarCollapsed ? 'ml-16' : 'ml-64'
+        }`}
+      >
+        <header className="h-16 border-b border-slate-800 bg-slate-950/50 backdrop-blur-md sticky top-0 z-40 px-8 flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <h1 className="text-lg font-medium text-white tracking-wide">
+              {currentView === View.DASHBOARD && 'Platform Overview'}
+              {currentView === View.BROWSER && 'Secure Remote Browser'}
+              {currentView === View.FILE_SCANNER && 'Safe File Viewer'}
+              {currentView === View.ARCHITECTURE && 'Architecture Diagram'}
+              {currentView === View.LOGS && 'Security Logs'}
+            </h1>
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="flex flex-col items-end">
+              <span className="text-sm font-medium text-white">Admin User</span>
+              <span className="text-xs text-slate-500">KubeBrowse Cluster 1</span>
+            </div>
+            <div className="w-9 h-9 rounded-full bg-gradient-to-tr from-indigo-500 to-purple-500 border-2 border-slate-800 shadow-sm"></div>
+          </div>
+        </header>
+
+        <div className="p-8 max-w-7xl mx-auto">
+          {renderView()}
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default App;

README.md

@@ -1,19 +1,20 @@
-## BrowserSec
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
 
-[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
+# Run and deploy your AI Studio app
 
+This contains everything you need to run your app locally.
 
+View your app in AI Studio: https://ai.studio/apps/drive/1G205aDT99ugrYOqd4O8LlrKMHt9zMWKF
 
+## Run Locally
 
-### 🧞 Commands
+**Prerequisites:**  Node.js
 
-All commands are run from the root of the project, from a terminal:
 
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `pnpm install`             | Installs dependencies                            |
-| `pnpm dev`             | Starts local dev server at `localhost:4321`      |
-| `pnpm build`           | Build your production site to `./dist/`          |
-| `pnpm preview`         | Preview your build locally, before deploying     |
-| `pnpm astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `pnpm astro -- --help` | Get help using the Astro CLI                     |
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

components/Architecture.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { Card } from './ui/Card';
+import { Database, Server, Globe, Shield, Layers, Workflow } from 'lucide-react';
+
+export const Architecture: React.FC = () => {
+  return (
+    <div className="space-y-6 animate-[fadeIn_0.5s_ease-out]">
+      <div className="mb-8">
+        <h2 className="text-2xl font-bold text-white">System Architecture</h2>
+        <p className="text-slate-400">Visualizing the KubeBrowse internal Kubernetes flow and isolation layers.</p>
+      </div>
+
+      {/* Interactive-looking Diagram */}
+      <div className="bg-slate-900 border border-slate-800 rounded-xl p-8 relative overflow-hidden">
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#1e293b_1px,transparent_1px),linear-gradient(to_bottom,#1e293b_1px,transparent_1px)] bg-[size:24px_24px] opacity-20"></div>
+
+        <div className="relative z-10 flex flex-col items-center space-y-12">
+
+          {/* User Layer */}
+          <div className="flex flex-col items-center">
+            <div className="p-4 bg-indigo-600 rounded-full shadow-lg shadow-indigo-500/30 mb-2">
+              <Globe size={32} className="text-white" />
+            </div>
+            <span className="text-slate-300 font-medium">User (Client)</span>
+          </div>
+
+          {/* Ingress/Frontend Layer */}
+          <div className="w-full max-w-4xl grid grid-cols-3 gap-8 relative">
+             {/* Connecting lines */}
+             <div className="absolute top-[-48px] left-1/2 w-px h-12 bg-gradient-to-b from-indigo-600 to-slate-600 -translate-x-1/2"></div>
+
+             <Node 
+               title="Frontend Service" 
+               icon={<Layers size={20} />} 
+               desc="React UI + WebSocket Handler"
+               color="bg-blue-500"
+             />
+
+             <Node 
+               title="API Gateway" 
+               icon={<Server size={20} />} 
+               desc="Go-based REST API"
+               color="bg-purple-500"
+             />
+
+             <Node 
+               title="Auth & Session" 
+               icon={<Database size={20} />} 
+               desc="Redis + Postgres"
+               color="bg-cyan-500"
+             />
+          </div>
+
+          {/* Isolation Layer */}
+          <div className="w-full max-w-5xl border-2 border-dashed border-slate-700 rounded-3xl p-8 bg-slate-900/80 relative">
+             <span className="absolute -top-3 left-8 bg-slate-900 px-2 text-slate-400 text-sm font-mono">KUBERNETES CLUSTER - WORKER NODES</span>
+
+             <div className="grid grid-cols-2 gap-12">
+                <div className="space-y-4">
+                  <div className="flex items-center justify-center mb-4">
+                    <span className="px-3 py-1 rounded-full bg-slate-800 text-slate-300 text-xs border border-slate-700">Guacamole Protocol (RDP/VNC)</span>
+                  </div>
+                  <div className="p-6 bg-slate-800 border border-slate-700 rounded-xl">
+                    <div className="flex items-center gap-3 mb-4">
+                      <div className="p-2 bg-orange-500/20 text-orange-400 rounded-lg"><Workflow size={20} /></div>
+                      <h4 className="font-bold text-white">Guacd Pod</h4>
+                    </div>
+                    <p className="text-xs text-slate-400">Translates RDP traffic to HTML5 for the frontend. Handles TCP connections.</p>
+                  </div>
+                </div>
+
+                <div className="space-y-4">
+                   <div className="grid grid-cols-2 gap-4">
+                      <BrowserPod id="1" region="US-East" />
+                      <BrowserPod id="2" region="EU-West" />
+                   </div>
+                   <p className="text-center text-xs text-slate-500 mt-2">Ephemeral Browser Pods (Chromium)</p>
+                </div>
+             </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Tech Stack Details */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
+        <Card title="Orchestration">
+          <ul className="space-y-2 text-sm text-slate-400">
+            <li className="flex items-center gap-2"><div className="w-1.5 h-1.5 bg-blue-500 rounded-full"/>Kubernetes v1.29</li>
+            <li className="flex items-center gap-2"><div className="w-1.5 h-1.5 bg-blue-500 rounded-full"/>Calico CNI (Network Policies)</li>
+            <li className="flex items-center gap-2"><div className="w-1.5 h-1.5 bg-blue-500 rounded-full"/>Horizontal Pod Autoscaler</li>
+          </ul>
+        </Card>
+        <Card title="Security Core">
+          <ul className="space-y-2 text-sm text-slate-400">
+            <li className="flex items-center gap-2"><div className="w-1.5 h-1.5 bg-emerald-500 rounded-full"/>Firejail Sandbox</li>
+            <li className="flex items-center gap-2"><div className="w-1.5 h-1.5 bg-emerald-500 rounded-full"/>ClamAV + VirusTotal</li>
+            <li className="flex items-center gap-2"><div className="w-1.5 h-1.5 bg-emerald-500 rounded-full"/>Zero Trust Microsegmentation</li>
+          </ul>
+        </Card>
+        <Card title="Data Layer">
+          <ul className="space-y-2 text-sm text-slate-400">
+            <li className="flex items-center gap-2"><div className="w-1.5 h-1.5 bg-purple-500 rounded-full"/>MinIO (Object Storage)</li>
+            <li className="flex items-center gap-2"><div className="w-1.5 h-1.5 bg-purple-500 rounded-full"/>Redis (Session State)</li>
+            <li className="flex items-center gap-2"><div className="w-1.5 h-1.5 bg-purple-500 rounded-full"/>PostgreSQL (Audit Logs)</li>
+          </ul>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+const Node = ({title, icon, desc, color}: {title: string, icon: any, desc: string, color: string}) => (
+  <div className="bg-slate-800 p-4 rounded-xl border border-slate-700 relative group hover:border-slate-500 transition-colors">
+    <div className={`absolute -top-3 -left-3 p-2 ${color.replace('bg-', 'bg-')}/20 ${color.replace('bg-', 'text-')} rounded-lg shadow-lg`}>
+      {icon}
+    </div>
+    <h4 className="font-bold text-white mt-2 ml-2">{title}</h4>
+    <p className="text-xs text-slate-400 mt-2">{desc}</p>
+  </div>
+);
+
+const BrowserPod = ({id, region}: {id: string, region: string}) => (
+  <div className="bg-slate-800 p-3 rounded-lg border border-slate-700 flex flex-col gap-2 relative overflow-hidden">
+    <div className="absolute top-0 right-0 p-1 bg-slate-700 rounded-bl-lg">
+       <div className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></div>
+    </div>
+    <Globe size={16} className="text-slate-400" />
+    <div>
+      <div className="text-xs font-bold text-slate-200">Browser Pod #{id}</div>
+      <div className="text-[10px] text-slate-500">{region}</div>
+    </div>
+  </div>
+);