# ID9 — r208 End-to-End Integration Plan — AI Summary

**Date**: 2026-08-30 | **Source**: a801 (full plan, 28 KB) — supersedes nothing (new plan)
**Thread**: vibecoder-standalone-mavis (9) | **Operator directive**: r208 bind r207 mounts to operator flow

---

## TL;DR (5 bullets)

- **r208 binds the 3 r207 mounts to the existing constitutional operator flow** (Gallery → Preview → Desktop), not inventing a new flow. **6 new files (~700 LoC)** at `avidtech6/vibecoder-standalone/src/host/integration/` + **2 LoC diffs** to `host-boot.js`. The interaction loop (region-click → inspector → preview → edit) is **already 80% there**; r208 closes the last 20%.
- **The 4 integration points**: (1) replace the r202 iframe-based VSIL panel with the r207 mounts in `openVsilPanel` (host-boot.js:803); (2) register the InspectorHost as a Dev Panel tab; (3) wire the Gallery cascade via `GalleryPreviewBridge`; (4) surface-state pills already work — no change needed (r207 hosts already filter by `targetSurface === ctx.activeSurface`).
- **The interaction loop is closed**: 4 user actions (Gallery click → region click → Edit click → Lock click), 8 r206 events (`composition:host-mounted`, `vsil:asset-bound`, `composition:host-focus`, `region:selected`, `region:transformed`, etc.), 3 r207 hosts, 1 new r208 EditBar. Every action has a clear event-driven response.
- **r208 introduces writes via the EditBar** (per the r207 v2 plan Q3 default). The r207 InspectorHost `readOnly={true}` invariant (a788) is preserved when the EditBar is unmounted; the EditBar is the only path to enable writes. **No pact edits**; no iframe; no postMessage.
- **8-step implementation plan**, 20-21h, 3-4 days end-to-end. Discovery-only this turn. **3 open questions** for operator: Edit scope (4 ops or just reset) / EditBar placement (VSIL + Dev, or VSIL only) / VPS deploy timing (now or after Playwright smoke).

## What this means for the operator

The constitutional operator flow is a 5-panel default arrangement (CMS LEFT, Edge RIGHT, Dev auto-init, VibeChat BOTTOM, **VSIL floating — currently an iframe to vibescope.freshvibeapps.com**). r208 changes ONE thing about this arrangement: the VSIL panel is no longer an iframe. It becomes 3 native React hosts that consume the r206 capability layer + r207 mount logic.

After r208 ships:
- The operator clicks a Gallery card → 3 hosts mount (no iframe, no network round-trip to vibescope.freshvibeapps.com)
- The operator clicks a region in the composition overlay → InspectorHost selects the region → VibeChat + Edge Panel respond
- The operator clicks "Edit" → EditBar renders inline → the operator can apply transforms/presets
- The operator clicks "Lock" → EditBar unmounts → the a788 READ-ONLY invariant is restored

**The 4-panel desktop arrangement is unchanged.** Only the VSIL panel's contents change.

## What's at risk

1. **r202 Path C iframe removal** — the r202 commit (`13b11a1` "iframe to vibescope.freshvibeapps.com") is the r208 direct conflict. The iframe-to-vibescope UX is the operator's current "inspect anything" path. r208 replaces it with native React. The migration must be **observable**: the new VSIL panel must look + feel like the iframe did (same dims, same content density) so the operator doesn't notice a regression.
2. **EditBar writes vs. a788 invariant** — r208 introduces writes via EditBar. The a788 pact says "inspector is read-only". r208's resolution: the InspectorHost is read-only by default; the EditBar is a separate component that mounts the write capabilities. The pact is preserved because the InspectorHost itself never writes. **But** this is a pact-relevant change — should be reviewed before implementation.
3. **Dev Panel Inspector tab replacement** — the Dev Panel currently has a stub Inspector tab (r202). r208 replaces it with the r207 InspectorHost. If the operator's Dev Panel is open during the deploy, the tab will reload and re-render.
4. **Playwright smoke gate** — the full interaction loop has 6+ steps. Playwright must exercise all of them before VPS deploy. Estimated 3h for a comprehensive smoke.

## 3 open questions (operator decides)

1. **Edit scope** (Q1): all 4 region ops (translate/scale/rotate/reset) + presets, or just `reset` for v1? → **default: all 4 ops + presets** (that's the EditBar's purpose)
2. **EditBar placement** (Q2): VSIL panel only, or also Dev Panel? → **default: both** — Dev Panel gets a dedicated Edit tab, VSIL panel has inline EditBar when edit mode is toggled
3. **VPS deploy timing** (Q3): now or after Playwright smoke? → **default: after Playwright smoke** (operator must verify the loop before deploy)

## What doesn't change

- r206 contract (StudioContext, EventPayloadMap, capability bags) — consumed as-is
- r207 mounts (PreviewHostVSIL, InspectorHost, CompositionGraphHost) — consumed as-is
- 5 surface states (MAIN / WORKING / DRAFT / PREVIEW / ORIGIN) — already filtered by r207 hosts
- The 4-panel default arrangement (CMS, Edge, Dev, VibeChat) — unchanged
- The Gallery cascade logic — already works via r206's `gallery.asset.bind` stub
- VibeChat + Edge Panel subscribers — they get the new events for free
- `a788` InspectorCard read-only invariant — preserved at the InspectorHost level (only the EditBar writes)

## Discuss-with-team topics

1. **a788 pact clarification**: does the pact permit a separate "EditBar" component that writes, while keeping the InspectorHost read-only? Or does a788 require ALL inspector-related code to be read-only? → recommend: the former — a788 governs the InspectorCard / InspectorHost; EditBar is a separate write component (similar to how Figma's Inspector is read-only but a separate "Edit object" mode allows writes).
2. **Edit mode session model**: should the EditBar be modal (operator must explicitly enter Edit mode) or persistent (always available, with a confirmation dialog on each write)? → recommend: modal — matches the Figma + macOS Inspector pattern, lower risk of accidental writes.
3. **Operator flow for the iframe removal**: should r208 ship a 1-time migration banner ("VSIL panel now uses native React") or silently replace? → recommend: silent replace — the r202 iframe was a Path C adapter (interim), r208 is the canonical state.

---

**Word count**: ~480. **Source report**: a801 (full, 28 KB). **Cross-references**: r206 (0746358), r207 (aabe651), a786, a788, a789, a791, r202, ID10 v0.6 (a643).