Architecture
lib/preview-generator/ — shared logic (SaaS + Extension)
PreviewModeManager
preview-mode-manager.ts
App Shell ↔ Isolated orchestration
detectFramework()
framework-routing.ts:L48
Next.js · Remix · Vite · Webpack · Parcel
PreviewFileManager
preview-file-manager.ts:L257
Tier 1 script swap · Tier 2 AST patch
buildNeedsPatchPrompt()
needs-patch-prompt.ts:L27
Shared AI prompt for both platforms
FileIO Abstraction
Node · VSCode · InMemory implementations
SaaS (browser)
parseComponent route
server/routes/parseComponent.ts
Replaced local detectFramework
PreviewSetupOverlay
client/.../PreviewSetupOverlay.tsx
Supported · Planned · Not planned table
lib/proxy/response-processor.ts — Shared pipeline (ext + SaaS)
Identical rewrite logic, parametrised by prefix
VS Code Extension
extension.ts activation
src/extension.ts:L109
detectUnsupportedProject() on start
detectUnsupportedProject()
services/ProjectDetector.ts:L154
RN · Tamagui · @tamagui/cli excluded
PreviewPanel
notifyUnsupportedProject() → webview
null clears error after fix
UnsupportedProjectScreen
webview-preview-panel/PreviewPanelApp.tsx
Fix → hypercanvas.fixUnsupportedProject
Preview Mode Decision Tree
App Shell Mode (default)
Component rendered at /__hypercanvas_preview__ route
Blank-segment layout strips chrome, inherits real wrap
Works with: Next.js App · Vite JSX router · Remix · Webpack
Status: supported ✓ (zero user setup)
Isolated Mode (opt-in via .hyperide/preview.tsx)
Tier 1: script swap entry for Vite / Parcel (zero AST cost)
Tier 2: AST entry patch for Webpack / CRA (bundler-native)
needs-patch: AI generates preview.tsx with real providers
Status: needs-patch → Fix button → AI prompt