Files
OpenQode/docs/GOOSE_SUPER_MASTER_PLAN.md

606 lines
26 KiB
Markdown

# 🦆 GOOSE SUPER - MASTER PLAN
## Vision Statement
**Goose Super** = **Lovable** (vibe coding) + **Antigravity** (computer use) + **VS Code** (IDE) in one self-contained package.
> "Everything happens INSIDE Goose. No external tools unless user approves."
---
## Architecture Overview
```
┌────────────────────────────────────────────────────────────────────────────┐
│ GOOSE SUPER UI │
│ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ TOP BAR │ │
│ │ 🏠 Home │ 📝 Editor │ 🌐 Preview │ 🖥️ Computer │ 🔗 Server │ │
│ └──────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────┬────────────────────────────────────────────────────┐ │
│ │ FILE TREE │ MAIN WORKSPACE │ │
│ │ │ │ │
│ │ 📁 my-project │ ┌─────────────────┬─────────────────────────┐ │ │
│ │ 📄 index.html│ │ MONACO EDITOR │ LIVE PREVIEW │ │ │
│ │ 📄 style.css │ │ │ (Built-in Browser) │ │ │
│ │ 📄 script.js │ │ [code here] │ [renders app here] │ │ │
│ │ │ │ │ │ │ │
│ │ │ └─────────────────┴─────────────────────────┘ │ │
│ │ │ │ │
│ │ │ ┌────────────────────────────────────────────┐ │ │
│ │ │ │ TERMINAL / AI CHAT │ │ │
│ │ │ │ > npm run dev │ │ │
│ │ │ │ 🧠 IQ Exchange: Building coffee shop... │ │ │
│ │ │ └────────────────────────────────────────────┘ │ │
│ └─────────────────┴────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────────────────┘
```
---
## Core Systems
### 1. 🧠 IQ Exchange (The Brain)
**What it does:** Translates natural language → executable commands → self-heals on failure
```
User: "Open notepad and type hello"
IQ Exchange Translation Layer
[powershell input.ps1 open "Notepad"]
[powershell input.ps1 waitfor "Untitled" 5]
[powershell input.ps1 type "Hello"]
Execute → Screenshot → Verify → Self-Correct if needed
```
**Current State:** ✅ Working in `lib/iq-exchange.mjs` (536 lines)
- Translation layer with task type detection
- Execution with retry loop (max 5 attempts)
- Self-healing prompts sent to AI on failure
- Supports: Browser (Playwright), Desktop (input.ps1), Shell commands
**Improvements Needed:**
| Gap | Fix |
|-----|-----|
| No visual verification | Add screenshot → OCR → compare after each action |
| Limited element finding | Add UIAutomation element discovery |
| Looping is basic | Enhance with success criteria detection |
---
### 2. 📝 Built-In IDE (Monaco Editor)
**Purpose:** Write, edit, and manage code without leaving Goose
**Features to Add:**
- **Monaco Editor** from VS Code (same core)
- **File Tree** sidebar with create/delete/rename
- **Multi-Tab** editing
- **Syntax Highlighting** for all languages
- **IntelliSense** for JS/TS/CSS/HTML
- **Live Error Detection** (red underlines)
- **Git Panel** for version control
**Integration:**
```javascript
// Install
npm install monaco-editor
// Embed in Electron
import * as monaco from 'monaco-editor';
const editor = monaco.editor.create(document.getElementById('editor'), {
value: code,
language: 'javascript',
theme: 'vs-dark'
});
```
---
### 3. 🌐 Built-In Browser (Preview & Automation)
**Purpose:** Preview apps AND automate web tasks without external browsers
**Features:**
| Feature | Implementation |
|---------|----------------|
| Live Preview | Electron BrowserView (Chromium) |
| Hot Reload | Watch file changes → refresh |
| Dev Tools | Chrome DevTools Protocol |
| DOM Inspector | Expose element tree to AI |
| Multi-Tab | Multiple BrowserViews in tabs |
| Screenshot | `BrowserView.capturePage()` |
**Goose Always Uses Built-In Browser:**
```
1. AI generates HTML/CSS/JS
2. Files saved to project folder
3. Auto-starts Vite dev server
4. Preview loads in built-in browser
5. Changes appear instantly (hot reload)
```
**Only Ask User for External Browser When:**
- OAuth login requires real browser
- Site blocks embedded browsers
- User explicitly requests "open in Chrome"
---
### 4. 🖥️ Computer Use (Desktop Automation)
**Purpose:** Control Windows desktop - click, type, screenshot, etc.
**Current State:** ✅ Working in `computer-use.cjs` + `input.ps1`
**Tools Available:**
```powershell
# Vision (The Eyes)
input.ps1 app_state "Window Name" # UI tree structure
input.ps1 ocr "full" # Read all text on screen
input.ps1 screenshot "file.png" # Capture screen
# Navigation
input.ps1 open "App Name" # Launch/focus app
input.ps1 waitfor "Text" 10 # Wait for text to appear
input.ps1 focus "Element" # Focus element
# Interaction (Reliable via UIAutomation)
input.ps1 uiclick "Button Name" # Click by name
input.ps1 uipress "Item Name" # Toggle/select
input.ps1 type "Hello World" # Type text
input.ps1 key "Enter" # Press key
input.ps1 hotkey "Ctrl+C" # Key combo
# Fallback (Coordinates)
input.ps1 mouse 100 200 # Move mouse
input.ps1 click # Click at position
```
**Improvements Needed:**
- Replace PowerShell with native Node.js (`robotjs`/`nut.js`) for speed
- Add element grounding (label screenshot with clickable elements)
- Better OCR integration for finding text on screen
---
### 5. 🔗 Server Management (SSH/Deploy)
**Purpose:** Connect to remote servers, run commands, deploy apps
**Features to Add:**
```javascript
// Using ssh2 library
const { Client } = require('ssh2');
const conn = new Client();
conn.on('ready', () => {
conn.exec('pm2 restart all', (err, stream) => {
stream.on('data', (data) => console.log(data.toString()));
});
});
conn.connect({
host: '86.105.224.125',
username: 'root',
password: '***'
});
```
**UI Panel:**
- Saved connections list
- Command input with history
- Log stream viewer
- SFTP file browser
---
## Complete Tool Ecosystem
### Always Built-In (Never Ask)
| Tool | Purpose |
|------|---------|
| Monaco Editor | Code editing |
| File Manager | Create/edit/delete files |
| Terminal | Run commands |
| Live Preview | Show app in browser |
| Dev Server | Vite for hot reload |
| Console Output | Show logs |
| Screenshot | Capture for verification |
### Ask Once (Then Remember)
| Tool | When to Ask |
|------|-------------|
| SSH Connection | First time connecting to server |
| API Keys | First time using external API |
| Git Credentials | First time pushing to repo |
### Ask Every Time (Safety)
| Tool | Why |
|------|-----|
| External Browser | User might not want visible browser |
| System Settings | Prevent accidental changes |
| File Delete | Prevent data loss |
| Server Restart | Prevent downtime |
---
## IQ Exchange Flow (Enhanced)
```
┌─────────────────────────────────────────────────────────────────────┐
│ IQ EXCHANGE MAIN LOOP │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ User Request: "Build me a coffee shop landing page" │
│ ↓ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ STEP 1: DETECT TASK TYPE │ │
│ │ → [code, file, browser] │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ ↓ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ STEP 2: TRANSLATION LAYER │ │
│ │ "Build landing page" → │ │
│ │ • Create index.html │ │
│ │ • Create style.css │ │
│ │ • Create script.js │ │
│ │ • Start dev server │ │
│ │ • Open in preview │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ ↓ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ STEP 3: EXECUTE (with built-in tools) │ │
│ │ [FILE] Write index.html │ │
│ │ [FILE] Write style.css │ │
│ │ [FILE] Write script.js │ │
│ │ [TERMINAL] npx vite │ │
│ │ [PREVIEW] Load http://localhost:5173 │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ ↓ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ STEP 4: VERIFY (screenshot + analyze) │ │
│ │ • Screenshot preview panel │ │
│ │ • Send to AI: "Did this render correctly?" │ │
│ │ • If error detected → STEP 5 │ │
│ │ • If success → COMPLETE │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ ↓ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ STEP 5: SELF-HEAL (if verification failed) │ │
│ │ • Analyze error │ │
│ │ • Generate fix │ │
│ │ • Re-execute │ │
│ │ • Retry up to 5 times │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ ↓ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ STEP 6: LOOP (for persistent tasks) │ │
│ │ • Continue until user says stop │ │
│ │ • Or until success criteria met │ │
│ │ • Keep chat context for follow-ups │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘
```
---
## Session & Project Management
### Home Screen (First Thing User Sees)
```
┌──────────────────────────────────────────────────────────────┐
│ 🦆 GOOSE SUPER │
├──────────────────────────────────────────────────────────────┤
│ │
│ RECENT PROJECTS [+ New Project]│
│ ───────────────────────────────────────────────────────────│
│ 📁 Coffee Shop Landing Last edited: 2 hours ago [Open] │
│ 📁 Dashboard App Last edited: Yesterday [Open] │
│ 📁 API Server Last edited: 3 days ago [Open] │
│ │
│ RECENT SESSIONS [View All] │
│ ───────────────────────────────────────────────────────────│
│ 💬 "Build landing page" Dec 16, 3:30 PM [Load] │
│ 💬 "Fix login bug" Dec 15, 10:00 AM [Load] │
│ 💬 "Server setup help" Dec 14, 5:00 PM [Load] │
│ │
└──────────────────────────────────────────────────────────────┘
```
### Task Tracker (During Coding)
```
┌──────────────────────────────────────────────────────────────┐
│ ✅ TASK TRACKER [X] │
├──────────────────────────────────────────────────────────────┤
│ Current Goal: "Build coffee shop landing page" │
│ ───────────────────────────────────────────────── │
│ [x] Create project folder │
│ [x] Write index.html structure │
│ [/] Style with CSS (in progress...) │
│ [ ] Add JavaScript interactions │
│ [ ] Test responsiveness │
│ │
│ [Save Progress] [Clear Completed] [+ Add Task] │
└──────────────────────────────────────────────────────────────┘
```
### Data Storage
```javascript
// .opencode/projects.json - All projects
{
"projects": [
{
"id": "proj_001",
"name": "Coffee Shop Landing",
"path": "E:/Projects/coffee-shop",
"lastOpened": "2024-12-16T14:30:00Z",
"files": ["index.html", "style.css", "script.js"]
}
]
}
// .opencode/sessions/session_001.json - Chat sessions
{
"id": "session_001",
"title": "Build landing page",
"created": "2024-12-16T14:30:00Z",
"projectId": "proj_001",
"messages": [...],
"tasks": [
{ "text": "Create index.html", "done": true },
{ "text": "Style with CSS", "done": false }
]
}
```
---
## Implementation Phases
### Phase 0: Critical Fixes (FIRST - Before New Features)
> ⚠️ These are existing bugs that must be fixed before adding new capabilities
| Task | Effort | Priority |
|------|--------|----------|
| **2. Fix internal file save + preview pipeline** | 2 hours | 🔴 CRITICAL |
| **3. Fix layout squeeze and panel overlap** | 2 hours | 🔴 CRITICAL |
| **4. Repair IQ Exchange and action loop** | 3 hours | 🔴 CRITICAL |
| **5. Restore TODO/checklist sidebar + animations** | 2 hours | 🔴 CRITICAL |
| **6. Verify Playwright/browser automation flows** | 2 hours | 🔴 CRITICAL |
| **7. Run smoke tests and document results** | 1 hour | 🔴 CRITICAL |
**Details:**
0. **Internal File Save + Preview Pipeline**
- Fix file write operations in `main.cjs`
- Ensure saved files trigger preview refresh
- Verify hot-reload works with Vite/dev server
- Test create → save → preview flow end-to-end
1. **Layout Squeeze & Panel Overlap**
- Fix CSS flexbox/grid issues in `styles.css`
- Ensure panels resize correctly
- Test all panel combinations
2. **IQ Exchange & Action Loop**
- Debug `lib/iq-exchange.mjs` translation layer
- Fix action execution in `renderer.js`
- Verify self-healing retry loop works
3. **TODO/Checklist Sidebar**
- Restore sidebar visibility
- Add smooth slide animations
- Persist tasks to session
4. **Playwright/Browser Automation**
- Test all `playwright-bridge.js` commands
- Verify session persistence
- Fix any broken selectors
5. **Smoke Tests**
- Run full QA checklist
- Document pass/fail in `tests/SMOKE_TEST_RESULTS.md`
- Fix any critical failures
### ⚡ Optimized Phase 0 Execution Strategy (Batching)
> **Goal:** Complete typical 12-hour work in ~6 hours by grouping related file edits.
| Batch | Tasks Covered | Files Touched |
|-------|---------------|---------------|
| **BATCH 1** | #2 (Save), #3 (Layout), #5 (Sidebar) | `renderer.js`, `styles.css`, `main.cjs` |
| **BATCH 2** | #4 (IQ Loop) | `lib/iq-exchange.mjs`, `renderer.js` |
| **BATCH 3** | #6 (Playwright), #7 (Smoke Tests) | `playwright-bridge.js`, `tests/*` |
---
## Safety & Telemetry (Critical Protocol)
1. **🛑 Global STOP Button**: Must be visible in the UI at all times. Clicking it immediately kills `input.ps1` and Playwright processes.
2. **🔒 Safe Mode**: Computer Use defaults to "Ask for Confirmation" before every click. Includes toggle to switch to "**AUTO ACCEPT**" mode for trusted sessions.
3. **📝 Log Panel**: A minimal log viewer must be added to the bottom panel to debug "silent" failures.
- **Smart Error Handling**: Any error log must include an "**IQ Exchange**" button. Clicking it sends the error context back to the AI with a prompt to analyze, generate a fix, and self-heal.
---
### Phase 1: Core IDE Experience (Week 1-2)
| Task | Effort | Priority |
|------|--------|----------|
| Monaco Editor integration | 6 hours | 🔴 CRITICAL |
| File tree panel | 4 hours | 🔴 CRITICAL |
| Multi-tab editing | 3 hours | 🔴 CRITICAL |
| Live preview with hot reload | 4 hours | 🔴 CRITICAL |
| Project save/load | 2 hours | 🟠 HIGH |
| Template scaffolding | 2 hours | 🟠 HIGH |
### Phase 2: Enhanced IQ Exchange (Week 2-3)
| Task | Effort | Priority |
|------|--------|----------|
| Screenshot verification loop | 3 hours | 🔴 CRITICAL |
| UIAutomation element finder | 4 hours | 🔴 CRITICAL |
| Success criteria detection | 2 hours | 🟠 HIGH |
| Better looping logic | 2 hours | 🟠 HIGH |
| Native Node.js automation (robotjs) | 4 hours | 🟡 MEDIUM |
### Phase 3: Built-In Browser (Week 3-4)
| Task | Effort | Priority |
|------|--------|----------|
| Multi-tab BrowserView | 4 hours | 🟠 HIGH |
| DOM inspector for AI | 3 hours | 🟠 HIGH |
| Dev tools integration | 3 hours | 🟡 MEDIUM |
| Network monitor | 2 hours | 🟡 MEDIUM |
### Phase 4: Server & Deploy (Week 4-5)
| Task | Effort | Priority |
|------|--------|----------|
| SSH connection panel | 4 hours | 🟠 HIGH |
| Remote command execution | 2 hours | 🟠 HIGH |
| SFTP file transfer | 3 hours | 🟡 MEDIUM |
| Log streaming | 2 hours | 🟡 MEDIUM |
### Phase 5: Polish & UX (Week 5-6)
| Task | Effort | Priority |
|------|--------|----------|
| Onboarding wizard | 3 hours | 🟡 MEDIUM |
| Modularize renderer.js | 4 hours | 🟡 MEDIUM |
| Visual polish (dark mode, animations) | 4 hours | 🟡 MEDIUM |
| Error recovery UI | 2 hours | 🟡 MEDIUM |
---
## File Changes Summary
### New Files to Create
```
bin/goose-electron-app/
├── panels/
│ ├── EditorPanel.js # Monaco wrapper
│ ├── FileTreePanel.js # Project file browser
│ ├── PreviewPanel.js # BrowserView wrapper
│ ├── TerminalPanel.js # xterm.js terminal
│ ├── BrowserPanel.js # Web browsing (separate from preview)
│ └── ServerPanel.js # SSH/deployment UI
├── services/
│ ├── ProjectService.js # Save/load projects
│ ├── DevServerService.js # Vite integration
│ ├── SSHService.js # SSH connections
│ └── VerificationService.js # Screenshot → analyze loop
└── components/
├── OnboardingWizard.js # First-run setup
└── PermissionDialog.js # External tool approval
```
### Files to Modify
| File | Changes |
|------|---------|
| `main.cjs` | Add IPC handlers for new services |
| `renderer.js` | Refactor into modular panels |
| `preload.js` | Expose new APIs to renderer |
| `index.html` | Add panel containers, tabs |
| `styles.css` | Panel layouts, dark theme polish |
| `lib/iq-exchange.mjs` | Enhance with verification loop |
| `computer-use.cjs` | Add UIAutomation element finder |
### Dependencies to Add
```json
{
"dependencies": {
"monaco-editor": "^0.45.0",
"xterm": "^5.3.0",
"xterm-addon-fit": "^0.8.0",
"ssh2": "^1.15.0",
"isomorphic-git": "^1.25.0",
"robotjs": "^0.6.0"
}
}
```
---
## Verification Plan
### Automated Tests
```bash
# Run existing tests
npm test
# Add new tests for:
# - File operations
# - Project save/load
# - IQ Exchange translation
# - Screenshot capture
```
### Manual Testing Checklist
1. **Editor Test**
- Create new project
- Write HTML/CSS/JS
- See live preview update
2. **IQ Exchange Test**
- Say "open notepad"
- Verify it opens
- Say "type hello world"
- Verify text appears
3. **Browser Test**
- Navigate to google.com in built-in browser
- Search for "weather"
- Verify results appear
4. **Server Test**
- Connect via SSH
- Run `ls -la`
- Verify output shows
---
## Questions for User Approval
1. **Start with Phase 1?** (Monaco Editor + File Tree + Preview)
2. **Skip any phases?** (Maybe delay Server/SSH if not needed)
3. **Specific LLMs?** (Keep Qwen only or add OpenAI/Claude?)
4. **Design preferences?** (Specific colors, layouts?)
5. **Priority features?** (What to do first if time is limited?)
---
## Summary
**Goose Super will become a self-contained AI coding powerhouse that:**
✅ Writes code in a full IDE (Monaco Editor)
✅ Previews apps instantly (Built-in Browser)
✅ Controls the desktop intelligently (IQ Exchange + UIAutomation)
✅ Deploys to servers (SSH/SFTP)
✅ Self-heals on errors (Translation Layer + Looping)
✅ Never uses external tools without permission
**Total estimated effort: ~60 hours over 6 weeks**
---
*Ready for your approval to begin execution.*