commit 9c78559f57ccc293c8b4c595ab26d305819a824f Author: mawkone Date: Tue Feb 10 13:23:03 2026 -0800 Add Theia base + Product OS vision and guides Co-authored-by: Cursor diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..30757320 --- /dev/null +++ b/.gitignore @@ -0,0 +1,35 @@ +# Theia build files +theia/node_modules/ +theia/packages/*/lib/ +theia/examples/*/lib/ +theia/examples/*/dist/ +theia/*.log +theia/.nyc_output/ +theia/coverage/ +theia/lerna-debug.log* +theia/npm-debug.log* + +# OS files +.DS_Store +.DS_Store? +._* +.Spotlight-V100 +.Trashes + +# IDE +.vscode/ +.idea/ +*.swp +*.swo +*~ + +# Temporary files +*.tmp +.cache/ + +# Distribution builds +theia/examples/electron/dist/ + +# Environment +.env +.env.local diff --git a/Google_Cloud_Product_OS.md b/Google_Cloud_Product_OS.md new file mode 100644 index 00000000..1886bc4b --- /dev/null +++ b/Google_Cloud_Product_OS.md @@ -0,0 +1,299 @@ +Google Cloud Product OS +Product-Centric IDE + SaaS Autopilot Platform (Requirements & Architecture) +Vision + +Build a Product-Centric IDE and Automation Platform dedicated exclusively to: + +Launching, growing, and operating SaaS products on Google Cloud + +This is NOT a general-purpose IDE. +This is a Product Operating System (Product OS) designed to unify: + +Code + +Marketing + +Analytics + +Growth + +Support + +Experiments + +Infrastructure + +AI-driven automation + +into one coherent platform. + +It delivers: + +A Cursor-like experience + +Without Cursor cost + +Powered by Gemini (Vertex AI) + +Optimized specifically for Google Cloud + +Focused exclusively on building & automating products + +Core Product Principles +1. Product-Centric, Not Code-Centric + +This platform optimizes for: + +Shipping, launching, growing, and optimizing products, not just writing code. + +2. Opinionated for Google Cloud + +This system is: + +Cloud Run-first + +Firestore / Cloud SQL-native + +BigQuery-native + +Cloud Build-native + +Gemini-native + +No AWS, no Azure, no multi-cloud abstraction. + +3. Automation First + +Everything is: + +Automatable + +Observable + +Auditable + +Optimizable + +4. AI as a Product Operator + +The AI is not just a coding assistant. +It is a: + +Product Operator AI +capable of coordinating marketing, growth, support, analytics, and code. + +IDE Structure: Product-Centric Layout + +Instead of a traditional IDE layout, the system must expose: + +Product OS +├── Code +├── Marketing +├── Analytics +├── Growth +├── Support +├── Experiments +└── Infrastructure + + +Each section is first-class and AI-assisted. + +Section Requirements +1. Code Section + +Purpose: + +Build and deploy product services + +Must support: + +Cloud Run services + +Cloud SQL / Firestore integration + +Secrets management + +Logs & traces + +Rollbacks + +Service templates + +Not required: + +Arbitrary framework support + +Every programming language + +Optimized languages: + +TypeScript / Node + +Python + +2. Marketing Section + +Purpose: + +Automate go-to-market and content execution + +Must support: + +Campaign generation + +Social scheduling (Missinglettr) + +Blog generation & updates + +Landing page updates + +Brand voice control + +Product update → campaign pipeline + +AI must: + +Convert product changes into launch content + +Adapt content to brand style + +3. Analytics Section + +Purpose: + +Understand product performance and causality + +Must support: + +Funnels + +Retention + +Activation + +Cohorts + +LTV + +Causal drivers + +Experiment results + +NOT a SQL editor. +This is a Product Intelligence Interface. + +AI must answer: + +"Why did conversion change?" +"What caused activation to drop?" +"What should we test next?" + +4. Growth Section + +Purpose: + +Optimize onboarding and conversion + +Must support: + +Funnel definitions + +Onboarding flows + +Growth experiments + +A/B tests + +Nudge systems + +Conversion optimization + +AI must: + +Detect drop-offs + +Recommend experiments + +Evaluate uplift + +5. Support Section + +Purpose: + +Integrate customer feedback and product health + +Must support: + +Ticket ingestion + +AI-assisted replies + +Knowledge base generation + +Product issue detection + +Issue → fix pipeline + +AI must: + +Generate replies + +Detect recurring issues + +Recommend fixes + +6. Experiments Section + +Purpose: + +Coordinate A/B tests and product experiments + +Must support: + +Experiment definitions + +Targeting + +Metrics tracking + +Statistical significance + +Rollout controls + +AI must: + +Suggest experiments + +Analyze results + +Recommend actions + +7. Infrastructure Section + +Purpose: + +Manage and monitor production systems + +Must support: + +Cloud Run deployments + +Firestore / Cloud SQL management + +Secrets + +Logs + +Traces + +Alerts + +Cost monitoring + +AI must: + +Detect anomalies + +Recommend optimizations + +Automate fixes diff --git a/README.md b/README.md new file mode 100644 index 00000000..b75416d4 --- /dev/null +++ b/README.md @@ -0,0 +1,138 @@ +# Product OS - Master AI + +> A Product-Centric IDE built on Eclipse Theia, optimized for Google Cloud and powered by Gemini AI. + +## Overview + +Product OS is NOT a general-purpose IDE. It's a **Product Operating System** designed to unify: + +- 💻 **Code** - Build and deploy Cloud Run services +- 📢 **Marketing** - Automate campaigns and content +- 📊 **Analytics** - Product intelligence and insights +- 🚀 **Growth** - Optimize onboarding and conversion +- 💬 **Support** - Customer feedback integration +- 🧪 **Experiments** - A/B testing and rollouts +- 🏗️ **Infrastructure** - Production monitoring + +All powered by AI and optimized for Google Cloud. + +## Vision + +See [Google_Cloud_Product_OS.md](./Google_Cloud_Product_OS.md) for complete vision and requirements. + +## Project Structure + +``` +master-ai/ +├── theia/ # Customized Eclipse Theia IDE +│ ├── packages/core/ # UI shell customization +│ ├── packages/terminal/ # Terminal customization +│ ├── packages/monaco/ # Editor themes +│ └── examples/electron/ # Mac app build +├── Google_Cloud_Product_OS.md # Product vision & requirements +├── UI-DESIGN-GUIDE.md # Design customization guide +└── README.md # This file +``` + +## Getting Started + +### Prerequisites + +- Node.js 20.x (use nvm) +- Python 3 +- Git + +### Installation + +```bash +# Clone this repo +git clone https://github.com/MawkOne/master-ai.git +cd master-ai/theia + +# Use Node 20 +nvm use 20 + +# Install dependencies +npm install + +# Build Electron app +npm run build:electron + +# Launch Product OS +npm run start:electron +``` + +## Customization + +See [UI-DESIGN-GUIDE.md](./UI-DESIGN-GUIDE.md) for complete customization guide. + +### Quick Design Changes + +**Change colors:** Edit `theia/packages/monaco/data/monaco-themes/vscode/dark_vs.json` + +**Change fonts:** Edit `theia/packages/core/src/browser/style/index.css` + +**Change layout:** Edit `theia/packages/core/src/browser/shell/application-shell.ts` + +## Development Workflow + +```bash +cd theia + +# Watch mode (auto-rebuild on changes) +npm run watch:electron + +# In another terminal, run the app +npm run start:electron +``` + +## Building Distribution + +```bash +cd theia/examples/electron + +# Build Mac app (.app, .dmg) +npm run package:mac + +# Output: dist/Product-OS-*.dmg +``` + +## Roadmap + +### Phase 1: Core Simplification ✅ +- [x] Clone Theia +- [x] Set up repository +- [ ] Lock dark theme +- [ ] Remove preference menus +- [ ] Simplify UI + +### Phase 2: Custom Layout +- [ ] Replace Application Shell structure +- [ ] Create 7 Product OS sections +- [ ] Custom navigation/activity bar +- [ ] Section-specific views + +### Phase 3: Google Cloud Integration +- [ ] Pre-configure GCP tools +- [ ] Add Gemini AI integration +- [ ] Remove non-GCP options + +### Phase 4: Product OS Features +- [ ] Marketing automation UI +- [ ] Analytics dashboards +- [ ] Growth experiment tools +- [ ] Support integration + +## Architecture + +Built on [Eclipse Theia](https://github.com/eclipse-theia/theia) - an extensible IDE framework using TypeScript and Electron. + +## License + +Based on Eclipse Theia: +- Eclipse Public License 2.0 +- GNU General Public License, version 2 with the GNU Classpath Exception + +## Author + +Built by [@MawkOne](https://github.com/MawkOne) diff --git a/UI-DESIGN-GUIDE.md b/UI-DESIGN-GUIDE.md new file mode 100644 index 00000000..6402f852 --- /dev/null +++ b/UI-DESIGN-GUIDE.md @@ -0,0 +1,254 @@ +# Product OS - UI Shell Design Guide + +## 🎨 Design Customization Map + +### **Quick Reference: Where to Change What** + +| What You Want to Change | File to Edit | Line/Section | +|------------------------|--------------|--------------| +| **Colors** | `packages/monaco/data/monaco-themes/vscode/dark_vs.json` | All colors | +| **Fonts** | `packages/core/src/browser/style/index.css` | Lines 40-62 | +| **Panel Sizes** | `packages/core/src/browser/shell/application-shell.ts` | Lines 2269-2288 | +| **Layout Structure** | `packages/core/src/browser/shell/application-shell.ts` | Lines 188-220 | +| **Borders & Spacing** | `packages/core/src/browser/style/index.css` | Lines 24-76 | + +--- + +## 1. COLOR CUSTOMIZATION + +### File: `packages/monaco/data/monaco-themes/vscode/dark_vs.json` + +```json +{ + "colors": { + "editor.background": "#1E1E1E", // Main editor area + "editor.foreground": "#D4D4D4", // Text color + + // SIDEBAR + "sideBar.background": "#252526", // Left/right sidebar background + "sideBarTitle.foreground": "#BBBBBB", // Sidebar titles + + // ACTIVITY BAR (left icon strip) + "activityBar.background": "#333333", // Activity bar background + "activityBarBadge.background": "#007ACC", // Badge colors (notifications) + + // PANELS (bottom area) + "panel.background": "#1E1E1E", // Bottom panel (terminal, etc) + "panel.border": "#454545", // Panel borders + + // TABS + "tab.activeBackground": "#1E1E1E", // Active tab + "tab.inactiveBackground": "#2D2D2D", // Inactive tabs + "tab.activeForeground": "#FFFFFF", // Active tab text + + // MENU + "menu.background": "#252526", // Menu background + "menu.foreground": "#CCCCCC", // Menu text + + // STATUS BAR (bottom) + "statusBar.background": "#007ACC", // Status bar background + "statusBar.foreground": "#FFFFFF", // Status bar text + + // BUTTONS + "button.background": "#0E639C", // Button background + "button.foreground": "#FFFFFF", // Button text + + // INPUTS + "input.background": "#3C3C3C", // Input fields + "input.foreground": "#CCCCCC", // Input text + "input.border": "#454545", // Input borders + } +} +``` + +--- + +## 2. TYPOGRAPHY + +### File: `packages/core/src/browser/style/index.css` + +```css +:root { + /* UI Font (menus, buttons, labels) */ + --theia-ui-font-size1: 13px; /* Base size */ + --theia-ui-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + + /* Code Font (editor, terminal) */ + --theia-code-font-size: 13px; + --theia-code-font-family: Menlo, Monaco, Consolas, "Droid Sans Mono"; + + /* Change to your preferred fonts: */ + /* --theia-ui-font-family: "Inter", "SF Pro", sans-serif; */ + /* --theia-code-font-family: "JetBrains Mono", "Fira Code", monospace; */ +} +``` + +--- + +## 3. SPACING & LAYOUT + +### File: `packages/core/src/browser/style/index.css` + +```css +:root { + --theia-ui-padding: 6px; /* General padding */ + --theia-border-width: 1px; /* Border thickness */ + --theia-panel-border-width: 1px; /* Panel borders */ + --theia-icon-size: 16px; /* Icon size */ +} +``` + +### File: `packages/core/src/browser/shell/application-shell.ts` + +```typescript +// Panel size ratios (line ~2269) +export const DEFAULT_OPTIONS = { + bottomPanel: { + initialSizeRatio: 0.382 // 38.2% of window height + }, + leftPanel: { + initialSizeRatio: 0.191 // 19.1% of window width + }, + rightPanel: { + initialSizeRatio: 0.191 // 19.1% of window width + } +} +``` + +--- + +## 4. QUICK DESIGN CHANGES - Copy & Paste + +### A. Modern Dark Blue Theme + +**File:** `packages/monaco/data/monaco-themes/vscode/dark_vs.json` + +```json +{ + "colors": { + "editor.background": "#0D1117", + "sideBar.background": "#161B22", + "activityBar.background": "#010409", + "activityBarBadge.background": "#1F6FEB", + "statusBar.background": "#1F6FEB", + "panel.background": "#0D1117", + "tab.activeBackground": "#0D1117", + "tab.inactiveBackground": "#161B22" + } +} +``` + +### B. Increase Font Sizes + +**File:** `packages/core/src/browser/style/index.css` + +```css +:root { + --theia-ui-font-size1: 15px; /* Was 13px */ + --theia-code-font-size: 15px; /* Was 13px */ +} +``` + +### C. Wider Sidebars + +**File:** `packages/core/src/browser/shell/application-shell.ts` + +```typescript +leftPanel: { + initialSizeRatio: 0.25 // 25% instead of 19.1% +}, +rightPanel: { + initialSizeRatio: 0.25 // 25% instead of 19.1% +} +``` + +### D. Smaller Bottom Panel + +```typescript +bottomPanel: { + initialSizeRatio: 0.30 // 30% instead of 38.2% +} +``` + +--- + +## 5. PRODUCT OS BRANDING + +### Custom Colors for Product OS + +```json +{ + "colors": { + // Google Cloud inspired + "activityBarBadge.background": "#4285F4", // Google Blue + "statusBar.background": "#34A853", // Google Green + "button.background": "#4285F4", + + // Dark background + "editor.background": "#121212", + "sideBar.background": "#1E1E1E", + "activityBar.background": "#0A0A0A", + } +} +``` + +--- + +## 🚀 Testing Your Changes + +### Development Workflow: + +1. **Edit design files** (CSS, JSON, TypeScript) +2. **Rebuild:** + ```bash + cd /Users/markhenderson/Cursor\ Projects/master-ai/theia + npm run build:electron + ``` +3. **Test:** + ```bash + npm run start:electron + ``` +4. **See changes immediately!** + +### Watch Mode (auto-rebuild): +```bash +npm run watch:electron +``` + +--- + +## 📁 File Structure Summary + +``` +theia/ +├── packages/ +│ ├── core/src/browser/ +│ │ ├── style/ +│ │ │ └── index.css ← Typography, spacing, borders +│ │ └── shell/ +│ │ └── application-shell.ts ← Panel sizes, layout structure +│ └── monaco/data/monaco-themes/vscode/ +│ └── dark_vs.json ← All colors +└── examples/electron/ + ├── package.json ← App name, branding + └── resources/ ← Icon, splash screen +``` + +--- + +## 🎯 Next Steps for Product OS Design + +1. **Lock dark theme** (remove light theme option) +2. **Custom color palette** (Google Cloud colors) +3. **Simplify UI** (hide developer-focused elements) +4. **Custom panels** (replace File Explorer with Product sections) +5. **Branding** (logo, splash screen, app icon) + +--- + +## 💡 Pro Tips + +- **CSS Variables** are your friend - change one variable, affects everywhere +- **Hot reload:** Changes to CSS show immediately with watch mode +- **Theme files:** JSON files control all colors - easy to swap themes +- **Test often:** Build and test frequently to see visual changes diff --git a/setup.sh b/setup.sh new file mode 100644 index 00000000..4b27eac7 --- /dev/null +++ b/setup.sh @@ -0,0 +1,50 @@ +#!/bin/bash +set -e + +echo "Starting setup for Product OS..." +cd "/Users/markhenderson/Cursor Projects/master-ai" + +# Clone Theia if not exists +if [ ! -d "theia" ]; then + echo "Cloning Theia repository..." + git clone https://github.com/eclipse-theia/theia.git + echo "Theia cloned successfully!" +else + echo "Theia directory already exists" +fi + +# Initialize git if needed +if [ ! -d ".git" ]; then + echo "Initializing git..." + git init +fi + +# Add remote if not exists +if ! git remote get-url origin > /dev/null 2>&1; then + echo "Adding GitHub remote..." + git remote add origin https://github.com/MawkOne/master-ai.git +fi + +# Stage all files +echo "Staging files..." +git add . + +# Commit +echo "Creating commit..." +git commit -m "Add Theia base + Product OS vision and guides" || echo "No changes to commit" + +# Set main branch +echo "Setting main branch..." +git branch -M main + +# Push to GitHub +echo "Pushing to GitHub..." +git push -u origin main --force + +echo "Setup complete! ✅" +echo "" +echo "Next steps:" +echo " cd theia" +echo " nvm use 20" +echo " npm install" +echo " npm run build:electron" diff --git a/theia b/theia new file mode 160000 index 00000000..20138632 --- /dev/null +++ b/theia @@ -0,0 +1 @@ +Subproject commit 20138632ad74383cf0d48c1cdbf46c0e9628141f