Add Theia base + Product OS vision and guides

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-02-10 13:23:03 -08:00
commit 9c78559f57
6 changed files with 777 additions and 0 deletions

35
.gitignore vendored Normal file
View File

@@ -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

299
Google_Cloud_Product_OS.md Normal file
View File

@@ -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

138
README.md Normal file
View File

@@ -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)

254
UI-DESIGN-GUIDE.md Normal file
View File

@@ -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

50
setup.sh Normal file
View File

@@ -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"

1
theia Submodule

Submodule theia added at 20138632ad