Add Theia base + Product OS vision and guides
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
35
.gitignore
vendored
Normal file
35
.gitignore
vendored
Normal 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
299
Google_Cloud_Product_OS.md
Normal 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
138
README.md
Normal 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
254
UI-DESIGN-GUIDE.md
Normal 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
50
setup.sh
Normal 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
1
theia
Submodule
Submodule theia added at 20138632ad
Reference in New Issue
Block a user