diff --git a/.agents/skills/testing-workspace-ide/README.md b/.agents/skills/testing-workspace-ide/README.md
new file mode 100644
index 0000000..3d07810
--- /dev/null
+++ b/.agents/skills/testing-workspace-ide/README.md
@@ -0,0 +1,162 @@
+# Testing Workspace IDE
+
+## Overview
+
+This skill provides guidance for testing the Workspace IDE application, covering both unit tests with Vitest and end-to-end tests with Playwright.
+
+## Dev Server Setup
+
+```bash
+cd Claude-OpenAI-Code
+npm install
+npm run dev
+```
+
+The app runs at `http://localhost:5173` (Vite dev server). Default state: Splits layout with 3 panes (Editor, Preview, Console).
+
+---
+
+## Unit Testing with Vitest
+
+### Setup
+
+```bash
+# Install Vitest (if not already installed)
+npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom
+
+# Add test script to package.json
+# "test": "vitest",
+# "test:coverage": "vitest --coverage"
+```
+
+### Configuration
+
+Create `vitest.config.ts` at the project root:
+
+```typescript
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+ plugins: [react()],
+ test: {
+ environment: 'jsdom',
+ globals: true,
+ setupFiles: ['./src/test/setup.ts'],
+ include: ['src/**/*.{test,spec}.{ts,tsx}'],
+ },
+});
+```
+
+### Writing Tests
+
+```typescript
+// src/components/layout/__tests__/TopBar.test.tsx
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { TopBar } from '../TopBar';
+
+describe('TopBar', () => {
+ it('renders the workspace tabs', () => {
+ render();
+ expect(screen.getByRole('tablist')).toBeInTheDocument();
+ });
+});
+```
+
+### Running Tests
+
+```bash
+npm run test # Run tests in watch mode
+npm run test:coverage # Run tests with coverage report
+npx vitest run # Run tests once (CI mode)
+```
+
+---
+
+## E2E Testing with Playwright
+
+### Setup
+
+```bash
+# Install Playwright
+npm install -D @playwright/test
+npx playwright install chromium
+```
+
+### Configuration
+
+Create `playwright.config.ts` at the project root:
+
+```typescript
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+ testDir: './e2e',
+ fullyParallel: true,
+ retries: process.env.CI ? 2 : 0,
+ webServer: {
+ command: 'npm run dev',
+ port: 5173,
+ reuseExistingServer: !process.env.CI,
+ },
+ use: {
+ baseURL: 'http://localhost:5173',
+ trace: 'on-first-retry',
+ },
+});
+```
+
+### Writing E2E Tests
+
+```typescript
+// e2e/workspace.spec.ts
+import { test, expect } from '@playwright/test';
+
+test('workspace loads with default layout', async ({ page }) => {
+ await page.goto('/');
+ await expect(page.locator('#root')).toBeVisible();
+});
+
+test('can switch layout modes', async ({ page }) => {
+ await page.goto('/');
+ // Click layout selector
+ // Verify layout changes
+});
+
+test('global search opens with Ctrl+K', async ({ page }) => {
+ await page.goto('/');
+ await page.keyboard.press('Control+k');
+ // Verify search modal is visible
+});
+```
+
+### Running E2E Tests
+
+```bash
+npx playwright test # Run all E2E tests
+npx playwright test --headed # Run with browser visible
+npx playwright test --ui # Open Playwright UI
+npx playwright show-report # View test report
+```
+
+---
+
+## Key UI Elements to Test
+
+| Element | Location | What to Verify |
+|---------|----------|---------------|
+| **LayoutSelector** | TopBar, top-right | Dropdown opens, layout name updates |
+| **File Tree** | Left sidebar | Files list, context menu, CRUD operations |
+| **Tools Dock** | Bottom toolbar | Tool buttons open correct panes |
+| **Search Bar** | Ctrl+K modal | Opens/closes, shows results |
+| **Resources Panel** | Bottom sidebar | Shows RAM, CPU, Storage bars |
+| **Spotlight** | Click project name | Settings page opens |
+| **Pane Options** | Three dots icon | Split, maximize, float options |
+
+## Tips
+
+- No authentication required — the app runs fully locally.
+- CI runs build check via GitHub Actions. No automated test suite exists by default.
+- The app uses Zustand for state management. Layout state is in `workspaceStore` under `kittyLayout`.
+- Layout modes: Stack, Tall, Fat, Grid, Splits, Horizontal, Vertical.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
new file mode 100644
index 0000000..b4472c1
--- /dev/null
+++ b/.github/CODEOWNERS
@@ -0,0 +1,2 @@
+# Default code owners for the repository
+* @ATC-O48
diff --git a/.github/Funding.yml b/.github/Funding.yml
index 42bf91f..b4ca02c 100644
--- a/.github/Funding.yml
+++ b/.github/Funding.yml
@@ -1,6 +1,6 @@
# These are supported funding model platforms
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+github: [ATC-O48]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
new file mode 100644
index 0000000..fa8f2b1
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,91 @@
+name: Bug Report
+description: Report a bug or unexpected behavior in Workspace IDE.
+labels:
+ - "bug"
+ - "triage"
+body:
+ - type: markdown
+ attributes:
+ value: |
+ Thank you for taking the time to report a bug! Please fill out the form below to help us investigate.
+
+ - type: textarea
+ id: description
+ attributes:
+ label: Description
+ description: A clear and concise description of what the bug is.
+ validations:
+ required: true
+
+ - type: textarea
+ id: steps_to_reproduce
+ attributes:
+ label: Steps to Reproduce
+ description: Steps to reproduce the behavior.
+ placeholder: |
+ 1. Open the IDE in browser
+ 2. Click on '...'
+ 3. Scroll down to '...'
+ 4. See error
+ validations:
+ required: true
+
+ - type: textarea
+ id: expected_behavior
+ attributes:
+ label: Expected Behavior
+ description: A clear and concise description of what you expected to happen.
+ validations:
+ required: true
+
+ - type: textarea
+ id: actual_behavior
+ attributes:
+ label: Actual Behavior
+ description: A clear and concise description of what actually happened.
+ validations:
+ required: true
+
+ - type: dropdown
+ id: os
+ attributes:
+ label: Operating System
+ options:
+ - Windows
+ - macOS
+ - Linux
+ - Other
+ validations:
+ required: true
+
+ - type: dropdown
+ id: browser
+ attributes:
+ label: Browser
+ options:
+ - Chrome
+ - Firefox
+ - Safari
+ - Edge
+ - Other
+ validations:
+ required: true
+
+ - type: input
+ id: node_version
+ attributes:
+ label: Node.js Version
+ description: Run `node --version` to find out.
+ placeholder: "v18.x.x"
+
+ - type: textarea
+ id: screenshots
+ attributes:
+ label: Screenshots
+ description: If applicable, add screenshots to help explain the problem.
+
+ - type: textarea
+ id: additional_context
+ attributes:
+ label: Additional Context
+ description: Add any other context about the problem here (console errors, logs, etc.).
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 0000000..20b363b
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+ - name: Discussions
+ url: https://github.com/ATC-O48/Claude-OpenAI-Code/discussions
+ about: Ask questions, share ideas, and connect with the community.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
new file mode 100644
index 0000000..c750474
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -0,0 +1,47 @@
+name: Feature Request
+description: Suggest a new feature or improvement for Workspace IDE.
+labels:
+ - "enhancement"
+ - "triage"
+body:
+ - type: markdown
+ attributes:
+ value: |
+ Thank you for suggesting a feature! Please fill out the form below so we can understand your request.
+
+ - type: textarea
+ id: description
+ attributes:
+ label: Description
+ description: A clear and concise description of the feature you'd like.
+ validations:
+ required: true
+
+ - type: textarea
+ id: use_case
+ attributes:
+ label: Use Case
+ description: Describe the problem or workflow this feature would address.
+ placeholder: "As a developer, I want to ... so that ..."
+ validations:
+ required: true
+
+ - type: textarea
+ id: proposed_solution
+ attributes:
+ label: Proposed Solution
+ description: Describe how you think this feature should work.
+ validations:
+ required: true
+
+ - type: textarea
+ id: alternatives
+ attributes:
+ label: Alternatives Considered
+ description: Describe any alternative solutions or features you've considered.
+
+ - type: textarea
+ id: additional_context
+ attributes:
+ label: Additional Context
+ description: Add any other context, mockups, or screenshots about the feature request.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000..ae36cdb
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,32 @@
+## Description
+
+
+
+## Type of Change
+
+- [ ] Bug fix (non-breaking change that fixes an issue)
+- [ ] New feature (non-breaking change that adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] Documentation update
+- [ ] Refactoring (no functional changes)
+- [ ] Performance improvement
+
+## Testing
+
+
+
+- [ ] Tested locally with `npm run dev`
+- [ ] Verified in Chrome
+- [ ] Verified in Firefox (if applicable)
+
+## Screenshots
+
+
+
+## Checklist
+
+- [ ] My code follows the project's code style
+- [ ] I have run `npm run lint` with no errors
+- [ ] I have run `npm run build` successfully
+- [ ] I have added/updated documentation as needed
+- [ ] My changes do not introduce new warnings
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..40cceb3
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,41 @@
+name: CI
+
+on:
+ push:
+ branches: [main]
+ pull_request:
+ branches: [main]
+
+permissions:
+ contents: read
+
+jobs:
+ build:
+ name: Lint, Type-check & Build
+ runs-on: ubuntu-latest
+
+ strategy:
+ matrix:
+ node-version: [20, 22]
+
+ steps:
+ - name: Checkout repository
+ uses: actions/checkout@v4
+
+ - name: Setup Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@v4
+ with:
+ node-version: ${{ matrix.node-version }}
+ cache: npm
+
+ - name: Install dependencies
+ run: npm ci
+
+ - name: Lint
+ run: npm run lint
+
+ - name: Type-check
+ run: npx tsc --noEmit
+
+ - name: Build
+ run: npm run build
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..15d8892
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,191 @@
+# Contributing to Workspace IDE
+
+Thank you for your interest in contributing to Workspace IDE! This guide will help you get started.
+
+## Table of Contents
+
+- [Development Setup](#development-setup)
+- [Code Style Guidelines](#code-style-guidelines)
+- [Pull Request Process](#pull-request-process)
+- [Issue Guidelines](#issue-guidelines)
+- [Project Architecture](#project-architecture)
+
+---
+
+## Development Setup
+
+### Prerequisites
+
+- **Node.js** 18+ (check with `node --version`)
+- **npm** 9+ (check with `npm --version`)
+- **Git** 2.30+
+
+### Getting Started
+
+```bash
+# 1. Fork the repository on GitHub
+
+# 2. Clone your fork
+git clone https://github.com//Claude-OpenAI-Code.git
+cd Claude-OpenAI-Code
+
+# 3. Install dependencies
+npm install
+
+# 4. Start the development server
+npm run dev
+```
+
+The app will be available at `http://localhost:5173` (or the next available port).
+
+### Available Commands
+
+| Command | Description |
+|---------|-------------|
+| `npm run dev` | Start Vite dev server with HMR |
+| `npm run build` | Type-check with `tsc -b` and build for production |
+| `npm run preview` | Preview the production build locally |
+| `npm run lint` | Run ESLint across the project |
+
+---
+
+## Code Style Guidelines
+
+### TypeScript
+
+- Use **strict TypeScript** — avoid `any` types
+- Define types in `src/types/workspace.ts` for shared interfaces
+- Use descriptive names for variables and functions
+- Prefer `interface` over `type` for object shapes
+
+### React
+
+- Use **functional components** with hooks
+- Keep components focused — one component, one responsibility
+- Use the existing component patterns in `src/components/`
+- State management goes through the **Zustand store** (`src/stores/workspaceStore.ts`)
+
+### Styling
+
+- Use **Tailwind CSS v4** utility classes
+- Follow existing class naming conventions
+- Keep custom CSS in `src/index.css` minimal
+- Use `lucide-react` for icons — do not add other icon libraries
+
+### ESLint
+
+- Run `npm run lint` before committing
+- All ESLint rules are defined in `eslint.config.js`
+- Fix all linting errors before submitting a PR
+
+---
+
+## Pull Request Process
+
+### Before You Start
+
+1. Check [existing issues](https://github.com/ATC-O48/Claude-OpenAI-Code/issues) to avoid duplicate work
+2. For major changes, open an issue first to discuss the approach
+
+### Creating a Pull Request
+
+1. **Create a feature branch** from `main`:
+ ```bash
+ git checkout -b feature/your-feature-name
+ ```
+
+2. **Make your changes** following the code style guidelines
+
+3. **Verify your changes**:
+ ```bash
+ npm run lint # No errors
+ npm run build # Builds successfully
+ ```
+
+4. **Commit with a descriptive message**:
+ ```bash
+ git commit -m "feat: add description of your change"
+ ```
+
+ Follow [Conventional Commits](https://www.conventionalcommits.org/) format:
+ - `feat:` — New feature
+ - `fix:` — Bug fix
+ - `docs:` — Documentation only
+ - `refactor:` — Code refactoring
+ - `style:` — Formatting, missing semicolons, etc.
+ - `test:` — Adding or updating tests
+ - `chore:` — Build process, dependencies, etc.
+
+5. **Push and open a PR**:
+ ```bash
+ git push origin feature/your-feature-name
+ ```
+ Then open a PR against the `main` branch.
+
+### PR Review Checklist
+
+- [ ] Code follows the project's style guidelines
+- [ ] `npm run lint` passes with no errors
+- [ ] `npm run build` completes successfully
+- [ ] PR description explains the changes clearly
+- [ ] Screenshots included (for UI changes)
+
+---
+
+## Issue Guidelines
+
+### Bug Reports
+
+Use the [Bug Report template](https://github.com/ATC-O48/Claude-OpenAI-Code/issues/new?template=bug_report.yml) and include:
+
+- Clear description of the issue
+- Steps to reproduce
+- Expected vs. actual behavior
+- Browser and OS information
+- Screenshots if applicable
+
+### Feature Requests
+
+Use the [Feature Request template](https://github.com/ATC-O48/Claude-OpenAI-Code/issues/new?template=feature_request.yml) and include:
+
+- Clear description of the feature
+- Use case and motivation
+- Proposed solution
+- Alternatives considered
+
+### Good First Issues
+
+Look for issues labeled [`good-first-issue`](https://github.com/ATC-O48/Claude-OpenAI-Code/labels/good-first-issue) — these are great for new contributors.
+
+---
+
+## Project Architecture
+
+The project follows a component-based architecture:
+
+```
+src/
+├── components/ # React UI components
+│ ├── layout/ # Workspace layout (TopBar, Panes, etc.)
+│ ├── filetree/ # File tree sidebar
+│ ├── toolbar/ # Tools dock
+│ ├── search/ # Global search
+│ ├── resources/ # Resource monitoring
+│ ├── spotlight/ # Project settings
+│ └── tools/ # Individual tool components
+├── stores/ # Zustand state management
+├── types/ # TypeScript type definitions
+└── main.tsx # Application entry point
+```
+
+For detailed documentation, see the [docs/](docs/) directory.
+
+---
+
+## Questions?
+
+If you have questions about contributing, feel free to:
+
+- Open a [Discussion](https://github.com/ATC-O48/Claude-OpenAI-Code/discussions)
+- Check the [Documentation](docs/)
+- Review existing [Pull Requests](https://github.com/ATC-O48/Claude-OpenAI-Code/pulls) for examples
diff --git a/README.md b/README.md
index 7eafd2c..27829a9 100644
--- a/README.md
+++ b/README.md
@@ -1,137 +1,68 @@
-# Workspace IDE
-
-> A modern, flexible browser-based IDE built with React + TypeScript. Provides a complete development environment with resizable panes, tabbed editors, file management, and integrated tools.
-
----
+
-## Table of Contents
-
-- [Description](#description)
-- [Installation](#installation)
-- [Usage](#usage)
-- [Features](#features)
-- [Tech Stack](#tech-stack)
-- [Project Structure](#project-structure)
-- [Architecture](#architecture)
-- [Keyboard Shortcuts](#keyboard-shortcuts)
-- [Contributing](#contributing)
-- [License](#license)
-- [Contact](#contact)
-
----
-
-## Description
-
-Workspace IDE is a browser-based Integrated Development Environment that provides a multi-window, multi-pane workspace for software development. It enables users to manage files, execute code, view live previews, and monitor real-time resource telemetry -- all within a single browser tab.
-
-Key highlights:
-
-- **Multi-window support** with resizable, split, and floating panes
-- **Tabbed interface** for editors, terminals, previews, and more
-- **File tree** with full CRUD operations and context menus
-- **Integrated tools** including code editor, shell, console, AI agent, and secrets manager
-- **Real-time resource monitoring** for RAM, CPU, and storage
-- **Global search** with keyboard navigation (Ctrl+K)
-- **Spotlight page** for project metadata and sharing
+# Workspace IDE
----
+**A modern, flexible browser-based IDE built with React + TypeScript**
-## Installation
+[](https://github.com/ATC-O48/Claude-OpenAI-Code/actions/workflows/ci.yml)
+[](LICENSE)
+[](https://www.typescriptlang.org/)
+[](https://react.dev/)
+[](https://vitejs.dev/)
-1. **Clone the repository**
- ```sh
- git clone https://github.com/ATC-O48/Claude-OpenAI-Code.git
- cd Claude-OpenAI-Code
- ```
+A complete development environment in your browser — multi-window workspace with resizable panes, tabbed editors, file management, and integrated tools.
-2. **Install dependencies**
- ```sh
- npm install
- ```
+[Getting Started](#-getting-started) · [Features](#-features) · [Documentation](docs/) · [Contributing](CONTRIBUTING.md)
-3. **Start the development server**
- ```sh
- npm run dev
- ```
+
---
-## Usage
+## Screenshots
-### Development
-
-```sh
-# Start development server
-npm run dev
-
-# Build for production
-tsc -b && npm run build
-
-# Preview production build
-npm run preview
-
-# Run linter
-npm run lint
-```
-
-### Working with the IDE
-
-- Open the app in your browser after starting the dev server
-- Use the **File Tree** sidebar to browse and manage project files
-- Split panes horizontally or vertically via the **Options Menu** (three dots icon)
-- Access tools quickly from the **Tools Dock** at the bottom
-- Use **Ctrl+K** to open global search
-- Click the project name to open the **Spotlight Page** for project settings
+
+> _Screenshots coming soon — run `npm run dev` to see the IDE in action._
---
## Features
-### 1. Workspace Structure
-- **Windows**: Multiple browser tabs/windows support
-- **Panes**: Split horizontal/vertical, resize, drag-and-drop, floating mode
-- **Tabs**: Each tab hosts a tool (Editor, Preview, Console, Agent, etc.)
-
-### 2. File Tree
-- Browse and manage project files and folders
-- Open files in the editor
-- Context menu: rename, duplicate, move, download, delete
-- Create new files and folders
-
-### 3. Tools Dock
-- Quick-access toolbar at the bottom of the workspace
-- Open any tool with one click
-- Categories: primary tools, secondary tools, and "All Tools" browser
-
-### 4. Run Button
-- Start/stop the current workflow
-- Visual state change (green Run / red Stop)
-- Controls the Preview and Console output
-
-### 5. Spotlight Page
-- View and edit the project cover page
-- Set project name, description, and visibility (public/private)
-- Share link management
-- Accessible by clicking the project name
-
-### 6. Options Menu
-- Per-pane context menu (three dots icon)
-- **Window management**: Open new workspace windows
-- **Pane management**: Split, maximize, float/dock panes
-- **Tab management**: Move tabs between panes
-
-### 7. Search Bar
-- Global search modal (Ctrl+K)
-- Search across files, text content, and tools
-- Keyboard navigation support
-- Results categorized by type
-
-### 8. Resources Panel
-- Real-time display of RAM, CPU, and Storage usage
-- Color-coded progress bars (green/yellow/red)
-- Located at the bottom of the sidebar
-
-### 9. Integrated Tools
+
+
+
Multi-Window Workspace
+
Multiple browser windows with resizable, split, and floating panes
+
+
+
Tabbed Interface
+
Each pane hosts tabs for editors, terminals, previews, and more
+
+
+
File Tree
+
Full CRUD operations with context menus, drag-and-drop support
+
+
+
Integrated Tools
+
Code editor, shell, console, AI agent, secrets manager, and more
+
+
+
Resource Monitoring
+
Real-time RAM, CPU, and storage usage with color-coded indicators
+
+
+
Global Search
+
Keyboard-driven search (Ctrl+K) across files, content, and tools