Free

.github/workflows/cloudflare-pages.yml

@@ -0,0 +1,47 @@
+name: Deploy to Cloudflare Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+concurrency:
+  group: cf-pages-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: apps/we-dev-client
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Enable corepack and pnpm
+        run: |
+          corepack enable
+          corepack prepare [email protected] --activate
+
+      - name: Install dependencies (skip scripts)
+        run: pnpm install --ignore-scripts --frozen-lockfile=false
+
+      - name: Build
+        run: pnpm run builds
+
+      - name: Upload to Cloudflare Pages
+        uses: cloudflare/pages-action@v1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: we-dev-pages
+          directory: apps/we-dev-client/dist
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/deploy-cloudflare-pages.yml

@@ -0,0 +1,40 @@
+name: Deploy to Cloudflare Pages
+
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build for Cloudflare Pages
+        run: pnpm run build:pages
+
+      - name: Deploy to Cloudflare Pages
+        uses: cloudflare/pages-action@v1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: we-dev-pages
+          directory: apps/we-dev-client/dist
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

CLOUDFLARE_PAGES_DEPLOYMENT.md

@@ -0,0 +1,163 @@
+# Cloudflare Pages Deployment Guide
+
+This guide explains how to deploy the We Dev application to Cloudflare Pages.
+
+## Prerequisites
+
+- Node.js 18+ and pnpm installed
+- Cloudflare account with Pages enabled
+- Git repository connected to Cloudflare Pages
+
+## Quick Deployment
+
+### 1. Build the Application
+
+```bash
+# From the root directory
+pnpm run build:pages
+```
+
+This command will:
+- Build the React application using Vite
+- Copy Cloudflare Pages configuration files
+- Generate the `dist/` directory ready for deployment
+
+### 2. Deploy to Cloudflare Pages
+
+#### Option A: Using Wrangler CLI
+
+```bash
+# Install Wrangler if not already installed
+npm install -g wrangler
+
+# Login to Cloudflare
+wrangler login
+
+# Deploy to Pages
+wrangler pages deploy apps/we-dev-client/dist --project-name=we-dev-pages
+```
+
+#### Option B: Using Cloudflare Dashboard
+
+1. Go to [Cloudflare Dashboard](https://dash.cloudflare.com/)
+2. Navigate to Pages
+3. Create a new project or connect to existing Git repository
+4. Set build settings:
+   - **Build command**: `pnpm run build:pages`
+   - **Build output directory**: `apps/we-dev-client/dist`
+   - **Root directory**: `/` (root of repository)
+
+## Configuration Files
+
+### `wrangler.toml`
+```toml
+name = "we-dev-pages"
+pages_build_output_dir = "apps/we-dev-client/dist"
+```
+
+**Note:** Cloudflare Pages doesn't support the `[build]` section in `wrangler.toml`. Build commands should be configured in the Cloudflare Dashboard or GitHub Actions.
+
+### `_redirects`
+Handles SPA routing by redirecting all routes to `index.html`:
+```
+/*    /index.html   200
+```
+
+### `_headers`
+Sets security headers for the application:
+```
+/*
+  X-Frame-Options: DENY
+  X-Content-Type-Options: nosniff
+  Referrer-Policy: strict-origin-when-cross-origin
+  Permissions-Policy: camera=(), microphone=(), geolocation=()
+```
+
+### `_routes.json`
+Provides advanced routing configuration for Cloudflare Pages:
+```json
+{
+  "version": 1,
+  "include": ["/*"],
+  "exclude": [
+    "/assets/*",
+    "/manifest.webmanifest",
+    "/sw.js",
+    "/workbox-*.js",
+    "/icon-*.svg"
+  ],
+  "routes": [
+    {
+      "src": "/*",
+      "dest": "/index.html"
+    }
+  ]
+}
+```
+
+### `_worker.js`
+Custom worker script for additional routing logic and SPA support.
+
+## Build Process
+
+The build process includes:
+
+1. **Vite Build**: Compiles React application with optimizations for web deployment
+2. **PWA Generation**: Creates service worker and manifest files
+3. **Configuration Copy**: Copies all Cloudflare Pages configuration files
+4. **Worker Generation**: Creates `_worker.js` for advanced routing logic
+5. **Web Compatibility**: Ensures no Node.js/Electron dependencies in web build
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Build Failures**: Ensure all dependencies are installed with `pnpm install`
+2. **Routing Issues**: Verify `_redirects` file is properly copied to `dist/`
+3. **Asset Loading**: Check that `base` in Vite config is set to `/`
+
+### Build Commands
+
+```bash
+# Clean build
+rm -rf apps/we-dev-client/dist
+pnpm run build:pages
+
+# Development build
+cd apps/we-dev-client && pnpm dev
+
+# Production build only
+cd apps/we-dev-client && pnpm build:web
+```
+
+## Environment Variables
+
+If you need to set environment variables for Cloudflare Pages:
+
+1. Go to your Pages project settings
+2. Navigate to Environment variables
+3. Add any required variables (e.g., API keys)
+
+## Web Compatibility
+
+The application has been modified for web deployment:
+
+- **Conditional Imports**: Uses web-compatible components when building for web
+- **Node.js Polyfills**: Replaces Node.js specific code with web-compatible alternatives
+- **Electron Removal**: Excludes Electron-specific code from web builds
+- **Mock Implementations**: Provides mock implementations for desktop-only features
+
+## Performance Optimization
+
+The build includes:
+- Code splitting and lazy loading
+- PWA capabilities with service worker
+- Optimized assets with compression
+- Security headers for better protection
+
+## Support
+
+For issues with Cloudflare Pages deployment, check:
+- [Cloudflare Pages Documentation](https://developers.cloudflare.com/pages/)
+- [Wrangler CLI Documentation](https://developers.cloudflare.com/workers/wrangler/)
+- Build logs in Cloudflare Dashboard

apps/we-dev-client/global.css

@@ -5,16 +5,24 @@
 }
 @tailwind components;
 @tailwind utilities;
+/* Improved, unobtrusive scrollbars */
 * {
-  /* Firefox */
-  scrollbar-width: none;
-  /* IE 10+ */
-  -ms-overflow-style: none;
+  scrollbar-width: thin; /* Firefox */
+  -ms-overflow-style: auto; /* IE 10+ */
 }
-
-/* Webkit (Chrome, Safari, Edge) */
 *::-webkit-scrollbar {
-  display: none;
+  width: 8px;
+  height: 8px;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+*::-webkit-scrollbar-thumb {
+  background-color: rgba(100, 116, 139, 0.4);
+  border-radius: 999px;
+}
+.dark *::-webkit-scrollbar-thumb {
+  background-color: rgba(148, 163, 184, 0.35);
 }
 .ant-modal {
   top: unset;
@@ -90,5 +98,17 @@
   }
   body {
     @apply bg-background text-foreground;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  ::selection {
+    background: hsl(var(--primary) / 0.15);
+  }
+  input, select, textarea, button {
+    @apply outline-none transition-colors duration-200 ease-out;
+  }
+  input:focus, select:focus, textarea:focus {
+    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.2);
+    border-color: hsl(var(--primary));
   }
 }

apps/we-dev-client/index.html

@@ -1,22 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>We0</title>
-    <meta name="author" content="We0">
-    <meta name="robots" content="index,follow">
-    <meta name="googlebot" content="index,follow">
-    <meta name="bingbot" content="index,follow">
-    <meta name="alexa" content="index,follow">
-    <meta name="sitemap" content="index,follow">
-    <meta property="og:type" content="website">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>We Dev</title>
+    <meta name="description" content="We Dev - AI-powered code generation and development tool">
+    <meta name="theme-color" content="#7c3aed">
+    <link rel="icon" type="image/svg+xml" href="/icon-192x192.svg">
+    <link rel="apple-touch-icon" href="/icon-192x192.svg">
+    <link rel="manifest" href="/manifest.webmanifest">
 </head>
-
 <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
 </body>
-
 </html>

apps/we-dev-client/package.json

@@ -10,9 +10,12 @@
   "scripts": {
     "dev": "vite",
     "build": "cross-env ELECTRON=true vite build && electron-builder --mac --config electron-builder.json",
+    "build:web": "cross-env ELECTRON=false vite build",
+    "build:pages": "./scripts/build-pages.sh",
     "tsc": "tsc",
     "electron:dev": "vite",
     "builds": "vite build",
+    "build:cloudflare": "vite build",
     "postinstall": "electron-rebuild -f -w node-pty --arch=x64 && vite build && electron-builder install-app-deps"
   },
   "main": "dist-electron/main.js",
@@ -114,7 +117,8 @@
     "vite": "^5.0.8",
     "vite-plugin-dynamic-import": "^1.6.0",
     "vite-plugin-electron": "^0.15.5",
-    "vite-plugin-glsl": "^1.3.1"
+    "vite-plugin-glsl": "^1.3.1",
+    "vite-plugin-pwa": "^1.0.3"
   },
   "build": {
     "appId": "com.we0.app",