Initial commit: Rebranded to GLMPilot and migrated to GLM-5 API

.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+.env
+.env.*
+dist
+.git
+.gitignore

.env.example

@@ -0,0 +1,18 @@
+# Server
+NODE_ENV=development
+PORT=3001
+CLIENT_URL=http://localhost:5173
+
+# GLM API
+GLM_API_KEY=your_glm_api_key_here
+GLM_BASE_URL=https://open.bigmodel.cn/api/paas/v4
+GLM_MODEL=glm-5
+
+# GitHub Integration
+GITHUB_TOKEN=your_github_token_here
+
+# Redis
+REDIS_URL=redis://localhost:6379
+
+# Logging
+LOG_LEVEL=debug

.gitignore

@@ -0,0 +1,11 @@
+node_modules/
+dist/
+build/
+.env
+.env.local
+*.log
+.DS_Store
+coverage/
+.next/
+.turbo/
+*.tsbuildinfo

ARCHITECTURE.md

@@ -0,0 +1,73 @@
+# GLMPilot Architecture
+
+GLMPilot is built as a modern, full-stack monorepo designed to provide a seamless, rich browser-based IDE experience. It leverages React for the frontend, Node.js/Express for the backend, and WebSockets for real-time bidirectional communication.
+
+## 🏗️ Repository Structure
+
+The project uses npm workspaces to manage its packages. 
+
+```text
+GLMPilot/
+├── packages/
+│   ├── client/    # React frontend application
+│   ├── server/    # Node.js Express backend & WebSocket server
+│   └── shared/    # Shared TypeScript types, constants, and utilities
+```
+
+### 1. `packages/client` (Frontend)
+
+The frontend is a Single Page Application (SPA) built with React 18 and bundled using Vite.
+
+**Key Technologies:**
+- **React 18**: UI component library.
+- **React Router**: For client-side routing (`/` for Landing, `/ide` for environment selection, `/ide/:env` for the IDE shell).
+- **Zustand**: For lightweight, global state management (e.g., Editor state, File system state, AI chat state).
+- **Tailwind CSS**: For utility-first styling.
+- **Monaco Editor**: The core code editor component (same engine as VS Code).
+
+**Core Components (`src/`):**
+- `components/layout/IDEShell.tsx`: The main IDE interface containing the file explorer, Monaco editor, and terminal/preview panes.
+- `components/ide/EnvironmentSelector.tsx`: Allows users to choose their development environment (e.g., Web, Node, Python).
+- `stores/`: Contains Zustand stores for managing global application state.
+- `services/`: API client wrappers and WebSocket connections to the backend.
+
+### 2. `packages/server` (Backend)
+
+The backend is an Express.js server that handles API requests, serves the frontend in production, and manages real-time WebSocket connections.
+
+**Key Technologies:**
+- **Node.js & Express**: HTTP server framework.
+- **Socket.io**: For real-time bi-directional event-based communication (Terminal, Code Sync).
+- **Redis** (Optional/External): Used for pub/sub and state management across potential multiple instances.
+
+**Core Components (`src/`):**
+- `index.ts`: The main entry point. Sets up Express middleware, API routes, Socket.io, and serves the static React build in production.
+- `websocket/handler.ts`: Manages incoming WebSocket connections for real-time terminal emulation and IDE collaboration events.
+- `agents/`: Contains the logic for the different Multi-Agent AI Code Reviewers (Security, Performance, Style, Documentation). These interfaces communicate with the GLM model.
+- `routes/`: Express API endpoints (e.g., authentication, project importing, AI proxy).
+- `config/env.ts`: Centralized environment variable parsing and validation.
+
+### 3. `packages/shared` (Shared Logic)
+
+This package contains code that is utilized by both the `client` and the `server` to guarantee type safety and consistency across the stack.
+
+**Core Components (`src/`):**
+- `types.ts`: TypeScript interfaces for payloads, events, and data models (e.g., WebSocket event definitions, File abstractions).
+- `constants.ts`: Shared static values (e.g., Event names, Environment types).
+- `utils.ts`: Helper functions safe to run in both Node.js and Browser environments.
+
+## 🔄 Data Flow & Communication
+
+1. **HTTP/REST**: The client uses standard HTTP requests for one-off operations such as fetching initial configuration, authenticating, or triggering a specific AI agent review.
+2. **WebSocket (Socket.io)**: Once the IDE shell is loaded, a persistent WebSocket connection is established. This channel is used for:
+   - Streaming terminal input/output.
+   - Live code collaboration/syncing.
+   - Streaming AI chat responses.
+3. **AI Integration**: The Express server acts as a proxy for the GLM Mini API. When the client requests an AI action (like a code completion or chat), it sends the request to the backend. The backend constructs the prompt (often reading workspace context), queries the AI model securely (using `GLM_API_KEY`), and streams the response back to the client.
+
+## 🚢 Deployment Architecture
+
+In a production environment like Hugging Face Spaces or a standard Docker container:
+- The `client` is built into static HTML/JS/CSS files (`packages/client/dist`).
+- The `server` is built to JavaScript (`packages/server/dist`).
+- When the Node application (server) starts, it serves the React `dist` folder natively on the same port alongside the API and WebSocket server. This allows single-port deployment configurations heavily favored by containerized platforms.

Dockerfile

@@ -0,0 +1,38 @@
+FROM node:20-bookworm
+
+# Install Python and Java
+RUN apt-get update && apt-get install -y \
+    python3 \
+    openjdk-17-jdk \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set working directory
+WORKDIR /app
+
+# Copy root package files
+COPY package.json package-lock.json ./
+
+# Copy workspace package files
+COPY packages/shared/package.json ./packages/shared/
+COPY packages/server/package.json ./packages/server/
+COPY packages/client/package.json ./packages/client/
+
+# Install dependencies
+RUN npm ci
+
+# Copy full source
+COPY . .
+
+# Build packages
+RUN npm run build
+
+# Set environment variables for Hugging Face Spaces
+ENV NODE_ENV=production
+ENV PORT=7860
+ENV CLIENT_URL=http://localhost:7860
+
+# Expose the HF port
+EXPOSE 7860
+
+# Start the server
+CMD ["npm", "run", "start", "-w", "packages/server"]

README.md

@@ -0,0 +1,174 @@
+---
+title: GLMPilot
+emoji: 🚀
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: false
+license: mit
+---
+
+# GLMPilot
+
+GLMPilot is an AI-native, browser-based IDE built around GLM. It combines code editing, AI chat, code completion, multi-agent review, terminal execution, and GitHub workflows in a single application.
+
+## Executive Summary
+
+| Item | Details |
+| --- | --- |
+| Product Type | Browser-based AI IDE |
+| Primary Use Case | Build, review, and ship code faster from one workspace |
+| AI Backbone | GLM API (chat, completion, analysis, orchestration) |
+| Deployment Model | Monorepo with Docker and Docker Compose support |
+| Key Integrations | GitHub, Redis, WebSocket streaming |
+
+## Key Capabilities
+
+| Capability | Description | Business Value |
+| --- | --- | --- |
+| AI Chat and Streaming | Real-time GLM assistant integrated in the IDE | Faster iteration and lower context switching |
+| Code Completion | Context-aware inline suggestions | Higher coding velocity |
+| Multi-Agent Review | Security, performance, style, and documentation agents | Better code quality before PR |
+| Monaco-Based Editor | Multi-file editing with VS Code-grade engine | Familiar professional developer experience |
+| Integrated Terminal | Browser terminal over WebSocket | In-app execution and validation |
+| Live Preview | Real-time HTML/CSS/JS preview | Rapid UI feedback loop |
+| GitHub Workflow | Repository import and patch/PR flow | Shorter path from idea to merge |
+
+## Architecture Overview
+
+```text
+Client (React + Monaco + Zustand)
+  -> REST API (Express routes)
+  -> WebSocket channel (chat tokens, terminal, execution events)
+
+Server (Express + Agent Orchestrator)
+  -> GLM service client
+  -> GitHub service
+  -> Redis (cache/pub-sub/coordination)
+```
+
+Detailed architecture: [ARCHITECTURE.md](ARCHITECTURE.md)
+
+## Repository Structure
+
+| Path | Purpose |
+| --- | --- |
+| packages/client | React application, IDE shell, editor and UI components |
+| packages/server | Express API, WebSocket handlers, AI services, agent orchestration |
+| packages/shared | Shared types, constants, and cross-package utilities |
+| Dockerfile | Production image build configuration |
+| docker-compose.yml | Local multi-service orchestration |
+
+## Technology Stack
+
+| Layer | Technologies |
+| --- | --- |
+| Frontend | React 18, TypeScript, Vite, Tailwind CSS, Monaco, Zustand |
+| Backend | Node.js, Express, Socket.io |
+| AI | GLM API with streaming and retry support |
+| Infrastructure | Docker, Docker Compose, Redis |
+| Repository | npm workspaces monorepo |
+
+## Local Development
+
+### Prerequisites
+
+| Requirement | Minimum Version |
+| --- | --- |
+| Node.js | 18+ |
+| npm | 9+ |
+| Docker | Recommended |
+
+### Setup
+
+```bash
+git clone https://github.com/your-username/GLMPilot.git
+cd GLMPilot
+npm install
+cp .env.example .env
+```
+
+### Environment Variables
+
+| Variable | Required | Purpose |
+| --- | --- | --- |
+| NODE_ENV | No | Runtime mode (development/production) |
+| PORT | No | Server port |
+| CLIENT_URL | No | Allowed client origin |
+| GLM_API_KEY | Yes | GLM authentication key |
+| GLM_BASE_URL | No | GLM API base URL |
+| GLM_MODEL | No | Default GLM model |
+| GITHUB_TOKEN | Optional | GitHub integration and PR automation |
+| REDIS_URL | No | Redis connection string |
+| LOG_LEVEL | No | Server logging verbosity |
+
+Start Redis and run development servers:
+
+```bash
+docker run -d --name glmpilot-redis -p 6379:6379 redis
+npm run dev:all
+```
+
+| Service | URL |
+| --- | --- |
+| Client | http://localhost:5173 |
+| Server | http://localhost:3001 |
+
+## Scripts
+
+| Command | Description |
+| --- | --- |
+| npm run dev | Start client development server |
+| npm run dev:server | Start server development process |
+| npm run dev:all | Run client and server concurrently |
+| npm run build | Build shared, server, and client packages |
+| npm run typecheck | Run TypeScript project-reference checks |
+
+## Deployment
+
+| Option | Command |
+| --- | --- |
+| Docker Compose | docker-compose up --build |
+| Single Image | docker build -t glmpilot-ide . |
+| Single Image Run | docker run --env-file .env -p 7860:7860 glmpilot-ide |
+
+In containerized mode, the backend serves static frontend assets and API/WebSocket traffic from a single port.
+
+## API and Realtime Surface
+
+| Surface | Capability |
+| --- | --- |
+| REST | Chat, completion, review, docs and integration endpoints |
+| SSE | Token streaming for chat responses |
+| WebSocket | Terminal IO, execution events, chat token streaming |
+
+Package-level docs:
+
+- [packages/server/README.md](packages/server/README.md)
+- [packages/client/README.md](packages/client/README.md)
+- [packages/shared/README.md](packages/shared/README.md)
+
+## Hackathon Readiness
+
+| Requirement Area | Current Status |
+| --- | --- |
+| GLM Integration Depth | Implemented across chat, completion, and multi-agent analysis |
+| Codebase Documentation | Root and package-level documentation available |
+| Setup Reproducibility | .env template and Docker-based startup provided |
+| Demonstration Path | Import -> Generate -> Review -> Validate -> PR workflow supported |
+
+## Recommended Demo Flow
+
+1. Import a GitHub repository.
+2. Use GLM chat to generate or refactor feature code.
+3. Run multi-agent review and inspect findings.
+4. Apply fixes and verify using preview/terminal.
+5. Create a PR with summarized changes.
+
+## Contributing
+
+1. Fork the repository.
+2. Create a feature branch.
+3. Commit changes.
+4. Push branch.
+5. Open a pull request.

