Status: ✅ All green · 78/78 unit tests · 50/50 r211 combined Playwright smoke · 0 iframes · 0 postMessage
Date: 2026-08-30 17:01
Branch: feat/id9-r211-merge @ 2cb3494
Repo: avidtech6/vibecoder-standalone
Base: feat/id9-r210-minimal-header @ 419b339 + cherry-picked aabe651, 4d8fd92, d8e2cca from feat/id9-r208-integration @ d8e2cca
Unifies feat/id9-r208-integration and feat/id9-r210-minimal-header into a single operator runtime. All r206/r207/r208 invariants preserved. Mount order is now r206 → r207 → r208 → r210. 78/78 unit tests + 50/50 Playwright smoke = 128/128 total tests pass.
Conflict resolution:
1. host-boot.js: kept r210's mountMinimalHeader(), added r208's patchOpenVsilPanel() + bootR208Integration() BEFORE the minimal header. Comment block explains the order.
2. package.json: merged devDeps (kept all from both branches).
3. package-lock.json: regenerated from package.json (resolved 2 binary conflicts).
4. 01-boot.png (r208 smoke screenshot): took r208's post-fix version (r210 had a stale version).
Step 0: WDM (workspace manager) — workspace/index.ts
Step 1: PM2 (panel manager) — panel-manager.js
Step 2: Edge Panel — edge-panel.js
Step 3: CMS Panel — cms-panel.js
Step 3b: CMS store init + annotation
Step 4: Dev Panel
Step 5: Panel System v1.0.0
Step 6: ID10 host styles
Step 7: ID10 host modules (Preview Engine, etc.)
Step 8: Gallery (listModules + CATEGORIES)
Step 9: default arrangement
Step 10: Pro Mode lock UI
Step 11: workspace presets
5. Mount FreshVibeOrigin
6. Mount Edge Panel
6.5. r208: bind r207 mounts to operator flow
- patchOpenVsilPanel() replaces iframe with div
- bootR208Integration() sets up GalleryPreviewBridge,
CompositionHostMount, EditBar
7. r210: mountMinimalHeader() (Fv log + 1 surface + Gallery + Edge)The critical ordering: r208 boot runs BEFORE r210 minimal header mount. This ensures window.__fvcmsOpenEdgePanel, window.__fvcmsOpenGalleryPanel, and the r208 patch are all in place when the MinimalHeader React component mounts and renders its 4 elements.
| Branch | Files | What it provides |
|--------|-------|-------------------|
| r206 | src/host/workspace/context.ts, event-types.ts, capability-types.ts, vibechat-tools.ts, index.ts | 7 VSIL tool definitions, 33 typed events, surface-targeting via targetSurface field, READ-ONLY via {ok, reason} |
| r207 | src/host/mounts/PreviewHostVSIL.tsx, InspectorHost.tsx, CompositionGraphHost.tsx, mounts.ts, __tests__/mounts.test.ts | The 3 React mounts that wrap VSIL state + Inspector + Composition graph |
| r208 | src/host/integration/GalleryPreviewBridge.ts, CompositionHostMount.tsx, EditBar.tsx, r208-integration.ts, replace-iframe-vsil.js, __tests__/r208-integration.test.ts | Orchestrator + 4-tab CompositionHostMount + EditBar + iframe monkey-patch |
| r210 | src/host/header/MinimalHeader.tsx, GalleryPanel.tsx, __tests__/MinimalHeader.test.tsx, openGalleryPanel in host-boot.js | Minimal React header + new PM2 Gallery panel |
| r209 | (predecessor) | P0 header dead-code cleanup (mountAppBrowser, mountProPill, mountEdgePill, mountVibeChatPill) |
| Suite | Result |
|------|--------|
| r207 unit tests (mounts.test.ts) | 24/24 ✅ |
| r208 unit tests (r208-integration.test.ts) | 27/27 ✅ |
| r210 unit tests (MinimalHeader.test.tsx) | 27/27 ✅ |
| r211 combined Playwright smoke (r211-smoke.spec.cjs) | 50/50 ✅ |
| Total | 128/128 ✅ |
| Invariant | Status |
|-----------|--------|
| No iframe | ✅ (0 in r211 source, 0 in r208 mount tree, 0 in r210 mount tree) |
| No postMessage | ✅ (0 in r211 source) |
| Window-level event bus | ✅ (fvcms:active-surface-changed still on document) |
| Surface targeting (r206) | ✅ (StudioContext.surface + bus.emit('surface:activated', ...)) |
| Edge Panel open path | ✅ (window.__fvcmsOpenEdgePanel from r210 + r208) |
| WDM togglePillHidden still works | ✅ (API preserved, no pills to dim) |
| WDM attachEyeHandlers is NOT called | ✅ (r210) |
| PreviewHostVSIL functional | ✅ (Playwright smoke) |
| InspectorHost functional | ✅ (Playwright smoke) |
| CompositionGraphHost functional | ✅ (Playwright smoke) |
| EditBar functional | ✅ (Edit/Lock toggle in Playwright smoke) |
| Gallery panel opens | ✅ (Playwright smoke) |
| Edge icon opens Edge Panel | ✅ (Playwright smoke) |
| 4-tab CompositionHostMount | ✅ (Playwright smoke) |
src/host/header/ (r210)
MinimalHeader.tsx — React 18 component, 280 LoC
GalleryPanel.tsx — React 18 component, 210 LoC
__tests__/MinimalHeader.test.tsx — 27 assertions
src/host/mounts/ (r207)
PreviewHostVSIL.tsx — VSIL preview, 200 LoC
InspectorHost.tsx — 5 sub-modes, READ-ONLY default, 248 LoC
CompositionGraphHost.tsx — region list, 228 LoC
mounts.ts — 3 frozen capability manifests, 126 LoC
__tests__/mounts.test.ts — 24 assertions
src/host/integration/ (r208)
GalleryPreviewBridge.ts — Gallery card click → cascade, 123 LoC
CompositionHostMount.tsx — PM2 wrapper + 5-surface UI + 4 tabs, 141 LoC
EditBar.tsx — 4 region ops + presets, 167 LoC
r208-integration.ts — boot orchestrator, 141 LoC
replace-iframe-vsil.js — monkey-patches mgr.addPanel, 76 LoC
__tests__/r208-integration.test.ts — 27 assertions
src/host/workspace/ (r206 + r210)
context.ts — r206: StudioContext singleton
event-types.ts — r206: 33 typed events
capability-types.ts — r206: capability bag types
primitives.ts — r206: type definitions
types.ts — r206: utility types
index.ts — r206: initWorkspace (r210: attachEyeHandlers removed)
workspace-manager.ts — WDM (no changes from r209)
vibechat-tools.ts — r206: 7 VSIL tools
src/host/host-boot.js (r210 base + r208 6.5)
mountMinimalHeader() — r210: React minimal header
openGalleryPanel() — r210: PM2 Gallery opener
patchOpenVsilPanel() + bootR208Integration() — r208: iframe replacement + orchestrator
... (everything else: PM2, Edge, CMS, Dev, Pro Mode, workspace presets, etc.)
scripts/smoke/
r208-smoke.spec.cjs — r208 (33 assertions)
r210-smoke.spec.cjs — r210 (47 assertions)
r211-smoke.spec.cjs — combined (50 assertions, new)
screenshots/ — r208+r210 smoke
screenshots-r211/ — r211 smokeThe mount order matters because:
1. r206 (Step 0) — initWorkspace() must run first to set up the WDM + window.__fvcmsWorkspace.
2. PM2 (Step 1) — window.PanelManager must exist before any panel is added.
3. Edge Panel (Step 2) — __fvcmsOpenEdgePanel is registered; the Edge Panel module is imported.
4. CMS / Dev / Pro Mode / Workspace presets (Steps 3-11) — these are all PM2 addPanel calls; they need the PM2 manager from Step 1.
5. r208 boot (Step 6.5) — patches mgr.addPanel to intercept VSIL panel creation, and calls bootR208Integration() to set up the 3 mounts. This must run BEFORE the r210 minimal header so the MinimalHeader's Edge icon can call __fvcmsOpenEdgePanel (already registered) and the Gallery icon can call __fvcmsOpenGalleryPanel (registered in mountMinimalHeader).
6. r210 minimal header (Step 7) — mounts the React component. Uses createRoot from react-dom/client. The 4 elements (Fv log, surface, Gallery, Edge) are wired to existing window globals.
cd /workspace/vibecoder-standalone-r211
npm run build # build the production bundle
scp -O -r dist/* root@185.249.73.178:/var/www/freshvibeapps/clients/vibecoder/The r211 branch combines r208 + r210. Possible next steps:
main — single PR covering r207+r208+r210+r211 (the entire ID9 surface area)feat/id9-r210-minimal-header is the canonical "header" branch, it could absorb r208+r211 into a new r212 "header + mounts" branch.InspectorCard.tsx should be a 15 LoC wrapper around r207's InspectorHost.cd /workspace/vibecoder-standalone-r211
# Unit tests
npx tsx src/host/mounts/__tests__/mounts.test.ts # 24/24
npx tsx src/host/integration/__tests__/r208-integration.test.ts # 27/27
npx tsx src/host/header/__tests__/MinimalHeader.test.tsx # 27/27
# Playwright smoke (Vite dev server on :5275)
npx vite --port 5275 --host 0.0.0.0 &
node scripts/smoke/r211-smoke.spec.cjs # 50/50Expected: 78/78 unit + 50/50 Playwright = 128/128 total.