11 KiB
11 KiB
Goose Super - Built-In Tools Ecosystem
Vision: Lovable + Antigravity Hybrid
Goose Super should be a self-contained super-IDE where:
- Everything happens INSIDE Goose (no external tools unless approved)
- Apps/pages are built, previewed, and tested within Goose's built-in browser
- AI sees everything and can interact with its own UI
- Users go from idea → working app → deployed in one session
Core Principle: Built-In First
┌────────────────────────────────────────────────────────────────────┐
│ GOOSE SUPER │
│ │
│ User: "Build me a coffee shop website" │
│ ↓ │
│ ┌─────────────────────┬─────────────────────┬─────────────────┐ │
│ │ 📝 BUILT-IN EDITOR │ 🌐 BUILT-IN BROWSER│ 💬 AI CHAT │ │
│ │ (Monaco/VS Code) │ (Electron webview) │ (Qwen/Claude) │ │
│ │ │ │ │ │
│ │ - File tree │ - Live preview │ - Plan tasks │ │
│ │ - Multi-tab │ - Dev tools │ - Execute │ │
│ │ - Syntax highlight │ - Console output │ - Verify │ │
│ │ - IntelliSense │ - Network monitor │ - Self-correct │ │
│ └─────────────────────┴─────────────────────┴─────────────────┘ │
│ ↓ │
│ ┌─────────────────────┬─────────────────────┬─────────────────┐ │
│ │ 🖥️ COMPUTER USE │ 🔗 SERVER MGMT │ 📦 PACKAGE MGR │ │
│ │ (Desktop control) │ (SSH/Deploy) │ (npm/pip/etc) │ │
│ └─────────────────────┴─────────────────────┴─────────────────┘ │
└────────────────────────────────────────────────────────────────────┘
Complete Built-In Tools Matrix
🎨 DEVELOPMENT TOOLS (Always Use Built-In)
| Tool | Purpose | Implementation | External Fallback? |
|---|---|---|---|
| Monaco Editor | Code editing with IntelliSense | VS Code's Monaco (same core) | No - always built-in |
| File Manager | Create/edit/delete files/folders | Node.js fs operations | No - always built-in |
| Terminal | Run commands in project context | Node.js child_process | No - always built-in |
| Git Panel | Version control | isomorphic-git | Ask user for GitHub Desktop |
| Package Manager | Install dependencies | npm/yarn/pnpm via terminal | No - always built-in |
| Live Preview | See app in real-time | Electron BrowserView | No - always built-in |
| Dev Server | Hot-reload for React/Vue/etc | Vite built-in | No - always built-in |
| Console | View console.log output | Capture from BrowserView | No - always built-in |
| Network Monitor | See API calls | DevTools protocol | No - always built-in |
🌐 BROWSER TOOLS (Built-In Chromium)
| Tool | Purpose | Implementation |
|---|---|---|
| Built-In Browser | Preview apps, browse web | Electron BrowserView (Chromium) |
| DOM Inspector | Inspect/modify elements | Chrome DevTools Protocol |
| Screenshot | Capture visible page | BrowserView.capturePage() |
| Form Filler | Auto-fill forms | DOM manipulation |
| Navigation | Forward/back/refresh | BrowserView methods |
| Multi-Tab | Multiple pages open | Multiple BrowserViews |
| Cookie Manager | Save/restore sessions | Electron session API |
Browser Priority:
1. Use BUILT-IN browser for preview and web actions
2. Only open EXTERNAL browser if:
- User explicitly requests it ("open in Chrome")
- Authentication flow requires it (OAuth callbacks)
- Site blocks embedded browsers
→ Always ASK user first: "Need to open external browser for X. Approve?"
🖥️ COMPUTER AUTOMATION (Desktop Control)
| Tool | Purpose | Implementation |
|---|---|---|
| Screenshot | Capture screen state | PowerShell/screencapture |
| Element Finder | Find UI elements by name (UIAutomation) | NEW - Windows Accessibility API |
| Click | Click at position or element | mouse_event / robotjs |
| Type | Keyboard input | SendKeys / robotjs |
| Key Press | Hotkeys (Ctrl+C, etc) | SendKeys / robotjs |
| Window Manager | Focus/minimize/move windows | WinAPI calls |
| App Launcher | Open applications | start / open / exec |
| Clipboard | Read/write clipboard | Electron clipboard API |
🔗 SERVER & DEPLOYMENT (Remote Operations)
| Tool | Purpose | Implementation | Ask User? |
|---|---|---|---|
| SSH Connect | Connect to remote server | ssh2 library | Yes - show credentials dialog |
| Remote Exec | Run commands on server | ssh2 exec | No - once connected |
| SFTP Upload | Upload files to server | ssh2-sftp | No - once connected |
| SFTP Download | Download files from server | ssh2-sftp | No - once connected |
| Log Stream | Tail remote log files | ssh2 stream | No - once connected |
| Docker | Container management | SSH + docker commands | No |
| PM2 | Process management | SSH + pm2 commands | No |
📦 PROJECT SCAFFOLDING (Templates)
| Template | Stack | Files Created |
|---|---|---|
| Static Site | HTML/CSS/JS | index.html, style.css, script.js |
| React App | Vite + React | Full Vite React setup |
| Vue App | Vite + Vue | Full Vite Vue setup |
| Next.js | Next.js | Full Next.js setup |
| API Server | Express | Express with routes |
| Full-Stack | Next.js + DB | Full-stack with Prisma |
IDE Integration Strategy (VS Code Components)
Option A: Monaco Editor Only (Recommended)
Use VS Code's Monaco editor component standalone:
What we take from VS Code:
├── monaco-editor # The editor component
├── TextMate grammars # Syntax highlighting
├── Language services # IntelliSense for JS/TS/CSS/HTML
└── Extension host # (Optional) Support VS Code extensions
Pros: Lightweight, well-documented, npm package available Cons: No built-in file tree, terminals, or panels
Option B: VS Code in Electron (Heavy)
Embed full VS Code via code-server or similar:
What we embed:
├── Full VS Code UI
├── All extensions
├── Terminal
└── File explorer
Pros: Full IDE experience Cons: 200MB+ size, complex integration, version conflicts
Recommendation: Option A with custom panels
// Our architecture
goose-electron-app/
├── panels/
│ ├── EditorPanel.js // Monaco wrapper
│ ├── FileTreePanel.js // Custom file explorer
│ ├── TerminalPanel.js // xterm.js integration
│ ├── PreviewPanel.js // BrowserView wrapper
│ ├── ChatPanel.js // AI conversation
│ └── BrowserPanel.js // Web browsing
├── services/
│ ├── LanguageService.js // Monaco language features
│ ├── FileService.js // File operations
│ ├── ProjectService.js // Project management
│ └── DevServerService.js // Vite/webpack integration
Goose Super Flow: User Story
"Build me a landing page for a coffee shop"
Step 1: User types request
↓
Step 2: Goose creates project folder
↓
Step 3: Goose scaffolds HTML/CSS/JS files
├── Opens in BUILT-IN Editor (Monaco)
└── Shows in BUILT-IN Preview (BrowserView)
↓
Step 4: Goose writes code, preview updates live
↓
Step 5: User: "Make the header sticky"
↓
Step 6: Goose edits CSS, preview shows change instantly
↓
Step 7: User: "Deploy to my server"
↓
Step 8: Goose: "I need SSH credentials. Connect now?"
├── User provides credentials
└── Goose connects, uploads, restarts nginx
↓
Step 9: Goose: "Done! Live at http://your-server.com"
└── Shows in BUILT-IN Browser
External Tool Permission Flow
When Goose needs something external:
┌─────────────────────────────────────────────────────────────┐
│ ⚠️ Goose needs to use an external tool │
│ │
│ Tool: Google Chrome │
│ Reason: OAuth login requires external browser │
│ │
│ [✓ Approve] [✗ Deny] [Always allow for OAuth] │
└─────────────────────────────────────────────────────────────┘
Permission Categories:
- Always Built-In: Editor, preview, terminal, file ops
- Ask Once: SSH connections, API keys
- Ask Every Time: External browser, external apps
- Never Without Approval: Purchases, account actions
Implementation Priority
Week 1: Core Editor + Preview
- Monaco Editor integration
- File tree panel
- Live preview with BrowserView
- Hot reload via Vite
Week 2: Browser Superpowers
- Built-in browser for web actions
- DOM inspection
- Screenshot capture from browser
- Multi-tab support
Week 3: Smart Automation
- UIAutomation element finder
- Screenshot → verify → correct loop
- Better click/type reliability
Week 4: Server & Deploy
- SSH connection panel
- SFTP file upload
- Remote command execution
- Log streaming
Summary: What Makes Goose SUPER
| Capability | Current | Goal |
|---|---|---|
| Editor | ❌ None | ✅ Full Monaco IDE |
| Preview | ⚠️ Basic webview | ✅ Live hot-reload with dev tools |
| Browser | ⚠️ External only | ✅ Built-in Chromium |
| Automation | ⚠️ Blind clicking | ✅ Smart element discovery |
| Server | ❌ None | ✅ SSH/SFTP/Deploy |
| Projects | ❌ None | ✅ Save/load/scaffold |
Goose Super = Lovable (vibe coding) + Antigravity (computer use) + VS Code (IDE) in one package.