docker-compose.yml

@@ -0,0 +1,44 @@
+version: '3.8'
+
+services:
+  server:
+    build:
+      context: .
+      dockerfile: packages/server/Dockerfile
+    ports:
+      - "3001:3001"
+    environment:
+      - NODE_ENV=production
+      - PORT=3001
+      - REDIS_URL=redis://redis:6379
+      - GLM_API_KEY=${GLM_API_KEY}
+      - GITHUB_TOKEN=${GITHUB_TOKEN}
+      - CLIENT_URL=http://localhost:5173
+    depends_on:
+      - redis
+    volumes:
+      - ./packages/server:/app/packages/server
+      - ./packages/shared:/app/packages/shared
+
+  redis:
+    image: redis:7-alpine
+    ports:
+      - "6379:6379"
+    volumes:
+      - redis-data:/data
+
+  client:
+    build:
+      context: .
+      dockerfile: packages/client/Dockerfile
+    ports:
+      - "5173:5173"
+    environment:
+      - VITE_API_URL=http://localhost:3001
+      - VITE_WS_URL=ws://localhost:3001
+    volumes:
+      - ./packages/client:/app/packages/client
+      - ./packages/shared:/app/packages/shared
+
+volumes:
+  redis-data:

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "glmpilot",
+  "version": "1.0.0",
+  "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "dev": "npm run dev -w packages/client",
+    "dev:server": "npm run dev -w packages/server",
+    "dev:all": "concurrently \"npm run dev:server\" \"npm run dev\"",
+    "build": "npm run build -w packages/shared && npm run build -w packages/server && npm run build -w packages/client",
+    "build:shared": "npm run build -w packages/shared",
+    "build:server": "npm run build -w packages/server",
+    "build:client": "npm run build -w packages/client",
+    "typecheck": "tsc --build"
+  },
+  "devDependencies": {
+    "concurrently": "^8.2.2",
+    "typescript": "^5.4.0"
+  }
+}

packages/client/README.md

@@ -0,0 +1,26 @@
+# 🖥️ GLMPilot Client
+
+The `client` package contains the React SPA that powers the browser-based IDE interface.
+
+## Key Responsibilities
+
+1. **IDE Shell**: The main workspace interface (`IDEShell.tsx`) containing the file explorer, Monaco editor, and terminal panes.
+2. **Code Editing**: Integrates `@monaco-editor/react` to provide a VS Code-like editing experience with syntax highlighting and autocompletion.
+3. **Live Web Preview**: Supports real-time rendering of HTML/JS/CSS within an iframe or a new tab.
+4. **State Management**: Uses `zustand` stores located in `src/stores/` to manage complex client-side state efficiently without extensive prop-drilling. Stores typically manage:
+   - Editor state (open files, current contents)
+   - Chat state (conversation history with ASI-1)
+   - Settings (user preferences, environment choices)
+
+## Tech Stack
+
+- **Framework**: React 18 
+- **Bundler**: Vite
+- **Styling**: Tailwind CSS
+- **Routing**: React Router
+- **Global State**: Zustand
+- **Editor**: Monaco Editor
+
+## Development
+
+Run `npm run dev` (or `npm run dev:client` from the root) to start the Vite development server.

packages/client/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="GLMPilot — AI-powered browser IDE for frontend development with multi-agent code review, inline completions, and GitHub integration." />
+    <title>GLMPilot — AI-Powered Browser IDE</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

packages/client/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@glmpilot/client",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fontsource/geist-sans": "^5.2.5",
+    "@glmpilot/shared": "*",
+    "@monaco-editor/react": "^4.6.0",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@tanstack/react-query": "^5.17.0",
+    "axios": "^1.6.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "hls.js": "^1.5.0",
+    "lucide-react": "^0.303.0",
+    "monaco-editor": "^0.44.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-resizable-panels": "^1.0.0",
+    "react-router-dom": "^6.21.0",
+    "socket.io-client": "^4.7.0",
+    "tailwind-merge": "^2.2.0",
+    "tailwindcss-animate": "^1.0.7",
+    "xterm": "^5.3.0",
+    "xterm-addon-fit": "^0.8.0",
+    "zustand": "^4.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.4.0",
+    "vite": "^5.0.0"
+  }
+}

packages/client/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/client/src/App.tsx

@@ -0,0 +1,20 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import LandingPage from './components/landing/LandingPage';
+import IDEShell from './components/layout/IDEShell';
+
+import EnvironmentSelector from './components/ide/EnvironmentSelector';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<LandingPage />} />
+        <Route path="/ide" element={<EnvironmentSelector />} />
+        <Route path="/ide/:env" element={<IDEShell />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;

packages/client/src/components/ai/AIChatPanel.tsx

@@ -0,0 +1,141 @@
+import { useState, useRef, useEffect } from 'react';
+import { ArrowUp, Square, Sparkles, Bug, TestTube2, Zap } from 'lucide-react';
+import { useGLMChat } from '@/hooks/useGLMChat';
+import { useAIStore } from '@/stores/aiStore';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+import { MarkdownMessage } from './MarkdownMessage';
+
+export default function AIChatPanel() {
+  const { sendMessage, stopGeneration, isStreaming } = useGLMChat();
+  const messages = useAIStore((s) => s.messages);
+  const streamingMessage = useAIStore((s) => s.streamingMessage);
+  const [input, setInput] = useState('');
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, streamingMessage]);
+
+  const handleSend = () => {
+    if (!input.trim() || isStreaming) return;
+    const history = messages.map((m) => ({ role: m.role, content: m.content }));
+    sendMessage(input.trim(), history);
+    setInput('');
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const quickActions = [
+    { icon: Sparkles, label: 'Explain', prefix: 'Explain this code:\n' },
+    { icon: Bug, label: 'Fix', prefix: 'Fix any issues in this code:\n' },
+    { icon: TestTube2, label: 'Tests', prefix: 'Write unit tests for this code:\n' },
+    { icon: Zap, label: 'Optimize', prefix: 'Optimize this code for performance:\n' },
+  ];
+
+  return (
+    <div className="flex flex-col h-full bg-card/50">
+      {/* Header */}
+      <div className="px-4 py-3 border-b border-border">
+        <h3 className="text-sm font-semibold flex items-center gap-2">
+          <Sparkles className="w-4 h-4 text-primary" />
+          AI Assistant
+        </h3>
+        <p className="text-xs text-muted-foreground mt-0.5">Powered by GLM-5</p>
+      </div>
+
+      {/* Messages */}
+      <div ref={scrollRef} className="flex-1 overflow-auto p-4 space-y-4 min-h-0">
+        {messages.length === 0 && !streamingMessage && (
+          <div className="text-center text-muted-foreground text-sm mt-8">
+            <Sparkles className="w-8 h-8 mx-auto mb-3 text-primary/40" />
+            <p className="font-medium">How can I help?</p>
+            <p className="text-xs mt-1">Ask about your code, request fixes, or get explanations.</p>
+          </div>
+        )}
+
+        {messages.map((msg) => (
+          <div
+            key={msg.id}
+            className={cn(
+              'max-w-[100%] text-sm',
+              msg.role === 'user' ? 'ml-auto' : 'mr-auto w-full'
+            )}
+          >
+            <div
+              className={cn(
+                'px-4 py-3 rounded-2xl',
+                msg.role === 'user'
+                  ? 'bg-primary/10 rounded-br-md whitespace-pre-wrap break-words max-w-[90%] float-right'
+                  : 'liquid-glass rounded-bl-md w-full'
+              )}
+            >
+              {msg.role === 'user' ? msg.content : <MarkdownMessage content={msg.content} />}
+            </div>
+            <div className="clear-both"></div>
+          </div>
+        ))}
+
+        {streamingMessage && (
+          <div className="mr-auto w-full text-sm">
+            <div className="liquid-glass px-4 py-3 rounded-2xl rounded-bl-md">
+              <MarkdownMessage content={streamingMessage + '▌'} />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Quick Actions */}
+      <div className="px-4 py-2 flex gap-1.5 border-t border-border/50">
+        {quickActions.map((action) => (
+          <button
+            key={action.label}
+            onClick={() => setInput(action.prefix)}
+            className="flex items-center gap-1 px-2 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-secondary rounded-md transition-colors"
+          >
+            <action.icon className="w-3 h-3" />
+            {action.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Input */}
+      <div className="p-3 border-t border-border">
+        <div className="flex gap-2">
+          <Textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Ask anything... (⌘+Enter to send)"
+            rows={1}
+            className="min-h-[40px] max-h-[120px] resize-none text-sm"
+          />
+          {isStreaming ? (
+            <Button size="icon" variant="ghost" onClick={stopGeneration}>
+              <Square className="w-4 h-4" />
+            </Button>
+          ) : (
+            <Button
+              size="icon"
+              variant="default"
+              onClick={handleSend}
+              disabled={!input.trim()}
+              className="bg-primary hover:bg-primary/90 shrink-0"
+            >
+              <ArrowUp className="w-4 h-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

packages/client/src/components/ai/AgentResultsPanel.tsx

@@ -0,0 +1,134 @@
+import { useAIStore } from '@/stores/aiStore';
+import { Badge } from '@/components/ui/badge';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Button } from '@/components/ui/button';
+import { Shield, Zap, Paintbrush, FileText, ChevronDown, ChevronUp } from 'lucide-react';
+import { useEditorStore } from '@/stores/editorStore';
+import { cn } from '@/lib/utils';
+import type { Finding, Severity } from '@glmpilot/shared';
+import { useState } from 'react';
+
+const agentIcons: Record<string, typeof Shield> = {
+  security: Shield,
+  performance: Zap,
+  style: Paintbrush,
+  documentation: FileText,
+};
+
+const severityColors: Record<Severity, string> = {
+  critical: 'critical',
+  high: 'high',
+  medium: 'medium',
+  low: 'low',
+};
+
+function FindingCard({ finding }: { finding: Finding }) {
+  const [expanded, setExpanded] = useState(false);
+  const addFile = useEditorStore((s) => s.addFile);
+
+  return (
+    <div className="liquid-glass rounded-xl p-4 space-y-2">
+      <div className="flex items-center gap-2 flex-wrap">
+        <Badge variant={severityColors[finding.severity] as any}>{finding.severity}</Badge>
+        <Badge variant="outline" className="text-[10px]">{finding.category}</Badge>
+        <button
+          onClick={() => addFile(finding.file, '', 'typescript')}
+          className="text-xs text-primary hover:underline truncate"
+        >
+          {finding.file}{finding.lineStart ? `:${finding.lineStart}` : ''}
+        </button>
+      </div>
+      <p className="text-sm font-medium">{finding.title}</p>
+      <p className="text-xs text-muted-foreground line-clamp-2">{finding.description}</p>
+
+      {(finding.currentCode || finding.fixedCode) && (
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="flex items-center gap-1 text-xs text-primary hover:underline"
+        >
+          {expanded ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
+          {expanded ? 'Hide details' : 'Show code'}
+        </button>
+      )}
+
+      {expanded && (
+        <div className="space-y-2 mt-2">
+          {finding.currentCode && (
+            <div>
+              <p className="text-xs text-muted-foreground mb-1">Current code:</p>
+              <pre className="text-xs bg-background rounded p-2 overflow-x-auto">{finding.currentCode}</pre>
+            </div>
+          )}
+          {finding.fixedCode && (
+            <div>
+              <p className="text-xs text-muted-foreground mb-1">Fixed code:</p>
+              <pre className="text-xs bg-background rounded p-2 overflow-x-auto text-primary/80">{finding.fixedCode}</pre>
+            </div>
+          )}
+          {finding.fixExplanation && (
+            <p className="text-xs text-muted-foreground">{finding.fixExplanation}</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function AgentResultsPanel() {
+  const agentResults = useAIStore((s) => s.agentResults);
+
+  const allFindings: Finding[] = Object.values(agentResults)
+    .flatMap((r) => r?.findings || [])
+    .sort((a, b) => {
+      const order = { critical: 0, high: 1, medium: 2, low: 3 };
+      return (order[a.severity] || 9) - (order[b.severity] || 9);
+    });
+
+  const byAgent = (agent: string) => allFindings.filter((f) => f.agent === agent);
+
+  if (allFindings.length === 0) {
+    return (
+      <div className="h-full flex items-center justify-center text-muted-foreground text-sm p-4 text-center">
+        <div>
+          <Shield className="w-8 h-8 mx-auto mb-2 text-muted-foreground/40" />
+          <p>No review results yet.</p>
+          <p className="text-xs mt-1">Run a review to see agent findings here.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Summary */}
+      <div className="px-4 py-2 border-b border-border flex items-center gap-3 text-xs">
+        <span className="font-medium">{allFindings.length} findings</span>
+        <Badge variant="critical" className="text-[10px]">{allFindings.filter(f => f.severity === 'critical').length}</Badge>
+        <Badge variant="high" className="text-[10px]">{allFindings.filter(f => f.severity === 'high').length}</Badge>
+        <Badge variant="medium" className="text-[10px]">{allFindings.filter(f => f.severity === 'medium').length}</Badge>
+        <Badge variant="low" className="text-[10px]">{allFindings.filter(f => f.severity === 'low').length}</Badge>
+      </div>
+
+      <Tabs defaultValue="all" className="flex-1 flex flex-col min-h-0">
+        <TabsList className="mx-4 mt-2 justify-start h-8">
+          <TabsTrigger value="all" className="text-xs">All ({allFindings.length})</TabsTrigger>
+          <TabsTrigger value="security" className="text-xs">Security ({byAgent('security').length})</TabsTrigger>
+          <TabsTrigger value="performance" className="text-xs">Perf ({byAgent('performance').length})</TabsTrigger>
+          <TabsTrigger value="style" className="text-xs">Style ({byAgent('style').length})</TabsTrigger>
+        </TabsList>
+
+        <div className="flex-1 min-h-0 overflow-auto p-4">
+          <TabsContent value="all" className="space-y-3 mt-0">
+            {allFindings.map((f, i) => <FindingCard key={`${f.id}-${i}`} finding={f} />)}
+          </TabsContent>
+          {['security', 'performance', 'style'].map((agent) => (
+            <TabsContent key={agent} value={agent} className="space-y-3 mt-0">
+              {byAgent(agent).map((f, i) => <FindingCard key={`${f.id}-${i}`} finding={f} />)}
+            </TabsContent>
+          ))}
+        </div>
+      </Tabs>
+    </div>
+  );
+}

packages/client/src/components/ai/MarkdownMessage.tsx

@@ -0,0 +1,43 @@
+import { Check } from 'lucide-react';
+import { parseMarkdown } from '@/utils/markdownParser';
+
+interface MarkdownMessageProps {
+  content: string;
+}
+
+export function MarkdownMessage({ content }: MarkdownMessageProps) {
+  const segments = parseMarkdown(content);
+
+  return (
+    <div className="space-y-3">
+      {segments.map((segment, i) => {
+        if (segment.type === 'text') {
+          return (
+            <div key={i} className="whitespace-pre-wrap break-words text-sm">
+              {segment.content}
+            </div>
+          );
+        }
+
+        return (
+          <div key={i} className="my-3 flex flex-col gap-2">
+            {segment.filename && (
+              <div className="flex items-center gap-1.5 py-1.5 px-3 bg-primary/10 text-primary border border-primary/20 rounded-md w-fit text-xs font-medium">
+                <Check className="w-3.5 h-3.5" />
+                Applied changes to {segment.filename}
+              </div>
+            )}
+            <div className="relative rounded-md bg-muted overflow-hidden border border-border">
+              <div className="flex items-center justify-between px-3 py-1.5 bg-muted-foreground/10 text-xs text-muted-foreground border-b border-border">
+                <span>{segment.filename || segment.language || 'code'}</span>
+              </div>
+              <pre className="p-3 overflow-x-auto text-[13px] leading-relaxed font-mono text-foreground whitespace-pre-wrap">
+                <code>{segment.code}</code>
+              </pre>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

packages/client/src/components/editor/CodeEditor.tsx

@@ -0,0 +1,126 @@
+import { useRef, useCallback, useEffect } from 'react';
+import Editor, { OnMount, OnChange } from '@monaco-editor/react';
+import { useEditorStore } from '@/stores/editorStore';
+import { useSettingsStore } from '@/stores/settingsStore';
+import { useCodeCompletion } from '@/hooks/useCodeCompletion';
+
+interface CodeEditorProps {
+  filePath: string;
+  language: string;
+}
+
+export default function CodeEditor({ filePath, language }: CodeEditorProps) {
+  const content = useEditorStore((s) => s.openFiles[filePath]?.content || '');
+  const updateContent = useEditorStore((s) => s.updateContent);
+  const setCursorPosition = useEditorStore((s) => s.setCursorPosition);
+  const fontSize = useSettingsStore((s) => s.fontSize);
+  const tabSize = useSettingsStore((s) => s.tabSize);
+  const wordWrap = useSettingsStore((s) => s.wordWrap);
+  const minimap = useSettingsStore((s) => s.minimap);
+  const { requestCompletion, dismissCompletion } = useCodeCompletion();
+  const editorRef = useRef<any>(null);
+
+  const handleMount: OnMount = (editor, monaco) => {
+    editorRef.current = editor;
+
+    // Define custom theme
+    monaco.editor.defineTheme('glmpilot-dark', {
+      base: 'vs-dark',
+      inherit: true,
+      rules: [
+        { token: 'comment', foreground: '6a737d', fontStyle: 'italic' },
+        { token: 'keyword', foreground: 'c792ea' },
+        { token: 'string', foreground: 'c3e88d' },
+        { token: 'number', foreground: 'f78c6c' },
+        { token: 'type', foreground: 'ffcb6b' },
+        { token: 'function', foreground: '82aaff' },
+      ],
+      colors: {
+        'editor.background': '#080810',
+        'editor.foreground': '#e8e8e8',
+        'editorLineNumber.foreground': '#4a4a5a',
+        'editor.selectionBackground': '#81f08433',
+        'editorCursor.foreground': '#81f084',
+        'editor.lineHighlightBackground': '#0f0f1a',
+        'editorIndentGuide.background': '#1a1a2a',
+        'editorWidget.background': '#121220',
+        'editorSuggestWidget.background': '#121220',
+        'editorSuggestWidget.border': '#2a2a3a',
+        'scrollbarSlider.background': '#2a2a3a80',
+        'scrollbarSlider.hoverBackground': '#3a3a4a80',
+      },
+    });
+    monaco.editor.setTheme('glmpilot-dark');
+
+    // Track cursor position
+    editor.onDidChangeCursorPosition((e: any) => {
+      setCursorPosition(filePath, {
+        lineNumber: e.position.lineNumber,
+        column: e.position.column,
+      });
+    });
+
+    // Trigger completion on cursor position change
+    editor.onDidChangeCursorPosition((e: any) => {
+      const model = editor.getModel();
+      if (!model) return;
+      const position = e.position;
+      const textBefore = model.getValueInRange({
+        startLineNumber: 1,
+        startColumn: 1,
+        endLineNumber: position.lineNumber,
+        endColumn: position.column,
+      });
+      const textAfter = model.getValueInRange({
+        startLineNumber: position.lineNumber,
+        startColumn: position.column,
+        endLineNumber: model.getLineCount(),
+        endColumn: model.getLineMaxColumn(model.getLineCount()),
+      });
+      requestCompletion(filePath, textBefore, textAfter, language);
+    });
+
+    editor.focus();
+  };
+
+  const handleChange: OnChange = (value) => {
+    if (value !== undefined) {
+      updateContent(filePath, value);
+      dismissCompletion();
+    }
+  };
+
+  return (
+    <Editor
+      height="100%"
+      language={language}
+      value={content}
+      onChange={handleChange}
+      onMount={handleMount}
+      theme="glmpilot-dark"
+      options={{
+        fontSize,
+        tabSize,
+        wordWrap: wordWrap ? 'on' : 'off',
+        minimap: { enabled: minimap, renderCharacters: false },
+        formatOnPaste: true,
+        suggestOnTriggerCharacters: true,
+        quickSuggestions: { other: true, strings: true, comments: false },
+        bracketPairColorization: { enabled: true },
+        guides: { bracketPairs: true, indentation: true },
+        scrollBeyondLastLine: false,
+        smoothScrolling: true,
+        cursorBlinking: 'smooth',
+        cursorSmoothCaretAnimation: 'on',
+        renderWhitespace: 'selection',
+        lineNumbers: 'on',
+        folding: true,
+        links: true,
+        autoClosingBrackets: 'always',
+        autoClosingQuotes: 'always',
+        autoIndent: 'advanced',
+        padding: { top: 12 },
+      }}
+    />
+  );
+}

packages/client/src/components/editor/EditorTabs.tsx

@@ -0,0 +1,46 @@
+import { X } from 'lucide-react';
+import { useEditorStore } from '@/stores/editorStore';
+import { cn } from '@/lib/utils';
+import { getFileName } from '@glmpilot/shared';
+
+export default function EditorTabs() {
+  const openFiles = useEditorStore((s) => s.openFiles);
+  const activeFilePath = useEditorStore((s) => s.activeFilePath);
+  const setActive = useEditorStore((s) => s.setActive);
+  const removeFile = useEditorStore((s) => s.removeFile);
+
+  const files = Object.values(openFiles);
+
+  if (files.length === 0) return null;
+
+  return (
+    <div className="flex items-center bg-background border-b border-border overflow-x-auto">
+      {files.map((file) => (
+        <button
+          key={file.path}
+          onClick={() => setActive(file.path)}
+          className={cn(
+            'group flex items-center gap-2 px-3 py-1.5 text-xs border-r border-border transition-colors min-w-0 shrink-0',
+            file.path === activeFilePath
+              ? 'bg-card text-foreground'
+              : 'text-muted-foreground hover:text-foreground hover:bg-card/50'
+          )}
+        >
+          {file.isDirty && (
+            <span className="w-1.5 h-1.5 rounded-full bg-primary shrink-0" />
+          )}
+          <span className="truncate max-w-[120px]">{getFileName(file.path)}</span>
+          <span
+            onClick={(e) => {
+              e.stopPropagation();
+              removeFile(file.path);
+            }}
+            className="opacity-0 group-hover:opacity-100 hover:bg-secondary rounded p-0.5 transition-opacity"
+          >
+            <X className="w-3 h-3" />
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}

packages/client/src/components/editor/MultiFileEditor.tsx

@@ -0,0 +1,30 @@
+import { useEditorStore } from '@/stores/editorStore';
+import CodeEditor from './CodeEditor';
+import EditorTabs from './EditorTabs';
+
+export default function MultiFileEditor() {
+  const activeFilePath = useEditorStore((s) => s.activeFilePath);
+  const activeFile = useEditorStore((s) => activeFilePath ? s.openFiles[activeFilePath] : null);
+
+  return (
+    <div className="flex flex-col h-full">
+      <EditorTabs />
+      <div className="flex-1 min-h-0">
+        {activeFile ? (
+          <CodeEditor
+            key={activeFile.path}
+            filePath={activeFile.path}
+            language={activeFile.language}
+          />
+        ) : (
+          <div className="h-full flex items-center justify-center text-muted-foreground">
+            <div className="text-center">
+              <p className="text-lg font-medium">No file open</p>
+              <p className="text-sm mt-1">Select a file from the explorer to start editing</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

packages/client/src/components/explorer/FileTree.tsx

@@ -0,0 +1,108 @@
+import { useState } from 'react';
+import { ChevronRight, ChevronDown, File, Folder, FolderOpen } from 'lucide-react';
+import type { FileNode } from '@glmpilot/shared';
+import { useEditorStore } from '@/stores/editorStore';
+import { useFileStore } from '@/stores/fileStore';
+import { getLanguageFromPath } from '@glmpilot/shared';
+import { cn } from '@/lib/utils';
+
+const FILE_ICONS: Record<string, string> = {
+  html: '🌐', css: '🎨', scss: '🎨', javascript: '⚡', typescript: '💠',
+  javascriptreact: '⚛️', typescriptreact: '⚛️', json: '📋', markdown: '📝', svg: '🖼️',
+};
+
+interface FileTreeItemProps {
+  node: FileNode;
+  depth: number;
+}
+
+function FileTreeItem({ node, depth }: FileTreeItemProps) {
+  const [expanded, setExpanded] = useState(depth < 2);
+  const addFile = useEditorStore((s) => s.addFile);
+  const activeFilePath = useEditorStore((s) => s.activeFilePath);
+  const files = useFileStore((s) => s.files);
+
+  const handleClick = () => {
+    if (node.type === 'directory') {
+      setExpanded(!expanded);
+    } else {
+      const language = getLanguageFromPath(node.path);
+      const content = files[node.path] || '';
+      addFile(node.path, content, language);
+    }
+  };
+
+  const isActive = node.path === activeFilePath;
+  const lang = node.type === 'file' ? getLanguageFromPath(node.path) : '';
+  const icon = FILE_ICONS[lang] || '';
+
+  return (
+    <div>
+      <button
+        onClick={handleClick}
+        className={cn(
+          'w-full flex items-center gap-1 px-2 py-0.5 text-sm hover:bg-secondary/50 transition-colors rounded-sm',
+          isActive && 'bg-secondary text-foreground'
+        )}
+        style={{ paddingLeft: `${depth * 12 + 8}px` }}
+      >
+        {node.type === 'directory' ? (
+          <>
+            {expanded ? (
+              <ChevronDown className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+            ) : (
+              <ChevronRight className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+            )}
+            {expanded ? (
+              <FolderOpen className="w-4 h-4 text-primary/70 shrink-0" />
+            ) : (
+              <Folder className="w-4 h-4 text-primary/70 shrink-0" />
+            )}
+          </>
+        ) : (
+          <>
+            <span className="w-3.5 shrink-0" />
+            {icon ? (
+              <span className="text-xs shrink-0">{icon}</span>
+            ) : (
+              <File className="w-4 h-4 text-muted-foreground shrink-0" />
+            )}
+          </>
+        )}
+        <span className={cn('truncate', isActive ? 'text-foreground' : 'text-foreground/70')}>
+          {node.name}
+        </span>
+      </button>
+
+      {node.type === 'directory' && expanded && node.children && (
+        <div>
+          {node.children
+            .sort((a, b) => {
+              if (a.type !== b.type) return a.type === 'directory' ? -1 : 1;
+              return a.name.localeCompare(b.name);
+            })
+            .map((child) => (
+              <FileTreeItem key={child.path} node={child} depth={depth + 1} />
+            ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function FileTree() {
+  const fileTree = useFileStore((s) => s.fileTree);
+
+  return (
+    <div className="py-1">
+      {fileTree
+        .sort((a, b) => {
+          if (a.type !== b.type) return a.type === 'directory' ? -1 : 1;
+          return a.name.localeCompare(b.name);
+        })
+        .map((node) => (
+          <FileTreeItem key={node.path} node={node} depth={0} />
+        ))}
+    </div>
+  );
+}

packages/client/src/components/github/RepoImporter.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { useGitHub } from '@/hooks/useGitHub';
+import { useGitHubStore } from '@/stores/githubStore';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Github, Loader2 } from 'lucide-react';
+
+interface RepoImporterProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function RepoImporter({ open, onClose }: RepoImporterProps) {
+  const [url, setUrl] = useState('');
+  const { importRepo, isImporting } = useGitHub();
+  const importProgress = useGitHubStore((s) => s.importProgress);
+  const [error, setError] = useState('');
+
+  const handleImport = async () => {
+    if (!url.trim()) return;
+    setError('');
+    try {
+      await importRepo(url.trim());
+      onClose();
+    } catch (err) {
+      setError((err as Error).message || 'Failed to import repository');
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Github className="w-5 h-5" />
+            Import from GitHub
+          </DialogTitle>
+          <DialogDescription>
+            Paste a GitHub repository URL to import and analyze.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 mt-2">
+          <Input
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            placeholder="https://github.com/owner/repo or owner/repo"
+            disabled={isImporting}
+            onKeyDown={(e) => e.key === 'Enter' && handleImport()}
+          />
+
+          {error && <p className="text-sm text-red-400">{error}</p>}
+
+          {isImporting && (
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <Loader2 className="w-4 h-4 animate-spin" />
+              {importProgress || 'Importing...'}
+            </div>
+          )}
+
+          <div className="flex justify-end gap-2">
+            <Button variant="ghost" onClick={onClose} disabled={isImporting}>
+              Cancel
+            </Button>
+            <Button onClick={handleImport} disabled={!url.trim() || isImporting}>
+              {isImporting ? 'Importing...' : 'Import Repository'}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

packages/client/src/components/ide/EnvironmentSelector.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Monitor, Code2, Terminal } from 'lucide-react';
+
+export default function EnvironmentSelector() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-zinc-950 text-zinc-100 p-4">
+      <div className="max-w-3xl w-full">
+        <h1 className="text-3xl font-bold text-center mb-2">Select Environment</h1>
+        <p className="text-center text-zinc-400 mb-10">
+          Choose your project type to launch the IDE
+        </p>
+        
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
+          <EnvCard 
+            title="Web Development" 
+            description="HTML, CSS, JS/TS, React with Live Preview" 
+            icon={<Monitor className="w-10 h-10 mb-4 text-blue-400" />}
+            onClick={() => navigate('/ide/web')}
+          />
+          <EnvCard 
+            title="Java" 
+            description="Java JDK 17 with Console Output" 
+            icon={<Code2 className="w-10 h-10 mb-4 text-orange-400" />}
+            onClick={() => navigate('/ide/java')}
+          />
+          <EnvCard 
+            title="Python" 
+            description="Python 3 Environment with Console Output" 
+            icon={<Terminal className="w-10 h-10 mb-4 text-green-400" />}
+            onClick={() => navigate('/ide/python')}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function EnvCard({ title, description, icon, onClick }: { title: string, description: string, icon: React.ReactNode, onClick: () => void }) {
+  return (
+    <div 
+      onClick={onClick}
+      className="flex flex-col items-center justify-center p-8 bg-zinc-900 border border-zinc-800 hover:border-zinc-700 hover:bg-zinc-800/80 cursor-pointer rounded-xl transition-all duration-200 shadow-sm"
+    >
+      {icon}
+      <h3 className="text-xl font-medium mb-3">{title}</h3>
+      <p className="text-sm text-center text-zinc-400 leading-relaxed">{description}</p>
+    </div>
+  );
+}

packages/client/src/components/landing/CTAFooterWrapper.tsx

@@ -0,0 +1,27 @@
+import CTASection from './CTASection';
+import FooterSection from './FooterSection';
+import HLSVideo from './HLSVideo';
+
+export default function CTAFooterWrapper() {
+  return (
+    <section className="relative overflow-hidden">
+      {/* Background HLS Video */}
+      <HLSVideo
+        src="https://stream.mux.com/tLkHO1qZoaaQOUeVWo8hEBeGQfySP02EPS02BmnNFyXys.m3u8"
+        className="absolute inset-0 w-full h-full object-cover z-0"
+      />
+
+      {/* Gradient Overlay */}
+      <div
+        className="absolute inset-0 z-[1]"
+        style={{
+          background:
+            'linear-gradient(to bottom, hsl(260 87% 3%) 0%, hsl(260 87% 3% / 0.85) 15%, hsl(260 87% 3% / 0.4) 40%, hsl(260 87% 3% / 0.15) 60%, hsl(260 87% 3% / 0.3) 100%)',
+        }}
+      />
+
+      <CTASection />
+      <FooterSection />
+    </section>
+  );
+}

packages/client/src/components/landing/CTASection.tsx

@@ -0,0 +1,25 @@
+import { Link } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+
+export default function CTASection() {
+  return (
+    <div className="relative z-10 py-32 px-4">
+      <div className="liquid-glass rounded-[2rem] p-12 sm:p-20 max-w-4xl mx-auto text-center">
+        <h2 className="text-hero-heading text-3xl sm:text-5xl font-semibold">
+          Ready to Build
+          <br />
+          Something Amazing?
+        </h2>
+        <p className="text-hero-sub mt-4 max-w-lg mx-auto">
+          Join thousands of frontend developers using AI-powered code review and intelligent completions. Free to start.
+        </p>
+        <div className="flex justify-center gap-4 mt-8">
+          <Link to="/ide">
+            <Button variant="hero">Launch GLMPilot</Button>
+          </Link>
+          <Button variant="heroSecondary">View on GitHub</Button>
+        </div>
+      </div>
+    </div>
+  );
+}

packages/client/src/components/landing/ChessSection.tsx

@@ -0,0 +1,52 @@
+import { Link } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import SectionBadge from './SectionBadge';
+import HLSVideo from './HLSVideo';
+
+export default function ChessSection() {
+  return (
+    <section className="py-32 px-4 max-w-6xl mx-auto">
+      <div className="grid lg:grid-cols-2 gap-20 items-center">
+        {/* Left — Video */}
+        <div className="liquid-glass rounded-3xl aspect-[4/3] overflow-hidden">
+          <HLSVideo
+            src="https://stream.mux.com/1CCfG6mPC7LbMOAs6iBOfPeNd3WaKlZuHuKHp00G62j8.m3u8"
+            className="w-full h-full object-cover"
+          />
+        </div>
+
+        {/* Right — Content */}
+        <div>
+          <SectionBadge label="Inline AI" action="New" />
+          <h2 className="text-hero-heading text-3xl sm:text-4xl font-semibold leading-tight mt-6">
+            Code Completions That
+            <br />
+            Actually Understand Context
+          </h2>
+          <p className="text-hero-sub mt-4 leading-relaxed">
+            Powered by ASI-1 Mini, get intelligent inline suggestions that consider your entire
+            workspace — not just the current file. Accept with Tab, dismiss with Escape.
+          </p>
+          <ul className="mt-6 space-y-3">
+            {[
+              'Full workspace context awareness',
+              'Framework-specific suggestions',
+              'Learns your coding patterns',
+            ].map((item) => (
+              <li key={item} className="flex items-center gap-3">
+                <span className="w-1.5 h-1.5 rounded-full bg-primary shrink-0" />
+                <span className="text-foreground/80">{item}</span>
+              </li>
+            ))}
+          </ul>
+          <div className="flex gap-4 mt-8">
+            <Link to="/ide">
+              <Button variant="hero">Try It Now</Button>
+            </Link>
+            <Button variant="heroSecondary">Read the Docs</Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

packages/client/src/components/landing/FeaturesSection.tsx

@@ -0,0 +1,79 @@
+import { Shield, Zap, FileText } from 'lucide-react';
+import SectionBadge from './SectionBadge';
+import HLSVideo from './HLSVideo';
+
+const features = [
+  {
+    icon: Shield,
+    title: 'Security Agent',
+    description: 'Scans for XSS, CSRF, secrets exposure, and 15+ vulnerability categories. Get OWASP-referenced findings with one-click fixes.',
+    stat: '< 30s',
+    statLabel: 'full repo scan',
+  },
+  {
+    icon: Zap,
+    title: 'Performance Agent',
+    description: 'Detects memory leaks, unnecessary re-renders, bundle bloat, and missing optimizations. Every finding includes before/after code.',
+    stat: '148%',
+    statLabel: 'avg. performance improvement',
+  },
+  {
+    icon: FileText,
+    title: 'Auto Documentation',
+    description: 'Generates README, component API docs, and architecture overviews from your code. Never write docs from scratch again.',
+    stat: '100%',
+    statLabel: 'documentation coverage',
+  },
+];
+
+export default function FeaturesSection() {
+  return (
+    <section className="relative overflow-hidden">
+      {/* Background HLS Video */}
+      <HLSVideo
+        src="https://stream.mux.com/Jwr2RhmsNrd6GEspBNgm02vJsRZAGlaoQIh4AucGdASw.m3u8"
+        className="absolute inset-0 w-full h-full object-cover z-0"
+      />
+
+      {/* Gradient Overlays */}
+      <div className="absolute top-0 left-0 right-0 h-[40%] bg-gradient-to-b from-background via-background/80 to-transparent z-[1]" />
+      <div className="absolute bottom-0 left-0 right-0 h-[40%] bg-gradient-to-t from-background via-background/80 to-transparent z-[1]" />
+      <div className="absolute inset-0 bg-background/40 z-[1]" />
+
+      {/* Content */}
+      <div className="relative z-10 py-32 px-4 max-w-6xl mx-auto">
+        <SectionBadge label="Core Platform" action="Overview" />
+
+        <h2 className="text-hero-heading text-3xl sm:text-5xl font-semibold text-center mt-6">
+          Built for Developers Who
+          <br />
+          Ship Relentlessly
+        </h2>
+
+        <p className="text-hero-sub text-center max-w-xl mx-auto mt-4">
+          Four AI agents that keep your codebase clean, secure, and well-documented without slowing you down.
+        </p>
+
+        <div className="grid md:grid-cols-3 gap-6 mt-16">
+          {features.map((feature) => (
+            <div
+              key={feature.title}
+              className="liquid-glass rounded-3xl p-8 flex flex-col transition-colors hover:bg-white/[0.03]"
+            >
+              <feature.icon className="text-primary w-8 h-8" />
+              <h3 className="text-hero-heading text-lg font-semibold mt-4">{feature.title}</h3>
+              <p className="text-muted-foreground text-sm mt-2 leading-relaxed flex-1">
+                {feature.description}
+              </p>
+              <div className="border-t border-border/50 my-6" />
+              <div>
+                <span className="text-2xl font-semibold text-hero-heading">{feature.stat}</span>
+                <span className="text-sm text-muted-foreground ml-2">{feature.statLabel}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

packages/client/src/components/landing/FooterSection.tsx

@@ -0,0 +1,59 @@
+import { Link } from 'react-router-dom';
+import { Terminal } from 'lucide-react';
+
+const footerLinks = {
+  Product: ['Features', 'Pricing', 'Agents', 'Changelog', 'Roadmap'],
+  Developers: ['Documentation', 'API Reference', 'Examples', 'Community'],
+  Company: ['About', 'Blog', 'Careers', 'Contact'],
+};
+
+export default function FooterSection() {
+  return (
+    <footer className="relative z-10 mt-20">
+      <div className="max-w-6xl mx-auto px-4 border-t border-border/30 pt-16 pb-8">
+        <div className="grid grid-cols-2 md:grid-cols-5 gap-8">
+          {/* Logo Column */}
+          <div className="col-span-2">
+            <Link to="/" className="flex items-center gap-2">
+              <div className="w-7 h-7 rounded-lg bg-gradient-to-b from-secondary to-muted flex items-center justify-center">
+                <Terminal className="w-4 h-4 text-primary" />
+              </div>
+              <span className="text-xl font-semibold tracking-tight">GLMPilot</span>
+            </Link>
+            <p className="text-muted-foreground text-sm mt-4 max-w-xs">
+              AI-powered browser IDE for frontend developers. Build, review, and ship with confidence.
+            </p>
+          </div>
+
+          {/* Link Columns */}
+          {Object.entries(footerLinks).map(([title, links]) => (
+            <div key={title}>
+              <h4 className="text-sm font-semibold text-foreground mb-4">{title}</h4>
+              <ul className="space-y-2.5">
+                {links.map((link) => (
+                  <li key={link}>
+                    <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                      {link}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="border-t border-border/30 mt-12 pt-8 flex flex-col sm:flex-row justify-between items-center gap-4">
+          <p className="text-sm text-muted-foreground">© 2025 GLMPilot</p>
+          <div className="flex gap-6">
+            {['Privacy', 'Terms', 'Cookies'].map((item) => (
+              <a key={item} href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                {item}
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

packages/client/src/components/landing/HLSVideo.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from 'react';
+import Hls from 'hls.js';
+
+interface HLSVideoProps {
+  src: string;
+  className?: string;
+}
+
+export default function HLSVideo({ src, className = '' }: HLSVideoProps) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    if (Hls.isSupported()) {
+      const hls = new Hls({
+        enableWorker: true,
+        lowLatencyMode: false,
+      });
+      hls.loadSource(src);
+      hls.attachMedia(video);
+      hls.on(Hls.Events.MANIFEST_PARSED, () => {
+        video.play().catch(() => {});
+      });
+      return () => hls.destroy();
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+      video.src = src;
+      video.addEventListener('loadedmetadata', () => {
+        video.play().catch(() => {});
+      });
+    }
+  }, [src]);
+
+  return (
+    <video
+      ref={videoRef}
+      className={className}
+      autoPlay
+      loop
+      muted
+      playsInline
+    />
+  );
+}

packages/client/src/components/landing/HeroSection.tsx

@@ -0,0 +1,69 @@
+import { Link } from 'react-router-dom';
+import { ChevronRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import Navbar from './Navbar';
+
+export default function HeroSection() {
+  return (
+    <section className="relative min-h-screen flex flex-col overflow-hidden">
+      {/* Background Video */}
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute inset-0 w-full h-full object-cover"
+      >
+        <source
+          src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260309_042944_4a2205b7-b061-490a-852b-92d9e9955ce9.mp4"
+          type="video/mp4"
+        />
+      </video>
+
+      {/* Gradient Overlay */}
+      <div
+        className="absolute inset-0 pointer-events-none z-[1]"
+        style={{
+          background:
+            'linear-gradient(to bottom, transparent 0%, transparent 30%, hsl(260 87% 3% / 0.1) 45%, hsl(260 87% 3% / 0.4) 60%, hsl(260 87% 3% / 0.75) 75%, hsl(260 87% 3%) 95%)',
+        }}
+      />
+
+      {/* Content */}
+      <div className="relative z-10 flex flex-col min-h-screen">
+        <Navbar />
+
+        <div className="flex-1 flex flex-col items-center justify-center px-4">
+          {/* Announcement Badge */}
+          <div className="liquid-glass rounded-full px-4 py-1.5 inline-flex items-center gap-2 text-sm mb-6">
+            <span className="text-foreground/80">AI Code Review</span>
+            <span className="bg-white/10 rounded-full px-2.5 py-0.5 text-xs inline-flex items-center gap-1 text-foreground/60">
+              Explore
+              <ChevronRight className="w-3 h-3" />
+            </span>
+          </div>
+
+          {/* Heading */}
+          <h1 className="text-hero-heading text-4xl sm:text-6xl lg:text-7xl font-semibold leading-[1.05] tracking-tight text-center max-w-5xl mx-auto">
+            Build, Review, and Ship
+            <br />
+            Frontend Code Faster
+          </h1>
+
+          {/* Subheading */}
+          <p className="text-hero-sub text-lg max-w-md text-center mx-auto mt-4 opacity-80">
+            A browser-based IDE with AI-powered multi-agent code review, inline completions, and one-click GitHub integration.
+          </p>
+
+          {/* CTA Buttons */}
+          <div className="flex justify-center gap-4 mt-8">
+            <Link to="/ide">
+              <Button variant="hero">Launch IDE</Button>
+            </Link>
+            <Button variant="heroSecondary">Watch Demo</Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

packages/client/src/components/landing/LandingPage.tsx

@@ -0,0 +1,19 @@
+import HeroSection from './HeroSection';
+import FeaturesSection from './FeaturesSection';
+import ChessSection from './ChessSection';
+import ReverseChessSection from './ReverseChessSection';
+import NumbersSection from './NumbersSection';
+import CTAFooterWrapper from './CTAFooterWrapper';
+
+export default function LandingPage() {
+  return (
+    <main className="bg-background min-h-screen overflow-x-hidden">
+      <HeroSection />
+      <FeaturesSection />
+      <ChessSection />
+      <ReverseChessSection />
+      <NumbersSection />
+      <CTAFooterWrapper />
+    </main>
+  );
+}

packages/client/src/components/landing/MarqueeRow.tsx

@@ -0,0 +1,22 @@
+interface MarqueeRowProps {
+  brands: Array<{ name: string; initial: string }>;
+}
+
+export default function MarqueeRow({ brands }: MarqueeRowProps) {
+  const duplicated = [...brands, ...brands];
+
+  return (
+    <div className="overflow-hidden relative">
+      <div className="flex items-center gap-8 animate-marquee w-max">
+        {duplicated.map((brand, i) => (
+          <div key={`${brand.name}-${i}`} className="flex items-center gap-2 shrink-0">
+            <div className="liquid-glass w-6 h-6 rounded-lg inline-flex items-center justify-center">
+              <span className="text-xs font-medium text-foreground/70">{brand.initial}</span>
+            </div>
+            <span className="text-sm text-muted-foreground whitespace-nowrap">{brand.name}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

packages/client/src/components/landing/Navbar.tsx

@@ -0,0 +1,36 @@
+import { Link } from 'react-router-dom';
+import { Terminal, ChevronDown } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export default function Navbar() {
+  return (
+    <nav className="relative z-20 flex justify-center pt-4 px-4">
+      <div className="liquid-glass rounded-3xl px-6 py-3 flex items-center justify-between w-full max-w-[850px]">
+        {/* Logo */}
+        <Link to="/" className="flex items-center gap-2">
+          <div className="w-7 h-7 rounded-lg bg-gradient-to-b from-secondary to-muted flex items-center justify-center">
+            <Terminal className="w-4 h-4 text-primary" />
+          </div>
+          <span className="text-xl font-semibold tracking-tight text-foreground">GLMPilot</span>
+        </Link>
+
+        {/* Nav Items */}
+        <div className="hidden md:flex items-center gap-6">
+          <button className="text-sm text-foreground/70 hover:text-foreground transition-colors">Features</button>
+          <button className="text-sm text-foreground/70 hover:text-foreground transition-colors inline-flex items-center gap-1">
+            Agents <ChevronDown className="w-3 h-3" />
+          </button>
+          <button className="text-sm text-foreground/70 hover:text-foreground transition-colors">Pricing</button>
+          <button className="text-sm text-foreground/70 hover:text-foreground transition-colors inline-flex items-center gap-1">
+            Docs <ChevronDown className="w-3 h-3" />
+          </button>
+        </div>
+
+        {/* CTA */}
+        <Link to="/ide">
+          <Button variant="hero" size="sm">Get Started</Button>
+        </Link>
+      </div>
+    </nav>
+  );
+}

packages/client/src/components/landing/NumbersSection.tsx

@@ -0,0 +1,46 @@
+import HLSVideo from './HLSVideo';
+
+export default function NumbersSection() {
+  return (
+    <section className="relative overflow-hidden">
+      {/* Background HLS Video */}
+      <HLSVideo
+        src="https://stream.mux.com/Kec29dVyJgiPdtWaQtPuEiiGHkJIYQAVUJcNiIHUYeo.m3u8"
+        className="absolute inset-0 w-full h-full object-cover z-0"
+      />
+
+      {/* Gradient Overlay */}
+      <div
+        className="absolute inset-0 z-[1]"
+        style={{
+          background:
+            'linear-gradient(to top, hsl(260 87% 3%) 0%, hsl(260 87% 3% / 0.85) 15%, hsl(260 87% 3% / 0.4) 40%, hsl(260 87% 3% / 0.15) 60%, hsl(260 87% 3% / 0.3) 100%)',
+        }}
+      />
+
+      {/* Content */}
+      <div className="relative z-10 py-32 max-w-6xl mx-auto text-center px-4">
+        <p className="text-7xl sm:text-[8rem] lg:text-[10rem] font-semibold tracking-tighter text-hero-heading leading-none">
+          50K+
+        </p>
+        <p className="text-primary text-lg font-medium mt-2">Lines of code reviewed</p>
+        <p className="text-hero-sub max-w-md mx-auto mt-4">
+          Every day, GLMPilot's AI agents analyze thousands of files to keep codebases secure and performant.
+        </p>
+
+        <div className="mt-24">
+          <div className="liquid-glass rounded-3xl p-12 grid md:grid-cols-2 max-w-3xl mx-auto">
+            <div className="md:border-r border-border/50 md:pr-12">
+              <p className="text-5xl font-semibold text-hero-heading">4</p>
+              <p className="text-hero-sub mt-2">Specialized AI agents</p>
+            </div>
+            <div className="md:pl-12 mt-8 md:mt-0">
+              <p className="text-5xl font-semibold text-hero-heading">99.9%</p>
+              <p className="text-hero-sub mt-2">API uptime</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

packages/client/src/components/landing/ReverseChessSection.tsx

@@ -0,0 +1,56 @@
+import { Button } from '@/components/ui/button';
+import SectionBadge from './SectionBadge';
+import HLSVideo from './HLSVideo';
+
+const stats = [
+  { value: '4 agents', label: 'parallel analysis' },
+  { value: '< 60s', label: 'full repo review' },
+  { value: '1-click', label: 'PR generation' },
+  { value: '100%', label: 'ASI-1 powered' },
+];
+
+export default function ReverseChessSection() {
+  return (
+    <section className="py-32 px-4 max-w-6xl mx-auto">
+      <div className="grid lg:grid-cols-2 gap-20 items-center">
+        {/* Left — Content */}
+        <div className="order-2 lg:order-1">
+          <SectionBadge label="GitHub Integration" action="Beta" />
+          <h2 className="text-hero-heading text-3xl sm:text-4xl font-semibold leading-tight mt-6">
+            Paste a Repo URL.
+            <br />
+            Get a Full Review.
+          </h2>
+          <p className="text-hero-sub mt-4 leading-relaxed">
+            Import any GitHub repository and get a comprehensive multi-agent analysis in seconds.
+            Security vulnerabilities, performance issues, and auto-generated documentation — all
+            delivered as PR-ready fixes.
+          </p>
+
+          <div className="grid grid-cols-2 gap-4 mt-8">
+            {stats.map((stat) => (
+              <div key={stat.label} className="liquid-glass rounded-2xl p-4">
+                <p className="text-lg font-semibold text-hero-heading">{stat.value}</p>
+                <p className="text-sm text-muted-foreground">{stat.label}</p>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-8">
+            <Button variant="hero">Import a Repo</Button>
+          </div>
+        </div>
+
+        {/* Right — Video */}
+        <div className="order-1 lg:order-2">
+          <div className="liquid-glass rounded-3xl aspect-[4/3] overflow-hidden">
+            <HLSVideo
+              src="https://stream.mux.com/f0001qPDy00mvqP023lqK3lWx31uHvxirFCHK1yNLczzqxY.m3u8"
+              className="w-full h-full object-cover"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

packages/client/src/components/landing/SectionBadge.tsx

@@ -0,0 +1,20 @@
+import { ChevronRight } from 'lucide-react';
+
+interface SectionBadgeProps {
+  label: string;
+  action: string;
+}
+
+export default function SectionBadge({ label, action }: SectionBadgeProps) {
+  return (
+    <div className="flex justify-center">
+      <div className="liquid-glass rounded-full px-4 py-1.5 inline-flex items-center gap-2 text-sm">
+        <span className="text-foreground/80">{label}</span>
+        <span className="bg-white/10 rounded-full px-2.5 py-0.5 text-xs inline-flex items-center gap-1 text-foreground/60">
+          {action}
+          <ChevronRight className="w-3 h-3" />
+        </span>
+      </div>
+    </div>
+  );
+}

packages/client/src/components/landing/TestimonialsSection.tsx

@@ -0,0 +1,56 @@
+const testimonials = [
+  {
+    quote: 'The security agent caught an XSS vulnerability in our checkout flow that our entire team missed. The fix was ready in seconds.',
+    name: 'Alex Kim',
+    role: 'Senior Frontend Dev, Streamline',
+    initials: 'AK',
+  },
+  {
+    quote: 'Having AI that understands my entire workspace context is a game-changer. The completions are actually useful, not just autocomplete on steroids.',
+    name: 'Sarah Chen',
+    role: 'Tech Lead, BuildKit',
+    initials: 'SC',
+  },
+  {
+    quote: 'We imported our React monorepo and got a full review with docs in under a minute. The PR it generated was merge-ready.',
+    name: 'Marcus Webb',
+    role: 'Engineering Manager, Pixelform',
+    initials: 'MW',
+  },
+];
+
+export default function TestimonialsSection() {
+  return (
+    <section className="py-32 px-4 max-w-6xl mx-auto">
+      <div className="text-center">
+        <h2 className="text-hero-heading text-3xl sm:text-5xl font-semibold">
+          Loved by Frontend
+          <br />
+          Developers Everywhere
+        </h2>
+        <p className="text-hero-sub mt-4">Hear from the developers who made the switch.</p>
+      </div>
+
+      <div className="grid md:grid-cols-3 gap-6 mt-16">
+        {testimonials.map((t, i) => (
+          <div
+            key={t.name}
+            className={`liquid-glass rounded-3xl p-8 flex flex-col ${i === 1 ? 'md:-translate-y-6' : ''}`}
+          >
+            <p className="text-foreground/90 text-sm leading-relaxed flex-1">"{t.quote}"</p>
+            <div className="border-t border-border/50 my-6" />
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-full bg-secondary flex items-center justify-center text-sm font-medium text-foreground">
+                {t.initials}
+              </div>
+              <div>
+                <p className="text-sm font-medium text-foreground">{t.name}</p>
+                <p className="text-muted-foreground text-sm">{t.role}</p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

packages/client/src/components/layout/IDEShell.tsx

@@ -0,0 +1,98 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import TopBar from './TopBar';
+import StatusBar from './StatusBar';
+import PanelLayout from './PanelLayout';
+import { useFileStore } from '@/stores/fileStore';
+import { useEditorStore } from '@/stores/editorStore';
+import { useEnvStore, Environment } from '@/stores/envStore';
+
+export default function IDEShell() {
+  const { env } = useParams<{ env: string }>();
+  const navigate = useNavigate();
+
+  const [layout, setLayout] = useState<'editor' | 'split' | 'preview'>('split');
+  const initialize = useFileStore((s) => s.initialize);
+  const initialized = useFileStore((s) => s.initialized);
+  const files = useFileStore((s) => s.files);
+  const createFile = useFileStore((s) => s.createFile);
+  const deleteFile = useFileStore((s) => s.deleteFile);
+  const addFile = useEditorStore((s) => s.addFile);
+  const removeFile = useEditorStore((s) => s.removeFile);
+  const openFiles = useEditorStore((s) => s.openFiles);
+  const environment = useEnvStore((s) => s.environment);
+  const setEnvironment = useEnvStore((s) => s.setEnvironment);
+  const [hasAutoOpened, setHasAutoOpened] = useState(false);
+
+  useEffect(() => {
+    initialize();
+  }, [initialize]);
+
+  useEffect(() => {
+    if (env && !['web', 'java', 'python'].includes(env)) {
+      navigate('/ide', { replace: true });
+    }
+  }, [env, navigate]);
+
+  useEffect(() => {
+    if (!initialized || !env || !['web', 'java', 'python'].includes(env)) return;
+
+    const targetEnv = env as Environment;
+    
+    // If URL environment differs from store, clean up and scaffold
+    if (environment !== targetEnv) {
+      setEnvironment(targetEnv);
+      
+      // Cleanup old files
+      Object.keys(files).forEach(f => {
+        if (f === 'README.md') return;
+        const isJava = f.endsWith('.java');
+        const isPython = f.endsWith('.py');
+        const isWeb = ['.html', '.css', '.js', '.ts', '.tsx', '.jsx'].some(ext => f.endsWith(ext));
+        
+        if (targetEnv === 'java' && !isJava) { deleteFile(f); removeFile(f); }
+        if (targetEnv === 'python' && !isPython) { deleteFile(f); removeFile(f); }
+        if (targetEnv === 'web' && !isWeb) { deleteFile(f); removeFile(f); }
+      });
+
+      // Scaffold files
+      if (targetEnv === 'web') {
+        const content = `<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>Document</title>\n  <style>\n    body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }\n  </style>\n</head>\n<body>\n  <h1>Hello Web!</h1>\n</body>\n</html>`;
+        if (!files['index.html']) createFile('index.html', content);
+      } else if (targetEnv === 'java') {
+        const content = `public class Main {\n    public static void main(String[] args) {\n        System.out.println("Hello, Java!");\n    }\n}`;
+        if (!files['Main.java']) createFile('Main.java', content);
+      } else if (targetEnv === 'python') {
+        const content = `print("Hello, Python!")`;
+        if (!files['main.py']) createFile('main.py', content);
+      }
+    }
+  }, [env, environment, initialized]); // Missing files to avoid loop on scaffolding
+
+  useEffect(() => {
+    if (initialized && environment === env && !hasAutoOpened) {
+      if (Object.keys(openFiles).length === 0) {
+        if (environment === 'web' && files['index.html']) addFile('index.html', files['index.html'], 'html');
+        else if (environment === 'java' && files['Main.java']) addFile('Main.java', files['Main.java'], 'java');
+        else if (environment === 'python' && files['main.py']) addFile('main.py', files['main.py'], 'python');
+      }
+      setHasAutoOpened(true);
+    }
+  }, [initialized, environment, env, hasAutoOpened, files, openFiles, addFile]);
+
+  if (!initialized) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-background">
+        <div className="text-muted-foreground animate-pulse font-mono text-sm">Initializing workspace...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-screen flex flex-col bg-background overflow-hidden">
+        <TopBar layout={layout} onLayoutChange={setLayout} />
+        <PanelLayout layout={layout} />
+        <StatusBar />
+    </div>
+  );
+}

packages/client/src/components/layout/PanelLayout.tsx

@@ -0,0 +1,67 @@
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import Sidebar from './Sidebar';
+import MultiFileEditor from '@/components/editor/MultiFileEditor';
+import LivePreview from '@/components/preview/LivePreview';
+import TerminalPanel from '@/components/terminal/TerminalPanel';
+import AIChatPanel from '@/components/ai/AIChatPanel';
+import { useEnvStore } from '@/stores/envStore';
+
+interface PanelLayoutProps {
+  layout: 'editor' | 'split' | 'preview';
+}
+
+function ResizeHandle({ direction = 'vertical' }: { direction?: 'vertical' | 'horizontal' }) {
+  return (
+    <PanelResizeHandle
+      className={`group relative ${direction === 'vertical' ? 'w-1 hover:w-1.5' : 'h-1 hover:h-1.5'} bg-border/50 hover:bg-primary/30 transition-all`}
+    >
+      <div className={`absolute ${direction === 'vertical' ? 'inset-y-0 -left-0.5 -right-0.5' : 'inset-x-0 -top-0.5 -bottom-0.5'}`} />
+    </PanelResizeHandle>
+  );
+}
+
+export default function PanelLayout({ layout }: PanelLayoutProps) {
+  const environment = useEnvStore((s) => s.environment);
+
+  const renderSecondaryPanel = () => {
+    if (environment === 'java' || environment === 'python') {
+      return <TerminalPanel />;
+    }
+    return <LivePreview />;
+  };
+
+  return (
+    <PanelGroup direction="horizontal" className="flex-1 min-h-0">
+      {/* Left: Sidebar */}
+      <Panel defaultSize={18} minSize={10} maxSize={25} collapsible>
+        <Sidebar />
+      </Panel>
+
+      <ResizeHandle direction="vertical" />
+
+      {/* Center: Editor + Preview */}
+      <Panel defaultSize={52} minSize={30} className="flex flex-col overflow-hidden">
+        {layout === 'editor' && <MultiFileEditor />}
+        {layout === 'preview' && renderSecondaryPanel()}
+        {layout === 'split' && (
+          <PanelGroup direction="horizontal">
+            <Panel defaultSize={50}>
+              <MultiFileEditor />
+            </Panel>
+            <ResizeHandle direction="vertical" />
+            <Panel defaultSize={50}>
+              {renderSecondaryPanel()}
+            </Panel>
+          </PanelGroup>
+        )}
+      </Panel>
+
+      <ResizeHandle direction="vertical" />
+
+      {/* Right: AI Chat */}
+      <Panel defaultSize={30} minSize={20} maxSize={40} collapsible>
+        <AIChatPanel />
+      </Panel>
+    </PanelGroup>
+  );
+}

packages/client/src/components/layout/Sidebar.tsx

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import {
+  Files, Search, MessageSquare, GitBranch, Shield, Settings,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip';
+import FileTree from '@/components/explorer/FileTree';
+import AIChatPanel from '@/components/ai/AIChatPanel';
+
+type SidebarPanel = 'files' | 'search' | 'chat' | 'git' | 'agents' | 'settings';
+
+const sidebarItems: Array<{ id: SidebarPanel; icon: typeof Files; label: string }> = [
+  { id: 'files', icon: Files, label: 'Explorer' },
+  { id: 'search', icon: Search, label: 'Search' },
+  { id: 'chat', icon: MessageSquare, label: 'AI Chat' },
+  { id: 'git', icon: GitBranch, label: 'Git' },
+  { id: 'agents', icon: Shield, label: 'Agents' },
+  { id: 'settings', icon: Settings, label: 'Settings' },
+];
+
+export default function Sidebar() {
+  const [activePanel, setActivePanel] = useState<SidebarPanel>('files');
+
+  return (
+    <div className="flex h-full">
+      {/* Icon strip */}
+      <TooltipProvider delayDuration={300}>
+        <div className="w-12 bg-background border-r border-border flex flex-col items-center pt-2 gap-1">
+          {sidebarItems.map((item) => (
+            <Tooltip key={item.id}>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={() => setActivePanel(item.id)}
+                  className={cn(
+                    'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
+                    activePanel === item.id
+                      ? 'text-foreground bg-secondary'
+                      : 'text-muted-foreground hover:text-foreground hover:bg-secondary/50'
+                  )}
+                >
+                  <item.icon className="w-5 h-5" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right">{item.label}</TooltipContent>
+            </Tooltip>
+          ))}
+        </div>
+      </TooltipProvider>
+
+      {/* Panel content */}
+      <div className="flex-1 bg-card/30 overflow-hidden flex flex-col min-w-0">
+        <div className="px-3 py-2 border-b border-border">
+          <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            {sidebarItems.find((i) => i.id === activePanel)?.label}
+          </h4>
+        </div>
+        <div className="flex-1 overflow-auto min-h-0">
+          {activePanel === 'files' && <FileTree />}
+          {activePanel === 'search' && (
+            <div className="p-3">
+              <input
+                placeholder="Search files..."
+                className="w-full bg-secondary border border-border rounded px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+              />
+              <p className="text-xs text-muted-foreground mt-2">Type to search across workspace files.</p>
+            </div>
+          )}
+          {activePanel === 'chat' && (
+            <p className="p-3 text-xs text-muted-foreground">AI Chat is in the right panel.</p>
+          )}
+          {activePanel === 'git' && (
+            <div className="p-3 text-xs text-muted-foreground">
+              <p>Git integration</p>
+              <p className="mt-1">Import a repository to see Git status.</p>
+            </div>
+          )}
+          {activePanel === 'agents' && (
+            <div className="p-3 text-xs text-muted-foreground">
+              <p>Agent controls will appear here after running a review.</p>
+            </div>
+          )}
+          {activePanel === 'settings' && (
+            <div className="p-3 text-xs text-muted-foreground space-y-2">
+              <p className="font-medium text-foreground">Settings</p>
+              <p>Font Size: 14px</p>
+              <p>Tab Size: 2</p>
+              <p>Word Wrap: On</p>
+              <p>AI Completions: On</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

packages/client/src/components/layout/StatusBar.tsx

@@ -0,0 +1,64 @@
+import { useEditorStore } from '@/stores/editorStore';
+import { useAIStore } from '@/stores/aiStore';
+import { useWebSocket } from '@/hooks/useWebSocket';
+import { cn } from '@/lib/utils';
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip';
+
+const agents = ['security', 'performance', 'style', 'documentation'] as const;
+
+export default function StatusBar() {
+  const activeFilePath = useEditorStore((s) => s.activeFilePath);
+  const activeFile = useEditorStore((s) => activeFilePath ? s.openFiles[activeFilePath] : null);
+  const agentRunning = useAIStore((s) => s.agentRunning);
+  const { isConnected } = useWebSocket();
+
+  return (
+    <div className="h-6 bg-card/80 border-t border-border flex items-center px-3 text-[11px] text-muted-foreground gap-4">
+      {/* Left */}
+      <div className="flex items-center gap-3">
+        {activeFile && (
+          <span className="uppercase">{activeFile.language}</span>
+        )}
+        <span>main</span>
+      </div>
+
+      <div className="flex-1" />
+
+      {/* Center — Agent status dots */}
+      <TooltipProvider delayDuration={200}>
+        <div className="flex items-center gap-1.5">
+          {agents.map((agent) => {
+            const running = agentRunning[agent];
+            return (
+              <Tooltip key={agent}>
+                <TooltipTrigger>
+                  <span
+                    className={cn(
+                      'w-2 h-2 rounded-full transition-colors',
+                      running ? 'bg-yellow-400 animate-pulse' : 'bg-green-500/50'
+                    )}
+                  />
+                </TooltipTrigger>
+                <TooltipContent>{agent} agent: {running ? 'running' : 'idle'}</TooltipContent>
+              </Tooltip>
+            );
+          })}
+        </div>
+      </TooltipProvider>
+
+      <div className="flex-1" />
+
+      {/* Right */}
+      <div className="flex items-center gap-3">
+        {activeFile && (
+          <span>Ln {activeFile.cursorPosition.lineNumber}, Col {activeFile.cursorPosition.column}</span>
+        )}
+        <span>UTF-8</span>
+        <span className="flex items-center gap-1">
+          <span className={cn('w-1.5 h-1.5 rounded-full', isConnected ? 'bg-green-500' : 'bg-red-500')} />
+          ASI-1
+        </span>
+      </div>
+    </div>
+  );
+}

packages/client/src/components/layout/TopBar.tsx

@@ -0,0 +1,103 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Menu, Play, Shield, Github, Monitor, Columns, Eye } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useAgentReview } from '@/hooks/useAgentReview';
+import RepoImporter from '@/components/github/RepoImporter';
+import { useEnvStore } from '@/stores/envStore';
+
+interface TopBarProps {
+  layout: 'editor' | 'split' | 'preview';
+  onLayoutChange: (layout: 'editor' | 'split' | 'preview') => void;
+}
+
+export default function TopBar({ layout, onLayoutChange }: TopBarProps) {
+  const navigate = useNavigate();
+  const { reviewWorkspace, isReviewing } = useAgentReview();
+  const [showImporter, setShowImporter] = useState(false);
+  const environment = useEnvStore((s) => s.environment);
+
+  // Define global window method or a custom hook to trigger execution that terminal listens to?
+  // We'll dispatch a custom event for now that terminal/execution handler can listen to.
+  const executeCode = () => {
+    window.dispatchEvent(new CustomEvent('glmpilot:execute'));
+  };
+
+  return (
+    <>
+      <div className="h-10 bg-background border-b border-border flex items-center px-2 gap-2">
+        <button className="p-1.5 hover:bg-secondary rounded text-muted-foreground">
+          <Menu className="w-4 h-4" />
+        </button>
+        <span className="text-sm font-medium text-foreground ml-1">GLMPilot</span>
+
+        <div className="flex-1" />
+
+        {/* Layout toggles */}
+        <div className="flex items-center border border-border rounded-lg overflow-hidden">
+          {([
+            { id: 'editor' as const, icon: Monitor, label: 'Editor' },
+            { id: 'split' as const, icon: Columns, label: 'Split' },
+            { id: 'preview' as const, icon: Eye, label: 'Preview' },
+          ]).map((item) => (
+            <button
+              key={item.id}
+              onClick={() => onLayoutChange(item.id)}
+              className={`p-1.5 transition-colors ${
+                layout === item.id
+                  ? 'bg-secondary text-foreground'
+                  : 'text-muted-foreground hover:text-foreground'
+              }`}
+              title={item.label}
+            >
+              <item.icon className="w-3.5 h-3.5" />
+            </button>
+          ))}
+        </div>
+
+        {(environment === 'java' || environment === 'python') && (
+          <Button
+            size="sm"
+            onClick={executeCode}
+            className="gap-1.5 text-xs bg-green-600 hover:bg-green-700 text-white border-0 shadow-sm transition-all"
+          >
+            <Play className="w-3.5 h-3.5 fill-current" />
+            Run
+          </Button>
+        )}
+
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={() => reviewWorkspace()}
+          disabled={isReviewing}
+          className="gap-1.5 text-xs"
+        >
+          <Shield className="w-3.5 h-3.5" />
+          {isReviewing ? 'Reviewing...' : 'Review'}
+        </Button>
+
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={() => setShowImporter(true)}
+          className="gap-1.5 text-xs"
+        >
+          <Github className="w-3.5 h-3.5" />
+          Import
+        </Button>
+
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={() => navigate('/ide')}
+          className="gap-1.5 text-xs text-muted-foreground hover:text-foreground ml-2"
+        >
+          Change Environment
+        </Button>
+      </div>
+
+      <RepoImporter open={showImporter} onClose={() => setShowImporter(false)} />
+    </>
+  );
+}

packages/client/src/components/preview/LivePreview.tsx

@@ -0,0 +1,124 @@
+import { useRef, useEffect, useState } from 'react';
+import { useLivePreview } from '@/hooks/useLivePreview';
+import { RefreshCw, Monitor, Tablet, Smartphone, ExternalLink } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const viewports = [
+  { icon: Smartphone, width: 375, label: 'Mobile' },
+  { icon: Tablet, width: 768, label: 'Tablet' },
+  { icon: Monitor, width: '100%', label: 'Desktop' },
+];
+
+export default function LivePreview() {
+  const { srcdoc } = useLivePreview();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [viewportIndex, setViewportIndex] = useState(2);
+  const [consoleOutput, setConsoleOutput] = useState<Array<{ method: string; args: string[] }>>([]);
+  const [showConsole, setShowConsole] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data?.type === 'console') {
+        setConsoleOutput((prev) => [...prev.slice(-50), { method: event.data.method, args: event.data.args }]);
+      }
+    };
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  const viewport = viewports[viewportIndex];
+
+  const handleOpenInNewTab = () => {
+    const newWindow = window.open('', '_blank');
+    if (newWindow) {
+      newWindow.document.open();
+      newWindow.document.write(srcdoc);
+      newWindow.document.close();
+      newWindow.document.title = 'GLMPilot Preview';
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-background">
+      {/* Toolbar */}
+      <div className="flex items-center gap-1 px-2 py-1 border-b border-border">
+        <button
+          onClick={() => setRefreshKey((k) => k + 1)}
+          className="p-1.5 hover:bg-secondary rounded transition-colors"
+          title="Refresh"
+        >
+          <RefreshCw className="w-3.5 h-3.5 text-muted-foreground" />
+        </button>
+        <button
+          onClick={handleOpenInNewTab}
+          className="p-1.5 hover:bg-secondary rounded transition-colors"
+          title="Open in new tab"
+        >
+          <ExternalLink className="w-3.5 h-3.5 text-muted-foreground" />
+        </button>
+        <div className="w-px h-4 bg-border mx-1" />
+        {viewports.map((vp, i) => (
+          <button
+            key={vp.label}
+            onClick={() => setViewportIndex(i)}
+            className={cn(
+              'p-1.5 rounded transition-colors',
+              i === viewportIndex ? 'bg-secondary text-foreground' : 'hover:bg-secondary/50 text-muted-foreground'
+            )}
+            title={vp.label}
+          >
+            <vp.icon className="w-3.5 h-3.5" />
+          </button>
+        ))}
+        <div className="flex-1" />
+        <button
+          onClick={() => setShowConsole(!showConsole)}
+          className={cn(
+            'px-2 py-1 text-xs rounded transition-colors',
+            showConsole ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:bg-secondary/50'
+          )}
+        >
+          Console {consoleOutput.length > 0 && `(${consoleOutput.length})`}
+        </button>
+      </div>
+
+      {/* Preview */}
+      <div className="flex-1 flex items-start justify-center overflow-auto p-2 min-h-0">
+        <iframe
+          key={refreshKey}
+          ref={iframeRef}
+          srcDoc={srcdoc}
+          sandbox="allow-scripts allow-modals"
+          className="bg-white rounded border border-border"
+          style={{
+            width: typeof viewport.width === 'number' ? `${viewport.width}px` : viewport.width,
+            height: '100%',
+            maxWidth: '100%',
+          }}
+          title="Live Preview"
+        />
+      </div>
+
+      {/* Console */}
+      {showConsole && (
+        <div className="h-32 border-t border-border overflow-auto p-2 text-xs font-mono">
+          {consoleOutput.map((entry, i) => (
+            <div
+              key={i}
+              className={cn(
+                'py-0.5',
+                entry.method === 'error' ? 'text-red-400' : entry.method === 'warn' ? 'text-yellow-400' : 'text-muted-foreground'
+              )}
+            >
+              {entry.args.join(' ')}
+            </div>
+          ))}
+          {consoleOutput.length === 0 && (
+            <p className="text-muted-foreground">No console output yet.</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

packages/client/src/components/terminal/TerminalPanel.tsx

@@ -0,0 +1,189 @@
+import { useRef, useEffect, useLayoutEffect, useState } from 'react';
+import { Terminal } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+import { getSocket } from '@/services/socket';
+import { WS_EVENTS } from '@glmpilot/shared';
+import { useEditorStore } from '@/stores/editorStore';
+import { useEnvStore } from '@/stores/envStore';
+import 'xterm/css/xterm.css';
+
+export default function TerminalPanel() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const terminalRef = useRef<Terminal>();
+  const [isExecuting, setIsExecuting] = useState(false);
+  const isExecutingRef = useRef(false);
+
+  const activeFilePath = useEditorStore((s) => s.activeFilePath);
+  const openFiles = useEditorStore((s) => s.openFiles);
+  const environment = useEnvStore((s) => s.environment);
+  /** Buffered line while a program is waiting on stdin (submit on Enter as one message). */
+  const pendingStdinLineRef = useRef('');
+  /** Server-assigned id for this run (stdin + process map); set by execute:started. */
+  const currentRunIdRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const terminal = new Terminal({
+      theme: {
+        background: '#080810',
+        foreground: '#e8e8e8',
+        cursor: '#81f084',
+        selectionBackground: '#81f08433',
+        black: '#1a1a2a',
+        red: '#f07178',
+        green: '#81f084',
+        yellow: '#ffcb6b',
+        blue: '#82aaff',
+        magenta: '#c792ea',
+        cyan: '#89ddff',
+        white: '#e8e8e8',
+      },
+      fontFamily: "'Geist Mono', 'JetBrains Mono', 'Fira Code', monospace",
+      fontSize: 13,
+      cursorBlink: true,
+      cursorStyle: 'bar',
+    });
+
+    const fitAddon = new FitAddon();
+    terminal.loadAddon(fitAddon);
+    terminal.open(containerRef.current);
+    fitAddon.fit();
+
+    terminal.writeln('\x1b[1;32m✦ GLMPilot Terminal\x1b[0m');
+    terminal.writeln('\x1b[90mConnected to local environment.\x1b[0m');
+    terminal.writeln('');
+    terminal.write('\x1b[32m❯\x1b[0m ');
+
+    terminalRef.current = terminal;
+
+    terminal.onData((data) => {
+      if (!isExecutingRef.current) return;
+
+      const flushLine = () => {
+        const line = pendingStdinLineRef.current;
+        pendingStdinLineRef.current = '';
+        terminal.write('\r\n');
+        const runId = currentRunIdRef.current;
+        getSocket().emit(
+          WS_EVENTS.EXECUTE_INPUT,
+          { runId: runId ?? '', input: line + '\n' },
+          (resp: { ok?: boolean } | undefined) => {
+            if (resp?.ok === false) {
+              terminal.writeln(
+                '\r\n\x1b[31m[Input did not reach the program — try Run again after output appears]\x1b[0m'
+              );
+            }
+          }
+        );
+      };
+
+      const normalized = data.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+      for (const ch of normalized) {
+        if (ch === '\n') {
+          flushLine();
+        } else if (ch === '\x7f' || ch === '\b') {
+          if (pendingStdinLineRef.current.length > 0) {
+            pendingStdinLineRef.current = pendingStdinLineRef.current.slice(0, -1);
+            terminal.write('\b \b');
+          }
+        } else if (ch === '\t') {
+          pendingStdinLineRef.current += '\t';
+          terminal.write('\t');
+        } else if (ch < ' ' && ch !== '\t') {
+          // ignore other C0 controls
+        } else {
+          pendingStdinLineRef.current += ch;
+          terminal.write(ch);
+        }
+      }
+    });
+
+    const resizeObserver = new ResizeObserver(() => fitAddon.fit());
+    resizeObserver.observe(containerRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+      terminal.dispose();
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    isExecutingRef.current = isExecuting;
+  }, [isExecuting]);
+
+  useEffect(() => {
+    const handleExecute = () => {
+      if (!activeFilePath) return;
+      const file = openFiles[activeFilePath];
+      if (!file || !environment) return;
+
+      console.log('[Terminal] handleExecute called, setting isExecuting=true');
+      setIsExecuting(true);
+      isExecutingRef.current = true; // Update ref immediately
+      pendingStdinLineRef.current = '';
+      currentRunIdRef.current = null;
+      terminalRef.current?.clear();
+      terminalRef.current?.writeln(`\x1b[33mRunning ${file.path}...\x1b[0m\n`);
+
+      // Focus the terminal to capture keyboard input
+      terminalRef.current?.focus();
+
+      const socket = getSocket();
+      socket.emit(WS_EVENTS.EXECUTE_REQUEST, {
+        language: environment,
+        content: file.content
+      });
+    };
+
+    window.addEventListener('glmpilot:execute', handleExecute);
+    return () => window.removeEventListener('glmpilot:execute', handleExecute);
+  }, [activeFilePath, openFiles, environment]);
+
+  useEffect(() => {
+    const socket = getSocket();
+
+    const onStarted = (data: { runId: string }) => {
+      currentRunIdRef.current = data.runId;
+    };
+
+    const onToken = (data: { token: string; isError?: boolean }) => {
+      const color = data.isError ? '\x1b[31m' : '\x1b[0m';
+      const text = data.token.replace(/\n/g, '\r\n');
+      terminalRef.current?.write(`${color}${text}\x1b[0m`);
+    };
+
+    const onComplete = () => {
+      console.log('[Terminal] EXECUTE_COMPLETE received, setting isExecuting=false');
+      setIsExecuting(false);
+      isExecutingRef.current = false; // Update ref immediately
+      pendingStdinLineRef.current = '';
+      currentRunIdRef.current = null;
+      terminalRef.current?.writeln('\n\n\x1b[32m❯ Execution finished.\x1b[0m ');
+    };
+
+    const onError = (data: { error: string }) => {
+      console.log('[Terminal] EXECUTE_ERROR received:', data.error);
+      setIsExecuting(false);
+      isExecutingRef.current = false; // Update ref immediately
+      pendingStdinLineRef.current = '';
+      currentRunIdRef.current = null;
+      terminalRef.current?.writeln(`\r\n\x1b[31m[Error] ${data.error}\x1b[0m\r\n`);
+      terminalRef.current?.writeln('\x1b[32m❯\x1b[0m ');
+    };
+
+    socket.on(WS_EVENTS.EXECUTE_STARTED, onStarted);
+    socket.on(WS_EVENTS.EXECUTE_TOKEN, onToken);
+    socket.on(WS_EVENTS.EXECUTE_COMPLETE, onComplete);
+    socket.on(WS_EVENTS.EXECUTE_ERROR, onError);
+
+    return () => {
+      socket.off(WS_EVENTS.EXECUTE_STARTED, onStarted);
+      socket.off(WS_EVENTS.EXECUTE_TOKEN, onToken);
+      socket.off(WS_EVENTS.EXECUTE_COMPLETE, onComplete);
+      socket.off(WS_EVENTS.EXECUTE_ERROR, onError);
+    };
+  }, []);
+
+  return <div ref={containerRef} className="h-full w-full" />;
+}

packages/client/src/components/ui/badge.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground',
+        secondary: 'border-transparent bg-secondary text-foreground',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground',
+        outline: 'text-foreground border-border',
+        critical: 'border-transparent bg-red-500/20 text-red-400',
+        high: 'border-transparent bg-orange-500/20 text-orange-400',
+        medium: 'border-transparent bg-yellow-500/20 text-yellow-400',
+        low: 'border-transparent bg-blue-500/20 text-blue-400',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

packages/client/src/components/ui/button.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90 rounded-lg',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 rounded-lg',
+        outline: 'border border-border bg-transparent shadow-sm hover:bg-secondary hover:text-foreground rounded-lg',
+        secondary: 'bg-secondary text-foreground shadow-sm hover:bg-secondary/80 rounded-lg',
+        ghost: 'hover:bg-secondary hover:text-foreground rounded-lg',
+        link: 'text-primary underline-offset-4 hover:underline',
+        hero: 'bg-primary text-primary-foreground rounded-full px-6 py-3 text-base font-medium hover:bg-primary/90 transition-colors',
+        heroSecondary: 'liquid-glass text-foreground rounded-full px-6 py-3 text-base font-normal hover:bg-white/5 transition-colors',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

packages/client/src/components/ui/card.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('rounded-xl border border-border bg-card text-card-foreground shadow', className)} {...props} />
+  )
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props} />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  )
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

packages/client/src/components/ui/dialog.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn('fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className)}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+);
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+);
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription };

packages/client/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cn } from '@/lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-card p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-secondary focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label ref={ref} className={cn('px-2 py-1.5 text-sm font-semibold', className)} {...props} />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel };

packages/client/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      className={cn(
+        'flex h-9 w-full rounded-lg border border-border bg-secondary px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+);
+Input.displayName = 'Input';
+
+export { Input };